﻿/***** BEGIN RESET *****/
* {
    background:transparent;
    border:0;
    margin:0;
    padding:0;
    font-family:'open_sansbold', Arial, sans-serif;
}
ol, ul {list-style: none;}
.clear {clear: both; height:0px; margin:0;}

/***** END RESET *****/

@font-face {
	font-family:'OpenSans_gdi';
	src: url('../fonts/OpenSans_gdi.eot');
	src: url('../fonts/OpenSans_gdi.eot?#iefix') format('embedded-opentype'),
		url('../fonts/OpenSans_gdi.woff') format('woff'),
		url('../fonts/OpenSans_gdi.ttf') format('truetype'),
		url('../fonts/OpenSans_gdi.svg#OpenSans-Regular') format('svg');
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-25CA;
}

@font-face {
    font-family: 'open_sansbold';
    src: url('../fonts/opensans-bold-webfont.eot');
    src: url('../fonts/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-bold-webfont.woff2') format('woff2'),
         url('../fonts/opensans-bold-webfont.woff') format('woff'),
         url('../fonts/opensans-bold-webfont.ttf') format('truetype'),
         url('../fonts/opensans-bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

h2 {font-size:16px; font-family:'open_sansbold', Arial, sans-serif; text-align:right; color:#fff; text-transform:uppercase;}
h3 {font-size:16px; font-family:'open_sansbold', Arial, sans-serif; text-align:center; color:#fff;}
h3 a {font-size:16px; font-family:'open_sansbold', Arial, sans-serif; text-align:center; color:#fff; text-decoration:none; line-height:30px;}
h3 a:hover {font-size:16px; font-family:'open_sansbold', Arial, sans-serif; text-align:center; color:#ccc; line-height:30px;}

   
/******MAIN NAVIGATION******/
.navwrap {float:left;}

#nav {
    position:relative;
    display:block;  
    z-index:9000;
    margin:0 auto 0 auto;
    padding:0 0 0 0;
    text-align:center;
}
  
#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: #fff;
    font-size:16px;
    line-height:18px;
    transition:color .2s ease-in-out; -moz-transition:color .2s ease-in-out; -webkit-transition:color .2s ease-in-out;
    padding:0 17px;  
    height: 1%;
    text-transform: uppercase;
    text-shadow: 2px 2px 2px rgba(0,0,0,.6); 
    text-align:center;
    font-family:'open_sansbold', Arial, sans-serif;
}
 
 
#nav ul li a:hover { /* appearance of the first-level links on hover */
    height: 1%; 
    color:#ccc; 
}
  
  
  
#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-right: 0;
}
#nav ul li:last-child a {
    border-right: 0;  /* Optional-use, this targets last link */
}
#nav ul li:first-child  { /* Optional-use, this targets first li */
    border-left: 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: 0;
}
#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;
}
  

/******** Basic Styles ********/
.show-menu-for-mobile {display:none;}  /* At most larger screen widths, the burger icon for the mobile menu won't be displayed. */

