/* reset.css */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:3px solid #0092bf; }ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

@font-face {
	font-family: 'museo-sans-1';
	src: url('fonts/museosans_500-webfont.eot');
	src: local('☺'), url('fonts/museosans_500-webfont.woff') format('woff'), url('fonts/museosans_500-webfont.ttf') format('truetype'), url('fonts/museosans_500-webfont.svg#webfont6kY1IVGu') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Museo_Slab_100';
	src: url('fonts/Museo_Slab_100-webfont.eot');
	src: local('☺'), url('fonts/Museo_Slab_100-webfont.woff') format('woff'), url('fonts/Museo_Slab_100-webfont.ttf') format('truetype'), url('fonts/Museo_Slab_100-webfont.svg#webfont6kY1IVGu') format('svg');
	font-weight: normal;
	font-style: normal;
}



@font-face {
	font-family: 'league-gothic-1';
	src: url('fonts/League_Gothic-webfont.eot');
	src: local('☺'), url('fonts/League_Gothic-webfont.woff') format('woff'), url('fonts/League_Gothic-webfont.ttf') format('truetype'), url('fonts/League_Gothic-webfont.svg#webfontOTINA1xY') format('svg');
	font-weight: normal;
	font-style: normal;
}



@font-face {
	font-family: 'calluna';
	src: url('fonts/calluna-regular-webfont.eot');
	src: local('☺'), url('fonts/calluna-regular-webfont.woff') format('woff'), url('fonts/calluna-regular-webfont.ttf') format('truetype'), url('fonts/calluna-regular-webfont.svg#webfonts6RMrQrn') format('svg');
	font-weight: normal;
	font-style: normal;
}






body {
  background: #d9d9d9;
  font-family: Helvetica, Arial, Sans-serif;
}

h2 {
  font-size: 30px;
  text-transform: uppercase;
  font-family: "league-gothic-1", Impact, sans-serif;
}


h3 {
  font-size: 24px;
  text-transform: uppercase;
  font-family: "league-gothic-1", Impact, sans-serif;
}

#faq h3 {
  font-size: 34px;
  text-transform: uppercase;
  font-family: "league-gothic-1", Impact, sans-serif;
  color:#0092bf;
}

.no-fontface h2, .no-fontface h3, .no-fontface #faq h3 {
  font-weight: normal !important; /* this will be easier, trust me. */
  font-size: 28px;
}
.no-fontface h3 {
  font-size: 20px;
}


p {
  font-family: "calluna";
  margin-bottom: 1em;
}

a {
  color: #0092bf;
  text-decoration: none;
}

nav {
  cursor: pointer;
  /*width: 60px; 148px;*/
  min-width: 60px;
  max-width: 148px;
  margin: 0;
  padding: 0;
  background: #0092bf;
  position: fixed;
  left: 0px;
  top: 194px;
  text-align: center;
  overflow: hidden;
  color: #fff;
  z-index: 1000;

  _display: none; /* ie6 */
}

nav #navmenu { display: none;}
nav:hover #navmenu { display: block;}
nav:hover #navhdr { display: none; }

nav h2 {
  display: block;
  width: 60px;
  margin-left: auto;
  margin-right: auto;
}

nav ul {
  text-align: left;
  width: 148px;
}

nav a {
  color: #fff;
  display: block;
  padding: 6px 0 4px 16px;
  font-style: normal;
}

nav a:hover, nav a:focus  {
  background:#f14a29;
  outline:0;
}



#wrapper {
  width: 1000px;
  margin: 0px auto;
  padding: 48px 0 0 0px;
}

header, #main-header {
  width: 1000px;
  height: 676px;
  background: url('../img/html5-topper.png');
  margin: 0 0 10px 0;
  display: block;
}

#main-header h1, #main-header h2 {
  display:none;
}

.tag-bar {
  width: 1000px;
  background: #0092bf;
  clear: both;
}

