/* -------------------------------------------------------------- * Resets default browser CSS. -------------------------------------------------------------- */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } body { line-height: 1.5; } /* Tables still need 'cellspacing="0"' in the markup. */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } table, td, th { vertical-align: middle; } /* Remove possible quote marks (") from ,
. */ blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* Remove annoying border on linked images. */ a img { border: none; } /* -------------------------------------------------------------- * Setup some sensible default typography. -------------------------------------------------------------- */ /* Default font settings. The font-size percentage is of 16px. (0.75 * 16px = 12px) */ body { font-size: 75%; color: #000; background: #FFF; font-family: Helvetica, Arial, sans-serif; } /* Headings -------------------------------------------------------------- */ h1,h2,h3,h4,h5,h6 { font-weight: normal; } h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; } h2 { font-size: 2em; margin-bottom: 0.75em; } h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; } h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; height: 1.25em; } h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; } h6 { font-size: 1em; font-weight: bold; } h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; } /* Text elements -------------------------------------------------------------- */ p { margin: 0 0 1.5em; } p img { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; } p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; } a { text-decoration: none; } blockquote { margin: 1.5em; color: #666; font-style: italic; } strong { font-weight: bold; } em,dfn { font-style: italic; } dfn { font-weight: bold; } sup, sub { line-height: 0; } abbr, acronym { border-bottom: 1px dotted #666; } address { margin: 0 0 1.5em; font-style: italic; } del { color:#666; } pre,code { margin: 1.5em 0; white-space: pre; } pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; } /* Lists -------------------------------------------------------------- */ li ul, li ol { margin:0 1.5em; } ul, ol { margin: 0 1.5em 1.5em 1.5em; } ul { list-style-type: disc; } ol { list-style-type: decimal; } dl { margin: 0 0 1.5em 0; } dl dt { font-weight: bold; } dd { margin-left: 1.5em;} /* Tables -------------------------------------------------------------- */ table { margin-bottom: 1.4em; width:100%; } th { font-weight: bold; background: #C3D9FF; } th,td { padding: 4px 10px 4px 5px; } tr.even td { background: #E5ECF9; } tfoot { font-style: italic; } caption { background: #eee; } /* Misc classes -------------------------------------------------------------- */ .small { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; } .large { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; } .hide { display: none; } .quiet { color: #666; } .loud { color: #000; } .highlight { background:#ff0; } .added { background:#060; color: #fff; } .removed { background:#900; color: #fff; } .first { margin-left:0; padding-left:0; } .last { margin-right:0; padding-right:0; } .top { margin-top:0; padding-top:0; } .bottom { margin-bottom:0; padding-bottom:0; } .accessibility { display:block; height:1px !important; left:-9999px !important; line-height:1px !important; overflow:hidden !important; position:absolute !important; top:-9999px !important; width:1px !important; } /* SITE SPECIFIC STYLES -------------------------------------------------------------- */ textarea { font-size: inherit; font-family: inherit; } #container { background:url("/img/core/header-bg.gif") #FFF repeat-x; color:#000; } /* Header */ #header { position:relative; height:125px; width:998px; margin:0 auto; padding:5px 0; background:url("/img/core/header-bg.gif") #545450 repeat-x; color:#FFF; overflow:hidden; } #header #logo { position:absolute; bottom:0; left:16px; height:62px; width:264px; } #header #logo a { display:block; height:0; width:264px; padding-top:62px; overflow:hidden; background:url("/img/core/logo.gif") no-repeat; } /* Navigation */ #header ul#navigation { list-style:none; margin:0; position:absolute; bottom:16px; left:330px; font-size:1.1em; } #header ul#navigation li { color:#FFF; list-style:none; display:inline; margin-right:1.5em } #header ul#navigation li a { color:#918B8B; } #header ul#navigation li a:hover { color:#BFBFBF; } /* Content */ #content { background:url("/img/core/logo-bottom.gif") 16px 0 no-repeat; color:#6B6B61; padding-top:35px; width:998px; min-height:490px; margin:0 auto; } #content a { color:#64ACFD; } /* Footer */ #footer { clear:both; color:#ADA9A3; width:780px; margin:60px auto 2em; padding:0 80px 0 148px; overflow:hidden; font-size:0.90em; } #footer a { color:#ADA9A3; } /* Contact details */ #footer .vcard { float:left; height:3em; line-height:3em; } #footer .vcard .org { display:none; } #footer .vcard .tel .type { display:none; } #footer .vcard img { vertical-align:middle; margin-left:0.5em; } /* Site by */ #footer #siteby { float:right; height:3em; line-height:3em; margin-left:1em; } #footer #siteby img { vertical-align:-0.2em; } /* COLLECTIONS */ #sectionCollections #content { background:url("/img/collections/border_left.gif") 0 0 no-repeat; width:801px; margin:0 auto; height:581px; padding: 0 0 0 197px } #sectionCollections #content h1 { display:none; } #sectionCollections #collectionImage { position:relative; background:url("/img/collections/border_right.gif") top right no-repeat; height:494px; width:717px; padding-right:82px; height:494px; margin-bottom:1em; } #sectionCollections #collectionImage img { margin-left:-25px; } #sectionCollections #collectionImage .bottom { display:block; position:absolute; left:0; bottom:0; background:url("/img/collections/border_bottom.gif") bottom left repeat-x; height:5px; width:717px; } #sectionCollections #collectionPagination { padding-right:85px; margin:0.5em -0.5em 0 0; height:22px; line-height:22px; font-size:0.9em; text-align:right; } #sectionCollections #collectionPagination img { vertical-align:middle; margin:0 0.5em; } #sectionCollections #collectionDetails { font-size:0.9em; margin-right:82px; text-align:right; } #sectionCollections #collectionDetails h2 { display:inline; margin:0; padding:0; font-size:1.2em; } #sectionCollections #footer { margin-top:0; } /* SECTION ABOUT */ #sectionAbout #content { padding:35px 76px 0 150px; width:772px; position:relative; } #sectionAbout #content h1 { display:block; overflow:hidden; width:190px; height:0; padding-top:59px; margin-left:-30px; background:url("/img/about/heading.gif") no-repeat; } #sectionAbout #content .copy { width:336px; float:left; } #sectionAbout #content img { float:right; } #sectionAbout #footer { padding-top:50px; } /* SECTION COMMISSIONS */ #sectionCommissions #content { padding:35px 76px 0 150px; width:772px; position:relative; } #sectionCommissions #content h1 { display:block; overflow:hidden; width:328px; height:0; padding-top:59px; margin-left:-30px; background:url("/img/commissions/heading.gif") no-repeat; } #sectionCommissions #content .copy { width:336px; float:left; } #sectionCommissions #content .copy h2 { margin-bottom:0.1em; font-size:1.2em } #sectionCommissions #content img { float:right; } #sectionCommissions #footer { padding-top:50px; } /* SECTION ENGAGEMENT */ #sectionEngagement #content { padding:35px 76px 0 150px; width:772px; position:relative; } #sectionEngagement #content h1 { display:block; overflow:hidden; width:461px; height:0; padding-top:84px; margin-left:-30px; background:url("/img/engagement-rings/heading.gif") no-repeat; } #sectionEngagement #content .copy { width:336px; float:left; } #sectionEngagement #content .copy h2 { margin-bottom:0.1em; font-size:1.2em } #sectionEngagement #content img { float:right; } #sectionEngagement #footer { padding-top:50px; } /* SECTION CONTACT */ #sectionContact #content { padding:35px 76px 0 150px; width:772px; position:relative; } #sectionContact #content #contact { width:336px; float:right; overflow:visible; } #sectionContact #content #contact h1 { display:block; overflow:hidden; width:211px; height:0; padding-top:60px; margin:0 0 19px -30px; background:url("/img/contact/heading.gif") no-repeat; } #sectionContact #content #enquiry { width:336px; left; } #sectionContact #content #enquiry h2 { display:block; overflow:hidden; width:239px; height:0; padding-top:79px; margin:0 0 0 -30px; background:url("/img/contact/enquiries.gif") no-repeat; } } #sectionContact #content label, #sectionContact #content .label { display:block; } #sectionContact #content .error-message { color:#64ACFD; font-style:italic; } #sectionContact #content .text input { width:302px; padding:0.2em 4px 0.2em 12px; color:#FFF; background:#504F4C; border:1px solid #ABABA9; } #sectionContact #content .field, #sectionContact #content .input { margin-bottom:0.6em; width:100%; overflow:auto; } #sectionContact #content .field .options { width:302px; padding:0.4em 4px 0.4em 12px; color:#FFF; background:#504F4C; border:1px solid #ABABA9; overflow:auto; } #sectionContact #content .field textarea { width:302px; padding:0.2em 4px 0.2em 12px; color:#FFF; background:#504F4C; border:1px solid #ABABA9;} #sectionContact #content .field select { width:318px; color:#FFF; background:#504F4C; border:1px solid #ABABA9;} #sectionContact #content .field .options p { font-size:0.9em; } #sectionContact #content #contactMethod .options label { display:inline; margin:0 2em 0 0.5em; } #sectionContact #content #purposeOf .options input { margin:0 0.5em 0 0; } #sectionContact #content #purposeOf .options input#EnquiryPurposeOther-PleaseSpecifyInTheMessageBox { margin-bottom:0; } #sectionContact #content #purposeOf .options label { margin-right:0.5em; } #sectionContact #content #EventNotifications { width:318px; font-size:0.96em; margin:1em 0; } #sectionContact #content #EventNotifications label { margin-right:0.5em; } #sectionContact #content div.submit { width:318px; padding:0.5em 0; margin:1em 0; border-width:1px 0; border-color:#C0C0C0; border-style:solid; overflow:auto; } #sectionContact #content div.submit input { float:right; border:none; color:#797975; background:#FFF; cursor:pointer; } #sectionContact #content #diamonds ul { margin:0; } #sectionContact #content #diamonds .options { width:294px; padding:0.4em 12px 0.4em 12px; } #sectionContact #content .diamond { list-style:none; display:block; margin-top:0.5em; padding:0.5em 0 0; width:100%; overflow:hidden; clear:both; position:relative; border-top:1px solid #C1C2BA; } #sectionContact #content .diamond:first-child { border-top:none; margin-top:0; padding-top:0; } #sectionContact #content .diamond .name { display:block; font-size:1.0em; } #sectionContact #content .diamond .attribute { float:left; font-size:0.9em; } #sectionContact #content .diamond .col1 { width:27%; clear:left; } #sectionContact #content .diamond .col2 { width:39%; } #sectionContact #content .diamond .col3 { width:34%; } #sectionContact #content .diamond input { position:absolute; top:0.5em; right:0px; } #sectionContact #content #thanks { width:650px; text-align:left; } #sectionContact #content #thanks h1 { font-size: 2em; margin-bottom: 0.75em; } #sectionContact #content #thanks strong { white-space:nowrap; } /* SECTION DIAMONDS */ #sectionDiamonds #content { padding:35px 76px 0 150px; width:810px; background-position:34px 0; position:relative; } #sectionDiamonds #content h1 { display:block; overflow:hidden; width:275px; height:0; padding-top:58px; margin-left:-30px; background:url("/img/diamonds/heading.gif") no-repeat; } #sectionDiamonds #content h2 { font-size:1.3em; margin-bottom:0.1em; } #sectionDiamonds #content h3 { font-size:1.2em; margin-bottom:0.3em; } #sectionDiamonds #content #the-selector { width:390px; float:right; } #sectionDiamonds #content #diamond-selector { width:385px; height:56px; margin-bottom:1em; overflow:visible; font-size:10px; } #sectionDiamonds #content #diamond-selector #shape-selector, #sectionDiamonds #content #diamond-selector #price-selector, #sectionDiamonds #content #diamond-selector #selector-find, #sectionDiamonds #content #diamond-selector #selector-select { height:41px; margin-bottom:15px; line-height:41px; float:left; position:relative; background:top left no-repeat; cursor:pointer; } #sectionDiamonds #content #diamond-selector #selector-select { cursor:help !important; } #sectionDiamonds #content #diamond-selector #shape-selector { width:102px; padding-left:10px; background-image:url("/img/diamonds/selector/shape.png"); } #sectionDiamonds #content #diamond-selector #shape-selector img { vertical-align:middle; } #sectionDiamonds #content #diamond-selector #price-selector { width:125px; padding-left:15px; background-image:url("/img/diamonds/selector/price.png"); } #sectionDiamonds #content #diamond-selector #selector-find { width:61px; text-align:center; font-weight:bold; color:#FFF; background-image:url("/img/diamonds/selector/find.png"); } #sectionDiamonds #content #diamond-selector #selector-select { margin-bottom:0; padding-bottom:15px; width:72px; text-align:center; cursor:auto; background-image:url("/img/diamonds/selector/select.png"); } #sectionDiamonds #content #diamond-selector .dropdown ul { line-height:1.5; z-index:10; display:none; width:123px; margin:0; padding:0 0 4px 0; position:absolute; top:41px; left:0; list-style:none; background:url("/img/diamonds/selector/dropdown-bottom.png") bottom left no-repeat;} #sectionDiamonds #content #diamond-selector .dropdown ul li { display:block; width:103px; height:19px; padding:0.1em 10px; line-height:normal; list-style:none; background:url("/img/diamonds/selector/dropdown-bg.png") repeat-y; } #sectionDiamonds #content #diamond-selector .dropdown ul li:first-child { padding-top:0.2em; } #sectionDiamonds #content #diamond-selector .dropdown ul li img { vertical-align:middle; } #sectionDiamonds #content #diamond-selector .dropdown ul li:hover { background-image:url("/img/diamonds/selector/dropdown-highlight.png"); } #sectionDiamonds #content #results { clear:both; min-height:5em; } #sectionDiamonds #content #results ul { list-style:none; margin:0; display:block; } #sectionDiamonds #content #results .diamond { list-style:none; display:block; margin-bottom:1em; width:276px; padding:0 50px 0 60px; overflow:hidden; position:relative; } #sectionDiamonds #content #results .diamond .name { display:block; font-size:1.1em; } #sectionDiamonds #content #results .diamond .name span { color:#608BA5; font-size:0.8em; font-weight:bold; margin-left:1em; } #sectionDiamonds #content #results .diamond img { position:absolute; top:0; left:0; } #sectionDiamonds #content #results .diamond .attribute { color:#ADA9A3; float:left; font-size:0.9em; } #sectionDiamonds #content #results .diamond .attribute span { color:#608BA5; } #sectionDiamonds #content #results .diamond .col1 { width:27%; clear:both; } #sectionDiamonds #content #results .diamond .col2 { width:39%; } #sectionDiamonds #content #results .diamond .col3 { width:34%; } #sectionDiamonds #content #results .diamond input { position:absolute; top:6px; right:25px; } #sectionDiamonds #content #results #addDiamonds, #sectionDiamonds #content #results #submitDiamonds { font-size:1.2em; background:#FFF; border:none; outline:none; cursor:pointer; margin-bottom:1em; display:block; float:right; clear:both; } #sectionDiamonds #content #results #addDiamonds { color:#808080; } #sectionDiamonds #content #results #addDiamonds.notify { color:#64ACFD; } #sectionDiamonds #content #results #submitDiamonds { color:#808080; } #sectionDiamonds #content #results .notice { border-top:1px #CECECE solid; color:#CECECE; font-style:italic; margin:0.5em 0 3em; padding-top:0.5em; clear:both; } #sectionDiamonds #content .copy { width:370px; margin:0 50px 2em 0; float:left; } #sectionDiamonds #content .copy #readMore { display:none; } #sectionDiamonds #content .copy table { font-size:0.8em; border-collapse: collapse; border-spacing:0; border: 1px #6699CC solid;} #sectionDiamonds #content .copy table td { border:1px solid #000; vertical-align:top; } #sectionDiamonds #content .copy table td.c1 { font-weight:bold; }