﻿/***** BEGIN RESET *****/

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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;	
}

ol, ul {
	list-style: none;
}

table{border-collapse:collapse; width:100%;}
td{vertical-align:top;}

/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address, img {  
    display: block;  
} 

/***** END RESET *****/

/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

h1 {font-family: 'Montserrat', sans-serif; font-size:26px; line-height: 26px; font-weight: 700;  text-transform: uppercase;}
h2 {font-family: 'Montserrat', sans-serif; font-size:38px; line-height: 40px;font-weight: 700;text-transform: uppercase;}
h4 {font-family: 'Montserrat', sans-serif; font-size:18px; line-height: 22px; font-weight: 700;  text-transform: uppercase;}
body {font-family: 'Montserrat', sans-serif; font-size:16px; line-height: 24px; font-weight: 400; background: url(../siteart/subtle_dots.png) repeat; background-attachment: fixed !important; -webkit-text-size-adjust:none;}
a:link, a:visited, a:active {text-decoration:none; color:#2a2a2a;}
a:hover {text-decoration:underline; color:#2a2a2a;}

.show-menu-for-mobile {display:none;}

.header {width: 90%; max-width: 100%; margin: 0 auto; font-size: 18px; font-weight: 700; padding: 30px 0px;}
.logo {display: inline-block; float: left; max-width: 100%; height: auto;}
.logo img{max-width: 100%; height: auto;}
.header-con {float: right; display: inline-block; text-align: right; color: #000; font-size: 18px;}
.cf {width: 90%; max-width: 100%; margin: 0 auto !important; padding: 1% !important; box-sizing: border-box;}

.container {height: auto !important; border-top: 2px solid #ffe410!important; border-bottom: 2px solid #ffe410!important;}
.container-blur {background:url(../siteart/bg.png); margin:0px auto; height:auto; width:100%; background-repeat:no-repeat; background-attachment: fixed; background-position:center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; text-align: center; border-bottom: 2px solid #ffe410; padding: 20px 0px;}
.wrapper {width: 90%; max-width: 100%; margin: 0 auto; padding: 40px 0px;}
.home-wrapper {width: 90%; max-width: 100%; margin: 0 auto; padding: 40px 0px;}

.logo-wrapper {width: 90%; max-width: 100%; margin: 0 auto; text-align: center; padding: 0px 0px;}
.logo-wrapper img{height: auto; max-width: 100%; display: inline-block; padding: 0px 3%;}

.left {width: 49%; max-width: 100%; display: inline-block; vertical-align: top; box-sizing: border-box;}
.right {width: 49%; max-width: 100%; display: inline-block; vertical-align: top;  box-sizing: border-box;}
.left img {max-width: 100%; max-height: 350px; height: 100%; border: 1px solid #ccc;}
/******MAIN NAVIGATION same as used for CMS******/
.nav_background { /* container to center the nav within a standard width of 1020px, or adjust to width of your site. Links will always float left or right. */
    text-align:center;
    background:#ffe410 url("../siteart/nav.png") repeat-x;
}
  
#nav {
    position:relative;
    display:block;  
    z-index:9000;
    margin:0 auto 0 auto;
    padding:0 0 0 0;
    text-align:center;
    width:1200px;
    max-width: 100%;
}
  
#nav ul, #nav li {
    list-style: none;  
    margin:0 0 0 0;
    padding:0 0 0 0;  
}
  
#nav ul li {
    display: block;
    position: relative;
    float:left;
    text-align:center;
}
  
#nav li ul {
    display: none;
}
  
  
#nav ul li a { /* appearance of the first-level links */
    display: block;
    text-decoration: none;
    color: #000;
    font-weight:700;
    font-size:14px;
    line-height:19px;
    transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out;
    padding:16px 20px;  
    height: 1%;
    text-transform: uppercase;
    text-align:center;
    font-family: 'Montserrat', sans-serif;
}
 
 
#nav ul li a:hover { /* appearance of the first-level links on hover */
    height: 1%; 
    color:#fff; 
    background: #e2ca0e;
}
  
  
  
#nav ul li li a { /* appearance of the sub-level links */
    width:215px;
    padding:8px 0 8px 15px;
    text-align:left;
    background:#090909;
    border-bottom:1px #333 solid;
    border-right: 1px solid #333;
    border-left: 1px solid #333;    
}
#nav ul li li a:hover { /* appearance of the sub-level links on hover */
    color:#fff; 
    background:#4b0000 url("../siteart/nav-ro-bg.jpg") repeat-x;     
}
  
  
  
/* Optional-use, Begin targeting styles of first and last links */
#nav ul li:last-child  { /* Optional-use, this targets last li */
    border-left:0;
    border-right:0;
}
#nav ul li:last-child a {
    border-left:0;
    border-right:0;
}
#nav ul li:first-child  { /* Optional-use, this targets first li */
    border-left:0;
    border-right:0;
}
  
