/* BASIC ELEMENTS
------------------------------------------------------------------------------------- */
* { margin: 0; padding: 0; }
html { min-height: 100%; margin-bottom: 1px; }

body { margin: 0;  font: 12px arial, helvetica, sans-serif; color: #000; line-height: 1.5; }
table, th, td { font: 11px trebuchet ms, arial, helvetica, sans-serif; color: #000; }

p	{ padding: 3px 0; }

h1	{ color: #410A12; font-size: 16px;  clear: left; }
h2	{ color: #410A12; font-size: 14px; }
h3	{ margin-top: 10px; color: #000; font-size: 12px; }

a img, :link img, :visited img { border: none; }

a:link { color: #339; text-decoration: underline; }
a:visited { color: #339; text-decoration: underline; }
a:hover, a:active { color: #339; text-decoration: none; }

hr		{ height: 1px; margin: 5px 0 10px 0; border-bottom: 1px dashed #cccccc; }

#content ul, #content li		{ margin-left: 20px; }

blockquote		{ margin: 20px 0 20px 20px; padding: 10px; background: #FDF9F4; border: 1px solid #F0D8BD; }

input, textarea	{ border: 1px solid #333; background: #f6f6f6; }
	input.radio, input.checkbox  { border-width: 0; background: #fff; }	


*	{ margin:0px; padding:0px; }

body		{ background: #efefef url(../images/bg.gif) repeat-x;  padding: 20px; }
#container	{ width: 800px; margin: 0; padding: 0; background: #fff url(../images/container_bg.jpg) repeat-y; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-left: 1px solid #fff; }
#header 	{ position: relative; height: 144px; width: 800px; margin: -1px; padding: 0; background: #fff; border-right: 1px solid #ccc;}
	#header-img { float: left; margin-left: -3px; }

/* SUBNAV */
#subnav		{ float: left; margin: 30px 0; padding: 0; height: 250px; width: 150px; background: url(../images/subnav_bg.jpg); }
	#subnav ul	{ width: 120px; margin-top: 7px; padding: 0; }
	#subnav li	{ margin-left: 10px; margin-top: 10px; line-height: 15px; list-style: none; font-size: 10px; font-family: verdana; text-align: left; }
	#subnav li a	{ color: #871628; text-decoration: none;  }
	#subnav li div	{ color: #666;  }
	#subnav ul ul 	{ margin: 0 0 0 5px; }	
	#subnav ul ul li	{ line-height: 10px; } 

/* NAVIGATION */
#nav { height: 36px; width: 800px; padding: 0; margin: 0; float: left; background: #bfbfbf; }
#nav li { height: 36px; float: left; margin: 0; position: relative; line-height: 36px; list-style: none; font-weight: bold; }
#nav li a { cursor: pointer; }
#nav li a, #nav li div { position: relative; display: block; height: 36px; text-decoration: none; color: #fff;}
#nav li strong {
	position: absolute;
	top: 2px;
	left: 1px;
	display: block;
	height: 36px;
}
#nav li, #nav li a, #nav li strong, #nav li div { background: #efefef;  }

#nav li.events, #nav li.events a, #nav li.events a strong { background: url(../images/nav_bg.jpg); background-position: 0px 0px; width: 160px; }
#nav li.sponsors, #nav li.sponsors a, #nav li.sponsors a strong { background: url(../images/nav_bg.jpg); background-position: -160px 0px; width: 160px; }
#nav li.beneficiaries, #nav li.beneficiaries a, #nav li.beneficiaries a strong { background: url(../images/nav_bg.jpg); background-position: -320px 0px; width: 160px; }
#nav li.media, #nav li.media a, #nav li.media a strong { background: url(../images/nav_bg.jpg); background-position: -480px 0px; width: 160px; }
#nav li.about, #nav li.about a, #nav li.about a strong { background: url(../images/nav_bg.jpg); background-position: -640px 0px; width: 160px; }


/*HOVER STATE*/
#nav li.events a:hover, #nav li.events a:hover strong { background-position: 0px -36px; width: 160px; }
#nav li.sponsors a:hover, #nav li.sponsors a:hover strong { background-position: -160px -36px; width: 160px; }
#nav li.beneficiaries a:hover, #nav li.beneficiaries a:hover strong { background-position: -320px -36px; width: 160px; }
#nav li.media a:hover, #nav li.media a:hover strong { background-position: -480px -36px; width: 160px; }
#nav li.about a:hover, #nav li.about a:hover strong { background-position: -640px -36px; width: 160px; }

#nav li.on	{ background: url(../images/nav_bg.jpg); background-position: -640px -36px; width: 160px;  }



/*ON STATE*/
#nav li.eventson, #nav li.eventson a, #nav li.eventson a strong { background: url(../images/nav_bg.jpg) 0px -36px; width: 160px; }
#nav li.sponsorson, #nav li.sponsorson a, #nav li.sponsorson a strong { background: url(../images/nav_bg.jpg) -160px -36px; width: 160px; }
#nav li.beneficiarieson, #nav li.beneficiarieson a, #nav li.beneficiarieson a strong { background: url(../images/nav_bg.jpg) -320px -36px; width: 160px; }
#nav li.mediaon, #nav li.mediaon a, #nav li.mediaon a strong  { background: url(../images/nav_bg.jpg) -480px -36px; width: 160px; }
#nav li.abouton, #nav li.abouton a, #nav li.abouton a strong  { background: url(../images/nav_bg.jpg) -640px -36px; width: 160px; }

/*lists nested under hovered list items */
#nav li ul { display: none; position: absolute; top: 36px; left: 0px; z-index: 500; }
#nav li > ul { top: 36px; left: 0px; z-index: 500; } /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */

#nav li:hover ul, #nav li.over ul { margin-left: 0px; padding: 0px; display: block; width: 160px; opacity: 1.; filter: alpha(opacity=100); font-weight: bold; }

#nav li li { height: 26px; width: 160px; line-height: normal; background-image: none; background-color: #999; border-bottom: 1px solid #efefef; font-family: verdana; font-weight: normal;}
#nav li li a { padding: 3px 10px 4px; display: block; width: 160px; height: 100%; text-decoration: none; font-size: 11px; }
* html #nav li li a { width: 180px; w\idth: 170px;}

#nav li li a:hover { color: #fff; background: #666; }

#nav li.events li #nav li.events li, #nav li.events li a , #nav li.events li a strong, #nav li.eventson li #nav li.eventson li, #nav li.eventson li a , #nav li.eventson li a strong  { background-image: none; }
#nav li.sponsors li #nav li.sponsors li, #nav li.sponsors li a , #nav li.sponsors li a strong { background-image: none; }
#nav li.beneficiaries li #nav li.beneficiaries li, #nav li.beneficiaries li a , #nav li.beneficiaries li a strong { background-image: none; }
#nav li.media li #nav li.media li, #nav li.media li a , #nav li.media li a strong { background-image: none; }
#nav li.about li #nav li.about li, #nav li.about li a , #nav li.about li a strong, #nav li.abouton li #nav li.abouton li, #nav li.abouton li a , #nav li.abouton li a strong  { background-image: none; }

#nav li.events li a, #nav li.events li a:hover, #nav li.eventson li a, #nav li.eventson li a:hover, 
#nav li.media li a, #nav li.media li a:hover, #nav li.mediaon li a, #nav li.mediaon li a:hover,
#nav li.sponsors li a, #nav li.sponsors li a:hover, #nav li.sponsorson li a, #nav li.sponsorson li a:hover,
#nav li.about li a, #nav li.about li a:hover, #nav li.abouton li a, #nav li.abouton li a:hover { width: 160px; }

#text-nav	{ clear: both; width: 760px; padding: 50px 10px 10px 10px; margin: 10px; font-size: 9px; font-family: verdana; font-size: 9px; text-align: center; }	

#sidebar	{ float: right; width: 160px; padding: 0; margin: 30px 0; }

#main			{ float: left; width: 475px;}/* my own note - in FF, this makes main and div the same size.  In IE this adds the padding.*/
	#main div	{ width: 445px; margin: 0; padding: 20px 0 0 20px; font-family: verdana; font-size: 11px; text-align: left;  }


/* on all pages */
#social	{ float: right; text-align: right; width: 150px; padding: 10px; }
	
/* section specific styles */
#home #container	{ background-image: none; }
#home #main			{ width: 632px; }
	#home #main div	{ width: 602px; }

#home blockquote	{ width: 44%; float: right; margin: 10px 5px 10px 5px; background: #fff; border: 0px; }
	#home blockquote hr		{ border: 0px; border-bottom: 1px dashed #919B83; }

#s_about .sidebar-img	{ border: 1px solid #ccbe5d; border-width: 1px 0 7px 0; }
#s_events .sidebar-img	{ border: 1px solid #7cbc65; border-width: 1px 0 7px 0; }
#s_sponsors .sidebar-img	{ border: 1px solid #707793; border-width: 1px 0 7px 0; }
#s_beneficiaries .sidebar-img	{ border: 1px solid #7e5b59; border-width: 1px 0 7px 0; }
#s_media .sidebar-img	{ border: 1px solid #ca9f5a; border-width: 1px 0 7px 0; }

#h_news			{ float: left; width: 250px; margin: 10px; padding: 5px; background: #fff; border: 1px solid #5A0411; font-size: 10px; }
	#h_news b	{ border-bottom: 1px solid #000; font-size: 11px; }
	#h_news p	{ padding: 10px 0; border-bottom: 1px dashed #000; }

.col			{ width: 240px; padding: 20px; float: left; text-align: left; }

#chefs, #wineries		{ margin-left: 10px; }
	#chefs img, #wineries img, #auction img	{ margin-right: 20px; }
	#chefs p, #wineries div	{ float: left; border-bottom: 1px solid #ccc; height: 100px; width: 180px; margin: 5px 25px 5px 0; padding: 5px; background: #f6f6f6;  opacity: .85; filter: alpha(opacity=85);}
	.auction_items p, .auction_items div	{ float: left; border-bottom: 1px solid #ccc; height: auto; width: 375px; margin: 5px 25px 5px 0; padding: 5px; background: #f6f6f6;  opacity: .85; filter: alpha(opacity=85);}
	.auction_items h2, .auction_items h3	{ flost: left; clear: both; }
	#chefs p img, #wineries div img, .auction_items p img, .auction_items div img	{ float: right; margin: 0; }	

.caption	{ color: #666; font-size: 9px; }	

.caption1		{ float: left; margin: 10px 20px; font-size: 10px; color: #3c62a2;  }
.caption2		{ float: right; margin: 10px 20px; font-size: 10px; color: #3c62a2;  }
	 img.caption1, img.caption2 	{ border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; }

#donate		{ float: right; margin: 8px 10px; }

#photo		{ width: 500px; margin: 10px 0 10px 20px; padding: 5px; background: #52151D; }
	#photo input	{ margin: 0 30px; background: #52151D; border: 0px; color: #fff; }
	

		
/*lightbox styles*/		
#lightbox		{ position: absolute; top: 20px; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; color:#151410; }

#lightbox a, #lightbox a:hover	{ border-bottom:none; color:#151410; text-decoration:underline; }

#lightbox a img	{ border: none; }

#outerImageContainer	{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }

#imageContainer	{ padding: 10px; }

#loading		{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }

#loadingLink 	{ display:block; margin:0 auto; padding:0; width:32px; height:32px; background:url(../images/lb_loading.gif) center center no-repeat; text-indent:-9999px; }

#hoverNav		{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav	{ left: 0;}
#hoverNav a		{ outline: none;}

#prevLinkImg, #nextLinkImg { width: 49%; height: 100%; background: transparent url(../images/lb_blank.gif) no-repeat; /* Trick IE into showing hover */ display: block; text-indent:-9999px; }
#prevLinkImg 	{ left: 0; float: left;}
#nextLinkImg 	{ right: 0; float: right;}
#prevLinkImg:hover, #prevLinkImg:visited:hover { background: url(../images/lb_prevlabel.gif) left 15% no-repeat; }
#nextLinkImg:hover, #nextLinkImg:visited:hover { background: url(../images/lb_nextlabel.gif) right 15% no-repeat; }


#imageDataContainer	{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; }

#imageData		{ padding:0 10px; }
#imageDetails	{ width: 70%; float: left; text-align: left; }	
#caption		{ font-weight: bold;	}
#numberDisplay	{ display: block; clear: left; }			
#detailsNav		{ display: block; clear: left; padding:0 0 10px 0;	}	
#prevLinkDetails { margin:0 8px 0 0; }		
#nextLinkDetails { margin:0 8px 0 0; }		
#closeLink 		{ display:block; margin:0; padding:0 0 10px 0; text-decoration:none; float:right; width:66px; height:28px; background:url(../images/lb_closelabel.gif) no-repeat; text-indent:-9999px; overflow:hidden; }	
		
#overlay		{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #151410; filter:alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; }
	
.clearfix:after { content: ".";  display: block;  height: 0; clear: both;  visibility: hidden; }

* html>body .clearfix { display: inline-block; width: 100%; }

* html .clearfix 	{ /* Hides from IE-mac \*/ height: 1%; /* End hide from IE-mac */}	
