﻿<style type="text/css">

@import url('../travel-company-styles/travel-company-layout.css');
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,
big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,
fieldset,form,label,input,button,legend,table,caption,tbody,tfoot,thead,tr,th,
td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:18px;font-family:inherit;
vertical-align:baseline;}:focus{outline:0;}body{line-height:1;color:#000;background:#fff;}
ol,ul{list-style:none;}table{border-collapse:separate;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}

html 
body {
	background-position: center top;
	font-family: 'Open Sans';	font-size: 18px;
	background-color: #fff;
	margin: 0;
}
#bodybk {background-image: url('../images/pupils-passed-driving-test.jpg') ;  background-repeat: repeat; position: fixed; width: 100%; height: 100%; z-index: -10; }

.menufiller {display: none;}
/*menuline styles*/
.htmlscreen {overflow: hidden; padding: 0px; margin: 0px; background-repeat: repeat;	background-image: url('../images/menu-bk.gif');}
#menuwide{overflow: hidden;	width: 100%;	background-repeat: repeat;	background-image: url('../images/menu-bk.gif');	
	height: 60px;	top: 0px;z-index: 9999999;}
#menu {margin-left: auto;  margin-right: auto; width: 86%; max-width: 1200px; height: auto; overflow: visible; position: relative; z-index: 999; max-width: 1200px;}
#menumobile {display: none;}

 /*new menus */
#navigation{ width: 85%; left: 15%; height: auto; overflow: visible; position: relative; z-index: 999; max-width: 1200px;  z-index: 999;  font-family: 'open sans';   }
#navigation a {color:#000; font-size: 20px; height: 60px;	position: relative;   outline: none; text-decoration: none;
	letter-spacing: 1px; font-weight: 800;   }
#navigation a:hover, #navigation a:focus { outline: none; font-size: 20px; font-weight: 800;  }
#navigation ul{float: right; margin:0px; padding: 0px; -webkit-margin-before: 0em !important;
  -webkit-margin-after: 0em !important;
  -webkit-margin-start: 0px !important;
  -webkit-margin-end: 0px !important;
  -webkit-padding-start: 0px !important;
}
/* display and float align menu horizontally; display none removes browser defaults for ul; position relative allows submenus to be positioned absolutely underneath a relatively positioned menu */
/* if height of this is not set to 0, then rotating images in container appear further down although container wide image is unaffected */
#navigation ul li {display:inline; z-index: 999;  height:60px; float:left; text-align: left; 
list-style:none;  position:relative; }
#navigation  li {height: 60px; }

