#salt-swim {
	background:url(https://commerce.hayward-pool-assets.com/magento/Salt-and-Swim/img/bg_salt_swim.jpg) top left no-repeat;
	min-height: 600px;
	margin: 0 auto; 
	padding: 8px 17px;
	font-family: Arial, Helvetica, sans-serif !important;
	width: 680px;
}

#salt-swim #intro {
	margin-top: -10px;
	height: 80px;
	overflow: hidden;
	font-family: "museo-sans", sans-serif;
}

#salt-swim .blue {
	color: #000;
}

#salt-swim .clear {
	clear: both;
}

#salt-swim #pageContent {
	position:relative; 
	top:-300px; 
	font-size: 14px !important;
}

#salt-swim #pumpRunning {
	margin-bottom: 10px;
}

#salt-swim #pumpRunning h2 {
	font-family: Arial, Helvetica, sans-serif !important;
}

#salt-swim #pumpRunning h4 {
	font-weight: normal;	
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 14px !important;
}

#salt-swim #buttons {
	display: none;
}

#salt-swim #emailForm {
	display: none;
}

#emailField {
	float: left; 
	margin-top:10px; 
	width:184px;
}

#sendEmail {
	margin-top:10px; 
	padding-top:29px;
}

#salt-swim .ss-content {
	font-size: 14px !important;
	font-family: Arial, Helvetica, sans-serif !important;
}

#salt-swim .ss-content p {
	margin-bottom: 20px;
	font-family: Arial, Helvetica, sans-serif !important;
}

#salt-swim li {
	font-size: 14px;
	line-height: 1.3em;
	font-weight: normal;
	list-style-type: none;
}

#salt-swim ol {
	clear: both;
	list-style-type: decimal;
	margin: 0 0 0 40px;
	padding: 0;
	font-size: 14px !important;
	font-family: Arial, Helvetica, sans-serif !important;
}

#salt-swim ol li {
	margin-bottom: 10px;
}

#salt-swim ol li ul {
	font-size: 14px;
	margin: 10px 0 0 0;
	padding: 0;
}

#salt-swim ol li ul li {
	font-size: 14px;
}

#salt-swim #unit {
	line-height:13px;
}

#salt-swim #unit ul {
	list-style: none;
	margin: 0;
	padding: 0;
    width: 50px;
}

#salt-swim #unit li {
	margin: 0;
	padding: 0;
	height: 50px;
	list-style-type: none;
}

#salt-swim #unit li a {
  /*for all links in the list*/
	display: inline;
	margin: 0;
	padding: 0;
	color: #0088CB; !important;
	font-family: Arial, Helvetica, sans-serif !important;
}

#salt-swim #unit li.off ul {
  display: none;
  position: absolute;
  left: 0;
  width: 55px;
  height: 55px;
}

#salt-swim #unit li.off ul.light1 {
/*  margin: -107px 0 0 -90px; */
  top: -67px;
  left: -90px;
 }

#salt-swim #unit li.off ul.light2 {
/*  margin: -8px 0 0 25px; */
  top: 29px;
  left: 25px;
 }

#salt-swim #unit li.off ul.light3 {
/*   margin: -22px 0 0 33px; */
  top: 32px;
  left: 35px;
}

#salt-swim #unit li.off ul.light4 {
/*   margin: -24px 0 0 36px; */
  top: 32px;
  left: 37px;
}

#salt-swim #unit li.off ul.light5 {
/*   margin: -21px 0 0 39px; */
  top: 32px;
  left: 38px;
}

#salt-swim #unit li.off ul.light6 {
/*  margin: -12px 0 0 28px; */
  top: 30px;
  left: 28px;
}

#salt-swim #unit li.off ul a {
  /*ie doesn't inherit the float*/
  border: 0;
  font-family: Arial, Helvetica, sans-serif !important;
  color: #0088CB; !important;
  width: 110px;
  height: 23px;
  border: 1px solid #9ac7de;
  display: block;
  padding: 0px 9px 0px 6px;
  background: #fff;
  border-bottom: 0;
  text-decoration: none;
  line-height: 1.7em;
  box-shadow: 0 2px 3px #888;
}

#salt-swim #unit li.off ul a.last {
  border: 1px solid #9ac7de;
}

#salt-swim #unit li ul li {
	height: 24px;
}

#salt-swim #unit li.off:hover ul {
  display: block;
  z-index: 6000;
}

#salt-swim #unit #pageContent #pumpSettings #languageDrpDn{
/*  margin: -12px 0 0 28px; */
	display: none;
}


#salt-swim #unit #superChlorine {
	position:relative;
	left:421px; 
	top:34px; 
	z-index:110;
}

#salt-swim #unit #generateChlorine {
	position:relative; 
	left:272px; 
	top:18px; 
	z-index:120;
}

#salt-swim #unit #standingBy {
	position:relative; 
	left:145px; 
	top:44px; 
	z-index:130;
}

#salt-swim #unit #problemDetected {
	position:relative; 
	left:52px; 
	top:108px; 
	z-index:21;
}

