/* The Wyke-Switch - by Charlie Wyke-Smith - switch your left and center columns in your layout to have the center column first in the markup!
 Putting the content first in your markup can significantly improve your search engine rankings.
This demo shows the CSS required to switch the left and center column - the center column (content - div "column2") 
is first in the markup but appears after the left column (navigation - div "column1") in the layout.
Without the margin-left properties on columns 1 and 2, they appear in the browser in the order shown in the markup - 2, 1, 3.
This arrangement is achieved by the use of a negative left margin on column 1 to move it to the left and
a a positive left margin on column 2 to move it to the right, which exchanges the position of the two columns.
Note that left margins on left floats get doubled in IE unles you apply the Steve Caslon hack of adding display:inline to
the element, in this case column 2. More on this bug at http://www.positioniseverything.net/explorer/doubled-margin.html  
This example also uses a floated wrapper around the three columns - this forces the wrapper to enclose the three columns 
so that the footer is always below whichever column is longest */

body {font: 1em verdana, arial, sans-serif;}
* {margin:0; padding:0;}
div#mainwrapper {
	width:776px;
	margin: auto;
} /* add margin auto stuff if you want the layout centered */
div#header {
	width:776px;
	height:195px;
	border-bottom:25px solid #103174;
	background-position: top;
	font-weight: bold;
	color: #103174;
}
div#columnswrapper {float:left; width:776px; background-color:#ECF2C9;}
div#nav {
	float:left;
	width:155px;
	margin-left:-626px;
	background-color: #CC6600;
} /* nagative margin moves nav column into position */
div#content {float:left; width:476px; margin-left:150px; display:inline;} /* display inline is hack fix for IE */
div#rightcolumn {
	float:left;
	width:140px;
	background-color: #660000;
	color: #FFFFFF;
	right: auto;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
}
div#footer {width:776px;}
.clearthis {clear:both;}

/* content column styles */
div#content {padding:0 0}
div#contentinner {margin: 0 10px 20px;}
div#content div#mainimage {width:180px; float:left; margin:0 8px 4px 0;}
div#content div#mainimage img {border: 1px solid #960;}
div#content div#mainimage p {font-size:.65em; margin:0px 5px; color:#C60;} 
div#content h1{font-size:1.4em; font-variant:small-caps; margin-top:2em; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000066;}
div#content h2{
	font-size:1em;
	margin-top:2em;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#CC6600;
	font-weight: bold;
	font-style: oblique;
	text-decoration: underline;
}
div#content h3{font-size:0.8em; margin-top:2em; font-family:Verdana, Arial, Helvetica, sans-serif; color:#660000;}
div#content li {font-size:.75em;}
div#content a {text-decoration:underline; color:#000066;}
div#content a:hover {color: #960; text-decoration:none;}

/* nav styles */
div#nav {
	padding-top:15px;
	text-align: left;
}
div#nav ul {
	border:0;
	margin:12px 1.25em 12px .30em;
	padding:0;
	list-style-type:none;
	font-weight:bold;
	font-size:11px;
	background-color: #CC6600;
}
div#nav li {border-bottom:2px dotted #103174; margin:0; padding:.3em 0; text-indent:.5em}
div#nav li:first-child {border-top:2px dotted #103174;}
div#nav a {text-decoration:none; color:#FFFFFF;}
div#nav a:hover {color: #103174;}
/* a hack for IE Win only \*/	
* html div#nav ul {border-top:2px dotted #103174;}
/*end of hack */

/* right column styles */
div#rightcolumn {
	padding-top:34px;
	border: none;
}
div#rightcolumn p {
	font-size:0.60em;
	text-align: left;
}
div#rightcolumn img {
	border-top:2px none #FFFFFF;
	border-right: none;
	border-bottom: none;
	border-left: none;
	background-position: center;
}
div#rightcolumn h3 {
	text-align:left;
	font-size:0.8em;
	color:#FFFFFF;
	margin-bottom:0px;
	padding-top:3px;
	border: none;
}

/*footer styles*/
div#footer {
	padding:4px 0;
	font-size:0.7em;
	text-align:center;
	background-color:#000066;
	border-top:1px solid #660000;
	border-bottom:2px solid #660000;
	color: #FFFFFF;
}
