/**************************************************
  THIS IS THE MAIN MONSTER SUPERCLEAN STYLE SHEET
**************************************************/
/*BODY & GENERAL STYLES*/

*{
margin:0;
padding:0;
border: 0;
}

html, body{
width:99.8%;
height:100%;
margin:0;
padding:0;

}

html{
min-height: 100%;
margin-bottom: 1px;
}

body{
font: normal 1em Arial, Helvetica, Sans-serif;
background-color: #002F65;
font-size: 70%;
max-width: 1400px;
}

div.container{ 
width:100%;
text-align: center;
padding: 0;
margin: 0;
border: 0;
float:left;
background-color: transparent;
clear: both;

}


b{
font-weight: 600;
}

a:focus
{
outline:none;
}



/*LOGO, CONTENT, HEADER & FOOTER*/


div.left {
float:left;
font-size:143%;
margin: 15px 0 10px 1.5%;
width:13%;
text-align:center;
background-color: transparent;
border: 0;

}

div.content1,
div.content2{
float: left;
font-size:143%;
height:100%;
text-align:center;
background-color: transparent;
}


div.content1 {
background-image: url(../images/superclean/superclean-range4-650pxw.jpg);
background-position: center top;
background-repeat: no-repeat;
height:580px;
width:82.8%;
margin:2.5% 0 0 1.4%;
border: 0;


}

div.content2 {
margin:1.7% 0 0 1.4%;
width:83.8%;
}

div.content2 h3{
margin: 0 0 6px 0;
font: normal 80% Arial, Helvetica, sans-serif;
color: #fff;
}


div.content2 .subhead{
display:block;
float:left;
text-align: left;
padding: 4px 0 8px 8px;
font: normal 95% Arial, Helvetica, sans-serif;
color: #fff;
width:90%;
margin: 25px auto 0 5%;
clear:both;
}

div.content2 .subhead h2{
font: normal 130% Arial, Helvetica, sans-serif;
color: #ED662F;

}


/*
Spacer Divs
*/

div.spacer{
clear: both !important;
}


/*Container for Image Map divs*/
.content1 .range{
position:relative;
width:650px;
height:580px;
margin: 0 auto 0 auto;

}


/*Image Map divs*/
.range .ez2,
.range .sc20,
.range .sc60,
.range .sc1200{
position: absolute;
top:310px;
left:45px;
width: 104px;
height:97px;
}

.range .ez2{
 top: 65px;
 height: 342px;
}

.range .sc20{
 left: 316px;
 width: 108px;
}

.range .sc1200{
 left: 186px;
 width: 108px;
}

.range .sc60{
 left: 445px;
  width: 130px;
}

.ez2 a,
.sc20 a,
.sc60 a,
.sc1200 a{
display: block;
position:relative;
width:100%;
height: 100%;

}

.range a:focus,
.range a:hover{
border:1px dashed #ed662f;
}

.copy a
.copy a:focus,
.copy a:hover{
border: none;
}



html>body content1{
width: 80%;
font-size: 150%;
}



/*LOGO POSITION*/
.logo2,
.copy,
.copy2 {
position:relative;
width:80%;
margin: 6% 15% 0 auto;
padding: 0;
background:transparent;
text-align: center;
clear: both;

}

.logo2{
float:left;
width:100%;
margin: 0;
 }
.copy {
position:absolute;
top:138px;
left: 220px;
width:150px;
height:146px;
margin: 0 auto 0 auto;
padding: 0;
background:transparent;
text-align: left;
clear: both;
font: normal 120% tahoma, Helvetica, sans-serif;
color: #000;
}

.copy2 {
position:absolute;
top:535px;
width:650px;
margin:0 auto 0 auto;
padding:0;
background:transparent;
text-align: center;
clear: both;
font: bold 140% tahoma, Helvetica, sans-serif;
color: #ED662F;
}



