/*
screen.css: SCREEN stylesheet
------------
Job: The Big Mersey Adventure
Template Version: 1.0
Produced by: Tom Leadbetter
Start date: 29/07/2009
------------
NOTES:
Do all stucture and module sizes in ems.
TOC:
0. styles reset
1. general styles
body styles
reset
links
headings
other elements, tags
2. helper styles
forms
notifications and errors
consistant items with normally just one class
3. page structure
skeleton including page furniture
4. page components / modules
most of your styles will be in here
*/
/* =0. RESET */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, html, body, div, span, applet, object, iframe, 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: normal; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}
/* remember to define focus styles! */
:focus { outline: 0; }
body { line-height: 1; color: black; background: white;}
ol, ul { list-style: none; }
/* tables still need 'cellspacing="0"' in the markup */
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: "" "";}
/* =1. general styles */
html { image-rendering: -moz-crisp-edges; }
body { font: normal 62.5% "Trebuchet MS", Arial, Helvetica, sans-serif; background: #1d579f url('/_common/img/bg.png') top left repeat-x;}
a { text-decoration: underline; color: #0063ad;}
a:focus { outline: 1px dotted #666;}
strong {font-weight: bold;}
em {font-style: italic;}
img { -ms-interpolation-mode: bicubic;}
input, textarea, select {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;}
/* =3. page structure */
.wrapper {width: 100%; margin-top: -7.5em; float: left;}
.branding, ul.navMain, .content, .siteinfo { margin:0 auto; clear: both; }
/* branding */
.brandingWrapper { float: left; width: 100%; padding: 17px 0 9.5em 0; background: transparent url('/_common/img/wave.png') -250px 0 no-repeat; position: relative; }
.branding {width: 96em;}
.branding img {float: left; margin-left: 60px}
.branding p { text-indent: -9999px; margin: 55px 0 0 110px; width: 388px; height: 112px; float: left; background: transparent url('/_common/img/tagline.png') top left no-repeat; }
/* navigation */
ul.navMain {width: 90.3em; padding: 0 0 0 5.7em; position: relative;}
ul.navMain li {display: inline;}
ul.navMain li a { display: block; float: left; margin-right: .7em; padding: .5em 1em; color: #0ba4c8; text-decoration: none; background: #d8f1f5; font-weight: bold; font-size: 1.43em; -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px;}
ul.navMain li.selected a { color: #f97c00;}
ul.navMain li a:hover {color: #f97c00;}
/* content */
.content { position: relative; width: 94em; padding: 1em; background: transparent url('/_common/img/content-bg.png') top left repeat-x; -moz-border-radius-topright: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px; overflow: hidden;}
h1 { margin-bottom: .3em; padding: .3em 0 .3em .6em; font-family: "Trebuchet MS", Arial, sans-serif; font-size: 3.5em ; color: #1d579f; font-weight: bold; background: #fff; letter-spacing: -1px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
#home h1 {position: absolute; left: -9999px;}
.contentMain, #annualVisitorPass, #experience, #routeMap, #attractions, #specialOffers, #feature, #feature li { -moz-border-radius: 8px; -webkit-border-radius: 8px;}
.contentMain { float: left; width: 59em; background: #fff; padding: 2em;}
.contentMain h2 { margin: 0 0 .3em 0; font-size: 2.1em; font-weight: bold; color: #0ba4c8; }
.contentMain h3 { margin-bottom: .5em; font-size: 1.1em; font-weight: bold; color: #333; }
.contentMain p { font-size: 1.4em; color:#1d579f; margin-bottom: 1em;}
.contentMain ul { margin: 0 0 1em 2em; font-size: 1.4em; color: #1d579f; list-style-type: disc; }
.contentMain ul li { line-height: 1.8em;}
ul.mainButton { float: left; width: 25em; margin:0; background: #f87a02 url('/_common/img/button-bg.jpg') top left repeat-x; list-style-type: none; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
ul.mainButton li a { display: block; padding: .3em 0 .3em 5%; font-weight: bold; color: #fff; font-size: 1.5em; text-decoration: none; background: transparent url('/_common/img/button-arrow.png') 95% 55% no-repeat;}
ul.mainButton li a:hover {color: #000;}
ul.mainButton:hover {background: #f87a02;}
/*home page widgets (some might be used in right column on other pages) */
#home .contentMain {width: 63em; background: transparent; padding: 0;}
#flashContent { float: left; width: 63em; position: relative; margin-bottom: 1em;}
#flashContent img {width: 63em; height: 28.5em; -moz-border-radius: 5px; -webkit-border-radius: 6px;}
#flashContent p { position: absolute; bottom: 0; left: 0; padding: .5em; font-family: Times, serif; color: #fff; font-size: 2.5em; font-weight: bold; letter-spacing: -1px; text-shadow: 1px 1px 30px #000;}
#annualVisitorPass { float: left; width: 28.2em; padding: 1em 1em 3em; border: 4px solid #1283CF; background: #00aeef; }
#annualVisitorPass h2 { margin: 0 0 1em .4em; text-indent: -9999px; height: 41px; width: 281px; background: url('/_common/img/annual-visitor-pass.png') top left no-repeat;}
#annualVisitorPass dl { margin: 0 auto; display: block; text-indent: -9999px; width: 237px; height: 175px; background: url('/_common/img/visitor-pass-prices.png') top left no-repeat; }
#annualVisitorPass p {margin: 0 auto .5em auto; width: 90%; color: #fff; font-size: 1.15em; line-height: 1.3em;}
#annualVisitorPass p a { font-weight: bold; text-transform: uppercase; color: #fff200;}
#annualVisitorPass p.terms { text-align: right; color: #1c569e; font-size: 1.1em; margin-top: -1em}
#annualVisitorPass p.refund { margin-top: 1.5em; font-weight: bold; font-size: 1.4em}
#annualVisitorPass p strong { color: #fff200;}
#annualVisitorPass ul, #specialOffers ul { margin: 1.6em auto 1em auto; background: #f87a02 url('/_common/img/button-bg.jpg') top left repeat-x; -moz-border-radius: 6px; -webkit-border-radius: 6px; position: relative; list-style-type: none;}
#annualVisitorPass ul { margin-top: 2.2em; margin-left: 1em; width: 18.5em}
#annualVisitorPass ul li a { display: block; padding: .5em 0 .5em 7%; font-weight: bold; color: #fff; font-size: 1.1em; text-decoration: none; background: transparent url('/_common/img/button-arrow.png') 95% 55% no-repeat;}
#annualVisitorPass ul li a img { position: absolute; top: -1.3em; left: 53%;}
#annualVisitorPass ul:hover, #specialOffers ul:hover {background: #f87a02;}
#annualVisitorPass ul li a:hover, #specialOffers ul li a:hover {color: #fff;}
#experience { float: left; margin: 0 0 1em 1em; width: 29em; padding: 1em; background: #fff}
#experience p { color: #07396e; font-family: "Trebuchet MS", arial, sans-serif; font-weight: bold; font-size: 1.3em; margin-bottom:0;}
#experience p a { color: #fb7501; font-weight: bold; text-decoration: none;}
#experience p a:hover { background: #fb7501; color: #fff;}
#routeMap { float: left; margin: 0 0 1em 1em; width: 29em; padding: 1em 1em 3.7em 1em; background: #fff url('/_common/img/routemap-arrows.png') 5% 82% no-repeat; position: relative;}
#routeMap h2 { margin: .3em 0 .6em 0; font-size: 2.2em; color: #d32261; font-weight: bold; }
#routeMap img {width: 28.5em; height: 14.5em; }
#routeMap p { position: absolute; top: 5.8em; left: 1.7em; width: 11em; font-size: 1.15em; color: #fff; }
#routeMap ul { width: 65%; margin: 1.1em 0 0 auto; background: #f87a02 url('/_common/img/button-bg.jpg') top left repeat-x; -moz-border-radius: 6px; -webkit-border-radius: 6px; position: relative; list-style-type: none;}
#routeMap ul li a { display: block; padding: .4em 0 .4em 7%; font-weight: bold; color: #fff; font-size: 1.1em; text-decoration: none; background: transparent url('/_common/img/button-arrow.png') 95% 55% no-repeat; -moz-border-radius: 6px; -webkit-border-radius: 6px;}
#routeMap ul:hover { background: #f87a02;}
/* contact page */
#contact .contentMain p {font-weight: bold;}
fieldset { width: 47.6em;}
fieldset legend {display: none}
fieldset ul { margin: 0 0 1.5em 0;}
fieldset li {margin-bottom: 1.5em; padding: 0; background: none; }
fieldset label { width:14em; float:left; margin-top: .5em; font-weight:bold; font-size:1.4em; color: #053c85; }
fieldset span label {float:none; margin-left:.5em; }
fieldset input, fieldset textarea {width: 19em; padding: .5em; color: #fff; font-size: 1.4em; font-weight: bold; border: none; background: #187BBF; }
fieldset select { width: 21em; padding: .2em; border: 1px solid #187BBF; font-weight: bold; }
fieldset textarea {width: 26em; font-size: 1.4em;}
li.frmAction label {position: absolute; left: -99999px;}
fieldset li.optIn label {font-size: 1.1em; width: 30em; }
fieldset li.optIn input {width: 1.5em; margin-top: .4em; border: none; background: none;}
fieldset input#send { width: 9em; float: right; padding: .3em 5.5em .3em .5em; background: #f87a02 url('/_common/img/contact-button-background.gif') top right repeat-x; border: none; color: #fff; font-weight: bold;-moz-border-radius: 5px; -webkit-border-radius: 5px;}
fieldset input#send:hover {cursor: pointer;}
.formMsg { margin: 1em 0; padding: 1em; background: #F5E9E9; border: 1px solid red;}
.formMsg p { color:#CC1F36}
.formMsg li { color:#CC1F36; font-size: 1.3em; margin-bottom: .7em;}
/* attractions page */
#attractions .contentMain {width: 63em; background: transparent; padding: 0;}
#attractions .contentMain div { float: left; width: 60em; margin: 0 0 1em 0; padding: 1.5em; clear: both; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
#merseyFerries, #theBeatlesStory { background: #fff;}
#spaceport, #alienWars, #playPlanet { background: #000;}
#uBoatStory {background: #01224B;}
#spaceport p, #alienWars p, #uBoatStory p, #playPlanet p {color: #fff;}
#attractions .contentMain img { float: left; display: block; margin: -3em 3em 0 0;}
#attractions .contentMain h2 { margin: 0 0 .5em 10.4em; }
#attractions .contentMain p { font-size: 1.4em;}
#attractions .contentMain ul { float: left; width: 18em; list-style-type: none; margin: 0; background: #f87a02 url('/_common/img/button-bg.jpg') top left repeat-x; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
#attractions .contentMain ul li a { display: block; padding: .3em 0 .3em 5%; font-weight: bold; color: #fff; font-size: 1.1em; text-decoration: none; background: transparent url('/_common/img/button-arrow.png') 95% 55% no-repeat;}
#attractions .contentMain ul li a:hover {color: #fff;}
#attractions .contentMain ul:hover {background: #f87a02;}
/* Reviews list */
ul.reviews {width: 100%; margin: 0; list-style-type: none;}
ul.reviews li { background: transparent url('/_common/img/quote-close.png') 100% 98% no-repeat; line-height: 1.4em; margin-bottom: 2em;}
ul.reviews li h2 {font-size: 1.5em;}
ul.reviews li p {background: transparent url('/_common/img/quote-open.png') 0% 10% no-repeat; padding-left: 2em; font-size: .8em;}
/* right column */
.contSup { float: left; margin-left: 1em; width: 30em;}
#attractionsList {width: 24.8em; padding: 2em 2em 1.8em; margin-bottom: 1em; background: #fff; border: 6px solid #f5e91c;}
#attractionsList h2 { margin-top: 0; color: #fb7501; font-size: 2.6em; font-weight: bold;}
#attractionsList li a { display: block; width: 91%; padding: .8em 10% .3em 0; font-size: 1.6em; font-weight: bold; color: #0ba4c8; text-decoration: none; border-bottom: 1px solid #0ba4c8; background-position: 98% 60%; background-repeat: no-repeat; background-color: #fff;}
#attractionsList li a:hover { color: #fb7501; border-bottom-color: #fb7501;}
#attractionsList li#merseyFerries a {background-image: url('/_common/img/mersey-ferries-small.jpg') }
#attractionsList li#spaceport a {background-image: url('/_common/img/spaceport-small.jpg'); }
#attractionsList li#alienWars a {background-image: url('/_common/img/alien-wars-small.jpg');}
#attractionsList li#uBoatStory a {background-image: url('/_common/img/uboat-story-small.jpg');}
#attractionsList li#beatlesStory a {background-image: url('/_common/img/beatles-story-small.jpg'); background-position: 96% 60%; }
#attractionsList li#playPlanet a {border-bottom: none; background-image: url('/_common/img/play-planet-small.jpg'); background-position: 99% 63%; }
#specialOffers { width: 26em; padding: 2em 2em .8em 2em; margin: 1.4em 0 1em; background: #fff; position: relative;}
#specialOffers h2 { color: #8eb21a; font-size: 2.6em; font-weight: bold; margin-bottom: .5em;}
#specialOffers h3 { display: block; text-indent: -9999px; width: 89px; height: 89px; background: transparent url('/_common/img/signup.png') top left no-repeat ; position: absolute; top: -.5em; right: -1em; overflow: hidden;}
#specialOffers p {width: 90.5%; color: #07396e; font-size: 1.4em; font-weight: bold; line-height: 1.5em}
#specialOffers p em { color: #fb7501;}
#specialOffers ul li a { display: block; padding: .5em 0 .5em 7%; font-weight: bold; color: #fff; font-size: 1.5em; text-decoration: none; background: transparent url('/_common/img/button-arrow.png') 95% 55% no-repeat;}
#feature { width: 29em; padding: 1em .5em; margin-bottom: 1em; background: #fff; position: relative;}
#feature li {background: #003D7E; text-align: center; }
#feature li a { display: block; padding: 1.55em 0}
#feature li a img{ display: block; margin: 0 auto;}
#feature p { position: absolute; bottom: 1.4em; left: 0; width:100%; color: #fff; font-weight: bold; font-size: 1.25em; text-align: center;}
#gettingAround { margin-bottom: 2em;}
#gettingAround h2 { position: relative; z-index: 100; padding: .8em;font-size: 2.3em; color: #ffed00; font-weight: bold; text-shadow: 2px 2px 3px #333;}
#gettingAround img { position: absolute; margin-top: -6.3em; z-index: 0; }
#gettingAround ul {clear: both; margin: 27.5em auto 0 auto; width: 20em;}
#gettingAround.winter ul {margin: 33em auto 0 auto;}
#gettingAround ul li a { display: block; width: 90%; padding: 0.5em 5%; font-size: 1.6em; font-weight: bold; text-decoration: none; background: #78D4F9 url('/_common/img/download-map-bg.png') 92% 55% no-repeat; border: 1px solid #1C579B; -moz-border-radius: 10px; -webkit-border-radius: 10px;-moz-box-shadow: 1px 1px 8px #1C579B; -webkit-box-shadow: 1px 1px 8px #1C579B; box-shadow: 1px 1px 8px #1C579B; letter-spacing: -1px;}
#gettingAround ul li a:hover {color: #000; border: 1px solid #000;}
/* siteinfo footerstuffs */
.siteinfo {width: 96em; margin: 2em auto 3em auto; padding-bottom: 3em;}
.siteinfo p { float: right; width: 40%; padding: 0 55px 0 0; text-align: right; background: transparent url('/_common/img/merseytravel.jpg') top right no-repeat; color: #fff; font-size: 1em; }
.siteinfo ul { width: 35em;}
.siteinfo li { display: inline; margin-right: 1.3em; color: #fff; font-size: 1.1em; line-height: 2em;}
.siteinfo ul li a { color: #f4db58; font-weight: bold; text-decoration: none;}
.siteinfo ul li a:hover { text-decoration: underline;}
/*SIFR */
/*****************************************************************************
scalable Inman Flash Replacement (sIFR) version 3.
Copyright 2006 – 2008 Mark Wubben,
Older versions:
* IFR by Shaun Inman
* sIFR 1.0 by Mike Davidson, Shaun Inman and Tomas Jogin
* sIFR 2.0 by Mike Davidson, Shaun Inman, Tomas Jogin and Mark Wubben
See also and .
This software is licensed and provided under the CC-GNU LGPL.
See
*****************************************************************************/
@media screen {
.sIFR-flash {
visibility: visible !important;
margin: 0;
padding: 0;
}
.sIFR-replaced, .sIFR-ignore {
visibility: visible !important;
}
.sIFR-active h1 {
padding-bottom: 0;
}
.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;
}
}
@media print {
.sIFR-flash {
display : none !important;
height : 0;
width : 0;
position : absolute;
overflow : hidden;
}
.sIFR-alternate {
visibility : visible !important;
display : block !important;
position : static !important;
left : auto !important;
top : auto !important;
width : auto !important;
height : auto !important;
}
}
/*
Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active
so they only apply if sIFR is active. Make sure to limit the CSS to the screen
media type, in order not to have the printed text come out weird.
*/
@media screen {
/* Example:
.sIFR-active h1 {
font-family: Verdana;
visibility: hidden;
}
*/
}
/**************************************************************
MultiBox
v1.3
**************************************************************/
.MultiBoxContainer {
position: absolute;
border: 20px solid #000;
background-color: #FFF;
display: none;
z-index: 2;
text-align: left;
/*overflow: hidden;*/
}
.MultiBoxLoading {
background: url(/_common/img/multibox/loader.gif) no-repeat center;
}
.MultiBoxContent {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.MultiBoxClose {
position: absolute;
top: -26px;
right: -26px;
background: url(/_common/img/multibox/close.png) no-repeat;
width: 24px;
height: 24px;
cursor: pointer;
}
.MultiBoxControlsContainer {
overflow: hidden;
height: 0px;
width: 100%;
position: relative;
}
.MultiBoxControls {
width: 100%;
height: auto;
background-color: #000000;
padding-bottom: 2px;
position: absolute;
bottom: 0px;
}
.MultiBoxPrevious {
position: absolute;
background: url(/_common/img/multibox/left.png) no-repeat;
width: 24px;
height: 24px;
left: 0px;
margin-top: 5px;
cursor: pointer;
}
.MultiBoxNext {
position: absolute;
background: url(/_common/img/multibox/right.png) no-repeat;
width: 24px;
height: 24px;
right: 0px;
margin-top: 5px;
cursor: pointer;
}
.MultiBoxNextDisabled {
cursor: default;
background: url(/_common/img/multibox/rightDisabled.png) no-repeat;
}
.MultiBoxPreviousDisabled {
cursor: default;
background: url(/_common/img/multibox/leftDisabled.png) no-repeat;
}
.MultiBoxTitle {
position: relative;
margin: 10px 0 0 35px;
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFF;
font-weight: bold;
text-align: left;
}
.MultiBoxNumber {
position: relative;
width: 50px;
margin: 10px 35px 0 0;
float: right;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFF;
text-align: right;
}
.MultiBoxDescription {
clear: left;
position: relative;
margin: 0 35px 0 35px;
padding-top: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFF;
text-align: left;
}
/*************************************************************/