@charset "utf-8";
/****************************************************************/
/* CSS 2.1  STYLE SHEET - Copyright 2007 - 2010 SIPhawaii       */
/* version    : 1.00                                            */
/* Update: 04-15-2010                                           */
/****************************************************************/
/* Composed by: BOP Web Innovations - New Zealand   			*/
/*                                                              */
/*  REMARKS:                                                    */
/*	>> Free to copy but you MUST link your HOMEe page			*/
/*	   to SIPhawaii[DOT]com and do not remove this header. 		*/
/*	   Thank you. <<											*/
/****************************************************************/

/* RESET */
* {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	/*cursor: default*/
}
/* CLEAR FLOATS - cross browser fix */
.clearfix:after {
	clear: both;
	display: block;
	content: " ";
	height: 0px;
	visibility: hidden;
}
/*.clearfix {display: inline-block; } DONT USE OR UNBLOCK !! */
/* Hides from IE-mac */
* html .clearfix {height: 1%;}
.clearfix {display: block;}
li.clearfix {display: list-item;}
/* End hide from IE-mac */

/* Fixes for page shift caused by vert Scrollbar on safari and FF - */
/* html {min-height: 100%; margin-bottom: 1px;} */
/*html{height:100.02%} /* force Mozilla to have scrollbars */
/* CSS hacks for Safari */
/*[if Webkit] { min-height: 100%; margin-bottom: 1px; }
; */

/*input, textarea, select {cursor: pointer; font: normal 8pt/12pt tahoma, sans-serif }
/*address{display:none;width:1px;height:1px;visibility:hidden}*/

/* BODY - TABLES - CELLS - PAGE MARGIN */
/* disable horizontal scroll bar */
/*    overflow-x:hidden;    */ /*WORKS IN VISTA WITH XHTML */

/* DO NOT REMOVE */
body {
	margin: 0;
	padding: 0;
	border: 0;			/* This removes the border around the viewport in old versions of IE */
}
body#wrapper tr td {white-space: nowrap;} /* do not use this line in MIVA cart */

#banner {margin: 0 auto; margin-top: 8px;}
#bannerleft {float: left; width: 303px; padding-left: 2px;  text-align: left}
#bannerright {float: right; width: 303px; padding-right: 2px;  text-align: right}

/* wrapper for fixed width - 1216 px
center page on screen with fixed width. 
Specify a min-width for the body as wide as the 'wrapper' element itself. 
This prevents negative (i.e. inaccessible)left-margins in narrow browser windows when using Navigator 6+/Mozilla on Win32:  */
.wrapperwidth {	width: 1216px; }
#wrapper { 	
	margin: 0 auto;
    padding-left: 2px;
	padding-right: 2px;
	/*border-left: 2px solid white;
    border-right: 2px solid white;*/

	/*page margin */
	/*border: 0px;
	margin-left: 2px;
	margin-right: 2px;
	margin-bottom: 0px; */
	
	/* to set background color OUTSIDE the wrapper use Editor Pageproperties */
    /*background: #FEF6F6;*/
	/* no text/img wrapping */
	/*tsipblue */
	font-family: arial;
	font-weight: normal;
	font-size: small;
	color: #0033CC; /*csipblue  */
	text-align: center;
}
#wrapperbgcolor {background-color: white;}

#innerwrapperpoperties {width: 1034px; margin: auto;} /* float-center.*/
#outerwrapperproperties {width: 1054px; background-color: white;} /*See also rounded corners images width 10px */

.nowrap {white-space: nowrap;}
.nowrapundo {white-space: normal; float: left;	text-align: left;}

#wrappertop {background: url('Siteimages/bg_top_SIP.gif') 0 0 no-repeat;}
#wrapperfoot {background: url('Siteimages/bg_foot_SIP.gif') 0 0 no-repeat;}
#wrapperleftright {background: url('Siteimages/bg_body_SIP_1px.gif') 0 0 repeat-y;}

#wrappermobi{width: 320px; margin: 0 auto;}

