/* ----------------------------------------------------- Hackness Grange (URL tbc) SCREEN style sheet author: The Digital Consortium version: 2008.04 ----------------------------------------------------- */ /* Global reset using Yahoo User Interface kit */ 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{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;} /* Font normalisation using Yahoo User Interface kit */ body {font:13px arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}pre, code {font:115% monospace;*font-size:100%;}body * {line-height:1.22em;} html{ min-width:987px; height:100%; margin-bottom:1px; } body{ font-size:77%; text-align:center; min-width:987px; background:url(../images/global/bg_main.gif) 52% 0 no-repeat #333; font-family:Arial, Helvetica, sans-serif; color:#fff; } .clear{ position:relative; width:auto; height:0 !important; overflow:hidden; clear:both; } a{ text-decoration:none; } a:hover{ text-decoration:underline; } /* Header */ #header{ position:relative; width:987px; margin:0 auto; height:110px; text-align:left; } #header h1{ width:126px; height:84px; background:url(../images/global/logo_hackness.gif) no-repeat; position:absolute; top:14px; left:37px; } #header h1 a{ display:block; height:84px; text-indent:-9999px; outline:none; } #main-image-wrap{ padding:0 0 0 5px; width:992px; text-align:left; margin:0 auto; height:326px; } #main-image-top{ width:997px; height:18px; overflow:hidden; background:url(../images/global/main_image_top.png) no-repeat; } #main-image-tile{ position:relative; width:997px; background:url(../images/global/main_image_tile.png) repeat-y; } #main-image-bottom{ width:997px; height:20px; overflow:hidden; background:url(../images/global/main_image_bottom.png) no-repeat; } #main-image-wrap h2{ width:949px; height:293px; text-indent:-9999px; margin:0 0 0 22px; } #bnr-welcome{ background:url(../images/global/bnr_welcome.jpg) no-repeat; } #bnr-booking{ background:url(../images/booking/bnr_book_online.jpg) no-repeat; height:173px; } #bnr-good-morning{ background:url(../images/global/bnr_good_morning.jpg) no-repeat; } #bnr-good-afternoon{ background:url(../images/global/bnr_good_afternoon.jpg) no-repeat; } #bnr-good-evening{ background:url(../images/global/bnr_good_evening.jpg) no-repeat; } #bnr-xmas{ background:url(../images/global/bnr_xmas_and_new_year.jpg) no-repeat; } #bnr-weddings{ background:url(../images/weddings/bnr_weddings.jpg) no-repeat; } #bnr-contact{ background:url(../images/contact/bnr_contact_hackness.jpg) no-repeat; } #bnr-accommodation{ background:url(../images/accommodation/bnr_accommodation.jpg) no-repeat; } #bnr-conference{ background:url(../images/conference/bnr_conference.jpg) no-repeat; } #bnr-restaurant{ background:url(../images/restaurant/bnr_restaurant.jpg) no-repeat; } #bnr-events{ background:url(../images/global/bnr_events.jpg) no-repeat; } #bnr-heaven-spa { background: url(../images/global/bnr_heaven_spa.jpg) no-repeat; } #con-info{ background:#333; padding:18px 0 0 0; margin:0 14px 0 0; width:234px; margin:0 0 0 736px; } #con-info li{ float:right; display:inline; margin-bottom:4px; overflow:hidden; height:21px; zoom:1; clear:both; position:relative;} #con-info #con-tel{ width:138px; height:16px; background:url(../images/global/telephone.gif) no-repeat; text-indent:-9999px; } #con-info #con-email{ width:234px; height:21px; } #con-info #con-email a{ background:url(../images/global/email.gif) no-repeat; display:block; height:21px; text-indent:-9999px; } #con-info #con-email a:hover{ background-position:0 -21px; } #strip{ height:326px; min-width:987px; text-align:left; background:url(../images/global/bg_strip.gif) 52% 0 no-repeat #dfdcdc; } #nav{ position:absolute; top:76px; left:229px; } #nav li{ float:left; display:inline; } #nav li a{ display:block; padding-top:34px; height:0 !important; height /**/:34px; overflow:hidden; background:url(../images/global/nav_main.gif) no-repeat left; } /* Home */ #nav #nav-home a{ width:39px; background-position: 0 0;} #nav #nav-home a:hover, #nav #nav-home.active a{ background-position:0 -34px; } /* Accomodation */ #nav #nav-acc a{ width:124px; background-position:-39px 0;} #nav #nav-acc a:hover, #nav #nav-acc.active a{ background-position:-39px -34px; } /* Restaurant & Bar */ #nav #nav-res a{ width:131px; background-position:-163px 0; } #nav #nav-res a:hover, #nav #nav-res.active a{ background-position:-163px -34px; } /* Conference & Meetings */ #nav #nav-con a{ width:166px; background-position:-294px 0; } #nav #nav-con a:hover, #nav #nav-con.active a{ background-position:-294px -34px; } /* Weddings */ #nav #nav-wed a{ width:83px; background-position:-460px 0; } #nav #nav-wed a:hover, #nav #nav-wed.active a{ background-position:-460px -34px; } /* Gallery */ #nav #nav-gal a{ width:66px; background-position:-543px 0; } #nav #nav-gal a:hover, #nav #nav-gal.active a{ background-position:-543px -34px; } /* Contact / Location */ #nav #nav-loc a{ width:135px; background-position:-609px 0; } #nav #nav-loc a:hover, #nav #nav-loc.active a{ background-position:-609px -34px; } #content{ width:900px; text-align:left; margin:0 auto; padding:18px 0 20px 0; } #c-l{ width:590px; display:inline; float:left; } #c-l h3{ font-size:0.9em; font-weight:700; line-height:125%; margin-bottom:0.5em; } #c-l p{ font-size:0.9em; line-height:145%; margin-bottom:1.1em; } #c-l p.first{ font-weight:700; } #c-r{ width:254px; display:inline; float:right; position:relative; } /* Weddings and contact page content panels */ .contact #c-r, .weddings #c-r{ width:391px; zoom:1; } .contact #c-l, .weddings #c-l{ width:460px; zoom:1; } /* Contact page */ .contact #content{ padding-top:30px; } .contact #c-l p, .contact #c-l p a{ color:#ccc; font-weight:700; } .contact #c-l p a:hover{ text-decoration:none; border-bottom:1px dotted #ccc; } p#download-pdf{ width:244px; height:42px; background:url(../images/global/btn_map.gif) no-repeat; margin-top:20px; } #download-pdf a{ display:block; height:42px; text-indent:-9999px; } #c-l p#download-pdf a:hover{ background:url(../images/global/btn_map.gif); background-position:-244px; no-repeat; border:0; } p#get-directions{ width:217px; height:18px; background:url(../images/global/btn_directions.gif) no-repeat; margin-top:20px;} #get-directions a{ display:block; height:18px; text-indent:-9999px; } #c-l p#get-directions a:hover{ background:url(../images/global/btn_directions.gif) no-repeat; background-position:-217px; border:0; } #tabs li{ margin-bottom:16px; } #tabs li a{ display:block; width:254px; text-indent:-9999px; height:65px; } #tabs #bro-req a{ background:url(../images/global/btn_brochure_req.gif) no-repeat; } #tabs #bro-req a:hover{ background-position:-254px 0; } #tabs #book-online a{ background:url(../images/global/btn_book_online.gif) no-repeat; } #tabs #book-online a:hover{ background-position:-254px 0; border:0 !important; } #tabs #xmas a{ background: url(../images/global/btn_xmas.jpg) no-repeat; } #tabs #xmas a:hover{ background-position:-254px 0; border:0 !important; } #tabs #sea-bro-req a{ background: url(../images/global/btn_sesonal_brochure.gif) no-repeat; } #tabs #sea-bro-req a:hover{ background-position:-254px 0; } #tabs #enq-online a{ background: url(../images/global/btn_enquire_online.gif) no-repeat; } #tabs #enq-online a:hover{ background-position:-254px 0; } #tabs #wed-fay a{ background: url(../images/global/btn_wedding_fayre.jpg) no-repeat; } #tabs #wed-fay a:hover{ background-position:-254px 0; } #tabs #late_off a{ background: url(../images/accommodation/btn_latest_offers.jpg) no-repeat; } #tabs #late_off a:hover{ background-position:-254px 0; } #tabs #leisure-breaks a{ background: url(../images/accommodation/btn_leisure.jpg) no-repeat; } #tabs #leisure-breaks a:hover{ background-position:-254px 0; } #tabs #ridge-restaurant a{ background: url(../images/global/btn_ridge_restaurant.jpg) no-repeat; } #tabs #ridge-restaurant a:hover{ background-position:-254px 0; } #tabs #latest_events a{ background: url(../images/global/btn_latest_events.gif) no-repeat; } #tabs #latest_events a:hover{ background-position:-254px 0; } #tabs #heaven_spa a{ background: url(../images/global/btn_heaven_spa.jpg) no-repeat; } #tabs #heaven_spa a:hover{ background-position:-254px 0; } #tabs #treatments a{ background: url(../images/global/bnr_treatments.jpg) no-repeat; } #tabs #treatments a:hover{ background-position:-254px 0; } #tabs #visit_website a{ background: url(../images/global/btn_visit_website.jpg) no-repeat; } #tabs #visit_website a:hover{ background-position:-254px 0; } #tabs #ebrochure a{ background: url(../images/weddings/btn_ebrochure.jpg) no-repeat; } #tabs #ebrochure a:hover{ background-position:-254px 0; } #tabs #leisure_brochure a{ background: url(../images/global/btn_leisure_brochure.jpg) no-repeat; } #tabs #leisure_brochure a:hover{ background-position:-254px 0; } #site-info{ text-align:left; position:relative; clear:both; width:900px; margin:0 auto; padding-bottom:10px; } #site-info p{ float:left; display:inline; width:93px; height:56px; background:url(../images/global/logo_hackness_sm.gif) no-repeat; } #site-info p a{ display:block; height:56px; text-indent:-9999px; } #site-info ul{ float:right; display:inline; font-size:0.75em; color:#999; padding-top:44px; } #site-info ul li{ display:inline; } #site-info ul li span{ padding-left:4px; } #site-info ul li a{ color:#999; padding:0 4px; } .enq-left{float:left; display:inline; width:190px; zoom:1; } .enq-right{ float:left; display:inline; width:160px; zoom:1; } #enq-form{ position:relative; font-size:0.85em; border:3px solid #fff; min-height:228px; height: auto !important; height:228px; background:url(../images/global/bg_enq_form.gif) no-repeat #2e2e2e; padding-bottom:10px; } #enq-form h3{ zoom:1; padding:13px 0 0 17px; width:131px; height:36px; background:url(../images/weddings/title_enquiries.gif) 13px 17px no-repeat; text-indent:-9999px; } #enq-form form{ padding:10px 0 0 17px; zoom:1; } .enquiry label{ display:block; padding-bottom:4px; } .enquiry label.error{ color:red; } .enquiry input.tF{ width:150px; background:url(../images/global/bg_form_input.gif) #2e2e2e repeat-x; border:1px solid #fff; color:#fff; padding:3px; margin-bottom:8px; } .enquiry input.dS{ width:30px; margin-right:8px; } .enquiry input.dL{ width:50px; } .enquiry textarea{ background:url(../images/global/bg_form_input.gif) #2e2e2e repeat-x; border:1px solid #fff; color:#fff; padding:3px; margin-bottom:8px; width:338px; height:64px; } .enquiry p{ padding-top:10px; } .enquiry .enq-submit{ display:block; margin:30px 0 0 56px; } .enquiry .contact-submit{ display:block; margin:0 0 10px 56px; } .enquiry{ position:relative; } #contact-thanks{ width:385px; height:238px; background:url(../images/contact/contact_thank_you.gif) 50% 50% no-repeat #333; position:absolute; top:3px; left:3px; } #always-happy{ width:362px; height:64px; background:url(../images/weddings/copy_always_happy.png) no-repeat; text-indent:-9999px; margin-top:40px; } /*------- The gallery ----------*/ .gallery #main-image-tile{ padding:0 0 0 10px; } .gallery #main-image{ background:#fff; width:949px; height:293px; position:relative; margin-left:12px; } #main-image img{ position:absolute; top:10px; left:10px; border:1px solid #efefef; } .gallery #content{ width:932px; padding-left:14px; } #gallery{ } #gallery li{ margin:0 9px 6px 0; float:left; display:inline; } #gallery a{ outline:none; padding:4px; background:#fff; float:left; display:inline; display:block; } #gallery a.active{ background:#ccc; outline:none; } #bnr-directions{ padding:40px; width:869px; height:213px; background:url(../images/contact/bnr_directions.gif) no-repeat; position:absolute; top:0; left:22px; } #bnr-directions.load{ left:-9999px; } #bnr-directions h3{ width:141px; height:27px; background:url(../images/contact/title_directions.gif) no-repeat; text-indent:-9999px; margin-bottom:20px; } #bnr-directions p{ font-size:0.9em; margin-bottom:1.1em; } .outline{ border:2px solid #666; position:absolute; padding:4px; margin:-5px 0 0 -5px; } /*-------- Sitemap --------*/ #sitemap-list a{ color:#fff; } #sitemap-list li{ margin-bottom:5px; } #sitemap-list ul{ margin:5px 0 0 20px; } #sitemap-list a:hover{ color:#999; } /* booking */ body.booking #strip #main-image-wrap { height:211px; } body.booking #strip #main-image-wrap #main-image-tile { height:173px; } body.booking #strip #content { padding-top:12px; } #bookingsystem { background-color:#fff;width:900px;color:#333;padding:0px; } /*CSS for Bubble Tooltips by Alessandro Fulciniti - http://pro.html.it - http://web-graphics.com */ .tooltip{ width: 247px; font:lighter 11px/1.3 Arial,sans-serif; text-decoration:none; text-align:center } .tooltip div.top{ padding: 17px 8px 0; color:#FFF; background: url(../images/global/bt.gif) no-repeat top } .tooltip div.bottom{ padding:3px 8px 30px; color:#FFF; background: url(../images/global/bt.gif) no-repeat bottom; } /* Extra CSS */ #bnr-view-events{ background:url(../images/events/events_banner.png) no-repeat; position: absolute; z-index: 100; top: 0px; left: 0px; } #bnr-view-events-image { width: 800px; height: 293px; z-index: 50; position: absolute; top: 0; right: 30px; } .Events_Links a:link, .Events_Links a:active, .Events_Links a:visited { color: #CCC; text-decoration: none; font-weight: bold; } .Events_Links a:hover { color: #FFF; text-decoration: none; font-weight: bold; } #Home_Show { width: 600px; position: relative; background-color: #333; padding: 5px; text-align: center; margin-left: 10px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-style: italic; border: 1px solid #666; } #Home_Show a:link, #Home_Show a:active, #Home_Show a:visited { color: #FFF; text-decoration: none; } #Home_Show a:hover { color: #CCC; text-decoration: none; } .Testimonials_Frame { width: 280px; height: auto; float: left; position: relative; background-image: url(../images/global/testimonial.gif); background-repeat: no-repeat; padding-top: 23px; margin-top: 10px; } .Testimonials_Style { color: #CCC; font: italic; }