﻿

body
{
    margin: 0px 0px 20px 0px;
}

h1, h2, h3, h4, h5, h6, p, ul, ul li, ol, ol li, dl, dt, dd, blockquote
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
}


/* ************** */
/* Header Section */
/* ************** */
#header
{
    width: 100%;
    height: 111px;
    margin: 0px 0px 4px 0px;
    padding-top: 8px;
    background: url(http://www.wpi.edu/Images/Templates/Transformations/headerbg.gif) top left repeat-x;
}
#wpihome
{
    float: left;
    margin: 13px 32px 0px 19px;
}
#wpihome img { border: 0px }
* html #wpihome { margin-left: 10px; margin-right: 43px; }
#banner { float: left; }
#banner, #banner em
{
    width: 417px;
    height: 92px;
    background-image: url(http://www.wpi.edu/Images/Templates/Transformations/banner.gif);
}
#container
{
    margin: 10px 0px;
    background: url(http://www.wpi.edu/Images/Templates/Transformations/border.gif) 246px 0px repeat-y;
    float: left;
    width: 100%;
}
#container { _margin: 10px 0px 0px 0px !important; *margin: 10px 0px 0px 0px !important; }
body.homepage #container
{
    margin: 0px 0px !important;
    background-image: none !important;
    float: left;
    width: 100%;
}

/* ************************* */
/* Horizontal Top Navigation */
/* ************************* */
#navcontainer
{
    clear: both;
    margin: 0px 14px 0px 0px;
    width: 100%;
    overflow: hidden;
}
#navcontainer {*margin: 0px 0px 7px 0px; _margin: 0px 0px 7px 0px; }
#navcontainer ul
{
    padding: 1px 4px 5px 0px;
    margin: 0px 0px 0px 0px !important;
    background-color: #666;
    color: #fff;
    height: 1em;
    width: 100%;
    list-style-type: none;
    text-align: right;
}
#navcontainer ul {*padding: 1px 0px 6px 0px; _padding: 1px 0px 3px 0px; }
#navcontainer ul li
{
    display: inline;
    margin: 0px -4px 0px 0px !important;
    padding: 0px 0px 5px 0px !important;
}
#navcontainer ul li a
{
    margin: 0px !important;
}
#navcontainer ul li a
{
    font-weight: bold;
    color: #fff !important;
    text-decoration: none;
    font-size: .75em;
    padding: 3px 15px 3px 15px;
    border-left: 1px solid #fff;
    margin: 0px;
}
#navcontainer ul li a {*padding: 3px 15px 4px 15px; _padding: 3px 15px 4px 15px; }
#navcontainer ul li a:visited:hover, #navcontainer ul li a:link:hover
{
    background-color: #900;
    color: #fff !important;
}
#navcontainer ul li.issue
{
    font-size: 0.9em;
    font-weight: bold;
    float: left;
    padding: 2px 15px 1px 25px !important;
}


/* *************** */
/* Side Navigation */
/* *************** */
#nav
{
    width: 226px;
    float: left;
    margin: 0px;
    padding-right: 10px;
    padding-left: 10px;
}
#nav ul
{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    font-weight: bold;
    font-size: 0.85em;
}
#nav ul li
{
    margin: 0px;
    padding: 0px 0px 0px 0px;
    background: url(http://www.wpi.edu/Images/Templates/Transformations/dot.gif) repeat-x bottom left;
    display: block;
    overflow: hidden;
}
#nav ul li.cover a
{
    padding: 0px !important;
    margin: 0px auto;
    width: 130px !important;
    border: 1px solid #666;
}
#nav ul li.cover
{
    
    margin: 0px auto !important;
    padding-bottom: 15px !important;
    border: 0px;
    text-align: center !important;
}
#nav ul li.cover img
{
    
    margin: 0px auto !important;
    border: 0px;
    text-align: center !important;
}
#nav ul li.cover a:hover
{
    background-image: none !important;
    border: 1px solid #900 !important;
    margin: 0px auto !important;
    text-align: center !important;
}
#nav ul li a
{
    padding: 10px 10px 10px 15px !important;
    text-decoration: none !important;
    display: block;
    margin: 0px;
    color: #900;
    width: 201px !important;
}
#nav ul li#first a
{
    padding: 10px 10px 10px 15px !important;
    text-decoration: none !important;
    display: block;
    margin: 0px;
    color: #900;
    width: 201px;
}
#nav ul li a:hover, #nav ul li#first a:hover
{
    width: 209px;
    background: url(http://www.wpi.edu/Images/Templates/Transformations/dotdark.gif) repeat-x bottom left;
    margin: 0px;
    padding: 0px;
}
* html #nav ul li a:hover, * html #nav ul li#first a:hover
{
    width: 216px;
}
#nav ul li.down a
{
    padding: 10px 0px 10px 15px !important;
}
#nav ul li.downsub a
{
    padding: 10px 0px 0px 15px !important;
}
#nav ul li.down a, #nav ul li.downsub a
{
    text-decoration: none !important;
    display: block;
    margin: 0px;
    color: #900;
    width: 200px !important;
}
#nav ul li.down a:hover, #nav ul li.downsub a:hover
{
    width: 209px;
    background-image: none;
    margin: 0px;
    padding: 0px;
}
#nav ul ul
{
    padding-top: 0px !important;
    padding-bottom: 12px;
}
#nav ul li.downsub li a
{
    font-style: normal;
    width: 190px !important;
    padding: 5px 0px 0px 15px !important;
}
#nav ul li.related li a { width: 180px !important; }
* html #nav ul li li li a { width: 185px !important; }
#nav ul ul ul
{
    padding-top: 0px !important;
    padding-bottom: 0px;
}
#nav ul ul ul li a
{
    font-style: italic;
    font-size: 1.05em !important;
}
#nav ul li li
{
    background-image: none;
    padding: 3px 0px 3px 10px;
    font-style: italic;
    margin: 0px !important;
    font-size: 1.1em !important;
}
#nav ul li li a
{
    font-weight: normal;
    margin: 0px !important;
    padding: 5px 5px 5px 10px !important;
    width: 190px !important;
}
#nav ul li li a:hover
{
    background-image: none;
    text-decoration: underline !important;
    padding: 0px 0px 0px 0px;
    margin: 0px;
}

/* Related Sites List */
#nav ul li.related
{
    margin: 0px;
    padding: 0px;
    background: url(http://www.wpi.edu/Images/Templates/Transformations/dot.gif) repeat-x bottom left;
    display: block;
    overflow: hidden;
}
#nav ul li.related
{
    padding: 10px 0px 10px 15px !important;
    text-decoration: none !important;
    display: block;
    margin: 0px;
    color: #900;
    width: 211px;
}
#nav ul li.related ul
{
    padding-top: 5px !important;
    padding-bottom: 0px;
}
#nav ul li.related li
{
    background-image: none;
    background-color: transparent;
    padding: 0px 0px 0px 15px;
    font-style: italic;
    margin: 0px !important;
    font-size: 1.1em !important;
}
#nav ul li.related li a
{
    font-weight: normal;
    margin: 0px !important;
    padding: 3px 0px 3px 10px !important;
}
#nav ul li.related li a:hover
{
    background-image: none;
    text-decoration: underline !important;
    padding: 0px 0px 0px 0px;
    margin: 0px;
}

/* Class Notes Button */
#nav ul li.highlight
{
    background-color: #900;
    background-image: none !important;
    margin-top: 10px;
    padding: 5px;
}
#nav ul li.highlight a
{
    color: #fff;
    font-size: 1.1em;
    text-align: center;
    border: 1px solid #fff;
    margin: 0px;
    width: 214px !important;
    padding: 7px 0px 7px 0px !important;
}
#nav ul li.highlight a:hover
{
    background-image: none !important;
    background-color: #600 !important;
    margin: 0px !important;
    padding: 7px 0px 7px 0px !important;
    width: 214px !important;
}


/* ************ */
/* Content Area */
/* ************ */
body.homepage #content
{
    overflow: hidden !important;
    border-left: 1px solid #666 !important;
    margin: 10px 0px 10px 0px;
    padding: 0px 0px 0px 10px !important;    
}
#content
{
    overflow: hidden !important;
    margin: 0px 0px;
    padding: 0px 10px 0px 15px !important;
}
* html #content { margin: 0px 0px 0px 242px !important; }
#content #cover p, #content #featured p
{
    font-size: 0.8em;
    line-height: 1.3em;
    margin: 5px 10px 10px 0px !important;
    padding: 0px !important;
}

/* Cover Section */
#cover
{
    padding: 0px 0px 0px 0px;
    
}
#cover .feature
{
    padding: 0px;
    *padding-bottom: 0px !important;
}
* html #cover .feature { height: 100px; }
#cover h1
{
    color: #fff !important;
    background-color: #900;
    margin: 0px 0px 10px 0px !important;
    font-size: 0.85em !important;
    padding: 3px 0px 3px 5px !important;
    font-style: normal !important;
}
#cover h2
{
    color: #900;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1em;
    font-style: italic;
    margin: 0px;
    padding: 0px;
}
#cover h2 a
{
    color: #900;
    text-decoration: none;
}
#cover h2 a:hover, #cover h2 a:visited { color: #600; }
#cover img
{
    margin: 0px 7px 10px 0px;
    border: 1px solid #666;
    float: left;
}
#cover img { *margin: 0px 7px 0px 0px !important; }
#cover img:hover { border: 1px solid #900; }

/* Featured Article Section */

#featured
{
    padding: 0px 0px 0px 0px;
    clear: both;
}
body.homepage #featured
{
    border-top: 1px solid #666;
}
* html #featured { clear: none; float: left; }
* html #featured .feature { height: 50px; }
#featured .feature
{
    
    clear: both;
    text-align: left;
    margin: 10px 10px 0px 0px;
    padding: 5px 10px 0px 5px;
    *padding-bottom: 0px !important;
    border: 1px solid #999;
    background-color: #eee;
    min-height: 120px;
    
}
#featured h1
{
    color: #fff !important;
    background-color: #900 !important;
    margin: 10px 0px 10px 0px !important;
    font-size: 0.85em !important;
    padding: 3px 0px 3px 5px !important;
    font-style: normal !important;
}
#featured h2
{
    color: #900;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    font-style: italic;
    margin: 0px !important;
    padding: 0px !important;
}
#featured h2 a
{
    color: #900;
    text-decoration: none;
}
#featured h2 a:hover, #featured h2 a:visited { color: #600; }
#featured img
{
    margin: 0px 7px 10px 0px;
    *margin-bottom: -5px;
    border: 1px solid #666;
    float: left;
}
#featured img:hover { border: 1px solid #900; }

/* Archive Specs */
.archive
{
    padding-bottom: 30px;
    border-bottom: 1px solid #666;
    margin-bottom: 30px;
    min-height: 200px;
    height:auto !important;
    height:200px;
}
.archive img
{
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 0px;
}

/* Article Typography Specs */
#content h1
{
    color: #900;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.3em;
    font-style: italic;
    margin: 0px 0px 0px 0px;
    padding: 0px;
}
#content h2
{
    margin: 20px 0px 5px 0px !important;
}
body.homepage #content h2 { margin: 0px 0px 5px 0px !important; }
#content .archive h2 { margin: 0px 0px 5px 0px !important; }
#content p
{
    font-size: 0.8em;
    line-height: 1.3em;
    margin: 0px 0px 10px 0px !important;
    padding: 0px !important;
}
#content p a:link
{
    color: #900;
    text-decoration: underline;
}
#content p a:hover, #content p a:visited { color: #600; }
#content p em
{
    font-weight: bold;
    font-style: normal;
}
#content p em
{
    font-weight: normal;
    font-style: italic;
}
#content p.intro
{
    font-weight: bold;
    color: #333;
    font-size: 0.85em;
    font-style: italic;
}
#content p.byline
{
    font-style: italic;
    margin: 2px 0px 0px 0px !important;
    padding: 0px !important;
}
#content p.bylineright
{
    text-align: right;
    margin: -10px 0px 0px 0px !important;
    padding: 0px !important;
}
#content p.bylineright em
{
    font-weight: bold;
    font-style: normal;
}
#content p.aside
{
    font-style: italic;
}
#content p.index
{
    margin: 5px 0px 0px 0px !important;   
}
#content p.subheader
{
    padding:  15px 0px 0px 0px !important;
    font-weight: bold;
    font-size: 0.85em !important;
}
#content ul
{
    font-size: 0.8em;
    line-height: 1.3em;
    margin: 10px 0px 0px 20px !important;
    padding: 0px !important;
}
#content ul li
{
    padding: 5px 0px;
}
#content ul li a { color: #900}
#content ul li a:hover { color: #600; }
#content blockquote
{
    font-style: italic;
    font-weight: bold;
    font-size: 0.85em !important;
    color: #555;
}
#content blockquote.author
{
    text-align: right !important;
    margin-top: -10px;
    margin-bottom: 25px;
}


/* Article Call-Outs */
.callout, .callout300
{
    width: 252px !important;
    float: right;
    margin: 5px 0px 15px 10px !important;
    padding: 0px !important;
    background-image: none !important;
}
.callout300 { width: 302px !important; }
.callout300 h2.callout { width: 291px !important; }
#content .callout h2, #content .callout300 h2
{
    background-color: #333;
    margin: 0px !important;
    padding: 5px !important;
    color: #fff;
    font-size: 0.85em !important;
}
#content .callout ul, #content .callout300 ul
{
    width: 220px !important;
    border-left: 1px solid #333 !important;
    border-right: 1px solid #333 !important;
    margin: 0px 0px 20px 0px !important;
    padding: 10px 5px 5px 25px !important;
}
#content .callout300 ul { width: 270px !important; }
#content .callout p, #content .callout300 p
{
    width: 286px !important;
    margin: 0px 12px 0px 0px !important;
    padding: 0px 10px 10px 12px !important;
    color: #555;
    line-height: 1.4em !important;
    text-align: left;
    border-left: 2px solid #ccc !important;
    font-style: italic;
}
.callout img, .callout300 img { float: right; margin-bottom: 5px; border: 1px solid #333; }

/* Article Photography Specs */
.photoright100, .photoright150, .photoright200, .photoright250, .photoright300, .photoright400, img.right
{
    clear: right;
    float: right;
    padding: 0px 0px .5em 10px;
}
.photoright100 { width: 100px; }
.photoright150 { width: 150px; }
.photoright200 { width: 200px; }
.photoright250 { width: 250px; }
.photoright300 { width: 300px; }
.photoright400 { width: 400px; }
.photoright100 p, .photoright150 p, .photoright200 p, .photoright300 p, .photoright250 p, .photoright400 p, .photoenclosed300 p
{
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: .7em !important;
    text-align: right;
    padding-right: 15px;
    padding-left: 15px;
    color: #333 !important;
    line-height: normal;
}
.photoleft100, .photoleft150, .photoleft200, .photoleft250, .photoleft300, img.left, .left
{
    clear: left;
    float: left;
    padding: 0px 10px .5em 0px;
}
.photoleft100 { width: 100px; }
.photoleft150 { width: 150px; }
.photoleft200 { width: 200px; }
.photoleft250 { width: 250px; }
.photoleft300 { width: 300px; }
.photoleft100 p, .photoleft200 p, .photoleft250 p, .photoleft300 p, .photoleft150 p
{
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: .75em;
    text-align: left;
    padding-right: 15px;
    margin-top: 3px;
    color: #666 !important;
    line-height: normal;
}
.photoright100 img, .photoright150 img, .photoright200 img, .photoright300 img, .photoright250 img, .photoright400 img, .photoenclosed300 img, .photoleft200 img, .photoleft300 img, .photoleft150 img, .photocenter img
{
    margin-bottom: 3px;
}

/* Table Specs */
table
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.75em;
    margin: 15px 0px 1em 0px;
    width: 99%;
    
}
table td ul, table td p
{
    font-size: 1em !important;
}
table td
{
    color: #333;
    padding: 4px;
    vertical-align: top;
}
th
{
    font-family: Arial, Helvetica, sans-serif;
    background-color: #666;
    color: #fff;
    font-weight: bold;
    padding: 4px;
}
th.right, td.right
{
    text-align: right;
    vertical-align: top;
    
    width: 15%;
}
tr.tint td, td.tint, table.schedule tr.tint th.right
{
    background-color: #eee;
}
table td ul li
{
    margin: 0px !important;
    padding: 0px 0px 5px 0px !important;
    vertical-align: top;
}


/* ************* */
/* Footer Styles */
/* ************* */
#footer
{
    clear: both;
    text-align: center;
    font-size: 0.9em;
    padding-top: 20px;
    margin: 0px;
}
body.homepage #footer
{
    padding-right: 10px;
}
#footer p
{
    color: #000;
    margin: 0px !important;
    padding: 0px !important;
}
#footer p.address
{
    font-weight: bold;
    margin-bottom: 0px;
    border-top: 1px solid #666;
    padding-top: 7px !important;
}
#footer p a:link, #footer p a:hover, #footer p a:visited { color: #900; }
address
{
    display: none;
}


/* ********************* */
/* Image Replace Classes */
/* ********************* */
.replace 
{ 
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-size: 1.2em;
}
.replace em 
{
    display: block;
    position: absolute;
    top: 0; 
    z-index: 1;
}
.replace a 
{
    cursor: hand;
    c\ursor: pointer;
}
.clear
{
    clear: both;
}

div.clear
{
    clear: none;
}