/*page margin - layout */
.pagemargin {
	border: 0px;
	margin-top: 0px;
	margin-left: 2px;
	margin-right: 2px;
	margin-bottom: 0px;
}
.tableproperties {
	padding: 0 0 0 0;
	border-collapse: collapse;
	border: 0;
	text-align: center;
}
.clear {clear: both;}

/* CONTAINERS AND ROUNDED CORNERS - with spacer */
#column2 {
	float:right;
	width: 1054px;
	/*background: white;
	tsipblue */
	font-family: arial;
	font-weight: normal;
	font-size: small;
	color: #0033CC; /*csipblue  */
	text-align: center;
} 

.containerleft {width: 475px; height: 185px; padding : 0px;	border-spacing: 0px; text-align: center;}
.containermiddle {width:195px; height: 185px; padding:0px; border-spacing:0px; text-align:center;}
.containerright {width :367px; height: 185px; padding:0px; border-spacing:0px; text-align:center;}
.spacerhor {width: 100%; height:2px;}
.spacerver {width: 2px;}

.imgbgRCtl {background-image: url('Siteimages/RCtl._high_silver.jpg'); background-repeat: no-repeat;}
.imgbgRCtr {background-image: url('Siteimages/RCtr._high_silver.jpg'); background-repeat: no-repeat;}
.imgbgRCbr {background-image: url('Siteimages/RCbr._silver.jpg'); background-repeat: no-repeat; width: 10px;}
.imgbgRCbl {background-image: url('Siteimages/RCbl._silver.jpg'); background-repeat: no-repeat; width: 10px;}
.imgbgRCtop{background-image: url('Siteimages/RCtop._silver.jpg'); background-repeat: repeat-x;}
.imgbgRCbot{background-image: url('Siteimages/RCbottom._silver.jpg'); background-repeat: repeat-x;}
.imgbgRCleft{background-image: url('Siteimages/RCleft._silver.jpg'); background-repeat: repeat-y; width: 10px;}
.imgbgRCright{background-image: url('Siteimages/RCright._silver.jpg'); background-repeat: repeat-y; width: 10px;}

/*background - round coners and border 1 pixel -*/
/* <!--<div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl">
<div class="tr" style="width: xxxx; height: xxxx"> --> */
/* <!--.t {background: url('Siteimages/Bg_dot_silver.gif') 0 0 repeat-x; width: 2em} */ 
.t {background: url('Siteimages/Bg_dot_silver.gif') 0 0 repeat-x;}
.b {background: url('Siteimages/Bg_dot_silver.gif') 0 100% repeat-x;}
.l {background: url('Siteimages/Bg_dot_silver.gif') 0 0 repeat-y;}
.r {background: url('Siteimages/Bg_dot_silver.gif') 100% 0 repeat-y;}
.bl {background: url('Siteimages/Bg_bl_silver.gif') 0 100% no-repeat;}
.br {background: url('Siteimages/Bg_br_silver.gif') 100% 100% no-repeat;}
.tl {background: url('Siteimages/Bg_tl_silver.gif') 0 0 no-repeat}
.tr {background: url('Siteimages/Bg_tr_silver.gif') 100% 0 no-repeat;} 

/* BACKGROUD IMAGES - COLORS - BORDERS */
img {border: 0px;}
.nob {border-width: 0px;}
.nobgimg {background-image: url('');}
.imgbgbeans{background-image: url('Siteimages/background_beans_variety_pack.jpg');}
.imgbglauhala{background-image: url('Siteimages/background_mat_small_SIPhawaii.JPG');}
.imgbgcalbi{background-image: url('Prodimages/calendar_2011_big_island_of_Hawaii.jpg');}
.imgbglogo {background-image: url('Siteimages/logo_SIPhawaii_Shop_In_Paradise.gif');background-repeat: no-repeat; background-position: top left;}
/*.imgbgshopsafe { height:94px; background-image: url('Siteimages/Shop_Safe_No_CC_number_Storage_Vert_Menu_Large_NEW_SIPhawaii.gif');background-repeat: no-repeat; background-position: bottom center;}*/
.imgbgshopsafe {height:83px; background-image: url('Siteimages/Shop_Safe_Vert_Menu_SIPhawaii3.bmp');background-repeat: no-repeat; background-position: bottom left;}
.imgbglogork {height:83px; background-image: url('Siteimages/logo_royal_kona.jpg');background-repeat: no-repeat; background-position: top left;}

