body{
	margin: 0;padding: 0;
	font-family: arial, sans-serif; 
	height:100%;
	background: url(images/grey-dot.png )  repeat; 
}

#wrapper{
	width: 800px;
	margin: 0 auto;
	padding: 0;

	background: url(images/gutters.png )  repeat-y; 
}

#header{
	height:109px;
	width:800px;

	background: url(images/csog-banner.png) right no-repeat; 


}

.spacer{

	font-weight: normal;
	background-color:white;   
	padding:  10px;
	text-align: justify;
	border: 0px dashed #aaa;
}


/* --------------------------- MENU -------------------- */

#menu {
	float: right; 
	margin: 65px 26px 0 0;
	padding: 8px; 
	font-size: 22px; 
	}

#menu span {
	margin: 6px 0px 3px 0px;
	font-weight: bold;
	padding: 5px ; 
	border-bottom : 3px black solid;   

	}

#menu  li{
	margin: 6px 0px 6px 0px;
	padding: 5px ; 
	display: inline;   

	}
 
#menu  ul{ 
	margin: 0; 
	padding: 0;    
	} 

#menu a{ 
	 margin: 6px 0px 6px 0px;
	padding: 5px ;
	text-decoration:none;
	font-weight: bold;

	}


#menu a:link{ 
	color: #7F462C;  
	}

#menu a:visited{ 
	color: #7F462C; 
	}


#menu a:hover{  
	 margin: 6px 0px 6px 0px;
	padding:5px ;
	color: #fff;
	background-color: orange;  
	}


#menu a:active{
	color: blue; 
	background-color: yellow; 
	}

.mainheading {
	margin: 10px 20px  0px 50px;
	}



/* ---------------------------- CONTENT  ------------------- */
#content{
	line-height: 1.5em;
	width: 450px;
 
} 

#content p{
	font-weight: normal;
	background-color:#efffff;   
	padding:  10px;
	margin: 20px 0 20px 40px;
	text-align: justify;
	border: 2px dotted #aaa;
}

#content h1 {
	padding: 0; margin: 5px;
}


#content  h2{
	background-color: #CCffcc;
	border: 2px solid #aaa;
	padding:   10px;
	margin: 20px 0 20px 40px;
}

#content  h3{
 
	margin: 20px 0 20px 40px;
}

.strong-heading{
	font-weight: bold; 
	background-color: #CCffcc;
	border: 2px solid #aaa;
	padding:   10px;
	margin: 20px 0 20px 40px;
	text-align: justify;
}





#content span{
	font-weight: normal;
	background-color: #efffde; 
	padding:  10px;

	margin: 12px 0 0px 40px ;
	text-align: justify;
	border: 2px dotted #aaa;
	display:block;
}



.barley-back{
	background-color: #efffde;
	}

.barley1-back{
	background-color: #ffffbc;
	}

#content ul{

	padding: 10px 30px ;
	
	
	background-color:#efffff;   

	margin:  0px 0  0px 40px;
	text-align: justify;
	border: 2px dotted #aaa;
	}



#content li{
	margin: 0 0 8px 0;
	
	}

#content li p{
	margin: 10px 0;
	
	}



#content ol{

	padding: 20px 0 0 0 ;
	margin:  0 0 0 60px;
	}

#content img{

	border: 1px #ccc solid;
	padding: 5px;
	display: block;
	}



.thumbnail {
	float: left;
	margin: 0 10px 0 0 ;
	}

.fortyleft{
	margin: 0 0 0 40px;
	}

#courses-content{

	margin: 10px  10px  30px  20px   ;
	padding: 0px  10px  10px  20px   ;

	width: 780px:



	}




#left-pane{

	width: 320px;
	border: 1px #ccc solid;
	padding:  0px  10px  10px  10px   ;
	margin: 0 20px 30px 0px;
	float: left;
	height: 300px;

	background-color: #efffff;
	}

#left-pane h2{

	margin: 5px  5px  5px  0px  ;  padding: 0;
	}

#right-pane{

	width: 330px;
	border: 1px #ccc solid;
	padding:  0px  10px  10px  10px   ;
	margin: 0px;
	float: left;
	height: 300px;
	background-color: #efffbc;
	}

#right-pane h2{

	margin: 5px  5px  5px  0px  ;  
	padding: 0;
	
	}
	
.brown-red {
	color: #7F462C;
	}
/* ------------ CONTACT FORM ----------------------- */


#contact-form{

	margin: 0 0 0 40px;

	}

