/*Bob's sailing website for assignment3-4304 -Karen Passmore, May 20th Due.*/

body {
	text-align: center;
	background: #666; color: #000;
	font-family: "Arial", "Academy Engraved LET", "Arial Italic";
}

#wrapper {
	width: 900px;
	margin: 0 auto;
	text-align: left; 
}



#leftwrapper {
	background: url(images/blue_bg_left.jpg) repeat-y top left;
	float: left;
	border-left: 3px solid gray ;
	border-right: 3px solid gray; 
	}
	
	#rightwrapper {
	background: url(images/blue_bg_right.jpg) repeat-y top right;
	float: right;
	}
	
	
#container 
 
 {
	width: 100%;
	margin: 15px auto;
	padding: 25px;
	background-color: #ffc;
	color: #039;
	border: 15px solid gray;
	border-style: double;
	line-height: 130%;
 } 
 
#top 
 
 { 
	padding: .5em; 
	border-bottom: 0px solid gray;
	text-align: center;
   /* background-image: url(images/background.jpg) #000 repeat;*/ 
 } 
 
#top h1 
 
 { 
	padding: 0; 
	margin: 5px;
	text-align: left;
 } 
 
#topnav

 {
	padding: 3px;
	background-color: #369; 
	border-top: 3px solid gray;
	border-bottom: 3px solid gray;
	text-align: center;
 }
 
#topnav img {
	padding: 0;
	margin: 0 0 0 -45px;
	background-color: #369;
 }
/*text-align: left; added as IE5.x and IE6 does not recognize the auto margin property, plus the text-align:center: code is added to 'body' */


/*leftcolumn........................................*/
#leftnavcol  
 { 
	float: left; 
	width: 130px;
	z-index:100;	
	background: #369; 
	color: #fff;
	margin: 0; 
	padding: 10px 10px 5px 20px;
	text-align: left;
 } 

#leftnavcol p {
	text-align: left;
	font-size: 15px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 5px;
}

#leftnav h4 {
	text-align: left;
	font-size: 15px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 5px;	
	
}


#leftnavcol img {
	float: left;
	padding: 0px;
	margin: 0px;
	border: 0px;
	color: #369; background: #000;
 }
 
 /*LEFTnavigation........................................*/
#leftnavcol ul {
	list-style-type: circle;
	float: left;
	margin: 0;
	padding: 5px;
} 

#leftnavcol li { 
	margin: 5px; 
	padding: 5px; 
} 
 
#leftnavcol a { 
	display: block;
	width: 100px;
	text-decoration: none;  
	color: #fff; background: #369;
	 
} 
 
#leftnavcol a:hover { 
	color: #fff; background: #9c0;  
} 

#leftnavcol a:visited {
	color: #ffc;
	
} 

#leftnavcol li a#current {
	color: #0f0;
	background: #fc0;
}


/*------------------------*/
#rightnavcol  { 
	float: right; 
	width: 180px;
	z-index:99;
	background: #369 url(images/blue_bg_right.jpg) repeat-y top right; 
	color: #333; 
	margin: 0; 
	padding: 1em;
	text-align: justify;
 } 
 
 
#rightnavcol p {
	text-align: center;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 5px;
}

#rightnavcol img {
	float: left;
	padding: 2px;
	margin: 5px;
	border: 1px solid #fff;
	color: #369; background: #000;
 }

/*RIGHTnavigationUL........................................*/
#rightnavcol ul {
	list-style-type: none;
	float: right;
	margin-right: -50px;
	margin-top: -10px;
	padding: 5px;
} 

#rightnavcol li { 
	margin: 5px; 
	padding: 5px; 
} 
 
#rightnavcol a { 
	display: block;
	width: 200px;
	text-decoration: none;
	text-align: center; 
	padding: 5px; 
	color: #000; background: #fff;
	border: 3px solid; 
	border-color: #fff #666 #666 #fff; 
} 
 
#rightnavcol a:hover { 
	color: #fff; background: #9c0;
	border: 3px solid; 
	border-color: #Cf0 #039 #039 #Cf0; 
  
} 

/*not using here
#rightnavcol li a#current { 
	color: #039; background: #fff; 	
} 
*/

 
/*content.........................................*/ 
#content 
 
 { 
  	margin-left: 150px; 
	border-left: 0px solid gray; 
	margin-right: 200px; 
	border-right: 0px solid gray; 
    padding: 1em; 
    max-width: 36em;
    text-align: center; 
 } 
 
#content_faq 
 
 { 
 	margin-left: 200px; 
	border-left: 1px solid gray; 
	margin-right: 225px; 
	border-right: 1px solid gray; 
	padding: 1em; 
	max-width: 36em;
	text-align: left; 
 } 

#content h2 {
	font-size: 130%;
	text-align: center;
	font-style: italic; 
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #069; background: #fff;
	
}

#content p {
	text-align: justify;
	padding-right: 10px;
	padding-left: 10px;
}

#content img {
	float: inherit;
	padding: 3px;
	margin: 5px 5px 5px 5px ;
	border: 1px solid #ccc;
	color: #fff; background: #fff;
 }
 
/*ul list for recommended gear*/
#content ul {
	list-style-type: circle;
	margin: 0px 0px 0px 20px;
	padding: 5px;
	text-align: left;
} 

#content li { 
	margin: 5px; 
	padding: 5px; 
} 
  
/*for small images on home page*/
.thumbnail 
{ 
	float: left; 
	width: 90px;
	height: 120px; 
	border: 1px solid #999; 
	margin: 0 15px 15px 0; 
	padding: 10px; 
} 
 
/*  Use only if you need to force a line break and using the BOX and not liquid layout
.clearboth { clear: both; } 


/*footer.........................................*/
 #footer 
 
 { 
  clear: both; 
  margin: 0; 
  padding: .5em;
  text-align: center; 
  color: #333; 
  background-color: #ddd; 
  border: 3px solid gray; 
 } 
 
 #footerbottom  {
 	text-align: left;
	color: #fff;
	font-size: 9px;
	
}
 
#leftnav p, #rightnav p { margin: 0 0 1em 0; } 
 
#content h2 { margin: 0 0 .5em 0; }