/*ver 1.03*/
body
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;	/*76%;*/
	background: #FFF;
	margin: 0 0 20px 0;
	padding: 0 0 0 0;
}

p
{
	margin: 0;
	padding: 0;
}

h1,h2,h3,h4,h5,h6
{
	margin: 0;
	padding: 0;
}

ul,li
{
	padding: 0;
	margin: 0;
}

img
{
	border: 0 none;
	vertical-align: bottom;
}

a:link, a:visited, a:hover, a:active
{
	outline-style: none;
	outline-width: 0;
}

a
{
	color: #0053A0;
	text-decoration: none;
}

a:hover
{
	color: #AA2738
}


#page_container
{
	width: 950px;
	margin: auto;
}


/**** Header *****/
#header
{
	width: 100%;
	height: 105px;
}
#header #hannalogo
{
	float: right;
	margin: 20px 10px 0 0;
}
#header #logo
{
	float: left;
	margin: 5px 0 0 10px;
}

/*Navigation*/
#navbar 
{
	background: #FFF;
	/*height: 43px;*/
	width: 100%;
	overflow: auto;
}
#navigation 
{
	list-style: none;
	margin: 0;
	padding: 0;
}
#navigation li {float: left;}

#navigation a 
{
	text-decoration: none;
	color: #FFF;
	font-size: 16px;
	line-height: 36px;
	font-weight: normal;
	display: block;
	text-align: center;
	margin: 0 0 0 1px;
	background: #077EC3 url(../images/nav_gradient.png) repeat-x;
}
#navigation a.navnogap
{
	margin: 0;
}

#nav_home{width: 60px;}
#nav_about{width: 90px;}
#nav_fchlor{width: 120px;}
#nav_tchlor{width: 120px;}
#nav_iodine{width: 65px;}
#nav_iron{width: 45px;}
#nav_phosphate{width: 100px;}
#nav_nitrites{width: 60px;}
#nav_phosphor{width: 110px;}
#nav_alkalin{width: 85px;}
#nav_calcium{width: 85px;}

/*#navigation li:hover ul, #navigation li.ie6hover ul{left: auto;}*/

#navigation ul 
{
	margin: 0;
	padding: 0;
	position: absolute;
	list-style: none;
	left: -999%;
	width: 10em;	/*set drop down width here and  */
	z-index: 100;
}
#navigation ul a 
{
	width: 10em; /* <-- here */
	padding: 0 0 0 15px;
	text-align: left;
	background: #AA2738;
}
#navigation a:hover 
{
	color: #077EC3;
	background-position: 0 -43px;
}


.left{float: left;}
.right{float: right;}

.title
{
	float: left;
	height: 100px;
	width: 390px;
	position: relative;
}
.title h1
{
	font-size: 58px;
	font-weight: bold;
	color: #077EC3;
	margin: 0 0 0 0;
	text-align: right;
}
.title h1 span.sub
{
	font-size: 18px;
	color: #8C8C8C;
	display: block;
	margin: -4px/*-6px*/ 0 0 0;
}

.title h2
{
	font-size: 12px;
	text-align: right;
	color: #E06717;
}

h1
{
	font-size: 1.5em;
	margin: 0 0 1em 0;
}

h2
{
	font-size: 1.2em;
	font-weight: bold;
	color: #077EC3; /*#E06717;*/ /*#A10F0F;*/
	margin: 0 0 0.5em 0;
}

h2.mainhead
{
	font-size: 1.5em;
	margin: 0 0 1em 0;
}

h3
{
	font-size: 1.0em; 
	font-weight: bold;
	color: #A10F0F;
	margin: 0 0 0.5em 0;
}


/***** Main Page *****/
#main
{
	border: #EBEBEB 3px solid;
	width: 944px;
	height: 464px;
	/*background: url(../images/triangle.gif) no-repeat top right; */
	position: relative;
	margin: 15px 0 0 0;
}

#main h1
{
	color: #89D068;
	font-size: 32px;
	margin: 20px 0 20px 20px;
}

#main h1 span
{
	color: #077EC3;
	font-size: 25px;
	display: block;
}

#main h2
{
	color: #E06717;
	font-size: 20px;
	margin: 10px 0 0 20px;
	width: 362px;
	font-weight: bold;
	text-align: center;
}

#mainpic
{
	position: relative;
	float: right;
}

