/* 
 * Styles for general elements 
 */

BODY { 
    margin: 0;
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 1.0em;       /* 1.2em matches the original 12pt */
    color: black;
    background: white;
    background-image: url(/images/torus.gif);
    background-position: top left;
    background-repeat: no-repeat; 
}

CODE, KBD, PRE, SAMP {
    font-family: monospace
} 

A:active  {
    text-decoration: none;
    color: #6600CC;
}

A:link    {
    text-decoration: none;
    color: #6600CC;
}

A:visited {
    text-decoration: none;
    color: #9933FF;
}

A:hover   {
    text-decoration: underline;
    color: #6600CC;
}

H1 { 
    font-size: 150%;
    line-height: 180%;
    font-weight: bold;
    color: #330066; 
    clear: left; /* This makes sure that the heading starts on its own line if there are floats around */
}

H2 {
    font-size:  120%;
    font-weight: bold;
    color: #330066;
}

H3 { 
    font-size: 100%;
    font-weight: bold;
    color: #000000; 
}

H4 { 
    font-size: 100%;
    font-weight: normal;
    color: #330066; 
}

DT { 
    font-weight: bold; 
}

UL { 
  font-size: 100%;
  list-style: square; 
  color: #330066;  
}


UL UL { 
  font-size: 83%;    /* 10pt / 12pt */
}

UL UL UL { 
  font-size: 67%;   /* 8pt / 12pt */
}

STRONG { 
    font-weight: bold;
}

/* Make all images border-less */
img {
    border: 0;
}

ol li {
    margin-top: 0.5em;
}

/* 
 * Styles for unique elements 
 */

/* Style for the top-most logo/banner */
#top_logo {
    height: 15px;
    position: absolute;
    top: 0;
    right: 0;
}

/* Provide a colored box that matches the color of the top logo image.
   If the window is larger than the top logo image, then the box will 
   fill the rest of the space gracefully. */
#top_logo_background {
    background-color: #052273;
    height: 15px;       /* Matches the top logo image height exactly */
}

/* Place the top logo image overtop of the top_logo_background div */
#top_logo {
    position: absolute;
    right: 0;
    top: 0;
    border: 0;
}

/* Style for the naviational menu */
#menu {
    /*font-family: Frutiger, Arial, Helvetica, Geneva, sans-serif;*/
    font-family: Arial, Helvetica, Geneva, sans-serif;
    text-align: right;
    color: #330066;

    position: absolute;
    top: 15px;  /* Should match the height of the top logo image */
    left: 0;

    width: 152px;   /* Matches the width of the navigational logo image */
    border: 0px solid #000; 
    margin: 0em 0em 0em 0em;
    padding: 0.5em;
}

#menu a:link, #menu a:visited {
    color: #330066;
}

#menu a:hover   {
    text-decoration: none;
    color: #6600CC;
}

#menu #list {
    list-style: none;
    font-weight: bold;
    line-height: 120%;
}

#menu #sublist {
    list-style: none;
    font-weight: normal;
}

#menu #contact_address {
    color: #330066;
    font-size: small;
    font-weight: normal;
    line-height: 120%;
}

/* Main section */
#main {
    margin-left: 230px;  /* This should be slightly larger than the menu width */
    margin-right: 1em;
}

/* 
 * Styles for element classes 
 */

.listitem { 
    font-size: 100%;
    font-weight: normal; 
    color: #000000; 
}

.contact { 
    font-family: Arial, Helvetica, sans-serif; 
    font-weight: bold;
    font-size: small;
    color: #330066; 
}

.authors { 
    font-size: small;
    font-style: normal;
}

.publication { 
    font-size: small;
    font-style: italic;
}

.caption {
    font-size: small;
}

.captioned_image {
    float: right;
    clear: right;
    margin: 1em 0em 1em 1em;
    text-align: center;
    font-size: small;
}

.centered_image {
    display: block;
    margin: 1em auto 1em auto;
}

/* Attributes for the list of faculty photos and names */
.faculty {
    float: left;
    width: 110px;   /* Should match that of the photos, plus some extra */
    text-align: center;
}

.student {
    float: left;            /* This keeps the photo left of the text, but allows the text to flow down the side of the photo if there is not enough room. */
    border: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;        /* Keep the text on the left from getting too close */
    padding-right: 0.5em;   /* Separate the text on the right by a small amount */
}

.float_right {
    float: right;
}

.side_image {
    float: right;
    clear: right;
    margin: 1em 0em 1em 1em;
}

/* This is a list of 100px images and short text descriptions.
*/
.big_image_list {
    list-style-type: none;      /* Nuke the list item bullet */
    padding-left: 0;            /* Nuke the indentation */
    margin-left: 0;
}

.big_image_list li {
    padding: 0.5em;
    clear: left;                /* Make sure previous images don't overlap this list item */
}

.big_image_list li a {
    display: block;
    line-height: 100px;         /* This should match the height of the images used */
}

.big_image_list li img {
    float: left;
    margin-right: 1em;
}

/* A simple trick to split a list of people and affiliations 
   into people on the left side, affiliations on the right. 
   The font sizes of the dt and dd entries must match.
   */
.people_affiliations dl {
    margin-left: 0%;
    margin-right: 3%;
}

.people_affiliations dt {
    float: left; 
    font-weight: normal;     /* Previously defined as bold */
}

.people_affiliations dd {
    text-align: right;
    font-style: italic;
}