#mapLocationsList{ width:280px; list-style:none; margin:0 px	; float:left ; padding: 0 0 0 0}
#mapLocationsList li{
	display:block;
	clear:both;
	margin:0
} 
#mapLocationsList li p{
height:26px; line-height:26px;
margin:5px 0;
	display:block;
	padding:0px 0 0 16px;
 background-image:url(../images/icons/arrowRGray.png);
 background-repeat:no-repeat;
 background-position:2px 6px;
	font-size:1em;
	border-bottom:1px dotted #e1e1e1;
	cursor:pointer;
	color:#333;
	font-weight:normal
} 
#mapLocationsList li p:hover, #mapLocationsList li p.activeLink { background-color:#f1f1f1}

 .mobile #mapLocationsList ,
 .mobile #mapLocationsList li{  width:100%;}
 .mobile #mapLocationsList li p{ min-height:30px; font-size:1.1em}



/*  map and details */ 
#mapWrapper{	width: 700px;
	margin:0 auto; height:2600px;
 float:right; }
 
#mainMapWrapper{ position: relative; height:1166px;; overflow:hidden }
#londonMapWrapper { position: relative; height:475px; overflow:hidden }

#mapWrapper li   {
text-align:left;
list-style:none;
margin:0;
padding:0;
z-index: 0
} 
#mapWrapper li.mapHighlights{ position:absolute; left:0; top:0; z-index:20000; display:none }

#mapAreas map, img.map, map area{    outline: none; border:none;  }
#outerArea, map #outerArea{ cursor: default}
 
#scottish-highlands{ border:2px solid}  
 
 
.popUpBox{
width:400px; max-width:95%;
border:5px solid #ccc;
padding:10px 6px;
z-index:1000;
background:#fff;
border-radius:4px;
/*position:absolute; margin:6px 0 0 -125px;*/
position: fixed;
margin-left: -150px;
top:25%;
left:50%;
}	 

.popUpBox .popUpBoxCloser{
display:inline-block;
height:22px;
width:22px;
float:right;
background-color:#ccc;
cursor:pointer;
background-image:url(../images/icons/deleteWhite.png);
background-position:50% 50%;
background-repeat:no-repeat;
}

