@import url(tools.css);
@import url(colours.css);
@import url(forms.css);
@import url(leftNav.css);
@import url(tables.css);
@import url(topnav.css);
@import url(layout.css);
@import url(typo.css);
@import url(keith.css);
@import url(dans.css);
@import url(aainlinestyles.css);
@import url(thirdparty.css)

form, label {font-size:11px;}

h1 {font-size: 1.96em; font-family: Arial, Helvetica, sans-serif; padding: 0; font-weight: bold; color: #111;}
h2 {font-size: 1.4em; font-family: Arial, Helvetica, sans-serif; padding: 0; font-weight: bold; color: #666;}
h3 {font-size: 0.77em; font-family: Arial, Helvetica, sans-serif; padding: 0; font-weight: bold; color: #111;}
h4 {font-size: 0.7em; font-family: Arial, Helvetica, sans-serif; padding: 0; font-weight: bold;}
.bighighlight {font-size: 2em; font-weight:bold; color: #F96800;}

#mainContent p.subtitle {margin:0; padding: 0 0 15px 0; font-size: 1.4em; color: #666; font-family: Arial, Helvetica, sans-serif; font-weight: bold;}
#mainContent p.strapline {margin:0; padding: 0;}
#mainContent p.image_left img {float:left; margin: 0 20px 10px 0; padding: 0;}
#mainContent p.image_right img {float:right; margin: 0 0 10px 20px; padding: 0;}
#mainContent p.image_left, #content p.image_right {clear: both;}
#mainContent p.image_left span.highlightheading {font-size:1.3em; padding: 0.5em 0 0 0; font-weight:bold; color: #f93;}

img.savings {float:left; margin: 5px 20px 10px 0; padding: 0;}
ul.savings {float: left; margin: 0; padding: 10px 20px; font-size: 0.7em;} 

/* START grey background box */
.greybox {background-color: #f4f4f4; repeat;}
.greytop {background: url(/images/common/table4_ht.gif) repeat-x;}
.greytop div {background: url(/images/common/table4_tl.gif) no-repeat top left;}
.greytop div div {background: url(/images/common/table4_tr.gif) no-repeat top right;}
.greybottom {background: url(/images/common/table4_hb.gif) repeat-x;}
.greybottom div {background: url(/images/common/table4_bl.gif) no-repeat top left;}
.greybottom div div {background: url(/images/common/table4_br.gif) no-repeat top right;}
.greycontentwrap {background: url(/images/common/table4_vl.gif) repeat-y;}
.greycontent {background: url(/images/common/table4_vr.gif) repeat-y right;}
  /* height and width to set  position of outlines. */
.greytop div, .greytop, .greybottom div, .greybottom {width: 100%; height: 9px; font-size: 1px;}
.greycontent {padding: 0 1em 0em 1em ; margin: 0;}
.greybox {width: 100%; margin: 1em auto;}
 /* END grey background box */
 
 /* Forms - styles 		*/
#content form {padding: 0; margin: 0;}
fieldset {border: 1px solid #ccc; padding: 10px; margin: 10px 0;}
legend {border: 1px solid #ccc; font-size: 130%; font-weight: bold; background: #f1f1f1; padding: 5px;}
/*

The following is to lay out form elements in a 'two-column' style.  However, row must be contained within a wrapper div - this is to prevent IE 6 CRASHING.  
*/
* html form div {width: 100%}  /* see above */
label, input, select, .questionleft {margin: 0; padding: 0; font-size: 11px;}
label.twocolumn {display: block; float: left; clear: left; width: 25em; padding: 10px 0 0 0; text-align: left;}
label.twocolumnerror {color: #f00; display: block; float: left; clear: left; width: 12em;}
input.twocolumn, select.twocolumn {display: block; float: left; margin: 10px 0 0 0;}
select.twocolumnroutes {width: 300px;}
.button_infieldset {margin: 10px 0 0 13em;}
.button_infieldset input {margin: 0 5px 0 -5px;}
input.homesubmit {margin: 5px 0 0 60px;}
#confirmcbox {background: #ecece0; padding: 5px; margin: 0 0 15px 0; font-size: 11px;}
#confirmcbox label {clear: none; width: auto;}
label.cbox {clear: left; width: auto; margin: 0 5px 0 0; font-size: 11px;}
input.cbox {margin: 0 5px 0 5px;}
label.radio {clear: none; width: auto; margin: 0 5px 0 0;}
input.radio {float:none; margin: 0 5px 0 5px;}
label.map, input.map, select.map  {margin: 0;}
form p {clear: both; font-size: 11px;}
form ul li {font-size: 11px;}
form .questionleft {display: block; float: left; clear: left; width: 50%;}
.button {text-align: center;}
.button input, .mbutton input {float: none; display: inline;}
.mbutton {text-align: right;}
form.savings label, form.savings input  {margin: 5px 5px 5px 0; padding: 0;}
.offer {background: transparent url(/images/common/mem_back.gif) repeat-x top; position: relative; margin: 15px 0 15px 0; padding: 5px;}

.button {text-align: center;}
.rm {display: none;}
.cl {clear: both; font-size: 0.1px; line-height: 0.1px;}
.center {text-align: center;}
.align_right {text-align: right;}
hr {border: none 0; border-top: 1px solid #ccc; height: 1px; padding: 0; margin: 0 0 1em 0; clear: both;}

/* Journey Links */
#journey_links {clear: both; margin:  0.5em 0; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid;} 
#journey_links ul {list-style-type: none; margin:  0; padding: 5px 0;}
#journey_links ul li {display:inline; font-size:0.7em;}
#journey_links a {padding-right: 1em;}

/* Important Notes */
#important_information {padding: 5px;}

/* FAQs */
#mainContent p.question {background: #eee url(/images/faqs/q_question.gif) no-repeat top left; padding: 5px 1em 5px 30px;
font-weight:bold;}
#mainContent p.answer {background: transparent url(/images/faqs/a_answer.gif) no-repeat top left; padding: 5px 1em 1em 30px;
margin: 0.5em 0;}

/* Rounded Corners */
.nw, .ne, .sw, .se {position: relative;	margin: 0; font-size: 1px; height: 4px;}
.topfade_yellow .content, .savings_calculator .content, .grey_grey .content, .grey_green .content, .red_grey .content, .topfade_grey .content, .traffic .content {margin: 5px;}
.topfade_yellow .sw, .grey_grey .sw, .savings_calculator .sw, .grey_green .sw, .red_grey .sw, .topbottomfade_grey .sw {margin-bottom: 0; margin-top: -1px;}

/* Standard settings for boxes with grey border */
.nw {background: url(/images/common/nw.gif) top left no-repeat;	top: -1px; left: -1px; margin-bottom: -1px;}
.ne {background: url(/images/common/ne.gif) top right no-repeat; right: -2px;}
.sw {background: url(/images/common/sw.gif) bottom left no-repeat;	bottom: -1px; left: -1px; margin-bottom: -1px; clear: both;}
.se {background: url(/images/common/se.gif) bottom right no-repeat;right: -2px;}

/* Standard settings for boxes with red border */						
.red_grey .nw {background: url(/images/common/red_grey_nw.gif) top left no-repeat; top: -1px; left: -1px; margin-bottom: -1px;}
.red_grey .ne {background: url(/images/common/red_grey_ne.gif) top right no-repeat; right: -2px;}
.red_grey .sw {background: url(/images/common/red_grey_sw.gif) bottom left no-repeat;	bottom: -1px; left: -1px; margin-bottom: -1px; clear: both;}
.red_grey .se {background: url(/images/common/red_grey_se.gif) bottom right no-repeat;right: -2px;}

/* L Shape */		
#lshape_top {position: relative; border: 1px #ccc solid;	border-bottom: none; margin: 0;	padding: 0;	width: 10em;}
#lshape_top p {font-size: 1.5em; font-weight: bold; margin: 0; padding: 0 5px; text-align: center;}
#lshape_middle {position: relative; background: url(/images/common/borderl_m.gif) top left repeat-x; position: relative; height: 4px; margin: 0; padding: 0;}
#lshape_middle_left {border-left: 1px #ccc solid; padding: 0 0 0 10em; margin: 0;}
#lshape_bottom {position: relative; border: 1px #ccc solid;	border-top: none; margin: 0; padding: 0;}
#lshape_bottom h2 {font-size:1.15em; padding: 0.5em 0 0 0; clear: both; font-weight:bold;}
#lshape_bottom hr {margin: 3px 5px;}
#lshape_bottom p {margin: 3px 5px; padding: 2px 0;}
#lshape_bottom p.option {background: #ecece0;}
.blockgreen {background: #ecece0; padding: 0 5px; margin: 3px 5px; }
.blockgrey {background: #efefef; padding: 0 5px; margin: 3px 5px; }	
.mblockgrey {background: #efefef; padding: 0 0px; margin: 0px 0px; }	
#lshape_top .nw {background: url(/images/common/borderl_nw.gif) top left no-repeat;	top: -1px; left: -1px; margin-bottom: -1px;}
#lshape_top .ne {background: url(/images/common/borderl_ne.gif) top right no-repeat; right: -2px;}
#lshape_bottom .sw {background: url(/images/common/borderl_sw.gif) bottom left no-repeat; bottom: -1px; left: -1px; margin-bottom: -1px; clear: both;}
#lshape_middle .ne {background: url(/images/common/borderl_ne.gif) bottom right no-repeat;	right: -2px; bottom: -1px;}
html>body #lshape_middle .ne {right: 0px;}
#lshape_middle .sw { background: url(/images/common/borderl_sw.gif) bottom left no-repeat;	bottom: 0px; left: -2px; margin-bottom: -1px; clear: both;}
html>body #lshape_middle .sw {left: 0px;}
#lshape_bottom .se {background: url(/images/common/borderl_se.gif) bottom right no-repeat;	right: -2px;}
/* \*/
#lshape_bottom .sw {margin-bottom: 0; margin-top: -2px;}
/* */

/* Membership Corners Upgrade*/		
.utopfade_yellow {background: #FFF9ED; position: relative; border: 1px #FFCC99 solid;	margin: 5px 0 5px 0; padding: 0;}
.utopfade_yellow .nw, #topfade_yellow .ne, #topfade_yellow .sw, #topfade_yellow .se {position: relative;	margin: 0; font-size: 1px;	height: 4px;}
.utopfade_yellow .nw {background: url(/images/services/breakdowncover/option200_icon.gif) top left no-repeat; top: -7px; left: -6px; height: 45px; width: 45px;}
.utopfade_yellow .ne {background: url(/images/common/ne.gif) top right no-repeat; right: -585px; bottom: -5px;}
.utopfade_yellow .content {margin: -40px 5px 5px 40px;}

/* Standard content, lists */
.topfade_yellow .content ul {margin: 0; padding: 5px 0 0 0; list-style-type: none;}
.topfade_yellow .content ul li{background: url(/images/common/benefit_tick.gif) no-repeat 0; position: relative; padding: 0 15px; vertical-align: top;}

/* Optional Values for boxes one for each colour combination */
.red_grey {position: relative; background: #f1f1f1; border: 1px #c30 solid;	margin: 5px 0 5px 0; padding: 0;}		
.topfade_yellow {position: relative; background: transparent url(/images/common/benefit_back.gif) repeat-x top left; border: 1px #ccc solid; margin: 5px 0 5px 0; padding-left: 0;}		
.topbottomfade_grey {position: relative; background: transparent url(/images/common/bdown_back.gif) repeat-x top left; border: 1px #ccc solid; margin: 5px 0 5px 0; padding: 0; font-size:0.7em;}		
.grey_grey {position: relative; background: #f1f1f1; border: 1px #ccc solid; margin: 5px 0 5px 0; padding: 0;}
.grey_green {position: relative; background: #ecece0; border: 1px #ccc solid; margin: 5px 0 5px 0; padding: 0;}
.traffic {position: relative; border: 1px #ccc solid; margin: 5px 0 5px 0; padding: 0;}

td {font-size: 0.7em;}

/* Splits Pages */
.split3070 span.split3070, .split3070 span {position: relative; margin: 0 5px 5px 0; padding: 0; font-size: 11px;}
.split3070 span.split3070 {position: relative; display: block; float: left; clear: left; width: 10em;}
.split3070 span {position: relative; display: block; float: left;}
			
.split7030 span.split7030, .split7030 span {position: relative; margin: 0 5px 5px 0; padding: 0;}
.split7030 span.split7030 {position: relative; display: block; float: left; clear: left; width: 24em;}
.split7030 span {position: relative; display: block; float: left;}