/*common styles*/

body {
	background-color: #b9ada2;
	margin-top: 0px;
	margin-left: 0px;
	font-size: 100%;
	background-image: url(../images/background_page.gif);
	background-repeat: repeat-x;
}

p, li  {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 75%;
	color: #004467;
	margin-top: 0px;
	margin-bottom: 10px;
}

h1  {
	font-size:95%;
	color:#6e2639;
	margin-top:20px;
	margin-bottom:10px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	clear: none;
}


h2  {
	font-size:85%;
	color:#3b4212;
	margin-top:15px;
	margin-bottom:5px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	padding: 0px;
}
.clearleft {
	clear: left;
}

.topHead  { /*add this class to heads at the top of a page*/
	margin-top:0px;
}

.reviewHead { /*add this class to a head 1 when the head 2 is the varietal name
				and immediately follows. See top page for example*/
	margin-bottom:0px;
}


a:link  {
	color: #004467;
	text-decoration:underline;
}

a:visited {
	color:#666666;
	text-decoration:underline;
	
}

ul   { /*body unordered list*/
	list-style-type: none;
	padding: 0px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
}

li   { /*body lists*/
	font-size: 75%;
	margin-left: 0px;
	background-image: url(../images/bullet.gif);
	background-repeat: no-repeat;
	background-position: 0.05em 0.5em;
	padding-left: 1em;
	margin-top: 0px;
	padding-top: 0px;
	line-height: 120%;
	margin-bottom: 5px;
}
ol   { /*body unordered list*/ 
	padding: 0px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 22px;
}
ol li {
	font-size: 75%;
	margin-left: 0px;
	background-image: none; 
	margin-top: 0px;
	padding-top: 0px;
	padding-left: 0px;
	line-height: 120%;
	margin-bottom: 5px;
}
/*These are the positioning divs and their child stylings*/

#topbanner  { /*holds the byline, logo and topnav divs*/
	width:800px;
	height:75px;
}

#bylineDiv  {  /*holds the byline image*/
	width:800px;
	height:20px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
	background-color: #3b4212;
	text-align: right;
	
}

#logoDiv  { /*holds the logo image*/
	width:185px;
	height:54px;
	float: left;
}

#topnav  { /*holds the top navigation images*/
	width:615px;
	height:54px;
	text-align:right;
	background-image:url(../images/background_topnav.jpg);
	background-repeat: no-repeat;
	float: right;
	background-color: #aea095;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

#wrapper  { /*holds sidebar, textarea and bottominfo divs*/
	width:105%;
	background-color:#FFFFFF;
	padding-bottom: 0px;
	min-height:500px;
}

#sidebar  { /*holds the side navigation and all other content on the left side*/
	width:185px;
	background-image:url(../images/background_sidebar.jpg);
	background-repeat: no-repeat;
	float:left;
	min-height:500px;
}

#sidenav  { /*holds the side navigation*/
	margin-top: 45px;
	margin-right: 10px;
	margin-bottom: 130px;
	margin-left: 22px;
	
}

/*these style all the paragraphs and links in the sidebar*/
#sidenav p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 85%;
	font-weight: bold;
	color: #6e2639;
	margin-top: 0px;
	margin-bottom: 12px;	
}

#sidenav a:link  {
	color:#6e2639;
	text-decoration:none;
}

#sidenav a:visited  {
	color:#6e2639;
	text-decoration:none;
}

#sidenav a:hover  {
	color:#FFFFFF;
	text-decoration:none;
}

.sidenavParaSelected  { /*use this when you are on a given page and want to highlight that nav item*/
	color:#FFFFFF;
}

#sidebarMessage  { /*this div is used for any additional text items you want in the sidebar, it should be preceded by a sidebar head image, like "Tasting Room" */
	background-color: #FFFFFF;
	background-image: url(../images/background_boxgradient.gif);
	background-repeat: no-repeat;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 22px;
	padding-top: 10px;
	
}

#textarea  { /*main text area, also holds the rightColumn*/
	width:570px; /* kayo had this set to 550px but I changed it to accommodate longer wine names */
	padding-top:45px;
	padding-left:65px;
	padding-right:0px;
	padding-bottom:0px;
	background-image:url(../images/background_textarea.jpg);
	background-repeat:no-repeat;
	margin-left: 185px;
	min-height:500px;
}

#rightColumn  {
	width:225px;
	float:right;
	margin-left:25px;
	margin-right:0px;
	margin-bottom: 20px;
	
}

