﻿@charset "utf-8";
/* AFerry Engine: "afeng_" */
/*	---------------------------------------------------------------------------------
	AFerry Colours
	GREY											REAL
	-------------------------------------	-------------------------------------------- */
/*	AFerry Dark Blue #505050						AFerry Dark Blue #005684
	AFerry Mid Blue #bababa (#bababa)				AFerry Mid Blue #0099cc (#09c)
	AFerry Light Blue #aeaeae						AFerry Light Blue #81b5d8
	AFerry Light Blue 2 #ebebeb						AFerry Light Blue 2 #e0ecf7
	AFerry Strapline blue #e1e1e1					AFerry Strapline blue #c6effe
	AFerry Light Blue Zebra Stripe #eaeaea			AFerry Light Blue Zebra Stripe #edf3f8
	AFerry Light Grey Background #F5F5F5			AFerry Light Grey Background #F5F5F5
	AFerry Dark Yellow #d4d4d4						AFerry Dark Yellow #fdcc1a
	AFerry Yellow Border/Focus #e8e8e8				AFerry Yellow Border/Focus #fee594


	AFerry currency button BG yellow #c6c6c6		AFerry currency button BG yellow #fdb913
	AFerry currency button border yellow #c0c0c0	AFerry currency button border yellow #fcaf17
	Body Grey #444									Body Grey #444
	Dotted Border #bbb								Dotted Border #bbb
	Forms Text #494949								Forms Text #494949
	Forms Border #c0c0c0							Forms Border #c0c0c0
	Forms Invalid #b01f25							Forms Invalid #b01f25
	Button Green #44a13f							Button Green #44a13f
*/
/*	--------------------------------------------
	NOTE: Specify media query for 0px and up
	Helps brand over-rides for CORE 2016 
	-------------------------------------------- */	
@media screen and (min-width: 0em) {
/*	--------------------------------------------
	AFENG Engine-specific resets
	-------------------------------------------- */
.afeng_cntn-engine { /* the actual widget */
	background-color: #FDCC1A;
/*	border: 3px solid #fee594;*/
	border: 1px solid #fee594;
	}
/* --------------------------------------------
   input focus
-------------------------------------------- */
.afeng_eng1 input:focus {
	background-color: #ecf8ff;
	}
.afeng_eng1 input[type="radio"]:focus {
	background-color: #FDCC1A;
}
/* --------------------------------------------
   input invalid
-------------------------------------------- */
.afeng_eng1 input:invalid {
	border: 2px solid #b01f25;
	}
/*	--------------------------------------------
	button
	-------------------------------------------- */
.afeng_eng1 button,
.afeng_eng1 .afeng_btn {
	background-color: #44a13f;
	}
.afeng_eng1 .afeng_btn1:hover,
.afeng_eng1 .afeng_btn1:active {
	background-color: #0c7129;
}
.afeng_sprite,
#ui-datepicker-div .ui-icon { /* sprite for aferry engine */
 	/*background-image: url(../img/afeng.png);
	background-image: url(../img/afeng-ie.png)\9;*/
	background-image: url(../img/afeng.svgz);
	}
.afeng_eng1 .afeng_btn2 {
	background-color: #81b5d8;
	}
.afeng_eng1 .afeng_btn3 { /* currency button */
	background-color: #fdb913 ;
	border: 1px solid #fcaf17 ;
	}
.afeng_eng1 .afeng_btn3:hover {
	background-color: #fee594;
	}
 .afeng_btn em {
	color: #005684;
	}
/*label.afeng_h2 {
	color: #555;
	}
	*/
/*.afeng_childAgeBlock,
.afeng_kidsBG,
#afeng_vehicleSummary,
#afeng_trailerSummary {
  background-color: #fee594;
	}*/
.afeng_childAgeBlock,
.afeng_kidsBG,
*[id^="afeng_trailerSummary"],
*[id^="afeng_vehicleSummary"] {
  background-color: #fee594;
	}
	
	 
	
	
	
/* note: radio buttons and checkboxes are inputs, so need to counter the width: 100% for those */
.afeng_eng1 form h2 {
	color: #005684;
	}
/*	---------------------------
	ROUTES LIST
	-------------------------- */
.afeng_routesList .ui-state-focus, 
.afeng_vehiclesList .ui-state-focus,
.afeng_routesList .ui-state-focus a {
	background-color: #005684;
	}
