/* CSS Document */

/* BIG-TIME credit goes out to Mike Purvis, inventor of the "Jello Mold", used here. It allows you to use MAX and MIN widths (even with Internet Explorer, which stubbornly ignores them).
Check Mike out here: http://uwmike.com/,
or see the Jello Mold here: http://www.positioniseverything.net/articles/jello-expo.html */
body {
	padding: 0 380px 0 380px;
	margin: 0;
	text-align: center;
	font: 10pt 'Trebuchet MS', Arial, Sans-Serif;
	background-color: #945ec9;
	color: black;
}

#sizer {
	margin: 3px auto 0 auto;
	padding: 0;
	width: 51%;
	max-width: 268px;  /* version for IE is at the bottom of this style block */
	background-color: #663399;
}

#expander {
	background-color:#663399;
	margin: 0 -380px 0 -380px;
	min-width: 760px; /* Critical Safari fix! */
	position: relative;
	border: 1px solid #663399;
}

/* Holly hack for IE \*/
* html #expander { height: 0; }
#content { height: 1%; }
.sp_content {height: 1% }
/* */

/* helps IE get the child percentages right. */
#wrapper {
	width: 100%; 
	margin-top: 0;
	background-color: #fff;
	} 
/* http://positioniseverything.net/easyclearing */

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

a:link, a:visited, a:hover {
	font-size: 1em;
	font-weight: normal;
	text-decoration: underline;
	background-color: transparent;
	color: blue;
	}
	
a:visited {
	color: #333366;
	}
	
	/*
	 * 
	 * purple = 639;
	 * yellow = fc0;
	 * 
	 */
h1 {
	margin: 10px 0 10px 10px;
	padding: 0;
	font-size: 1.8em;
	color: #306;
	letter-spacing: .04em;
	}

h2 {
	margin: 20px 0 10px 10px;
	padding: 0;
	font-size: 1.5em;
	color: #306;
	letter-spacing: .04em;
	}
	
h3 {
	margin: 10px 0 10px 10px;
	padding: 0;
	font-weight: bold;
	color: #306;
	letter-spacing: .04em;
	}

h4 {
	margin: 10px 0 10px 10px;
	padding: 0;
	font-size: 1.1em;
	color: #306;
	margin-bottom: .5em;
	}
	

p.lose {
	background-color: transparent;
	font-weight: bold;
	color: #700;
	text-align: center;
	padding: 3px 0;
	margin: 0;
	}
	
p.testi {
	background: url(../Images/openquote.gif) no-repeat;
	padding: 10px 25px 0 20px;
	margin: 20px 0 0 0;
	font: 12pt/1.5em Garamond, "Times New Roman", Serif;
	border-top: 1px dashed #777;
	}
	
p.testiright {
	background: url(../Images/openquote.gif) no-repeat;
	padding: 10px 10px 0 15px;
	margin: 0 0 0 0;
	font: 12pt/1.3em Garamond, "Times New Roman", Serif;
	}
	
p.testiuser {
	background: none;
	text-align: right;
	padding: 0 30px 0 0;
	margin: 0 0 20px 0;
	font: italic 12pt Garamond, "Times New Roman", Serif;
	}
	
.center {
	text-align: center;
	}

.br {
	margin: 0;
	padding: 0;
	height: 9px;
	}
	
p.end {
	height: 25px;
	margin: 0;
	}
	
.b {
	font-weight: bold;
	}
	
#content {
	position: relative;
	width: auto;
	margin: 80px 210px 0 185px;
	padding: 5px 0 20px 0;
	text-align: left;
	background-color: white;
	border-right: 1px solid #639;
	border-left: 1px solid #639;
}


#content p, #content div {
	margin: 5px 10px;
	padding: 0;
	color: #666;
	line-height: 1.5em;
}

#content div p {
	margin: 0;
}

#content div.fright {
	float: right;
	padding: 5px 0 0 0;
}

#content ul {
	color: #666;
	margin: 5px 10px;
}

#content li {
	margin: 5px 0;
	line-height: 1.5em;
}

#content div.callout {
	position: relative;
	border: 1px solid #639;
	margin: 10px;
	padding: 0;
	width: 400px;
	height: 100px;
}

#content div.callout img {
	float: left;
	height: 100px;
	margin: 0;
}

