﻿/***** 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;}

.clear {clear:both;}

/***** END RESET *****/

.view-listing-details-link span, .view-listing-details-link i {
	color:white!important;
}

body {
	font-family:Arial, Helvetica, sans-serif;
	color:#000;
	font-size:14px;
	margin:0px auto;
}

h2 {
	font-size:18px;
}

a:link, a:visited, a:active {
	color: #000;
}

a:hover {
	color:#666666;
}

#header {
	height:222px;
	background:#fff url('../siteart/header-bg.jpg') repeat-x bottom center;
}

#header div {
	width:845px;
	margin:0px auto;
	padding:0px 0px 0px 50px;
}

#logo {
	float:left;
	margin:30px 0px;
}

#header #tractor {
	float:right;
	margin-right:20px;
	position:relative;
	top:15px;
    z-index: 1000;
}

.map{
    width:90%
    }   


/******MAIN NAVIGATION same as used for CMS******/
/* This horizontal navigation has 4 dropdown levels, but you can change it to include more levels if necessary.*/

.navigation_container { /* 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. */
    height: 48px;
    background: url('../siteart/nav-bg.png') repeat-x top center;
	width:100%;
}
 
.main-nav {
    position:relative;
    display:block;  
	width: 40%;
    margin: 0px auto;
    padding: 3px 0px;
    text-align: center;
}
 
.main-nav ul, .main-nav li {
    list-style: none;  
    margin:0 0 0 0;
    padding:0 0 0 0;  
}
 
.main-nav ul li {
    display: block;
    position: relative;
    float:left;
    text-align:center;
}
 
.main-nav li ul {
    display: none;
}
 
 
.main-nav ul li a { /* appearance of the first-level links */
	display: inline-block;
    font-size: 14px;
    color: #000;
    text-decoration: none;
}


.main-nav ul li a:hover { /* appearance of the first-level links on hover */
    color:#666666; 
}
 
 
 
.main-nav ul li li a { /* appearance of the sub-level links */
	width:215px;
    color:#fff !important;
	padding: 13px 12px 13px 12px;
    text-align:left;	
}
.main-nav ul li li a:hover { /* appearance of the sub-level links on hover */
    color:#000 !important; 
    background:#F4F232 !important;
}
 
 
 

/* 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! */
.main-nav ul ul {
    display: none;
    position: absolute; 
    top:100%;
	left:0;
}
 
.main-nav ul ul ul {
    position: absolute; 
    left: 100%;
    top:0; 
}
 
.main-nav ul li:hover > ul {  
    display: block;
    line-height:14px; /* make sure your line-height always matches that of your main link styles!*/
    z-index: 100;
    color:white;
	background:#000; /* make sure your background color always matches your link styles!*/
}
 
.main-nav ul ul li {
    float: none; 
    position: relative;
}
 
/******MAIN CMS NAVIGATION END******/

#menu-button{display: none;}

nav.mobile {display:none;}

.main-nav {
	height:48px;
	background:url('../siteart/nav-bg.png') repeat-x top center;
}

.main-nav div {
	margin:0px auto;
	padding:3px 0px;
	text-align:center;
	
}

.main-nav ul li {
	display:inline;
}

.main-nav a:link, .main-nav a:active, .main-nav a:visited {
	display:inline-block;
	font-size:14px;
	color:#000;
	text-decoration:none;
}

.main-nav a:hover {
	color:#666666;
}

#item {
	padding:13px 12px 13px 12px;
	background:url('../siteart/divider.png') no-repeat left;
}

#last {
	padding:13px 12px 13px 12px;
	background: url('../siteart/divider-last.png') no-repeat left;
	width:75px;
	text-align:left;
}

#content {
	padding:20px 0px 20px 70px;
	background:#fff;
    height:640px;
}

#content-ship {
	padding:20px 0px 20px 70px;
	background:#fff;
    height:840px;
}

.whole-content{
    width:100%;
    max-width:800px;
    margin:0 auto
}


.whole-content-ship{
    width:100%;
    max-width:800px;
    margin:0 auto
}


#middle_inventory {
	max-width:1025px;
    width:100%;
	margin:0px auto;
}

#middle {
	width:55%;
    float:left;
	margin:15px auto;
}

#middle-ship {
	width:55%;
    float:left;
	margin:15px auto;
}

#right-box {
	float:right;
	margin-top:10px;
    margin-right:80px;
    margin-bottom:20px;
	width:190px;
	height:318px;
    background-color:#EBEBEB;
    border:3px solid #CFCFCF;
    border-radius:8px;
    box-shadow: 5px 5px 10px #CFCFCF;
	padding:20px 35px 0px 35px;
}

#right-box-ship {
	float:right;
	margin-top:10px;
    margin-right:80px;
    margin-bottom:20px;
	width:190px;
	height:318px;
    background-color:#EBEBEB;
    border:3px solid #CFCFCF;
    border-radius:8px;
    box-shadow: 5px 5px 10px #CFCFCF;
	padding:20px 35px 0px 35px;
}


/*  scrolling inventory
------------------------------------------------*/
.scrolling-wrap {
    width:100%;
    height:90px;
    overflow:hidden;
    margin-bottom:20px
}
 
.scrolling{
    width:100%;
    height:92px;
    margin-bottom:20px;
}

#content2 {
	padding:20px;
	background:#fff;
}

#content2 div {
	margin:0px auto;
}


#content #info img {
	border:3px solid #b8b8b8;
}

#featured {
	margin-top:30px;
	max-width:450px;
    width:100%;
}


.express {float:right; width:200px; margin-bottom:20px;}
.express img {width:100%;}

#bottom-bar {
	height:48px;
	background:url('../siteart/nav-bg.png') repeat-x top center;
}

