/* 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;
	}
	
/* for the recipe pages */
	div#recipe
	{
		margin-left: 1em;
		margin-right: 1em;
	}
	
	div#recipe ul
	{
		margin-left: 1.7em;
		margin-bottom: 1em;
	}

	div#recipe h1
	{
		font-size: 1.1em;
		text-transform: uppercase;
		margin-top: 1.8em;
		margin-bottom: 1.0em;
		font-weight: normal;
		font-family: verdana, sans-serif;
		color: #000;
		border-width: 1px;
		border-style: solid none solid none;
	}
/* close for recipe pages */
	
	div#mainwrapper { width: 776px; }
	
	/* add margin auto stuff if you want the layout centered */
	div#header
	{
		width: 776px;
		height: 60px;
		border-bottom: 1px solid #FFF;
	}
	
	div#columnswrapper
	{
		float: left;
		width: 776px;
		background-color: #FFF;
	}
	
	div#nav
	{
		float: left;
		width: 200px;
		margin-left: -626px;
	}
	
	/* nagative margin moves nav column into position */
	div#content
	{
		float: left;
		width: 426px;
		margin-left: 200px;
		display: inline;
	}
	
	/* display inline is hack fix for IE */
	div#rightcolumn
	{
		float: left;
		width: 150px;
	}
	
	div#footer { width: 776px; }
	.clearthis { clear: both;
		padding-top: 15px;}
	/* 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 #000; }
	
	div#content div#mainimage p
	{
		font-size: .65em;
		margin: 0px 5px;
		color: #000;
	}
	
	div#content div.imagelist
	{
		width: 80px;
		height: 80px;
		float: left;
		margin: 0 8px 4px 0;
	}
	
	div#content div.imagelist img { border: 1px solid #000; }
	
	div#content h1
	{
		font-size: 1.1em;
		text-transform: uppercase;
		margin-top: 1.8em;
		margin-bottom: 1.0em;
		font-weight: normal;
		font-family: verdana, sans-serif;
		color: #000;
		border-width: 1px;
		border-style: solid none solid none;
	}
	
	div#content p
	{
		font-size: .8em;
		margin-top: 0;
		margin-bottom: .5em;
	}
	
	div#content li { font-size: .75em; }

	div#content h6
	{
		font-size: .9em;
		border-top: 3px dotted #000;
		border-bottom: 2px dotted #000;
		margin: 20px 10px;
		padding: 6px 10px;
		color: #789;
		text-transform: uppercase;
		font-weight: bold;
	}
	
	div#content blockquote
	{
		width: 175px;
		float: right;
		font-size: .7em;
		border-top: 3px dotted #000;
		border-bottom: 2px dotted #000;
		margin: 0 8px 5px 4px;
		padding: 6px 10px;
	}

	div#content blockquote p
	{
		margin: 0;
		font-style: italic;
	}
	
	div#content blockquote span
	{
		margin: 0;
		color: #789;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 1.1em;
	}
	
	div#content a
	{
		text-decoration: underline;
		color: #000;
	}
	
	div#content a:hover
	{
		color: #000;
		text-decoration: none;
	}
	
	/* nav styles */
	div#nav
	{
		padding-top: 20px;
		text-transform: uppercase;
	}
	
	div#nav ul
	{
		border: 0;
		margin: 10px 1.25em 12px 1.25em;
		padding: 0;
		list-style-type: none;
		font-weight: bold;
		font-size: .75em;
	}
	
	div#nav li
	{
		border-bottom: 2px solid #000;
		margin: 0;
	}
	
	div#nav li img
	{
		margin: 4px;
		float: left;
		border: 0;
	}
	
	div#nav li:first-child { border-top: 2px solid #000; }
	
	div#nav a
	{
		text-decoration: none;
		color: #000;
		display: block;
	}
	
	div#nav span
	{
		font-weight: normal;
		color: #000;
	}
	
	div#nav a:hover
	{
		color: #000;
		background-color: #D3D3D3;
	}
	
	/* div#nav img {padding-left:15px;} */
	/* a hack for IE Win only \*/
	* html div#nav ul { border-top: 2px solid #000; }
	
	/*end of hack */
	/* right column styles */
	div#rightcolumn
	{
		padding-top: 23px;
		border-bottom: 2px solid #000;
	}
	
	div#rightcolumn p { font-size: .75em; }
	
	div#rightcolumn div#newslinks ul
	{
		list-style-type: none;
		font-size: .7em;
		padding-left: 10px;
		margin: 0 6px 0 0;
	}
	
	div#rightcolumn div#newslinks li
	{
		margin-top: 0;
		margin-bottom: .5em;
	}
	
	div#rightcolumn h3
	{
		text-align: center;
		font-size: .8em;
		color: #000;
		margin-bottom: 0px;
		padding-top: 3px;
		border-top: 2px dotted #000;
	}
	
	div#rightcolumn a:hover
	{
		color: #000;
		text-decoration: none;
	}
	
	div#rightcolumn li.morelink { font-style: italic; }
	
	/*footer styles*/
	div#footer
	{
		padding: 4px 0;
		/* pushes the links away from top and bottom of the div */
		font-size: 0.6em;
		/* sets the font size of all links */
		text-align: center;
		/* centers the ul elements in the div */
		background-color: #FFF;
		/* sets the background color of the div */
		border-top: 1px solid #000;
		border-bottom: 2px solid #000;
	}
	
	div#footer ul { margin: 2px 0; }
	
	/* vertical spacing between the lists */
	div#footer li
	{
		display: inline;
		/* the key CSS - makes the lists display horizontally */
		/* sets the color of the vertical lines */
		border-left: 1px solid;
		/* creates the vertical line to the left of each list items */
		color: #000;
		/* sets the color of the vertical lines  - links colored below */
		padding: 0 5px 0 9px;
		/* horiz space between links and vert lines - needed diff l & r values to center */
	}
	
	div#footer li:first-child { border-left: 0; }
	
	/* removes the left border of the first list item - IDWIMIE */
	div#footer ul li a
	{
		text-decoration: none;
		/* removes the underlining off the links */
		color: #000;
		/* the color of the links */
	}
	
	div#footer ul li a:hover
	{
		text-decoration: underline;
		color: #000;
	}
	
	/* underlines the links when hovered */
	div#footer ul.fineprint li { color: #000; }
	
	/* color for copyright and vert dividers on last row */
	div#footer ul.fineprint li a { color: #000; }
	
	/* had to explicitly color these or they inherit from div#footer li */
	div#footer ul.fineprint li a:hover { color: #000; }
	
	/* turns bottom row white when hovered */
	.button
	{
		border: 1px solid #990000;
		display: block;
		font-size: 0.8em;
		text-transform: uppercase;
		text-align: center;
		clear: both;
		margin: 6px 0px;
		line-height: 1.1em;
	}
	
	.button img
	{
		float: left;
		height: 47px;
		width: 47px;
		clear: left;
		margin: 0px;
		padding: 0px;
	}
	
	.button a:link, .button a:visited
	{
		color: #000;
		text-decoration: none;
		height: 27px;
		display: block;
		padding: 10px 0px;
	}
	
	.button a:hover { background: #D3D3D3; }
	
	.right { float: right; }
	
/* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
    content: ".";              /* the period is placed on the page as the last thing before the div closes */
	display: block;          /* inline elements don't respond to the clear property */ 
    height: 0;                  /* ensure the period is not visible */
    clear: both;               /* make the container clear the period */
    visibility: hidden;	     /* further ensures the period is not visible */
}

.clearfix {display: inline-block;}   /* a fix for IE Mac */

/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* end of "no-extra-markup" clearing method */