@charset "utf-8";

/**
-------------------------------------------------------------
	Stylesheet für: http://www.hussel.com/
	Medien:         Bildschirme und Projektoren
	Autoren:        Matthias Hänßle und Kristian Augustin
------------------------------------------------------------- */

/**
-------------------------------------------------------------
	Regeln für allgemeine Elemente --
	Standard-Elementtypen ohne Bezeichner oder Klasse
------------------------------------------------------------- */

/* Alle kritischen Werte für alle Elemente mit Standardwerten instanziieren.
   Wo anders gewünscht, müssen die Werte explizit überschrieben werden. */

* {} /* Safari-Bugfix */

* {
	margin: 0;
	padding: 0;	
	border-spacing: 0;
	border-collapse: collapse;
	vertical-align: top;
}


/* Font-Einbettung */
@font-face {
	font-family: 'FeltpenComMedium';
	src: url('../fonts/feltpencom-medium-webfont.eot');
	src: local('☺'), url('../fonts/feltpencom-medium-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'BritannicComExtraLight';
	src: url('../fonts/britanniccom-extralight-webfont.eot');
	src: local('☺'), url('../fonts/britanniccom-extralight-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}




/* Schriftgröße kontrollieren */
/* Im Quirkmodus werden Schrifteigenschaften nicht in Tabellenzellen hinein
   vererbt. Die Elementtypen 'td' und 'th' werden somit explizit aufgeführt.
   An dieser Stelle nicht die Einheit 'em' verwenden. */
body, td, th {
  font: normal 75%/120% Arial, Verdana, sans-serif; /* MH */
}
/* Für Browser im Standardmodus müssen die Schriftgrößen für Zellen wieder
   auf 100 Prozent gesetzt werden. Dafür wird ausgenutzt, dass kein Browser
   im Quirkmodus Maskierung versteht und die folgende Regel daher ignoriert. */
td, th {
  f\ont-size: 100%;
}

body {
	color: #848384; /* MH */
	background-color: white;
	/* Gewährleistet, dass positionierte Elemente im IE beim Verändern der
	   Fenstergröße auch wirklich neu und korrekt positioniert werden. */
  position: relative;
}

/** Links und Anker
------------------------------------------------------------- */
a:link {
	color: #848384; /* MH */
	text-decoration:underline; /* MH */
}
a:visited {
	color: #848384; 
	text-decoration:underline; /* MH */
}
a:hover, a:focus {
	color: #848384; 
	text-decoration:underline; /* MH */
}
a:active {
}

/* Rahmen und verlinkte Bilder unterdrücken. Für alle Browser außer ältere
   Opera reicht der Selektor 'a img'. */
a:link img,
a:visited img,
a:hover img,
a:focus img,
a:active img {
  border: 0;
}


/** Überschriften
------------------------------------------------------------- */ 
h1, h2, h3, h4, h5, h6 {
  margin: 1em 0 1em 0;  
}
h1 {
  margin: 0;
  padding: 0;
  font-size: 1.5em;  
}
h2 {
  font-size: 1.4em;
}
h3 {
  font-size: 1.2em; 
}
h4 {
  font-size: 1em; /* MH */ /* Nicht kleiner als 1em setzen */
}
h5 {
  /* MH nicht nötig */
}
h6 {
  /* MH nicht nötig */
}


/** Absätze
------------------------------------------------------------- */
p {
  margin: .8em 0;
	line-height:130%;
}
.chapter {
	height: 1%; /* has Layout aktivieren */
  margin-top: 1.5em;
	padding-bottom: 1.5em;
	border-bottom: 1px solid #e1e1e1;
	margin-bottom: 0.8em;
	overflow: hidden;
}

/** Tabellen
------------------------------------------------------------- */ 
table {
  margin: 1em 0;  
}
caption {
  margin: 2em 0 1em 0;
  font-weight: bold;
}
th {
  text-align: center;
  font-weight: bold; 
}

/* Alternierende Zeilenfärbung */
tr.odd td {
}
tr.even td {
}

/* Tabellen in Formularen */
form table td {
  padding: 0 10px 5px 0; 
}


/** Bilder
------------------------------------------------------------- */
img {
  vertical-align: bottom;
}

/** Listen
------------------------------------------------------------- */
ol, ul {
  margin: 1em 0 1em 25px;
}
ul li {
  /* Hier Bullet per 'list-style-image' oder 'background-image' setzen. */
}

dl {
  margin: 1.5em 0;
}
dt {
  margin-top: 1em;
}
dd {
}

/** Formulare
------------------------------------------------------------- */

/* Es wird davon ausgegangen, dass Steuerelementen vom Typ 'input' immer
   eine Klasse entsprechend des Wert ihres 'type'-Attributs verliehen
   wird, also zum Beispiel '<input type="radio" class="radio" ... />'. */
form {
  margin: 1em 0;
}

select,
input,
textarea {
  /* Für Safari */
  font-size: 99%;
	
	color: #848384; /* MH */
}

input,
textarea { /* verärgert Input type Image */
  /* padding: 1px 3px; */
}

input {
  vertical-align: middle;
}

textarea {
  font-family: Verdana, sans-serif;
  margin: 0;
}

/* Für fokussierte Steuerelemente */
input:focus,
textarea:focus,
select:focus {
}

fieldset {
  border: 1px solid black;
  margin: 1em 0;
  padding: 5px 15px 15px 15px;
}
fieldset div,
fieldset p {
  padding: .5em 0 .2em 0;
}

legend {
  color: black; /* Schriftfarbe explizit setzen */
  background-color: white;
  font-weight: bold;
  padding: 1px 5px;  
}

optgroup {
  padding: 5px 0;
  font-style: normal;
}
option {
  padding: 0 5px 0 0;
}
optgroup option {
  padding: 0 5px 0 15px;
}


/** Präformatierter und Quelltext
------------------------------------------------------------- */
pre {
  font-family: "Courier New", monospace;
  font-size: 110%;
  line-height: 1.2;
  margin: 1.5em 0;
}
code {
  font-family: "Courier New", monospace;
  font-size: 110%;
  font-style: normal;
  vertical-align: baseline;
  padd\ing: 0 3px;
}
pre code {
  font-size: 1em;
}





/**
-------------------------------------------------------------
	Regeln für besondere Bereiche --
	Spezielle Seitenelemente, häufig durch Container einer
	bestimmten ID gruppiert
------------------------------------------------------------- */

/* Das Element mit der ID 'top' stellt den Zielanker für Links
   zum Seitenanfang dar. Im Allgemeinen handelt es sich dabei
   um einen Container, den man sonst mit 'head' bezeichnen würde. */
#top {
}

/** Logo
------------------------------------------------------------- */
#logo {
}

/** Hauptmenü
------------------------------------------------------------- */

/* Navigationsbereich sollten wie folgt realisiert werden:

   <div id="nav">
     <ul>
       <li><a>foo</a></li>
       <li><strong title="Hier befinden Sie sich gerade.">bar</strong></li>
       <li><a>qux</a></li>
     </ul>
   </div> */

/* Es ist üblich, Links in Navigationsbereich nur zu unterstreichen,
   wenn Sie mit der Maus berührt werden oder den Fokus haben. */
#nav a {
  text-decoration: none;
}
#nav a:hover, #nav a:focus {
  text-decoration: underline;
}


