/* 
Copyright 2008 Mount Holyoke College.
Theme name: "Theme 1"
CSS media type: all
Related files: theme1_print.css
Sections of this CSS file:
    1. LAYOUT, SIZE & POSITIONING
    2. BORDERS & BACKGROUNDS
    3. TEXT
    4. LINKS
    5. TABLES
*/
/*
===========================================
  1. LAYOUT, SIZE & POSITIONING 
=========================================== 
*/
.dummyLayout {
  border: 1px solid blue;
}
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    }
div#page {
    width: 832px;
    height: 100%;
    margin: 0 auto 1em auto;
    position: relative;
    clear: both;
    }
    /*
    Page classes:
    "standard" (same as no class assigned)
    "home" (was "hasImage")
    "wide" (no sidebar, has wider content area)
    "plain" (no sidebar background image, no top padding)
    */
/* HEADER LAYOUT */
#header {
    position: relative;
    height: 89px;
    z-index: 10;
    }
    
    #mhcLogo { /* Uses background image for CSS browsers, text for non-CSS */
        height: 46px;
        width: 604px;
        padding: 10px 20px;
        margin: 0;
        position: relative;
        }
    #mhcLogo a {
        width: 415px;
        height: 18px;
        display: block;
        white-space: nowrap;
        position: absolute;
        bottom: 11px;
        padding-bottom: 4px;
        }
    /* SEARCH LAYOUT */    
    #search {
        width: 188px;
        height: 66px;
        position: absolute;
        top: 0px;
        right: 0px;
        padding: 0;
        margin: 0;
        }
        #search form { 
            margin: 0; 
            padding: 0; 
            width: 188px; 
            height: 66px;
        }
        #search p {
            width: 188px;
            height: 22px;
            position: absolute; 
            top: 20px; 
            left: 0;
            padding: 0;
            margin: 0;
            text-align: left;
            }
        #searchlabel {
            display: none;
            }
        #searchtext { 
            width: 135px;
            height: 16px;
            position: absolute;
            top: 0;
            left: 10px;
            }
        #searchgo {
            position: absolute;
            top: 3px;
            left: 162px;
            height: 16px;
            width: 17px;            
            }
    /*  GLOBAL NAV LAYOUT
        Layout notes: Non-CSS browser will display text and no background 
        images. CSS browser will display image with CSS hover effect. */
    ul#globalNav {
        list-style-type: none;
        margin: 0;
        padding: 2px 0;
        height: 19px;
        clear: both;
        }
        #globalNav li {
            margin: 0;
            padding: 0;
            float: left;
            }
            #globalNav li a {
                display: block;
                height: 19px;
                margin: 0 14px;
                padding: 0;
                }
            ul#globalNav li.first a {
                margin-left: 18px; 
                }
            #globalNav li.last a {
                margin-right: 0px;
                }
            /* These widths allow the background image to be displayed */
            a#about { width: 49px }
            a#admission { width: 78px }
            a#academics { width: 80px }
            a#studentLife { width: 98px }
            a#athletics { width: 77px }
            a#offices { width: 59px }
            a#giving { width: 50px }
            a#newsEvents { width: 113px }
            span.hideText { /* moves text out of view when browser uses CSS */
                position: absolute;
                left: -2000px;
                }