#salt-swim #unit #cellLow {
	position:relative; 
	left:51px; 
	top:177px; 
	z-index:150;
}

#salt-swim #unit #inadequateFlow {
	position:relative; 
	left:51px; 
	top:170px; 
	z-index:140;
}

#salt-swim #unit #minLED {
	position:relative; 
	left:183px; 
	top:46px; 
	z-index:22;
}

#salt-swim #unit #LED2 {
	position:relative; 
	left:211px; 
	top:-43px; 
	z-index:19;
}

#salt-swim #unit #LED3 {
	position:relative; 
	left:242px; 
	top:-130px; 
	z-index:18;
}

#salt-swim #unit #LED4 {
	position:relative; 
	left:280px; 
	top:-210px; 
	z-index:17; 
	z-index:18;
}

#salt-swim #unit #LED5 {
	position:relative; 
	left:321px; 
	top:-284px; 
	z-index:16;
}

#salt-swim #unit #LED6 {
	position:relative; 
	left:365px; 
	top:-353px; 
	z-index:17;
}

#salt-swim #unit #LED7 {
	position:relative; 
	left:410px; 
	top:-419px; 
	z-index:18;
}

#salt-swim #unit #LED8 {
	position:relative; 
	left:456px; 
	top:-481px; 
	z-index:19;
}

#salt-swim #unit #LED9 {
	position:relative; 
	left:503px; 
	top:-540px; 
	z-index:20;
}

#salt-swim #unit #maxLED {
	position:relative; 
	left:551px; 
	top:-594px; 
	z-index:21;
}

#salt-swim #unit.wide {
	line-height:13px;
}

#salt-swim #unit.wide ul {
	list-style: none;
	margin: 0;
	padding: 0;
    width: 50px;
}

#salt-swim #unit.wide li {
	margin: 0;
	padding: 0;
	height: 50px;
}

#salt-swim #unit.wide li a {
  /*for all links in the list*/
	display: inline;
	margin: 0;
	padding: 0;
}

#salt-swim #unit.wide li.off ul {
  display: none;
  position: absolute;
  left: 0;
  width: 55px;
  height: 55px;
}

#salt-swim #unit.wide li.off ul.light1 {
/*  margin: -107px 0 0 -90px; */
  top: -67px;
  left: -155px;
 }

#salt-swim #unit.wide li.off ul.light2 {
/*  margin: -8px 0 0 25px; */
  top: 29px;
  left: 25px;
 }

#salt-swim #unit.wide li.off ul.light3 {
/*   margin: -22px 0 0 33px; */
  top: -40px;
  left: 35px;
}

#salt-swim #unit.wide li.off ul.light4 {
/*   margin: -24px 0 0 36px; */
  top: -20px;
  left: 45px;
}

#salt-swim #unit.wide li.off ul.light5 {
/*   margin: -21px 0 0 39px; */
  top: -20px;
  left: 50px;
}

#salt-swim #unit.wide li.off ul.light6 {
/*  margin: -12px 0 0 28px; */
  top: 30px;
  left: 28px;
}

#salt-swim #unit.wide li.off ul a {
  /*ie doesn't inherit the float*/
  border: 0;
  color: #0088cb;
  width: 175px;
  height: 23px;
  border: 1px solid #9ac7de;
  display: block;
  padding: 0px 9px 0px 6px;
  background: url('https://commerce.hayward-pool-assets.com/magento/Salt-and-Swim/img/hoverOn.gif') top left repeat-x;
  border-bottom: 0;
  text-decoration: none;
  line-height: 1.7em;
}

#salt-swim #unit.wide li.off ul a.last {
  border: 1px solid #9ac7de;
}

#salt-swim #unit.wide li ul li {
	height: 24px;
}

#salt-swim #unit.wide li.off:hover ul {
  display: block;
  z-index: 6000;
}

#salt-swim #unit.wide #pageContent #pumpSettings #languageDrpDn{
/*  margin: -12px 0 0 28px; */
	display: none;
}


#salt-swim #unit.wide #superChlorine {
	position:relative;
	left:421px; 
	top:34px; 
	z-index:5;
}

#salt-swim #unit.wide #generateChlorine {
	position:relative; 
	left:272px; 
	top:18px; 
	z-index:22;
}

#salt-swim #unit.wide #standingBy {
	position:relative; 
	left:145px; 
	top:44px; 
	z-index:3;
}

#salt-swim #unit.wide #problemDetected {
	position:relative; 
	left:52px; 
	top:108px; 
	z-index:2;
}

#salt-swim #unit.wide #cellLow {
	position:relative; 
	left:51px; 
	top:177px; 
	z-index:150;
}

#salt-swim #unit.wide #inadequateFlow {
	position:relative; 
	left:51px; 
	top:170px; 
	z-index:140;
}

#salt-swim #unit.wide #minLED {
	position:relative; 
	left:183px; 
	top:46px; 
	z-index:30;
}

