/* ------------- general styles ------------- */
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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

#about-text-body::-webkit-scrollbar, .tab-container::-webkit-scrollbar, .scrollTable::-webkit-scrollbar {
    width: 10px;
}

#about-text-body::-webkit-scrollbar-track, .tab-container::-webkit-scrollbar-track, .scrollTable::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

#about-text-body::-webkit-scrollbar-thumb, .tab-container::-webkit-scrollbar-thumb, .scrollTable::-webkit-scrollbar-thumb  {
	background: #999;
    border-radius: 10px;
}

body {
text-align:left;
font-size: 12px;
margin: 0;
background: #333;
font-family: Helvetica,Arial,sans-serif;
}

a {
text-decoration:none;
color:#c5b463;
font-weight:400;
}

a:hover {
text-decoration:underline;
}

h1 {
font-size:34px;
font-weight:700;
color:#FFF;
letter-spacing:-1px;
}

.ie7 h1, .ie8 h1, .ie9a h1, ie9a h1 {font-size: 32px;}

p {
color:#FFF;
line-height:1.7em;
font-size:12px;
}

.clear {
clear:both;
}

/* ------------- overall card styles ------------- */
#card-overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
background: rgba(0,0,0, 0.75 );
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000); /* IE8 */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);  /* IE6 & 7 */    		  
z-index: 10000;
}
#card-overlay.card-video{
	background-image: url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/close-button.png);
	background-repeat: no-repeat;
	background-position: 877px 81px; 

}
#about-text{
/* background: url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/close-button.png) no-repeat 832px 13px; */
position: relative;
width: 850px;
height: 500px;
margin: 40px 40px 20px 95px;
color: #FFF;
}

#about-text-body{
clear: both;
height: 400px;
font-size: 14px;
overflow-y: auto;
padding-right: 20px;
padding-top: 10px;
-webkit-overflow-scrolling: touch;	
} 

.panel-tab-wrapper  > div { display: none;}
.panel-tab-wrapper  > div.active-tab-content { display: block; float: left;}
.panel-tab-wrapper {width:850px; height: 500px; float: left; color: #FFF;}
.panel-tab-wrapper ul li a {float: left; text-decoration: none; font-weight: bold; text-transform: uppercase; font-size: 14px; color: #547c91; background: #000;}
ul.panel-tabs {list-style: disc; margin: 0; padding: 0;}
ul.panel-tabs li {display: inline;}
ul.panel-tabs li a {padding: 15px 25px; border-right: 1px solid #333;}
ul.panel-tabs li a.last-modal-tab {border-right: 0px;}
ul.panel-tabs li a.tab-active{background: #1c1c1c; color: #FFF;}
ul.panel-tabs li a span {font-size: 40px; height: 10px; color: #FFF;}
ul.panel-tabs li a.tab-active span {display: none;}
.tab-container {
clear: both;
background: #1c1c1c; 
font-size: 14px;
overflow-y: auto;
padding: 20px 30px 20px 30px;
-webkit-transform: translate3d(0,0,0);
-webkit-overflow-scrolling: touch;	
height: 416px;
}
.tab-container p {margin: 0 0 15px; line-height: 1.4em;}
.meth-close {position: absolute; right: -4px; top: 12px; cursor: pointer;}
 
#gf-container{
font-family:proxima-nova,sans-serif;
width: 1024px;
text-align: left;
margin: 0 auto 20px;
height: 600px;
position: relative;
border: 1px solid #000;
}

#header {
position:absolute;
top:0;
left:0;
z-index:9999;
}

.usat_logo {
position:absolute;
top:14px;
left:100px;
}

#explore #top_nav_share_wrap {
left: 768px;
}

#top_nav_share_wrap {
position:absolute;
top:10px;
left:393px;
height:47px;
width:230px;
z-index:999;
text-transform:uppercase;
}

#top_nav_share_wrap ul li {
float:left;
margin:0 10px 0 0;
}

#top_nav_share_wrap ul li.facebook, #top_nav_share_wrap ul li.tweet {
width: 24px;
}

#top_nav_share_wrap ul li:first-child {
padding-top:6px;
letter-spacing:2px;
}

#top_nav_share_wrap ul li a {
color:#FFF;
cursor: pointer;
font-weight:400;
letter-spacing:1px;
text-shadow:0 1px 2px #666;
font-size:11px;
}

#top_nav_share_wrap ul li a:hover {
color:#c5b463;
text-decoration: none;
cursor: pointer;
}

.credits .label {
font-weight: bold; text-transform: uppercase; display: block; font-size: 14px; margin: 0 0 5px; color: #888;
}

