html {
	background: transparent url(../images/page_bg.jpg) repeat;
	color: #454545;
	font-family: Verdana, "Lucida Grande", Lucida, sans-serif;
}

body {
	position: relative;
	z-index: 1;
}

/* The hidden class is used to allow screenreaders to have access to text that may not be necessary for visual browsers. For instance, the navigation bar has hidden text before it that identifies it as site navigation */ 
.hidden {
	position: absolute;
	overflow: hidden;
	left:-999px;
	top: 0;
}

/* Used for the "skip to content" link at the beginning of every page. Should generally not be used by end users */
.hide_focus {
	position: absolute;
	overflow: hidden;
	left:0;
	top: -999px;
	width: 1px;
	height: 1px;
}

.hide_focus:focus, .hide_focus:active {
	position: absolute;
	overflow: hidden;
	left: 0;
	top: 0;
	width: auto;
	height:auto;
	padding: 7px;
	border: 5px solid red;
	font-size: 1.25em;
	background-color: black;
	color: white;
	z-index: 5;
}

.no-border {
	border: 0;
}

em{
	font-style: italic;
}

/* @group Headings */

h1,h2,h3,h4,h5,h6 {
	font: small-caps 2em "times new roman", times, serif;
}

h1,h2,h3,h4,h5,h6 a {
	color: #272727;
	text-decoration: none;
}

h1 {
	letter-spacing: -.15px;
	border-bottom: 1px solid #333;
	margin-bottom: .75em;
	margin-top: .25em;
	padding-left: 15px;
	font-size: 2em;
}

h2 {
	font-size: 1.6em;
	margin-left: 15px;
	border-bottom: 1px solid #333;
	margin-bottom: .75em;
}

/* @end */

/* @group Layout */

/* xshadowx classes are used to add a semi-transparent png around fixed container. Note that the [class] constructs are ignored by IE6, which doesn't do semi-trasparent png files */
.topshadow[class] {
	width: 960px;
	height: 17px;
	background:transparent url('../images/top_shadow.png') no-repeat;
	margin: 6px auto 0px auto;
}

div.shadowcontainer { 
	width: 960px;	
	margin: 0px auto 0px auto;
	 /*This is positions the shadow borders. The height is set to match the depth of the content.*/ 
}

div.shadowcontainer[class] {
	background-image:url('../images/sides_shadow.png');
	background-repeat: repeat-y;
	/*padding-bottom: 100px;*/
}

.bottomshadow[class] {
	width: 960px;
	height: 17px;
	background:transparent url('../images/bottom_shadow.png') no-repeat;
	margin: 0px auto 8px auto;
}

#maincontainer {
	padding: 5px;
	margin: 0px 20px;
	background-color: #ffffff;
}

#contentcontainer {
	width: 910px;
	padding-top: 3px;
	border-top: 1px dotted #bbb;
	overflow: hidden;
	height: auto;
	border-bottom: 1px dotted #bbb;
}

/* @group Header */

/* the site_logo div is an optional banner that appears between the horizontal menu (if present) and the content/navigation bar */

#site_logo {
	width: 910px;
	margin-top: 3px;
	height: 100px;
	clear: both;
	background: transparent url(../images/web_banner.gif) no-repeat;
	padding-bottom: 3px;
}

#header {
	border-bottom: 1px dotted #bbb;
	margin-bottom: 2px;
	padding-bottom: 1px;
}

/* The Sac State Logo is at the very top of the page and has the department/unit name in it. To get this logo, go to http://aitweb.csus.edu/sacstate-images/web-banner/ */
#sac_state_logo {
	/*width: 550px;
	height: 65px;*/
	padding:10px 0;
}



/* @end */


/* The navbar is the darker green sidebar on the left of the template. In general, this should not be changed, and only headings and <ul>s should be used within it (as well as the search box). */ 

/* @group Navbar */

