/* Overall layout */

#doc
{
    /* YUI Grids sets #doc width to ~750px */
    width: 771px;   /* for background images of #hd, #bd and #ft */
}

#hd
{
    /** 47px side padding =
            27px background image shadow +
            14px whitespace inside background image +
            6px shadow around viewer.   */
    padding: 10px 47px 0px;
    min-height: 44px;   /* TEMP HACK ensure full bg image is shown: 54px minus 10px padding-top */
}

#bd
{
    /** 47px side padding =
            27px background image shadow +
            14px whitespace inside background image +
            6px shadow around viewer.
        note that the viewer needs those 6px on each side, so it'll negate
        those explicitly.   */
    padding: 0px 47px;
    min-height: 503px;  /* TEMP HACK ensure page is tall enough for body bg image: 608px minus #hd and #ft */
}

#ft
{
    /** 47px side padding =
            27px background image shadow +
            14px whitespace inside background image +
            6px shadow around viewer    */
    padding: 0px 47px 20px;
    min-height: 51px;   /* TEMP HACK ensure full bg image is shown: 71px minus 2*20px padding top and bottom */
}


/* Overall text */

body
{
	font-family: Segoe UI, Arial, Helvetica, sans-serif;   
}

a:link
{
    text-decoration: none;
}

a:visited
{
    text-decoration: none;
}

a:hover
{
    text-decoration: underline;
}

a:active
{
    text-decoration: underline;
}

em
{
    font-style: italic;
}

strong
{
    font-weight: bold;
}

.nowrap
{
    white-space: nowrap;
}


/* Overall colors and images */

html
{
    background: white url(../images/site/bgPattern_whole_bleed.jpg) no-repeat scroll center top;
}

#doc
{
    /** we'd ideally be able to set the background image here, so that #hd, #bd
        and #ft could have solid white as their background color (while the
        background image was loading, or if it failed to load) instead of
        transparent, but because the image is split into three parts, we're
        forced to specify the parts on #hd, #bd and #ft directly.   */
}

#hd
{
    background: transparent url(../images/site/bigBox_top.png) no-repeat scroll center bottom;
}

#bd
{
    background: transparent url(../images/site/bigBox_mid.png) repeat-y scroll center center;
}

#ft
{
    background: transparent url(../images/site/bigBox_btm.png) no-repeat scroll center top;
}

body, input
{
    color: black;       /* ASEEM: my original color */
    color: #868686;     /* ASEEM: color spec'd by design */
    color: #444;        /* ASEEM: middle ground test */
}

a
{
    color: #f40;        /* ASEEM: my original color */
    color: #ec713a;     /* ASEEM: color spec'd by design */
    color: #f40;        /* ASEEM: middle ground test */
}

.error
{
    color: #f00;
    font-weight: bold;
}


/* Header */

#hd
{
    zoom: 1;    /* TEMP HACK this is ie-only, should go in an ie-only stylesheet */
}

#hd:after
{
    /** self-clearing since the h1 and h2 are floated. */
    content: ".";
    clear: both;
    display: block;
    height: 0px;
    visibility: hidden;
}

#hd h1
{
    display: block;
    float: left;
    width: 162px;   /* the width and height of the image so that it takes... */
    height: 44px;   /* ...up the same space before and after it's loaded. */
}

#hd h1 a
{
    /** these rules just help make the img's alt text look somewhat like the
        actual img. positioning is tricky so it doesn't account for that.   */
    color: black;
    font-size: 197%;    /* based on YUI Fonts CSS, translates to 26px */
    font-style: italic;
}

#hd h2
{
    display: block;
    float: right;
    width: 114px;
    height: 44px;
    position: relative;
    top: -20px;
}

#hd h2 a
{
    /** these rules just help make the img's alt text look somewhat like the
        actual img. positioning is tricky so it doesn't account for that.   */
    color: gray;
    font-size: 85%;     /* based on YUI Fonts CSS, translates to 11px */
    font-style: italic;
    text-align: right;
}

#hd img
{
    border: none;
}

#top-nav
{
	font-size:12px;
	text-align:right;
	text-transform: uppercase;
	float: right;
    font-weight: bold;
    padding-top: 25px;
}

#top-nav a, #top-nav a:visited, #top-nav a:active
{
	margin-left:13px;
	text-decoration:none;
}