.bgdsippink{background-color: #FCE6E6;}
.bgdbrown{background-color: #663402;}
.cbgwhite {background-color: white;}
.cbgblack {background-color: black;}


/* LINES - SHADOWS - SPACERS */
hr {
	border:none;
	border-top:1px solid silver;
	height:1px;
	margin-bottom:0px;
	padding-top:0px;
}

.linesilver {border-top: 1px solid silver; padding-top:0px; padding-left:1px; padding-right:1px;}
.linegreen {border-top: 1px dotted green; padding-top:0px; padding-left:1px; padding-right:1px;}
.strike {text-decoration: line-through;}
.linedotted {
	display: block;
	overflow: hidden;
	background-image: url('Siteimages/dots.gif');
	background-repeat: repeat-x;
	height: 1px;
	width: 100%;
}

.shadowblue {
	display: block;
	overflow: hidden;
	background-image: url('Siteimages/shadow_blue_gradient.gif');
	background-repeat: repeat-x;
	height: 10px;
	width: 100%;
}

/* POSITIONING - works for text and pictures with IE but not for pics on Safari; try using margin:auto to center pics in safari */
.centertable {margin-left: auto; margin-right: auto;} /* fix for safari ???*/
.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}

.vtop {vertical-align: top}
.vbottom {vertical-align: bottom}

.ileft{float: left}
.iright{float: right}

/* HEADERS */
#header {width:100%;
	 margin-left: auto;
	 margin-right: auto;
}
#header table {
	margin: 0 auto;
}
#globalfooter table {
	margin: 0 auto;
}
#localheader {
	height: 15px;
	text-align: left;
}
h1 {
	/*font-family: "arial black";*/
	font-family:Arial, "Arial Narrow", "Arial Black", Verdana;
	font-size: medium;
	/*font: normal normal normal 700;*/
	margin: 0;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0;
}
h2 {
	font-family: arial;
	font-size: 10pt;
	font-weight: 700; /* bold */
	/*font: normal normal normal 700;*/
	margin: 0;
/*	margin-top:0px;
	margin-bottom: 0px;*/
	padding: 0;
}
h3 {
	font-family: verdana;
	font-size: small;
	font-weight: normal;
	/*font: normal normal normal 700;*/
	margin: 0;
/*	margin-top:0px;
	margin-bottom: 0px;*/
	padding: 0;
}

/* FONTS DEF*/
.xsmall {font-size: x-small;}
.small {font-size: small;}
.medium {font-size: medium;}