/* end of header layout */
/* BODY CONTAINER LAYOUT */
div#bodyContainer {
    position: relative; /* for positioned child elements */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    
    /* BREADCRUMBS LAYOUT */
    ul#breadcrumbs { 
        list-style-type: none;
        position: absolute; 
        left: 20px;
        margin: 0;
        padding: 1.5em 0 0 0;
        max-width: 600px;
        height: 1.5em;
        white-space: nowrap; 
        }
        ul#breadcrumbs li {
            display: inline;
            margin: 0;
            padding: 0 3px 0 0;
            }
        ul#breadcrumbs .divider {
            padding-left: .5em;
            }
        div#page.home ul#breadcrumbs li.thisPage {
            display: block;
            margin-top: .25em;
            }
        ul#breadcrumbs li:last-child:after {
            content: "";
            padding: 0;
            }
    div#page.home ul#breadcrumbs { 
        /* Breadcrumbs positioned over image if page has a primary image */
        margin: 0;
        padding: 5px 10px 5px 20px;
        max-width: 400px;
        height: auto;
        position: absolute;
        top: 31px;
        left: 0px;
        z-index: 10;
        }
    
   /* SITENAV LAYOUT */
   div#nav {
       width: 136px;
       float: left;
       margin: 2em 0 0 0;
       padding: 50px 20px 16px 20px; /* IE6 lines up better if horiz space is just padding, not a
       mix of margin and padding. Note: top padding here is for IE6; other browsers adjusted below */
       }
       /* !!! Added to fix content top alignment */
       div#page.noImage div#nav {
           padding-top: 60px;
           }
       /* !!! IE7 and lower only */
       * html div#page.noImage div#nav {
           padding-top: 62px;
           }
       *:first-child+html div#page.noImage div#nav {
           padding-top: 62px;
           }
       * html div#page.home div#nav {
           padding-top: 52px;
           }
       *:first-child+html div#page.home div#nav {
           padding-top: 52px;
           }
       /* end IE7 and lower only */
       div#nav ul {
           list-style-type: none;
           padding: 0;
           margin: 0 0 0 0;
           }
           div#nav ul li {
               padding: 0;
               margin: 1.125em 0;
               }
               div#nav ul li ul {
                   margin: 0 0 0 12px;
                   }
                   div#nav ul li ul li {
                       margin: .66em 0;
                       }
                           div#nav ul li ul li ul li {
                               margin: .5em 0;
                               } 
        div#nav ul#siteNav {
            margin-bottom: 4em;
            }

        #nav a.thisPage { 
            }
        #nav h3 { /* In this theme it's not displayed. Override with "display: block" in the page if needed. */
            margin: .8em 0;
            font-size: 1em;
            display: none; 
            }
    #page.home div#nav { /* Moves down if page has a primary image */
        margin-top: 400px;
        }
    
    /* MAIN CONTENT AREA LAYOUT */
    div#mainContent {
        width: 428px;
        margin: 2em 0 0 0;
        float: left;
        padding: 1em 20px 2em 10px;
        }
        /* !!! Added to fix content top alignment */
        div#page.noImage div#mainContent {
            padding-top: 10px;
            }
        div#mainContent h1 {
            margin-top: 30px;
            }
        #page.home div#mainContent h1 {
            margin-top: 20px;
            }
        div#mainContent ul li, div#mainContent ol li {
            margin-top: 0;
            margin-bottom: .6em;
            }
        #mainContent img {
            border: none;
            margin: 0;
            }
        #mainContent span.floatLeft {
            display: block;
            float: left;
            margin: 0 2em .5em 0;
            width: 172px;
            }
            #mainContent span.floatLeft span.caption {
                font-size: 0.9em; /* put this into Text Formats section */
                line-height: 1.1em;
                display: block;
                clear: left;
                }
    #page.home div#mainContent { /* Moves down if there is a primary image */
        margin-top: 400px;
        }    
    #page.wide div#mainContent { /* wider if page has no sidebar */
        width: 616px;
        }
    img#primaryImage {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 644px;
        height: 400px;
        }
   /* FEATURE LAYOUT */
   div#feature {
       width: 188px;
       height: 400px;
       float: right;
       margin: 0 0 -400px 0; /* offset sidebar's top padding */
       padding: 0;
       position: relative;
       z-index: 3;
       }
       div#feature div {
           margin: 0;
           padding: 20px;
           position: absolute;
           bottom: 0px;              }
       div#feature div div {
           padding: 0px;
           position: relative;
           }
       div#feature h2 {
           margin: 1em 0 .5em 0;              }
       div#feature p {
           margin: .25em 0 0 0;              }
   div#page.plain div#feature {
       display: none;
       }
   /* SIDEBAR LAYOUT */
   div#sidebar {
       margin: 0;
       width: 188px;
       float: right;
       padding-top: 406px;
       }
       /* !!! these changes affect only IE7 and below */
       *:first-child+html div#sidebar {
           padding-top: 378px;
           }
       * html div#sidebar {
           padding-top: 378px;
           }
       /* end IE7 and lower only */
       div#sidebar div {
           padding: 20px;
           margin: 0;
           }
       div#sidebar div div {
           padding: 0px;
           position: relative;
           }
       div#sidebar div.fullWidth { /* for images, etc. */
           width: 188px;
           padding: 0;
           }
       div#page.plain div#sidebar {
           padding-top: 2em;
           }
     /* SIDEBAR & FEATURE SPECIAL CASES */
    div#page.wide div#sidebar, div#page.wide div#feature {
        display: none;
        }
