@import url(http://fonts.googleapis.com/css?family=Calligraffitti);
* { margin:0; padding:0; }
html , body { height:100%; }
body:before { content:""; height:100%; float:left; width:0; margin-top:-32767px; }
body { font:14px Georgia, Arial, Helvetica, sans-serif; padding-left:100px; color:#3a4440; }
img { border:0; }
h1 , h2 , h3 { font:28px 'Calligraffitti', Georgia, Arial, Helvetica, sans-serif; text-align:left; margin-bottom:5px; font-weight:normal; color:#956e27; }
h2 { padding-top:13px; }
h3 { font-size:20px; padding-top:8px; color:#409fa4; }
p { margin-bottom:20px; }
.clear { clear:both; }
.wrapper { min-height:100%; width:580px; }
.page { overflow:auto; padding-bottom:150px; }
.header { height:194px; position:relative; margin-bottom:60px; background:url(../images/filling.png); }
.header a.logo { position:absolute; left:226px; top:35px; display:block; width:236px; height:113px; background:url(../images/kunsttherapie-wedekind.png); outline:none; text-indent:-3000px; }
.header ul.menu { list-style:none; position:absolute; left:0; top:0; font-size:18px; }
.header ul.menu li { margin-bottom:1px; }
.header ul.menu li a { color:#d8d5da; background:#606664; text-decoration:none; display:block; padding:9px 0 0 42px; width:118px; height:29px; }
.header ul.menu li a:hover , .header ul.menu li a.active { background:none; color:#606664; }
.content { line-height:19px; text-align:justify; margin:0 0 60px 0; }
.content p { padding-left:42px; }
.content ul { margin:0 0 20px 42px; list-style:none; }
.content ul li { background:url(../images/list.gif) 0 8px no-repeat; padding-left:9px; }
.content strong { color:#956e27; }
.content a { color:#000; }
.content a:hover { text-decoration:none; }
.content h3 a { color:#409fa4; }
.content img { border:1px solid #409fa4; margin:0 6px 0 0; }
.content img.wedekind { float:left; margin:0 10px 6px 0; }
.footer { line-height:19px; color:#d8d5da; position:relative; margin-top:-120px; height:25px; padding-top:5px; clear:both; }
.footer a { color:#d8d5da; margin-left: 15px; font-size: 12px;}
.footer a:hover { text-decoration:none; }
.footer p { margin:0; }
.footerInner { position:relative; background:#596562; width:560px; height:25px; padding:17px 10px; }
.footerInner a{text-decoration: none;}
.footerInner .brush { width:135px; height:150px; background:url(../images/brush.png); position:absolute; right: 0; bottom:0; }
form { margin: 0 0 50px 42px; border:0; float:left;}
fieldset { width: 530px; border:0; }
label { width:530px; float:left; margin: 0 0 0 0;  display:none; border:0;}
input , textarea { margin:0 0 5px 0; padding:1px; width:530px; height: 15px; background-color:transparent; font:12px tahoma; border:1px solid #606664; color:#606664; }
textarea { height:140px; resize:none; border:1px solid #606664; color:#606664; }
input.submitbtn { width:534px; height: 25px; background:#606664; font-size:12px; text-align: center; margin:0 0 0 0; border:0; color:#fff; }
img.impressionen {width: 123px; height: 123px;}
iframe {width: 530px; height: 320px;}
#contactform{width: 100%; height: 650px; background: none;border: none;}
#link{text-decoration: underline;}
#link:hover{text-decoration: none;}

@media screen and (min-width: 769px) {
    .responsive {display: none;}
}

@media screen and (max-width: 768px) {
    body {padding-left: 0;}
    * {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
    .wrapper { min-height:100%; width:100%; }
    .header , .brush {display: none;}
    .logo-r {background:url(../images/filling.png);}
    .logo-r img {width: 30%; height: auto; padding: 5% 0; margin-left: 5%;}
    .nav-r li {width: 100%; list-style: none; float: none; text-align: center; background:#606664; padding: 2% 0;}
    .nav-r li a {color:#d8d5da; text-decoration: none; font-size:18px;}
    .content p { padding-left:4%; }
    .content {margin-top: 20px;}
    h1 , h2 , h3 {padding-left:4%; }
    .content p { padding: 0 4%; }
    .footer {position:relative; margin-top:0; height:auto; padding-top:0;}
    .footerInner {width:100%; height:auto; padding:4%; text-align: center;}
    .content ul {margin: 0; padding: 4%;}
    form {float:none; width: 90%;}
    fieldset , label , input , textarea , input.submitbtn { width: 90%;}
    iframe {width: 80%;}
}

@media screen and (max-width: 430px) {
    .logo-r img {width: 50%;}
    .nav-r li {width: 100%; float: none; padding: 2% 0;}
    img.impressionen {float: left;}
    img.impressionen.last {float: none;}
    .footerInner a{ float:none; width 100%;}
}