/*  
Cascading Style Sheet for
LA COSECHA COFFEE COMPANY
main.css
*************************
*/

/*--Zero Out then customize header margins (spacing)-------------------------------*/
	h1, h2, h3, p {margin: 0; padding: 0;}
	h1 {margin-top: 2em; margin-bottom: 1em;}
	h2 {margin-bottom: 1em;}
	h3 {margin-bottom: 0;}
	p {margin-bottom: 1em;}
	img {border: none;
	}

/*------Structure------------------------------------------------------------------*/
body {
	margin: 0 auto; 
	padding: 0;
	font: 62.5% "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	background: #ccb684 url(images/bg_top.jpg) repeat-x; 
	}
	
#container {
	width: 760px;
	text-align: left;
	margin: 60px auto 0 auto;
	padding: 0;
	}
	
#branding {
	position: relative;
	}

#branding img {
	position: absolute;
	left: 0;
	top: -45px;
	z-index: 100;
	}

/*------ NAVIGATION------------------------------------------------------------------*/

#navbar {
	text-align: right;
	margin: 0 0 30px 0;
	padding: 0;
	list-style-type: none;
	}
	
#navbar li {
	display: inline;
	}
	
#navbar li a {
	font: 1.7em Georgia, Georgia, "Times New Roman", Times, serif;
	color: #e0c497;
	padding: 0 .6em; 
	border-bottom: none;
	border-right: 1px #e0c497 solid;
	text-decoration: none;
	}

#navbar a:hover, a:active {
	color: #fff;
	}
	
#navbar #dealers a {
	border-right: none;
	padding: 0 0 0 .8em;
	}
	
#navbar li a.active { /* add bracket characters to active/current page link */
	font-weight: normal;
	color: #fff;
	}	

/*------------------------------ STRUCTURE AND CONTENT ---------------------------------------------*/

#content {
	width: 760px;
	background: #fff url(images/content_bg.gif) repeat-y;
	text-align: left;
	position: relative;
	margin: 0 auto;
	}

#content h2 {
	color: #96030b;
	font: bold 2.4em Georgia, Arial, Helvetica, verdana, sans-serif;
	font-variant: small-caps;
	margin: 14px 20px;
	padding: 0;
	border-bottom: 1px #421d1c dotted;
	}
	
#content h3 {
    color: #96030B;
    font: 16px "lucida grande", verdana, Arial, Helvetica, sans-serif;
    margin: 14px 20px 6px;
    padding: 0;
}

#content h4 {
    color: #96030B;
    font: 14px "lucida grande", verdana, Arial, Helvetica, sans-serif;
    margin: 14px 20px 5px;
    padding: 0;
}

* html #content h2 {
	border-bottom: 1px #421d1c solid; /*star HTML hack to feed IE an underline*/
	}
		
#content p {
	font: 13px/1.6em "lucida grande", verdana, Arial, Helvetica, sans-serif;
	color: #421d1c;
	}
	
#content .topimg {
	position: relative;
	z-index: 1;
	}

#content_main {
	width: 520px;
	margin: 0;
	padding: 0;
	float: right;
	}	
	
#index #content_main, #about content_main {
	background: url(images/coffee_stain.gif) right top no-repeat;
	}	
	
#dealers #content_main {
	background: url(images/coffee_stain.gif) right bottom no-repeat;
	}	
	
#contact #content_main {
	background: none;
	}	
	
#content_main p {
	margin: 0 20px 10px 20px;
	padding: 0;
	}	
	
#offerings .opening_para {
	margin: 14px 20px 10px 20px;
	padding: 0 0 10px 0;
	font-style: italic;
	line-height: 1.5em;
	border-bottom: 1px #421d1c dotted;
	}	
	
#offerings .opening_para img, #harvest .opening_para img, #process .opening_para img, #fair .opening_para img {
	float: left;
	margin: 0 10px 0 0;
	background-color: #fff;
	padding: 4px;
	border: 1px #bbb solid;
	}	
		
#about .portrait { 
	margin: 2px 20px 10px 20px;
	background-color: #fff;
	padding: 4px;
	border: 1px #bbb solid;
	}
	
/*---------------- PANEL LAYOUT -----------------------------------------------------------*/

#content_main dl {
	float: left;
	width: 478px; /*width fix for IE/Mac  may not be necessary if causes problems */
	margin: 10px 20px 5px;
	padding: 0;
	display: inline;
	background:#fffbe9 url(images/panel_grad4.gif) repeat-x;
	border: 1px #e0c497 solid;
	color: #421d1c;
	}
	
#index #content_main dt {
	float: right;
	width: 310px;
	margin: 0;
	padding: 10px 0 4px 0;
	}
	
#content_main dt {
	font: bold 14px "lucida grande", verdana, Arial, Helvetica, sans-serif;
	color: #421d1c;
	float: right;
	width: 380px;
	margin: 0;
	padding: 10px 0 4px 0;
	}
	
#content_main dd {
	margin: 0;
	padding: 0 7px 0 0;
	line-height: 1.5em;
	}
	
#content_main .title {
	font-weight: normal;
	}
	
#content_main .img {
	float: left;
	margin: 0 8px 0 0;
	padding: 4px;
	border: 1px solid #d9e0e6;
	border-bottom-color: #c8cdd2;
	border-right-color: #c8cdd2;
	background: #fff;
	}
	