.card {
width:960px;
height: 600px;
overflow:hidden;
-webkit-transform:translate3d(0,0,0);
-moz-transform : translate3d(0,0,0);
-webkit-transition:opacity 1s linear;
float:left;
opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=5);
}

.card.active {
opacity:1;
-moz-opacity:1;
filter:alpha(opacity=1);
}

#cards {
position: absolute;
top: 0;
left: 0;
-webkit-transform:translate3d(0,0,0);
}

.card .content {
width:950px;
height:600px;
background:#FFF;
position: relative;
}

.desktop-arrows {
position: absolute;
top: 470px;
left: 480px;
width: 100px;
cursor: pointer;
}

.left-arrow, .right-arrow {
display: block;
padding: 10px;
}

.left-arrow:hover, .right-arrow:hover {
background: rgba(0,0,0,.75);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000); /* IE8 */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);  /* IE6 & 7 */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.left-arrow {
float: left;
}

.right-arrow {
float: right;
}

#deck {
height:600px;
width:1024px;
position:relative;
overflow:hidden;
background:#000;
}

.left-panel {
position:relative;
left:30px;
top:0;
z-index:999;
width:280px;
background:rgba(0,0,0,0.75);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000); /* IE8 */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);  /* IE6 & 7 */
padding:15px 20px 20px;
}

.left-panel .gf-logo {
width:185px;
display:block;
margin:0 auto 15px;
}

.left-panel .bkgd-credit {
font-size: 10px;
margin: 5px 0 0;
font-style: italic;
color: #999;
line-height: 1.2em;
}

.left-panel h1 {
border-top:1px solid #5e5e5e;
line-height:1em;
padding:10px 0;
}

.left-panel .byline {
border-top:1px solid #5e5e5e;
border-bottom:1px solid #5e5e5e;
font-size:13px;
color:#ccc;
margin:0 0 10px;
padding:2px 0;
}

.left-panel .panel-content-blocks {
width: 280px;
}

.left-panel .panel-content-blocks.two-blocks {
margin-left: 50px;
}

.left-panel .panel-content-blocks li {
float:left;
background:#27353e;
width:86px;
height:60px;
text-align:center;
margin:10px 10px 0 0;
cursor: pointer;
}

.left-panel .panel-content-blocks li:first-child {
border:1px solid #C5B463;
}

.left-panel .panel-content-blocks li.last-block {
margin-right:0;
}

.left-panel .panel-content-blocks li a {
font-weight:700;
text-transform:uppercase;
color:#FFF;
font-size:11px;
}

.left-panel .panel-content-blocks li a:hover {
text-decoration: none;
}

.button{
padding: 10px; 
color: #FFF; 
display: table; 
margin: 10px 0 0; 
width: 260px; 
font-size: 15px; 
text-shadow: 0 -1px #000; 
font-weight: bold; 
text-transform: uppercase; 
cursor: pointer; float: left; 
-moz-border-radius: 2px; 
border-radius: 2px; 
-webkit-border-radius: 2px; 
background: #304a54;
background: -moz-linear-gradient(19% 75% 90deg,#20353a, #304a54); 
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#304a54), to(#20353a));
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
}

.button div.top-text {
background:url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/external-icon.png) no-repeat top right;
display:block;
font-size:10px;
font-weight:400;
height: 10px;
color:#c1ced1;
margin-bottom:5px;
float: left;
width: 100%;
}

.button.casestudy div {
background:none;
}

.button.load-map {
text-align: left;
font-size:16px;
padding: 6px 10px 4px;
color: #FFF; 	
display: table;
margin: 0 0 5px 0;
width: 250px;
height: 19px;
background: #304a54;
background-image: url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/right-arrow.png) no-repeat 254px 8px;
background: url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/right-arrow.png) no-repeat 254px 8px, -moz-linear-gradient(19% 75% 90deg,#20353a, #304a54); 
background: url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/right-arrow.png) no-repeat 254px 8px, -webkit-gradient(linear, 0% 0%, 0% 100%, from(#304a54), to(#20353a));
}

.ie7 .button.load-map, .ie8 .button.load-map, .ie9a .button.load-map {
background: #304a54 url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/right-arrow.png) no-repeat 254px 8px;
}

.left-panel-nav {
position:relative;
bottom:0;
left:17%;
color:#FFF;
background:rgba(0,0,0,0.75);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000); /* IE8 */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);  /* IE6 & 7 */
display:block;
width:56px;
height:15px;
text-align:center;
font-size:9px;
letter-spacing:1px;
cursor:pointer;
padding:4px 0 0;
}