/* end of bodyContainer layout */
/* FOOTER LAYOUT */
div#footer {
    clear: both;
    width: 100%;
    padding-bottom: 2em;
    position: relative;
    min-height: 10em;
    }
    #mhc-logo {    
        position: absolute;
        top: 1.5em;
        left: 186px;
        width: 448px; 
        height: 34px;
        }
    #footer p {
        width: 448px; 
        position: relative;
        left: 186px;
        top: 68px;
        }
    #logo-print { /* Black & white version of logo: display only in print stylesheet */
        display: none;
        border: none;
        }
    div#gateways, div#utilityFooter {
        margin: .5em 0 0 0;
        width: 155px;
        float: right;
        text-align: left;
        }
    div#gateways {
        padding: .5em 10px 1em 0;
        /*border-top: 1px solid black; */
        }
    div#utilityFooter {
        clear: right; /* to put it below the gateway links */
        padding: 0 10px 0 0;
        margin-bottom: 2em;
        }
    div#gateways ul, div#utilityFooter ul {
        list-style-type: none;
        margin: 0 0 1em 0;
        padding: 0;
        }
    div#gateways ul li, div#utilityFooter ul li {
        float: left;
        width: 50px;
        /*white-space: nowrap;*/
        margin: 0 14px 2px 0;
        }
    div#gateways h3, div#utilityFooter h3 {
        margin: 0 0 .2em 0;
        }
/* end footer layout */
/* MISCELLANEOUS LAYOUT */
span#moreText { 
    display: none;
    }
div.ie6fix { /* see http://www.brunildo.org/test/IE_raf3.html 
             Empty div fixes IE 6 bug where an absol. positioned element disappears
             if it directly precedes or follows a floated element.*/
    width: 0px;
    height: 0px;
    display: inline; /* to keep it from pushing the sidebar down in IE6 */
    }
div.contentNode
    {
    display: block;
    clear: both; 
    margin-top: 1.25em;
    overflow: auto; 
    }
/*
===========================================
 2. BORDERS & BACKGROUNDS 
===========================================
*/
body {
    background-color: #222222;
    }
div#page {
    background: #e6e69b url('http://www.mtholyoke.edu/acad/images/styles/wide_bg-cccc33.gif') repeat-y bottom right;
    }
div#page.wide  {
    background-image: none;
    }
div#bodyContainer {
    background: transparent url('http://www.mtholyoke.edu/acad/images/styles/wide_gate_bg.jpg') no-repeat top right;
    }
div#page.wide div#bodyContainer, div#page.plain div#bodyContainer {
    background-image: none;
    }
#mhcLogo { /* college branding */
    background-color: #669900;
    }
#mhcLogo a {
    background: #669900 url('http://www.mtholyoke.edu/acad/images/styles/mhc-text.gif') no-repeat top left;    
    }
div#search {
    background-color: #e1cc59;
    }