#maintext
{
	font-size: 0.88em;
	float: left;
	width: 550px;
	margin: 20px 0 0 10px;
	display: inline; /*ie6*/
}

#maintext h1
{
	color: #077EC3;/*#89D068;*//*#A10F0F;*//*#E06717;*/
	font-size: 36px; 
	margin: 0 0 30px 0;
	font-weight: bold;
}
#maintext h1 span
{
	color: #000;
	display: block;
	font-size: 22px;
	margin: 20px 0 0 0;
}

#maintext p
{
	margin: 0 0 1.5em 0;
}

#maintext p.note
{
	color: #AAA;
	font-size: 0.88em;
	font-style: italic;
	margin: 2.5em 0 0 0;
	clear: both;
}

a.product_link
{
	border: #EBEBEB 3px solid;
	width: 324px;
	height: 43px;
	float: right;
	line-height: 43px;
	padding: 0 0 0 20px;
	margin: 0 0 5px 0;
	clear: right;
	color: #FFF;
	font-size: 16px;
	font-weight: bold;
}

#product_link_cont{margin: 10px 0 0 0;}

.link_blue{background: #E2E2E2 url(../images/link_gradient_blue.png) repeat-x;}
.link_orange{background: #E2E2E2 url(../images/link_gradient_orange.png) repeat-x;}
.link_green{background: #E2E2E2 url(../images/link_gradient_green.png) repeat-x;}

a.product_link:hover
{
	background-position: 0 -43px;
	color: #077EC3;
}
a.product_link span.right
{
	font-size: 12px;
	float: right;
	margin: 0 20px 0 0;
}

#hannalink
{
	border: #EBEBEB 3px solid;
	width: 344px;
	height: 154px;
	float: right;
	clear: right;
	margin: 10px 0 10px 0;
}

#hannalink img
{
	float: right;
}

#hannalink span
{
	float: left;
	width: 160px;
	color: #777;
	margin: 25px 0 0 20px;
}

#main_product_text
{
	position: relative;
	margin: 0 0 0 20px;
}
.fadetext
{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}
#fadetext01{display: block;}

#main_product_pic
{
	border: #EBEBEB 3px solid;
	width: 362px;
	height: 272px;
	margin: 0 0 0 20px;
	position: relative;
}

.fadepic
{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}
#fadepic01{display: block;}

/***** Product Pics *****/
#product_pic
{
	border: #EBEBEB 3px solid;
	float: left;
	width: 387px;
	height: 387px;
	position: relative;
	margin: 2px 0 0 0;
}

.stage_pics
{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}
#stage_00{display: block;}


#product_info
{
	border: #EBEBEB 3px solid;
	float: right;
	width: 494px; /*534*/
	height: 514px; /*554*/
	margin: 15px 0 20px 0;
	font-size: 0.88em;
	padding: 20px 20px 20px 20px;
	background: url(../images/triangle.gif) no-repeat top right; 
	position: relative;
}

#flash
{
	float: right;
	width: 180px;
	height: 200px;
	position: absolute;
	right: 5px;
	top: 5px;
	text-align: right;
	font-size: 20px;
	font-weight: bold;
}

#gap{float: left; height: 40px;}

#flash p, #product_info #flash p{
	/*margin: 0;
	padding: 0;*/
}

#flash .price, #product_info #flash .price
{
	color: #FFF;
	font-size: 34px;
	margin: 4px 0 0 0;
}
#flash .price_small{
	margin: 0 10px 0 0;
	font-size: 14px;
}
#flash .price_small span{
	display: block;
	font-size: 10px;
}
#flash .smalltext{
	margin: 0;
	font-size: 12px;
}

#flash p.style1{font-size: 32px; text-align:center; margin: 0;}
#flash p.style2{font-size: 36px; text-align:right; color: #FFF; margin: 0 10px 10px 0; line-height: 1;}

#product_info ul
{
	padding: 0.5em 0 1em 0;
}

#product_info li
{
	/*color: #888;*/
	font-size: 1.2em;
	list-style-type: none;
	padding: 0 0 0.75em 0;
}

.firstpara
{
	font-weight: bold;
}

#product_stages
{
	float: left;
	width: 393px;
	height: 66px;
	margin: 14px/*16px*/ 0 0 0;
	cursor: pointer;
}


