﻿/* 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; box-sizing: border-box; font-family: 'Roboto Condensed', sans-serif; font-style:normal;}

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;} 

/* Clearfix */
.cf:before,.cf:after {content: " "; display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}
*, *:before, *:after {box-sizing: inherit;}

/* BASIC STYLES */
.show-menu-for-mobile {display:none;}

body {font-size:14px; line-height:20px; -webkit-text-size-adjust:none; background: #fff; overflow-x:hidden;}
#contentwrapper {width:90%; margin:0 auto;}
h1 {font-weight:700; font-size: 48px; line-height: 44px; color:#fff;}
h2 {font-size: 32px; line-height: 44px; color:#007DD1;}
h2:hover {color:#006c48;}
h3 {font-size:18px; color:#006c48;}
h4 {font-size: 32px; line-height: 44px; color:#005a94;}

a:link, a:visited, a:active {text-decoration:none; color: inherit;}
a:hover {text-decoration:none; color:#005a94;}

/* HEADER */
.logo img {width:100%;margin-bottom: -67px;}

/* NEW HEADER LAYOUT */
header {max-width: 100%;}
.topheaderwrap {width: 100%; padding: 10px 5% 0 5%; background:url(../siteart/bg.jpg) repeat; background-color:#000;}
.headerright {width: 70%; float: left; text-align: right; padding-top: 10px;}
.headerBtn {width: 9%; float: left; text-align: right; padding-top: 15px;}
.logo {float:left; width:21%;}
.show-mobile {display: none;}

.headerright img {display: inline-block;}
.headLocationTxt {color: #fff!important; font-size: 16px; padding: 2px 0;}
.headLocationTxt .green {color: #00a76f!important;}
.headLocationTxt a {color: #fff!important;}
.headLocationTxt a:hover {color: #2899e2!important;}
.green-btn {
    padding: 15px 30px;
    background: #006c48;
    font-size: 15px;
    line-height: 14px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
	border: none;
	font-family: 'Roboto Condensed',sans-serif;
}
.green-btn:hover {background-color: #005a94; cursor: pointer;}
.green-btn img {display: inline; width: 100%; max-width: 30px; height: auto;}




/* CONTENT STYLES */
#main {width:100%; margin:0 auto;}
#main img {width:100%;}

#wrapper {background:url(../siteart/bg.jpg) repeat; background-color:#000;}
#wrapper img {width:100%;}
.tagline {width:50%; position:absolute; text-align:center; vertical-align:middle; padding-top:195px;}
.topleft {width:49.92%; float:left;}
.topright {width:49.92%; float:right;}
.bottomleft {width:49.92%; float:left;}
.bottomright {width:49.92%; float:right;}
.wrapperline {border-top:1px solid #ccc; width:50%; margin:.5em auto;} 

#inventorywrap {width:75%; margin:1em auto;}
.hosted-content #listings-title {color:#000 !important;}

/* FOOTER */
.footerleft {float:left; width:60%; padding:1.25em 0;}
.footerleft a {color:#000;}
.line {border-top:1px solid #ccc; width:75%; margin:.5em 0;} 
.footerright {float:right; width:10%; padding:3em 0 0;}
.footerright img {width:100%;}

a.footerlink:link, a.footerlink:visited, a.footerlink:active{font-size:11px; color:#000;}
a.footerlink:hover {font-size:11px; color:#006c48;}
.footertext{font-size:11px; color:#000;}
.smallfootertext{font-size:11px; color:#000;}
.divfooter {width:100%; line-height:16px;}

footer {background:url(../siteart/trucktitle.jpg) repeat; width:100%; padding:1em 0; text-align:center; color:#ccc; background-color:#000;}
.bottomnav a {color: #fff; font-size:14px;}
.bottomnav a:hover {color:#006c48;}

/* FORM */
#formpage {vertical-align:top; margin-bottom:2em;}
#formpage div {vertical-align:top; padding:3px 5px;}
#formpage input {padding:6px 5px; border:1px solid #8e8d8d; color:#8e8d8d; font-size:12px;}
#formpage textarea {padding:6px 5px; border:1px solid #8e8d8d; color:#8e8d8d; font-size:12px;}
 
/* selects have similar styles to input & textarea fields, but with no padding. Text in a dropdown select is positioned differently */
#formpage select {border:1px solid #8e8d8d; color:#8e8d8d; vertical-align:middle; font-size:12px; line-height:normal; padding:5px;}
#formpage input  {width:100%;}
#formpage input.larger  {width:100%;}
#formpage textarea {width:100%; height:85px;}

/* focus states of various types of fields */
#formpage input:focus,
#formpage textarea:focus,
#formpage select:focus {color:#000; border:1px solid #005a94; outline-style:none;}
#formpage input.button,#formpage input.button:focus {width:200px; padding:7px 0; background:#006c48 url('../siteart/submit_btn.jpg') repeat-x; font-size:14px; line-height:14px; font-weight:bold; color:#fff; text-transform:uppercase;}
#formpage input.button:hover {background:#005a94; color:#fff;}
 
 /*control the Captcha */
.captcha {width:25%; text-align:left;}
.CaptchaPanel {margin:0 0 0 0 !important; padding:0 0 0 0 !important; text-align:left !important; line-height:normal !important;}
.CaptchaImagePanel {margin:0 0 0 0; padding:0 0 0 0;}
.CaptchaMessagePanel {padding:0 0 0 0 !important; margin:0 0 0 0 !important; font-weight:normal !important; font-size:12px; line-height:14px;}
.CaptchaAnswerPanel {margin:0 0 0 0; padding:2px 0px 2px 0px !important;}
.CaptchaWhatsThisPanel {line-height:0; margin:0 0 0 0; padding:8px 0 8px 0 !important;}
.CaptchaWhatsThisPanel a {color:#000;}
.CaptchaWhatsThisPanel a:hover {text-decoration:none;} 
 
 
/*NAVIGATION*/
.navwrap {background:#fff; max-width: 100%;}

#nav {position:relative; display:block; z-index:9000;width:100%;}
#nav ul, nav li {list-style: none;}
#nav ul li {display: block; position: relative; float:right; 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-size:22px;
    line-height:30px;
    transition:color .2s ease-in-out; -moz-transition:color .2s ease-in-out; -webkit-transition:color .2s ease-in-out;
    padding:25px 17px;  
    height: 1%;
    text-transform: uppercase;
    text-align:right;
	font-weight:700;
}
 
#nav ul li a:hover {color:#005a94;}
/* appearance of the sub-level links*/
#nav ul li li a { 
    width:215px;
    padding:8px 0 8px 15px;
    text-align:left;
    background:#005a94;
    border-bottom:1px #005a94 solid;
    border-right: 1px solid #005a94;
    border-left: 1px solid #005a94; 
	color:#fff;   
}   
/* appearance of the sub-level links on hover */
#nav ul li li a:hover { 
	color:#fff; 
	background:#006c48;
	border-bottom:1px #006c48 solid;
    border-right: 1px solid #006c48;
    border-left: 1px solid #006c48;
}
   
/* 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; z-index: 100; background:#000; /* make sure your background color always matches your link styles!*/}
#nav ul ul li {float: right;  position: relative;}  


/*NEW STYLES*/
.map-wrap {width: 100%; background-image: url('/siteart/trucktitle.jpg'); background-repeat: repeat; background-color: #444; padding: 30px 5%; float: left;}
.map-section {width: 50%; float: left; padding: 10px; box-sizing: border-box;}
.map {width: 100%; height: 350px;}
.map-head {text-transform: uppercase; padding-bottom: 15px; font-size: 30px; color: #00a76f!important;}

.border-bottom {border-bottom: solid 2px #ebebeb;}
.content-wrap {padding: 50px 5%;}
.blue {color: #005a94;}
.green {color: #006c48;}
.bold {font-weight: 900;}
.center {text-align: center;}

/*Location Edits*/
.location-wrap {width: 100%; float: left; padding: 20px 0;}
.location-space{width: 50%; float: left; padding: 5px;}
.location-box {border: solid 2px #ccc; padding: 30px;}
.location-head {text-transform: uppercase; padding-bottom: 10px; font-size: 25px;}

.btn-wrap {padding-top: 15px!important;}
.blue-btn {
    padding: 10px 20px;
    background: #005a94;
    font-size: 14px;
    line-height: 14px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
	border: none;
	font-family: 'Roboto Condensed',sans-serif;
}
.blue-btn:hover {background-color: #006c48; cursor: pointer;}

.contact-map {width: 100%; height: 300px; padding-bottom: 20px;}

.view-listing-details-link {
	color: #fff !important;
}

/*------------QUICK LINK BTNS--------------*/
.quick-link-btns {
	display: none;
	width: 100%;
}
.fw-btn {
    padding: 10px 20px;
    background: #005a94;
    font-size: 14px;
    line-height: 14px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
	border: solid 1px #fff;
	font-family: 'Roboto Condensed',sans-serif;
	width: 50%;
	float: left;
}
.fw-btn:hover {background-color: #006c48; cursor: pointer;}

h1.detail__title {color:#000!important;}
 
/************************************************ Responsive Styles **/

@media only screen and (max-width: 1700px) {
	.topheaderwrap {width: 100%; padding: 10px 5%;}
	.headerright {padding-top: 0;}
	.headerBtn {padding-top: 0;}
}
@media only screen and (max-width: 1600px) {
	.logo {width: 20%;}
	.headerright {width: 70%;}
	.headerBtn {width: 10%; }
}
@media only screen and (max-width: 1400px) {
	.logo {width: 25%;}
	.headerright {width: 60%;}
	.headerBtn {width: 15%; }
}

@media only screen and (max-width: 1100px) {
	.headLocationTxt {font-size: 13px; padding: 0;}
	.green-btn {padding: 10px 20px;}
}

@media only screen and (max-width: 1023px) {
	.quick-link-btns {display: block;}
}

@media only screen and (max-width: 900px) {
	.headerright {display: none;}
	.logo {width: 35%;}
	.headerBtn {width: 65%; }
	.green-btn {padding: 15px 20px;}
	.show-mobile {display: inline-block;}
}

@media only screen and (max-width: 700px) {
	.logo {width: 50%;}
	.headerBtn {width: 50%; }
}
@media only screen and (max-width: 550px) {
	.show-mobile {display: none;}
	.logo {width: 65%;}
	.headerBtn {width: 35%; }
	.green-btn {font-size: 12px; padding: 10px 15px;}
	.fw-btn {width: 100%;}
	.quick-link-btns {margin-top:10px;}
}


@media screen and (max-width: 1480px) and (min-width:1224px) {

#nav ul li a {padding:25px 15px; font-size:20px;}
.topright {width:49.75%;}
.bottomleft {width:49.75%;}
.tagline {padding-top:125px;}
.footerleft {width:70%;}
.footerright {width:12%;}
}



@media screen and (max-width: 1223px) and (min-width:1024px) {
h1 {font-size:36px;}
h2 {font-size:32px;}

#nav ul li a {padding:25px 10px; font-size:18px;}

.topright {width:49.75%;}
.bottomleft {width:49.75%;}
.tagline {padding-top:80px;}
.footerleft {width:80%;}
.footerright {width:15%;}
}


@media screen and (max-width: 1023px) and (min-width:650px) {
.show-menu-for-mobile {display: block;}
.hide-for-mobile {display:none;}
.hide {display:none;}

h1 {font-size:28px; line-height:32px;}
h2 {font-size:24px; line-height:28px;}


.topright {width:49.5%;}
.bottomleft {width:49.5%;}
.tagline {padding-top:50px;}

#inventorywrap {width:90%;}

.captcha {width:75%;}

.footerleft {width:100%;}
.footerright {display:none;}

/******************styles for the main site navigation during mobile display*************/
#navicon {
	float: right;
	font-size: 32px;
	font-size: 2em;
	text-decoration: none;
	position: relative;
	z-index: 99999999999999999;
	margin: .75rem 0 0 0.5rem;
	color:#000;
	padding:10px 0 30px;
}
#nav  {display:none;}
}


@media only screen and (max-width: 950px) {
	.map-section {width: 100%;}
	.map {height: 300px;}	
	.content-wrap {padding: 30px 5%;}
}
@media only screen and (max-width: 675px) {
	.location-space {width: 100%; padding: 5px 0;}
}

@media screen and (max-width: 650px) and (min-width:421px) {
.show-menu-for-mobile {display: block;}
.hide-for-mobile {display:none;}
.hide {display:none;}

h1 {font-size:22px; line-height:24px;}
h2 {font-size:20px; line-height:22px;}


.topright {width:49%;}
.bottomleft {width:49%;}
.tagline {padding-top:20px;}

#inventorywrap {width:90%;}

.captcha {width:75%;}
#formpage input.button,#formpage input.button:focus {width:100%;}

.footerleft {width:100%;}
.footerright {display:none;}

/******************styles for the main site navigation during mobile display*************/
#navicon {
	float: right;
	font-size: 32px;
	font-size: 2em;
	text-decoration: none;
	position: relative;
	z-index: 99999999999999999;
	margin: .75rem 0 0 0.5rem;
	color:#000;
	padding:5px 0 20px;
}
#nav  {display:none;}
}
 

@media screen and (max-width: 420px) and (min-width:360px) {
.show-menu-for-mobile {display: block;}
.hide-for-mobile {display:none;}
.hide {display:none;}

h1 {font-size:28px; line-height:24px;}
h2 {font-size:24px; line-height:22px;}
h3 {font-size:16px;}


.topright {display:block; width:100%;}
.topleft {display:block; width:100%;}
.bottomright {display:block; width:100%;}
.bottomleft {width:100%;}
.tagline {width:100%; padding-top:75px;}

#inventorywrap {width:90%;}

.captcha {width:100%; margin:0 auto;}
#formpage input.button,#formpage input.button:focus {width:100%;}

.footerleft {width:100%;}
.footerright {display:none;}
.bottomnav a {font-size:11px;}

/******************styles for the main site navigation during mobile display*************/
#navicon {
	float: right;
	font-size: 32px;
	font-size: 2em;
	text-decoration: none;
	position: relative;
	z-index: 99999999999999999;
	margin: .75rem 0 0 0.5rem;
	color:#000;
	padding:5px 0 20px;
}
#nav  {display:none;}
}
 

@media screen and (max-width: 359px){
.show-menu-for-mobile {display: block;}
.hide-for-mobile {display:none;}
.hide {display:none;}

h1 {font-size:22px; line-height:24px;}
h2 {font-size:20px; line-height:22px;}
h3 {font-size:16px;}


.topright {display:block; width:100%;}
.topleft {display:block; width:100%;}
.bottomright {display:block; width:100%;}
.bottomleft {width:100%;}
.tagline {width:100%; padding-top:30px;}

#inventorywrap {width:90%;}

.captcha {width:100%; margin:0 auto;}


.footerleft {width:100%;}
.footerright {display:none;}
.bottomnav a {font-size:11px;}

/******************styles for the main site navigation during mobile display*************/
#navicon {
	float: right;
	font-size: 32px;
	font-size: 2em;
	text-decoration: none;
	position: relative;
	z-index: 99999999999999999;
	margin: .75rem 0 0 0.5rem;
	color:#000;
	padding:0px 0 15px;
}
#nav  {display:none;}
}
