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

/* ----------------------------------general ------------------------*/

body {
	font-family: Arial, Helvetica, Verdana, sans-serif;
	color:#000000;
	padding:0;
	border:0;
	margin:0;
	text-align:center;
	background-color: #FFFFFF;
}

#wrapper {
/*	width:1200px;*/
	text-align:left;
	background-repeat: repeat-y;
	margin-top: 100px;
	margin-bottom: 0;
	margin-left: 20px;
	height:700px;
	z-index:1;
}

#header {
height:50px;
text-align:left;
margin-right:10px;
margin-left:15px;
width:200px;/*
padding-bottom:0px;
border-bottom:2px solid #000000;*/
position:absolute;
top:30px;
z-index:200;
}


#about {
	margin:auto;
	width:830px;
	top:160px;
	left:250px;
	position:absolute;
	text-align:justify;
	font-size:90%;
	z-index:1;
}
#container_contact {
	font-size:80%;
position:absolute;
top:150px;
left:325px;
}
/*--------------------------------showcase----------------------------------*/

#main {
position:absolute;
	top: 50px;
	width:800px;
	height:601px;/*
	background:#FFFFFF;
	border:thin dashed #CCCCCC;*/
	margin-left:300px;
	margin-right:auto;
	
	}
#showcase {
	width:800px;
	position:relative;
	top:100px;
	left:0px;
}
#showcase_pan {
	width:1300px;
	position:relative;
	top:100px;
	left:0px;
}

