/********************************************
   AUTHOR:  			Dean Scott 
   WEBSITE:   			http://chrusion.com/
   TEMPLATE NAME: 		chrusion
   VERSION:				1.0          	
 *******************************************/
 
#player_popup {
	POSITION: absolute;
	/* top: 120px;
	left: 50px; */
	VISIBILITY: hidden;
	BACKGROUND-COLOR: #bbb;
	width: 640px;
	height: 450px;
	BORDER-LEFT: 1px solid black;
	BORDER-TOP: 1px solid black;
	BORDER-BOTTOM: 3px solid black;
	BORDER-RIGHT: 3px solid black;
	PADDING: 3px;
	z-index: 2;
}


html, body {
	min-height: 100%;
	width: 100%;
	height: 100%;
}

html>body {
	background: #151515 url(images/main_background.jpg) no-repeat; 
	background-position: top;
	color: #111;                  /* near black text */
 	font: 75%/1.3em  Verdana, 'Trebuchet MS', arial, sans-serif;
 	margin: 0;
	padding: 0;
 	text-align: center;			/* IE5/Win workaround for unsupported margin:auto that */
 								/*centers EVERYTHING including divs and what's inside them */
}

p { 
	padding: 0;
	margin: 10px 15px; 
	text-align: justify;
}  

#window_container {
	/* z-index: 1; */
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

#site_container {
	/* z-index: 2; */
	position: relative;		/* must be relative in order to see 100% height of parent */
	text-align: left;
	width: 900px;
	min-height: 100%;		/* For Modern Browsers */
	height: auto !important;  /* For Modern Browsers */
	height: 100%;			/* For IE */
	/* display: table;			/* For IE */
	margin: 0 auto;         /* centers div in window */
	padding: 0;
	/* background: url(images/trans100px.gif) repeat;  */
}

#site_bg {
	/* z-index: 3; */
	position: absolute;
	top: 0;
	left: 0;
	width: 900px;
	min-height: 100%;		/* For Modern Browsers */
	/* height: auto !important; /*For Modern Browsers */
	height: 100%;			/* For IE */
	/* display: table;			/* For IE */
	margin: 0 auto;         /* centers div in window */
	padding: 0;
	background: #fff; /* url(images/white100px.gif) repeat; */
	opacity: 0.80;
	-moz-opacity: 0.80;
	*filter: alpha(opacity=80); /* IE's opacity*/
}

#header {
	/* z-index: 4; */
	background: url(images/logo.gif) no-repeat 170px 10px;
	position: relative;
	width: 730px;
	height: 100px;
	margin: 0;
	padding: 0;
	font-size: 8px;
}

#main_content {
	/* z-index: 5; */
	position: relative; 	/* must be relative in order for 'footer' div to be positioned at bottom of this div */
	width: 730px;
	min-height: 100%;		/* For Modern Browsers */
	height: auto !important;/* For Modern Browsers */
	height: 100%;			/* For IE */
	margin: 0;
	padding: 0 0 40px 0;	/* bottom margin = footer height so bottom edge of footer is positioned correctly */ 
}

#main_content h1 {
	font-size: 18px;
	padding: 4px 0 5px 30px;         /* top, right, bottom, left */ 
	text-transform: uppercase;
	background: url(images/square_arrow.gif) no-repeat 5px .15em;
	border-left: 5px solid #ef9e11;	
	border-bottom: 1px solid #ef9e11;	
	color: #f8191e;               /* chrusion-red */
}	


/* sidebar */

#sidebar_bg {
	z-index: 10;
	position: absolute;
	top: 0;
	right: 15px;
	width: 155px;
	min-height: 100%;		/* For Modern Browsers */
	height: auto !important;/* For Modern Browsers */
	height: 100%;			/* For IE */
	margin: 0;
	padding: 0;
	background-color: #975;
	opacity: 0.2;
	-moz-opacity: 0.2;
	*filter: alpha(opacity=20); /* IE's opacity*/
}

#sidebar {
	z-index: 11;
	position: absolute;
	top: 0;
	right: 15px;
	width: 155px;			/* width of bg div -15px right margin */
	min-height: 100%;		/* For Modern Browsers */
	/*height: auto !important; For Modern Browsers */
	height: 100%;			/* For IE */
	margin: 0;
	padding: 0;
}

#thumb_container {
	z-index: 12;
	position: relative;
	top: 0;
	left: 0;
	text-align: center;
	width: 170px;
	height: 65%;
	margin: 0;
	padding: 0;
	overflow: auto;
}

#thumb_container img {
	margin: 2px;
}

#sidebar h2 {
	font-size: 16px;
	padding: 4px 0 5px 0px;         /* top, right, bottom, left */ 
}