.popUpBox .popUpBoxCloser:hover{  background-color:#333;}

.popUpBox p { margin:2px 0 2px 0; padding:2px 6px; }
.popUpBox strong{ display:block; font-size:1.1em;}


.mobile #mapWrapper{ display:none}

/* multi select eds */
.popUpBox input[type=radio]{ position:absolute; left:-2000px}
.popUpBox input[type=radio] + label { margin:8px 0; padding:0px 0;display:block; clear:both; cursor:pointer;color:#006699; font-size:16px; }


.popUpBox input[type=radio] + label span{ 
display:inline-block; float:left;
border:2px solid #999;
width:20px;
height:20px;
margin: 0 6px 0 4px;
background-position:50% 50%;
background-image:none;
background-color:#fff;
background-repeat:no-repeat;
transition:all 0.1s ease-in-out; 
border-radius:2px; }

.popUpBox  input[type=checkbox]:checked + label ,
.popUpBox  input[type=radio]:checked + label  { color:#759C00; } 


.popUpBox  input[type=checkbox]:checked + label span,
.popUpBox  input[type=radio]:checked + label span {
background-image: url(../images/checked.png);
border-color:#777;
}

.popUpBox input[type=radio] + label strong{ display:inline-block; margin:0; padding:2px 0 0 0; float:left; max-width:85% } 
.popUpBox input[type=radio] + label:hover strong{ text-decoration:underline;color:#006699;}
.popUpBox hr{ display:block; width:100%; margin:0; padding:0; background:none; border:none; clear:both}

/* eo  multi select eds */

#numStudentSelectForm{ border:4px solid #e1e1e1; display: inline-block; padding:   10px;}
#numStudentsDD{height:36px; line-height:36px; display:inline-block; white-space: nowrap} 
#numStudentsBtn{ height:36px; line-height:36px; display:inline-block; white-space: nowrap}




#flowChart   { 
	padding:0; margin:0; list-style:none;
	font-size:15px;
	font-family:Arial, Helvetica, sans-serif; color:#666666;
}

#beginnerQ,#experiencedQ, #advancedQ , #privateQ {
font-size:1em;
color: #7C3E7C;
font-weight:bold;
cursor:pointer;
display: inline-block;
padding:12px 0px  12px  18px;
background-image:url(../images/icons/arrowRGray.png);
background-repeat:no-repeat;
background-position:calc(100% - 15px) 50%;
margin:10px 0 10px 20px;
border:1px solid #7C3E7C;
background-color:#FFFFFF;
width:180px;
text-align:left;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

#beginnerQ{ margin-left:0} 

.mobile #beginnerQ,
.mobile #experiencedQ ,
.mobile #advancedQ , 
.mobile #privateQ {
clear:both; width: 100%; max-width:350px; display:block; padding: 14px 15px; margin:10px 0 10px 0 ;
}

 
#beginnerQ.selected,
#experiencedQ.selected, 
#advancedQ.selected, #privateQ.selected{ color:#fff; background-color:#7C3E7C ;border-color:#7C3E7C; background-image:url(../images/icons/arrowRwhite.png)}

#beginnerSection ,
#experiencedSection { /*manual display none */ }

.courseSections{
  /*manual display none */
border:3px solid #7C3E7C;
padding:10px 10px 5px 14px;
margin:5px auto 15px auto; border-radius:3px;
}

/*course openers */  
#flowChart h2{
font-size:1.1em;
font-weight:bold;
color:#0066CC;
margin:6px 0 4px 0;
padding:1px 0 0 20px;
text-decoration:none;
text-transform: none;
cursor: pointer;
background-image:url(../images/icons/arrowRGrayThin.png);
background-repeat:no-repeat;
background-position:2px  4px;
min-height:20px;
}  
#flowChart h2:hover{ text-decoration:underline}
#flowChart h2.selected{ color:#003366;  }


/*course sub section openers */  
#flowChart h3{
 font-size:1.2em;
 font-weight:bold;
 color: #666666;
 margin:25px 0 5px 0;
 padding:0;
 text-decoration:none;
 text-transform: capitalize;
 cursor: pointer;
}  

#flowChart  p{ position:relative; margin:5px auto; padding:0} 

#flowChart  p#optionals1, #flowChart  p#optionals2{ color:#e1e1e1; padding-top:6px} /* optional extras, */
#flowChart  p#optionals1.optionalON, #flowChart  p#optionals2.optionalON{ color: #333}

#flowChart  input[type=radio] ,
#flowChart  input[type=checkbox]  { position:absolute; right:10000px; top:0px;}
		

#flowChart  input[type=radio]  + label ,		
#flowChart  input[type=checkbox]  + label { /* links to checkboxes fonts in screen/ mobile setttings */
 text-align:left;
 display:block;
 min-height:24px;
 margin: 4px  0 4px  0px;
 display:	block;
 padding: 3px  0 0 30px;
 background-image:url(../images/checkBoxOFF.png);
 background-position: left 0px;
 background-repeat:no-repeat;
 cursor:pointer;
 font-size: 0.95em;
 font-weight: normal;
 position: relative;
 color:#666666
 }

#flowChart  input[type=checkbox]:checked + label ,
#flowChart  input[type=radio]:checked + label {
 background-image:url(../images/checkBoxON_1.png);
 background-position: left 0px;
 color:#7C3E7C ;
 font-weight: normal
} 

#flowChart    input[type="checkbox"]:disabled + label  ,
#flowChart    input[type="radio"]:disabled + label {
 background-image:url(../images/checkBoxDISABLED.png);
 background-position: left 0px;
	font-weight: normal; 
 cursor:default
}    

#flowChart  input[type=checkbox]  + label  span ,
#flowChart  input[type=radio]  + label  span{ color:#333; font-weight:bold} /* num days*/

/* over ride colours for disabled*/
#flowChart    input[type="radio"]:disabled + label ,
#flowChart    input[type="radio"]:disabled + label span ,
#flowChart    input[type="radio"]:disabled + label strong,
#flowChart    input[type="checkbox"]:disabled + label ,
#flowChart    input[type="checkbox"]:disabled + label span,
#flowChart    input[type="checkbox"]:disabled + label  strong{	color:#ccc; }