#rightColumnMessage { /*use this to hold any text items in the right hand column, it should always
						be preceded by a right column head image or a picture*/
	padding-left:5px;
	padding-top:10px;
	padding-right:5px;
	padding-bottom:5px;
	background-image:url(../images/background_boxgradient.gif);
	background-repeat:no-repeat;
	background-color:#FFFFFF;
	
}

#rightColumnMessage p  {
	font-size:70%;	
}
#rightColumn  select  { 
	width: 225px;
}
#bigW  { /*this is an absolute positioned div that places the "big W" on the top
		page for "Welcome"*/
	position:absolute;
	left:219px;
	top:112px;
	z-index:100;
	width:35px;
	height:26px; 
}
#rightColumnSecond190 {
	width:190px;
	float:right;
	margin-left:25px;
	margin-right:0px;
	margin-bottom: 0px;	
}
#rightColumnSecond190 p.caption {
	font-size: 70%;
	color: #660033;
	margin-left: 0px;
	margin-top: -15px;
	width: 275px; 
}
#rightColumnSecond250  {
	width:250px;
	float:right;
	margin-left:25px;
	margin-right:0px;
	margin-bottom: 0px;	
}
#rightColumnSecond250 p.caption {
	font-size: 70%;
	color: #660033;
	margin-left: 0px;
	margin-top: -15px;
	width: 235px; 
}
#rightColumnSecond275  {
	width:275px;
	float:right;
	margin-left:25px;
	margin-right:0px;
	margin-bottom: 0px;	
}
#rightColumnSecond275 p.caption {
	font-size: 70%;
	color: #660033;
	margin-left: 0px;
	margin-top: -15px;
	width: 260px; 
}
#leftColumnSecond275  {
	width:275px;
	float:left;
	margin-left:0px;
	margin-right:15px;
	margin-bottom: 0px;	
}
#leftColumnSecond275 p.caption {
	font-size: 70%;
	color: #660033;
	margin-left: 0px;
	margin-top: -15px;
	width: 260px; 
}
#rightColumnSecondText  {
	width:275px;
	float:right;
	margin-left:0px;
	margin-right:0px;
	margin-bottom: 0px;	
}
#bottominfo  { /*holds the footer information along with the ECV stamp image*/
	width:105%;
	background-image:
	url(../images/background_bottominfo.gif);
	background-repeat:repeat-x;
	background-color:#b9ada2;
	padding-left:147px;
	margin-top: 0px;
	
}

#bottominfo p {
	font-size:65%;
	color:#FFFFFF;
	padding-top:40px;
		
}

#bottominfo a:link  {
	color:#FFFFFF;
	text-decoration:underline;
}

#bottominfo a:visited  {
	color:#FFFFFF;
	text-decoration:underline;
}

.ecvStamp { /*holds the ECV stamp image*/
	float:left;
	clear:both;
	
}

.clearit  { /*clears the sidebar and textarea from the bottominfo*/
	clear:both;
}
/*these style images in the textarea. You can either have a plain float left or right or you
can style a picture with a colored bar at the top. Just pick the appropriate color bar, Gr for green,
red for the burgundy color, and blue for the blue color*/


.sidebarPicture  { /*use this on pictures used in the sidebar. It will tuck them up under any
text and put a bit of space after them so they don't run into the ECV stamp at the bottom*/
	margin-top:-23px;
	margin-bottom: 0px;
	
} 
.iconFloatLeft {
	float:left;
	margin-left:0px;
	margin-right:5px;
	margin-top:0px;
	margin-bottom: 5px;
} 



.imageFloatRight  {
	float:right;
	margin-left:15px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:15px;
	
}

.imageFloatLeft  {
	float:left;
	margin-left:0px;
	margin-right:15px;
	margin-top:0px;
	margin-bottom:15px;
	
}

.imageFloatLeftGr  {
	float:left;
	margin-left:0px;
	margin-right:15px;
	margin-top:0px;
	margin-bottom:15px;
	border-top-width: 5px;
	border-top-style: solid;
	border-top-color: #3b4212;
}
.imageFloatRightGr  {
	float:right;
	margin-left:15px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:15px;
	border-top-width: 5px;
	border-top-style: solid;
	border-top-color: #3b4212;
	clear: right;
}
.imageNoFloatGr  { 
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:15px;
	border-top-width: 5px;
	border-top-style: solid;
	border-top-color: #3b4212;
}

