/* * Author: Conchango * Project: Aer Lingus * Comment: Global Stylesheet ---------------------- Contents: @import Reset stylesheet 1. Generic HTML styles 2. Parent layout styles 3. Header styles 4. Main navigation 5. Tertiary navigation 6. live-update 7. Footer 8. Miscellaneous styles */ @import url("/media/aerlinguscom/styleassets/css/reset.css"); /**************************************************************************** = Generic HTML Styles *****************************************************************************/ html { overflow-x: hidden; overflow-y: auto; } body { background-color: #DDD; color: #333; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: x-small; margin-bottom: 10px; } a { color: #0095DA; text-decoration: none; } h3 { font-size: 115%; font-weight: bold; } strong { font-weight: bold; } form select { height: 1.5em; } form p { margin-bottom: 0.5em; } form input { height: 1.4em; } form p.field-note { font-size: 95%; margin-top: -0.25em; } form input.radio { height: auto !important; width: auto !important; } form .error { background: url(../images/general/icn-error.gif) no-repeat 1px 50%; padding-left: 11px; color: #cc0000; margin-bottom: 10px; } form .error-field { border-color: #cc0000 !important; } /**************************************************************************** = Parent Layout Styles *****************************************************************************/ #page-container { font-size: 120%; /*position: relative;*/ width: 1000px; margin: 0 auto; background-color: #fff; } #page-container p { line-height: 1.2em; padding: 3px 0; } #main-content { background: url(../images/home/main-content-bg-b.gif) no-repeat scroll left bottom; float: left; margin: -3px 8px 0 -3px; position: relative; width: 781px; margin-bottom: 8px; } #main-content .inner { background: url(../images/home/main-content-bg-t.gif) no-repeat scroll left top; min-height: 346px; padding: 8px; } #booking-engine form p { color: #FFF; font-weight: bold; padding: 1em 0 0.25em; } .content { clear: both; position: relative; display: block; margin: 0 14px; } /**************************************************************************** =header *****************************************************************************/ #header { background: #008374 url(/media/aerlinguscom/styleassets/images/general/header/header-top.gif) repeat-x scroll left top; border-top: 10px solid #ddd;; margin-bottom: 15px; min-height: 91px; position: relative; } #header img { position: absolute; left: 15px; top: 14px; } #header li { float: left; } #main-nav { font-size: 100%; float: left; margin: 66px 0 -5px 12px; } #header div.mainLogo a { position: absolute; top: 10px; left: 15px; display: block; width: 280px; height: 48px; background: transparent url(/media/aerlinguscom/styleassets/images/general/header/logo.png) left top no-repeat; text-indent: -1000px; } #header span#social-media-links{ position: absolute; top: 110px; right: 4em; z-index:10000; } /*-------------------------------------------------------------------------- =main-nav ----------------------------------------------------------------------------*/ #main-nav li { margin-bottom: 1px; } #main-nav .active { margin-bottom: 0; } #main-nav li { background: url(/media/aerlinguscom/styleassets/images/general/header/main-nav-bg-l.gif) no-repeat scroll left top; color: #FFFFFF; display: block; font-weight: bold; text-decoration: none; } #main-nav li span.item a { color: #FFFFFF; display: block; font-weight: bold; text-decoration: none; } #main-nav li span.item { background: url(/media/aerlinguscom/styleassets/images/general/header/main-nav-bg-r.gif) no-repeat scroll right top; display: block; margin-left: 10px; padding: 5px 11px 5px 0; } #main-nav li.active { background-image: url(/media/aerlinguscom/styleassets/images/general/header/main-nav-bg-l-active.gif); } #main-nav li.active a { color: #000000 !important; } #main-nav li.active span.item { background-image: url(/media/aerlinguscom/styleassets/images/general/header/main-nav-bg-r-active.gif); color: #333; padding-bottom: 5px; } #main-nav li.small a span.item { padding-left: 26px; padding-right: 42px; } /* ancilliary alt colour top buttons */ /* ancilliary alt colour top buttons */ #main-nav li.anc { background: url(/media/aerlinguscom/styleassets/images/general/header/main-nav-bg-la.gif) no-repeat scroll left top; color: #FFF; display: block; font-weight: bold; text-decoration: none; } #main-nav li.anc span{ background: url(/media/aerlinguscom/styleassets/images/general/header/main-nav-bg-ra.gif) no-repeat scroll right top; display: block; margin-left: 10px; padding: 5px 11px 5px 0; } /*-------------------------------------------------------------------------- =tertiary-nav ----------------------------------------------------------------------------*/ #tertiary-nav { margin-left: 200px; padding-left: 15px; padding-right: 10px; position: absolute; right: 0; top: 0; z-index:1; } #tertiary-nav li a { background: url(/media/aerlinguscom/styleassets/images/general/link-bullet.png) no-repeat scroll left 0.2em; color: #fff; display: block; margin: 4px 0.75em 7px 8px; padding-left: 14px; text-decoration: none; } #tertiary-nav li a:hover{ text-decoration: underline; } /*-------------------------------------------------------------------------- =live-update ----------------------------------------------------------------------------*/ #live-update { background-color: #F2FAFD; border: 1px solid #E0F2FA; padding: 1px 4px 2px 10px; position: relative; margin: 0 0 0 14px; width: 956px; } #live-update h2 { color: #FF6600; display: block; float: left; font-weight: bold; padding-right: 0.3em; } #live-update div#ticker { left: 7.5em; display: block; width: 858px; } #live-update ul li { display: inline; } #live-update ul li strong { font-weight: bold; } #live-update p.control { cursor: pointer; position: absolute; right: 2px; top: 1px; } /**************************************************************************** =footer *****************************************************************************/ #footer { border-top: 2px solid #80C342; margin: 0 14px; padding-top: 8px; padding-bottom: 8px; clear: both; } #footer li { color: #CCC; display: inline; margin-right: 4px; } #footer li a { margin-right: 4px; } #footer p { float: left; color: #000; margin-right: 12px; } /*-------------------------------------------------------------------------- =miscellaneous ----------------------------------------------------------------------------*/ p.btn a span { background: url(/media/aerlinguscom/styleassets/images/general/btn-bg-t.gif) no-repeat left top; display: block; font-size: 115%; padding: 7px 0 9px; text-align: center; width: 103px; } p.btn a.hover span { background: url(/media/aerlinguscom/styleassets/images/general/btn-bg-t.gif) no-repeat top right; } p.btn a { background: url(/media/aerlinguscom/styleassets/images/general/btn-bg-b.gif) no-repeat scroll left bottom; color: #FFF; cursor: pointer; float: right; font-weight: bold; text-decoration: none; border: none; width: 103px; padding: 0; } p.btn a.hover { background: url(/media/aerlinguscom/styleassets/images/general/btn-bg-b.gif) no-repeat scroll right bottom; } #main-content ul.links li {background-image:none;padding-left:0px;} ul.links li a, ul li.link a, a.bullet { background: url(/media/aerlinguscom/styleassets/images/general/link-bullet.gif) no-repeat scroll left 0.2em; /* see styles-ie7.css */ padding-left: 9px; text-decoration: none; } .link-box-small ul li a { padding-left: 9px;background: url(/media/aerlinguscom/styleassets/images/general/link-bullet-2.gif) no-repeat scroll left 0.5em; /* see styles-ie7.css */ } ul.links li, .content ul li { padding-bottom: 3px; } #booking-engine form ul.links .active a { background: url(/media/aerlinguscom/styleassets/images/booking-engine/link-bullet-active.gif) no-repeat scroll left center; color: #000; text-decoration: underline; } div.hr { border-bottom: 0px solid #318279; clear: both; } br.clearer { clear: both; height: 1px; line-height: 1px; font-size: 0; } div.clearer { clear: both; display: block; font: 1px/0px serif; content: "."; height: 0; visibility: hidden; } .accessibility { position: absolute; left: -10000px; } a.icn-info-text { margin-left: 3px; } a.icn-info-select img { margin-bottom: -5px; /* see styles-ie7.css */ } a.icn-info-label img { margin-bottom: -3px; /* see styles-ie7.css */ } /**************************************************************************** =action-box *****************************************************************************/ div.action-box { margin-bottom: 8px; } /* Changed width and height and created taller image */ /* ADDED BY BARBARA C. Height not the same as main H2 on page */ div.action-box h2 { background-image: url(/media/aerlinguscom/styleassets/images/general/action-box-h2-bg.gif); width: 263px; height: auto; color: #fff; font-size: 1.17em; font-weight: bold; padding: 4px 11px 0 11px; border-bottom:1px solid #018877; } /* Changed width and height and created taller image */ div.action-box.action-box-small h2 { background-image: url(/media/aerlinguscom/styleassets/images/general/action-box-h2-bg-small.gif); border-bottom:1px solid #018877; height:auto; width:198px; } div.action-box.link-box-small h2 { color: #0095da; background-color: #fbfbfb; background-image: url(/media/aerlinguscom/styleassets/images/general/link-box-h2-bg-small.jpg); height: 21px; width: 198px; border-bottom: none; } div.action-box div.action-box-content { border: 1px solid #dddfe1; background-color: #fbfbfb; padding: 10px; } div.action-box.link-box-small div.action-box-content { border-top: none; } div.action-box div.action-box-content .hr { border: none; background: url(/media/aerlinguscom/styleassets/images/booking-flow/separator-horizontal.gif) repeat-x 0 50%; height: 1px; margin: 8px 0; } div.action-box div.action-box-content label { font-weight: bold; } div.action-box div.action-box-content input { width: 258px; color: #666; border: 1px solid #999; font-size: 0.92em; padding: 2px 0 0 2px; margin-bottom: 5px; } div.action-box div.action-box-content select { color: #666; border: 1px solid #999; } div.action-box.action-box-small div.action-box-content input { width: 193px; } div.action-box.action-box-small div.action-box-content .help-search input { width: 150px; } div.action-box p.field-note { margin-top: 0; } div.action-box div.action-box-content .buttons { overflow: hidden; padding-bottom: 0 !important; } div.action-box.sign-up div.action-box-content div.buttons { margin-top: -1em; } div.action-box div.action-box-content .buttons input, div.action-box div.action-box-content .buttons a, div.action-box div.action-box-content .button { float: right; height: auto !important; width: auto !important; margin-bottom: 0; border: none; padding: 0; } div.action-box div.action-box-content input.button { float: none; height: auto !important; width: auto !important; border: none; padding: 0; margin: 0; /* see styles-ie7.css */ vertical-align: middle; } div.action-box div.action-box-content .buttons a { margin-right: -3px; } div.action-box div.action-box-content h3 { margin-bottom: 0.5em; font-size: 1em; } div.action-box div.action-box-content p { margin-bottom: 0.5em; } div.action-box div.action-box-content ul { margin-bottom: 1.5em; } div.action-box.link-box-small div.action-box-content ul { margin-bottom: 0; } div.action-box div.action-box-content ul.last { margin-bottom: 0; } div.action-box div.action-box-content ul.links.register { position: absolute; margin-top: -1.75em; } div.action-box.self-service div.action-box-content p.field-note { margin-bottom: 1.5em; } div.action-box.sign-up div.country { float: left; width: 168px; } div.action-box.action-box-small.sign-up div.country { width: 124px; } div.action-box.sign-up div.country input, div.action-box.sign-up div.country select { width: 158px; } div.action-box.action-box-small.sign-up div.country input, div.action-box.action-box-small.sign-up div.country select { width: 114px; } div.action-box.sign-up div.state { float: left; width: 90px; } div.action-box.action-box-small.sign-up div.state { width: 74px; } div.action-box.sign-up div.state input { width: 90px; } div.action-box.action-box-small.sign-up div.state input { width: 68px; } /* added by Allan Dwyer 20/06/11 to add orange chevrons to right column action box list items*/ div.action-box.action-box-small ul li { background: url("/media/aerlinguscom/styleassets/images/general/link-bullet.png") no-repeat scroll left 0.2em transparent; padding-left: 9px; text-decoration: none; } /**************************************************************************** =promo-box *****************************************************************************/ div.promo-box { margin: 8px 0; } div.promo-box.first { background: url(/media/aerlinguscom/styleassets/images/booking-flow/separator-horizontal.gif) 0 0 repeat-x; } div.promo-box div.promo-box-content { position: relative; padding: 0px 8px 8px 0px; background: url(/media/aerlinguscom/styleassets/images/booking-flow/separator-horizontal.gif) 0 100% repeat-x; overflow: hidden; } div.promo-box.first div.promo-box-content { padding-top: 8px; } div.promo-box div.promo-box-content h2 { font-size: 1.15em; color: #00907e; } div.promo-box div.promo-box-content img.pic { float: left; margin-right: 8px; } div.promo-box div.promo-box-content .buttons a { float: right; height: auto; width: auto; margin-top: 1em; border: none; padding: 0; margin-right: -2px; } /* replaced css so that call to action does not overlap text on resize */ div.promo-box div.promo-box-content .link { /*position: absolute; bottom: 10px; right: 0;*/ clear:both; float:right; margin-top:-10px; } /**************************************************************************** =crumb-trail *****************************************************************************/ #crumb-trail { overflow: hidden; padding: 5px 0 5px 23px; font-size: 0.9em; } #crumb-trail ul { list-style-type: none; margin: 0; padding: 0; } #crumb-trail ul li { float: left; margin: 0; padding: 0 0.5em 0 0.75em; background: transparent url(/media/aerlinguscom/styleassets/images/general/bullet-crumb-trail.gif) 0 0.5em no-repeat; } #crumb-trail ul li.first { background-image: none; padding-left: 0; } /* Added by T4 from exisitng site */ .right{ position: static; float: right; width: auto; } div.dotted { height: 2px; clear: both; width: 100%; padding-top: 1em; padding-right: 0pt; padding-bottom: 0.5em; padding-left: 0pt; background-color: transparent; border-bottom: 1px dotted #DDDFE1; } #main-content.help table { border-collapse:collapse; width: 100%; } #main-content.help table tr{ /* GREY BACKGROUND */ /*background-color: #eee; */ background-color: #f6f7f8; border: 1px solid #dcdfe5; } #main-content.help table td { border: 1px solid #dcdfe5; } /* added for no boarder on td tag within thead tag Allan D 10Aug 11 */ #main-content.help table thead td { border: 0px solid #dcdfe5; } #main-content.help table th{ /* YELLOW BACKGROUND */ /*background-color: #ffc;*/ font-weight: bold; background-color: #f9fcf5; /* pale green */ background-color: #d8f0ed; /* pale tourqouise */ background-color: #fef8e7; /* pale yellow */ color: #333; } /* added for th tag whitegradient background Allan D 10Aug 11 */ #main-content.help table thead th { background: url("/media/aerlinguscom/styleassets/images/general/h3-bg.gif") repeat-x scroll 0 100% #FFFFFF; border-right: 1px solid #DDDFE1; color: #00907E; padding: 5px 5px; white-space: nowrap; } #main-content.help table td, #main-content.help table caption, #main-content.help table th { padding: 0.5em; vertical-align: top; } #main-content.help table caption{ /* GREY COLOR TEXT */ color: #666; padding-left: 0em; } #main-content.help table .altTableRow { /* GIVES WHITE BACKGROUND TO TABLE ROW (CODESHARE) */ background-color: #fff; } #main-content.help .green { color: #00907e; } .sitemap ul ul {padding-left: 20px;} #main-content.help em {font-style:italic;} #main-content.help .div4Col {/*EQUAL WIDTH FOR 4 COL DIV LAYOUT*/ width: 24%; /* NEED NARROWER WIDTH FOR IE6 OR ALL 4 DON'T FIT HORIZONTALLY */ } #main-content.help .div2Col {/*EQUAL WIDTH FOR 4 COL DIV LAYOUT*/ width: 49%; /* NEED NARROWER WIDTH FOR IE6 OR ALL 4 DON'T FIT HORIZONTALLY */ } .left{ position: static; float: left; width: auto; } #main-content ul.noBulletUL li a { background-image: none; padding-left: 4px; } #main-content .banner {margin-left: -9px;} #main-content .twoColUlContent { float: left; width: 49%; } #main-content ul{padding: 10px 0;} #main-content ul li{ background-color: transparent; background-image: url(/media/aerlinguscom/styleassets/images/general/link-bullet.png); background-repeat: no-repeat; background-attachment: scroll; background-position: left 0.2em; padding-left: 12px; } #main-content ul #ag_menu li { background-color: transparent; background-image: none; background-repeat: no-repeat; background-attachment: scroll; background-position: left 0.2em; padding-left: 12px; } #main-content ol {margin:0 0 0 20px;padding:10px 0;} #main-content ol li{list-style-type:decimal;} #main-content .link-box-small ul li {} .twocol ul.links{ list-style: none; height: 1%; overflow: auto; } /* Altered BY BARBARA C. 17.02.11 - USED IN PROMO PAGES TO HIGHLIGHT TEXT (APPEAR IN HTMLEDITOR), COLOURS TAKEN FROM STYLE GUIDE */ #main-content .boldOrange {font-weight: bold;color: #ff6600;} #main-content .boldGrey {font-weight: bold;color: #333333;} #main-content .boldBlue {font-weight: bold;color: #0095D9;} #main-content .boldGreen-D {font-weight: bold;color: #00907E;} #main-content .boldGreen-P {font-weight: bold;color: #80C242;} /* Altered BY BARBARA C. 17.02.11 - USED IN PROMO PAGES TO HIGHLIGHT TEXT (APPEAR IN HTMLEDITOR), COLOURS TAKEN FROM STYLE GUIDE */ .twocol ul.links li { display: inline; } .twocol ul.links li a { display: block; float: left; width: 220px; } /* ADDED BY Allan D. 04.06.10 - Copy of help section tables for promo destinations */ #main-content.promodest table { border-collapse:collapse; width: 100%; } #main-content.promodest table tr{ /* GREY BACKGROUND */ /*background-color: #eee; */ background-color: #fff; border: 0px solid #fff; } #main-content.promodest table td { border: 0px solid #fff; } #main-content.promodest table th{ /* YELLOW BACKGROUND */ /*background-color: #ffc;*/ font-weight: bold; background-color: #f9fcf5; /* pale green */ background-color: #d8f0ed; /* pale tourqouise */ background-color: #fef8e7; /* pale yellow */ color: #333; } #main-content.promodest table td, #main-content.promodest table caption, #main-content.promodest table th { padding: 0.1em; vertical-align: top; } #main-content.promodest table caption{ /* GREY COLOR TEXT */ color: #666; padding-left: 0em; } #main-content.promodest table .altTableRow { /* GIVES WHITE BACKGROUND TO TABLE ROW (CODESHARE) */ background-color: #fff; } #main-content.promodest .green { color: #00907e; } /* ADDED BY Allan D. 28.06.11 - Copy of help section tables for webdeal tables */ #main-content.webdeal table { border-collapse:collapse; width: 100%; /* width: 700px; */ } #main-content.webdeal table tr{ /* GREY BACKGROUND */ /*background-color: #eee; */ background-color: #f6f7f8; border: 1px solid #dcdfe5; } #main-content.webdeal table td { border: 0px solid #dcdfe5; } #main-content.webdeal table th{ /* YELLOW BACKGROUND */ /*background-color: #ffc;*/ font-weight: bold; background-color: #f9fcf5; /* pale green */ background-color: #d8f0ed; /* pale tourqouise */ background-color: #fef8e7; /* pale yellow */ color: #333; } #main-content.webdeal table thead th { background: url("/media/aerlinguscom/styleassets/images/general/h3-bg.gif") repeat-x scroll 0 100% #FFFFFF; border-right: 1px solid #DDDFE1; color: #00907E; padding: 5px 10px; white-space: nowrap; } #main-content.webdeal table td, #main-content.webdeal table caption, #main-content.webdeal table th { padding: 0.5em; vertical-align: top; } #main-content.webdeal table caption{ /* GREY COLOR TEXT */ color: #666; padding-left: 0em; } #main-content.webdeal table .altTableRow { /* GIVES WHITE BACKGROUND TO TABLE ROW (CODESHARE) */ background-color: #fff; } #main-content.webdeal .green { color: #00907e; } /* ADDED BY Allan D. 24.03.11 - Alt main content for under avail cache display */ #main-cfcontent { width: 98.5%; } #main-cfcontent h2 { clear: both; color: #00907E; font-size: 1.5em; margin: 10px 0 8px 8px; } #main-cfcontent h3 { clear: both; color: #00907E; font-size: 1.2em; margin: 10px 0 8px 8px; } #main-cfcontent h4 { color: #00907e; font-size: 1em; margin: 0px 0 0px 8px; } #main-cfcontent p { margin: 10px 0 8px 8px; } #main-cfcontent ul{padding: 10px;} #main-cfcontent ul li{ background-color: transparent; background-image: url(/media/aerlinguscom/styleassets/images/general/link-bullet-2.gif); background-repeat: no-repeat; background-attachment: scroll; background-position: left 0.5em; padding-left: 9px; } #main-cfcontent fieldset{ background-color: #fff; padding: 20px } #main-cfcontent fieldset div.secondary-header { background-image: url(/images/h2-bg-grey-left.gif); background-position: left top; background-repeat: no-repeat; color: #FFFFFF; font-size: 115%; margin: 14px 0 0 14px; padding: 0 0 0 6px; } #main-cfcontent fieldset div.secondary-header h2 { background-image: url(/images/h2-bg-grey-right.gif); background-position: right top; background-repeat: no-repeat; border: 0 none; display: block; height: 21px; padding: 3px 0 0 ; margin:0; color: #fff; font-size: 100%; } #main-cfcontent fieldset div.content{ padding: 10px 8px 10px 8px; border-left: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; border-top: 1px solid #DDDDDD; height: 100%; } #main-cfcontent fieldset div.noteContent{ padding: 10px 8px 10px 8px; border-left: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; border-top: 1px solid #DDDDDD; height: 100%; } fieldset.footerDisplay div.content,fieldset.footerDisplay div.content p,fieldset.footerDisplay div.content p label {color: #939496; font-size: 11px; background-color:#fff;} /* ADDED BY Allan D. 08.10.13 - Change rollover map from js to css */ .map-roll a { outline: none;/* get rid of dotted borders in FireFox */ display:block; width:187px; height:110px; background: url("/media/aerlinguscom/styleassets/images/general/maproll.png") 0 0 no-repeat; } .map-roll a:hover { background-position: -191px 0; } .map-roll a:active { background-position: 0px 0; } /* ADDED BY A.D. 03.04.14 - Change rollover map from js to css */ #socialbar img { border: 0 none; } #socialbar li img { height: 24px; width: 24px; } #socialbar li a:hover { position: relative; top: 2px; } #socialbar { list-style: none outside none; margin: 0; padding-top: 0; position: static; } #socialbar li { display: inline; padding-right: 2px; } #socialbar { text-align: left; width: 180px; }