div#page.wide div#search { /* match page background if no sidebar */
    background-color: transparent;
    }
div#page.plain div#search { /* match right column background if no background image */
    background-color: #cccc33;
    }
img#searchgo {
    border: none;
    }
ul#globalNav {
    background-color: black;
    }
div#page.home ul#breadcrumbs {
    background-color: #cc6600;
    }
#mhc-logo {
    background: url('http://www.mtholyoke.edu/acad/images/styles/logo_black-bg1.gif') no-repeat top left;
/*    background: url('http://webdev.mtholyoke.edu/acadtest/images/styles/logo_black-bg1.gif') no-repeat top left;*/
    }
/*
===========================================
 3. TEXT (except links) 
===========================================
*/
body {
    font-family: arial, helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.33em;
    color: black;
    }
h1, h2, h3, h4, h5, h6 {
/*    margin-top: 1.25em; */
    margin-bottom: .75em;
    }
h1 {
    font-family: 'Arial Black', 'Helvetica Black', sans-serif;
    font-size: 1.33em;    
    font-weight: normal;
    color: black;
    }
h2 {
    font-family: arial, helvetica, sans-serif;
    font-size: 1.25em;    
    color: black;
    }
h3 {
    font-family: arial, helvetica, sans-serif;
    font-size: 1.17em;    
    color: black;
    }
h4 {
    font-family: arial, helvetica, sans-serif;
    font-weight: normal;
    font-size: 1.0em;
    text-transform: uppercase;
    letter-spacing: .05em;
    }
h5 {
    font-family: arial, helvetica, sans-serif;
    font-size: 1.1em;    
    }
h6 {
    font-family: arial, helvetica, sans-serif;
    font-weight: normal;
    font-size: 0.92em;
    text-transform: uppercase;
    letter-spacing: .05em;
    }
#search {
    font-family: arial, helvetica, sans-serif;
    font-size: .84em;
    color: #666633;
    letter-spacing: normal;
    }
#searchlabel {
    font-weight: bold;    
    }
#searchtext { 
    font-size: 92%;
    }
ul#breadcrumbs {
    font-family: arial, helvetica, sans-serif;
    font-size: .92em;
    line-height: 1.3em;
    }
.home ul#breadcrumbs {
    color: white;
    }
ul#breadcrumbs li.thisPage {
    font-family: 'Arial Black', 'Helvetica Black', sans-serif;    
    }
.home ul#breadcrumbs li.thisPage {
    font-size: 1.3em;
    color: #ffcc00;
    text-align: right;
    }
#nav {
    color: #222222;
    }
ul#siteNav {
    font-weight: bold;
    font-size: .92em; /* Level 1 nav */
    }
ul.relatedNav {
    font-size: .92em; /* Level 1 nav */
    }
#nav ul {
    line-height: 1.25em; 
    }
#nav ul li ul { 
    font-weight: normal;
    }
#nav h3 {
    text-transform: uppercase;
    font-weight: bold;
    }
#mainContent p {
    line-height: 1.75em;
    margin: .75em 0;
    }
#feature {
    font-size: .92em;
    line-height: 1.33em;
    }
#feature h2 {
    font-size: 1.1em;
    color: white;
}
#feature h3 {
    font-size: 1.0em;    
    color: white;
    }
#feature h4 {
    font-size: 1.0em;    
    color: #e6e69b;
    }
div#feature { 
    color: white;
    background-color: transparent;
    }
div#feature strong { 
    font-family: 'Arial Black', 'Helvetica Black', sans-serif;
    font-weight: normal;
    }
#sidebar {
    font-size: .92em;
    line-height: 1.33em;
    }
#sidebar h2 {
    font-size: 1.1em;    
    color: #993300;
    }
#sidebar h3 {
    font-size: 1.0em;    
    color: #662200;
    }
#sidebar h4 {
    color: #662200;
    text-transform: none;
    letter-spacing: 0; 
    font-weight: bold;
    }