#top-nav a:hover
{
    color:#FF8749;
}

.top-nav-highlighted a, .top-nav-highlighted a:visited, .top-nav-highlighted a:active
{
    color: #7c7c7c;
}

#top-nav .top-nav-highlighted a:hover
{
    color: #7c7c7c;
}

/* Footer */

#ft
{
    font-size: 85%;     /* based on YUI Fonts CSS, translates to 11px (8pt) */
    color: #888;        /* ASEEM: my original color */
    color: #a6a6a6;     /* ASEEM: color spec'd by design */
    color: #888;        /* ASEEM: middle ground test */
}

#ft li
{
    display: inline;
    /* option 1: */
    /*
    border-left: 1px solid #b40;
    padding-left: 0.5em;
    padding-right: 0.5em;
    margin-bottom: 0.5em;
    */
    /* option 2: */
    padding-left: 0.67em;
}

#ft li:first-child
{
    border-left: none;
    padding-left: 0;
}

#ft a
{
	color:#a6a6a6;
}

.footnote
{
    margin-top: 35px;
	float:right;
	font-size:11px;
	color:#a6a6a6;
}

.footnote a, .footnote a:visited, .footnote a:active 
{	
	margin-left:5px;
	padding-right:5px;
	border-right:1px solid #a6a6a6;
	color:#a6a6a6;
}

.footnote a:hover
{
	color: #FCAD36;
}

#MSLogo
{
    margin-top: 35px;
	margin-left: 10px;
	float:right;
}

/* Noscript text */

noscript div
{
    /** desired effect: 1em margin top and bottom. but that breaks the header
        edges connecting to the body edges. so we'll use position relative. */
    position: relative;
    top: 1em;
    margin-bottom: 2em;
    padding: 0.5em;
    background-color: #fcc;
    border: 1px dashed red;
}

noscript p
{
    margin: 0.5em;
    font-size: 100%;
}

noscript a
{
    color: blue;
    font-weight: bold;
}


/* Common component: Seadragon viewer */

.viewer-container
{
    /** the inner width of #bd should be exactly 689px, which is also the exact
        width of the viewer's background (shadow) image. we also need 6px of
        padding on each edge, so we'll specify the viewer's width and height,
        which is 12px less than the background image's width and height.    */
    display: block;
    width: 677px;
    height: 329px;
    padding: 6px;
    margin-left: -6px;  /* to negate regular 6px padding in #bd */
    background: transparent url(../images/site/viewerShadow.png) no-repeat scroll center center;
}

.viewer
{
    display: block;
    border: 1px solid transparent;  /* color is set in the colors section */
    width: 675px;   /* subtracting 1px from both left and right for border */
    height: 327px;  /* subtracting 1px from both top and bottom for border */
    border-color: black;
    background-color: black;
    color: white;
}


/* Common component: Create button */

.create-button
{
    width: 105px;   /* the width and height of the image so that it takes... */
    height: 34px;   /* ...up the same space before and after it's loaded. */
    padding: 0px;
    border-width: 0px;
}


/* Common component: Textboxes (using divs) */
/* Note: width of inner input needs to be explicitly specified. */

div.textbox-large, div.textbox-small
{
    zoom: 1;    /* TEMP HACK this is ie-only, should go in an ie-only stylesheet */
}

div.textbox-large:after, div.textbox-small:after
{
    /** self-clearing since the children are floated. */
    content: ".";
    clear: both;
    display: block;
    height: 0px;
    visibility: hidden;
}

div.textbox-large
{
   height: 36px;    /* the height of the before, during and after background images. */
}

div.textbox-small
{
   height: 24px;    /* the height of the before, during and after background images. */
}

div.textbox-large div.before, div.textbox-small div.before
{
    float: left;
    width: 6px; /* the width of this background image. also equivalent to left padding. */
    height: 100%;
    background: transparent none no-repeat scroll right center;
}

div.textbox-large div.before
{
    background-image: url(../images/site/textBox_lrg_L.png);
}

div.textbox-small div.before
{
    background-image: url(../images/site/textBox_sml_L.png);
}

div.textbox-large div.after, div.textbox-small div.after
{
    float: left;
    width: 6px; /* the width of this background image. also equivalent to right padding. */
    height: 100%;
    background: transparent none no-repeat scroll left center;
}

