/*
	screen.css:SCREEN stylesheet
	------------
	Job:					Mersey Ferries 2011
	Template Version:		2.9
	Produced by:			Heidi Seymour, Tom leadbetter
	Start date:				18/04/2011
	------------
	NOTES:
	Do all font sizes in ems.
	
	TOC:
	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
	5.	content/FCK
			these are styles that the client could put in via the FCKeditor. They will also need to be added to the FCK stylesheet.
	6.	overrides
*/

/* =1. general styles */

* {
	margin:0;
	padding:0;
	text-decoration:none;
	font-weight:normal;
}
ul {list-style-type:none;}
html, body {height:100%;}

body {
	background:#2c76a4;
	font-family:Arial, Helvetica, sans-serif;
	font-size:100%;
}
a:link, a:visited {
	
}
a:hover, a:focus  {color:#ffed00;}

a img {border:none;}
/* =2. helper styles */
input, textarea, select {
	font-family:Arial, Helvetica, sans-serif;
	font-size:80%;
}


/* =3. page structure */
.accessmenu {position:absolute; left:-10000px;}
.container {width:910px; margin:0 auto; position:relative;}
.wrap {background:#0e213a url(/_common/img/bg-homemain.jpg) no-repeat center -100px; clear:both; float:left; margin:0; overflow:hidden; padding:0 0 50px; width:100%;}
body.home .wrap .main {float:left; margin-top:190px;}
.home h1 {position:absolute; left:-10000px;}
.wrap .container {padding-top:187px;}

/******************************
*******************************
HEADER STYLES
*******************************
******************************/

.header {background:#2e76a4; float:left; width:100%;}
.header .container {position:relative;}
.header .latestNews {clear:both; display:none; background:#fff; color:#fff; float:right; font-size:.8em; margin-top:5px; padding:4px 12px; position:relative; width:310px; overflow:hidden;    -moz-box-shadow:0px 0px 0 #000; -webkit-box-shadow:0px 0px 0 #000; box-shadow:0px 0px 0 #000;}
.header .latestNews span {display:block; height:1.88em; left:0; position:absolute; top:0; width:442px; z-index:1; }
.header .latestNews a {color:#d84540; text-decoration:underline;}
.header .latestNews .newsWrap {font-size:12px; width:418px;}
.header .navExternal {position:relative; float:right; margin:0 0px 0 0;width:525px;}
.header .navExternal li {float:left; margin-left:10px}
.header .navExternal li a, .header .navExternal li.our-attractions a {background:transparent url(/_common/img/tab-top-blue.png) no-repeat 0 bottom; width:116px; color:#fff; display:block; font-family:'Avenir LT W01 95 Black', arial, Helvetica, sans-serif; font-size:.75em; padding:12px 0 16px; text-align:center;}
.header .navExternal li.our-attractions a {background-image:url(/_common/img/tab-top-red.png); width:147px;}
.header .navExternal li.timetable a {background-image:url(/_common/img/tab-top-orange.png); }
.header .navExternal li a:hover {color:#ffed00;}
.header p.logo {left:0; position:absolute; top:15px;}
.header p.logo a {background: url(/_common/img/merseyferries-screen.gif) 0 0 no-repeat; display: block; height: 69px; text-indent: -9999px; width: 207px;}
.header ul {float:left; margin-top:12px; padding:0 0 10px; width:100%;}
.header ul li {float:left; margin:0 0 0 25px;}
.header ul li:first-child {background:none; margin-left:0;}
.header ul li a {color:#fff; font-family:'Avenir LT W02 85 Heavy', arial, Helvetica, sans-serif; font-size:.95em; text-transform:uppercase; white-space:nowrap;}
.header ul li a:hover, .header ul li.selected a {color:#fcb70a;}

/******************************
*******************************
FOOTER STYLES
*******************************
******************************/

.footer {clear:both;}
.home .footer .container:before {content:url(/_common/img/lower-swoosh.png); height:36px; left:0; position:absolute; top:-15px; width:908px;}
.home .footer .container {padding:35px 0 0; position:relative;}
.footer .container div {float:left; margin:0 0 0 24px; width:285px;}
.footer .container h2, .footer .container h2 a {color:#fff; font-size:.95em; font-weight:bold; text-transform:uppercase;}
.footer .container h2, .footer .container p {margin:0 0 10px;}
.footer .container p {color:#fff; font-size:.8em;}
.footer .container div.siteInfo {clear:both; float:left; padding:15px 0 30px; position:relative; width:100%;}
.home .footer .container div.siteInfo {border-top:1px solid #5b98c4; margin:20px 0 0;}
.footer .container div.siteInfo p {color:#74b1d7; float:left; font-size:.7em; padding-top:6px; width:480px; margin-left:240px;}
.footer .container div.siteInfo p a {left:0; position:absolute; top:0;}
.footer .container div.siteInfo ul {float:right; margin:-10px 0 0;}
.footer .container div.siteInfo ul li {display:inline; float:left;}
.footer .container div.siteInfo ul li a {color:#fff; font-size:.75em; margin:0 0 0 10px; text-decoration:none;}
.footer .container div.siteInfo ul li.copy {clear:both;}
.footer .container div.siteInfo ul li.copy a {color:#5b98c4;}


/* =4. page components / modules */
/******************************
*******************************
ATTRACTIONS SLIDE UP/DOWN
*******************************
******************************/
#attractionsSlide {background:url(/_common/img/attractions.png) 0 0 no-repeat; clear:both; position:absolute; right:-20px; height:180px; z-index:1; width:952px;}
.up {top:-200px;}
.down {top:0;}
#attractionsSlide h2, #attractionsSlide p {clear:both; color:#fff; margin-left:55px; width:250px;}
#attractionsSlide h2 {font-family:'Avenir LT W01 95 Black', arial, Helvetica, sans-serif; font-size:1.6em; margin-top:30px; margin-bottom:8px; text-transform:uppercase;}
#attractionsSlide p {font-size:.95em;}
#attractionsSlide ul {position:absolute; margin:0; padding:0; top:27px; left:390px; width:465px;}
#attractionsSlide ul li {background:url(/_common/img/attractions-item-bg.png) 0 0 no-repeat; display:block; float:left; }
#attractionsSlide ul li a {color:#fff; display:block; font-size:.75em; font-weight:bold; text-align:center; white-space:normal; padding:85px 10px 15px; width:103px;}
#attractionsSlide ul li.item01 a {background:url(/_common/img/attractions-beatles.png) no-repeat center 20px;}
#attractionsSlide ul li.item02 {margin:10px 0 0 30px;}
#attractionsSlide ul li.item02 a {background:url(/_common/img/attractions-spaceport.png) no-repeat center 20px;}
#attractionsSlide ul li.item03 {margin:-10px 0 0 40px;}
#attractionsSlide ul li.item03 a {background:url(/_common/img/attactions-uboatstory.png) no-repeat center 15px;}
#attractionsSlide a#close {background:url(/_common/img/attractions-close.png) 0 0 no-repeat; display:block; height:27px; position:absolute; right:65px; text-indent:-9999px; top:30px; width:27px;}
/* home */

/******************************
*******************************
HOMEPAGE FEATURES, including FOOTER FEATURES
*******************************
******************************/

.feature {clear:both; width:100%;}
.feature li, .home .cta, .home .annualpass, /*.home .guestbook,*/ .home .photostream {margin-left:24px; float:left; }
.feature li:first-child {margin:0;}
.feature {float:left; margin:0 0 34px;}
.feature li {display:inline; float:left; margin:0 0 0 24px; position:relative; width:285px;}
.feature li a:after {height:36px; left:0; content:""; position:absolute; width:284px;}
.feature li a {display:block; position:relative; width:284px;}
.feature li a h2, .annualpass h2 {color:#fff; font-size:.95em; font-weight:bold; padding:15px 100px 10px 15px; text-transform:uppercase;}
.feature li a img {display:block; margin:0;}
.feature li a p, .annualpass  p {color:#fff; font-size:.8em; padding:0 15px 10px;}
.feature li a p.more {font-size:.75em; font-weight:bold; left:0; line-height:1; padding:6px 15px; text-transform:uppercase;}
.feature li.first a, .feature li.first a p.more {background:#2c76a4;}
.feature li.first a h2 {background:url(/_common/img/feature-first-bg.png) 178px 0 no-repeat;}
.feature li.first a:after {content:url(/_common/img/feature-swoosh-left.png); top:-10px;}
.feature li.second a, .feature li.second a p.more {background:#F78913;}
.feature li.second a h2 {background:url(/_common/img/feature-second-bg.png) 230px 17px no-repeat;}
.feature li.second a:after {content:url(/_common/img/feature-swoosh-middle.png); top:0;}
.feature li.third {margin-left:26px;}
.feature li.third a, .feature li.third a p.more {background:#d84540;}
.feature li.third a h2 {background:url(/_common/img/feature-third-bg.png) 220px 10px no-repeat;}
.feature li.third a:after {content:url(/_common/img/feature-swoosh-right.png); top:-20px;}

#slider, #slider-panels {float:left; overflow:hidden; position:relative; width:595px;}
#slider {padding-bottom:35px;}
#slider-panels {height:240px;}
div.main-panel {left:0; overflow:hidden; position:absolute; top:0; z-index:1;}
#slides-nav {position:absolute; right:0; bottom:0;}
#slides-nav a {background:url(/_common/img/slides-nav.png) 0 0 no-repeat; display:block; float:left; margin:0 0 0 5px; height:25px; width:22px;}
#slides-nav a.active {background-position:-22px 0}

/******************************
*******************************
ANNUAL PASS
*******************************
******************************/
.annualpass {background: #54BCE7; color:#fff; float:left; position: relative; width:285px;}
.annualpass h2 {padding: 15px 150px 0 20px;}
.annualpass p {padding:10px 20px 10px 20px;}
.annualpass img {position: absolute; right: 20px; top: -20px;}
.annualpass ul {background:#09192e url(/_common/img/annual-pass-prices.png) 20px 15px no-repeat; height:137px; width:285px;}
.annualpass ul li {left:-9999px; position:absolute;}
.annualpass .bottom {background:url(/_common/img/featureB.png) no-repeat 0 bottom; display:block; height:18px; padding:0 0 8px 0;}
.annualpass a.annualpassterms {color:#fff; font-size:.6em; padding:0;}
.annualpass a.annualpassterms:hover {color:#FFEC00;}

/******************************
*******************************
FIND US 
*******************************
******************************/

.footer .container .findus {margin-left:0; position:relative;}
.findus ul {width:116px;}
.findus li a {background:url(/_common/img/footer-arrow.png) 0 55% no-repeat; color:#fff; font-size:.7em; font-weight:bold; padding:0 0 0 8px; text-transform:uppercase;}
.findus li.terminal a {-moz-box-shadow:0 2px 4px rgba(0, 0, 0, .4); -webkit-box-shadow:0 2px 4px rgba(0, 0, 0, .4); box-shadow:0 2px 4px rgba(0, 0, 0, .4); display:block; font-size:.8em; padding:5px 8px; width:74px;}
.findus li.pierhead a {background:#d84540;}
.findus li.woodside a {background:#F78913; margin:5px 0;}
.findus li.seacombe a {background:#B2C326;}
.findus img {bottom:7px; position:absolute; right:0;}

/******************************
*******************************
GUESTBOOK
*******************************
******************************/

.footer .container div.guestbook {background:url(/_common/img/home-guestbook-bg.png) no-repeat bottom center; position:relative; padding:0 20px 80px; width:228px;}
.guestbook a, .photostream a {background:#d84540; -moz-box-shadow:0 2px 4px rgba(0, 0, 0, .4); -webkit-box-shadow:0 2px 4px rgba(0, 0, 0, .4); box-shadow:0 2px 4px rgba(0, 0, 0, .4); color:#fff; display:block; font-size:.75em; font-weight:bold; padding:8px; text-transform:uppercase;}
.guestbook a {width:110px;}
.guestbook a:after {bottom:10px; content:url(/_common/img/guestbook-photos.png); position:absolute; right:10px;}


/******************************
*******************************
PHOTOSTREAM/FLICKR
*******************************
******************************/

.footer .container div.photostream {margin-left:42px}
.photostream ul {float:left; margin:0 0 10px; overflow:hidden; width:288px;}
.photostream li {float:left;}
.photostream li a {-moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; margin:0 3px 0 0; padding:0; width:auto;}
.photostream li a img {display:block;}
.photostream a {width:180px;}
.photostream p {clear:both;}


/******************************
*******************************
LEFT COLUM
*******************************
******************************/

.sub {float:left; width:220px; margin:10px 17px 0 0}
.sub .annualpass {background:url(/_common/img/annual-pass.png) 100% 0 no-repeat; color:#fff; float:left; width:220px;}
.sub .annualpass ul {background-position:5px 15px; width:260px;}

.sub .nav2 {margin-bottom:20px;}
.sub .nav2 h2 {color:#fff; font-family:'Avenir LT W01 95 Black', arial, Helvetica, sans-serif; font-size:1.4em; text-transform:uppercase;}
.sub .nav2 li a {background:url(/_common/img/subnav-border.png) bottom center no-repeat; color:#fff; display:block; font-size:.85em; font-weight:bold; padding:10px 0; text-transform:uppercase;}
.sub .nav2 li.selected a {background:none;}
.sub .nav2 li.selected a, .sub .nav2 a:hover, .sub .nav2 li.selected li a:hover, .sub .nav2 li.selected li.here a {color:#ecb21f;}
/*.sub .nav2 li.selected ul {background:url(/_common/img/subnav-border.png) bottom center no-repeat; padding:5px 0 15px;}*/
.sub .nav2 li.selected ul {padding:5px 0 15px;}
.sub .nav2 li.selected {background:url(/_common/img/subnav-border.png) bottom center no-repeat; }
.sub .nav2 li.selected li a {background:url(/_common/img/footer-arrow.png) 0 55% no-repeat; color:#fff; padding:5px 0 5px 15px; text-transform:none;}

/******************************
*******************************
MAIN CONTENT
*******************************
******************************/

.content {background:#fff; float:right; padding:0 30px 30px; width:590px;}
.content h1 {background: #dd5a55 url(/_common/img/h1-gradient.gif) 0 0 repeat-x; background-image:-moz-linear-gradient(top, #d84540, #dd5a55); background-image:-ms-linear-gradient(top, #d84540, #dd5a55); background-image:-o-linear-gradient(top, #d84540, #dd5a55); background-image:-webkit-gradient(linear, left top, left bottom, from(#d84540), to(#dd5a55)); background-image:-webkit-linear-gradient(top, #d84540, #dd5a55); background-image:linear-gradient(top, #d84540, #dd5a55); color:#fff; font-family:'Avenir LT W01 95 Black', arial, Helvetica, sans-serif; font-size:1.65em; margin:0 -30px 20px; padding:12px 30px 16px ; position:relative; text-transform:uppercase; width:590px;}

.content h1 + img {margin:-20px -30px .5em; position:relative;}

.onecolumn {width:850px}
.onecolumn h1 {width:850px; position:inherit;}

/* article list */
.articleList {clear:both; overflow:hidden;}
.articleList li {clear:both; float:left; margin:0 0 15px; width:100%;}
.articleList li a {color:#F78913; font-weight:bold; text-transform:uppercase;}
.articleList li a:hover {color:#ecb21f;}
.articleList li img {border:1px solid #c8dce7; float:left; margin-right:26px; padding:5px;}
.articleList li p, .articleList li div {color:#454545; float:left; line-height:1.4; padding:10px 0; width:390px; font-size:.8em}

p.date {color:#5197FE; font-size:.7em;}

p.back {margin-top:2em; }
p.back a {background:url(/_common/img/back.gif) no-repeat 0 3px; padding-left:15px; color:#5197FE;  }
p.back a:hover {color:#00438A;}

.listOverview {float:left; font-size:.8em; width:50%; color:#4c4c4c}
.listOverview strong {font-weight:bold;}

.paging {float:right; width:50%; overflow:hidden; margin-bottom:2em;}
.paging ul {float:right;}
.paging li {float:left; margin:0 2px;}
.paging li a {background:#F78913; color:#fff; display:block; font-size:.9em; font-weight:bold; padding:3px 5px; }
.paging li.selected a, .paging li a:hover {background:#ecb21f; color:#F78913;}

.siteMap {color:#006499;}
.siteMap li {background: url(/_common/img/bullet-blue.gif) 0 .35em no-repeat; padding-left: 15px;margin-bottom:1.2em; font-size:.9em;}
.siteMap li li {font-size: 100%;}
.siteMap ul {margin:1em 0 0 2em;}
.siteMap li a {color:#5197FE; font-weight:bold;}

.contactForm {overflow:hidden; width:590px;}
.contactForm ol {border-top:10px solid #F78913; list-style-type: none;}
.contactForm legend span, .contactForm .frmAction label {position:absolute; left:-10000px;}
.contactForm fieldset {border:0;}
.contactForm ol li {background:#F78913; padding:5px 25px; width:540px;}
.contactForm label, .contactForm .checkbox p {clear:both; color:#fff; font-size:.85em; font-weight:bold; float:left; margin:5px 5px 0 0; text-align:right; text-transform:uppercase; width:195px;}
.contactForm label {padding-right:20px; position:relative;}
.contactForm label em {background: url(/_common/img/asterisk.png) 0 0 no-repeat; height: 15px; position:absolute; right:0; text-align:left; text-indent: -9999px; top:0; width: 15px;}
.contactForm input, .contactForm textarea, .contactForm select {padding:3px 5px; width:305px}
.contactForm select {width:317px}
.contactForm .frmAction {clear: both; background: #fff; text-align: right; padding-right:0; width:565px}
.contactForm .frmAction input {background:#d84540; border:none; -moz-box-shadow:0px 2px 4px #ccc; -webkit-box-shadow:0px 2px 4px #ccc; box-shadow:0px 2px 4px #ccc; color:#fff; cursor:pointer; font-size:.8em; font-weight:bold; margin-top:5px; padding:5px; text-align:center; text-transform:uppercase; width:auto;}
.contactForm .frmAction input:hover{background:#ecb21f;}
.contactForm .checkbox {float:left; padding-bottom: 15px;}
.contactForm .checkbox p {padding-right: 10px; width: 208px;}
.contactForm .checkbox ul {float:left; width:190px;}
.contactForm .checkbox ul li {padding: 5px 0; width:auto;}
.contactForm .checkbox ul label {font-weight:normal; margin:2px 0 0 5px; padding:0; width:170px; float:right; text-align:left;}
.contactForm .checkbox ul input {border:0; padding:0; width:auto;}
.contactForm .top {background:url(/_common/img/blueboxT.gif) no-repeat 0 0; height:18px;}

.contactForm .middle {background:#15569b url(/_common/img/blueboxM.gif) repeat-y 0 0; color:#fff; min-height:300px;padding:21px 39px;}
.contactForm .bottom {background:url(/_common/img/blueboxB.gif) no-repeat 0 bottom; height:18px;}
.contactForm p {line-height:1.5; margin:1em 0;}
.contactForm p.required {font-size: .85em; position: relative;}
.contactForm p.required em {background: url(/_common/img/asterisk.png) 0 0 no-repeat; height: 15px; display:inline-block; text-indent: -9999px; width: 15px;}

.contactForm a {color:#5197FE;border-bottom:1px solid #5197FE;}
.contactForm a:hover {color:#ffed00;border-bottom:1px solid #ffed00;}
.formErrors h2 {color:#5197FE;}
.formErrors li {color: #d94944;font-size:.85em; list-style:disc; margin:0 0 .5em 17px;}
.formErrors ul {margin-bottom:2.5em;}



/* =5. content/FCK */
.contFCK h2, .contFCK h3, .contFCK h4, .contFCK h5, .contFCK h6 {color:#5197FE; font-weight:bold; margin:0 0 .5em; text-transform:uppercase;}
.contFCK h2 {color:#d84540; font-size:1.2em;}
.contFCK h3 {color:#F78913;}
.contFCK h5 {font-size:.9em;}
.contFCK h6 {font-size:.8em;}
strong, b {font-weight:bold;}
.contFCK li {margin-left:.3em; font-size:.8em; line-height:2; }
.contFCK ul li {background: url(/_common/img/bullet-blue.gif) 0 .8em no-repeat; padding-left: 15px;}
.contFCK ol li {margin-left:1.7em; padding:0;}
.contFCK ul, .contFCK ol, .contFCK dl {line-height:1.5; margin-bottom:1.5em;}
.contFCK p {font-size: .8em; line-height:2; margin-bottom:1.0em;}
.contFCK a {color:#5197FE; text-decoration:underline;}
.contFCK a:hover {color:#003366;}

.contFCK img {margin:0 1.5em 1.5em 0; }
.contFCK img.imageLeft {float:left; margin:.5em 1.5em .5em 0;}
.contFCK u {text-decoration:underline}
.contFCK italic {font-style:italic}
.contFCK hr {border-top:1px solid #fff;border-bottom:1px solid #B5B4B9; margin-bottom:1.5em;}
.contFCK table {border:2px solid #c0d9fc;margin-bottom:1.5em;width:100%;border-collapse:collapse}
.contFCK caption {color:#023F82;font-size:.8em;font-weight:bold;padding-bottom:.5em;}
.contFCK td {border:2px solid #c0d9fc;font-size:.7em;vertical-align:top;padding:.5em 1em;}
.contFCK th {background:#c0d9fc; border:2px solid #c0d9fc; color:#5197FE; font-size:.7em;font-weight:bold; text-align:left; padding:.5em 1em;text-transform:uppercase;}
.contFCK blockquote {color:#5197FE; padding:1.5em 0 0 1.5em; margin-bottom:1.5em}
.contFCK cite {color:#5197FE;font-size:.8em; float:right; }
.contFCK small {font-size:.7em; color:#999;}

div#flashVideo { width: 590px; height: 324px;}
div#flashVideo .tvCommerical { background: url(/_common/img/video-first-frame.jpg)!important; width: 590px; height: 324px;}
div#flashVideo .wildlife { background: url(/_common/img/video-first-frame-Wildlife.jpg)!important; width: 590px; height: 324px;}

.hide {display:none!important;}