#sidebar div.teaser {
    color: black;
    }
#sidebar div.teaser span.date {
    font-family: 'Arial Black', 'Helvetica Black', sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    }
#footer p {
    font-size: 92%;
    }
div#gateways h3, div#utilityFooter h3 {
    color: black;    
    font-size: 92%;
    text-transform: uppercase;
    letter-spacing: 1px;
    }
#gateways, #utilityFooter {
    font-size: 92%;
    color: black;
    }
/*
/* These are used in the Text Content with Image content class: */
div.inlineImageCenter {
    text-align: center;
    width: 100%;
    padding-top: 0.5em;
}
div.inlineImageLeft {
    float: left;
    display: block;
    padding: 0 0.5em 0 0;
}
div.inlineImageRight {
    float: right;
    display: block;
    padding: 0 0 0 0.5em;
}
/*
===========================================
 4. LINKS 
===========================================
*/
a:link { 
    color: #993300;
    text-decoration: none;
    }
a:visited { 
    color: #993300;
    text-decoration: none;
    }
a:hover { 
    color: #993300;
    text-decoration: underline;
    }
a:active { 
    color: #993300;
    text-decoration: underline;
    }
/* hover effect for MHC link */
#mhcLogo a:hover, #mhc a:active {
    padding-bottom: 2px;
    border-bottom: 2px solid #669900;
    }
#utilityFooter a:link, #utilityFooter a:visited, #gateways a:link, #gateways a:visited  {
    color: #993300;
    text-decoration: none;
    }
#utilityFooter a:hover, #utilityFooter a:active, #gateways a:hover, #gateways a:active {
    color: #993300;
    text-decoration: underline;
    }
/* Notes about global nav links 
   The "hideText" text is positioned off screen to provide text
   when a non-CSS browser is used. (It is styled in the layout
   section above.) I'm also using it to preload the "highlight"
   version of the background images below. This could also be done
   with javascript, but this seems to work fine and is easier
   for me to manage.
*/
a#about:link, a#about:visited {
    background: url('http://www.mtholyoke.edu/acad/images/styles/about_white.gif') center left no-repeat;
    }
a#about:hover, a#about:active, a#about span.hideText {
    background: url('http://www.mtholyoke.edu/acad/images/styles/about_theme1.gif') center left no-repeat;
    }
a#admission:link, a#admission:visited {
    background: url('http://www.mtholyoke.edu/acad/images/styles/admission_white.gif') center left no-repeat;
    }
a#admission:hover, a#admission:active, a#admission span.hideText {
    background: url('http://www.mtholyoke.edu/acad/images/styles/admission_theme1.gif') center left no-repeat;
    }
a#academics:link, a#academics:visited {
    background: url('http://www.mtholyoke.edu/acad/images/styles/academics_white.gif') center left no-repeat;
    }
a#academics:hover, a#academics:active, a#academics span.hideText {
    background: url('http://www.mtholyoke.edu/acad/images/styles/academics_theme1.gif') center left no-repeat;
    }
a#studentLife:link, a#studentLife:visited {
    background: url('http://www.mtholyoke.edu/acad/images/styles/student-life_white.gif') center left no-repeat;
    }
a#studentLife:hover, a#studentLife:active, a#studentLife span.hideText {
    background: url('http://www.mtholyoke.edu/acad/images/styles/student-life_theme1.gif') center left no-repeat;
    }
a#athletics:link, a#athletics:visited {
    background: url('http://www.mtholyoke.edu/acad/images/styles/athletics_white.gif') center left no-repeat;
    }
a#athletics:hover, a#athletics:active, a#athletics span.hideText {
    background: url('http://www.mtholyoke.edu/acad/images/styles/athletics_theme1.gif') center left no-repeat;
    }
a#offices:link, a#offices:visited {
    background: url('http://www.mtholyoke.edu/acad/images/styles/offices_white.gif') center left no-repeat;
    }
