/* -----------------------------------

	KIOKIO CSS 2008
	
	MASTER COLORS
	
	LightGrey: #766953;
	BlueGreen: #69D8DD;
	
----------------------------------- */

body {
	font-family:Arial, Helvetica, sans-serif;
	color:#766953;
	text-align:left;
	font-size:80%;
	line-height:1.7em;
	background-color: #69D8DD;
}


body, div, object, embed, form, img, dl, dt, dd, ul, ol, li, p {
	margin:0;
	padding:0;
	border:0;
}

img {
	display:block;
	margin-top: .4em;
	margin-bottom: 1em;
	
}
/* SEO ONLY */
#seo {
	width:956px;
	margin:0 auto;
	padding:0;
	font:9px Arial, Helvetica, sans-serif;
	letter-spacing:4px;
	z-index:4;
}

/* Base Container/Holder Elements */
#entire {
	width:956px;
	/*margin-top: -290px;
	height: 580px;
	margin-left: -478px;*/
	margin: 0px auto;
	margin-top: 30px;
	overflow:hidden;
	background:#ffffff url(../images/gen/bk/entire_bk.gif) no-repeat -30px 0;
	border: 1px solid #766953;
	/*position: absolute;
	top: 50%;
	left: 50%;*/
}



#hdr {
	width:820px;
	height:120px;
	padding:0px 0px 0 0px;
	margin-left: 133px;
	position:relative;
	}
#logo {
	width:125px;
	height:48px;
	display:block;
	position:absolute;
	left:0px;
	bottom:0;
	background:transparent url(../images/gen/logo/kiokio_logo.gif) no-repeat;
	z-index: 2;
}
#logo img, #logo h1 {
	display:none;
}
#logoLink {
	width:125px;
	height:48px;
	display:block;
	position:absolute;
	left:0px;
	bottom:0;
	z-index:10;
}
#logoLink span {
	display:none;
}

#content{
	width:100%;
	margin-top: 30px;
	overflow:hidden;
	padding-bottom: 15px;
	background-image: url(../images/gen/bk/divider.gif);
	background-repeat: repeat-y;
	background-position: 275px 90px;
	/*left: 0px;
	height: 435px;
	right: 0px;
	position: absolute;*/
}

	
#left {
	width:255px;
	overflow: hidden;
	padding-bottom: 50px;
	float: left;
	/*top: 0px;
	position: absolute;
	left: 120px;*/
	text-align: right;
	padding-right: 25px;
	position: relative;
}
		
#left .facebook-ico{
	position:absolute;
	bottom:16px;
	right:29px;
}

#left .facebook-ico img, #left .facebook-ico a{
	border: none;
	text-decoration: none;
}

#main {
	overflow-x: hidden;
	padding-right: 30px;
	padding-left: 25px;
	float: left;
	width: 620px;
	/*position: absolute;
	left: 360px;
	height: 400px;
	overflow-y: auto;*/
}

#footerText{
	/*position: absolute;
	bottom: 30px;
	left: 30px;
	width: 290px;*/
	width:894px;
	margin: 0px auto;
	padding: 10px 31px;
	color: #ffffff;
	line-height:1em;
	font-weight: normal;
}

.productImage{
	/*width:550px;*/
	overflow:hidden;
	text-align: center;
}



.scroll, .noScroll {
	width:100%;
	height:250px;
	overflow:auto;
	margin-bottom:28px;
	vertical-align: top;
}
.noScroll {
	overflow:hidden;
	height:auto;
}

.scroll img, .noScroll img {
	padding:0 0 6px;
}
.prodScroll {
	width:550px;
	height:130px;
    overflow:auto;
	margin-top:28px;
	vertical-align: top;
}

.productImage img {
	
} 
#image img {	
	height:190px;
}

/* Quote */

blockquote {
	font-size:12px;
	line-height:18px;
	padding: 0.5em 1em 0em 1em;
	margin:1em 0 1em -1em;
	position:relative;
	z-index:2;
}
	

blockquote p{
	margin-top: -1em;
	padding: 0;
}	


blockquote .extra {
	
}