/*-------------------- DEALER PAGE ---------------------------------------------------*/

#content .dealer_info p {line-height:1.4em;}

.dealer_info  {margin-bottom:25px;}
		
.dealername {
	font: bold 16px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	margin: 13px 0 0 0;
	color: #96030b;
	}
	
/*-------------------- OFFERINGS PAGE ---------------------------------------------------*/
	
	#offerings #content  {
  	width: 760px;
	background: #fff;
	text-align: left;
	position: relative;
	margin: 0 auto;
	}

#offerings #content_main  {
    background: url("images/coffee_stain.gif") no-repeat scroll right top transparent;
    float: right;
    margin: 0;
    padding: 0;
    width: 760px;
}
#offerings #content_main h4 {
	margin: 20px 20px 2px 20px;
	padding: 0;
	color: #421d1c;
	font: bold 1.7em "lucida grande", verdana, Arial, Helvetica, sans-serif;
	font-variant: small-caps;
	}


/*-------------------- LINKS PAGE ---------------------------------------------------------*/

#links #link_list {
	list-style-type: none;
	padding: 0;
	margin: 0 20px;
	}
	
#links #content_main li .link_logo {
	float: left;
	margin: 0 12px 10px 0;
	}

#links .linkdesc {
	float: left;
	}
		
#links #link_list p {
	margin: 0;
	padding: 0 0 20px 0;
	}
	
#links #link_list li {
	margin: 26px 0;
	border-bottom: 1px #ccc2b9 solid;
	overflow: hidden;
	height: 1%;
	}

/*-------------------- LINKS ---------------------------------------------------------*/

a:link, a:visited {
	color: #6c2f2e;
	text-decoration: underline;
	
	}
a:hover {
	text-decoration: none;
	color: #96030b;
	}

#content_main .external {
	background:url(images/external.gif) no-repeat right top;
	padding-right: 12px;
	}
	
/*-------------------- SIDEBAR ---------------------------------------------------*/

#content_sub {
	width: 240px;
	margin: 0 0 10px 0;
	padding: 0;
	float: left;
	}
	
#index #content_sub {
	width: 240px;
	margin: 70px 0 10px 0;
	padding: 0;
	float: left;
	}	

#content_sub p {
	margin: 0 20px;
	background-color: #e0c497;
	border: 2px red solid;
	}	

#content_sub dl {
	width: 198px; /*width fix for IE/Mac  may not be necessary if causes problems */
	margin: 20px 20px;
	padding: 12px 0 0 0;
	background: #fffbe9 url(images/panel_top.gif) no-repeat left top;
	color: #421d1c;
	}
	
#content_sub h3 {
	margin: 0 14px 0 14px;
	padding: 0 0 4px 0;
	font: bold 16px Georgia, "Times New Roman", Times, serif;
	color: #96030b;
	}
	
#content_sub dd {
	margin: 0;
	padding: 0 14px 20px 14px;
	font-size: 12px;
	line-height: 1.6em;
	background: #fffbe9 url(images/panel_bottom.gif) no-repeat left bottom;
	}
	
#content_sub blockquote p {
	font-variant: small-caps;
	font-family: Georgia, serif;
	color: #ccb684;
	font-size: 1.3em;
	line-height: 1.7em;
	margin: 20px 0;
	padding: 0;
	background: url(images/openquote.gif) no-repeat 0 -2px;
	text-indent: 30px;
	border: none;
	}
	
#content_sub blockquote cite {
	font-variant: normal;
	font-size: .9em;
	}
		
/*-------------------- FOOTER ---------------------------------------------------*/

#sub_navbar {
	text-align: center;
	margin: 0;
	padding: 24px 0 2px 0;
	list-style-type: none;
	}
	
#sub_navbar li {
	display: inline;
	}
	
#sub_navbar li a {
	font: 13px "lucida grande", Arial, verdana, Helvetica, sans-serif;
	color: #826f54;
	padding: 0 8px; 
	border-bottom: none;
	border-right: 1px #3f352a solid;
	text-decoration: none;
	font-weight: normal;
	}

#sub_navbar a:hover, a:active {
	color: #fff;
	}
	
#sub_navbar #contact a {
	border-right: none;
	padding: 0 0 0 .8em;
	}
	
#sub_navbar li a.active {
	color: #fff;
	}	
	
#footer {
	clear: both;
	background: url(images/footer.jpg) repeat-x top left;
	height:92px;
	}
	
#footer p {
	margin: 8px 0 0 0;
	padding: 0;
	color: #826f54;
	font-size: 10px;
	text-align: center;
	}
	
#footer a, #footer p a {
	text-decoration: none;
	color: #826f54;
	border: none;
	}
	
#footer p a:hover {
	color: #e0c497;
	}
	
.floatleft {
	float:left;
	margin-right:12px;
}

.borderedbox {
	margin: 10px 20px 5px;
	padding: 0;
	background:#fffbe9 url(images/panel_grad4.gif) repeat-x;
	border: 1px #e0c497 solid;
	color: #421d1c;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	}
	
.borderedbox img {
	padding: 6px;
	background:#fff;
	border: 1px #e0c497 solid;
	}
	
#content_main .borderedbox p {padding-top:12px;}
	
	/* For modern browsers */
.clearfloat:before,
.clearfloat:after {
    content:"";
    display:table;
}

.clearfloat:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.clearfloat {
    zoom:1;
}