/*
 * Style sheets for the webpage of Kaushik Bhattacharya's group, 
 * http://www.mechmat.caltech.edu
 *
 * To do: 
 *
 * - 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:
 * 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 group2.css contains the main page
 * layout, including the definition of the navigation bar. 
 */

@import url(group2.css);

/* Choose font colors Example: <em class="textcolor>, <h3
 * class="orange">. 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: #515151} /* Used for highlighting */  
.orange {color: #FF6600} /* orange */
.white {color: #FFFFFF}
.black {color: #000000}
.link1 {color: #666666}
.link2 {color: #999999}

/* We use the following colors. Attention: comments in this section
 * have to be in parenthesis, since we are already in a commented
 * region.
 * textcolor #333333 (for ordinary text)
 * lightgrey #515151 (e.g., for highlighting )
 * orange #FF6600
 * white #FFFFFF
 * black #000000
 * link1 #666666
 * link2 #999999
*/


/* 
 * General layout of body (mostly overwritten by the specific settings
 * in the sections to come):
 * - Background color (or background image) 
 * - Font type and color 
 */

body {
   background-color: #FFFFFF;
   /* background-image: url(back.gif); */
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: #000000;
   font-size: 11px; /* instead of '100%' */
}


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

/* Note there is another h1 in the div section. This one here is for
 * the 'ordinary' headings in the text. NOte that the header rule is
 * automatically included in h1. This requires width="100%" to work
 * for different browsers.  */

h2 { font-family: Verdana, Arial, Helvetica, sans-serif; color:
#FF6600; text-decoration: none; font-weight: bold; font-size: 11px;
text-align: center}

/* The Caltech style sheet www.caltech.edu/aux/main.css uses
 * lightgrey (#515151) for h2 */

p { font-family: Verdana, Arial, Helvetica, sans-serif; color:
#333333; 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:
#333333; text-decoration: none; font-weight: normal; font-size:
11px;}

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: #666666; text-decoration: none; font-weight:
bold}

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

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

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

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

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

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

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

a.small:hover { font-family: Verdana, Arial, Helvetica, sans-serif;
color: #999999; text-decoration: none; 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 in the footer section. */
address {
   color: #515151;
   font-size: 11px;
   font-style: italic;
   text-align: right;
   margin-right: 10px;
   margin-left: 5px;
}


/* 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: #FF6600;}


/* 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: #515151;
}

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

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


/* Tabeles 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: #FF6600;
}

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

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

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


/* Table for publications.
 */

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

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

table.publication th {
   font-size: 10pt; 
   line-height: 13pt; 
   text-align: left;
   color: #AAAAAA;
   background-color: #FFFFFF;
}

table.publication td {
   font-size: 10pt;
   text-align: left;
   padding: 0px;
   background-color: #FFFFFF;
}

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

table.publication hr {
   color: #FF6600;
   background-color: #FF6600; 
   /* 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: #515151;
   background-color: #515151; 
   /* 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: #FFFFFF;
   background-color: #FFFFFF; 
   /* 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: #515151;
}

table.time td { 
   background-color: #FFFFFF;
   text-align: center;
   border-style: solid;
   border-color: #515151;
   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: #FFFFFF;
   text-align: center;
   border-style: solid;
   border-color: #515151;
   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: #FF6600;   
}

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: #FF6600;   
}

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: #FF6600;
}

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: #888888;
   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 some time ago is used for 
 * <div class="header">
 *   <h1>Überschrift</h1>
 * </div>
 * 
 * There may be no more that one id="..." on every page. Therefore, we
 * define the elements #header, #footer, #content, #navigate, #textarea
 * as id's, since every page has only one header, footer, content,
 * navigation bar etc.
 * 
 * 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: #FF6600;
   font-size: 18px;
   margin: 5px;
   padding: 0px;
}

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


/* 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: white;   
   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 menue 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%;
   }
   
}