a.left-panel-nav:hover {
text-decoration: none;
}

.nav-arrow {
background:url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/arrow-sprite.png) no-repeat;
float:left;
display:block;
height:7px;
width:14px;
background-position:0 0;
margin:1px 0 0 4px;
}

.nav-arrow.down {
background-position:0 -11px;
}

.hotspot {
position:absolute;
cursor:pointer;
background:rgba(0,0,0,0.75);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000); /* IE8 */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);  /* IE6 & 7 */
-moz-border-radius:50px;
border-radius:50px;
-webkit-border-radius:50px;
width:50px;
height:36px;
padding:14px 0 0;
}

.hotspot:not([dummy]), #deck-cntrl .deck-cntrl-buttons li.active-nav:not([dummy]), .sb-section.active:not([dummy]), .left-panel:not([dummy]), p.hotspot-text:not([dummy]) {
filter: progid:DXImageTransform.Microsoft.gradient(enabled='false');
}

.ie8 #deck-cntrl .deck-cntrl-buttons li.active-nav, .ie8 .sb-section.active {
filter: progid:DXImageTransform.Microsoft.gradient(enabled='false');
}

.ie7 #deck-cntrl .deck-cntrl-buttons li.active-nav, .ie7 .sb-section.active {
filter: progid:DXImageTransform.Microsoft.gradient(enabled='false');
}

.hotspot-image {
background:url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/hotspot-sprite.png) no-repeat 0 0;
height:23px;
width:22px;
display:block;
margin-left:14px;
}

.hotspot-image.minus {
background-position:0 -23px;
}

.subhead {
display:block;
text-transform:uppercase;
font-weight:700;
font-size:16px;
margin:0 0 10px;
}

p.hotspot-text {
display:none;
background:rgba(0,0,0,0.75);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000); /* IE8 */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);  /* IE6 & 7 */
width:250px;
position: absolute;
padding:20px;
z-index: 80;
}

#video-player {
margin: 80px auto 0; 
width: 720px;
text-align: left;
}

.video_credit {
	color: #999;
	text-align: right;
	margin: 10px 154px 0 0 ;
}

.map-modal .video_credit {
	width: 719px;
	padding-left: 259px;
	margin: 0 auto;
}

#deck-cntrl {
position:absolute;
bottom:0;
width:1024px;
background:#000;
text-align:center;
color:#FFF;
}

#deck-cntrl .deck-cntrl-buttons h3, .sb-section h4, .sb-section .zoomify-link, .sb-section .sanborn-link, .sb-section .soil-link, .sb-section .photos-link, .sb-section .videos-link {
font-size:14px;
text-transform:uppercase;
color:#547c91;
font-weight:700;
margin:0 0 3px;
text-shadow: 0 -1px #000;
}

.sb-section h4, .sb-section .zoomify-link, .sb-section .soil-link, .sb-section .photos-link, .sb-section .sanborn-link, .sb-section .videos-link{
font-size: 16px;
}

#docsSection h4 {
margin-bottom: 5px;
}

.opacity-slider {
background: #000;
border-color: #37494b;
border-top:none;
height: 5px;
margin: 16px 8px 10px;
width: 190px;
float: left;
}

.sb-section span.opacity-text {float: left; margin: 11px 0 0;}

.opacity-slider .ui-slider-handle {
background: rgb(165,165,165);
background: -moz-radial-gradient(center, ellipse cover,  rgba(165,165,165,1) 51%, rgba(224,224,224,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(51%,rgba(165,165,165,1)), color-stop(100%,rgba(224,224,224,1)));
background: -webkit-radial-gradient(center, ellipse cover,  rgba(165,165,165,1) 51%,rgba(224,224,224,1) 100%);
background: -o-radial-gradient(center, ellipse cover,  rgba(165,165,165,1) 51%,rgba(224,224,224,1) 100%);
background: -ms-radial-gradient(center, ellipse cover,  rgba(165,165,165,1) 51%,rgba(224,224,224,1) 100%);
background: radial-gradient(center, ellipse cover,  rgba(165,165,165,1) 51%,rgba(224,224,224,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a5a5a5', endColorstr='#e0e0e0',GradientType=1 );
border: none;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
box-shadow: 0px 3px 3px #222;
}

/*
.opacity-slider .ui-slider-horizontal .ui-slider-handle {
top: -0.5em;
}
*/

#deck-cntrl .deck-cntrl-buttons p, .sb-section p {
font-size:12px;
line-height:1.2em;
}

#deck-cntrl .deck-cntrl-buttons li{
float:left;
cursor:pointer;
width:149px;
height:48px;
border-right:1px solid #000;
text-shadow:0 -1px 0 #000;
background: #23252a;
background: -moz-linear-gradient(19% 75% 90deg,#343434, #1a1a1a); 
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a1a1a), to(#343434));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a1a1a', endColorstr='#343434');	
padding:8px 10px 10px;
}

#deck-cntrl .deck-cntrl-buttons li:last-child {
width:154px;
border-right:none;
}

#deck-cntrl .deck-cntrl-buttons li.active-nav, .sb-section.active {
background:#26353d;
position: relative;
}

