/* 
Colorado State University Extension - Cascading Style Sheet

Comments have been made throughout to assist the person who 
will be eventually maintaining this site.
 [ Darrin Goodman | September/October 2007 ]
 
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+	NOTE:																							+
+	There are three page layout schemes: 3-column (like homepage), 2-column, and 1-column layout.	+
+	The 1-col and 2-col layouts use their own stylesheet, found in the /css directory.				+
+																									+
+	The parent/child relationship for the center column in the 3-column layout goes as follows:		+
+     <div id="content">																			+
+      <div id="content-group">																		+
+        <div id="content-main">																	+
+          <div id="centerCol">																		+
+																									+
+ The parent/child relationshiop for the 2-column layout is as follows:								+
+    <div id="content">																				+
+      <div id="content-group">																		+
+      	<div id="twoColContent">																	+
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/

body {
	margin:0;
	padding:0;
	color:black;
	font: 95%/140% Arial, Helvetica, sans-serif;
	background: #ded8cc url(../images/bk_tan.jpg) repeat-x;
	background-position: left top;
}
  
a {
	text-decoration: none;
	color: #006633; /* CSU green */
}

a:hover {
	color: #804000; /* rust color */
}

a img {
  border-width:0;
}

h1, h2, h3, ul, li, form {
  margin:0;
  padding:0;
}

h2 {
	font-size: 100%;
	color: #0021a5;
	padding-left:0px;
	border-bottom: 1px #929292 solid;
	clear:both;
}


h1 img a {
border: 0px;
}

h3.gold {
	color: #333333;
	padding: 7px 0px 4px 5px;
	margin: 10px 0px 0px 0px;
	font-size: 100%;
	background: url(../images/rightback.gif) no-repeat; /* this is the green background behind the H3 tag in the right side column*/
}

.line {
	border-top: thin solid grey;
	border-bottom: thin solid grey;
	line-height: 3px;
	margin-top: 5px;
	margin-bottom: 5px;
}

blockquote {
	border-left: #ded8cc 4px solid;
	font-size: 95%;
	padding: 0px 8px 0px 10px;
	margin: 5px 10px 5px 20px;
	font-weight:bold;
}

blockquote.grand {
	border-left: #ded8cc 4px solid;
	font-size: 90%;
	padding: 0px 8px 0px 10px;
	margin: 5px 10px 5px 20px;
	color: #060606;
}

blockquote.box {
	background-color: #ded8cc;
	border: #666666 1px solid;
	padding: 1px 8px 1px 10px;
	margin: 15px 10px 15px 20px;
	color: #666666;
}

.box {
	background-color: #ded8cc;
	border: #666666 1px solid;
	padding: 1px 8px 1px 10px;
	margin: 15px 10px 15px 20px;
	color: #666666;
}

h2.green {
	background: #669966 url(../images/hdr.jpg) repeat-x;
	color: #3A3A3A;
	padding: 2px 5px 2px 5px;
	margin-left: 0px;
	margin-right: 0px;
	border: none;
}

.free {
	font-size: small;
}	

.code  {
color:red;
font: 95%/140% "Courier New", Courier, monospace;
}
 
/* =page  Centers page in browser
----------------------------------------------- */
#page {
  width:804px;
  margin:0 auto; 
}
  
#uf_name {
  height: 41px;
  margin: 0;  
}

/* =wrapper  Controls width of page, background and border
	 ----------------------------------------------- */
#wrapper {
	float:left;
	width:814px;
	margin: 0px;
	padding: 0px;
	background: url(../images/shadow2.png) repeat-y;
	background-position: right top;	
}

/* =header 
----------------------------------------------- */
#header {
	float:left;
	width:750px;
	padding:0px;
	margin:0px;
	background-color: #FFFFFF;
}
  
#header img{
	padding:0px;
	margin:0px;
	border:none;
}

/* =bannerImg defines the graphical header
----------------------------------------------- */
#bannerImg {
	background: #fff url(../images/header.jpg) no-repeat top right;
	background-repeat: no-repeat;
	height: 130px;
	padding: 0;
	margin: 0;
}

/* =search box in navigation bar
----------------------------------------------- */
#search {
	float: right;
	padding: 6px 10px 0px 10px;
	margin: 0px;
}

/* =topnav  Top Navigation bar
----------------------------------------------- */
#topnav {
	margin-top: 5px;
	margin-bottom: 0px;
	padding: 0px;
	text-align: right;
}
#topnav ul {
	background: #DCEDD1 url(../images/nav.jpg) repeat-x;
	border-bottom: 0;
	float: left;
	margin: 0;
	padding: 0;
	width: 804px;
}
#topnav li {
	float: left;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#topnav li a {
	border-right: 1px solid #fff;
	color: #006633; /* CSU green */
	display: inline;
	float: left;
	font-size: 75%;
	font-weight: bold;
	margin: 0;
	padding: 6px 10px;
	text-decoration: none;
	border-bottom: none;
}

