/*Reset browser default CSS*/
@import "../../vanilla/styles/reset.less";

/*Declare common less functions*/
@import "../../vanilla/styles/common.less";

/*Declare common colours*/
@import "colours.less";

/*Declare responsive breakpoints*/
@import "breakpoints.less";

@import "forms.less";


html{
	/*if using gradient on body, this value should match the bottom of the body gradient colour.*/
	background:@black;
}

body{
	font-family:Arial,Verdana, Geneva, sans-serif;
	font-size:14px;
	line-height: 1.6em;
	background: @black;
	color:@white;

	width:100%;
	min-width:@width-full;

	@media screen and (min-width: 0)
	{
		min-width: 0;
	}
}

p{
	line-height:1.6em;
	margin-bottom:1em;
}

h1,h2,h3,h4,h5,h6{
	font-weight:bold;
	color:@white;
	line-height:1.4em;
	margin-bottom:1em;
}
h1{font-size:1.8em; padding-left: 10px;}
h2{font-size:1.4em;}
h3{font-size:1.2em;}
h4{font-size:1em;}
h5{font-size:1em;}
h6{font-size:1em;}

a{
	color:@secondary;
	&:hover,&:hover h1,&:hover h2,&:hover h3,&:hover h4,&:hover h5,&:hover h6{
		/*Required to override h element's styling where nested within an <a> tag*/
		color:darken(@secondary,7%);
	}
}

strong, .strong{
	font-weight:bold;
}

blockquote {
	margin-bottom:0.5em;
	quotes: inherit;
	position: relative;
	margin: 0 15px;

	&:before{
		font-size: 26px;
		content: open-quote;
		position: absolute;
		left: -15px;
	}
	&:after {
		font-size: 26px;
		position: absolute;
		content: close-quote;
		right: -15px;
	}
}

.quote-credit {
	float: right;
	font-style: italic;
	color: darken(@white, 15%);
}

.button{
	background-color:@secondary;
	border:none;
	padding:2px 10px;
	color:@white;
	font-size:1.2em;
	border:solid 1px  darken(@secondary,10%);
	.innershadow(-1px -1px 3px darken(@secondary,10%));
	.rounded-corners(4px);
	cursor:pointer;
	&:hover{
		.innershadow(2px 2px 3px darken(@secondary,10%));
	}
}
input[type=submit]{
	.button;
}

#main-content img{
	max-width:100%;
	height:auto;
}

#wrapper{
	.clearfix;
	.rounded-corners(0 0 4px 4px);
	.boxshadow(0 0 5px @black);
	@media screen and (min-width: 1px){
		max-width:100%;
	}
}

.inner-wrapper{

	width:@width-full;
	margin:0 auto;

	@media screen and (min-width: 1px) {
		max-width: 100%;
	}
}

.hentry{
	.clearfix;
	/*General assumption that lists within the #main-content are actually inteded as styled lists*/
	ul{.bullets;}
	ol{.bullets; list-style-type:decimal;}
	img{
		display:block;
		margin:0 auto;
		&.alignleft, &.alignright{
			margin:auto;
		}
	}
}

.gradient-border-image {
	background-image: url(../images/chrome-trim-top.jpg);
	background-repeat: repeat-x;
	height: 3px;
	width: 100%;
}

#phone-strip {
	position: relative;
	padding-bottom: 5px;
	.clearfix;
	background-image: url(../images/dot-texture-bg.jpg);
	min-width: 225px;

	@media screen and (max-width: @width-tablet) {
		.contact-message {
			display: none;
		}
	}


	.inner-wrapper {
		font-weight:bold;
		font-size: 1em;
		padding: 8px 2% 5px 2%;
		max-width: 96%;
		width: 960px;


		.contact-number{
			float:right;

			@media screen and (max-width: @width-mobile) {
				display:block;
				width: 205px;
				text-align: right;
			}
		}
	}
	.gradient-border-image {
		position: absolute;
		bottom: 0;
	}
}

