/* 
=====================/*

Greatmats CSS 2011
Developed by Firstscribe 2011
v 1.2 (with Greatmats edits)
=====

*/


/*
=====================
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, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
:focus {
	outline: 0;
}
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

.red20{
    font-family: Arial, Helvetica, sans-serif;
	color: #cc0000;	
	font-size: 20px;
	font-weight: bold;
	 
}

.red30{
    font-family: Arial, Helvetica, sans-serif;
	color: #cc0000;	
	font-size: 30px;
	font-weight: bold;
	 
}

.red40{
    font-family: Arial, Helvetica, sans-serif;
	color: #cc0000;	
	font-size: 40px;
	font-weight: bold;
	 
}

.red50{
    font-family: Arial, Helvetica, sans-serif;
	color: #cc0000;	
	font-size: 50px;
	 
	 
}

.red60{
    font-family: Arial, Helvetica, sans-serif;
	color: #cc0000;	
	font-size: 60px;
	 
	 
}

.masterphone {
font-family: Verdana, Arial, Helvetica, sans-serif;
 		font-size: 16px; 
color: #0066cc;
	height: 16px;
}

.freeship {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px; 
    color: #0066cc;
  padding-bottom:20px;
}

.greatmats {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 19px;
	color: #333333;
}

.request {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #0066cc;
}

.sample {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #0066cc;
}

}
 .black20{
    font-family: Arial, Helvetica, sans-serif;
	color: #333;	
	font-size: 20px;
	font-weight: bold;
	margin: 0px 0px 0px 0px;
	 
}
 .review {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px; 
    color: #3372B2;
	margin: 0px 0px 0px 10px;
}
.review2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px; 
    color: #666;
	margin: 0px 0px 0px 10px;
}
 
.price2 { color:#333; display:inline; font-size:24px; font-weight:bold; margin:0; }
.was {display:inline; float:right; padding-right:20px; padding-top:6px; font-size:12px; color: #666;}
.save { float:right; font-size:12px;   }
.sf {display:inline; float:left; font-size:16px;}
.Form2 {  background-color: #ffffff;  color: #000;   border:0px solid #CCC;  margin:12px 0px 0 0;} 
 
/* IE fixes */
img { -ms-interpolation-mode:bicubic;}


/*
=====================
BASE
=====================
*/

html {overflow-y:scroll;}

body {
	background:#fff;
	text-align:center;
	color:#333;
	font:normal 13px/17px Arial, Helvetica, sans-serif;
}

p, table  { margin:1em 0; }
img { border:0 ;}
.access, hr { display:none; }
.clearer { clear:both; height:1%; line-height:1%; font-size:1%; }
.clearer2 { clear:both; height:0%; line-height:0%; font-size:0%; }
.clearer1 { clear:both; height:0%; line-height:0%; font-size:0%;  border:0 ;}
a:link, a:visited { color:#333; font-weight:bold; text-decoration:underline; }
a:hover, a:active { text-decoration:none; outline:none; }

textarea, input { font-family:Arial, Helvetica, sans-serif; }

strong, dfn { font-weight:bold; }
em { font-style:italic; }

h1, h2, h3, h4, h5, h6 { font-weight:bold; }
h1 { font-size:25px; line-height:28px; }
h2 { font-size:22px; line-height:25px; }
h3 { font-size:18px; line-height:21px; }
h4 { font-size:16px; line-height:19px; }
h5 { font-size:14px; line-height:17px; }
h6 { font-size:13px; line-height:16px; }

ul li { list-style-type:disc; }
ol li { list-style-type:decimal; }
ul, ol { list-style-position:outside; margin:1em 0; padding:0 0 0 2em; }

/* 
=====================
FOUNDATION
=====================
*/

#wrap { margin:0; position:relative; width:100%;}

#header-wrap { height:99px; position:relative; width:100%;}
#header { display:block; height:99px; margin:0 auto; position:relative; width:980px;}

#main-nav-wrap h2{display:block; position:relative;  z-index:200; color:#666; display:block; font-size:12px; font-weight:normal;  margin:0px 0px 0px 0px;}
#main-nav { background:url(../images/bg_main-nav.jpg) center repeat-x; display:block; height:42px; margin:0 auto; overflow:visible; position:relative; width:970px;}


/* 
=====================
HEADER
=====================
*/

#header .logo a:link,div#header h5 a:visited {
background:url(../images/logo_greatmats1.jpg) top left no-repeat;
width:360px;
height:99px;
display:inline;
position:relative;
overflow:hidden;
font-size:0;
line-height:1%;
border:0;
text-decoration:none;
text-indent:-999em;
float:left;
margin:0 0 0 2px;
padding:0
}