#navbar {
	
	background-color: #ffffff;
	float: right;
	width: 165px;
	font-size: .78em;
	display: inline;
	padding-left: 5px;
	border-left: 1px dotted #cccccc;
	padding-bottom: 5000px;
	margin-bottom: -5000px;
	color: #363636;
}

#navbar_wrap {
	background-color: #edf3f1;
	padding-bottom: 5000px;
	margin-bottom: -5000px;
}

#searchform {
	clear: both;
	border-top: 2px solid #ffffff;
}

#navbar form {
	margin: 5px;
}
#navbar label{
	display: block;
	font-weight: bold;
	color: #272727;	
}

#navbar input[type=text] {
	width: 100px;
	display: inline;
}

#navbar #gosearch {
	width: 3em;
	display: inline;
	margin-bottom: 10px;
}



/* @end */

/* @group Content Area */

/* change the base font size of the content area here using ems. Also note that the background is an off-white and should not be changed */

#main_content {
	margin-right: 170px;
	font-size: .8em;
	background-color: #fefeff;
	width: 735px;
}

#main_content_wrap {
	padding: 5px;
	padding-left: 1px;
	padding-right: 1px;
}

/* @end */

/* @group Footer */

#footer {
	clear: both;
	width: 100%;
	z-index: 4;
	position: relative;
	overflow: hidden;
}

#footer p {
	font-size: .6em;
	text-align: center;
	width: 100%;
	display: block;
	margin:0 auto;
}

/* @end */

/* @end */

/* @group Content Area */

#main_content p {
	margin-bottom: 1em;
	line-height: 1.6;
	letter-spacing: -.1px;
	clear: none;
}

/* The note class should be used to draw attention to specific paragraphs, not sections */

p.note{
	background-color: #E9E7C7;
	display: block;
	border: dotted 1px #9B8948;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	text-align: justify;
	color: #363636;;
}

a {
color: #00573D;
}


blockquote {
	margin: 10px 0 10px 50px;
	padding-left: 15px;
	border-left: 3px solid #ccc;
} 

abbr, acronym, .help {
	border-bottom: 1px dotted;
	cursor: help;
}

/* @group Headings */

#main_content h3 {
	font-size: 1.5em;
	padding: 5px;
	border-left: 7px solid #333333;
	border-bottom: 1px solid #333333;
	margin-bottom: .75em;
	margin-left: 25px;
	font-variant: normal;
}

#main_content h4 {
	font-size: 1.3em;
	padding: 5px;
	border-left: 7px solid #333333;
	border-bottom: 1px solid #333333;
	margin-bottom: .75em;
	margin-left: 35px;
	font-variant: normal;
	font-weight: bold;
}

#main_content h5,h6 {
	font-size: 1.06em;
}

/* @end */

/* @group Table of contents */

/* The Table of contents should be used for long pages that are divided into sections. In this case, headings should serve as both the anchor target and the name in the table of contents. */

/* It is also permissible to use width:75% and margin: 0 auto;
*/
ul.toc {
	width: 375px;
	padding: 10px 15px;
	background: #ebebeb;
	margin: 0 45px;
	margin-bottom: .75em;
	border: 1px solid #aaaaaa;
	clear: none;
}

ul.toc li {
	list-style: square;
	margin-left: 10px;
	margin-bottom: 3px;
}

ul.toc a {
	color: #454545;
	text-decoration: none;
	border-bottom: 1px solid #454545;
}

/* @end */

/* @group Callout boxes */

/* Callout boxes are right-aligned boxes of important links, news updates, or other helpful info not directly related to the main content of the page. They should always be titled with <h2>s or <h3>s. If a callout box is part of a template (appears on many pages), it should go in a special section before the "content" <a> tag. Otherwise, it should go where it fits best with the heading structure */

.calloutbox{
	width: 200px;
	/*margin-left: 15px;
	margin-bottom: 15px;*/
	margin: 0 -10px 7px 15px;
	border: 2px solid #00573D;
	border-bottom: 5px solid #00573D;
	float: right;
	clear: right;
	background: #FFFFFF;
	display: inline;
	font-size: .9em;
}

