/* -------------------------------------------------------------- 
  
   reset.css
   * Resets default browser CSS.
   
   Based on work by Eric Meyer:
   * meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
   
   	vertical-align: top; removed from block by us
   
-------------------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
}

/* @group Structure */

body, html {
	background: #000000 url(../cleve-tank-images/960-bg.jpg) repeat-y center top;
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 12px;
	line-height: 18px;
	font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;
}

#nav {
	background: #7d0004 url(../cleve-tank-images/nav-bg.jpg) no-repeat center top;
	margin: 0px;
	z-index: 1500;
	width: 960px;
	height: 108px;
}

#masthead {
    float: left;
    clear: both;
    width: 960px;
}

/* mastheads */

#masthead h1 {padding: 15px 20px; font-size: 22px; line-height: 28px; font-weight: bold; font-family: Arial, Helvetica, Swiss, sans-serif;
}

#masthead h2 {margin: -10px 10px 10px 10px; padding: 0px 10px; font-size: 20px; line-height: 24px; font-weight: normal; font-family: Arial, Helvetica, Swiss, sans-serif;
}


.mast-home {
	background-image: url(../cleve-tank-images/Cleveland-Tank-masthead-960.jpg);
	height: 252px;
}

.mast-cert {
	background-image: url(../cleve-tank-images/masthead-certification.jpg);
	height: 188px;
}

.mast-oem {
	background-image: url(../cleve-tank-images/masthead-oem-alt.jpg);
	height: 188px;
}

.mast-powder {
	background-image: url(../cleve-tank-images/masthead-powder.jpg);
	height: 188px;
}
.mast-products {
	background-image: url(../cleve-tank-images/products-masthead-960.jpg);
	height: 188px;
}

.mast-mounts {
	background-image: url(../cleve-tank-images/mounts-masthead-960.jpg);
	height: 188px;
}

.mast-units {
	background-image: url(../cleve-tank-images/units-masthead-960.jpg);
	height: 188px;
}

.mast-accessories {
	background-image: url(../cleve-tank-images/accessories-masthead-960.jpg);
	height: 188px;
}

.mast-rect {
	background-image: url(../cleve-tank-images/rect-masthead-960.jpg);
	height: 188px;
}

.mast-cyl {
	background-image: url(../cleve-tank-images/cyl-masthead-960.jpg);
	height: 188px;
}

.mast-alum {
	background-image: url(../cleve-tank-images/alum-masthead-960.jpg);
	height: 188px;
}

.mast-alumd {
	background-image: url(../cleve-tank-images/alumd-masthead-960.jpg);
	height: 188px;
}

.mast-alumstep {
	background-image: url(../cleve-tank-images/masthead-alum-step.jpg);
	height: 188px;
}

.mast-fl {
	background-image: url(../cleve-tank-images/fl-masthead-960.jpg);
	height: 188px;
}

.mast-al-fl {
	background-image: url(../cleve-tank-images/al-fl-masthead-960.jpg);
	height: 188px;
}

.mast-contact {
	background-image: url(../cleve-tank-images/contact-masthead-960.jpg);
	height: 188px;
}

.mast-bus {
	background-image: url(../cleve-tank-images/masthead-bus.jpg);
	height: 188px;
}
/* end */


#elevator {
	float: left;
	clear: both;
	background-color: #ffffff;
	height: 39px;
	width: 960px;
	margin: 0px;
	padding: 0px;
	white-space:nowrap;
}

#elevator h1 {
	color: #ffffff;
	font: bold italic 16px/24px Georgia, "Times New Roman", Times, serif;
	padding: 25px 0px 0px 20px;
}

#srch {
    float: right;
    width: 200px;
    padding: 5px 0px 5px 0px;
}

#content {
	float: left;
	clear: both;
}


#feature {
	float: left;
	clear: both;
}

#feature ul, #feature li, #feature ol {
	color: #90ab6a;
	font: normal 14px/22px Verdana, Arial, Helvetica, Swiss, sans-serif;
	padding: 5px;
}

#footer {
	float: left;
	clear: both;
	background: #d40d12 url(../cleve-tank-images/footer-bkg.jpg) no-repeat center top;
	height: 250px;
	width: 960px;
	margin: 0px;
}

#footer h3 {margin: 10px 0px 10px 90px; color: #ffffff; font-size: 16px; font-weight: bold; line-height: 18px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;}