.imageFloatLeftRed  {
	float:left;
	margin-left:0px;
	margin-right:15px;
	margin-top:0px;
	margin-bottom:15px;
	border-top-width: 5px;
	border-top-style: solid;
	border-top-color: #6e2639;
}
.imageFloatRightRed  {
	float:right;
	margin-left:15px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:15px;
	border-top-width: 5px;
	border-top-style: solid;
	border-top-color: #6e2639;
	clear: right;
}
.imageNoFloatRed  { 
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:15px;
	border-top-width: 5px;
	border-top-style: solid;
	border-top-color: #6e2639;
}
.imageFloatLeftBlue  {
	float:left;
	margin-left:0px;
	margin-right:15px;
	margin-top:0px;
	margin-bottom:15px;
	border-top-width: 5px;
	border-top-style: solid;
	border-top-color: #004467;
}
.imageFloatRightBlue  {
	float:right;
	margin-left:15px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:15px;
	border-top-width: 5px;
	border-top-style: solid;
	border-top-color: #004467;
	clear: right;
}
.imageNoFloatBlue  { 
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:15px;
	border-top-width: 5px;
	border-top-style: solid;
	border-top-color: #004467;
}

.label {
	vertical-align: middle;
	height: auto;
}
h1.winereviewshead {
	margin-top: 0px;
	padding-top: 0px;
	vertical-align: top;
	height: auto;
}


.rightColumnForm  { /*In Explorer 6 & 7 I couldn't put the form in a div and have the div background
show. Worked in Firefox. So instead I styled the form to act like a div that holds the drop down lists
in the Right Column. The background image is styled to the form. This works in all three browsers*/
	width: 215px;
	padding-left:0px; /* Andrea changed this from 5px to 0px to move the dropdown menu to the left */
	padding-top:10px;
	padding-right:10px; /* Andrea changed this from 5px to 10px to expand the background to the right after changing the padding-left to 0px; */
	padding-bottom:25px;
	background-image:url(../images/background_box_all-wines.gif);
	background-repeat:no-repeat;
	background-color:#FFFFFF;
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 80%;
	margin-left: 0px;
}
.formPara  { /*Since the form has to hold the background gradient image, the links 
for Ready-to-Print Fact Sheet and Back to Current Release have to live inside the form.*/
	margin-top:15px;
	font-weight:bold;
}
.label  { /*In order to have the label and the wine data sit on their own and not be encroached by
the Wine Reviews below, I needed to give them their own div to live in with top and bottom margins.*/
	margin-bottom: 20px;
	height: auto;
	margin-top: 20px;
}

.factSheetwinescore {  
	font-size: 130%;
	font-weight: bold;
	color:#6e2639;
} 
.factSheetpubTitle {
	font-style: italic;
}
.factSheetPara {
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 15px;
	margin-left: 0px;
}
.factSheetDataHead {
	font-weight: bold;
	color:#6e2639;
	font-size: 80%;
	margin: 0px;
	padding: 0px;
}
.factSheetEnoPara { 
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 25px;
	margin-left: 0px;
}
.factSheetData {
	font-weight: bold;
}
.factSheetAward {
	font-weight: normal;
	font-style: italic;
}
.ReviewWineScore {
	font-weight: bold;
}
.ReviewAward {
	font-weight: bold;
	font-style: italic;
}
.ReviewPubSection {
	font-style: italic;
}
.ReviewPubTitle {
	font-style: italic;
}
.ReviewVintage {
	font-weight: bold;
}

.ReviewAVA {
	font-weight: bold;
}
.ReviewAVAheading {
	margin-top: 15px;
}
.peoplepara {
	padding: 0px;
	margin-top: -10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.peoplename {
	font-weight: bold;
}
.diststate {
	font-weight: bold;
	padding: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.distributor {
	margin: 0px;
	padding: 0px;
}
.orderHeadings {
 font-size: 9pt;
 font-weight: normal;
 font-style: italic;
 color: #6e2639;
 }
td h1 {
	margin-bottom: 0px;
	margin-top:0px;
	padding-bottom: 5px;
} 

@media print { 
#wrapper   {
	width: 7.5in; 
	margin-top: 0px;
	padding: 0;
	border: 0;
	float: none !important;
	color: black; 
	background: transparent;
	}
#textarea {  
	width: 7in; 
	margin-left: 1px;
	margin-right: 1in;
	padding: 0;
	border: 0;  
	} 
#topnav, #bylineDiv  {
	display: none;	
 } 
 #sidebar  {
	display: none;
}
#bottominfo {
	margin-left: 1px;
	margin-right: 1in;
	padding: 0;
	border: 0;  
}

img.ecvStamp {
	display: none;
}

}