.footercont1
{
float:left;
font-size: 140%;
text-align: center;
width: 83.8%;
margin: 30px 0 0 16%;
color: #fff;
}


.subfooter,
.valid{
position:relative;
width:100%;
left: 0;
background: transparent;
color: #FFF;
padding: 0;
margin: 1% 0 0 0;
}

.subfooter{
font-size: 79%;
padding: 0;
}

.footercont1 h2
{
margin: 0 auto 1% auto;
font: normal 120% Arial, Helvetica, sans-serif;
color: #ED662F;
}





.valid{
 margin: 1% 0 2% 0;
 color: #fff;
 font-size: 0.6em;
}

.subfooter p,
.footer a,
.footer a:link,
.footer a:visited,
h3 a,
h3 a:link,
h3 a:visited{
color : #F5AA8B;
text-decoration : none;
text-align: center;
font: normal 90% tahoma, Helvetica, sans-serif;
padding: 0 10px 0 10px;
}

.footer a:focus,
.footer a:hover,
h3 a:focus,
h3 a:hover{
color :   #ED662F;
text-decoration : underline;
}

.footer a:active,
h3 a:active{
color : #ED662F;
text-decoration : none;
}



h3 a,
h3 a:link,
h3 a:visited,
h3 a:focus,
h3 a:hover,
h3 a:active{
font-size: 100%;
}



.valid a,
.valid a:link,
.valid a:visited{
color : #F5AA8B;
text-decoration : none;
text-align: center;
font: normal 110% tahoma, Helvetica, sans-serif;
padding: 0 10px 0 10px;
}

.valid a:focus,
.valid a:hover{
color :   #ED662F;
text-decoration : underline;
}

.valid a:active {
color : #ED662F;
text-decoration : none;
}

 /*CONTENT COLUMNS FOR PRODUCT PAGES*/
 
 
.leftcol{
float:left;
width:47.15%;
background:transparent;
text-align: center;
padding: 19px 0 0 0;
/*margin:0 1.5% 0 0;  */
margin: 0 0 0 1.5%;
}
 


.rightcol{
float:left;
width:34.1%;
background:transparent;
text-align: center;
padding: 27px 0 0 0;
margin: 0 0 0 1.5%;

}
 
.leftcol h1,
.rightcol h1{
margin: -2px 0 0 0;
font: normal 2.4em Arial, Helvetica, sans-serif;
color: #ED662F;
}

.leftcol h2,
.rightcol h2{
margin: 0px;
font: normal 1.6em Arial, Helvetica, sans-serif;
color: #ED662F;
}

.leftcol h3,
.rightcol h3{
margin: 0 0 6px 0;
font: normal 120% Arial, Helvetica, sans-serif;
color: #fff;
}


.leftcol h4,
.rightcol h4{
margin: 4px 0 0 0;
font: italic bold 1.2em Arial, Helvetica, sans-serif;
color: #ED662F;
}

.leftcol h5,
.rightcol h5{
margin: 4px 0 0 0;
font: italic bold 1.3em Arial, Helvetica, sans-serif;
color: #ED662F;
}

.rightcol h5{
clear:both;
}

.leftcol h6
{
margin: 12px 0 0 0;
font: italic bold 150%/160% Arial, Helvetica, sans-serif;
color: #ED662F;
text-align:center;
}

.leftcol p,
.rightcol p,
.leftcol p.c
{
margin: 0;
padding: 0 6px;
font: normal 130%/135% Arial, Helvetica, sans-serif;
color: #F5AA8B;
text-align:left;
}

.leftcol p.c
{
 text-align:center;
}
.leftcol p.w,
.rightcol p.w{
margin: 5px 0 -12px 0;
padding: 0;
font: normal 110%/115% Arial, Helvetica, sans-serif;
color: #FFF;
text-align: center;
}


/**********************************************
******** THESE GO INSIDE THE COLUMNS **********
**********************************************/