.tag-bar h2 {
  font-size: 80px;
  line-height: 140px;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0 36px;
  color: #fff;
}
.no-fontface .tag-bar h2 {
  font-size: 55px;
}

section {
  margin:10px 0 0 0;
  display:block;
}

section section {
  margin:0;
}

#the-logo-display {
  width: 495px;
  height: 498px;
  margin: 0 10px 10px 0;
  float: left;
  background-color: #fff;
  background-image: url('../img/html5-display.png');
}

#the-logo-display-faq {
  width: 495px;
  min-height: 600px;
  margin: 0 10px 10px 0;
  float: left;
  background-color: #fff;
  background-image: url('../img/html5-display.png');
  background-repeat:no-repeat;
}

#the-logo-description {
  width: 429px;
  height: 410px;
  background: #fff;
  margin: 0 0 10px 0;
  padding: 44px 33px;
  float: left;
}

#the-logo-description-faq {
  width: 429px;
  min-height: 512px;
  background: #fff;
  margin: 0 0 10px 0;
  padding: 44px 33px;
  float: left;
}



#the-logo-description h2, #the-logo-description-faq h2 {
  color: #f14a29;
  font-size: 70px;
  margin: 66px 0 26px 0;
}

#the-logo-description h3, #the-logo-description-faq h3 {
  color: #000;
  font-size: 35px;
  margin: 0 0 26px 0;
}

#the-logo-description-faq h2#faq-header {
  color: #f14a29;
  font-size: 34px;
  margin: 0 0 26px 0;
}


#the-logo-description p, #the-logo-description-faq p {
  font-size: 19px;
  line-height: 26px;
  margin: 0 0 26px 0;
}

#the-logo-description p i, #the-logo-description-faq p i {
  font-style:italic;
}

#the-logo-description li, #the-logo-description-faq li {
  font-size: 14px;
  line-height: 18px;
  margin: 0 0 16px 0;
  text-transform:uppercase;
}

#the-logo a:focus {
	outline:0;
	color:#ebebeb;
}

#faq p {
  font-size: 19px;
  line-height: 26px;
  margin: 0 0 50px 0;
}

.the-logo-aside {
  width:276px;
  background: #fff url('../img/logo-aside-orange.png') no-repeat 0 bottom;
  position: relative; /* pos abs for the orangelinks */
  float:left;
  height: 200px;
  margin: 0 0 10px 0; /* right margin gets augmented to 10 in lower definitions */
  padding: 21px 25px;

  _margin: 0 5px 5px 0; /* ie6 */
}


#use-logo {
  margin-right:10px;
}

#wear-logo {
  background-image: url('../img/logo-aside-orange.png');
  margin-right:10px;
}

#follow-logo {
  _margin-right:0px;
  background-image: url('../img/logo-aside-orange.png');
}


.the-logo-aside h3 {
  color: #0092bf;
  font-size: 40px;
  margin-bottom: 10px;
}

.no-fontface .the-logo-aside h3 {
  font-size: 30px;
}

.the-logo-aside p {
  font-size:14px;
  line-height:16px;
  font-style:italic;
}

.the-logo-aside img {
  display: block;
}

.the-logo-aside a {
  font-family: "calluna";
  font-size:16px;
  line-height:16px;
  margin-right:5px;
}

.the-logo-aside li {
   display:inline;
}

.orange-links {
  position: absolute;
  left: 25px;
  bottom: 12px;
  height: 49px;
  width: 280px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

}

.orange-right {
  margin-top:48px;
}

.orange-links li {
  display:inline;
  margin:0;
  padding:0;
}

a.orange-link-text  {
	display:block;
	color:#fff;
	font-size:12px;
	text-transform:uppercase;
	font-family: "museo-sans-1", 'Trebuchet MS', sans-serif;
  font-weight:100;
	padding:5px 5px 0 10px;
}



