/*----------------------------------------------------------------------------- Copyright: Copyright (C) 2007 Visit North Wales. All rights reserved. Filename: main.css Description: Main / Basic styles Version: 1.0 Author: Matt Richards Date Created: December 11, 2007 Last Updated: January 3, 2008 Last Updated By: Matt Richards ------------------------------------------------------------------------------- Email: info [at] viewcreative [dot] co [dot] uk Website: www.visitnorthwales.co.uk ------------------------------------------------------------------------------- This file is not a template and may not be reproduced. :p ------------------------------------------------------------------------------*/ html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;} body { line-height: 1em; color: black; background: white; height: 100%; } ol, ul { list-style: none; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* =reset.css thanks to http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ -----------------------------------------------------------------------------*/ html {background: #393534;} body {font: 75%/2em verdana, arial, helvetica, sans-serif; background: #393534;} :focus { color: #ff9900; font-weight: bold;} a:link, a:visited {color: #444; font-weight: bold; text-decoration: none;} a.skip {position: absolute; left: -99999em;} a.skip:focus {top: 10px; left: 40px;} .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} #main-content ul.links {padding: 0; line-height: 100%; } #main-content ul.links li {list-style: none; padding: 0 5px 0 15px; } #main-content ul.links li.tel {border: none; background: url(/images/tel-link.png) scroll no-repeat left center; height: 1em;} #main-content ul.links li.weblink {border: none; background: url(/images/earth-link.png) scroll no-repeat left center;} #main-content h2 {margin: 10px 0 20px 25px;} /* =setup -----------------------------------------------------------------------------*/ #container {position: relative; margin: 55px auto 55px auto; padding-bottom: 5px; width: 682px; background: #fff url(/images/secondary-content-bg.png) scroll no-repeat bottom right; border: 1px solid #393534;} /* =#container -----------------------------------------------------------------------------*/ #branding { background: #fff url(/images/container-bg-slice.png) scroll repeat-y 0 0; } #branding h1 {position: relative; height: 77px; width: 682px; background: url(/images/branding-bg.png) scroll no-repeat 0 0;} #branding h1 span {width: 600px; display: block; margin: 0 0 0 40px; position: absolute; top: 20px; line-height: 1.5em; font-size: 1.5em;} #branding h1 span span {display: block;} #branding img {margin: 16px 0 0 38px;} /* =#branding -----------------------------------------------------------------------------*/ #content {background: #fff url(/images/container-bg-slice.png) scroll repeat-y 0 0; padding: 0 20px 0px 0; margin-bottom: 20px; } /* =#content -----------------------------------------------------------------------------*/ #main-content {width: 438px; margin: 0 0 0 186px; padding: 10px 0 10px 0; border-left: 1px solid #999;} #main-content .primary {float: left; width: 200px; padding-left: 25px; font-size: 100%;} #main-content .secondary {float: right; width: 200px; line-height: 130%; font-size: 83%;} #main-content ul {list-style: disc outside; padding-left: 20px;} #main-content ul li {margin-bottom: 1.5em; } #main-content h3 {font-weight: bold;} #main-content strong {font-weight: bold;} #main-content p {margin: 0 0 1em 0;} #main-content em {font-weight: normal; font-style: italic;} #main-content em blockquote {font-style: normal;} #main-content a[rel=external] {padding: 0 15px 0 0; background: url("/images/external-link.png") no-repeat scroll center right; } #main-content a.external {padding: 0 15px 0 0; background: url("/images/external-link.png") no-repeat scroll center right; } #main-content blockquote {width: 145px; float: right; margin: 2em 0 1em 0px; padding: 10px 25px 5px 30px; background: #fff url(/images/blockquote.png) no-repeat scroll; min-height: 88px; text-align: center; text-transform: lowercase; font-size: 1.3em; color: #554B88;} #heritage-language-culture #main-content .primary {font-size: 83%;} #heritage-language-culture #main-content .primary .intro {font-size: 120%; border-bottom: 1px solid #ccc; font-weight: bold; padding: 0 0 1em 0;} #heritage-language-culture #main-content .secondary {font-size: 83%; line-height: 2em;} #great-outdoors #main-content .primary {font-size: 83%;} #great-outdoors #main-content .primary .intro {font-size: 120%; border-bottom: 1px solid #ccc; font-weight: bold; padding: 0 0 1em 0;} #great-outdoors #main-content .secondary {font-size: 83%; line-height: 2em;} #hospitality-food #main-content .primary {font-size: 83%;} #hospitality-food #main-content .primary .intro {font-size: 120%; border-bottom: 1px solid #ccc; font-weight: bold; padding: 0 0 1em 0;} #hospitality-food #main-content .secondary {font-size: 83%; line-height: 2em;} #areas #main-content .primary {width: 400px;} #areas #main-content .primary #map {float: right; margin: 0 -20px 0 0;} #areas #main-content h2 {font-weight: bold;} #areas #main-content ul {list-style: none;} #areas #main-content ul {padding: 0;} #areas #main-content ul.links li.weblink a:link, #areas #main-content ul.links li.weblink a:visited {font-weight: normal; font-style: italic; color: navy;} #areas #main-content ul.links li.weblink a:hover, #areas #main-content ul.links li.weblink a:active {text-decoration: underline;} #areas #main-content li#north-wales-borderlands h2 {background: url(/images/li-bullet-blue.png) scroll no-repeat center left;} #areas #main-content li#isle-of-anglesey h2 {background: url(/images/li-bullet-violet.png) scroll no-repeat center left;} #areas #main-content li#snowdonia h2 {background: url(/images/li-bullet-yellow.png) scroll no-repeat center left;} #areas #main-content li#north-wales-coastal-resorts h2 {background: url(/images/li-bullet-green.png) scroll no-repeat center left;} #map-travel #main-content .primary {width: 410px; font-size: 83%;} #map-travel #main-content .tel {display: block;} #map-travel #main-content a.tel:link, #map-travel #main-content a.tel:visited {color: #333; text-decoration: none; } #map-travel #main-content .primary #map {float: right; margin: 0 0 10px 20px; width: 125px;} #map-travel #main-content #map a {cursor: url(/images/zoom.jpg), pointer;} #map-travel #main-content #map img {border: 0; display: block; margin: 0 auto; border: 1px solid #ccc;} #map-travel #main-content #map .caption {display: block; width: 90px; padding: 0 0 0 15px; margin: 0px auto; background: url(/images/zoom.jpg) scroll no-repeat left center;} #map-travel #main-content h2 {font-weight: bold; font-size: 1.3em;} #map-travel #main-content h3 {color: #333; font-style: italic; margin-bottom: 0.5em;} #map-travel #main-content #by-road, #map-travel #main-content #by-rail, #map-travel #main-content #by-air, #map-travel #main-content #by-sea {border-bottom: 1px solid #ccc; padding-bottom: 10px; margin-bottom: 10px; } #map-travel #main-content #by-air div, #map-travel #main-content #by-sea div {padding: 5px 0 5px 10px;} #map-travel #main-content #by-air h2, #map-travel #main-content #by-sea h2 {margin-bottom: 1em;} #map-travel #main-content #anglesey-airport, #map-travel #main-content #manchester-intl, #map-travel #irish-ferries {background: #eee; height: auto;} #map-travel #main-content #visit-chester h2 {margin-bottom: 1em;} #map-travel #main-content #visit-chester img {float: left; border: 1px solid #eee; padding: 2px; margin: 0 10px 5px 0;} #further-info #main-content .primary {font-size: 83%; width: 410px;} #further-info #main-content #visit-chester h2 {margin-bottom: 1em;font-weight: bold; font-size: 1.3em;} #further-info #main-content #visit-chester img {float: left; border: 1px solid #eee; padding: 2px; margin: 0 10px 5px 0;} #further-info #main-content div div {margin-top: 10px; margin-bottom: 10px ; padding-top: 10px; padding-bottom: 10px;border-bottom: 1px solid #eeeeee;} #further-info #main-content div div#visit-chester {margin-top: 0; padding-top: 0;} #accommodation #main-content .primary {width: 410px; font-size: 83%;} #main-content #bubble { height: auto; width: 410px; } #main-content #bubble span {left: -1000em; overflow: hidden; position: absolute;} #main-content #bubble ul {list-style: none; padding: 0;} #main-content #bubble ul li { width: 66px; float: left; padding-left: 1px; } #main-content #bubble ul a, #main-content #bubble ul a:link, #main-content #bubble ul a:visited, #main-content #bubble ul a:active { display: block; width: 66px; height: 95px; background: url(/images/bubble/thumb1.jpg) no-repeat; } #main-content #bubble ul a#walking, #main-content #bubble ul a#walking:link, #main-content #bubble ul a#walking:visited, #main-content #bubble ul a#walking:active { background: url(/images/bubble/thumb2.jpg) no-repeat; } #main-content #bubble ul a#gardens, #main-content #bubble ul a#gardens:link, #main-content #bubble ul a#gardens:visited, #main-content #bubble ul a#gardens:active { background: url(/images/bubble/thumb3.jpg) no-repeat; } #main-content #bubble ul a#movie, #main-content #bubble ul a#movie:link, #main-content #bubble ul a#movie:visited, #main-content #bubble ul a#movie:active { background: url(/images/bubble/thumb4.jpg) no-repeat; } #main-content #bubble ul a#attractions, #main-content #bubble ul a#attractions:link, #main-content #bubble ul a#attractions:visited, #main-content #bubble ul a#attractions:active { background: url(/images/bubble/thumb5.jpg) no-repeat; } #main-content #bubble ul a#golf, #main-content #bubble ul a#golf:link, #main-content #bubble ul a#golf:visited, #main-content #bubble ul a#golf:active { background: url(/images/bubble/thumb6.jpg) no-repeat; } #main-content #bubble ul a#events, #main-content #bubble ul a#events:link, #main-content #bubble ul a#events:visited, #main-content #bubble ul a#events:active { background: url(/images/bubble/thumb7.jpg) no-repeat; } #main-content #bubble ul a#walledtowns, #main-content #bubble ul a#walledtowns:link, #main-content #bubble ul a#walledtowns:visited, #main-content #bubble ul a#walledtowns:active { background: url(/images/bubble/thumb8.jpg) no-repeat; } /* tool-tips */ /* tool-tips */ body #btc { position: absolute; z-index: 72; } .tooltip { width: 200px; color: #000; text-decoration: none; text-align: center; font: 1.2em Arial, Helvetica, sans-serif; font-weight: bold; } .tooltip .top { padding: 9px 12px 0; background: url(/images/bt.gif) no-repeat top; } .tooltip .bottom { padding: 0 12px 10px; color: #333; background: url(/images/bt.gif) no-repeat bottom; text-align: center; font: .9em Arial, Helvetica, sans-serif; font-weight: normal; } .tooltip a { display: inline; } /* =#main-content -----------------------------------------------------------------------------*/ #images {margin: 0 40px 0 38px; border: 1px solid #999; padding: 12px; height: 135px;} #images li {float: left; margin-left: 5px;} #images li:first-child, #images li.first-child {margin-left: 0;} /* =#images -----------------------------------------------------------------------------*/ #navigation {position: absolute; top: 373px; left: 9px; width: 180px; padding-right: 25px;} #navigation li {text-align: right; font-size: 100%; padding-right: 10px;/*list-style: disc; direction: rtl;*/ background: url(/images/black-bullet.gif) scroll no-repeat right 5px;} #navigation li a:link, #navigation li a:visited {color: #000; text-decoration: none;} #navigation .to-the-top {position: absolute; left: -99999em; background: none;} #navigation li a.active {color: #ff0000; font-weight: bold; } #navigation li.active {background: url(/images/red-bullet.png) scroll no-repeat right 5px;} /* =#navigation -----------------------------------------------------------------------------*/ #secondary-content {width: 662px; background: url(/images/footer-bg-slice.png) scroll repeat-y; position: relative;} #secondary-content #website-information { float: left; width: 150px; text-align: right; padding-right: 38px; margin-top: 5px; font-size: 83%; line-height: 150%; color: #666;} #secondary-content #website-information a:link, #secondary-content #website-information a:visited {text-decoration: none; color: #666;} #secondary-content #website-information a:hover, #secondary-content #website-information a:active {text-decoration: none; color: #ff0000;} #secondary-content #website-information abbr {font-variant: small-caps; font-size: 120%;} #secondary-content #signup {width: 429px; float: left; padding-left: 38px; border-right: 1px solid #999;} #secondary-content #signup legend {font-weight: bold; font-size: 108%; text-transform: lowercase; color: #333;} #secondary-content #signup label {position: absolute; left: -99999em; } #secondary-content #signup .column {float: left; margin-right: 10px;} #secondary-content #signup input {background: #fff url(/images/input-bg-fade.png) scroll no-repeat; border-top: 1px solid #A7A7A7; border-left: 1px solid #A7A7A7; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; } #secondary-content #signup input.text {float: left; clear: left; margin-bottom: 5px; padding: 5px;} #secondary-content #signup input.text:focus {font-weight: normal;} #secondary-content #signup input.helper {color: #999;} #secondary-content #signup select {float: left; clear: right; margin-bottom: 5px; background: #fff url(/images/input-bg-fade.png) scroll no-repeat; border-top: 1px solid #A7A7A7; border-left: 1px solid #A7A7A7; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; padding: 4px;} #secondary-content #signup input.submit {float: left; clear: left; width: 55px; height: 25px; background: #666 url(/images/submit-bg.png) scroll no-repeat 0 0; border: none; text-indent: -99999em;} #secondary-content #signup input.submit:hover {cursor: pointer;} #secondary-content #language {float: right; width: 150px; margin: 5px 20px 10px 0; } #secondary-content #language li {float: left; width: 20px; height: 13px; margin: 0 0 0 5px;} #secondary-content #language li a {width: 20px; height: 13px; text-indent: -99999em; display: block;} #secondary-content #language li#english a {background: url(/images/english_small.png) no-repeat scroll;} #secondary-content #language li#francais a {background: url(/images/francais_small.png) no-repeat scroll;} #secondary-content #language li#deutsch a {background: url(/images/deutsch_small.png) no-repeat scroll;} #secondary-content #language li#espanol a {background: url(/images/espanol_small.png) no-repeat scroll;} #secondary-content #language li#nederlands a {background: url(/images/nederlands_small.png) no-repeat scroll;} /* =#secondary-content -----------------------------------------------------------------------------*/ #website-information {width: 150px;} /* =#website-information -----------------------------------------------------------------------------*/ #splash #content {min-height: 465px;} #splash h1 {position: absolute; left: 425px; top: 300px; text-indent: -9999em; background: url(/images/logo.png) no-repeat scroll; width: 205px; height: 60px;} #splash h2 {position: absolute; text-indent: -9999em;} #splash h3 {position: absolute; top: 10px; left: 35px; font-size: 200%; text-transform: lowercase; width: 500px;} #splash h4 {position: absolute; left: -9999em;} #splash img {position: absolute; top: 56px; left: 35px;} #splash #language-select {position: absolute; top: 395px; left: 450px; width: 187px;} #splash #language-select p {font-size: 75%; line-height: 1.5em; margin-bottom: 10px;} #splash ul {float: right;} #splash li {float: left; width: 27px; height: 19px; margin: 0 10px 0 0;} #splash li a {width: 27px; height: 19px; text-indent: -99999em; display: block;} #splash li#english a {background: url(/images/english.png) no-repeat scroll;} #splash li#francais a {background: url(/images/francais.png) no-repeat scroll;} #splash li#deutsch a {background: url(/images/deutsch.png) no-repeat scroll;} #splash li#espanol a {background: url(/images/espanol.png) no-repeat scroll;} #splash li#nederlands a {background: url(/images/nederlands.png) no-repeat scroll;} /* =#validator -----------------------------------------------------------------------------*/ #commentForm { width: 500px; } #commentForm label { width: 250px; } #commentForm label.error, #commentForm input.submit { margin-left: 253px; } #signupForm { width: 670px; } #signupForm label.error { margin-left: 10px; width: auto; display: inline; color: red; } #newsletter_topics label.error { display: none; margin-left: 103px; } /* =#splash -----------------------------------------------------------------------------*/ #main-content:after, .primary:after, .secondary:after, #images:after, #images ul:after, #secondary-content:after, #signup:after, #website-information:after, #further-info #main-content #bubble:after, #further-info #main-content #bubble ul:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} /* =clearfix -----------------------------------------------------------------------------*/ .sIFR-flash {visibility: visible !important; margin: 0; padding: 0;} .sIFR-replaced, .sIFR-ignore {visibility: visible !important;} .sIFR-alternate {position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden;} .sIFR-replaced div.sIFR-fixfocus {margin: 0pt; padding: 0pt; overflow: auto; letter-spacing: 0px; float: none;} .sIFR-dummy {width: 0px; height: 0px; margin-left: 42px; z-index: 0;} .sIFR-active #navigation li {visibility: hidden; font-family: Verdana; line-height: 1em; font-size: 13px; text-align: right;} .sIFR-active #navigation li a:link, .sIFR-active #navigation li a:visited {text-decoration:none;} .sIFR-active h1 span {line-height: 2em;} .sIFR-active #main-content .secondary li {list-style: none;} /* =sifr -----------------------------------------------------------------------------*/