#footer p {margin: 10px; color: #ffffff;font-size: 16px; line-height: 20px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;}

#footer a:link {color:#ffffff; font-size: 12px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

#footer a:hover {color:#ffee44; font-size: 12px;font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

#footer a:visited {color:#fbab1d; font-size: 12px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

.clearl {
	clear: left;
}

/* @end */

/* @group Typography */

#content h1, #content h2, #content h3 {
	color: #000000;
	font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;
	padding: 10px 20px 10px 20px;
}

#content h1 {
	font-size: 18px;
}

#content h2 {
	font-size: 16px;
}

#content h3 {
	font-size: 14px;
}

#content p {
	color: #000000;
	font: normal 12px/18px Verdana, Arial, Helvetica, Swiss, sans-serif;
	padding: 10px 20px 10px 20px;
}

#content hr {
	border: none 0;
	border-top: 1px solid #cccccc;	
	width: 89%;
	height: 1px;
	margin: 0px 0px 0px 20px;
	padding: 0px;
	/* left align in IE, Opera */
	text-align: left;
}

#content a:link {color:#94090d; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

#content a:hover {color:#d40d12; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

#content a:visited {color:#e16c0f; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

.bg-633 {
	background: #ffffff url(../cleve-tank-images/bg-633.gif) repeat-y center top;
}

.bg-84 {
	background: #ffffff url(../cleve-tank-images/bg-84.gif) repeat-y center top;
}

.bg-444 {
	background: #ffffff url(../cleve-tank-images/bg-444.gif) repeat-y center top;
}

.bg-93 {
	background: #ffffff url(../cleve-tank-images/bg-93.gif) repeat-y center top;
}

/* #content ul, #content li, #content ol {
	color: #000000;
	font: normal 12px/18px Verdana, Arial, Helvetica, Swiss, sans-serif;
}

*/

ul {
	margin: 0px 0px 0px 20px;
	padding: 0px 10px 5px 5px;
}

ol {
	margin: 0px 0px 0px 20px;
	padding: 0px 10px 5px 5px;
}

.sml {
	color: #000000;
	font: normal 10px/12px Verdana, Arial, Helvetica, Swiss, sans-serif;
	padding: 10px 20px 10px 20px;
}

.ovrstrk {text-decoration:line-through;
}

/* @end */


/* @group Links */

a:link {
	color: blue;
}

a:visited {
	color: purple;
}

a:hover {
	color: red;
}

a:active {
	color: orange;
}

#footer a:link {
	color: #ffffff;
}

#footer a:visited {
	color: #dddddd;
}

#footer a:hover {
	color: #ffffbb;
}

#footer a:active {
	color: #ffffbb;
}


/* BUTTONS */

.page-nav {
	font-family: Arial, Helvetica, Verdana, Swiss, sans-serif;
	font-size: .875em;
	padding: .5em;
}

.btn {
	border-radius: .375em;
	display: inline-block;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: .625em;
	padding: .5em 1em;
	text-decoration: none;
	-webkit-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
}