.sb-section.active {
border-top: 1px solid #324752;
}

#deck-cntrl .deck-cntrl-buttons li:hover h3,#deck-cntrl .deck-cntrl-buttons li.active-nav h3, .sb-section.active h4, .sb-section.active .zoomify-link, .sb-section.active .soil-link, .sb-section.active .photos-link, .sb-section.active .sanborn-link, .sb-section.active .videos-link {
color:#FFF;
}
.sb-section .section-link {
border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;

}
 
.sb-section.active .section-link  {
	 height: auto; margin: 0; position: relative; width: auto;
}
.sb-section.active .about.section-link  {
display : block;
color:#C5B463;
padding: 10px 0 5px;
}

.active-nav .arrow-up {
display: block;
width: 0;
height: 0;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
border-bottom: 25px solid #26353d;
position: absolute;
top:-18px;
right: 40px;
}

/* ------------- dangers card styles ------------- */

#cards #dangers .content {
background:url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/bkgd-dangers.jpg) no-repeat;
}

.hotspot.dangers1 {
top:260px;
right:208px;
}

.hotspot-text.dangers1-text {
left: 402px;
top: 280px;
}

.hotspot.dangers2 {
top:70px;
right:470px;
}

.hotspot-text.dangers2-text {
left: 480px;
top: 93px;
width: 400px;
}

.hotspot.dangers3 {
top:455px;
right:490px;
}

.hotspot-text.dangers3-text {
bottom: 115px;
width: 183px;
left: 460px;
}

/* ------------- failures cards styles ------------- */

#cards #failures .content {
background:url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/bkgd-failures.jpg) no-repeat;
}

.hotspot.failures1 {
top:160px;
right:200px;
}

.hotspot-text.failures1-text {
right: 250px;
top: 182px;
}

.hotspot.failures2 {
top:428px;
right:400px;
}

.hotspot-text.failures2-text  {
bottom: 141px;
width: 320px;
left: 550px;
}

/* ------------- testing card styles ------------- */

#cards #testing .content {
background:url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/bkgd-testing.jpg) no-repeat;
}

.hotspot.testing1 {
top:90px;
right:390px;
}

.hotspot-text.testing1-text {
top: 112px;
left: 560px;
}

.hotspot.testing2 {
top:50px;
right:50px;
}

.hotspot-text.testing2-text {
top: 73px;
right: 100px;
width: 200px;
}

/* ------------- case study card styles ------------- */

#cards #casestudy .content {
background:url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/bkgd-casestudy.jpg) no-repeat;
}

.hotspot.casestudy1 {
top:110px;
right:80px;
}

.hotspot-text.casestudy1-text {
top: 132px;
left: 530px;
}

.hotspot.casestudy2 {
top:245px;
right:515px;
}

.hotspot-text.casestudy2-text {
top: 268px;
left: 435px;
}

/* -------------action card styles ------------- */

#cards #action .content {
background:url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/bkgd-action.jpg) no-repeat;
}

.hotspot.action1 {
top:194px;
right:29px;
}

.hotspot-text.action1-text {
right: 79px;
top: 215px;
width: 240px;
}
 
.hotspot.action2 {
top:320px;
right:249px;
}

.hotspot-text.action2-text {
left: 701px;
bottom: 252px;
width: 125px;
}

.hotspot.action3 {
top:353px;
left:395px;
}

.hotspot-text.action3-text {
width: 276px;
bottom: 86px;
left: 445px;
}

.hotspot.action4 {
top:450px;
right:160px;
}

.hotspot-text.action4-text {
bottom: 120px;
left: 450px;
}

.hotspot.action5 {
top:450px;
right:840px;
}

.hotspot-text.action5-text {
bottom: 122px;
left: 110px;
width: 230px;
}

.hotspot.action6 {
top:170px;
left:581px;
}

.hotspot-text.action6-text {
width: 190px;
left: 631px;
top: 193px;
}

