/* Modified 2010-11-27 */


/* ----- LOAD WEB FONTS ----- */
@font-face {
    font-family: 'HVDPeaceRegular';
    src: url('/fonts/HVD_Peace-webfont.eot');
    src: local('☺'), url('/fonts/HVD_Peace-webfont.woff') format('woff'), url('/fonts/HVD_Peace-webfont.ttf') format('truetype'), url('/fonts/HVD_Peace-webfont.svg#webfontyVzk3wGP') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SFSpeakeasyRegular';
    src: url('/fonts/SF_Speakeasy-webfont.eot');
    src: local('☺'), url('/fonts/SF_Speakeasy-webfont.woff') format('woff'), url('/fonts/SF_Speakeasy-webfont.ttf') format('truetype'), url('/fonts/SF_Speakeasy-webfont.svg#webfontkOTegJ32') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SFSpeakeasyOblique';
    src: url('/fonts/SF_Speakeasy_Oblique-webfont.eot');
    src: local('☺'), url('/fonts/SF_Speakeasy_Oblique-webfont.woff') format('woff'), url('/fonts/SF_Speakeasy_Oblique-webfont.ttf') format('truetype'), url('/fonts/SF_Speakeasy_Oblique-webfont.svg#webfont8AGvZix2') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
        font-family: 'GabrielleRegular';
        src: url('/fonts/Gabrielle-webfont.eot');
        src: local('☺'), url('/fonts/Gabrielle-webfont.woff') format('woff'), url('/fonts/Gabrielle-webfont.ttf') format('truetype'), url('/fonts/Gabrielle-webfont.svg#webfont7mcRHSaS') format('svg');
        font-weight: normal;
        font-style: normal;
}



/* ----- BASIC STUFF FOR ALL PAGES & SECTIONS ----- */
body {
    background: rgb(21,15,89) url(images/banner150.jpg) repeat-x left top;
    color: white;
    font-family: Helvetica, sans-serif;
    font-size: 0.81255em; /* =13px /(16px/em) */
    line-height: 1.5em;
    text-align: justify;
}

p {margin: 1.12em 0;}

a {color: rgb(180,180,180);}
a:hover {color: rgb(150,150,150);}
a:active {color: rgb(100,100,100);}
a:hover, a:active, a:visited { outline: none; }

dt, strong {font-weight: bold;}
em {font-style: italic;}

hr {width: 100%; color: rgb(200,200,255); background-color: rgb(200,200,255); height: 1px; border-width: 0;}

q, blockquote, cite {color: rgb(200,200,255);}
blockquote {text-align: left; margin: 0 3em 0 3em;}
cite {font-style: italic; display: block; text-align: right; margin: 0 3em 1em 0;}
.headcite {display: inline; text-align: left; padding-left: 1em;}

.floatleft {float: left; margin: 0 20px 10px 0; border: solid rgb(20,20,20) 2px;}
.floatright {float: right; margin: 0 0 10px 20px; border: solid rgb(20,20,20) 2px;}

h1, h2, h3, h4, h5, h6, .headquote, .headcite {
    color: rgb(200,100,50);
    text-shadow: -1px 0 0 rgb(30,30,30), 0 1px 0 rgb(30,30,30), 1px 0 0 rgb(30,30,30), 0 -1px 0 rgb(30,30,30);
    font-family: Helvetica, sans-serif;
    font-weight: bold;
}

h1 {font-size: 1.8em;}
h2 {font-size: 1.6em;}
h3 {font-size: 1.4em; font-style: italic;}
h4 {font-size: 1.15em;}
h5 {font-size: 1.0em; font-style: italic;}
h6 {font-size: 0.9em;}

h1 {margin: 0.67em 0;}
h2 {margin: 3em 0  0.75em 0;}
h3 {margin: 0.83em 0 -0.25em 0;}
h4 {margin: 1.12em 0;}
h5 {margin: 1.5em 0;}
h6 {margin: 1.67em 0;}


/* WITH WEB-FONTS: */
.fontface h1, .fontface h2, .fontface h4, .fontface h6, .fontface .headquote, .fontface .headcite {font-family: 'SFSpeakeasyRegular'; font-weight: normal;}
.fontface h3, .fontface h5 {font-family: 'SFSpeakeasyOblique'; font-weight: normal; font-style: normal;}
.fontface h1 {font-size: 2em;}
.fontface h2 {font-size: 1.65em;}


/* ----- SIZING ----- */

html, body {
    width: auto;
    text-align: center;
}

#skip a, #skip a:hover, #skip a:visited {
    position: absolute;
    overflow: hidden;
    line-height: 50px;
    top: -1500px;
    width: 1px;
    height: 1px;
}
#skip a:active, #skip a:focus {
    margin: 0 auto;
    top: 0px;
    left: 50px;
    width: 200px;
    height: 50px;
}

