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

client:    Simon Ray Indian and Islamic Works of Art 
version:   "Pure" October 20 2009 11.59
author:    Duncan Marshall
email:     dm@chromadesign.co.uk
website:   http://www.chromadesign.co.uk

============================================================ */
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;}
@font-face {
  font-family: 'TheMix-Plain';
  src: url('TheMix-Plain.eot');
  src: local('TheMix-Plain'), local('TheMix-Plain'), 
         url('TheMix-Plain.ttf') format('truetype');}
		 
@font-face {
  font-family: 'TheMix-Italic';
  src: url('TheMix-Italic.eot');
  src: local('TheMix-Italic'), local('TheMix-Italic'), 
         url('TheMix-Italic.ttf') format('truetype');}
		 
@font-face {
  font-family: 'TheMixBold-Caps';
  src: url('TheMixBold-Caps.eot');
  src: local('TheMixBold-Caps'), local('TheMixBold-Caps'), 
         url('TheMixBold-Caps.ttf') format('truetype');}

/* General Structure */
ul span, #banner span{position: relative; left: -5000px;}
html{height: 101%;}
a{outline: none; text-decoration: none;}
a IMG{border: none;}
ul{list-style-type: none;}
body{margin: 0px; padding: 0px; text-align: center; background-color: #050524; background-position: top center; background-repeat: no-repeat; color: #fff; font-family: 'TheMix-Plain', 'Lucida Grande', 'Lucida Sans Unicode', arial, sans-serif;}

#content, .wrapper{width: 920px; margin: auto; height: auto; text-align: left;}
#banner{margin: auto; width: 920px; height: 75px; background: url(../i/str/banner08.png) 670px 10px no-repeat;}
#inner{clear: both; width: 920px; height: 302px; position: relative; top: 30px; left: 0px;} 

/* Tables-Based Gallery Page for enhanced footers */
body.gallery{padding: 0px; margin: 0px; background-color: #050524; text-align: center; color: #fff;}
#outer{width: 100%;	height: 100%; margin: 0px;}
#wrapper{width: 100%; height: 100%;}
body.gallery #banner{width: 920px; margin: auto; height: 75px; background: url(../i/str/banner08.png) 680px 20px no-repeat;}
#middle{height: 80%; text-align: center;}
#stockholder{width: 920px; height: 360px; margin: auto;}
#base{width: 100%; height: 160px; text-align: center;}
#instep{width: 960px; margin: auto; height: 160px; text-align: left; color: gray;}
/* END tables-based gallery page */


/* Navigation */
ul{float: left; width: 105px; height: 200px; list-style-type: none; line-height: 24px;}
ul li{width: inherit; height: 24px;}
ul li a{display: block; width: inherit; height: 24px;}
ul li a:hover{background-position: 0px -24px;}
ul li a.crt{background-position: 0px -24px;}
ul li#ceramics a{background-image: url(../i/nv/ceramics.jpg);}
ul li#stonework a{background-image: url(../i/nv/stonework.jpg);}
ul li#sculpture a{background-image: url(../i/nv/sculpture.jpg);}
ul li#miniatures a{background-image: url(../i/nv/miniatures.jpg);}
ul li#metalwork a{background-image: url(../i/nv/metalwork.jpg);}
ul li#wood a{background-image: url(../i/nv/wood.jpg);}
ul li#jewellery a{background-image: url(../i/nv/jewellery.jpg);}
ul li#textiles a{background-image: url(../i/nv/textiles.jpg);}
ul li#contact{margin-top: 86px;}
ul li#contact a{background-image: url(../i/nv/contact.jpg);}


/* Keep the summary text aligned with the base of the medium-sized image */
#medium {float: right; width: 790px; height: 302px;}
#medium_image{display: block; width: 480px; height: 302px; float: left;}
#medium_image IMG{float: right; border: 1px solid #0b0b2f;} 
#medium_image IMG.noborder{border: none;}
body.contact #medium{width: 650px;}
#position{position: relative; top: 0px; left: 495px; width: 280px; height: 302px;}
#summary{position: absolute; bottom: 0px; width: 280px; height: auto; text-align: left;}
body.contact #summary{margin-left: 40px;}


/* Catalogue Pages */
body.catalogue{background-position: top left; background-repeat: repeat-x;}
body.ceramics{background-image: url(../i/str/bdceramics.jpg);}
body.stonework{background-image: url(../i/str/bdstonework.jpg);}
body.sculpture{background-image: url(../i/str/bdsculpture.jpg);}
body.miniatures{background-image: url(../i/str/bdminiatures.jpg);}
body.metalwork{background-image: url(../i/str/bdmetalwork.jpg);}
body.wood{background-image: url(../i/str/bdwood.jpg);}
body.jewellery{background-image: url(../i/str/bdjewellery.jpg);}
body.textiles{background-image: url(../i/str/bdtextiles.jpg);}
body.gallery{background-image: none;} 


/* Tables-Based Footer Background Colours */
body.gallery.ceramics td#base{background-color: #016696;}
body.gallery.stonework td#base{background-color: #530054;}
body.gallery.sculpture td#base{background-color: #c06202;}
body.gallery.miniatures td#base{background-color: #f7de53;}
body.gallery.metalwork td#base{background-color: #25373c;}
body.gallery.wood td#base{background-color: #0a4528;}
body.gallery.jewellery td#base{background-color: #7d87fb;}
body.gallery.textiles td#base{background-color: #760d20;}
.wrap{width: 960px; height: auto; margin: auto;}


/* Roaming and Process */
.colourcode{width: 980px; height: 24px; margin: auto; margin-bottom: 24px;}
ul#roaming{width: 980px; height: 24px; padding: 0px;}
ul#roaming li{float: left; font-size: 12px;}
li#previous{margin-left: 608px;}
li#previous, li#previous a{width: 70px;}
li#next, li#next a{width: 46px;}
li#gallery, li#gallery a{width: 60px;}
li#description, li#description a{width: 84px;}
li#enquire, li#enquire a{width: 64px;}
li#print, li#print a{width: 48px;}
ul#roaming li a{display: block; height: 24px; background-repeat: no-repeat;}
ul#roaming li a,
a:link a:visited a:active{text-decoration: none; background-position: center 0px; }
ul#roaming li a:hover{background-position: center -24px;}


/* Roaming BG Graphics by Category */
body.ceramics li#previous a{background-image: url(../i/roam/cer/previous.jpg);}
body.ceramics li#next a{background-image: url(../i/roam/cer/next.jpg);}
body.ceramics li#gallery a{background-image: url(../i/roam/cer/gallery.jpg);}
body.ceramics li#description a{background-image: url(../i/roam/cer/description.jpg);}
body.ceramics li#enquire a{background-image: url(../i/roam/cer/enquire.jpg);}
body.ceramics li#print a{background-image: url(../i/roam/cer/print.jpg);}

body.stonework li#previous a{background-image: url(../i/roam/sto/previous.jpg);}
body.stonework li#next a{background-image: url(../i/roam/sto/next.jpg);}
body.stonework li#gallery a{background-image: url(../i/roam/sto/gallery.jpg);}
body.stonework li#description a{background-image: url(../i/roam/sto/description.jpg);}
body.stonework li#enquire a{background-image: url(../i/roam/sto/enquire.jpg);}
body.stonework li#print a{background-image: url(../i/roam/sto/print.jpg);}

body.sculpture li#previous a{background-image: url(../i/roam/scu/previous.jpg);}
body.sculpture li#next a{background-image: url(../i/roam/scu/next.jpg);}
body.sculpture li#gallery a{background-image: url(../i/roam/scu/gallery.jpg);}
body.sculpture li#description a{background-image: url(../i/roam/scu/description.jpg);}
body.sculpture li#enquire a{background-image: url(../i/roam/scu/enquire.jpg);}
body.sculpture li#print a{background-image: url(../i/roam/scu/print.jpg);}

body.miniatures li#previous a{background-image: url(../i/roam/min/previous.jpg);}
body.miniatures li#next a{background-image: url(../i/roam/min/next.jpg);}
body.miniatures li#gallery a{background-image: url(../i/roam/min/gallery.jpg);}
body.miniatures li#description a{background-image: url(../i/roam/min/description.jpg);}
body.miniatures li#enquire a{background-image: url(../i/roam/min/enquire.jpg);}
body.miniatures li#print a{background-image: url(../i/roam/min/print.jpg);}

body.metalwork li#previous a{background-image: url(../i/roam/met/previous.jpg);}
body.metalwork li#next a{background-image: url(../i/roam/met/next.jpg);}
body.metalwork li#gallery a{background-image: url(../i/roam/met/gallery.jpg);}
body.metalwork li#description a{background-image: url(../i/roam/met/description.jpg);}
body.metalwork li#enquire a{background-image: url(../i/roam/met/enquire.jpg);}
body.metalwork li#print a{background-image: url(../i/roam/met/print.jpg);}

body.wood li#previous a{background-image: url(../i/roam/wood/previous.jpg);}
body.wood li#next a{background-image: url(../i/roam/wood/next.jpg);}
body.wood li#gallery a{background-image: url(../i/roam/wood/gallery.jpg);}
body.wood li#description a{background-image: url(../i/roam/wood/description.jpg);}
body.wood li#enquire a{background-image: url(../i/roam/wood/enquire.jpg);}
body.wood li#print a{background-image: url(../i/roam/wood/print.jpg);}

body.jewellery li#previous a{background-image: url(../i/roam/jwly/previous.jpg);}
body.jewellery li#next a{background-image: url(../i/roam/jwly/next.jpg);}
body.jewellery li#gallery a{background-image: url(../i/roam/jwly/gallery.jpg);}
body.jewellery li#description a{background-image: url(../i/roam/jwly/description.jpg);}
body.jewellery li#enquire a{background-image: url(../i/roam/jwly/enquire.jpg);}
body.jewellery li#print a{background-image: url(../i/roam/jwly/print.jpg);}

body.textiles li#previous a{background-image: url(../i/roam/tex/previous.jpg);}
body.textiles li#next a{background-image: url(../i/roam/tex/next.jpg);}
body.textiles li#gallery a{background-image: url(../i/roam/tex/gallery.jpg);}
body.textiles li#description a{background-image: url(../i/roam/tex/description.jpg);}
body.textiles li#enquire a{background-image: url(../i/roam/tex/enquire.jpg);}
body.textiles li#print a{background-image: url(../i/roam/tex/print.jpg);}


/* Catalogue Image and Description */
#image{float: left; width: 590px; height: auto;}
body.landscape#image {width: 960px;}
IMG{border: 1px solid #252525; float: left;}
IMG.noborder{border: none;}
#container{width: 350px; float: right; text-align: left;}
body.landscape #container{margin-top: 48px;}
#headerswrap{float: left; width: 570px;}
.headers{float: right; width: auto; padding-top: 48px;}


/* Headers, for Gallery AND Catalogue Pages */
h2, h3, h4, h5{margin: 0px; font-size: 12px; line-height: 24px; text-align: left;}
h2, h3{font-family: 'TheMixBold-Caps', 'Lucida Sans Unicode', sans-serif; width: 280px;}
h2{font-size: 12px; line-height: 18px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px;}
h3{font-family: 'TheMix-Plain', 'Lucida Sans Unicode', sans-serif; font-size: 12px; line-height: 18px; margin-bottom: 12px; font-variant: small-caps; letter-spacing: 1px;}
h4{font-size: 11px; line-height: 16px; font-weight: 500; margin-bottom: 4px; font-family: 'TheMix-Plain', 'Lucida Sans Unicode', sans-serif; font-variant: small-caps; letter-spacing: 1px;}
/* for catalogue page, portrait page-type */
body.catalogue h3{line-height: 18px; margin-bottom: 12px;}
body.catalogue h4{line-height: 16px; margin-bottom: 48px;}
/* and for landscape page-type */
body.catalogue.landscape h2{line-height: 24px; margin-bottom: 12px;}
body.catalogue.landscape h3{line-height: 24px; margin-bottom: 12px;}
body.catalogue.landscape h4{line-height: 16px; margin-bottom: 48px;}
body.catalogue h2, body.catalogue h3, body.catalogue h4{color: #b7c0cb;}
h5{font-family: 'TheMix-Plain', 'Lucida Sans Unicode', sans-serif; font-size: 12px; color: #999da2;}


/* General Paragraphics, including 'backto' and 'topof' links */
p{font-size: 12px; line-height: 24px; margin-top: 0px; margin-bottom: 24px; color: #b7c0cb;}
/* p strong{font-family: 'Lucida Sans Unicode', sans-serif; font-weight: 600;} */
#inner p{line-height: 18px;}/* to compress Contact details */
body.companypage p{margin-bottom: 12px;}
p.material, p.inscription, p.prov{font-size: 12px; color: #b7c0cb;}
p.prov{color: #999da2;}
.refnum{font-size: 11px; vertical-align: sub;}
p#top{width: 150px; position: relative; top: 0px; left: 610px; height: 50px; font-weight: 500; font-size: 10px; text-align: left;}
p#backto{text-align: left; font-size: 10px;}
p a, p#top a, p#backto a,
a:link a:visited a:active{color: #666; text-decoration: none;}
p a:hover, p#top a:hover, p#backto a:hover{color: #fff;} /* can probably rationalise this down to just p a:hover etc, ie, remove all of the subordinates */
em, cite{font-family: 'TheMix-Italic', 'Lucida Grande', 'Lucida Sans Unicode', arial, sans-serif; font-style: italic;}
p.prov cite{font-size: 12px; line-height: 12px;}


/* general clearing */
.clear{width: inherit; height: 24px; clear: both;}


/* Footer - in conjunction with #content for Gallery pages PLUS fullscreen.js */
#footer{position: relative; width: 100%;  height: 160px; background-position: top-center; background-repeat: repeat-x;}
body.contact #footer{height: 60px;}
/* inner footer content width and especially Contact page stuff */
#instep{width: 966px; margin: auto; height: 154px; padding-top: 6px; text-align: left; color: gray;}
#instep a{float: left; width: 140px; height: 140px; display: block; background: 0px 0px no-repeat; margin-right: 15px;}
/* thumbnail border background images */
body.ceramics #instep a{background-image: url(../i/str/thbbg_ceramics.jpg)}
body.stonework #instep a{background-image: url(../i/str/thbbg_stonework.jpg)}
body.sculpture #instep a{background-image: url(../i/str/thbbg_sculpture.jpg)}
body.miniatures #instep a{background-image: url(../i/str/thbbg_miniatures.jpg)}
body.metalwork #instep a{background-image: url(../i/str/thbbg_metalwork.jpg)}
body.wood #instep a{background-image: url(../i/str/thbbg_wood.jpg)}
body.jewellery #instep a{background-image: url(../i/str/thbbg_jewellery.jpg)}
body.textiles #instep a{background-image: url(../i/str/thbbg_textiles.jpg)}
#instep a#final{margin-right: 6px;}
#instep IMG{margin: 1px 0px 0px 1px;}
#instep a.arrow{width: 11px; height: 21px; margin: 60px 0px 0px 0px; background-image: none;}
#instep a.arrow#left{margin-left: 7px; margin-right: 6px;}
#instep a.arrow#right{width: 11px; margin-right: 0px;}
#instep a.arrow#left IMG{margin: 0px;}
#instep a.arrow#right IMG{margin: 0px;}

#instep p{line-height: 18px;}
body.contact #instep{height: 60px;}
p#telephone span{margin-left: 7px;}
#instep p a, a:link a:visited a:active{color: gray;}
#instep p a:hover{color: #fff;}
body.contact #instep{width: 912px;}
#instep p#company{float: left; text-align: left; font-size: 10px;}
#instep p#company a{height: 12px; margin-right: 0px;}

/* 404 Page */

body#error h1{position: relative; top: 100px; left: 190px; text-align: left; width: 370px;}
body#error p{position: relative; top: 100px; left: 190px; text-align: left; width: 370px;}