/***********************
STYLES
************************/
html {
height: 100%;
margin: 0;
padding: 0;
margin-bottom: 1px;
overflow: -moz-scrollbars-vertical !important;
}
/***********************
STYLES
************************/
body {
background: #3667B3 url(images/bodybg.gif) repeat-x scroll top left;
padding: 50px 0;
margin: 0;
text-align: left;
font-family: tahoma,sans-serif;
font-size: 0.85em;
color: #444;
}
/***********************
PARAGRAPH STYLES
************************/
.contact h1.contact {
font-size: 150%;
font-weight: bold;
margin: 20px 0 0 0;
padding: 0;
color: #444;
}
.contact h2 {
font-size: 110%;
font-weight: normal;
margin: 0 0 20px 0;
padding: 0;
}
.main p {
margin: 0 0 16px 0;
}
p.small {
font-size: 95%;
margin: 10px 0;
}
p.marginless, .mainright p.marginless {
margin: 0;
}
.main p.large {
font-size: 130%;
font-family: georgia, serif;
line-height: 130%;
}
.main p.grey {
background-color: #777;
padding: 16px;
}
.main p.white {
color: white;
}
.main p.picture {
background-image: url(images/parched.jpg);
background-position: top center;
background-repeat: no-repeat;
padding-top: 246px;
}
p.img {
background-color: #3667b3;
color: white;
font-size: 95%;
margin: 0 0 40px 0;
padding: 8px;
width: 354px;
}
span.small {
font-size: 80%;
}
span.bold {
font-weight: bold;
}
span.green {
color: #99CC33;
}
.blue {
color: #3667B3;
}
span.italic {
font-style: italic;
}
p.bold {
font-weight: bold;
}
h1.main {
font-weight: normal;
font-size: 180%;
margin: 0;
position: absolute;
bottom: 0;
color: #777;
}
.mainright h1 {
font-weight: bold;
font-size: 180%;
margin: 0;
padding: 16px 0;
color: #777;
}
h1.main span {
font-weight: bold;
color: #3667B3;
}
.industries h1.main span {
color: #99cc33;
}
#subheader div.left h1 {
color: white;
font-weight: bold;
font-size: 100%;
padding: 95px 0 0 0;
margin: 0 0 0 8px;
}
#subheader div.left h2 {
background: transparent url(images/greenbg.gif) repeat-x scroll top left;
color: white;
font-weight: bold;
font-size: 100%;
height: 42px;
padding: 0 0 0 16px;
line-height: 42px;
margin: 0 0 8px 0;
}
h2.blue {
background: #3667B3 none;
width: 372px;
margin: 0;
color: white;
font-weight: bold;
font-size: 100%;
padding: 0 0 0 8px;
line-height: 42px;
height: 42px;
}
#subheader div.left p {
line-height: 150%;
font-size: 95%;
margin: 0;
padding: 16px 16px 0 16px;
}
#subheader div.right h1 {
background: transparent url(images/curve2.gif) no-repeat scroll top left;
padding: 26px 0 0 16px;
font-weight: bold;
font-size: 100%;
margin: 0;
width: 134px;
color: white;
height: 29px;
}
#subheader div.right p {
font-size: 95%;
margin: 0 0 8px 0;
padding: 0;
line-height: 160%;
}
#subheader div.right p.onefifty {
margin: 16px 0 8px 0;
width: 150px;
}
.big p {
background: white none;
text-align: center;
position: absolute;
left: -24px;
top: 123px;
margin: 0;
height: 24px;
line-height: 24px;
padding-bottom: 2px;
}
.small p {
background: white none;
position: absolute;
margin: 0;
bottom: -10px;
padding: 0 8px;
height: 24px;
line-height: 24px;
}
.titles .small p {
position: relative;
font-size: 125%;
font-variant: small-caps;
color: #3667B3;
padding: 0;
left: 8px;
bottom: 0;
border-bottom: 1px solid #3667b3;
display: inline;
height: 28px;
line-height: 28px;
}
.titles .small p.specs {
color: #444;
font-size: 95%;
border-bottom: 0 none;
display: block;
margin: 0;
height: 24px;
line-height: 24px;
}
.titles .small p span {
font-weight: bold;
}
.tt p {
left: 45px;
}
.ft p {
left: 60px;
}
.et p {
left: 92px;
}
form fieldset p {
background-color: transparent;
text-align: left;
color: #444;
padding: 0;
height: auto;
}
form fieldset p.thanks {
background: transparent url(images/tick.gif) no-repeat scroll;
padding: 0 0 0 50px;
color: #3667b3;
font-size: 140%;
font-weight: bold;
line-height: 40px;
margin: 16px 0;
}
#footer p {
margin: 16px 0 0 0;
font-size: 90%;
}
#footer p.download {
position: absolute;
right: 50px;
top: -20px;
width: 195px;
margin: 0;
padding; 27px 0 0 0;
font-size: 80%;
}
#footer p.download img {
position: absolute;
margin: 0;
right: 0;
bottom: 0;
}
#footer .download a:hover {
text-decoration: underline;
border-bottom: 0 none;
}
#footer span {
display: inline-block;
padding: 0 8px;
}
/***********************
DIV STYLES
************************/
object {
display: block;
margin: 0;
}
div#wrapper {
background: white none;
width: 800px;
padding: 50px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
*html div#wrapper {
padding-bottom: 25px;
}
div#logo {
height: 62px;
width: 800px;
}
div#header {
background: #3667B3 none;
padding: 16px;
width: 768px;
}
/*
.home div#header {
background: #3667B3 url(images/header.jpg) no-repeat scroll top left;
height: 234px;
padding: 16px 16px 0 16px;
}
*/
div.main {
background: #f3f3f3 none;
clear: left;
font-size: 95%;
line-height: 150%;
width: 346px;
margin: 0 0 40px 0;
padding: 16px;
border: 1px solid #ddd;
}
.dealers div.main {
margin: 0;
}
.mainright div.main {
width: 304px;
margin: 0;
}
div.mainleft {
clear: left;
float: left;
margin: 0;
overflow: hidden;
width: 380px;
}
div.mainright {
clear: right;
float: right;
margin: 0;
overflow: hidden;
width: 370px;
}
.dealers div.mainright {
background: #f3f3f3 none;
width: 336px;
padding: 0 16px 16px 16px;
border: 1px solid #ddd;
}
div.clearleft {
clear: left;
width: 380px;
margin: 0 0 40px 0;
position: relative;
}
div.marginless {
margin: 0;
}
div#subheader {
background: transparent none;
width: 800px;
height: 70px;
overflow: hidden;
margin: 0 0 32px 0;
position: relative;
}
.home div#subheader {
background: transparent url(images/h2a.gif) no-repeat scroll top left;
width: 800px;
height: auto;
position: static;
margin: 0;
}
div.seven {
margin: 0 auto 40px auto;
position: relative;
width: 260px; /* restore to 700px when all 3 tanks are displayed */
height: 135px;
}
div.big {
padding: 2px 0;
border-top: 1px dashed #ccc;
border-bottom: 1px dashed #ccc;
border-right: 0 none;
border-left: 1px solid #999;
height: 255px;
margin: 0 auto 40px auto;
}
div.small {
float: left;
position: relative;
margin: 0 0 0 37px;
padding: 0 2px;
height: 147px;
border-top: 0 none;
border-left: 1px dashed #ccc;
border-right: 1px dashed #ccc;
border-bottom: 1px solid #999;
display: inline;
}
*html div.small {
margin: 0 0 0 36px;
}
.titles div.small {
border: 0 none;
padding: 0 3px;
height: auto;
}
div.titles {
height: auto;
margin: 0 auto 20px auto;
overflow: hidden;
}
div.tt {
width: 138px;
}
div.ft {
width: 200px;
}
div.et {
width: 233px;
}
#subheader div.right {
width: 370px;
}
#subheader div.padded {
padding: 96px 0 27px 0;
}
.home #subheader div.right {
background: transparent url(images/stack.gif) no-repeat scroll 175px 0;
margin: 0 0 40px 0;
border-bottom: 1px dashed #ccc;
}
.home #subheader div.video {
background: transparent none;
clear: right;
width: 370px;
padding: 0;
margin: 0;
border-bottom: 0 none;
}
#subheader div.left {
background: #f3f3f3 none;
width: 378px;
padding: 0 0 16px 0;
margin: 0 0 20px 0;
border-style: solid;
border-color: #ddd;
border-width: 0 1px 1px 1px;
}
#subheader div.grey {
background: #929397 none;
width: 380px;
border-width: 0 0 6px 0;
border-style: solid;
border-color: #99cc33;
}
#subheader div.last {
margin: 0;
}
#subheader div.curve {
background: transparent url(images/curve.gif) no-repeat scroll bottom left;
height: 124px;
width: 380px;
padding: 0;
margin: 0;
border: 0 none;
}
div#footer {
margin: 0 auto;
clear: both;
background-color: #044D7E;
color: white;
padding: 16px 50px;
width: 800px;
position: relative;
}
/***********************
LIST STYLES
************************/
#header ul, #footer ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
}
#footer ul {
height: 20px;
}
#header li, #footer li {
margin: 0 10px 0 0;
padding: 0 10px 0 0;
overflow: hidden;
float: left;
font-size: 95%;
border-right: 1px solid white;
}
#footer li {
border-right: 1px solid #779CD4;
}
#header li.no_border, #footer li.no_border {
border-right: 0 none;
}
.main ul {
margin: 0 0 16px 0;
padding: 8px;
background-color: #777;
color: white;
}
.main ul.marginless {
margin: 0;
}
.main li {
list-style-type: square;
list-style-position: inside;
margin: 0 0 8px 0;
padding: 0 0 0 16px;
}
.main li.bottom {
margin: 0 0 3px 0;
}
.main li span {
color: #99cc33;
}
.main li.title {
list-style-type: none;
list-style-position: outside;
padding: 0;
color: #ffcc00;
font-weight: bold;
}
.main li.description {
list-style-type: none;
list-style-position: outside;
padding: 0 0 0 16px;
color: #ffcc00;
}
.main li.divider {
margin: 16px 0 8px 0;
padding: 16px 0 0 16px;
border-top: 1px solid #ddd;
}
.main li.indent {
list-style-type: none;
list-style-position: outside;
margin: 0 0 8px 32px;
}
.industries .main li.title, .industries .main li.description {
color: #99cc33;
}
.grey ul {
list-style-type: none;
padding: 0;
overflow: hidden;
width: 380px;
margin: 0;
}
.grey li {
float: left;
margin: 8px 0 0 16px;
height: 30px;
line-height: 30px;
color: white;
font-size: 95%;
}
.grey li.left {
background-color: #777;
padding: 0 0 0 8px;
width: 122px;
}
dl {
float: left;
margin: 0 0 20px 20px;
width: 190px;
}
dd.border {
border-bottom: 1px solid #444;
margin: 0 0 5px 0;
padding: 0 0 5px 0;
}
dd {
margin: 0;
font-size: 95%;
}
/***********************
IMAGE STYLES
************************/
img {
border: 0 none;
outline: 0 none;
}
img.left {
float: left;
margin: 0 16px 0 0;
}
img.right {
float: right;
margin: 0 0 0 16px;
vertical-align: bottom;
}
.big img {
margin: 0 0 0 40px;
float: left;
}
.small img {
position: absolute;
bottom: 20px;
}
img.banner {
position: absolute;
top: 3px;
right: 3px;
}
/***********************
ANCHOR STYLES
************************/
a:active, a:focus {
outline: none;
}
.main a, a:visited {
color: #3667b3;
text-decoration: none;
border-bottom: 1px solid #3667b3;
}
.main a:hover {
border-bottom: 0 none;
}
#header a {
display: block;
text-decoration: none;
border: 0 none;
margin: 0;
padding: 0;
color: white;
}
.home #header a.home {
border-bottom: 1px solid #3667b3;
}
.about #header a.about, .why #header a.why, .industries #header a.industries, .specs #header a.specs, .dealers #header a.dealers, .contact #header a.contact {
color: #FFCC00;
border-bottom: 1px solid #FFCC00;
}
#header a:hover, #footer a:hover, .home #header a.home:hover {
border-bottom: 1px solid #99CC33;
color: #99CC33;
}
#footer a {
display: block;
text-decoration: none;
border: 0 none;
margin: 0;
padding: 0;
color: #779CD4;
}
#footer .download a {
color: #3667B3;
}
#footer .download a:hover {
color: #3667B3;
}
.about #footer a.about, .why #footer a.why, .industries #footer a.industries, .specs #footer a.specs, .dealers #footer a.dealers, .contact #footer a.contact {
color: #FFCC00;
border-bottom: 1px solid #FFCC00;
}
a.blue {
text-decoration: none;
color: #3667B3;
display: inline;
}
a.blue:hover {
border-bottom: 1px solid #3667B3;
}
/***********************
FORM STYLES
************************/
form {
font-size: 95%;
margin: 0;
overflow: hidden;
}
form p {
background: #3667b3 none;
height: 26px;
line-height: 26px;
color: white;
text-align: right;
margin: 0 0 16px 0;
padding: 0 16px 0 0;
}
form p.green {
background-color: #99CC33;
}
ol {
list-style-type: none;
padding: 0;
margin: 24px 0 0 0;
}
form li {
margin: 0 0 16px 0;
}
form li.bottom {
margin: 0;
}
label{
float: left;
cursor: pointer;
margin: 0 12px 0 0;
width: 80px;
text-align: right;
line-height: 24px;
height: 24px;
}
fieldset {
padding: 0 16px 16px 16px;
border: 1px solid #ccc;
margin: 0 0 24px 0;
}
legend {
padding: 0 8px;
font-weight: bold;
color: #3667b3;
}
legend.green {
color: #99CC33;
}
textarea {
border: 1px solid #ccc;
width: 222px;
padding: 4px 8px;
overflow: auto;
}
input {
border: 1px solid #ccc;
width: 222px;
padding: 4px 8px;
}
.thanks input, .thanks textarea {
color: #3667B3;
font-family: tahoma;
font-size: 100%;
}
input.button {
background-color: #3667b3;
border: 0 none;
color: #fff;
width: 70px;
cursor: pointer;
height: auto;
padding: 3px 0;
margin: 0;
font-variant: small-caps;
letter-spacing: 1px;
float: left;
}
input.button.green {
background-color: #99CC33;
}
* html input.button {
padding: 4px 0 3px 0;
}