#topnav li a:hover {
	background: #669966 url(../images/navflip.jpg) repeat-x;
	color: #333; /* charcoal color */
}

li#first a {
	margin-left: 8px;
	border-left: 1px solid #fff;
	}
	
li#last a {
	border-right: none;
	}	
  
  /* =leftnavParent is the parent to #leftnav.  this is where you control the left column positioning.
----------------------------------------------- */
#leftnavParent {
	float:left;
	width: 218px; /* this is based on a 220px width, but I brought it down to 218 to accommodate the 2px of left padding (below).  */
	padding: 0px 0px 5px 3px;
}

#leftnavParent ul {
	padding-top: 0px;
	list-style: none;
	margin-left: 0;
	padding-left:15px;	
}

#leftnavParent ul li{
	background-image: url(../images/arrowthk.gif);
	background-repeat: no-repeat;
	background-position: 0px 9px; /* this sets the positioning of the leftnav bullets */
	list-style-image: none;
	list-style-type: none;
	padding-left: 20px; /* this sets the indenting of the list text in leftnav and provides separation from the bullet /images*/
	font-weight: bold;
	font-size: 85%;
	padding-top:5px;
	color: #006633;
}
#leftnavParent h2 {
	font-size: 100%;
	color: #666666;
	margin-top:12px;
	margin-left: 10px;
	margin-right:10px;
	margin-bottom:10px;
	border-bottom: 1px #929292 solid;
	clear:both;
}

#leftnavParent ul li ul{
padding-bottom:15px;
padding-right:5px;
margin-left:0px;

}

#leftnavParent ul li ul li{
	background-image: none;
	padding-left:0px;
	font-size: 90%;
	font-weight: normal;
	padding-bottom: 5px;
	list-style-type: none;
	display:inline;
}

#leftnavParent li a {
	color: #006633; /* CSU green */
	text-decoration:none;
}
#leftnavParent li a:hover {
	color: #804000;
	text-decoration: underline;
}

  
  /* =leftnav  (Main Navigation)
----------------------------------------------- */
#leftnav {
	font-size:98%;
	line-height: 120%;
	padding: 5px 0px 5px 0px;
	margin: 0px 0px 0px 0px;
	background: #DCEDD1 url(../images/leftnavcaptop.gif) no-repeat top left;
}	

#leftnavtop {
	background: #DCEDD1 url(../images/leftnavcaptop.gif) no-repeat top left;
	margin: 0px;
	padding: 0px;
}
#leftnavbottom {
	background: #DCEDD1 url(../images/leftnavcapbottom.gif) no-repeat bottom left;
}

#leftnav ul {
	padding-top: 0px;
	list-style: none;
	margin-left: 0;
	padding-left:15px;	
}

#leftnav ul li{
	background-image: url(../images/arrowthk.gif);
	background-repeat: no-repeat;
	background-position: 0px 9px; /* this sets the positioning of the leftnav bullets */
	list-style-image: none;
	list-style-type: none;
	padding-left: 20px; /* this sets the indenting of the list text in leftnav and provides separation from the bullet /images*/
	font-weight: bold;
	font-size: 85%;
	padding-top:5px;
	color: #006633;
}
#leftnav h2 {
	font-size: 100%;
	color: #666666;
	margin-top:12px;
	margin-left: 10px;
	margin-right:10px;
	margin-bottom:10px;
	border-bottom: 1px #929292 solid;
	clear:both;
}

#leftnav ul li ul{
padding-bottom:15px;
padding-right:5px;
margin-left:0px;

}

#leftnav ul li ul li{
	background-image: none;
	padding-left:0px;
	font-size: 90%;
	font-weight: normal;
	padding-bottom: 5px;
	list-style-type: none;
	display:inline;
}

#leftnav li a {
	color: #006633; /* CSU green */
	text-decoration:none;
}
#leftnav li a:hover {
	color: #804000;
	text-decoration: underline;
}

/* Heading Graphics located in leftnav
----------------------------------------------- */
#swoosh {
	background-image: url(../images/h1b.gif);
	background-repeat: no-repeat;
	padding: 5px 2px 23px 8px;
	margin: 10px 2px 6px 8px;
}

/* =content  (container for all non-header content (makes leftnav gray background extend down left side of page)
----------------------------------------------- */
#content {
	float:left;
	width:800px;
}

#content li.video {	padding: 2px 0 0 25px; background: url(../images/icon_video.gif) no-repeat 0px 5px;	}
#content li.audio {	padding: 2px 0 0 25px; background: url(../images/icon_audio.gif) no-repeat 0px 5px;	}
  
