/*
** CSS file containing definitions for the Misson Control console
** html pages.
**
** $Log: console-common.css,v $
** Revision 1.7  2010/03/19 01:21:43  mikej
** Changed link colors back.
**
** Revision 1.6  2010/01/12 00:07:23  mikej
** Color changes to match new CRT graphics.
**
** Revision 1.5  2010/01/09 23:46:28  mikej
** Improved button CSS.
**
** Revision 1.4  2010/01/09 23:14:35  mikej
** Updated .page-footer, to match console-main.css 1.4.
**
** Revision 1.3  2009/07/25 21:03:26  mikej
** Tweaked the left and right padding in the CRT text screen.
**
** Revision 1.2  2009/05/06 12:27:18  mikej
** Different solution to "gap between CRT header/footer and center
** portion" problem that should also work with buggie IE7.
**
** Revision 1.1  2009/05/03 18:43:49  mikej
** Initial revision
**
** $Id: console-common.css,v 1.7 2010/03/19 01:21:43 mikej Exp $
*/


body
{
    background-position: top left;
}

/*
**
** The page is divided up into three areas:
** - The header (top of console, plus the plaque).
** - The center (repeating middle of console, with most of the content).
** - The footer (bottom of console, plus the counters [for main] or the
**   site-logo [for aux pages]).
**
** The center is by far the most complicated.
**
*/
.page-header
{
    background-image: url("console-hdr.png");
    background-position: top left;
    background-repeat: no-repeat;
    height: 171px;

    /*
    ** Leave room for the plaque and a bit of the background
    ** above the plaque.
    */
    margin-top: 60px;
}

.page-center
{
    background-image: url("console-repeat.png");
    background-position: top left;
    background-repeat: repeat-y;
    padding-left: 65px;

    /*
    ** We need to set a width of the center portion, so that if the
    ** window's width is too small for both the CRT and the buttons,
    ** we get a scrollbar instead of having the buttons move to the
    ** next line.
    **
    ** The right edge of the console is 869px from the left edge
    ** of the screen, but we have the 65px padding-left above, so
    ** we use a min-width of 804px.
    */
    min-width: 804px;
}

.page-footer
{
    position: relative;
    background: url("console-ftr.png") top left no-repeat;
    height: 312px;
    clear: both;
}


/*
**
** Definitions for the plaque in the page header
**
** There's the blank plaque, and then we place the logo (in a link)
** and the caption for this page.
*/
.page-header div.plaque
{
    float: left;
    width: 509px;
    margin-left: 90px;
    margin-top: -65px;
}

.page-header div.plaque img.background
{
    z-index: 1;

    /*
    ** We display this as a block element so that the digit images
    ** will appear at the beginning of the next line, to simplify
    ** positioning of those digits.
    */
    display: block;
}

.page-header div.plaque a:link
{
    text-decoration: none;
}

.page-header div.plaque div.logo
{
    margin-top: -95px;
    margin-left: 55px;
}

.page-header div.plaque div.logo img
{
    border-width: 0;
    z-index: 2;
}

.page-header div.plaque div.caption
{
    margin-top: -52px;
    margin-left: 130px
}

.page-header div.plaque div.caption img
{
    z-index: 2;
}


/*
**
** Definitions contained in the center of the page, by far the
** most complicated area:
**
** For the main page, we have the following:
** - The CRT on the left, which in turn is composed of
**   - The left handle.
**   - The screen, which in turn is composed of
**     - The header
**     - The center, which has the repeating background plus the
**       text.
**     - The footer
**   - The right handle.
** - The site navigation area (buttons)
** - A footer.  Since the CRT and site-nav areas are floats, the
**   background image won't be shown unless there's some non-float
**   content somewhere.
**
*/
.crt
{
    float: left;
}

.crt img.handle
{
    float: left;
    width: 32px;
    display: block;
    padding-left: 10px;
    padding-right: 10px;
}

.crt div.screen
{
    float: left;
}

.crt div.screen div.header
{
    background-position: top left;
    background-repeat: no-repeat;
    height: 33px;
}

.crt div.screen div.center
{
    background-color: #0b140f;
}

.crt div.screen div.center div.text
{
    /*
    ** Must set these borders to prevent the IE7 "collapsing margins" bug
    ** from causing a gap between the center portion and the header/footer.
    */
    border-top: 1px solid #0b140f;
    border-bottom: 1px solid #0b140f;
    padding-left: 12px;
    padding-right: 12px;
    color: white;
    font-size: large;
}

.crt div.screen div.center div.text a:link
{
    /*
    ** The standard blue doesn't really stand out on the
    ** brownish background of the CRT.
    */
    color: #2dd5e4;
}

.crt div.screen div.center div.text a:visited
{
    /*
    ** The standard purple doesn't really stand out on the
    ** brownish background of the CRT.
    */
    color: #fb72ef;
}

.crt div.screen div.footer
{
    background-position: top left;
    background-repeat: no-repeat;
    height: 33px;
}


/*
**
** Definitions for the navigation area (the buttons)
**
*/
.nav-site
{
    float: left;
}

.nav-site a.link
{
    float: left;
    height: 101px;
    overflow: hidden;
    text-align: center;
    text-transform: uppercase;
    color: black;
    font-family: sans-serif;
    font-weight: bold;
    /*
    ** In order to get a consistent layout of the text across browsers
    ** when there's a two-line label on the button, need to set both
    ** the font-size and the line-height to pixel values.
    */
    font-size: 14px;
    line-height: 19px;
}

.nav-site a.link img
{
    height: 101px;
    width:  128px;
    border-width: 0;
    background: url("console-link-all.jpg") top left no-repeat;
    background-position: 0px 0px;    /* for CSS sprites */
}

/*
** Need another span because with HTML 4.01 strict, the image
** gets an underline as well as the text.
*/
.nav-site a.link span.text
{
    text-decoration: none;
    position: relative;
    top: -73px;    /* if modified, also modify a:active below */
}

.nav-site a.link:hover span.text
{
    text-decoration: underline;
}

.nav-site a.link:hover img
{
    background-position: 0 -101px;    /* CSS sprite */
}

.nav-site a.link:active img
{
    background-position: 0 -202px;    /* CSS sprite */
}

.nav-site a.link:active span.text
{
    /*
    ** Shift 3px down and to the right, to match the "active"
    ** image.  Reference "span.link a span.text" above for the
    ** "top" value.
    */
    top: -70px;
    left: 3px;
}

.page-center div.center-footer
{
    background-image: url("console-repeat.png");
    background-position: top left;
    background-repeat: no-repeat;
    height: 1px;

    /*
    ** We're inside the page-center <div>, which has a 65px indent.
    */
    margin-left: -65px;
    clear: both;
}