/********************************** Ferry main style sheet for OpenJaw Coded by tidy.ie, December 2007 ***********************************/ /* Defaults ================================================================*/ *, dl, dd, dt { margin: 0; padding: 0; } p { margin: 0 0 0.5em; } img { border: 0; } a, a:visited { color: #0066cc; } a:hover { text-decoration: none; } .clear { clear: both; height: 0; line-height: 0; } html { min-height:100%; margin-bottom:1px; } body { font: 12px arial,sans-serif; background: #ffffff; color:#444;} #wrapper { margin: 0; text-align: left; background-color: #FFFFFF; font: 12px arial,sans-serif; } #debug {color: #000000;} div.version{text-align: center; font: 12px verdana, arial,sans-serif;} /* Colorline header, default height (same as set by their CSS) */ #colorline-header { height: 129px; overflow: hidden; } /*hacks to deal with nested divs with the same ids*/ #content #content{width:792px; margin:0;} #content #content {margin-top:5px;} #main #main,#wrapper #wrapper{background:none;width:802px} #wrapper #wrapper{clear:both;} /* #main .segment {width:790px} #main p,#main .segment{margin:0 5px;} #main h1{margin:5px 0 6px 2px} */ /* Headings,text ================================================================*/ h1, h2, #general-header { clear: left; font-weight: normal; } h1, #general-header,#airDetailsForm h1,#content h1,h3.inbound-outbound,#body form h3.inbound-outbound {color: #027BC0; } h1, #general-header,#airDetailsForm h1,#content h1 { margin: 0 0 6px 2px; font-size: 2.1em;} #general-header,#airDetailsForm h1,#content h1,#main h1 {top:0;left:3px } #general-header{float:none} h1 { margin: 0 0 0.4em 0; font-size: 2.4em; color: #027BC0; height: 30px; line-height: 30px; } h2 { color: #606060; font-weight:normal } h2, #page-cabin form h3, #general-subheader { clear: left; font-size: 1.4em; line-height: 32px; padding-left: 14px; } h2.alt, #page-cabin form h3.alt { line-height:32px; color: #828282; background-color: #fff; } * html h2.alt, * html #page-cabin form h3.alt { line-height:20px; height:20px; padding-top:6px; padding-bottom:6px; } #page-cabin h2.alt { color: #fff; } #page-cabin form h3.alt { color:#444; } #page-cabin form h2 { font-size: 1.35em; } #page-cabin form h3 { font-size: 1.4em; } h2.car { background-repeat: no-repeat; } #page-calendar form h2, #page-cabin form h3, .area-select #content form h2, h2.ferry { background-repeat: no-repeat; } h2.ferry-light, #page-cabin form h3.alt { background-repeat: no-repeat; } h2, #page-cabin form h3, h2.ferry { } /*h2.ferry { background:url(../images/icons/header-ferry.gif) 741px 8px no-repeat; }*/ h2.feature { float: left; display: inline; width: 614px; margin-top: 6px; } h2.extras { background-repeat: repeat-x } h3 { clear: left; padding: 0 6px 0 12px; font-size: 1.2em; line-height: 34px; background: #efefef; font-weight:normal } h3.inbound-outbound, #body form h3.inbound-outbound{padding-left:10px;font-size:1.5em;background:none;font-weight:normal} .blue-header{ background-color:#dcdede; color:#4f4f4f; } h3.alt { color: #027BC0; background-color: #f5f5f5; } h3.alt em { color: #027BC0; font-weight: normal; } ul, ul li { list-style: none; } .lower { text-transform: lowercase; } .upper { text-transform: uppercase; } .right { text-align: right; } .center { text-align: center; } h2.hotel, h2.ferry { background-color:#027BC0; color:#fff; } .content-header{ background-color:#FFFFFF; border-color:#999999; border-style:solid; border-width:1px 1px 0 1px; color:#3E9BD0; font-weight:600; font-size:1.1em; width:200px; text-align:left; position:relative; top:51px; left:5px; padding-left:9px; } #airDetailsForm .content-header,#page-room .alt, #page-package .alt, #page-package .segment p.notice{ top:1px; left:0; font-size:1.2em; font-weight:600; line-height:32px; background-color:#DCDEDE; color:#4F4F4F; width:778px; padding-left:10px } #page-room .alt {width:780px} #airDetailsForm h1{margin-bottom:9px} /* Form defaults ================================================================*/ .vertical label {display:block;} label { } label.minor { font-weight: normal; } label.access { display: none; } label a { font-size: .8em; font-weight: normal; color: #0332fe; padding-right: 20px; } label a:visited { color: #0332fe; } input, select { color: #6d6d6d; font-size: 1em; /*border: 1px solid #7f9db9; background-color: #fff;*/ } input.standard { width: 185px; } select { width: 190px; } select.campaignSide { width: 140px; } input.medium, select.medium { width: 140px; height:20px; } input.small, select.small { width: 120px; } input.xsmall, select.xsmall { width: 90px; } input.ccsmall { width: 70px; } select.gender {width:70px;} select.genderlarge {width:100px;} select.month { width: 65px; margin-right: 5px; } select.year { width: 65px; } select.age { width: 42px; } select.title { width: 70px; } select.titlelarge { width: 100px; } select.large {width:220px;} button { font: 1.1em arial, sans-serif; } #link-next button, #link-next-extra button { margin-right: 5px; line-height: 27px; color: #f17e00; background-color: transparent; border: 0; width: auto; cursor: pointer; overflow: visible; } #link-next a, #link-next-extra a, a.more { margin-right: 5px; padding: 0 22px 0 0; } /*Increase width of vechicle drop down */ /*checkboxes / radio buttons*/ input.input-option { margin-right: 8px; } /*forms required field*/ form em { font-style: normal; font-weight:bold; } form label em, form th em { color: #027BC0; } form ul { margin-left: 6px; } /* Table defaults ================================================================*/ th { font-weight: bold; text-align: left; } .segment table { clear: left; margin: 4px 0 11px 4px; } .segment td, .segment th { padding-bottom: 8px; } * html td, * html th { font-size: .7em; font-s\ize: 1em; } tr.first th { padding-bottom: 11px; } th.access, td.access { text-indent: -999em; } .details table {clear: right; margin: 4px 0 11px 4px; } .details tr.people { border-spacing:0px;} /* Structure ================================================================*/ #branding, #sidebar, #shoppingCart{ float: left; display: inline; } #body-main {margin-left:9px} #main{ position:relative} #mainExtra{ position:relative;width:800px} #branding { position: relative; width: 1000px; height: 78px; } #page-confirmation #branding { margin-bottom: 2px; } #ferryCalendarForm { width:672px;position:relative;} #cruise-calendar-results { width:672px;position:relative;} #ferryCalendarForm h1.content-header, #cruise-calendar-results h1.content-header {top:51px;} #content {margin:3px;} #content {margin-top:50px;} #contentExtra {margin-top:0px;margin-left:10px} #content.no-button{margin-top:5px;} #content.with-summary {width:792px;} #main.with-summary {width:802px;} #footer { clear: both; height: 0; line-height: 0; } #sidebar{} #page-day{width:800px} #ferry-change-cabin, #cruise-change-cabin, #package-change-cabin-out, #package-change-cabin-in {width:792px} /*Backgrounds*/ #main,#mainExtra,#actions,#stages,#sidebar,#shoppingCart,#packageFerrySelection,#content {background-color:#f0f0f0;border:1px solid #bebebe;border-width:0} /* Sidebar features ================================================================*/ #sidebar h2, #sidebar h3 { padding: 0; background: none; } #sidebar h3 { line-height: normal; } #sidebar h2 { font-size: 1.6em; } #sidebar h4 { font-size: 1em; } /*search/quote recap information box*/ #recap,#summaryShopping,#summaryPackageShopping { width:178px;margin:5px 5px 15px 5px; padding-bottom:40px; background:url(../images/backgrounds/left_sidebar_box_bg_bottom.gif) bottom center no-repeat; } #recap h2 { color:#027BC0; font-size:1.5em; font-weight:normal; background:url(../images/backgrounds/left_sidebar_box_bg_top.gif) top center no-repeat; padding:5px 0 0 15px; } #criteria { margin: 0 0 20px; } #criteria h3,#summaryShopping h3{ margin: 0 0 17px 0; padding:10px 0 0 15px; line-height: 17px; font-size: 1.4em; color: #027BC0; } #criteria h4,#summaryShopping h4 { margin: 0 10px 8px 20px; color: #027BC0; font-size: 1.2em; font-weight:normal } #criteria ul,#summaryShopping ul { display:block; margin: 0 10px 18px 15px; border-bottom:1px dashed #e0e0e0; padding-bottom:10px } #criteria li,#summaryShopping li { margin-bottom: 5px; line-height: 1.3em; padding-left:5px; } #criteria li em,#summaryShopping li em { display: block; font-weight: bold; font-style: normal;} #recap .links { margin: 0 1px 0 5px;display:none; } #shoppingCart-total{position:absolute;bottom:23px;right:0} /*sidebar link lists*/ #sidebar .links li { margin-bottom: 0.5em; } #sidebar .links a { padding-right: 21px; } /* sidebar fare rule boxes */ #sidebar .fare-rules { width:178px; } #sidebar .fare-rules li { margin-bottom:15px; background:url(../images/backgrounds/left_sidebar_box_bg_bottom.gif) bottom left no-repeat; color:#333; } #sidebar .fare-rules h3 { margin-bottom:14px; padding:14px 0 0 18px; line-height:26px; font-size:1.4em; color:#027BC0; background:url(../images/backgrounds/left_sidebar_box_bg_top.gif) top left no-repeat; } #sidebar .fare-rules .alt h3 { } #sidebar .fare-rules ul, #sidebar .fare-rules ul li { margin:0; padding:0; list-style-type:none } #sidebar .fare-rules ul { margin:0 0 10px 7px; padding-bottom:7px; } #sidebar .fare-rules ul li { padding:0 6px 0 10px; margin:0 0 8px 8px; background:none; background:url(../images/icons/bullet_star.gif) top left no-repeat; border:0px; font-size:1.1em; } #sidebar .fare-rules ul li.more { margin-top: 6px; background:#fff; margin-right:10px; font-weight:normal; } #sidebar .fare-rules li.more a { color:#027BC0; } /* Special features ================================================================*/ /*booking stages*/ #stages { position:relative;top:10px;margin-bottom:20px} #stages li { float: left; color: #888; display: inline; margin-left:11px; line-height: 28px; margin-bottom: 14px; } #stages li a, #stages li a:visited { color: #888; text-decoration: none; display: block; } /*highlight current stage*/ #stages .selectedStage { color: #047BBF; font-size:1.2em; } /*translucent panel*/ #translucentPanel { width:672px; height:796px; } /*main content boxes/segments*/ .segment {display: inline; margin-bottom: 16px; float:left } .segment {background-color:#fff;border:1px solid #999} /*segments without a heading => top border and spacing added*/ .box { padding-top: 8px; padding-bottom: 1px; border: 1px solid #999; } /*segments beside other segments => hardly any bottom margin*/ .beside { margin-bottom: 0; } /*wrappers around content box portions that have their own background etc*/ .segment .inner { float: left; display: inline; width: 100%; } .segment p { margin-left: 6px; margin-right: 6px; } .segment p.final { margin-bottom: 15px; } /*main content specially formatted lines, at top of segments etc*/ .notice, .highlight { font-weight: bold; } .segment p.notice, .segment p.highlight { clear: left; margin-left: 0; margin-right: 0; padding-left: 14px; padding-right: 15px; } /*explanatory notes on booking forms*/ p.notice{ line-height: 32px; margin-bottom: 0; background: #efefef; font-size:1.2em; font-weight:normal; } /*notices for On Request Hotels*/ p.notice-orh { line-height: 32px; margin-bottom: 0; background: #027bc0; color: #ffffff; padding-left: 25px; font-size:1.2em; font-weight:normal; } p.notice-orh-line { margin-bottom: 0; background: #efefef; border: thin solid; margin-top: 2pt; line-height:20px; padding-left: 5px; font-size:1.2em; font-weight:normal; } p.notice em { font-weight: normal; } /*occasionally, deeper notice bands are used*/ p.notice-deep { line-height: 27px; } /*highlighted lines on booking forms*/ /*ie6 will not tolerate line height to centre this paragraph*/ p.highlight, div.highlight { padding: 7px 0 8px; color: #6476a4; margin-bottom: 0.75em; } /*greetings / messages e.g. thank yous*/ p.message { margin-bottom: 0.6em; font-size: 1.35em; font-weight: bold; } /*attention grabbing info on forms e.g. booking reference*/ p.attention { padding-right: 11px; text-align: right; line-height: 34px; font-size: 1.35em; font-weight: bold; color: #526286; background: #eef1f6 url(../../images/ferryHotel/backgrounds/attention.gif) top left repeat-x; } /*main instruction banners on forms*/ p.instruction { margin:0; padding:0; font-size: 1.2em; } /*important highlighted text e.g. in notes box*/ .important { color: #526586; } /*introductory text above content boxes*/ .intro { margin-left: 2px; font-size: 1em; } /*single line segments*/ div.single { width: 789px; float: left; display: inline; margin-bottom: 21px; border: 1px solid #efefef; } div.single p { line-height: 24px; margin: 0; } div.single label { font-size: .9em; } /*feature box e.g. for extras*/ div.feature { background: none; } div.feature p.final { clear: left; margin: 0; padding: 9px 5px 6px; border-top: 1px solid #9faec5; background-color: #f7f7f7; text-align: right; } /*links to pop-ups*/ a.popup { padding-right: 20px; font-size: .9em; font-weight: normal; text-decoration: underline; } a.popup:visited { color: #027BC0; } a.popup:hover { text-decoration: none; } .segment a.popup { margin-left: 6px; } #sidebar a.popup { font-size: 1em; } /*links with icons*/ /*link with add icon to left*/ a.add { margin-left: 20px; text-decoration: none; } /*link with more/next icon to right*/ li.more { } li.more a { margin-right: 22px; } a.add { display:block; width:116px; height:66px; line-height:64px; text-align:center; font-family:Arial,sans-serif; font-size:1.6em; font-weight:bold; text-decoration:none; color:#696969; background:url('../images/backgrounds/add_button.png') top left no-repeat; } a.add.selected{ background:url('../images/backgrounds/add_button_selected.png') top left no-repeat; color:#FFF; } /*ferry details*/ .details { position: relative; float: left; display: inline; width: 790px; padding-bottom: 3px; } /*ie6 below needs slimmer width to fit in segment*/ * html .details { width: 787px; } /*.details dl { padding-top: 2px;float:left;width:217px }*/ .details dl { padding-top: 2px;} .details.price-summary dl { line-height:23px;padding:0} /*.details dt { float: left; width:65px}*/ .details dt, .details dd em { color: #606060; font-weight:600} .details dt a { margin-left: 5px; padding-right: 20px; font-size: 0.83em; } .details div.photo { float: left; display:inline; margin-top:0; margin-right: 35px; margin-left:10px;} .details div.photo img { padding:4px; border:1px solid #E0E0E0;width:110px;height:65px } .details dl em { font-weight: bold; } .details dd { margin-bottom: 2px; font-size:1.1em; color:#828282} .details dd strong { font-weight: normal; } .details dt {font-size:1.2em; margin-bottom:5px;} /*package ferry details*/ /* details container */ .details-pkg { position: relative; float: left; display: inline; width: 395px; padding-bottom: 3px; } /*ie6 below needs slimmer width to fit in segment*/ * html .details-pkg { width: 393px; } /*.details dl { padding-top: 2px;float:left;width:217px }*/ .details-pkg dl { padding-top: 2px;} .details-pkg.price-summary dl { line-height:23px;padding:0} /*.details dt { float: left; width:65px}*/ .details-pkg dt, .details dd em { color: #606060; font-weight:600} .details-pkg dt a { margin-left: 5px; padding-right: 20px; font-size: 0.83em; } .details-pkg div.photo { float: left; display:inline; margin-top:0; margin-right: 17px; margin-left:5px;} .details-pkg div.photo img { padding:4px; border:1px solid #E0E0E0;width:55px;height:65px } .details-pkg dl em { font-weight: bold; } .details-pkg dd { margin-bottom: 2px; font-size:1.1em; color:#828282} .details-pkg dd strong { font-weight: normal; } .details-pkg dt {font-size:1.2em; margin-bottom:5px;} #airDetailsForm .details dt {float:left;margin-right:5px;width:60px} /*select help text*/ .helptext-box{padding:15px 0 0 0;border-bottom-width:0;margin-bottom:0;width:786px} .helptext-box p{font-size:1.1em;margin:0 0 8px 14px} .helptext-box a,.helptext-box a:visited{text-decoration:none} .helptext-box .info{color:#828282} .helptext-box .ui-info{color:#ff931e} .helptext-box .cms-link a,.helptext-box a:visited{color:#0eb2e9} /*ferry facilities icons*/ .details .facilities { position: absolute; top: 3px; right: 5px; } .price-summary .facilities {position:absolute;top:86px;left:0} .details .facilities li { float: left; margin-left: 6px; } .details .facilities img { border: 1px solid #b1b1b1; } #amenities li{ float: left; margin-left: 6px; display: grid; } /*screen actions - back/next links at bottom*/ #actions { border-width:1px;width: 988px; clear: both; margin: 0; margin-top:5px;float: left; display: block; padding:5px;} #actions li { line-height: 27px; float: left; width: 210px; display: inline; } #actions li#link-back, li#link-back-extra { margin-right: 1px; } #actions #toTop{margin:0 auto;float:left;margin-left:217px;padding-top:15px;text-align:center;line-height:13px;height:40px} #actions #toTop a{font-size:1.7em;text-decoration:none;color:#0EB2E8;text-transform:none;letter-spacing:-1px;line-height:18px;} #actions #toTop a span{font-family:verdana;font-size:27px;} #actions li.single { width: 100%; } #actions #linkNext{ text-align: right; float:right; background:url(../images/backgrounds/form_button_bg_right_narrow.gif) center right no-repeat; } #actions #linkReturn { text-align: right; float: left; background: url(../images/backgrounds/form_button_bg_right_narrow.gif) center right no-repeat; width: 90px} #actions #linkBack{float:left} #actions li a { font-size:1.2em; font-weight: bold; text-decoration:none } #actions li a{ text-transform:none; } #linkNext a, a.more { padding: 0 22px 0 0; } /*The button itself*/ #linkNext button,button#topsubmit,#actions li#link-back,button.choose{ border-width:0; width:165px; height:64px; color:#666666; cursor: pointer; overflow: none; background:url(../images/backgrounds/nav_selected_shaded.gif) top left repeat-x; float:right; font-size:1.4em; } /*The div containing the button text*/ #linkNext button div,button#topsubmit div,#linkBack a,button.choose div{ margin:-1px -3px 0 0; padding-top:22px; display:block; width:158px; height:40px; float:right; background:url(../images/backgrounds/nav_continue_arrow.gif) top right no-repeat } /*Empty div with shaded button end as background*/ #linkNext button div.button-end, button#topsubmit div.button-end, #linkBack div.button-end,button.choose div.button-end { float:left; padding:0; margin:-2px 0 0 -3px; width:3px; height:64px; background:url(../images/backgrounds/nav_selected_back_shaded.gif) top left no-repeat } button.choose{text-align:left} button.choose{width:220px} button.choose div{width:193px;} #linkBack { background:url(../images/backgrounds/nav_back_shaded.gif) top left repeat-x; text-align:center } #actions li#linkBack a {margin-left:-1px;margin-top:0;height:40px;width:210px;float:left;background:url(../images/backgrounds/nav_back_arrow.gif) top left no-repeat;color:#666666;font-size:1.4em;padding-top:22px;line-height:20px} #linkBack div.button-end{float:right;background:url(../images/backgrounds/nav_back_back_shaded.gif) top right no-repeat;margin:0} #linkReturn a { color: #fff; line-height:25px; text-decoration: underline; background:url(../images/backgrounds/form_button_bg_left.gif) center left no-repeat; height:25px; display:block; margin-right:3px; padding-left:13px; padding-right:10px; text-align:center;} #linkNext a { color: #fff; line-height:25px; text-decoration: underline; background:url(../images/backgrounds/form_button_bg_left.gif) center left no-repeat; height:25px; display:block; margin-right:3px; float:right; padding-left:13px; padding-right:10px; text-align:center;} button#topsubmit{position:absolute;top:7px;right:5px} #linkBack a:visited { color: #fff; } /* common form elements ================================================================*/ /*contact/billing info segment*/ #fields-contact { margin-top: 14px; margin-bottom: 15px; } #fields-contact p { margin-bottom: 0.8em; margin-right: 0; } #fields-contact label { width: 147px; float: left; display: inline; margin-right: 2px; padding-top: 2px; text-align: right; } #fields-contact .column { width: 350px; margin-top: 2px; float: left; display: inline; } #fields-contact .column input { width: 100px; } #fields-contact .column select { width: 102px; } #fields-contact .narrow { width: 350px; } #fields-contact .narrow label { width: 95px; } /* single day display screen ====================================================*/ /*box subheadings*/ div.subheading { float: left; display: inline; width: 100%; margin-bottom: 4px; padding-top: 4px; background: #fff; line-height: 36px; } #airDetailsForm div.subheading {width:788px} .segment div.subheading h3 {clear: none; display: inline; float: left; width: 250px; padding: 0 0 0 20px; background: none; font-size: 1.1em; font-weight:bold; color: #606060; line-height: 36px; } div.subheading h3 { clear: none; display: inline; float: left; width: 230px; padding: 0; background: none; font-size: 1.35em; color: #027BC0; line-height: 36px; } div.subheading span { width: 320px; display: inline; } div.subheading span a, div.subheading span a:visited { font-weight: bold; } div.subheading span.previous { height:auto; margin-left: 8px; float: left; text-align: left; display: inline; background: url(arrow-back.gif) center left no-repeat; } div.subheading span.next{ height:auto; width:auto; margin-right: 8px; float: right; text-align: right; display: inline; background: url(arrow-next.gif) center right no-repeat; } div.subheading span.previous a { margin-left: 10px; text-decoration: none} div.subheading span.next a { margin-right: 10px; text-decoration: none} /*sailing choices*/ .option { float: left; display: block;margin: 10px 0 10px 20px;} #airDetailsForm .option{width:768px} /*fares*/ /*ie7 needs li float to avoid left padding*/ .option .fares, .option .fares li { float: left; display: inline; width: 220px; margin: 0; padding: 0; } .option .fares { margin:0;height:75px } .option .fares {border-right:#999999 dashed 1px} .option .fares li { margin-top: 6px; } .option .fares li label { margin-left: 0; font-weight: normal; } .option .fares li label strong { font-size: 1em; } .option .fares li input { margin: 0; padding: 0; vertical-align:baseline} .option .fares #moneyAmount {font-size:1.8em;margin:0 3px} .option .fares #moneyAmountBefore {font-size:0.9em;} .option .fares del { color: rgba(255,0,0, 0.5); text-decoration: none; position: relative; font-size:0.9em; top: -10px; } .option .fares del::before { content: " "; display: block; width: 100%; padding-bottom: 2px; top: 50%; border-top: 1px solid rgba(255,0,0, 0.5); height: 12px; position: absolute; bottom: 0; left: 0; transform: rotate(-7deg); } /*ferry details - changes from standard styling*/ #page-day .details { width: 540px; margin-top:0;padd } #page-day .details dt, #page-day .details dd { margin-bottom: 3px; font-size: 1.1em; } #page-day .details dt.photo { margin-right: 4px; } #page-day .details dt a { margin-left: 8px; font-size: 1.1em; } #page-day .details dd strong { font-weight: bold; } /*sailing journey time*/ #page-day .details .journey-time { clear: both; position: absolute; top: 35px; right: 0; width: 200px; margin: 0; text-align: right; } /* price page ====================================================*/ /*#page-price {background: #cdcdcd url(../Package Flow/images/ferry/backgrounds/page.jpg)}*/ /*price page peculiarities*/ #page-price ul.notices { margin: 5px 10px 10px; } #page-price a.popup { margin-left: 10px; } /*rates breakdown*/ .segment table.breakdown { width: 790px; margin: 8px 10px 5px 14px ; } table.breakdown td, table.breakdown th { padding-bottom: 3px; } table.breakdown th { width: 94%; padding-left: 2px; font-weight: normal; } table.breakdown th.subheading { padding-top: 8px; } table.breakdown tr.totals th, table.breakdown tr.totals td { padding-top: 5px; border-top: 1px solid #c5cbd7; font-weight: bold; } /*terms and conditions box*/ #page-price #terms { margin: 15px 10px 10px; padding-top: 11px; } #page-price #terms label { font-weight: normal; } /*booking total box*/ #page-price .amount { font-size: 1.3em; text-align: right; line-height: 32px; margin-right:0.5cm;} #page-price .amount strong { font-size: 1.6em; font-weight: normal; } #page-price .amount span { font-size: 0.75em; } /*extras box*/ ul.extras { float: left; display: inline; width: 611px; margin: 2px 4px; } ul.extras li { float: left; display: inline; width: 307px; margin: 0 0 10px; color: #027BC0; } ul.extras li.first { clear: left; width: 304px; } ul.extras li.divider { width: 611px; padding: 0; } ul.extras li.divider hr { visibility: hidden; } ul.extras li.row1 { border-bottom: 1px dashed #c9d1de; } ul.extras li h3 { padding: 0; color: #027BC0; font-size: 1.1em; line-height: normal; background: none; } ul.extras li p { margin-left: 0; margin-right: 0; } ul.extras li p strong { font-size: 1.1em; } ul.extras li p em { color: #027BC0; font-size: 1.1em; } ul.extras li img, ul.extras li div { float: left; display: inline; } ul.extras li div { width: 193px; margin: 5px 0 0; } ul.extras li.first div { width: 195px; } ul.extras li img { margin: 5px 4px 5px 5px; border: 3px solid #ecedf2; } ul.extras li.first img { margin-left: 2px; } ul.extras ul { clear: left; float: left; display: inline; width: 100%; margin: 3px 0 0 5px; } ul.extras li.first ul { margin-left: 2px; } ul.extras li li { width: auto; margin: 0; padding: 0; font-size: .9em; } ul.extras li li.add { margin-right: 11px; } ul.extras li li.more { float: right; display: inline; width: 138px; margin-right: 5px; text-align: right; } /* passenger information page ====================================================*/ /*passenger page peculiarities*/ #page-passenger p.intro { margin-bottom: 0.9em; } #page-passenger form h4 { color: #027BC0; font-size: 1em; margin-left: 6px; padding-top: 6px; padding-bottom: 2px; } #page-passenger .box p { line-height: 19px; } #page-passenger p.access { background: url(access.gif) top left no-repeat; line-height:21px;margin-right:13px; padding-left:40px; margin-left:10px; } #page-passenger .segment input.input-option { margin-right: 4px; } #page-passenger .segment label.minor { margin-right: 6px; } #page-passenger div.final { margin-bottom: 22px; } /*ie needs relative positioned paragraph to be floated to appear correctly*/ #page-passenger .segment p.notice { position: relative; clear: left; float: left; display: inline; width: 761px; } * html #page-passenger .segment p.notice { width: 789px; w\idth: 761px; } #page-passenger .segment p.notice span { position: absolute; right: 15px; top: 0; font-weight: normal; } /*accommodation specifics*/ .price-summary dl{float:left;width:217px} */ .criteria { float:left; margin: 0;padding:2px 0 0 } .criteria li { margin-bottom: 5px;font-size:1.1em } .criteria li.alt { } .criteria li span.space { margin-left: 6px; } dl.criteria{width:355px;float:right;margin-right:10px} dl.criteria dt{width:160px;} /*lead passenger information boxes*/ #passenger-name, #passenger-email { margin-top: 14px; margin-bottom: 15px; } #passenger-email p { margin-bottom:15px; padding:0; clear:both; } #passenger-name label, #passenger-email label { width: 203px; float: left; display: inline; margin-right: 2px; text-align: right; } #passenger-name label { width: 199px; margin-right: 4px; } /*ie6 bug => shift second e-mail input left to get inputs to line up*/ * html #passenger-email #email2 { margin-left: -3px; } #passenger-email #email1 { float: left; display: inline; } #passenger-email input { margin-right:8px; } #passenger-email small { font-size: .9em; } #passenger-phone { float: left; display: inline; margin-top: 2px; } #passenger-phone table { margin-bottom: 8px; } #passenger-phone th.row { text-align: right; } #page-passenger #passenger-phone table th { padding: 2px 3px 0 0; vertical-align: top; } #passenger-phone table td { padding-bottom: 5px; } #passenger-phone table th { font-weight:normal; } #page-passenger #passenger-phone .fields { margin: 0; } #page-passenger #passenger-phone .fields li label { margin-bottom: 4px; } #page-passenger #passenger-phone .fields li { margin-right: 18px; } select#country-code { width: 55px; } input#area-code { width: 65px; } #page-passenger #fields-contact { margin-top: 1.35em; margin-left: 56px; } #page-passenger #fields-contact p { margin-bottom: 0.85em; } #page-passenger #fields-contact .narrow { width: 280px; } #page-passenger #fields-contact .narrow label { width: 87px; } #page-passenger #fields-contact .column { margin-bottom: 4px; } #page-passenger #passenger-names { margin-left:14px; } #page-passenger #passenger-names th { font-weight:normal; } /* payment page ====================================================*/ #page-payment .important { margin-bottom: 3px; } /*card payment segment*/ #fields-payment { width: 611px; float: left; display: inline; margin-top: 2px; } #fields-payment li { width: 160px; float: left; display: inline; margin-bottom: 10px; } #fields-payment label { display: block; margin-bottom: 2px; } #fields-payment label.access { display: none; } #fields-payment li#field-number { width: 186px; } #field-number input { width: 160px; } #fields-payment li#field-code, #fields-payment li#field-help { width: 268px; } #field-code input { width: 75px; margin-bottom: 4px; float: left; display: inline; } #field-code small { width: 168px; margin-left: 8px; float: left; display: inline; } #field-help img { vertical-align: middle; margin-right: 4px; } #field-help small { padding-top: 20px; } #pay-methods { margin-left: 120px; } /* confirmation page ====================================================*/ #page-confirmation dl { color: #027BC0; } /* dominant rules - placed at end of stylesheet to ensure they take precedence*/ /*add space beneath some header style paragraphs used at top of content segment boxes*/ p.space { margin-bottom: 0.75em; } /* homepage booking forms ====================================================*/ #bookingPanel { width:312px;float:left; display:inline;padding-bottom:5px;margin-left:5px} #bookingPanel p,li,label { font-family:arial,sans-serif;font-size:1em;color:#666666 } #bookingPanel form { padding:15px 5px 1px 5px; float:left; width:295px; border:1px solid #999999;background-color:#fff;margin-top:50px} * html #bookingPanel form { width:290px; } /* IE width due to padding */ #bookingPanel .segment { clear:both; float: left; display: block; margin:0 0 10px 3px; background:none; border:0; border-bottom:1px dashed #ccc; padding:0 0 0 3px; width:282px; voice-family: "\"}\""; voice-family:inherit; width:275px; } #bookingPanel .segment p { margin: 0 0 1em;} #bookingPanel .segment .left { float:left; margin: 0.5em 0 1.2em;} #bookingPanel .segment table { margin:0 0 1.2em; } #bookingPanel .first { border:0; margin-bottom:0; } #bookingPanel form select { font-size:1em;} #bookingPanel form select.campaignSide { width: 65px;} #ferryHotel-search-panel{display:none;} /* Top Nav */ #nav { top:51px;height:30px; position:relative; border-width: 0;} #nav ul, #nav li { margin:0px; padding:0px; list-style-type:none } #nav li { display:inline; margin:0px 10px 0; } #nav li a {background-color:#bebebe;line-height:30px; font-size:1em; position:relative;text-decoration:none;display:block; float:left; padding:0 13px; border:1px solid #999999; color:#666666 } #nav li a{border-bottom-width:0} li#navFerry a { border-right-width:0;} .ferry #nav li#navFerry a, .cruise #nav li#navCruise a, .themeCruise #nav li#navThemeCruise a , .ferryHotel #nav li#navFerryHotel a{border-right-width:1px ;margin-left:0;background-color:#fff; color:#3e9bd0;font-weight:600} /* Booking Form */ #bookingPanel form p { margin-bottom:1.2em; } #bookingPanel form p#trip-type { margin-bottom:0;display:block;} #bookingPanel form .count { width:40px; } #bookingPanel ul#vehicles label{ color:#3e9bd0 } #segment-vehicles label,#segment-bicycles label,#segment-cabins label{width:228px;float:right;line-height:22px} #segment-vehicles .count,#segment-bicycles .count,#segment-cabins .count{margin-left:-6px} #cabins-journey label{float:none;width:auto;line-height:normal;} #cabins-journey .count{margin-left:0} /* Yes / No for flexible dates */ #dates-flexible { } #dates-flexible label { margin:0 5px 0 15px; } /* Trip type options */ #trip-type { } #trip-type label { margin:0 0 0 20px; font-weight:normal } #trip-type label.first,#trip-type label.last { margin:0; } #trip-type label.last { float:left;margin-top:6px;margin-bottom:15px } /* Inbound & Outbound options */ .inbound label, .outbound label, .journey label { display:block } .journey input.date, .inbound input.date, .outbound input.date{ width:64px; } .inboundfh input.date{ width:64px; } #bookingPanel form p.outbound { margin-bottom:0.4em; } #bookingPanel #bookingPanel form .travel-dates { padding-bottom:1.2em; } /* overwrites segment spacing as inbound outbounnd paragraphs have different spacing */ #bookingPanel form .outbound-inbound { padding-bottom:0.8em; } #bookingPanel form .outbound-inbound p { margin-bottom:0.4em; } #bookingPanel input {font-size:1em;vertical-align:middle} #bookingPanel select {font-size:0.9em;vertical-align:middle} #bookingPanel form p.outbound input,#bookingPanel form p.inbound input,#bookingPanel form p.inboundfh input {width:70px;} #bookingPanel form p.outbound select,#bookingPanel form p.inbound select,#bookingPanel form p.inboundfh select {width:165px} #bookingPanel select.ferryHotel-country{width:190px ! important} #bookingPanel label,#bookingPanel option,#bookingPanel select,#bookingPanel input { font-weight:normal;} #bookingPanel label.promotion-code-label { display:block;color:#ff931e } #bookingPanel label.promotion-code-label { display:block;color:#ff931e } #bookingPanel label.all-inclusive-label { display:inline;color:#ff931e; margin:0 5px 0 5px; } #allInclusiveCheckboxDiv { clear: both; margin-bottom:8px; } /* Hides multi content by default */ #multi-trip { display:none } #multi-trip .journey { padding-bottom:1px; } #multi-trip .journey label { margin:0px 0 6px; } /* Cabins details */ #bookingPanel h3 { clear:both; font-size:1em; color:#3e9bd0; font-weight:bold; margin:0 0 3px; padding:0; background:none;line-height:26px } #bookingPanel h3.search-header{font-size:1.4em;color:#606060;letter-spacing:-1px;margin:0 0 10px} form ul.cabins { margin-left: 0; } ul.cabins li { clear: left; float: none; display: block; } ul.cabin-people, ul.cabins ul.cabin-people li { margin:0px; padding:0px; list-style-type:none; clear:both; } ul.cabins ul.cabin-people li { clear: none; text-align:center; width:29%; float:left; padding-bottom:0.5em; } ul.cabins ul.cabin-people li.first,ul.cabins ul.cabin-people li.last{width:19%; } ul.cabins ul.cabin-people li.first{margin-right:8px} ul.cabin-people li input { } ul.cabin-people label { font-weight:normal; display:block; margin-bottom:2px; } ul.cabin-people strong { display:block; font-weight:normal;font-size:8pt;} #bookingPanel ul.cabin-people label { color:#828282 } +++ /* Vehicle options */ ul#vehicles, ul#vehicles li { margin-bottom:1.2em; margin:0px; padding:0px 0px 20px 0px; list-style-type:none; } ul#vehicles { padding-bottom:0; } #vehicles li {display:block; margin-bottom:10px; float:left; padding:0; } #vehicles label { display:block; padding:1px 2px; float:left; } /* Vehiclefh options */ ul#vehiclesfh, ul#vehiclesfh li { margin-bottom:1.2em; margin:0px; padding:0px 0px 20px 0px; list-style-type:none; } ul#vehiclesfh { padding-bottom:4px; } #vehiclesfh li {display:block; float:left; padding:0; } #vehiclesfh label { color:#027BC0; display:block; padding:1px 2px; } /*Common vehicle options*/ select.vehicle-type { width:235px;} select.vehicle-length { width:110px;} select.trailer { width:235px;} select.trailer-length { width:110px;} .vlength {float:left;margin-bottom:10px} .vtype {clear:both;margin-bottom:3px} .tlength {float:left; margin-bottom:1opx;} .ttype {clear:both;margin-bottom:3px} /* Pet T&C's and Option Lists*/ #pet-terms .checkbox { float:left; width:24px; padding:0; height:16px; padding-bottom:10px; } #pet-terms .checkbox input { height:16px; } #pet-terms label {float:left; text-align:left; margin:0; padding:1px 0 0; color:#828282; font-weight:normal; } #pet-terms p {float:left; text-align:left; font-weight:normal; margin:5px 0 10px 25px; padding:0; } #pet-terms p.note {clear:both;width:100%} #pet-fields { clear:both; } ul#pets, #pets li { margin:0px; padding:0px; list-style-type:none; } #pets li { width:126px; float:left; padding-bottom:1.2em; } #pets li label { display:block; padding:0px 2px 1px; } #pets li select { width:107px;} /* form submit button */ #bookingPanel form p#submit-button { margin-bottom:0.7em; } #submit-button { width:145px; height:37px; padding:0px; margin:0px; text-align:left; background:url(../images/backgrounds/update_button.png) center left no-repeat; padding-left:3px;margin-left:5px } #submit-button button { border:0px; margin:0px; padding:0px; background:none; font-size:1.2em; } #submit-button div { } #submit-button button { line-height: 30px; height:37px; color: #666; border: 0; width: auto; cursor: pointer; overflow: visible;float:left; margin-right:4px; padding-left:43px; padding-right:40px; } #update-button { width:200px; height:37px; padding:0px; margin:0px; text-align:left; background:url(../images/backgrounds/update_button.png) center left no-repeat; padding-left:3px;margin-left:5px } #update-button button { border:0px; margin:0px; padding:0px; background:none; font-size:1.2em; } #update-button button { line-height: 30px; height:37px; color: #666; border: 0; width: auto; cursor: pointer; overflow: visible;float:left; margin-right:4px; padding-left:16px; padding-right:40px; } #cancel-button { width:200px; height:37px; padding:0px; margin:0px; text-align:left; background:url(../images/backgrounds/update_button.png) center left no-repeat; padding-left:3px;margin-left:5px } #cancel-button button { border:0px; margin:0px; padding:0px; background:none; font-size:1.2em; } #cancel-button button { line-height: 30px; height:37px; color: #666; border: 0; width: auto; cursor: pointer; overflow: visible;float:left; margin-right:4px; padding-left:16px; padding-right:40px; } #submit-button div, #submit-button button strong { height:37px; line-height:30px; } #submit-button button strong { display:block; margin:0px; padding:0px; text-decoration:none; color:#666; text-align:center;} .validation-error-box-cl { margin: 0px 0px 3px 2px; padding: 5px; width:570px; border: 2px red solid; background-color: white; color: red; } .spinnerText { font-size: 16px;} /* Ferry hotel read more button */ .details a.popup, .details a.popup:visited, .details a.more, .details a.more:visited { font-weight: normal; font-size: 1em; color: #027BC0; } /*paging and sort search results bar*/ .paging { position: relative; width: 789px; height: 34px; margin: 15px 0 8px; background-color: #efefef; } .paging label { padding-left:8px; } .paging select { width: 130px; } .paging p { position: absolute; top: 7px; left: 5px; width: 300px; } .paging ul { position: absolute; top: 10px; right: 11px; width: 250px; text-align: right; color: #027BC0; } .paging li { display: inline; margin-right: 4px; } .paging a.current, .paging a.current:visited { text-decoration: none; color: #027BC0; } /*package price box*/ div.price {border: 1px solid #e0e0e0; background-color:#f4f4f4; text-align:right;font-size:1.2em; color:#334e59 } /*ie6 misbehaves, getting position slightly away from right edge - correct here * html div.price { width: 250px; left: 532px; } * html #page-package div.price { left: 534px; } * html #page-price div.price { left: 537px; } */ div.price p { margin: 0px 4px 4px 4px; } div.price p span { float: left; display: inline; margin: 4px 4px 0 0; width: 190px; line-height: normal; text-align: left; font-size: 0.9em; } div.price p em { font-size: 1.5em; position:relative; top:8px; font-style:normal; font-weight:normal} div.price p span strong { display: block; font-size: 1.1em; font-weight:normal; } div.price p.average { margin-bottom: 6px; text-align: right; clear:both; padding-top:4px; } .rate-explanation{float:left;width:394px} .rate-explanation h4{font-size:1.3em;margin:8px 0 10px 14px} .rate-explanation ul{margin:0 14px} .rate-explanation ul li{list-style-type:disc;font-size:1.1em;color:#828282;margin:0 0 8px 20px;} /* dominant rules - placed at end of stylesheet to ensure they take precedence ==============================================================================*/ /*add space beneath some header style paragraphs used at top of content segment boxes*/ p.space { margin-bottom: 0.75em; } .relative { position: relative; } #change-links, .break-line { display:none } /* servicing styles - ensure override */ .standbyFerryHeader{ color:red !important; width:290px !important; } .standbyFerrySummary{color:red !important;} /*Borders ================================================================*/ #ferryCalendarForm #content, #cruise-calendar-results #content { border:1px solid #999999;background-color:#FFF;padding-bottom:30px} #bookingPanel form,#nav li a,.content-header,#ferryCalendarForm #content,#cruise-calendar-results #content,#actions,#airDetailsForm .content-header,.segment,#seat-selection{border-color:#BFBFBF} /*Group Enquiry page and confirmation page*/ /*Added here so the width value from the #bookingPanel form rule (above) is overridden */ #bookingPanel #group_book_enquire{width:750px;} #content .enquiry-action{width: 855px;} .enquiry-info{clear:both; float:left;} .paging ul { float:right; margin-bottom: 0; margin-left: 0; position:relative; top:auto; right:auto; width:auto; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; *zoom: 1; } .paging p{ float:left; position:relative; top:auto; width:auto; } .paging p.hits{ float:right; padding: 1px 14px; line-height: 20px; color: #027BC0; font-size:1.25em; font-weight:bold; } .paging select{ background-color: #FFFFFF; border: 1px solid #CCCCCC; height: 22px; line-height: 22px; } .pagination-right { text-align: right; } .paging ul > li { display: inline; margin-right:auto; } .paging ul > li > a, .paging ul > li > span { float: left; padding: 0 10px; line-height: 20px; text-decoration: none; background-color: #ffffff; border: 1px solid #dddddd; border-left-width: 0; } .paging ul > li > a:hover { background-color: #f5f5f5; } .paging ul > .current-page > a, .paging ul > .current-page > span { color: #333; cursor: default; background-color: transparent; border-top:1px solid transparent; border-bottom:0; font-weight:bold; } .paging ul > li:first-child > a, .paging ul > li:first-child > span { border-left-width: 1px; -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .paging ul > li:last-child > a, .paging ul > li:last-child > span { -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; }