@charset "UTF-8";

/*+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=
    Global
+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=*/

/* Move the skipper off the page. */
#elevator { position: absolute; text-indent: -9999px; }
/* Remove hr elements. */
hr { display: none; }


/*------------------------------------------------------------
    Clearfix-ed elements.
    You may ask “Why list a zillion selectors here 
    rather than just class them all as ``.clearfix``?”
    Because, as your question points out, I have to 
    label a zillion things either in the markup or the 
    CSS. I choose the CSS, and you probably should too. 
    Why? Because on a site redesign it will be easier 
    to change the CSS (in one place) than the markup 
    (which is in various documents and databases). 
    
    See also ie-screen.css.
------------------------------------------------------------*/
.clearfix:after, 
#container01:after { content:"."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix, 
#container01 { display: inline-block; } 
.clearfix, 
#container01 { display: block; }


/*------------------------------------------------------------
    Containers
------------------------------------------------------------*/
#container00 { background: transparent url(../img/bg-water.jpg) repeat-x center top; }
/* Elastify the containers. */
#masthead, #container01, #nav div, #footer div { width: 46.25em/* 740px */; max-width: 98%; margin: 0 auto; padding: 0 1%; }
#container01 { position: relative; margin-top: 6.25em/* 100px */; }


/*------------------------------------------------------------
    Masthead
------------------------------------------------------------*/
#masthead { height: 7.65em; padding-top: 1.25em/* 20px */; }
#masthead h1 { float: left; margin-left: -20px; }
#masthead h1 img { width: 5.1875em/* 249px */; height: 6.6875em/* 321px */; }
#masthead p { float: left; clear: left; width: 16.666em/* 200px */; padding: .666em/* 8px */ 0 1em/* 12px */; border-width: .166em/* 2px */ 0 .25em/* 3px */; border-style: solid; border-color: #98a9c5; }
#masthead p strong { display: block; margin-top: .416em/* 5px */; }


/*------------------------------------------------------------
    Nav
------------------------------------------------------------*/
/*  Must have ``left`` property for IE’s.
    Setting ``position`` let’s us set ``z-index`` to pull the nav above the 
    neighboring ``#masthead`` content. 3663 is arbitrary (I like the number :)*/
#nav { position: absolute; z-index: 3663; top: 0; left: 0; width: 100%; height: 2.1875em/* 35px */; padding: 0; background: #e9e9ef url(../img/bg-nav.jpg) repeat-x bottom; line-height: 0; }
/* Take care of primary content while at it. */
#nav ul, #primary { margin: 0 0 0 15em/* 240px */; padding: 0; }
#nav li { display: inline; position: top; margin: 0; padding: 0; }
#nav a { display: block; float: left; margin: 0; padding: .64em/* 8px */ 1.666em/* 20px */; color: #98a9c5; text-decoration: none; font-size: .75em/* 12px */; }
#nav a:hover, 
#nav a:focus { color: #be2329; }
#nav a:active { text-shadow: 0 0 1.5em #304a7e; }
#nav a:hover, 
#nav a:focus, 
.home #nav-home, 
.memories #nav-memories, 
.reviews #nav-reviews, 
.media #nav-media, 
.about #nav-about { padding-top: .4em/* 4-5px */; border-top: .25em/* 3px */ solid #c1cbdb; }


/*------------------------------------------------------------
    Content
------------------------------------------------------------*/
#primary { /* layout set with nav above. */ }
#container01 ul.linkage li, #container01 ul.options li { margin-top: 0; margin-bottom: .625em/* 10px */; padding-top: 0; padding-bottom: 0; line-height: 1em; }
.options { margin-top: 0; padding: .625em .75em 0 0; background-color: #fff; border: 1px dotted #c1cbdb; }
#secondary { position: absolute; top: 18.5em/* ?px */; width: 16.666em/* 200px */; }
#download-chapter a, #buy-book a { display: block; margin-bottom: .625em/* 10px */; padding: 0 14px; background: transparent url(../img/icon-pdf-16x16.gif) no-repeat 91% 50%; font-weight: normal; line-height: 1.5em; }
#buy-book a { margin-bottom: .625em/* 10px */; background-image: none; }
#buy-book-d a { margin-bottom: 2.5em/* 30px */; background-image: none; }
.sub-nav a { display: block; color: #be2329; }


/*------------------------------------------------------------
    Footer
------------------------------------------------------------*/
/* ``height`` set in ie-screen.css. */
#footer { min-height: 115px; margin-top: 5em/* 80px */; background: #546d9a url(../img/bg-footer.jpg) repeat-x center top; color: #2b3b63; }
#footer div { padding-top: 25px; }
#footer p { margin-left: 24em/* 240px */; }
#footer ul { float: left; width: 20em/* 200px */; }
#footer li { display: inline; }
#footer li a { padding-right: 1em; }
#footer li:last-child a { padding-right: 0; }
#footer a { color: #001c63; text-decoration: none; }
#footer a:hover, #footer a:focus { text-decoration: underline; }


/*------------------------------------------------------------
    Forms
------------------------------------------------------------*/
form { width: 25em; max-width: 100%; }
fieldset { margin: 1.25em/* 20px */ 0; border: 0 none; }
label { display: block; margin-top: .75em/* 12px */; color: #666; }
label.chkBoxLbl { display: inline; }
form p, form small { color: #a0a9b9; font-size: .75em/* 12px */; }
form small { display: block; float: right; margin-top: -1.25em/* 20px */; }
input, textarea { width: 100%; padding: .375em/* 6px */; border: 1px solid #c1cbdb; }
input[type="checkbox"], #id_read_docs { width: auto; padding: 0; }
textarea { padding-bottom: 1em/* 16px */; }
input:focus, textarea:focus { border-color: #304a7e; }
select { float: left; }
input.inpSbt { float: right; width: auto; margin-right: -.75em/* 12px */; padding: .625em/* 10px */ .9375em/* 15px */; background: #fff url(../img/bg-nav.jpg) repeat-x; color: #304a7e; font-weight: bold; border: 1px solid #c1cbdb; }
input.inpSbt:active { color: #a0a9b9; }
.errorlist { margin: 1.25em/* 20px */ 0 0; list-style-image: url(../img/li-down.gif); color: #a82e32; font-size: .75em/* 12px */; font-weight: bold; }
.errorlist li { margin-bottom: 0; line-height: 1em; }
#memoryFrm .inpSbt { margin-top: -1.875em/* 30px */; }
#honeypot { display: none; }



/*+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=
    Sectional
+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=*/


/*------------------------------------------------------------
    Reviews
------------------------------------------------------------*/
#reviews, #memories { margin-left: 0; list-style: none; }
#reviews li, #memories li { display: block; margin-left: 0; padding-bottom: 1.25em/* 16px */; }
.meta, .paging { margin-top: -1.166em/* -14px */; padding: 0 0 .5em/* 6px */; color: #a0a9b9; font-size: .75em/* 12px */; }
.meta { border-bottom: 1px solid #c1cbdb; }
.meta a, .paging a { color: #a0a9b9; }
.meta a:hover, .meta a:focus, .paging a:hover, .paging a:focus { color: #be2329; }
.paging { padding-top: 1em; text-align: center; }
.paging a { text-decoration: none; }


/*------------------------------------------------------------
    About › FAQ
------------------------------------------------------------*/
#faq.anim dt { cursor: pointer; }