/* Ver. 1.1 11/21/2008 */

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

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

strong {
	font-weight: bold;
}
/* 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:-9999px;
}

/* 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: bold 1.2em Verdana, "Trebuchet MS", sans-serif;	
	color: #00573d;
}

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

#main_content h2 a,
#main_content h3 a,
#main_content h4 a,
#main_content h5 a
{
	text-decoration: none;
}

h1 {
	letter-spacing: -.1px;
	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: 1000px;
	height: 17px;
	background:transparent url('../images/top_shadow.png') no-repeat;
	margin: 6px auto 0px auto;

}

div.shadowcontainer { 
	width: 1000px;	
	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: 1000px;
	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;
	position: relative;
	overflow: hidden;
}

#contentcontainer {
	padding-top: 3px;
	border-top: 1px dotted #bbb;
	height: auto;
	background: transparent url(../images/colbg.gif) repeat-y scroll -10px 10px;
	overflow: hidden;
}

/* @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: 950px;
	/*margin-top: 3px;*/
	height: 255px;
	clear: both;
	background: transparent url(../images/web_banner.gif) no-repeat;
	padding-bottom: 3px;
}

#site_logo_sub {
	width: 950px;
	/*margin-top: 3px;*/
	height: 110px;
	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 {
	float: left;
	position: relative;
}

#searchdiv {
	float: right;
	padding: 20px 10px;
	position: relative;
}

#search label {
	font-weight: bold;
	color: #252525;
	font-size: .7em;
}

#search #gobutton {
	margin-top: 3px;
}

#search #searchbox {
	background-color: #c6d6ce;
	border: 1px solid #cccccc;
	color:#00573D;
	margin:0;
	padding:0;
	width:105px;
	padding: 2px;
	font-size: .8em;
}

/* @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 {
	position: relative;
	float: left;
	width: 155px;
	font-size: .78em;
	display: inline;
	/*padding-right: 5px;*/
	/*border-right: 1px dotted #cccccc;*/
	/*padding-bottom: 5000px;
	margin-bottom: -5000px;*/
	margin-top:-3px;
	border-top:6px solid white;
	color: #363636;
	/*height: 1%;*/
	/*background: transparent url(../images/colbg.gif) repeat-y left top;*/
	/*z-index:2;*/
}

#navbar_wrap {
	/*background-color: #edf3f1;*/
	/*padding-bottom: 5000px;
	margin-bottom: -5000px;*/
	position: relative;
	background-color: #c6d6ce;
	width: 100%;

}

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

#navbar form {
	margin: 5px;
}

/* @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: 5px;
	margin-left: 166px;
	font-size: 80%;
	background-color: #edf3f1;
	border: 1px solid #cccccc;
	background-image: url(../images/body_green_bg.jpg);
	background-repeat: repeat;
}


#main_content_wrap {
	padding: 5px 15px;
}

/* @end */

/* @group Footer */

#footer {
	clear: both;
	width: 100%;
	z-index: 4;
	position: relative;
	overflow: hidden;
	border-top: 1px dotted #bbb;
	background-color: #fff;
	padding-bottom: 5px;
}

#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;
	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 h1,
#main_content h2,
#main_content h3,
#main_content h4,
#main_content h5,
#main_content h6{
	padding-left: 0;
	margin-left: 0;
}

#main_content h1 {
	border: 0;
	font-size: 1.1em;
}

#main_content h2 {
	padding-bottom: 5px;
	border-bottom: 1px dotted #00573d;
	font-size: 1em;
}

#main_content h3 {
	font-size: .95em;
	padding: 5px;
	border-left: 7px solid #333333;
	border-bottom: 1px dotted #00573d;
	margin-bottom: .75em;
	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: 265px;
	/*margin-left: 15px;
	margin-bottom: 15px;*/
	padding:3px;
	margin:0 0px 15px 15px;
	border-left: 1px solid #CCC;
	border-right: 2px solid #999;
	border-bottom: 2px solid #999;
	float: left;
	clear: right;
	background: #F4EFDF;
	display: inline;
	font-size: .87em;
	background-image: url(../images/callout_bg.png);
	background-repeat: repeat;
}

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


