@charset "utf-8";
/* CSS Document */
a{
text-decoration:none;
display: block;
width:auto;}

.button{
	position:absolute;
	border-radius:5px;
	height:35px;
	text-align:center;
	line-height:35px;
	font-weight:bold;
	box-shadow: 2px 2px 2px #1F1F1F;
	font-size:12px;
	color:#FFF;
	display:block;
	cursor:pointer;
}
	
.bluebutton{
	
	background-color:#222C3D;
	}
.bluebutton:hover{
	background-color:#F09917;}
	
.yellowbutton{
	background-color:#FBCA04;}
.yellowbutton:hover{
	background-color:#171A2B;}	
	
h1{}/*page title*/
h2{
	font-size:30px;
	font-weight:600;
	}/*titles*/
h3{
	font-size:20px;
	font-weight:400;
	}/*subtitles*/
h4, h4 a{
font-size:14px;
color:#FFF;
/*font-weight:800;*/
}/*navigation*/

h4 a:hover{
	color:#FBCA04;
	}
	
h5{
font-size:12px;}	

body{
	background-color: #999999;
	width: 100%;
	height: 100%;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	background-image: url(../site_images/bgr1.png);
	background-repeat: repeat-y;
	background-size: 1000px;
	background-position: center;
	}
	
#topline{
	position:relative;
	height:20px;
	width:100%;
	background-color:#666;}
	
#wrap{
	width:1000px;
	height:auto;
	position:relative;
	margin-left:auto;
	margin-right:auto;	
	z-index:1001;
	
		}

header, main{
	width:960px;
	margin-top:10px;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	}
	
header{
	height:525px;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	background-color:#FFF;
	margin-top:60px;

}

.viewport{
	background-color:#333;
	position:absolute;
	margin-top:34px;
	z-index:999;
	overflow: hidden;
	
	}
	

.viewport, #box, .slide{		
	width:960px;
	height:320px;}
	
.slide {margin:0 auto;}

#headsect{
	width:960px;
	height:150px;
	position:absolute;
	margin-top:365px;
	}

#headsect article{
	width:320px;
	height:150px;
	float:left;
	
	
	}
#headsect .artborder{
	border-right: 1px solid #666;
	width:319px;
	} 
#headsect article p{
	margin-left:20px;
	color:#222C3D;
	text-align:justify;
	width:280px;}

#headsect article p a{
	color:#FBCA04;
	font-weight:bold;
	display:block;
	}
.headsect-img-holder{
	height:50px;
	width:300px;
	margin-left:20px;}
	
.headsect-img-holder img{
	width:40px;
	box-shadow: 2px 2px 2px #1F1F1F;
	}
.headsect-img-holder h2{
	color:#222C3D;
	width:230px;
	margin-left:50px;
	position:absolute;
	margin-top:-30px;

	}
main{
	height:400px;
	display:block;
	
	}
#top-contact{
	position:absolute;
	margin-left:465px;
	color:#666;
	margin-top:-10px;
	}

#top-contact span{
	font-size:20px;
	color:#333;
	}
	
	
nav{
	height:100px;
	background-image:url(../site_images/top_bar.png);
	background-size:100% 100px;
	width:984px;
	margin-left:50%;
	left:-488px;
	margin-top:-50px;
	position:absolute;
	z-index:1000;
}
nav img{position:absolute;}

nav ul{
	position:absolute;
	list-style-type: none;
	margin-top:45px;
    margin-left: 420px;
    padding: 0;
	}

#bname{
	position:absolute;
	margin-left:110px;
	margin-top:34px;
	}

#bname{
	
	color:red;
	font-family: 'Teko', sans-serif;
	font-weight:700;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	text-align:center;
}

#bname-span1, #bname-span3{
	font-size:20px;
	line-height:20px;}
#bname-span2{
	font-size:40px;
	line-height:40px;}
	
	
nav li{
	display:inline-block;
	margin-left: 35px;
    padding:0;
	text-align:center;
	}
	
.speakpl{
	margin-top:90px;
	margin-left:850px;}
	
.speakpl img{
	width:120px;
}
	
main section{
/*	height:600px;*/
	float:left;
	}
	
.left-section{
	width:317px;}

.right-section{
	width:637px;
	margin-left:6px;}

.left-section article, .right-section article{
	border-radius:10px;
}

#art-l-1{
	width:317px;
	background-color:#FBCA04;
	height:180px;
	
	}
#art-l-1 .button{
	
	width:120px;
	margin-top:135px;
	margin-left:20px;}

