/*
Theme Name: EDS 
Author: Liam Howley 
Description: A theme for EDS Driving School Website 
Version: 0.0.1
Tags: custom 
*/

@import "style/reset.css";

/******** fonts
 *********/

@import url(http://fonts.googleapis.com/css?family=Roboto|Open+Sans);


/*** basics
 ***/

/* apply a natural box layout model to all elements -
 * csstricks.com */
*, *:before, *:after {
        -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}


html{
        overflow-x:hidden;
}

body {
font-size:12px; 
color: #666666;
background:#f2f2f2;
}

nav, h1, h2, h3, h4 {
        font-family: Roboto, sans-serif;
}

h5, body, p {
        font-family: 'Open Sans', sans-serif;
}

a, a:focus, a:active{
outline:0;
}


/*** body
 ***/


#wrapper {
        width:100%; 
}

.logo-image{
        width:213px; 
        height:152px; 
        margin-left:22px;
}

p{color:#333;}

#banner-top-left{
        display:block;
        float:left;
        width: 34px;
        height: 45px;
        margin-top: 3px;
        margin-left: 3%;
        background: url(media/banner5.svg) center center no-repeat;
        background-size: 34px 45px;
}



/*** Navigation
 ***/

#menu-selector, #menu-selector img{
        display:none;
        width:40px;
        height:25px;
        margin-left: 10px;
        margin-top:10px
}

.nav {
        width: 100%;
        height: 50px;
        color:#000;
        background: #141414;
}

.nav ul {
        margin: 0;
        padding: 0px 40px 0px 4px;
        list-style: none;
        line-height: normal;
        margin-left: 10%;
}

.nav li {
        float: left;
        height: 50px;
        border-left: 1px solid #141414;
        border-right: 1px solid #141414;
}

.nav a {
        display: block;
        padding: 10px 30px 0px 30px;
        text-decoration: none;
        font-size: 110%;
        font-weight: normal;
        text-align:center;
        color: #fff;
        border: none;
        line-height:25px;
}

.nav a:hover {	
        color: #000;
}

.nav li:hover {
        background: #fff;
}

.nav li:hover a{
        color:#000;
}

footer .nav{
display: block;
position:relative;
width:30%;
font-weight: normal;
font-size:100%;
float:right;
height:100%;
margin: 7% 3% 7% 0;
}

footer .nav ul
{
position: relative;
margin:5%;
width:80%;
height:auto;
}

footer .nav ul li
{
display: block;
position:relative;
width:100%;
overflow:hidden;
padding: 4% 0%;
height:auto;
border-bottom:1px solid #141414;
border-top:1px solid #141414;
float:none;
}

footer .nav ul li:hover
{
background-color:#fff;
border-bottom:1px solid #141414;
}

footer .nav ul li a
{
width: auto;
margin: 0% auto;
padding:0;
background: inherit;
color: #fff;
line-height:normal;
text-align:left;
}

footer .nav ul li 
{
display: block;
width:100%;
left:0;
overflow: hidden;
}
 
footer .nav ul li:hover a
{
opacity: 1.0;
color: #000;
}

#lhs {
width:70%;
height: auto; 
float:left; 
padding:5%;	
margin: 0% 0 2% 5%;
background:#fff;
}

.img-float-right{
float:right;
margin: 0 0 10px 15px;
}

.img-float-left{
float:left;
margin: 0 15px 10px 0px;
margin-right: 15px;
}

#ed-and-car{
width:100%;
height:auto;
float:right;
margin: 0 0 50px 10px;
}

#lhs-img {
        float:left;
        width:100%;
        height:auto;
        overflow:hidden;
        margin-bottom: 50px;
}


#lhs h1{
        margin: 5% 0 20px 0;
        padding: 20px 0px 0px 25px; 
        color:#000000;
        font-size:18px;
        border-bottom: 3px solid #E5E1D8;
        padding-top:10px; 

        background: url(media/Picture-1.gif) left bottom no-repeat;

}
#lhs p {
font-size:14px; 
font-weight:lighter;	
line-height: 1.5; 
color: #333333; 
padding-left:22px; 
margin-bottom:10px;
}

#lhs h2{
font-size:16px; 
font-weight:normal;	
margin: 0 0 15px 0;
padding-left:22px; 
}

#lhs h3{
        display:block;
margin: 20px 0 20px 0;
padding: 20px 0 0px 25px;
color:#000;
/*font-family:Arial, Helvetica, sans-serif;
 */
font-size:16px;
border-bottom: 3px solid #E5E1D8;
background: url(media/Picture-1.gif) left bottom no-repeat;
clear:both;
}

#lhs h4 { font-style:oblique; padding-left:22px;color:#ff0000; }

#lhs li {
font-size:13px; 
color:#333333; 
list-style-image:url(media/banner5_11x14.png); 
list-style-position:inside; line-height:1.8em; padding-left:25px;  }

#lhs p { padding-left:22px; color:#333333; 	line-height: 1.5em; 
}



/**** lhs-contact
 ****/

#contact-bar{
position:fixed;
top:35%;
left:0;
height:130px;
width: 40px;
background: #141414;
padding:1% 0;
border-radius: 0 5px 5px 0;
}

.contact-icon{
        display:block;
        position:relative;
        width:auto;
        height:auto;
}

.contact-icon img{
width:20px;
height:20px;
margin:15px 10px;
cursor:pointer;
}

.contact-icon span{
        display:none;
        background:#141414;
        position:absolute;
        top:0;
        left: 110%;
        width: 300%;
        height: auto;
        color:#fff;
        padding: 5px;
}

.contact-icon:hover span{
        display:block;
}



/**** prices-rhs
 ****/