.orange-links li a {
  display:block;
  float: left;
  color:#fff;
  font-size:12px;
  text-transform:uppercase;
  font-family: "museo-sans-1", 'Trebuchet MS', sans-serif;
  font-weight:100;
}


#bb-icon {
	width:70px;
	height:44px;
	background:url('../img/badge-builder-orange.png') no-repeat;
	padding:5px 5px 0 48px;
}

#bb-icon:hover, #bb-icon:focus {
	background:url('../img/badge-builder-orange-action.png');
	background-repeat:no-repeat;
}

#dl-icon {
	width:80px;
	height:42px;
	background:url('../img/downloads-orange.png') no-repeat;
	padding:5px 5px 0 56px;
}

#dl-icon:hover, #dl-icon:focus {
	background:url('../img/downloads-orange-action.png');
	background-repeat:no-repeat;
}


#sticker-icon {
	width:66px;
	height:45px;
	background:url('../img/free-stickers-orange.png') no-repeat;
	padding:5px 5px 0 52px;
}

#sticker-icon:hover, #sticker-icon:focus {
	background:url('../img/free-stickers-orange-action.png');
	background-repeat:no-repeat;
}

#gear-icon {
	width:62px;
	height:47px;
	background:url('../img/gear-orange.png') no-repeat;
	padding:5px 5px 0 72px;
}

#gear-icon:hover, #gear-icon:focus {
	background:url('../img/gear-orange-action.png');
	background-repeat:no-repeat;
}


#submit-icon {
	width:62px;
	height:45px;
	background:url('../img/submit-icon.png') no-repeat;
	padding:5px 5px 0 56px;
}

#submit-icon:hover, #submit-icon:focus {
	background:url('../img/submit-icon-action.png');
	background-repeat:no-repeat;
}

#gallery-icon {
	width:80px;
	height:47px;
	background:url('../img/gallery-icon.png') no-repeat;
	padding:5px 5px 0 56px;
}

#gallery-icon:hover, #gallery-icon:focus {
	background:url('../img/gallery-icon-action.png');
	background-repeat:no-repeat;
}



#the-technology {
  clear:both;
}

#the-current-class {
  margin:0 10px 10px 0;
  position:relative;
  float:left;
  background:#000;
  width:495px;
  height:370px;

  _margin: 0 5px 5px 0; /* ie6 */
}

.ielt8 #the-current-class {
  display: none;
}

#the-technology-overview {
  width:447px;
  margin:0 0 0 0px;
  float:left;
  background:#fff;
}


#semantics-header, #offline-storage-header, #device-access-header,
#connectivity-header, #multimedia-header, #threed-effects-header,
#performance-integration-header, #css3-styling-header {
  position: absolute;
  top: 0;
  left: 0;
}

#the-classes {
  width:495px;
  margin:0 9px 0 0;
  float:left;
}

.ielt8 #the-classes {
  display:none;
}

#the-classes-right {
  width:496px;
  float:left;
}

#the-classes ul {
  position:relative;
  margin:0 0 0 0;
  float:left;
}

#the-classes li {
  display:block;
  height:116.25px;
  width:116.25px;
  float:left;
  background:#fff;
  margin:0 10px 10px 0;
}

.ie8 #the-classes li {
  overflow: hidden;
}

#the-classes li.class-end {
  margin-right:0;
}

#the-classes li a {
  display:block;
  width:116px;
  height:116px;
  background-image:url('../img/icons-2.png');
  padding-right: 20px;
  margin-right: -20px;
  position: relative;
  left: 0; top: 0;
  z-index: 0;
  overflow: hidden;
}

#the-classes li a:focus {
	outline:0;
	}

#the-classes li a.active {
  background-color: #0092be;
  z-index: 600;
}

#the-classes li a.active span {
  display: block;
  width: 136px;
  height: 116px;
  background-image:url('../img/icon-right.png');
  position:absolute;
  left: 0; top: 0;
}

