/* CSS DOCUMENT */
/* Developed for Universe Adventure: organized by layout */
/* 1 - change width of page */
/* 2 - change color scheme of page 
http://wellstyled.com/tools/colorscheme2/index-en.html
sorted by color groups
2a - a dark background color (nav/footer)
2b - a dark bg color (lighter than 2a for subcontent/blockqt/tooltip)
2c - a lighter front color (for highlighting)
2d - text colors (for links)
*/

body#slide {
	padding-top: 10px;
	padding-left: 0px;
	padding-right: 0px;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-image: url(images/bg-strip.gif);
	background-repeat: repeat-x;
	background-attachment: fixed;
	background-position: top;
	background-color: #ccc;
	font-size: 14px;
	color:#fff;}

body#quiz {background-color: #000;}
body#movie {background-color: #000;}

body#sidequest {
	padding-top: 10px;
	padding-left: 0px;
	padding-right: 0px;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #000;
	font-size: 12px;
	color:#fff;}

/* CONTENT */

/* TOOLTIP from http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm */
#dhtmltooltip {
	position: absolute;
	width: 150px;
	text-align: left;
	border: 1px solid white;
	padding: 3px;
	/* 2b */background-color: #000000;
	visibility: hidden;
	z-index: 100;
	/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
	/*filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);*/}

/* HEADERS AND PARAGRAPHS */
h1, h2, h3, h4, h5, h6 {
	font-style: normal;
	text-decoration: none;
	margin-left: 0px;
	padding: 0px;
	font-weight: bold;}
	
h1 {font-size: 250%;}
h2 {font-size: 200%;}
h3 {font-size: 160%;}
h4 {font-size: 140%;}
h5 {font-size: 120%;}
h6 {font-size: 100%;}

.pimage {font-size: 90%; font-style:italic; text-align: center; padding: 5px 0px 5px 0px}
.imageright {font-size: 90%; font-style:italic; text-align: center; padding: 5px 0px 5px 5px; float:right}
.imageleft {font-size: 90%; font-style:italic; text-align: center; padding: 5px 10px 5px 0px; float:left}
.pembed {font-size: 90%; text-align: center; font-style:italic;}
.p1 {font-size: 140%;}
.p2 {font-size: 120%;}
.p3 {font-size: 100%;}
.p4 {font-size: 80%;}
p.pop {
	font-size: 100%;
	text-align:center;
	}
img.pop {vertical-align: middle;
	}	

#header {
      margin: 0px;
	  padding:0px;
      position:relative;
      /* 1 */ width: 800px;
	  height: 100px;
      margin:0px;
	  padding:0px;
      overflow:hidden;}
	  	  
#header span {
	display:block;
	position:absolute;
	left:0px; 
	top:0px; 
	z-index:1;
	/* 1 */ width: 800px; 
	height:100px;
	margin:0px; 
	padding:0px;
	background:url("images/header.png") top left no-repeat;}

/* LINKS */

img {border-style: none;}

a:link {text-decoration: none; color: #467DE0;}
a:hover {text-decoration: none; color: #80ACED;}
a:visited {text-decoration: none; color: #467DE0;}
s:active {text-decoration:none; color:#467DE0;}

a.define:link {font-style: italic; font-weight: bold; color: #2DAE31;}
a.define:hover {font-style: italic; font-weight: bold; color: #24BE7E;}
a.define:visited {font-style: italic; font-weight: bold;color: #2DAE31;}
a.define:active {font-style: italic; font-weight: bold; color: #2DAE31;}

/* DIVS */
div#container {
	/* 1 */ width: 800px !important;
	/* 1 + 10px (margin) */ width /**/: 810px;
    margin: 0px auto;
	padding: 5px;
	text-align: left;
	background-color: #000;
	}
	
div#header {
	background-color: #000;
	padding: 0px;
	text-align:center;
	}
	
div#box {
	width: 630px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin:0 auto;
    text-align:left;
	background-color: #000000;
	}
	
div#content {
	float: left;
	/* 1 - 150px (nav) - 10px (margin) */ width: 630px;
	padding-left: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
	margin-bottom: 5px;
	margin-top: 10px;
	background-color: #000;
	}
	
div#nav {
	float: right;
	width:160px;
	padding-top: 3px;
	margin-top: 10px;
	margin-bottom: 5px;
	padding-bottom: 3px;
	/* 2a */ background-color: #666;
	}
	
div#footer{
	clear: both;
	/* 1 */ width: 800px;
	/* 2a */ background-color: #666;
	padding: 0px;
	text-align:center;
	}
	
div#blockquote div {
				/* 2b */ background-color: #888;
				padding-right: 5px;
				padding-left: 5px;
				margin-top: 15px;
				margin-bottom: 15px;
				margin-left: 150px;
				margin-right: 150px;}
	
div#subcontent div {
				/* 2b */ background-color: #888;
				padding-right: 5px;
				padding-left: 5px;
				margin-top: 7px;
				margin-bottom: 7px;
				margin-left: 10px;
				margin-right: 10px;}
			
div#subcontent div#blockquote p, h1, h2, h3, h4, h5, h6 {padding: 0px 3px 0px 3px; margin: 0px 0px 0px 0px;}

/* NAVIGATION */
.pnav {font-size: 100%; text-align: center;}
.pnav a:link {text-decoration: none; /* 2d */color: #fff}
.pnav a:visited {text-decoration: none; /* 2d */color:#fff;}
.pnav a:hover {font-weight: bold; text-decoration: none; color: #fff;}
.pnav a:active {text-decoration:none; color: #fff;}

ul.move, ul.move li{margin: 0px; padding: 0px; list-style-type:none;}

ul.move li{
	float:right;
	width: 7em;
	font-size:80%;
	padding-right: 0px;
	padding-bottom: 3px;}
	
ul.move a{
	display: block;
	width: 6em;
	padding:2px 0px;
	/* 2b */background-color: #666666;
	color: #FFFFFF;
    text-decoration: none;
	text-align:center;
	}
	
ul.move a:visited{color:#FFFFFF;}
ul.move a:hover{color: #FFFFFF; /* 2c */background-color: #888; font-weight:bold}

/* FOOTER */
#footer a:link {text-decoration: none; color:#fff;}
#footer a:visited {text-decoration: none; color:#fff;}
#footer a:hover {text-decoration: none; font-weight: bold; color: #fff;}
#footer a:active {text-decoration:none; color: #fff;}