#contact-form p {

	margin: 0px;

	}



/* ------------------------- INSET ----------------- */

#inset{

	float: right; 
	width: 310px;
	font-size:12px;
	margin: 20px 0 0 0;
}

#inset p{

	text-align: justify; 
	margin: 0 40px 20px 0;
	}

.centered-example{
	font-size: 14px;
	color: 	#800020;
	margin: 0px auto 20px auto  ;
	width: 165px;

	border: 0px dotted #aaa;
	background-color: white;
	font-style:italic; 

	}


.centered-example1{
	font-size: 14px;
	color: 	#800020;
	margin: 0 0 0 40px;
	 

	border: 0px dotted #aaa;
	background-color: white;
	font-style:italic; 
	clear: both;
	width: 170px;

	}

.centered-example2{
	font-size: 13px;
	color: 	#800020;
	margin: 0  ;
	width: 260px;
	padding: 0;
	border: 0px dotted #aaa;
	background-color: white;
	font-style:italic; 

	}


.sixteenpx{
	font-size: 16px;
	}

.sixteenpx-brown-red{
	font-size: 16px;
	color: #7F462C;
	}


.example {

	border: 1px orange solid;

	padding: 8px;
	margin: 0 0 50px 0;
	}

.example-yellow {

	border: 1px yellow solid;

	padding: 20px  20px  20px 20px ;
	margin:  0  0px 50px 0;
	}

.got-a-question{

	border: 1px yellow solid;

	padding: 10px;
	margin:  0 50px 0 0 ;
	}
 

#inset img{
	border: none;
	 
	padding: 4px;
	margin: 6px;
	}

.insetimage{
	border: 1px #ccc solid;
	}

  
.orange-coloured-insetimage{
	border: 1px orange solid;
	float: left;
}




#advanced-inset{

	float: right;

	margin:  5px 30px 40px 20px  ;
	padding: 15px 10px 0  0px;
	width: 270px;
	font-size:12px;
}

#advanced-inset img{
	float: left;
}

#advanced-inset p{

	margin: 5px; ;

}

 

.centered-example-images{
	font-size: 14px;
	color: 	#800020;
	margin: 0 auto; 
	width: 18em;
	border: 0px dotted #aaa;
	background-color: white;
	font-style:italic; 

}

 





.centered-form-image{
	font-size: 14px;
	color: 	#800020;
	margin: 0 auto; 
	width: 15em;
	border: 0px dotted #aaa;
	background-color: white;
	font-style:italic; 
	display: block;


}

.centered-form-image-2{
	font-size: 14px;
	color: 	#800020;
	margin: 0 auto; 
	width: 15em;
	border: 0px dotted #aaa;
	background-color: white;
	font-style:italic; 
	display: block;
	 padding: 0 0 0 0px;

}



#end-section{
	height:41px;
	width:800px;

	background: url(images/csog-footer.png) right no-repeat; 

	margin:  20px 0 0 0  ; padding: 0   0  ;
	font-size: 12px; 


}



/* ------------------------ FOOTER ------------------- */

#footer{
  
	margin: 30px 0 0 0  ; padding: 0   0  ;
	font-size: 12px; 


	}
 

#footer span {
	 margin: 0; padding: 0;
	font-weight: bold;

	}

#footer  li{
	margin: 0; padding:  4px 10px; 
	display: inline;   

	}

#footer  ul{ 

	   margin: 0px 0 0px 30px; padding: 0;
	} 

#footer a{ 
	margin: 0; padding:  4px 10px;
	text-decoration:none;
	font-weight: bold;

	}


#footer a:link{ 
	color: #555;  
	}

#footer a:visited{ 
	color: #7F462C;
	color: #555; 
	}


#footer a:hover{  
	margin: 0; padding: 4px 10px;
	color: white;  
	background-color: red;  
	}


#footer a:active{
	color: blue; 
	background-color: yellow; 
	}

















#credit{


width: 200px;
margin: 10px auto;



}

#credit a{
text-decoration: none;
color: grey;
font-size: 10px;
}

#credit a:link{ 
color: #555;  
}

#credit a:visited{ 
color: grey;
}


#credit a:hover{  
color: white;  
background-color: red;  
}


#credit a:active{
color: blue; 
background-color: yellow; 
}












label{

width: 100px;
float: left; display:block;
font-size: 12px;
font-weight: bold;

}

.button{
padding: 10px;
width: 100px;
}



.red{

color: red; display: inline; font-size: 22px; font-weight: bold;

}