#main-header{
	.clearfix;
	.gradient(bottom,@black,lighten(@black,30%));

	.inner-wrapper {
		text-align: center;
		position: relative;

		.site-logo{
			max-width:95%;
			height:auto;
			margin:10px 0;
			z-index: 40;
			position: relative;

			@media screen and (max-width: @width-mobile) {
				display:block;
				margin: 10px auto 0;
			}
		}


		@menu-color:@primary;
		.menu-primary-menu-container{
			.clearfix;
			position: absolute;
			top: 60px;
			font-family: 'Open Sans', sans-serif;
			font-size: 1em;

			@media screen and (max-width: @width-full) {
				position: relative;
				top: 0;
				text-align: center;

				ul {
					display: inline-block;
				}
			}

			a {/*All links*/
				color:@secondary;
				margin: 0 17px;
				padding-bottom: 7px;
				display: block;
				font-weight: bold;

				&:hover{
					border-bottom: 2px solid @secondary;
					padding-bottom: 5px;

					@media screen and (max-width: @width-tablet) {
						border-bottom: none;
						padding-bottom: 10px;
					}
				}
			}

			.menu-item-109 {
				a {
					margin-right: 225px;

					@media screen and (max-width: @width-full) {
						margin: 0 17px;
					}
				}
				ul a {
					margin-right: 17px;
				}
			}
		}


		.menu-primary-menu-container > ul{

			> li {/*top level menu items*/
				position:relative;
				float:left;

				/*allow submenu of last menu item to flow back onto screen*/
				@media screen and (min-width: 0){
					&:last-child ul {
						left: auto;
						right: 0;
					}
				}

				> ul{/*top level submenu*/
					display:none;
					font-size:0.9em;
					left: -65px;
					position:absolute;
					width:250px;
					z-index: 20;
					.rgba(@black, 0.8);
					.rounded-corners(0 0 3px 3px);
					@media screen and (max-width: @width-tablet) {
						position: relative;
						display: inline-block;
						left: 0;
						background: none;
					}


					li{/*All sub menu elements*/
						padding:0 7px;
						a{/*All sub menu links*/
						}
					}
					/*The submenu's first menu item's link*/
					> li:first-child > a{border-top:none;}
				}
				/*Generic instruction to show submenu on hover*/
				&:hover > ul{
					display:block;

					@media screen and (max-width: @width-tablet) {
						display: inline-block
					}
				}
			}
		}

		@media screen and (max-width: @width-tablet) {
			.menu-primary-menu-container {
				cursor:pointer;
				&:before{
					background:url('../images/menu-down-arrow.png') 10px no-repeat;
					content:'Main Menu';
					display:block;
					padding:10px;
					color:@white;
					padding:1em 30px;
				}
				> ul{
					display:none;
					padding-left:30px;
				}
				ul > li {
					float:none;
					a{
						display:block;
						padding:10px 0;

						&:hover {
							padding:10px 0;
						}
					}
					li{
						padding-left:10px;
					}
				}
			}
		}
	} /*inner-wrapper*/
}

#main-content {
	position: relative;
	z-index: 10;

	.content-section {
		width: 100%;
		border-top: 1px solid lighten(@black, 50%);
		.clearfix;

		&:first-child {
			border-top: none;
		}

		.content-block {
			width: 50%;
			float: left;

			@media screen and (max-width: @width-tablet) {
				float: none;
				width: 100%;
			}

			.block-inner {
				.clearfix;
				margin: 20px;

				img {
					margin: 0 auto;
				}

				.content-block-link {
					clear: both;
					text-align: center;
					padding-top: 10px;

					a {
						color: @secondary;
						font-family: 'Open Sans', sans-serif;
						font-weight: bold;
					}
				}
			}
		}
	}


	.attachment-post-thumbnail {
		float: right;
		padding: 0 0 20px 20px;
	}
}


#main-content-wrapper{
	/*These values should be inverse compared to slidebar-wrapper */
	width:100%;
	float:left;
	position: relative;

	.top-gradient {
		position: absolute;
		width: 100%;
		height: 100px;
		.gradient(bottom,@black,lighten(@black,30%));
	}


	@media screen and (max-width: @width-tablet) { width:100%}
}
#sidebar-wrapper{
	width: 30%;
	float:right;
	/*These values should be inverse compared to main-content-wrapper */
	@media screen and (max-width: @width-tablet) { width:100%}
}