#bigbox {
    position: relative;
    width: 1024px;
    margin: 0 auto 10px auto;
}

#header {
    position: relative;
    overflow: hidden;
    height: 150px;
    width: auto;
}

#menu {
    position: absolute;
    top: 150px; /* top = (header-div-height) */
    bottom: 0;
    left: 0;
    width: 175px; /* width of the background stripe */
}

#content {
    position: relative;
    overflow: hidden;
    padding: 20px;
    margin-left: 195px;
    min-height: 575px;
}


/* skinny body option for message files (eg output message after a web form) */
body.skinny {
    background-image: none;
    width: 600px;
    margin-left: 100px;
    margin-top: 50px;
    text-align: left;
}


/* ----- COLORS ETC FOR MAIN DIVS ----- */
#skip a {
    color: rgb(200,200,255);
    background-color: rgb(50,50,50); /* NO RGBA */
}
.rgba #skip a {
    background-color: rgba(50,50,50,0.9); /* WITH RGBA */
}

#header h4 {
    text-align: left;
    font-family: Helvetica, sans-serif;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 50px;
    line-height: 50px;
    height: 50px;
    margin: 100px 0 0 10px;  /* top = (divheight) - (lineheight); left = s.t. "in" sits betw. menu&content divs*/
}

/* WITH WEB-FONTS: */
.fontface #header h4 {
    font-family: 'HVDPeaceRegular';
    font-variant: normal;
    font-weight: normal;
    font-size: 55px;
    line-height: 55px;
    height: 55px;
    margin: 95px 0 0 25px;  /* top = (divheight) - (lineheight); left = s.t. "in" sits betw. menu&content divs*/
}

#header a {color: rgb(100,100,255); text-decoration: none;}
#header a:hover {color: rgb(80,80,200);}
#header a:active {color: rgb(50,50,150);}

#menu {background-color: rgb(44,40,92);} /* WITH RGBA */
.rgba #menu {background-color: rgba(100,100,100,0.3);} /* NO RGBA */

#menu ul {
    font-family: Helvetica, sans-serif;
    text-align: left;
    list-style: none;
    position: relative;
    margin: 0;
    margin-top: 10px;
    padding: 0;
    left: -6px; /* (padding+border of "menu a") */
}
#menu li {
    padding: 0;
    margin: 3px 0;
}
#menu a {
    text-decoration: none;
    display: block;
    padding: 5px;
    width: 175px;
    text-indent: 5px;
    color: rgb(200,200,200);
    border: solid rgb(30,30,30) 1px;
    background-color: rgb(71,69,95); /* NO RGBA */
}
.rgba #menu a {background-color: rgba(100,100,100,0.5);} /* WITH RGBA */

#menu a:hover {background-color: rgb(83,81,97);} /* NO RGBA */
.rgba #menu a:hover {background-color: rgba(100,100,100,0.7);} /* WITH RGBA */

#menu a:active {background-color: rgb(100,100,100);}

#menu a.chosen {background-color: rgb(160,50,0);}
#menu a:hover.chosen {background-color: rgb(151,68,19);}
#menu a:active.chosen {background-color: rgb(192,71,8);}


#content {
    text-align: justify;
    background-color: rgb(38,34,86); /* NO RGBA */
}
.rgba #content {background-color: rgba(80,80,80,0.3);} /* WITH RGBA */

/* Footer for any page (eg main page validation info) */
#footer {
    position: relative;
    width: 1024px;
    margin: 0 auto;
    padding: 0;
    clear: both;
    text-align: right;
}
#footer img {border: none;}


/* ----- DETAILS FOR GUESTBOOK and ADDGUEST (includes auto-generated content) ----- */
.guestbook_content {width: 650px; padding: 0 50px;}
.guestbook_content .callout {font-style: italic; font-weight: bold; color: rgb(200,200,255);}
.guestbook_content hr {margin: 20px 0;}
.guestbook_content #footnote {
    text-align: right;
    margin-top: 50px;
    font-size:0.75em;
    color: rgb(200,200,255);
}
.addguest_content {width: 650px; padding: 0 50px;}
.addguest_content h1 {margin-bottom: 1.5em;}
.addguest_content .reqd {
  color: rgb(150,150,255);
  font-weight: bold;
}
.addguest_content .opt {
  font-style: italic;
  font-size: 0.9em;
  color: rgb(200,200,200);
}
.addguest_content #name {
  display: none;
}
.addguest_content dt {
  position: relative;
  text-align: right;
  width: 100px;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: -1.7em;
}
.addguest_content dd {
  margin-left: 115px;
  margin-top: .1em;
  margin-bottom: .7em;
}
.addguest_content #footnote {
  text-align: right;
  margin-top: 50px;
  font-size:0.75em;
  color: rgb(200,200,255);
}