/* css for menus items*/
.home{ text-decoration: none; color:#000; height: 60px; padding: 20px 10px 30px  10px; 	}
.home:hover {height: 60px; padding: 20px 10px 30px  10px; 		background-image: url('../images/navigation/home_hover.gif');}
.about {height: 60px; text-decoration: none; color:#000; padding: 20px 10px 30px 10px;  }
.about:hover {height: 60px; padding: 20px 10px 30px  10px; 	background-image: url('../images/navigation/about.jpg');}
.lessons{ text-decoration: none; color:#000; height: 60px; padding: 20px 10px 30px  10px; 	 }
.lessons:hover {height: 60px; padding: 20px 10px 30px  10px; 		background-image: url('../images/navigation/driving-lessons-hover.jpg');}
.prices {text-decoration: none; color:#000; height: 60px; padding: 20px 10px 30px  10px; 	 }
.prices:hover {height: 60px; padding: 20px 10px 30px  10px; 		background-image: url('../images/navigation/prices.jpg');}
.contact{ text-decoration: none; color:#000; height: 60px; padding: 20px 10px 30px  10px; 	}
.contact:hover {height: 60px; padding: 20px 10px 30px  10px; 		background-image: url('../images/navigation/contact.jpg');}
.menudivider {width: 1px;	background-image: url('../images/navigation/menu-divider.gif');}


/*#navigation li:hover ul { display:block; width:390px; }*/
/*CSS for masthead - large masthead*/
#logodivwide{	width: 100%;  background-color: #FFFFFF; position: absolute; height: auto; padding-top: 0px; }
#logodiv {position: relative; top: 0px;   height:auto; margin-left: auto;  margin-right: auto; width: 86%; max-width: 1200px;}
#telephone {position: absolute; z-index: 99; top: 48px; left: 0px; width: 30%; font-size: 1.7em; color: #2c3e50; font-weight: bolder; }
.imglogo {width: 100%; z-index: 9999999;position:absolute;top:0px;left:0px;z-index: 1;}

.imglogomobile {display: none;}
.imglogotablet {display: none;}
.telmobile {display: none;}
#logo {	 z-index: 9999999; top: 0%;  width: 9.333333%;  position: relative; }

/*masthead styles - mastheadwide is in each indiv style sheet*/
#mastheadsection {position:relative;margin-left: auto;  margin-right: auto; width: 84%; padding: 1%; background-color: #fff; max-width: 1200px; height: auto;}
#masthead img {	float: left;}
#masthead p {	font-size: 0.8em;	text-align: center;	margin-top: 0px;margin-right: 0px;}
.tlcforeground {position:absolute;top:0px;left:0px;z-index: 3;width: 45.09183673%;
height: auto;overflow: hidden;}
.rotating-filler {position: relative; z-index: 1;width: 100%;}
#rotatingimages {position: relative; overflow: hidden;  z-index: 2; width:100%; margin:0 auto;  -webkit-transform: translate3d(0,0,0); -webkit-transform: translateZ(0); 
-o-transform: translate3d(0,0,0); -o-transform: translateZ(0); backface-visibility: hidden; -o-backface-visibility: hidden;
-webkit-backface-visibility: hidden; -o-backface-visibility: hidden;}   
/*webkit-transform activates hardware accelleration for some devices; visibility stops animation flashing in and out before visibility */ 
.rotating-image1 {position:absolute; z-index: 1; left:24.53061224%; top: 0%;}
.rotating-image2 {position:absolute; z-index: 1;  left:24.53061224%;; top: 0px;}
.rotating-image3 {position:absolute; z-index: 1;  left:24.53061224%; top: 0px;}
.rotating-image4 {position:absolute; z-index: 1;  left:24.53061224%; top: 0px;}
.rotating-image5 {position:absolute; z-index: 1;  left:24.53061224%; top: 0px;}

/* note that infinite can ause problems for opera if an interger; changing 21s to 21.1s solves this; could be infinite that is causing problems */
.rotating-image1 {  -webkit-animation: rotating-image1FadeInOut 21s infinite ease-in-out;  -moz-animation: rotating-image1aFadeInOut 21s infinite ease-in-out; 
  -o-animation: rotating-image1aFadeInOut 21.1s 99999 linear; animation: rotating-image1aFadeInOut 21.1s 99999 linear;    }
@-webkit-keyframes rotating-image1FadeInOut { 0% {opacity:0;} 2% {opacity:1;}  18% {opacity:1;} 20% {opacity:0;} 100% {opacity:0;} }
@-moz-keyframes rotating-image1FadeInOut {0% {opacity:0;} 2% {opacity:1;}   18% { opacity:1;} 20% {opacity:0;} 100% {opacity:0;}}
@-o-keyframes rotating-image1FadeInOut {0% {opacity:0;} 2% {opacity:1;}   18% { opacity:1;} 20% {opacity:0;} 100% {opacity:0;}}
@keyframes rotating-image1FadeInOut { 0% {opacity:0;} 2% {opacity:1;}  18% {opacity:1;} 20% {opacity:0;} 100% {opacity:0;}}

.rotating-image2 {  -webkit-animation: rotating-image2FadeInOut 21s infinite ease-in-out;  -moz-animation: rotating-image2FadeInOut 21s infinite ease-in-out; 
  -o-animation: rotating-image1aFadeInOut 21.1s 99999 linear; animation: rotating-image2FadeInOut 21.1s 99999 linear;    }
@-webkit-keyframes rotating-image2FadeInOut { 0% {opacity:0;} 18% {opacity:0;} 22% {opacity:1;} 38% {opacity:1;} 42% {opacity:0;} 100% {opacity:0;} }
@-moz-keyframes rotating-image2FadeInOut {0% {opacity:0;} 18% { opacity:0;} 22% {opacity:1;} 38% {opacity:1;} 42% {opacity:0;} 100% {opacity:0;}}
@-o-keyframes rotating-image2FadeInOut {0% {opacity:0;} 18% { opacity:0;} 22% {opacity:1;} 38% {opacity:1;} 42% {opacity:0;} 100% {opacity:0;}}
@keyframes rotating-image2FadeInOut { 0% {opacity:0;} 18% {opacity:0;} 22% {opacity:1;} 38% {opacity:1;} 42% {opacity:0;} 100% {opacity:0;}}

.rotating-image3 {  -webkit-animation: rotating-image3FadeInOut 21s infinite ease-in-out;  -moz-animation: rotating-image3FadeInOut 21s infinite ease-in-out; 
  -o-animation: rotating-image1aFadeInOut 21.1s 99999 linear; animation: rotating-image3FadeInOut 21.1s 99999 linear;    }
@-webkit-keyframes rotating-image3FadeInOut {  0% {opacity:0;} 38% {opacity:0;}  32% {opacity:0;} 42% {opacity:1;} 58%  {opacity:1;} 100% {opacity:0;} }
@-moz-keyframes rotating-image3FadeInOut {0% {opacity:0;} 38% { opacity:0;}  32% {opacity:0;} 42% {opacity:1;} 58% {opacity:1;} 100% {opacity:0;}}
@-o-keyframes rotating-image3FadeInOut {0% {opacity:0;} 38% {opacity:0;}  32% {opacity:0;} 42% {opacity:1;} 58% {opacity:1;} 100% {opacity:0;}}
@keyframes rotating-image3FadeInOut { 0% {opacity:0;} 38% {opacity:0;}  32% {opacity:0;} 42% {opacity:1;} 58% {opacity:1;} 100% {opacity:0;}}

.rotating-image4 {  -webkit-animation: rotating-image4FadeInOut 21s infinite ease-in-out;  -moz-animation: rotating-image4FadeInOut 21s infinite ease-in-out; 
  -o-animation: rotating-image1aFadeInOut 21.1s 99999 linear; animation: rotating-image4FadeInOut 21.1s 99999 linear;    }
@-webkit-keyframes rotating-image4FadeInOut {  0% {opacity:0;} 38% {opacity:0;}  52% {opacity:0;} 62% {opacity:1;} 98%  {opacity:1;} 100% {opacity:0;} }
@-moz-keyframes rotating-image4FadeInOut {0% {opacity:0;} 38% { opacity:0;}  52% {opacity:0;} 62% {opacity:1;} 78% {opacity:1;} 100% {opacity:0;}}
@-o-keyframes rotating-image4FadeInOut {0% {opacity:0;} 3% {opacity:0;}  52% {opacity:0;} 62% {opacity:1;} 78% {opacity:1;} 100% {opacity:0;}}
@keyframes rotating-image4FadeInOut { 0% {opacity:0;} 38% {opacity:0;}  52% {opacity:0;} 62% {opacity:1;} 78% {opacity:1;} 100% {opacity:0;}}

.rotating-image5 {  -webkit-animation: rotating-image5FadeInOut 21s infinite ease-in-out;  -moz-animation: rotating-image5FadeInOut 21s infinite ease-in-out; 
  -o-animation: rotating-image1aFadeInOut 21.1s 99999 linear; animation: rotating-image5FadeInOut 21.1s 99999 linear;    }
@-webkit-keyframes rotating-image5FadeInOut {  0% {opacity:0;} 68% {opacity:0;}  78% {opacity:0;} 82% {opacity:1;} 98%  {opacity:1;} 100% {opacity:0;} }
@-moz-keyframes rotating-image5FadeInOut {0% {opacity:0;} 68% { opacity:0;}  78% {opacity:0;} 82% {opacity:1;} 98% {opacity:1;} 100% {opacity:0;}}
@-o-keyframes rotating-image5FadeInOut {0% {opacity:0;} 68% {opacity:0;}  78% {opacity:0;} 82% {opacity:1;} 98% {opacity:1;} 100% {opacity:0;}}
@keyframes rotating-image5FadeInOut { 0% {opacity:0;} 68% {opacity:0;}  78% {opacity:0;} 82% {opacity:1;} 98% {opacity:1;} 100% {opacity:0;}}

.quality {position:relative;z-index: 22;width: 100%;height: auto;overflow: hidden;}
/*.greenbandwide{	overflow: hidden;	width: 100%; padding: 1% 0% 1% 0%;	background-repeat: repeat;	background-image: url('../images/greenbox.gif');position: relative;	height: auto;	}*/
.blackbandwide{	overflow: hidden;	width: 100%; padding: 1% 0% 1% 0%;	background-repeat: repeat;	background: #000;position: relative;	height: auto;	}

.quality1{ width: 100%; max-width: 1200px; height: auto; overflow: visible; position: relative; text-align: center;
font-size: 1px; font-weight: 700; padding:  0%; color: #ffff00;}
.qualityhome{margin-left: auto; margin-right: auto; width: 86%; width: 100%; max-width: 1200px; height: auto; overflow: visible; position: relative; text-align: center;
font-size: 2.2em; font-weight: 800; padding:  0%; color: #ffff00;}

/*content styles*/
#containerwidehome {text-align: center;	clear: both;width: 100%;z-index: 2;	z-index: 4;
	background-image: url('../images/container-bkhome.png');background-repeat: repeat-x;background-color: #FFFFFF;}
#containerhome {padding-bottom: 10px;	margin-left: auto;  margin-right: auto; width: 86%; max-width: 1200px; height: auto;	margin-top: 0px;
position: relative;}
#containerwide {text-align: center;	clear: both;width: 100%;z-index: 2;	z-index: 4;
	background-image: url('../images/container-bkhome.png');background-repeat: repeat-x;background-color: #FFFFFF;}
#container {	margin-left: auto;  margin-right: auto; width: 86%; max-width: 1200px; height: auto;	margin-top: 0px;
	background-color: #fff; position: relative;}
/*used??*/
#container li {	font-size: 14px;	color: #000000;	list-style-image: url('../driving-lesson-images/listimage.gif');}
#subcontainer {	width: 100%;	margin: 0 auto;	margin-top: 0px;}
#column_rl {position: relative; width: 98%; padding-left: 1%; margin-right: 1%;
	background-color: #FFFFFF; padding-top: 14px;}
#content {position: relative; width: 98%; text-align: left; padding-left: 1%; margin-right: 1%; background-color: #fff;
	 padding-top: 30px;}
html>body #column_l {width: 76%; padding-right: 2%; position: relative; z-index: 0; background-color: #FFFFFF; }
#column_l {	float: left; width: 76%; padding-right: 2%; margin: 0%; z-index: 0; background-color: #FFFFFF; }
html>body #column_r { width: 22%; position: relative; z-index: 0; background-color: #FFFFFF; }
#column_r {	float: right; width: 22%; margin-top: 0; z-index: 0; background-color: #FFFFFF; }
.telmobilec {display: none;}
/*roadbox styles*/
.roadbox {position: relative; padding: 1%; z-index: 1; width: 98%;background-position: bottom left; background-image: url('../images/table-bk.jpg'); background-repeat: repeat;}	
.innerbox {position: relative; z-index: 2; padding: 1%; width: 98%; background-image: url('../images/innerbox.png'); background-repeat: repeat;}	
.nobox {position: relative; padding: 1%; z-index: 1; width: 98%; }	
.noinnerbox {position: relative; z-index: 2; padding: 1%; width: 98%; }	
.roadbox-left {float: left; padding-right: 1%; width: 74%;}	
.roadbox-right {float: right; width: 25%;}	
.line20px {	height: 20px; position: relative;}
.line10px {	height: 10px; position: relative;}

/*lessonswide styles*/
#lessonswide {	text-align: center;	clear: both;	width: 100%;	z-index: 2;	z-index: 4;	border-top: 20px;
	border-top-color: #000000;	border-top-style: solid;	border-bottom-color: #000000;	border-bottom-style: solid;
	border-bottom-width: 20px;	padding-top: 100px; padding-bottom: 100px;}
#lessonsphone {	margin-left: auto;  margin-right: auto; width: 60%; max-width: 1200px; height: auto;	margin-top: 0px;
	background-color: #fff; text-decoration: none !important; position: relative; font-size: 2.2em; font-weight: 700; padding: 1% 0% 1% 0%; text-align: center; color: #00cc00 !important;}
#lessonsphone a {	color: #00cc00 !important;text-decoration: none !important;}
.lessonstel {position: relative;font-size: .9em; padding-top: 30px;}

/*footer styles */
#footerwide {text-align: center;clear: both;width: 100%;z-index: 2;	z-index: 4;	background-image: url('../images/menu-bk.gif');	  background-repeat: repeat; }
	
/* Styles for Footer */
#footersection {position: relative;	margin-left: auto;  margin-right: auto; width: 86%; max-width: 1200px; height: auto;	text-align: center;
	/*background-image: url('../images/driving-lessons-footer.jpg');*/}
.footercontent {position:relative;padding-top:20px;z-index: 4;	text-align: center;}
#footer p {text-align: center;font-size: 12px;	color: #000000;	margin: 2px;padding: 2px;}
#footer a {	color: #ff0000;		text-align: center;	font-size: 14px;text-decoration: none;}
#footer a:hover {color: #000000;text-decoration: none;	font-size: 14px;}

/*contact form*/
.contactform {	font-size: 1em;	color: #000000;	text-align: left;	padding-bottom: 5px;}
.para {  font-size: 1em;  color: #000000;  text-indent: 0px;  z-index: 6;}
.parabold {font-weight: 700;}
/* general styles */
#container a {	font-size: 1em;	color: #000000;	text-decoration: none;}
#container a:hover {	font-size: 1em;	color: #ff0000;	text-decoration: none;}
#footerwide a {	font-size: 1em;	color: #fff;	text-decoration: none;}
#footerwide a:hover {	font-size: 1em;	color: #ff0000;	text-decoration: none;}

strong {font-weight: 600;}
.style_bold {font-weight: bold;}
.style_italic {	font-style: italic;}
h1 {font-size: 2em; color: #000; z-index: 1; padding-top: 0px; margin-top: 0px; padding-bottom: 3%; font-weight: bolder; }
h2 { font-size: 1.6em; text-align: left; color: #000; padding-bottom: 2.5%; padding-top: 1%; font-weight: bold;}
h3 { 	font-size: 1em; color: #000; font-weight: bold; padding-left: 0%; padding-right: 1%; margin-bottom: 1.5%; }
.h3large{ font-size: 1.4em; text-align: center; padding-bottom: .2%; padding-top: 1%; }
h4 {	font-size: 1em; font-weight: bold; color: #000; margin-bottom: 1.5%; }
/* H5 is used for righthand column headings in resources etc; the footerh5 is a separate */
h5 { 	font-size: 1em; font-weight: bold; color: #000; padding-left: 2%; padding-right: 2%; margin-bottom: 1.5%; }
h6 {font-weight: bold;	 font-size: 1em; color: #000; text-indent: 0px; z-index: 1; padding-bottom: 1.1%; line-height: 1.5}
#container p {	text-align: left; font-size: 1em; color: #000; text-indent: 0px; z-index: 2; padding-bottom: 1.1%; line-height: 1.5;}
#footerwide p {	text-align: center; font-size: 1em; color: #fff; text-indent: 0px; z-index: 2; padding-bottom: 1.1%; line-height: 1.5;}
.tablebkall {margin-left: auto;  margin-right: auto; width: 90%;  height: auto;	
background-position: 50% bottom;	background-image: url('../images/table-bk.jpg');
		font-size: 1em;	padding: 0% 0% 0% 0%; line-height: 1.5;color: #000000;}
.tablebkprices {	background-position: 50% bottom;	background-image: url('../images/table-bk-prices.jpg');
		font-size: 1em;	color: #000000;}
.tablebklessons {	background-position: 50% bottom;	background-image: url('../images/table-bk-lessons.jpg');
	font-size: 1em;	color: #000000;}
.tablebk {padding: 0% 2% 0% 2%;	 color: #000; text-indent: 0px; z-index: 6; padding-bottom: 0% !important; line-height: 1.5;}
.tablebk1 {padding: 0% 2% 0% 2%;	background-image: url('../images/table-bk1.png');	 color: #000; text-indent: 0px; z-index: 6; padding-bottom: 0% !important; line-height: 1.5;}
.pararight {	font-size: small;	color: #ff0000;		text-align: center;			margin-right: 0px;}
.tablepara {	font-size: medium;	color: #000000;	text-indent: 0px;	z-index: 6;	margin-right: 33px;}
.imgcontent {position:absolute;top:0px;leftt:0px;z-index: 0}
.pararight {font-size: .8em !important; color: #ff0000 !important;}
.style2 {text-align: center;}
.smallfont {font-size: .7em !important;	margin-left: 40px;}
a, a:hover {	text-decoration: none !important;}
ul {font-size: small;	color: #000;	text-align: left;}
ol {	font-size: small;	color: #000;}

/* Styles for cookie policy */
.filler {z-index: 1; width: 100%;	position: relative;}
#cookiepolicy {	position: relative;	overflow: hidden; clear: both; margin-left: auto;  margin-right: auto; width: 100%; max-width: 960px;	text-align: center;}
.cookiepolicy1 {position: relative; border: 0px solid #FFFFCC;  height: auto; width: 100%;  }
.thumbnailcookie img{ border: 0px solid #0000ff; margin: 0 0px 0px 0; padding: 0 0 0 0;}

.thumbnailcookie:hover{ background-color: transparent; z-index: 900;}
.thumbnailcookie:hover img{ border: 0px solid black; z-index: 900; }
/*CSS for positioning each thumbnail - absoultely so it is the same regardless of user's text size settings*/
.cookie1 {  position:absolute; top: 0%; left: 45%; width: 12%; z-index: 10; }
.thumbnailcookie span{
	/*CSS for enlarged image*/
position : absolute; padding: 0px; left: -1000px; border: 0px solid #0000ff; visibility: hidden;
	color: #000000; text-decoration: none; font-size: 14px; 	z-index: 10; }
.thumbnailcookie span img{ /*CSS for enlarged image*/
border-width: 0;padding: 0px; z-index: 10;}
.thumbnailcookie:hover span{
	/*CSS for enlarged image*/
visibility: visible; top: 0px; left: 0px; z-index: 50; font-size: 12px; color: #000000; font-style: italic; z-index: 10; }
/*CSS for positioning each enlarged image = -left value of thumbnail, item 1 defaults to 0
setting the width again makes the text display correct width in ie7*/
.cookie1:hover span{ position: absolute; width: 800%; top: 0px; left: -350%; z-index: 999;
	}

/* -----------small screen View----------- */ 
@media
	screen and (max-width:1068px) {
#logo {	top: 0%;  width: 13%; }
#navigation{ width: 85%; left: 15%;   }
.qualityhome{ font-size: 1.8em; font-weight: 800; padding:  0%; color: #fff;}
#navigation a { font-size: 18px; height: 60px;	letter-spacing: 1px; font-weight: 700;   }
#navigation a:visited,
#navigation a:hover, #navigation a:focus { outline: none; font-size: 18px; font-weight: 700;  }

}


/* -----------small screen View----------- */ 
@media
	screen and (max-width:980px) {
#logo {	top: 0%;  width: 13%; }
#navigation{ width: 85%; left: 15%;   }
.qualityhome{ font-size: 1.8em; font-weight: 800; padding:  0%; color: #fff;}
#navigation a { font-size: 16px; height: 60px;	letter-spacing: 1px; font-weight: 700;   }
#navigation a:visited,
#navigation a:hover, #navigation a:focus { outline: none; font-size: 16px; font-weight: 700;  }

}


/* -----------Tablet View----------- */ 
@media
	screen and (max-width:768px) {
.nonmobile {display: none;}
h1 {font-size: 1.8em;  padding-top: 0px; margin-top: 0px; margin-bottom: 3%; font-weight: bold; }
h2 { font-size: 1.6em; text-align: center; color: #000; padding-bottom: 2.5%; padding-top: 1%; font-weight: bold;}
h3 { 	font-size: 1em; color: #000; font-weight: bold; padding-left: 0%; padding-right: 1%; margin-bottom: 1.5%; }
.h3large{ font-size: 1.4em; text-align: center; padding-bottom: .2%; padding-top: 1%; }

h4 {	font-size: 1em; font-weight: bold; color: #000; margin-bottom: 1.5%; }
/* H5 is used for righthand column headings in resources etc; the footerh5 is a separate */
h5 { 	font-size: 1em; font-weight: bold; color: #000; padding-left: 2%; padding-right: 2%; margin-bottom: 1.5%; }
h6 {font-weight: bold;	 font-size: 1em; color: #000; text-indent: 0px; z-index: 1; padding-bottom: 1.1%; line-height: 1.5}
#column_l p {	 font-size: .9em;  padding-bottom: .5%; line-height: 1.6;}
#footerwide p {	 font-size: .8em;  padding-bottom: .5%; line-height: 1.4;}

.listitem {	padding-left: 8%; padding-bottom: 1.1%; line-height: 1.2;  font-size: .7em;	}
.logophone {width: 50%; margin-left: auto; height: auto; margin-right: auto;}
.logomobile {width: 50%;  padding:0% 25% 2% 25%;}
.telmobile {display: none;}
.teltablet {font-size: 1em; text-align: center; color: #fff !important; text-decoration: none !important; }
.teltablet a {font-size: 1em; text-align: center; color: #fff !important; text-decoration: none !important; }

#logo {display: none; }
.logo2 { display: none;}
#logotablet {text-align: center;	position: relative; z-index: 9; top: 0%;  width: 100%; font-size: 2em; color: #33cc66;
	font-weight: bolder; }
.logo2tablet { z-index: 9; top: 0px; font-style: italic; font-size: 1em; color: #2c3e50;}
#telephone {display: none; }
strong {	 font-size: 1em; font-weight: bold;}
/*.imglogotablet {position: relative; top: 0px; left: 30%; margin-bottom: 1%; width: 40%; display: block; }*/
.style_bold { font-weight: bold;}
.style_italic {	font-style: italic;}
.listitem {	padding-left: 5%; padding-bottom: 2%; font-size: .9em;}
/* nav */
#masthead { width: 100%; margin-top: 0; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-bottom: 5px; overflow: visible; height: auto;}
.mobilemenucenter {	text-align: center; }
#menuwide{width: 100%; overflow: visible; vertical-align: top;  top: 0%; position: relative;   z-index: 99999; border: none; height:auto;}
#navigation{position: relative; display: none;}/*don't display nonmobile menu*/
#menumobile{z-index: 9999999;margin-left: auto;  margin-right: auto; width: 86%; margin-top: 0px; padding: 4% 0% 6% 0%;   font-size: 1.2em; font-weight: bold;
	color:  #2c3e50; height: auto; overflow: visible; position: relative;  display: block; clear: both; z-index: 100; }
.nav {position: relative;  padding-bottom: 22px; margin-left: 20%; }
.nav li {margin: 0 0.5% 0px 0;	padding: 0;	list-style: none; display: inline-block;}
 nav a {position: relative; display: inline-block; 	margin: 0%; outline: none; color: #33cc66; text-decoration: none;
	letter-spacing: 1px;  text-shadow: 0 0 1px rgba(255,255,255,0.3);  }
 nav a:hover, nav a:focus { outline: none; }
.nav a {padding: 3px 0px 0px 3px; text-decoration: none; color: #2c3e50; line-height: 1.4em; font-weight: bold; }
.nav a:hover {	background-position: left; color: #2c3e50; z-index: 1;}
.nav.navright ul {text-align: right;}
	.nav {position: relative; margin-left: 0%; margin-top : 0px; min-height: 30px; overflow: visible; z-index: 999;}	
	/*if required, put the home image in nav ul */
	.nav ul {background: #FFFFFF  10px 11px; border: 1px solid #AAAAAA;border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);left: 0;padding: 5px 0;position: absolute;top: 0; width: 100%;}
	.nav li {display: none; /* hide all <li> items */margin: 0;}
	.nav .current {display: block; /* show only current <li> item */padding: 2px 5px 2px 0px;	text-align: left; }
	.nav a {display: block; padding: 8px 5px 8px 32px;text-align: left;color:#2c3e50; font-size: 20px;}
	.nav a:hover {color:  #33cc66; font-size: 20px;}
	.nav .current a { color: #2c3e50; text-align: left;  }
	.nav .current a:hover { color:  #33cc66; text-align: left; 	}
	/* on nav hover */
	.nav ul:hover {background-image: none;}
	.nav ul:hover li {display: block;margin: 0 0 5px;}
	/* center nav */
	.nav .navright ul {left: 50%;margin-left: -90px;}
	.mobilemenuitem {text-align: left; padding-left: 32px;  }
	.mobilemenuitem:hover {text-align: left; color:  #33cc66;}
#logodivwide{	width: 100%; background-color: #FFFFFF; position: relative; height: auto; top: 0px; padding-bottom: 2px; }	
.roadbox-left {float: left; padding-right: 1%; width: 69%;}	
.roadbox-right {float: right; width: 30%;}	
.qualityhome{ font-size: 1.5em; text-align: center;font-weight: 800; padding:  0% 2% 0% 2%; color: #fff;}
.tablebklessons {font-size: .9em}
}	/*end tablet */


/* -----------kindle etc View----------- */ 
@media
	screen and (max-width:700px) 
	{
#lessonsphone {width: 80%;font-size: 1.0em;}
.roadbox-left {float: none; padding-right: 0%; width: 100%;}	
.roadbox-right {float: none; width: 50%; padding-top: 5%; padding-right: 25%; padding-left: 25%;}html>body #column_l {width: 76%; padding-right: 2%; position: relative; z-index: 0; background-color: #FFFFFF; }
html>body #column_l  {	float: none; padding-right: 0%; width: 100%; }
#column_l {	float: none; padding-right: 0%; width: 100%; }
html>body #column_r { float: none; width: 50%; padding-top: 5%;padding-bottom: 2%;  padding-right: 25%; padding-left: 25%; }
#column_r {	float: none; width: 50%; padding-top: 5%; padding-right: 25%; padding-bottom: 2%; padding-left: 25%; }
.qualityhome{ font-size: 1.4em; font-weight: 800; padding:  0%; color: #fff;}
#column_rl {position: relative; width: 98%; padding-left: 2%; margin-right: 2%;
	background-color: #FFFFFF; padding-top: 14px;}

	
}


/* -----------Mobile View----------- */ 
@media
	screen and (max-width:480px) 
	{
/*.cycle-slideshow {display: none;} don't think used anymore
.cycle-slideshow-tablet {position: relative; display: block;}*/
h1 {font-size: 1.1em;  z-index: 1; padding-top: 0px; margin-top: 0px; margin-bottom: 3%; font-weight: bold; }
h2 {  font-size: 1.0em;  margin-bottom: 2%; font-weight: bold;}
h3 { 	font-size: .8em;  font-weight: bold; padding-left: 1%; padding-right: 1%; margin-bottom: 1.5%; }

h4 {	font-size: .8em; font-weight: bold; color: #2c3e50; margin-bottom: 1.5%; }
/* H5 is used for righthand column headings in resources etc; the footerh5 is a separate */
h5 { 	font-size: .8em; font-weight: bold; color: #FFFFFF; padding-left: 2%; padding-right: 2%; margin-bottom: 1.5%; }
#column_l p {	 font-size: .8em; margin-bottom: 1.5%; line-height: 1.2}
strong {	 font-size: 1em; font-weight: bold;}
#logodivwide{	width: 100%; background-color: #FFFFFF; position: relative; height: auto; top: 0px; }	
.teltablet  {display: none;}
.logophone {width: 70%;	height: auto;}
.nonmobile {display: none;}
.nonmobilec {display: none;}
.menufiller {display: block;height: 10px;}
.telmobile {display: block; width: 100%; padding: 5px 0px 5px 0px;display: block; margin-left: auto;  margin-right: auto; text-align: center; color: #fff;}
.telmobile:hover {color: #FF0000 !important;}
.telmobilec {display: block;  font-size: .8em;  color: #000000;  text-indent: 0px;  z-index: 6;}
.mobile {display: block; }
#menuwide{width: 100%; background-color: #FFFFFF; position: relative;  top: 0px; z-index: 9999; border: none;	 }
#menumobile{margin-top: 0px; padding: 5% 0% 5% 0%;  font-size: 18px; font-weight: bold; top: 0px; height: 52px;
	color: #fff; height: auto; overflow: visible; position: relative;  display: block; clear: both; z-index: 100; }

.nav .current {display: block; /* show only current <li> item */ text-align: left;	}
.nav a {font-size: 16px; display: block; padding: 8px 5px 8px 32px;text-align: left;color:#2c3e50;}
.nav a:hover {font-size: 16px; padding: 8px 5px 8px 32px;color: #33cc66;}
.mobilemenucenter {	text-align: center; }

.roadbox-left {float: none; padding-right: 0%; width: 100%;}	
.roadbox-right {float: none; width: 70%; padding-top: 5%; padding-right: 15%; padding-left: 15%;}	
#lessonsphone {width: 80%;font-size: 1.2em;}
#content {	padding-top: 10px;}
.qualityhome{ font-size: 1em; font-weight: 800; padding: 2% 0% 2% 0%; color: #fff;}
#lessonswide {		background-image: url('../images/pupils-passed-driving-test.jpg'); background-position: top; }
.tablebkall {font-size: .8em;line-height: 1.3;}
.contactform {	font-size: 1em;	color: #000000;	text-align: left;	padding-bottom: 5px;}
.para {  font-size: .8em;  color: #000000;  text-indent: 0px;  z-index: 6;}
.smallitalics {	font-size: .8em;}
html>body #column_r { width: 70%; padding-top: 5%;padding-bottom: 2%;  padding-right: 15%; padding-left: 15%; }
#column_r {	width: 70%; padding-top: 5%; padding-right: 15%; padding-bottom: 2%; padding-left: 15%; }
.parabold {	font-size: 16px;}
#footerwide a {	font-size: 11px;	text-decoration:  none;}
#footerwide a:hover {font-size: 11px;}
#footerwide p {font-size: 11px;}
.tablebklessons {font-size: .8em}
}
</style>



