* { margin:0; padding: 0; }

html {
	/* fix horizontal page shifting */
	min-height: 100%;
	margin-bottom: 1px;
}

body {
	background: #ebf1f4;
	font:.75em/1.6em Verdana, Arial, Tahoma, Helvetica, sans-serif;
}

a { outline: none; }
a:link 	  { color: #003E66;	text-decoration: none;}
a:visited { color: #003E66; text-decoration: none; }
a:active  { text-decoration: none; color: #D71F1F; }
a:hover   { text-decoration: underline; }


/* CORE LAYOUT 
-----------------------------------------------------*/
#wrap {
	margin: 0 auto;
	width: 907px;		
	background: url('../images/container-sides.jpg') repeat-y;
}

#wrap #bar {
		border-bottom: 4px solid #ebf1f4;
}

#header {
	background: url('../images/container-top.jpg') no-repeat;
	padding: 20px;
}

#header #logo {
	display: block;
	width: 200px;
	height: 80px;
	margin: 0;
	float: left;
	cursor: pointer;
	text-indent: -5000px;
	background: url('../images/spi-logo.gif') no-repeat;
}

#content {
	clear:both;
	margin: 0 20px;

	/* --- Fix floating divs --- */
	width: 865px !important;
	overflow:hidden;
	/* --- end fix --- */
}

#content ul li {
	padding: 4px 0 4px 50px;
	line-height: 1.5em;
	background: url('/images/bullet-blue.gif') no-repeat 34px 8px;
	-moz-border-radius: 4px;	
}

.primary  {
	float: left;  
	width: 640px; 
}

.secondary { 
	float: left;
	width: 190px; 
	margin-left: 20px;
	padding: 10px 5px;
	background: url('../images/right-col-bg.gif') no-repeat;
	border-top: 6px solid #A0AAB1;
	min-height: 200px;
}

#footer {
	clear: both;
	padding: 20px 0 0 0;
	background: #ebf1f4 url('../images/container-bottom.jpg') no-repeat 0 -60px;	
}


/* NAVIGATION				(top right navigation links)
-----------------------------------------------------*/
#topnav {
	margin-top: 18px;
	list-style: none;
	float: right;
}
#topnav li {
	display: inline;
	margin-left: 6px;
}
#topnav li a {
	padding: 10px;
	float: left;
	border-bottom: 4px solid #FFFFFF;
}
#topnav li a:hover {
	border-bottom: 4px solid #bad500;
	text-decoration: none;
}


/* LAYOUT ADD-ONS			(text formatting and such)
-----------------------------------------------------*/
#content {
	line-height: 1.5em;
}

h1, h2, h3{
	font-family: Verdana, Arial, Tahoma, Helvetica, sans-serif;
	margin: 15px 0 10px;
}

h4 {
	font-family: Verdana, Arial, Tahoma, Helvetica, sans-serif;
	margin: 1px 0 4px;
}

#content h1 {
	font-size: 14px;
	font-weight: bold;
	color: #B44400;
	/* border-bottom:1px solid; */
}

#content h2{
	font-size:18px;
	font-weight: normal;
	color: #125687;
}

#content h3{
	font-size:14px;
	color: #88B200;
	border-bottom: 1px dotted;
}

#content h4{
	font-size:10px;
	color: #b44400;
}


#content p { 
	margin-bottom: 20px; 
}

.primary {
	text-align: justify;
}

#footer p {
	text-align: right;
	font-size: smaller;
	color: #888;
	padding: 0 20px;
}

#footer a  { text-transform: uppercase; }
#footer a:hover { text-decoration: underline; }


/* FORM ELEMENTS
-----------------------------------------------------*/
form { margin: 0; padding:5px;}
#sidebar form { border: 1px solid #C1C7A6; background:#DEE1CE;}
.secondary form { border: 1px solid #E5E5FF; background: #F6F6FF;}

label { display: block; width: 20%; float:left; text-align: left; margin-right: 2px; padding-top: 3px; }

input,
select,
textarea { width: 65%; margin: 2px; padding: 2px; border: 1px solid #CCC; }

input:active,
input:hover,
textarea:hover { border: 1px solid #AAA; }

textarea { font: 12px Verdana, Geneva, Arial, sans-serif; line-height: 1.5em; }

.btn {
	width: auto !important;
	cursor: pointer;
	padding-right: 15px;
	color: #555;
	border: 1px solid #888; 
	background: url('/images/btn-bg.gif') no-repeat right 1px;
}
.btn:hover		{ border: 1px solid #555; background: url('/images/btn-bg.gif') no-repeat right -22px; color:#000; }


/* MISC STYLES					 (other handy styles)
-----------------------------------------------------*/
.left 	{ float: left; }
.right 	{ float: right; }
.strong { font-weight: bold; }
.clear 	{ clear:both;}
.block { display: block; }

img, 
img a { border: 0;}

img.pic {
	margin: 4px;
	padding: 4px;
	background: #FFF;
	border: 1px solid #CCC;
}

hr.line {
	border: 1px none #000;
	width: 100%;
	border-top: 1px solid #e6e6e6;
}

/* COLORS
-----------------------------------------------------*/
.red, a.red { color: #D71F1F; }
.orange {color: #F35400}
.green {color: #080}
.blue {color: #06C}
.black {color: #000}
.gray {color: #333}
.white { color: #FFF }


/* ERROR MESSAGES AND ALERTS
-----------------------------------------------------
	First display a generic alert box using ".alert" 
	then specify the alert type to be displayed
	
	Example usage:
	<div class="alert warning">
		<h2>Alert Title</h2>
		<p>	The page you are looking for died last week.</p>
	</div>
*/
.alert {
	display: block;
	margin: 10px 0;
    padding: 5px 20px 5px 45px;
    border: 1px solid #CCC;
	background:#EFEBE0;
}

.error 	 { background:#F6F5C8 url('/images/icons/exclamation.png') no-repeat 15px 50%; }
.warning { background:#EFEBE0 url('/images/icons/exclamation.png') no-repeat 15px 50%; }
.success { background:#D6ECD2 url('/images/icons/information.png') no-repeat 15px 50%; border: 1px solid #88C87E; }
.info 	 { background:#E1EEF6 url('/images/icons/information.png') no-repeat 15px 50%; }

.error h2 	{ color:#C00; }
.warning h2 { color:#B63; }
.success h2 { color:#080; }
.info h2 	{ color:#36C; }