/* ------------- explore card styles ------------- */

#cards #explore .content {
height: 540px;
background:#000; 
padding: 50px 20px 0 70px;
}

#explore h1 {
float: left;
font-size: 26px; 
margin: 5px 10px 10px 0;
text-transform: uppercase; 
}

#explore p {
text-align: center;
margin: 0 0 4px 0;
line-height: 1.4em;
font-size: 18px;
font-weight: bold;
}

#explore h2 {
color: #547c91; 
font-weight: bold; 
font-size: 24px; 
text-transform: uppercase; 
margin: 0 0 10px;
}

#explore h3 {
color: #FFF; 
font-size: 13px; 
text-transform: uppercase; 
margin: 5px 0 3px;
}

#explore ul li a {
font-size: 12px; 
line-height: 1.4em;
padding: 2px 0; 
display: block;
}

.line {
border-bottom: 1px solid #DDD;
}

.nav-box {
float: left;
margin-left: 125px;
}

.nav-box.second-box {
margin-left: 0px;
text-align: center;
}

.or {
font-size:20px;
margin: 30px 20px 20px;
color:#FFF;
float: left;
}

.statelist select {
/* -webkit-appearance: none; */
color: #333;
background: #fdfdfd;
width: 278px;
height: 28px;
font-size: 16px;
border: none;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
padding: 5px 0 5px 10px;
}

.ie8 .statelist, .ie9a .statelist {
background: none;
width: 270px;
}

.ie7 .state-name {
margin-top: -40px;
}

#california {
display: block;
}

.state-name {
display: none;
}

.col {
float: left; 
width: 285px;
margin: 0 20px 0 0;
}

.col.last-col {
margin-right: 0px;
}

.map-region {
float: left; 
width: 190px; 
margin: 0 20px 10px 20px;
}

.explore-dialogue {
width:200px;
color:#FFF;
text-align:center;
cursor:pointer;
}

.explore-dialogue p {
text-align: left;
margin: 0 0 0 20px;
}

.explore-dialogue h2 {
font-size:28px;
font-weight:700;
text-transform:uppercase;
margin:0 0 5px;
}

/* ------------- map experience styles ------------- */

#overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
min-width: 1024px;
height: 100%;
background: #000;
background: rgba(0,0,0, 0.75 );
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000); /* IE8 */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);  /* IE6 & 7 */    		  
z-index: 10000;
}

.no-touch #overlay {
overflow: hidden;
}
 

#test-map.open_sidebar div div a div img {
     left:305px !important;   
}

 
#map-header{
position: absolute;
z-index: 1;
height: 70px;
width: 300px;
background: #000 url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/gf-logo-228.png) center center no-repeat;	
}

#map-legend{
position: absolute;
z-index: 1;
top: 500px;
padding: 15px 10px;
left:50%;
margin-left: -455px;
height: 50px;
background: rgba(0,0,0,0.75);
width: 900px; 
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000); /* IE8 */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);  /* IE6 & 7 */ 
background:rgba(0,0,0,0.75); 
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
color: #FFF; 
font-weight: bold; 
font-size: 14px;
}

#map-legend p {
line-height: normal;
margin: 0 0 5px;
font-weight: normal;
text-align: center;
}

.ie9a #map-legend h4 {
 font-size: 13px;
}

#maplegend-hdr{
font-size: 16px;
text-transform: uppercase;
margin: 10px 10px 0 5px;
float: left;
height: 40px;
}

.maptypes{
background: url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/legend-sprite.png) no-repeat;
float: left;
height: 32px;
margin: 3px 5px 0 10px;
padding: 8px 0 0 60px;
}

.maptypes.other-site {margin-right: 0px;}

.featured-site {
background-position: 0 -37px;
}

.featured-site.off {
background-position: 0 -151px;
}

.tested-site {
background-position: 0 0;
}

.tested-site.off {
background-position: 0 -114px;
}

.other-site {
background-position: 0 -74px;
}

.other-site.off {
background-position: 0 -188px;
}


#map-header div.close-button {
color:#FFF;
background:#900;
padding:20px;
}

#test-map{
width: 100%;
height: 600px;
background: #000;
}

.sb-section.active .arrow-right {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #26353d;
position: absolute;
right: -8px;
top: 35%;
}

#map-sidebar{
position: absolute;
top: 70px;
left: -300px;
width: 300px;
height: 530px;
background: #000;
z-index: 1;
-webkit-transform : translate3d(0,0,0);
-moz-transform : translate3d(0,0,0);
-webkit-transition: left 0.75s ease-in;
-moz-transition: left 0.75s ease-in;
color: #FFF;
}

