/** OVERALL LAYOUT **/

/** Note: the page is coded to initially have fixed dimensions, e.g. 1000x500.
    When the Javascript loads, it will resize the page to fill the browser. */

html, body
{
    min-width: 680px;   /* based on 750px #doc min-width + 20px body left-padding */
    min-height: 440px;  /* based on 440px #doc min-height */
}

body
{
    padding-left: 20px;
}

#doc
{
    width: 960px;   /* initial, JS will update to be 100% */
    height: 640px;  /* initial, JS will update to be 100% */
    margin: auto;
    min-width: 660px;
    min-height: 440px;
}

#hd
{
    height: 80px;   /* the height of the Seadragon logo image + title text */
    padding: 10px 0;
}

#bd
{
    height: 500px;  /* initial, based on #doc - #hd - #ft, JS will update */
}

#ft
{
    height: 20px;   /* arbitrary hardcoded value based on 11px font size and buffer */
    padding: 10px 0;
}

#thumbs
{
    float: right;
    overflow-x: hidden; /* TEMP hide horizontal scrollbar in FF during active links */
    overflow-y: auto;   /* show scrollbar if necessary, but vertical only */
    margin-left: 10px;  /* ideally should match #doc left/right padding */
    padding-right: 12px;    /* whether or not there's a scrollbar */
    width: 128px;   /* hardcoded based on .thumb and possible 16px scrollbar */
    height: 100%;   /* since no border or padding, this is fine, otherwise
                       this should be px initially and be updated via JS */
}

#viewer
{
    float: left;
    border-width: 1px;
    width: 808px;   /* initial, based on 100% - #thumbs - 2*border, JS will update */
    height: 398px;  /* initial, based on 100% - #info - 2*border, JS will update  */
    /** TEMP warning: don't add any padding here, that'll mess up current JS */
}

#info
{
    float: left;
    overflow-x: hidden; /* TEMP hide horizontal scrollbar in FF during active links */
    overflow-y: auto;   /* show scrollbar if necessary, but vertical only */
    margin-top: 12px;   /* ideally should match #doc top/bottom padding */
    width: 810px;   /* initial, based on 100% - #thumbs - 2*border, JS will update */
    height: 88px;   /* hardcoded and customizable */
    /** TEMP warning: don't add left/right padding here, that'll mess up current JS */
}


/** TEXT AND COLORS **/

body
{
    background: url(../images/page-background.png) no-repeat top left;
    font-family: "Segoe UI";    /* fallback path already provided by YUI */
}

a:link, a:visited
{
    color: #ec5225;     /* as per Shepherd's design */
    text-decoration: none;
}

a:hover, a:active
{
    color: #ff8749;     /* as per Shepherd's design */
    text-decoration: underline;
}

#nav
{
    /** this refers to disabled "prev"/"next" and separator pipe "|" */
    color: #888;
}

#viewer
{
    border-color: black;
    border-style: solid;
    background-color: black;
    color: white;   /* for error messages, etc. */
}

.thumb-selected
{
    background: url(../images/thumb-sel-background.png) no-repeat center center;
}


/** HEADER **/

#hd h1
{
    float: left;
}

#hd ul#header-links
{
    float: right;
    margin-top: 2em;
    margin-right: 36px;     /* arbitrary value, looks aligned with the the selected thumbnail */
    font-size: 93%;         /* YUI Fonts, translates to 12px */
    font-weight: bold;
    text-transform: uppercase;
}

#hd ul#header-links li
{
    display: inline;
    margin-left: 2em;
}

#hd ul#header-links li a
{
    text-decoration: none;
}

#hd ul#header-links li.selected a
{
    color: #7c7c7c;
}

#hd h2
{
    clear: both;
    padding-top: 20px;
}

#hd h2 a
{
    font-weight: bold;
    text-transform: uppercase;
}


/** FOOTER **/

#ft
{
    font-size: 85%;
    padding-right: 36px;     /* arbitrary value, looks aligned with the the selected thumbnail */
    text-align: right;
}

#ft ul#footer-links
{
    display: inline-block;
    *display: inline;       /* HACK for IE7 and IE6, which don't handle inline-block properly */
}

#ft ul#footer-links li
{
    display: inline;
    margin-left: 5px;
    padding-right: 5px;
    border-right: 1px solid #a6a6a6;
}

#ft #copyright
{
    display: inline-block;
    *display: inline;       /* HACK for IE7 and IE6, which don't handle inline-block properly */
    background: url(../../../images/site/MSLogo.png) no-repeat center right;
    padding-right: 70px;    /* 60px logo + 10px padding */
}

#ft *
{
	color:#a6a6a6;
}


/** NOSCRIPT CASE **/

noscript
{
    color: #c00;
}

noscript a:link, noscript a:visited, noscript a:hover, noscript a:active
{
    color: #40f;
    text-decoration: underline;
}

noscript img
{
    opacity: 0.5;
    filter: alpha(opacity=5);
}

#viewer noscript
{
    /** the viewer has a black background, but we want our images to fade over
        white instead. this requires the noscript elmt to fill the viewer.  */
    display: block;
    width: 100%;
    height: 100%;
    background-color: white;
}


/** THUMBNAIL DETAILS **/

#thumbs 
{
    /** middle-aligning would be nice, but it doesn't seem to be working. */
    display: table-cell;
    vertical-align: middle; /* only works for table cells */
}

.thumb, .thumb-selected
{
    display: block;     /* to stack vertically */
    width: 96px;        /* the actual size of the thumbnail images */
    margin: 0px auto 4px;   /* the auto centers the thumbnails */
}


/** INFO DETAILS **/

#info
{
    /** TEMP warning: don't add any padding here, that'll mess up current JS */
}

#nav
{
    float: right;
    font-size: 138.5%;  /* YUI Fonts CSS: 18px */
    font-weight: bold;
    white-space: nowrap;
    margin-right: 1px;  /* TEMP to give active links breathing room, to align
                           with inside of viewer, and since we can't put
                           padding inside #info currently */
}

#prev:before
{
    content: "← ";
}

#next:after
{
    content: " →";
}

#title
{
    font-size: 138.5%;  /* YUI Fonts CSS: 18px */
    font-weight: bold;
    margin-left: 1px;   /* TEMP to align with inside of viewer, and since we
                           can't put padding inside #info currently */
}

#desc
{
    font-size: 116%;    /* YUI Fonts CSS: 15px */
    margin-top: 10px;
    margin-left: 1px;   /* TEMP to align with inside of viewer, and since we
                           can't put padding inside #info currently */
}