/*
	structural layout technique by Alessandro Fulciniti, available at:
	http://blog.html.it/layoutgala/LayoutGala33.html
	
	basic concept for horizontal ul nav layout is from http://css.maxdesign.com.au/listamatic/horizontal02.htm
*/




html, body {
	margin:0;
	padding:0;
	height: 100%;
}

html {
	background-color: #E8E8E8;
	background-image: url(../images/left-shadow.png);
	background-repeat: repeat-y;
}

body {
	text-align:center;
	font-family: "century gothic", Tahoma, verdana, "sans serif";
	font-size: 90%;	
	background-image: url(../images/bg.png);
	background-repeat: repeat-x;
}

p{margin:0 10px 10px;}
a{color: #113C8B;}
h1,h2,h3,h4,h5,h6 {color: #369; font-family: Georgia,serif;}
h3,h4,h5,h6 {margin-bottom: 1px;}


hr{
	border: 0;
	color: #999;
	background-color: #999;
	height: 1px;
}

img {border: 0 none;}


/********************************** CUSTOM IDs & CLASSES *********************************/


div#container{
	text-align:left;
	width:850px;
	margin:0 auto;
	
	/*footer stick method developed by http://solardreamstudios.com/learn/css/footerstick/*/
	min-height: 100%; /* For Modern Browsers <strong>/
	height: auto !important; /</strong> For Modern Browsers <strong>/
	height: 100%; /</strong> For IE */
	padding-bottom: 20px;
}


div#header, div#header h1, div#top-logo{height:130px;}

div#header{
	margin:0; 
	padding:0;
	float:left;
	width:500px;
}

div#header h1{
	margin:0;
	padding-left:10px;
	/*color: #62757F;*/
	vertical-align: bottom;
	font-family: "century gothic", Tahoma, verdana, "sans serif";
	font-weight: normal;
}

div#top-logo{
	float:right; 
	text-align: right; 
	width:155px; 
	margin: 15px 0; 
	padding: 0; 
	height:100px;
}

div#navigation{
	clear:both; 
	margin:0; 
	padding:0;
}


div#rt-sidebar{padding-left: 20px;}


div#footer{
	clear:both;
	width:100%;
	background: #333;
	color: #999;
	font-size: 10px;
}

div#footer p{
	margin:0;
	padding:5px 10px;
}

div#left-content{
	float:left;
	width:480px;
	padding: 50px 20px 50px 0;
}

div#content{
	float:left;
	padding: 50px 20px 50px 0;
}

#content ul, #left-content ul, #rt-sidebar ul {margin-left: 5px; padding-left: 5px;}

#content ul li, #left-content ul li, #rt-sidebar ul li{
	list-style-type: none; 
	padding-left: 17px;
	background: url(../images/arrow-bullet.png) no-repeat 0 6px;
}


div#rt-sidebar{
	float:right;
	width:325px;
	margin-top: 10px; 
	padding-top: 50px; 
	border-left: 1px solid #aaa;
}


#rt-sidebar li a{
	display:block;
	font-family: "century gothic", Tahoma, verdana, "sans serif";
}


#content .inline, .button {
	display: inline;
}


#content .email_preview, .email_preview_body {
	border: 1px dotted #ccc;
	margin: 15px;
	padding: 5px 15px;
}

/*pseudo classes - doesnt work in IE*/
#content input:focus, 
#content select:focus, 
#content textarea:focus { background-color: #ffffff; border: 1px solid maroon;}


.screenshot, .screenshot img a{margin-left: 30px; padding: 9px; border: 1px solid #999;}
.white_text {color: #fff;}
.red {color: red;}
.green {color: #00cc00;}
.blue {color: #00f;}
.note {
	border: 3px solid #d3d1c9;
	background-color: #f3f1e9;
	color: #4eba0c;
	padding: 5px;}



/********************************** NAVIGATION CSS *********************************/

#navlist ul li a { width: 190px;}

ul#navlist{
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

#navlist li{
	display: inline;
	list-style-type: none;
}

#navlist a { padding: 1px 10px 7px 10px; }

#navlist a:link, #navlist a:visited {
	color: #fff;
	text-decoration: none;
}

#navlist .inactive a:hover {
	color: #fff;
	background-color: #369;
	text-decoration: none;
}

#navlist #active a{
	padding: 1px 20px 28px 20px;
	color: #369;
	font-weight: bold;
}

#navlist #active a:hover {
	text-decoration: none;
}



/********************************** CSS HACKS! *********************************/

/* stupid IE hack - IE6 and older dont like the line-height applied to the h1 in the header*/
div #header h1{padding-top: 90px; margin-bottom: -90px;}
html>body #header h1{line-height:210px; padding-top: 0; margin-bottom: 0;}/* this line is hidden from MS browsers <= IE6 */


/* display gif if IE 6 or older ms browser, otherwise, display png*/
#navlist #active a{	background-image: url(../images/active-button.gif);	background-repeat: no-repeat; background-position: center center;}
html>body #navlist #active a{background-image: url(../images/active-button.png); background-repeat: no-repeat; background-position: center center;}


div#top-logo{	background-image: url(../images/top-logo.gif);	background-repeat: no-repeat;}
html>body div#top-logo{background-image: url(../images/top-logo.png); background-repeat: no-repeat;}