/* Optional-use, cancells out border for subnav li containers*/
#nav ul li li:last-child  {
    border-left:0;
    border-right:0;
}
#nav ul li li:last-child a {
    border-right: 1px solid #333;
}
#nav ul li li:first-child  {
    border-left:0;
    border-right:0;
}
/* Optional-use, End targeting styles of first and last links */
  
  
  
/* Unless needing to do something extra or experimental, DON'T edit these positioning styles below! */
#nav ul ul {
    display: none;
    position: absolute; 
    top:100%;
    left:0;
}
  
#nav ul ul ul {
    position: absolute; 
    left: 100%;
    top:0; 
}
  
#nav ul li:hover > ul {  
    display: block;
    line-height:18px; /* make sure your line-height always matches that of your main link styles!*/
    z-index: 100;
    background:#4b0000; /* make sure your background color always matches your link styles!*/
}
  
#nav ul ul li {
    float: none; 
    position: relative;
}

/*--------Scrolling Inventory--------*/
.mobilecontainer { 
	overflow:hidden; /* must have this property for mobile phones and tablet display! */
	width:100%; 
	margin:0 auto;
	height:92px; 
	padding: 10px 0px;
	background:#fff;
}
iframe.banner {
	width:100%;
	height:92px;
	background:#fff;
}	

button {background: #ffe410; color: #000; border: none; font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 700; padding: 10px; cursor: pointer; text-align: center;}
	

.footer {background: #000; border-top: #ffe410 2px solid; max-width: 100%;color:#fff;}
.footwrap {width: 90%; max-width: 100%; margin: 0 auto; padding: 30px 0px; vertical-align: top;}
.divfooter {width:600px; max-width: 100%; text-align:right; float: right; display: inline-block; margin:0 auto;}
.footer a:link, .footer a:visited, .footer a:active {text-decoration:none; color:#ffe410;}
.footer a:hover {text-decoration:underline; color:#ffe410;}

.quicklinks {float: left; display: inline-block;}

/************************************************ Responsive Styles **/
@media screen and (max-width: 1280px){
.show-menu-for-mobile {display: none;}
#nav ul li a {font-size:13px; line-height:20px; padding:16px 16px;}
#nav {
    position:relative;
    display:block;  
    z-index:9000;
    margin:0 auto 0 auto;
    padding:0 0 0 0;
    text-align:center;
    width:991px;
    max-width: 100%;
}


}

@media screen and (max-width: 1023px){
.show-menu-for-mobile {display: block;}
.hide-for-mobile {display:none;}
.hide {display:none;}
/******************styles for the main site navigation during mobile display*************/
#navicon {
	float: left;
	font-size: 32px;
	font-size: 2em;
	text-decoration: none;
	position: relative;
	z-index: 99999999999999999;
	margin: 0.25rem 0 0 0.5rem;
	color:#000;
}
#nav  {display:none;}

h1 {font-size:24px; line-height: 26px;}
h2 {font-size:32px; line-height: 40px;}
body {font-size:14px; line-height: 24px; -webkit-text-size-adjust:none;}

.header {text-align: center;}
.logo {float: none;}
.header-con {float: none; text-align: center; font-size: 16px;}

.footwrap {text-align: center;}
.divfooter {width:600px; max-width: 100%; text-align:center; float: none; display: inline-block; margin:0 auto;}
.quicklinks {display:none;}

.home-wrapper {text-align: center;}
.left {width: 90%; max-width: 100%; display: inline-block; vertical-align: top; float: none; text-align: center;}
.right {width: 90%; max-width: 100%; display: inline-block; vertical-align: top; float: none; padding-bottom: 20px;}
	.left img {display: inline-block; max-height: auto !important;}
	
.enquiryform input {width:100%;}
.enquiryform select {width:100%;}
.enquiryform .full-field {width:100%;}
.enquiryform .xl-field {width:100% !important;}
.enquiryform .short-field {width:100% !important;}
.enquiryform .short-field {width:100% !important;}
.enquiry {width: 100%; text-align: center;}

.parts {width: 50%; }

}
 
 

@media screen and (max-width: 320px){
.show-menu-for-mobile {display: block;}
.hide-for-mobile {display:none;}
.hide {display:none;}
/******************styles for the main site navigation during mobile display*************/
#navicon {
	float: left;
	font-size: 32px;
	font-size: 2em;
	text-decoration: none;
	position: relative;
	z-index: 99999999999999999;
	margin: 0.25rem 0 0 0.5rem;
	color:#000;
}
#nav  {display:none;}

.header-con {font-size: 14px;}

.logo-wrapper img{padding: 0px;}

.parts {width: 100%; }

.divTableCell, .divTableHead {
	border-right: 1px solid #999999;
	border-top: 1px solid #999999;
	border-left: 1px solid #999999;
	display: inline-block;
	padding: 1% 0px;
	text-align: center;
	width: 100%;
}

.divTableCelllast {
	border-right: 1px solid #999999;
	border-top: 1px solid #999999;
	border-left: 1px solid #999999;
	display: inline-block;
	padding: 1% 0px;
	text-align: center;
	width: 100%;
}

.divTableHeading {
	background-color: none;
	display: inline-block;
	font-weight: bold;
}

#empty {display: none;}

}