.afeng_routesList li a {
	color: #005684;
	}
.afeng_routesList li:hover a {
	background-color: #005684!important;
	}
.afeng_routesList li em, .afeng_routesList li em {
	background-color: #ffed78 !important;
	color: #005684;
	}
.afeng_routesList li:hover em {
	color: #81B5D8; 
	}
.afeng_routesList li:hover h3 em {
	background-color: #ffed78;
	color: #005684 !important; 
	}
.afeng_routesList .ui-state-focus em {
	color: #81b5d8;
	}
.afeng_routesList span.sub {
	color: #2f4f4f;
	}
.afeng_routesList .ui-state-focus, .afeng_routesList a.ui-state-focus {
	background-color: #005684 !important;
}	
/*	------------------------------
	end ROUTES LIST 
	------------------------------ */

/*	--------------------------------
	VEHICLE LIST
	-------------------------------- */	
.afeng_vehiclesList li a { 
	color: #005684;
	}
.afeng_vehiclesList li:hover a { 
	background-color: #005684;
}
/*	--------------------------------
	Currency Selector
	-------------------------------- */
li.fScanToggle {
  border-bottom: 1px dotted #a7d3ec;
  border-top: 1px dotted #a7d3ec;
	}
li.fScanToggle label {
  color: #005684;
	}
li.fScanToggle label:hover, 
li.fScanToggle.selected label, 
li.fScanToggle.selected label:hover {
	background-color: #417eab;
	}
li.fScanToggle.selected label {
	background-color: #c3e9fc;
	color: #005684;
	}
ul.radioButtonList li.selected em, ul.radioButtonList li.selected:hover em, ul.radioButtonList li:hover em {
  color: #FDCC1A;
	}
ul.radioButtonList li.selected em {
  color: #005684;
	}
/*	-------------------------------------
	non "ui-" calpicker stuff
	------------------------------------- */
.afeng_calButtons, 
.afeng_cbDisbled, 
.afeng_cbDisbled {
 	background-color: #005684;
	}
 .afeng_calButtons:hover {
	background-color: #aedff7;
	color: #005684 !important;
	}
.afeng_MonthSelector li a {
	color: #005684;
	}
.afeng_stripe1 { background-color: #edf3f8; }
/*	-------------------------------
	VEHICLE POPUP
	------------------------------- */
.afrwd_cntn-vehicle h2 {  
	color: #005684;
	 }
/*	-------------------------------
	end VEHICLE POPUP
	------------------------------- */
/*	-----------------------------------
	jQuery datepicker (classes starting with "ui" are from jQuery widget)
	----------------------------------- */
#ui-datepicker-div .ui-state-focus span.sub {
	color: #E6E8FA !important;
	}
#ui-datepicker-div .ui-state-disabled {
	background-color: #E2E3E4;
	}
/*	---------------------------------
	calendar
	--------------------------------- */
#ui-datepicker-div .ui-datepicker-header,
#ui-datepicker-div .ui-widget-header {
	background-color: #005684;
	}
#ui-datepicker-div.ui-datepicker select.ui-datepicker-month-year {
	color: #81B5D8;
	}
#ui-datepicker-div.ui-datepicker th td {
	background-color: #9D9FA2;
	}
#ui-datepicker-div .ui-state-default:hover, 
#ui-datepicker-div .ui-widget-content .ui-state-default:hover, 
#ui-datepicker-div .ui-widget-header .ui-state-default:hover .ui-datepicker-other-month:hover {
	background-color: #C3E9FC;
	color: #005684;
	}
#ui-datepicker-div .ui-datepicker-calendar .button-hover a {
	background-color: #AEDFF7;
	}
#ui-datepicker-div .ui-state-disabled, 
#ui-datepicker-div .ui-widget-content .ui-state-disabled, 
#ui-datepicker-div .ui-widget-header .ui-state-disabled, 
#ui-datepicker-div .ui-datepicker-unselectable .ui-state-disabled {
	background-color: #ECEDED;
	}
#ui-datepicker-div .ui-state-active, 
#ui-datepicker-div .ui-widget-content .ui-state-active, 
#ui-datepicker-div .ui-widget-header .ui-state-active {
	background-color: #F27521;
	}
#ui-datepicker-div .ui-state-active a, 
#ui-datepicker-div .ui-state-active a:link, 
#ui-datepicker-div .ui-state-active a:visited {
	background-color: #F27521;
	}