#header .logo a:hover,div#header h5 a:active {
border:0;
text-decoration:none
}
 
#aux-nav { display:inline; float:right; padding: 0px 0 0;}
#aux-nav .navigation h1{ display:inline; float:right; margin:2px 6px 0px 0px; overflow:hidden; padding:0px 0px 0px 0px;color:#666; font-family:Arial, Helvetica, sans-serif; font-size:15px; text-align: right;  font-weight:normal; text-decoration:none;  }
#aux-nav .navigation h2{ display:inline; float:right; margin:-10px 6px 0px 0px; overflow:hidden; padding:0px 0px 0px 0px;color:#666; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align: right; font-weight:normal; text-decoration:none;  }
#aux-nav .navigation li { border-left:1px solid #666; display:inline; float:left; line-height:1em; list-style:none; color:#666; font-family:Arial, Helvetica, sans-serif; font-size:14px; display:inline;  font-weight:normal; text-decoration:none;}
#aux-nav .navigation li:first-child { border:none;}
#aux-nav .navigation a { color:#666; font-family:Arial, Helvetica, sans-serif; font-size:14px; display:inline;  font-weight:normal; margin:0 0spx; text-decoration:none;}
#aux-nav .navigation a:hover { text-decoration:underline;}
#aux-nav .navigation .mats a { color:#666; font-family:Arial, Helvetica, sans-serif; font-size:14px; text-decoration:underline; display:inline;  font-weight:normal; }
 
 #site-search { background:url(../images/site-seach.jpg) no-repeat left top; display:block; height:26px; float:left; margin:-4px 0px 0px 21px; position:relative; width:170px;}
#site-search input[type="text"] { background:none; border:none; display:inline; float:right; font-size:12px; padding:6px 5px; position:relative; width:140px; }
#site-search input[type="submit"] { background:url(../images/btn_search.jpg) no-repeat; border:none; display:inline; float:right; height:26px; line-height:0; position:absolute; text-indent:-999em; width:30px;  top: 0px; right: 0px;}
 
#quick-contact { clear: both; display: block; float: right;  margin:15px 0px 0px 0px;  padding: 0px 0px 0px 0px; position: relative; width:526px;}
#quick-contact ul { float:left; margin:0; overflow:hidden; padding:0;}
#quick-contact li {  border-right:1px solid #418C21; border-left:1px solid #418C21; display:inline; float:left; height:26px; list-style:none; margin:0px 0px 0px 5px; color:#418C21; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:normal; padding:0 0 0 0px; position:relative;}
#quick-contact li:first-child { border:none; padding:0 0 0 12px; margin:0 4px; }
#quick-contact .chat { background:url(/images/bg_live-chat.png) no-repeat top left; margin:12; height:16px; color:#418C21; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:normal; padding:0 0 0 16px; }
#quick-contact .call a{   color:#418C21;  font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:normal; text-decoration:none;}
#quick-contact li a{   color:#418C21;  font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:normal; text-decoration:none;}
#cart {display: block; float: left; margin:-5px 0px 0px 14px; padding:0px 0px 0px 0px;}
#mc { display:block; position:absolute; padding: 10px 0 0px 0px; right:-45px; top:8px; z-index:100;}
/* 
=====================
NAVIGATION
=====================
*/
 
