/*  =========================================================

akademie.de - Artikel - CSS: Styleguide fuer Stylesheets

Datei: styleguide.css

Media: screen, projection



Datum: 20. Juli 2006

Autor: Bernd Schiel

Mail:  bernd.schiel@pressebuero-etcetera.de

Web:   http://www.pressebuero-etcetera.de



1. Allgemeine Selektoren

   - Block-Elemente

   - Inline-Elemente

   - Allgemeine Klassen

   - Non-Layout IDs



2. Layoutbereiche

   - Wrapper

   - Kopfbereich

   - Navibereich

   - Textbereich

   - Fussbereich



3. Spezielle Seiten

   - Kontaktformular



========================================================== */



/* ===============================



   1. Allgemeine Selektoren



=============================== */



* { /* Kalibirierung von Abstaenden, Little Boxes, S. 76 */

  padding: 0;

  margin: 0;

}



html { /* In Firefox Rollbalken erzwingen, Little Boxes S. 77 */

  height: 101%;

}



body {

  color: #000;

  background-color: #fff;

  font-family: Verdana, Arial, Helvetica, sans-serif;

  font-size: 100.1%;

  padding-top: 10px;

  text-align: center;

}



/* ===============================

   =Block-Elemente

=============================== */



h2 {

  font-size: 130%;

  margin-bottom: 1em;

}



p,

ul,

ol {

  margin-top: 0 ;

  margin-right: 0 ;

  margin-bottom: 1em ;

  margin-left: 0;

}



ul ul {

  margin: 0;

}



li {

  margin-top: 0 ;

  margin-right: 0;

  margin-bottom: 0;

  margin-left: 1em;

}



address {
  text-align: center;
  font-size: 80%;
  font-style: normal;
  letter-spacing: 2px;
  line-height: 1.5em;
}



/* ===============================

   =Inline-Elemente

=============================== */

strong {

  color: #4e9b88;

}



a {

  text-decoration: underline;

}



a:link {

  color: #000;

}



a:visited {

  color: #c66;

}



a:hover, a:focus {

  text-decoration: underline;

}



a:active {

  color: #fff;

  background-color: #d90000;

}



a.skiplink {

  display: none;

}



/* ===============================

   Classes allgemeiner Art

=============================== */



.bildlinks {

  float:left;

  padding: 3px;

  border: 5px solid #ccc;

  margin-right: 10px;

  margin-bottom: 10px;

}



.bildrechts {

  float:right;

  padding: 3px;

  border: 5px solid #ccc;

  margin-bottom: 10px;

  margin-left: 10px;

}



/* ========================================



  =2. LAYOUTBEREICHE



========================================= */



#wrapper {

  width: 700px !important;
  border: 1px solid gray;
  padding: 0;
  margin: 0 auto;
  background: #fff;
  color: #000;
  text-align: left;
}





/* ===============================

   KOPFBEREICH

=============================== */



#header {
  width: 100%;
  height: 90px;
  padding: 0;
  margin: 0;
  border: 0;
}



#header a img {
  float: right;
  width: 235px;
  margin-right: 10px;
  margin-top: 5px;
  border: 0;
}



 #header h1 {
  text-indent: -9999px;
  width: 200px;
  float: left;
}

#header a {
	border: 0;
}



/* ===============================

   =SUBHEADER/SLOGAN/BROTKRUMEN

=============================== */



#feature {
  clear: both;
  background: white;
  width: 100%;
  margin: 0;
  text-align: center;
  padding: 5px 0 5px 0;
 }



#feature h2 {
  width: 100%;
  font-family: "times new roman", serif;
  color: #990000;
  font-size: 350%;
  font-style: italic;
  margin: 0;
  padding: 0 0 5px 0;
 }

#feature h2.fortsetzung {
	margin: 0;
	margin-bottom: 40px;
}




p.brotkrumen {
  float: left;
  width: 100%;
  font-size: 65%;
  margin: 0;
  padding: 10px 0 20px 0;
  text-indent: 10px;
}