/*------------------------------------links-------------------------------*/
a {
	color:#000000;/*
	font-weight:bold;*/
	text-decoration:none;
}
A:link    { color: black }
A:hover { color: gray }
A:active  { color:#666666 }
A:focus {color:#666666}

a.linkk {
	color:#000000;
	text-decoration:none;
}


/* images without border, white background */
A.img{text-decoration:none;color:#FFFFFF; }
A.img:link{text-decoration:none;color:#FFFFFF;}
A.img:hover{text-decoration:none;color:#FFFFFF;}
A.img:active{text-decoration:none;color:#FFFFFF;}

/* images without border,grey background */
A.img2{text-decoration:none;color:#5E5E5E;}
A.img2:link{text-decoration:none;color:#5E5E5E;}
A.img2:hover{text-decoration:none;color:#5E5E5E;}
A.img2:active{text-decoration:none;color:#5E5E5E;}

/*------------------------------- pharagraph -------------------------------*/
	
h2 {
font-style: normal;
font-weight:lighter;
}	

P {	color:#000000;
	padding:0px;
	border:0px;
	margin:0px;
	text-align:left;
}

p.text {color:#000000;
	margin:11px;
	margin-top:60px;

}

P.bold {font-weight:bold;}
p.title {
	margin-top:30px;
	font-weight:bold;
	font-size:150%;
	text-align:center;
}

/* -------------------------------navigation bar -------------------------------*/
	
/* navigation links */
A.nav {
	color:#000;
	text-decoration:none;
	}
A.nav:link    { color: black;}
A.nav:hover { color: gray;}
A.nav:active  { color:#666666}
A.nav:focus {color:#666666;}
/*paragraph*/
p.nav {
	text-align:justify;
	color:#CCCCCC;
	}
/*containers*/
#nav_bar{
position:absolute;
	left:0px;
	top:65px;
	width:600px;
	height:20px;
}
#prev-next{
	position:absolute;
	top:-7px;
	left:160px;
	z-index:2;
	font-size:30px;
	}
#showtext {
	text-align:left;
	position:absolute;
	left:0px;
	z-index:4;
	font-size:16px;
	}
#download{
	text-align:left;
	position:absolute;
	left:250px;
	z-index:5;
	font-size:16px;
	}	


/*-------------------------------style for popups------------------------------- */

 a span.prev{display: none;}
 a:hover span.prev {
 	color:#000000;
 	display: block;
   	position: absolute; 
   	top:-20px; 
	left:-28px; 
   	width: 100px;
   	z-index: 200;
   	text-align: center;
	font-size:12px;}
 a span.next{display: none;}
 a:hover span.next {
 	color:#000000;
 	display: block;
   	position: absolute; 
   	top:-20px; 
	left:50px; 
   	width:100px;
   	z-index:200;
   	text-align:left;
	font-size:12px;}
 a span.downl{display: none;}
 a:hover span.downl {
 	color:#000000;
 	display: block;
   	position: absolute; 
   	top:-20px; 
	left:-30px; 
	width:250px;
   	z-index:250;
   	text-align:left;
	font-size:12px;} 
 a span.showtext{display: none;}
 a:hover span.showtext {
 	color:#000000;
 	display: block;
   	position: absolute; 
	width:760px;/*slighty larger to ensure that text covers the whole img*/
	height:505px;
   	top:30px; 
	left:-5px;
   	z-index: 200;
   	text-align:left;
	font-size:14px;
	background-color:#FFFFFF;
	padding-left:5px;
	padding-right:20px;
		/*testing*/
	/*
	border:dashed thin #CCCCCC;
	opacity:.7	*/
	}

	 a span.showtext_fixed{
 	color:#000000;
 	display: block;
   	position: absolute; 
	width:760px;/*slighty larger to ensure that text covers the whole img*/
	height:505px;
   	top:30px; 
	left:-5px;
   	z-index: 200;
   	text-align:left;
	font-size:14px;
	background-color:#FFFFFF;
	padding-left:5px;
	padding-right:20px;}
 a:hover span.showtext_fixed {
 	color:#000000;
 	display: block;
   	position: absolute; 
	width:760px;/*slighty larger to ensure that text covers the whole img*/
	height:505px;
   	top:30px; 
	left:-5px;
   	z-index: 200;
   	text-align:left;
	font-size:14px;
	background-color:#FFFFFF;
	padding-left:5px;
	padding-right:20px;}

	/*--------------------------dots (unused)-------------------------------*/
#dots {
position:absolute;
top:200px;
left:400px;
width:500px;
}
a.dot {
	color:#CCCCCC;
	text-decoration:none;
	}
a.dot:link    { color: black;}
a.dot:hover { color: gray;}
a.dot:active  { color:#666666;}
a.dot:focus {color:#666666;}	
	
a.dot_in {
	color:#000000;
	text-decoration:none;
	}
a.dot_in:link    { color: black;}
a.dot_in:hover { color: #F2F2F2;}
a.dot_in:active  { color:#666666;}
a.dot_in:focus {color:#666666;}

a span.dot{display:none;}
a:hover span.dot{
	color:#000000;
	width:-20px;
   	top:200px; 
	left:-95px;
   	z-index: 200;
   	text-align:justify;
	font-size:14px;
	}
/*--------------------- ---------menus-------------------------------*/

/*-------------------------------menu links-------------------------------*/

.menu a, .menu a:visited {
display:block; 
text-decoration:none;
height:20px;
line-height:19px;/*
width:100px;
color:#000000;*/
text-indent:5px;
cursor:default;
}
a.menu_main, a.menu_main:visited{
display:block; 
text-decoration:none;
height:30px;
line-height:29px;
text-indent:5px;
cursor:default;
}

/* menu not current */
/*1st level*/
A.menu_main_no, a.menu_main_no:visited {
color:#999999;
height:30px;
line-height:29px;
}
A.menu_main_no:hover { color:#CCCCCC;}
A.menu_main_no:active  { color:#CCCCCC;}
A.menu_main_no:focus {color:#666666;}

/*2nd level*/
A.menu_no, a.menu_no:visited {
color:#999999;
}
A.menu_no:hover { color:#CCCCCC;}
A.menu_no:active  { color:#CCCCCC;}
A.menu_no:focus {color:#666666;}

/*--------------------------containers--------------------------------*/
#menu_main {
	position:absolute;
	left:10px;
	top:60px;
	padding:80px 0 40px 0;
	width:250px;
	height:400px;
	z-index:10;
}
.menu {
	font-size:14px;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
	width:100px;
	top:0px;
	left:0px;
	list-style-type:none;
	z-index:1;
}
/* position relative so that you can position the sub levels */
.menu li {
position:relative;
}

/* get rid of the table */
table {position:absolute; top:0px; left:0px;}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
	visibility:hidden; 
	position:absolute;
	top:5px;
	left:60px;
	z-index:2;
	width:150px;
}
/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{
	visibility:visible;
}

/* make the second level visible when focus is on it */
.menu_focus ul ul {
	visibility:visible;
	position:absolute;
	top:5px;
	left:60px;
	width:150px;
	}

#imgintro {
width:auto;
margin:auto;
text-align:left;
}

#button {
height:50px;
text-align:left;
margin-right:10px;
margin-left:15px;
width:200px;
padding-bottom:0px;/*
border-bottom:2px solid #000000;*/
position:fixed;
top:50px;
z-index:200;
}


/* ------------------- book layout  ------------------- */


/* CROPMARKS */
/*lt: left-top    rb : right-bottom   etc */

#crop_LT {
margin-left:0px;
margin-top:0px;
position:absolute;
}
#crop_LB {
top:475px;
position:absolute;
}
#crop_RT {
position:absolute;
left:925px;
}
#crop_RB {
top:475px;
left:925px;
position:absolute;
}
/*  crop single spread  */
#crop_RT2 {
position:absolute;
left:475px;
}
#crop_RB2 {
top:475px;
left:475px;
position:absolute;
}
/* TXT - titles */
#book_title {
z-index:2;
left:35px;
top:45px;
position:absolute;
}
#book_title-R {
z-index:2;
left:500px;
top:45px;
position:absolute;
}
/* TXT - text blocks */
#book_txt-0L {
z-index:2;
left:35px;
top:35px;
position:absolute;
width:400px;
}
#book_txt-0R {
z-index:2;
left:500px;
top:35px;
position:absolute;
width:400px;
}
#book_txt-1L {
z-index:2;
left:35px;
top:50px;
position:absolute;
width:400px;
}
#book_txt-1R {
z-index:2;
left:500px;
top:50px;
position:absolute;
width:400px;
}
#book_txt-2L {
z-index:2;
left:35px;
top:90px;
position:absolute;
width:400px;
}
#book_txt-2R {
z-index:2;
left:500px;
top:90px;
position:absolute;
width:400px;
}

