@import url("960_wide.css");    /* 960 grid classes, modified for wider margins */
@import url("content.css");     /* Generic content styles */
@import url("art.css");         /* Specific section layouts and art illustrations */

body, html  { margin: 0; padding: 0; }


/* Content region styles */
/* --------------------- */

#content    { padding: 40px 0 60px; }

#leading-capital
{
    font-size: 1800%;
    display: block;
    line-height: 1;
    margin: -100px 0 -0.1em -0.05em;
    color: black;
    text-transform: uppercase;
    font-family: "Georgia", serif;
}

#introduction
{
    font-family: "Museo", "Georgia", serif;
    font-weight: 300;
    font-size: 225%;
    color: #aeaeae;
    line-height: 1;
}
/* Lift em-text above the rest of the text so that the brighter em'd glyphs will overlap the paler ones thanks to the low line-height. */
#introduction em    { position: relative; z-index: 1; }
#introduction p     { margin-bottom: 0.5em; }


/* Footer region styles */
/* -------------------- */

#footer
{
    background: black;
    color: white;
    padding-bottom: 40px;
}


#footer a:link      { color: #77c043; }
#footer a:visited   { color: #53862f; }
#footer a:hover,
#footer a:active,
#footer a:focus { color: #365e1a; }

#footer em  { color: white; }
#footer h1,
#footer h2,
#footer h3  { color: #365e1a; text-transform: uppercase; letter-spacing: -0.1em; }

#footer h1 em,
#footer h2 em,
#footer h3 em   { position: relative; z-index: 1; } /* Allows brighter em-text to overlap paler glyphs with letter-spacing */

#footer blockquote p:before,
#footer blockquote p:after      { color: #365e1a; }
#footer .excerpt cite           { color: #365e1a; }


/* Page metadata */
/* ------------- */

#metadata       { padding: 20px 0 0; text-transform: lowercase; }

#breadcrumbs ul { padding-left: 0; list-style: none; }
#breadcrumbs li { float: left; padding-left: 30px; background: url("../img/chevron.png") 10px 50% no-repeat; }
#breadcrumbs li:first-child { padding-left: 0; background: transparent; }

#tags           { float: right; text-align: right; }
#tags ul        { padding-left: 0; list-style: none; display: inline; }
#tags li        { display: inline; }
#tags a         { padding: 5px; }


/* Search form */
/* ----------- */

#site-search
{
    padding: 40px 0 0;
    line-height: 1;
}
#site-search p
{ 
    margin-right: -6px;
    background: #264212 url("../img/arrow_right_black_negative.png") 100% 50% no-repeat;
    -webkit-transition: background-color 0.15s ease-out;
}
#site-search p:hover,
#site-search p:focus
{
    background-color: #53862f;
    text-shadow: #456f27 0 1px 0;
}

#site-search input,
#site-search button
{
    font-size: 17px;
    font-family: Georgia, Times, "Times New Roman", serif;
    font-weight: normal;
    
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

#site-search input
{
    background-color: white;
    padding: 4px 0;
    text-indent: 5px;
    width: 440px;
}

#site-search button
{
    background: transparent;
    text-shadow: inherit;
    text-transform: lowercase;
    text-align: right;
    color: white;
    cursor: pointer;
    background: url("../img/arrow_right_white.png") 0 50% no-repeat;
}
#site-search button span    { padding: 3px 26px 3px 40px; }


/* Footer navigation */
/* ----------------- */

#navigation         { padding: 40px 0 0; }
#navigation h3      { white-space: nowrap; margin: 0 0 20px; }
#navigation h3 em   { margin-right: -0.2em; }
#navigation ul      { list-style: none; padding-left: 0; }


/* Contact details */
/* --------------- */

#navigation-contact ul  { color: #53862f; }
#navigation-contact li  { white-space: nowrap; }
#navigation-map img     { -webkit-transition: opacity 0.2s ease-out; }
#navigation-map:hover img,
#navigation-map:active img  { opacity: 0.8; }

/* Logo and copyright */
/* ------------------ */


#logo, #copyright   { text-align: center; }
#logo   { margin: 80px 0 20px; }
#copyright
{
    color: #365d19;
    font-style: italic;
}