#main-nav .navigation { clear:both; display:block; margin:0; position:relative; padding:0; z-index:100;}
#main-nav .navigation li { display:block; list-style:none; float:left;}
#main-nav .navigation li:first-child { background:url(../images/bg_main-nav-li.jpg) left top no-repeat;}
#main-nav .navigation li a { background:url(../images/bg_main-nav-li.jpg) right top no-repeat; color:#FFF; display:block; font-size:18px; font-weight:bold; line-height:42px; width:242px; text-align:center; text-decoration:none; text-shadow:#003651 2px 2px 2px;}
#main-nav .navigation li .dropdown { display:none;}

#main-nav .navigation li:hover a { background:url(../images/bg_main-nav-li-hover.jpg) top repeat-x;}
#main-nav .navigation li:hover .dropdown { background:url(../images/bg_main-nav-div.jpg) top repeat-x #102236; display:inline; position:absolute; top:42px;}
#main-nav .navigation .right { right:0;}
#main-nav .navigation .left { left:0;}

#main-nav .container { background:#FFF; border:2px solid #CCC; overflow:hidden; margin:10px; padding:20px; position:relative; top:0;}
#main-nav .container ul { background:none; border-right:1px solid #CCC; display:block; float:left; margin:0 20px 0 0; overflow:hidden; padding:0 20px 0 0; width:185px;}
#main-nav .container li { background:none; display:block; float:none; text-align:left;}
#main-nav .container li:first-child { background:none;}
#main-nav .container li a { background:none !important; color:#3772B2; font-size:14px; font-weight:normal; line-height:1.5em; padding:0; text-align:left; text-shadow:none;}
#main-nav .container li a:hover { /*display: none;*/ background:none; color:#20446B; text-decoration:underline;}
#main-nav .container ul ul { display:none;}

#main-nav .image-left ul { border-left:1px solid #CCC; border-right:none; float:right; margin:0 0 0 20px; padding:0 0 0 20px; }

#main-nav .image { background:#CCC; border:#3772B2 2px solid; display: block; float: left; height: 156px; overflow:hidden; position: relative; width: 226px;}
#main-nav img { max-width: 225px !important; max-height: 155px !important;}
 
/* Content */
 
#content .column { display:inline; float:left; position:relative; }
#content .main-container { margin:10px 20px 0; padding-bottom:50px; width:910px; text-align:left;}

  /* 
=====================
SECONDARY
=====================
*/

/* Splash Banner */
#splash-wrap { background:url(/*../images/bg_sec_splash-wrap2.jpg*/) center repeat-x; clear:both; height:124px; position:relative; width:100%;}
#splash { background:url( ) center no-repeat; height:124px; margin:0 auto; position:relative; width:970px;}

#commercial-wrap { background:url(/*../images/bg_sec_splash-wrap2.jpg*/) center repeat-x; clear:both; height:124px; position:relative; width:100%;}
#commercial { background:url(../images/category/banners/header_secondary_commercial.jpg) center no-repeat; height:124px; margin:0 auto; position:relative; width:970px;}

/* Breadcrumbs */
#breadcrumbs { background:url(../images/bg_sec_breadcrumbs.jpg) repeat-x top; border:1px solid #ccc; clear:both; display:block; height:28px; margin:0px auto 10px; position:relative; text-align:left; width:968px;}
#breadcrumbs .home { background:url(../images/btn_breadcrumbs-home.png) no-repeat left; display:inline-block; float:left; height:28px; margin:0 10px; overflow:hidden; position:relative; text-indent:-999em; top:0; width:13px;}
#breadcrumbs .home:hover { background:url(../images/btn_breadcrumbs-home.png) no-repeat right;}
#breadcrumbs span { background:url(../images/bg_sec_breadcrumbs-arrow.jpg) no-repeat; display:inline-block; float:left; height:28px; overflow:hidden; margin:0; position:relative; text-indent:-999em; width:6px;}
#breadcrumbs a { color:#3772B2; display:inline-block;  font-size:12px; float:left; height:28px; line-height:28px; margin:0 10px; position:relative; text-decoration:none;}
#breadcrumbs a:hover { text-decoration:underline;}
#breadcrumbs p { color:#666; display:inline-block; float:left; font-size:12px; height:28px; line-height:28px; margin:0 10px; position:relative;}

