/* Global ------------------------------------- */
body {padding: 32px 0; font-family: verdana, sans-serif; font-size: 12px; text-align: center; color: #555; background: #6883A0;}

p {margin: 0 0 12px 0; padding: 5px 0 0 5px;}

/* The shadow layer -------------------------------------- */
#mainwrap {margin: 0 auto; width: 568px; height: 368px; text-align: left; background: transparent url(../images/bg_shadow.png) 0 0 no-repeat;}

/* "Pad out" the shadow ---------------------------------- */
#padiv {padding: 14px 0 0 14px;}

/* Set the primary parent container ---------------------- */
#maindiv {position: relative; height: 340px; width: 540px; background: transparent;}

/* The homepage, full width ------------------------------- */
#hp {position: absolute; left: 0; top: 0; width: 540px; height: 340px; background: transparent url(../images/bg_homepage.png) 0 0 no-repeat; color: #555;}
#photo {float: right; margin: 92px 10px 0 0;}
#hp_nav {margin: 244px 0 0 100px; padding: 0; font-size: 18px; font-weight: bold; color: #AC3400;}
#hp_nav a {margin: 0; padding: 0; font-size: 12px; font-weight: bold; color: #AC3400; text-decoration: none;}
#hp_nav a:hover {color: #555; text-decoration: underline;}
/* end hp */

/* Wrap the left layer ----------------------------- */
.left {float: left; width: 270px; height: 340px; position: relative; overflow: hidden;}

/* Wrap the right layer ------------------------------ */
.right {float: left; width: 270px; height: 340px; position: relative; overflow: hidden;}

/* Positioning all of the L-R panels ------------------------- */
#aboutL {position: absolute; left: 270px; top: 0; width: 270px; height: 340px; background: transparent url(../images/bg_interior.png) 0 0 no-repeat;}
#aboutR {position: absolute; right: 270px; top: 0; width: 270px; height: 340px; background: transparent url(../images/bg_interior.png) right 0 no-repeat;}
#contactL {position: absolute; left: 270px; top: 0; width: 270px; height: 340px; background: transparent url(../images/bg_interior.png) 0 0 no-repeat;}
#contactR {position: absolute; right: 270px; top: 0; width: 270px; height: 340px; background: transparent url(../images/bg_interior.png) right 0 no-repeat;}
#readL {position: absolute; left: 270px; top: 0; width: 270px; height: 340px; background: transparent url(../images/bg_interior.png) 0 0 no-repeat;}
#readR {position: absolute; right: 270px; top: 0; width: 270px; height: 340px; background: transparent url(../images/bg_interior.png) right 0 no-repeat;}

/* Read padding left and right  ----------------------------------- */
.pad2l {padding: 10px 0 10px 10px;}
.pad2r {padding: 10px 10px 10px 0;}

/* Standard padding ----------------------------------- */
.pad {padding: 14px;}

/* About padding ----------------------------------- */
.pad3 {padding: 24px;}

/* About page link treatment --------------------------------- */
.pad3 p a {font-weight: bold; color: #AC3400; text-decoration: none;}
.pad3 p a:hover {text-decoration: underline;}

/* Contact page listings --------------------------------------- */
.pad ul {margin: 20px 0 0 20px;}
.pad ul li {margin: 0 0 12px 0;}
.pad ul ul {margin: 2px 10px 2px 20px;}
.pad ul li ul li {margin: 0 0 2px 0;}
.pad ul li span { font-weight: bold; color: #AC3400; }
.pad ul li .email {padding: 0 7px 0 0;}
.pad ul li .yim {padding: 0 18px 0 0;}
.pad ul li .web {padding: 0 12px 0 0;}
.pad ul li .web2 {padding: 0 4px 0 0;}
.pad ul#sbo li span { font-weight: normal; color: #555; }
.pad ul li a {color: #039; text-decoration: none;}
.pad ul li a:hover {text-decoration: underline;}

/* Interior navigation link treatment ---------------------- */
.in_nav { padding: 0 12px 0 0; font-weight: bold; color: #AC3400; text-align: right;}
.pad .in_nav a, .pad2l .in_nav a, .pad2r .in_nav a {font-size: 11px; font-weight: bold; color: #AC3400; text-decoration: none;}
.pad .in_nav a:hover, .pad2l .in_nav a:hover, .pad2r .in_nav a:hover {color: #555; text-decoration: underline;}

/* Interior right container sets bottom position of interior navigation - about and contact */
.rtbox {height: 290px;}

/* Logos on about page ---------------------------------- */
.rtboxLogos {padding: 20px 0 0 20px;}

/* Read page - dressing and aligning left and right ------------------ */
.readboxL {padding: 0;border-bottom: 1px dotted #AC3400;}
.readboxL a {display: block; padding: 25px 0 25px 74px; font-size: 18px; font-weight: bold; color: #AC3400; text-decoration: none;}
.readboxR {border-bottom: 1px dotted #AC3400;}
.readboxR a {display: block; padding: 14px 74px 14px 0; text-align: right;}

/* Extra height to position navigation on read page */
.box72 {height: 72px}

/* Headers on contact page ------------------------- */
h2 {font-family: georgia, serif; font-size: 22px; color: #AC3400; text-align: center; border-bottom: 1px dotted #AC3400;}

/* Give credit where credit is due -------------------------- */
#credits {margin: 12px 0 0 0; padding: 10px 0 32px 0; font-family: georgia, serif; font-style: italic; text-align: center;}
#credits a {text-decoration: none; color: #F1F1F1;}


/* Okay, it's old school, but still the easiest and most practical --- */
#nojsmsg {
  font-size: 24px;
  font-weight: bold;
  color: #FFF;
}

/* BPP identifier */
#footprint {
  margin: 7px 0 0 0;
  font-size: 9px;
  color: #FFF;
  text-align: center;
}

#footprint a {
  font-size: 9px;
  color: #FFF;
  text-decoration: none;
}