a#offices:hover, a#offices:active, a#offices span.hideText {
    background: url('http://www.mtholyoke.edu/acad/images/styles/offices_theme1.gif') center left no-repeat;
    }
a#giving:link, a#giving:visited {
    background: url('http://www.mtholyoke.edu/acad/images/styles/giving_white.gif') center left no-repeat;
    }
a#giving:hover, a#giving:active, a#giving span.hideText {
    background: url('http://www.mtholyoke.edu/acad/images/styles/giving_theme1.gif') center left no-repeat;
    }
a#newsEvents:link, a#newsEvents:visited {
    background: url('http://www.mtholyoke.edu/acad/images/styles/news_white.gif') center left no-repeat;
    }
a#newsEvents:hover, a#newsEvents:active, a#newsEvents span.hideText {
    background: url('http://www.mtholyoke.edu/acad/images/styles/news_theme1.gif') center left no-repeat;
    }
#breadcrumbs a:link, #breadcrumbs a:visited { 
    color: #993300;
    text-decoration: none;
    }
#breadcrumbs a:hover, #breadcrumbs a:active { 
    color: #993300;
    text-decoration: underline;
    }
div#page.home #breadcrumbs a:link, div#page.home #breadcrumbs a:visited { 
    color: white;
    text-decoration: none;
    }
div#page.home #breadcrumbs a:hover, div#page.home #breadcrumbs a:active { 
    color: white;
    text-decoration: underline;
    }
/* #nav a {
    display: block;
    height: 100%;
    width: 100%;
    } */ /* required for IE 6 */
#nav a:link, #nav a:visited {
    color: #993300; /*black*/
    text-decoration: none;
    }
#nav a:hover {
    color: #993300; /*#333*/
    text-decoration: underline;
    }
#nav a:active {
    color: #993300; /*#555*/
    text-decoration: underline;
    }
#nav a.thisPage { 
font-weight: bold;
    }
#nav a.thisPage:link, #nav a.thisPage:visited { 
    color: #993300;
    }
#nav a.thisPage:hover, #nav a.thisPage:active {
    color: #993300;
    }
#feature a:link, #feature a:visited { 
    color: #ffff99;
    font-weight: bold;
    text-decoration: none;
    }
#feature a:hover, #feature a:active { 
    color: #ffff99;
    font-weight: bold;
    text-decoration: underline;
    }
#sidebar div.teaser a:link, #sidebar div.teaser a:visited {
    color: #993300;
    text-decoration: none;
    }
#sidebar div.teaser a:hover, #sidebar div.teaser a:active {
    color: #993300;
    text-decoration: underline;
    }
div#mainContent a:link { 
    color: #993300;
    text-decoration: none;
    }
div#mainContent a:visited { 
    color: #993300;
    text-decoration: none;
    }
div#mainContent a:hover { 
    color: #993300;
    text-decoration: underline;
    }
div#mainContent a:active { 
    color: #993300;
    text-decoration: underline;
    }
#mhc-logo a { 
    height: 34px;
    width: 220px;
    display: block;
    }
ul.personalLinks {
    list-style: none;
    margin: 0;
    padding: 0;
    }
ul.personalLinks li {
    display: inline;
    white-space: nowrap;
    padding: 0 2em 0 0;
    margin: 0;
    }
ul.personalLinks li:after {
    content: " |";
    padding-left: 1em;
    margin-right: -1em;
    }
ul.personalLinks li:last-child:after {
    display: none;
    }
/*
===========================================
 5. TABLES 
===========================================
*/
#mainContent table.table1 {
    width: 100%;
    margin: 0 0 1.4em 0;
    border: 2px solid #333333;
    caption-side: top;
    }
#mainContent table.table1 caption { 
    width: 100%;
    font-size: 1.1em;
    font-weight: bold;
    padding: .5em 0 0 0;
    margin: 1.4em 0 .7em 0;
    text-align: center;
    }