#content div.callout a {
	display: block;
	margin: 15px 0 0 100px;	
	padding: 0;
	text-decoration: none;
	color: #639;
	font-weight: bold;
	font-size: 11pt;
}

#content div.callout p {
	margin: 5px 10px 0 100px;
	font-size: 9pt;
}

#content div.callout img.tl {
	position: absolute;
	top: -1px;
	left: -1px;
	width: 13px;
	height: 13px;
}

#content div.callout img.tr {
	position: absolute;
	top: -1px;
	right: -1px;
	width: 13px;
	height: 13px;
}

#content div.callout img.br {
	position: absolute;
	bottom: -1px;
	right: -1px;
	width: 13px;
	height: 13px;
}

#content div.callout img.bl {
	position: absolute;
	bottom: -1px;
	left: -1px;
	width: 13px;
	height: 13px;
}

#content a.block {
	display: block;
	margin: 5px 10px;
	padding: 0;
}

#contentwide {
	position: relative;
	width: auto;
	margin-left: 187px;
	margin-right: 0;
	margin-top: 100px;
	text-align: left;
}

#leftnav {
	position: absolute;
	left: 0px;
	top: 81px;
	width: 184px;
	margin: 0;
	padding: 0;
	text-align: left;
	background-color: white;
	border-bottom: 1px solid #639;
}
	
#leftnav ul  {
	list-style: none;
	margin: -2px 0 0 0;
	padding: 0;
	background-color: #efa;
}
	
#leftnav li {
	border-top: 1px solid #96c;
	margin: 0;
	padding: 0;
}
	
#leftnav h4 {
	margin: 0 0 -2px 0;
	padding: 2px 5px;
	background-color: #639;
	color: white;
}
	
#leftnav li a:link, #leftnav li a:visited {
	text-decoration:none;
	display:block;
	width: 90%;
	padding: 6px 5%;
	font: bold 9pt Arial, Helvetica, Sans-Serif;
	color: #306;
	}
	
#leftnav li a:hover {
	color: white;
	background-color: #639;
	}

	
#leftnav li a.current {
	background-color: #ebf;
	color: #306;
}
	
#leftnav li.subnav {
	border-top: 1px solid #fff;
	}

#leftnav li.subnav a:link, #leftnav li.subnav a:visited {
	padding: 3px 5px 3px 10px;
	font: 9pt/1.5 Arial, Helvetica, Sans-serif;
	color: #336;
	width: 185px;
	}
	
#leftnav li.subnav a:hover {
	background-image: url(Images/navhalo.gif);
	}

#right {
	position: absolute;
	right: 0px;
	top: 90px;
	width: 209px;
	border: none;
	margin: 0;
	padding: 0;
	text-align: left;
	background-color: white;
	text-align: center;
	}
	
#right a:link, #right a:visited {
	display: block;
	font-size: 9pt;
	font-family: Arial;
	margin-top: 7px;
	text-decoration: none;
	margin: 5px 10px;
	text-align: left;
	}
	
#right a:hover {
	background-color: #ffff99;
	}
	
#right img {
	margin: 0 auto;
	}
	
#right a.inline {
	display: inline;
	}
	
#right h3, #navigation h3 {
	margin-top: 0px;
	}

#header {
	position: absolute;
	left: 0px;
	top: 0;
	width: 100%;
	height: 79px;
	text-align: left;
	padding: 0;
	background-color: white;
	border-bottom: 1px solid #639;
	}
	
#header img.logo {
	float: left;
	margin-left: 5px;
	margin-bottom: 0;
	margin-top: 0px;
	padding: 0;
	}
	
#header h1 {
	font-size: 14pt;
	margin: 35px 0 0 220px;
	color: #888;
}

#header div.login {
	float: right;
	padding: 0 25px 0 0;
}

#header div.login span {
	font-size: 8pt;
	font-weight: bold;
	color: #888;
	margin-right: 10px;
}

#header div.login a {
	color: #639;
	font-weight: bold;
	font-size: 8pt;
	text-decoration: none;
	padding: 2px 2px;
}

#header div.login a:hover {
	background-color: #639;
	color: white;
	font-weight: bold;
	font-size: 8pt;
	text-decoration: none;
}
	

#footer {
	clear: both; 
	padding: 0.5em 0 0.5em 0; 
	margin: 0; 
	background-color: #639;
	width: 100%;
	color: white;
	}