#semantics-icon {
}

#semantics-icon:hover, #semantics-icon:focus {
  background-position: 0px -116px;
  outline:0;
}

#semantics-icon.active{
  background-position: 0px -232px;
}

#offline-storage-icon {
  background-position: -116px 0px;
}

#offline-storage-icon:hover, #offline-storage-icon:focus {
  background-position: -116px -116px;
  outline:0;
}

#offline-storage-icon.active {
  background-position: -116px -232px;
}

#device-access-icon {
  background-position: -232px 0px;
}

#device-access-icon:hover, #device-access-icon:focus {
  background-position: -232px -116px;
  outline:0;
}

#device-access-icon.active{
  background-position: -232px -232px;
}

#connectivity-icon {
  background-position: -348px 0px;
}

#connectivity-icon:hover, #connectivity-icon:focus {
  background-position: -348px -116px;
   outline:0;
}

#connectivity-icon.active {
  background-position: -348px -232px;
}

#multimedia-icon {
  background-position: -464px 0px;
}

#multimedia-icon:hover, #multimedia-icon:focus {
  background-position: -464px -116px;
  outline:0;
}

#multimedia-icon.active {
  background-position: -464px -232px;
}

#threed-effects-icon {
  background-position: -580px 0px;
}

#threed-effects-icon:hover, #threed-effects-icon:focus {
  background-position: -580px -116px;
  outline:0;
}

#threed-effects-icon.active {
  background-position: -580px -232px;
}

#performance-integration-icon {
  background-position: -696px 0px;
}

#performance-integration-icon:hover, #performance-integration-icon:focus {
  background-position: -696px -116px;
  outline:0;
}

#performance-integration-icon.active {
  background-position: -696px -232px;
}

#css3-styling-icon {
  background-position: -812px 0px;
}

#css3-styling-icon:hover, #css3-styling-icon:focus {
  background-position: -812px -116px;
  outline:0;
}

#css3-styling-icon.active {
  background-position: -812px -232px;
}

.class-description {
  width:447px;
  min-height:194px;
  background:#fff;
  padding:24px;
  position:relative;
  float:left;
}

.ielt8 .class-description {
  float:none;
  width: auto;
  position:static;
  height: 1100px;
}


/* these are the -desc divs */
.ielt8 .class-description div {
  /* this guy needs to override the hide() upstairs */
  display: block !important;
  opacity: 1 !!important;
  position:static !important;
  width:  auto!important;
}

.class-description > div {
  background: white; /* to improve fadeIn quality in ie8 */
}

.class-description h2 {
  font-family: "museo-sans-1", 'Trebuchet MS', sans-serif;
  font-weight:100;
  font-size:18px;
  line-height:24px;
  padding:0 0 20px 0;
  margin:0 0 20px 0;
  border-bottom:1px solid #b8b8b8;
}

.class-description p {
  font-size:16px;
  line-height:20px;
}

.class-number-icon {
  font-size:19px;
  line-height:24px;
  color:#0092bf;
  font-weight:bold;
  float:right;
  margin:0px 0 0 0;
}

.class-number-icon img {
  margin:0 0 0 16px;
}

#semantics-desc, #offline-storage-desc, #device-access-desc, #connectivity-desc,
#multimedia-desc, #threed-effects-desc, #performance-integration-desc,
#css3-styling-desc {
  position:absolute;
  top:0px;
  left:0px;
  width:447px;
  margin:24px;
}

#the-technology-overview {
  padding:24px;
  height:322px;
  border-bottom:10px solid #d9d9d9;
}

.ielt8 #the-technology-overview {
  z-index: 2;
  position: relative;
  width: auto;
  float: none;
  height: auto;
}

#the-technology-overview h2 {
  color:#f14a29;
  font-size:70px;
  margin:0 0 26px 0;
}

.no-fontface #the-technology-overview h2 {
  font-size: 50px;
}

