/* ******************** */
/* Redefine HTML styles */
/* ******************** */
body { font-size: 65.4%; font-family: verdana,arial,helvetica,sans-serif; color: #666; margin: 0; padding: 0; }
div#wrapper { font-size: 1.2em; line-height: 1.3em; } /* Sets the percentage font-size so that basefont size is equal to 12px */
h1,h2,h3,h4,h5 { margin: 0 0 10px 0; padding: 0; }
h1 a,h2 a,h3 a,h4 a, h5 a, p a { text-decoration: none; }
h1 { font-size: 1.2em; } /* Equal to 16 pixels */
h2 { font-size: 1.1em; color: #600; } /* Equal to 14 pixels */
h3 { font-size: 1.0em; color: #663; } /* Equal to 12 pixels */
h4, h5 { font-size: 1.2em; } /* Equal to 12 pixels */
a {
	color: #900; text-decoration: none;
}
a:active { color: #f00; }
a:visited { color: #A49360; }
a:hover {
	color: #CC0000;
	text-decoration: underline;
}
form { margin: 0; padding: 0; }
img { border: none; }
hr { border: 0; color: #fff; background-color: #fff; height: 4px; margin: 10px 5px 10px 0; padding: 0; border-top: 1px #e5b9b6 solid; border-bottom: 1px #e5b9b6 solid; clear: left; }

/* ************************** */
/* Layout: the big containers */
/* ************************** */

div#wrapper { width: 958px; background: #fff url(../images/bg-page-home.gif) repeat-y; padding-left: 22px; }
div#header { width: 958px; }
div#col-1 {
	width: 162px;
	float: left;
	overflow: hidden;
}
div#content { width: 396px; padding: 10px 0 10px 10px; float: left; overflow: hidden; }
div#col-2 { width: 156px; float: left; margin-right: 0; margin-left: 4px; overflow: hidden; }
div#footer { width: 980px; height: 30px; margin-top: -10px; }

#subpage div#wrapper { background-image: url(../images/bg-page.gif); }
#subpage div#content { width: 784px; }
#subpage div#col-2 { width: 160px; float: right; overflow: hidden; border-left: 1px #e5b9b6 solid; border-bottom: 1px #e5b9b6 solid; margin-top: -10px; margin-right: 0; margin-left: 10px; }

/* ************ */
/* Header Stuff */
/* ************ */

div#header { height: 141px; border-bottom: 10px #600 solid; background: #900 url(../images/photo-header.jpg); background-position: 314px 0; background-repeat: no-repeat; }
div#header h1 { height: 141px; width: 314px; margin: 0; padding: 0; }


/* ************** */
/* LeftNav Column */
/* ************** */

div#col-1 ul.nav { list-style-type: none; margin: 0; padding: 0; background-color: #996; border-bottom: 1px #cc9 solid; }
div#col-1 ul.nav li { padding: 10px 5px 10px 20px; border-top: 1px #bcb892 solid; border-bottom: 0px #908c67 solid; background: #996 url(../images/bullet-nav.gif) 0 14px no-repeat; }
div#col-1 ul.nav a { color: #ffe; font-weight: bold; text-decoration: none; }
div#col-1 ul.nav li.on,
div#col-1 ul.nav li:hover { background-color: #cc9; }
div#col-1 ul.nav a:hover { color: #000; }
div#col-1 ul.nav li.on,
div#col-1 ul.nav li:hover { background-color: #cc9; }
div#col-1 ul.nav li.on a, 
div#col-1 ul.nav li:hover a { color: #000; } 
div#col-1 ul.nav ul li { padding: 10px 5px 0px 5px; border-top: 1px #cc9 solid; border-bottom: 0px #cc9; background-color: #cc9; }
div#col-1 ul.nav ul li a { background-color: #cc9; font-size: 0.8em; font-weight: normal; padding: .2em 0 .2em 1em; }
div#col-1 ul.nav ul li a:hover {
	background: transparent;
	text-decoration: none;
	font-weight: bold;
	color:#000000
}


div#col-1 .featurebox { border-top: 1px #996 solid; padding: 20px 5px 30px 5px; margin-bottom: 30px; background-color: #b8b894; color: #663; }
div#col-1 .featurebox h3 { font-size: 1.2em; color: #fff; font-family: helvetica,arial,verdana,sans-serif; font-weight: normal; margin-left: 10px; }
div#col-1 .featurebox ul { list-style-image: url(../images/bullet-col1feature.gif); font-size: 0.9em; margin: 0; padding: 5px 5px 5px 15px; }
div#col-1 .featurebox a { color: #663; }
div#col-1 .featurebox strong { display: block; }
div#col-1 .featurebox strong a { text-decoration: none; }

#cal-logo { clear: left; }


/* ************ */
/* Content Area */
/* ************ */

img.content-picture { float: right; margin: 0 10px 10px 0; }
/* #content ul {list-style-image: url(../images/bullet-nav.gif);} commented out by Huy */
#content .bib { padding-left: .5in; text-indent: -.5in; font-size: 80%; color: #666;}


/* ************** */
/* SideBar Column */
/* ************** */

#search { background-color: #fff; padding: 15px 0 15px 10px; margin-bottom: -5px; vertical-align: middle; }
#search input.text { font-size: 0.7em; width: 100px; vertical-align: middle; }
#search input.button { vertical-align: middle; }
div#col-2 hr { margin: -3px 0 0 0; padding: 0; }
div#col-2 .featurebox { padding: 10px 5px; color: #663; margin: 0 0 2px 0; }
div#col-2 .featurebox h3 { color: #900; font-size: 1.1em; font-family: helvetica,arial,verdana,sans-serif; }
div#col-2 .featurebox img {  }
div#col-2 .featurebox p { font-size: 0.9em; }
div#col-2 #profiles { }

#subpage div#col-2 .holder { border-left: 1px #e5b9b6 solid; border-bottom: 1px #e5b9b6 solid; margin: 0  0 2px 2px; padding: 0; background-color: #e8e7d3; }
#subpage div#col-2 .featurebox { color: #663; margin-bottom: 2px; }
#subpage .featurebox { background-color: #e8e7d3; }


/* ********/
/* Footer */
/* ****** */

#footer { clear: both; background-color: #666; color: #fff; }
#footer a { color: #fff; }
#footer p { margin-left: 200px; padding-top: 5px;  }


/* *************** */
/* Utility Styles */
/* ************** */

/* CLEARFIX: Just add a class of .clearfix to any element containing a float needing to be cleared, plus any Guillotine-Bug-fixing block elements within the container. (source: http://www.positioniseverything.net/easyclearing.html) */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
/* additional clearfix elements are in ie.css */