/* ChopChop Theme V2 http://www.chopchop.co.nz/ Author: Alex Gilks */ /* LAYOUT */ *{ margin: 0; padding: 0; font-family: Georgia, Palatino, Times, serif; color:#606060; } .clear{ clear: both; } html{ background: #d8d2ca; } #page-outer{ margin: 0 auto; width: 960px; background: url('/images/sidepage-fence.png') #ebebeb; position: relative; } #page{ margin: 0 auto; width: 952px; background: #dee6e8; } #header{ position: relative; background: url('/images/header-new.jpg') no-repeat; width: 952px; height: 118px; } #header h1{position: absolute; top: 33px; left: 0; height: 59px; width: 200px; } #header a{ display: block; height: 100%; width: 100%; text-indent: -9999px; font-size: 0; } #top{ width: 100%; height: 504px; background: url('/images/horiz-shadow.png') no-repeat bottom; } #left{ width: 365px; height: 493px; background: #fff; float: left; overflow: hidden; position: relative; } #centre{ width: 342px; height: 493px; background: #fff; float: left; position: relative; overflow: hidden; } #right{ width: 245px; height: 493px; background: url('/images/sidebar-gradient.png') repeat-x #e7e4d0; float: left; overflow: hidden; } #left .content{ background: url('/images/toothpicks.png') no-repeat 0 54px; height: 453px; padding: 50px 80px 40px 40px; } #left a.next-link{ position: absolute; left: 20px; bottom: 20px; } #centre #feature-img-overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('/images/gallery-shadows.png') no-repeat left; } #centre #feature-img{ width: 342px; left: 0px; position: absolute; } #centre #feature-img img{ position: absolute; right: 0; top: 0;} #centre #feature-img img.animation{ position: absolute; right: 342px; top: 0; } #right .content{ border-left: 8px solid #c1d7d5; height: 453px; position: relative; } #right ul{ list-style: none; padding: 20px; position: absolute; top: 0; left: 0; } #right ul li{ margin-top: 4px; } #right ul li a, #left a.next-link, #testimonials-next{ padding-left: 23px; background: url('/images/greenarrow2.gif') no-repeat left top; } #right ul li a:hover, #left a.next-link:hover, #testimonials-next:hover{ background-position: 0 -28px ; } #top h3.heading{ background: #bcae9a; width: 100%; height: 40px; color: #fff; font-weight: bold; letter-spacing: -0.5px; line-height: 40px; text-indent: 15px; } #top #right h3.heading{ background: #85abbe; } #bottom{ position: relative; background: #fff; overflow: hidden; width: 952px; } #bottom #blurb-1{ float: left; padding: 32px; width: 232px; background: url('/images/dividers.png') no-repeat right; } #bottom #blurb-2{ float: left; padding: 32px; width: 232px; } #bottom #contact{ position: absolute; right: 0; top: 0; padding: 32px; width: 296px; height: 400px; background: url('/images/yellow-gradient.png') repeat-x top right #fbed9f; } #bottom #blurb-1 a, #bottom #blurb-2 a{ line-height: 20px; height: 20px; } #footer{ background: url('/images/zigzag-bar.png') no-repeat top; clear:both; padding: 16px 0 45px 0; width: 100%; text-align: center; font-size: 10px;} /* CONTENT STYLES */ h1{ padding: 0px 0px 10px 0px; font-family: Cambria, Georgia, Palatino, serif; font-size: 20px; font-style: normal; line-height: 22px; color: #d84f2c; letter-spacing: -0.6px; font-weight: bold;} h2{ padding: 0px 0px 5px 0px; font-size: 16px; font-style: italic; line-height: 20px; color: #b2a18a; letter-spacing: -0.6px; font-weight: normal; } h3{ font-family: Arial, Verdana, sans-serif; font-weight: bold; font-size: 13px; line-height: 20px; color: #d84f2c; letter-spacing: -0.6px; } h4{ font-size: 16px; font-style: italic; font-weight: bold; color: #85abbe; letter-spacing:-0.6px; } h5{ font-family: Arial, Verdana, sans-serif; font-weight: normal; font-size: 9px; color: #85abbe;} #content p, div.contact label, div.contact textarea{ font-size: 13px; line-height: 20px; color: #7c705f; padding-left:10px; letter-spacing:0.5px; } #bottom p{ letter-spacing:0px; } a{ font-family: Georgia, Palatino, Times, serif; font-size: 11px; font-weight: bold; color: #91a236; letter-spacing: -0.6px; line-height: 16px; text-decoration: none; } a:hover{ color: #5c6d19; } a.secondary-link{font-size: 11px;} a, a:link, a:active, a:visited{ outline: none; } /* MODAL */ body{ position: relative; } #modal-bg{ display: none; position: absolute; bottom: 0; left: 0; width: 100%; height: 2000px; background: #000; z-index: 4;} #modal-container{ display: none; position: absolute; top: 50%; left: 50%; height: 340px; width: 536px; z-index: 5; margin: -170px 0 0 -268px; } #modal-color{ background: #fff; position: absolute; top: 21px; left: 25px; width: 495px; height: 302px; } .testimonials #modal-color{ background: #e4faff; } .contact #modal-color{ background: #fff6c3; } #modal-border{ background: url('/images/modal-try.png') no-repeat; position: absolute; top: 0; left: 0; height: 340px; width: 536px;} #modal-content{ position: absolute; left: 28px; top: 24px; width: 489px; height: 296px; } #modal-close{ position: absolute; width: 26px; height: 26px; left: 8px; top: 8px; outline: none; } /* TESTIMONIALS */ #modal-content div.testimonials{ display: none; margin: 46px 120px 0 46px; } .testimonials #modal-content div.testimonials{ display: block; } #testimonials-next{ position: absolute; left: 342px; bottom: 32px; } p.testimonials{ font-size: 18px; font-style: italic;line-height: 22px; color: #b2a18a; letter-spacing: -0.5px; } p.client{ font-size: 14px; font-weight: bold; line-height: 18px; color: #85abbe; letter-spacing: 0.5px; padding: 10px 0 0 10px; } p.organisation{ font-size: 14px; line-height: 18px; color: #85abbe; letter-spacing: 0.5px; padding: 0 0 0 10px; } /* CONTACT */ #modal-content div.contact{ display: none; } .contact #modal-content div.contact{ display: block; } form{ position: absolute; top: 73px; left: 21px; } .contact h4, .contact h1{ margin: 24px 0 0 28px; } .contact h3{ margin: 0 0 0 28px; } div.contact label{ width: 116px; display: block; float: left; height: 26px; margin: 0 0 6px 0; clear: left; text-align: right; padding: 0 16px 0 0; line-height: 26px; } div.contact input{ width: 185px; display: block; float: left; height: 18px; border: none; background: url('/images/textfield-bg.gif') no-repeat #fff; margin: 0 0 6px 0; padding: 4px; } div.contact textarea{ font-size: 12px; width: 301px; display: block; float: left; height: 90px; border: none; background: url('/images/textarea-bg.gif') no-repeat #fff; margin: 0 0 6px 0; line-height: 16px; padding: 4px; } div.contact input.error, div.contact textarea.error{ background-color: #fde3ed; } #contact-submit{ float: right; width: 72px; height: 30px; padding: 0; margin: 0 26px 0 0; background: url('/images/send-button.png') no-repeat 0 -30px;} #contact-submit:hover{ background-position: 0 0; } #contact-success{ position: absolute; bottom: 50px; left: 40px; } #contact-success h4{ margin-left: 0; } /* Implemented by Julian Moller (http://www.massivemedia.net.nz/) */