#main_content .calloutbox p{
	margin: 8px;
	margin-top: 0;
	border: 0;
	padding: 0;
}


#main_content .calloutbox h2, #main_content .calloutbox h3{
	padding: 5px;
	margin: 0;
	border: 0;
	background-color: #00573D;
	color: #FFFFFF;
	text-align: center;
	font-variant: small-caps;
	font-size: 1.3em;
	margin-bottom: 5px;
}

#main_content .calloutbox h4{
	margin: 0;
	margin-left: 15px;
	margin-bottom: 5px;
	border: 0;
	padding: 0;
	font-size: 1.2em;
}

#main_content .calloutbox ul, #main_content .calloutbox ol{
	margin-left: 0px;
}

#main_content .calloutbox li{
	list-style-type: square;
	list-style-position: outside;
	margin-left: 25px;
	margin-top: 0px;
	margin-bottom: 5px;
	margin-right: 10px;
}

#main_content div.darkBlue {
	border-color: #00344D;
}
#main_content div.darkBlue h3{
	background-color: #00344D;
}

#main_content .darkOrange {
	border-color: #A63F1E;
}

#main_content .darkOrange h2,
#main_content .darkOrange h3{
	background-color: #A63F1E;;
}

#main_content .lightBlue {
	border-color: #7B858A;
}

#main_content .lightBlue h2,
#main_content .lightBlue h3{
	color: #000000;
	background-color: #7B858A;
}

/* @end */

/* @group Lists */

#main_content ul, 
#main_content ol {
	clear: none;
}
#main_content li {
	list-style-type: inherit;
	margin-left: 25px;
	font-size: 1em;
	line-height: 1.5em;
}

#main_content li li {
	font-size: 1.0em;
}

#main_content ol li {
	list-style-type: upper-roman;
	font-style: normal;
}

#main_content ol ol li {
	list-style-type: upper-alpha;
}

#main_content ul li{
	list-style-type: square;
	font-style: normal;
}

#main_content ul ul li{
	list-style-type: square;
}

#main_content ul, #main_content ol{
	margin-left: 20px;
	margin-bottom: 1em;
}

#main_content ul ol, #main_content ol ul, #main_content ul ul, #main_content ol ol{
	margin-left: 15px;
	margin-bottom: .5em;
}

/* @end */

/* @group Images */

/* Images should use these classes to add borders and position photos. */

img.photo, img.photoLeft, img.photoCenter, img.photoRight{
	border: 1px solid #A9AD8D;
	padding: 2px;
	background: #EDEEE8;
	
}

img.photoLeft{
	float: left;
	display: inline;
	margin-right: 15px;
	line-height: 1.5em;
}

img.photoRight{
	float: right;
	display: inline;
	margin-left: 10px;
}

img.photoCenter{
	margin-left: auto;
	margin-right: auto;
	display: block;
}

/* @end */

/* @group Table */

/* Tables are not required to be styled, but adding this class to a data table will help with aesthetics. */

.csustable {
	margin: 0 auto;
	margin-bottom: .75em;
	width: 90%;
	table-layout: auto;
	word-wrap:break-word;
}

.csustable, .csustable * {
	border: 0;
}

.csustable caption {
	font-size: .85em;
	text-align: center;
	font-weight: bold;
	color: #00344d;
	margin-bottom: 10px;
	padding-bottom: 1em;
	caption-side: top;
	border-bottom: 1px solid #dddddd;
}

.csustable thead th {
	color: #00344d;
	border-bottom: 4px solid #00344d;
}

.csustable td, .csustable th {
	padding: 5px 8px;
}

.csustable th {
	font-weight: bold;
}

.csustable td {
	color: #2e4a5d;
	border-bottom: 1px solid #dddddd;
	
}

.csustable tbody tr:hover, .csustable tbody tr:focus, .csustable tbody tr:active {
	background: #eaeaea;
}

/* @end */



/* @end */

/* @group Menus */

