/* GENERAL STYLES FOR IMAGE TRACER */

#page_sub {position: absolute; margin-top: 90px; margin-left: 21px; font-size: 13px; line-height: 17px; width: 600px;}
.credit {font-size: 10px; line-height: 13px;}

body, html {font-family: verdana, sans-serif; background: silver; font-size: 10px; margin: 5px 20px 0 8px; padding: 0;}
img {/*max-width: 130px; max-height: 130px; min-width: 100px; min-height: 100px;*/ background-color: white; opacity: .6; border: 1px solid white;}
a:hover img {border: 1px solid blue; opacity: 1;}

.nav_top a {/* color: white; */}
.nav_top a:hover {/* color: blue; */}

.url, fieldset .url {float: left; width: 140px; height: 140px; margin: 5px; }

.header {opacity:.8; margin: 5px 50px 10px 0; padding: 0; color: black; font-size: 40px; font-weight: bold; text-transform: uppercase; font-family: helvetica, sans-serif; /*background: silver;*/ display: block; }

.info_box {position: relative; width: 300px;}

a {font-style: normal; color: blue; text-decoration: none;}
a:hover {text-decoration: underline; color: white;}

/* TOOLTIP CSS */

.info { text-decoration: none;}
.info strong {color: black;}
a.info {
    position: relative; /*this is the key*/
    
z-index:24;
}
 
a.info:hover {z-index:25; color: blue;}

a.info span {display: none; }

a.info:hover span { /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top: -10px; left: 5px;
    width:140px;
    border:1px solid gray;
    padding: 3px 6px 6px 6px;
    background-color:#FFFFCC; 
    color:black;
    font-family: courier, mono; font-size: 11px; line-height: 13px; color: gray;
}


.header a {color: white;}
.header a:hover {color: blue; text-decoration: none;}

.arrow {}
.arrow a {/*padding-right: 10px;*/}
.date {}
.nav {}

small {text-transform: none; font-size: 40px;}

.clear {color: silver; clear: left;}

.nav .query, .nav .no_query {display: inline;}

/* NEED DYNAMIC MARGINS... MARGIN LEFT OF LAYER1 NEEDS TO BE 3*(total amount of layers - 1); LEFT MARGIN OF ALL SUBSEQUENT LAYERS - 3; SO THAT LAST LAYER ALWAYS HAS A LEFT MARGIN OF 0 */ 
#layer30 {position: absolute; z-index: 210; margin-left: 0; margin-top:58px;}
#layer29 {position: absolute; z-index: 220; margin-left: 0; margin-top:56px;}
#layer28 {position: absolute; z-index: 230; margin-left: 0; margin-top:54px;}
#layer27 {position: absolute; z-index: 240; margin-left: 0; margin-top:52px;}
#layer26 {position: absolute; z-index: 250; margin-left: 0; margin-top:50px;}
#layer25 {position: absolute; z-index: 260; margin-left: 0; margin-top:48px;}
#layer24 {position: absolute; z-index: 270; margin-left: 0; margin-top:46px;}
#layer23 {position: absolute; z-index: 280; margin-left: 0; margin-top:44px;}
#layer22 {position: absolute; z-index: 290; margin-left: 0; margin-top:42px;}
#layer21 {position: absolute; z-index: 300; margin-left: 0; margin-top:40px;}
#layer20 {position: absolute; z-index: 310; margin-left: 0; margin-top:38px;}
#layer19 {position: absolute; z-index: 320; margin-left: 0; margin-top:36px;}
#layer18 {position: absolute; z-index: 330; margin-left: 0; margin-top:34px;}
#layer17 {position: absolute; z-index: 340; margin-left: 0; margin-top:32px;}
#layer16 {position: absolute; z-index: 350; margin-left: 0; margin-top:30px;}
#layer15 {position: absolute; z-index: 360; margin-left: 0; margin-top:28px;}
#layer14 {position: absolute; z-index: 370; margin-left: 0; margin-top:26px;}
#layer13 {position: absolute; z-index: 380; margin-left: 0; margin-top:24px;}
#layer12 {position: absolute; z-index: 390; margin-left: 0; margin-top:22px;}
#layer11 {position: absolute; z-index: 400; margin-left: 0; margin-top:20px;}
#layer10 {position: absolute; z-index: 410; margin-left: 0; margin-top:18px;}
#layer9 {position: absolute; z-index: 420; margin-left: 0; margin-top:16px;}
#layer8 {position: absolute; z-index: 430; margin-left: 0; margin-top:14px;}
#layer7 {position: absolute; z-index: 440; margin-left: 3px; margin-top:12px;}
#layer6 {position: absolute; z-index: 450; margin-left: 6px; margin-top:10px;}
#layer5 {position: absolute; z-index: 460; margin-left: 9px; margin-top:8px;}
#layer4 {position: absolute; z-index: 470; margin-left: 12px; margin-top:6px;}
#layer3 {position: absolute; z-index: 480; margin-left: 15px; margin-top:4px;}
#layer2 {position: absolute; z-index: 490; margin-left: 18px; margin-top:2px;}
#layer1 {position: absolute; z-index: 500; margin-left: 21px; margin-top:0px;}

html>body .header {filter:alpha(opacity=.2);-moz-opacity:.2;opacity:.2;}
html>body #layer1 .header {filter:alpha(opacity=1);-moz-opacity:1;opacity:1;}

.header {color: gray;}
#layer1 .header {color: black;}

fieldset {display: inline; padding: 3px;}
legend {background: #FFFFCC;  font-family: courier, mono; font-size: 12px; text-decoration: none; font-weight: normal; text-transform: none; display: inline;}

legend {color: gray; padding: 2px;}
legend a:link, legend a:visited {color: blue;}
legend a:hover {color: black;}

.legends {margin-top: 10px;}

.no_query a {color: gray;}

#underfire #layer1, #underfire #layer2, #underfire #layer3, #underfire #layer4, #underfire #layer5, #underfire #layer6, #underfire #layer7, #underfire #layer8  {width: 450px;}