#product_stages p
{
	float: left;
	width: 89px;
	color: #57B822; /*#077EC3;*//*#8C8C8C;*/
	font-weight: bold;
	font-size: 12px;
}

#product_stages img
{
	border: #EBEBEB 1px solid;
	float: left;
	margin: 0 0 0 10px;
}

#space01, #space02, #space03, #space04, #space05, #space06, #space07, #space08
{height: 20px; float: right; clear:right; /*border: 1px solid red;*/}
#space01{width: 190px;}
#space02{width: 170px;}
#space03{width: 130px;}
#space04{width: 110px;}
#space05{width: 90px;}
#space06{width: 70px;}
#space07{width: 50px;}
#space08{width: 30px;}


/***** Tabs *****/
#tabcontent
{
	border: #EBEBEB 3px solid;
	font-size: 0.88em;
	padding: 20px;
	margin: -2px 0 0 0;
}

#tabcontent ul{padding: 0 0 1em 1.5em;}
#tabcontent li{padding: 0 0 0.5em 0;}
#tabcontent a, #product_info a{font-weight: bold;}
#tabcontent p, #product_info p{margin: 0 0 1em 0;}

#tabs
{
	background: #F0F0F0;
	width: 100%;
	height: 40px;
	line-height: 40px;
	clear: both;
	font-size: 16px;
}

#tabs p a	/*order now*/
{
	color: #FFF;
	/*background: url(../images/order_gradient.gif);*/
	background: url(../images/order_gradient.png) repeat-x;
	float: right;
	width: 270px;
	height: 40px;
	padding: 0 10px;
	font-size: 14px;
}
#tabs p a:hover
{
	/*background: #077EC3 url(../images/nav_gradient.gif);*/
	background-position: 0 -43px;
}

#tabs p span
{
	font-size: 24px;
	font-weight: bold;
	margin: 0 10px 0 0;
}

a.tab
{
	float: left;
	height: 40px;
	width: 150px;
	background: #EBEBEB;
	text-align: center;
	margin: 0 2px 0 0;
	color: #000;
}
a.tab:hover
{
	background: #077EC3;
	color: #FFF;
}




#info{}
#spec{/*display: none;*/}
#acce{/*display: none;*/}

a.tab.tabselected
{
	background: #077EC3;
	color: #FFF; 
	font-weight: bold;
}



/***** Footer *****/
#footer
{
	clear: both;
	font-size: 0.6em;/*0.8em;*/
	color: #0053A0;
	margin: 10px 0 0 0;
	width: 100%;
	height: 50px;
	line-height: 50px;
	background: url(../images/footer_gradient.gif);
}

#footer p
{
	padding: 0 0 0 10px;
}

#footer a
{
	color: #0053A0;
	margin: 0 5px 0 5px;
}
#footer a:hover
{
	color: #40873F;
}
#footer img
{
	float: right;
	margin: 12px 20px 0 0;
}


.clear{clear: both;}