#the-technology-overview p {
  font-size:19px;
  line-height:26px;
  margin:0 0 26px 0;
}

#badge-builder {
  background:#fff;
  margin:10px 0 10px 0;
  clear:both;
}

#faq {
  background:#fff;
  margin:10px 0 10px 0;
  padding:50px 70px;
  clear:both;
}


#what-the-tech {
  width:447px;
  background:#fff;
  padding:24px;
  margin:0 10px 0 0;
  float:left;
  overflow-x:hidden;

  _margin: 0 5px 0 0; /* ie6 */
}

#what-the-tech img, #orientation-img {
  margin-bottom: 12px;
}

#orientation {
  width:447px;
  min-height:194px;
  background:#fff;
  padding:24px;
  float:right;
  overflow-x:hidden;
}

#badge-builder-content {
  padding:24px;
}

#badge-builder h2, #badge-builder h3 {
  font-family: 'Museo_Slab_100';
  font-size: 25px;
  margin-bottom: 5px;
}

body #badge-builder-header {
  margin-bottom:16px;
  font-size: 35px;
}

#badge-builder-header strong {
  font-family: sans-serif;
  font-weight: bold;
}

#badge-builder-content p, #what-the-tech p, #orientation p {
  font-size:15px;
  line-height:16px;
  font-style:italic;
}

.badge-selector-classes input {
  cursor: pointer;
}
.badge-selector-classes label {
  text-transform:uppercase;
  font-size:12px;
  color:#606060;
  cursor: pointer;
}

.badge-selector-classes li {
  margin-bottom:6px;
  width:220px;
  display:block;
  float:left;
}

#badge-builder legend {
  display: none;
}

#badge-selector-horizontal {
  float: left;
  padding: 10px;
}

#orientation-content {
  float:left;
}
#badge-selector-vertical {
  display: none;
  width: 406px;
  height: 190px;
  overflow: auto;
  margin-top: 10px;
}

.badge-selector-classes-container{
  width:330px;
  padding:20px 0 0 110px;
}

#badge-submit {
  width:275px;
  height:35px;
  background:#0092bf;
  color:#fff;
  margin:40px 0 0 0;
  padding:0;
  border:0;
  text-transform:uppercase;
  font-weight:bold;
  font-size:15px;
  background:url('../img/generate-button.png');
  cursor: pointer;
}

#the-movement {
  display:block;
}

#the-gallery {
  width:495px;
  height:718px;
  margin:0 10px 0 0;
  float:left;
}

#the-gallery li {
  display:block;
  height:172px;
  width:242px;
  float:left;
  background:#666;
  margin:0 0 10px 0;
}

#the-gallery li.gallery-even {
  margin-left:11px;
}

a.galleryLink {
	display:block;
	width:242px;
	height:172px;
}

#the-movement-content {
  width:447px;
  min-height:640px;
  background:#fff;
  margin:0 0 10px 0;
  float:left;
  padding:24px;
  padding-bottom:8px;

}

#the-movement-content h2 {
  color:#f14a29;
  font-size:70px;
  margin:0 0 26px 0;
}

.no-fontface #the-movement-content h2 {
  font-size: 50px;
}

#the-movement-content p {
  font-size:19px;
  line-height:26px;
  margin:0 0 26px 0;
}

#the-movement-content a:focus, #downloads a:focus, footer a:focus, #apparel a:focus {
	outline:2px solid #ebebeb;
	background:#ebebeb;
}

a#shirt-link:focus {
	outline:none;
	background:none;

}

#submit-sighting {
  margin:0 0 22px; 0;
}

#downloads {
  width:1000px;
  background:#fff;
  margin:10px 0 10px 0;
  clear:both;
}

#downloads-content {
  padding:35px;
}

#downloads h2 {
  color:#fff;
  font-size:70px;
  margin:0 0 26px 0;
}

