@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);

@font-face {
	font-family:'Apple-Chancery';
	src: url('Apple-Chancery_gdi.eot');
	src: url('Apple-Chancery_gdi.eot?#iefix') format('embedded-opentype'),
		url('Apple-Chancery_gdi.woff') format('woff'),
		url('Apple-Chancery_gdi.ttf') format('truetype'),
		url('Apple-Chancery_gdi.svg#Apple-Chancery') format('svg');
	font-weight: 100;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-25CA;
}

html, body {
    font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 150%;
    color: #777;
}

body {background:#BB892D;}
body#start  {background:#FFF7E9;}

#wrapper {max-width: 989px; margin: 0 auto 50px auto; background:#F8F2E9; min-height:606px; background-repeat:no-repeat;}

/* ----------- BACKGROUNDS ------------- */
#start #wrapper {background-image:url(../images/backs/screen-start.jpg)}
#erzaehlkultur.theorie #wrapper {background-image:url(../images/backs/screen-erzaehlkultur-theori.jpg)}
#erzaehlkultur.praxis #wrapper {background-image:url(../images/backs/screen-erzaehlkultur-praxis.jpg)}
#programme.erw1 #wrapper {background-image:url(../images/backs/screen-pro-erw1.jpg)}
#programme.erw2 #wrapper {background-image:url(../images/backs/screen-pro-erw2.jpg)}
#programme.erw3 #wrapper {background-image:url(../images/backs/screen-pro-erw3.jpg)}
#programme.erw4 #wrapper {background-image:url(../images/backs/screen-pro-erw4.jpg)}
#programme.kinder #wrapper {background-image:url(../images/backs/screen-pro-kinder.jpg)}
#programme.nachMass #wrapper {background-image:url(../images/backs/screen-pro-mass.jpg)}
#paedagogik #wrapper {background-image:url(../images/backs/screen-paedagogik.jpg)}
#persoenliches #wrapper {background-image:url(../images/backs/screen-persoenliches.jpg)}
#kontakt #wrapper {background-image:url(../images/backs/screen-kontakt.jpg)}
#kontakt.impressum #wrapper {background-image:url(../images/backs/screen-impressum.jpg)}

/* ----- HEADER ----- */
header {color:#BB892D; margin:0; padding:0}
#start header {color:#FFF}
#start header a {color:#E9CA9A}
#start header a:hover {color:#F7DFB1}
#name, #profession, #servicenavi{float:left; }
#name { font-family:'Apple-Chancery'; width: 228px;	margin: 44px 0 0 52px;	font-size: 32px;}
#profession {width:568px;; margin:49px 0 0 0; font-weight:bold; font-size:14px; letter-spacing:0.3px}
#servicenavi {font-size:12px; line-height:14,4px; margin:20px 0 -20px 0; }
#servicenavi a {color:#CCA461}
#servicenavi a.active, #servicenavi a.active:hover {color:#777; cursor:default}

/* ----- MENU ----- */
nav {margin:77px 0 0 280px; background:none; font-size:14px; letter-spacing:0.7px}
[role~="navigation"] {clear: both; background: none; border:none; border-radius:none;color: #666666;}

nav .boxes {margin:0; float:left; width:142px; height:80px}
nav .boxes:last-child {width:100px;}
nav a.active, nav a.active:hover {font-weight:bold; cursor:default}
nav .submenu {margin: 3px 0 0 0}
nav .submenu a { font-size:12px; display:block; line-height:125% }
nav .submenu a:before {content:"\00b7"; padding: 0 3px; font-size:10px} /* middot */
nav .submenu a.active:before {content:"\00a0";} /* nbsp */
#start nav a {color: #ffffff;}

/* ----- ROLLOVER + MENU-ACTIVE FARBEN ----- */
#start nav a:hover {color: #F7DFB1;}
#erzaehlkultur nav a.active, #erzaehlkultur a:hover {color:#DD0028;}
#programme nav a.active, #programme a:hover {color:#009EE3;}
#paedagogik nav a.active, #paedagogik a:hover {color:#EE7000;}
#persoenliches nav a.active, #persoenliches a:hover {color:#3DA432;}
#kontakt nav a.active, #kontakt a:hover, #kontakt .pfeil {color:#BB892D;}
.pfeil {letter-spacing:3px}

/* ----- CONTENT ----- */

#content {margin: 0px; padding: 25px 210px 40px 24px;}
#start #content {color:#FFF7E9; font-size:15px; padding: 12px 150px 40px 24px; position:relative; height:382px}
#erzaehlkultur.praxis #content  {padding: 25px 0px 40px 24px;}



h1, h2, h3 {font-weight:bold; text-align: left;}
#start h1  {font-weight:normal}

a {color: #7F7E76;
text-decoration: none;
border-bottom:;
font-weight: normal;}
a:before {content:""}
a:hover {text-decoration: none;}

strong {font-weight:bold}

ul  {margin: 0px 0px 0px 10px; list-style-image:url(../images/bullet-grau.jpg)}
#start ul {list-style-image:url(../images/bullet-weiss.jpg); margin-bottom: 28px; margin-top:28px}
#start li {margin-bottom:4px}
#programme ul {list-style-image:url(../images/bullet-blau.jpg)}
#paedagogik ul {list-style-image:url(../images/bullet-orange.jpg)}

h1+p, h2+p, h3+p, p+p, ul+p, ul+h2, ul+h3  {margin-top: 17px;}

#paedagogik h1+p, #kontakt h2+p  {margin-top: 0px;}
#paedagogik p+h2, #kontakt p+h2 {margin-top: 17px;}

p.slogan, #sloganunten { font-family:'Apple-Chancery';font-size:35px}
#sloganunten {position:absolute; bottom: 54px; right: 135px; font-size:47px}
p.slogan+h1 {margin-top: 31px;}


#programme #content h2 a {padding-top:6px; margin-top:9px;border-top: dotted 2px #009EE3; font-weight:bold; display:block}
#programme #content h2:first-child a, #programme #content h2:first-child a.active:hover {padding-top:0px; margin-top:0px;border-top: none;}
#programme #content h2+p {margin-top:7px}
#programme #content p {padding-bottom:17px}
#programme #content p+p {margin-top:0px}
#programme #content a.active, #programme #content a.active:hover {color:#009EE3; cursor:default; padding-top:26px; padding-bottom:16px}

#erzaehlkultur.praxis #content img {margin: 0px 0 0 -72px}
#erzaehlkultur.praxis #content img.tablet {display:none}
#erzaehlkultur.praxis #content img.screen {display:block}

/* ----- Sidebar ----- */

#sidebar {padding: 24px 100px 20px 54px;}
#sidebar h2 a {padding-top:9px; margin-top:9px;border-top: dotted 2px #DD0028; font-weight:bold; display:block}
#sidebar h2:first-child a {padding-top:0px; margin-top:0px;border-top: none;}
#sidebar h2+p {margin-top:0px}
#sidebar a.active, #sidebar a.active:hover {color:#DD0028; cursor:default}