body{
	background-color:#333333;
}
body {
	margin: 20px 0 40px 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 9pt;
	color: #000000;
	line-height: 1.5em;
}
#wrapper {
	background-image: url(../images/bg.jpg);
	background-color:#720039;
	border-top: 1px solid #636363;
	border-bottom: 1px solid #636363;
	margin: 40px 0 40px 0;
	padding: 20px 0 60px 0;
}
#main {
	/*border: solid #00ff00 10px;*/
	background-image:url(../images/frame-sides.png);
	padding: 0 21px 0 21px; /* width of frame = 21px */
	width: 758px; /* target = 800px */
	background-color: black;
	margin: 0 auto; /* center aligns */
}
#left {
	float:left;
	position: relative; /* need this in order to use negative margins in IE */
	background-repeat: no-repeat;
	background-color: white;
	height: 440px; /* target IE */
	min-height: 440px; /* target = 500px */ /* IE DOES NOT SUPPORT */
	margin-top: -36px; /* frame offset */
	/* width: 328px; /* target = 578px */
	/*padding: 20px 20px 20px 230px;*/
}

/* IE does not support multiple class selectors such as "#left.home" , which are so elegant. Which means we can't set #left width: 328px and then try to override it using #left.order width: 538px (similarly we can't just use .order to override anything previously set in the #left style, therefore we have redundant code for padding and width) */

/* Internet Explorer 5 and 6 do not read multiple class selectors correctly. They will apply only the last class that was written. So, a selector like this - "li.page-5.current-page" will be interpreted as this - "li.current-page". */

.home {
	background-image: url(../images/bg_home.jpg);
	padding: 20px 20px 20px 230px;
	width: 328px;
}
.history {
	background-image: url(../images/bg_history.jpg);
	padding: 20px 20px 20px 230px;
	width: 328px;
}
.wines {
	background-image: url(../images/bg_wines.jpg);
	padding: 20px 20px 20px 230px;
	width: 328px;
}
.wineclub {
	width: 538px; /* target = 578px */
	padding: 20px 20px 20px 20px;
}
.order { /* these styles override the #left styles */
	width: 538px; /* target = 578px */
	padding: 20px 20px 20px 20px;
}
.contact {
	background-image: url(../images/bg_contact.jpg);
	padding: 20px 20px 20px 230px;
	width: 328px;
}
.wines-zinfandel {
	background-image: url(../images/bg_zin.jpg);
	padding: 20px 20px 20px 230px;
	width: 328px;
}
.wines-zinfandelport {
	background-image: url(../images/bg_zinport.jpg);
	padding: 20px 20px 20px 230px;
	width: 328px;
}

.admin { /* these styles override the #left styles */
	background-image: url(../images/admin.jpg);
	width: 538px; /* target = 578px */
	padding: 20px 20px 20px 20px;
}

.wines-afterhours {
	background-image: url(../images/bg_afterhours.jpg);
	padding: 20px 20px 20px 230px;
	width: 328px;
}

#right {
	float: right;
	position: relative; /* need this in order to use negative margins in IE */
	background-image:url(../images/sidenav.jpg);
	background-repeat: no-repeat;
	background-color: black;
	margin-top: -36px;
	padding: 160px 20px 0 20px;
	width: 140px; /* target = 180px */
	height: 320px; /* target IE */
	min-height:320px; /* target = 500px : make sure this corresponds to #left min-height? */ /* IE DOES NOT SUPPORT */
	color: white;
}
#header {
	background-image:url(../images/frame-top.png);
	background-repeat: no-repeat;
	/*background-color:#9999CC;*/
	width: 816px;
	height: 65px;
	margin: 0 auto;
}
#footer {
	background-image:url(../images/frame-bottom.png);
	background-repeat: no-repeat;
	/*background-color:#9999CC;*/
	width: 816px;
	height: 65px;
	margin: -34px auto;
}
#copyright {
	text-align:center;
	width: 700px;
	margin: 50px auto 0 auto;
	color: white;
}

/* ADDITIONAL STYLES FOR DIV'S ABOVE */

#right a:link, #right a:active, #right a:visited {
		color:#FFFFFF;
}
#right a:hover {
	color:#CC6699;
	text-decoration:none; /* overrides global underline */
}
#right ul, #right li {
	margin-left: 0px;
	margin-bottom: 0px;
	margin-top: 0px;
	padding: 0;
	line-height: 1.75em;
	list-style-type: none;
}

/* TEXT FORMATTING */

div > p:first-child { /* corrects extra space above main text */
	margin-top:0;
	padding-top:0;
}

.smallcaps {
	color:#720039;
	text-transform:uppercase;
	font-size: 9pt;
	font-weight:bold;
	display: block;	
}

.bold { font-weight:bold;}

a:focus {
	outline: none;
}
a:link {
	color: #CC0099;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #CC0099;
}
a:hover {
	text-decoration: underline;
	color: #720039;
}
a:active {
	text-decoration: none;
	color: #CC0099;
}


/* CLEARFIX: forces the container div to expand with the content inside nested column div's (this is why i hate web design) */

/* float clearing for IE6 */
* html .clearfix{
  height: 1%;
  overflow: visible;
}

/* float clearing for IE7 */
*+html .clearfix{
  min-height: 1%;
}

/* float clearing for everyone else */
.clearfix:after{
  content: ".";
  height: 0;
  display: block; /* so it can accept the 'clear' property */
  clear: both;
  visibility: hidden;
}

/* MIN-HEIGHT HACK FOR IE: IE WILL USE HEIGHT AS THE MIN-HEIGHT */

html > body #left {height: auto;} /* overrides HEIGHT from above */
html > body #right {height: auto;} /* overrides HEIGHT from above */