/*
 * Style sheets for the webpage of Macolm MacIver's and 
 * Johannes Zimmer's research groups.
 *
 * To do: 
 *
 * - Change dimensions of navigation bar from px to em.
 * - Include z-layer in the navigation bar to make sure it is always
 *   underneath the text.
 * - Set font size in navigation bar in px, and also the line
 *   separation (line-width?) to make sure everything in the
 *   navigation bar is stated explicitely. Then compute the
 *   appropriate sice of the arc.
 *
 * History:
 * 4 May 05: Changed background colour to FFFFF3. JZ
 * 11/22/03: Define fifth color for main page; minor bug fixes. JZ
 * 9/7/03:   Changes to get correct colors for the subpages. JZ 
 * 8/23/03:  Bugfiz for Internet Explorer, to get(non-)scrolling part. JZ 
 * 7/31/03:  Fixing the dimensions of the navigation bar. JZ
 * 7/26/03:  Bugfix, automatic scaling of the arc, h1 with rule. JZ
 * 
 * 
 * These style sheets draw heavily from Michael Bader's style sheets
 * for the webpages for the Master's program 'Computational Science
 * and Engineering' (CSE), http://www.cse.tum.de/
 *
 * This code will be HTML 4.01 transitional. Michael told me that the
 * main obstacle for HTML 4.01 strict should be only the use of the
 * <center> tag. But without this, it is difficult to center an entire
 * table, say.
 *
 * 
 * Be careful not to introduce a comment within a comment, since this
 * results in an error. Use parenthesis (like this) for a comment
 * within a comment.
 *
 * Johannes Zimmer, 5/4/03. 
 */


/*
 * Read data for layout of the screen (won't be read by Netscape up to
 * version 4.x). The style sheet stylesheet-2.css contains the main page
 * layout, including the definition of the navigation bar. 
 */

@import url(stylesheet-2.css);


/* Choose font colors. Example: <em class="textcolor">, <h3
 * class="blue">. For now this feature is not used.
 * 
 * One could also use *orange instead of .orange. See 
 * http://www.netzwelt.com/selfhtml/css/formate/zentrale.htm
 */