/*****360pxw centered leftcol*****/
.innercont,
.innercont1,
.innercont2,
.innercont3,
.innercont4,
.innercont4a,
.innercont6,
.innercont7
{
width:360px;
text-align:justify;
margin: 8px auto 0 auto;
font-size: 145%;
font-family: Arial, Helvetica, Sans-serif;
color:  #F5AA8B;
}


.innercont1{
position:relative;
}

.innercont1 p{
position:absolute;
display:block;
font-size:95%;
padding: 0 25px 0 0;
top: 265px;
left: 150px;
z-index:100;
}


/*****260pxw centered rightcol*****/
.innercont2,
.innercont7{
width:260px;
}

/*centers dimension table in left column*/
.leftcol .innercont2{
 width:290px;
}
.innercont7{
text-align:left;
font-size:110%;
margin: 2px auto 0 auto;
}

/*****100%w fluid both cols*****/
.innercont3{
width:100%;
}





/*****100%w fluid both cols*****/
.innercont4,
.innercont4a{
width:100%;
color:#FFF;
text-align: center;
margin: 18px auto 20px auto;
}

.innercont4a{
font-size: 100%;
margin: 15px auto 30px auto;
}

/*****  BOX *****/
.innercont6{
width:80%;
margin: 5px auto 15px auto;
padding: 8px 5px 2px;
border: 1px solid #ED662F;
font-size: 110%;
text-align: center;
}

.innercont6 p.anti{
font-size: 95%;
}


.innercont p,
.innercont2 p,
.innercont3 p
{
font-size: 90%;

}
.innercont p,
.innercont3 p,
.innercont6 p{
margin-bottom:10px;
}

p.up{
display:block;
position:relative;
width:340px;
font-size: 130%;
text-align: left;
margin:2px auto 16px auto;
color: #ED662F;
}

.innercont3 h3,
.innercont3 h4{
font-size: 90%;
}

.innercont3 h5{
 font-size: 100%;
}

.innercont3 h3{
text-align:center;
margin: 0 0 15px 0;
}

 
.innercont3 p.anti{
text-align:left;
font: normal 75% /130% Arial, Helvetica, Sans-serif;
color:  #F5AA8B;
}



.innercont4 a,
.innercont4 a:link,
.innercont4 a:visited,
.innercont4a a,
.innercont4a a:link,
.innercont4a a:visited{
color : #F5AA8B;
text-decoration : none;
text-align: center;
font: normal 0.9em tahoma, Helvetica, sans-serif;
padding: 0 10px 0 10px;
}


.innercont4 a:focus,
.innercont4 a:hover,
.innercont4a a:focus,
.innercont4a a:hover{
color :   #ED662F;
text-decoration : underline;
}


.innercont4 a:active,
.innercont4a a:active {
color : #F5AA8B;
text-decoration : none;
}



.innercont7 p{
font-size:105%;
margin: 0 auto 15px auto;
}

 
/**********************************************
******** BULLETED LIST ****************
**********************************************/

ul.orange,
ol.orange {
display: block;
position:relative;
list-style-position:outside;
color: #ED662F;
list-style-type: square;
left: 22px;
}

ol.orange {
list-style-type: decimal;
font-size: 120%;
left: 25px;
padding: 3px 0 10px 0;
}



ul.orange li,
ol.orange li{
font-family: Arial, Helvetica, Sans-serif;
font-size: 100%;
}

.white{
color: #FFF;
}

img.upa{
display:inline;
position:relative;
top:2px;
}

.innercont7 ol.orange {
list-style-position:outside;
font-size:120%;
left: 5px;
padding: 3px 0 10px 0;
}

.innercont7 ol.orange li {
padding: 0 0 10px 0;
}
 



/*ORANGE NAVIGATION BUTTONS*/
#button2 {
float:left;
width: 100%;
border: 0;
padding: 0;
margin: 9% 0 0 0;
background-color: transparent;
font: normal 0.7em tahoma, Helvetica, sans-serif;
z-index: 500;
}