#mainContent table.table1 th {
    padding: .5em .25em;
    font-weight: bold;
    font-size: 1em;
    text-align: center;
    background-color: #333333;
    color: white;
    vertical-align: bottom;
    }
#mainContent table.table1 tbody.data td {
    padding: .5em .25em;
    background-color: white;
    border: 1px solid #999999;
    text-align: right;
    vertical-align: top;
    color: #222222;
    }
#mainContent table.table1 tbody.totals td {
    padding: .5em .25em;
    background-color: white;
    border: 1px solid #999999;
    vertical-align: bottom;
    text-align: right;
    color: #222222;
    font-style: italic;
    }
#mainContent table.table2 {
    width: 80%;
    margin: 1.4em auto 0 auto;
    border: 1px solid black;
    caption-side: bottom;
    border-collapse: collapse;
    }
#mainContent table.table2 caption { 
    width: 80%;
    font-size: 1em;
    font-weight: normal;
    font-style: italic;
    padding: .5em 0 0 0;
    margin: .4em auto 1.4em auto;
    text-align: center;
    }
#mainContent table.table2 th {
    padding: .75em .5em;
    font-weight: normal;
    font-size: 1em;
    text-align: left;
    background-color: transparent;
    color: black;
    vertical-align: middle;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    }
#mainContent table.table2 tbody.data td {
    font-size: .9em;
    padding: .5em;
    background-color: transparent;
    text-align: left;
    vertical-align: top;
    color: black;
    border-right: 1px solid black;
    }
#mainContent table.table2 tbody.data tr:last-child td {
    padding-bottom: 1em;
    border-bottom: 2px dotted green;
    }
#mainContent table.table2 tbody.totals td {
    font-size: .9em;
    padding: .5em .5em;
    background-color: transparent;
    text-align: center;
    border-bottom: 2px solid black;
    vertical-align: top;
    text-align: left;
    color: black;
    border-top: 1px dashed #777777;
    border-right: 1px solid black;
    }
/* TESTING ULTRA-WIDE LAYOUT */
#page.ultra #sidebar, #page.ultra #feature, #page.ultra .relatedNav {
    display: none;
    }
#page.ultra #nav {
    float: right;
    width: 380px;
    margin-top: 1.5em;
    margin-bottom: 1em;
    padding: 0 20px;
    }
#page.ultra #nav ul {
    margin: 0;
    padding: 0;
    text-align: right;
    }
#page.ultra #nav ul li {
    display: inline;
    padding: 0 0 0 2em;
    /*padding: 0 3em 0 0;
    margin: 0 0 .5em 0;*/
    }
#page.ultra #nav ul li a { display: inline }
#page.ultra #mainContent {
    float: none;
    width: 790px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 3em;
    margin-top: 0;
    }
#page.ultra #bodyContainer { background-image: none }
#page.ultra #search { background-color: transparent }
#page.ultra { background-image: none }
#page.ultra ul#breadcrumbs { width: 380px }
#page.ultra #mhc-logo, #page.ultra #footer p {
    left: 20px;
    width: 500px;
    }
#page.ultra #gateways, #page.ultra #utilityFooter {
    text-align: right;
    margin: 1.5em 0 0 0;
    padding: 0 20px 1em 0;
    width: 125px;
    clear: none;
    }
#page.ultra div#gateways ul, #page.ultra div#utilityFooter ul {
    margin: 0;
    }
#page.ultra div#gateways ul li, #page.ultra div#utilityFooter ul li {
    float: none;
    display: inline;
    width: auto;
    margin: 0 0 2em 0;
    }
#page.ultra div#gateways h3, #page.ultra div#utilityFooter h3 {
    margin: 0;
    }
 
/* FORMS 
Preliminary styles for testing
*/
#mainContent form { 
    display: block;
    margin: 1.5em 0;
    padding: 0;
    border-top: 2px dotted #444444;
    border-bottom: 2px dotted #444444;
    /* may not want the border in the final version */
    }