.download-item {
  width:430px;
  height:126px;
  margin:0 0 15px 0;
  float:left;
}

.download-item h3 {
  font-family: "museo-sans-1", 'Trebuchet MS', sans-serif;
  font-weight:100;
  font-size:17px;
  margin-bottom:16px;
}

.download-item h4 {
  font-family: "museo-sans-1", 'Trebuchet MS', sans-serif;
  font-weight:100;
  font-size:15px;
  color:#666;
}

.download-item  a {
  font-family: "museo-sans-1", 'Trebuchet MS', sans-serif;
  font-weight:100;
  font-size:13px;
  color:#666;
}

.download-thumbnail {
  width:126px;
  height:126px;
  background:#fff;
  margin:0 15px 0 0;
  float:left;
}

.download-item li {
  display:inline;
  margin-right:12px;
}

.swag {
  background:#fff;
  min-height:480px;
  margin:0 0 10px 0;
}

#one-color-svg {
	margin-bottom:16px;
}

.swag p {
  font-size:14px;
  line-height:16px;
  font-style:italic;
}


.swag address {
  font-family: "calluna";
  margin-bottom:1em;
  font-size:14px;
  line-height:16px;
  font-style:italic;
  margin:40px 0 20px 40px;
}

#free-stickers {
  width:495px;
  margin-right:10px;
  float:left;
}

#free-stickers footer {
	clear: both;
	margin:12px 0 0 0;
	padding:10px 0 0 0;
	font-size:11px;
  	line-height:16px;
  	font-style:italic;
  	font-family: "calluna";
  	display:block;
}

#sticker-image {
	float:left;
	margin:0 10px 10px 0;
}


#apparel {
  width:495px;
  float:left;
}

#apparel a {
	color:#f14a29;
}

#shirt-image {
	margin:10px 0;
}

#get-to-work {
  width:326px;
  float:left;
}



.swag div {
  margin:26px;
}

.swag h3 {
  color:#0092bf;
  font-size:40px;
  margin-bottom:10px;
}

.swag p{
  font-size:14px;
  line-height:16px;
  font-style:italic;
}

.divider {
  width:1000px;
  height:20px;
  background:#b8b8b8;
  clear:both;
  margin:0 0 10px 0;
}

footer {
  margin:40px 0 100px 0;
}

.outro h3 {
  color:#333;
  font-size:40px;
  margin-bottom:14px;
}

.outro p {
  color:#333;
  font-family: "museo-sans-1", 'Trebuchet MS', sans-serif;
  font-weight:100;
  font-size:13px;
}

#credits {
  width:326px;
  margin-right:10px;
  float:left;
}

#footer-html5-logo {
float:left;
margin:0 24px 50px 0;
}

#learn-more {
  width:326px;
  margin-right:10px;
  float:left;
}

#learn-more li {
  padding:0 0 6px 0;
}

#learn-more a, #join-the-movement p a {
  color:#333;
  font-family: "museo-sans-1", 'Trebuchet MS', sans-serif;
  font-weight:100;
  font-size:16px;
}

#join-the-movement {
  width:326px;
  float:left;
}

#join-the-movement a {
	color:#333;
}

#join-form-box {
  width:324px;
  height:50px;
  border:1px solid #333;
  background:#fff;
}

#join-q {
  width:210px;
  height:40px;
  background:#fff;
  color:#333;
  margin:5px;
  padding:0;
  border:0;
  font-size:15px;
  float:left;
}

#join-submit {
  width:75px;
  height:40px;
  background:#333;
  color:#fff;
  margin:5px;
  padding:0;
  border:0;
  text-transform:uppercase;
  font-weight:bold;
  font-size:15px;
  float:right;
}

.cleared {
  clear:both;
}

.clear-left{
  clear:left;
}

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

::-moz-selection{ background: #F14A29; color:#fff; text-shadow: none; }
::selection { background:#F14A29; color:#fff; text-shadow: none; }