#map-sidebar.open{
left: 0;
}

.footnote {
font-size: 11px; 
color: #333; 
padding: 5px 10px 5px 10px; 
line-height: 1.2em; 
position: absolute; 
top: -70px;
left: 300px;
width: 510px;
background: rgb(255, 255, 255); 
background: rgba(255, 255, 255, 0.6);
display: none;
}

.footnote.zoomify-footnote  {
left: 492px;
}
.touch .footnote.zoomify-footnote  {
top: -90px;
}
.footnote a {
color: #547c91;
}

.back-to-map{
cursor: pointer;
background: #4f1616;
background-image: url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/back-arrow.png) no-repeat 20px center;			
background: url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/back-arrow.png) no-repeat 20px center, -moz-linear-gradient(top,  #4f1616 0%, #662d2d 100%);
background: url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/back-arrow.png) no-repeat 20px center, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4f1616), color-stop(100%,#662d2d));
background: url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/back-arrow.png) no-repeat 20px center, -webkit-linear-gradient(top,  #4f1616 0%,#662d2d 100%);
background: url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/back-arrow.png) no-repeat 20px center, -o-linear-gradient(top,  #4f1616 0%,#662d2d 100%);
background: url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/back-arrow.png) no-repeat 20px center, -ms-linear-gradient(top,  #4f1616 0%,#662d2d 100%);
background: url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/back-arrow.png) no-repeat 20px center, linear-gradient(top,  #4f1616 0%,#662d2d 100%);
color: #FFF;
text-transform: uppercase;
font-weight: bold;
padding: 13px 10px 10px 40px;
font-size: 16px;
border-bottom: 1px solid #2b2b2b;
}

.ie7 .back-to-map, .ie8 .back-to-map {
background: #4f1616 url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/back-arrow.png) no-repeat 20px center;
}

#map-overlay{
position: absolute;
top: 70px;
left: 300px;
width: 100%;
height: 100%;
background: #000;
z-index: 1;
display: none;	
}

#media-modal #video-player {
background: none;
text-align: center;
margin: 75px 0 0 259px;
}

#mapping #video-player , #testing-soil #video-player {
margin: 8px auto 0;
}

#overlay div.close-button{
cursor: pointer;
position: absolute;
z-index: 2;
top: 70px;
left: 0;
width: 250px;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
padding: 13px 10px 10px 40px;
text-transform: uppercase;
background: #4f1616;
background-image: url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/back-arrow.png) no-repeat 20px center;			
background: url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/back-arrow.png) no-repeat 20px center, -moz-linear-gradient(top,  #4f1616 0%, #662d2d 100%);
background: url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/back-arrow.png) no-repeat 20px center, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4f1616), color-stop(100%,#662d2d));
background: url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/back-arrow.png) no-repeat 20px center, -webkit-linear-gradient(top,  #4f1616 0%,#662d2d 100%);
background: url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/back-arrow.png) no-repeat 20px center, -o-linear-gradient(top,  #4f1616 0%,#662d2d 100%);
background: url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/back-arrow.png) no-repeat 20px center, -ms-linear-gradient(top,  #4f1616 0%,#662d2d 100%);
background: url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/back-arrow.png) no-repeat 20px center, linear-gradient(top,  #4f1616 0%,#662d2d 100%);
color: #FFF;
text-transform: uppercase;
font-weight: bold;
padding: 13px 10px 10px 40px;
font-size: 16px;
border-bottom: 1px solid #2b2b2b;

}

.ie7 #overlay div.close-button, .ie8 #overlay div.close-button {
background: #4f1616 url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/back-arrow.png) no-repeat 20px center;
}

.map-modal{
background: rgba(0,0,0,0.75);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000); /* IE8 */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);  /* IE6 & 7 */			
padding: 20px 20px 0;
color: #FFF;
position: absolute;
top: 70px;
line-height: 1.5em;
}

.map-modal h2 {
font-size: 18px; 
text-transform: uppercase; 
font-weight: bold; 
margin: 0 0 10px;
float: left;
}

#collapseContent a {
color: #C5B463;
cursor: pointer;
}

#media-modal{
	width: 100%;
	top: 0;
/* 	left: 300px; */
	left: 0;
	height: 580px;

}
#doc-modal h2 {
font-size: 14px;
width: 650px;
text-transform: none;
float: none;
position: relative;
left: 50%;
margin-left: -460px;
overflow: hidden;
}

