/*
Theme Name: Avion
Theme URI: http://www.vorsprungdurchwebstandards.de/
Description: Flexo
Version: 2.0
Author: Heike Edinger & Timo Wirth

*/

html {
margin: 0;
padding: 0;
}

body {
margin: 0;
padding: 0;
background: #2C1823;
color: #222;
font-family: verdana, helvetica, arial, geneva, sans-serif;
font-size: 62.5%; /* from 16px to 10px */
}



/* LINKS 
----------------------------------- */

a {
color: #4ca4b8;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

#header p a {
color: #fff;
}


/* WRAPPER 
----------- */

#wrapper {
margin: 20px auto 0 auto;
padding: 0;
background: #fff;
width: 83%;
max-width: 1000px;
overflow: hidden;
}


/* HEADER 
---------- */

#header {
float: left;
margin: 0;
padding: 0;
background: #E3EDF7 url(img/avion.jpg) 100% 100% no-repeat;
width: 100%;
}

#header p {
margin: 0 0 0 20px;
padding: 160px 0 25px 0;
color: #fff;
font: 400% georgia, 'times new roman', serif;
font-style: italic;
}


/* NAVIGATION 
-------------------------------------- */

ul#nav {
display: inline;
margin: 0 0 0 20px;
padding: 0;
list-style: none;
float: left;
background: transparent;
}
ul#nav li {
float: left;
margin: 0;
padding: 0;
font-size: 120%;
background: transparent;
}
ul#nav li a {
display: block;
margin: 0 0 0 3px;
padding: 3px 10px 6px 10px; 
color: #fff;
text-decoration: none;
}
ul#nav li a:hover, 
#home #navhome a, 
#blog #navblog a,
#theory #navtheory a, 
#interviews #navinterviews a {
background: #fff;
color: #999;
}

/* MAIN
-------------- */

#main {
clear: left;
float: left;
margin: 0 0 20px 0;
padding: 0;
background: #fff;
width: 68%;
}

#theorypromo {
margin: 30px 30px 0 30px;
padding: 0;
}

#blogpromo {
margin: 15px 30px 0 30px;
padding: 0;
}

#text, .anreisser {
margin: 30px 30px 0 30px;
padding: 0;
overflow: hidden;
}

.anreisser:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
}

.anreisser {
	display: inline-table;
}


/* UEBERSCHRIFTEN 
------------------ */

/* main & extras */

h1,
h2 {
clear: left;
margin: 0;
padding: 0;
font-family: georgia, 'times new roman', serif;
font-weight: normal;
letter-spacing: -1px;
color: #2C1823;
}
h1 {
font-size: 300%;
line-height: 1em;
margin: 0 0 5px 0;
padding: 0 0 0 0;
}
h2,
.anreisser h1 { 	
font-size: 220%;
color: #555;
}
#blogpromo h2,
.anreisser h1 {
margin: 15px 0 0 0;
}
h1, 
h1 a,
h2 a {
color: #a8251b;
text-decoration: none;
}
h3, 
em.kat,
h1#thema {
color: #a8251b;
font-weight: normal;
font: 160% 'trebuchet ms', verdana, sans-serif;
}
em.kat {
margin: 0 0 15px 0;
font-style: normal;
color: #b1bfc0;
display: block;
}
h3.readon {
padding-top: 20px;
border-top: 1px solid #eee;
}
h3 {
clear: left;
}
#text h2 {
margin: 25px 0 10px 0;
}
#text h3 {
clear: none;
	margin: 25px 0 5px 0
}
#extras h3 {
margin: 20px 0 5px 0;
padding: 0;
}
#text h4 {
	font-size: 130%;
}

/* SCHRIFT P 
----------------------------------- */

#main p {
margin: 0 0 10px 0;
padding: 0;
font-size: 13px;
line-height: 1.4em;
}

#theorypromo p { /* aufmacher */
font-size: 150%;
line-height: 1.4em;
}

#main p.vorspann {
font-size: 150%;
line-height: 1.4em;
}

#extras p {
margin: 0;
padding: 0;
font-size: 120%;
line-height: 1.4em;
}

#main .meta { /* autor, datum, kommentare */
font-size: 110%;
color: #666;
}

.credit {
font-size: 85%;
color: #aaa;
}

#main p.mehrtexte { /* theorypromo und blogpromo */
clear: both;
font-size: 120%;
line-height: 1.25em;
width: 100%;
color: #b1bfc0;
margin: 15px 0 15px 0;
padding: 15px 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}

#blogpromo p {

}


/* SONDERFORMATIERUNGEN 
------------------------------------------------- */

address {
font-size: 86%;
line-height: 1.4em;
font-style: normal;
}

code, kbd { 
font-size: 100%;
color: #666;
}

pre {
margin-top: 0;
margin-bottom: 0;
padding: 0;
}

kbd {
padding: 0 4px;
border: 1px outset #ccc;
}




/* LISTEN 
---------------------------------- */

#extras ul {
margin: 0;
padding: 0;
clear: left;
list-style: none;
}

#extras li {
margin: 0 0 5px 0;
padding: 0 0 0 15px;
font-size: 120%;
background: url(img/li-red.gif) 0 0.08em no-repeat;
}