a.btn.bg-red,
a.btn.bg-blue,
a.btn.bg-blue-dark,
a.btn.bg-green,
a.btn.bg-orange {color: #ffffff;}

a.btn.bg-red:link {
	background-color: #b12c20;
	color: #ffffff;
}

a.btn.bg-red-dark:hover {
	background-color: #7b0009;
	color: #ffffff;
}
a.btn.bg-blue:hover, a.btn.bg-blue-dark:hover  {
	background-color: #3498db;
	color: #ffffff;
}

a.btn.bg-orange:hover {
	background-color: #ffddcc;
	color: #003355;
}

a.btn.bg-gray-light:hover {
	background-color: #cccccc;
}
a.btn.bg-green:hover {
	background-color: #336600;
	color: #ffffff;
}

.btn-social {
	border-radius: .375em;
	display: inline-block;
	margin: 1em .5em;
	padding: .25em;
}

/* @end */


/* @group Elements */

img.mat {
	border: 1px solid #cccccc;
	background-color: #ffffff;
	padding: 4px;
}

.pad-10{
	padding-left: 10px;
}

.pad-20{
	padding-left: 20px;
}

.bak2top {
	font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;
	font-size: 10px;
	color: #000000;
	background-color: #ffffff;
	border: 2px solid #cccccc;
	padding: 4px;
	z-index: 1200
}

.wr_fieldset {
width: 620px; 
margin: 12px 30px 12px 30px;
padding: 0; }

.wr_fieldset fieldset {
border: 1px solid #cccccc; }

.wr_fieldset legend {
margin: 0 10px 0 10px;
padding: 0 5px 0 5px;
color: #000000;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif; }

.wr_fieldset_pad {
margin: 0;
padding: 8px; }

.quotebox {
	border: 1px solid #cccccc;
	padding: 10px 10px 10px 10px;
}

/* Floating boxes, good for photos with captions or similar */


div.floatl {
  float: left;
  }
  
div.floatl p {
   text-align: left;
   width: 265px;
   }

div.floatr {
  float: right;
  }
  
div.floatr p {
   text-align: center;
   width: 265px;
   }
   
#scrollbox {
width:400px;
height:300px;
overflow: auto
}

/* @end */


/* @group E-comm */

/* Styles for Mal's e-commerce tables currently in most of my Excel TDF masters; probably should revisit these on site-by-site basis */

.ptcol {border-bottom: 1px solid #000000; text-align: center; font-size: 11px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

.ptfrm {border-bottom: 1px solid #cccccc; text-align: left; font-size: 11px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;}

.pthdr1 .pthdr {font-size: 14px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}


/* @end */

/* @group Tables */

/* Applies global padding and paragraph styles to entire table. Normally used for forms or tabular data within the main layout table so you do not need to add paragraph or other styles to each td */

table.frm td {
	padding: 1px; 
	font-size: 11px;
	line-height: 15px;
	font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;}
	
.tblborder {
	border: 1px solid #000000;
	border-collapse: collapse;
}

	
/* Add following as a table class="cellbkgrnd" for applying table cell backgrounds using tablestyle name="Alt Background By Style w/o formatting */

.cellbkgrnd {background-color: #cccccc;}

/* Adding bkground images to table cells or divs for announcement boxes or similar; commented out below until needed */

/* .bg1 {background: white url(images/divheader.gif) no-repeat top left; width: 236px; padding: 48px 10 10 10; border: 1px solid #548dab; border-collapse: collapse; text-align: left;} */

/* @end */

/* @group 960 */

/*
	960 Grid System ~ Core CSS.
	Learn more ~ http://960.gs/

	Licensed under GPL and MIT.
*/

/* =Containers
--------------------------------------------------------------------------------*/

.container_12
{
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	text-align: left;
	background-color: #ffffff;
	overflow: auto;
}

/* =Grid >> Global
--------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12
{
	display: inline;
	float: left;
	margin-left: 10px;
	margin-right: 10px;
}

.container_12 .grid_3
{
	width: 220px;
}

.container_12 .grid_6
{
	width: 460px;
}

.container_12 .grid_9
{
	width: 700px;
}

.container_12 .grid_12
{
	width: 940px;
}

/* =Grid >> Children (Alpha ~ First, Omega ~ Last)
--------------------------------------------------------------------------------*/

.alpha
{
	margin-left: 0;
}

.omega
{
	margin-right: 0;
}

/* =Grid >> 12 Columns
--------------------------------------------------------------------------------*/

.container_12 .grid_1
{
	width: 60px;
}

.container_12 .grid_2
{
	width: 140px;
}

.container_12 .grid_4
{
	width: 300px;
}

.container_12 .grid_5
{
	width: 380px;
}

.container_12 .grid_7
{
	width: 540px;
}

.container_12 .grid_8
{
	width: 620px;
}

.container_12 .grid_10
{
	width: 780px;
}

.container_12 .grid_11
{
	width: 860px;
}

/* =Prefix Extra Space >> Global
--------------------------------------------------------------------------------*/

.container_12 .prefix_3
{
	padding-left: 240px;
}

.container_12 .prefix_6
{
	padding-left: 480px;
}

.container_12 .prefix_9
{
	padding-left: 720px;
}

/* =Prefix Extra Space >> 12 Columns
--------------------------------------------------------------------------------*/

.container_12 .prefix_1
{
	padding-left: 80px;
}

.container_12 .prefix_2
{
	padding-left: 160px;
}

.container_12 .prefix_4
{
	padding-left: 320px;
}

.container_12 .prefix_5
{
	padding-left: 400px;
}

.container_12 .prefix_7
{
	padding-left: 560px;
}

.container_12 .prefix_8
{
	padding-left: 640px;
}

.container_12 .prefix_10
{
	padding-left: 800px;
}

.container_12 .prefix_11
{
	padding-left: 880px;
}

/* =Suffix Extra Space >> Global
--------------------------------------------------------------------------------*/

.container_12 .suffix_3
{
	padding-right: 240px;
}

.container_12 .suffix_6
{
	padding-right: 480px;
}

.container_12 .suffix_9
{
	padding-right: 720px;
}

/* =Suffix Extra Space >> 12 Columns
--------------------------------------------------------------------------------*/

.container_12 .suffix_1
{
	padding-right: 80px;
}

.container_12 .suffix_2
{
	padding-right: 160px;
}

.container_12 .suffix_4
{
	padding-right: 320px;
}

.container_12 .suffix_5
{
	padding-right: 400px;
}

.container_12 .suffix_7
{
	padding-right: 560px;
}

.container_12 .suffix_8
{
	padding-right: 640px;
}

.container_12 .suffix_10
{
	padding-right: 800px;
}

.container_12 .suffix_11
{
	padding-right: 880px;
}

/* =Clear Floated Elements
--------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

html body * span.clear,
html body * div.clear,
html body * li.clear,
html body * dd.clear
{
	background: none;
	border: 0;
	clear: both;
	display: block;
	float: none;
	font-size: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://www.positioniseverything.net/easyclearing.html */

.clearfix:after
{
	clear: both;
	content: '.';
	display: block;
	visibility: hidden;
	height: 0;
}

.clearfix
{
	display: inline-block;
}

* html .clearfix
{
	height: 1%;
}

.clearfix
{
	display: block;
}



/* @end */

/* @group mega menu */

ul#topnav {
	margin: 0; padding: 0;
	float:left;
	width: 100%;
	list-style: none;
	font-size: 1.1em;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	position: relative;
	z-index: 5000;
}

ul#topnav li a.home,
ul#topnav li a.oem,
ul#topnav li a.bus,
ul#topnav li a.certification,
ul#topnav li a.aftermarket,
ul#topnav li a.news,
ul#topnav li a.faq,
ul#topnav li a.contact
 {
	float: left;
	height: 28px;
	padding: 40px 15px 0 20px;
	color: #ffffff;
	font: 600 18px/20px "myriad-pro-semi-condensed",sans-serif;
	text-decoration: none;
	-webkit-transition: all 0.12s ease-out;
	-moz-transition: all 0.12s ease-out;
	margin-left: 15px;
}



ul#topnav li:hover a, ul#topnav li a:hover  {
	color: #ffffff;
	height: 28px;
	background-color: #f79b00; /* fallback for older IE */
	background-color: rgba(255,153,0,0.7);
	background: rgba(255,153,0,0.7); /* needed for oem hover */
}

ul#topnav li .sub {
	position: absolute;	
	top: 68px; left: 9px;
	background-color: #ffffff;
	padding: 4px;
	float: left;
	display: none;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	-moz-box-shadow: 0px 4px 8px #333;
	-webkit-box-shadow: 0px 4px 8px #333;
	box-shadow: 0px 4px 8px #333;
}

ul#topnav li .row {clear: both; float: left; width: 100%; margin-bottom: 10px;}

ul#topnav li .sub ul {
	list-style: none;
	margin: 0; padding: 0;
	width: 180px;
	float: left;
}
/* width 100% overrides parent list item */
ul#topnav .sub ul li {
	width: 100%; 

}

ul#topnav .sub ul li h2 {
	padding: 0; margin: 0;
	font-size: 14px;
	font-weight: normal;
}
ul#topnav .sub ul li h2 a {
	padding: 10px;
	background-image: none;

}

/* removed from tutorial code - background: url(navlist_arrow.png) no-repeat 5px 12px; */

ul#topnav .sub ul li a {
	float: none; 
	text-indent: 0; /*--Reset text indent--*/
	height: auto;
	padding: 10px;
	display: block;
	text-decoration: underline;
	font: 14px/20px Arial, sans-serif;
	color: #003355;
	background-color: #ffffff;
}

ul#topnav .sub ul li a:hover {
	background-color: #94090d;
	color: #ffffff;
	display: block;
	padding: 10px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

/* @end */