/* ==========================================================
Master Stylesheet

website:   www.atelier-du-cafe.com
version:   PURE V1.0	
updated:   December 3 2009
author:    Duncan Marshall
email:     dm@chromadesign.co.uk
url:       http://www.chromadesign.co.uk

============================================================ */

/* Reset and General Architecture */
blockquote,body,caption,div,dl,dt,dd,form,fieldset,h1,h2,h3,h4,h5,h6,html,li,ul,ol,p,pre,textarea,table,td,th {margin:0; padding:0;}
a{outline: none; text-decoration: none;}
a IMG{border: none;}
html{height: 101%;}
ul{list-style-type: none; margin: 0px 0px 24px 0px;}
ul#navigation span, h1 span, .wrp span{position: relative; left: -5000px;}
.clearfix:after{content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
body{color: #000; background-position: top center; background-repeat: repeat-y; font-family: "Lucida Grande", "Lucida Sans Unicode", helvetica, arial, sans-serif; color: #fff; font-size: 12px; line-height: 24px; text-align: center; }


/* Section body background colours and images */
body#welcome{background-color: #3c4029; /*background-image: url(../i/str/bd_welcome.jpg);*/}
body#thecoffee{background-color: #2b3536; /*background-image: url(../i/str/bd_coffee.jpg);*/}
body#theatelier{background-color: #292021; /*background-image: url(../i/str/bd_atelier.jpg);*/}
body#thedetails{background-color: #938f0a; /*background-image: url(../i/str/bd_details.jpg);*/}


/* Header panels - Header contains main navigation too */
#header{width: 960px; height: 85px; background: top left repeat;}
body#welcome #header{background: url(../i/str/hd_welcome.jpg);}
body#thecoffee #header{background: url(../i/str/hd_coffee.jpg);}
body#theatelier #header{background: url(../i/str/hd_atelier.jpg);}
body#thedetails #header{background: url(../i/str/hd_details.jpg);}
#logo{width: 165px; height: 177px; position: absolute; top: 3px; left: 7px; z-index: 999;}


/* Language Links */
ul#language{position: absolute; top: 5px; left: 896px; width: 64px; height: 20px; font-family: verdana, Arial, Helvetica, sans-serif;}
ul#language li{float: left; width: 25px; margin-left: 2px;}
ul#language li a, a:link a:visited a:active{display: block; width: 25px; height: 15px; color: gray; font-size: 11px; line-height: 10px;}
body#thedetails ul#language li a, a:link a:visited a:active{color: #333333;}
ul#language li a:hover, ul#language li a.crt{border-bottom: 1px solid gray; color: #fff;}
body#thedetails ul#language li a:hover, ul#language li a.crt{border-bottom: 1px solid #333333; color: #fff;}


/* Page Content - Main Image, Intro, etc */
#content{position: relative; width: 960px; min-height: 440px; height: auto; margin: auto; background-position: 12px 97px; background-repeat: no-repeat; z-index: 10;}
body#welcome #content{background: #474721 url(../i/str/bags4.jpg) 12px 97px no-repeat;}/* height set for time-being to avoid problem with main image */
body#thecoffee #content{background: #2c3b3e url(../i/str/beans3.jpg) 12px 97px no-repeat;}
body#theatelier #content{background: #300205 url(../i/str/machine3.jpg) 12px 97px no-repeat;}
body#thedetails #content{background: #b9b410 url(../i/str/labels4.jpg) 12px 97px no-repeat;}
h1{font-size: 14px; font-family: arial, sans-serif;}


/* Text sits within these divs */
#intro{position: relative; top: 12px; left: 12px; width: 938px; height: 350px; padding: 0px 10px 0px 10px; z-index: 20; text-align: left;}
#position{position: absolute; bottom: 0px; padding-bottom: 12px;}

#theinformation{width: 920px; height: auto; margin-top: 22px; margin-left: 21px; text-align: left; padding-bottom: 0px; }
#intro p a, #theinformation p a, a:link a:active a:visited{color: #fff; padding-bottom: 1px; border-bottom: 1px dotted gray;}
#theinformation p a:hover{border-bottom: 1px dotted white;}


/* Paragraphs 'n' Stuff */
p{margin-bottom: 24px; text-align: left; }
#intro p{position: relative; width: 450px; font-size: 12px; margin-bottom: 0px;}
#theinformation p{width: 450px;}
div.left{float: left; width: 450px;}
div.right{float: right; width: 450px;}
div.left.base{margin-left: 20px;}
div.right.base{margin-right: 20px;}
#polaroids{position: relative; top: 0px; left: 21px; width: 920px; height: 240px;}


/* The Coffees */
div.wrp{width: 215px; height: 215px; float: left; margin: 0px 19px 12px 0px; background: url(../i/str/wrpbg8.jpg) 0px 0px no-repeat;}
#theinformation .wrp p{width: 195px; line-height: 18px; margin: 0px 0px 7px 10px; color: #cbd3d0;}
div.wrp p a, a:link a:active{font-weight: 600; color: #fff; border-bottom: 1px dotted gray;}
div.wrp p a:hover{border-bottom: 1px dotted white;}
.wrp h3, .wrp h4{background: 10px 5px no-repeat; height: 24px; margin: 0px;}
.wrp h4{margin-bottom: 10px;}

/* wrp H3 and H4 Headings are on language stylesheets */

/* General Navigation */
ul#navigation{width: 488px; height: 38px; position: absolute; top: 47px; left: 471px; background-repeat: no-repeat; z-index: 400;}
body#welcome ul#navigation{background-position: 0px 0px;}
body#thecoffee ul#navigation{background-position: 0px -38px;}
body#theatelier ul#navigation{background-position: 0px -76px;}
body#thedetails ul#navigation{background-position: 0px -114px;}
ul#navigation li{height: 38px; width: 115px; position: absolute; top: 0px; z-index: 100;} /* should make all 115px wide, then separate 'current' links */
ul#navigation li a{display: block; height: 38px; z-index: 100;}
/* general link positioning .. */
li.welcome{left: 10px;}
li.coffee{left: 125px;}
li.atelier{left: 248px;}
li.details{left: 363px;}
/* .. exceptions */
body#welcome li.coffee{left: 133px;}
body#thedetails li.atelier{left: 240px;}
/* .. shifting widths for 'current' tabs */
body#welcome li.welcome{width: 123px;}
body#thecoffee li.coffee{width: 123px;}
/*  */
body#theatelier li.atelier{width: 123px; left: 240px;}
body#thedetails li.details{width: 123px; left: 355px;} /* possibly control this via 'current' function in the nav php */


/* Suckerfish Dropdowns */
ul#navigation li ul { /* second-level lists */
position: absolute;	left: -999em;}
ul#navigation li:hover ul, 
ul#navigation li li:hover ul, 
ul#navigation li.sfhover ul, 
ul#navigation li li.sfhover ul {/* lists nested under hovered list items */  width: 143px; height: 100px; top: 0px; left: -18px; background-position: top center; background-repeat: no-repeat; z-index: 500;}
/* exceptions to positioning */
ul#navigation li.welcome:hover ul{left: -10px;}
body#thecoffee ul#navigation li.coffee:hover ul,
body#theatelier ul#navigation li.coffee:hover ul,
body#theatelier ul#navigation li.atelier:hover ul,
body#thedetails ul#navigation li.coffee:hover ul,
body#thedetails ul#navigation li.atelier:hover ul,
body#thedetails ul#navigation li.details:hover ul{left: -10px;}

ul#navigation li ul li{display: block; width: 123px; height: 24px; position: relative; top: 12px; left: 10px;}
ul#navigation li ul li a{display: block; width: 123px; height: 24px; color: #fff; font-size: 11px;}
ul#navigation li.details li a{color: #000;}
/* insert some kind of conditional hover underline background graphic here */
ul#navigation li ul li.one, ul#navigation li ul li.one a{height: 26px;}


/* Order Form */
#orderform{width: 920px; margin-left: 20px; color: #000;}
#orderform h1{float: left; width: 920px; text-align: left; font-size: 18px;}
ul.prices{width: 450px; float: left; text-align: left; margin-bottom: 0px; font-family: arial, sans-serif;}
ul.prices li{display: inline; margin-right: 20px;}

/* Logos */
#logos{width: inherit; height: 80px; clear: both; position: relative;}
img#scae{position: absolute; bottom: 10px; right: 733px;}
img#cards{position: absolute; bottom: 10px; right: 60px;}
img#comodo{position: absolute; bottom: 10px; right: 240px;}

/* Build the Order */
label{font-weight: 600;}
textarea{width: 300px;}
textarea#comments{height: 81px;}
input, textarea, select{border: 1px solid #767432;}
select{margin-right: 10px;}
input#send{margin-left: 100px; background: #9e9a0f; border: 1px solid #767432; border-right: 1px solid #5b5927; border-bottom: 1px solid #5b5927; color: #471010;}
label, select, input{font-family: Arial, Helvetica, sans-serif;}
#orderform p#buildorder{margin-left: 23px;}

/* Display the Order Summary */
#ordersummary{width: 800px; height: auto; margin: 24px 0px 0px 100px; text-align: left; font-family: arial, sans-serif;}
/* Use a list for the headings */
#ordersummary ul{width: 820px; float: left; display: block; font-weight: 600;}
#ordersummary ul li{float: left; display: block; clear: right; margin-right: 14px;}
#ordersummary ul li ul{width: inherit; display: block; font-weight: 500;}
#ordersummary ul li ul li{float: none; width: inherit; display: block;}
#ordersummary ul li#coffeeorder{width: 300px;}
#ordersummary ul li#bagorder{width: 90px;}
#ordersummary ul li#qtyorder{width: 50px;}
#ordersummary ul li#groundorder{width: 110px;}
#ordersummary ul li#cost{width: 50px; margin-right: 50px;}
#ordersummary ul li#cost li{width: inherit;}
#ordersummary ul li#delete{width: 100px; margin-right: 0px;}
/* replicable divs for each line */
.orderwrp{width: 800px; height: 24px; clear: both;}
.orderwrp div{float: left; margin-right: 10px;}
.orderwrp div.name{width: 324px;}
.orderwrp div.bag{width: 84px;}
.orderwrp div.qty{width: 44px;}
.orderwrp div.grind{width: 124px;}
.orderwrp div.price{width: 80px;}
.orderwrp div.remove{width: 50px;}
/* postal dropdown */
form#postage{position: relative; top: 50px; left: 0px;}
/* common advisory links */
.orderwrp a, form#postage p a, form#payform p a{color: #666666;}
.orderwrp a:hover, form#postage p a:hover, form#payform p a:hover{color: #471010;} 
/* totals panel */
#totals{width: 170px; height: 100px; position: relative; top: -36px; left: 482px; font-weight: 600; font-family: arial, sans-serif;}
.totalwrp{width: inherit; height: 24px; float: left;}
.total{float: left; width: 120px;}
.figure{float: right; width: 50px; text-align: right;}
/* pay for the goodies */
#payform label{float: left; width: 95px; text-align: right; padding-right: 5px;}
#payform input{width: 300px;}
#payform input.short{width: 50px;}
#orderform p{margin-bottom: 12px;}
#orderform p#use{margin-left: 100px;}
#orderform label{color: #471010;}
textarea#address{height: 156px;}
textarea#comments{height: 48px;}
input#submit{margin-left: 100px; width: 100px; background: #9e9a0f; border: 1px solid #767432; border-right: 1px solid #5b5927; border-bottom: 1px solid #5b5927; color: #471010;}
/* error messages */
span.error{color: blue; font-weight: 600;}


/* Footers */
#footer{width: 960px; margin: auto; height: 174px; background: top center no-repeat;}
body#welcome #footer{background-color: #3c4029;}
body#theatelier #footer{background-color: #292021; border-top: 1px dotted #280204;}
body#thecoffee #footer{background-color: #2b3536; border-top: 1px dotted #232d2f;}
body#thedetails #footer{height: 400px; background-color: #938f0a; border-top: 1px dotted #232d2f;}
#instep{width: 920px; margin: auto; position: relative; top: 20px;}
#instep p{float: left; width: 210px; margin-right: 25px;}
#instep p.final, .wrp.final{margin-right: 0px;}
#instep p a{padding-bottom: 1px; text-decoration: none;}
body#theatelier #instep p{color: #b1a5a5;}
body#thedetails #instep p{color: #000;}
body#theatelier #instep p a, body#thedetails #instep p a,
a:link a:visited a:active{color: #fff; border-bottom: 1px dotted gray;}
body#theatelier #instep p a:hover, body#thedetails #instep p a:hover{border-bottom: 1px dotted #fff;}
body#thecoffee #instep p{color: #9eaeb1;}
body#welcome #instep p a,
body#thecoffee #instep p a,
a:link a:visited a:active{color: #fff; border-bottom: 1px dotted gray;}
body#welcome #instep p a:hover,
body#thecoffee #instep p a:hover{border-bottom: 1px dotted #fff;} /* scope for consolidating the above, once bg colours are settled */


/* Sundries */
.clear{width: inherit; height: 0px; clear: both;}