/* Variables */
@engineColor: #F5D361;

@headerText: #FFFFFF;
@labelColor: #626263;

@formColor: #ffffff;
@buttonColor: #89AF55;
@salesColor: @engineColor;
@tickColor: @buttonColor;

@borderRadius: 4;

@buttonText: @headerText;
@rcLogo: block;

/* Mixins */
.headerContrast() when (lightness(@engineColor) >= 25%) {color: #2d2d2d !important;}
.headerContrast() when (lightness(@engineColor) < 75%) {color: white !important;}
.formContrast() when (lightness(@formColor) >= 50%) {color: #2d2d2d;}
.formContrast() when (lightness(@formColor) < 50%) {color: white;}
.buttonContrast() when (lightness(@buttonColor) >= 20%) {color: #2d2d2d;}
.buttonContrast() when (lightness(@buttonColor) < 80%) {color: white;}
.dowContrast() when (lightness(@engineColor) >= 25%) {color: #cccccc !important;}
.dowContrast() when (lightness(@engineColor) < 75%) {color: @engineColor !important;}

.checkRadius(@radius) when (@borderRadius < 0){
	-ms-border-radius: 0;
	-o-border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
}

.checkRadius(@radius) when (@borderRadius > 0){
	-ms-border-radius: @radius * 1px;
	-o-border-radius: @radius * 1px;
	-moz-border-radius: @radius * 1px;
	-webkit-border-radius: @radius * 1px;
	border-radius: @radius * 1px;
}

.boxShadow(@shadow) {
	-ms-box-shadow: @shadow;
	-o-box-shadow: @shadow;
	-moz-box-shadow: @shadow;
	-webkit-box-shadow: @shadow;
	box-shadow: @shadow;
}
.lessGradient (@color: @buttonColor, @start: @buttonColor, @end: darken(@buttonColor, 7%)) {
	background: @color;
	background: -moz-linear-gradient(top, @start 0%, #7db9e8 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@start), color-stop(100%,@end));
	background: -webkit-linear-gradient(top,  @start 0%,@end 100%);
	background: -o-linear-gradient(top,  @start 0%,@end 100%);
	background: -ms-linear-gradient(top,  @start 0%,@end 100%);
	background: linear-gradient(to bottom,  @start 0%,@end 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{start}', endColorstr='@{end}',GradientType=0 ); /* IE6-9 */
}
.lessTransition() {
	 transition: all 0.2s ease-in-out;
	 -o-transition: all 0.2s ease-in-out;
	 -ms-transition: all 0.2s ease-in-out;
	 -webkit-transition: all 0.2s ease-in-out;
	 -moz-transition: all 0.2s ease-in-out;
}
.lessTransition(@trans-1, @trans-2) {
	 transition: @trans-1, @trans-2;
	 -o-transition: @trans-1, @trans-2;
	 -ms-transition: @trans-1, @trans-2;
	 -webkit-transition: @trans-1, @trans-2;
	 -moz-transition: @trans-1, @trans-2;
}
/* Global Reset */
* {
	padding: 0;
	margin: 0;
	font-family: Arial;
}
body {
	// padding: 3px;
}
.clearfix {
	clear: both;
}
fieldset {
	border: 0 none;
}
ul li {
	list-style: none;
	float: left;
	clear: both;
	display: block;
}
input.viewAge, input.viewDrop {
	border: 0 none !important;
	background: transparent !important;
	padding: 0 !important;
	float: left;
	margin-top: 8px
}
input.viewAgeInput, input.viewDropInput{
	margin: 8px 8px 0 0 !important;
}
.viewDropLabel {
	line-height: 30px;
}
.viewAgeLabel {
	float: left;
	line-height: 30px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Syles */
//Sales Banner
#sequence {
	display: none;
	width: 100%;
	position: absolute;
	z-index: -1;
	img {
		height: 259px;
		float: left;
	}
	h2 {
	    color: @salesColor;
	    font: 35px Arial;
	    text-shadow: 1px 1px 1px darken(@salesColor, 20%), 0 0 10px black, 2px 2px 1px black;
	    top: 15px;
	    position: absolute;
	    width: 880px;
	    left: 50%;
	    margin-left: -440px;
	}
	p {
		color: white;
		font: 20px Arial;
		top: 70px;
		text-shadow: 1px 1px black, 0 0 5px black;
		position: absolute;
	    width: 880px;
	    left: 50%;
	    margin-left: -440px;
	}
}

//Left
.topContent {
	display: block;
	width: 100%;
	overflow: hidden;
}

legend.legPick, legend.legDrop{
	padding: 8px 10px 8px 0;
	color: #222222;
	.checkRadius(@borderRadius + 1);
	display: inline-block;
	font-weight: bold;
	font-size: 14px;
	margin: 10px 10px 0 10px;
	float:	left;
	border-style: solid;
	border-color: #ffffff;
	border-color: rgba(0, 0, 0, 0);
	border-width: 1px;
}

legend.legPick.active, legend.legDrop.active, legend.legPick.inactive, legend.legDrop.inactive{
	padding: 8px 10px;
}

legend.active{
	.lessGradient();
	.boxShadow(~"0 1px rgba(255, 255, 255, 0.3) inset, 0px 1px 1px rgba(0, 0, 0, 0.20)");
	.buttonContrast();
	text-shadow: 1px 1px 2px darken(@buttonColor, 30%);
	border-color: darken(@buttonColor, 15%);
	.checkRadius(@borderRadius);
}

legend.inactive{
	background: #a4a8a7;
	background: -moz-linear-gradient(top, #a4a8a7 0%, #727574 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4a8a7), color-stop(100%,#727574));
	background: -webkit-linear-gradient(top, #a4a8a7 0%,#727574 100%);
	background: -o-linear-gradient(top, #a4a8a7 0%,#727574 100%);
	background: -ms-linear-gradient(top, #a4a8a7 0%,#727574 100%);
	background: linear-gradient(to bottom, #a4a8a7 0%,#727574 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4a8a7', endColorstr='#727574',GradientType=0 );
	color: #ffffff !important;
	text-shadow: 1px 1px 2px #222222;
	&:hover {
		background: #ACAFAE;
	}
}

legend.legDrop{
	margin-left: 0;
	display: none;
	cursor: pointer;
}

.pickUp {
	display: inline;
	float: left;
	width: 46%;
	padding: 0 2%;
	label {
		display: block;
		padding: 6px 0 4px;
	}
	legend {
		font: bold 15px Arial;
		display: none;
	}
	select {
		display: block;
		width: 100%;
	}
}
.dropOff {
	display: none;
	float: left;
	width: 46%;
	padding: 0 2%;
	label {
		display: block;
		padding: 6px 0 4px;
	}
	legend {
		display: none;

		font: bold 15px Arial;
	}
	select {
		display: block;
		width: 100%;
	}
}
select {
	background: white;
	border: 1px solid darken(@formColor, 15%);
	padding: 5px 2.5%;
	border-radius: 2px;
	.boxShadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
	.lessTransition();
	cursor: pointer;
	&:focus {
		outline: none;
		border: 1px solid #77C4D3;
		box-shadow: 0 0 2px #77C4D3;
	}
	&:disabled {
		background: #f4f4f4 !important;
	}
}
input[type="text"] {
	padding: 7px 2% 5px;
	border-radius: 2px;
	border: 1px solid darken(@formColor, 15%);
	// background: url("../affiliateXmlStylesheets/responseIMG/cal.png") 97% 50% no-repeat white;
	.boxShadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
	.lessTransition(box-shadow 200ms linear, border-color 200ms linear);
	cursor: pointer;
	&:focus {
		outline: none;
		border: 1px solid #77C4D3;
		box-shadow: 0 0 2px #77C4D3;
	}
}
.textbox-age{
	width: 60%;
	margin-left: 12px;
	text-align: center;
}
.bottomContent {
	display: none;
}
.pudContainer {
	display: inline;
	float: left;
	width: 46%;
	padding: 0 2%;
	label {
		margin-top: -14px;
		display: block;
		float: left;
	}
	legend {
		margin: -1px 0 3px;
	}
}
.puDates {
	display: inherit;
	float: left;
	width: 55%;
	margin: 0 2% 0 0;
	input {
		width: 92.7%
	}
}
.dodContainer {
	display: inline;
	float: left;
	padding: 0 2%;
	width: 46%;
	label {
		margin-top: -14px;
		display: block;
		float: left;
	}
	legend {
		margin: -1px 0 3px;
	}
}
.doDates {
	display: inherit;
	float: left;
	width: 55%;
	margin: 0 2% 0 0;
	input {
		width: 92.7%;
	}
}
.drop.date {
	max-height: 25px;
	select {
		width: 20%;
		display: inline;
		float: left;
		&:first-child {
			margin: 0 1% 0 0;
		}
	}
}
legend, label {
	.formContrast();
	font: 11px/11px Arial;
}
input.viewDrop {
	margin: 10px 2%;
	display: inline;
	float: left;
}
label.viewDrop {
	float: left;
	line-height: 30px;
}
.btn {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    float: right;
    width: 155px;
    .checkRadius(@borderRadius);
    overflow: hidden;
	a {
		.lessGradient();
		.boxShadow(~"0 1px rgba(255, 255, 255, 0.3) inset, 0px 1px 1px rgba(0, 0, 0, 0.20)");
		padding: 15px 10%;
		width: 79%;
		float: right;
		text-align: center;
		text-decoration: none;
		.buttonContrast();
		font: bold 24px Arial;
		text-shadow: 1px 1px 2px darken(@buttonColor, 30%);
		display: inline-block;
		*display: inline;
		zoom: 1;
		border-style: solid;
		border-color: darken(@buttonColor, 15%);
		border-width: 1px 1px 2px 1px;
		.checkRadius(@borderRadius);
		&:hover {
			background: @buttonColor;
		}
		&:focus {
			position: relative;
			left: 1px;
			top: 1px;
		}
	}
}
.driverAgeFunction, .viewDropWrap {
    float: left;
    padding: 6px 2%;
    width: 96%;
}
.driverAgeCheck {
	float: left;
}
.driversAge{
	width: 43%;
	display: none;
}
#driversAgeHidden{
	width: 100%;
}
.driversAge, #driversAgeHidden {
	float: left;
}
.driversAgeLabel{
	float: left;
	line-height: 30px;
	margin-left: 12px
}
#ageId{
	width: 20%;
	margin-left: 12px
}
.innerContainer {
	.checkRadius(@borderRadius + 1);
	display: block;
	margin: 0 auto;
	overflow: hidden;
	background: @formColor;
	width: 95%;
	border: 3px solid white;
}

legend.legPick, legend.legDrop{
	.checkRadius(@borderRadius - 1);
}

.mediaDropOff {
	margin: 0 0 0 2%;
	width: 48%;
	float: left;
	display: inline;
	font: bold 14px arial;
	margin-top: 10px;
}
.text11pxboxage {
	background-image: none;
}
.tip_trigger {
	background: url("http://www.rentalcars.com/images/site_graphics/newsite/info_why.gif") center center no-repeat;
	height: 28px;
	width: 15px;
	float: left;
	margin: 0 0 0 6px;
	cursor: help;
}
.tip {
	background: white;
	.checkRadius(@borderRadius + 3);
	.boxShadow(0 0 0 4px fadeout(@engineColor, 50%));
	color: @labelColor;
	float: left;
	font: 12px Arial;
	left: -131px;
	padding: 10px;
	position: relative;
	top: -90px;
	width: 230px;
	border: 1px solid lighten(@engineColor, 40%);
	display: none;
}
.tip:after {
	background: transparent;
	border-color: #FFF transparent transparent transparent;
	border-style: solid;
	border-width: 10px;
	bottom: -21px;
	content: "";
	height: 1px;
	width: 1px;
	left: 51%;
	position: absolute;
}

//Small Banner
.left {
	display: inline;
	float: left;
	width: 100%;
	#mediaSmall {
		display: none;
	}
	h3 {
		background: @engineColor;
		padding: 10px 0;
		font: bold 18px Arial;
		text-align: center;
		width: 90%;
		margin: 0 auto;
		text-shadow: 1px 1px 1px darken(@engineColor, 15%);
		.headerContrast();
	}
	form {
		.checkRadius(@borderRadius + 2);
		background: @engineColor;
		display: inline-block;
		*display: inline;
		zoom: 1;
		width: 99.5%;
		border: 1px solid darken(@engineColor, 10%);
		padding: 0 0 2%;
	}
	.mediaBanner {
		height: 170px;
		position: absolute;
		top: 542px;
		display: none;
		width: 99.5%;
		z-index: -10;
		h2 {
		    background: url("/affiliateXmlStylesheets/responseIMG/blackFade.png") repeat scroll 0 0 transparent;
		    color: white;
		    display: block;
		    font: bold 15px Arial;
		    padding: 7px 2.3%;
		    position: absolute;
		    text-align: center;
		    text-shadow: -1px -1px rgba(0, 0, 0, 0.5);
		    top: 18px;
		    width: 93.7%;
		}
		img[alt="smlBanner"] {
			width: 98.5%;
			.checkRadius(@borderRadius);
			float: left;
			height: 140px;
		}
	}
	.supplierContainer {
		bottom: 0;
		padding: 10px 0px 10px 3%;
		position: absolute;
		img {
			.boxShadow(3px 3px rgba(0, 0, 0, 0.1));
			.checkRadius(@borderRadius - 1);
			margin: 0 2%;
			width: 20%;
		}
	}
}
.poweredBy {
	clear: both;
	float: right;
	display: @rcLogo;
	img {
		float: left;
		display: inline;
		position: relative;
		top: 4px;
	}
	label {
		font: 10px/20px Arial;
		color: #626263;
		float: left;
		display: inline;
	}
}

//Right
.right {
	display: none;
	.mediaBanner {
		display: none;
		width: 99.5%;
		float: right;
		margin-bottom: 15px;
		h2 {
		    background: url("/affiliateXmlStylesheets/responseIMG/blackFade.png") repeat scroll 0 0 transparent;
		    color: white;
		    display: block;
		    font: bold 20px Arial;
		    padding: 12px;
		    position: absolute;
		    width: 250px;
		    margin-top: 18px;
		    text-shadow: -1px -1px rgba(0, 0, 0, 0.5);
		}
		img[alt="smlBanner"] {
			width: 99%;
			.checkRadius(@borderRadius + 2);
			float: left;
			min-height: 170px;
		}
	}
	img[alt="ovrlayCar"] {
		width: 100%;
		display: none;
	}
	.supplierContainer {
		margin-bottom: 10px;
		img {
			margin: 0 0 0 2%;
			width: 22.8%;
			.checkRadius(@borderRadius - 1);
			border: 1px solid rgba(0, 0, 0, 0.05);
			&:first-child {
				margin: 0 !important;
			}
		}
	}
	ul {
		li {
			font: 12px/30px Arial !important;
			color: @labelColor;
			position: relative;
			left: 30px;
			width: 90%;
		}
	}
	hr {
		display: none;
	}
	h2 {
		color: @labelColor;
		font: Bold 18px Arial;
		padding: 10px 0;
		display: block;
		clear: both;
	}
}
.icon-ok-sign:before {
	color: @tickColor;
}
//Datepicker Hack
.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all {
    border: 0 none !important;
    .checkRadius(@borderRadius + 1) !important;
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.15), 0 0 170px -20px rgba(0, 0, 0, 0.5) !important;
    -moz-box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.15), 0 0 170px -20px rgba(0, 0, 0, 0.5) !important;
    -webkit-box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.15), 0 0 170px -20px rgba(0, 0, 0, 0.5) !important;
    -o-box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.15), 0 0 170px -20px rgba(0, 0, 0, 0.5) !important;
    -ms-box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.15), 0 0 170px -20px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
    padding: 0 !important;
    padding: 4px !important;
    width: 250px !important;
}
.ui-widget-header {
	background: @engineColor !important;
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	width: 100%;
	filter: none !important;
	padding: 0.2em 5px 0.2em 0 !important;
}
.ui-datepicker .ui-datepicker-title {
	.headerContrast();
	padding: 7px 0 !important;
}
.ui-datepicker-calendar span {
    .dowContrast();
}
.ui-datepicker {
	select {
		padding: 3px !important;
		max-width: 75px !important;
		border: 1px solid darken(@engineColor, 15%) !important;
		font-weight: normal !important;
		margin: 0 2px !important;
	}
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: none repeat scroll 0 0 #FFFFFF !important;
    border: 1px solid #CCCCCC !important;
    color: #A3A3A3 !important;
    font-weight: normal !important;
    padding: 8px 0 !important;
    text-align: center !important;
    width: 31.7px !important;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header ui-state-hover, ui-state-focus, ui-widget-content .ui-state-focus, ui-widget-header .ui-state-focus {
	background: @engineColor !important;
	border: 1px solid darken(@engineColor, 15%) !important;
	.headerContrast();
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    background: none repeat scroll 0 0 lighten(@engineColor, 30%) !important;
    border: 1px solid @engineColor !important;
    color: darken(@engineColor, 10%) !important;
    font-weight: bold !important;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background: none repeat scroll 0 0 darken(@engineColor, 10%) !important;
    border: 1px solid darken(@engineColor, 15%) !important;
    color: #FFFFFF !important;
}
.ui-datepicker table {
	margin: 43px 0 0.4em !important;
}
.ui-datepicker .ui-datepicker-next {
	top: 3px !important;
}
.ui-datepicker .ui-datepicker-next-hover {
	border: 0 none !important;
	right: 2px !important;
	top: 3px !important;
	cursor: pointer !important;
}
.ui-datepicker .ui-datepicker-prev {
	top: 3px !important;
}
.ui-datepicker .ui-datepicker-prev-hover {
	border: 0 none !important;
	left: 2px !important;
	top: 3px !important;
	cursor: pointer !important;
}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
	padding: 8px 12px !important;
}
.ui-datepicker-prev.ui-corner-all.ui-state-disabled {
	background: @engineColor;
}
.ui-datepicker-prev.ui-corner-all:after {
	.headerContrast();
	content: "\f060";
	font-family: FontAwesome;
	font-size: 15px;
	font-weight: normal;
}
.ui-datepicker-next.ui-corner-all:after {
	.headerContrast();
	content: "\f061";
	font-family: FontAwesome;
	font-size: 15px;
	font-weight: normal;
}
.ui-datepicker-unselectable.ui-state-disabled span {
	background: #E1E2E6 !important;
	text-decoration: line-through !important;
}
.ui-datepicker-prev.ui-corner-all.ui-state-disabled {
	opacity: 0.5 !important;
}
.ui-datepicker th {
	padding: 0.4em 0.3em 0.7em !important;
}

.hasDatepicker{
	background: url(/affiliateXmlStylesheets/responseIMG/calendar.png) right center no-repeat #ffffff !important;
}