#sidebar ul.menu {
	list-style:none;
	position: relative;
	margin: 10px 10px;         /* top, right */
	padding:0;	
	z-index: 5;	
}

#sidebar ul.menu li {
	margin: 5px 0 5px 0;
	width: 100%;
}

#sidebar ul.menu a {
	display: block;
	margin: 0;         /* top, right, bottom, left */ 
	padding: 4px 0 0 10px;         /* top, right, bottom, left */ 
	background: #eee;
	border-left: 5px solid #888;	
    border-bottom: 1px solid #888;
	font-weight: bold;
	color: #333;
	text-decoration:none;	
	min-height: 18px;	
}

#sidebar ul.menu a:hover {
	color: #f8191e;                    /* text chrusion-red    */
	background: #fff;
    border-left: 5px solid #ef9e11;    /* chrusion-orange */
    border-bottom: 1px solid #ef9e11;  /* chrusion-orange */
	color: #f8191e;                    /* chrusion-red    */
}

#sidebar ul.menu li:hover div#flyout_bg1, 
#sidebar ul.menu li:hover div#flyout1 {
	left: -181px; /* moves div containing UL submenu in to view on hover over a menu li */
	top: 28px;
} 
#sidebar ul.menu li:hover div#flyout_bg2, 
#sidebar ul.menu li:hover div#flyout2 {
	left: -181px; /* moves div containing UL submenu in to view on hover over a menu li */
	top: 142px;
} 

#sidebar #current {
	font-weight: bold;
	width: 88.5%;
	margin: 0 0 1px 0;
	padding: 4px 0px 4px 10px;         /* top, right, bottom, left */ 
	background: #222;                  /* light pale orange #f1e6d3;*/
	color: #ef9e11;                    /* text chrusion-orange */
    border-left: 5px solid #f8191e;    /* chrusion-red    */
    border-bottom: 1px solid #f8191e;  /* chrusion-red    */
}

* html body #sidebar ul.menu a { height: 18px; }

#flyout_bg1 { /* div container for flyout1 sub menu background */
	z-index: 20;
	position: absolute;	
	top: -300px; /* puts submenu off screen on mouse out. */
	width: 180px;
	height: 185px;
	margin: 0;
	padding: 0;
	background-color: #c2b4a7;
	border-top: 5px solid #000;
	border-left: 1px solid #000;
	opacity: 0.4;
	-moz-opacity: 0.4;
	*filter: alpha(opacity=40); /* IE's opacity*/
}
#flyout_bg2 { /* div container for flyout2 sub menu background */
	z-index: 30;
	position: absolute;	
	top: -300px; /* puts submenu off screen on mouse out. */
	width: 180px;
	height: 190px;
	margin: 0;
	padding: 0;
	background-color: #c2b4a7;
	border-top: 5px solid #000;
	border-left: 1px solid #000;
	opacity: 0.4;
	-moz-opacity: 0.4;
	*filter: alpha(opacity=40); /* IE's opacity*/
}

#flyout1, #flyout2 { /* div container for flyout sub menu */
	z-index: 40;
	position: absolute;		
	top: -300px; /* puts submenu off screen on mouse out. */
	width: 180px;
	margin: 0 -2px 0;
	padding: 0;
	text-align: left; /* needed because IE misapplies text centering to boxes */
}
	
#flyout1 ul, #flyout2 ul { 
	z-index: 35;
	list-style: none;
	width: 90%;
	margin: 10px  10px; /* creates "sticky hovering" zones for flyouts */
	padding: 2px 0;		
}


/* links */
a	{ 
	color: #bd7d0f;               /* chrusion-orange */
	/* color: #72A545; */           /* lighter green */
	background: inherit;
	text-decoration: none;
}
a:hover { 
	color: #f8191e;               /* chrusion-red */
	background: inherit; 	 
}

/*  divs  */

div.layers {
	position: relative;
	top: 0;
	left: 0;
}
div.cell {
	border: #f00 solid 2px;
}

/* images */
img {
	border: 0px solid #000;  /* no borders on pix */
}

#thumb_container img {
	border: 0px solid #000;  /* no borders on pix */
	margin: 5px 0 0 0;
}

img.float-right {
	margin: 2px 0px 0px 10px;         /* top, right, bottom, left */  
}
img.float-left {
	position: relative;
	margin: 2px 10px 0px 0px;         /* top, right, bottom, left */ 
}

p { 
	padding: 0;
	margin: 10px 15px; 
	text-align: justify;
}  