#rhs{
width:25%; 
height: auto; 
float:right; 
background:#f2f2f2;
padding: 50px 40px 10px 20px;
border-left: 0px solid #E5E1D8;  
margin-top: 0px;
}

#rhs ul {
        margin: 0;
        padding: 7px 0px 5px 20px;
        list-style: none;
        line-height: normal;
}

#rhs li ul {
        color:#333333;
        padding-left:10px;
        line-height: 1.4em;
        border: none;
        background-color: #fff;
        border-top: 1px solid  #ff0000;

}

#rhs li li {
        padding: 3px 0;
}


#rhs h3 {
        margin: 0 0 5px 0;
        padding: 10px 0 0px 0;
        color:#000;
        font-size:14px;
        clear:both;
}

#rhs h4 { font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#333333; }

.rhs-img{
        position:relative;
        width:100%;
}
.rhs-img img{
        display:block;
        margin: 10px auto;
}

.social-media, .twitter-follow-button{
        float:left;
        margin: 10px;
}

.clear {clear:both}

/**** footer
 ***/

footer{
display:block;
position:relative;
width:100%;
background: #141414;
color:#fff;
border-top: 2px solid #ccc;
}

#footer-left{
float:right;
margin: 5% 5% 5% 0;
width: 5%;
}

.footer-image{
margin: 6% 3%;
width:35px;
height:auto;
}

footer .logo-image{
float:right;
margin: 10% 3% 10% 0;
}

#areas-covered{
float:right;
width: 15%;
margin: 8% 5%;
}

footer h5 { font-size:10px; color:#fff; text-align: left; }

footer p{ font-size:10px; color:#fff; text-align:center; letter-spacing:.1em; }

footer a{
        color:#ffd700;
}

#car-at-footer{
        float:right;
        clear:both;
}

/**** Forms
 ****/

.wpcf7{
background:#fff;
width:90% 5%;
padding: 10px;
z-index:100;
}

.wpcf7-form{
padding:20px;
background:#f2f2f2;
z-index:10;
}

.wpcf7-form input, .wpcf7-form textarea{
background: #fff;
color:#000;
border:2px solid #e6e6e6;
}

.wpcf7-form-control{ 
width:50%;
}

.wpcf7-form-control.wpcf7-submit{ 
width:60px;
}

.wpcf7-form input{
height: 2em;        
}

/*********** Media Queries ***********/		
		
@media screen and (min-width: 769px) and (max-width: 1024px) and (orientation: landscape)
{	
        #lhs{width:60%;}
        #rhs{width:35%;}

        .wpcf7-form-control{ 
                display:block;
                width:90%;
                margin:10px 5% 10px 0%;
        }

        .wpcf7-form-control.wpcf7-submit{ 
                margin-left:0%;
                width:60px;
        }
}

@media screen and (min-width: 801px) and (max-width: 900px) and (orientation: portrait)
{	
}

@media screen and (min-width: 481px) and (max-width: 800px) and (orientation: portrait)
{	
}

@media screen and (max-width: 768px){

	html {background: no-repeat center center fixed; background-size: cover; height: 100%; overflow: hidden;}		
	body {height:100%; overflow-y: scroll; -webkit-overflow-y-scrolling: touch;}

        #lhs, #rhs{
        width:100%;
        height: auto; 
        float:none; 
        padding:5%;	
        margin: 0% 0 10% 0%;
        }

@media screen and (min-width: 801px) and (max-width: 900px) and (orientation: portrait)
{	
}

@media screen and (min-width: 481px) and (max-width: 800px) and (orientation: portrait)
{	
}


@media screen and (max-width: 768px){

	html {background: no-repeat center center fixed; background-size: cover; height: 100%; overflow: hidden;}		
	body {height:100%; overflow-y: scroll; -webkit-overflow-y-scrolling: touch;}

        #lhs, #rhs{
        width:100%;
        height: auto; 
        float:none; 
        padding:5%;	
        margin: 0% 0 10% 0%;
        }

        #rhs ul{
                padding:7px 0;
        }

        #rhs h3{
               padding-left:10px; 
        }

        #banner-top-left{
                display:block;
                float:none;
                width: 213px;
                height: 152px;
                margin: 10% auto;
                background: url(media/banner4.png) center center;
        }

        #ed-and-car{
                margin-bottom: 20%;
        }

        #menu-selector, #menu-selector img{
                display:block;
        }

        .nav {
                position:fixed;
                top:-150%;
                width: 100%;
                height: auto;
                z-index:0;
        }

        .nav ul {
                margin: 0;
                padding: 0px;
                margin-left: 0%;
        }

        .nav li {
                float: none;
                width:100%;
                height: 30px;
                border-left: 1px solid #141414;
                border-right: 1px solid #141414;
                border-top: 1px solid #494949;
        }
        
        .nav a{
                padding-top: 3px;
        }

        footer .nav, #footer-left, #areas-covered {
        display:block;
        width:80%;
        font-weight: normal;
        float:none;
        margin: 7% 10%;
        }

        footer h5{
                text-align:center;
        }

        #footer-left{
        width:60%;
        margin: 7% 20%;
        }

        footer .nav ul{
                margin:5% 10%;
        }
        footer .nav ul li a{
                text-align:center;
        }

        footer .logo-image{
                display:block;
                float:none;
                margin:7% auto;
        }

        #car-at-footer{
                display:block;
                float:none;
                width:90%;
                margin:0 5%;
        }

        #car-at-footer img{
                display:block;
                width:550px;
                margin: 0 auto;
                max-width:100%;
        }
        

        /**** Forms ****/

        .wpcf7-form-control{ 
                display:block;
                width:90%;
                margin:10px 5% 10px 0%;
        }

        .wpcf7-form-control.wpcf7-submit{ 
                margin-left:0%;
                width:60px;
        }

        #contact-bar{
                display:none;
        }

}