.reference{
	font-style: italic;
	font-size: 10px;
	margin-top: -1em;
}

.pullout, #main .pullout-edge {
	padding: 0 0 .6em 0;
	margin:0 0 1.2em 0;
	background:url(../images/gen/bk/hdivider.gif) bottom repeat-x;
	 
}

#main .pullout-edge {
	margin-left: -25px;
	width: 680px;
}

#homeBtmPanel{
	width: 620px;
	background:url(../images/gen/bk/vdivider.gif) bottom repeat-y;
	background-position: 390px 0px;
	margin-top: -15px;
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 11px;
	line-height: 16px;
}

#homeBtmPanel .productPanel{
	float: left;
	width: 380px;
	padding-right: 10px;
	color: #000000;
	overflow: hidden;
	
}

#homeBtmPanel .productPanel .pro-heading, #homeBtmPanel .rightPanel .blog-heading{
	color: #80c4d9;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	padding-bottom: 5px;
	
}
#homeBtmPanel .productPanel a{
	color: #80c4d9; 
}
#homeBtmPanel .productPanel .pro-details{
	float: left;
	width: 185px;
	padding-top: 10px;
}

#homeBtmPanel .productPanel img{
	float: right;
	margin-right: 5px;
	margin-left: 5px;
	margin-top: 0px;
	width: 180px;
}

#homeBtmPanel .rightPanel{
	width: 205px;
	float: left;
	padding-left: 25px;
	margin-top: 10px;
}

#homeBtmPanel .rightPanel .blog-heading{
	color: #f5c253;
}

#homeBtmPanel .rightPanel a{
	color: #766a52;
}
#homeBtmPanel .rightPanel .blog-link{
	display:block;
}
	
.red {
	color: #900;
}
.mainimage{
	position:relative;
	width:560px;
	height:262px;
	margin:0px;
	padding:0px;
	}

.captioning img{
	margin: -15px 0 3px 30px;
	}
.captioning{
	position:relative;
	float:right;
	height:141px;
	margin-left: 30px;
	width:113px;
	display:block;
	text-align:right;
	font-style:italic;
}

.hide{ 
	display:none;
}
.invis_area { 
		position:absolute;
		left:-99999px;
		visibility:hidden !important;
		overflow:hidden !important;
		height:1px	!important;
		width:1px !important;
	}

/* LINK STYLES */
a { 
	color:#766953;
	text-decoration:none;
	
	}
.prodTitle {
	font-family:Georgia, "Times New Roman", Times, serif;
	text-decoration:none;

}

.pageTitle {
	font-family:Georgia, "Times New Roman", Times, serif;
	text-decoration:none;
	margin-left:1.0em;
	

}
.subTitle {
	font-family:Georgia, "Times New Roman", Times, serif;
	text-decoration:none;
	margin-left:2.2em;
	color:#767350;
}

a:hover { 
	text-decoration:underline; 
	}
	
/* STANDARD TEXT CLASSES */
h1, h2, h3, h4, h5, h6, p {
	font-family:Arial, Helvetica, sans-serif;
	margin:0;
	padding:0;
	margin-bottom: .5em;
	}

h1 { 
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:1.8em;
	line-height:1em;
	text-transform:uppercase;
	}
	
.heading{
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:1em;
	line-height:1em;
	text-transform:uppercase;
	font-weight: bold;
	padding-bottom: 3px;
	}
	
h2.heading { 
	
}	

#footerText .footerleft { 
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color: #ffffff;
	float: left;
}	

#footerText .footerright{ 
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	float: right;
}	
		
h2 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:1.4em;
	line-height:1em;
	font-weight: bold;
	padding-top: .5em;
}

h3 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:1.2em;
	margin:0;
}
h4 { 
	font-size:1em;
	
}
h5, h6 {
	font-size:1em;
	line-height:1em;
	}
h6 {
	font-weight:normal;
	}
p {
	margin-bottom:1em;
	}
		

/*********************

	FORM ELEMENTS

*********************/
form { 

	}
	

input, textarea {
	font-family:Arial, Helvetica, sans-serif;
 	padding:2px;
	margin:0;
	background:#FFF;
	font-size:11px;
	line-height:1.2em;
	border:1px solid #766953;
	color:#766953;
	}
