@charset "utf-8";
/* index.css  */
body { 
	font: 62.5% Verdana, Geneva, Arial, Helvetica, sans-serif; 
}
body#index { 
	background: #f6ecd0 url(../i/bg.jpg) repeat-x center top ; /* #528ED6 url(i/whBar.gif) repeat-x scroll 0 0*/
}
body#kits { 
	background: #f6ecd0 url(../i/bg_store.jpg) repeat-x center top ; 
}
body#index div#container ,
body#kits div#container {
	text-align: center ;
	margin: 0 auto ; 
	position: relative ;
}
body#index div#container {
	width:800px ;
}
body#kits div#container {
	width:850px ; /* store is 850 */
}
body#kits div#container { font-size: 1.1em; }
body#kits div#container p { margin-bottom: .2em ;  }

body#index #header {
	height: 200px ;
	width: 800px ;
}
body#kits #header {
	height: 250px ;
	width: 850px ;
}	
body#index #topPanel { 
	background: transparent url(../i/beach_bg.jpg) no-repeat center 10px  ;
	height: 350px ;
}
body#kits #header a {
	background: url(../i/store_beach_banner.jpg) no-repeat center 10px ;
	position: absolute;
	left: 0; top: 0;
	display: block;
	height: 250px ;
	width: 850px ; /* store is 850 */
}
.accessibility {
	position: absolute ;
	left: -9999em ;
}

h1, h2, p {
	color: #191970 ; /* DarkBlue */
	font:normal 1.7em arial;
	line-height: 1.2em ;
	margin: .5em auto ;
	color: #8b2;
	clear: left;
}
h1 {
	font-size: 3em;
	font-family: "Brush Script MT", Georgia, Veranda, arial, sans serif;
	margin-top: 0 ;
	padding: 0 1em ;
	color:#1B6FC0;
}
h2 {
	display: block ;
	text-align: center ;
	color: #00008B ; 
	font-size: 2.5em ;
	padding: .2em ;
	width: 100%;
	padding: .2em ;
	margin: 0 ;
}

h2#introHdr { background-color: #FFCC00 ; }
h2#miniHdr { background-color: #ff5959 ; }
h2#advantageHdr { background-color: #ee88ca ; }
h2#compareHdr { background-color: #CA71F3 ; }
li.l0 { color: Green ; }
li.l1 { color: #000669 ; }
li.l2 { color: Teal; }
li.l3 { color: Navy; }
li.l4 { color: Purple; }
li.l5 { color: Orange; }
li.l6 { color: #EE5050; }
li.l7 { color: #0000CD; }
li.l8 { color: #FF1493; }
li.l9 { color: #FAFAD2; }

body#index p , 
body#index li ,
body#kits p , 
body#kits li {
	color: #191970 ; /* MidnightBlue */
	font-size: 1.2em 
}
body#index p , 
body#index li {
	margin: .5em .5em ;
}
body#kits p , 
body#kits li {
	margin: 1em ;
}
body#index #intro p { font-size: 1.3em ; }
sup {
	font-size: .8em ;
	vertical-align: super ; 
}
a:active {
	outline: none ;
	border: none ;
}
:focus
{
  -moz-outline-style: none;
}

ul  , 
ul li {
	list-style-type : none ;
}
#footer{
	clear: left ;
	width: 100% ;
	bottom: 0 ; 
	height: 20px ;  /* footer height needed (FF) */
	font-size: 12px ; 
	color: #fff ; 
	background: url(../images/footer.jpg) repeat-x 0 0 ; /* slate gray */
}
#footer span.Co ,
#footer span.Contact {
	line-height: 1.4em ; 
}
#footer span.Co {
	text-align: left ;
	margin-left: 1em ; 
	float: left ;
}
#footer span.Contact {
	text-align: right ;
	margin-right: 1em ; 
	float: right ;
}

/* aslett clearing method */
.clearfix:after {
	content: ".";
	display:block;
	height: 0;
	clear: both ;		
	visibility: hidden ;
}
.clearfix {
	 display: inline-table ; 
	 clear: both ;
}
/* backslash hack hides from IE mac \*/
* html .clearfix {
	 height: 1%; 
}	
.clearfix {
	 display: block ;
} /* end backslash hack */

img {
	border: none ;
	margin: 0 ;
	padding: 0 ;
}
.em {
	font: italic bold 1em 'Verdana, Helvetica, sans-serif';
	color: Purple;
}
.em1 { font: italic bold 1.2em 'Verdana, Helvetica, sans-serif'; margin-bottom: 1.3em ; }
.bt { border-top: 2px solid Purple ; }
.bb { border-bottom: 2px solid Purple ; }