#main_content .calloutbox h2, #main_content .calloutbox h3{
	padding: 5px;
	margin: 0px -2px 0px -1px;
	border: 0;
	padding-left: 10px;
	background-color: #00573D;
	color: #FFFFFF;
	text-align: left;
	font-size: 1.3em;
	margin-bottom: 5px;
	font-weight: normal;
}

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

#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;
	margin-bottom: 1em;
}

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;
	margin-top: -5px;
}

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

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

#navbar li a {
	margin:-5px -5px -5px -5px;
	padding: 5px 5px 5px 10px;
	/*padding-left: 10px;*/
	width: 95%;
	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: .88em;
	font-family: verdana, sans-serif;
}

#navbar h3 {
	font-size: .88em;
	position: relative;
}

/*#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 a, #navbar h3 a {
	display: block;
}

#navbar h2 a:hover,
#navbar h2 a:focus,
#navbar h2 a:active,
#navbar h3 a:hover,
#navbar h3 a:focus,
#navbar h3 a:active {
	background-color: #337964;
	color: #ffffff;
	display: block;
	margin: -10px;
	padding: 10px;
	margin-left: -5px;
	padding-left: 5px;
	/*padding-right: 10px;
	margin-right: -10px;*/
}

#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;
	display: block;
	width: 140px;
}

#navbar h3 a{

}

/* @end */

/* @end */

/* @group Horizontal menu */

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

}
.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: #f5f5f5;
	/*height: 20px;*/
	/*overflow: hidden;*/
	z-index: -2;
	/*position: relative;*/
	clear:both;
	width: 940px;  /* fixes a mysterious bug 2/20/09 */
}

#global_menu, #global_menu li, #global_menu a {
	font: .86em verdana, trebuchet, "trebuchet ms";
	padding-left: 5px;
	padding-right: 5px;
	line-height: 2em;
}

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

#global_menu a {
	color: #f5f5f5;
	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;
}

/* @end */

/* @end */

/*
 * This fixes an clipping bug of some kind i IE6 with calloutboxes in the sidebar.
 * The sidebar needs a containing div to avoid problems with objects floated left.
 *
 */
#sidebar{
	float: right;
	display: inline;
	width: 285px;
/* below code was used to fix IE 6 before the PA template update */
/*	float: right;
	position: relative; 
	padding-right: 10px;
	right: -10px;
	margin-left: -10px;*/
}


* html #navbar {
	margin-right: 8px;
}

* html #main_content {
	height: 1%;
	margin-left: 0px;
}

* html #maincontainer {
	margin-bottom: 25px;
}

/******** Added for 2 column and single column *****/

#main_content{
	font-size: 	.78em;
}

#col1{
	float: left;
	width: 546px;
	border-right: 1px solid #999;
	padding-right: 10px;
}

#col2{
	font-size: .9em;
	float: left;
	width: 190px;
	padding-left: 10px;
}

#col2 h2{
	border-top: 1px dotted #00573D;
	padding-bottom: 0;
	line-height: 1.7em;
	font-size: 1.1em;
}

#col2 h3{
	border: 0;
	padding: 0;
	background-color: #00573D;
	color: white;
	line-height: 2em;
	padding-left: 1em;
	
}

#main_content_wrap {
	padding: 10px 10px;
	overflow: hidden;
	display: inline-block;
}

#contentcontainer {
	overflow: visible;
}

#headline_img{
	width: 545px;
	overflow: hidden;
	margin-bottom: .75em;
}

div.picture{
	margin-right: 1em;
	
}

div.picture p {
	font-size: .9em;
	display: block;
	background: #FFF;
	margin-top: .5em;
	padding: .5em;
}

h1, h2, h3 {
	clear: left;
}

#single_column{
	display: inline;
	float: left; /* this makes the page render better in contribute edit mode */
	background: #fbfbfb;
	margin: -5px;
	padding: 10px;
	padding-bottom: 10px;
	border: 1px dotted #CCC;
	width: 745px;  /*this is for an IE 6 bug but causes problems with IE 7 */

}

#single_column h1, #single_column h2, #single_column h3{
	color: #454545;
}

#main_content pre {
	font-size: 1.5em;
	margin-bottom: 1em;
}