/* TXT - captions */
#book_cap-1R {
z-index:2;
left:500px;
top:40px;
position:absolute;
width:120px;
}
#book_cap-2R {
z-index:2;
left:500px;
top:110px;
position:absolute;
width:120px;
}
#book_cap-3R {
z-index:2;
left:640px;
top:40px;
position:absolute;
width:300px;
}
#book_cap-4R {
z-index:2;
left:640px;
top:110px;
position:absolute;
width:120px;
}
#book_cap-5R {
z-index:2;
left:790px;
top:40px;
position:absolute;
width:120px;
}
/* paragraph styles */
p.book_title {
z-index:2;
font-size:75%;
color:#999999;
}
p.book_txt {
z-index:2;
font-size:8.5px;
line-height:10px;
}
p.notes {
z-index:2;
font-size:7px;
}
/* IMAGES */
#book_img-L{
left:25px;
top:25px;
position:absolute;
}
#book_img-R {
left:475px;
top:25px;
position:absolute;
}
#book_img-low {
left:290px;
top:230px;
position:absolute;
}
#book_img-full {
left:25px;
top:25px;
position:absolute;
z-index:0;
}
#book_logos-R {
left:475px;
top:360px;
position:absolute;
}

/* style COVER */
p.book_title-cover {
z-index:2;
font-size:120%;
color:#999999;
}
#book_title-cover {
z-index:2;
left:65px;
top:65px;
position:absolute;
}
#book_img-cover {
left:23px;
top:23px;
position:absolute;
z-index:0;
}