/* 'ua hanai' stylesheet */

/* global styles */
body {font-family: Verdana, Arial, Helvetica, sans-serif; 
  color: #aaa;
  background: #00000e;
  padding:0px;
  margin:0 0 0 0;}

#extra1 {position: relative;
  bottom: 0;
  right: 0;
  width:100%;
  height: 5px;
  background: #000;} /* bottom border */

p, h2, h3, h4, h5, ul, li, div, span {color: #aaa;}
h3, h4, h5 {color: #888;}

/* page titles */
h1 {color: #9D0003;
  letter-spacing: .1em;
  margin: 0 0 0 55px;
  padding: 0 0 5px 0;}

/* page icons */
#thispageicon {position: absolute; 
  top: 410px; 
  left: 300px;
  border: 0;}
#thispageicon span {display: block;
  width: 46px;
  height: 46px;
  border: 0;}
.icon32link span {display: block;
  width: 46px;
  height: 46px;
  float: left;
  margin: 0 8px 5px 0;
  padding: 0;
  border: 0;}
.homeicon {background-image: url(images/candlepersonalityicon.jpg);}
.sitesicon {background-image: url(images/candlesites.jpg);}
.designicon {background-image: url(images/candledesign.jpg);}
.familyicon {background-image: url(images/candlefamily.jpg);}
.musicicon {background-image: url(images/candlemusic.jpg);}
.faithicon {background-image: url(images/candlefaith.jpg);}
.influencesicon {background-image: url(images/candleinfluences.jpg);}
.deepgrayseaicon32 {background-image: url(images/candlefishicon.jpg);}
.uahanaiicon32 {background-image: url(images/candleuahanai46.jpg);}
.candleicon32 {background-image: url(images/candlepersonalityicon.jpg);}
.privacyicon {background-image: url(images/candlesecurity.jpg);}
.contacticon {background-image: url(images/candlecontact.jpg);}

ul {list-style: none;
  margin: 0;
  padding: 0;}

a {color: #1A15B9; 
  text-decoration: none;
  position: relative;
  z-index: 10;
  letter-spacing: 0.1em;}
  
a:hover {text-decoration: underline;}

li a img, h5 a img, #thispageicon img {display: inline;
  border: 1px solid #0D2D40;
  padding: 0;
  vertical-align: text-bottom;
  margin: 3px 10px 0px 0px;}

/* picture and masthead titles */
#siteheader {position: relative;
  top: 0;
  left: 0;
  height: 400px;
  background: url(images/candlemasthead2.jpg) #00000e no-repeat right top; 
  clear: none;}
#m2 {
  color: #888;
  letter-spacing: .2em;
  margin: 0; 
  padding: 0;
  position:absolute;
  left: 75px;
  top: 30px;}
.wordgray {color: #9D0003;} 
#svp {
  color: #888;
  letter-spacing: .3em;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 60px;
  left: 75px;}


/* menu links */
#cleanlink {color: #B10042;} /* active link */
.activelink {color: #B10042;
  text-decoration: none;}

/* main menu */
#mainmenu {position: absolute;
  left: 75px;
  top: 100px;
  padding: 0;
  background: transparent;
  margin: 0;
  vertical-align: text-bottom;
  line-height: 20px;
  text-align: left;
  font-weight: bold;}
#mainmenuheader {display: none;}
#mainmenulinks {margin: 0; padding: 0;}
#mainmenulinks li{ display: block; padding: 0 3px;}
#mainmenulinks li a {color: #1A15B9; border: 0;}
#mainmenulinks li a.activelink {color: #9D0003; border: 0;}
#mainmenulinks li a span {display: none; border: 0;}

/* personality menu - site stylings and animal picture */
#personalitymenu {position: absolute;
  left: 0px;
  top: 310px;
  padding: 0 50px 190px 30px;
  margin: 0;
  line-height: 28px;
  vertical-align: middle;}
#personalitylogo {background: url(images/candlepersonality.jpg) transparent no-repeat;
  height: 220px;
  width: 178px;}
#personalityheader {color: #9D0003;
  margin: 5px 0 3px 0;
  padding: 0 0 0 50px;
  text-align: left;}
#personalitymenulinks {margin: 0;
  padding: 0 0 0 50px;
  text-align: left;}
