﻿/***** BEGIN RESET *****/

* {
    background:transparent;
    border:0;
    margin:0;
    padding:0;
    font-family:'roboto_condensedregular', Arial, sans-serif;
}
ol, ul {list-style: none;}
.clear {clear: both; height:0px; margin:0;}

/***** END RESET *****/

@font-face {
    font-family: 'roboto_condensedregular';
    src: url('../webfonts/RobotoCondensed-Regular-webfont.eot');
    src: url('../webfonts/RobotoCondensed-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/RobotoCondensed-Regular-webfont.woff') format('woff'),
         url('../webfonts/RobotoCondensed-Regular-webfont.ttf') format('truetype'),
         url('../webfonts/RobotoCondensed-Regular-webfont.svg#roboto_condensedregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roboto_condenseditalic';
    src: url('../webfonts/RobotoCondensed-Italic-webfont.eot');
    src: url('../webfonts/RobotoCondensed-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/RobotoCondensed-Italic-webfont.woff') format('woff'),
         url('../webfonts/RobotoCondensed-Italic-webfont.ttf') format('truetype'),
         url('../webfonts/RobotoCondensed-Italic-webfont.svg#roboto_condenseditalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roboto_condensedbold';
    src: url('../webfonts/RobotoCondensed-Bold-webfont.eot');
    src: url('../webfonts/RobotoCondensed-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/RobotoCondensed-Bold-webfont.woff') format('woff'),
         url('../webfonts/RobotoCondensed-Bold-webfont.ttf') format('truetype'),
         url('../webfonts/RobotoCondensed-Bold-webfont.svg#roboto_condensedbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roboto_condensedbold_italic';
    src: url('../webfonts/RobotoCondensed-BoldItalic-webfont.eot');
    src: url('../webfonts/RobotoCondensed-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/RobotoCondensed-BoldItalic-webfont.woff') format('woff'),
         url('../webfonts/RobotoCondensed-BoldItalic-webfont.ttf') format('truetype'),
         url('../webfonts/RobotoCondensed-BoldItalic-webfont.svg#roboto_condensedbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}





header, nav, article, footer {display:block;}

body {
	font-family: 'roboto_condensedregular';
	font-weight:normal;
	font-size:16px;
	background:#ececec url('../siteart/layout/pattern-bg.jpg') repeat;
	-webkit-text-size-adjust: none;
}

.wrap {width:85%; max-width:1160px; margin:0 auto;}

.show-tablet {display:none;}






/************************* typography styles **/

strong {font-family:'roboto_condensedbold'; font-weight:normal;}
em {font-family: 'roboto_condenseditalic'; font-style:normal;}
.bold-italic {font-family: 'roboto_condensedbold_italic';}

p {margin-bottom:16px;}
.no-margin {margin:0 !important;}

a {color:#cb1c1c; text-decoration:none;}
a:hover {color:#999;}

.red {color:#cb1c1c;}
.white {color:#fff;}
.black {color:#000;}

h1 {
	color:#000;
	font-size:28px;
	line-height:32px;
	font-family: 'roboto_condensedbold';
	font-weight:normal;
	margin-bottom:20px;
}

h2 {
	color:#fff;
	font-size:24px;
	font-family: 'roboto_condensedbold';
	font-weight:normal;
	margin-bottom:0px;
}
h2 a {color:#999; text-decoration:none; font-family: 'roboto_condensedbold';}
h2 a:hover {color:#cb1c1c;}

h3 {
	color:#cb1c1c;
	font-size:24px;
	font-family: 'roboto_condensedbold';
	font-weight:normal;
	margin-bottom:16px;
}


h5 {
	font-size:18px;
	color:#000;
	font-weight:normal;
	margin-bottom:0px;
}





/************************* header styles **/

header {
	width:100%;
	padding:30px 0 0 0;
	position:relative;
	z-index:6;
}

.logo {width:27%; float:left; margin-bottom:-12px; position:relative; margin-right:55%;}
.logo img {width:100%; max-width:304px; height:auto; display:block;}

.top-contact {width:18%; float:left;}

.top-contact p {font-size:18px; margin-bottom:18px; line-height:20px;}
p.address {
	padding-left:14%;
	background:url('../siteart/layout/mail-icon.png') no-repeat left top;
	background-size:11%;
}
p.phone {
	padding-left:14%;
	background:url('../siteart/layout/phone-icon.png') no-repeat left center;
	background-size:11%;
}




/************************* nav styles **/

nav {
	width:100%;
	background:#b11717 url('../siteart/layout/nav-bg.jpg') repeat-x;
	position:relative;
	z-index:3;
}
nav ul {width:100%; margin:0 auto; z-index:9999;}
nav li {float:left; position:relative; display:inline;}
nav a:link, nav a:active, nav a:visited {
	display:block;
	text-decoration:none;
	color:#fff;
	font-size:20px;
	font-weight:normal;
	padding:0 30px;
	line-height:40px;
	border-left:1px #cb1c1c solid;
	border-right:1px #b11818 solid;
}
nav a:hover {background:#b11717; color:#fff;}

nav li.first {
	display:block;
	width:1px;
	height:40px;
	background:#b11818;
}
nav li.last {
	display:block;
	width:1px;
	height:40px;
	background:#cb1c1c;
}


/************************* content styles **/

.hero {
	width:100%;
	height:440px;
	display:block;
	background:url('../siteart/hero.jpg') no-repeat center;
	background-size:cover;
	border-bottom:5px #cb1c1c solid;
}

.content-tab {width:34.5%; display:block;}

.content-tab .inner {
	padding:20px 9% 0 9%;
	width:82%;
	background:url('../siteart/layout/content-tab-extend.png') repeat-y center;
}

.content-tab .end {
	width:100%;
	display:block;
	background:url('../siteart/layout/tab-end.png') no-repeat center;
	height:70px;
}

article {
	width:100%;
	border-bottom:5px #cb1c1c solid;
	background:url('../siteart/hero.jpg') no-repeat center;
	background-size:cover;
}

.content {
	display:block;
	width:95%;
	padding:30px 2.5%;
	background:url('../siteart/layout/85-white.png') repeat;
	-moz-box-shadow:0px 0px 7px rgba(0, 0, 0, .75); 
	-webkit-box-shadow:0px 0px 7px rgba(0, 0, 0, .75); 
	box-shadow:0px 0px 7px rgba(0, 0, 0, .75);
}

article.inventory {background:url('../siteart/layout/pattern-bg.jpg') repeat; padding:30px 0;}

.inv-nav {width:100%; display:block; margin-bottom:15px;}
.inv-nav li {position:relative; display:inline; float:left; margin:0 2% 10px 0;}
.inv-nav a:link, .inv-nav a:active, .inv-nav a:visited {
	display:block;
	text-decoration:none;
	color:#fff;
	background:#000;
	padding:0 10px;
	line-height:28px;
}
.inv-nav a:hover {background:#cb1c1c;}

.inv {
	width:100%;
	width:calc(100% - 4px);
	border:2px #999 solid;
	display:block;
	background:#fff;
}
.inv iframe {
	background:#fff;
	width:100%;
	height:2100px;
	display:block;
}

.contact-info {width:100%; margin-bottom:5px;}
.contact-info p {width:31.3333%; margin:0 2% 10px 0; float:left;}
.map {width:100%; display:block;}
.map iframe {
	width:100%;
	width:calc(100% - 4px);
	border:2px #999 solid;
	display:block;
	height:350px;
}

.contact-banner {
	width:100%;
	background:#000;
	padding:20px 0;
	line-height:28px;
	display:block;
	text-align:center;
}


/************************* scrolling inv & footer styles **/

.scroll-frame {width:100%; height:90px; padding:5px 0; display:block; overflow:hidden; background:#cb1c1c;}
.scroll-frame iframe {width:100%; height:90px; display:block; background:#cb1c1c;}

footer {width:100%; padding:30px 0; line-height:12px;}

a.footerlink:link, a.footerlink:visited, a.footerlink:active{text-decoration:underline; font-size:10px; color:#666;}
a.footerlink:hover {text-decoration:none; color:#666;}

.footertext{font-size:10px; color:#666;}
.smallfootertext{font-size:10px; color:#666;}

.divfooter {width:45%; max-width:566px; text-align:center; margin:0 auto;}




/************************* form styles **/

#formpage .row {width:100%; display:block; margin-bottom:5px;}
/*#formpage .row:after {content:""; clear:both; display:block;}*/
#formpage .col3 {width:31.33333%; margin:0 2% 10px 0; float:left;}

#formpage label {display:block; margin-bottom:2px;}

#formpage input {
	padding:6px 5px;
	width:100%;
	width:calc(100% - 12px);
	border:1px solid #999;
	color:#8e8d8d;
	font-size:12px;
	background:#fff;
	-webkit-border-radius:0px;
}

#formpage textarea {
	padding:6px 5px;
	width:100%;
	width:calc(100% - 12px);
	border:1px solid #999;
	color:#8e8d8d;
	font-size:12px;
	height:120px;
	background:#fff;
	-webkit-border-radius:0px;
}

 
/* selects have similar styles to input & textarea fields, but with no padding. Text in a dropdown select is positioned differently */
#formpage select {
	width:100%;
	width:calc(100% - 12px);
	border:1px solid #999;
	color:#8e8d8d;
	vertical-align:middle;
	font-size:12px;
	line-height:normal;
	padding:5px;
	background:#fff;
	-webkit-border-radius:0px;
}


#formpage input.checkbox {
    padding:0; 
    border:0;
    margin:0 5px 0 0;
    width:13px;
    height:13px;
    display:inline;
    background-color:#fff;
 }

#formpage input.radio {
    padding:0; 
    border:0;
    margin:0 5px 0 0;
    width:15px;
    height:15px;
    display:inline;
	background:transparent;
	-webkit-border-radius:7px;
 }

/* focus states of various types of fields */

#formpage input:focus,
#formpage textarea:focus,
#formpage select:focus {
	background:#8e8d8d; 
	color:#FFF;
	border:1px solid #16598d;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
	outline-style:none;
}
#formpage input.radio:focus,
#formpage input.checkbox:focus {
	background:none; 
	border:0;
	outline-style:none;
}
 


#formpage input.button,
#formpage input.button:focus {
    width:100%;
    margin:5px 0 0 0;
    padding:7px 0;
    background:#000;
    border:0;
    font-size:14px;
	line-height:14px;
	font-weight:bold;
    color:#fff;
	-webkit-appearance:none;
}
#formpage input.button:hover {
	background:#cb1c1c;
	color:#fff;
}
 


/* for plain text next to an input field, if not using a table structure */
#formpage label.basic {
    color:#212121;
    font-size:13px;
    text-align:left;
}
#formpage label.checkbox {
  /*  color:#212121;*/
    font-size:13px;
    text-align:left;
    display:inline;
    padding:0;
}
 

/*control the Captcha */

.CaptchaPanel {
margin:0 0 0 0 !important;
padding:0 0 0 0 !important;
text-align: center;
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;}






/************************* responsive styles **/

@media screen and (max-width:1024px) {
	h2 {font-size:22px;}
	
	header {padding-top:20px;}
	.logo {width:32%; margin-right:45%;}
	.top-contact {width:23%;}
	
	nav a:link, nav a:active, nav a:visited {font-size:18px; padding:0 20px;}
	
	.content-tab {width:46%;}
	
}


@media screen and (max-width:768px) {
	h1 {font-size:24px; line-height:26px;}
	h2, h3 {font-size:20px;}
	h5 {font-size:16px;}
	
	.show-tablet {display:block;}
	.hide-tablet {display:none;}
	
	.wrap {width:94%;}
	
	#simple-menu{
		float:left;
		background:url(../siteart/layout/mobile-nav-icon.png) no-repeat center center;
		height:40px;
		width:40px;
		display:block;
		cursor:pointer;
	}
	
	.logo {width:37%; margin-right:35%;}
	.top-contact {width:28%;}
	
	.hero {height:350px;}
	.content-tab {width:50%;}
	.content-tab .end {height:45px;}
	
	.contact-info p {width:48%;}
	
	#formpage .col3 {width:48%;}
	
	.divfooter {width:94%;}
	
}


@media screen and (max-width:640px) {
	
	.logo {width:44%; margin-right:20%;}
	.top-contact {width:36%;}
	
	.content-tab {width:55%;}
	.content {padding:20px 2.5%;}
	
	.contact-info p {width:100%; margin-right:0;}
	.map iframe {height:200px;}
}


@media screen and (max-width:480px) {
	body {font-size:14px;}
	p {margin-bottom:14px;}
	h1 {font-size:22px; line-height:24px;}
	h2 {font-size:18px;}
	h5 {font-size:14px;}
	
	header {padding:15px 0;}
	.logo {width:50%; margin:0 25%;}
	.top-contact {width:80%; margin:0 10%;}
	
	.top-contact p {font-size:14px; margin-bottom:0; line-height:16px; float:left;}
	p.address {
		padding-left:10%;
		width:40%;
		background:url('../siteart/layout/mail-icon.png') no-repeat left top;
		background-size:11%;
	}
	p.phone {
		padding-left:10%;
		width:40%;
		background:url('../siteart/layout/phone-icon.png') no-repeat left center;
		background-size:11%;
	}
	
	.hero {height:275px;}
	.content-tab {width:68%;}
	.content-tab .end {height:30px;}
	
	.contact-banner {padding:15px 0; line-height:22px;}
	
	#formpage .col3 {width:100%; margin:0 0% 10px 0;}
	
	footer {padding:20px 0;}
	
}


@media screen and (max-width:375px) {
	
	.hero {height:235px;}
	.content-tab {width:88%;}
	.content-tab .end {height:20px;}
	
}


@media screen and (max-width:320px) {
	.logo {width:60%; margin:0 20%;}
	.top-contact {width:90%; margin:0 5%;}
	
	.content-tab {width:100%;}
	.content-tab .end {height:20px;}
}







