/*
 *  Ahold Coffe Company 2006 - general design
 *  
 *  TOC
 *  - General elements
 *  - Framework/container for the whole page. Adds the dropshadow
 *  - Horizontal moodvisualsbar
 *  - Lower frame/container for just the content
 *  - Left column styling 
 *  - Subnavigation (English, Vacatures, Contact, Routebeschrijving)
 *  - Content 
 *  - Facts & Figures
 *  - Contact form 
 *  - Footer and lower left visual 
 */

 /* General elements */
body{ margin: 0; padding: 0; background: #fff; color: #531700; font: 70%/1.4em Arial, Helvetica, sans-serif; }
h1 { margin-top: 2px; padding: 0; font-family: "Trebuchet MS", sans-serif; color: #531700; line-height: 1em; }
h2 { margin-top: 10px; padding: 0; font-family: "Arial", sans-serif; color: #008348; line-height: 1em; font-size: 1.6em; }
h3 { margin-top: 10px; padding: 0; font-family: "Arial", sans-serif; color: #E5A304; line-height: 1em; font-size: 1.3em; }
h4 { margin: 10px 0 4px 0; padding: 0; font-family: "Arial", sans-serif; color: #531700; line-height: 1em; font-size: 1.2em;}
a { color: #008348; }
img {	margin: 0; padding: 0; border: 0; }
ul { margin: 10px; padding: 0; list-style: none; }
li { padding-left: 15px; font-size: 1.1em; background: url(bullet_green.gif) 0 0.45em no-repeat; }
table { }
th, td { padding: 9px 34px 9px 11px; text-align: left; font-size: 1.1em; border: 1px solid #fff;}
td { background-color: #F5F3F2; }
tr.primary td, tr.primary th { background-color: #F5F3F2; }
tr.secondary td, tr.secondary th { background-color: #FAFAFA; }
dl { font-size: 1.1em; }
strong.brown { color: #4D0D00; background-color: #fff; }
label { font-size: 1.1em; }


div.content p.feedback { padding: 10px; font-weight: bold; color: #008348; background-color: #F5F3F2; }
.clear { clear: both; }
div.space { height: 1em; clear: both;}
div.content div.download { margin: 2px; padding: 4px; background-color: #F5F3F2; min-height: 46px; _height: 46px; }
div.content div.download:after { height:1%; contet: "."; clear: both; display: block; }
div.content div.download a { font-weight: bold; font-size: 1.1em;}
div.content div.download img { float: left; border: 1px solid #E5DEDB;}
div.content div.download p { margin: 0; padding: 0; }
button.verstuur { display: block; width: 76px; height: 19px; text-indent: -999em; border: 1px solid #5A9A0E; background: url(button_verstuur.gif) no-repeat; cursor: pointer;}


/* Framework/container for the whole page. Adds the dropshadow */
#shadowFrame { width: 782px; margin: auto; }

/* Header with navigation bar */
#navigation { position: relative; width: 754px; margin: 0 auto; height: 69px; }
.logo { position: absolute; top: 25px; left: 15px; display: block; float: left; width: 186px; height: 53px; text-indent: -999em; background: url(ahold_logo.png) no-repeat; }
* html .logo { /* for IE/Win */ background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../ui/presentation/ahold_logo.png', sizingMethod='image'); } 
#navigation ul { float: right; border-top: 3px solid #008348; height: 22px; width: 538px; margin: 44px 0 0 0; padding: 0; }
#navigation ul li { display: inline; list-style: none; margin: 0 10px 0 0; padding: 0; background: none; font-size: 1em;}
#navigation ul li a { margin: 0; padding: 3px 0 6px 14px; background: url(arrow_brown_right.gif) 0 0.5em no-repeat; color: #000; text-decoration: none; }
#navigation ul li a:hover { background-color: #f6e0ab; }
#navigation ul li a span { margin: 0; padding: 0; line-height: 1.8em;}

/* Horizontal moodvisualsbar */
.moodVisual { clear: both; height: 38px; background-color: #e6a303; }
#koffiebonen {	background: #e6a303 url(koffiebonen.jpg) center no-repeat; }
#koffieplanten {	background: #e6a303 url(koffieplanten.jpg) center no-repeat; }
#koffieplanten2 {	background: #e6a303 url(koffieplanten2.jpg) center no-repeat; }

/* Lower frame/container for just the content */
.framework { position: relative; width: 754px; margin: 0 auto; padding: 0 16px; background: url(bg.gif) top center repeat-y; }
.framework:after { content: " "; display: block; clear: both; }

/* Left column styling */
#leftColumn { float: left; width: 212px; margin: 0; padding: 0; color: #23150A; }
#leftColumn h1 { margin: 18px 14px 0 18px; font-size: 1.3em; }
#leftColumn a { text-decoration: none; }
#leftNavigationTop { margin: 3px 14px 0 18px; padding: 0 0 14px 0; border-bottom: 3px solid #008348; }
#leftNavigationTop li { padding: 0; list-style: none; background: none; }
#leftNavigationTop li a { padding-left: 14px; line-height: 1.8em; font-size: 1.2em; background: url(arrow_green_right.gif) 0 4px no-repeat;}
#leftNavigationTop li a:hover { color: #e6a303; }
.highlighted {	color: #e6a303; }

/* Subnavigation (English, Vacatures, Contact, Routebeschrijving) */
#navigationFooter { margin: 14px 14px 0 18px; padding: 0; font-family: "Trebuchet MS"; }
#navigationFooter li { margin: 6px 0; padding: 0; list-style: none; background: none;}
#navigationFooter li a { display: block; margin: 0; height: 16px; width: 88px; text-decoration: none; color: #531700; padding: 0; margin: 0; text-indent: -999em; }
#navDutch { background: url(nav_dutch.gif) no-repeat; }
#navEnglish { background: url(nav_english.gif) no-repeat; }
#navVacatures { background: url(nav_vacatures.gif) no-repeat; }
#navVacaturesEn { background: url(nav_vacatures_en.gif) no-repeat; }
#navContact { background: url(nav_contact.gif) no-repeat; }
#navRoutebeschrijving { background: url(nav_routebeschrijving.gif) no-repeat; }
#navRoutebeschrijvingEn { background: url(nav_routebeschrijving_en.gif) no-repeat; }
#navHome { background: url(nav_home.gif) no-repeat; }

/* Content */
#contentHolder { float: right; width: 540px; min-height: 650px; _height: 650px; margin: 0; border-left: 2px solid #faedcd; }
div.content { width: 502px; margin: 26px auto; }
div.content h1 { font-size: 2.5em; }
div.content h3 { margin: 6px 3px 3px 0; padding: 0; display: block; }
div.content p { font-size: 1.1em; margin: 0 0 1.1em 0; padding: 0; }
div.content p:after { content: " "; display: block; clear: both; }
div.content img { border: 1px solid #000; float: left; margin: 0 12px 0 0; padding: 0; }

/* Products page */
ul#productCategories { margin: 0; padding: 0; list-style: none; }
ul#productCategories li { display: inline; padding: 0 7px; background: none; border-right: 1px solid #531700;}
ul#productCategories li.first { padding-left: 0;}
ul#productCategories li.last { border: none;}
ul.products { margin: 0; padding: 0; list-style: none; }
ul.products li { margin: 5px 8px 0 0; padding: 0; float: left; text-align: center; background: none; background-color: #F5F3F2; }
ul.products li div { padding-bottom: 5px; display: block; width: 92px; height: 194px; color: #948780;  font-size: 0.8em; text-decoration: none; }
ul.products li div img { margin: 0 0 5px 0; display: block; border: none; float: none; border-bottom: 2px solid #E5A304; }
ul.products li div span { display: block; color: #531700; font-size: 1.1em; text-decoration: underline; }

/* Facts & figures */
table#facts tbody tr td { }
table#facts thead tr th { border-bottom: 2px solid #E5A304; }

/* Contact form */
#contactFormFields { margin: 0; padding: 0; width: 316px;}
#contactFormFields li { margin: 0; padding: 0; list-style: none; background: none; }
#contactFormFields li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#contactFormFields li:after {display: inline-table;}
/* Hides from IE-mac \*/
* html #contactFormFields li:after {height: 1%;}
#contactFormFields li:after {display: block;}
/* End hide from IE-mac */

#contactFormFields li { margin: 0; padding: 0; height: 28px; }
#contactFormFields li#opmerkingenHolder { height: 160px; }
#contactFormFields li#opmerkingenHolder textarea { margin-top: 4px; display: block; clear: both; width: 312px; height: 130px; border: 1px solid #5A9A0E; }
#contactFormFields li label { float: left; margin-top: 6px;  font-size: 1em; }
#contactFormFields li input { float: right; margin-top: 6px; }
#contactFormFields li input.inputText { margin: 0; padding: 0; height: 20px; border: 1px solid #5A9A0E; }

/* Vacatures */
dl.vacature_list { margin: 0 0 1.2em 0; padding: 0; }
dl.vacature_list:after { content: " "; display: block; clear: both; }
dl.vacature_list dt { float: left; }
dl.vacature_list dd { padding-left: 100px;}

/* Footer and lower left visual */
#moodVisualLowerLeft { position: absolute; bottom: 0; float: left; clear: left; display: block; margin: 0; padding: 0; width: 212px; height: 283px; background: url(visual_left.jpg) bottom left no-repeat; }
#footer { margin: 0; padding: 0; height: 40px; background: url(bottom_shadow.gif) top center no-repeat; }