/* ---- Reset all styles ---------------------------------------------------------- */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, label, input, p, blockquote, address, th, td {
	margin: 0;
	padding: 0;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}
ol, ul {
	list-style-type: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th {
	text-align: left;
}
fieldset, img {
	border: 0;
}



/* ---- Set new basic styles --------------------------------------------------------- */

body {
	background:#000000 url(/images/body_bg_verticalgrad.gif) repeat-x center top;
}
body, p, td, th, li, h1, h2, h3, h4, h5, h6  {
	font:normal 11px/1.5 Verdana, Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, ul { 
	zzzmargin: 0 20px; 
	zzzpadding: .5em 0;
}
h3 {
	font-family:'lucida grande', 'lucida sans unicode', helvetica, arial, sans-serif;
	color:#404200;
}
h4 {
	color:#522101;
}
a {
	color:#3f4227;
}
a:visited {
	color:#636249;
}
fieldset {
	border:1px solid #BF8B6C;
	padding:10px;
}

.kds-formfield-not-valid-highlight {background-color:#900; color:#FFF;}


.clear {
	clear:both;
}




/* ---- =Structure! --------------------------------------------------------- */

#container {
	position:relative;
	width:955px;
	margin:65px auto 15px auto;
}



/* ---- =Header! --------------------------------------------------------- */

#header-container {
	position:relative;
	width:955px;
	height: 170px;
}
#header-before {
	position:absolute;
	width: 480px;
	height: 235px;
	top:-65px;
	left:-60px;
	background:url(/images/winemark_headerregion.gif) no-repeat center center;
}
#header {
	position:relative;
	width:955px;
	height:170px;
	background:#000000 url(/images/masthead_photo_logo.jpg) no-repeat center bottom;
	border-top:1px solid #732C00;
	border-left:1px solid #732C00;
	border-right:1px solid #732C00;	
}
#header h1 {
	text-indent:-9999px;
}



/* ---- =Content! --------------------------------------------------------- */

#content-container {
	position:relative;
	width:955px;
	background-color:#f9f6e0;
}
#content-before {
	position:absolute;
	width: 80px;
	height: 285px;
	top:0;
	left:-80px;
	background:url(/images/winemark_sideregion.gif) no-repeat center center;
}
#content {
	position:relative;
	width:955px;						/* force "Layout" upon I.E. */
	padding:45px 0 10px 0;
	background:#f9f6e0 url(/images/winemark_contentregion.gif) no-repeat left top;
	min-height:400px;
	height:auto !important;
	border-left:1px solid #732C00;
	border-right:1px solid #732C00;	
	border-bottom:1px solid #732C00;
}



/* ---- =Columns --------------------------------------------------------- */
/*
Note that ALL pages will feature a "maincolumn" whereas only the homepage or
other specific pages will feature a secondary "sidecolumn". The size and
float style of both of these will need to change accordingly, depending on
a class of "onecolumn" or "twocolumn" that is to be applied to the BODY.
See also the "maincontent" and "sidecontent" div stylings in this file.
*/ 

#maincolumn, body.onecolumn #maincolumn {
	float:none;
	width:955px;
	border-top:1px solid #712d01;
}
#sidecolumn, body.onecolumn #sidecolumn {
	display:none;
}


body.twocolumn #maincolumn {
	float:left;
	display:inline;
	width:670px;
	border-top:1px solid #712d01;
}
body.twocolumn #sidecolumn {
	float:right;
	display:inline;
	width:285px;		/* utilize full sidecolumn width --- left border not on this element! */
	border-top:1px solid #712d01;
}



/* ---- =Action --------------------------------------------------------- */

#action {
	height:50px;
}
#action ul {
	margin:0;
	padding:0;
}
#action ul li {
	float:left;
	display:inline;
	height:35px;
	margin-top:8px;	
	margin-bottom:7x;
}
#action ul li a {
	display:block;
	height:35px;
	width:200px;
	line-height:35px;
	padding-left:40px;
	font-size:13px;
	font-family:'lucida grande', 'lucida sans unicode', helvetica, arial, sans-serif;
	color: #832200;
	text-decoration:none;
}
#action ul li a:hover {
	text-decoration:underline;
}

#action ul li#action-01-li {
	background: url(/images/action_icon01.gif) no-repeat left center;
	margin-left:44px;
}
#action ul li#action-01-li a {
	background: url(/images/action_icon01.gif) no-repeat left center;
}

#action ul li#action-02-li {
	margin-left:50px;
	margin-right:50px;
	background: url(/images/action_icon02.gif) no-repeat left center;
}
#action ul li#action-02-li a {
	background: url(/images/action_icon02.gif) no-repeat left center;
}



/* ---- =MainContent --------------------------------------------------------- */
/*
Recall that "maincontent" is a member of "maincolumn", and thus is dependent upon
whether the page is using "onecolumn" or "twocolumn" layout (as per a BODY class).
When using "onecolumn" layout (which is the default) then the sidecolumn is hidden.
*/

#maincontent, body.onecolumn #maincontent {
	width:865px;						/* This width must account for the interior padding we apply */
}
body.twocolumn #maincontent {
	/*width:670px;*/					/* to force I.E. "Layout" ?? Need to adjust for I.E. Box Model?  */
	width:580px;						/* This width must account for the 90px interior padding we apply */
}

#maincontent {
	clear:both;
	padding:25px 45px 15px 45px;		/* hmmm, don't normally like side padding due to I.E. misinterpretations... SEE HACK IN #maincolumn DIV FOR THIS... */
	border-top:1px solid #712d01;
}