/* content-group will:
	- keep the center content column located in the center
	- prevent the leftnav region from trading places and moving to the center area
	- controls the width of the white content region
----------------------------------------------- */
#content-group {
	background-color: #FFFFFF;
 	float: right;
 	width: 575px; /* this width will also have an affect on shifting the center and right columns right or left */
}

/* =content-main (center column content)
----------------------------------------------- */
#content-main {
	float:left;
	width:340px;
	background-color: #FFFFFF;
/*	padding-left:2px; */
	margin-top: 3px;
	margin-bottom: 2px;
	border-right: gray 1px dotted;
}

#content-main h1 {
	color: #666666;
	padding: 0px;
	margin: 0px;
	font-size: 130%;
}

#content-main ul {
	padding-top: 0px;
	list-style: none;
	margin-left: 0;
	padding-left:20px;	
}

#content-main li{
	background-image:url(../images/template_arrow_sm.gif);
	background-repeat: no-repeat;
	/* below, regarding bullet image: number on left controls left/right position | number on right controls height  */
	background-position: 18px 3px; 
	list-style-image: none;
	list-style-type: none;
	padding-left: 35px;
	font-weight: normal;
	padding-top: 0px;
	font-size: small;
	color: #006633;
}
#content-main h2 {
	font-size: 115%;
	color: #666666;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	border-top: 1px #929292 solid;
	border-bottom: 1px #929292 solid;
	padding: .25em;
	clear: both;
}

#content-main h2.grand {
	font-size: 130%;
	color: #060606;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	clear: both;
}

#content-main h3.grand {
	font-size: 100%;
	color: #060606;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	border-top: 1px #929292 solid;	
	clear: both;
}

#content-main p.grand {
	font-size: 100%;
	color: #060606;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
/*	border-bottom: 1px #929292 solid; */
	clear: both;
}

#content-main p.grand2 {
	font-size: 90%;
	color: #060606;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	border-bottom: 1px #929292 solid;
	clear: both;
}

#content-main ul li ul{
padding-bottom: 15px;
padding-right: 5px;
margin-left: 0px;

}

#content-main ul li ul li{
	background-image: none;
	padding-left: 0px;
	font-size: 90%;
	font-weight: normal;
	padding-bottom: 5px;
	list-style-type: none;
	display: inline;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The CSS for the ONE and TWO Column layouts may be found in their own separate style sheets.
The 3 column layout found in the homepage is listed below as centerCol
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


/* =centerCol (container around center topic content)
----------------------------------------------- */
#centerCol {
	padding: 0px 0px 0px 1px;
}

#centerCol p a {
	font-size: 100%;
	color: #804000;
	font-weight: bold;
}

#centerCol p a:hover {
	color: #669966;
}

#centerCol p {
	font-size: 95%;
	line-height:170%;
	margin: 0px 10px 0px 20px;
	padding: 2px 0px 10px 0px;
}

#centerCol img {
	padding-top:5px;
	float: left;
	border-right: 10px #fff solid;
	padding-right: 0px;
	padding-bottom:30px;
} 

#centerCol img.right {
	padding-top:5px;
	float: right;
	border-right: 10px #fff solid;
	padding-right: 0px;
	padding-bottom:30px;
} 

.noleftimg{
	margin: 0px 10px 0px 78px;
	padding: 2px 0px 0px 0px;
}


/* =content-right  (Controls right column of page)
----------------------------------------------- */
#content-right {
	float: left;
	width: 180px;
	font-size: 110%;
	background-color: #FFFFFF;
	padding: 0px 5px 0px 8px;
	margin: 0px 5px 0px 5px;
}

#content-right p {
	padding: 7px 0px 4px 15px;
	margin: 10px 0px 0px 0px; 
}

/* 
#content-right h2 {
	font-size: 100%;
	color: #666666;
	margin-top:10px;
	margin-left: 10px;
	margin-right:10px;
	margin-bottom:10px;
	border-bottom: 1px #929292 solid;
	clear:both;
}
*/

#content-right h3 {
	color: #ffffff;
	padding: 7px 0px 4px 5px;
	margin: 10px 0px 0px 0px;
	font-size: 100%;
	background: url(../images/rightback.gif) no-repeat; /* this is the green background behind the H3 tag in the right side column*/
}

#content-right h3.gold {
	color: #333333;
	padding: 7px 0px 4px 5px;
	margin: 10px 0px 0px 0px;
	font-size: 100%;
	background: url(../images/rightback.gif) no-repeat; /* this is the green background behind the H3 tag in the right side column*/
}

/*#content-right img {
	float: left;
	padding: 2px 8px 2px 0px;
	margin: 4px 52px 0px 0px; 
}
*/

#content-right img {
	vertical-align: middle;
	float: none;
/*	padding: 10px 8px 12px 0px; */
	padding: 10px 8px 2px 0px;
	margin: 6px 0px 0px 0px;
}