#personalitymenulinks li a {padding: 24px 0;}
#personalitymenulinks li a img {
  width: 24px;
  height: 24px;
  margin: 0 8px 5px 0;
  padding: 0;
  border: 0;
  vertical-align: middle;}
.persiconthis {color: #9D0003;}
#deepgrayseaicon24 {background-image: url(images/candlefishicon24.jpg);}
#uahanaiicon24 {background-image: url(images/candleuahanai24.jpg);}
#candleicon24 {background-image: url(images/candlepersonalityicon24.jpg);}


/* text size menu  */
#textsizemenu {padding: 0;
  margin: 0 53px 0 0;
  line-height: 1.25em;
  vertical-align: top;
  position: absolute;
  top: 265px;
  left: 75px;
  text-align: right;}
#textsizeheader {color: #9D0003;
  margin: 5px 0 5px 0;
  position: absolute;
  top: 0px;
  left: 0px;}
#textsizemenulinks {margin: 25px 0 0 0;
  padding: 0;
  vertical-align: top;}
#textsizemenulinks li{display: inline;}
#textsizemenulinks li a {margin: 0 4px 2px 0;
  position: relative;
  left: 4px;
  background-color: transparent;
  color: #0D2D40;
  border: 0;
  height: 24px;
  width: 24px;
  text-align: left;
  vertical-align: top;}
#smtextlink {background: url(images/csmaicon.gif);}
#smtextlink.texticonthis {background: url(images/csmaiconthis.gif);}
#medtextlink {background: url(images/cmaicon.gif);}
#medtextlink.texticonthis {background: url(images/cmaiconthis.gif);}
#lgtextlink {background: url(images/clmaicon.gif);}
#lgtextlink.texticonthis {background: url(images/clmaiconthis.gif);}

/* shameless amazon marketing */
#amazon {border: 1px solid #000036;
  margin: 30px 20px 15px 15px;
  width: 160px;
  vertical-align: middle;
  position: absolute;
  top: 650px;
  left: 45px;
  text-align: center;
  -moz-border-radius: 15px;} 
#amheader {font-weight: bold;
  margin: 10px 15px; color: #888;}
#ampixdiv {margin: 0 15px;}
#ampixdiv img {margin: auto;
  border: 3px solid #292929;
  z-index: 10;
  display: block;}
#amtitlediv {margin: 2px 15px;}
#amauthdiv {margin: 0 15px;}
#amblurb {margin: 5px 15px 15px 15px;}

/* Baha'i Prayer of the day */
#prayer {border: 1px solid #000036;
  margin: 10px 15px 15px 0;
  width: 166px;
  vertical-align: middle;
  position: relative;
  background-color: #00000e;
  float: left;
  -moz-border-radius: 15px;}
#prheader {font-weight: bold;
  margin: 10px 15px 0 15px;
  text-align: center;}
#prdate {font-style: italic;
  margin: 0 15px 10px 15px;
  text-align: center;}
#prpixdiv {margin: 0 15px;}
#prlink {}
#prpix {margin: 0 0 0 27px;
  border: 3px solid #292929;
  z-index: 10;
  display: block;}
#prtitlediv {margin: 2px 15px 15px 15px;
  text-align: center;}


/* things we don't show in this personality */
#menufooter, #homemenufooter, #homeemblem, #skipnav, #pagedesc {display: none;}

/* page footer */
#footer {margin: 20px 10px 10px 10px;
  text-align: center;
  clear: both;
  color: #888;}
#subfooterlinks {position: relative;
  padding: 2px 0 5px 0;
  z-index: 10;}
#footerlinks li, #subfooterlinks li{display: inline;}
#footerlinks li a {white-space: nowrap !important;
  padding: 25px 0;}
#footerlinks li a img {
  width: 46px !important;
  height: 46px !important;
  margin: 0 8px 5px 0;
  padding: 0;
  border: 0;
  vertical-align: middle;}
.footsep {padding: 0 10px;}
#nextlink img {position: relative;
  left: 5px;}

/* rss link */
#rsslink {color: #fff;
  background-color: #C75600;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding: 1px 2px !important;
  font-size: 10px;
  letter-spacing: 0.1em;
  border: 1px solid #a73500;}
  