#button2 ul {
list-style: none;
margin: 0;
padding: 0;
border: 0;
}

#button2 li {
border-bottom: 3px solid transparent;
border-right: 0;
margin: 0;
}

#button2 li a, 
#button2 li a:link,
#button2 li a:visited {
display: block;
padding: 1px 6px 2px 5px;
border: 2px solid;
border-color:  #F9CCBA #F1885D #F1885D #F9CCBA;  
background-color: #F5AA8B;
color: #000;
text-decoration: none;
text-align: center;
}

html>body #button2 li a {
/*width: 82%;
font-size: 101%; */
}



#button2 li a:hover,
#button2 li a:focus,
#button2 li a:active
{
padding: 2px 4px 1px 7px;
border: 2px solid;
border-color: #F1885D  #F9CCBA #F9CCBA #F1885D ; 
background-color: #DF9B7E; 
font-style: normal;
text-decoration: none;
color: #6F4D3F;
margin: 0 2px 0 2px;
}


h1{
font: normal 1.5em tahoma, Helvetica, sans-serif;
color: #ED662F;
}

/***SKIP LINKS***/
.skip{
position:absolute;
right: 5%;
width:79.3%;
top:0;
padding-top: 10px;
background-color:transparent;
text-align:right;
color: #fff;
font: normal 80%/100% Verdana, Arial, Helvetica, sans-serif;
z-index: 100;
}

.skip a,
.skip a:link,
.skip a:visited,
.skip a:active{
color: #F5AA8B;
text-decoration: none;
padding: 0 8px 2px 8px;
}



.skip a:focus,
.skip a:hover{
text-decoration: underline;
color: #ED662F;
}

img{
text-align:center;
}

img.left{
margin: 0 10px 0 0;
float:left;
clear:both;
}

hr{
background-color:#FFF;
color:#FFF;
height: 1px;
width: 80%;
text-align: center;
margin: 20px auto 20px 10%;
}

.dkblue
{
color: #002F65;
font: Bold 120% Verdana, Arial, Helvetica, sans-serif;
}



/**********************************************
******** TABULAR DATA ****************
**********************************************/
table{
text-align: center;
display:block;
position:relative;
width:100%;
border:none;
font: normal 100%/120% Verdana, Helvetica, sans-serif;
color: #fff;
margin: -12px auto 25px auto;
}
td{
padding: 5px 0 0 0;
font: 600 85% Arial, Helvetica, sans-serif;
color: #f5aa8b;
text-align: center;
}
tr{
width:100%;
border:0;
margin: 0;
padding:0;
}
td.left,
th.left{
border:none;
padding: 2px 2px 2px 5px;
margin:0;
text-align: right;
vertical-align: top;
font: normal 0.8em Verdana, Helvetica, sans-serif;
color: #ed662f;
}

td.right,
th.right{
border:1px solid #f5aa8b;
padding: 2px 5px;
margin: 0;
text-align: left;
vertical-align: top;
font: normal 0.8em Verdana, Helvetica, sans-serif;
color: #fff;
}

th.left,
th.right{display:none;}


td.left a,
td.right a{
font: normal 1em Verdana, Helvetica, sans-serif;
color: #FFF;
text-decoration: none;
background-color:transparent;
 }

td.left a:link,
td.right a:link,
td.left a:visited,
td.right a:visited{
text-decoration: none;
}

td.left a:focus,
td.right a:focus{
text-decoration: underline;
}

td.left a:hover,
td.right a:hover{
color: #F00;
text-decoration: underline;
}

td.left a:active,
td.right a:active{
text-decoration: none;
color: #F00;
}

td.left p,
td.right p{
color: #Fff;
margin: 0 0 0 -6px;
}

td.right p{
font-size: 85%;
}





.content2 p.or
{
color: #f5aa8b;
}

/*general code*/

img.spaced{
vertical-align: bottom;
margin: 10px 12px 14px 12px;
}

