/*
** CSS file containing layout common to all panel-themed pages.
**
** $Log: panel-common.css,v $
** Revision 1.5  2014/03/21 22:38:47  mikej
** Added a double-quote to a url(), so that find-unused-pics can
** properly process it.
**
** Revision 1.4  2011/08/13 16:10:28  mikej
** Updated for https links.
**
** Revision 1.3  2010/10/06 00:12:03  mikej
** Tweaked some blockquote stuff.
**
** Revision 1.2  2010/09/18 20:17:10  mikej
** Added external link markup.
**
** Revision 1.1  2010/09/17 02:18:05  mikej
** Initial revision
**
** $Id: panel-common.css,v 1.5 2014/03/21 22:38:47 mikej Exp $
*/

body
{
    width: 896px;
    background-color: #949ba1;

    /* chosen for their resemblance to the LM panel lettering */
    font-family: "Tw Cen MT", "Trebuchet MS", Calibri, Arial, sans-serif;
    color: white;

    /* Center the page horizontally in the browser. */
    margin: 0 auto;
}


/*
** The "nav-home" and "nav-links" divs are designed to be displayed
** side by side within the "navigation" div.  The only non-background
** images in "navigation" are the transparent links over the
** link/no-link switches.
**
** The width of the body is 896, so nav-home will 180px with a 16px
** right padding to separate it from the 700px nav-links.
*/

.navigation
{
    text-align: center;
    text-transform: uppercase;
}

.navigation div.header
{
    background: url("panel-hdrs.jpg") no-repeat;
}

.navigation img
{
    height: 50px;
    width:  44px;
    background: url("panel-link.jpg") no-repeat;
}

/* Title of the navigation link groups. */
.navigation span.title
{
    font-size: 1.2em;
    font-weight: bold;

    /* blot out background image */
    background-color: #949ba1;
    padding: 0px .5em;
}

.navigation span.link a
{
    float: left;
    text-decoration: none;
}

.navigation span.link a img
{
    border-width: 0;
    background-position: 0px 0px;
}

/*
** We add yet another span, because in HTML 4.01 strict, the image
** gets an underline as well as the text.
*/
.navigation span.link a:hover span.text
{
    text-decoration: underline;
}

.navigation span.link a:hover img
{
    background-position: 0px -50px;
}

.nav-home span.link a:active img
{
    background-position: 0px -50px;
}


/*
** Definitions/overrides for the HOME nagivation group.
*/
.navigation div.nav-home
{
    width: 180px;
    float: left;
    padding-right: 16px; /* separate from other nav switch grouping */
}

.navigation div.nav-home div.header
{
    background-position: 0px 0px;
}

.navigation div.nav-home span.link a
{
    /* So the link is centered within div. */
    width: 100%;
}


/*
** Definitions/overrides for the "NAVIGATION" navigation panel.
*/
.navigation div.nav-links
{
    width: 700px;
    float: left;
}

.navigation div.nav-links div.header
{
    background-position: -180px 0px;
}

.navigation div.nav-links span.no-link img
{
    background-position: 0px -100px;    /* for CSS sprites */
}


/*
** Definitions for the page itself.
*/
.page-content
{
    clear: both;
    padding-top:    2em;    /* space between upper nav panel */
    padding-bottom: 2em;    /* space between lower nav panel */
}

.page-content div.header
{
    background: url("panel-hdrs.jpg") -880px center no-repeat;
    text-align: center;
}

.page-content div.header h1
{
    max-width: 600px;
    margin: 0px auto 0px;
    text-transform: uppercase;

    /* blot out background image */
    display: inline-block;
    background-color: #949ba1;
    padding: 0px .5em;
}

.page-content p, h2, h3, h4, h5, h6
{
    /*
    ** Indent slightly so text is inside the panel divider.  Note
    ** that p.image relies on these values.
    */
    padding-left:  15px;
    padding-right: 15px;
}

.page-content a[href ^='http://'], a[href ^='https://']
{
    padding-right: 17px;
    background: url("panel-external-link.jpg") no-repeat center right;
}

.bquote-header
{
    width: 750px;    /* table.pic-info below copies this value */
    height: 20px;
    background: url("panel-bquote.jpg") 0px 0px no-repeat;
}

.bquote-footer
{
    width: 750px;
    height: 20px;
    background: url("panel-bquote.jpg") 0px -20px no-repeat;
}

.bquote-contents
{
    /* indent slightly inside header/footer */
    padding-left:  15px;
    padding-right: 15px;
}

blockquote
{
    margin-left:  73px;    /* table.pic-info below copies this value */
    margin-right: 73px;
}

/* Main image on the page (picture page or info page) */
p.image
{
    text-align: center;

    /* Undo "page-content" paragraph padding. */
    margin-left:  -15px;
    margin-right: -15px;
}

.footer
{
    /*
    ** Some browsers don't use a status bar at the bottom, making
    ** selecting links problematic, so we put a bit an empty footer
    ** div at the bottom to allow for this.
    */
    clear: both;
    height: 20px;
}