#art-l-1 h2{
	position:absolute;
	color:#FFF;
	margin-left:20px;
	margin-top:10px;}
	
#art-l-1 p{
	position:absolute;
	color:#222C3D;
	margin-left:20px;
	margin-top:50px;}
	
#art-l-1-img{
	width:150px;
	height:150px;
	position:absolute;
	margin-top:30px;
	margin-left:168px;
border-radius:10px;
overflow:hidden;
	
	}
#art-l-1-img img{
	width:150px;
	height:150px;
	}

	
#art-l-2{
	width:317px;
	background-color:#FFF;
	height:430px;
	margin-top:6px;}
	
#art-l-2 h2{
	position:absolute;
	color:#222C3D;
	margin-left:20px;
	margin-top:10px;}
	
#art-l-2 img{
	position:absolute;
	width:277px;
	margin-left:20px;
	margin-top:60px;}
	
#art-l-2 p{
	position:absolute;
	margin-left:20px;
	width:277px;
	margin-top:265px;
	color: #222C3D;
	text-align: justify;
	}
#art-l-2 p a{
color: #FBCA04;
margin-left:195px;
font-weight:bold;
}

#art-r-1{
	width:637px;
	height:250px;
	background-color:#222C3D;}
#art-r-1 h2{
	position:absolute;
	color:#FFF;
	margin-left:20px;
	margin-top:10px;
	}
#art-r-1 h2 span{
	font-size:19px;
	color:#FBCA04;
	font-weight:light;

	}
#art-r-1 p{
	position:absolute;
	color:#FFF;
	margin-top:50px;
	line-height:20px;}

#art-r-1-p1{

	margin-left:20px;
}
	
#art-r-1-p2{
	margin-left:220px;
}
	
#art-r-1-p3{
	margin-left:410px;
}
	
#art-r-1-p1 span, #art-r-1-p2 span, #art-r-1-p3 span{
	color:#FBCA04;}

#art-r-1 .button{
	
	width:120px;
	margin-top:205px;
	margin-left:20px;}
	
#art-r-2, #art-r-3{
	width:315px;
	height:360px;
	background-color:#FFF;
	margin-top:6px;
	float:left;
	}
	
#art-r-2 h2{
	position:absolute;
	color:#222C3D;
	margin-left:20px;
	margin-top:10px;}
	
#art-r-2 p{
	font-size: 19px;
	color: #FBCA04;
	font-weight: light;
	line-height:0px;
	margin-left:20px;
	}

.offer{
	position:absolute;
	height:130px;
	width:300px;
	margin-left:7px;
	}
.offer ul{
	width:240px;
	}

.offer ul li{
	color:#222C3D;
	line-height:20px;
	list-style:none;
	
	}
	
#sale-offer{
	margin-top:40px;
	}

#service-offer{
	margin-top:190px;
	}

#art-r-3{
	margin-left:6px;
	}
#art-r-3 h2{
	position:absolute;
	color:#222C3D;
	margin-left:20px;
	margin-top:10px;
	}
#art-r-3 iframe{
	
	position:absolute;
	margin-left:20px;
	margin-top:50px;
	}
#art-r-3 p{
	
	position:absolute;
	color:#222C3D;
	margin-left:20px;
	margin-top:300px;
	font-size:14px;
	}
	
/*contact page*/

#contactsection{
	width:960px;
	height:500px;}
	
#contact-form-container{
	background-color: #222C3D;
	border-radius:10px;
	width:560px;
	height:600px;
	float:left;
	color:#FFF;
	}
#contact-form-container p{
	margin-left:20px;
	width:520px;}
#alt-contact-container{
	background-color: #FBCA04;
	border-radius:10px;
	width:394px;
	height:600px;
	float:left;
	margin-left:6px;
	color: #222C3D;
	}
#alt-contact-container p{
	margin-left:20px;
	width:354px;}
#alt-contact-container p a{
	text-decoration:none;
	color: #222C3D;}
#alt-contact-container p span{
	color:#FFF;}
.m-btn .button{
	width:120px;
	border:0px;
	margin-top:20px;
	}
textarea{
	width:520px;
	height:300px;}

#send-msg{
	margin-left:160px;}

#cancel-msg{
	margin-left:20px;}

.m-input{
	margin-left:20px;
	border-radius:10px;
	border:0px;
	margin-top:20px;}

#form_frame{
	border:0px; 
	position:absolute;
	margin-left:300px; 
	width:250px; 
	height:55px; 
	margin-top:10px; 
	overflow:hidden
	
	}

/*location page*/

.locationsection{
	height:600px;
	border-radius:10px;
	}