#zoomify-modal{
top: 0;
left: 300px;
width: 100%;
height: 100%;
padding: 0;
}

#meth-modal , #about-modal{
-webkit-transform: translate3d(0,0,0);
background: rgba(0,0,0,0.85);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000); /* IE8 */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);  /* IE6 & 7 */				
width: 500px;
box-shadow: 6px 6px 30px #999;
-webkit-box-shadow: 6px 6px 30px #999;
-moz-box-shadow: 6px 6px 30px #999;
left: 50%;
margin-left: -180px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

#meth-modal .tab-container {
background: none;
}

#about-modal {
margin-left: -120px;
}

#meth-modal .modal-close,  #about-modal .modal-close{
float: right;
margin-right: -3px;
}

#about-modal #about-site-header ul {
float: right;
margin: 0 20px 0 0;
}

#about-modal #about-site-header ul li {
float: left;
margin: 0 0 0 15px;
}

#doc-holder {
left: 50%;
margin-left: -459px;
}

#doc-modal{
width: 100%;
top: 0;
margin: 0 auto;
left: 240px;
height: 580px;
}

#doc-list{
width: 260px;
border: 1px solid #DDD;
height: 20px;
}

#myContainer{
width: 1024px; 
height: 768px ;
background: #FFC800;
}

#zoomFrame{
margin: 0 0 0 0 ;
border: none;
width: 753px;
height: 619px;
margin-top: -19px;
overflow: hidden;
}

.sb-section{
border-bottom: 1px #000 solid;
padding: 10px 20px;
background: #23252a;
background: -moz-linear-gradient(19% 75% 90deg,#343434, #1a1a1a); 
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a1a1a), to(#343434));
cursor: pointer;
}

.sb-section ul li{
margin: 5px 0;
}

.sb-section a{
color: #FFC800;
text-decoration: none;
}

.sb-section span{
cursor: pointer;
margin: 5px 0;
font-size: 12px;
text-transform: none;
color: #FFF;
display: block;
font-weight: 100;
}

#photo-holder{
background: #000 url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/close-button.png) no-repeat 520px 3px;
padding: 20px;
position: relative;
width: 500px;
}
 
#deck #photo-holder {
margin: 30px auto 0;
}
 
.map-modal #photo-holder {
margin: 10px auto;
background-image: none;
left: 0;
top: 0;
}

.map-modal .map-photo-wrapper {
padding-left: 260px;
}

#photo-holder ul {
text-align: center;
position: relative;
z-index: 40;
}

#photo-holder ul li{
display: none;
}

#photo-holder ul li.active-photo{
display: block;
}

#photo-holder .photo-controls{
position: absolute;
width: 120px;
height: 120px;
-moz-border-radius: 120px;
-webkit-border-radius: 120px;
border-radius: 120px;
top: 160px;
text-indent: -9999px;
}

#photo-holder .prev{
background: #000 url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/gallery-prev.jpg) no-repeat 11px 30px;
left: -50px;
display : none;
}

#photo-holder .next{
background: #000 url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/gallery-next.jpg) no-repeat 75px 30px;
right: -50px;
}

.caption {
text-align: left;
color: #FFF;
font-size: 12px;
margin: 5px 0 0;
line-height: 1.4em;
}

.credit {
color: #999;
font-size: 10px;
text-transform: uppercase;
text-align: right;
display: block;
margin: 5px 0 0;
}


.infoBox {
color: #fff;
text-align: left;
font-size: 12pt;
width: 230px;
height: 230px;
padding: 20px 10px;
background: #000;
background: transparent url(http://i.usatoday.net/news/nation/smelting-lead-contamination/images/sampleback.png) 0 0 no-repeat;
margin-top: -280px;
margin-left: -90px;
position: relative;
}

.infoBox h2 {
font-size: 22px;
margin: 0 0 4px 2px;
}

.infoBox p{
font-size: 14px;
margin: 0 2px;
line-height: 1.2em;
}

.infoBox a{
color:#FFF;
text-decoration:none;
}

.infoBox p.sitenumber{
font-size: 12px;
margin: 7px 0 2px 2px;
}
.siteButton {
background-color: #465b66;
padding: 7px 10px;
text-align: center;
margin-top: 15px;
font-size: 90%;
}
html {
overflow-y: auto;
background-color: transparent;
}
.soilBox {
color: #fff;
text-align: left;
font-size: 12pt;
width: 370px;
height: 457px;
padding: 15px;
font-Family: Arial;
font-Style: bold;
background : transparent url('http://i.usatoday.net/news/nation/smelting-lead-contamination/images/sampleback_Large.png') no-repeat 0;
position: relative;

}

.soilBox h2.soiltest {
font-size: 22px;
font-weight:lighter;
margin: 10px 0 4px 5px;
}

.soilBox h2 {
font-size: 22px;
margin: 0px 5px;
}
.soilBox h3 {
font-weight:lighter;
margin: 15px 10px 0 5px;
}

#imageFlip{
margin: 0;
}

