/* ==================================================================================
(((( General Styles ))))
:: Darrin Goodman, 4-H Technology Specialist
:: Colorado State University Extension
To learn more about Colorado 4-H, please view our website: http://www.colorado4h.org
=====================================================================================*/

body {
	background:url(../images/background.gif) repeat;
	background-color:#EEEEEE;
	text-align: center;
	font: 75% Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
	min-width: 765px;
}

/* 	By setting up a div that points to this "clear" class, 
	you can avoid meshing the footer with any of the float elements 
	that are located within the content area of the webpage.
	The css element "clear" will force everything down to the bottom
	of the float elements. */
.clear {
	clear:both;
	font-size: 10%;
}

a:link{
	color: #808040;
	text-decoration: none;
	border-bottom: 1px dotted #808040;
}

a:visited{
	color: #5F88B6;
	text-decoration: none;
	border-bottom: 1px dotted #5F88B6;
}

a:hover{
	color: #3A4D7C;
	text-decoration: none;
	border-bottom: 1px solid #3A4D7C;
}


a.img, a.img, a.img {
	border: 0 none;
}

h1, h2 {
	font-family: Georgia, "Times New Roman", Times, serif;
}

h1{
	font-size: 1.25em;
}

h2{
	font-size: 1.2em;
	border-bottom: solid 1px gray;
}

h3 {
	font-size: 1.5 em;
	background-color: #f2f2f2;
	padding: .2em;
}

img {
	border: 0px none;
}

/* Layout
=================================*/


#wrapper{
	margin:0 auto 0 auto;
	width:736px;
	text-align: left;
	border: solid 1px gray;
}

#bg{
	padding: 10px 19px 15px 15px;
	background: #FFFFFF;	
}

#header{
	background: url(../images/oooheader02.jpg);
	width: 702px;
	height: 184px;
}

#topnav {
	margin-top: 5px;
	text-align: right;
}
#topnav ul {
	background: #CBE2CD;
	border-bottom: 0;/*px solid #FFF;*/
	float: left;
	margin: 0;
	padding: 0;
	width: 702px;
}
#topnav li {
	float: left;
	height: 25px;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#topnav li a {
	border-right: 1px solid #fff; /* creates border between links in topnav bar */
	color: #6A6A6A;
	display: inline; 
	float: left; 
	font-size: 84%; /* reduces font size */
	font-weight: bold;
	margin: 0; 
	padding: 6px 10px; /* provides space above/below and in between text links */
	text-decoration: none; 
	border-bottom: none; /* prevents border from ocurring underneath link 
							since this is an <a> tag */
}

#topnav li a:hover { /* controls the topnav button rollover effect */
	background: #A8A8A8;
	color: #6A6A6A;
}

li#first a {  /* controls the left margin and left border of the topnav bar */
	margin-left: 12px;
	border-left: 1px solid #fff;
}

/* ======== main content area, left and center on page ========= */
#content{
	float: left;
	width: 680px;
	margin-top: 10px;
	padding: 0 10px 0 10px;
	line-height: 1.6em;
}

#footer{
	height: 10px;
	margin-right: 4px;
}

/* attributes for link at bottom of page that points back to page top */
.toTop {
	font-size: x-small;
	color: #333333;
	background-color: #D1E9D6;
}


/* =========== Main Content Styling ============= */


.title{
	color: #D3B047;
	background: url(../images/clover.gif) no-repeat left top;
	padding: 3px 0 3px 25px;
}

.border{
	padding: 5px;
	border: 1px solid #ECECEC;
}

blockquote {
	background-color: #f2f2f2;
	margin: 0px 0px 0px 0px;
	padding: 1px 5px 1px 15px;
	font-size: 88%;
}

.pagebody{
	padding-bottom: 20px;
}

code, pre {
	font-size: 1.1em;
}

img.border {
	padding: .6em;
	border: 1px solid #627BBF;
	margin: 0 1em 1em;
}

#installation {
	color: #666666;
	padding: 1em;
	margin: .5em 50 .5em 20;
	}

#box {
	font-size: small;
	color: #E1E1E1;
	padding: 1em;
	background-color: #647EAA;
	border-top: 1px #333333 solid;
	border-bottom: 1px #333333 solid;
	border-left: 1px #333333 solid;
	border-right: 1px #333333 solid;
	margin: 1em 50 1em 20;
	}
	
#box a {
	color: #E1E1E1;
	border-bottom: 1px dotted #E1E1E1;
}		

#box a:hover {
	color: #CDD6ED;
	border-bottom: 1px solid #CDD6ED;
}	

# box a:visited {
	color: #7896DA;
	border-bottom: 1px solid #7896DA;
}	

/* footernav */

#footernav {
	margin-bottom: 0px;
	text-align: right;
}

#footernav ul {
	background: #CBE2CD;
	border-bottom: 0;
	float: left;
	margin: 0;
	padding: 0;
	width: 702px;
}
#footernav li {
	float: left;
	list-style-type: none;
	margin: .2em;	/* this will give the footer a little extra height */
	padding: .2em;	/* this will give the footer a little extra height */
}

#footernav li a {
	border-left: 1px solid #fff;
	color: #6A6A6A;
	display: inline;
	float: left;
	font-size: 84%;
	margin: 0;
	padding: 1px 9px;
	text-decoration: none;
	border-bottom: none;
}
#footernav li a:hover {
	background: #999;
	color: #fff;
}
li#footerfirst a {
	border-left: 1px solid #fff;
	margin-left: 10px;
}
