/*
** CSS file for the home page.  Contains definitions specific to
** this page or which overrides definitions from console-common.css.
**
** $Log: console-main.css,v $
** Revision 1.6  2014/04/27 13:05:17  mikej
** Added background color so large screens don't have a white bg.
**
** Revision 1.5  2010/01/09 23:43:41  mikej
** Added a button-related comment.
**
** Revision 1.4  2010/01/09 23:09:11  mikej
** Improved counter digits.
**
** Revision 1.3  2009/05/06 12:33:54  mikej
** Repositioned CRT handles for new screen size.
**
** 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-main.css,v 1.6 2014/04/27 13:05:17 mikej Exp $
*/


@import url("console-common.css");

body
{
    background-color: #566f77;
    background-image: url("console-main-background.jpg");
    background-repeat: no-repeat;
}


/*
**
** 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
{
    width: 489px;

    /*
    ** For the main page, we know that the rows of buttons are
    ** 5 * 101px tall, so we'll add a bit of padding (but still
    ** try to keep the text of the screen in the top 600px of
    ** the screen, including a guess for the size of the top of
    ** the browser window.
    */
    padding-top: 30px;
}

.crt img.handle
{
    /*
    ** We know that the screen is going to be fairly short (almost
    ** certainly using our min-height), so position the handles
    ** fairly high up.
    */
    padding-top: 45px;
}

.crt div.screen
{
    width: 385px;
}

.crt div.screen div.header
{
    background-image: url("console-main-crt-hdr.jpg");
}

.crt div.screen div.center
{
    min-height: 220px;
}

.crt div.screen div.center div.text span.quote
{
    font-size: x-large;
    font-style: italic;
}

.crt div.screen div.center div.text p.author
{
    font-size: medium;
    text-align: right;
}

.crt div.screen div.center div.text p.citation
{
    font-size: medium;
    text-align: right;
    padding-left: 20%;
}

.crt div.screen div.footer
{
    background-image: url("console-main-crt-ftr.jpg");
}


/*
**
** Definitions for the navigation area (the buttons)
**
*/
.nav-site
{
    width: 257px;    /* Firefox 2.x seems to want an extra px */
}


/*
**
** Definitions for the page footer, which contains the image counters.
**
** Recall that .page-footer is "position: relative", so we can add
** all of these extra divs to be "position: absolute".
**
** We create an overall "counters" div, and then inside of it we place
** relics-images and supplemental-images divs.
**
*/
.page-footer div.counters
{
    position: absolute;
    background: url("console-pic-counters.jpg") top left no-repeat;
    height: 111px;
    width:  686px;
    top:     55px;
    left:   110px;
}

.page-footer div.relics-images
{
    position: absolute;
    top:   48px;
    left: 135px;
}

.page-footer div.supplemental-images
{
    position: absolute;
    top:   48px;
    left: 552px;
}

/*
** The digits are implemented as "css sprites".  We set up to hide
** all but a single digit's worth of image here in the common section,
** and then we have per-digit sections for the offset.
*/
.digit-0, .digit-1, .digit-2, .digit-3, .digit-4,
.digit-5, .digit-6, .digit-7, .digit-8, .digit-9
{
    background: url("digits-all.jpg") top left no-repeat;
    overflow: hidden;
    height: 20px;
    width:  16px;
    padding-right: 11px;
}

.digit-0 { background-position: 0px    0px; }
.digit-1 { background-position: 0px  -20px; }
.digit-2 { background-position: 0px  -40px; }
.digit-3 { background-position: 0px  -60px; }
.digit-4 { background-position: 0px  -80px; }
.digit-5 { background-position: 0px -100px; }
.digit-6 { background-position: 0px -120px; }
.digit-7 { background-position: 0px -140px; }
.digit-8 { background-position: 0px -160px; }
.digit-9 { background-position: 0px -180px; }