body{font-family: "Verdana","Arial","Helvetica","Geneva",sans-serif; 
  color: #110055; font-size: 9pt; 
   text-decoration: none}
body.fourtwentyss h1 {margin-bottom:0;}
body.fourtwentyss  h2 {margin-top:5px;}

img {max-width:100%;}
body.home,body.reference-guide,body.quote,body.fourtwentyss {background: url(../images/bg1.jpg);}
body.home a.home,body.reference-guide a.reference-guide,body.quote a.qquote {color:#fff;}

.wrapper {width:100%; max-width:864px; margin:0 auto; background: url(../images/bg2.jpg);}
.reference-guide .container {text-align:center; float:left; width: 100%;}
.reference-guide nav {margin-bottom:0;}

.sub-nav {width:100%; float:left; border-bottom:1px solid #999; height:32px; margin-bottom:10px;}
.sub-nav ul {float:none; width:660px; padding: 0; margin:0 auto; height:32px;}
.sub-nav li {list-style-type:none; float:left; min-width:150px; text-align:center; padding:6px 0 10px 0;}
.sub-nav li a {text-decoration:none; text-shadow:0px 0px 0px #CACBCD; font-size: 15px; color:#858587; font-family:helvetica; text-transform:uppercase; margin:0 30px;}
.sub-nav li a:hover,.sub-nav li a:active {color:#000; border-bottom:3px solid #D61B00;}
.logo img {height:auto;}

nav {margin-bottom:30px; height:40px; position:relative;
background: -moz-linear-gradient(top,  #969BAF 0%,#3A436A 15%); 
background: -webkit-linear-gradient(top,  #969BAF 0%,#3A436A 15%); 
background: linear-gradient(to bottom, #969BAF 0%,#3A436A 15%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#969BAF', endColorstr='#3A436A',GradientType=0 );
}
nav ul {width:100%; float:left; margin:0; padding:0;}
nav li {list-style-type:none; float:left; width:25%; text-align:center; padding:10px 0;}
nav li a {text-decoration:none; text-shadow:0px 1px 0px #6F7491; font-size: 18px; color:#9CA1B4; font-family:helvetica; letter-spacing:1px;}
nav li a:hover,nav li a:active {color:#fff;}
nav img {float:left;}
.active-flip {display:none;}
.active-flip a {text-decoration:none; text-shadow:0px 1px 0px #6F7491; font-size: 18px; color:#fff;}
.border {margin:20px; border-bottom:1px solid #999;}
footer {clear:both; text-align:center; padding:10px 0; border-top:2px solid #000; width:96%; margin:0 auto;}
.col.left,.col.middle,.col.right {float:left;}
.col.left{width:33%; max-width:180px; padding: 0 10px 0 17px; text-align:center;}
.col.right {width:33%; max-width:180px; padding: 0 17px 0 10px; text-align:center;}
.col.middle {width:75%; max-width:418px; padding:0 15px; border-left: 1px solid #999; border-right:1px solid #999; min-height:618px;}
p{line-height: 18px;}

.text{text-decoration: none;
	font-size: 9pt}
		
UL{color: #110055;
 font-size: 9pt;
  text-decoration: none;
	line-height: 18px;
  list-style-type: disc;}

LI{color: #110055;
  text-decoration: none;
  	font-size: 11pt;
	line-height: 20px;
  list-style-type: disc;}


.headline{color: #666666;
  line-height: 20px;
	font-size: 10pt}

.small{text-decoration: none;
	font-size: 7pt}
	
.splash{color: #2b3751;
  line-height: 22px;
	text-decoration: none;
	font-size: 11pt}

	
.sprint{color: #2b3751;
  line-height: 14px;
	text-decoration: none;
	font-size: 7pt}
	
A{color: #000099;
	font-size: 10pt;
	text-decoration: underline;}

A:hover{color: #d61b00;
	text-decoration: none;}

A:active
{
outline: none;
}

A:focus
{
-moz-outline-style: none;
}

.about-stainless {margin: 20px; clear:both;}
.splash.ss-grade-types {margin: 10px 20px 0 50px;}
.grade-col {float:left; width:47%; margin:10px;}
.clear {width:100%; clear:both;}
.quote .container {float:left; width:100%; padding-bottom:20px;}
form input, textarea {width:100%; max-width:390px;}
form input.submit,form input.reset {width:inherit;}
.qu-left,.qu-right {float:left; padding: 0 16px;}
.qu-left .first {margin-top:3px;}
.qu-right {border-left: 1px solid #999; text-align:center;}
.qu-right p {line-height:2.0em;}
.qu-right img {margin-top:150px;}
@media only screen and (max-width: 895px){
.col.middle {width:45%;}
.qu-left,.qu-right {width:45%;}
}

@media only screen and (max-width: 840px){
.col.middle {width:65%; max-width:inherit; border-right:none;}	
.col.right {width:96%; max-width:inherit; padding:10px 0; text-align:center; border-top:1px solid #999; margin:10px 20px;}
}

@media only screen and (max-width: 737px){
.grade-col {width:100%;}
}

@media only screen and (max-width: 710px){
.active-flip {display:block; position:relative; top:8px; padding-left:20px; z-index:100;}
nav {margin-bottom:0;}
nav ul {display:none; background: #3A436A; position:absolute; top:40px;}
nav li {width:100%;}
nav li a {display:block;}
.col.middle {width:auto; max-width:inherit; border-right:none; min-height:inherit; border-top:1px solid #999; border-bottom:1px solid #999; float:none; padding-bottom:10px;}	
.col.right {width:auto; float:none; max-width:inherit; padding:10px 0; text-align:center; margin:10px 20px; border-top:none; clear:both;}
.col.left {width:auto; float:none; max-width:inherit; padding:10px 0; text-align:center; margin:10px 20px;}
.border {display:none;}
}

@media only screen and (max-width: 690px){
.sub-nav li a {margin:0 10px;}
.sub-nav li {min-width:inherit;}
.sub-nav ul {width:100%; height:auto;}
}

@media only screen and (max-width: 680px){
.qu-left,.qu-right {width:auto; float:none;}
form input, textarea {max-width:inherit;}
.qu-left img {display:block; margin:0 auto; height:auto;}
.qu-right img {margin-top:0; height:auto;}
}

@media only screen and (max-width: 570px){
.sub-nav {height:auto;}
.sub-nav li {width:100%;}
}