#flowChart span.showFull {
display:inline-block;
color:#006699;
font-size:0.9em;
cursor:pointer;
font-weight: bold; 
padding: 0px  16px 0px 30px;
margin:0px 0 4px 0;
width:auto;
height:18px; line-height:18px; background-image:url(../images/icons/arrowDGray.png); background-position:right 50%; background-repeat:no-repeat;
 
} 

#flowChart span.showFullActive { background-image:url(../images/icons/arrowUgray.png) }


#flowChart .fullInfo{
border:3px solid #e1e1e1;
padding:10px;
margin:10px 20px 40px 30px;
display: none;
} 

span.resetLink{
display:block;
font-size:0.75em;
font-weight:bold;
text-align:right;
color:#CCCCCC;
text-transform: uppercase;
}
span.resetLinkACTIVE{ display:block;cursor:pointer; color:#003366; text-decoration:underline;}

form{ margin:10px auto; padding:0;}

#debug{ font-size:0.8em; font-weight:normal}

	
  
 
/* date selection */ 
 
 /*course name titles (product id) */  


#dateSelection h3{
font-size:1.1em;
font-weight:bold;
color: #333;
margin:0px 0 5px 0;
padding:0;
text-decoration:none;
text-transform: capitalize;
cursor: default;
}  


#dateSelection ul { margin:10px auto}

#dateSelection  ul p{ position:relative; margin:5px auto; padding:0} 

#dateSelection ul li  input[type=radio] ,
#dateSelection ul li  input[type=checkbox]  { position:absolute; right:10000px; top:0px;}
		

#dateSelection ul li  input[type=radio]  + label ,		
#dateSelection ul li input[type=checkbox]  + label { /* links to checkboxes fonts in screen/ mobile setttings */
 text-align:left;
 display:block;
 min-height:26px;
 margin: 4px  0 20px  0px;
 display:	block;
 padding: 0px  0 0 30px;
 background-image:url(../images/checkBoxOFF.png);
 background-position: left 0px;
 background-repeat:no-repeat;
 cursor:pointer;
 font-size:1em;
 font-weight: normal;
 position: relative;
 color:#666666
 }

#dateSelection ul li  input[type=checkbox]:checked + label ,
#dateSelection ul li  input[type=radio]:checked + label {
 background-image:url(../images/checkBoxON_1.png);
 background-position: left 0px;
 color:#749B00;
 font-weight: normal
} 

#dateSelection ul li    input[type="checkbox"]:disabled + label  ,
#dateSelection  ul li     input[type="radio"]:disabled + label {
 background-image:url(../images/checkBoxDISABLED.png);
 background-position: left 0px;
	font-weight: normal; 
 cursor:default;
 font-size:1em
 }


 #dateSelection ul li strong.spaces{ display:block; color:#7C3E7C; font-weight:bold; font-size:1em;padding: 0 0 2px 0}
 #dateSelection ul li strong.address{ display:block; color:#7C3E7C; font-weight:bold; font-size:1em;padding: 4px 0 0px 0}
 #dateSelection ul li span{ display:block; clear:both;font-size:1em;}
 #dateSelection ul li em{  display:inline-block; font-style:normal ; font-size:1em; }
 #dateSelection ul li em.dayNumber{ width:auto; min-width:58px;   font-weight: bold;}
 #dateSelection ul li em.dates{width;auto ;
min-width:240px;
font-weight:normal;
color: #000000;
}
 #dateSelection ul li em.times{ width:auto; min-width:160px; color:#666666}
 
 
/*  mobile  */
.mobile #dateSelection ul li { margin-bottom:15px;}
.mobile  #dateSelection ul li em.dayNumber{ width:auto; display:block; clear:both; padding-top:3px;}
.mobile  #dateSelection ul li em.dates{ width:auto; font-weight:bold}
.mobile  #dateSelection ul li em.times{ width:auto; color:#666666}






#kitSelection h3{
font-size:1.1em;
font-weight:bold;
color: #006699;
margin:0px 0 5px 0;
padding:0;
text-decoration:none;
text-transform: capitalize;
cursor: pointer;
}  



#kitSelection ul { margin:20px auto}

#kitSelection ul li { margin:0 0 20px 0}

#kitSelection  ul div { position:relative; margin:5px auto; padding:0}  /*wrapped in divs due to FULL descrption maybe having P tags */


#kitSelection .kitQTY{float:left; width:100px; font-size:0.8em; margin-right:10px;}

.mobile #kitSelection .kitQTY{ width:250px ; float: none; font-size:1em; margin:0 0 10px 0}
 

#kitSelection ul li strong.kitTitle{ display:block; font-size:1.1em; font-weight:bold}
#kitSelection ul li strong.price{ display:block; color:#ff0000; font-weight:bold; font-size:0.9em;padding: 0 0 0 0}
.mobile #kitSelection ul li strong.price{ display:block; clear:both; padding:10px auto}

 
#kitSelection span.showFull {
display:block; width:300px;
color:#006699;
font-size:0.9em;
cursor:pointer; text-transform:uppercase;
font-weight: bold; 
padding:  0px  0px 0  20px;
margin:6px 0 0 110px; 
height:20px; line-height:20px; background-image:url(../images/icons/arrowDGray.png); background-position:left 50%; background-repeat:no-repeat;
}

.mobile #kitSelection span.showFull { width:100%; clear:both;margin:5px auto 40px auto;} 

#kitSelection span.showFullActive { background-image:url(../images/icons/arrowUgray.png) }



#kitSelection ul li  input[type=radio] ,
#kitSelection ul li  input[type=checkbox]  { position:absolute; right:10000px; top:0px;}
		

#kitSelection ul li  input[type=radio]  + label ,		
#kitSelection ul li input[type=checkbox]  + label { /* links to checkboxes fonts in screen/ mobile setttings */
 text-align:left;
 display:block;
 min-height:26px;
 margin: 4px  0 0 0px  0px;
 display:	block;
 padding: 0px  0 0 110px;
 background-image:url(../images/checkBoxOFF.png);
 background-position: 40px 0px;
 background-repeat:no-repeat;
 cursor:pointer;
 font-size:1em;
 font-weight: normal;
 position: relative;
 color:#666666
 }

#kitSelection ul li  input[type=checkbox]:checked + label ,
#kitSelection ul li  input[type=radio]:checked + label {
 background-image:url(../images/checkBoxON_1.png);
 background-position: 40px 0px;
 color:#7C3E7C;
 font-weight: normal
} 

#kitSelection ul li    input[type="checkbox"]:disabled + label  ,
#kitSelection  ul li     input[type="radio"]:disabled + label {
 background-image:url(../images/checkBoxDISABLED.png);
 background-position: 40px 0px;
	font-weight: normal; 
 cursor:default;
 font-size:1em
 }

#kitSelection .fullInfo{
border:3px solid #e1e1e1;
padding:10px;
margin:10px 20px 40px  0px;
display: none;
} 

#kitSelection .fullInfo p,
#kitSelection .fullInfo em, 
#kitSelection .fullInfo ul, 
#kitSelection .fullInfo li{ margin:0; padding:2px 0; font-size:1em;}

 
#kitSelection .fullInfo .kitImage{ float:right; width:400px;  margin:0 0 0 15px;}
.mobile #kitSelection .fullInfo .kitImage{ float:none; width:100%;   margin:5px auto; display:block}
#kitSelection .fullInfo img{ width:100%;padding:10px; border:2px solid #e1e1e1; }


#kitSelection .fullInfo hr{ clear: both; background:none; border:0}  
 
/*  mobile  */
.mobile #kitSelection ul li { margin-bottom:15px;}




#basket{ position: relative; }
#basket ul  { margin-top:15px;}
#basket ul li { display:block; margin:10px 0 25px 0; padding:0; display:block; clear:both}
#basket ul li h2{
font-size:1.3em;
color:#989898;
font-weight:bold;
margin:10px 0 2px 0;
}

#basket ul li p { display:block; margin:0; padding:0; position:relative}
.mobile #basket ul li p { padding:5px 0  }
#basket ul li p strong.basketKitTitle   ,  #basket ul li a.basketKitTitle  { display:block; padding:6px 80px 0 0; font-weight:bold}/* STRONG for kit, A return link for shop products right pad for shop delete btn */
.mobile #basket ul li span{ display:block} /*voucher exempt stuff*/

#basket ul li p strong.address{ display:block; color:#7C3E7C; font-weight:bold; font-size:1em;padding: 4px 0 0px 0}

#basket input[type=radio] ,
#basket input[type=checkbox]  { position:absolute; right:10000px;  }
		

#basket  input[type=radio]  + label ,		
#basket input[type=checkbox]  + label { /* links to checkboxes fonts in screen/ mobile setttings */
 text-align:left;
 display:block;
 min-height:26px;
 margin: 0px  0 10px  0px;
 display:	block;
 padding: 2px  0 0 30px;
 background-image:url(../images/checkBoxOFF.png);
 background-position: left 0px;
 background-repeat:no-repeat;
 cursor:pointer;
 font-size:1em;
 font-weight: normal;
 position: relative;
 color:#666666
 }

#basket  input[type=checkbox]:checked + label ,
#basket  input[type=radio]:checked + label {
 background-image:url(../images/checkBoxON_1.png);
 background-position: left 0px;
 color:#7C3E7C;
 font-weight: normal
} 

#basket   input[type="checkbox"]:disabled + label  ,
#basket   input[type="radio"]:disabled + label {
background-image:url(../images/checkBoxDISABLED.png);
background-position: left 0px;
font-weight: normal; 
cursor:default;
color:#ccc; 
}

.exemptVchr, .includedVchr{display:block; font-size:0.9em; font-weight:bold; font-style: italic; }
.exemptVchr{ color:#999999; margin: 0 0 10px 0}
.includedVchr{ color:#769C00; margin: 0 0 10px 0}

/* in shop plugin*/
.changeShopQty{
float:right; display: block; margin:5px 8px 0 8px;
width:80px;font-size:14px;margin:5px 12px 0 15px;
height:30px;  border-radius:2px; border:2px solid #e1e1e1;
}
.mobile .changeShopQty{ height:50px; width:80px;  font-size:16px;}
 

.deleteShopProducts{
/*position:absolute; right:5px; top:5px;*/
float:right; display: block; margin-top:5px;
width:30px;
height:30px;line-height:30px;
background-color:#ff0000;
border-radius:2px; cursor:pointer;
text-align: center; background-image:url(../images/icons/deleteWhite.png); background-position:50% 50%; background-repeat:no-repeat
}
.deleteShopProducts:hover{ background-color:#333333}

.mobile .deleteShopProducts{ height:50px; width:50px; line-height:50px}


#basket #termsRow{ width:700px; float:left}
.mobile #basket #termsRow{ width:100%; float:none; display:block}
 

#basket #termsLabel{
color:#333;
font-size:0.9em;
font-weight:bold;
padding-top:4px; 
display:inline-block
}
#basket #termsLabel a{ color:#006699;font-weight:bold; text-decoration:underline }
.mobile #basket #termsLabel a{ display:block; clear:both}
#basket #termsLabel.termsErr{ color:#FF0000}

#student{ border:2px solid #ccc; width:250px; display:block}
#student.err { border-color:#FF0000}

#customerInfo{ text-align:left;  width:380px; float:left; padding: 10px 0 ;  } 
#customerInfo p{ text-align:left}





#totalsWrapper{
text-align:right;
text-align:right;
width:500px;
float:right;
padding: 10px 0;
} 
#totalsWrapper p{ text-align: right}

#totalsWrapper strong.totalLabels{ padding:0 5px 0 0;} 

.mobile #customerInfo, .mobile #totalsWrapper , 
.mobile #customerInfo p , .mobile #totalsWrapper p {
float:none; width:100%; clear:both; text-align:left} 

#basket hr{border-top:1px solid #e1e1e1; margin:6px auto   }
#basket hr.itemSep{ margin:10px auto }

/* voucher */
#voucherWrap{
 display:block;
 clear:both;
 text-align: right; 
 margin: 10px auto; 
 width:100%; 
}

.mobile #voucherWrap{ text-align:left; display:block; }
 
#voucherForm, 
form#voucherForm {  
 display:block; width:100%; 
 margin:0; padding:0;
 height:40px; line-height:40px; 
} 
#voucherForm, form#voucherForm p, 
#voucherForm, form#voucherForm div{ text-align:right; margin:0; padding:0;}

.mobile #voucherForm, .mobile form#voucherForm p, 
.mobile #voucherForm, .mobile form#voucherForm div{ text-align:left}
 

#checkoutForm{
display:block;
position:relative;
clear: both;
}

#basket #errMsg{
position:absolute;
top:100px;
left:50%;
background:#fff;
width:250px; margin-left:-125px;
padding:15px 30px;
border:4px solid #FF0000;
border-radius:5px;
background-color: #fff; z-index:1000;
}

.mobile #basket  #errMsg{  }
#basket #errMsg p{ margin:0 auto; padding:0; color:#333; font-size:1em; font-weight:bold; text-align:center}


#SELvoucher{
display:inline-block;
 border:2px solid; border-color: #7C3E7C;
 border-right:none;
 width:212px;
 height:40px; vertical-align:bottom;
 text-indent:5px;
 font-size: 0.75em; 
 }
#SELvoucher.SELvoucherError{ border-color:#FF0000}

#submitVoucher  , #voucherLoading  {
height:40px;
vertical-align:bottom;
width:40px;
display:inline-block;
text-align:center;
border:none;
color: #FFFFFF;
font-size:0.8em;
background-position:50% 50%;
background-color: #7C3E7C;
font-weight: bold;
cursor:pointer;
background-image: url(../images/icons/arrowRwhite.png); 
background-repeat:no-repeat; margin-left: -4px;
}


#submitVoucher.submitVoucherError{ background:#FF0000}

#voucherLoading{
background-image:url(../images/loading-spinner.gif);
background-color: #FFFFFF;
border:2px solid #7C3E7C; display:none
 }

#voucherError, #basket p#voucherError{ text-align:right; color:#FF0000; font-size:0.8em; display:block}
 
/* eo voucher */




/* over ride all diasbled span colours*/
ul li input[type="radio"]:disabled + label ,
ul li input[type="checkbox"]:disabled + label ,
ul li input[type="radio"]:disabled + label span ,
ul li input[type="checkbox"]:disabled + label span ,
ul li input[type="radio"]:disabled + label em,
ul li input[type="checkbox"]:disabled + label em,
ul li input[type="radio"]:disabled + label  strong,
ul li input[type="checkbox"]:disabled + label  strong,
ul li input[type="radio"]:disabled + label  strong.prices,
ul li input[type="checkbox"]:disabled + label  strong.prices { 	color:#ccc; }


a.signInLink{ color:#006699; font-weight:bold; font-size:0.9em;display:inline-block; padding-top:4px;}
strong.price{ display:inline-block; color:#ff0000; font-weight:bold; font-size:0.9em;padding: 0 0 0 0}

#buttonRow{ margin:15px auto; text-align:right; clear:both; border-top:3px solid #e1e1e1; padding-top:10px;} 

.mobile #buttonRow{ margin:20px auto; text-align:left; clear:both; border-top:3px solid #e1e1e1; padding-top:10px;} 

.resetButton{ float:left}


a.signInButton{
width:300px;
height:40px;
line-height:40px;
display:inline-block;
text-align:center;
font-size:0.8em;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
margin-top:10px;
clear: both;
color: #FFFFFF;
background-position:left -132px;
background-color: #95BB28; 
}
.mobile a.signInButton{ width:100%; max-width:400px; height:50px; line-height:50px;font-size:0.9em;
}
a.signInButton:hover{ background-color:#666666}


.mobile #selectButton , .mobile #paymentButton { width:100%; margin-top:10px; max-width:500px; height:44px;}
 


/* COLOUR PICKER summary page */
#validationWarning{ position:relative; height:0px; width:100%; margin:0 auto; z-index:100000;display:none }
#validationWarning p {
position:fixed;
width:300px;
left:50%;
top:30%;
border:4px solid #ff0000;
border-radius:5px;
text-align:center;
padding:20px;
margin: 0 0 0 -150px;
background-color:#fff;
z-index:100000;
font-size: 1.1em;

}

#coloursWrap{ margin:10px auto; }

#coloursheading{
font-size:1.1em;
font-weight:bold;
color: #006699;
margin:10px 0 5px 0;
padding:0;
text-decoration:none;
text-transform: none;
cursor: pointer;
}  
.colourSelection  { border:4px solid #e1e1e1; border-radius:4px; margin:0px auto; width:100%; padding:20px 10px; max-height:400px; overflow:auto;}

#basket .colourSelection  li , .colourSelection  li  { margin: 0; padding:0 ; width:33%; float:left;  clear:none;}
.mobile #basket .colourSelection  li , .mobile  .colourSelection  li  { margin: 0; padding:0 ; width:50%; float:left;  clear:none;}


p.colourHeaderLabel{ width:100%; clear:both; font-size:1em; font-weight:bold;}  


.colourSelection  li  input[type=radio] ,
.colourSelection  li  input[type=checkbox]  { position:absolute; right:10000px; top:0px;}
		
.colourSelection  li input[type=checkbox]  + label,
#basket .colourSelection  li  input[type=checkbox]  + label  { /* links to checkboxes fonts in screen/ mobile setttings */
 text-align:left;
 display:block;
 height:30px;
 margin: 0px  0 0 0px  0px; 
 padding: 0px 0px 0 30px;
 margin:0;
 background-image:url(../images/checkBoxOFF.png);
 background-position:  0px 0px;
 background-repeat:no-repeat;
 cursor:pointer;
 font-weight: normal;
 position: relative;
 } 
 		
.colourSelection  li input[type=checkbox]  + label span ,
#basket .colourSelection  li  input[type=checkbox]  + label span{
font-size:0.84em; color:#666666;
padding:5px 0 0 0;
display:block; width:95%; height:20px; 
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
 border:0px solid; 
 }

.colourSelection  li  input[type=checkbox]:checked + label ,
#basket .colourSelection  li  input[type=checkbox]:checked + label   {
 background-image:url(../images/checkBoxON_1.png);
 background-position:  0px 0px;
font-weight: normal
} 

 		
.colourSelection  li  input[type=checkbox]:checked + label  span,
#basket .colourSelection  li  input[type=checkbox]:checked span{ color:#7C3E7C;}