.textcolor {color: #333333} /* Used for ordinary text */
.lightgrey {color: #999999} /* Used for main page header and highlighting */  
.blue {color: #2A689A}      /* Used for the research subpages */
.green {color: #80A82F}     /* Used for the people subpages */
.brown {color: #C48536}     /* Used for the publications subpages */
.purple {color: #A32B7E}    /* Used for the teaching subpages */

/* Any change of background-color requires a change of the navigation
 * bar /images/navig.gif, which uses the same colour scheme. Also, the
 * background colour is used in several instances in stylesheet-2.css, so
 * check for consistency. In addition, changes are necessary in
 * stylesheet-2.css. 
 */
 
.White {color: #FFFFF3}     /* as in www.edwardtufte.com */
.black {color: #000000}
.link1 {color: #666666}     /* Used for links and hover links */
.link2 {color: #777777}     /* Used for visited and visited hover links */
.linkactive {color: #C2353B} /* Used for active links */
.orange {color: #FF6600} /* Caltech's orange, now unused */


/* 
 * General layout of body (mostly overwritten by the specific settings
 * in the sections to come):
 * - Background color (or background image) 
 * - Font type and color 
 *
 * Attention: margin and padding are set to deal with Internet Explorer's 
 * bug to position 'fixed' elements properly. See stylesheet-2.css. 
 */

body {
/* Any change of background-color requires a change of the navigation
 * bar /images/navig.gif, which uses the same colour scheme. Also, the
 * background colour is used in several instances in stylesheet-2.css, so
 * check for consistency. In addition, changes are necessary in
 * stylesheet-2.css. 
 */
   background-color: #FFFFF3;
   /* background-image: url(back.gif); */
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: #000000;
   font-size: 11px; /* instead of '100%' */
   margin: 0;
   padding: 0 0 0 0
}

/* Note there is another h1 in the div section. This one here is for
 * the 'ordinary' headings in the text.
 */

h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:
18px; font-weight: bold; color: .blue;
/* #999999; */
text-decoration: none;
text-align: left
}

/* Note that the header rule is automatically included in h2. This
 * requires width="100%" to work for different browsers.  
 */

h2 { font-family: Verdana, Arial, Helvetica, sans-serif; color:
blue; text-decoration: none; font-size: 14px; font-weight: bold;
text-align: left; width: 100%; border-top-width: thin;
border-top-style: solid; padding-top:10px; border-color:#999999}

p { font-family: Verdana, Arial, Helvetica, sans-serif; color:
black; text-decoration: none; font-weight: normal; font-size: 11px;}

td { font-family: Verdana, Arial, Helvetica, sans-serif; color:
#333333; text-decoration: none; font-weight: normal; font-size: 11px;}

th { font-family: Verdana, Arial, Helvetica, sans-serif; color:
#333333; text-decoration: none; font-weight: bold; font-size: 11px;}

li { font-family: Verdana, Arial, Helvetica, sans-serif; color:
black; text-decoration: none; font-weight: normal; font-size:
11px; margin: 7px; line-height: 12px;}

select { font-family: Verdana, Arial, Helvetica, sans-serif; color:
#333333; text-decoration: none; font-weight: normal; font-size: 11px;}

option { font-family: Verdana, Arial, Helvetica, sans-serif; color:
#333333; text-decoration: none; font-weight: normal; font-size: 11px;}

input { font-family: Verdana, Arial, Helvetica, sans-serif; color:
#333333; text-decoration: none; font-weight: normal; font-size: 11px;}

textarea { font-family: Verdana, Arial, Helvetica, sans-serif; color:
#333333; text-decoration: none; font-weight: normal; font-size: 11px;}

a:link { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px; color: blue; text-decoration: none; font-weight: bold}

a:hover { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px; color: blue; text-decoration: underline; font-weight: bold}

a:visited { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px; color: purple; text-decoration: none; font-weight: bold}

a:visited:hover { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px; color: purple; text-decoration: underline; font-weight: bold}

a:active { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px; color: purple; text-decoration: none; font-weight: bold}

a.small { font-family: Verdana, Arial, Helvetica, sans-serif; color:
blue; text-decoration: none; font-weight: bold; font-size: 9px;}

a.small:link { font-family: Verdana, Arial, Helvetica, sans-serif;
color: blue; text-decoration: none; font-weight: bold; font-size: 9px;}

a.small:hover { font-family: Verdana, Arial, Helvetica, sans-serif;
color: purple; text-decoration: underline; font-weight: bold; font-size: 9px;}

a.small:visited { font-family: Verdana, Arial, Helvetica, sans-serif;
color: purple; text-decoration: underline; font-weight: bold; font-size: 9px;}


/* For quotations, creating a new paragraph for quotations. Useage:
   <p> A. U. Thor writes: </p> 
 
   <blockquote>
   Quotation
   </blockquote>
 */

blockquote {
   font-style: italic;
}


/* Layout of the address tag, which is the entire text in the footer */
address {
   color: black;
   font-size: 10px;
   font-style: normal;
   text-align: right;
   margin-right: 20px;
}


/* This is used in the <address> tag in the footer section */
.left {float:left;}                                                           
.right {float:right;} 


/* This is for formatted addresses in the text. Example: 
   <address class= "style">
     Johannes Zimmer<br>
     California Institute of Technology<br>
     Mail Stop 104-44<br>
     Pasadena CA 91125
   </address>
 */

address.style {
   color: #333333;
   margin-left: 3ex; 
   font-size: 11px;
   font-weight: normal;
   line-height: 110%;
   font-style: normal;
   text-align: left;
}


/* Images should have no border. Example:
   <p><img src="image.gif" alt="Imagetitle"></p> 
 */

img {
   border: none;
}


/*
 *  Style sheets for all kind of tables
 */

/* Captions. Example:
   <table> 
   <caption>Table Caption</caption>
   <tr> 
   <th> ... </th> </tr> </table> 
*/   
caption {font-size: 11px; color: #999999;}


/* Simple tables. Example:
   <center>
   <table class="simple">
    <tr> <th>Header 1</th>
	 <th>Header 2</th>
    </tr>
    <tr>
	 <td>Content 1</td>
	 <td>Content 2</td> 
    </tr>
    </table>
    </center>
 */

table.simple {
   border-style: solid;
   border-width: 2px;
   border-color: #999999;
}

table.simple th { 
   font-size: 11px;
   font-weight: bold;
   background-color: #FFFFF3;
   border-color: #999999;
   text-align: left;
   border-style: solid;
   border-width: 1px;
   padding: 5px;
}

table.simple td { 
   font-size: 11px;
   background-color: #FFFFF3;
   border-color: #999999;
   text-align: left;
   border-style: solid;
   border-width: thin;
   padding: 3px;
}


/* Tables for pure layout. These are the only tables without
 * borders. They are intended to help aligning two pictures next to
 * each other.
 */

table.layout {border-style:none;}

table.layout td {
   border-style: none;
   padding: 10px;
   text-align: center;
   vertical-align: middle;
}


/* Tables with a collection of links pointing to the following pages
 * (originally used at the bottom of the home page). We don't use it now. 
 * Example:
   <center>
   <table class="links">
    <tr> <th><a href="overview/index.html">Overview</a></th>
	 <th><a href="course/index.html">About the Course</a></th>
    </tr>
    <tr>
	 <td><a href="overview/cse.html">About CSE</a>,<br>
             <a href="overview/tum.html">About the TUM</a>,<br>
	 </td> 
    </tr>
    </table>
    </center>
 */

table.links {
   border-style: none;
   padding-left: 30px; /* Rather generous padding, but it looks ok */
   padding-right: 30px; /* Rather generous padding, but it looks ok */
}

table.links th {
   text-align: center;
   font-size: 11px;
   vertical-align: bottom;
   padding-top: 1em;
   padding-left: 30px; /* Rather generous padding, but it looks ok */
   padding-right: 30px; /* Rather generous padding, but it looks ok */
   color: #666666;
}

table.links td {
   text-align: center;
   vertical-align: top;
   font-size: 11px;
   color: #333333; /* Font for ordinary text */
}

/* Color for main links (main menus) */
table.links th a:link {color: #666666;}
table.links th a:visited {color: #777777;}

/* Color for ordinary links */ 
table.links a:link {color: #666666;}
table.links a:visited {color: #777777;}

/* Table for people (research group).
 */

table.people {
   width: 750px;
   border-style: none;  
}

table.people th {
   font-size: 11px; 
   line-height: 13pt; 
   text-align: left;
   vertical-align: top;
   color: #000000;
   background-color: #FFFFF3;
}

table.people td {
   font-size: 11px;
   text-align: left;
   vertical-align: top;
   padding: 3px;
   background-color: #FFFFF3;
}

table.people td.separator { 
   text-align: center;
   background-color: #FFFFF3;
}


/* Table for publications.
 */

table.publication {
   width: 500px;
   border-style: none;  
}

table.publication th.year {
   font-size: 12px;; 
   line-height: 15pt;
   text-align: left;
   color: #C48536; 
   background-color: #FFFFF3;
}

table.publication th {
   font-size: 11px; 
   line-height: 13pt; 
   text-align: left;
   vertical-align: top;
   color: #AAAAAA;
   background-color: #FFFFF3;
}

table.publication td {
   font-size: 11px;
   text-align: left;
   padding: 3px;
   background-color: #FFFFF3;
}

table.publication td.separator { 
   text-align: center;
   background-color: #FFFFF3;
}

table.publication hr {
   color: #C48536;
   background-color: #C48536; 
   /* Set color and background color to be the same since IE and Mozilla 
    * interpret this differently for hr. See
    * http://www.sovavsiti.cz/css/hr.html
    */
   border: 0px;
   height: 1px;
}

table.publication hr.separator {
   color: #999999;
   background-color: #999999; 
   /* Set color and background color to be the same since IE and Mozilla 
    * interpret this differently for hr. See
    * http://www.sovavsiti.cz/css/hr.html
    */
   border: 0px;
   height: 1px;
   width: 100px;
}

table.publication hr.whiteseparator {
   color: #FFFFF3;
   background-color: #FFFFF3; 
   /* Set color and background color to be the same since IE and Mozilla 
    * interpret this differently for hr. See
    * http://www.sovavsiti.cz/css/hr.html
    */
   border: 0px;
   height: 1px;
   width: 100px;
}


/* Table for schedules. See /academics/timetable.html for an example
 */

table.time {
   border-style: solid;
   border-color: #999999;
}

table.time td { 
   background-color: #FFFFF3;
   text-align: center;
   border-style: solid;
   border-color: #999999;
   border-width: thin;
}

/* Now we define strange colors for different subjects. Example: 
   <td class="compMech"> Text </td>
table.time td.compMech { 
   background-color: #FFCCFF;
}

table.time td.parComp { 
   background-color: #CCFFCC;
}

table.time td.compPhys { 
   background-color: #FFCCCC;
}

table.time td.compElec { 
   background-color: #FFFFCC;
}

table.time td.compFluid { 
   background-color: #CCCCFF;
}

table.time td.optLect { 
   background-color: #CCCCCC;
}

table.time th { 
   font-weight: bold;
   background-color: #FFFFF3;
   text-align: center;
   border-style: solid;
   border-color: #999999;
   border-width: thin;
}


/*
 * Images (with text floating around) and captions: 
 */

/* Image with caption 
 * This is proably not the best way of implementing it. The image is
 * 'display: block', which means it will not be centered, while the
 * caption is centered. Michael suspects that ' text-align: center'
 * works only for objects that are declared as 'display: inline' 
 */

div.capImage {
   text-align: center;
   font-size: 9px;
   color: #999999;   
}

div.capImage img {
   display: block;
   margin-left: 5px;
   margin-top: 5px;
   margin-right: 5px;
   margin-bottom: 5px;
}


/* Flushleft image with caption, text floating around it on the
 * right. See div.rightCapImage below for an example.
 */

div.leftCapImage {
   float: left;
   text-align: center;
   font-size: 9px;
   color: #999999;   
}

div.leftCapImage img {
   display: block;
   margin-left: 0px;
   margin-top: 0px;
   margin-right: 10px;
   margin-bottom: 5px;
}


/* Flushright image with caption, text floating around it on the
 * left. Example:
    <div class="rightCapImage">
      <img src="pics/pictitle.jpg" alt="Picture title"
       width=256 height=189>
      Caption text
    </div>
    <p> Text floating around goes in here.</p>
 */

div.rightCapImage {
   float: right; /* floating object, positioned to the right. */
   text-align: center; /* Text (for caption) is centered */
   font-size: 9px;
   color: #999999;
}

div.rightCapImage img {
   display: block; 
   /* Explanantion by Michael for the last line: the image is to be
    * integrated in text flow; shouldn't be inline object */
   margin-left: 10px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 5px;
}


/*
 * Lists of links, with a small hand instead of bullets. Useage:
   <ul class="links">
   <li> Item
   </ul>
 */

ul.links {
   color: #777777;
   margin-top: 2em;
   margin-left: 4em;
   list-style-image: url(http://www.mechmat.caltech.edu/~zimmer/pointer_grey.gif);
   font-weight: bold;
   font-size: 11px;
   line-height: 33px;
}


/*
 *  Style for paragraphs with headings (originally for FAQ). Example: 
    <p class="faq">
    <em>Title</em> 
    Text
    </p>
 */

p.faq {
}

p.faq em {
   display: block;
   font-weight: bold;
}


/* Some help to do the formatting. Example (from
 * http://www.cse.tum.de/overview/cse.html):
   <p class="nextpage">
   <img src="/pics/pointer.gif" width=27 height=17 ALT="->"
   ><a href="tum.html">About the TUM</a>
   </p>
 */

.inline {display: inline;}

.center {text-align: center;}

.nextpage {text-align: right; font-size: 11px;}


/*
 *  Special formatting for page layout (compatible with Netscape)
 */


/* Overall page header, to be used in 
   <div id="header"> 
      <h1> ... </h1>
 * </div>
 * 
 * Explanation: the header h1 we defined above is the ordinary header
 * h1 in the text. Here, we define (even if it is not used at the
 * moment)
 * <div class="header">
 *   <h1>Title</h1>
 * </div>
 * 
 * There may be no more that one id="..." on every page. Therefore, we
 * define the elements #header, #footer, #(scroll)content, #navigate,
 * #textarea as id's, since every page has only one header, footer,
 * content, navigation bar etc. These objects are defined in
 * stylesheet-2.css.
 * 
 * A class="...", however, describes only that format class of a
 * object, regardless of if there is another object of the same tye.
 * 
 * More precizely: 'class' is moreless just a subtype of an object, as
 * in an object oriented programming language. Consequently, there can
 * be arbitrarily many of them on any page.
 * A 'id ="..."', however, is a unique identifier of an object. For
 * example, it is not possible to have <div id= "blub"> und 
 * <p id ="blub"> on the same page. This makes 'id' very suited for
 * elements appearing only once on a page.
 */

#header h1 {
   border-top-style: none;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: #999999;
   font-size: 18px;
   margin: 5px;
   padding: 0px;
}

#header h1.research {
   color: #2A689A;
}

#header h1.people {
   color: .blue;
/* #80A82F; */
}

#header h1.publications {
   color: #C48536;
}

#header h1.teaching {
   color: #A32B7E;
}

#header h2 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: #999999;
   font-size: 12px;
}

/* Style for the University and the department in the header */
#header p {
   color: #999999;
   font-size: 14px; 
   font-variant: small-caps;
   /* letter-spacing was originally -2pt to get the symbol >> look
    * more arrow-like; this is now obsolete since we use &raquo;
    * 1p is as for the links 
    */
   letter-spacing: 1pt; 
   font-weight: bold; 
   padding-bottom: 5px;
   border-bottom-style: solid;
   text-align: left;
}

/* The following works simultaneously for every kind of links (visited, ...) */
#header a { 
   color: #666666;
   font-size: 14px; 
   font-variant: small-caps; 
   font-weight: bold; 
   letter-spacing: 1pt;
}


#footer a { 
   color: black;
   font-size: 7px; 
}

/* To hide headings. Some elements e only shown if the browser does
 * not support style sheets or if that functionality is switched
 * off. Example: <hr class="hide">. The display: none in the style
 * sheet prevents these elements from being displayed.
 */ 

h1.hide {
   font-size:12px;
   text-align: left;
   color: #333333;
}

#header img.left {
   float: left;
}

#header img.right {
   float: right;
}


/* For a menue at the top of the page. Example:
   <div class="topmenue">
   <a href="/index.html">Home</a> |
   <a href="/overview/">Overview</a> |
   <a href="/misc/">Misc</a>
   </div>
 */

div.topmenue {
   width: 100%;
   color: #333333;
   background: #FFFFF3;   
   text-align: center;
   font-size: 12px;
   padding: 0px;
   padding-top: 5px;
   padding-bottom: 5px;
}


/* Color of links in the top menue. To keep things simple, these links
 * do not change color when hovering over them, or after being
 * visited. 
 */

div.topmenue a {
   color:  #666666;
}


/*
 * Style for printouts: remove menu for navigation, and choose font
 * size and printable area in a reasonable way. 
 */

@media print {
   #header {margin-bottom:2em;}
   #header h1 {font-size: 12pt;}
   #header h2 {font-size: 12pt;}
   div.topmenue {display:none;}
   #footer{display:none;}
   #content {position:relative;}
   #content > br {display:none;}
   #navigate {display:none;}
   #textarea {margin: 0pt;max-width:80em;font-size:11pt;}
   #textarea p {line-height:120%;}
}