#salt-swim #unit.wide #LED2 {
	position:relative; 
	left:211px; 
	top:-43px; 
	z-index:29;
}

#salt-swim #unit.wide #LED3 {
	position:relative; 
	left:242px; 
	top:-130px; 
	z-index:28;
}

#salt-swim #unit.wide #LED4 {
	position:relative; 
	left:280px; 
	top:-210px; 
	z-index:17; 
	z-index:27;
}

#salt-swim #unit.wide #LED5 {
	position:relative; 
	left:321px; 
	top:-284px; 
	z-index:26;
}

#salt-swim #unit.wide #LED6 {
	position:relative; 
	left:365px; 
	top:-353px; 
	z-index:25;
}

#salt-swim #unit.wide #LED7 {
	position:relative; 
	left:410px; 
	top:-419px; 
	z-index:24;
}

#salt-swim #unit.wide #LED8 {
	position:relative; 
	left:456px; 
	top:-481px; 
	z-index:23;
}

#salt-swim #unit.wide #LED9 {
	position:relative; 
	left:503px; 
	top:-540px; 
	z-index:22;
}

#salt-swim #unit.wide #maxLED {
	position:relative; 
	left:551px; 
	top:-594px; 
	z-index:21;
}

#landing-container {
	background:url('https://commerce.hayward-pool-assets.com/magento/Salt-and-Swim/img/saltSwim.jpg') top left no-repeat;
	min-height:600px;
	margin: 5px -22px 0 -16px; 
/* 	margin: -7px -22px 0 -16px;  for commerce */
	padding: 8px 17px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}

a.button {
	background-color: #f47c00;
	color: #ffffff !important;
	height: 29px;
	margin-right: 9px;
	text-decoration: none;
	text-align: center;
	padding: 5px 16px;
	border-radius: 4px;
	font-family: Arial, Helvetica, sans-serif !important;
}

a.button:hover, a.button:active, a.button-grey:hover, a.button-grey:active {
 	color: #fff !important;
}

a.button span {
	color: #ffffff !important;	
	font-family: Arial, Helvetica, sans-serif !important;
}

a.button-grey {
	background-color: #898989;
	color: #ffffff !important;
	height: 29px;
	margin-right: 9px;
	text-decoration: none;
	text-align: center;
	padding: 5px 16px;
	border-radius: 4px;
	font-family: Arial, Helvetica, sans-serif !important;
}

a.button-grey span {
	color: #ffffff !important;
	font-family: Arial, Helvetica, sans-serif !important;
}

#landing-container #buttons {
	margin-top: 419px;
}

#landing-container #buttons #button1 {
	float: left;
}

#landing-container #buttons #button2 {
	float: left;
}

#landing-container #buttons #button2 ul {
	margin: 25px 0 0 12px;
	border: 1px solid #9ac7de;
	border-top: 0;
	width: 132px;
	list-style: none;
	padding: 4px 0 3px 0;
}

#landing-container #buttons #button2 #menu {
	display: none;
}

#landing-container #buttons #button2 ul li {
	margin: 5px 0 5px 7px;
}

#landing-container #buttons #button2 ul li a {
	font-size: 1.1em;
	text-decoration: none;
}

a.button span.menu {
	margin: 0; 
	padding: 0;
    background: transparent url('https://commerce.hayward-pool-assets.com/magento/Salt-and-Swim/img/btnRtArrow.png') no-repeat scroll top right;
    display: block;
    line-height: 14px;
    padding: 8px 32px 8px 18px;
}

#formOptions {
	margin-top: 30px;	
}


@media screen and (max-width:767px){
    #salt-swim #unit ul,
    #salt-swim #unit li.off ul,
    #salt-swim #unit li.off ul a{
        width:100% !important;
    }
    #salt-swim #unit ul li,
    #salt-swim #unit ul li ul{
        position: static !important;
        display: block !important;
        height: auto !important;
    }

    #salt-swim{
        background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
        height: auto !important;
        max-width: 100%;
        padding: 0 10px 0 0;
        width: 90% !important;
    }

    #salt-swim #pageContent{
        top:auto !important;
    }

    #salt-swim #unit ul > li > a{
        display:none;
    }

    #unit .label{
        padding:10px 0;
        font-weight: bold;
    }

    #salt-swim #unit li.off ul a {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background: #fff none repeat scroll 0 0;
        border-color: #9ac7de #9ac7de #9ac7de;
        border-image: none;
        border-style: solid solid solid;
        border-width: 1px;
        box-shadow: 0 0px 0px #888;
        color: #0088cb;
        display: block;
        font-family: Arial,Helvetica,sans-serif !important;
        height: 23px;
        line-height: 1.7em;
        margin: 10px 0;
        padding: 0 9px 0 6px;
        text-decoration: none;
        width: 110px;
    }

    #salt-swim #unit li.off ul a.active{
        border-color: green;
        color:green;
        font-weight: bold;
    }
    
    #salt-swim #intro{
        height:auto !important;
        padding-bottom:20px;
    }
    
}