/*kira-design.de*/
/*
Layout fuer http://www.kira-design.de
Dateiname: kira.css => Layout
Author: KirA - Kirsten Bohlig
Author URI: http://www.kira-design.de/
Media: screen, projection
Datum: 13.11.10 | 22.05.11
*/
a,abbr,acronym,address,applet,article,aside,audio,b,blockquote,big,body,center,canvas,caption,cite,code,command,datalist,dd,del,details,dfn,dl,div,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,keygen,label,legend,li,meter,nav,object,ol,output,p,pre,progress,q,s,section,small,span,source,strong,sub,sup,table,tbody,tfoot,thead,th,tr,tdvideo,tt,u,ul,var{background:transparent;border:0 none;margin:0;padding:0;vertical-align:baseline}
article,aside,audio,canvas,command,datalist,details,embed,figcaption,figure,footer,header,hgroup,keygen,meter,nav,output,progress,section,source,video{display:block}
mark,rp,rt,summary,time{display:inline}
@-webkit-keyframes fade-in {0% {opacity: 0; }50% {opacity: 0; }100% {opacity: 1; }}
html, body { margin: 0; padding: 0; }
body { font-family: 'Lucida Grande',Verdana, Helvetica, Arial, sans-serif; font-size: 100.01%; color: #000; background: #fff; line-height: 1.4; position: relative; }

body{-webkit-animation-duration:1.5s;-webkit-animation-name:fade-in;}

.col2, .col3 {font-size:.85em;}
#footer { font-size:0.7em; margin: 2em 0 0 0; color:#c30; font-weight:bold; background-color:transparent; }

.skiplinks,
.invisible{display: inline;height: 0;left: -3000px;position: absolute;top: -2000px;width: 0;/*z-index: 200;*/}
.clear{border: 0;clear: both;float: none;font-size: 1px;height: 0;line-height: 1px;margin: 0;padding: 0;visibility: hidden;}

b,.bold {font-weight:bold;}
strong { font-weight: bold; color:#444; }
em, i { font-style:italic; }
address { font-weight:normal; margin: 0 0 1em 0; }
acronym, abbr { letter-spacing: .07em; border-bottom: 1px dashed #ddd; cursor: help; }


#done { margin:0 0 0 -10px; min-height:150px; }
/* ### =links ### */
a, input[type=submit], :focus { outline:none; }
a, a:link{ color:#333; text-decoration:none; font-weight:bold; }
a:visited{ color: #B4B4B4; text-decoration:none; font-weight:bold; }
a:hover{ color:#C11F29; text-decoration:none; font-weight:bold; /*padding:2px 0;*/}
a:focus{ color:#C11F29; text-decoration:none; font-weight:bold; }
img a:focus{background-color:transparent;}
a:active{ color:#000; text-decoration:none; font-weight:bold; }
a.hwa{ color:#C11F29; }
a.hwa:visited { color:#666; }
span.back a:hover, a.back:hover { color:#C11F29; }

#Navigation ul{width:380px;margin:0 0 20px 20px;}
#Navigation ul li {display:inline; list-style:none;padding-right:.5em; line-height:180%;}
#Navigation li:first-of-type {margin-left:-13px;}
#Navigation ul li img {padding:0 2px 0 0;}
#Navigation ul li a.hwa:visited {color:#C11F29;}

img { border:0; padding:7px 0 0 2px; }
img.mb { border:5px solid #eee; margin-top:-120px; margin-right:-80px; padding:0; }
img.pop { border:2px solid #333; margin:5px 0 10px 0; padding:0;-moz-box-shadow: 10px 10px 20px #ccc; 
  -webkit-box-shadow: 10px 10px 20px #ccc; 
          box-shadow: 10px 10px 20px #ccc; }
img.pf /*pfeil im fliesstext*/{ display: inline; float:left; margin-left:-13px; margin-right: 1px; margin-top:-3px; }
img.pfe /*pfeil extern*/{ display: inline; float:left; margin-left:-23px; margin-right: 1px; margin-top:-7px; position:relative; }
img.i-bot {margin-left:98%; position:relative;/*float:right;*//*position:absolute;relative opera*/}

img.i-top { margin-left:95%; position:relative;/*absolute opera*/background-color:transparent; }
img a:hover{ background-color:transparent; }
img.floatleft {float:left; margin-right:10px;}
.clear {clear: both;float: none;width: 100%; }

img.b1{border:1px solid #333;padding:0;}
.ml20 {margin-left:20px;}
figcaption {font-size:.7em; padding:10px 20px;}

h1 { margin:1em 0; padding:10px 20px 10px 20px; font-size: 1.5em; }
h2 { margin:1em 0; padding:0 20px 5px 20px; font-size:1.3em; font-weight:bold; }
h3 { margin-bottom:20px; padding:0 20px 5px 20px; font-size:1.2em; font-weight:normal; }

h2.dotted {border-top: 3px dotted #999;border-bottom: 3px dotted #999; padding:10px 0 10px 0}

p { font-size:.8em; padding:0 20px 0 20px; margin: 20px 20px .3em 0; line-height:150%; }
p.tea/*-ser*/ { font-size:.7em; color:#666; line-height:115%; margin-top:0; padding-bottom: 1em; }
p.dot-bot {border-bottom: 3px dotted #999; padding:0 0 20px 0}

.mt3 {margin-top:3em;}
.mt150 {margin-top:150px;}
.mt300 {margin-top:300px;}

/* ### Sprites ### */
#frage { width: 40px; height: 43px; text-decoration: none; display: block; background: url('../img/frage-antwort.gif') 0 0; }
#frage:hover, #frage:active { background-position: 44px 0; }

.klein,.small { font-size:0.7em; }
.linkklein{ border-top:1px solid #eee; font-size:60%; margin-top:20px; padding-top:3px; }

/*Quotations in CSS Screen Stylesheet ###;author:George Ornbo;website:http://www.shapeshed.com;license:http://creativecommons.org/licenses/by-sa/2.5/*/
blockquote {font-size:1em; background:url(../img/quote_up.gif) top left no-repeat; position:relative; margin-left:20px; margin-right:0; font-weight: normal; }
blockquote p { padding:0 30px 10px 25px; font-size:0.8em; font-weight: normal; background:transparent url(../img/quote_down.gif) no-repeat bottom right; color:#666; text-align: justify; margin-left: 0; width:80%; }
cite { font-size:0.85em; margin-left:5em; margin-bottom:1em; font-weight:normal; color:#333; }



.up { font-size:0.7em; float:right; margin-right:-50px; position:relative; }


.none,.back, hr,.noshow,.json,#printOnly, #mobile-info.info,.ieshow { display:none; }
/* =JS-on*/
#show, .hilfe,.noprint { display:block; }

table { border: 2px solid #FFCC00; border-collapse:collapse; margin-right:5px; margin-bottom: 0.5em; margin-left:10px; width:90%; }
table caption { text-align:left; font-weight:bold; padding-bottom:3px; padding-left:3px; }
td { border-bottom: 1px solid #ddd; padding-top:2px;padding-bottom:5px; padding-left:3px;vertical-align:top; font-size:0.85em; }

/* onError*/
#error img{ border:5px solid #333; margin-top:20px; margin-left:20px; padding:0; }
#error img.nb{border:0}
#error h3 { margin-left:20px; }
#error #footer img{ border:0; }
#error ul li{ font-size: .8em; margin-left:2em; }

/* ### =hcard ### */
#kontakt h1 {margin-bottom:1em;}
.vcard { background-image: url(../img/logo-nur-auge40.gif); background-repeat: no-repeat; background-position: 90% 5%; color: #666; width: 19em; margin-bottom:2em; border: 1px solid #ddd; padding: 0 1em 0 1em; }
img.vcardimg { display:inline; float: right; /*margin-top:10px;*/margin-right:-95px; margin-left:580px; position:relative; padding:0; background:#fff; }
.vcard p { margin-left: 0; padding-left:5px; }
.fn { padding-top: 1em; font-weight: bold; font-size: 1em; }
span .email { padding-bottom: 1.3em; }
/* #################################### */
.accessibility { position: absolute; left: -1000px; top: -1000px; width: 0; height: 0; overflow: hidden; display: inline; }
#type-here { margin-top:2.5em; margin-left:2.7em; font-size: 2.6em; font-family:"Courier New", Courier, mono; font-weight:bold; color:#C4342D;/*rot*/}
/* ####################################
http://www.cssplay.co.uk/boxes/minheight.html for understanding browsers
*/
#type-here { width:480px; min-height:200px; height:auto; }
/* for Internet Explorer */
/*\*/
* html #type-here {
height: 200px;
}
/**/


#impressum h1 { border-top:5px solid #333; border-bottom: 1px solid #FFCc00; margin-bottom:20px; padding:20px 20px 5px 20px; font-size:1.2em; font-weight:normal; }
#kiraura #inhalt h1.gross { font-size:2em; padding-bottom:5px; text-transform:uppercase; letter-spacing:10px; font-weight:normal !important; margin:0 0 1.5em 0; font-family:Tahoma,Verdana,sans-serif !important; }

/* ########################### */
.punktlinie {margin-top:1em; margin-right:1em;margin-left:0;border-top: 2px dotted #ddd; }
/*http://www.bloglines.com/help/blogrollcss*/
div.blogrollmain{ font-size:0.7em; width:400px; margin: 2em 0 2em 2em; background-color:#F5F5F5; padding-top:1em; padding-left: 1em; }
.blogrollfolder{ font-size:0.9em; font-weight:bold; color:#F90; text-transform: uppercase; font-variant: small-caps; }
/*extern*/
/*
a[href^="http"] { padding-left: 33px; background-image: url(../img/pf-orange-out.gif); background-position: left !important; background-repeat: no-repeat; margin-left:-34px; }
*/
.blogrollmain a[href^="http://"]:before { content: ":: \00A0"; }
/*intern*/
a[title~="intern"]:before { content: "\8250\00A0" }
/* ####################### */
#error ul { list-style:square; list-style-position: outside}
#error ul li { font-size:.8em; margin-left:2em; }

/* ###http://www.cssplay.co.uk/boxes/minheight.html for understanding browsers*/
.minheight { width:auto; padding:0.5em; min-height:2em; height:auto; }
/* for Internet Explorer */
/*\*/
* html .minheight {height: 2em;}
/**/
/* ################################## */
.top20{ margin-top:20px; margin-bottom:20px; }
.top40{ margin-top:40px; margin-bottom:20px; }
.top60{ margin-top:60px; margin-bottom:20px; }
.top80{ margin-top:80px; margin-bottom:20px; }
.mr10{ margin-right:10px; }
.mr2 { margin-right:2em; }
.ml2{ margin-left:2em;}.ml200{margin-left:200px;}.mb20{ margin-bottom:20px; }
.mb60{ margin-bottom:60px; }
.nmt20{margin-top:5px}
ul.square { margin-top:1em;}
ul.square li { margin-left:3em; list-style-type:square;}
ul.square li a { background-color: #fff; color: #000; text-decoration: none; margin:0; height:auto; border: 0; display:inline; padding:0; }
ul.square li a:hover { color: #666; display: block; background-color: transparent; border-left:0; padding:0; display:inline; }

noscript p {color: #C00;}

/* ### noch nirgends ########## */
/* NOTE ITS */
#note_its {
margin-left:1em; /*wg rotation*/
width:170px;
border: 0;
-webkit-box-shadow: 5px 6px 10px rgba(0,0, 0, 0.2);
-moz-box-shadow: 5px 6px 10px rgba(0,0, 0, 0.2);
box-shadow: 5px 6px 10px rgba(0,0, 0, 0.2);
-webkit-transform: rotate(5deg);
-moz-transform: rotate(-5deg);

behavior: url(ie-css3.htc);
}
#note_its .paper {padding: 5px 10px 0 15px!important;background: #FAE989;}
#note_its h1 {color: #73486F;font: 32px/36px 'TrashHandRegular', Verdana, sans-serif!important;margin-bottom:0;}
#note_its p.message {color: #464646;font: 36px/48px 'TrashHandRegular', Verdana, sans-serif;padding-bottom:0;}

/* ######################
+ http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html*/
.frage,
.antwort {
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
background:#fff;
color:#000;
font-weight:bold;
margin:1em 0 3em;
padding:15px;
position:relative;
border:5px solid #ddd;
max-width:400px;
}

/* ### creates triangle */
.frage:after,
.antwort:after{
content:"\00a0";
display:block; /* reduce the damage in FF3.0 */
position:absolute;
bottom:-50px; /* value = - border-top-width - border-bottom-width */
left:50px; /* controls horizontal position */
width:0;
height:0;
border-width:20px 0px 30px 20px; /* vary these values to change the angle of the vertex */
border-style:solid;
border-color:#ddd transparent transparent; 
}
.antwort.top{
background-color:#ddd;
}
.antwort.top:after {
top:-40px; /* value = - border-top-width - border-bottom-width */
right:50px; /* controls horizontal position */
bottom:auto;
left:auto;
border-width:20px 20px 20px 0; /* vary these values to change the angle of the vertex */
border-color:transparent transparent #ddd; 
}

/*http://coding.binon.net/index.htm?css/linksign.htm*/
p:target:before,
h1:target:before,
h2:target:before,
h3:target:before {content:url(img/pfg-rechts.gif);
}
