html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
html {
  background: #fff;
  color: #333;
  font: 12px/1.5em arial, helvetica, sans-serif;
}
body {
  font-size: 100%;
  text-align: center;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  position: relative;
  display: block;
  z-index: 1;
  margin: 0;
  padding: 0;
  zoom: 1;
}
@font-face {
  font-family: 'WebSymbolsRegular';
  src: url('/html5/fonts/websymbols-regular-webfont.eot');
  src: url('/html5/fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('/html5/fonts/websymbols-regular-webfont.woff') format('woff'), url('/html5/fonts/websymbols-regular-webfont.ttf') format('truetype'), url('/html5/fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
}
a,
form,
img {
  border: 0;
}
form,
img {
  outline: none;
}
label:focus {
  outline: 1px dotted #f30;
}
#main {
  position: relative;
  margin: 0 auto;
  width: 960px;
  text-align: left;
}
.rotate-me {
  position: relative;
  width: 200px;
  height: 200px;
  background: #fdc;
}
.rotate-me h1 {
  line-height: 1.3em;
  font-family: WebSymbolsRegular;
}
.tab-navigation {
  position: relative;
  margin: 0;
  padding: 15px 0;
  overflow: hidden;
}
.tab-navigation > input[type=radio] {
  position: absolute;
  left: -2000px;
  display: block;
  clear: none;
}
.tab-navigation ul.control {
  position: relative;
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tab-navigation ul.control li {
  position: relative;
  display: block;
  margin: 0;
  padding: 0 15px 15px;
  float: left;
  min-width: 60px;
  max-width: 60px;
}
.tab-navigation ul.control li:before {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  top: 15px;
  left: 0;
  color: #d3d3d3;
  content: "\003E";
  font-family: WebSymbolsRegular;
  font-size: 21px;
  line-height: 22px;
  overflow: visible;
}
.tab-navigation ul.control li:first-child:before {
  display: none;
}
.tab-navigation ul.control li label {
  display: block;
  padding: 0;
  color: #005C9E;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.tab-navigation ul.control li label:focus {
  outline: 1px dotted #f30;
}
.tab-navigation ul.control li label span {
  display: block;
  line-height: 1.3em;
  font-size: 2em;
  font-family: WebSymbolsRegular;
}
.tab-navigation ul.control li label.current,
.tab-navigation ul.control li label:active,
.tab-navigation ul.control li label:hover {
  color: #69BD28;
}
.tab-navigation .content {
  position: relative;
  display: none;
  width: 890px;
  min-height: 327px;
  margin: 0;
  padding: 30px 15px 15px;
  background-color: #efefef;
  background-repeat: no-repeat;
  background-position: 0 0;
  overflow: hidden;
}
.tab-navigation .content h2,
.tab-navigation .content p {
  margin: 0 55% 1.25em 0;
}
.tab-navigation .content {
  background-image: url(dummy/s1.jpg);
}
.tab-navigation .content .arrow b {
  width: 30px;
}
.tab-navigation .content .arrow i {
  width: 860px;
}
.tab-navigation .content ~ .content {
  background-image: url(dummy/s2.jpg);
}
.tab-navigation .content ~ .content .arrow b {
  width: 120px;
}
.tab-navigation .content ~ .content .arrow i {
  width: 770px;
}
.tab-navigation .content ~ .content ~ .content {
  background-image: url(dummy/s3.jpg);
}
.tab-navigation .content ~ .content ~ .content .arrow b {
  width: 210px;
}
.tab-navigation .content ~ .content ~ .content .arrow i {
  width: 680px;
}
.tab-navigation .content ~ .content ~ .content ~ .content {
  background-image: url(dummy/s4.jpg);
}
.tab-navigation .content ~ .content ~ .content ~ .content .arrow b {
  width: 300px;
}
.tab-navigation .content ~ .content ~ .content ~ .content .arrow i {
  width: 590px;
}
.tab-navigation .content ~ .content ~ .content ~ .content ~ .content {
  background-image: url(dummy/s5.jpg);
}
.tab-navigation .content ~ .content ~ .content ~ .content ~ .content .arrow b {
  width: 390px;
}
.tab-navigation .content ~ .content ~ .content ~ .content ~ .content .arrow i {
  width: 500px;
}
.tab-navigation .content ~ .content ~ .content ~ .content ~ .content ~ .content {
  background-image: url(dummy/s6.jpg);
}
.tab-navigation .content ~ .content ~ .content ~ .content ~ .content ~ .content .arrow b {
  width: 480px;
}
.tab-navigation .content ~ .content ~ .content ~ .content ~ .content ~ .content .arrow i {
  width: 410px;
}
.tab-navigation .arrow {
  position: absolute;
  width: 100%;
  height: 15px;
  max-height: 15px;
  top: 0;
  left: 0;
  overflow: hidden;
  clear: none;
  /*
			IE need this specific ordering or else it just won't follow z-index
		*/

}
.tab-navigation .arrow b,
.tab-navigation .arrow i {
  position: relative;
  display: block;
  content: " ";
  height: 15px;
  float: left;
  clear: none;
  top: 0;
  background: #fff;
  overflow: visible;
  -moz-box-shadow: inset 0 -2px 0px #d3d3d3;
  -webkit-box-shadow: inset 0 -2px 0px #d3d3d3;
  box-shadow: inset 0 -2px 0px #d3d3d3;
}
.tab-navigation .arrow b {
  margin-right: 0;
}
.tab-navigation .arrow i {
  margin-left: 30px;
}
.tab-navigation .arrow b .b,
.tab-navigation .arrow b .a,
.tab-navigation .arrow i .b,
.tab-navigation .arrow i .a,
.tab-navigation .arrow b:before,
.tab-navigation .arrow b:after,
.tab-navigation .arrow i:before,
.tab-navigation .arrow i:after {
  position: absolute;
  display: block;
  content: " ";
  width: 0;
  height: 0;
  background: none;
  overflow: visible;
  top: 0;
}
.tab-navigation .arrow b .b,
.tab-navigation .arrow i .b,
.tab-navigation .arrow b:before,
.tab-navigation .arrow i:before {
  z-index: 2;
  top: 0;
}
.tab-navigation .arrow b .a,
.tab-navigation .arrow i .a,
.tab-navigation .arrow b:after,
.tab-navigation .arrow i:after {
  z-index: 3;
  top: -2px;
}
.tab-navigation .arrow b .a,
.tab-navigation .arrow b:after {
  right: -15px;
  border-style: solid;
  border-color: #ffffff transparent transparent #ffffff;
  border-width: 15px 15px 15px 0;
}
.tab-navigation .arrow i .a,
.tab-navigation .arrow i:after {
  left: -30px;
  border-style: solid;
  border-color: #ffffff #ffffff transparent transparent;
  border-width: 0 15px 15px 15px;
}
.tab-navigation .arrow b .b,
.tab-navigation .arrow b:before {
  right: -17px;
  border-style: solid;
  border-color: #d3d3d3 transparent transparent #d3d3d3;
  border-width: 17px 17px 17px 0;
}
.tab-navigation .arrow i .b,
.tab-navigation .arrow i:before {
  left: -34px;
  border-style: solid;
  border-color: #d3d3d3 #d3d3d3 transparent transparent;
  border-width: 0 17px 17px 17px;
}
.tab-navigation #view1:checked ~ .views .content:nth-child(1),
.tab-navigation #view2:checked ~ .views .content:nth-child(2),
.tab-navigation #view3:checked ~ .views .content:nth-child(3),
.tab-navigation #view4:checked ~ .views .content:nth-child(4),
.tab-navigation #view5:checked ~ .views .content:nth-child(5),
.tab-navigation #view6:checked ~ .views .content:nth-child(6) {
  display: block;
}
.tab-navigation #view1:checked ~ .control li:nth-child(1) label,
.tab-navigation #view2:checked ~ .control li:nth-child(2) label,
.tab-navigation #view3:checked ~ .control li:nth-child(3) label,
.tab-navigation #view4:checked ~ .control li:nth-child(4) label,
.tab-navigation #view5:checked ~ .control li:nth-child(5) label,
.tab-navigation #view6:checked ~ .control li:nth-child(6) label {
  color: #69BD28;
}
@media screen {
  
}
@media print {
  
}
.ie .tab-navigation .arrow b,
.ie .tab-navigation .arrow i {
  border-bottom: 2px solid #d3d3d3;
  top: -2px;
}
.ie .tab-navigation .arrow b .b,
.ie .tab-navigation .arrow i .b {
  top: 2px;
}
.ie .tab-navigation .arrow b .a,
.ie .tab-navigation .arrow i .a {
  top: 0;
}