/* ------------------------------------------------- URI: http://www.eaveswaytravel.com/ Created by Vince Lee - Forte Trinity ------------------------------------------------- CONTENTS 1: SITE MASTER SETUP (including reset from Tripoli) 2: TYPOGRAPHY/DESIGN 3: LAYOUT 3.1 main form 3.2 container 3.3 header 3.4 content 3.5 primary content 3.6 secondary content 3.7 tertiary content 3.8 footer 4: GLOBAL ELEMENTS / CONTROLS 4.1 accessibility 4.2 - curved elements 5: TEMPLATE / PAGE SPECIFIC 6: USEFUL CLASSES /* ----------------------------------------------- 1. SITE MASTER SETUP ----------------------------------------------- */ /* Imported mostly from Tripoli reset.css - http://www.monc.se/tripoli/css/reset.css */ * { margin:0; padding:0; text-decoration:none; outline:none } code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext, password { font:inherit } a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table { border:none } table { border-collapse:collapse; border-spacing:0 } caption, th, td, center { text-align:left; vertical-align:top } q { quotes:"" "" } font { color:inherit !important; font:inherit !important; color:inherit !important } marquee { overflow:inherit !important; -moz-binding:none } blink { text-decoration:none } nobr { white-space:normal } /* end of import */ body { height:100%; text-align:center; min-width:775px } ul { list-style:disc outside } ol { list-style:decimal outside } .content ul, .content ol { margin-left: 20px } /* ----------------------------------------------- 2. TYPOGRAPHY / DESIGN ----------------------------------------------- */ html { font-size:62.5%; font-family:arial, verdana, "microsoft sans serif", helvetica, sans-serif; color:#000 } code, kbd, samp, pre, tt, var, input[type='text'], input[type='password'], textarea { font-size:1.1em; font-family:monaco, "Lucida Console", courier, mono-space } h1 { font-size:1.6em; /* color:#000; margin:0 0 12px 0 */ } #primary-content h1 { width: 604px; height: 141px } h2 { font-size:1.5em; /* color:#000; margin:0 0 12px 0 */ } #secondary-content h2 { width: 368px; height: 176px } .content h2, .content h3 { margin-bottom: 15px } h3 { font-size:1.4em; clear: left /* color:#000; margin:0 0 12px 0 */ } h4 { font-size:1.3em; /* color:#000; margin:0 0 12px 0 */ } h5 { font-size:1.2em; /* color:#000; margin:0 0 12px 0 */ } h6 { font-size:1.1em; /* color:#000; margin:0 0 12px 0 */ } .text-as-image { margin-bottom: 10px } p { font-size:1.1em; /* color:#000;*/ margin:0 0 12px 0 } p.firstpara { font-weight: bold } p.highlight { color: #990000; font-weight:bold } img { border: none; } a { text-decoration: underline } a:hover { } a:visited { } a:active { } div.small-print { font-size: 0.9em } a.btn-standard {display: block; height: 29px; width: 76px; } ul { margin:0 0 12px 0; font-size:1.1em } ol { margin:0 0 12px 0; font-size:1.1em } dl { margin:0 0 12px 0; font-size:1.1em } hr { display:block; background:#aaa; color:#aaa; width:100%; height:1px; border:none } address { font-size:1.1em; color:#000; font-style: normal } blockqoute { } table { border-top:1px solid #ccc; border-left:1px solid #ccc; width: 100%; border-collapse:collapse} thead tr { background: #003745; color: white } th { text-align:center } th, td { border-bottom:1px solid #ddd; border-right:1px solid #ccc; padding: 5px } fieldset { border: none; margin-top: 10px } legend { font-size: 1.2em; font-weight: bold; margin: 5px 0; padding: 0 10px } label { font-size:1.1em; float: left; width: 100px; } #primary-content label { width: 200px; } textarea, input[type='text'], input[type='password'],input[type='checkbox'], select { padding: 2px; font-size:11px; color:#000 } fieldset.submit_fldset legend { display: none } fieldset.submit_fldset label { display: none } fieldset.submit_fldset li { text-align: right } fieldset ul, fieldset ol { list-style: none; margin: 0 10px } fieldset li { clear: both; margin: 5px 0px } #error, .errorsFound, #errorField { color: white; clear: both; } #error, .errorsFound, #errorField h4 { margin-bottom: 10px } #error, .errorsFound, #errorField p {} #error ul, .errorsFound ul, #errorField ul { list-style: none } #error a, .errorsFound a, #errorField a { color: white; font-weight: bold } .errorsFound { background: #ee0000; margin-bottom: 20px; border: 3px dashed white; padding:10px } /* ----------------------------------------------- 3. LAYOUT ----------------------------------------------- */ /* 3.1 - main form */ form.main { width:100%; height:100% } /* 3.2 - container */ div#container { width:1000px; margin:0 auto; position:relative; text-align:left; } /* 3.3 - header */ div#header { background: url(../images/general/bg_grey_gradient.jpg) repeat-y } img#eavesway-exclusive-logo { } img#eavesway-travel-logo { position: absolute; top: 30px; right: 0px; } /* 3.3.1 - primary-navigation */ ul#primary-navigation { list-style: none; margin: 20px 0px 0px 0px; padding: 0 10px 20px 10px; border-bottom: #003745 3px solid; } ul#primary-navigation li { float: left; margin-right: 20px } ul#primary-navigation li a { color: white; font-weight: bold; text-transform:lowercase } /* 3.3.2 - secondary-navigation */ ul#secondary-navigation { list-style: none; margin: 0; padding: 10px 0 0 0; background: white; border-top: #6db33f 3px solid; margin-top: 3px } ul#secondary-navigation li { float: left; } ul#secondary-navigation li a, ul#secondary-navigation li a span { display: block; background: #6eb33f url(../images/general/bg_main_nav.gif) no-repeat left -0px; text-decoration: none; color: white; font-weight: bold } ul#secondary-navigation li a span { background-position: right -0px; margin-left: 15px; padding: 5px 15px 5px 0 } ul#secondary-navigation li a:hover { display: block; background: #cccb76 url(../images/general/bg_main_nav.gif) no-repeat left -50px; } ul#secondary-navigation li a:hover span { background: #cccb76 url(../images/general/bg_main_nav.gif) right -50px no-repeat; } ul#secondary-navigation li.on a { background: #003745 url(../images/general/bg_main_nav.gif) no-repeat left -50px; color: white; } ul#secondary-navigation li.on a span { background: #003745 url(../images/general/bg_main_nav.gif) right -50px no-repeat; } /* 3.4 - content */ div#content { background:#6eb33f; padding: 10px } /* 3.5 - primary content */ div#primary-content { } body.two-column div#primary-content { float: left; width: 604px; margin-right: 8px } /* 3.6 - secondary content */ div#secondary-content { } body.two-column div#secondary-content { float: left; width: 368px } /* 3.7 - tertiary content */ div#tertiary-content { } body.two-column div#tertiary-content { float: left; width: 368px } /* 3.8 - footer */ div#footer { background: #003745; border-top: solid white 3px; padding: 10px; color: white } div#footer ul { list-style: none } div#footer ul li { float: left; margin-right: 1em } div#footer a { color: white } div#seo { clear:both } div#seo h1 { font-size: 12px } div#seo p { font-size: 11px } #worldpay { width: 500px; margin: 10px auto; } #worldpay table, #worldpay th, #worldpay td { border: none; text-align:center } /* ----------------------------------------------- 4. GLOBAL ELEMENTS / CONTROLS ----------------------------------------------- */ /* 4.1 - accessibility */ ul#text-resizer { list-style: none; padding: 10px } ul#text-resizer li { font-size: 14px; float: left; margin-right: 10px } ul#text-resizer a { color: black; font-weight: bold } ul#skiplinks { display:none } ul#skiplinks a, ul#skiplinks a:hover, ul#skiplinks a:visited { position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden } ul#skiplinks a:active, ul#skiplinks a:focus { position:static; width:auto; height:auto } /* 4.2 - curved elements */ div.curved { background: #003745; margin-bottom: 8px } div.curved div.content { margin: 0 3px; border-left: white solid 3px; border-right: white solid 3px; padding: 20px 10px 10px 10px } div.curved div.start-curved, div.curved div.close-curved { height: 15px; } div.curved div.start-curved span, div.curved div.close-curved span { display: block; width: 15px; height: 15px; float: right } div.lightblue div.start-curved { background: url(../images/general/brdr_top_lightblue.gif) left } div.lightblue div.start-curved span { background: url(../images/general/brdr_top_lightblue.gif) right } div.lightblue div.content { background: #dbe1f7; color: black } div.lightblue div.content a { color: #2c6e7f } div.lightblue div.close-curved { background: url(../images/general/brdr_btm_lightblue.gif) left } div.lightblue div.close-curved span { background: url(../images/general/brdr_btm_lightblue.gif) right } div.green div.start-curved { background: url(../images/general/brdr_top_green.gif) left } div.green div.start-curved span { background: url(../images/general/brdr_top_green.gif) right } div.green div.content { background: #29520e; color: white } div.green div.content a { color: #6db33f } div.green div.close-curved { background: url(../images/general/brdr_btm_green.gif) left } div.green div.close-curved span { background: url(../images/general/brdr_btm_green.gif) right } div.blue div.start-curved { background: url(../images/general/brdr_top_blue.gif) left } div.blue div.start-curved span { background: url(../images/general/brdr_top_blue.gif) right } div.blue div.content { background: #2c6e7f; color: white } div.blue div.content a { color: #dbe1f7 } div.blue div.close-curved { background: url(../images/general/brdr_btm_blue.gif) left } div.blue div.close-curved span { background: url(../images/general/brdr_btm_blue.gif) right } /* 4.3 columned layouts */ /* 4.3.2 columned layouts - within primary content */ .three-column { width: 196px; float: left; margin-right: 8px } .last-column { margin-right: 0 } /* 4.4 dl */ #primary-content div.content dt { float: left; width: 200px; font-weight: bold } #primary-content div.content dd { margin-left: 200px } #secondary-content div.content dt { float: left; width: 100px } #secondary-content div.content dd { margin-left: 100px } div.content dt { clear: left } div.content dd { margin: 5px 0 } div.content address { color: white; font-style:normal } div#contact-details h3 { background: url(../images/pages/home/ttl_home_contact.gif); width: 124px; height: 27px; } div#fleet-gallery h3 { background: url(../images/pages/home/ttl_fleet_gallery.gif); width: 130px; height: 27px; } ul#news-items { list-style: none } /* ----------------------------------------------- 5. TEMPLATE/PAGE SPECIFIC ----------------------------------------------- * /* 5.1 index */ body#index.two-column div#primary-content { padding-top: 37px;} /* 5.1.1 titles */ body#index div#primary-content h1 { background: no-repeat url(../images/pages/home/ttl_home_welcome.jpg); } body#index div#history h3 { background: no-repeat url(../images/pages/home/ttl_home_history.jpg); width: 196px; height: 85px } body#index div#disabled-access h3 { background: no-repeat url(../images/pages/home/ttl_home_disabled_access.jpg); width: 196px; height: 85px } body#index div#exclusive-charter h3 { background: no-repeat url(../images/pages/home/ttl_home_exclusive_charter.jpg); width: 196px; height: 85px } body#index div#booking-form h2 { background: no-repeat url(../images/pages/home/ttl_home_cruiselink_booking.jpg); } body#index div#latest-news h2 { background: no-repeat url(../images/pages/home/ttl_home_latest_news.gif); width: 271px; height: 30px; } #news-items li { clear: both } body#index div.small-print { margin-top: 20px } /* 5.1.2 buttons */ a#news-archive { float: right; background: url(../images/pages/home/btn_news_archive.gif) } a#news-archive:hover { background-position: left -29px } a#view-map { background: url(../images/general/btn_view_map.gif); float: right; margin: 0 0 10px 10px } a#view-map:hover { background-position: left -29px } a.read-more { float: right; background: url(../images/general/btn_read_more.gif) } a.read-more:hover { background-position: left -29px } div#three-columns { background: url(../images/pages/home/bg_three_column.gif) repeat-y } div#three-columns div.contents div {width: 166px; padding: 5px 15px; background: none } div#three-columns div.footers div { background: none; margin-bottom: 0 } div#three-columns div div.close-curved { background: url(../images/general/brdr_btm_blue.gif) } /* 5.2 terms */ body#terms div#primary-content h1 { background: url(../images/pages/terms/ttl_terms.jpg); } body#terms ol { margin-left: 30px } /* 5.3 history */ body#history div#primary-content h1 { background: url(../images/pages/history/ttl_history.jpg); } div#client-list h3 { background: url(../images/pages/history/ttl_client_list.gif); width: 290px; height: 30px } div#pair-of-images { text-align: center; margin: 10px 0px; } div#pair-of-images img { border: 3px solid white; margin: 10px } /* 5.4 contact */ body#contact div#primary-content h1 { background: url(../images/pages/contact/ttl_contact.jpg); } body#contact .submit_fldset input { background: url(../images/pages/contact/btn_send.gif); width: 82px; height: 37px; } body#contact .submit_fldset input:hover { background-position: left -37px; } div#compliance h3 { background: url(../images/pages/contact/ttl_compliance.gif); width: 290px; height: 30px; } body#contact .content span {color:#ff0000; font-style:italic} /* 5.5 booking */ body#cruiselink_booking h1 { background: url(../images/pages/booking/ttl_cruiselink_booking.gif) right; width: 231px; height: 30px; } #booking-summary h2 { background: url(../images/pages/booking/ttl_booking_summary.gif); width: 271px; height: 30px; } input.next-step { background: url(../images/pages/booking/btn_next_step.gif); width: 82px; height: 37px; } input.next-step:hover { background-position: left -37px; } body#cruiselink_booking h1#confirm-booking { background: url(../images/pages/booking/ttl_confirm_booking.gif); width: 271px; height: 30px; } a.view-fares { background:url(../images/pages/booking/btn_po_2009_fares_darkblue.gif); width: 336px; height: 32px; float: right } a.view-fares2 { background: url(../images/pages/booking/btn_po_2010_fares_darkblue.gif); width: 336px; height: 32px; float: right } a.view-fares3 { background: url(../images/pages/booking/btn_po_2011_fares_darkblue.gif); width: 336px; height: 32px; float: right } a.view-fares4 { background: url(../images/pages/booking/btn_po_2012_fares_darkblue.gif); width: 336px; height: 32px; float: right } a.view-fares5 { background: url(../images/pages/booking/btn_po_2013_fares_darkblue.gif); width: 336px; height: 32px; float: right } a.eurodam { background: url(../images/pages/booking/btn_eurodam_2010_fares_darkblue.gif); width: 336px; height: 32px; float: right } a.view-fares-carnival { background: url(../images/pages/booking/btn_view_carnival_fares.gif); width: 154px; height: 51px; float: right } body#index a.view-fares { background: url(../images/pages/booking/btn_po_2009_fares_lightblue.gif); width: 336px; height: 32px; float: right } body#index a.view-fares2 { background: url(../images/pages/booking/btn_po_2010_fares_lightblue.gif); width: 336px; height: 32px; float: right } body#index a.view-fares4 { background: url(../images/pages/booking/btn_po_2012_fares_lightblue.gif); width: 336px; height: 32px; float: right } body#index a.view-fares5 { background: url(../images/pages/booking/btn_po_2013_fares_lightblue.gif); width: 336px; height: 32px; float: right } body#index a.eurodam { background: url(../images/pages/booking/btn_eurodam_2010_fares_lightblue.gif); width: 336px; height: 32px; float: right } body#index a.view-fares-carnival { background: url(../images/pages/booking/btn_view_carnival_fares_lightblue.gif); width: 154px; height: 51px; float: right } a.view-fares:hover, a.view-fares2:hover, a.view-fares3:hover, a.view-fares4:hover, a.view-fares5:hover, a.eurodam:hover { width:336px; background-position:50% -32px } body#index a.view-fares:hover, body#index a.view-fares2:hover, body#index a.view-fares4:hover, body#index a.view-fares5:hover, body#index a.eurodam:hover { width:336px; background-position:50% -32px } /* 5.5.1 outbound travel form*/ form#outbound-travel h4 { background: url(../images/pages/booking/ttl_bkg_outbound_travel.gif) no-repeat; width: 100px; height: 12px; } #skip-outbound-frm { padding: 0; margin: -12px 0 0 0; float: right } input.skip-outbound { background: url(../images/pages/booking/btn_skip_outbound.gif); width: 154px; height: 51px; } input.skip-outbound:hover { background-position: left -51px; cursor: pointer } /* 5.5.2 inbound travel form*/ form#inbound-travel h4 { background: url(../images/pages/booking/ttl_bkg_inbound_travel.gif) no-repeat; width: 100px; height: 12px; } #skip-inbound-frm { padding: 0; margin: -12px 0 0 0; float: right } input.skip-inbound { background: url(../images/pages/booking/btn_skip_inbound.gif); width: 154px; height: 51px; } input.skip-inbound:hover { background-position: left -51px; cursor: pointer } /* 5.5.2 passenger info form*/ form#inbound-travel h4 { background: url(../images/pages/booking/ttl_bkg_inbound_travel.gif); width: 100px; height: 12px; } a.add-passenger { background: url(../images/pages/booking/btn_add.gif); } a.add-passenger:hover { background-position: left -29px } a.remove-passenger { background: url(../images/pages/booking/btn_remove.gif); } a.remove-passenger:hover { background-position: left -29px } a.add-passenger, a.remove-passenger { float: right } /* 5.5.3 booking summary */ a.amend { float: right; background: url(../images/pages/booking/btn_amend.gif) } a.amend:hover { background-position: left -29px } a.confirm { float: right; background: url(../images/pages/booking/btn_summary_confirm.gif); width: 82px; height: 37px; } a.confirm:hover { background-position: left -37px } /* 5.5.4 confirm */ a.amend-lightblue { float: right; background: url(../images/pages/booking/btn_amend_lightblue.gif) width: 82px; height: 37px;} a.amend-lightblue:hover { background-position: left -29px } input#pay { background: url(../images/pages/booking/btn_pay.gif); width: 82px; height: 37px; } input.pay:hover { background-position: left -37px; } input.pay-by-cheque { background: url(../images/pages/booking/btn_pay_by_cheque.gif); width: 154px; height: 51px; } input.pay-by-cheque:hover { background-position: left -51px; cursor: pointer } body#cruiselink_booking h1.pay-by-cheque { background: url(../images/pages/booking/ttl_pay_by_cheque.gif); width: 271px; height: 30px; } /* 5.6 fleet */ body#fleet div#primary-content h1 { background: url(../images/pages/fleet/ttl_fleet.jpg); } body#fleet table { margin-bottom: 20px } img.gallery_pic { border: solid 2px #FFFFFF; margin: 0 6px 6px 0; } /* 5.7 news */ body#news div#primary-content h1 { background: url(../images/pages/news/ttl_news.jpg); } div#secondary-content h2#news-archive { background: url(../images/pages/news/ttl_past_articles.gif); width: 290px; height: 30px } #news-images { margin: 0px 20px 10px 10px; width: 220px; float: right; text-align:center } #news-images img { margin: 0px 0px 10px 0px; border: 3px solid white } /* 5.8 disabled */ body#disabled_access div#primary-content h1 { background: url(../images/pages/disabled/ttl_disabled.jpg); } /* 5.9 private */ body#private_charter div#primary-content h1 { background: url(../images/pages/private/ttl_private.jpg); } body#private_charter div#primary-content ul { margin-left: 20px } /* 5.10 exclusive */ body#exclusive_charter div#primary-content h1 { background: url(../images/pages/exclusive/ttl_exclusive.jpg); } /* 5.11 tours */ body#tours div#primary-content h1 { background: url(../images/pages/tours/ttl_tours.jpg); } /* 5.11 my_eavesway */ body#my_eavesway div#primary-content h1 { background: url(../images/pages/my_eavesway/ttl_my_eavesway.jpg); } h2#new-users { background: url(../images/pages/my_eavesway/ttl_new_users.gif); width: 290px; height: 30px } h2#existing-users { background: url(../images/pages/my_eavesway/ttl_existing_users.gif); width: 290px; height: 30px } h2#register { background: url(../images/pages/my_eavesway/ttl_register.gif); width: 290px; height: 30px } h2#retrieve { background: url(../images/pages/my_eavesway/ttl_retrieve_details.gif); width: 290px; height: 30px } h2#welcome-back { background: url(../images/pages/my_eavesway/ttl_welcome_back.gif); width: 290px; height: 30px } h2#logged-out { background: url(../images/pages/my_eavesway/ttl_logged_out.gif); width: 290px; height: 30px } h2#please-login { background: url(../images/pages/my_eavesway/ttl_please_login.gif); width: 290px; height: 30px } h2#change-profile { background: url(../images/pages/my_eavesway/ttl_change_profile.gif); width: 290px; height: 30px } #logged-in-options h3 { background: url(../images/pages/my_eavesway/ttl_user_cp.gif); width: 290px; height: 30px } /* PAST BOOKINGS */ h2#past-bookings { background: url(../images/pages/my_eavesway/ttl_past_bookings.gif); width: 290px; height: 30px } h2#retrieve-booking { background: url(../images/pages/my_eavesway/ttl_retrieve_booking.gif); width: 290px; height: 30px } td.with-button { text-align: center; width: 80px } td.with-button form, td.with-button fieldset, td.with-button ul, td.with-button li { padding:0; margin: 0 } td.with-button fieldset { float: none } input.remove { background: url(../images/pages/booking/btn_remove_green.gif); width: 76px; height: 29px; } input.remove:hover { background-position: left -29px } a.review-booking { background: url(../images/pages/booking/btn_review.gif); width: 76px; height: 29px;} a.review-booking:hover { background-position: left -29px } #primary-content input.login { background: url(../images/pages/my_eavesway/btn_login_blue.gif); width: 82px; height: 37px; } #secondary-content input.login { background: url(../images/pages/my_eavesway/btn_login_light_blue.gif); width: 82px; height: 37px; } #primary-content input.login:hover, #secondary-content input.login:hover { background-position: left -37px; } input.register { background: url(../images/pages/my_eavesway/btn_register.gif); width: 82px; height: 37px; } input.register:hover { background-position: left -37px; } input.retrieve { background: url(../images/pages/my_eavesway/btn_retrieve.gif); width: 82px; height: 37px; } input.retrieve:hover { background-position: left -37px; } input.update { background: url(../images/pages/my_eavesway/btn_update.gif); width: 82px; height: 37px; } input.update:hover { background-position: left -37px; } #basewords { list-style:none; margin:0 0 5px 0!important } #basewords li { display:inline; margin:0 4px!important } #basewords strong { font-weight:normal } /* ----------------------------------------------- 6. USEFUL CLASSES ----------------------------------------------- */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden } .clr { overflow:hidden; clear:both; margin-top:-1px } .la { text-align:left } .ra { text-align:right } .ca { text-align:center } .fl { float:left } .fr { float:right } .vt { vertical-align:top } .vm { vertical-align:middle } .vb { vertical-align:bottom } .nb { border:0 none } .image-replace { text-indent: -9999px } .form-button-replace { border: none } .form-button-replace:hover { cursor: pointer } .image-fr { float: right; margin: 0px 0px 10px 10px; border: 3px solid white } .image-fr-no-border { float: right; margin: 0px 0px 10px 10px; } .image-fl { float: left; margin: 0px 10px 10px 0px; }