/** Bereichsmenü
------------------------------------------------------------- */
#subnav {
}


/** Ariadne-Faden
------------------------------------------------------------- */

/* Die Brotkrumen-Navigation sollte wie folgt realisiert werden:

   <div id="ariadne">
     <ol>
       <li><a>foo</a></li>
       <li><a>bar</a></li>
       <li><strong title="Hier befinden Sie sich gerade.">qux</strong></li>
     </ol>
   </div> */
#ariadne {
}


/** Content
------------------------------------------------------------- */
#content {
}

/* Häufig folgen an dieser Stelle weitere Regeln für die Gestaltung
   von Sidebars, Teaser- und Newsbereichen etc. */


/** Fußzeile
------------------------------------------------------------- */

/* Üblicherweise steht die Fußzeile unterhalb aller anderer Elemente. */
#footer {
  clear: both;
}



/**
-------------------------------------------------------------
	Regeln für spezielle Elemente
------------------------------------------------------------- */

/* Zwischenlinien, -überschriften und -texte, die auf dem Bildschirm
   nicht wiedergegeben werden sollen, aber wichtig für die
   dokumentinterne Struktur sind und die Bedienung der Seite bei
   Ausgabe durch assistive Technologien erleichtern. */
.invisible {
  position: absolute;
  left: -9999px; 
}

/* Skiptlinks zur einfacheren Navigation mithilfe assistiver Technologien
   wie beispielweise Screenreadern. Denkbar sind auch einzelne, nicht
   gruppierte Links der Klasse 'skiplink'.  */
#skiplinks {
  
}

.clear {
	clear: both;
}

/**
-------------------------------------------------------------
	Regeln für spezielle Dokumente
------------------------------------------------------------- */



/**
-------------------------------------------------------------
	Browserhacks
------------------------------------------------------------- */