input, button {
	vertical-align:top;
}
.cb {
	border:0;
}	
select {
	font-family:Arial, Helvetica, sans-serif;
	background:#FFF;
	font-size:11px;
	line-height:15px;
	color:#766953;
	border:1px solid #766953;
	padding:1px;
	padding-top:3px;
	text-transform:uppercase;
	}

option.label {

}
option {
	background:#FFF;
	padding:1px 5px;
	margin:0;
	}

.button { 
	width:auto !important;
	margin:0 !important;
	/*margin-top:1px;*/
	padding:0;
	font-size:11px;
	line-height:1em;
	text-transform:uppercase;
	background:#69D8DD;
	color:#FFF;
	border:0;
	}
.button span {
	display:block;
	padding:2px 5px 3px !important;
	padding:4px 3px 4px;
}
.button:hover {
	background: #766953;
}
	
label {
	display:block;
	margin:0;
	padding:4px 0 0;
	line-height:1.2em;
	}


/* Table*/

table.form td{
	vertical-align: top;
	padding-top: 1em;
	
}	

table.form td.label{
	padding-right: 1em;
	width: 25%;
}	
	
	
	
/* Carousel CSS */

.animate{
	height:287px; 
	width:620px; 
	padding:0px; 
	margin:0px 0 15px 0;
}

.anime{
	position:relative; 
	width:620px; 
	margin-top:-8px; 
	height:287px;
	background: transparent;
}

.anime .banner_img{
	position:absolute; 
	top:0px; left:0px;
	background: transparent;
}
.text{
	position:absolute;
	z-index:999;
	behavior: url(./css/iepngfix.htc);
}
.png_img
{
	behavior: url(./css/iepngfix.htc);
}

.animate .gb_text{
	right: 0px;
	top: 50px;
	background: transparent url(../images/homeBanner/hmpg_givingback_text.png) no-repeat;
	width:330px ;
	height: 96px;
	
}
.animate .goddess_text{
	right: 0px;
	top: 40px;
	background: transparent url(../images/homeBanner/hmpg_goddess_text.png) no-repeat;
	width:358px;
	height: 104px;
}
.animate .ing_text{
	right: 0px;
	top: 90px;
	background: transparent url(../images/homeBanner/hmpg_ingredient_text.png) no-repeat;
	width:302px;
	height: 88px;
}
.animate .nz_text{
	left: 0px;
	bottom: 35px;
	background: transparent url(../images/homeBanner/hmpg_NewZealand_text.png) no-repeat;
	width:357px;
	height: 85px;
}
.animate .prd_text{
	right: 0px;
	top: 30px;
	background: transparent url(../images/homeBanner/hmpg_products_text.png) no-repeat;
	width:196px ;
	height: 132px;
}
.animate .water_text{
	right: 0px;
	top: 55px;
	background: transparent url(../images/homeBanner/hmpg_water_text.png) no-repeat;
	width:313px;
	height: 102px;
}
.animate .frag_text{
	left: 0px;
	top: 30px;
	background: transparent url(../images/homeBanner/hmpg_fragrance_text.png) no-repeat;
	width:254px;
	height: 119px;
}


/* Quick Styles*/	
.flL{
	float: left !important;
}

.flR{
	float: right!important;
}

.clB{
	clear: both !important;
}

.pt1{
	padding-top: 1em !important;
}	

.mb0{
	margin-bottom: 0em !important;
}

.Red{
	color: #FF0000 !important;
}

	
/* IMAGE IN TEXT STYLES */
.imgR {
	float:right;
	margin:0 0 10px 10px;
	}
.imgL {
	float:left;
	margin:0 10px 10px 0;
	}
	
/* LIST STYLES */
ul, ol {
	padding:5px 0 8px;
	margin-left:1.5em;
	list-style:disc outside;
	}

li {
	padding:2px 0 0;
}	
ol li {
	list-style:none;
	}
	




/* NAVIGATION */
.nav {
	list-style:none;
	padding:0;
	background:transparent;
	position:relative;
	overflow:visible;
	text-align: right;
	margin-top: -3px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	}
