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

version:   Sheila Cook V05 June 6 - August 15 2008
author:    Duncan Marshall
updated:   August 12 2010
email:     dm@chromadesign.co.uk
website:   http://www.chromadesign.co.uk

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

* {margin: 0; padding: 0;}
html{height: 102%;}
a{outline:none; text-decoration: none; border: none; color: blue;}
a IMG{border:none;}
body {background: #fff url(../i/str/bdbg04a.jpg) top center repeat-x fixed; font-family: "Palatino Linotype", Georgia, times, serif; font-size: 12px; line-height: 24px; text-align: center; color: #09121c;}

#wrapper{width: 980px; height: auto; margin: auto;}
#navigation{width: 980px; height: 28px;}
#navigation ul{float: left; list-style-type: none;}
#navigation ul li{float: left; height: 28px;}

#navigation ul li#home a{width: 58px; background-image: url(../i/nv/home.jpg);}
#navigation ul li#links a{width: 58px; background-image: url(../i/nv/links.jpg);}
#navigation ul li#contact a{width: 68px; background-image: url(../i/nv/contact.jpg);}
#navigation ul li#costume a{width: 74px; background-image: url(../i/nv/costume.jpg);}
#navigation ul li#fabric a{width: 145px; background-image: url(../i/nv/fabric.jpg);}
#navigation ul li#shawls a{width: 128px; background-image: url(../i/nv/shawls.jpg);}
#navigation ul li#embroideries a{width: 102px; background-image: url(../i/nv/embroideries.jpg);}
#navigation ul li#accessories a{width: 86px; background-image: url(../i/nv/accessories.jpg);}
#navigation ul li#jewellery a{width: 178px; background-image: url(../i/nv/jewellery.jpg);}
#navigation ul li#rare a{width: 83px; background-image: url(../i/nv/rare.jpg);}

#navigation ul li a{display: block; height: 28px; background-repeat: no-repeat;}
#navigation ul li a span{position: relative; left: -3000px;}
#navigation ul li a,
a:link
a:visited
a:active{background-position: 0px -28px;}
#navigation ul li a:hover{background-position: 0px 0px;}
#navigation ul li a.crt{background-position: 0px 0px;}


#banner{width: 980px; height: 42px; background: url(../i/str/banner_02.jpg) 0px 0px no-repeat;}
#content{position: relative; width: 980px; height: auto;}
.clear{width: inherit; height: 1px; clear: both;}
body#linkspage .clear{margin-bottom: 10px;}
body#linkspage .clear .short{margin-bottom: 0px;}

/* Home page thumbs - padding = full bg width minus image width, divided by two, minus 1px for image border */
.thb{background: 0px 0px repeat; display: block; position: absolute;}
.thb#one /* full bg image 296px x 296px */
{z-index: 700; padding: 25px; width: 244px; height: 244px; top: 10px; left: -10px;}
.thb#two /* full bg image 230px x 230px */
{z-index: 600; padding: 22px; width: 184px; height: 184px; top: 127px; left: 175px;}
.thb#three /* full bg image 180px x 180px */
{z-index: 500; padding: 18px; width: 142px; height: 142px; top: 215px; left: 315px;}
.thb#four /* full bg image 130px x 130px */
{z-index: 400; padding: 14px; width: 100px; height: 100px; top: 405px; left: 440px;}
.thb#five /* full bg image 180px x 180px */
{z-index: 500; padding: 18px; width: 142px; height: 142px; top: 285px; left: 502px;}
.thb#six /* full bg image 232px x 232px */
{z-index: 600; padding: 23px; width: 184px; height: 184px; top: 145px; left: 596px;}
.thb#seven /* full bg image 282 x 282px */
{z-index: 700; padding: 25px; width: 230px; height: 230px; top: -12px; left: 707px;}
.thb IMG{border: 1px solid #fff;}


/* catalogue image background */
#image_topper{width: 528px; height: 36px; background: url(../i/str/image_topper_06.png) top center no-repeat; position: relative; left: -19px;}
#image_body{width: 528px; height: auto; background: url(../i/str/image_body_06.png) top center repeat-y; position: relative; left: -19px;}
#image_body IMG{border: 1px solid #9A989E;}
#image_bottom{width: 528px; height: 36px; clear: both; background: url(../i/str/image_bottom_06.png) bottom center no-repeat; position: relative; left: -19px;}

/* split the page between image and text  - some elements here re-used for Contact page */
.wrp#left{width: 490px; float: left; margin-top: 3px; }
.wrp#right{width: 470px; float: right; text-align: left; margin-top: 33px; font-family: "Palatino Linotype", Georgia, times, serif; color: #513f3f;}

h4{text-align: left; margin: 0px 0px 0px 0px; font-size: 16px; line-height: 18px;}
h5{text-align: left; margin: 0px 0px 18px 0px; font-size: 13px;}
p.size{font-size: 12px; text-align: left; margin: 0px 0px 0px 0px;}
p.condition{font-size: 12px; text-align: left; margin: 0px 0px 18px 0px;}
p{font-size: 12px; line-height: 18px; margin-bottom: 12px;}
/* Zoom and Enquire Links */
p.zoom{margin-bottom: 6px;}
p.zoom a, a:link a:visited a:active{display: block; width: 74px; font-size: 11px; border: 1px solid gray; color: gray; text-align: center;}
p.zoom a:hover{background: #fff; color: #5d3e3c;}

/* other items in gallery sit in block on right */
#minithbs{width: 222px; float: right; margin-left: 10px;}
#minithbs a{float: left; width: 70px; height: 70px; margin: 0px 0px 3px 3px; background-image: url(../i/str/minithb_bg_04.png);}
#minithbs a,
a:link
a:visited
a:active{background-position: 0px -70px; background-repeat: no-repeat;}
#minithbs a:hover{background-position: 0px 0px;}
#minithbs a IMG{margin: 5px 0px 0px 5px;}
.miniclear{width: 222px; height: 1px; clear: both;}
/* some legacy elements here - investigate */
#minithbs ul{ float: right; margin-right: 3px;}
#minithbs ul li{float: left; padding: 0px 0px 0px 0px; font-size: 10px;}
#minithbs ul li a{background-repeat: no-repeat; width: 10px; height: 18px; padding: 0px 5px 2px 5px;}
#minithbs ul li a span{position: relative; left: -3000px;}
#minithbs ul li a,
a:link
a:visited
a:active{background-position: 0px -20px;}
#minithbs ul li a:hover, #minithbs ul li a.crt{background-position: 0px 0px;}

/* page numbers - legacy issue here - some elements are controlling the rounded 'other images' boxes */
ul#roam{clear: both; list-style-type: none; float: right; height: 22px; padding: 0px; margin-right: 5px; text-align: center;}
#minithbs ul#roam li{display: block; line-height: 22px; width: 22px; height: 22px; margin-right: 6px;}
#minithbs ul#roam li#pages{width: 40px; font-size: 13px; margin-right: 0px;}
#minithbs ul#roam li a{display: block; width: 22px; height: 22px; background-image: none; padding: 0px 1px 0px 1px; font-size: 11px;}
#minithbs ul#roam li a,
a:link
a:visited
a:active{border: 1px solid #c8c5c5; color: #ddd; color: #939191;}
#minithbs ul#roam li a:hover, #minithbs ul#roam li a.crt{border: 1px solid #939292; background: #fff; color: #a60000;}

/* to control the images behind each of the five galler page indicators 
#minithbs ul#roam li#one a{background-image: url(../i/nos/one.gif);}
#minithbs ul#roam li#two a{background-image: url(../i/nos/two.gif);}
#minithbs ul#roam li#three a{background-image: url(../i/nos/three.gif);}
#minithbs ul#roam li#four a{background-image: url(../i/nos/four.gif);}
#minithbs ul#roam li#five a{background-image: url(../i/nos/five.gif);}*/

#footer{margin: auto; width: 980px; height: 40px; text-align: left; position: relative; background: url(../i/str/footer03.png) 0px 0px no-repeat;}
#footer span{position: relative; left: -3000px;}
#footer p{font-size: 10px; color: #542626;}

/* Links Page */
div.links{position: relative; left: -10px;}
body#linkspage{text-align: left; color: #09121c;}
body#linkspage #content{padding-top: 20px;}
.lnkwrp{width: 472px; float: left; margin-right: 18px; margin-bottom: 20px;}
.lnkimg{float: left; clear: right; width: 160px; height: 160px; margin: 0px 10px 0px 0px; background: url(../i/str/linkbg.png) 0px 0px no-repeat; padding: 19px 20px 20px 19px;}
.lnkimg IMG{border: 1px solid #d7dbe2;}
/* headings 'n' stuff */
body#linkspage h3{margin: 0px 0px 7px 15px; color: #5b2427; font-size: 14px; line-height: 14px;}
body#linkspage h4{margin: 10px 0px 10px 0px; color: #5b2427; font-size: 14px; line-height: 18px;}
body#linkspage p{font-size: 12px; color: #513f3f;}
p.link a, span.link a{background-image: url(../i/str/arrow.gif); background-repeat: no-repeat;}
p.link a,
span.link a,
a:link
a:visited
a:active{padding-left: 15px; color: #5b2427; text-decoration: none; border-bottom: 1px solid #8d8b8c; background-position: 0px 7px;}
p.link a:hover, span.link a:hover{padding-bottom: 0px; padding-left: 15px; color: #2e181a; text-decoration: none; border-bottom: 1px solid #2e181a; background-position: 0px -12px;}

/* Contact Page and Form */
body#contactpage #content{padding-top: 20px; height: 600px;}
p.about{text-align: justify; color: #3b2e2e; padding-left: 2px;}
body#contactpage IMG{border: 1px solid #aaa; margin-top: 10px;}
body#contactpage .wrp#left{margin-top: 0px;}
body#contactpage .wrp#paramap{float: left; width: 490px;}
body#contactpage .wrp#paramap p.intouch{text-align: justify; width: inherit; color: #3b2e2e; margin-bottom: 22px; padding-left: 2px;}
body#contactpage .wrp#right{float: right; width: 420px; margin: 10px -20px 0px 0px;}
body#contactpage.map .wrp#right{width: 440px; margin-top: 20px; margin-left: 30px;}
body#contactpage .wrp#address{float: right; width: 400px; margin: 0px 0px 0px 0px; color: #3b2e2e; text-align: left;}
body#contactpage .wrp#address span.hyphen{margin: 0px 4px 0px 4px;}
#lowerwrapper{width: inherit; height: 500px;}
#form{text-align: left;}
#form p{color: #000; margin: 0px 0px 0px 0px;}
#form p.label{margin: 0px 0px 2px 0px; padding: 0px 0px 0px 2px; color: #635c5c;}
#form input{width: 410px; background-color: #fff !important;}
#form input#name, #form input#email{border: 1px solid #aaa;}
#form input#send{width: 150px; margin-top: 5px;}
textarea{width: 410px; height: 220px; background-color: #fff !important; border: 1px solid #aaa;}
body#contactpage .warning {font-weight: bold; color: red;}

p#chroma a,
a:link
a:visited
a:active{color: #660033; border-bottom: 1px solid #ddd;}
p#chroma a:hover{color: #a60000; border-bottom: 1px solid #a60000;}