@charset "UTF-8";
/* CSS Document */
/*set font-size in body to 1em to pick up users sizing*/

body {text-align: center; border: 0; font-size: 14px; font-family: Arial, Calibri, sans-serif; color: #003; background: #dcdcdc;
  overflow-x: hidden;}
html, body { margin: 0 auto; padding: 0 }
*{margin: 0; padding: 0}
.hide {display: none}
.unhide {display: block}
.deviceshow {display: none}
.scrollShow {display: none}
.subrow {display: none}
#hide171018 {display: none}

@media print { 
.no-print, .no-print * {display: none ! important;} 
}

ul {list-style-type: none; list-style-position: inside; border-left: none;}
li {font-style: normal; font-variant: normal; font-weight: normal;}
img {border: none; padding: 0.1rem}

table {border-collapse: collapse;}
th, td {padding: 0;}

/*text*/
.head {font-weight: bold; border-bottom: 0.1rem solid #003; margin-bottom:0.2rem}
em {font-weight: bold; font-style: italic; color: #69c}
label {font-size: 0.8rem}

p {clear: both; margin: 0rem}
/*only used in worldwide-business-terms*/
.terms p {margin-bottom: 0.5rem; text-align: justify }
.content-head p {margin-bottom: 1rem}
#pagetext-wrapper p {margin-left: auto; margin-right: auto; text-align: center}
#base .centerlink p {padding-bottom: 1rem}

/*links*/
a {text-decoration: none; color: #333; font-weight: normal}
alink { color: #ccc; font-size: inherit;}
vlink { color: #b0c4de; font-size: inherit;}

/*h tags*/
h1, h2, h3, h4, h5, h6 {margin: 0rem; color: #003; font-weight: normal}
h1, h2 {font-size: 1.4rem;}
h3, h4 {font-size: 1.2rem;}
#content-column.gradient h1, #content-column.block h1 {text-align: left}
#content-column h1 {margin-left: auto; margin-right: auto; text-align: center; padding-top: 1rem}
#content-column h2 {text-align: left}
.content-head h1 {margin-bottom: 1rem}
.content-head h1,.content-head h2 {margin-left: auto; margin-right: auto; text-align: center}
#item-wrapper h1, #item-wrapper h2.head {font-size: 1.8rem}
#pagetext h3, #pagetext h4 {margin-bottom: 0.5rem}
#pagetext h1 {margin-left: auto; margin-right: auto; text-align: center}
#base .centerlink h1 {padding-bottom: 1rem}

/*forms*/
input[type=text]{-webkit-box-shadow:inset 0 0.1rem 0.2rem #ddd, 0 0.1rem 0 #fff; -moz-box-shadow:inset 0 0.1rem 0.2rem #ddd, 0 0.1rem 0 #fff; box-shadow:inset 0 0.1rem 0.2rem #ddd, 0 0.1rem 0 #fff; border: 0.1rem solid #003; background:#fff; margin:0 0 0.4rem; padding:0.2rem; border-radius:0.4rem; width: 10rem}
input[type=button] {box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.5); border: 0.2rem solid #003; background:#EEC900; margin:0 0 0.4rem; padding:0.2rem; border-radius:0.3rem; font-size: 1.1rem; color: #003; min-width: 10rem}
input[type=checkbox] {border: 0.1rem solid #003; padding:0.2rem; width: 1rem; height: 1rem}
select { font-weight: bold; font-variant: normal; font-style: normal; color: #666;}
input {color: #339;}

#container {width: 100%; max-width: 1500px; margin: 0 auto; text-align: left; overflow: hidden; background-color: #fff; border-left:#996 0.1rem solid; border-right:#996 0.1rem solid;}

/*top section*/
#top-wrapper {width: 100%; max-width: 1500px; position: relative; top: 0rem; z-index: 1; height: auto; background-color: #fff} 

#cookie-law {line-height: 2rem}
#cookie-law p {padding: 1rem 0 1rem 0; background-color: #003; color: #fff}
#cookie-law a {color: #6B8AC1; font-weight: bold}
.close-cookie-banner {border: 0.2rem #fff solid; padding: 0.2rem}

#top {width: 100%; position: relative; top: 0; clear: both; height: auto}
#intro {padding-top: 0.2rem; padding-left: 0.2rem; margin-bottom: 0.2rem;}
#pageheader {width: 50%; max-width: 50%; float: left; clear: right}
#intro #tel {float: left; clear: left; margin-left: 0.2rem; font-size: 1.5rem; color: #003; font-weight: bold}
#intro .trustpilot-widget {float: right; clear: right; margin-right: 1rem; top: 0rem}

#mainlinks-wrapper {width: 100%; max-width: 1500px; clear: both; position: relative; height: 2.5rem; max-height: auto; z-index: 2; background-color: #003; border-top: #003 solid 0.2rem; border-bottom: #003 solid 0.2rem}
#mainlinks-wrapper.fixed {position: fixed; top: 0rem}
#mainlinks-wrapper.fixed #tel.scrollShow {display: inline; color: #fff; float: right; margin-right: 0.5rem; font-size: 1.3rem; font-weight: bold; vertical-align: middle}
#mainlinks-wrapper.fixed #home img.scrollHide {display: none}
#mainlinks-wrapper.fixed #home img.scrollShow {display: inline; vertical-align: middle; float: left; padding-left: 0.5rem; padding-right: 0.5rem} 
/*invis applies coding for mobile devices*/
.invis {display: none}

#mainlinks-menu {clear: both; float: left; margin: 0; padding: 0; width: 100%; position: relative; vertical-align: middle}
#mainlinks-menu img {float: left; padding-left: 1rem; padding-right: 1rem}
#mainlinks-menu img.scrollHide, #mainlinks-menu .expand img {width: 2rem; height: 2rem}
#mainlinks-menu ul {margin: 0; padding: 0; float: left}
#mainlinks-menu ul li {float: left; position: relative; height: 2rem; padding: 0.5rem 1rem 0 1rem;}
#mainlinks-menu .expand {float: right; margin-right: 0.2rem;}
#mainlinks-menu ul li a {display: block; margin: 0; text-align: left; color: #fff}
#mainlinks-menu ul span.sublist {display: none; position: absolute; top: 2.5rem; left: auto; right: auto; width: 18rem; margin-left: -1rem}
#mainlinks-menu li:hover + span.sublist, #mainlinks-menu span.sublist:hover {display: block}
#mainlinks-menu span.sublist li {left: auto; margin: 0; clear: left; width: 100%; padding-top: 0rem}
#mainlinks-menu span.sublist li a {font-size: 0.9rem; line-height: 2rem; padding-left: 1.2rem; border: 0.1rem solid #969696; background-color: #f5f5f5; color: #333}
#mainlinks-menu .active {background-color: #d6eaf8}
#mainlinks-menu .active a {color: #003; font-weight: bold}
#mainlinks-menu a:hover {color: #F5F5F5}
#mainlinks-menu .active a:hover, #mainlinks-menu .active + span.sublist li a:hover{color: #888}
#mainlinks-menu .active + span.sublist li a {border: 0.1rem solid #b9d3ee; background-color: #d6eaf8; color: #003; font-weight: bold}
#mainlinks-menu .inactive {background-color:#003; color: #ccc; font-weight: bold}

#contents-wrapper {width: 100%; max-width: 100%; clear: both; float: left; position: relative; height: inherit}
#region {display: none}
/*end top section*/

/*mid section*/
#main-content1 {width: 100%; max-width: 100%; float: left; overflow: hidden; position: relative; background-color:#FFEC8B;}
/*phase out main-content2 & 3, used for 3 col layout*/
#main-content2, #main-content3 {width: 100%; max-width: 100%; float: left; background-color:transparent}
#main-content1.INFO{background-color:#FFEC8B}

#content-column {width: 78%; float: left; clear: left; overflow: hidden; padding-left: 0.2rem; margin: 1rem 0rem 1rem 1rem; border-radius: 0.3rem;}
#content-column.gradient {width: 78%; border: 0.2rem #fff solid}
#content-column.block {background-color: #fff}

.content-head {width: 100%; max-width: 100%; line-height: 1rem; text-align: center; margin: 0 auto}
/*is this needed - it ought to inherit from content-head*/
.content-head .headtext {font-weight: bold; line-height: auto; text-align:center;}

#item-wrapper {width: 75%; float: left; clear: left; overflow: hidden; padding-left: 0.2rem; margin: 1rem 0rem 1rem 10rem; border: 0.2rem #fff solid; border-radius: 0.3rem; }
#item-wrapper.noborder {border: none}
#item-wrapper.gradient {width: 40%;}
#item-wrapper dl {display:block}
#item-wrapper dl dt {margin-left: 0.2rem; margin-right: 0.2rem; margin-bottom: 0.2rem; float: left; width: 100%; max-width: 100%; clear: left; padding: 0.2rem; position: relative; background-image: url(../images/bullet_tickbox.gif); background-repeat: no-repeat; line-height: 2rem;}
#item-wrapper dl dt img {float: left}
#item-wrapper dl dd {float: left; text-align:left; margin-left: 0.2rem}
#item-wrapper.benefits dl {width: 100%}
#item-wrapper.benefits dl dd {width: 80%; float: left}
.benefits {padding-left: 0.2rem; padding-bottom: 0.5rem; margin-top: 1rem; background-color: #fff}
.benefits li {background-image: url(../images/bullet_tickbox.gif); background-repeat: no-repeat; padding-left: 2rem; line-height: 1.5rem}
.benefits a {font-weight:bold}

#pagetext-wrapper {width: 100%; float: left; overflow: hidden; margin-top: 1rem; clear: both}
#pagetext-wrapper .quoteform {border: 0.1rem solid #663; background-color: #f5f5dc; color: #000;}
#pagetext-wrapper .quoteform p {color: #000; text-align:left; }
#pagetext-wrapper .quoteform p.small {font-size: 0.8rem; }
#pagetext-wrapper .quoteform h2 {color: #000; font-size: 1rem;text-align:left; }
#pagetext-wrapper .quoteform h3 {color: #000; font-size: 0.9rem;text-align:left; }
#pagetext-wrapper p {font-size: 1rem; font-weight: bold; color: #69c; line-height: 1rem; padding: 0.1rem; margin-top: 0.2rem; margin-bottom: 0.2rem }
#pagetext-wrapper .benefits li {margin-left: 1rem; padding-left: 2rem}
 
#pagetext {/*float: right;*/margin: 0 auto; text-align: justify; /*background-color: #fff;*/ width: 98%; border: 0.2rem #fff solid; border-radius: 0.3rem;}
#pagetext p {clear: left}
#pagetext img {float: right; margin: 0.5rem}
#pagetext dl, #pagetext ul {margin: 0.5rem; border: solid 0.2rem #b9d3ee}
#pagetext dt {clear: right; margin-top: 0.5rem; font-size: 1.1rem;}
#pagetext dd, #pagetext li {clear: right; padding-top: 0.5rem; background-color: #fff; padding: 0.2rem}
#altlink {margin-top: 0.2rem; margin-bottom: 0.2rem; padding: 0.2rem; width: 95%; max-width: 95%; text-align: left; clear: both; border: #003 0.1rem solid; background-color: #fff}

/*only used in elements/region2*/
#crumblinks {width: 100%; margin: 0 auto; text-align:left; height: 1.2rem; line-height: 1.2rem; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; background-color:#fff}
#crumblinks img {width: 25px; height: 25px; vertical-align: middle}
#crumblinks ul {float: left; margin: 0; margin-bottom: 0.2rem; padding-left: 0.5rem;}
#crumblinks ul li {float: left; padding-left: 0.1rem; padding-right: 2rem; display: block; text-align: left; font-weight: bold; color: #003}
#crumblinks ul li a {font-weight: bold; color: #003}
#crumblinks ul li a:hover {text-decoration: underline; color: #003}
#crumblinks ul li.child:before {padding-left: 0.5rem; content: "\3E \ "}

.prod {margin: 0.5rem}

.productlink {width: 48%; float: left; margin-left: 1%; margin-bottom: 2rem; border: solid 0.2rem #fff; border-radius: 0.3rem; background-size: 100%; background-repeat: no-repeat; overflow: hidden; position: relative; background-color: #b9d3ee; height: 16rem}
.productlink h2 {float: left; color: #003; clear: both}
.productback {clear: both; width: 100%; height: inherit; background:none; background-color: #b9d3ee}
.productback li {font-size: 0.9rem; margin-left: 1rem}
.producttext {clear: both; width: 100%; padding: 0.5rem; float: left; height: inherit; font-size: 1.2rem}
.producttext p {clear: both; margin-bottom: 1rem; width: 95%}
.producttext i {font-weight: bold; font-style: italic; color: #69c}
.productterms {position: absolute; left: 0.2rem; bottom: 0.2rem}
.productquote {/*clear: both;*/ position: absolute; right: 0.2rem; bottom: 0.2rem; font-size: 1.5rem; border: solid 0.1rem #fff; border-radius: 0.3rem; background-color: #b9d3ee; color: #003}
.productquote a {color: #003; padding: 0.1rem}
li.productquote {clear: both; font-size: 1.5rem; border: solid 0.1rem #fff; border-radius: 0.3rem; color: #003}

/*only used on WWpartnerlogin.php */
.button {border: 0.1rem solid #003; padding: 0.2rem; font-weight: bold; background-color: #fff}
.button a {color: #003}

.quoteform {clear: both; margin: 1rem; padding: 0.2rem; display: block; overflow: auto; border:#b9d3ee solid 0.2rem; border-radius: 0.3rem; background-color:#d6eaf8; color: #000;}
#pagetext-wrapper .quoteform .header {float: left; color: #000;}
.quoteform .col2 {position: relative;clear:both;float: left; min-width:300px}
.quoteform .col2 label {clear: both; float: left; width: 140px; line-height: 1.8rem; padding-left: 2rem}
.quoteform .col2 input, .quoteform .col2 select {float: right; clear: right; line-height: 1.8rem; width: 120px; padding-right: 2rem;}
.quoteform .col2 input {width: 20px; margin-right:100px;}
.quoteform .col22 {position: relative;clear:both;float: left; min-width:250px}
.quoteform .col22 label {clear: both; float: left; width: 100px; line-height: 20px; padding-left:15px}
.quoteform .col22 input, .quoteform .col22 select {float: right; clear:right; line-height: 20px; width: 80px;padding-right:15px;}
.quoteform .col22 input {width: 20px; margin-right:80px;}
.quoteform p {color: #000; text-align:left }
.quoteform p.small {font-size: 0.8rem }
.quoteform h2,.quoteform h3 {color: #000; font-size: 1rem;text-align:left }
.quoteform #areaTravel {margin-top: 1rem}
.quoteimg {float: left; clear: left; width: 20%}
.quoteimg img {width: 100px; height: 100px; padding: 0; margin: 0 auto; border: solid 0.2rem #003; border-radius: 0.3rem}
.quotetext {float: left; width: 75%} 

#buy {margin: 1rem;  padding: 0.1rem; position: relative; width: 95%; max-width: 95%; clear: both; height: 2rem}
.quotebutton {width:80px; height: 40px; float: right; clear: right; text-align: left; padding-left: 30px; padding-top: 5px; position: relative; right: 15px; left: 25px; top: 0rem}
.quotebutton li a, .quotebutton a {width: 50px; height: 40px; position: absolute; top: 0; left: 0; display: block; padding-left: 30px; padding-top: 5px; font-weight: bold}
*.quotebutton {background-image:url(../images/buttonquote.png); background-repeat: no-repeat; font-weight: bold}

.quoterequest {position: absolute; right: 0.2rem; bottom: 0.2rem; font-size: 1.5rem; border: solid 0.2rem #fff; border-radius: 0.3rem; background-color: #b9d3ee; color: #003; box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.5)}
.quoterequest a {color: #003; padding: 0.4rem; margin: 0 auto}

/*need to style quotebutton similar to productquote
.productquote { position: absolute; right: 0.2rem; bottom: 0.2rem; font-size: 1.5rem; border: solid 0.1rem #fff; border-radius: 0.3rem; background-color: #b9d3ee; color: #003}
.productquote a {color: #003; padding: 0.1rem}
li.productquote {clear: both; font-size: 1.5rem; border: solid 0.1rem #FFF; border-radius: 0.3rem; color: #003}
*/

/*this seems overboard but doesnt work otherwise so ive left it like this for now*/
.selectElement {margin-bottom: 0.3rem; margin-top: 0.5rem}
ol .explanatoryText li {display: none}
ol .explanatoryText li.descriptor {display: list-item; margin-top: 0.5rem; padding-left: 0.5rem; font-size: 0.8rem; line-height: 1rem; list-style-type: none}
ol.explanatoryText li {display: none;}
ol.explanatoryText li.descriptor {display: list-item;}

#topmenusection {margin: -10px -10px 10px -10px;padding: 5px 0 5px 10px;border-bottom: 0.2rem solid #666; font-size: 1.1rem}

.infopop, selectpop {margin: 0rem 0.9rem 0rem 0.1rem;  padding: 0.1rem; border: 0.1rem solid #666633; background-color: #fff; display: none; position: relative; width: 98%; max-width: 98%; float: left}
.infopop dl dt {padding-left: 0.2rem; clear: right; color: #69c; font-size: 0.9rem}
.infopop dl dd {padding-left: 0.2rem; padding-bottom: 0.5rem; clear: right; font-size: 0.9rem; border-bottom: 0.1rem solid #666633}
.infopop dl dd.last {border-bottom: 0}
.infopop li {font-size: 0.9rem; list-style-type: none; list-style-position: inside; padding-left: 0.2rem}
.infopop #buy li{list-style-type: none}
	
#column-head {width: 100%; max-width: 100%; line-height: 2.5rem; text-align: center; margin: 0 auto; background-color: #b0c4de; font-weight: bold}

#midmenu-wrapper {width: 100%; max-width: 100%}
#midmenu {width: 100%; max-width: 100%; text-align: left; float:left; margin: 0.2rem}

#info {margin: 0px 10px 0px 5px;  display: none;}
.infoHeader {float: left; position: absolute; left: 0; color: #69c;}
.infoDetail {float: left; position: relative; left: 50px; margin-left: 10px}

/*only used in content/testFormSnippet.html so could delete?*/
.infoClose {float: right; position: relative; bottom: 1rem; color: #f90; font-size: 0.8rem; font-weight: bold; line-height: 0.9rem; margin-bottom: 0.2rem}

.cover dt {font-weight: bold; float: left; clear: left; width: 55%}
.cover dd .head {font-weight: bold}
.cover dd {float: left; width: 15%}

#datepicker {display: none; font-size: 0.8rem}

.supportimage {float: left; width: 50px; height: 50px}

/*look at the following, are so many variations needed? col1 & 2 used in info pages*/
.col1, .col2 {clear: both; margin-bottom: 2rem; margin-left: 0 auto; margin-right: 0 auto; padding-left: 1rem}
.col1 ul, .col2 ul, .col1 dl {width: 100%; line-height: 1.5rem;}
.col1 ul li, .col1 dl dd {padding-bottom: 2rem}
.col1 ul.bulletlist li {padding-bottom: 0rem; list-style-type: disc}
.col1 p, .col2 p {padding-bottom: 1rem}
.col1 a img, .col2 a img {float:left}
.col2 ul li {width: 50%; float: left; padding-bottom: 2rem}
.col2 ul li + li {width: 45%; float: left; padding-bottom: 2rem}
.col2 ul li.split {border-left: 0.1rem solid #666633; padding-left: 0.2rem}
.col2 dl {width: 100%; line-height: 1.5rem; padding: 0.5rem}
.col2 dt {width: 30%; float: left; clear: left; text-align: right}
.col2 dd {width: 70%; float: left; text-align: left; clear: right}
.col2 h2 {line-height: 1rem; padding: 0.1rem; margin-top: 0.2rem; margin-bottom: 0.2rem }

/*grid7 used in driving distances*/
.grid7 {width: 100%; background-color: #FFF; padding: 1rem}
.grid7 tr td {width: 14%; float: left; clear: none; text-align:left}
.grid7 td {border-bottom: solid 0.1rem #ccc}
.grid7 td.colx {border-right: solid o.1rem #ccc}

/*box is a third
box1 is full width - replaced by infobox*/
/*.box1 {clear: both; margin-bottom: 2rem; margin-left: 0 auto; margin-right: 0 auto;}
.box1 ul {list-style-type:disc; list-style-position: inside; margin: 1rem 0 1rem 0}
.box1 * {padding-left: 1rem}
.box1 {background: #dcdcdc; border-radius: 0.5rem; /*padding: 1rem;*/ /*border: 0.2rem #777 solid}*/

.box, .altprod {text-align: center}
.box ul, .altprod ul {width: 100%; margin: auto; text-align: center; clear: both}
.box li {display: inline-block; vertical-align:top; margin: 1rem 1rem 1rem 0; padding: 1rem 0.5rem 1rem 0.5rem; width: 28%; height: 10rem; /*float: left;*/ background: #dcdcdc; border-radius: 0.5rem; /*padding: 1rem;*/ border: 0.2rem #777 solid}
.box ol {list-style-type:disc; list-style-position: inside; margin: 1rem 0 1rem 0}
.altprod li {display: inline-block; /*vertical-align:top;*/ margin: 1rem 1rem 1rem 0; padding: 1rem 0.5rem 1rem 0.5rem; width: 30%; /*float: left; /*background: #dcdcdc;*/ border-radius: 0.5rem; border: 0.2rem #777 solid; height: 10rem; font-weight: bold; color:#fff; text-align: left}
.altprod li a h4 {font-weight: bold; color:#fff; font-size: 1.4rem;
 -webkit-text-stroke: 1px #003;
   color: white;
   text-shadow:
       3px 3px 0 #003,
     -1px -1px 0 #003,  
      1px -1px 0 #003,
      -1px 1px 0 #003,
       1px 1px 0 #003;}
.altprod li a {font-weight: bold; color:#fff}
.altprod li.SN {background:url(../images/img-SN-med2.jpg); background-size: 100%; background-repeat: no-repeat; background-position: center}
.altprod li.LS {background:url(../images/img-LS-sm.jpg); background-size: 100%; background-repeat: no-repeat; background-position: center}
.altprod li.AN {background:url(../images/img-AN-sm.jpg); background-size: 100%; background-repeat: no-repeat; background-position: center}
.altprod li.MER {background:url(../images/img-MER-sm.jpg); background-size: 100%; background-repeat: no-repeat; background-position: center}
.altprod li.RENT {background:url(../images/img-CAR-sm.jpg); background-size: 100%; background-repeat: no-repeat; background-position: center}

.infobox {clear: both; margin: 0.5rem 0 0.5rem 0; background: #dcdcdc; border-radius: 0.3rem; border: 0.1rem #777 solid; padding: 0.2rem; font-size: 0.8rem; box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.5)}
.infobox ol {list-style-type:none; list-style-position: inside; /*margin: 0.5rem*/}
.infobox li {margin: 0.3rem 0 0 0}
/*.infobox {font-size: 0.7rem}*/
.infobox.highlight {font-size: 1.4rem; font-weight: bold}

.table4, .tablesub {width: 100%; border: 0.2rem solid #666; margin-bottom: 0.5rem; background: #fff}
/*.quote doesnt seem to be used anywhere else*/
.table4.quote td.colx {width: 55%}
.table4.quote td.colx.split1 {width: 35%}
.table4.quote td.colx.split2 {width: 20%}
.table4.quote td {width: 15%}
.table4.quote thead {font-weight: bold; text-align: center; font-size: 1.2rem}
.table4.quote thead tr {line-height: 1.5rem; vertical-align: top}
.table4 thead tr.head {background-color: #003; color: #FFF}
.table4.quote thead tr.sub,
.table4.quote tbody tr {border-top: 0.1rem solid #777; line-height: 1.5rem}
.table4.quote tr.subinfo {border: none; line-height: 1rem}
.quote h2 {clear: both; font-size: 0.9rem}
.tablesub td.colx {width: 70%}
.table4.buyit td.colx {width: 40%}
.table4.buyit td {width: 20%}
.table4.buyit dt {float: left; margin: 0 auto; clear: left}
.table4.buyit .head {margin-top: 2rem}
.prices dl {width: 100%; display: table}
.prices dl dt {display: table-row; padding-left: 0.2rem}
.prices dl dd {display: table-column-group}

.table4 td {padding: 0.2rem}
.table4 dt {font-weight: bold}
.table4 dd {border-bottom: solid 0.1rem #ccc}
.table4.colx {font-weight: bold}
.colx alink {color: #F90}
.table4 thead td.colx {text-align:left}

.table4 .optionA, .tablesub.optionA {background-color: #f5f5f5; text-align: center}
.table4 .optionB, .tablesub.optionB {background-color: #dcdcdc; text-align: center}
.table4 .optionC, .tablesub.optionC {background-color: #ccc; text-align: center}
.table4 .optionD, .tablesub.optionD {background-color: #B0B0B0; text-align: center}

.table4.list {border: none}
.table4.list dl {float: left; width: 25%; background-color: #FFF}
.table4.list dl dd {display: block; margin: 0;}
/*other than in table4, .list is only used in elements/guidelines.php*/
.list ul li {list-style-type: disc}
.list dl dt {font-weight: bold}
.list dl dd.last {margin-bottom: 1rem}

.parentrow .colx a:hover {text-decoration: underline}
.subrow {background-color: #666; color: #fff}
.subrow .table4 {color: #003}

.order {background-color: #fff; margin-bottom:15px; padding: 10px; border: 0.2rem solid #666; font-size: 1.1rem}
.order ul {margin-top: 1rem}
.order li {margin-bottom: 0.5rem}
.order table {margin-left: 30%}
.order table.health, .order table.policytype {margin-left: 0%}
.order table td {padding-right: 1rem; vertical-align:top}
.order.row dl {float: left; display: block}
.order table tr.spacerRow {height: 18px;}

/*Used on final Payment page*/
.payment p {margin-bottom:10px;}
form#ccdetails {text-align:center; border: 0.5rem solid #003}

/*Used on Accept Medical Exclusion page*/
.declaremedical ol {padding-left:25px;}

#activitiesLists h2 {clear:left;}
.split-list {list-style-type:none; width:30%; float:left; margin:0 2rem 2rem 0}
.split-list li {width:100%; padding:0.1rem; background-color: #dcdcdc; font-size: 0.9rem; /*border: solid #fff 0.1rem;*/margin: 0.2rem 0 0.2rem 0}


/*only used in elements/claims.php */
.claims {clear: both; margin-bottom: 2rem; margin-left: 0 auto; margin-right: 0 auto; background-color: #fff; padding-left: 1rem; overflow: auto}
.claimsinfo {display: block}
.claimsinfo dl {width: 48%; float: left; margin-right: 1%; margin-bottom: 1rem}
.claimsinfo dt {line-height: 1.5rem; bottom-border: 0.1rem solid #666633; font-weight: bold; font-size: 1.2rem}
.claimsinfo dd {line-height: 1.5rem; padding-left: 0.2rem}
.claimsinfo .current {font-weight: bold; background-color: #CCC}
.claims h2 {clear: both; margin-top: 1rem; font-size: 2rem; color: #369}
.claims h3 {clear: both;}
.claims.head {margin-top: 1rem}
/*info also used on claims page*/
.info {float: left; width: 100%; clear: both}
.info dt {float: left; width: 20%; margin-bottom: 0.5rem; font-weight: bold}
.info dd {float: left; width: 75%; clear: right; margin-bottom: 0.5rem}
.info h3 {font-size: 1rem; margin-top: 0.8rem; font-weight: bold}

#questions {background-color: #fff; margin: 0.5rem; padding: 0.5rem; border: solid 0.2rem #003}
#questions ol {list-style-type: none}
/*class="questions" only used in cookie-policy.htm*/
.questions {clear: both; margin-top: 1rem}
.questions ol  {margin-left: 1rem; list-style-position: outside; list-style-type:decimal}
.questions ol li {font-weight: bold}
.questions ol ol, .questions ul {margin-left: 2rem; list-style-position: outside; list-style-type:lower-roman}
.questions ol ol li, .questions ul li {font-weight: normal}

/*only used in international currency converter*/
.currency dt, .currency dd {float: left; margin-left: 0.2rem}
.currency {border: 0.2rem solid #003; padding-bottom: 1.5rem}
.currencyframe {padding-top: 1.5rem; padding-bottom: 1.5rem}

/*only used in addWWpartner.htm*/
.close {float: left; clear: both; margin-left: 0.2rem}

.message1, .message2 {display: none; font-weight: bold; color: red; border: 0.1rem solid #663; background-color: #fff; line-height: 1.5rem}

/*only used in worldwide-business-terms.htm */
.terms p {font-size:0.9rem}

.bullet {list-style-type: disc; list-style-position: inside; margin-bottom: 0.2rem}

textarea { color: #339;}
.note_small { font-size: 0.7rem; color: #F90;}

/*seem to be used in policydetailsNEW.php and ERIaWWcallback.htm, could delete?*/
.currentPage { color: #FEAE12;}
.toperror { text-align: center; color: red; font-weight: bold;}

#addressdetails label, #contactdetails label, #insureddetails label, #medicaldetails label, #socialCodeArea label {font-size: 1rem; font-weight:bold;}
#addressdetails label, #contactdetails label, #medicaldetails label, #socialCodeArea label {display: inline-block; width: 10rem; margin-right: 0.5rem;}
#insureddetails .formRow, #addressdetails .formRow, #contactdetails .formRow, #medicaldetails .formRow, #socialCodeArea .formRow {margin: 0.5rem auto;}
#insureddetails .multiinput label {width:auto;margin-right:0.8rem;}
#insureddetails .multiinput input {margin-right:/*40px*/3.5rem}
/* This is to allow the trailing note*/
#insureddetails input.datepickerPast, #traveldates input.datepicker {margin-right: 0.8rem; width: 5rem}

#traveldates .head p, #addressdetails .head p, #contactdetails .head p, #finaldetails .head p, #medicaldetails .head p { margin:0;padding:0;}
#traveldates .prompttext {font-size: 1rem; color:#003; font-weight: bold; margin-right: 0.8rem; margin-bottom: 1rem;}

#medicalqdetails .formRow p  {border-bottom: 0.1rem #999966 solid}

#centerlink {margin: 0.2rem 0.2rem 0.2rem 1%; padding: 0.2rem; float: left; width: 97.5%; max-width: 97.5%; text-align: left; clear: both; background-color: #fff}
#support1, #support2{margin: 0rem 0.2rem 0.2rem 0.2rem; float: left; width: 100%; max-width: 100%; clear: left; padding: 0.2rem; border: #996 0.1rem solid; background-color: #fff}

/*end mid section*/

/*info section*/
#info-column {width: 18%; float: left; clear: right; position: absolute; right: 0; text-align: center; overflow: hidden; margin: 1rem 0rem 0.2rem 0.1rem; font-weight: bold}
#info-column ul {margin: 0 auto; padding: 0; float: left; width: 100%; list-style-type: none; list-style-position: outside; text-align: left}
#info-column ul li {margin: 0.1rem 0.1rem 0.3rem 0.1rem; width: 100%; clear: right; line-height: 2.5rem; padding-left: 0.2rem; border: 0.2rem solid #b9d3ee; background-color: #d6eaf8; border-radius: 0.3rem 0 0 0.3rem} 
#info-column ul li a {font-weight: bold}
#info-column ul li a:hover {color:#999}
#info-column img {margin: 0 auto; display: block}
#tvad {margin-top: 0.2rem; padding: 0.2rem; float: left; width: 100%; max-width: 100%; text-align: left; clear: both; display: block; border: #003 0.1rem solid; background-color: #FFF}
#tvad img {width: 95%; margin: 0 auto}

/*#infolinks {width: 100%; margin: 0.2rem 0 0.2rem 0; background-color: #fff; display: block;}*/
#info-column #social ul {text-align: center; padding: 0.2rem 0 0 0; margin: 0.1rem 0.1rem 0.3rem 0.1rem; border: 0.2rem solid #b9d3ee; background-color: #d6eaf8; border-radius: 0.3rem 0 0 0.3rem}
#info-column #social ul li {margin: 0; width: 2.1rem; line-height: 0; padding-left: 0.1rem; border: 0; background-color: transparent; border-radius: 0; padding-right: 0.2rem; display: inline-block; vertical-align:top}
#info-column #social img {width: 2rem; height: 2rem}
#info-column #social .trustpilot-widget {text-align: center}

.feedback a {display:block; height:2.5rem; line-height: 2.5rem; width:100%; background-color: #d6eaf8; padding-left: 0.2rem; float:left; cursor:pointer; color:#003; font-weight:bold; text-align: left; margin: 0.1rem 0.1rem 0.3rem 0.1rem; border: 0.1rem solid #b9d3ee; border-radius: 0.3rem 0 0 0.3rem}
.feedback a:hover {color:#999}

.success {
  padding: 1rem;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #468847;
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.error {
  padding: 1em;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #b94a48;
  background-color: #f2dede;
  border: 1px solid rgba(185, 74, 72, 0.3);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

#ajax-contact {text-shadow:0 1px 0 #fff; -webkit-border-radius:4px; -moz-border-radius:4px; background:#F9F9F9; padding:25px; border-radius:4px; }
#ajax-contact h3 {color:#991D57; display:block; font-size:28px;}
#ajax-contact h4 {margin:5px 0 15px;	display:block; font-size:13px;}
#ajax-contact label span {cursor:pointer; color:#991D57;	display:block; margin:5px 0;	font-weight:900;}
#ajax-contact input[type="text"],
#ajax-contact input[type="email"],
#ajax-contact input[type="tel"],
#ajax-contact input[type="url"],
#ajax-contact textarea {width:100%; -webkit-box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF; -moz-box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF; box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF; border:1px solid #CCC; background:#FFF; margin:0 0 5px; padding:10px; border-radius:5px;}
#ajax-contact input[type="text"]:hover,
#ajax-contact input[type="email"]:hover,
#ajax-contact input[type="tel"]:hover,
#ajax-contact input[type="url"]:hover,
#ajax-contact textarea:hover {-webkit-transition:border-color 0.3s ease-in-out; -moz-transition:border-color 0.3s ease-in-out; transition:border-color 0.3s ease-in-out; border:1px solid #AAA;}
#ajax-contact textarea {height:/*100px*/8em; max-width:100%;}
#ajax-contact button[type="submit"] {cursor:pointer; width:100%;border:none;background:#991D57; background-image:linear-gradient(bottom, #8C1C50 0%, #991D57 52%); background-image:-moz-linear-gradient(bottom, #8C1C50 0%, #991D57 52%); background-image:-webkit-linear-gradient(bottom, #8C1C50 0%, #991D57 52%); color:#FFF; margin:0 0 5px; padding:10px; border-radius:5px;}
#ajax-contact button[type="submit"]:hover {
    background-image:linear-gradient(bottom, #9C215A 0%, #A82767 52%);
    background-image:-moz-linear-gradient(bottom, #9C215A 0%, #A82767 52%);
    background-image:-webkit-linear-gradient(bottom, #9C215A 0%, #A82767 52%);
    -webkit-transition:background 0.3s ease-in-out;
    -moz-transition:background 0.3s ease-in-out;
    transition:background-color 0.3s ease-in-out;
}
#ajax-contact button[type="submit"]:active {box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);}
#ajax-contact input:focus,
#ajax-contact textarea:focus {outline:0;	border:1px solid #999;}
::-webkit-input-placeholder {color:#888;}
:-moz-placeholder {color:#888;}
::-moz-placeholder {color:#888;}
:-ms-input-placeholder {color:#888;}

/*end info section*/




/*base section*/
#base-wrapper {width: 100%; max-width: 100%; overflow: hidden; position: relative; background-color: #f5f5f5; border-top: 0.4rem solid #003}
#basebody-content {width: 100%; margin-left: 0.2rem}
#base ul li {list-style-type: disc; padding-left: 0.2rem; padding-bottom: 0.5rem}
#base .centerlink {padding: 1rem}
#base .centerlink h1, #base .centerlink p {padding-bottom: 1rem}
/*prodlist*/
#prodlist {clear: both; display: block; position: relative; padding: 0 1rem 0 1rem}
#prodlist p {padding-bottom: 1rem}
#prodlist dl	{width: 25%; float: left; line-height: 1.5rem; margin-bottom: 2rem}
#prodlist dl dt {border-bottom: 0.1rem solid #663}
#prodlist dl dd {margin-left: 1rem; margin-bottom: 0.5rem; border-bottom: 0.1rem dotted #663}

#infolinks {width: 100%; margin: 0.2rem 0 0.2rem 0; background-color: #fff; display: block;}
#social ul {text-align: center; padding: 0.2rem 0 0 0}
#social ul li {padding-left: 0.1rem; padding-right: 0.5rem; display: inline-block; vertical-align:top}
#social img {width: 2.6rem; height: 2.6rem}
#social .trustpilot-widget {text-align: center}

#footer {margin: 0; float: left; clear: both; width: 100%; max-width: 100%; background-color: #003; color: #fff}
#footer-text {width: 98%;text-align: left; clear: both; padding-left: 1rem}
#footer-text p {margin-left: 0; margin-bottom: 1rem; clear: both}
.footer-info dl {margin-top: 1rem; font-size: 1.2rem}
.footer-info dt {clear:both; font-weight: bold}
.footer-info dd {clear:both; margin-left: 1rem; list-style-type: outside circle}
.footer-info dd a {color: #ccc}
.security dd {float: left}
#footer-head {width: 100%; background-color: #FFF; color: #003; padding-left: 1rem}
#footer-head img {vertical-align: middle}

/*only used in elements/footer.php*/
.endorse {float: right; margin-left: 0.5rem; margin-top: 0.5rem; background-color:#fff}

.pad {padding-left: 2rem; padding-top: 1rem; background-color: #fff}
.pad1, .padLeft {padding-left: 1rem}
.pad2, .padTop {padding-top: 1.5rem}
.padTopbig {padding-top: 3rem}
.padBottom {padding-bottom: 1.5rem}
.padAll {padding: 2rem}

/*used in international main pages*/
.indent {padding: 1rem 0 1rem 2rem} 
.indent li {list-style: disc outside none}

/*only used in WWpartnerlogin.php*/
.baseline {position: absolute; bottom: -4rem}

.assoc1 {display: none}

/*I don't think these are used anymore -only in policydetailsNEW*/
.deadTopLink { color: gray;}
.goodTopLink { color: navy;}

.gradient {
    background: none;
    background: -moz-linear-gradient(bottom,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(255,255,255,0)), color-stop(80%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    background: -o-linear-gradient(bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    background: -ms-linear-gradient(bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    background: linear-gradient(to top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}

.gradient2 {
	width: 100%; height: 100%;
    background: none;
    background: -moz-linear-gradient(bottom,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(255,255,255,0)), color-stop(80%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    background: -o-linear-gradient(bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    background: -ms-linear-gradient(bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    background: linear-gradient(to top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}

.opacity {background: rgb(255, 255, 255); background: rgba(255, 255, 255, .5); height: inherit}


/*@media only screen and (max-width: 499px) {
#top-wrapper {max-width: 100%}
/*#mainlinks-wrapper {/*height: 5rem;*/ /*overflow: auto}*/
/*#contents-wrapper {/*top: 9rem;*/ /*height: inherit; margin-top: 0.5rem}
#region {display: none}
}*/

@media only screen and (max-width: 800px) {
	
#top {height: auto}
#pageheader {width: 100%; max-width: 100%}
#pageheader .logo {width: 98%; max-width: 98%}
#intro .trustpilot-widget {display: none}
#region {display: none}
.devicehide {display: none}
.deviceshow {display: inline}
.gradient {background: none}

#cookie-law {line-height: 1.1rem}
#cookie-law p {padding: 0.5rem 0 0.5rem 0; width: 98%}
.close-cookie-banner {border: 0.1rem #fff solid; padding: 0.1rem}

#mainlinks-wrapper.fixed {position: relative}
/*#mainlinks-wrapper.fixed .nav-side {display: inline; vertical-align: middle; float: left;}
#mainlinks-wrapper.fixed #tel.scrollShow {display: none}*/

/*menu-list needed to show btn-label correctly - otherwise hides btn-label*/
.menu-list, .menu-list li ul {height: 0%; list-style: none; overflow: hidden; padding: 0; /*transition: all .3s;*/}
.menu-list li, .menu-list li ul li, .menu-list span.sublist li {width: 100%; height: auto}

#mainlinks-menu ul span.sublist {display: none; position: absolute; top: 2.5rem; left: auto; right: auto; width: 100%; margin-left: 0rem}
#mainlinks-menu li/*:hover*/ + span.sublist {position: relative; top: auto; left: 0rem; width: 100%}
/*#mainlinks-menu span.sublist li {left: auto; margin: 0; clear: left; width: 100%; padding-top: 0rem}*/


.invis {height: 0.1rem; left: -999rem; position: absolute; top: -999rem; visibility: hidden; width: 0.1rem; }
.nav-side {background: #003; color: #003; height: 2rem; left: 0; overflow: hidden; width: 2rem; z-index: 2}

.btn-label {display: block; height: 2rem; width: 2rem; position: absolute; top: 0; left: 0}
.btn-label .top { height: 0.2rem; background-color: #fff; position: absolute; top: 0.4rem; left: 0.2rem; right: 0.2rem;}
.btn-label .middle {height: 0.2rem; background-color: #fff;position: absolute;top: 0.9rem;left: 0.2rem;right: 0.2rem;}
.btn-label .bottom {height: 0.2rem;background-color: #fff;position: absolute;top: 1.4rem;left: 0.2rem;right: 0.2rem;}


#nav-expand:checked + .nav-side { height: auto; left: 0; width: 100%; position: inherit;}
#nav-expand:checked + .nav-side .close { display: block; color: #fff; font-size: 2rem}
#nav-expand:checked + .nav-side .menu-list {height: auto; width: 100%}
#nav-expand:checked + .nav-side .menu-list li ul {height: auto; width: 100%}
#nav-expand:checked + .nav-side .btn-label {display: none;}


#contents-wrapper {left: 0px; position: relative; transition: all .3s; }
#content-column, #content-column.gradient {width: 100%; padding-left: 0rem; margin: 0.2rem}
#item-wrapper, #pagetext-wrapper {float: left; clear: both; position: relative; left: 0%; overflow: hidden; width: 90%; max-width: 90%; padding-left: 0rem; margin: 0 5% 0 5%}
#item-wrapper.gradient {width: 90%}
#item-wrapper h1, #item-wrapper h2, #item-wrapper h3 {text-align: center}
#item-wrapper h1 {font-size: 1.5rem}
.quickquote {width: 95%}
#quicklinks ul {display: none}
.productlink {width: 95%; height: 16rem}
#centrelink {width: 95%}	

.altprod li {display: inline-block; /*vertical-align:top;*/ margin: 1rem 0rem 1rem 0rem; padding: 0rem; width: 100%; clear: both; border-radius: 0.2rem; color:#fff; text-align: center}
.altprod li span {display: block; width: 100%; background-color: #333}

/*#prodlist {display: none}*/
#prodlist {padding: 0 0.2rem 0 0.2rem}
#prodlist dl {width: 95%}
.endorse {display: none}
/*#item-wrapper, #pagetext-wrapper {margin: 0 5% 0 5%}*/

#quotebody {width: 98%}
.table4, .table7 {width: 100%}
.table4.quote thead td.colx {display: none}
.table4.quote tbody td.colx {column-span: all}
.table4.colx {font-weight: normal}
.table4.colx a {text-decoration: underline}
.table4.subinfo td.colx {width: 60%}
.quoteform {width: 95%}
.quoteform select {width: 98%}
.quoterequest {position: relative; margin: 0 auto}
.benefits {width: 100%; margin: 0 auto;}
#questions {width: 95%}
#questions select {max-width: 95%}
#info-column {width: 100%; position: inherit}
#info-column ul li, .feedback a {width: 90%; margin-left: 5%; margin-bottom: 0.2rem; /*padding-left: 0.5rem;*/ border-radius: 0.2rem; text-align: center}
#tvad {width: 90%; margin: 0 auto;}
big {font-size: 1rem}
.padAll {padding: 0.1rem 0.2rem 0.3rem 0.2rem}

#addressdetails label, #contactdetails label, #medicaldetails label { width: 90%;}
input[type=text], input[type=button] {width:95%; margin: 0 auto}

.infobox {font-size: 0.7rem}
.box li {margin: 1rem 1rem 1rem 0; padding: 1rem 0.5rem 1rem 0.5rem; width: 90%; float: left; clear: both}

#social {margin: 0 auto}
#social .trustpilot-widget {clear: left; margin: 0 auto}
#footer-head, #footer-text {padding: 0 0.2rem 0 0.2rem}
.security {padding: 0 0 0.5rem 0.2rem}
}