/*
 * Style sheets für die Website http://www.dasraetsel.de/
 */

/*
 *  Angaben für grundlegendes Seiten-Layout
 */

#header {
   position:static;
   text-align:center;
}

#footer{
   bottom:0px;
   width:100%;
   font-size:80%;
   margin-top:20px;
   padding-top:15px;
   padding-bottom:15px;
}

#content {
   position:relative;
}

#content br {
   margin-top:-10px;
}

#navigate {
   position: absolute;
   left:0px;
   top:0px;
   width:140px;
   margin-top:0px;
   padding:5px;
}

#textarea {
   margin-left: 140px;
   padding-left:10px;
   padding-top:5px;
   padding-right:10px;
   max-width:80em;
}

/*
 * Allgemeines für body-Element:
 * - Hintergrundfarbe bzw. -bild
 * - Schriftart und -farbe:
 */
body {
   background-color:#ffffff;
   font-family:Helvetica,sans-serif;
   color:#000000;
   font-size:100%;
}

/* Schriftfarben Blau, Rot, Gruen und Grau festlegen */

.blau {color:#0000ff;}
.rot {color:#ff0000;}
.gruen {color:#00ff00;}
.grau {color:#888888;}

/* Überschriften sind immer fett, die wichtigeren
   sind zudem TUM-blau und zentriert */

h1,h2,h3
{color:#0077cc;}

h4,h5
{color:#888888;}

h1,h2
{font-weight:bold;text-align:center;}

h3,h4,h5,h6
{font-weight:bold;text-align:left;}

/* Schriftgrößen der Überschriften: */

h1 {font-size:240%;}
h2 {font-size:160%;}
h3 {font-size:140%;}
h4 {font-size:120%;}
h5 {font-size:110%;}
h6 {font-size:100%;}

/*
 *  Formate der grundlegenden Tags:
 */

p {text-align:left;line-height:118%;}

p.comment {
  text-align:left;
  font-size:80%;
  line-height:118%;
}

li {text-align:left;line-height:118%;}

li,dt,dd {
   margin-bottom:0.5em;
}

li ul,ol,dl {
   margin-top:0.5em;
}

dd ul,ol,dl {
   margin-top:0.5em;
}

strong {font-weight:bold;color:#0077cc;}

a:link {color:#0077cc;}
a:visited {color:#0077cc;}
a:hover {color:#0077cc;}
a:active {color:#0077cc;}


quote {
   font-style:italic;
}

blockquote {
   font-style:italic;
}

address {
   font-style:italic;
   text-align:right;
   margin-right:10px;
}

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

/*
 *  Style-Sheets für Tabellen aller Art
 */

caption {font-size:80%;color:#0077cc;}

/* Tabellen für normale Info: */

table {
   border-style:none;
}

table td,th {
   border-style:none;
}


table.data {
   border-style:solid;
   border-width:thin;
}

table.data th {
   padding:0.2em;
   padding-left:0.5em;
   padding-right:0.5em;
   padding-top:0.2em;
   padding-bottom:0.2em;
   border-style:solid;
   border-width:thin;
}

table.data td {
   padding:0.2em;
   padding-left:0.5em;
   padding-right:0.5em;
   padding-top:0.2em;
   padding-bottom:0.2em;
   border-style:solid;
   border-width:thin;
}


/* Tabellen für reines Layout */

table.layout {
   border-style:none;
}

table.layout > td,th {
   border-style:none;
   padding:20px;
   text-align:center;
   vertical-align:top;
}

td.layout, th.layout {
   border-style:none;
   padding:20px;
   text-align:center;
   vertical-align:top;
}


/* Tabellen für Verweis-Übersicht auf folgende Seiten */

table.links {
   border-style:none;
   padding-left:30px;
   padding-right:30px;
}

table.links th {
   text-align:center;
   font-size:24px;
   vertical-align: bottom;
   padding-top:1em;
   padding-left:30px;
   padding-right:30px;
   color:#0077cc;
}

table.links td {
   text-align:center;
   vertical-align:top;
   font-size:20px;
   color:#888888;
}

table.links a:link {color:#888888;}
table.links a:visited {color:#888888;}

table.links th a:link {color:#0077cc;}
table.links th a:visited {color:#0077cc;}



/*
 * (umflossene) Bilder mit Bildunterschriften
 */

/* Bild mit Bildunterschrift */

div.capImage {
   text-align:center;
   font-size:80%;
   color:#000000;
}

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

/* linksbündiges Bild mit Bildunterschrift,
   wir vom Text umflossen */

div.leftImage {
   float:left;
   text-align:center;
   font-size:80%;
   color:#0077cc;
}

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

/* rechtsbündiges Bild mit Bildunterschrift,
   wir vom Text umflossen */

div.rightImage {
   float:right;
   text-align:center;
   font-size:80%;
   color:#0077cc;
}

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

/*
 * Link-Listen auf Unterseiten
 */

ul.links {
   margin-top:1em;
   margin-left:2em;
   list-style-image:url(http://www.cse.tum.de/pics/pointer.gif);
   font-size:120%;
   line-height:140%;
}

ul.links li {
   margin-top:1em;
}

/* Formatierungshilfen */

.inline {display:inline;}

.center {text-align:center;}

.center table{
  margin-left:auto;
  margin-right:auto
}

.left {float:left;}
.right {float:right;}
.clear {clear:both;}

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

.frage {
   width:90%;
   margin-left:5%;
}


/*
 *  Spezielle Formatierungen für Seiten-Layout
 */

/* Versteckte Elemente für nicht-CSS-fähige Browser */

.hide {display:none;}

/*
 * Style-Angaben zum Ausdrucken der Webseiten:
 * Navigationsmenues werden entfernt, Schriftgröße und druckbarer Bereich
 * auf entsprechend vernünftige Werte gesetzt.
 */
@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%;
   }

}