#footer {
	height:183px;
	background:url('../siteart/footer-bg.jpg') repeat-x top center;
	text-align:center;
}

#footer div {
	width:90%;
	margin:0px auto;
	padding:15px 0px;
}

a.footerlink:link, a.footerlink:visited, a.footerlink:active{text-decoration:underline; font-family:Arial, Helvetica, sans-serif;font-size:13px; color:#fff;}
a.footerlink:hover {text-decoration:none; font-family:Arial, Helvetica, sans-serif;font-size:13px; color:#fff;}
.footertext{font-family:Arial, Helvetica, sans-serif;font-size:13px; color:#cccccc;}
.smallfootertext{font-family:Arial, Helvetica, sans-serif;font-size:10px; color:#cccccc;}
.divfooter {width:450px; text-align:center; margin:0 auto;}

.right-box h2 {font-size:18px;}

@media screen and (max-width: 1400px)  {

/*==============================
		Mobile Nav Styles			
================================*/	
 
#menu-button{display: block;}
 
	.main-nav{display:none;}
    
	#menu-button{ 
		width: 100%;
		display: block;
        background:transparent;
		font-size: 24px;
		line-height:40px; 
        margin-top:0px;
        padding-top:5px;
        margin-bottom:0px;
		}
    
		#menu-button a{
			 color:#000;
			 text-decoration: none;
			 padding:0 0 0 .8em; 
            padding-right:40px;
			 font-weight:normal;
		  }
	nav.mobile {
		display:block;
		position: fixed;
		top: 0;
        background:#161616;
		left: -300px;
		width: 300px;
		height: 100%;
        text-align:left;
		z-index: 99999999; /* needs to be higher than #menu-button, adjust as needed */
		overflow:auto;
        box-shadow: 0px 0px 10px -1px #232323;
	}
	/* MENU HEADER SOCIAL MEDIA */
		nav.mobile .social-media {
			position: relative;
			text-decoration: none;
			display: inline-block;
			font-size:16px;
			word-spacing:13px;
			padding:0 0 0 15px;
			color: #ccc !important;
		}

		nav.mobile .social-media a:link, nav.mobile .social-media a:visited {color:#ccc; text-decoration:none;}
		nav.mobile .social-media a:hover, nav.mobile .social-media a:active {color:#fff; text-decoration:underline;}

	/* MENU HEADER STYLES */
	nav.mobile .mobile_top {
		position: relative;
		display:block;
		padding: 0;
		margin:15px 0 10px 0;
		color: #999;
		font-size: 18px;
		font-weight: 400;
	}

	/* MENU CLOSE 'X' BUTTON */
	nav.mobile .menu-toggle {
		position: absolute;
		padding: 3px 8px 3px;
		font-family: Arial, sans-serif;
		font-size:24px;
		font-weight: bold;
		line-height: 1;
		color: #fff;
		text-decoration: none;
		top:-4px;
		right:13px;
	}

	/* MENU LIST STYLE */
	nav.mobile ul {
		list-style: none;
		font-weight: 300;
		margin:0;
		padding:0;
	}
	nav.mobile ul li {
		border-bottom:1px solid #353535;
		position:relative;
        margin:0px 10px
	}

	/* FIRST LEVEL */
	nav.mobile ul li a {
		position: relative;
		display: block;
		font-size:15px;
		padding: 10px;
		color: #fff !important;
		text-decoration: none;
        font-weight:500;
	}
	nav.mobile ul li a:hover {
		border-bottom:1px solid #fff;
        padding: 10px 10px 9px 10px;
	}
    
    .nav-footer {
    color:#7E7E7E; 
    position:relative; 
    text-align:center; 
    font-size:12px; 
    line-height:16px; 
    padding:20px 0 15px 0px;
}
}

@media screen and (max-width: 950px)  {
    #tractor{
        float:none;
        display:none
    }
    
    #logo {
	float:center;
	margin:0 auto;
}

#header div {
	width:35%;
	margin:0px auto;
	padding:50px 0px 0px 0px;
}
    
#content {
    height:1000px;
    padding:20px 30px;
}
    
#content-ship {
    height:1100px;
    padding:20px 30px;
}
  
    
.whole-content{
    width:100%;
    max-width:100%;
    margin:0 auto
}
    
.whole-content-ship{
    width:100%;
    max-width:100%;
    margin:0 auto
}    

#middle {
	width:100%;
    float:none;
	margin:15px auto;
}
 
#middle-ship{
	width:100%;
    float:none;
    text-align:center;
	margin:15px auto;
    padding-right:30px
}
 
#right-box {
	float:none;
	width:90%;
    height:250px;
    text-align:center;
    margin-right:0px;
    }

 #right-box-ship {
	float:none;
	width:90%;
    height:230px;
    text-align:center;
    margin-right:0px;
    }   
    
#featured {
	margin-top:30px;
	max-width:100%;
    width:100%;
}    

.map{width:100%}    

}

@media screen and (max-width: 750px)  {

#header div {
	width:45%;
}
    
#right-box {
	width:85%;
}
    
#right-box-ship {
	width:85%;
}    
    
}

@media screen and (max-width: 600px)  {

#header div {
	width:65%;
}
    
    
}

@media screen and (max-width: 500px)  {
    
#right-box {
	width:83%;
}
    
#right-box-ship {
	width:83%;
}
    
    
}


@media screen and (max-width: 450px)  {
    
#right-box {
	width:75%;
}
    
#right-box-ship {
	width:75%;
}
#featured img {
	height:150px
}    
#header div {
	width:85%;
	margin:0px auto;
	padding:50px 0px 0px 0px;
}
#content {
    height:950px;
    padding:20px 30px;
}       
    
}