/* ===============================

   =NAVIBEREICH

=============================== */



#list_top {
  float: left;
  background-color: #e7e7e7;
  width: 100%;
  margin: 0 0 20px 0;
  padding: 0;
  color: inherit;
  border:0;
 }



#list_top ul {

  margin: 0 10px 0 0;

  padding: 0;

  list-style: none;

  float:right;

  background:inherit;

  position:relative;

  right:2px;

  border-left: 1px solid white;

}



#list_top ul li {

  margin: 0;

  padding: 0;

  float:left;

  text-align: center;

  border-right: 1px solid white;

}



#list_top ul li a {

  margin: 0;

  display: block;

  padding: 5px 15px;

  background-color: #e7e7e7;

  color: black;

  border: 0;

  font: bold 11px Tahoma, sans-serif;

  text-decoration: none;

 }



#list_top ul li a:hover {

  background: white;

  color: #000;

}



/* ===============================

   =TEXTBEREICH

=============================== */



#content {

  float: left;

  width: 100%;

  background: #fff;

  margin: 0;

  padding: 0;

  font-family: georgia, "times new roman", serif;

  font-size: 80%;

}



#content p {

  float: right;

  width: 490px;

  margin: 0 10px 20px 0;

  clear: right;

}



#content span.thema img {

  margin: 0;

  float: left;

  margin-right: 10px;

  width: 170px;

 }



#content span.thema2 img {

  position: relative;

  top: 40px;

  left: 0;

 }



 #content h3 {

  float: right;

  width: 490px;

  font-size: 150%;

  color: gray;

  background: inherit;

  text-align: left;

  padding: 0;

  margin: -5px 10px 0 0;

  padding-bottom: 10px;

  color: gray;

}



#content p span {

  float: right;

  margin: 0 20px 0 0;

}



#content p img {

  float: left;

  margin-right: 400px;

  margin-bottom: 5px;

}



/* ===============================

   =FUSSBEREICH

=============================== */



#footer  {

  width:100%;

  background: #fff;

  padding: 0;

  margin: 0;

  text-align: center;

  clear: both;

 }



#footer ul {

  width: 100%;

  margin: 0;

  padding: 20px 0 10px 0;

  list-style: none;

 }



#footer ul li {

  margin: 0 5px;

  padding: 0;

  display: inline;

  text-align: center;

 }



#footer ul li a {

  margin: 0;

  padding:0;

  border: 0;

  font: bold 11px Tahoma, sans-serif;

  color: #990000;

 }



#footer ul li a:hover { color: #000; }



#copyright {

  margin-top: 10px;

  height:20px;

  background-color: #e7e7e7;

  font: normal 11px Tahoma, Arial, sans-serif;

  color: black;

  padding: 5px 0 0 0;

  text-align: center;

}





/* ===============================



   =3. Spezielle Seiten



=============================== */



/* ===============================

   Kontaktformular

=============================== */

#kontaktseite form {

  background-color: #eee;

  width: 400px;

  padding: 20px;

  border: 1px solid #8c8c8c;

}



#kontaktseite label {

  display: block;

}



#kontaktseite #absender,

#kontaktseite textarea {

  width: 300px;

  border: 1px solid #8c8c8c;

  margin-bottom: 1em;

}



#kontaktseite textarea {

  height: 7em;

}



#kontaktseite input:focus,

#kontaktseite textarea:focus {

  background-color: #d9d9d9;

}



/* ===============================

   Sonstiges

=============================== */



#map {

  margin: 0;

  padding: 0;

  width: 490px;

  height: 400px;

  float: right;

  margin-right: 10px;

  border: 1px solid black;

}



.legende {

  width: 490px;

  float: right;

  font-size: 80%;

  margin: 10px 10px 0 0;

  padding: 0;

  list-style: inside;

  text-align: left;

}



.route, .route2 {

  clear: both;

}



.route {

   float: right;

   width: 490px;
	padding: 0;
   padding-top: 20px;
   margin: 20px 0 20px 0;
}



iframe {

   margin-left: 10px;

}



/* EoF */