#content-right ul {
	padding: 0px 0px 0px 10px;
	font-size: 80%;
	font-weight: bold;
}

#content-right li.video {	padding: 2px 0 0 25px; background: url(../images/icon_video.gif) no-repeat 0px 5px;	}
#content-right li.audio {	padding: 2px 0 0 25px; background: url(../images/icon_audio.gif) no-repeat 0px 5px;	}

#content-right p {
	line-height: 130%;
	font-size: 75%;
}

#content-right p a {
	color:#006633; /* CSU green */
	font-weight: normal;
}

#content-right p a:hover{
	color:#669966;
}

/* =content-right definitions list
----------------------------------------------- */
#content-right dl {
	margin: 5px 2px 2px 2px;
	padding: 0;
	list-style: none;
	line-height: 110%;
}
#content-right dt {
	margin: 0;
	font-weight: bold;
	font-size: 75%;
	}
#content-right dd {
	margin: 0 0 0 8px;
	padding: 0 0 0 13px;
	font-size: 75%;
	background: url(../images/sidebar-bullet.gif) no-repeat 0 6px;
}
#content-right dd.grand {
	margin: 0 0 0 8px;
	padding: 0 0 0 13px;
	font-size: 80%;
	background: url(../images/sidebar-bullet.gif) no-repeat 0 6px;
}
/* NEWS REGION: use the nobullet class if you want for your definition data <dd> to display without the bullet image */
#content-right dd.nobullet {
	margin: 0 0 0 8px;
	padding: 0 0 0 13px;
	font-size: 70%;
	background: none;
}
#content-right dd.nobullet:a {
	color: #006633; /* CSU green */
	text-decoration:none;
}
#content-right dd.nobullet:hover {
	color: #804000; /* rust color */
	text-decoration: underline;
}
#content-right dd:a {
	color: #006633; /* CSU green */
	text-decoration:none;
}
#content-right dd:hover {
	color: #804000; /* rust color */
	text-decoration: underline;
}	
#content-right ul {
	margin: 4px 10px 10px 10px;
	padding: 0;
	list-style: none;
}
#content-right li {
	margin: 0 0 .5em 0;
	padding: 0 0 0 14px;
	line-height: 1.3em;
	background: url(../images/sidebar-bullet.gif) no-repeat 0 5px;
	}

#content-right dd.video {	padding: 2px 0 0 25px; background: url(../images/icon_video.gif) no-repeat 0px 5px;	}
#content-right dd.audio {	padding: 2px 0 0 25px; background: url(../images/icon_audio.gif) no-repeat 0px 5px;	}


/*#events: (holds calendar and events)
-----------------------------------------------------------------------*/
#events {
	border: 1px solid #929292;
	padding: 0px;
	margin-right: 10px;
	margin-top: 0px;
	background-color: #FFFFFF;
	margin-bottom: 20px;
}

#events h3 {
	padding-top: 0px;
}

/*#footer: (holds the footer)
-----------------------------------------------------------------------*/

#footer {
	float:left;
	width:100%;
	color: #E6E6E6;
	font-size: 85%;
	padding-top: 36px;
	padding-bottom: 20px;
	text-align: center;
	background: #669966 url(../images/footer.jpg) no-repeat;
	background-repeat: no-repeat;
}

#footer img{
	float:right;
	padding-top: 15px;
}

#footer a {
	color: #E6E6E6;
}

#footer a:hover {
	color: #006633;
}
 
#footer p a:hover {
	color: #804000;
}

#footer p {
	margin: 10px;
}

#footer ul {
	background: #669966;
	border-bottom: 0;
	float: left;
	margin: 8px 0px 0px 35px;
	padding: 0px 0px 0px 35px;
	width: 700px;
}

#footer li {
	list-style-type: none;
}

#footer li a {
	border-right: 1px solid #2F602D;
	color: #E6E6E6;
	display: inline;
	float: left;
	font-size: 95%;
	font-weight: bold;
	margin: 0px 0px 15px 0px;
	padding: 0px 10px 0px 10px;
	text-decoration: none;
	border-bottom: none;
}

#footer li a:hover {
	background: none;
	color: #006633;
}

#footer li a.last {
	border-right: none;
	}
	
	/* Image Bullets */
.pdf {  padding: 5px 0 0 20px;
               background: url(images/pdf.gif) no-repeat 0px 5px;    }
.doc {  padding: 5px 0 0 20px;
               background: url(../images/rightback.gif) no-repeat 0px 5px;    }
.none { padding: 5px 0 0 20px;
               background: url(../images/rightback.gif) no-repeat 0px 5px;   }
.web {  padding: 5px 0 0 20px;
               background: url(../images/rightback.gif) no-repeat 0px 5px;    }



ul  .black  {
	color:#000 !important;
}

p   .small {
	font-size: 90% !important;
}