.arial {
	font-family: arial;
}
.arials {
	font-family: arial;
	font-size: small;
}
.arialsb {
	font-family: arial;
	font-size: small;
	font-weight: bold;
}
.arialxs {
	font-family: arial;
	font-size: x-small;
}
.arialxsb {
	font-family: arial;
	font-size: x-small;
	font-weight: bold;
}
.arialm {
	font-family: arial;
	font-size: medium;
}
.ab {
	/*font-family: "arial black";*/
	font-family: Arial, "Arial Narrow", "Arial Black", Verdana;
	font-weight: bold;
}
.abs {
	/*font-family: "arial black";*/
	font-family: Arial, "Arial Narrow", "Arial Black", Verdana;
	font-size: small;
	font-weight: normal;
}
.abxs {
	/*font-family: "arial black";*/
	font-family: Arial, "Arial Narrow", "Arial Black", Verdana;
	font-size: x-small;
}
.ablb {
	/*font-family: "arial black";*/
	font-family: Arial, "Arial Narrow", "Arial Black", Verdana;
	font-size: large;
	font-weight: bold;
}
.abxl {
	/*font-family: "arial black";
	font-weight: normal;*/
	font-family: Arial, "Arial Narrow", "Arial Black", Verdana;
	font-weight: bold;
	font-size: x-large;
	
}	
/* AVOID Arial Black UNTIL IE XP SP3 BUG that converts to Italic has been fixed by MS 
.abxlb {
	font-family: "arial black";
	font-size: x-large;
	font-weight: bold;
}
*/
/* Arial Narrow not on IPAD? */
.an {
	font-family: "Arial Narrow";
}
.anmb {
	font-family: "Arial Narrow";
	font-weight: bold;
	font-size: medium;
}
.ans {
	font-family: "Arial Narrow";
	font-size: small;
}
.ansb {
	font-family: "Arial Narrow";
	font-size: small;
	font-weight: bold;
}
.anb {
	font-family: "Arial Narrow";
	font-weight: bold;
}
.anxs {
	font-family: "Arial Narrow";
	font-size: x-small;
}
.anl {
	font-family: "Arial Narrow";
	font-size: large;
}
.anlb {
	font-family: "Arial Narrow";
	font-size: large;
	font-weight: bold;
}
.anxlb {
	font-family: "Arial Narrow";
	font-size: x-large;
	font-weight: bold;
}
.anxxlb {
	font-family: "Arial Narrow";
	font-size: xx-large;
	font-weight: bold;
}
.anxxxlb {
	font-family: "Arial Narrow";
	font-size: 36pt;
	font-weight: bold;
}
.boss {
	font-family: "bookman old style";
	font-size: small;
}
.bossb {
	font-family: "bookman old style";
	font-size: small;
	font-weight: bold;
}
.bosb {
	font-family: "bookman old style";
	font-weight: bold;
}
.bosmb {
	font-family: "bookman old style";
	font-weight: bold;
	font-size: medium
}
.boslb {
	font-family: "bookman old style";
	font-weight: bold;
	font-size: large
}

.verdanas {
	font-family: verdana, arial, courier;
	font-size: small;
	font-weight:normal;
}
.verdanasb {
	font-family: verdana, arial, courier;
	font-size: small;
	font-weight: bold;
}
.verdanaxs {
	font-family: verdana, arial, courier;
	font-size: x-small;
	font-weight: normal;
}
.verdanaxsb {
	font-family: verdana, arial, courier;
	font-size: x-small;
	font-weight: bold;
}
.verdanan {
	font-family: verdana, arial, courier;
	font-size: 12pt; /*normal */
	font-weight: normal;
}
.verdananb {
	font-family: verdana, arial, courier;
	font-size: 12pt; /*normal */
	font-weight: bold;
}	
.verdanam {
	font-family: verdana, arial, courier;
	font-size: medium;
}
.verdanamb {
	font-family: verdana, arial, courier;
	font-size: medium;
	font-weight: bold;
}

/* COLORS DEF */
.black {color: black;}
.blue {color: blue;}
.green {color: green;}
.white {color: white;}
.gray {color: gray;}
.red {color: red;}
.silver {color: silver;}

