/*-------------------------------------------------------------------------- - Basic Style Sheet Version: 1.0 Author: springNET Website: www.creativetouches.net *** Last Modify Date: 15/04/2008 ( Danny ) *** --------------------------------------------------------------------------*/ /* Structure =Colour Scheme =Global =Typography =Headings =Links =Access Keys / Jumps =Forms =LayoutStructure - header - navigation - p-content - s-content - footer =Shared Styles =header =p-content ( insides ) =s-content ( insides ) =footer ( insides ) --------------------------------------------------------------------------*/ /* =Colour Scheme --------------------------------------------------------------------------*/ /* =Global --------------------------------------------------------------------------*/ * { margin: 0; padding: 0; } body { line-height: 1.4; background-color: #000; } .clearme { clear: both; } .hideme { display: none; } /* visibility: hidden; could be used here instead depends what you need */ .left { float: left; } .right { float: right; } acronym { speak: normal; } abbr { speak: spell-out; } /* =Typography * * Use this section for general type styles --------------------------------------------------------------------------*/ html { font-size: 100.01%; } body { font-size: 1em; font-family: Georgia, Times, Arial, serif; color: #fff; } #p-content { } #s-content { } /* Freeform - normally we have freeform wrapped inside a container of some sort */ .freeform { } .freeform p { } .freeform ul { } .freeform ol { } /* needs slightly bigger left margin than ul */ .freeform a, .freform a:hover { } .freeform img { margin: 5px; } /* CSS3 selectors, for the good browsers */ .freeform img[align=left] { margin-left: 0; } .freeform img[align=right] { margin-right: 0; } /* =Headings --------------------------------------------------------------------------*/ h1, h2 { font-size: 1.1em; margin: 0 0 6px 0; font-family: Georgia, "Times New Roman", Times, serif } h3, h4, h5, h6 { font-size: 0.75em; } h3, h4 { color: #FD47B5; margin: 0 0 3px 0; } /* =Links * * LVHA ( :link / :visited / :hover / :active ) - important due to the way CSS handles cascade / ordering. --------------------------------------------------------------------------*/ a { color: #fff; } a:link { } a:visited { } a:hover, a:active, a:focus { } a img { border: none; } /* =Access Keys / Jumps --------------------------------------------------------------------------*/ /* =Forms --------------------------------------------------------------------------*/ fieldset { border: none; } legend { display: none; } label { cursor: pointer; } input, select, textrea { font-family: inherit; font-size: 1em; } fieldset.sameline-pod { width: 300px; clear: both; margin: 10px 0 3px 0; } fieldset.sameline-pod ol { width: 300px; float: left; } fieldset.sameline-pod li { margin: 0 0 5px 5px; width: 300px; float: left; clear: both; list-style: none; } fieldset.sameline-pod li label { float: left; clear: both; color: #fff; display: block; margin: 0 0 2px 0; font-weight: bold; } fieldset.sameline-pod li input { float: left; clear: both; width: 246px; color: #00AEEF; background-color: #000; font-size: 11px; padding: 2px; border: 1px solid #1F1F1F; } sameline-pod li input:hover { border-color: #333333; } .sameline-pod li input#submit { border: 0!important; width: 65px; height: 24px; margin: 2px 0; } fieldset.sameline-pod li textarea { float: left; clear: both; background-color: #000; border: 1px solid #1F1F1F; font-size: 11px; width: 246px; padding: 2px; color: #00AEEF; font-family: Georgia, "Times New Roman", Times, serif; } fieldset.sameline-pod strong { font-weight: bold; } fieldset.sameline-pod li strong.error { color: #FF3C3C; } div.comments strong { margin: 3px 0; color: #FFFF99; display: block; } /* =LayoutStructure --------------------------------------------------------------------------*/ #sitecontainer { width: 817px; font-size: 1em; margin: 0 auto; padding-bottom: 35px; } #header { width: 817px; float: left; height: 533px; background-color: yellow; position: relative; } ul#navigation { width: 817px; height: 49px; clear: both; float: left; margin: 255px 0 17px 0; } ul#banner { float: left; width: 817px; height: 217px; clear: both; } #contentcontainer { width: 817px; margin: 30px 0 40px 0; float: left; clear: both; } #p-content { width: 429px; padding: 0 33px 0 17px; margin-right: 5px; float: left; } div.full-page { width: 762px !important;} /*for gallery*/ #s-content { width: 333px; margin-top: -10px; float: right; } #footer { width: 817px; float: left; clear: both; } /* =Shared Styles * * If you find your re-using the same styles on certain elements * put them here --------------------------------------------------------------------------*/ /* =header --------------------------------------------------------------------------*/ #header { background: url(../img/ct-logo.jpg) top center no-repeat; } a.logo { width: 443px; height: 192px; position: absolute; left: 188px; top: 10px; text-indent: -9999em; } /* =navigation --------------------------------------------------------------------------*/ ul#navigation { list-style-type: none; font-size: 1.1em; font-style: italic; height: 48px; width: 819px; overflow: hidden; position: relative; } ul#navigation li { float: left; } ul#navigation li a { display: block; float: left; color: #8b898a; text-decoration: none; text-indent: -9999em; } ul#navigation li a:hover { color: #fff; } ul#navigation li a.active { font-weight: bold; color: #fff; } ul#navigation li.home a { width: 94px; height: 48px; background-image: url(../img/nav/home.png); background-position: top left; background-repeat: no-repeat; } ul#navigation li.home a:hover, ul#navigation li.home a.active { background-position: 0 -48px; } ul#navigation li.about a { width: 105px; height: 48px; background-image: url(../img/nav/about.png); background-position: top left; background-repeat: no-repeat;} ul#navigation li.about a:hover, ul#navigation li.about a.active { background-position: 0 -48px; } ul#navigation li.services a { width: 118px; height: 48px; background-image: url(../img/nav/services.png); background-position: top left; background-repeat: no-repeat;} ul#navigation li.services a:hover, ul#navigation li.services a.active { background-position: 0 -48px; } ul#navigation li.gallery a { width: 131px; height: 48px; background-image: url(../img/nav/gallery.png); background-position: top left; background-repeat: no-repeat; } ul#navigation li.gallery a:hover, ul#navigation li.gallery a.active { background-position: 0 -48px; } ul#navigation li.test a { width: 181px; height: 48px; background-image: url(../img/nav/testimonial.png); background-position: top left; background-repeat: no-repeat;} ul#navigation li.test a:hover, ul#navigation li.test a.active { background-position: 0 -48px; } ul#navigation li.links a { width: 90px; height: 48px; background-image: url(../img/nav/links.png); background-position: top left; background-repeat: no-repeat;} ul#navigation li.links a:hover, ul#navigation li.links a.active { background-position: 0 -48px; } ul#navigation li.contact a { width: 100px; height: 48px; background-image: url(../img/nav/contact.png); background-position: top left; background-repeat: no-repeat;} ul#navigation li.contact a:hover, ul#navigation li.contact a.active { background-position: 0 -48px; } /* Banner */ ul#banner { list-style-type: none; } ul#banner li { display: inline; } ul#banner li a { float: left; width: 104px; height: 104px; margin: 0 5px 0 0; border: 1px solid #8b898a; display: block; } ul#banner li a:hover { border-color: #bebebe; } ul#banner li.main a { width: 477px; height: 215px; margin: 0 5px 0 0; } ul#banner li.alt a { margin-right: 0; width: 104px; } ul#banner li.top a { margin-bottom: 5px;} /* =p-content --------------------------------------------------------------------------*/ #p-content h1, #p-content h2 { color: #FD47A2; } #p-content p { font-size: 0.93em; color: #FBFBFB; padding-left: 3px; margin-bottom: 9px; line-height: normal; } #p-content ul { list-style-type: disc; margin: 4px 0 4px 6px; } #p-content ul li { font-size: 0.87em; list-style-position: inside; } #p-content li em, #p-content p em { padding: 0 0 1px 0; margin: 0 3px; font-style: normal; color: #BFBFBF; font-weight: bold; } #p-content li em:hover, #p-content p em:hover { color: #479AFD; } #p-content blockquote.tag { margin-bottom: 15px; font-size: 0.93em; } #p-content h2.first, #p-content h3.first { color: #fff; font-weight: bold; font-size: 0.98em; margin-bottom: 7px; } span.star { padding-left: 25px; background: url(../img/h2_star.gif) 5px 15% no-repeat; } /* Testimonial Page*/ ul#testimonial { margin: 35px 0; } ul#testimonial li { list-style-type: none; margin: 12px 0; padding: 12px 12px 15px 12px; border-bottom: 1px dashed #0f0f0f; } ul#testimonial li h3 { font-size: 1.1em; color: #00aeef; } ul#testimonial li a.readmore { color: #ccc; text-decoration: none; color: #fff; font-size: 0.85em; } ul#testimonial li a.readmore:hover { color: #e31c70; } ul#testimonial li.alt { } /* Useful Links*/ ul#useful-links { margin: 35px 0; } ul#useful-links li { list-style-type: none; margin: 6px 0; background: url(../img/links-star.png) left 5px no-repeat; padding: 5px 0 5px 27px; } ul#useful-links li a { text-decoration: none; } ul#useful-links li a:hover { color: #CCCCCC; } #useful-links li.alt { background-image: url(../img/links-star-alt.png); color: #E9E9E9; } #useful-links li:hover { background-image: url(../img/links-star-hover.png); } /* Gallery Page */ ol#gallery { float: left; } #gallery li { list-style-type: none; float: left; margin-bottom: 15px; } ul.gallery-nested { float: left; } ul.gallery-nested li { float: left; 0 0; border: 1px solid #8b898a; display: block; margin: 0 8px 8px 0; } ul.gallery-nested li a { display: block; width: 104px; height: 104px; float: left; } ul.gallery-nestedli a:hover { border-color: #bebebe; } #gallery h4 { color: #FBFD47; margin: 10px 0; } /* =s-content --------------------------------------------------------------------------*/ #s-content p { font-size: 0.93em; color: #FBFBFB; } #s-content h2, #s-content h2 a { color: #00aeef; text-decoration: none; font-size: 1em; } #s-content h2 a:hover { color: #87d1ec; } #s-content ol li, #s-content ul li { list-style-type: none; } /* Pods */ div.pod { font-size: 0.87em; margin: 0 0 15px 0; position: relative; padding: 0; background: #000 url(../img/pods/pod-top.jpg) top left no-repeat; width: 337px;} div.pod h2 { width: 319px; padding: 14px 6px 0 15px;} div.pod div.pod-content { background: url(../img/pods/pod-bottom2.jpg) bottom left no-repeat; margin-top: 0; padding-top: 8px; z-index: 9999; padding: 8px 6px 25px 15px; width: 319px; } .pod-content a { color: #00aeef; } .pod-content a:hover { text-decoration: none; } .pod-content blockquote, #testimonial li blockquote { color: #fbfbfb; font-size: 0.85em; padding: 0 18px 0 0; margin: 8px; position: relative; font-style: italic; } .pod-content blockquote strong, #testimonial li blockquote strong { font-size: 18px; font-weight: bold; color: #00aeef; } .pod-content address { color: #fff; font-size: 0.85em; margin: 8px; } .pod-content address a { font-style: normal; } .pod-content address strong { font-style: normal; color: #00aeef; } .pod-content a.client { font-weight: bold; color: #fff; text-decoration: none; font-size: 11px; float: right; margin: -10px 13px 2px 0; position: relative; z-index: 100; } .pod-content a.client:hover { text-decoration: underline; } .pod-content ol { list-style-type: none; } span.splat { display: block; width: 66px; height: 72px; background: url(../img/pods/pod-splat.png) bottom right no-repeat; position: absolute; bottom: -2px; right: -3px; z-index: 99; } span.splat2 { display: block; width: 48px; height: 48px; background: url(../img/pods/pod-splat2.png) bottom right no-repeat; position: absolute; bottom: 4px; right: 12px; z-index: 99; } span.test-star { position: absolute; top: 46px; left: 29px; display: block; background:url(../img/address_star.png) 0 15% no-repeat; width: 21px; height: 20px; } span.first { } /* =footer --------------------------------------------------------------------------*/ #footer { clear: both; margin: 10px 10px 0 10px; float: left; height: 70px; /*background: url(../img/footer.png) bottom left no-repeat;*/ } #footer p { float: left; width: 300px; color: #fff; font-size: 9px; margin: 50px 0 0 10px; } #footer p a { text-decoration: none; } #footer p a:hover { color: #AFCFE0; } /* =lightbox --------------------------------------------------------------------------*/ #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} #lightbox img{ width: auto; height: auto;} #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url(/images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(/images/nextlabel.gif) right 15% no-repeat; } #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; } #imageData{ padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }