html, body { 
    border:none;
	height:100%; 
	margin:0px; 
	padding:0px;
	} 
	
body { 
	background:#FFFFFF;
	} 


/*error text on bookings page */	

.error_heading {
	font-size:0.9em;
	color:#F5B45D ;
	text-align:center
}

.error_content {
	font-size:0.8em; 
	font-weight:normal; 
	text-align:left; 
	padding-left:5px;
}

div.datePicker {
min-width:280px;
	min-height:440px;
	max-width:960px;
	max-height:1024px;
	margin:auto;
	
}

#header_overlay{ 
	width:100%;
		
}

.header_bar_spacer{
	
	}

/* front selection screen */	
div.datePicker .service_name {
	color:#000;


	font-size:12px;
	line-height:14px;
	padding-top:5px; 
	}

div.datePicker .months_name {
	color:#222;
 	font-size:0.9em;
	line-height:1.1em;
	padding-top:5px; 
	-moz-border-radius: 0.3em !important;
	-webkit-border-radius: 0.3em !important;
	border-radius: 0.3em !important;
	}

div.datePicker .times_name {
	color:#222;


	font-size:16px;
	line-height:18px;
	padding-top:5px; 
	}
	
div.datePicker .service_desc {
	color:#222; 
	font-weight: normal; 
	line-height:12px; 
	font-size:10px; 
	}

div.datePicker .service_price {
	color:#222;

	font-size:11px;
	font-weight:bold;
	line-height:16px;
	

	}

	
div.datePicker .link_text { 
	text-decoration:none ; 
		
	}
div.datePicker .link_text_home { 
	text-decoration:none ; 
			}
div.datePicker img { 
	border:none ; 
	
	}

div.datePicker .img { 
	border:none ; 
	
	margin-top:-14px;	}

div.datePicker {
	z-index: 9999;
	text-align: center;
	font: 900 0.8em/1em Verdana, Sans-Serif;
	background: transparent;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	*padding-top:5px;
}

/* login button */

.full_screen {
	display:block; 
	background:  url(../media/black_skin/full_screen.png)  ;
	
	position:absolute; 
	top:6px;
	right:64px;
	float:right;
	height:20px;
	width:56px;
	z-index:10005 ;
	}

.full_screen a{ display:block;	height:23px; width:60px;text-decoration:none;}



.login_button {
	display:block; 
	background: #222 url(../media/black_skin/clogin_button.png)  ;
	
	position:absolute; 
	top:6px;
	right:8px;
	float:right;
	height:20px;
	width:56px;
	z-index:10005 ;
	}

.login_button a{ display:block;	height:23px; width:60px;text-decoration:none;}

.loggedin_button {
	display:block; 
	position:absolute; 
	background: #222 url(../media/black_skin/copen_button.png) ;
	top:6px;
	right:58px;
	height:20px;
	width:56px;
	z-index:10005 ;
	}

.loggedin_button a{ display:block;	height:23px; width:60px;text-decoration:none;}


/* general css */	
div.datePicker table { 
	height: 100%;
	
	border-spacing: 0.4em;
	-webkit-border-horizontal-spacing: 0.5em;
	-webkit-border-vertical-spacing: 0.5em;
	-webkit-border-radius: 1em;
	-moz-border-radius:1em;
	border-radius:1em;
	border-collapse:separate;
	margin:auto;
	padding:0;
	text-align:center;
	width:100%;
	empty-cells:show;
	    }

div.datePicker table td,
div.datePicker table tbody th {
	border:0 none;
	padding:0;
	
	
	padding:0px 2px 0px 2px;
	vertical-align:middle;
	cursor:pointer;
	overflow:hidden;
	outline:transparent none 0px;
	border:1px solid #ddd;
	text-transform:none;
	-webkit-border-radius: 5px;
	-moz-border-radius:5px;
	border-radius:5px;


        }	


div.datePicker table tbody td { 
	background:none; 
	background-color:#EEEEEE ; 
	color: #000  ;


	}

	
div.datePicker table thead th {
	cursor:default !important; 
	padding-top:4px;
		padding-bottom:1px;
	padding-left:5px;
	padding-right:5px;
	line-height:16px;
	height:16px;
    font-weight:normal;
    color:#000;
	color: #000 ;
    text-align:left;
    vertical-align:bottom; 
    text-transform:none;        
    }

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color:#000 ;
  opacity: 1; /* Firefox */
}
	
div.datePicker tfoot th {
	background-color:#DDDDDD; 
	border: thin inset #ddd;
    cursor:default  !important;
    font-weight:normal;
    text-align:left;
    height:20px;
	line-height:20px;
	padding-left:5px;
	padding-right:5px;
	vertical-align:middle ;
	color: #000 ;
    }
	
div.datePicker thead th a {
	text-decoration:none ;
	color:#000;
	color: #000 ;
	}
		
.time-picker-title { 
	background:#FFF !important; 
		cursor:default;
	}

.time-picker-title-text { 
	padding-left:5px;
	font-size:14px; 
	text-align:left; 
	color:#000; 
	}
	
/* TD cell that is _not_ used to display a day of the month */

div.datePicker table tbody td.date-picker-unused {
    color:#ccc !important;
    font-style:oblique;
	background:#EEEEEE url(../media/backstripes.png)  ;
              
    cursor:default !important;
    }
	
/* The "disabled days" style */

div.datePicker table tbody td.day-disabled {  
        
    background:#EEEEEE url(../media/backstripes.png)  ;
    color:#222 !important;
    cursor:default;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    } 


div.datePicker table tbody td.day-disabled .service_name{          
     color:#222 !important;

	}

	span.day-disabled { 
	  text-decoration:line-through;
	}


.date-picker-hover:hover{
    background:#c1ebff ;
    cursor:pointer;
    border-color:#EEEEEE !important;
    -moz-box-shadow: 	3px 3px 3px #000;  -webkit-box-shadow: 3px 3px 3px #000;  box-shadow: 		3px 3px 3px #000;                     
    }	
	

.day-disabled:hover {
	background:#EEEEEE url(../media/backstripes.png)  ;
    border-color:rgb(128,0,0) !important;
	cursor:default;
}	

.month_days { 
	vertical-align:middle !important;
	height:26px !important; 
	background:#666 !important; 
	color:#FFF !important;
	cursor:default !important;
	-moz-border-radius: 0.3em !important;
	-webkit-border-radius: 0.3em !important;
	border-radius: 0.3em !important;
	
}


	
/* lOADING OVERLAY */
#header_overlay {
	display:block;
		
	position:absolute;
	top:0px;
	left:0px;
	height:2.4em !important;
	line-height:2.4em !important;
	width:100%;
	text-align:left;
	border-bottom: thin solid black;
	background:#FFF ; 
	color:#000;
	z-index: 10004;
}
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.8;
    z-index: 10000;
	vertical-align:middle;
	display:none;
	overflow:hidden;

	}

#overlay span {
	position: fixed;
	font:bold 1.2em tahoma;
	top:50%; left:50%;
	margin-top:-10px;
	margin-left:-140px;
	color:#333;
	width:280px;
	height:40px;
	line-height:40px;
	text-align:center;
	background-color:#FFF;
	background-opacity: 0.2;
	z-index: 10001;
	
	-webkit-border-radius: 0.4em;
	-moz-border-radius: 0.4em ;
	border-radius: 		0.4em ;
	}
    
#overlay_not_avail {
	display:block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.8;
    z-index: 10000;
	vertical-align:middle;
	overflow:hidden;
	

	}

#overlay_not_availContent {
	display:block;
	position: absolute;
	font:bold 1.1em tahoma;
	top:50%; left:50%;
	margin-top:-137px;
	margin-left:-152px;
	color:#333;
	width:280px;
	height:250px;
	line-height:25px;
	text-align:center;
	background-color:#FFF;
	z-index: 10001;
	-webkit-border-radius: 0.4em;
	-moz-border-radius: 0.4em ;
	border-radius: 		0.4em ;
	padding:10px;
	border:2px solid red;
	overflow:hidden;
	}

#overlay_not_availContent a {
	font:bold 1em tahoma;
	color:#F00;
	text-align:center;
	text-decoration:none;
	

	}
	
/* Booking Fields */


.booking_label {
	padding-left:2px !important; 
	padding-right: 2px !important;
	text-align:left;
	cursor:default !important ;
	color:#000 !important ;
	background:none !important;
	border:none !important;
	font-weight:normal !important;
	font-size:0.7em;



}



.booking_field {
		background-color:#ddd !important;
	border-color:#fff !important ;
		-webkit-border-radius: 0.4em !important;
		-moz-border-radius: 0.4em !important;
		border-radius: 	0.4em !important;
		width:55%;
		

}
.booking_field input { 
		display:block;
		width:100% ;
		vertical-align:middle;
		border:none;
		background:#ddd;
		color:#000 ;
		line-height:0.9em;
		font-size:0.9em;
		-webkit-appearance: none;
		padding-left:5px;
		height:100%;

		
}   

.booking_field textarea {
		display:block;
		width:100% ;
		vertical-align:middle;
		border:none;
		background:#ddd;
		color:#000 ;
		line-height:0.9em;
		font-size:0.9em;
		-webkit-appearance: none;
		

}




.h3_summary{ 
	font-size:0.8em;
	line-height:0.8em;
	margin-top:2px;
	margin-bottom:0px;
	line-height:1.0em;
	text-align:center;
	}

.option_summary{
	font-weight:normal; 
	font-size:0.8em; 
	line-height:1.3em;
}

.form_confirmnote{
		font-size:0.8em;
		line-height:1em;
		
		font-weight:normal; 
		text-align:left;
		
}

div.datePicker thead th a {
	font-size:0.8em;
}

.postcode{
	
	max-width:30px;
	padding:0px;
	text-align:right;
}

#statusbar a{
	    
    
    line-height: 1.4em;
}
#statusbar a:hover{
	color:red;
}


.booking_field.lookupVRM{ 

	float:right;
	vertical-align:center; 
	height:100%;
	width:35px;
	background-color:lightGrey;
	opacity:0.5;
	cursor:pointer;
	margin-right:-2px;
	
}
.booking_field .lookupVRM:hover{
	background-color:lightBlue !important;	
}


	div.datePicker .times_name {
		font-size:1.1em;
		line-height:1.1em;
		
	}
	div.datePicker .service_name {
		font-size:1.1em;
		line-height:1.1em;
	}	
	div.datePicker .service_desc {
		font-size:0.8em; 
		line-height:1.0em;
	}
	div.datePicker .service_price {
		font-size:0.8em; 
		line-height:1.2em;		
	}
	
div.datePicker .img {
	width:64px;
	height:49px;
}	

.acknowledge {
	font-size:0.6em;
	line-height:1em; 	
	font-weight:normal; 
	text-align:center; 
	cursor:pointer;	
	
	display:none;
}

	#header_overlay{ 
		font-size:0.8em;
		line-height:3.1em !important;
		height:3.1em !important;

	}	
@media all and (min-width:475px){
	
	div.datePicker .months_name {
		font-size:1em;
		line-height:1.2em;
	}
	
	#header_overlay{ 
		font-size:0.9em;
		line-height:2.8em !important;
		height:2.8em !important;

	}
	.acknowledge {
		font-size:0.6em; 
		font-weight:normal; 
		text-align:center; 
		cursor:pointer;	
		display:block;
	}
	
	.booking_label {
		font-size:0.9em;
	}
	
	.booking_field input { 
		font-size:1.0em;
		line-height:1.0em;
		
	}
	
	.booking_field textarea { 
		font-size:1.0em;
		line-height:1.0em;
		
	}
	
	.h3_summary{ 
		font-size:1em;
		line-height:1em;
	}
	
	.form_confirmnote{
		font-size:0.9em;
		line-height:1.1em;		
		
	}
	
	div.datePicker thead th a {
		font-size:1em;
	}
	
	.option_summary{
		font-weight:normal; 
		font-size:1.0em; 
		line-height:1.3em;
		width:120px;
	}
	.postcode{
		max-width:78px
	}
	
	div.datePicker .times_name {
		font-size:1.1em;
		line-height:1.1em;
		
	}
	div.datePicker .service_name {
		font-size:1.1em;
		line-height:1.1em;
	}	
	div.datePicker .service_desc {
		font-size:0.8em; 
		line-height:1.0em;
	}
	div.datePicker .service_price {
		font-size:0.9em; 
		line-height:1.2em;		
	}
	
	div.datePicker .img {
		width:85px;
		height:65px;
	}		
	

}

@media all and (min-width:640px){
	
	#statusbar a{
	    font-size: 1.2em;
		line-height: 1.6em;
	}

	#header_overlay{ 
		font-size:1.0em;
		line-height:2.5em !important;
		height:2.5em !important;

	}
	
	.booking_label {
		font-size:1.0em;
	}
	
	.booking_field input { 
		font-size:1.1em;
		line-height:1.2em;
		
	}
	
	.booking_field textarea { 
		font-size:1.1em;
		line-height:1.2em;
		
	}
	
	.h3_summary{ 
	font-size:1.2em;
	line-height:1.2em;
	}
	
	.form_confirmnote{
		font-size:0.9em;
		line-height:1.1em;	
		
	}
	
	div.datePicker thead th a {
		font-size:1.2em;
	}
	
	.option_summary{
		font-weight:normal; 
		font-size:1.0em; 
		line-height:1.3em;
		width:180px;
	}
	.postcode{
		max-width:60px
	}
	
	div.datePicker .times_name {
		font-size:1.2em;
		line-height:1.3em;
		
	}
	div.datePicker .service_name {
		font-size:1.2em;
		line-height:1.3em;
	}	
	div.datePicker .service_desc {
		font-size:0.9em; 
		line-height:1.1em;
	}
	div.datePicker .service_price {
		font-size:1.0em; 
		line-height:1.5em;		
	}

}


	
.booking_submit { 
	display:block;
	font-weight:bold;
	width:100%;
	margin:0;
	padding:0;
	height:1.8em;
	line-height:1.8em;
	background:#EEEEEE;
	color:#000;
	font-size:1.2em;
	text-align:center;
	border: 1px solid #EEEEEE ;
	cursor:pointer;
	-moz-border-radius: 0.3em ;
	-webkit-border-radius: 0.3em;
	border-radius: 		0.3em ;
	
	-webkit-appearance: none;
	text-decoration:none;
	
}

.booking_submit:hover { 
	background:#c1ebff;
	color: #000  ;
	border-color:#EEEEEE;
}
.sidebox { 
	vertical-align:top !important; 
	text-align:left;
	padding-left:4px  !important;
	padding-right:4px  !important; 
	cursor:default  !important;
	background: #ddd !important;
	-webkit-border-radius: 0.4em !important;
	-moz-border-radius: 0.4em !important;
	border-radius: 	0.4em !important;
		
}
.sidebox hr{ 
	border-top:thin solid #EEEEEE ;
	border-bottom:thin solid  ;
	opacity: 0.2;

}

.login_button2{
	display:block;
	float:right; 
	color:white;
	text-align:center;
	text-decoration:none; 
	width:60px;
	margin-top:0.5em;
	height:1.6em;
	line-height:1.6em;
	background-color:#999;

		border: thin solid black;
	
}

.login_button2:hover{
	color:white;
	text-decoration:none; 
	background-color:Grey;
}

.og_link{ 
text-decoration:none;
color:lightGrey;
}

.og_link:hover{ 
text-decoration:none;
color:lightGrey;
}