/* 
				Two column layout see
				http://www.positioniseverything.net/articles/onetruelayout/
				for details on how this technique works
				also various articles at 
				http://alistapart.com/
			
			*/
			
			body
			{
				border: 0px none;
				margin: 50px 0px 0px 0px;
				padding: 0px;
				font-family: Arial, Helvetica, sans-serif;
				color: #000;
				text-align: center;
				background: #fff;
			}
			
			div { text-align: left; }
			
			div#oContainer			
			{
	width: 775px;
	overflow:auto;
	height:1200px;
	background-image: url(../img/background.gif);
	background-repeat: no-repeat;
	margin-top: 50px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
			}
			div.lCol
			{
				float: left;
				clear: right;
				width:290px;
				margin:12px 10px 10px 40px;
			}
			div.rCol
			{
				float: right;
				clear: none;
				width:300px;
				margin:10px 40px 10px 10px;
			}
			
			div#lColHome
			{
	width: 220px;
	float: left;
	clear: right;
	text-align:left;
	margin: 10px 10px 10px 60px;
	height:400px;
	position:relative;				
			}
			
			div#rColHome			
			{
				width: 315px;
				float: right;
				clear: none;
				margin: 0px 60px 12px 15px;
				padding: 12px 0 0 0;
				
			}
			div#rColHome p {margin-left: 14px;}
			
			/* 
				images, we are only worried about modern browsers 
				- specify h + w using css selectors
				- specify position etc using img selectors alone
			*/
			
			img { border: none; }
			img#donate-button
			{
	position: relative;
	top: 18px;
	left: 12px;
	float: left;
	clear: both;
	z-index:2;
			}
			img#logo
			{
				width: 183;
				height: 148;
				margin: 28px 0 0 6px;
				clear: left;
				float: left;
			}
			
			img#announce
			{
				width: 397;
				height: 142;
				clear: none;
				position: relative;
				margin:0;
				top: 13px;
				left: 125px;
			}
			
			img#nav
			{
				width: 580px;
				clear: right;
				float: right;
				height: 84px;
				position: relative;
				top: 0px;
				
				
				
		
			}
			img#callout			
			{
	width: 125px;
	height: 120px;
	display: block;
	position: relative;
	float: right;
	left: -30px;
	top:-150px;
	clear: none;
	z-index:1;
			}
			
			img#photo-album-button{ position:relative; display:block; float:left;clear:none; position:relative; left:0px;}
			img#the-comittee-button{ position:relative; display:block; float:left;clear:left; position:relative; left:0px; margin-top:4px; }
			img#footer			
			{
				margin: 0px auto;
				border:1px solid black;
			}
			/* Font Styles */
			h2, big{font-weight:700;
				color: #3b3b86;
				font-size:10pt;
				margin:0px 0 -5px 0; 
				padding:0 0 0 0;}
			
			strong { font-style: italic; }
			
			p
			{
				font-family: Verdana, Arial, Helvetica;
				font-weight: 700;
			}
			
			div#lColHome p			
			{
				font-size: 9pt;
				line-height: 13pt;
				font-weight: 700;
				color: #3b3b86;
			}
			
			div#rColHome p
			{
	font-size: 13px;
	line-height: 13pt;
	font-weight: bold;
	color: #333;
			}
			div.lCol p, div.rCol p{
				font-weight: 200;
				font-size:7pt;
			}
			/* kind of a hack
			 create a small div with the correct proportions to be the marker.
			 it's class is always marker, which sets the size and vertical position
			 it's id changes to match the page which we then use to set the horizontal position
			 */
			div.marker			
			{
				height: 18px;
				width: 14px;
				overflow: none;
				position: relative;
				top: 26px;
				left: 230px;
				margin: 2px;
				font-size: 2px;
				color: #fff;
				clear: left;
				background-color: transparent;
				background-image: url(../img/nav-triangle.gif);
				background-repeat: no-repeat;
			}
			
			div#food{left:325px;}
			div#supporters{left:425px;}
			div#sponsors{left:525px;}
			div#skippers{left:620px;}
			a { text-decoration: none; color: #3b3b86;}
			a:hover { text-decoration: underline; }
			
			/* Thank you lists use defintion lists (restaurants and caterers or unordered lists (everybody else) */
			dl			
			{
				font-size: 8pt;
				line-height:10pt;
				text-indent: 0;
				
			}
			dl.skippers			
			{
				
				line-height:15pt;
			}
			dt {float:left; font-weight:700; padding-right:.25em; text-indent: 0;}
			dd.last, dt.last{margin-top:10pt;}
			dd			
			{
				clear: right;
				text-indent: 0;
				margin-right:0;
				margin-left:0;
				
			}
			ul {
				margin-left:0;
				margin-top:2px;
				padding-left:0;
				padding-top:0;
				list-style-type: none;
				list-style-position: outside;
			}
			li			
			{
				font-size: 8pt;
				list-style-type: none;
				list-style-position: outside;
				text-indent:0;
				padding-left:0;
				margin-left:0;
				line-height:12pt;
			}
			
			hr{color:#fff; background-color: #fff; height: 2px; width: 700px; border:0; position:relative;  top:1px !important; left:35px; margin:0; display:block; clear:left;}
			 
						
			h1 {display:inline;}
img#yacht-button {
	position: relative;
	top: 18px;
	left: 12px;
	float: right;
	clear: both;
	z-index:2;
}
div.lColrt {
	float: right;
	clear: right;
	width:290px;
	margin:12px 10px 10px 40px;
}