#mainContent form p { 
    margin: 0;
    }
#mainContent label {
    display: block;
    clear: left;
/*    margin: 3px 0 0 9px; */
    margin: 0;
    }
#mainContent input, #mainContent select, #mainContent textarea {
/*    margin: 3px 0 9px 9px; */
/*    margin: 3px 0 0 9px; */
    margin: 0;
    }
#mainContent input.submit {
/*    margin: 18px 9px 18px auto; */
    margin: 0 0 1em 2.5em;
    }
#mainContent input.reset {
/*    margin: 18px 9px 18px auto; */
    margin: 0 0 1em 2.5em;
    }
#mainContent form .required {
    /* color: #993300; */    
    }
#mainContent .requiredKey {
    color: #993300;
    margin: 0;
    }
#mainContent label.requiredFlag {
    color: #993300;
    margin: 0 0 0 0.4em;
    display: inline;
    vertical-align: top;
    }
/*
#mainContent form .required:after {
    font-weight: bold;
    content: "*";
    color: #990000;
    padding: 0 3px;
    position: relative;
    top: -2px;
    }
*/
#mainContent fieldset {
    border: none;
    padding: 0 9px;
    margin: 12px 0;
    }
#mainContent fieldset legend {
    font-size: 16px;
    font-weight: bold;
    padding: 0;
    margin: 0 0 0 -9px;
    }
#mainContent fieldset fieldset legend {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    }
#mainContent fieldset fieldset fieldset legend {
    font-size: 12px;
    font-weight: bold;
    margin: 0;
    }
/* experimentation */
ol.numberedForm {
    margin: 0 0 0 1em;
    padding: 0 0 0 1em;
}
li.numberedForm {
    padding-bottom: 1em;
}
ol.subquestion {
    margin: 0.5em 0 0 1em;
    padding: 0 0 0 1em;
}
ol.subquestion li {
    border: 1px solid #e6e69b;    /* IE 6 hack */
}
#mainContent input.largeText {
    width: 20em;
} 
#mainContent input.mediumText {
    width: 10em;
} 
#mainContent input.smallText {
    width: 5em;
} 
#mainContent form .detail {
    font-size: 90%;
}
#mainContent label.trailing {
    display: inline;
    vertical-align: 2px;
    margin: 0 1em 0 3px;    
}
#mainContent form div.subquestion {
    margin-top: 1em;
}
#mainContent textarea {
    font-family: sans-serif;
    font-size: 110%;
    vertical-align: top;
}
#mainContent textarea.paragraph {
    width: 25em;
    height: 10em;
}
/*
===========================================
 #. FANCY STUFF
===========================================
*/
 
a[href^="http:"] {
  background: url(http://www.mtholyoke.edu/acad/images/styles/icon_external_link.png) no-repeat right top;
  padding-right: 12px;
}
a[href^="http://www.mtholyoke.edu"],
a[href^="http://webdev.mtholyoke.edu"],
a[href^="http://ella.mtholyoke.edu"],
a[href^="http://isis.mtholyoke.edu"],
a[href^="http://webmail.mtholyoke.edu"],
a[href^="http://red.mtholyoke.edu"],
a[href^="http://red/"],
a[href^="http://flock.mtholyoke.edu"],
a[href^="http://flock/"]
{
  background-image:none;
  padding-right: 0;
}
a[href$=".pdf"] {
  background: url(http://www.mtholyoke.edu/acad/images/styles/icon_pdf.png) no-repeat right top;
  padding-right: 12px;
}
a[href$=".doc"],
a[href$=".docx"], 
a[href$=".xls"],
a[href$=".xlsx"],
a[href$=".ppt"],
a[href$=".pptx"]
{
  background: url(http://www.mtholyoke.edu/acad/images/styles/icon_document.png) no-repeat right top;
  padding-right: 10px;
}