/* Structure */
#content-wrap { clear:both; position:relative; width:100%;}
#content { margin:-10px auto; position:relative; width:980px;}
 .secondary #content .main-container { width:700px;}

 

/* Body Copy */
.secondary .main-container h1 { border-bottom: 1px solid #3472B2; color: #3472B2; font-size: 21px; font-weight: normal; margin: 10px 0 0; padding: 0 0 10px;}
.secondary .main-container h2 {  color: #3472B2; font-size: 22px; font-weight: normal; margin: 10px 0 0; padding: 0 0 0px;}
.secondary .main-container h3 { color: #3472B2; font-size: 22px; font-weight: normal; margin: 0px 0 0 16px; padding: 0 0 0 0px;}
.secondary .main-container h4 { border-bottom: 1px solid #3472B2; color: #3472B2; font-size: 22px; font-weight: normal; margin: 10px 0 0; padding: 0 0 10px;  line-height:22px; width:900px;}
.secondary .main-container p { color:#666; font-size:14px; line-height:1.25em; }
.secondary .main-container a { color:#3772B2; font-weight:normal; text-decoration:none;}
.secondary .main-container a:hover { text-decoration:underline;}

#rubber h1 { color: #666; font-size: 16px; font-weight: normal; margin: 0px -135px 0px; padding: 0px 0 0px; width:978px; }
#rubber h2 { color: #666; font-size: 12px; font-weight: normal; margin: 0px 30px 0px; padding: 0 0 0px; width:978px;}
#rubber h3 { color: #666; font-size: 12px; font-weight: normal; margin: 0px 15px 0px; padding: 0 0 0px; width:978px;}
#rubber-body h2 { color: #666; font-size: 16px; font-weight: normal; margin: 0px 10px 0px; padding: 0 0 0px;  }
#rubber-nav h1 { color: #666; font-size: 14px; font-weight: normal; margin: 0px -135px 0px; padding: 0px 0 0px; width:878px; }

/* Product Grid */ 
  
.secondary .main-container .products { margin:5px 0 60px; padding:0;  width:970px;}
.secondary .main-container .products li { display:block; float:left; list-style:none;}
.secondary .main-container .products div { border:0px solid #CCC; height: 225px; display:block; margin: 0px 4px; float:left; position:relative; width:135px;}
 /*display: block; font-size: 12px; font-weight: bold; height: 30px; line-height: 30px; margin: 20px 0 10px; */
.secondary .main-container .products div h2, .secondary .main-container .products div h2 a { color:#666; line-height: 18px; font-size:16px; font-weight:normal; height: auto; margin: 10px 20px 0px 20px; text-decoration:none; width:115px; height: 30px;}
.secondary .main-container .products div h2 a:hover { text-decoration:underline;}
.secondary .main-container .products div h3, .secondary .main-container .products div h3 a { color:#666; line-height: 18px; font-size:16px; font-weight:normal; height: auto; text-decoration:none; width:115px; height: 30px;}
.secondary .main-container .products div h3 a:hover { text-decoration:underline;}
.secondary .main-container .products div p { color:#666; font-size:12px; font-weight:normal; margin: 0px 0px 0 16px; width:125px;}
.secondary .main-container .products img { background:#FFF; border:2px solid #CCC; display:block; height:125px; margin:10px auto; position:relative; width:125px;}
 
.secondary .main-container .products a:hover { text-decoration:underline;}
.secondary .main-container .products1 { margin:5px 0 60px; padding:0;}
.secondary .main-container .products1 li { display:block; float:left; list-style:none;}
.secondary .main-container .products1 div { border:1px solid #CCC; height: 200px; display:block; margin: 15px 4px; position:relative; width:165px;}
.secondary .main-container .products1 div h2, .secondary .main-container .products div h2 a { color:#3372B2; line-height: 16px; font-size:14px; font-weight:bold; height: auto; margin: 10px 20px 0px 20px; text-decoration:none; width:138px; height: 30px;}
.secondary .main-container .products1 div h2 a:hover { text-decoration:underline;}
.secondary .main-container .products1 div p { color:#666; font-size:11px; font-weight:bold; margin: 10px 20px 0 20px; width:125px;}
.secondary .main-container .products1 img { background:#FFF; border:2px solid #CCC; display:block; height:125px; margin:10px auto; position:relative; width:125px;}
.secondary .main-container .products1 a:hover { text-decoration:underline;}

 
.secondary .main-container .products .sale-overlay{ background:url(/images/sale-overlay.png) left top no-repeat; display:block; height:48px; border:none; display:block;  position:absolute; right:20px; top:12px; width:125px; z-index:1;}
.secondary .main-container .products .fs-overlay {  background:url(/images/free-shipping.png) repeat;  display:block; height:20px; border:none; display:block;   position:absolute; right:20px; top:117px; width:125px; z-index:100;}
  
 /* 
=====================
FOOTER
=====================
*/

 

/* Footer Top */
#footer-top-wrap { background:url( ../images/bg_footer-top1.jpg) center repeat-y #fff;  clear:both; position:relative;}
#footer-top-wrap div { margin:0 auto; overflow:hidden; position:relative;  width:940px;}
#footer-top-wrap .right { float:right; width:430px;}
#footer-top-wrap .right p { color:#000; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:12px; text-align:right;}
#footer-top-wrap .left { border-right:2px solid #666; float:left; margin:1em 0 0; width:490px;}
#footer-top-wrap .column { display:inline; position:relative;}
#footer-top-wrap .left ul { display:inline; margin:0 38px 0 0; padding:0; position:relative; float:left;}
#footer-top-wrap .left li { list-style:none; display:block; text-align:left;}
#footer-top-wrap .left a { color:#000; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; text-decoration:none;}
#footer-top-wrap .left a:hover { text-decoration:underline;}

/* Footer Associations */
#footer .associations {  background:#fff; clear:both;width:940px;  margin:0; overflow:hidden; padding:20px 0; position:relative;}
#footer .associations li { display:inline; float:left; height:55px; list-style:none; margin:0 0 0 22px; position:relative;}
#footer .associations li:first-child { margin:0;}
#footer .associations a { display:block; height:55px; font-size:0; text-indent:-999em;}
#footer .associations .bbb { background:url(../images/logo_bbb_w.jpg); width:143px;}
#footer .associations .geotrust { background:url(../images/logo_geotrust_w.jpg); width:175px;}
#footer .associations .mcafee { background:url(../images/logo_mcafee_w.jpg); width:103px;}

/* Footer Bottom */
#footer-bottom-wrap { background:#fff; clear:both; padding: 10px 0; position:relative;}
#footer-bottom-wrap div { margin:0 auto; position:relative; text-align:left; width:940px;}
#footer-bottom-wrap p { color:#000; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:12px; margin:0; padding:10px 0; text-align:right; }

/* Footer Social Networking */
#footer .social-networking {
border:0px solid #3772B2;
display:block;
float:left;
position:relative;
margin:0px 0px 0px 0px
 
 }

#footer .social-networking li {
border:0px solid #3772B2;
display:inline;
float:left;
position:relative;
margin:0px 30px 0px -24px
 }
 
 
#footer .facebook {
background:url(/images/btn_facebook.png) no-repeat;
float:left;
display:block;
height:36px;
overflow:hidden;
position:relative;
text-indent:-999em;
width:36px
 
}

#footer .blogspot {
background:url(/images/btn_blogspot1.png) no-repeat;
float:left;
display:block;
height:36px;
overflow:hidden;
position:relative;
text-indent:-999em;
width:36px
}

#footer .twitter {
background:url(/images/btn_twitter.png) no-repeat;
float:left;
display:block;
height:36px;
overflow:hidden;
position:relative;
text-indent:-999em;
width:36px
}

#footer .linkedin {
background:url(/images/btn_linkedin.png) no-repeat;
float:left;
display:block;
height:36px;
overflow:hidden;
position:relative;
text-indent:-999em;
width:36px
}