/* 
  main.css contains a reset, font normalization and some base styles.
  html5boilerplate.com/
*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}                  
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
nav ul {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after, q:before, q:after {content:'';content:none}
a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins {background-color:#ff9;color:#000;text-decoration:none}
mark {background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del {text-decoration: line-through}
abbr[title], dfn[title] {border-bottom:1px dotted;cursor:help}
table {border-collapse:collapse;border-spacing:0}
hr {display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input, select {vertical-align:middle}
/* END RESET CSS */

body {font: 14px/1.3 sans-serif;background:#fff;*font-size:small} /* hack retained to preserve specificity */
body, select, input, textarea {font-family: 'proxima-nova-1','proxima-nova-2',Helvetica, Arial, Georgia, serif;color: #444}
select, input, textarea, button {font:99% sans-serif}
pre, code, kbd, samp {font-family: monospace, sans-serif}

/* Headers */ 
h1,h2,h3,h4,h5,h6 {font-weight: bold;margin: 0 0 0.3em}
h1 {font-size: 2em}
h2 {font-size: 1.6em}
h3 {font-size: 1.5em}
h4 {font-size: 1.3em}
h5 {font-size: 1.2em}
h6 {font-size: 1.1em}
h1, h2, h3, h4, h5, h6 {line-height: 1.2em;color:#222}
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {font-weight: normal}

/* always force a scrollbar in non-IE */ 
html {overflow-y: scroll}
 
/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none}
a, a:active, a:visited {color: #174583;text-decoration:none}
a:hover {color: #174583;text-decoration:underline}

ul, ol {margin-left: 1.8em}
ol {list-style-type: decimal}
ul {list-style: square}
dt {font-weight:bold;margin-top:1em}

/* Remove margins for navigation lists */
nav ul, nav li {margin: 0} 
small {font-size: 11px}
strong, th {font-weight: bold}
td, td img {vertical-align: top} 
sub {vertical-align: sub;font-size: smaller}
sup {vertical-align: super;font-size: smaller}
pre {padding: 15px;/* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
  white-space: pre;/* CSS2 */
  white-space: pre-wrap;/* CSS 2.1 */
  white-space: pre-line;/* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word;/* IE */
}
textarea {overflow: auto}
.ie6 legend, .ie7 legend {margin-left: -7px}

/* align checkboxes, radios, text inputs with their label
   by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] {vertical-align: text-bottom}
input[type="checkbox"] {vertical-align: bottom}
.ie7 input[type="checkbox"] {vertical-align: baseline}
.ie6 input {vertical-align: text-bottom}

/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button {cursor: pointer}
 
/* webkit browsers add a 2px margin outside the chrome of form elements */  
button, input, select, textarea {margin: 0}

/* colors for form validity */
input:valid, textarea:valid   {}
input:invalid, textarea:invalid {border-radius: 1px;-moz-box-shadow: 0px 0px 5px red;-webkit-box-shadow: 0px 0px 5px red;box-shadow: 0px 0px 5px red}
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid {background-color: #f0dddd}

/* These selection declarations have to be separate. */
::-moz-selection{background: #FF5E99;color:#fff;text-shadow: none}
::selection {background:#FF5E99;color:#fff;text-shadow: none} 

/*  j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #FF5E99} 

/* make buttons play nice in IE */
button {width: auto;overflow: visible}
 
/* bicubic resizing for non-native sized IMG */
.ie7 img {-ms-interpolation-mode: bicubic}

/* ================ Non-semantic helper classes ================ */

/* for image replacement */
.ir {display: block;text-indent: -999em;overflow: hidden;background-repeat: no-repeat;text-align: left;direction: ltr}

/* Hide for both screenreaders and browsers
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden {display: none;visibility: hidden} 

/* Hide only visually, but have it available for screenreaders 
   www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden  */
.visuallyhidden {position: absolute !important;clip: rect(1px 1px 1px 1px);/* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px)}

/* Hide visually and from screenreaders, but maintain layout */
.invisible {visibility: hidden}

/* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */
.clearfix:before, .clearfix:after {content: "\0020";display: block;height: 0;visibility: hidden} 

.clearfix:after {clear: both}
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix {zoom: 1}

 /* ================ Grid CSS ================ 
 	* grid used is blueprint: http://www.blueprintcss.org/
	* grid calculated by: http://bgg.kematzy.com/
   ================ Structure ================
    * Page width:            940 px
    * Number of columns:     12
    * Column width:          60 px
    * Margin width:          20 px
   =========================================== */

.container {width: 940px;margin: 0 auto}

/* Use this class on any div.span / container to see the grid. */
.showgrid {background: url("images/blueprint_grid.png")}

/* Sets up basic grid floating and margin. */
.column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12 {float:left;margin-right: 20px}

.ie6 .column, .ie6  .span-1, .ie6  .span-2, .ie6  .span-3, .ie6  .span-4, .ie6  .span-5, .ie6  .span-6, .ie6  .span-7, .ie6  .span-8, .ie6  .span-9, .ie6  .span-10, .ie6  .span-11, .ie6  .span-12 {display:inline;overflow-x:hidden}

/* The last column in a row needs this class. */
div.last {margin-right: 0}

/* Use these classes to set the width of a column. */
.span-1  {width: 60px}
.span-2  {width: 140px}
.span-3  {width: 220px}
.span-4  {width: 300px}
.span-5  {width: 380px}
.span-6  {width: 460px}
.span-7  {width: 540px}
.span-8  {width: 620px}
.span-9  {width: 700px}
.span-10 {width: 780px}
.span-11 {width: 860px}
.span-12, div.span-12 {width: 940px;margin: 0}

/* Add these to a column to append empty cols. */
.append-1  {padding-right: 80px}
.append-2  {padding-right: 160px}
.append-3  {padding-right: 240px}
.append-4  {padding-right: 320px}
.append-5  {padding-right: 400px}
.append-6  {padding-right: 480px}
.append-7  {padding-right: 560px}
.append-8  {padding-right: 640px}
.append-9  {padding-right: 720px}
.append-10 {padding-right: 800px}
.append-11 {padding-right: 880px}

/* Add these to a column to prepend empty cols. */
.prepend-1  {padding-left: 80px}
.prepend-2  {padding-left: 160px}
.prepend-3  {padding-left: 240px}
.prepend-4  {padding-left: 320px}
.prepend-5  {padding-left: 400px}
.prepend-6  {padding-left: 480px}
.prepend-7  {padding-left: 560px}
.prepend-8  {padding-left: 640px}
.prepend-9  {padding-left: 720px}
.prepend-10 {padding-left: 800px}
.prepend-11 {padding-left: 880px}

/* Border on right hand side of a column. */
div.border {padding-right:9px;margin-right:10px;border-right: 1px solid #eee}

/* Border with more whitespace, spans one column. */
div.colborder {padding-right:49px;margin-right:50px;border-right: 1px solid #eee}

/* Use these classes on an element to push it into the next column, or to pull it into the previous column.  */
.pull-1 {margin-left: -80px}
.pull-2 {margin-left: -160px}
.pull-3 {margin-left: -240px}
.pull-4 {margin-left: -320px}
.pull-5 {margin-left: -400px}
.pull-6 {margin-left: -480px}
.pull-7 {margin-left: -560px}
.pull-8 {margin-left: -640px}
.pull-9 {margin-left: -720px}
.pull-10 {margin-left: -800px}
.pull-11 {margin-left: -880px}
.pull-12 {margin-left: -960px}
.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12 {float:left;position:relative}
.push-1 {margin: 0 -80px 1.5em 80px}
.push-2 {margin: 0 -160px 1.5em 160px}
.push-3 {margin: 0 -240px 1.5em 240px}
.push-4 {margin: 0 -320px 1.5em 320px}
.push-5 {margin: 0 -400px 1.5em 400px}
.push-6 {margin: 0 -480px 1.5em 480px}
.push-7 {margin: 0 -560px 1.5em 560px}
.push-8 {margin: 0 -640px 1.5em 640px}
.push-9 {margin: 0 -720px 1.5em 720px}
.push-10 {margin: 0 -800px 1.5em 800px}
.push-11 {margin: 0 -880px 1.5em 880px}
.push-12 {margin: 0 -960px 1.5em 960px}
.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12 {float:right;position:relative}

/* Use a .box to create a padded box inside a column.  */ 
.box {padding: 1.5em;margin-bottom: 1.5em;background: #E5ECF9}

/* Use this to create a horizontal ruler across a column. */
hr {background: #ddd;color: #ddd;clear: both;float: none;width: 100%;height: .1em;margin: 0 0 1.45em;border: none}
hr.space {background: #fff;color: #fff}

 /* ================ Primary Styles ================ */
 p, dl, hr, ol, ul, pre, table, address, fieldset, blockquote {margin-bottom: 25px}

#wrap {width: 940px;margin: 0 auto}

table {width:100%}
	tbody th, tbody td {border-bottom:1px solid #ccc;border-top:1px solid #ccc}
	th, td {padding:0.2em 1em;text-align:left}
	
blockquote {margin-left:60px;border-left: 3px solid #ccc;padding-left:15px;font: italic 100%/1.5 Georgia, "Times New Roman", Times, serif;color:#666}
	
	

 /* ================ Site Skin ================ */
 
html {background: #496088 url("images/html_bg.jpg") fixed repeat-y 50% 0}
body {background: transparent url("images/body_bg.jpg") no-repeat 50% 0}

#wrap {position:relative}
header {height:173px;position:relative;margin: 0 0 30px}
#sitename, #sitename img {position:absolute;top:0px;left:0;width:276px;height:170px;display:block}
	#sitename img {top:-38px;left:342px}
	.ie6 #sitename img {display:none}
	.ie6 #sitename {top:-38px;left:342px;background: #fff url("images/webdu_logo_ie6.jpg") no-repeat 0 0}
	
	#tagline, #conference-date {position:absolute;top:17px;left:0;color:#b8cbe4;font: 600 25px/1.1 'proxima-nova-extra-condensed-1','proxima-nova-extra-condensed-2',Helvetica, Arial, sans-serif;width:360px;text-align:left}
		.wf-loading #tagline, .wf-inactive #tagline, .wf-loading #conference-date, .wf-inactive #conference-date {font-size:18px;line-height:1.4}
		#conference-date {left:auto;right:0;text-align:right}
		
	#tagline span, #conference-date span {display:block}
	#tagline em, #conference-date em {color:#fff;font-style:normal}
	
	nav {position:absolute;bottom:0;left:0;text-align:center;width:940px;border-bottom: 1px dotted #666}
	nav li {display:inline;font: 200 21px/1.3 'proxima-nova-extra-condensed-1','proxima-nova-extra-condensed-2','Arial Narrow', Helvetica, Arial, sans-serif;text-transform:uppercase}
		.wf-loading nav li, .wf-inactive nav li {font-size:15px}
		
	nav a {margin: 0;outline: none;cursor: pointer;text-align: center;text-decoration: none;padding: .2em .8em .2em;position:relative;bottom:.3em}
	nav a:hover {text-decoration: none}
	nav a:active {position: relative;top: 1px}
		
	nav a:link, nav a:visited {color: #666;background: #ddd}
	nav a:hover, nav a:active, nav .active a {color:#fff;background: #666}
	
	#navSecondary .active {font-weight:bold}
	
	.section-pointers {text-align:center;padding: 0 0 30px;border-bottom: 1px dotted #ccc;margin: 0 0 20px}
	.section-pointers h2 {font: 600 45px/1 'proxima-nova-extra-condensed-1','proxima-nova-extra-condensed-2',Helvetica, Arial, sans-serif;margin: 0;text-transform:uppercase;letter-spacing: -0.03em}
		.wf-loading .section-pointers h2, .wf-inactive .section-pointers h2 {font-size:25px;line-height:1.5}
		.ie6.wf-active .section-pointers h2, .ie7.wf-active .section-pointers h2, .ie8.wf-active .section-pointers h2 {letter-spacing: -0.08em}
	
	.section-pointers a {min-height:130px;color:#222;background:#fff6d4;padding: 25px 0 0;display:block;border: 1px solid #ffe398;-webkit-border-radius: 1em;-moz-border-radius: 1em;border-radius: 1em;text-decoration:none}
		.ie6 .section-pointers a {height:130px}
		.section-pointers .section-pointer-highlighted a {background:#d0e6ff;border: 1px solid #b2d1f4}
		.wf-loading .section-pointers a, .wf-inactive .section-pointers a {min-height:110px}
		
	.section-pointers a:hover {background: #fcbd10;color:#fff;border: 1px solid #fcbd10}
	.section-pointers a:hover p {color:#fff}
		.section-pointers .section-pointer-highlighted a:hover {background: #4d739e;border: 1px solid #4d739e;color:#fff}
		.section-pointers .section-pointer-highlighted a:hover p {color:#fff}
		
	.section-pointers a:hover h2 {color:#fff}
	.section-pointers p {margin: 0;padding: 0 30px 0;color:#666}
	.section-pointers .date {background:#ffe398;color:#765c15;text-align:center;display:inline-block;padding: 3px 5px;font: 200 22px/1 'proxima-nova-extra-condensed-1','proxima-nova-extra-condensed-2',Helvetica, Arial, sans-serif;text-transform:uppercase;position:relative;top:-3px}
		.section-pointers .section-pointer-highlighted .date {background:#b2d1f4;color:#1f446e}
		.section-pointers .section-pointer-highlighted a:hover .date {background:#b2d1f4;color:#1f446e}
		.wf-loading .section-pointers .date, .wf-inactive .section-pointers .date {font-size:13px}
		
	.featurebox {background:#fff6d4;padding: 25px 25px 0;display:block;margin: 25px 0;border: 1px solid #ffe398;-webkit-border-radius: 1em;-moz-border-radius: 1em;border-radius: 1em}	

	.news-follow {padding: 0 0 20px;border-bottom: 1px dotted #ccc;margin: 0 0 20px}
	.news-twitter {background: #fff url('images/sprites.png') no-repeat 0 0}
	.news-email {background: #fff url('images/sprites.png') no-repeat 0 -200px}
	.news-follow p {margin: 0 20px 0 50px}
	
	.featured-speakers {border-bottom: 1px dotted #ccc}
	.featured-speakers a {display:block}
	.featured-speakers h3 {text-align:center;margin: 0 0 30px;padding: 0 0 20px;border-bottom: 1px dotted #ccc}
	.featured-speakers h4, .featured-speakers p {margin-right:20px}
	.featured-speakers img {display:block;margin-bottom:10px; border-width:1px; border-style:solid; border-color:#FFF; box-shadow:2px 2px 6px #333; -webkit-box-shadow:2px 2px 6px #333; -khtml-box-shadow:2px 2px 6px #333; -moz-box-shadow:2px 2px 6px #333;}
	
	.register-promo {text-align:center;padding: 20px 0}
	.register-promo span {color:#222}
	.register-promo h3 {margin:0;font-size:2em}
	
	.table1 th, .table1 td {padding-top:0.5em;padding-bottom:0.5em;border: 1px solid #ddd}
	.table1 th {background:#666;color:#fff;border: 1px solid #333}
	.table1 th.time, .table1 td.time {color:#765c15;background:#fff6d4;border: 1px solid #ffe398}
	
	footer {border-top: 1px dotted #ccc;position:relative;display:block;background: #fff url('images/footer_bg.png') no-repeat 0 0;width:940px;height:180px; margin-top: 20px;}
	/*footer {border-top: 1px dotted #ccc;position:relative;display:block;background: #fff;width:940px;height:180px}*/
	footer a {display:block;position:absolute}
	footer a span {position:absolute;left:-9999px}
	
	.sponsor-1 {width:940px;height:180px;left:0px;top:0px; cursor: pointer;}
	/* .sponsor-2 {width:88px;height:25px;left:234px;top:74px}
	.sponsor-3 {width:88px;height:40px;left:234px;top:99px}
	.sponsor-4 {width:104px;height:38px;left:422px;top:74px}
	.sponsor-5 {width:104px;height:27px;left:422px;top:112px}
	.sponsor-6 {width:107px;height:38px;left:607px;top:74px}
	.sponsor-7 {width:107px;height:27px;left:607px;top:112px}
	.sponsor-8 {width:153px;height:25px;left:768px;top:74px}*/

	.teaser img { float:  left; padding:  0px 20px 0px 0px; }

	img.mugshot { border-width:1px; border-style:solid; border-color:#FFF; box-shadow:2px 2px 6px #333; -webkit-box-shadow:2px 2px 6px #333; -khtml-box-shadow:2px 2px 6px #333; -moz-box-shadow:2px 2px 6px #333; margin-bottom: 10px;}

	.alertbox { background: #D0E6FF; border: 1px solid #B2D1F4; border-radius: 1em; -webkit-border-radius: 1em; display: block; position: relative; min-height: 30px; padding: 10px; margin: 10px 0; text-align: center; }
	.alertlabel { display: inline-block; padding: 3px 5px; font: 200 22px/1 'proxima-nova-extra-condensed-1','proxima-nova-extra-condensed-2',Helvetica, Arial, sans-serif; text-transform: uppercase; border: 1px solid ##B2D1F4; background: #B2D1F4; color: #1F446E;}
	.alertbox a:hover {background: #4d739e; border: 1px solid #4d739e; color:#fff}


 /* ================ Media Queries ================ */

@media all and (orientation:portrait) {/* Style adjustments for portrait mode goes here */
  
}

@media all and (orientation:landscape) {/* Style adjustments for landscape mode goes here */
  
}

/* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome)  
   Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {/* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you
     j.mp/textsizeadjust 
  html {-webkit-text-size-adjust:none;-ms-text-size-adjust:none} */
}

@media screen and (max-width: 1024px) {
html {background: #264166 url("images/html_bg_lofi.png") repeat-y 50% 0}
body {background: transparent url("images/body_bg_lofi.png") no-repeat 50% 0}
}


 /* ================ Print Styles ================ */
 
@media print {* {background: transparent !important;color: #444 !important;text-shadow: none !important}
  a, a:visited {color: #444 !important;text-decoration: underline}
  /* a:after {content: " (" attr(href) ")"} */
  abbr:after {content: " (" attr(title) ")"}
  .ir a:after {content: ""}  /* Don't show links for images */
  pre, blockquote {border: 1px solid #999;page-break-inside: avoid}
  thead {display: table-header-group} /* css-discuss.incutio.com/wiki/Printing_Tables */ 
  tr, img {page-break-inside: avoid}
  @page {margin: 0.5cm}
  p, h2, h3 {orphans: 3;widows: 3}
  h2, h3{page-break-after: avoid}
}