.footbar
{
width:350px;
background-image: url(../images/red-slice-350pxw.png);
background-position: top;
background-repeat:repeat-y;
font: normal 110%/116% Verdana, Helvetica, Sans-serif;
color: #002F65;
letter-spacing: 9px;
text-align: center;
padding: 0 0 2px 8px;
margin:auto;
}



img.bord
{
display: block;
 border: 1px solid #000;
 text-align: center;
 margin: auto;
 }

 .innercont3
 {
 padding: 0;
 }

.innercont3 ul.orange
{

width:60%;
min-width:260px;
 margin: 0 auto;
 list-style-position: inside;
}

.innercont3 ul.orange li
{
 margin:0;
}


#player,
#timedtext
 {
 width:480px;
	margin:0;
	padding:0;
  min-height:295px;
	max-height:295px;
	border:0;
	outline:0;
 	}





/*///~~Centered Floating Thumbnails~~~///*/
.wrapper,
.wrapper2
{
 text-align: center;
	background-color: transparent;
	margin-top: 10px;
}
.wrapper p,
.wrapper2 p
 {
	display: inline;
}
.wrapper p span,
.wrapper2 p span
 {
 font: normal 80% Verdana, Arial, Helvetica, sans-serif;
  margin: 1em;
	vertical-align: top;
	width: 140px;
  height: 110px;
	display: table-cell;
	display: inline-table;
	color: #fff;
}

.wrapper2 p span
 {
 width: 125px;
  height: 100px;
 }


.wrapper p span span
{
font-size:100%;
color: #ED6643;
width: auto;
height: auto;
margin:0;
}

.wrapper2 p span span.flyout
{
display:none;
font-size:70%
}


.wrapper p img
{
display: block;
margin-bottom: 1px;
border: none;
margin-top: 5px;
}

.wrapper p img

{
border: 1px solid transparent;
}

.wrapper p a:focus img,
.wrapper p a:hover img
{
border:1px dashed #ed662f;
}


.wrapper p a,
.wrapper p a:link,
.wrapper p a:visited
{
text-decoration: none;
color: #fff;
font-size:100%;
width: auto;
height: auto;
margin:0;
}

.wrapper p a:focus,
.wrapper p a:hover,
.wrapper p a:active
{
color: #ed662f;
text-decoration: underline;
}

/*Centered Floating Image Box*/
.imgbox a .flyout,
.imgbox span
{
display: none;
}


.imgbox a:hover .flyout,
.imgbox a:focus .flyout
{
display: block;
position: fixed;
top:40%;
right:50%;
margin-top:-132px;
margin-right: -180px;
text-decoration: none;
z-index: 2;
clear:both;
}

.imgbox img
{
background-color: transparent;
border: 0;
padding: 0;
width: 125px;
height: 100px;
}

.imgbox .flyout
{
border: 1px solid #000;
background-color: #FFF;
width: 360px;
height: 235px;
}

.wrapper2 p.imgbox span
{
width: 125px;
height: 100px;
padding: 0;
margin:0 -11px 2px 0;
text-align:center;
}

.wrapper p.imgbox a:focus img,
.wrapper p.imgbox a:hover img,
.wrapper2 p.imgbox a:focus img.flyout,
.wrapper2 p.imgbox a:hover img.flyout
{
border:1px solid #000;
/*outline: 500px solid rgba(235,235,235, 0.25);*/
}


.wrapper2 p.imgbox span a:hover span.flyout,
.wrapper2 p.imgbox span a:focus span.flyout
{
display: block;
position:fixed;
top:40%;
right: 50%;
width: 360px;
color: #002f65;
height: 24px;
margin: 110px -180px 2px 0;
text-align: center;
background-color: #F9ccba;
font: normal bold 125%/150% Verdana, Helvetica, Sans-serif;
text-decoration: none;
}

.wrapper2 a
{
text-decoration:none;
}