/* Copyright. 2009. Arthur Makhnevich @ www.artmak.net */


* {
	padding: 0;
	margin: 0;
}


#wrap {
	position: relative;
	margin: 0 auto;
	width: 1024px;
	height: 600px;
	}


body {
	background-image: url(images/bg2.gif);
	}

#main {
	position: relative;
	width: 1024px;
	height: 445px;
	border: 6px solid;
	border-color: white;
	top: 40px;
	}


#empty {
	position: relative;
	width: 1024px;
	height: 445px;
	border: 6px solid;
	border-color: white;
	top: 40px;
	}


#info {
	position: absolute;
	top: 50px;
	left: 0px;
	z-index:2;
	}

.popup
{
   position:absolute; left:0px; top:120px; width:325px;
   border-top:solid;
   border-right:solid;
   border-bottom:solid;
   border-width:6px;
   border-color:white;
   background-image: url(images/bg3.gif);
   padding: 5px;
   color: white;
   font-family: Arial;
   font-size: 9pt;
   z-index:15;
   visibility:hidden;
}



h3 {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: white;
	}

#number {
	position: absolute;
	top: 80px;
	left: 30px;
	visibility: hidden;
	z-index:2;
	}

#pagefold_sml {
	position: absolute;
	top: 46px;
	left: 6px;
	z-index: 1;
	visibility: visible;
	}

#butterfly {
	position: absolute;
	top: 435px;
	left: 917px;
	z-index: 100;
	visibility: visible;
	}
	
#butterfly2 {
	position: absolute;
	top: 435px;
	left: 910px;
	z-index: 100;
	visibility: visible;
	}
	
#butterfly4 {
	position: absolute;
	top: 435px;
	left: 917px;
	z-index: 100;
	visibility: visible;
	}

/* Labels */

#artmak {
	position: absolute;
	top: 505px;
	left: 25px;
	}

#stills {
	position: absolute;
	top: 515px;
	left: 417px;
	}


#web {
	position: absolute;
	top: 515px;
	left: 435px;
	}
	
#product {
	position: absolute;
	top: 515px;
	left: 575px;
	}
	
#ani {
	position: absolute;
	top: 514px;
	left: 755px;
	}

/* Errors */

#error1 {
	position: absolute;
	top: 350px;
	left: 20px;
}


#error2 {
	position: absolute;
	top: 80px;
	left: 20px;
}


/* Navigation */

.nav {
	position: absolute;
	top: 555px;
	left: 25px;
	word-spacing: 2px;
	}
	
.nav0 {
	position: absolute;
	top: 555px;
	left: 920px;
	word-spacing: 5px;
	background-image: url(images/bg4.gif);
	}
	
.boxlinks1 { 
	position: absolute;
	top: 513px;
	left: 475px;
	}
	
.boxlinks2 { 
	position: absolute;
	top: 513px;
	left: 650px;
	}	

.boxlinks3 { 
	position: absolute;
	top: 513px;
	left: 785px;
	}	

/* Links */

a img {border:none;}

#info a { background-image: url(images/info_off.png); height: 10px; width:48px; display:inline-block;}
#info a span { display: none; }
#info a:hover {background: url(images/info_on.png);}

a#nav_vis { background-image: url(images/nav_vis.png); height: 11px; width:110px; display:inline-block;}
a#nav_vis span { display: none; }
a#nav_vis:hover {background: url(images/nav_vis_on.png);}

a#nav_web { background-image: url(images/nav_web.png); height: 11px; width:66px; display:inline-block;}
a#nav_web span { display: none; }
a#nav_web:hover {background: url(images/nav_web_on.png);}

a#nav_free { background-image: url(images/nav_free.png); height: 11px; width:38px; display:inline-block;}
a#nav_free span { display: none; }
a#nav_free:hover {background: url(images/nav_free_on.png);}

a#nav_about { background-image: url(images/nav_about.png); height: 11px; width:50px; display:inline-block;}
a#nav_about span { display: none; }
a#nav_about:hover {background: url(images/nav_about_on.png);}

.boxlinks1 a {background-image: url(images/link_box_01.png); height: 15px; width: 15px; display:inline-block;}
.boxlinks1 a span { display: none; }
.boxlinks1 a:visited {background: url(images/link_box_on.png);}
.boxlinks1 a:hover {background: url(images/link_box_on.png);}


.boxlinks2 a {background-image: url(images/link_box_green.png); height: 15px; width: 15px; display:inline-block;}
.boxlinks2 a span { display: none; }
.boxlinks2 a:hover {background: url(images/link_box_on.png);}
.boxlinks2 a:visited {background: url(images/link_box_on.png);}

.boxlinks3 a {background-image: url(images/link_box_01.png); height: 15px; width: 15px; display:inline-block;}
.boxlinks3 a span { display: none; }
.boxlinks3 a:hover {background: url(images/link_box_on.png);}
.boxlinks3 a:visited {background: url(images/link_box_on.png);}

a#prev { background-image: url(images/prev_01.png); height: 10px; width:20px; display:inline-block;}
a#prev span { display: none; }
a#prev:hover {background: url(images/prev_01_on.png);}

a#next{ background-image: url(images/next_01.png); height: 10px; width:20px; display:inline-block;}
a#next span { display: none; }
a#next:hover {background: url(images/next_01_on.png);}


/* Animation */

.anim {
	position: absolute;
	right: -7px;
	top: 45px;
	border: 1px solid;
	border-color: white;
	z-index: 10;
	}