/* 
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, h4, ul, ol, 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/rightbackgld2.gif) no-repeat; /* this is the green background behind the H3 tag in the right side column*/
}
h3.grayWithBorder {
	color: #666;
	border-bottom: 1px #666 solid;
	padding-top: 1em;
}

h5 {
	margin: 1.5em 0 0 0;
	padding-bottom: 3px;
	padding-left: 4px;
	font-size: 85%;
	font-weight: bold;
	color: #000;
	}
	
h5.sitemapbk {
	padding: 0em 5;
	background-color: #CCCCCC;
	border-bottom: none;
	}
	
h6 {
	margin: 1.5em 0 0 0;
	padding-left: 4px;
	font-family: "Trebuchet MS", Verdana, sans-serif;
	font-size: 85%;
	font-weight: normal;
/*	color: #660000; */
	color: #333333;
	}

.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.indent {
	border-left: none;
	font-size: 90%;
	padding: 0px 0px 0px 0px;
	margin: 5px 10px 5px 40px;
	font-weight:normal;
}

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;
}

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;
}

 
/* =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;
}

/* bannerImg div specifically for the Small Steps to Health & Wealth website */
#bannerImgSmallSteps {
	background: #fff url(/images/header.jpg) no-repeat top right;
	background-repeat: no-repeat;
	/* height: 386px; */
	height: 310px;
	padding: 0;
	margin: 0;
}

#bannerImgSET {
	background: #fff url(/images/header.jpg) no-repeat top right;
	background-repeat: no-repeat;
	height: 227px;
	padding: 0;
	margin: 0;
}

#bannerImgSNAPEFNEP {
	background: #fff url(/images/header.jpg) no-repeat top right;
	background-repeat: no-repeat;
	height: 184px;
	padding: 0;
	margin: 0;
}

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

#search2 {
	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;
	}	
ol {
	padding-top: 0px;
	margin-left: 0;
	padding-left:60px;
}

ol li{
	padding-left: 0px;
	font-weight: normal;
	padding-top: 0px;
	color: #000000;
}
  
  /* =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  (Extension 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 ul li.nobullet{
	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;
}

/* The Inset div was created to provide an indented chunk of text in an area where you might feel inclined to use a bulleted item, but you don't necessarily want to have the bullet, such as some inset text found in an already bulleted list. An example of this can be found under bullet item #2 on this page: http://www.ext.colostate.edu/pubs/columngw/gw120414.html */
#inset {
	width: 450px;
	margin: 5px 20px 5px 25px;
}

/* 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;
}

#expert {
	background-image: url(../images/AskAnExpert-gr.jpg);
	background-repeat: no-repeat;
	padding: 10px 2px 65px 8px;
	margin: -5px 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 !important; /* most modern browsers will read this line */
	width: 328px; /* this is a hack for IE <= v.6 so that the right column does not get pushed to the bottom of the page */
	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 ul li{
	background-image:url(/images/template_arrow_sm.gif);
	background-repeat: no-repeat;
	/* below, regarding background-position (for 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 ol {
	padding-top: 0px;
	margin-left: 0;
	padding-left:60px;
}

#content-main ol li{
	padding-left: 0px;
	font-weight: normal;
	padding-top: 0px;
	font-size: small;
	color: #000000;
}
#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.top {
	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;
} */

#centerCol p small {
	padding: 0px;
	margin: 0px;
	font-size: 80%;
}


/* =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 td {
	font-size: 70%;
}

/* 
#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: 93%;
	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/rightbackgld2.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 img.right {
	float: right;
	vertical-align:top;
	margin:0px 0px 0 10px;
}
#content img.rightWithBorder {
	float: right;
	vertical-align:top;
	margin:0px 0px 0 10px;
	border: 1px #666 solid;
	padding: 3px;
}
#content img.leftWithBorder {
	float: left;
	vertical-align:top;
	margin:0px 10px 0 0;
	border: 1px #666 solid;
	padding: 3px;
}
#content img.left {
	float: left;
	vertical-align:top;
	margin:0px 10px 0 0;
	border: none;
	padding: 3px;
}
img.rightWithBorder {
	float: right;
	vertical-align:top;
	margin:0px 0px 0 10px;
	border: 1px #666 solid;
	padding: 3px;
}


/* =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;
}
#content-right dd.fs {
	margin: 0 0 0 8px;
	padding: 0 0 0 13px;
	font-size: 80%;
	font-weight:bold;
	font-style:italic;
	color: #006633;
	background: none;	
}
/* 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: 80%;
	background: none;
}
#content-right dd.nobullet:a {
	color: #006633; /* CSU green */
	text-decoration:none;
}
#content-right dd.nobullet:a:hover {
	color: #804000; /* rust color */
	text-decoration: underline;
}
#content-right dd:a {
	color: #006633; /* CSU green */
	text-decoration:none;
}
#content-right dd:a: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;
}

/* the "compress" class is used in areas where the toggleDiv javascript is used */
.compress {background-color: #ccc; font-weight: bold; font-size:x-small;}

/*#strategyBox: (used in the Strategies area on the Small Steps website: http://www.ext.colostate.edu/smallsteps/index.html)
-----------------------------------------------------------------------*/
#strategyBox {
	width:96%;
	border:#F90 1px solid;
	border-radius:5px;
	background:url(/images/strategy-box-01.jpg) repeat;
	/*background:url(http://www.colorado4h.org/images/design/bg-box-green.png) repeat;*/
	font-weight:bold;
	font-size:80%;
	padding:2px;
	margin:2px 10px 4px 0px;
}
#strategyBox:hover {
	background:url(/images/strategy-box-06.jpg) repeat;
}

/*#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;
	}