#location-map{
	width:540px;
	float:left;
	background-color: #FBCA04;}
	
#location-map iframe{
	
	margin-left:20px;
	margin-top:20px;
	box-shadow: 2px 2px 2px #1F1F1F;
	}


#location-directions{
	width:414px;
	margin-left:6px;	
	background-color: #222C3D;}
#location-directions h2{
	color:#FBCA04;
	margin-left:20px;}
	
#location-directions ul {
	list-style:none;
	color:#FFF;
	width:373px;}
	
#location-directions ul li{
	margin-top:15px;
	margin-left: -10px;
margin-top: 15px;
width: 345px;
text-align: justify;}

/*about page*/


.aboutsection{
	
	width:960px;
	border-radius:10px;
}
	
.gallery{
	height:380px;
	background-color: #FBCA04;}
	
.thumbnailholder{
	height:340px;
	width:479px;
	margin-top:20px;
	float:left;	
}

.thumbnailholder h2{
color: #222C3D;
width: 230px;
margin-left: 20px;
position: absolute;
margin-top: -10px;}

.thumbnailholder table{
/*	width:420px;
	height:300px;*/
	margin-top:30px;
	border-spacing: 10px;
    border-collapse: separate;
	margin-left:auto;
	margin-right:auto;
/*	margin-top:auto;
	margin-bottom:auto;*/
	}
.thumbnailholder table td{
	background-color:#FFF;
	margin:10px;
	border-radius:10px;
	width: 130px;
	height: 130px;

}

table img{
		width: 130px;
	height: 130px;
	border-radius:10px;}

.thwork{
	border-right: 1px solid #666;
}
.texts{
	height:214px;
	background-color: #222C3D;
	margin-top:6px;
	}
	

/*services page*/

.servicessection{
	display:none;
	
	}

.servicessection h2{
	color: #FBCA04;
	margin-left: 20px;	
	}
	
	
.service-tyres{
	width:960px;
	border-radius:10px;	
	}
	
.service-tyres-head{
	height:100px;
	background-color:#222C3D;	
	}

.service-tyres-offer{
	height:700px;
	background-color:#FFF;
	margin-top:6px;	
	}
	
	
.service-tyres-offer div{
	float:left;
	height:700px;
	width:480px;}
	
.service-tyres-offer div table{
	margin-top:20px;
	margin-left:20px;}

th{
	font-weight:normal;
	color:#222C3D;
	text-align:left;
	border-bottom:1px solid #666}

th, td{
	height:40px;
	color:#222C3D;
}
.d1{
	width:50px;}
.d1 img{
	width:30px;
	height:30px;}
	
.d2, .d3{
	width:150px;
	}
.d4{
	width:60px;
	}
	
td.d4{
	color:#FBCA04;}
	
.service-tyres-foot{
	height:100px;
	background-color:#FBCA04;
	margin-top:6px;	
	}
.service-tyres-foot p{
	width:920px;
	margin-left:20px;
	display:block;
	color:#222C3D;}
.service-tyres-foot p a{
	display:inline;
	color:#222C3D;
	font-weight:bold;}

.service-service{
	float:left;
	border-radius:10px;
	height:600px;
	}
.service-service-left{
	width:354px;
	background-color:#222C3D;
	}
.service-service-left p{
	width:314px;
	margin-left:20px;
	margin-top:20px;
	text-align:justify;
	color:#FFF;
}
.service-service-right{
	width:600px;
	background-color:#FBCA04;
	margin-left:6px;
	}
	
.service-service-right h2{
	color:#222C3D;}
	
	
.service-service-right ul{
	list-style:none;
	color:#222C3D;
	}
.service-service-right div{
	width:220px;
	float:left;
	}


.serviceimage{
	width:150px;
	height:150px;
	margin-top:-40px;
	float:right;
	margin-right:-10px;
	}

.servicessection.service-general1{
	width:960px;
	height:160px;
	background-color:#222C3D;
	border-radius:10px;	
	}	
.service-general2, .service-general3, .service-general4{
	height:300px;
	width:316px;
	float:left;
	margin-top:6px;
	border-radius:10px;} 

.service-general3, .service-general4{
	margin-left:6px;}
.service-general2, .service-general4{
	background-color:#FBCA04;}

.service-general3{
	background-color:#222C3D;
	}


.service-general p {
	
	color:#FFF;
	width:920px;
	margin-left:20px;
	text-align:justify;}
	
footer{
	position:absolute;
	height:100px;
	background-color:#666;
	width:100%;
	bottom:0;
	margin-bottom:-600px;
	z-index:1000;
	
	}