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

project:   	Katherine Ara Paintings Conservator and Restorer www.katherineara.com
version:	V0.071
updated:	October 7 2010
author: 	Duncan Marshall
email:     	dm@chromadesign.co.uk
website:   	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;}
ul span, #banner span{position: relative; left: -5000px;}
.clearfix:after{content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
body{color: #fff; background: #201e1b; font-family: Georgia, "Times New Roman", serif; font-size: 12px; line-height: 24px; text-align: center;}

.wrapper{width: 980px; height: auto; margin: auto; }
#banner{width: inherit; height: 70px; background: url(../i/str/banner02.gif) 0px 1px no-repeat;} 
#content{width: 978px; height: auto; background: #1b1916; border: 1px solid #141310; text-align: left;}
body#homepage #content{height: 500px; background: url(../i/str/homepage_flipped.jpg) top center no-repeat;}
/*#narrative{width: 938px; height: 75px; padding: 20px; text-align: left; background: url(../i/str/narrativebg.png) 0px 0px repeat;}*/
#panel{width: 450px; height: auto; float: right; padding: 5px 5px 5px 10px; border: 1px solid #000; margin: 3px 3px 0px 0px; text-align: left; background: url(../i/str/narrativebg2.png) 0px 0px repeat; font-size: 12px; line-height: 24px; -moz-border-radius: 5px; border-radius: 5px;}
#panel p{text-indent: 0px; color: #808080; text-align: left;}

/* Home Page Panels */
.panel{float: left; width: 326px; height: 500px; background: 0px 0px no-repeat;}
body#homepage #left{background-image: url(../i/str/panel01.jpg);}
#middle{background-image: url(../i/str/panel02.jpg);}
#right{background-image: url(../i/str/panel03.jpg);} /* probably should be rationalised - make panels exclusive to home page */

/* Navigation */
ul#navigation{width: 320px; position: relative; top: 42px; left: 664px; padding: 0px; font-size: 1px;}
ul#navigation li{float: left; width: 80px; height: 18px; line-height: 18px;}
ul#navigation li a{display: block; width: 80px; height: 18px; line-height: 18px;}
ul#navigation li a, a:link a:visited a:active{background: 0px 0px no-repeat;}
ul#navigation li#currentpage a, ul#navigation li a:hover{background-position: 0px -18px;}
ul#navigation li.home{width: 53px;}
ul#navigation li.about{width: 77px;}
ul#navigation li.gallery{width: 62px;}
ul#navigation li.services{width: 67px;}
ul#navigation li.contact{width: 55px;}
ul#navigation li.home a{background-image: url(../i/nv/home.gif); }
ul#navigation li.about a{background-image: url(../i/nv/about.gif);}
ul#navigation li.services a{background-image: url(../i/nv/services.gif);}
ul#navigation li.gallery a{background-image: url(../i/nv/gallery.gif);}
ul#navigation li.contact a{background-image: url(../i/nv/contact.gif);}
ul#navigation a span{position: relative; left: -3000px;}

ul#navigation li.services ul{width: 200px; height: 54px; padding: 3px; border: 1px solid #504a43; background: url(../i/str/subbg.png) top left repeat; z-index: 1;}
ul#navigation li.services ul li{width: inherit; height: 18px;}
ul#navigation li.services ul li a{width: inherit; height: 18px; display: block;}
ul#navigation li#currentpage ul li a,
ul#navigation li.services ul li a, a:link a:visited a:active{background-position: 0px 0px;}
ul#navigation li#currentpage ul li a:hover,
ul#navigation li.services ul li a:hover{background-position: 0px -18px;}
ul#navigation li.services ul li.conservation a{background-image: url(../i/nv/conservation.png);}
ul#navigation li.services ul li.technical a{background-image: url(../i/nv/technical.png);}
ul#navigation li.services ul li.other a{background-image: url(../i/nv/other.png);}

/* Suckerfish Dropdown */
ul#navigation li ul { /* second-level lists */position: relative; left: -5000px;}
ul#navigation li:hover ul ul, 
ul#navigation li.sfhover ul ul {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 */ top: 0px; left: -80px;}/* needs to be -80px */

ul#navigation li:hover ul ul, 
ul#navigation li:hover ul ul ul, 
ul#navigation li.sfhover ul ul, 
ul#navigation li.sfhover ul ul ul {left: -999em;}


/* columnised text and floated image on About Us and Services pages */
#main{float: right; width: 637px; height: auto; margin: 1px 1px 0px 0px; text-align: left;}
body.servicespage #main{height: auto; padding-top: 10px;}
body.staffpage #main{height: 470px; }
#main IMG{float: left; margin-top: 10px; margin-bottom: 0px; border: 1px solid #27241e;}
#main IMG.stf{height: 436px; width: 310px; margin-right: 10px;}
.col{float: left; width: 288px; height: auto; margin-left: 0px; text-align: left; padding: 0px 10px 0px 0px; color: #fff;}
#left .col{width: 310px; margin-left: 10px;}
#main .col{margin-right: 25px;} /* what does this do, in the light of below? */
body#aboutus #main .col{float: right; margin: 5px 15px 0px 0px;}
#main .col.final{margin-right: 0px;}

/* Staff */
#staff{height: auto; margin-top: 315px; width: 310px; padding-left: 10px;}
#staff ul{float: left;}
#staff li{float: left; display: block; width: 300px; color: gray; margin-bottom: 12px; line-height: 18px;}
#staff li a, #staff strong{color: #fff; font-weight: 600; margin-right: 5px;}
#staff li a:hover{border-bottom: 2px solid #fff;}


/* Footer */
#footer{width: 980px; font-size: 1px; height: 72px; line-height: 18px; text-align: left; background: url(../i/str/footer.gif) 0px 10px no-repeat;}
#footer p span{position: relative; left: -5000px;}

/* Paragraphs and Headings */
p{text-indent: 0px; margin: 0px 0px 6px 0px; color: gray;}
body#homepage #right p{padding: 8px 15px 0px 10px;}
.wrp p{color: #808080; font-size: 12px; line-height: 18px;}
p a, a:link a:visited a:active{color: #808080; border-bottom: 1px dotted #808080; padding-bottom: 1px}
p a:hover{color: #fff; border-bottom: 1px solid #fff;}
p.noindent{text-indent: 0px;}
p.biog{padding-right: 10px;}
p.topof{width: 70px; position: relative; left: 325px; text-indent: 0px; margin-bottom: 24px;}
p.copyright{position: relative; top: 410px; left: 335px; font-size: 10px;}
h1{width: 300px; margin-top: 5px; margin-left: 10px; margin: 5px 0px 12px 10px; height: 24px; font-size: 17px; text-align: left; color: #fff;}

h2{width: 300px; margin-left: -1px; margin: 0px 0px 12px -1px; height: 18px; font-size: 14px; text-align: left; color: #fff}
h2 span{position: relative; left: -5000px;}
body.staffpage h1{margin-bottom: 0px;}
body.staffpage h2{font-size: 17px; margin: 10px 0px 0px -1px; width: 640px; background-position: 0px 0px; background-repeat: no-repeat;}
h2#katherine{background-image: url(../i/h2/katherine.jpg); background-position: 322px 0px;}
h2#bronwyn{background-image: url(../i/h2/bronwyn.jpg); background-position: 322px 1px;}
h2#harriet{background-image: url(../i/h2/harriet.jpg); background-position: 322px 0px;} /* consolidate here */

body.servicespage h2{background-position: 0px 0px; background-repeat: no-repeat;}
h2#cleaning{background-image: url(../i/h2/cleaning.jpg);}
h2#consolidation{background-image: url(../i/h2/consolidation.jpg);}
h2#canvas{background-image: url(../i/h2/canvas.jpg);}
h2#panel2{background-image: url(../i/h2/panel.jpg);}
h2#texturing{background-image: url(../i/h2/texturing.jpg);}
h2#retouching{background-image: url(../i/h2/retouching.jpg);}
h2#varnishing{background-image: url(../i/h2/varnishing.jpg);}
h2#microclimate{background-image: url(../i/h2/microclimate.jpg);}
/* Technical */
h2#macro{background-image: url(../i/h2/macro.jpg);}
h2#uv{background-image: url(../i/h2/uv.jpg);}
h2#infrared{background-image: url(../i/h2/infrared.jpg);}
h2#xray{background-image: url(../i/h2/xray.jpg);}
h2#dendro{background-image: url(../i/h2/dendro.jpg);}
h2#pigment{background-image: url(../i/h2/pigment.jpg);}
/* Gallery */
h2#david{background-image: url(../i/h2/david.jpg);}
h2#holbein{background-image: url(../i/h2/holbein.jpg);}
h2#holbein2{background-image: url(../i/h2/holbein2.jpg);}
h2#moreelse{height: 36px; background-image: url(../i/h2/moreelse.jpg);}
h2#ruysdael{height: 54px; background-image: url(../i/h2/ruysdael.jpg);}
h2#eworth{background-image: url(../i/h2/eworth.jpg);}
h2#clouet{background-image: url(../i/h2/clouet.jpg);}
h2#steven{height: 36px; background-image: url(../i/h2/steven.jpg);}
h2#pourbus{height: 36px; width: 180px; background-image: url(../i/h2/pourbus.jpg);}
h2#brueghel{height: 54px; width: 180px; background-image: url(../i/h2/brueghel.jpg);}
h2#bassano{background-image: url(../i/h2/bassano.jpg);}
h2#vos{height: 36px; width: 120px; background-image: url(../i/h2/vos.jpg);}
h2#larkin{background-image: url(../i/h2/larkin.jpg);}
h2#gainsborough{background-image: url(../i/h2/gainsborough.jpg);}
h2#waterhouse{height: 54px; width: 120px; background-image: url(../i/h2/waterhouse.jpg);}

h3{font-size: 13px; margin-bottom: 0px; color: gray;}
h3#ka{margin-left: 10px;}

/* Services Pages */
.wrp{width: 630px; height: auto; margin: 0px 0px 10px 0px;}
#main .wrp IMG{margin: 0px 0px 10px 0px;}
ul#otherservices{list-style-type: circle; margin: 0px 0px 24px 15px; color: #808080;}
.wrp.pourbus .col.final{width: 180px; margin-left: 60px;}
.wrp.brueghel .col.final{width: 120px; margin-left: 140px;}
.wrp.vos .col.final{width: 120px; margin-left: 140px;}
.wrp.waterhouse .col.final{width: 120px; margin-left: 140px;}
.wrp.ruysdael .col.final{width: 120px; margin-left: 140px;}

/* Contact Page */
p#company{margin-top: 155px;}

/* Downloads Page */
#downloads{width: 950px; height: auto; margin-left: 10px;}
#downloads ol{margin-left: 25px; padding-bottom: 24px;}
#downloads a, a:link a:active{color: #fff; text-decoration: none;}
#downloads a, a:visited{color: #ddd;}
#downloads a:hover{color: yellow; border-bottom: 1px dotted yellow;}

/* clearing */
.clear{width: 978px; height: 1px; clear: both;}
#main .clear{width: 630px;}
#main .clear{width: inherit;}

/* Sundries */
span.ampersand{font-family: "Palatino Linotype", georgia, "Times New Roman", serif; font-size: 15px; font-style: italic;}
span.antispam{color: #1b1916; font-size: 1px;}