div.textbox-large div.after
{
    background-image: url(../images/site/textBox_lrg_R.png);
}

div.textbox-small div.after
{
    background-image: url(../images/site/textBox_sml_R.png);
}

div.textbox-large div.during
{
    float: left;
    /* automatic width based on textbox inside */
    padding: 6px 0px;
    background: transparent none repeat-x scroll center center;
}

div.textbox-large div.during
{
    height: 24px;   /* 36px height minus 6px padding on top and bottom each */
    background-image: url(../images/site/textBox_lrg_C.png);
}

div.textbox-small div.during
{
    height: 12px;   /* 24px height minus 6px padding on top and bottom each */
    background-image: url(../images/site/textBox_sml_C.png);
}

div.textbox-large input, div.textbox-small input
{
    cursor: text;   /* ensure text cursor appears on whitespace also */
    /* width needs to be explicitly specified by page */
    height: 100%;
    border-width: 0px;
    margin: 0px;
    padding: 0px;
    background-color: transparent;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

div.textbox-large input
{
    font-size: 138.5%;  /* based on YUI Fonts CSS, translates to 18px */
}

div.textbox-small input
{
    /* TODO why isn't 93% (12px) working? even 85% (11px) doesn't fit perfectly. */
    font-size: 77%;     /* based on YUI Fonts CSS, translates to 10px */
}


/* Common component: Textboxes (using table) */
/* Note: width of outer table needs to be explicitly specified. */

table.textbox-large
{
   height: 36px;    /* the height of the before, during and after background images. */
}

table.textbox-small
{
   height: 24px;    /* the height of the before, during and after background images. */
}

table.textbox-large, table.textbox-small
{
   border-width: 0px;
}

table.textbox-large td.before, table.textbox-small td.before,
/** TEMP HACK same rules on placeholder children divs needed for IE */
table.textbox-large td.before div, table.textbox-small td.before div
{
    width: 6px; /* the width of this background image. also equivalent to left padding. */
    height: 100%;
    background: transparent none no-repeat scroll right center;
}

table.textbox-large td.before
{
    height: 36px;   /* TEMP hardcoding it for now since 100% isn't working... */
    background-image: url(../images/site/textBox_lrg_L.png);
}

table.textbox-small td.before
{
    height: 24px;   /* TEMP hardcoding it for now since 100% isn't working... */
    background-image: url(../images/site/textBox_sml_L.png);
}

table.textbox-large td.after, table.textbox-small td.after,
/** TEMP HACK same rules on placeholder children divs needed for IE */
table.textbox-large td.after div, table.textbox-small td.after div
{
    width: 6px; /* the width of this background image. also equivalent to right padding. */
    height: 100%;
    background: transparent none no-repeat scroll left center;
}

table.textbox-large td.after
{
    height: 36px;   /* TEMP hardcoding it for now since 100% isn't working... */
    background-image: url(../images/site/textBox_lrg_R.png);
}

table.textbox-small td.after
{
    height: 24px;   /* TEMP hardcoding it for now since 100% isn't working... */
    background-image: url(../images/site/textBox_sml_R.png);
}

table.textbox-large td.during, table.textbox-small td.during
{
    display: inline-block;  /* need this still in order to work in Firefox */
    width: 100%;
    padding: 6px 0px;
    background: transparent none repeat-x scroll center center;
}

table.textbox-large td.during
{
    height: 24px;   /* 36px height minus 6px padding on top and bottom each */
    background-image: url(../images/site/textBox_lrg_C.png);
}

table.textbox-small td.during
{
    height: 12px;   /* 24px height minus 6px padding on top and bottom each */
    background-image: url(../images/site/textBox_sml_C.png);
}

table.textbox-large input, table.textbox-small input
{
    cursor: text;   /* ensure text cursor appears on whitespace also */
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    border-width: 0px;
    background-color: transparent;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

table.textbox-large input
{
    font-size: 138.5%;  /* based on YUI Fonts CSS, translates to 18px */
}

table.textbox-small input
{
    /* TODO why isn't 93% (12px) working? even 85% (11px) doesn't fit perfectly. */
    font-size: 77%;     /* based on YUI Fonts CSS, translates to 10px */
}