/*.colourSelection  li    input[type="checkbox"]:disabled + label  ,
.colourSelection  li     input[type="radio"]:disabled + label {
 background-image:url(../images/checkBoxDISABLED.png);
 background-position: 40px 0px;
	font-weight: normal; 
 cursor:default;
 font-size:1em
 }*/


#basket .colourSelection  li  hr ,.colourSelection  li   hr { margin:  0; padding:0 ;  clear:both;}

 
/*  mobile  */
.mobile .colourSelection  li { margin-bottom:15px;}

#shippingForm{ display:block; text-align:right; margin:0;border:2px solid #e1e1e1; padding:15px 15px 5px 15px; text-align:right; display:inline-block; margin:0 0 15px 0}
.mobile #shippingForm{ width:100%; max-width:600px; text-align:left}
#shippingForm h5{ display:block; text-align:right; font-size:14px; font-weight:bold; color:#000}
.mobile #shippingForm h5{  text-align:left;}

#basket  #shippingOptions{   text-align:right; display:block; margin:5px 0 0px 0; padding:0}
#basket  #shippingOptions li, #shippingOptions li { margin:0px 0; padding:0 ; min-height:30px; clear:both } 
.mobile #basket  #shippingOptions li,  .mobile #shippingOptions li { margin:0px 0; padding:0 ; min-height:50px;  text-align: left } 

#basket  #shippingOptions input[type=radio]  + label { text-align:right; background:none; margin:0px 0; padding:0 ; width:100%; clear:both }
#basket  #shippingOptions input[type=radio]:checked + label   {background:none;} 

#shippingOptions input[type=radio] + label  strong { font-size:16px;	display:inline-block; padding: 2px 10px 0 0 ;}
#shippingOptions input[type=radio] + label span{ float:right;   width:20px; height:20px; display:inline-block; border:1px solid #888; background-position:50% 50%; background-repeat:no-repeat}

.mobile  #shippingOptions input[type=radio] + label  strong { float:left; padding: 2px  0 0 10px; font-size:18px;display:block; text-align:left;  } 

@media screen and (orientation:portrait) { .mobile  #shippingOptions input[type=radio] + label  strong { max-width:80%; }  }
.mobile  #shippingOptions input[type=radio] + label span{ float: left}

#shippingOptions input[type=radio]:checked + label  span { background-image:url(../images/icons/tickGreen.png)}