#ui-datepicker-div .ui-datepicker-calendar th {
	background-color: #9D9FA2;
	}
.afeng_eng1 th.ui-datepicker-week-end {
	background-color: #6B6C6D !important;
	}
/*	---------------------------------
	messages used in flexi-flow
	--------------------------------- */
.afrwd_msg3-cntn { /* red */
	color: #B01F25;
	border: 1px solid #B01F25;
}
/* Multi popups *********** */
.afeng_multileg {
	background-color: #c3e9fc;	
}
/* ************************ */
.afrwd_excl-mk1 + h2 {
	color: #B01F25;
	}
.afrwd_excl-mk1 + h2 + h4 {
	color: #005684;
	}
.tooltip {
	background-color: #ffffd8;
}
.tooltip > .arrow {
	border-bottom: 12px solid #ffffd8;
	}
/*.afeng_eng1 select.afeng_bdr1, .afeng_eng1 input.afeng_bdr1 {
  border: 2px solid #b01f25;
	}
	*/
.currencyHolder {
	background-color: #fdb913; 
	border: 1px solid #fcaf17;
}
	
	
} /* END media query */



/*	--------------------------------------------
   'TABLET' Media Queries - 481px
	-------------------------------------------- */
@media screen and (min-width: 481px) { /* anything over iphone landscape? */

} /* END media query*/


/* --------------------------------------------
   'DESKTOP' Media Queries - 768.01px 48.001em up if 16px = 1em
-------------------------------------------- */
@media screen and (min-width: 768px) {
/*	----------------------------
	engine
	---------------------------- */
.afeng_cntn-engine {
  border: 5px solid #fee594;
}
/*	--------------------------------------------
	floats
	------------------------------------------- */	
/*fieldset.afeng_inline input[type="checkbox"], 
fieldset.afeng_inline input[type="radio"] {
	background-color: #FDCC1A;
	}*/
/*	-------------------------- */
/************ column 9 ************/
/*.afeng_cntn-vehicle h2, 
.afeng_cntn-groups h2 { 
	background-color: #005684;
	 }*/
/*	------------------------------
	routes list (tab+)
	------------------------------ */
.afeng_routesList .afeng_listIconText { /* blue text next to icons in Routes List */
	color: #81b5d8;
	}

} /* END media query*/



/*	---------------------------------
	Media Queries for screen wider than 54.00em (875px or 864px)
	--------------------------------- */
/*@media screen and (min-width: 864px) {
	
} /* END media query*/


/*	---------------------------------
	Media Queries for screen wider than 62.500em (1000px)
	--------------------------------- */
@media screen and (min-width: 1000px) {

/*	-------------------------------
	VEHICLE POPUP
	------------------------------- */
.afrwd_cntn-vehicle h2 {  
	background-color: #005684;
	 }

} /* END media query*/


/*	---------------------------------
	Media Queries for screen wider than 75.00em (1200px)
	--------------------------------- */
@media screen and (min-width: 1200px) {
} /* END media query*/

/*  ---------------------------------
	iPhone / other mobile (0px to 480px) 
	--------------------------------- */
@media screen and (min-width: 0px) and (max-width : 480px) {
.af_logo { 
	background-image: url("../img/site-logo/af_logo-aferry.co.uk.png");
	}

} /* END media query */


@media screen and (min-width: 360px) { /* pax pet tweaks Oct2015 */
} /* END media query*/


.legend {
	text-align: left;
	margin-top: 6px !important;
}
.legend span {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 6px !important;
}
.legend.available span, #ui-datepicker-div a.ui-state-default {
	background-color: #6FC28B;
	color: white;
}
.legend.no-vehicle-space span, #ui-datepicker-div .ui-datepicker-calendar .ui-datepicker-unselectable.no-vehicle-space span.ui-state-default {
	background-color: #E36624 !important;
	color: white;
}
.legend.no-sailing span, #ui-datepicker-div .ui-datepicker-calendar .ui-datepicker-unselectable.no-sailing span.ui-state-default {
	background-color: #ddd;
	cursor: not-allowed !important;
}
.legend.selected span, #ui-datepicker-div a.ui-state-default.ui-state-active {
	background-color: #FDCC1A;
	color: black;
}
#ui-datepicker-div.ui-datepicker td {
	height: 26px !important;
}
 #ui-datepicker-div .ui-state-disabled  {
	cursor: not-allowed !important;
}