#main li {
	font-size: 130%;
	margin-bottom: 5px;
}
#main ol.dialog {
	list-style: none;
	margin-bottom: 20px;
}
#main dl {
font-size: 130%;
line-height: 1.4em;
}
#main dt {
margin-bottom: 5px;
font-weight: bold;
}
#main dd {
margin-bottom: 10px;
}
#main dd li {
font-size: 100%;
}
#main ul#declarations {
padding: 0 0 0 15px;
background: url(img/i-love-css-big.jpg) 0 60% no-repeat;
}
#main ul#declarations li {
margin-bottom: 5px;
}


/* BILDER 
------------------------------------ */

img {
float: left;
margin: 4px 10px 10px 0;
border: 1px solid #b1bfc0;
padding: 3px;
}

img.block {
clear: both;
float: none;
display: block;
}

#extras img {
border: none;
}

#extras img.xml {
padding: 0;
margin: 2px 5px 0 0;
}

img.noborder {
border: 0;
float: none;
}

img.love-img {
float: left; 
border: 0; 
padding: 0; 
margin: 5px 10px 0 0;
}


/* Bild mit Bildunterschrift */

dl.bild { /* im bild muss mit style die width stehen + 8px */
float: left;
margin: 5px 10px 0 0;
padding: 0; 
background: #fff;
clear: left;
font-size: 100%;
}
dl.bild img {
float: none;
display: block;
margin: 0;
}
dl.bild dt {
margin: 0;
padding: 0;
background: #fff;
}
dl.bild dd {
margin: -7px 0 0 0;
padding: 2px 5px 3px 5px;
font-size: 110%;
line-height: 1.3em;
background: #e2e2e2;
color: #333;
border-left: 1px solid #e2e2e2;
border-right: 1px solid #e2e2e2;
}

dl.bild.block {
float: none;
display: block;
}


/* ZITATE
------------------------------------- */

blockquote {
font-family: georgia, 'times new roman', serif;
margin: 0 0 10px 10%;
background: transparent url(img/startquote.gif) left top no-repeat;
}

#main blockquote p {
padding: 0 45px 0 50px;
margin-bottom: 5px;
margin-right: 0;
color: #666;
background: transparent url(img/endquote.gif) right bottom no-repeat;
font-size: 180%;
line-height: 1.3em;
}
#main blockquote cite {
font-family: verdana, arial, geneva, helvetica, sans-serif;
font-size: 66%;
display: block;
padding-top: 5px;
color: #666;
font-style: normal;
}
#main blockquote p + p {
	background: transparent;
}
#blogpromo blockquote, #blog blockquote {
margin: 0 0 0 10%;
background: #fff;
} 
#blogpromo blockquote p, #blog blockquote p {
padding: 0 60px 0 10px;
margin-bottom: 5px;
font: 130%/1.4em verdana arial, sans-serif;
color: #666;
background: #fff;
border-left: 10px solid #E3EDF7;
}
#main #blogpromo cite, #main #blog cite {
display: inline;
color: #666;
font-style: normal;
font-size: 100%;
}

ol.dialog q {
 quotes: "" "";
}

ol.dialog cite {
font-style: normal;
font-weight: bold;
}

ol cite.source {
font-style: italic;
font-weight: normal;
}


/* AUSLAGERUNGEN 
------------------------------------------ */


div.ausgelagert {
margin: 5px 10px 10px 0; /* wie bilder */
padding: 0;
float: left;
width: 40%;
border: 1px solid #b1bfc0;
font-size: 86%;
}
div.ausgelagert h4, #main div.ausgelagert p {
margin: 10px;
}
div.ausgelagert h4 {
font-size: 100%;
padding-bottom: 5px;
border-bottom: 1px solid #eee;
}
#main div.ausgelagert ol, #main div.ausgelagert ul {
padding-left: 20px;
margin: 10px;
font-size: 86%;
}
div.ausgelagert cite {
font-size: 100%;
}
div.ausgelagert code {
font-size: 120%;
color: #666;
}


/* TABELLEN 
------------------------------------------------- */

table {
clear: left;
margin-bottom: 10px;
border-collapse: collapse;
}

th {
text-align: left;
padding: .3em;
border-bottom: 5px solid #b1bfc0;
}

td {
padding: .3em;
border: 1px dotted #b1bfc0;
}

/* KOMMENTARE UND FORMULARFELDER
------------------------------------------------- */

ol#commentlist {
list-style: none;
padding: 0;
}
p.meta cite {
font-style: normal;
}

ol#commentlist li {
padding-top: 10px;
border-bottom: 1px solid #eee;
}

#commentform label {
font-size: 86%;
display: block;
margin-top: 0.7em;
}
#commentform input {
font-family: 'courier new', courier, monospace;
font-size: 100%;
margin-top: 0.2em;
width: 60%;
}
#commentform textarea {
margin-top: 1em;
width: 90%;
}
input#submit {
width: 8em;
padding: 2px;
font-family: verdana, arial, helvetica, geneva, sans-serif;
}


/* EXTRAS / Randspalte
-------------------------------------- */

#extras {
float: right;
margin: 10px 3% 20px 0;
padding: 0;
background: #fff;
width: 28%;
}

/* FOOTER 
-------------------------------------- */
#footer {
text-align: center;
margin: 10px auto 20px auto;
padding: 0;
width: 83%;
max-width: 1024px;
font-size: 110%;
}
#footer p {
color: #fff;
}