#maincontent h3 {
	/* You can substitute graphical headers for these "H3" elements in a separate pages.css file based upon the unique BODY element ID, if desired... */
	font-weight:normal;
	font-size:190%;
	margin-top:1em;
	margin-bottom:1em;
}
#maincontent h4 {
	font-weight:bold;
	font-size:120%;
	margin-top:1.0em;
	margin-bottom:0.8em;
}
#maincontent h5 {
	margin-top:0.0em;
	margin-bottom:-0.5em;
	font-weight:bold;
}
#maincontent p {
	margin-top:0.5em;
	margin-bottom:1em;
}
#maincontent ul {
 margin-left:25px;
 list-style-type:disc;
}
div.rightfloater {
	/* This can be used to float a thumbnail or other graphic to the right. May also feature negative top margin. */
	float:right;
	display:inline;
	clear:right;
	margin-left:10px;
}



/* ---- =SideBox --------------------------------------------------------- */
/* Use multiple ".sidebox" classes rather than a single #sidebox ID */

div.sidebox {
	/* background-color:#FFFFFF; */
	/* width: 284px; -- 284 is desired total width */
	width:264px;
	padding:5px 10px 15px 10px;
	border-left:1px solid #712d01;
	border-bottom:1px solid #712d01;
}
div.sidebox a {
	text-decoration:underline;
	color:#9b1b01;
}
div.sidebox a:hover {
	color:#9bb648;
}
div.sidebox h3 {
	/* You can substitute graphical headers for these "H3" elements in a separate pages.css file */
	font-size:140%;
	margin-top:0.5em;
	margin-bottom:0.7em;
}
div.sidebox h4 {
	font-size:100%;
	line-height:110%;
	font-weight:bold;
	margin-top:0.2em;
	margin-bottom:0.0em;
}
div.sidebox p {
	font-size:90%;
	line-height:110%;
	margin-top:0.2em;
	margin-bottom:0.0em;
}
div.sidebox ul {
	margin-top:0.2em;
	margin-bottom:0.4em;
	/* don't use built-in bullets, they are too inconsistently spaced/placed by various agents */
	/* instead we will use custom background-images on our LI elements. */
	zzzposition:relative;
	zzzleft:15px;
	zzzlist-style-type:disc;
	zzzmargin-left:5px;
}
div.sidebox li {
	font-size:90%;
	line-height:110%;
	margin-bottom:0.1em;
	padding-left:15px;
	background:url(/images/bullet_square.gif) no-repeat 2px 4px;
}
div.sidebox .callout {
	margin-top:0.5em;
	margin-bottom:0.5em;
}
div.sidebox .callout a {
	font-weight:bold;
	text-transform:uppercase;
	text-decoration:underline;
}

div.sidebox div.leftfloater {
	float:left;
	display:inline;
	clear:both;
	margin-right:10px;
	margin-top:5px;
	margin-bottom:10px;
}
div.sidebox div.rightfloater {
	float:right;
	display:inline;
	clear:both;
	margin-left:10px;
	margin-top:5px;
	margin-bottom:10px;
}




/* ---- =Navigation --------------------------------------------------------- */
/* Be sure to also see the separate file "nav.css" for more styling goodness !! */

#navigation-container {
	position:absolute;
	width:955px;
	background:#272103 url(/images/navbar_grad.gif) repeat-x center center;
	left:1px;
	top:170px;
}
#navigation {
	position:relative;
	text-align:center;
	width:950px;
}

#navigation h3, #navigation hr {
	/* hide these accessibility features from the visual design */
	display:none;
}

#navigation ul {
	zzzheight:auto;
	margin:0;
	padding:0;
}
#navigation ul li {
	float:left;
	display:inline;
	width:auto;
	background:url(/images/navbar_separator.gif) no-repeat right center;
}
#navigation ul li a {
	color:#f9f6e0;
	padding-left:10px;
	padding-right:10px;
	text-decoration:none;
	text-transform:lowercase;
	line-height:13px;
}
/* remove the navbar_separator from the last item */
#navigation ul li.last  {
	background-image:none;
}
/* be sure to remove the navbar_separator from subnavs! */
#navigation ul li ul li {
	background-image:none;
}
#navigation ul li a:hover {
	zzztext-decoration:underline;

}



/* ---- =ContactInfo --------------------------------------------------------- */

#contactinfo {
	background-color:#F9F6E0;
	position:relative;
	width:955px;
	border-left:1px solid #732C00;
	border-right:1px solid #732C00;	
	border-bottom:1px solid #732C00;
	padding:4px 0;
}
#contactinfo, #contactinfo p {
	text-align:center;
	font:normal 9px/1.2 Arial, Verdana, Helvetica, sans-serif;
	color:#333;
}



/* ---- =Footer --------------------------------------------------------- */

#footer {
	position:relative;
	width:955px;
	padding-top:9px;
	top: 63px;
	left: 84px;


}
#footer, #footer p {
	text-align:right;
	font:normal 9px/1.2 Arial, Verdana, Helvetica, sans-serif;
	color:#7c3202;
}
#footer a {
	color:#7c3202;
	text-transform:lowercase;
	text-decoration:none;
}
#footer a:hover {
	text-decoration:underline;
	color:#a24103;
}





/* ---- =Homepage --------------------------------------------------------- */

div.event {
 clear:both;
 margin:12px 0;
 border-top:1px dotted #C38C6B;
 padding:5px 0;
}
div.event h5 {
 font-size:10px;
 line-height:14px;
 font-weight:normal;
 margin:6px 0;
 padding-top:10px;
}
div.event h5 a {
 font-size:12px;
 font-weight:bold;
}
div.event h5 img {
 margin-top:-10px;
}
div.event p {
 font-size:10px;
 line-height:12px;
 margin:4px 0;
}