.no-sidebar #main-content-wrapper{
	width:100%;
	/*provides full width on main content when there's no sidebar*/
}

#sidebar{
	padding-left:30px;
	@media screen and (max-width: 720px) { padding-left:0;}
	@sidebar-color:@primary;
	.clearfix;
	.widget-container{
		.rounded-corners(4px);
		margin-bottom:40px;
		.boxshadow(0 0 5px @sidebar-color);
		border:@sidebar-color solid 1px;
		/*rule to catch majority of child container types. Can't pad parent element without interfering with heading*/
		> ul, > div, > form{
			padding:10px;
		}
		h2{
			margin:0;
			.gradient(bottom,@sidebar-color,lighten(@sidebar-color,10%));
			display:block;
			color:white;
			font-size:1.4em;
			padding:0.2em 0;
			text-align:center;
		}

		/*Rules for list-style elements like categories or menus*/
		ul > li {
			a{
				display:block;
				padding:0.6em 0;
				border-bottom:1px solid lighten(@sidebar-color,50%);
			}
			li{
				padding-left:10px;
			}
		}
	}
}

.social-media-block{
	li{
		float:left;
		margin-left:5px;
		&:first-child{
			margin-left:0;
		}
	}
}

#sidebar, #main-content{
	/*Generally, top/bottom padding on both should be the same*/
	padding:20px 0;
}

#main-footer{
	.clearfix;
	clear:both;
	background-image: url(../images/dot-texture-bg.jpg);
	position: relative;

	.inner-wrapper {
		text-align:center;
		padding: 10px 0 40px 0;


		.menu-primary-menu-container{
			/*Menu Base Color*/
			.clearfix;
			font-family: 'Open Sans', sans-serif;
			font-size: 0.8em;
			float: left;

			a {/*All links*/
				color:@secondary;
				margin: 25px 15px;
				padding-bottom: 7px;
				display:block;

				&:hover{
					border-bottom: 2px solid @secondary;
					padding-bottom: 5px;
				}
			}
		}
		.menu-primary-menu-container > ul{

			> li {/*top level menu items*/
				position:relative;
				float:left;

				ul {
					display: none;
				}

			}
		}

		@media screen and (max-width: @width-tablet) {
			.menu-primary-menu-container {
				display: none;

			}
		}

		a{
			color:@white;
			padding-bottom: 7px;

			&:hover{
				border-bottom: 2px solid @secondary;
				padding-bottom: 8px;
			}
		}

		.intructor-training-link {
			float: right;
			padding: 10px;
			margin: 10px;
			display: block;
			.rounded-corners(10px);
			.rgba(@black,0.8);


			@media screen and (max-width: @width-full) {
				display: none;
			}

			.line {
				display: block;
				text-align: center;
			}

			.line1 {

			}

			.line2 {
				color: @secondary;
			}
		}

		.site-cred-text {
			clear: both;
			border-top: 1px solid @white;
			padding-top: 20px;
		}
	}
}

.slideshow{
	position:relative;
	margin: 0 auto 30px auto;

	@media screen and (max-width: @width-tablet) {
		display: none;
	}

	.slides{
		padding-left: 0;

		.clearfix;
		> li {
			display: none;
			-webkit-backface-visibility: hidden;
			padding: 0;
			margin: 0;
		}
		img {
			width: 100%;
			display: block;

			@media screen and (max-width: @width-tablet) {
				width: 50%;
				margin: 0 25%;
			}

		}
	}
	.flex-control-nav{
		position:absolute;
		bottom:-30px;
		width:100%;
		text-align:center;
		padding: 0;

		li{
			width:0.5em;
			height:0.5em;
			margin:0.5em;
			display:inline-block;
			a{
				.rounded-corners(0.5em);
				width:100%;
				height:100%;
				display:block;
				background: lighten(@black,50%);
				cursor:pointer;

				&.flex-active{
					background:@secondary;
				}
			}
		}

	}
}

/* No JavaScript Fallback */
.no-js .slides > li:first-child {display: block;}



/*---------------Page Specific-------------------------------------------*/