/* @group Navbar */

/* nav_section is a class to encompass the menus and search form and give it a darker background than the rest of the left bar */
.nav_section {
	background-color: #c6d6ce;
	/*padding-top: 1em;*/
	/*border-top: 2px solid #ffffff;*/
}

#navbar a {
	text-decoration: none;
	color: #272727;
}

#navbar a:visited {
	color: #272727;
}

#navbar ul {
	overflow: hidden;
	width: 100%;
	padding-bottom: 10px;
}

#navbar ul ul {
	padding-bottom: 0;
}

#navbar li {
	font-size: .9em;
	padding-left: 5px;
}

#navbar li a {
	margin:-7px -5px;
	padding: 7px 5px;
	padding-left: 10px;
	width: 100%;
	display: block;
	margin-top: 0;
	margin-bottom: 0;
}

#navbar li a:hover,
#navbar li a:focus,
#navbar li a:active {

	background-color: #337964;
	color: #ffffff;
	display: block;
}

/* @group Headings */

#navbar h2 {
	font-size: 1.1em;
	font-family: verdana, sans-serif;
}

#navbar h3 {
	font-size: 1em;
}

#navbar a:hover h2,
#navbar a:focus h2,
#navbar a:active h2 {
	background-color: #337964;
	color: #ffffff;
}

#navbar a:hover h3,
#navbar a:focus h3,
#navbar a:active h3 {
	background-color: #337964;
	color: #ffffff;
}

#navbar h2, #navbar h3, #navbar h4, #navbar h5 {
	font-family: verdana, sans-serif;
	border:0;
	font-weight: bold;
	position: relative;
	clear: both;
	border-top: 2px solid #ffffff;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 10px 10px 5px;
	text-transform: none;
	font-variant: normal;
}

/* @end */

/* @end */

/* @group Horizontal menu */

.horiz_menu {
	margin-top: 3px;
	margin-bottom: 3px;
}
.horiz_menu li {
	float: left;
	display: inline;
	border-right: 1px solid #999999;
	color: #585858;
	padding: 1px 5px;
	font-size: .67em;
	text-transform: lowercase;
}
.horiz_menu a {
	color: #585858;
	text-decoration: none;
}

.horiz_menu a:hover, .horiz_menu a:active, .horiz_menu a:focus {
	text-decoration: underline;
}

.horiz_menu li.last {
	border-right: 0;
}

/* @end */

/* @group Global */

#global_menu {
	background-color: #00573d;
	margin: 3px 0;
	color: whitesmoke;
	height: 20px;
	/*overflow: hidden;*/
	z-index: -2;
	/*position: relative;*/
}

#global_menu, #global_menu li, #global_menu a {
	height: 20px;
	font: 10px verdana, trebuchet, "trebuchet ms";
	padding-left: 5px;
	padding-right: 5px;
}

#global_menu {
	padding-top: 5px;
	padding-left: 0;
}

#global_menu a {
	color: whitesmoke;
	text-decoration: none;
	overflow: hidden;
}

#global_menu li a:hover, #global_menu li a:active, #global_menu li a:focus {
	color: #efeaaf;
}

#global_menu li {
	display: inline;
	height: 20px;
}

/* @end */

/* @end */


#toparticle{

	border-bottom: 1px dotted #CCCCCC;
	margin-bottom: 5px;
	padding-left: 9px;
	padding-right: 9px;
}

#col1, #col2{
	width: 50%;
	float: left;
}

#col1_inner{
	padding-left: 9px;
	padding-right: 10px;
}

#col2_inner{
	padding-left: 10px;
	padding-right: 9px;
	border-left: 1px dotted #CCCCCC;
}

.headlineImage {
	background-color:#E2E2E2;
	border:1px solid #999999;
	float:left;
	margin-right:15px;
	padding:4px;
}

p.author{
	font-style: italic;
	margin-top: -10px;
}
.photo{
	font-size: .85em;
}

strong{
	font-weight: bold;
}