/* css for all HA headers and footers */
img, div { behavior: url(/iepngfix.htc); }
html { margin:0; }
body { background:black; text-align:center; margin:0; }
img { border:none; }
hr { height: 1px; margin: 5px auto; color: #8F8F8F;}

#container { width:975px; margin:auto; position:relative; background:black; padding:0;
	text-align:center; color:#B5D0FA; font:11px Verdana, Arial, Helvetica, sans-serif; line-height:1.3em; }
#middlewidecol { width: 825px; float: right; margin: 0; padding: 0; background: black; color: #B5D0FA; font: normal 11px Verdana, Arial, Helvetica, sans-serif; text-align:center;}

#middlewidecol h1 { width: 100%; margin: 10px 0; font: normal 18px/120% Verdana, Arial, Helvetica, sans-serif;}
#middlewidecol h2 { width: 100%; margin: 5px 0; color: #8F8F8F; font: normal 11px Verdana, Arial, Helvetica, sans-serif;}
a { text-decoration: none; color: #B5D0FA; }

#picturehead { width:975px; position:relative; float: left; margin: 0; padding: 0; height: 62px; background: black; border-bottom: solid 1px #E8E8E8; }
#logopictures { background: url(/img/gr/logo_hawaii_trans.png) no-repeat left top; width: 323px; height: 30px; float: left; margin: 15px 0 0 15px; }

/*--styles used for new header--*/

#toplinks { float: right; width: 607px; height: 23px; background: url(/img/gr/bg_five_links.png) no-repeat; margin: 39px 0 0 0; position: relative; z-index: 490;}
#toplinks ul { text-align: left; height: 34px; margin: 0; padding: 0; width: 610px;}
#toplinks ul li { width: 130px; float: left; list-style: none; }
#toplinks ul li#link1 { position: absolute; left: 25px; top: 4px; }
#toplinks ul li#link2 { position: absolute; left: 128px; top: 4px; }
#toplinks ul li#link3 { position: absolute; left: 280px; top: 4px; }
#toplinks ul li#link4 { position: absolute; left: 405px; top: 4px; }
#toplinks ul li#link5 { position: absolute; left: 550px; top: 4px; }
#toplinks ul li a { text-decoration: none; color: #183368; font: bold 11px Verdana, Arial, Helvetica, sans-serif; }

#toplinks ul ul { position: absolute; top: 12px; left: -20px; z-index: 480; width: 140px; background: transparent; padding: 10px 0 0 0; height: auto;}
#toplinks ul ul li { background: #D9EFFC; margin: 0; width: 140px; border-bottom: solid 1px gray; padding: 2px 0;}
#toplinks ul ul li a { text-decoration: none; color: #333E97; font: bold 11px/150%  Verdana, Arial, Helvetica, sans-serif; letter-spacing: 1; margin: 2px 0 2px 5px;}
#toplinks ul ul li:hover { background: #87CEFA;}
div#toplinks ul ul, div#toplinks ul ul ul, divtoplinks ul li:hover ul ul, divtoplinks ul ul li:hover ul ul {display: none;}
div#toplinks ul li:hover ul, div#toplinks ul ul li:hover ul, div#toplinks ul ul ul li:hover ul {display: block; }

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

#footer { width: 825px; margin:0; padding: 0 0 0 150px; float:left; text-align: center; color: #8F8F8F; font-size: 9px; border-top: solid 1px #8F8F8F;}

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

#time { position: absolute; top: 2px; right: 5px; }

.breadcrumb { float: right; margin: 0 0 0 15px; padding: 10px 0 6px 0; text-transform: uppercase; font: normal 10px/120%  Verdana, Arial, Helvetica, sans-serif; width: 810px; text-align: left; border-bottom: solid 1px #8F8F8F;}
.breadcrumb, .breadcrumb a {color: #8F8F8F; text-decoration: none;}

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

/*styles used in content in details page --*/
p { text-align: justify; }

.content, .contentgray, .copyright, .footerlinks, .termsconditions { width:600px; height:auto; margin: 5px 110px 0 110px; text-align: center; clear: both; padding: 0; float: left;}
.contentbox { width:600px; height:auto; margin: 4px 109px 0 109px; text-align: center; clear: both; padding: 0; float: left; border: solid 1px #B5D0FA;}
.content .row { float: left; width: 600px; height: 16px; clear: both; margin: 5px 0;}
.content p { width: 100%; margin: 5px 0; color: #8F8F8F; text-align: center; }

.copyright, .contentgray, .footerlinks, .termsconditions { color: #8F8F8F;}
.copyright { font-size: 9px;}
#middlewidecol .copyright a, #middlewidecol .contentgray a { text-decoration: underline; color: #8F8F8F; }
#middlewidecol .content a { text-decoration: underline; color: #B5D0FA; }

.content .row .left { width: 16px; height: 16px; float: left; margin: 0 0 0 84px;}
.content .row .middle { width: 400px; height: 16px; float: left; margin: 0;}
.content .row .right { width: 16px; height: 16px; float: left; margin: 0 84px 0 0;}
.content .row .middle, .content .row .middle a { color: #8F8F8F;}

.content .col1, .content .col2, .content .col3, .content .col4, .contentgray .col1, .contentgray .col2, .contentgray .col3, .contentgray .col4 { width: 150px; padding: 0; margin: 0; float: left;}

.widecontent { color: #8F8F8F; width:750px; height:auto; margin: 5px 35px 0 35px; text-align: center; clear: both; padding: 0; float: left;}
.widecontent .col1, .widecontent .col2, .widecontent .col3, .widecontent .col4, .widecontent .col5 { width: 150px; padding: 0; margin: 0; float: left;}
#middlewidecol .widecontent a { text-decoration: underline; color: #8F8F8F; }
.widecontentbox { color: white; width:750px; height:auto; margin: 4px 34px 0 34px; text-align: center; clear: both; padding: 0; float: left; border: solid 1px #B5D0FA;}

.contentbox .row { float: left; width: 100%; height: auto; clear: both; margin: 5px 0; font-size: 18px; color: #B5D0FA;}
.contentbox .infocol { float: left; width: 350px; margin: 0 5px; padding:0; text-align: left;}
.contentbox .ordercol { float: left; width: 230px; margin: 0 5px; padding:0;}
.contentbox .infocol .row { clear: both; font-size: 11px; width: 100%; margin: 3px 0; padding:0;}
.contentbox .infocol .row .left { float: left; width: 90px; margin: 0; padding:0; color: #B5D0FA;}
.contentbox .infocol .row .right { float: left; width: 260px; margin: 0; padding:0; color: #8F8F8F;}
.contentbox .infocol .row a { text-decoration: underline; color: #8F8F8F; }
.contentbox .ordercol .row { clear: both; font-size: 11px; width: 100%; margin: 3px 0; padding:0; color: white;}
.contentbox .ordercol .row .col1 { float: left; width: 50px; text-align: left;}
.contentbox .ordercol .row .col1 input, .widecontentbox .row .cartcol .col1 input { width: 25px; font-size: 11px; height: 12px;}
.contentbox .ordercol .row .col2 { float: left; width: 135px; margin: 0 0 0 3px; text-align: left;}
.contentbox .ordercol .row .col3 { float: left; width: 34px; margin: 0 5px 0 3px; text-align: right; position: relative;}
.contentbox .ordercol .row .col3 .dollar { position: absolute; top: 0; left: 0; text-align: left;}

.widecontentbox .row { float: left; width: 100%; height: auto; clear: both; margin: 2px 0 1px 0; font-size: 11px;}
.widecontentbox .row .photocol {width: 230px; margin: 0 10px; float: left; text-align: left; font-size: 12px;}
.widecontentbox .row .cartcol {width: 480px; margin: 0 10px; float: right; text-align: left;}
.widecontentbox .row .cartcol .col1 {width: 90px; margin: 3px 0; float: left;}
.widecontentbox .row .cartcol .col2 {width: 170px; margin: 3px 0; float: left;}
.widecontentbox .row .cartcol .col3, .widecontentbox .row .cartcol .col4 {width: 100px; margin: 3px 5px; text-align: right; float: left; position: relative;}
.widecontentbox .row .cartcol .col3 .dollar, .widecontentbox .row .cartcol .col4 .dollar { position: absolute; top: 0; left: 30px; text-align: left;}
.widecontentbox .row .cartcolspacer {width: 480px; height: 10px; margin: 0 10px; float: right;}

/* Styles required for Checkout processing. Personal Information. */
.widecontentbox .headerline, .widecontentbox .headerline-centre, .widecontentbox .contentline { float: left; width: 730px; height: auto; clear: both; margin: 5px 10px; font-size: 11px; text-align: left;}
.widecontentbox .headerline, .widecontentbox .headerline-centre { color: #FFCC00; font-weight: bold; font-variant: small-caps;}
.widecontentbox .headerline-centre { text-align: center;}
.widecontentbox .contentline { color: white; }
.widecontentbox .row .leftcol {width: 150px; margin: 0 10px; padding: 2px; float: left; text-align: left; color: #B5D0FA; }
.widecontentbox .row .rightcol {width: 550px; margin: 0 10px; float: left; text-align: left; color: white; }
.widecontentbox .row .rightcol .inputfields {width: 200px; height: 12px; font-size: 12px; margin: 0; padding: 1px; }
.widecontentbox .row .rightcol .selectfields {width: 200px; height: auto; font-size: 12px; margin: 0; padding: 1px; }
.widecontentbox .row .rightcol select {width: auto; height: auto; font-size: 12px; margin: 0; padding: 1px; }
.widecontentbox .row .dollarcol {width: 10px; margin: 0 0 0 10px; float: left; text-align: left; color: white; }
.widecontentbox .row .valuecol {width: 60px; margin: 0 10px 0 0; float: left; text-align: right; color: white; }

.footerlinks .title {font-weight: bold; margin: 15px 0 5px 0; float: left; width: 100%;}
.footerlinks a { text-decoration: underline; color: #8F8F8F;}

.content .mainpicture { border: solid 1px #B5D0FA; }

/*--styles used for left column nav --*/
#leftcolumn { width: 149px; color: #B5D0FA; background: black; margin: 0 auto; padding:0; text-align: left; float:left; position: relative; border-right: solid 1px #8F8F8F;}
#leftcolumn ul { width: 140px; margin: 0 0 0 10px; list-style: none; text-align: left; padding: 0;}
#leftcolumn ul li { margin: 20px 0; color: #B5D0FA; font-weight: normal; font-size:10px;}
#leftcolumn ul li a, #leftcolumn ul li a:hover { color: #B5D0FA; text-decoration: none;}

#leftcolumn ul.picturenames { font-size: 10px; width: 140px; margin: 0 0 5px 10px; list-style: none; text-align: left; padding: 0;}
#leftcolumn ul.picturenames li { margin: 0; color: #B5D0FA; font-weight: normal;}

#leftcolumn .leftnavhead { width: 140px; color: #FFCC00; font-size: 11px; font-weight: bold; margin: 0 0 0 10px; padding: 8px 0; font-variant: small-caps;}
#leftcolumn .leftnavsubhead { width: 140px; font-size: 10px; margin: 0 0 0 10px; padding: 2px 0 8px 0;}
#leftcolumn .leftnavhead a { color: #FFCC00; }

#leftcolumn .leftnavhr { width: 90%; height: 1px; margin: 5px auto; color: #8F8F8F;}

#leftcolumn .leftnavbanner { width: 100%; margin: 25px 0; padding:0; text-align: center;}
#leftcolumn .leftnavlogoline { width: 100%; text-align: center; clear: both;}

/*-- Left column logos --*/
#leftcollogos { width:150px; position: absolute; bottom:0; left: 0; text-align: center; display:none;}
#leftcollogos .thirdpartylogo {float: none; margin: 10px auto; clear:both;}

.spacer { height: 10px; clear:both; }
.smallspacer { height: 3px; clear:both; }
.largespacer { height: 25px; clear:both; }