@charset "utf-8";

/* import other styles here */
@import "zoomimage.css";

/* temp email while I get the contact form working */
ul.plain {margin-left:50px;}

/* custom type */
@font-face {
font-family: "Titillium thin";
src: url("../type/TitilliumTitleThin.eot"); /* IE is a big fag that can't handle "format" */
}
@font-face {
font-family: "Titillium 250";
src: url("../type/TitilliumText250wt.eot"); 
}
@font-face {  
font-family: "Titillium thin";    
src: url("../type/TitilliumTitleThin.otf") format('opentype');  
} 
@font-face {  
font-family: "Titillium 250";    
src: url("../type/TitilliumText250wt.otf") format('opentype');  
} 



/* style reset */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img,form,label,input,textfield, { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

body {background:#444; font-size:100%;}

/* get type consistant */
body, a, p, h1, h2, h3, ul, li, input, textarea, label {color:#fff; font-family:Arial, Helvetica, sans-serif;  }

/* reset a styles */
a.first {margin-left:50px;}
a:hover {border-bottom:#fff solid 1px;}
a.grey:hover {border-bottom:#555 solid 1px;}
a:active {border-bottom:#fff solid 1px;}
a#currentpage {border-bottom:#fff solid 1px; cursor:default; }
a#currentpage.grey {border-bottom-color:#666;}

h1 {font-weight:normal; font-family: "Titillium 250", Arial, Helvetica, sans-serif; font-size:30px;}
h2 {font-weight:normal; font-family:"Titillium 250", Arial, Helvetica, sans-serif; font-size:24px;}
p {font-size:12px; line-height:18px; margin-bottom:9px; }


/* stuff on most pages */
.content {width:960px; margin-left:auto; margin-right:auto; overflow:hidden;}
.header {background:#030303 /*url(../images/header-bkgd.jpg) top left repeat-x*/; height:120px; width:100%; margin-left:auto; margin-right:auto; overflow:hidden;}
.side-text {width:190px; float:left;padding:40px 40px 50px 45px; background:url(../images/text-bkgd.png) bottom left no-repeat;}
.page-photos, .main-text {float:left; margin:40px 0 50px 50px; width:600px; }

/* contact form magic */
.contact-hider { background:#030303;  border-bottom:#5f5f5f solid 1px; overflow:hidden; }
#contact-form {background:url(http://www.craigwinton.com/images/form-bkgd.png) top left no-repeat; display:none; padding:10px 20px 20px 45px;  width:895px; margin-left:auto; margin-right:auto; overflow:hidden;}
#contact-form .details {width:230px; float:left;}
#contact-form form {width:590px; float:left; margin:0 0 0 50px; }
#contact-form ul {float:left;}
#contact-form li {position:relative; width:270px; } /* so we can do clever stuff with labels */
#contact-form li.send {margin:0 0 0 50px; } /* so we can do clever stuff with labels */
#contact-form label, #contact-form input, #contact-form textarea {font-size:12px; }
#contact-form input, #contact-form textarea {border:#fff solid 1px; }
#contact-form label {color:#666; position:absolute; top:0px; left:0px; padding:6px 5px 7px; border:1px solid #fff; background:#fff; }
#contact-form input {color:#000; width:258px; padding:6px 5px 7px; margin-bottom:10px;  }
#contact-form .msg { margin:40px 0 10px 50px;  }
#contact-form textarea {color:#000; width:258px; padding:6px 5px 7px; height:95px;}
#contact-form h2 {line-height:36px; font-size:21px; padding-top:4px;}
#contact-form h2, #contact-form p {width:190px;}
#contact-form .validation {width:10px; height:10px; position:absolute; top:5px; right:5px; background:url(../images/validation.png) 0 -1px no-repeat;}
#contact-form .tick {background-position:0 -11px; }
#contact-form .error {border:#777 dashed 1px;}
#contact-form .errormsg {font-size:12px;}
input#submit { background:url(../images/sections-arrow.png) no-repeat scroll 10px center #222222; color:#FFFFFF; font-family:"Titillium thin",Arial,Helvetica,sans-serif; font-size:24.5px; padding-left:20px; width:200px; border:none; border-bottom:#fff solid 1px; cursor:pointer;/*opacity:0.75;*/}
#thanks {float:left; margin: 0 0 0 50px; width:590px;}
#thanks h2 {width:500px;}

/* no-js contact form */
.plain-contact li {margin-bottom:15px; overflow:hidden;}
.plain-contact label {padding:6px 5px 7px; width:100px; display:block; float:left;}
.plain-contact input, .plain-contact textarea {padding:6px 5px 7px; margin-bottom:10px; font-size:12px; width:280px; color:#000; }
.plain-contact li.send {}
.plain-contact input#cfsubmit {width:auto; padding:5px 10px; margin-left:100px; color:#000; }

/* navigation */
.navigation {margin-left:auto; margin-right:auto; width:960px;}
.navigation li {font-size:16.5px; font-family:"Titillium 250", Arial, Helvetica, sans-serif; float:left; display:block; }
.navigation li.home {width:240px; margin:0; padding:0 25px 0 15px;  background:url(../images/title-bkgd.jpg) 5px top no-repeat; position:relative; }
.navigation li.home a {margin:52px 0 38px 30px; line-height:29px; padding-bottom:4px;}
.navigation div.jewellery {color:#fff; background:#000 url(../images/j-bkgd.png) top left repeat; left:142px; padding:0 3px; position:absolute; top:76px;}
.navigation a {color:#fff; font-family:"Titillium 250", Arial, Helvetica, sans-serif; text-decoration:none; margin:56px 0 40px 30px; line-height:29px; display:block; float:left; }
.navigation a.first {margin-left:50px; }
a.grey {color:#a0a0a0;}

/* homepage photos stuff */
.page-photos li {/*float:left; margin:40px 0 50px 50px; this is messing up the info dropdown */} 
.big a.link {font-family:"Titillium thin", Arial, Helvetica, sans-serif; font-size:24.5px; padding: 6px 20px 10px 40px; background:#222 url(../images/sections-arrow.png) 10px center no-repeat; float:right; clear:both;/*opacity:0.75;*/ margin:0; text-decoration:none; border-bottom:#a0a0a0 solid 1px;}
.big a.link:hover {border-bottom:#fff solid 1px;}
.big img {border:#fff solid 5px; float:right; display:block;  -moz-box-shadow:0 0 10px #111; -webkit-box-shadow:0 0 10px #111;}

/* stuff on mostly text pages */
.Events li, .About li {margin-bottom:30px;}
.Events a {font-size:12px;}
.Events, .About {width:400px;}

/* stuff for photos of pieces */
#Rings, #Brooches, #Necklaces, #Earrings { font-size:12px; line-height:18px;}
.highest {z-index:100;}
.hide {display:none;}
ul.info {position:absolute; top:150px;  left:0; display:none; background:#333; border:1px solid #232323;}
ul.i-no-js {position:relative; top:auto; left:auto; display:block; overflow:hidden;  }
li.pieces {margin:0 50px 40px 0; float:left; width:150px; position:relative; height:160px; background:#333;  }
li.p-no-js {height:auto;}
li.title {font-weight:bold; margin:5px;  }
li.description {border-bottom:#666 solid 1px; margin:5px; padding-bottom:9px; }
li.d-no-js {height:50px;}
li.txt {width:54px; float:left; margin-left:5px;}
li.price {width:84px; float:left; margin-right:5px; text-align:right; margin-bottom:9px;}
img.photo-shadow {padding:5px; background:#fff; -moz-box-shadow:0 0 10px #111; -webkit-box-shadow:0 0 10px #111; box-shadow:0 0 10px #111;}
.trigger {cursor:pointer; position:absolute; top:0; left:0; z-index:100; padding: 121px 30px 20px 30px; border:0;}