#imageFlip img{
margin: 0 !important;
}
.soilBox img {
margin: 15px 15px !important;
}

.soilBox p {
font-size: 14px;
margin: 0 5px;
}

.soilBox a {
color:White;
text-decoration:none;
}

.soilBox table{
color:white;
width: 370px;
border-collapse: collapse;
margin-top: 10px;
margin-left: 5px;
}

.soilBox table td{
border-bottom: 1px solid #555555;
text-align:center;
font-weight:bold;
}
#testResult{
text-align: right;
padding-right: 75px;
}
.soilBox table td.property{
text-align:left;
font-weight: bold;
}

.soilBox table td.header{
color: #7f7e7e;
font-size: 80%;
font-weight:bold;
}
#testresult{
	color:white;
}

.soilBox p.sitenumber {
font-size: 12px;
margin: 20px 0 2px 2px;
}
.soilBox .leftspace{
margin-left: 20px;
}
.collapseInfo{
	width: 370;
	padding: 5px;
	margin-top: 5px;
	position: absolute;
	bottom :50px;

}
.collapseHeader{
	font-size: 95%;
	width: 100%;
	text-align:left;
	padding: 0px;
	height: 20px;
	float:left;

}

.collapseHeader h3{
color: #D2B24B;
    font-size: 90%;
    padding: 1px;
    float:left;
   margin-top: -27px;

   }
.collapseHeader a{
	width: 12px;
	height: 12px;
	margin-left: 130px;
}
#collapseContent{
	width: 370px;
	margin-top: 10px;

}
#collapseContent p{
	font-size: 75%;
	line-height: 13px;
	margin-top: 15px;
    padding: 10px;
}
.siteButton {
background-color: #465b66;
padding: 7px 10px;
text-align: center;
margin-top: 15px;
}
 .scrollTable{
 	height: 155px;
 	overflow-y:auto;
 	overflow-x: hidden;
 	width: 380px;
 	margin-left: 5px;
 }
#scroll-pane {
width: 100%;
height: 300px;
overflow: auto;
margin-top: 10px;
}

#scroll-pane table{
color:white;
width: 350px;
margin-top: 20px;
border-collapse: collapse;
}

#scroll-pane table td{
border-bottom: 1px solid gray;
}

#scroll-pane table td.header{
border-bottom: 0px;
font-size: 80%;
font-weight: bold;
font-color:grey;
}
   
#scroll-pane table td.property{ 
font-weight: bold;
}

#scroll-pane table tr{
width: 70px;
border-left: 0px;
border-right: 0px;
text-align:center;
}
 .instruct{
	 clear: both;
	margin: 2px 5px 5px 0;
	display: table;
	color: rgba(255,255,255,0.7);
	font-size: 10px;
	background: 0 0 url('http://i.usatoday.net/news/nation/smelting-lead-contamination/images/two-finger.png') no-repeat;
	height: 40px;
	padding: 10px 0 0 32px;
} 
.no-touch .instruct{  display: none;  }
#rotate-overlay {display: none;}
 
/* ------------- ipad styles ------------- */

.touch body {background: #000; margin-top: 50px;}
.touch #overlay {background: #000;}
.touch .button {width: 280px;}
.touch .ui-slider .ui-slider-handle {height: 1.8em; width: 1.8em;}
.touch .ui-slider-horizontal .ui-slider-handle {top: -.6em;}
.touch .desktop-arrows {display: none;}
.touch #content_wrap {padding-top: 0;}
.touch .tab-container {width: 790px;}

/* ------------- iPad (portrait) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	body.touch{  height: 1024px;}
 	#rotate-overlay{ background: rgba(0,0,0,0.75);   width: 1024px; height: 100%;z-index: 10000000;  position:absolute; top: 0; left: 0; display: block;}
	.rotate-overlay-modal {   width: 768px; text-align:center;  height: 230px; margin-top: 200px;  padding: 20px; line-height: 1.6em;}
	.rotate-overlay-modal h3 {margin: 160px 40px 40px; font-size: 46px; font-weight: bold; color: #FFF; line-height: 1.4em;}
	.rotate-overlay-modal p {margin-bottom: 17px;}
}