.red{color: red; font-weight: bold;}
.grey{color: #777;}
.center{text-align: center;}

.highlight_blue{color: #077EC3; font-weight: bold;}
.highlight_orange{color: #E06717; font-weight: bold;}
.highlight_green{color: #49A613; font-weight: bold;}

.bold{font-weight: bold;}
.italic{font-style: italic;}

table
{
	border-collapse:collapse;
	table-layout:fixed;
	width: 75%;
	margin: 0 0 20px 0;
	border: 1px solid #077EC3;
}

th
{
	text-align: left;
	background: #EBEBEB;
}

td
{
	overflow: hidden;
	border: 1px solid #077EC3;
   	padding: 3px;
}

.head
{
	font-weight: bold;
	background-color: #EBEBEB;
	width: 25%;
}

tr:hover
{
	/*color: #FFF;*/
	/*background: #AAA;*/
}


/**** About Page ****/
.about_title
{
	font-size: 66px;
	font-weight: bold;
	color: #077EC3;
	margin: 10px 0 0 0;
}

#about_main
{
	border: #EBEBEB 3px solid;
	border-bottom: none 0;
	width: 554px; /*574*/
	height: 627px; /*674*/
	padding: 10px 10px 0 10px;
	font-size: 0.88em;
	float: left;
}
#about_main p{margin: 0 0 1em 0;}
#about_main ul{padding: 0 0 1em 1.5em;}
#about_main li{padding: 0 0 0.5em 0;}

.hannalinkabout #aboutlink{margin: 44px 20px 0 0; float: right;}
.hannalinkabout #calendarlink{margin: 30px 20px 0 0; float: right;}

.hannalinkabout
{
	border: #EBEBEB 3px solid;
	width: 344px;
	height: 154px;
	float: right;
	clear: right;
	margin: 0 0 10px 0;
}

.hannalinkabout span
{
	float: left;
	width: 120px;
	color: #777;
	margin: 20px 0 0 20px;
}

span.extratop{margin-top: 38px;}

#about_main_cont
{
	float: left;
	width: 560px;
}

#hannarand 
{
	border: #EBEBEB 3px solid;
	width: 344px;
	height: 284px;
	float: right;
	margin: 0 0 5px 0;
}
#hannarand p
{
	line-height: 42px;
	background: #AAA url(../images/grey_gradient.gif);
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	color: #077EC3;
}

#aboutimages
{
	border: #EBEBEB 3px solid;
	border-top: none 0;
	height: 142px;
	width: 574px;
	background: #AAA url(../images/grey_large_gradient.gif);
	float: left;
	margin: 0 0 20px 0;
}

#aboutimagescont
{
	margin: 28px 0 0 20px;
}

#aboutimages img
{
	float: left;
	margin: 0 10px 0 0;
}




.upgrade_link{
	display: block;
	color: #FFF;
	background: url(../images/alkalinity_button.png) no-repeat;
	width: 265px;/*332*/
	height: 43px;
	padding: 0 0 0 67px;
	line-height: 43px;
	color: #FFF;
	font-weight: bold;
	font-size: 24px;
}
.upgrade_link:hover{
	background-position: 0 -43px;
	color: #FFF;
}

.upgrade_title
{
	font-size: 46px;
	font-weight: bold;
	color: #077EC3;
	margin: 10px 0 0 0;
}

#upgrade_main
{
	border: #EBEBEB 3px solid;
	width: 554px; /*574*/
	padding: 10px 10px 0 10px;
	font-size: 0.88em;
	float: left;
	margin: 0 0 20px 0;
}
#upgrade_main p{margin: 0 0 1em 0;}

#enquiryform {
	clear: both;
	color: #077EC3;
	font-weight: bold;
	background: #F1F1F1;
	padding: 20px;
	overflow: auto;
	margin: 20px auto;
	border: 2px solid #CCC;
	/*height: 1%;*/
	width: 350px;
}
#enquiryform label{
	float: left;
	clear: left;
	width: 100px;
	padding: 0 10px 0 0;
	text-align: right;
	line-height: 1.1;
}
#enquiryform .textbox{ 
	width: 230px;
	margin: 0 0 5px 0;
	border: 1px solid #AAA;
	padding: 2px;
	vertical-align: bottom;
}
#enquiryform .button{
	float: right;
	margin: 5px 4px 0 0;
	
	width: 6em;
	border: 1px solid #777;
	padding: 0.25em;
	background-color: #AAA;
	color: white;
	font-weight: bold;
}
#enquiryform .button:hover
{
	cursor: pointer;
	border: 1px solid #000;
	background: #077EC3;
}

.watermark{
  color: #999;
}

div .form-error, div .form-notice, div .form-success{padding: 0.4em 0.8em; margin: 1em 0;  border: 2px solid #DDD; font-size: 15px;}
div .form-error p, div .form-notice p, div .form-success p {padding: 0 0 0 2em; margin: 0;}
div .form-error {background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4;}
div .form-notice {background: #FFF6BF; color: #514721; border-color: #FFD324;}
div .form-success {background: #E6EFC2; color: #264409; border-color: #C6D880;}

.alkalinity_upgrade a{
	position: absolute;
	bottom: 15px;
	right: 8px;
	background: url(../images/butt_preorder.png) no-repeat;
	width: 442px;/*499*/
	height: 44px;
	padding: 0 0 0 57px;
	line-height: 44px;
	color: #FFF;
	font-weight: bold;
	font-size: 1em;
}
.alkalinity_upgrade a:hover{
	background-position: 0 -44px;
	color: #077EC3;
}
.alkalinity_upgrade a .span1{
	float: left;
	width: 350px;
}
.alkalinity_upgrade a .span2{
	float: left;	
	font-size: 14px;
	line-height: 16px;
	padding: 4px 0 0 0;
	width: 80px;
	
}