.persistentPolicies {
	background-color: #fff;
	text-align: left;
	font-size: .9em ;
	margin-left: 1em;
	clear: both ;
	padding: .2em .5em ;
	display:inline;
}

/* index specific */
ul#listNav { 
	background: transparent url(../i/whX.png) ;
	position: absolute ; 
	left: 0 ; /* ie */
	top: 190px ;
	padding: .1em 0 2em .1em ;
	margin: 10px 20px 0 10px ;
	white-space: nowrap ;
	text-align: center ;
	border: 1px solid #00CC00 ; 
}
ul#listNav li {
	font-size: .9em; 
	list-style-position: inside ;
	list-style-type: none ;
	/* display: inline ; ie7 fix - inline block (for anchor child) will not render inline-block unless li is inline */
	margin-left: 1em ;
	margin-right: 0 ;
	line-height: 52px ;
	/* height: 52px ; */
}
ul#listNav li a {
	float: left ;
	font-size: 1.5em ;
	font-weight: bold ; 
	/* display: inline-block ;  */
	background: transparent url(../i/check_line.gif) top left no-repeat ;
	padding-left: 56px ;
	line-height: 52px ;
	text-decoration: none ; 
	color: #000 ;
}
ul#listNav li a:hover {
	background: transparent url(../i/check_h.gif) top left no-repeat ;
	color: #fff; 
	text-decoration: none;
}
ul#listNav li a span { color: #FF0000 ; background-color: #fff ;  padding: .2em ; }
ul#listNav li a:hover span { color: #000 ; }

ul#navButtons { 
	background: transparent url(../i/whX.png) ;
	padding: 0 0 ;
	margin: 0 10px 0 350px ;
}
ul#navButtons li {
	list-style-position: inside ;
	list-style-type: none ;
	display: inline ; /* ie7 fix - inline block (for anchor child) will not render inline-block unless li is inline */
	height: 145px ;
}
ul#navButtons li div {
	display: inline ; /* ie7 fix - inline block (for anchor child) will not render inline-block unless li is inline */
}
ul#navButtons li#kits a {
	font-size: 0 ;
	display: inline-block ;
	background: transparent url(../i/kits.gif) top left no-repeat ;
	width: 129px ;
	height: 145px ;
	text-decoration: none ; 
}
ul#navButtons li#kits a:hover {
	background: transparent url(../i/kits.gif) bottom left no-repeat ;
	text-decoration: none;
}
ul#navButtons li#prods a {
	font-size: 0 ;
	display: inline-block ;
	background: transparent url(../i/prods.gif) top left no-repeat ;
	width: 220px ;
	height: 141px ;
	margin-left: 0 ;
	text-decoration: none ; 
}

ul#navButtons li#prods a:hover {
	background: transparent url(../i/prods.gif) bottom left no-repeat ;
	margin-left: 0 ;
	text-decoration: none;
}

#content {
	background: #a1d940 url(../i/content.jpg) repeat-y ;
	margin: 0 auto ;
	text-align: center ;
}
#intro { 
	padding: .5em ;
}
#intro p { 
	text-align:right; 
	margin-top:10px; 
	font-style:italic; 
	font-size:1.2em; 
	font-weight:bold; 
	color: #000066 ;
}

#tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #111;
	background-color: #eee;
	padding: 5px;
	opacity: 0.85;
}
#tooltip.pretty {
	font-family: Arial;
	border: none;
	width: 250px;
	padding: 20px;
	height: 100px;
	opacity: 0.8;
	background: url('../i/shadow3.png') no-repeat ;
}
#tooltip.pretty h3 {
	margin-bottom: 0.75em;
	font-size: 12pt;
	width: 220px;
	text-align: center;
}
#tooltip.pretty div { width: 220px; text-align: left; }
#tooltip.fancy {
	background: url('../i/shadow2.png');
	padding-top: 5em;
	height: 100px;
}
/* contact info */
ul.smlist ,
ul.hlist {  
	padding-left: 1.8em ;
	margin: .5em auto 0 ;
	padding-top: .4em ;
	padding-bottom: 1em;
	text-align: center ;
	white-space: nowrap ;
	font-size: 1.2em ;
}
ul.hlist { background: url(../i/xBG.png) ; }
ul.hlist li ,
ul.hlist li a {
	list-style-position: inside ;
	list-style-type: none ;
	margin: 0 1em ;
	font-weight: bold ; 
	display: inline ;
	text-decoration: none ; 
	color: #000 ;
}
ul.smlist li a:hover
ul.hlist li a:hover {
	color: #fff; 
	text-decoration: underline ;
}
ul.hlist li a span { color: #FF0000 ; background-color: #fff ;  padding: .2em ; }
ul.hlist li a:hover span { color: #000 ; }

ul.smlist { font-size: 1em ; }
ul.smlist li ,
ul.smlist li a {
	list-style-position: outside ;
	list-style-type: disk ;
	margin: 0 1em ;
	font-weight: bold ; 
	display: inline ;
	text-decoration: none ; 	
}
/* page slider */
#slider {
    width: 750px;
    margin: 0 auto;
    position: relative;
}

div.list_intro {
	position:relative; 
	margin: .2em .5em 0 ; 
	padding: 10px 10px 0 0 ;
	font-weight: normal;
	font-size: 1.1em ;
	padding-bottom: 10px ;
	border-bottom: 1px solid #669933 ;
}
p { font-weight: bold ; }

.fl_list ul {
	position:relative; 
	font-weight: normal; 
	font-size:1.1em;
	margin: 0 0 0 30px ; 
	padding:.2em;
}
.fl_list img {
	float:right; 
	margin: 32px 32px 0 0;
}
.fl_list ul {
	float:left ; 
	/* width: 400px; */
	margin: 1em .2em 1em;
}
.fl_list ul li {
	list-style-type: circle;
	list-style-position: inside ;
	margin-top: 0 ;
}
ul.wide_list {
	margin: 0 1em ;
	padding-top: 0 ;
}	
ul.wide_list li {
	margin: 0 auto .1em ;
	list-style-type: none ;
}
.slider-wrap {
	margin: 1em auto ;
	text-align: center ;
}
.scroll {
    height: 550px;
    width: 710px;
    overflow: auto;
    overflow-x: hidden;
    position: relative;
    clear: left;
	margin: 10px auto ;
	text-align: center;
}

.panelContainer div.panel {
	position: relative ;
	padding-top: 10px ;
    height: 5500px ;
    width: 710px;
}

ul.navigation {
	font-size: .9em ;
	background-color: #99CC00 ;
    list-style: none;
    margin: 0 auto;
	text-align: center ;
    padding: 0;
    padding-bottom: 9px;
	padding-top: 10px;
	margin-bottom: 1em;
}

ul.navigation li {
    display: inline;
    margin-right: 3px;
	font-size:.9em ;
	font-weight: bold ;
}

ul.navigation a {
    padding: 10px 5px ;
    color: #000;
    text-decoration: none;
}
ul.navigation a:hover {
    background-color: #F3FEF8;
}
ul.navigation a.selected {
    background-color: #edefe2;
}
ul.navigation a:focus ,
ul.text_navigation a:focus {
    outline: none;
}
.scrollButtons {
    position: absolute;
    top: 250px;
    cursor: pointer;
}
.scrollButtons.left {
    left: 0 ;
	top: 500px ;
}
.scrollButtons.right {
    right: -10px ;
	top: 500px ;
}

.hide {
    display: none;
}
div.comp { width: 90% ; margin: 0 auto 1.3em ; text-align: center ; }
dl.comp { margin-left: 2em ; margin-top: 1.5em ; font-weight: bold ; font-size: 1.3em ; text-align: center ; margin: 1em auto ; }
dt , dd { font-size: 1.3em ; font-weight: bold ; }
dt { clear: both ; text-align: right ; float:left ; width: 65% ; margin-top: 1em ; }
dd { margin-left: 1em ; text-align: left ; float:left ; width: 30% ; margin-top: 1em ; }
dt.up , dd.up {
	margin-top: 0 ;
	margin-bottom: 1em ; 
}
.emp { clear: both; padding: 1.5em 1em ; line-height:1.5em; margin-top:2em; border:2px solid Teal; }
.logoInline { color: #009900 ; font-size: 1.1 ; font-weight: bold ; }
.ordernow { text-align: center; margin: 1em auto; }
/*
 * not used - for auto scroller
.slider-wrap								{ width: 710px; }			
.stripViewer								{ position: relative; overflow: hidden; width: 710px; height: 470px; }
.stripViewer .panelContainer				{ position: relative;  }
.stripViewer .panelContainer .panel			{ float: left; height: 100%; position: relative; width: 710px; }
.stripNavL, .stripNavR, .stripNav			{ display: none; }
*/