body {
	background: url(../siteart/bg.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#contentwrap {width:90%; margin:0 auto; padding:20px 0;}
#site-width {width:60%; margin:190px auto 100px auto;}

#logo {position:absolute; width:100%; text-align:center; top:-10px;}
.icon {
	float:left; 
	width:30%; 
	text-align:center;
	-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;

	-o-transition-property:width,height,-o-transform,background,font-size,opacity,color;
	-o-transition-duration:3s,3s,3s,3s,3s,3s,3s;
	
	-moz-transition-property:width, height, -moz-transform, background, font-size, opacity, color;
	-moz-transition-duration:3s,3s,3s,3s,3s,3s,3s;
	
	transition-property:width,height,transform,background,font-size,opacity;
	transition-duration:1s,1s,1s,1s,1s,1s;
}
.icon:hover {
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
}

#inventorywrap {width:100%; max-width:1020px; margin:0 auto; padding:20px 0; background:#fff;}

/*--------Scrolling Inventory--------*/
.mobilecontainer { 
	overflow:hidden; /* must have this property for mobile phones and tablet display! */
	width:100%;
	max-width:2000px; 
	margin:139px auto;
	height:92px; 
	padding:10px 0 8px 0;
	background:#123d7c;
}

.scrolling-wrap {
    width:100%;
    height:90px;
    overflow:hidden;
}
 
.scrolling{
    width:100%;
    height:92px;
}
	
	
footer {
	background-color:rgba(0,0,0,0.6); 
	padding:40px 0 20px 0;
	color:#fff;
}	

#footerwrap {width:75%; margin:0 auto; text-align:center;}
.uta {float:left; width:20%; padding-top:10px;}
.sandhillsfooter {float:right; width:80%;}

.line {width:100%; text-align:center; margin:0 auto;}
a.footerlink:link, a.footerlink:visited, a.footerlink:active{text-decoration:none;font-size:11px; color:#fff;}
a.footerlink:hover {text-decoration:none;font-size:11px; color:#ccc;}

.footertext{font-size:11px; color:#fff;}

.smallfootertext{font-size:11px; color:#fff;}
.divfooter {width:100%; text-align:left; margin:10px 0;}
	

/************************************************ Inventory Styles **/

.list-content .list-listing .listing-top-right .listing-dealer-info .dealer-name{color:#000!important;text-align:right!important;}
.compare-chkbox-container .compare-listings .fa-check{top:2px!important;left:2px!important;}
.option-name, .option-count{margin-top:1px!important;}
.detail-content-mobile .dealer-info h3{color:#000!important;text-align: left!important;}

#inv{padding: 5% 0;}
#inv *:not(.fa):not(.far):not(.fas):not(.fab):not(.material-icons){font-family: bahnschrift, urw-din, sans-serif!important;} /* Reset font, ignore icons */

.listing-top-right a, .lower-detail-data-left button, .send-email-btn, .media-buttons a, .media-buttons button, .faceted-search, .listing-dealer-info a, .view-listing-details-link, .main-detail-data .contact-options a, .fin-calc-btn-mobile, .selected-facet, .page-nav, .apply-button, .back-button, .calculator-btn, .mobile-done-button {
    -moz-border-radius: 90px !important;
    -o-border-radius: 90px !important;
    -webkit-border-radius: 90px !important;
    border-radius: 90px !important;
}


.faceted-search-content .faceted-section-box .faceted-option-checkbox-container label input {margin: 2px 3px 3px 4px;}
.faceted-text-input-searchType .search-type input[type=checkbox], .faceted-text-input-searchType .search-type  input[type=radio] {margin: 0px 3px 0px 6px;}


.bread-crumbs-heading .return-links .return-links-link span, #no-compare-listings, .bread-crumbs-heading .return-links .return-links-link i {color:#273e7b !important;}


.hosted-content .attachment-search .search-checkboxes label .row {margin-left:0 !important;margin-right:0 !important;margin-bottom:0px !important;}

.view-listing-details-link, .selected-facet, .view-listing-details-link, .buy-now-link, .check-availability-link, .email-seller-link, .offer-btn, .buy-btn, .dealer-phone-mobile, .offer-btn-mobile, .send-email-btn-mobile, .send-wholesale-email-btn-mobile, .fin-calc-btn-mobile, .mobile-breadcrumb, .main-detail-data .contact-options a, button.g-recaptcha.button, .page-nav, .apply-button, .mobile-done-button, .dealer-btns-bottom a {background:#273e7b !important;}

.selected-facet, .dealer-phone-mobile, .offer-btn, .offer-btn-mobile, .fin-calc-btn-mobile, .send-wholesale-email-btn-mobile, .send-email-btn-mobile, .buy-now-link, .view-listing-details-link, .main-detail-data .contact-options a, button.g-recaptcha.button, .page-nav, .apply-button, .mobile-done-button{border: solid 1px #273e7b !important; transition: ease all 0.2s !important;}

.selected-facet:hover, .dealer-phone-mobile:hover, .offer-btn:hover, .offer-btn-mobile:hover, .fin-calc-btn-mobile:hover, .send-wholesale-email-btn-mobile:hover, .send-email-btn-mobile:hover, .buy-now-link:hover, .view-listing-details-link:hover, .main-detail-data .contact-options a:hover, button.g-recaptcha.button:hover, .page-nav:hover, .apply-button:hover, .mobile-done-button:hover, .dealer-btns-bottom a:hover {background: #fff !important; color: #273e7b !important;}

.check-availability-link, .email-seller-link, .video-chat-link, .faceted-search, .faceted-show-all-btn, .cs-btns a, .calculator-btn {background: #000 !important; border: solid 1px #000 !important; transition: ease all 0.2s !important;}
.check-availability-link:hover, .email-seller-link:hover, .video-chat-link:hover, .faceted-search:hover, .faceted-show-all-btn:hover, .cs-btns a:hover, .calculator-btn:hover {background: #fff !important; color: #000 !important;}

.list-content .list-title .list-listings-count, .list-content .list-main-section .list-container .list-listing .listing-top .listing-top-left .listing-main-stats .price, #parts-content .parts-top-section .parts-title-and-breadcrumbs .parts-title .parts-listings-count, #inv .error-message, #inv .info, .detail-content .detail-main-body .main-detail-data .detail-price, .detail-content .search-results, .list-content .list-top-section .listing-option-bar .list-listings-count, .detail-price, .compare-price, .compare-title {color: #000 !important;}
 
/* heading */
.list-content .list-title .list-title-text, .detail-content-mobile .detail-main-body .detail-mobile-top .detail-title, .main-detail-data .detail-title, .parts-title-text {
	padding-left: 4px; 
}

.detail-content .detail-additional-data .data-row .data-label, .detail-content-mobile .detail-additional-data .data-row .data-label, .part-detail-additional-data .data-label, .part-detail-content .detail-contact-bar {background: #000 !important;}
.detail-content-mobile .detail-contact-bar .contact-bar-btn, .list-page-nav, .contact-options a {background: #000 !important;}
.list-main-section .contact-options a {border: #000 solid 1px !important; transition: ease all 0.2s !important;}
.list-main-section .contact-options a:hover {background: transparent !important; color: #000!important;}

.detail-content .dealer-info .phone-and-email .send-email-btn, .list-content .list-listing-mobile .dealer-phone-container a, .back-button {border-color: #000!important; color: #000!important;}

.material-icons, .collapsible-content a {color:#fff!important;}

#parts-content .parts-bottom-section .parts-list-view .parts-list-content .parts-listing-container .parts-listing-column .parts-button.view-details {background-color: #000!important;}

.detail-content-mobile .detail-main-body .main-detail-data .dealer-phone-mobile-container .dealer-phone-mobile{margin-right:0!important;}

.detail-content .detail-main-body .main-detail-data .details-fin-calc .detail-btn-calc{height: 48px !important; box-sizing: border-box;}

.list-content .listing-portion-title {color: #273e7b !important;}
.manghamtruckcomhdev-9uiqsl {color: #000 !important;}

/************************************************ Responsive Styles **/

@media screen and (max-width: 1600px) and (min-width:1140px) {
.show-menu-for-mobile {display:none;}

#logo {width:100%; margin:0 auto;}
#logo img {width:23%;}
#site-width {width:85%; margin:100px auto;}
.icon {width:33%;}

#nav ul li a {font-size:14px; padding:0 12px; }

}




@media screen and (max-width: 1139px) and (min-width:828px) {
.show-menu-for-mobile {display: none;}

#logo {width:100%; margin:0 auto; top:20px;}
#logo img {width:22%; padding-top:30px;}
h2 {font-size:12px;}
#nav ul li a {font-size:12px;}
#site-width {width:90%; margin:100px auto;}
.icon {width:33%;}
.icon img {width:100%;}

#footerwrap {width:90%; }



}



@media screen and (max-width: 827px) and (min-width:591px) {
.show-menu-for-mobile {display: block;}
.hide-for-mobile {display:none;}
.hide {display:none;}

#logo {width:100%; margin:0 auto; top:30px;}
#logo img {width:45%;}
h2 {font-size:12px;}
#nav ul li a {font-size:12px;}
#site-width {width:90%; margin:100px auto;}
.icon {width:33%;}
.icon img {width:100%;}

#footerwrap {width:90%; }
.uta {float:none; width:100%; padding-top:10px; margin:0 auto;}
.sandhillsfooter {float:none; width:100%; margin:0 auto;}
.divfooter {text-align:center;}



/******************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: 0.25rem 0 0 0.5rem;
	color:#fff;
}
#nav  {display:none;}
}

@media screen and (max-width: 590px) and (min-width:471px) {
.show-menu-for-mobile {display: block;}
.hide-for-mobile {display:none;}
.hide {display:none;}

#logo {width:100%; margin:0 auto; top:30px;}
#logo img {width:40%;}
h2 {font-size:12px;}
#nav ul li a {font-size:12px;}
#site-width {width:90%; margin:100px auto;}
.icon {width:33%;}
.icon img {width:100%;}

#footerwrap {width:90%; }
.uta {float:none; width:100%; padding-top:10px; margin:0 auto;}
.sandhillsfooter {float:none; width:100%; margin:0 auto;}
.divfooter {text-align:center;}


/******************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: 0.25rem 0 0 0.5rem;
	color:#fff;
}
#nav  {display:none;}
}

@media screen and (max-width: 470px) and (min-width:320px) {
.show-menu-for-mobile {display: block;}
.hide-for-mobile {display:none;}
.hide {display:none;}

#logo {width:100%; margin:0 auto; top:30px;}
#logo img {width:40%;}
h2 {font-size:11px;}
#nav ul li a {font-size:12px;}
#site-width {width:90%; margin:100px auto;}
.icon {width:33%;}
.icon img {width:100%;}

#footerwrap {width:90%; }
.uta {float:none; width:100%; padding-top:10px; margin:0 auto;}
.sandhillsfooter {float:none; width:100%; margin:0 auto;}
.divfooter {text-align:center;}


/******************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: 0.25rem 0 0 0.5rem;
	color:#fff;
}
#nav  {display:none;}
}
 
 

@media screen and (max-width: 470px){
.show-menu-for-mobile {display: block;}
.hide-for-mobile {display:none;}
.hide {display:none;}

body {overflow-x:hidden;}

#logo {width:100%; margin:0 auto; top:60px;}
#logo img {width:59%;}
.contactinfo {width:65%; float:right;}
h2 {font-size:12px;}
#nav ul li a {font-size:12px;}
#site-width {width:75%; margin:120px auto 75px auto;}
.icon {float:none; width:100%; margin:0 auto;}
.icon img {width:100%;}

#footerwrap {width:90%; }
h3 {font-size:12px;}

.uta {float:none; width:100%; padding-top:10px; margin:0 auto;}
.sandhillsfooter {float:none; width:100%; margin:0 auto;}
.divfooter {text-align:center;}

/******************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:#fff;
}
#nav  {display:none;}
}
