/* Oh ja, ich weiß. Alle gestandenen Webworker bevorzugen eine ordentliche CSS-Datei mit einer Anweisung pro Zeile. Ich bin einer der wenigen, die alle Anweisung in eine Zeile schreiben. So muss ich nicht so viel scrollen. Das muss sonst niemandem gefallen. Aber ich bin derjenige, der mit diesem Stylesheet arbeitet. Und am Ende erscheint es ohnehin minifiziert... */

/* Webkrauts Design 2011 - by Nicolai Schwarz - textformer.de */

/* http://meyerweb.com/eric/tools/css/reset/ */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

.clearfix { clear: both; }

/* Basic für HTML5 */



/* Typography generell */

body { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Arial, Helvetica, sans-serif; color: #555; }

p { font-size: 13px; line-height: 20px; margin-bottom: 18px; color: #555; }
ul, ol { margin-bottom: 18px; }
li { font-size: 13px; line-height: 18px; margin-bottom: 2px; color: #555; }
h1, h2, h3, h4 {  margin-bottom: 16px; }
#main ul { list-style: disc; margin-left: 30px; }
#main ol { list-style: decimal; margin-left: 30px; }

h3 { font-size: 14px; line-height: 16px; font-weight: bold; }
h4 { font-size: 12px; line-height: 16px; font-weight: bold; }
h5 { font-size: 12px; line-height: 16px; font-weight: bold; }

strong { font-weight: bold; }

a { color: #666; text-decoration: underline; }
a:hover, a:focus { text-decoration: none; color: #000; }

pre { border: 1px solid #ccc; background-color: #e9e9e9; margin-bottom: 20px; padding-top: 10px; overflow: auto; }
p.listing { padding: 5px 20px; font-size: 12px; line-height: 20px; background-color: #ccc; margin-bottom: 0px; color: 333; }
pre code { padding: 0px 20px 10px 20px; margin: 0; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; display: block; }

.hide { display: none; }


/* Main boxes */

.zeile { width: 960px; margin: 0 auto; position: relative; }
.zeile-wrapper { padding: 30px 0; position: relative; }

.zw0 { background: #555 url(../textures/webkrauts_textur_dunkelgrau.jpg) 100px 200px;; color: #000; padding: 0; margin: 0; position: relative; }
.zw1 { background: #fff url(../textures/webkrauts_textur_gold.jpg) 350px 200px; color: #000; padding-top: 40px; }
.zw2 { background: #fff url(../textures/webkrauts_textur_hellblau.jpg) 200px 0; color: #000; }

/* Kopfbereich */

.kopfzeile { background: #333 url(../textures/webkrauts_textur_hellblau.jpg) 0 0; padding: 0; position: relative; margin: 0; }
header.kopf { width: 960px; margin: 0 auto; position: relative; height: 125px; padding: 0; border-top: 0px solid #2b75a2; }

#sitename { position: absolute; width: 140px; margin: 0; padding: 0; z-index: 20; }
#sitename p { text-indent: -9999px; height: 140px; width: 140px; background: transparent url(../img/logo-v3.png) 0 bottom no-repeat; margin: 0; }

header.kopf .explore { position: absolute; top: 0; left: 160px; z-index: 110; }
.explore .box { float: left; background-color: #2b75a2; margin: 0 20px 0 0; }
.explore a, .explore p { font-size: 12px; line-height: 18px; margin-bottom: 0px; color: #ddd; color: #77bcd9; color: #fff; }
.explore p { margin-bottom: 10px; }
.explore a.start { width: 132px; padding: 15px 20px 15px; display: block; text-align: center; }
.explore .box { background: transparent url(../img/blau_70.png); }
.explore .box:hover { background: #2b75a2; }
.explore li div { display: none; padding: 15px 20px 15px; width: 132px; }
.explore li:hover div { display: block; }

.explore li ul { display: none; margin-bottom: 10px; }
.explore li:hover ul, .explore li:focus ul { display: block; }


#suche { position: absolute; top: 10px; right: 0; width: 215px; padding: 0; background: transparent url(../img/blau_70.png); }
#suche label { font-size: 11px; line-height: 18px; color: #fff; margin-bottom: 0px; display: none; }
#suche input { font-size: 11px; padding: 6px 6px 6px 40px; color: #fff; background: transparent url(../img/lupe.png) 10px center no-repeat; margin-bottom: 0px; border: 0px solid #fff; width: 169px; }
#suche input:hover, #suche input:focus { bbackground-color: #fff; cbolor: #2b75a2; }
#suche #edit-submit { display: none; }

#social { position: absolute; height: 32px; width: 74px; bottom: 15px; right: 0px;}
#social li { height: 32px; width: 32px; float: left; }
#social li.twitter { margin-right: 10px; }
#social li.twitter a { text-indent: -9999px; background: transparent url(../img/twitter-32x32.png) 0 0 no-repeat; height: 32px; width: 32px; display: block; }
#social li.rss a { text-indent: -9999px; background: transparent url(../img/rss-32x32.png) 0 0 no-repeat; height: 32px; width: 32px; display: block; }
#social li a:active { margin-top: 1px; }

#schrift { text-indent: -9999px; height: 52px; width: 405px; background: transparent url(../img/webkrauts-v5.png) 0 0 no-repeat; margin: 0; position: absolute; top: 150px; left: 165px; z-index: 100; }
#schrift {top: 80px; }


/* Hauptnavigation */

nav.main { margin-left: 160px; padding: 0; margin-top: -18px; }
nav.main li { float: left; margin: 0; padding: 0; }
nav.main li a { padding: 8px 12px ; display: block; text-decoration: none; text-transform: uppercase; font-size: 14px; line-height: 14px; color: #fff; margin: 4px 0; background: transparent; }
nav.main li a:hover, nav.main li a:focus { color: #000; background: #FBCD5A; -moz-transition: background 0.3s linear; -webkit-transition: background 0.3s linear; -o-transition: background 0.3s linear; transition: background 0.3s linear; background: #FBCD5A; }

/* Der Slider auf der Startseite */

#editorial { width: 715px; float: left; margin: 0 20px 0 0; padding: 0px; ffont-family: Georgia, "Times New Roman", serif; color: #555; position: relative; background-color: #fff; }
#editorial-inner { margin: 2px; border: 1px dashed #FBCD5A; padding: 28px; height: auto; }
#editorial h2 { font-size: 22px; line-height: 22px; margin-bottom: 5px; }
#editorial p.dachzeile { font-size: 13px; line-height: 18px; margin-bottom: 8px; color: #999; }
#editorial p.autor { font-size: 13px; line-height: 22px; margin-bottom: 16px; color: #999; font-style: italic; }
#editorial p.autor span { font-style: normal; text-transform: uppercase; }
#editorial p { font-size: 14px; line-height: 22px; margin-bottom: 10px; }
#editorial p.weiter, #editorial p.weiter a { font-size: 13px; line-height: 22px; margin-bottom: 8px; color: #999; font-style: normal; }

#editorial .text { margin-left: 0px; }

.slider .item img { margin: 0 0 10px 20px; float: right; border: 1px solid #ccc; padding: 6px;  }
#pager { position: absolute; top: 20px; right: 10px; width: 118px; }
#pager a { float: left; display: block; background-color: #ccc; padding: 8px 10px; text-decoration: none; margin: 0 10px 0 0; font-size: 13px; line-height: 12px; }
#pager a:hover, #pager a:focus  { background-color: #333; color: #fff; }
#pager a.activeSlide { background-color: #FBCD5A; color: #000; }



#werbung { width: 205px; float: left; margin: 0; padding: 0 10px; }
#werbung h2 { color: #000; }

/* Zweite Zeile der Startseite */

.zw2 .box { background: #fff urll(img/box_leiste_oben.png) 0 0 repeat-x; border-top: 2px solid #1B4A67; padding: 0 0 35px 0; position: relative; }

#news { width: 470px; float: left; margin: 0 20px 0 0; }
#termine { width: 225px; float: left; margin: 0 20px 0 0; }
#vortraege { width: 225px; float: left; margin: 0; }
#nnews, #ntermine, #nvortraege { min-height: 390px; color: #fff; background-color: #2b75a2; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity: 0.7; opacity: 0.7; }
#news, #termine, #vortraege { min-height: 390px; color: #fff; background: transparent url(../img/blau_70.png); }
.zw2 .box h2 { margin: 1px 0 10px 0; padding: 19px 30px 0 30px; border-top: 1px dashed #1B4A67; }
.zw2 .box ul { margin-bottom: 0px; padding: 0 30px; }
.zw2 .box p { padding: 10px 30px; color: #fff; position: absolute; bottom: 0; background-color: #1B4A67; width: 165px; margin: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity: 0.7; opacity: 0.7; }
.zw2 #news p { width: 410px; }
.zw2 .box p a { margin-bottom: 0; color: #fff; }
.zw2 .box ul li { padding-bottom: 10px; border-bottom: 1px dashed  #ccc; margin-bottom: 10px; color: #fff; }
.zw2 .box ul li.last { border-bottom: 0px dashed #ccc; }
#news ul li a, #termine ul li a, #vortraege ul li a { color: #fff; }
#news ul li.first { font-size: 14px; line-height: 22px; padding-bottom: 14px; border-bottom: 3px double #ccc; margin-bottom: 14px; }

/* Der Fuss */

.zeile-wrapper.footer { background: #333 url(../textures/webkrauts_textur_dunkelgrau.jpg) 200px 0; padding-bottom: 0px; }

footer { width: 960px; margin: 0 auto; color: #fff; }
footer .info { width: 410px; float: left; margin: 0 20px 0 0; padding: 20px 30px; }
footer .menubox { width: 165px; float: left; margin: 0 20px 0 0; padding: 30px; }
footer .menubox.last { width: 165px; float: left; margin: 0; padding: 30px; }

footer h2 { font-size: 15px; line-height: 20px; font-weight: normal; }
footer p { font-size: 13px; line-height: 18px; margin-bottom: 10px; color: #fff; }
footer a, footer a:hover, footer a:focus { color: #fff; }

/* CSS3-Zeugs / Extras */

@font-face {
    font-family: 'Share-Regular';
    src: url('../fonts/Share-Regular-webfont.eot');
    src: url('../fonts/Share-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Share-Regular-webfont.woff') format('woff'),
         url('../fonts/Share-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Share-Regular-webfont.svg#Share-Regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

h1 { font-size: 18px; }
h2 { font-size: 16px; }
h1, h2 { line-height: 20px; font-weight: normal; font-family: 'Share-Regular', sans-serif; text-transform: uppercase; }

.zw1, .zw2, .zeile-wrapper.footer {
-moz-box-shadow: inset 0 5px 6px rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0 5px 6px rgba(0,0,0,0.3);
box-shadow: inset 0 5px 6px rgba(0,0,0,0.3);
}

.explore .box {
-webkit-border-radius: 0 0 20px 20px;
-khtml-border-radius: 0 0 20px 20px;
-moz-border-radius: 0 0 20px 20px;
border-radius: 0 0 20px 20px;
}

#suche, #suche input, nav.main li a {
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

/* Extras für den Artikel */

body.artikel #main { width: 635px; float: left; margin: 0 20px 0 0; background-color: #fff; padding: 30px 40px; }
body.artikel #main p { font-size: 14px; line-height: 21px; margin-bottom: 18px; color: #555; }
body.artikel #main li { font-size: 14px; line-height: 21px; color: #555; }
body.artikel #main h3 { font-size: 22px; line-height: 22px; font-weight: normal; font-family: 'Share-Regular', sans-serif; text-transform: uppercase; color: #333; }
body.artikel #main h4 { font-size: 14px; line-height: 22px; font-weight: bold; color: #333; }
.infos h4 { font-size: 16px; line-height: 20px; font-weight: normal; font-family: 'Share-Regular', sans-serif; text-transform: uppercase; }
body.artikel { background: transparent url(../textures/webkrauts_textur_dunkelblau.jpg) 300px 0; background-attachment:fixed; color: #000; }
body.artikel .zw1 { background: transparent url(); color: #000; padding-top: 40px; }


.infos { width: 225px; padding: 0px; margin-bottom: 20px; background-color: #fff; float: left; border-top: 2px solid #333; }
.infos h4 { margin: 1px 0 10px 0; padding: 19px 20px 0 20px; border-top: 1px dashed #333; }
.infos h5, .infos p { padding: 0 20px 0 20px; }
.infos p { font-size: 12px; line-height: 20px; margin-bottom: 16px;  }
.infos img { margin: 0 20px 15px 10px; float: right; border-left: 1px dashed #333; border-bottom: 1px dashed #333; padding: 0 0 2px 2px;  }