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

version:   Chroma Design Associates 9.0 Ltd January 5 - 13 2008
author:    Duncan Marshall
email:     dm@chromadesign.co.uk
website:   http://www.chromadesign.co.uk

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

* {margin: 0; padding: 0;}
html{height:100%; margin-bottom:1px}
a{outline:none; text-decoration: none; border: none; color: blue;}
a IMG{border:none;}
body {background-color: #d8dcdf; background-image: none; font-family: "Lucida Grande", "Lucida Sans Unicode", arial, sans-serif; font-size: 12px; line-height: 24px; text-align: center; color: #09121c;}

#content{width: 100%; height: auto; margin: auto;}
.skipnav{height: 0px;}
.skipnav span{position: relative; top: 0px; left: -3000px; height: 0px;}
#banner{width: 100%; height: 306px; background: url(../i/str/bnr2a.jpg) top center no-repeat;}
#wrapper{width: 1000px; height: auto; margin: auto; background: url(../i/str/wrp.jpg) top center repeat-y;}

/* for Colophon and Privacy pages only */
body#secondary #wrapper{background-image: none;}

/* general site navigation */
#navigation{position: relative; top: -47px; width: inherit; height: 47px;} /* to pull the navigation up over the top of the wrapper because it was unsightly before the other graphics loaded */
#navigation ul{position: relative; left: 476px; width: 464px; height: 47px; list-style-type: none; margin: 0px; padding: 0px; padding: 0px 0px 0px 16px;}
#navigation ul li{float: left; width: 90px; height: 39px; margin: 8px 0px 0px 0px; padding: 0px;}
#navigation ul li a{display: block; width : 90px; height: 39px; background-repeat: no-repeat;}

/* master nav images */
#navigation ul li#home a{background-image: url(../i/li/home.jpg);}
#navigation ul li#prog a{background-image: url(../i/li/programming.jpg);}
#navigation ul li#dev a{background-image: url(../i/li/development.jpg);}
#navigation ul li#about a{background-image: url(../i/li/chroma.jpg);}
#navigation ul li#ctt a{background-image: url(../i/li/contact.jpg);}
#navigation ul li a span{position: relative; left: -3000px;}

/* move the image */
#navigation ul li a,
a:link
a:visited
a:active{background-position: -10px 0px;}
#navigation ul li a:hover{background-position: -10px -39px;}
#navigation ul li.crt a{width: 100px; background-position: 0px -78px;}

/* home link is an exception because of its position on the left */
body#programmingpage #navigation ul li#home a,
a:link
a:visited
a:active{background-position: 0px 0px;}
body#programmingpage #navigation ul li#home a:hover{background-position: 0px -39px;}


/* after WEBSITE DEVELOPMENT we need to then create the appearance of everything left of the current page being shadowed from the right */
body#developmentpage #navigation ul li#home a,
body#programmingpage #navigation ul li#home a,
body#programmingpage #navigation ul li#dev a,
body#chromapage #navigation ul li#home a,
body#chromapage #navigation ul li#prog a,
body#chromapage #navigation ul li#dev a,
body#contactpage #navigation ul li#home a,
body#contactpage #navigation ul li#prog a,
body#contactpage #navigation ul li#dev a,
body#contactpage #navigation ul li#about a,
a:link
a:visited
a:active{background-position: 0px -117px;}

/* again, an exception for the home link */
body#programmingpage #navigation ul li#home a:hover{background-position: 0px -39px;}
a:link
a:visited
a:active{background-position: 0px 0px;}
body#programmingpage #navigation ul li#home a:hover{background-position: 0px -39px;}

/* hover conditionals for when the tab is to the left of the current tab */
body#developmentpage #navigation ul li#home a:hover,
body#programmingpage #navigation ul li#home a:hover,
body#programmingpage #navigation ul li#dev a:hover,
body#chromapage #navigation ul li#home a:hover,
body#chromapage #navigation ul li#prog a:hover,
body#chromapage #navigation ul li#dev a:hover,
body#contactpage #navigation ul li#home a:hover,
body#contactpage #navigation ul li#prog a:hover,
body#contactpage #navigation ul li#dev a:hover,
body#contactpage #navigation ul li#about a:hover
{background-position: 0px -156px;}

/* alter the link width for current page */
#navigation ul li.crt{width: 100px;}
#navigation ul li.crt a{width: 100px;}


/* Navigation for Colophon and Privacy Pages */
ul.nav{list-style-type: none; text-align: center; position: relative; top: 0px; margin-bottom: 30px;}
ul.nav a,
a:link
a:visited
a:active{color: #a60000;}
ul.nav a:hover{border-bottom: 3px solid #a77c7f;}
ul.nav#bottom{top: 18px;}
ul.nav#bottom a:hover{border-top: 3px solid #a77c7f; border-bottom: none;}
ul.nav li{display: inline; padding: 5px 10px 5px 10px;}
ul.nav li a{width: 100px;}


/* page header backgrounds by page type - position pulled up to match navigation */
#pageheader{width: 957px; height: 200px; position: relative; top: -47px; left: 22px; background: url(../i/ph/aahome.jpg) 0px 0px repeat-x; text-align: justify; color: #fff;}
body#programmingpage #pageheader{background-image: url(../i/ph/prog.jpg);}
body#developmentpage #pageheader{background-image: url(../i/ph/dev.jpg);}
body#chromapage #pageheader{background-image: url(../i/ph/chroma.jpg);}
body#contactpage #pageheader{background-image: url(../i/ph/ctt.jpg);}

/* page header titles and graphics */
h2{width: 950px; height: 40px; position: relative; top: 10px; left: 0px; background-position: 0px 0px; background-repeat: no-repeat; font-weight: 500; font-size: 13px; font-variant: small-caps;}
h2 span{position: relative; left: -3000px;}
body#homepage h2{background-image: url(../i/h2/previously.gif);} 
body#programmingpage h2{background-image: url(../i/h2/programme.gif);}
body#developmentpage h2{background-image: url(../i/h2/development.gif);}
body#chromapage h2{background-image: url(../i/h2/chroma.gif);}
body#contactpage h2{background-image: url(../i/h2/contact.gif);}

/* page header intro text and small image */
#pageheader p{padding: 0px 31px 0px 0px; font-size: 12px; margin-bottom: 12px;}
#pageheader IMG{float: left; clear: right; margin: 10px 25px 0px 27px;}
#pagecontent{position: relative; top: -27px;} /* pulled upwards to follow screening of nav bg */
#pagecontent h3 span{position: relative; left: -3000px;}

/* portfolio and other items */
.wrp{width: 957px; position: relative; top: 0px; left: 22px;}
.itemdesc{width: 460px; height: 460px; float: left; background: url(../i/str/itdesc.jpg) 20px 17px no-repeat; text-align: left;}
.itemdesc h3{margin: 25px 0px 12px 10px; width: 460px; height: 30px; background: 15px 0px no-repeat;}
.itemdesc p{margin: 0px 0px 18px 27px; padding-right: 10px;}
.itemdesc p.hide{visibility: hidden;}
.itemimage{width: 465px; height: 465px; float: right; background: url(../i/str/imgbg.jpg) top left no-repeat; margin: 0px 10px 0px 0px;}
.itemimage IMG{position: relative; top: 36px; left: -2px;}


/* 'visit the website' links */
.visit{width: 400px; height: 30px; clear: both; position: relative; top: -52px; left: 5px; text-align: left; }
.visit p{width: 130px; height: 19px; position: relative; left: 20px; }
.visit p a{width: 116px; height: 19px; background-image: url(../i/str/visit.jpg); background-repeat: no-repeat; padding: 0px 20px 0px 0px; border-bottom: 0px; display: block; }
.visit p a,
a:link
a:visited
a:active{background-position: 0px 0px;}
.visit p a:hover{background-position: 0px -18px;}
.visit p a span{position: relative; left: -3000px;}

/* one-off quote on Development page */
.quote{font-style: italic;}

/* item headers */
.wrp h3#knapton{background-image: url(../i/h3/knapton.jpg);}
.wrp h3#rda{background-image: url(../i/h3/rda.jpg);}
.wrp h3#chroma{background-image: url(../i/h3/cdal.jpg);}
.wrp h3#bespoke{background-image: url(../i/h3/bespoke.jpg);}
.wrp h3#details{background-image: url(../i/h3/details.jpg);}
.wrp h3#diy{background-image: url(../i/h3/diy.jpg);}
.wrp h3#sf{background-image: url(../i/h3/sf.jpg);}
.wrp h3#sr{background-image: url(../i/h3/sr.jpg);}
.wrp h3#tb{background-image: url(../i/h3/tb.jpg);}
.wrp h3#at{background-image: url(../i/h3/at.jpg);}
.wrp h3#pb{background-image: url(../i/h3/pb.jpg);}
.wrp h3#sec{background-image: url(../i/h3/sec.jpg);}
.wrp h3#fg{background-image: url(../i/h3/fg.jpg);}
.wrp h3#fl{background-image: url(../i/h3/fl.jpg);}
.wrp h3#jk{background-image: url(../i/h3/jk.jpg);}
.wrp h3#mdc{background-image: url(../i/h3/mdc.jpg);}
.wrp h3#mb{background-image: url(../i/h3/mb.jpg);}
.wrp h3#pm{background-image: url(../i/h3/pm.jpg);}
.wrp h3#ca{background-image: url(../i/h3/criterion.jpg);}
.wrp h3#so{background-image: url(../i/h3/so.jpg);}
.wrp h3#tl{background-image: url(../i/h3/tl.jpg);}
.wrp h3#sc{background-image: url(../i/h3/sc.jpg);}
.wrp h3#fh{background-image: url(../i/h3/fh.jpg);}
.wrp h3#ra{background-image: url(../i/h3/ra.jpg);}

h3#colophon{width: inherit; height: 30px; background: url(../i/h3/colophon.jpg) top center no-repeat; margin-bottom: 18px;}
h3#privacy{width: inherit; height: 30px; background: url(../i/h3/privacy.jpg) top center no-repeat; margin-bottom: 18px;}
body#secondary ol#statement, ol#statement ul{width: 890px; margin: 0px 0px 10px 20px; padding: 0px; text-align: left;}

/** other portfolio sites header **/
#othersites{width: inherit; height: auto; padding: 0px 30px 0px 30px;}
#othersites p{text-align: justify; padding: 0px 20px 0px 20px;}
h3#other{width: 960px; height: 30px; background: url(../i/h3/othersites.jpg) 15px 0px no-repeat; margin-bottom: 12px;}
h3#other span{position: relative; left: -2000px;}
h3#top{width: 100px; height: 16px;}
h3#top a{background-image:url(../i/h3/top4.jpg);}
h3#top a,
a:link
a:visited
a:active{background-position: 13px 2px; background-repeat: no-repeat;}
h3#top a:hover{background-position: 13px -18px; background-repeat: no-repeat;}
h3#top a span{position: relative; left: -2000px;}

/* miniature thumbnails */
#sitethbs{width: 960px; height: auto; margin-right: 0px;}
.thbwrp{float: left; width: 438px; height: 235px; text-align: left; margin-right: 22px; margin-bottom: 20px; padding-left: 16px;}
.thbdsc{float: left; width: 190px; height: auto;}
#othersites .thbdsc p{padding: 0px; text-align: left;}
h4{width: 195px; height: 20px; background-position: 0px 0px; background-repeat: no-repeat; margin-top: 10px; margin-bottom: 10px; }
h4 span{position: relative; left: -3000px;}

h4#at{background-image: url(../i/h4/at.jpg);}
h4#sr{background-image: url(../i/h4/sr.jpg);}
h4#sf{background-image: url(../i/h4/sf.jpg);}
h4#kr{background-image: url(../i/h4/kr.jpg);}
h4#rda{background-image: url(../i/h4/rda.jpg);}
h4#jk{background-image: url(../i/h4/jk.jpg);}
h4#pb{background-image: url(../i/h4/pb.jpg);}
h4#mdc{background-image: url(../i/h4/mdc.jpg);}
h4#tb{background-image: url(../i/h4/tb.jpg);}
h4#pm{background-image: url(../i/h4/pm.jpg);}
h4#mb{background-image: url(../i/h4/mb.jpg);}
h4#so{background-image: url(../i/h4/so.jpg);}
h4#sc{background-image: url(../i/h4/sc.jpg);}
h4#fh{background-image: url(../i/h4/fh.jpg);}
h4#ra{background-image: url(../i/h4/ra.jpg);}
h4#fl{background-image: url(../i/h4/fl.jpg); height: 40px;}
h4#sec{background-image: url(../i/h4/sec.jpg); height: 40px;}
h4#ca{background-image: url(../i/h4/ca.jpg); height: 40px;}

.thbdsc p{font-size: 11px; line-height: 20px; margin-bottom: 18px;}
.thbdsc p.more{}
.imwrp{float: right; width: 232px; height: 232px; background-position: right 0px; background-repeat: no-repeat;}
.imwrp#tabor{background-image: url(../i/thb/thbat.jpg);}
.imwrp#fogg{background-image: url(../i/thb/thbsf.jpg);}
.imwrp#ray{background-image: url(../i/thb/thbsr.jpg);}
.imwrp#forge{background-image: url(../i/thb/thbfl.jpg);}
.imwrp#knapton{background-image: url(../i/thb/thbkr.jpg);}
.imwrp#dean{background-image: url(../i/thb/thbrda.jpg);}
.imwrp#knowles{background-image: url(../i/thb/thbjk.jpg);}
.imwrp#britton{background-image: url(../i/thb/thbpb.jpg);}
.imwrp#brand{background-image: url(../i/thb/thbmdc.jpg);}
.imwrp#bilgen{background-image: url(../i/thb/thbtb.jpg);}
.imwrp#boxer{background-image: url(../i/thb/thbmb.jpg);}
.imwrp#sec{background-image: url(../i/thb/thbsec.jpg);}
.imwrp#mould{background-image: url(../i/thb/thbpm.jpg);}
.imwrp#criterion{background-image: url(../i/thb/thbca.jpg);}
.imwrp#ollemans{background-image: url(../i/thb/thbso.jpg);}
.imwrp#cook{background-image: url(../i/thb/thbsc.jpg);}
.imwrp#reindeer{background-image: url(../i/thb/thbra.jpg);}
.imwrp#hall{background-image: url(../i/thb/thbfh.jpg);}

/* clearing divs */
.clearing{width: inherit; height: 20px; clear: both;}
/* creates faux-page footer */
.clearing#base{position: relative; top: 47px; height: 102px; background: url(../i/str/pagebase4.jpg) center top no-repeat;}

/* contact page */
p#address{color: #3f4956;}
.itemdesc p a, .thbdsc p a,
a:link
a:visited
a:active{color: #a60000; padding-bottom: 1px; border-bottom: 1px dotted gray;}
.itemdesc p a:hover, .thbdsc p a:hover{color: red; border-bottom: 1px dotted black;}
.antispam{color: #eaebef; margin-right: -3px;}
p#spamadvice{width: 400px; height: 1px;}
p#spamadvice span{position: relative; left: -3000px;}
#form{position: relative; top: 20px; left: 40px; text-align: left;}
.numbers{font-size: 11px;}


/* footer */
#footer{position: relative; width: 100%; height: 100px;  text-align: left; color: #fff; font-size: 10px; font-family: Arial, Helvetica, sans-serif;}
body#homepage #footer{background: #2f0a04 url(../i/ft/home.jpg) 0px 0px repeat-x;}
body#programmingpage #footer{background: #1d4962 url(../i/ft/programming.jpg) 0px 0px repeat-x;}
body#developmentpage #footer{background: #3d4150 url(../i/ft/development.jpg) 0px 0px repeat-x;}
body#chromapage #footer{background: #c38815 url(../i/ft/chroma.jpg) 0px 0px repeat-x;}
body#contactpage #footer{background: #405745 url(../i/ft/contact.jpg) 0px 0px repeat-x;}

#insole{width: 960px; height: inherit; margin-right: auto; margin-left: auto; background: url(../i/ft/insole.png) 0px 0px repeat;}
#footer p{line-height: 14px;}
#footer p a{color: #fff; padding-bottom: 1px; border-bottom: 0px;}
#footer p#email a, #footer p a.tech{border-bottom: 0px;}
#footer #panelone, #footer #paneltwo, #footer #panelthree{width: 213px; height: 90px; padding: 5px 0px 0px 29px; float: left;} /* check this for efficiency */
#footer #panelfour{width: 100px; height: 90px; padding: 5px 29px 0px 0px; float: right; text-align: right;}
#footer p{position: relative; top: 18px;}

/* Safari-only hack to cure the oddly-sitting wrapper, page-header and pagebase images */

/*\*/
 html>body*#wrapper {background-image: url(../i/safari/wrpbg.png);}
 html>body*#pageheader IMG{margin-bottom: 25px;}
 html>body*.clearing#base{background-image: url(../i/str/pagebase4safari.jpg);}
 /**/