@charset "UTF-8";
/* CSS Document */


body
{
background-color:#fff;
background-image:url(/playground/lostmapstudio/images/lmsbg.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:bottom left;
color:#09c;
font-family:"Verdana",Arial,Sans-Serif;
font-size:.6em;
}

img.bordered {border:1px dashed #f06;}

a:link {color:#c60;}
a:visited {color:#099;}
a:hover {color:#f06;}
a:active {color:#f06;}
a:link img {border:1px solid #fff;}
a:visited img {border:1px solid #fff;}
a:hover img {border:1px dotted #f06;}
a:hover div{color:#666;}
a:active div{color:#09c;}

div.splash
{
position:absolute;
top:15%;
left:290px;
width:300px;
color:#999;
font-family:"Lucida Grande", Verdana, Arial,Sans-Serif;
font-size:1.2em;
text-align:center;
}




/* image link styles */

div.navthumb /**picture links**/
{
width:42px;
height:42px;
border:1px dashed #f33;
margin-top:7px;
}

div.newthumb /**links for new images on the homepage**/
{
width:52px;
height:52px;
border:1px dashed #f33;
margin-bottom:7px;
}





/* text styles */

h1 /**green, used in bio*/
{
color:#0c0;
font-family:"Courier New","Lucida Console",Monospace;
font-size:1.3em;
margin:0px;
font-weight:normal;
}


h2 /**the right-aligned version of h1**/
{
color:#0c0;
font-family:"Courier New","Lucida Console",Monospace;
font-size:1.3em;
margin:0px;
font-weight:normal;
text-align:right;
}

h3 /**green, used for gallery menu & titles**/
{
color:#0c0;
font-family:"Courier New","Lucida Console",Monospace;
font-size:1.4em;
margin-top:5px;
font-weight:normal;
}

h4 /**gray, mimics header font, used in bio**/
{
color:#ccc;
font-family:"Courier New","Lucida Console",Monospace;
font-size:2em;
font-weight:lighter;
text-align:right;
}

h5
{ /**blue, mimics regular font, but with bottom padding, used in new images bar**/
color:#09c;
font-family:"Verdana",Arial,Sans-Serif;
font-size:1em;
font-weight:lighter;
margin-top:0px;
margin-bottom:3px;
text-align:center;
}

small
{
color:#999;
font-family:"Lucida Grande", Verdana, Arial,Sans-Serif;
font-size:.9em;
}





/* "lostmapstudio" header */

div.header
{
position:fixed;
left:88px;
color:#ccc;
font-family:"Courier New","Lucida Console",Monospace;
font-size:2em;
text-align:center;
z-index:-1;
}





/* menus */

div.mainmenu
{
position: fixed;
left:22px;
width:44px;
border-bottom:1px dashed #f06;
border-left:1px dashed #f06;
border-right:1px dashed #f06;
padding:49px 7px 7px 7px;
background-color:#fff;
}

div.artmenu
{
position:fixed;
left:89px;
top:166px;
width:98px;
border:1px dashed #f06;
padding:7px;
background-color:#fff;
}

div.comicsmenu
{
position:fixed;
left:89px;
top:115px;
width:98px;
border:1px dashed #f06;
padding:7px;
background-color:#fff;
}





/*  elements that use the "middle" outer container */

div.middle
{
position:absolute;
left:210px;
top:115px;
width:326px;
}

div.midbox
{
position:relative;
width:262px;
border:1px dashed #f06;
margin-bottom:10px;
background-color:#fff;
}

div.comicsbox1
{
position:relative;
width:260px;
padding:7px 8px 8px 8px;
border:1px dashed #f06;
margin-top:0px;
background-color:#fff;
margin-bottom:10px;
}

div.comicsbox2
{
position:relative;
width:146px;
padding:7px 8px 8px 8px;
border:1px dashed #f06;
margin-top:28px;
background-color:#fff;
margin-bottom:10px;
}

div.artbox1
{
position:relative;
width:392px;
padding:7px 8px 8px 8px;
border:1px dashed #f06;
margin-top:51px;
background-color:#fff;
margin-bottom:10px;
}

div.artbox2
{
position:relative;
width:260px;
padding:7px 8px 8px 8px;
border:1px dashed #f06;
margin-top:80px;
margin-bottom:10px;
background-color:#fff;
}

div.artbox3
{
position:relative;
width:130px;
padding:7px 8px 8px 8px;
border:1px dashed #f06;
margin-top:108px;
margin-bottom:10px;
background-color:#fff;
}

div.artbox4
{
position:relative;
width:260px;
padding:5px 8px 8px 8px;
border:1px dashed #f06;
margin-top:155px;
margin-bottom:10px;
background-color:#fff;
}

div.biobox
{
position:absolute;
width:242px;
height:212px;
padding:0px 8px 8px 16px;
border:1px dashed #f06;
margin-top:204px;
background-color:#fff;
}






/*elements without a container */
div.bioside
{
position:absolute;
left:485px;
margin-top:311px;
}

div.extranews
{
position:fixed;
top:20px;
left:582px;
width:200px;
border:1px dashed #f06;
padding:0px 7px 0px 7px;
background-color:#fff;
}



/*elements that use the "side" outer container*/

div.side
{
position:fixed;
left:560px;
}

div.indexside
{
position:fixed;
right:121px;
width:147px;
}

div.twit
{
position:relative;
width:145px;
border-bottom:1px dashed #f06;
border-left:1px dashed #f06;
border-right:1px dashed #f06;
padding:20px 7px 7px 7px;
margin-bottom:10px;
background-color:#fff;
}

div.twitinner
{
position:relative;
width:143px;
color:#09c;
font-family:"Verdana",Arial,Sans-Serif;
font-size:.9em;
text-align:justify;
overflow: hidden;
}

div.news
{
position:relative;
width:145px;
border:1px dashed #f06;
padding:7px;
margin-bottom:10px;
background-color:#fff;
}

div.newimages
{
position:absolute;
right:30px;
width:55px;
border-left:1px dashed #f06;
border-right:1px dashed #f06;
padding:0px 7px 0px 7px;
background-color:#fff;
}

div.links /**should be same as side2, but with bottom border**/
{
position:absolute;
left:730px;
width:auto;
border-bottom:1px dashed #f06;
border-left:1px dashed #f06;
border-right:1px dashed #f06;
padding:0px 7px 0px 7px;
background-color:#fff;
}

div.link
{
position:static;
width:auto;
color:#999;
font-family:"Verdana",Arial,Sans-Serif;
font-size:.9em;
}

div.linktitle
{
position:static;
width:auto;
color:#09c;
font-family:"Verdana",Arial,Sans-Serif;
font-size:.9em;
text-align:right;
}





/* footer */

div.footer
{
position:fixed;
left:8px;
bottom:5px;
color:#999;
font-family:"Verdana",Arial,Sans-Serif;
font-size:.9em;
text-align:left;
}



/* javascript Lightbox2 css code */

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: +2; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto; }
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto;}
#imageContainer{ padding: 10px;}

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%;}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:/art/images/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../art/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../art/images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ position: relative; font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; }

#imageData{	padding:0 10px; color: #666;}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0;  width: 1000px; height: 100%; background-color: #ffc;}