.cgray {color: #333333;}
/*.cgray {color: #333333;}*/

.cbgdbrown {color: #663402;}
.cbgsippink {color: #FCE6E6;}
.csippink {	color: #FF2994;}
.csipblue{ color: #0033CC;}
.cbrown {color: #996600;}
.cchoc {color: #613101;} 	/*darkbrown - was maroon 800000*/
.cmac {color: #D9A658}		/*macadamia*/
.coranged {color: #F77908}  /*dark orange */
.cbathrose {color: #F17B5C;}/* bath and body page*/
.cbathblue {color:#6B6BB5;}/* bath and body page*/
.cbathgreen {color: #ADBD52;}/* bath and body page*/

.csecure {color: #598C01;}	/* dark green */
.cooag {color: #67910D;}	/* ooa green */
.cooab {color: #0080FF;}	/* ooa blue */

.crbr {color: #FF1000;}
.crbo {color: #FF9900;}
.crby {color: #EEDE11;}
.crbg {color: #5EC14A;}
.crbb {color: #8FC2DD; /* blue  */}
.crbi {color: #0000FF; /*indigo */}
.crbv {color: #8000C0; /* violet*/}

/* TEXT DEF */
.tcase {
	font-family: "bookman old style";
	font-size: x-large;
	font-weight: bold;
	color: #FF1000;
}
.tredalert {
	font-family: verdana, arial, courier;	font-size: small;
	font-weight: bold;
	color: #FF1000;
}
.tbluesky {
	font-family: verdana, arial, courier;	font-size: x-small;
	font-weight: normal;
	color: #0080FF;
	color: black
}
.trose {
	font-family: verdana, arial, courier;	font-size: x-small;
	font-weight: normal;
    color: #FEF6F5;
}
.tenvironment {
	font-family: verdana, arial, courier;	font-size: x-small;
	font-weight: normal;
/*	color: #5EC14A;*/
	color: black;
}
.tsmallsippink {
	font-size: small;
	color: #FF2994;
}
.tsipblue {
	text-align: center;
	font-family: arial;
	font-weight: normal;
	font-size: small;
	color: #0033CC /*csipblue  */
}
.tlocalheader {
	font-family: "bookman old style", arial, courier;
	font-weight: normal;
	font-size: small;
	color: #0033CC /*csipblue*/;
}


/* NAVIGATION */
/* LINKS */
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
a:link    {color: silver} 	/* unvisited links */
a:visited {color: silver} 	/* visited links   */
a:hover   {color: #FF2994} 	/* user hovers - csippink */
a:active  {color: #FF2994}	/* active links    */
a.external:visited {color: red}

/*a:focus { background: yellow }
a:focus:hover { background: white }*/

/* examples dotted underlinge to be tested 
Dotted hover link underline
a:hover {
color: #FF2994;
text-decoration: none;
/*background-color: transparent;
border-color: #FF2994;
border-bottom-width: 1px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
border-style: dotted;
}
*/
/*
a.imglink:link, a.imglink:visited { 
border : none; 
} 
a.imglink:hover { 
background : transparent; 
} 
*/

/* VERT NAV - COLUM1 */
#vertnav img {margin: 0px 0 0 0px; padding-top: 0px; padding-bottom: 0px;} /* t ? b */
#vertnav {
	float: left;
	width: 152px;
	vertical-align: middle;
	font-family: Arial, "Arial Narrow", Verdana, "Arial Black";
	font-weight: bold;
	font-size: large;
	border-width: 0px;
	color: gray;
}
#vertnav li a {
	/* voice-family: "\"}\"";
	voice-family: inherit;*/ 
	height: 25px;
	text-decoration: none;
	padding: 0px 2px 2px 0px;

}	
#vertnav li a:visited {
	display: block;
	background: url('Siteimages/background2_vert_menu.png') no-repeat;
	padding: 0px 2px 2px 0px;
	color: gray;
	}
#vertnav li a:link {
	display: block;
	background: url('Siteimages/background2_vert_menu.png') no-repeat;
	padding: 0px 2px 2px 0px;
	color: gray;
	}
/* Specify only properties that differ from a:link */
#vertnav li a:hover {
	background: url('Siteimages/background_vert_menu.png') no-repeat;
}
/*#menuvert li a:active {
	background: url('Siteimages/background2_vert_menu.bmp') no repeat; 
/*color: #26370A;
	padding: 0px 2px 2px 0px;
}*/

/* FOOTER DEF */
#footer {
		clear: both;
		padding: 0px 0px;
		/*background:#cc9;*/
}
#footer p {
		margin: 0;
}
* html #footer {
		height: 1px;
}

#globalheader {
	white-space: nowrap;
	width: 100%;
	text-align: center;
	font-family: arial;
	font-weight: normal;
	font-size: small;
	color: gray;
	background: url('Siteimages/bgskyradiantbluepink.jpg') repeat-x;
}
#globalfooter {
	width: 100%;
	margin-left: auto;
	margin-right: auto;

	white-space: nowrap;
	text-align: center;
	font-family: arial;
	font-weight: normal;
	font-size: small;
	color: gray;
	background: url('Siteimages/footer_gradient_small.gif') repeat-x;
}
#globalfooter a {color: gray; border-bottom: 1px dotted silver; text-decoration: none; color:gray;}
#globalfooter a:link{color: gray;}
#globalfooter a:hover{color: #FF2994; border-bottom: 1px dotted #FF2994; text-decoration: none;color: #FF2994;}
/*#globalfooter a:visited{color: gray; border-bottom:1px dotted gray; text-decoration:none;color:gray;}*/
#localfooter {
	white-space: nowrap;
	width: 100%;
	text-align: center;
	font-family: arial;
	font-weight: normal;
	font-size: x-small;
	color: gray;
}

/* other websites we like */
.linkfooter {text-decoration: none; color: gray; font-family: "Arial Narrow"; font-size: x-small;}

/* SITEMAP */
#sitemap {
	background: #E9F2FB;
	/*background: url('Siteimages/footer_gradient_small.gif') repeat-x;*/
	overflow: hidden;
	padding: 8px; /* set top and bottom */
	clear: both;
	white-space: nowrap; 
	/*width: 100%;*/;
	text-align: left;
	font-family: arial;
	font-weight: normal;
	font-size: 11px; /* 1px smaller than normal */
	color: gray;
}
#sitemap ul {
	display: block;
	overflow: hidden;
	/*background: #f2f2f2;*/
	margin: 1px 5px 1px 0px;
	padding: 0px;
	list-style-image: none;
	float: left;
}
#sitemap ul li {
	list-style-type: none;
	padding: 0px 9px 0px 0px;
	list-style: none !important;
	margin-left: 1px !important;
	padding-left: 0px !important;
}
#sitemap ul li a {
	list-style: none !important;
	margin: 0px !important;
	padding: 0px !important;
	/* font-weight: bold;*/
}

#sitemap a {color: gray; text-decoration:none;}
#sitemap a:link {color: gray;}
#sitemap a:hover {color: #FF2994; text-decoration:none;color: #FF2994;}

/***********************************************
* Image Thumbnail Viewer Script- © Dynamic Drive[dot]com
* This notice must stay intact for legal use.
* Visit dynamicdrive[dot]com/ for full source code
***********************************************/
/* The following 2 lines must be included in the thm page.
<link rel="stylesheet" href="thumbnailviewer.css" type="text/css" />
<script src="thumbnailviewer.js" type="text/javascript"></script>

/* 3 Examples for html source code
<a href="castle.gif" rel="thumbnail" title="This is beautiful castle for sale!">Castle</a> 
<p><a href="http://img184.imageshack.us/img184/1159/castleyi6.gif" rel="thumbnail" title="This is beautiful castle for sale!">Castle</a></p>
<p><a href="http://img201.imageshack.us/img201/6923/countryxb6.gif"" rel="thumbnail"><img src="thumbnail.gif" style="width: 50px; height: 50px" /></a></p>
*/



/* OPACITY for all browsers - CSS 3.0! */
/*.transparent {
	filter:alpha(opacity=50); /* CSS 3.0 - IE only */
/*	-moz-opacity:0.5;
	-khtml-opacity: 0.5; /* safari legacy */
/*	-webkit-opacity:.5;  /* safari */
/*	opacity: 0.5;
}

/* FORMS - INPUT */
/*
.focus{ background: #ffc }
.blur { background: #fff }
 */

/* INTERESTING EXAMPLES TO BE TESTED */
/* #note p, #note ul, #note h5
{border-left:6pt #fff solid;padding:2pt 6pt 3pt 6pt}

#note h4, #note div
{padding-left:6pt;padding-bottom:4pt; border:0;border-top:1px #757575 solid; /* pageheader bottom-border 1pixel 'fixer' 
 background:#fff url('plaatjes/papercliptop.gif') bottom right no-repeat;}

#note div
{min-height:24pt;}
* html #note div 
{height:24pt} /* ie fix: 'simulate' min-height 

#note h5
{font:bold 8pt/12pt tahoma,sans-serif;margin:0;padding:0 6pt}

#note .paperclip
{float:right;position:relative; text-align:right;background:url('plaatjes/paperclipbot.gif');
 display:block;width:49px;min-height:37px;margin-right:7px}
* html #note .paperclip
{height:37px;margin:0 0.3em 0 0;border:1px #dcd solid;border-top:0;} /* ie-fix: make it fit too 

#main, #note
{margin-bottom:8pt}
* html #main,* html #note
{margin-bottom:0} /* ie fix 
/* INTERESTING EXAMPLES TO BE TESTED */