/* begin content styles */
#content {padding: 35px 75px 20px 300px;}
#content h5, #hello h5 {margin: 15px 0 2px 0;
  padding: 0 0 0 1px;}
#content .more, #hello, #newstuff, .morenoclear {clear: left;
  padding: 0;
  margin: 0 75px 15px 0;}
.morenoclear {clear: none;}
  
#content .more p, #hello p, .morenoclear p {margin: 0 0 25px 0; line-height: 1.3em;}
#content .more p.tight {margin: 0; padding: 0;}
#content .more img, #newstuff img {border: 3px solid #292929;
  z-index: 10;
  float: left;
  margin: 0 10px 5px 0;}
.more pre {font-family: "Courier New", Courier, monospace; 
  color: #000;
  background: #aaa;
  padding: 15px;
  margin-left: 0px;
  left: 0px;
  z-index: 10;}

#content .more img.nobr {float: none;}
#content ul.bullets {list-style: circle outside none;
  margin: 10px 10px 10px 30px;}  

#content .more h3.largebreak {padding-top: 2em;}

#newstuff {padding: 6px 16px 16px 16px;
  border: 1px solid #000036;
  -moz-border-radius: 15px;}
#newstuff h3 {margin: 0 0 10px 0; padding: 0;}
#newstuff h5, #newstuff p {margin: 0 0 2px 0; padding: 0;}

.date {font-style: italic;
  padding-right: 1em;
  color: #5B5B50;}

/* home page personality menu */
#homepers {clear: left;
  padding: 0;
  margin: 2px 50px 15px 0;}
#homepers p {margin: 0 0 25px 0; padding: 0;}
#homepers li{clear: left;}

/* popup screen viewer window */
#popupbody {font-family: Arial, Helvetica, sans-serif; 
  color: #aaa;
  background: #00000e;
  padding:0px;
  margin:8px;}
#popupheader {margin: 0 8px;
  float: right;
  text-align: right;}
#popupm2 {color: #888;
  letter-spacing: .1em;
  margin: 0; 
  padding: 0;}
#popupsvp {color: #888;
  letter-spacing: .3em;
  margin: 0;
  padding: 0;
  position: relative;
  top: -3px;}
#popupbody a {color: #1A15B9; padding: 2px;}
#popupbody a.popupcurrentpagelink { background-color: transparent; color: #9D0003;}
#popuptitle {  margin: 14px 0 0 10px; color: #888;}
#popuppager {position: relative; left: 30%; margin: 5px 0; clear: both;}
#popuppager li {display: inline; padding: 0 3px;}
#closeme {padding-left: 10px;}
.popuppagelink { color: #aaa;}
#popupimg {border: 3px solid #292929; padding: 0; margin: 0;}

/* ride the honu */
#honu {cursor: pointer;
display: inline;
  border: 3px solid #292929;
  padding: 0;
  vertical-align: text-bottom;
  margin: 3px 10px 0px 0px;
  float: left;}

/* security level */
#security {float: left;
  width: 190px;
  border: 1px solid #000036;
  margin: 20px 20px 10px 0;
  background-color: #00000e;
  text-align: center;
  -moz-border-radius: 15px;}
#secheader {text-align: center;
  color: #9D0003;
  font-size: 135%;
  letter-spacing: 0.1em;
  font-weight: bold;
  margin: 10px 0;}
#seccolor {margin: auto;
  width: 130px !important;
  height: 130px !important;
  border: 3px solid #292929;
  background-color: #fff0f5;}
#seccolorname {text-align: center;
  font-size: 110%;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin: 10px;}
#secrec {text-align: center;
  margin: 10px 10px 0 10px;
  font-weight: bold;
  font-style: italic;}  
#seccomment {text-align: center;
  margin: 5px 10px 20px 10px;}

/* site contact form */
#contactForm {background-color: #aaa;
  border: 1px solid #000036;
  padding: 10px;
  position: relative;
  left: 0;}
#contactForm div {margin: 5px 0 0 0; 
  position: relative;
  height: 30px;
  vertical-align: top;
  color: #000;}
#contactForm #emailcomments {height: 110px;}
#contactForm div label {}
#contactForm div input, #contactForm div textarea {position: absolute;
  left: 125px;
  top: 0px;}
#contactForm #Engage {left: 125px;}
#contactForm #clear {left: 190px;}