/*--------------Mini sidebar layout for aditional content----------*/

#main-content {

	.content-section {

		.large-column-block{
			width: 58%;
			padding-left: 2%;
			float: left;

			@media screen and (max-width: @width-tablet){
				float: none;
				width: 96%;
				padding: 0 2%;
			}
		}

		.small-column-block{
			width: 35%;

			@media screen and (max-width: @width-tablet) {
				width: 96%;
				padding: 0 2%;
			}
		}
	}
}

/*---------------Front Page-----------------------------------*/
.front-banner {
	background-image: url(../images/front-banner.png);
	background-position: top;
	background-repeat: no-repeat;
	height: 518px;
	text-align: center;
	margin-bottom: 20px;
	padding-bottom: 70px;
	border-top: 1px solid lighten(@black, 50%);
	position: relative;


	@media screen and (max-width: @width-tablet) {
		height: 100px;
		background-position: top;
		margin-bottom: 0px;
	}

	@media screen and (max-width: 560px) {
		display: none;
	}

	.banner-header {
		font-family: 'Open Sans', sans-serif;
		font-weight: bold;

		&.top-line {
			font-size: 4.4em;
			.textshadow();
			color: darken(@white, 15%);
			padding-top: 40px;

			@media screen and (max-width: @width-tablet) {
				padding-top: 20px;
			}
		}

		&.bottom-line {
			font-size: 2em;
			padding-top: 20px;
		}

		.banner-header-italic {
			font-family: 'Times New Roman';
			font-style: italic;
			color: darken(@white, 40%);
		}
	}

	.banner-header-bullets {
		text-align: left;
		width: 40%;
		margin-right: 10%;
		position: absolute;
		bottom: 0;
		right: 0;

		@media screen and (max-width: @width-full) {
			.rgba(@black,0.6);
			padding: 1%;
			.rounded-corners(8px);
		}

		@media screen and (max-width: @width-tablet) {
			display: none;
		}

		ul {
			list-style: disc;
			margin-left: 20px;

			li {
				color: @secondary;
				font-size: 1.4em;

				span {
					color: @white;
					font-size: 0.8em;
				}

				img.mini-logo {
					height: 1em;
					padding-left: 10px;
				}
			}
		}

		.header-link {
			display: block;
			margin-top: 10px;
			padding-right: 20px;
			padding-top: 3px;
			font-size: 1.2em;
			font-weight: bold;
			background-image: url(../images/little-arrow.png);
			background-repeat: no-repeat;
			background-position: right;
			float: left;
			cursor: pointer;
		}
	}
	.special-offer {
		position: absolute;
		top: -49px;
		left: 9px;
		.rounded-corners(100px);
		.gradient(top, @secondary 20%, darken(@secondary, 20%) 100%);
		padding: 25px 15px 15px 15px;
		width: 107px;
		font-weight: bold;
		color: @white;
		.innershadow(0 0 15px 3px @black);
		font-size: 1.2em;

		@media screen and (max-width: @width-full) {
			display: none;
		}
	}

}
.csstransforms .front-banner .special-offer {
	//transform:rotate(-17deg);
	//-ms-transform:rotate(-17deg); /* IE 9 */
	//-webkit-transform:rotate(-17deg); /* Safari and Chrome */
}

#main-content .slideshow-block {
	img.mini-logo{
		float: left;
		padding: 0 20px 0 0;
	}
}

#main-content .instructor-thumb {
	width: 50%;
	float: left;
	margin-bottom: 10px;
	text-align: center;

	a img {
		.rounded-corners(8px);
		margin: 0 0 10px 0;
		padding: 0;
		float: none;
	}
}



.areas-block {
	.clearfix;
	background-image: url(../images/areas-map.png);
	background-position: bottom;
	background-repeat: no-repeat;
	height: 340px;

	@media screen and (max-width: @width-mobile) {
		display:none;
	}


	h1 {
		font-size: 1.4em;
	}

	.area-covered {
		display: block;
		width: 28%;
		padding: 0 10%;
		float: left;
	}
}

/*-----------------About Page-----------------*/
.instructor-teaser {
	.clearfix;
	border-top: 2px solid lighten(@black, 30%);
	padding-top: 10px;

	img {
		float: left;
		padding: 10px 10px 10px 0;
	}
}