.nav li {
	float:left;
	width:100%;
	padding:0;
	margin:0;
}
.nav li:hover {
}
.nav li a {
	width:100%;
	float:left;
	display:block;
	font-size:11px;
	line-height:1em;
	text-decoration:none;
	margin:0;
	padding:3px 0;
	background:transparent;	
	color:#766953;
	text-transform: uppercase;
}

.nav li h2 {
	padding:0;
	margin: 0;
	text-align:right;
	font-size: 11px;
	font-weight: normal;
	
}


/* EXCEPTIONS */
.nav li.current h2{
	font-weight:bold;
	
}


.nav li:hover a {
	color:#766953;
	/*font-weight:bold;*/
}

/* SUB LEVEL 1 */
.nav li ul {
	display:none;
}
.nav li.current ul {
	float: right;
	display:block;
	width:100%;
	list-style:none;
	margin:0;
	padding:0;		
}
.nav li.current ul ul{
	padding-bottom: 1em;
}

.nav li.current ul ul ul{
	padding-bottom: 0;
}

.nav li li a {
	font-size: .9em;
}
.nav li li a em {
	display:none;
	}
/* SUB LEVEL 2 ++++++ CUSTOM NAV IN LEFT COLUMN */
.nav ul ul {
}

.nav ul li.current ul{
	display:block;
	position:relative;
	width:100%;
	top:auto;
	left: 0px;
	overflow:hidden;
	float:right;
	font-size: .9em;
	text-align: right;
}

/* Current */
.nav li li.current a,
.nav li.drop:hover li.current a,
.nav li.current li.current a, 
.nav li li.current:hover li.current a,
.nav li.current li.current li.current a {
	font-weight: bold;
}
.nav li li.current a em,
.nav li.drop:hover.current li a em,
.nav li.current li.current a em,
.nav li li.current:hover li.current a em {
	display:none;
}

/* Nested Normal */
.nav li:hover li a, 
.nav li.current li a,
.nav li.drop:hover li a,
.nav li li:hover li a,
.nav li li.current:hover li a,
.nav li.current li.current li a, 
.nav li.drop:hover li:hover li a,
.nav li.current li.current:hover li a,
.nav li.current li:hover li a,
.nav li.drop:hover li.current li a{
	font-weight: normal;
}
.nav li:hover li a em, 
.nav li.current li a em,
.nav li.drop:hover li a em,
.nav li li:hover li a em, 
.nav li li.current:hover li a em {
	display:none;
}

/* Hover */
.nav li li:hover a, 
.nav li.drop:hover li:hover a,
.nav li li:hover li:hover a, 
.nav li.drop:hover li li:hover a,
.nav li li.current:hover li:hover a{	
	/* font-weight:bold; */
}
.nav li li:hover a em, 
.nav li.drop:hover li:hover a em,
.nav li li:hover li:hover a em, 
.nav li li:hover li:hover a em, 
.nav li li.current:hover li:hover a em {	
	display:none;
}

.nav .level2 {
	font-size: 10px;
}
.nav .level1 {
	font-size: 11px;
}
.nav .level1 a:hover {
	width:100%;
	float:left;
	display:block;
	font-size:11px;
	line-height:1em;
	text-decoration:none;
	margin:0;
	padding:3px 0;
	background:transparent;
	color:#2A4769;
	text-transform: uppercase;
}
.nav .level2 a:hover {
	width:100%;
	float:left;
	display:block;
	line-height:1em;
	text-decoration:none;
	margin:0;
	padding:3px 0;
	background:transparent;
	color:#2A4769;
	text-transform: uppercase;
}


/* PRINT STYLES */

@media print {
#left, #logo a, #footerText, .noPrint, #logo img  {
	display:none !important;
	}
#logo{
	postion: absolute;
	top: 0;
	left:0;
	width: 300px !important;
}	
#logo h1 {
	display: block;
}
#entire, #content, #main {
	float:none;
	border:0;
	margin:0;
	padding:0;
	background: none;
	}
	#main {
		font-size:1.3em;
		
	}	
}