/* headers */
h1, h2, h3 {
	font-family: 'Trebuchet MS', Arial, sans-serif;
	font-weight: bold;
}
h1 {
	padding: 0;
	margin: 10px 15px; 
	font-size: 1.7em;	
	letter-spacing: 2px;
}
h2 {
	padding: 0;
	margin: 10px 15px; 
	font-size: 1.5em;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #f8191e;              /* chrusion-red */
}
h3 {
	font-size: 1.1em;
	text-transform: uppercase;
	color: #333;             /* dark gray */
	letter-spacing: 1px;
	padding: 0;
	margin: 20px 0 0 15px;
}
h4 {
	font-size: 1.1em;
	text-transform: uppercase;
	color: #333;             /* dark gray */
	/* letter-spacing: 1px; */
	border-top: #888 solid 2px;
	padding: 5px 0 0 0;
	margin: 20px 15px 0 15px;
}

ul, ol {
	margin: 10px 30px;
	padding: 0 15px;
	color: #ef9e11;		/* color of text and bullets if not spanned */
}

ul.normallist li {
	margin-left: 15px;
	padding-left: 0;
	color: black;
}

ul span, ol span {
	color: #666;          /* gray */
}
li span {
	color: #333;		/* to keep bullets one color and text another span text in each li to color them dark gray */
	text-align: justify;
}

.cellblock {
	margin: 0 0 0 15px;
	padding: 10px;
	text-align: left;
	background: #f0f0f0;             /* off-white */
	border: 1px solid #bbb;  
	border-left: 5px solid #ef9e11;   /* chrusion-orange */
}

.shaded_box {
	background-color: #FFFFFF;
	padding: 10px;
	margin: 15px;
}

blockquote {
	margin: 15px;
 	padding: 0 0 0 32px;  	
	font-weight: bold; 
	font-size: 10px; 
	background: #f5f5f5 url(images/quote.gif) no-repeat 20px 10px !important; 
	background-position: 8px 10px;
	border: 1px solid #bbb;       /* very light gray */
    border-left:5px solid #ef9e11;   /* chrusion-orange */
}


/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }


.align-left  { text-align: left; }
.align-right { text-align: right; }

/* additional classes */
.clear { clear: both; margin: 1px; padding: 1px; } 
.hide  { display: none; }
.gray  { color: #CCC; }

.block { 
	background: transparent;
	text-align: right; 
	border-top: 1px dashed #999;
	border-bottom: 1px dashed #999; 
	padding: 5px 0;
	margin-top: 20px;
}

/* form elements */
form {
	margin:10px 15px; padding: 0;
	border: 1px solid #EAEAEA; /* very light gray */
	background-color: #FAFAFA; /* off-white */
}
label {
	display:block;
	font-weight:bold;
	margin:5px 0;
}
input {
	padding:3px;
	border:1px solid #eee;
	font: normal 1em Verdana, sans-serif;
	color:#777;               /* gray */
}
textarea {
	width:400px;
	padding:4px;
	font: normal 1em Verdana, sans-serif;
	border:1px solid #eee;    /* very light gray */
	height:100px;
	display:block;
	color:#777;               /* gray */
}
input.button { 
	margin: 0; 
	font: bolder 12px Arial, Sans-serif; 
	border: 1px solid #EAEAEA; /* very light gray */
	padding: 2px 3px; 
	background: #CCC url(images/buttonbg.gif) repeat-x left bottom; 
	color: #333;             /* dark gray */
}

/* search */
#sidebar #search {
	background: #f2f2f2;       /* off-white */
	margin: 0 15px;
	padding: 5px 0;	
}
#sidebar #search img {
	vertical-align: bottom;
}
#sidebar #search .textbox {
	background: #FFF url(images/input.png) no-repeat top left; 
	border: 1px solid #EAEAEA;  /* very light gray */
	font-size: 11px;
	padding: 3px;	
	width: 110px;
}
#sidebar #search input.searchbutton { 
	margin: 0; 
	font: bold 100% Arial, Sans-serif;
	border: 1px solid #CCC;     /* light gray */
	background: #CCC url(images/buttonbg.gif) repeat-x left bottom; 
	padding: 1px; 
	height: 25px;
	color: #333;                /* drak gray */
	width: 55px;
}


	
/* footer */

#footer { 
	/* z-index: 5; */
	position: absolute;		/* absolute position is referenced to bottom left of parent 'site_container' */
	bottom: 0;
	left: 0;
	width: 900px;
	height: 40px;
	color: #999;
	background: #444;
	margin: 0;
	padding: 0;	
	font-size: 92%;
	clear: both;		
}

#footer a { 
	text-decoration: none; 
	font-weight: bold;	
	color: #aaa; 
}

#footer a:hover { 
	text-decoration: none; 
	font-weight: bold;	
	color: #ef9e11; 
}

#footer #footer-left {
	width: 730px;
	float: left;
	text-align: left;
	margin: 0; 
	padding: 10px;
}

#footer #footer-right {
	width: 170px;
	float: right;
	text-align: right;
	margin: 0;
	padding: 10px;
}