/*-----------------Driving Lessons-----------------*/
#main-content .instructor .content-section img {
	float: none;
}


/*-----------------Driving Lessons-----------------*/
.lesson {
	.clearfix;
	border-top: 2px solid lighten(@black, 20%);
	padding-top: 10px;

	img {
		float: left;
		padding: 5px 20px 20px 0;
	}
}

.useful-info {
	border: 2px solid lighten(@black, 20%);
	padding: 0 10px;
	.rounded-corners(8px);
	margin-bottom: 10px;
}


/*-----------------Getting started-----------------*/

#main-content .content-section {

	.main-content-block h2 {
		padding-top: 20px;
	}

	img {
		float: left;
		padding: 15px 20px 20px 0;
	}

	.getting-started-block {
		.clearfix;
		border-top: 2px solid lighten(@black, 20%);
		padding-top: 10px;
	}

	.recommended-books-block {
		.clearfix;
		border-top: 2px solid lighten(@black, 20%);
		padding-top: 10px;
	}
}


/*-----------------Lesson Resources-----------------*/
.resource {
	border-top: 1px solid lighten(@black, 30%);
	padding-top: 10px;
}

#main-content .content-section .links-content-block {
	.block-inner {
		margin: 20px 40px;

		h2 {
		}

		.resource {
			border: 1px solid lighten(@black, 30%);
			.rounded-corners(8px);
			padding: 10px;
			margin-bottom: 10px;
		}
	}
}

/*-----------------Practical test-----------------*/

@media screen and (max-width: 550px) {
	.gmap-block {
		display: none;
	}
}


/*-----------------Testimonials Page-----------------*/
.testimonial-0 {
	float: left;
	clear: left;
}
.testimonial-1 {
	float: right;
	clear: right;
}

.testimonial-teaser {
	padding: 10px;
	border: 1px solid lighten(@black, 20%);
	.rounded-corners(8px);
}

/*-----------------Contact Page-----------------*/
.address-details{
	padding: 0 34px;
	@media screen and (max-width: @width-mobile) { display:block; clear:both;}
	margin-bottom:30px;
	span{
		display:block;
		padding:0.5em 0;
		&.contact-address{
			padding:0.2em 0;
			&:after{
				content:',';
			}
			&:last-child:after{
				content:'';
			}
		}
	}
	.address-row-0{margin-top:10px;}
}

#contact-form{
	float:right;
	width:45%;
	@media screen and (max-width: @width-mobile) {
		width:100%;
		margin:1em auto;
		float:none;
	}
	label{
		display:block;
		margin-top:1em;
	}
	textarea{
		height:180px;
		width:90%;
		padding-left:5%;
		padding-right:5%;
	}
	.submit{.button;float:right;}
}

#google_map iframe{
	width: 100%;
	margin:0 auto;
	@media screen and (min-width: @width-tablet) {
		width: 50%;
		margin:1em auto;
	}
}

.error-message, .thankyou-message{
	display:block;
	padding:0.6em 0;
	color:white;
	text-transform:uppercase;
	font-weight:bold;
	text-align:center;
	margin-bottom:0.3em;

	.quick-contact-link {
		color: @white;

		&:hover {
			color: darken(red, 20%);
		}
	}
}
.error-message{.gradient(bottom,red,darken(red,5%));}
.thankyou-message{.gradient(bottom,green,darken(green,5%));}

/*-------Widget Specific---------------------*/

.widget_search{
	text-align:center;
}

//---------------Quick contact-------------

#quick-contact {
	display: none;
}

#colorbox #quick-contact {
	display: block;
	.clearfix;
	width: 200px;
	padding: 10px;
	color: @black;

	label {
		color: lighten(@black, 50%);
		display: block;
		font-size: 0.9em;
		font-style: italic;
	}

	input {
		width: 100%;
	}

	.submit {
		float: right;
		margin-top: 10px;
		width: auto;
	}
}

#madison-web-solutions-logo {
    width:120px;
    height:33px;
    padding-top:10px;
	box-sizing:border-box;
}