html, body {width:100%; margin:0; padding:0;}
body {font-family:'Open Sans', Arial, sans-serif; font-size:16px; line-height:125%; color:#551285; background-color:#f6d0ff;}
div,* {box-sizing:border-box;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
ol, ul {list-style:none;}
table {border-collapse:collapse; border-spacing:0;}

.aural, #navskip p {position:absolute; top:-100em; left:-100em	}
#navskip p a {color:#cc0000; font-size:1em; position:absolute; width:10em;}

header {position:relative;}
#wrapper {width:990px; margin:0 auto; overflow:hidden;}
#inner {position:relative; padding:0.875em 0.875em 0; margin:0 0 14px; background-color:#f6a7ff;}
#inner:after {content:""; display:table; clear:both;}

#logoflaeche {float:left; position:relative; width:708px; height:240px; margin:0 0 0.875em; background-color:#870aa5;}
#logo {display:block; float:left; position:relative; width:400px; height:240px; background:url('../img/sperrgebiet-hamburg.png') no-repeat scroll 15px 25px;}
#logoflaeche h1 {position:absolute; bottom:10px; right:10px; color:#fff; font-weight:400; font-size:1em;}
#themennav {float:right; position:relative; width:240px; height:240px; padding:10px; margin:0 0 0.875em; background-color:#870aa5;}
#themennav ul, #themennav ul li, #subnav ul, #subnav ul li {margin:0; padding:0; list-style-type:none;}
#themennav ul li {font-size:1.0625em; font-weight:700; color:#f3f3f3; margin:0; }
#themennav ul li a {display:block; height:29px; margin:0 0 3px; padding:0.25em 0 0 0.4em; text-decoration:none; color:#f3f3f3; background-color:#00d5ff;}
#themennav ul li a.aMain {font-size:0.9em; color:#551285; padding-top:0.35em;}
#subnav ul li {font-size:1.5em; font-weight:800; padding:0.5em 0.25em 0.5em 0.25em; margin:0 0 0.25em 0; background-color:#00D5FF; color:#F3F3F3;}
#subnav ul li a {display:block; text-decoration:none; color:#f3f3f3;}
#themennav ul li a:focus, #themennav ul li a.act, #subnav ul li a:focus, #subnav ul li a.act {color:#551285;}

#hauptnav {font-size:0.9em;}
#hauptnav ul {position:relative; margin:0; padding:0; z-index:90;}
#hauptnav ul.navMain {width:100%; height:2.6em;}
#hauptnav .liMain {float:left; list-style-type:none; margin:0; padding:0;}
#hauptnav .liMain.last {float:right;}
#hauptnav .liMain.first.last {float:none; text-align:center;}
#hauptnav a {display:block; padding:0.6em; text-decoration:none; color:#d93fff; background-color:#F3F3F3;}
#hauptnav .aMain {font-weight:bold;}
#hauptnav .liAct .aMain, #hauptnav li .liAct a {color:#551285;}
#hauptnav li ul {position:absolute; left:auto; top:auto; display:none;}
#hauptnav li.last ul {right:0;}
#hauptnav li:hover ul, #hauptnav li.sfHover ul, #hauptnav .navOpened ul {display:block;}
#hauptnav li li {float:none;}

#main {clear:both; float:left; position:relative; width:708px; padding:1em 1.125em; margin:0 0 0.875em; background-color:#f3f3f3;}
#maininner {background:url("../img/bg-streifen-bottom.gif") repeat-x 0 bottom; padding:0 0 55px;}
article {background:url("../img/bg-streifen-top.gif") repeat-x scroll 0 0; padding:10px 0;}
.box {position:relative;}
.box:after {content:""; display:table; clear:both;}
.box img {height:auto; width:auto; max-width:100%;}
.boxColored .boxContent {padding:0.1em 10px; margin-bottom:1em; background-color:#f6a7ff;}

.sidebar {float:right; position:relative; width:240px;}
.sidebar .box {padding:10px; background-color:#f3f3f3; margin:0 0 0.875em;}
.sidebar .slidebox {margin-top:-20px;}
.sidebar .slidebox .box {padding-top:0;}
.sidebar .slidebox .boxHead h3 {margin:0; padding:0.2em; font-size:1em; font-weight:normal; color:#fff; background-color:#870aa5; cursor:pointer;}
.sidebar .slidebox .boxHead h3:before {content:"+"; display:inline-block; width:1em; text-align:center;}
.sidebar .slidebox.boxOpened .boxHead h3:before {content:"-";}
.sidebar .slidebox .boxContent {display:none;}

#footer {clear:left; position:relative; margin:0 0 2em; padding:18px 0 0; background:url("../img/bg-footer-top.gif") repeat-x 0 0;}
#footerinner {padding:0.875em; background-color:#f3f3f3;}
#footerinner:after {content:""; display:table; clear:both;}
#links {float:left; position:relative; width:708px; height:240px; padding:0 1.125em; background:url("../img/bg-footer.gif") repeat 0 0;}
#footer  ul {margin:105px 0 15px; padding:0;}
#footer ul li {display:inline; float:left; font-size:0.875em; font-weight:normal; color:#d93fff; background-color:#f3f3f3; padding:0.25em 0.375em 0.25em 0.375em; margin:0 1.5em 0 0;}
#footer ul li a {color:#d93fff; text-decoration:none;}
#footer ul li a.act {color:#551285; text-decoration:underline;}
#links:before, #footer ul:after {content:""; display:table; clear:both;}
#diakonie {float:right; position:relative; height:240px; width:240px; padding:10px; background-image:url(../img/bg-footer.gif);}
.quadMain {height:100%; padding:0.6em; background-color:#5a2572;}
.quadMain img {display:block; width:110px; height:auto;}
#copyright {position:absolute; bottom:-1.4em;}

ul.langNav {margin:0 0 0.875em; padding:0;}
.langNav li {margin:0 0 2px; padding:0; list-style-type:none;}
.langNav li a {display:block; padding:0.55em 0 0.55em 65px; color:#551285; background-color:#f3f3f3; text-decoration:none; background-position:10px center; background-repeat:no-repeat;}
.langNav li.en a {background-image:url('../img/english.gif');}
.langNav li.es a {background-image:url('../img/es.gif');}
.langNav li.bg a {background-image:url('../img/bg2.gif');}
.langNav li.ro a {background-image:url('../img/ro.gif');}

#fixedTop {position:fixed; top:0; left:0; height:1px; width:100%; z-index:99;}
#fixedWrapper {position:relative; width:990px; margin:0 auto;}
#fixedInner {position:absolute; top:0.875em; right:270px; padding-right:10px; color:#fff; background-color:#870aa5; cursor:pointer;}
#fixedInner:before {content:"Notausgang"; display:block; padding:0.9em 34px 0.9em 0.9em; font-size:0.8em; background-image:url('../img/exit.png'); background-position:right center; background-repeat:no-repeat;}
body.en #fixedInner:before {content:"Emergency exit";}
body.es #fixedInner:before {content:"Salida de emergencia";}

h1, h2, h3, h4, h5 {font-size:0.875em; font-weight:800; margin:0 0 0.25em 0; padding:0 0 0 0; }
h1, h2 {font-size:1.5em;}
h3 {font-size:1.375em;}
h4 {font-size:0.75em; font-weight:normal;}
h1#seitehoeher {color:#f3f3f3; padding:0.5em 0.25em 0.5em 0.25em; margin:0 0 0.5em 0; background-color:#00d5ff;}
h2#seitentitel {color:#551285; padding:0.5em 0.25em 0.5em 0.25em; margin:0 0 0.5em 0; background-color:#00d5ff; }
#content .box h3 {padding:0.5em 0 0.1em; border-top:0.25em solid #00d5ff;}
#content .box h3 a {display:block; color:#551285; color:#f3f3f3; background-color:#00d5ff; text-decoration:none; padding:0.5em 0.25em 0.5em 0.25em; margin-top:-0.3em;}
#content .box h3 a:hover {color:#551285; background-color:#00d5ff;}
#content {line-height:130%;}
#content p {line-height:1.4em;}
#content img {max-width:100%; height:auto;}
a {color:#d93fff; text-decoration:underline;}
i, em 	{font-style:italic;}
b, strong 	{font-weight:bold;}	
p, ul {font-size:1em; margin:0 0 1em 0;}
hr {border:0; border-top:0.0625em solid #d93fff; color:#d93fff; background-color:#f3f3f3; margin:0;}
#diakonie p {color:#551285; font-size:0.75em; line-height:110%; padding:0.625em;}
#copyright p {color:#d93fff; font-size:0.7em; line-height:110%; padding:0; margin:0;}
#content ul {list-style-type:disc; list-style-position:outside; margin:0 0 1em 1.2em; padding:0;}
#content ul li {margin:0pt 0pt 0.5em;}
table {width:98%; height:auto; border-collapse:collapse; background-color:#bbecf6; margin:0 0 1.6em 0;}
table caption {/*display:none;*/}
table p {margin:0;}
tr {border-bottom:0.1em solid #ffffff;}
th {background-color:#00d5ff;}
td,th {vertical-align:top; text-align:left; padding:0 0.2em 0 0.2em;}
.small, small {font-size:0.8em;}
.sidebar table {margin:0;}
.sidebar td, .sidebar th {font-size:0.8em;}
.sidebar p {margin:0 0 0.4em;}
.IntroText {font-size:1.25em; font-style:italic; font-weight:bold; line-height:125%;}
.noWrap, span.noWrap {white-space:nowrap;}
.clear {clear:both; height:1px; width:100%; overflow:hidden;}

.picLeft {float:left; width:auto; max-width:33%; margin:0 2% 1.5em 0;}
.picRight {float:right; width:auto; max-width:33%; margin:0 0 1.5em 2%;}

.boxSlider .boxContent {display:none;}
.boxSlider p.linkMore {font-size:0.9em; text-decoration:underline; color:#d93fff; cursor:pointer;}
.boxSlider p.linkMore:before {content:"+"; display:inline-block; height:1.5em; width:1.5em; margin-right:0.5em; text-align:center; font-weight:bold; text-decoration:none; color:#fff; background:#551285;}
.boxSlider.boxOpened p.linkMore:before {content:"-";}
.boxSlider p.linkMore span:before {content:"mehr dazu ...";}
.boxSlider.boxOpened p.linkMore span:before {content:"schließen";}

.boxPicLeft .boxPic {float:left; width:30%; margin:0 1% 1em 0; text-align:left;}
.boxPicLeft .boxContent {width:68%;}
.boxPicRight .boxPic {float:right; width:30%; margin:0 0 1em 1%; text-align:right;}
.boxPicRight .boxContent {width:68%;}
.boxPicOnly .boxPic {padding-bottom:0.45em;}

.editorLink {display:block; top:0px; right:0px; position:absolute; height:40px; width:40px; background-image:url('../img/edit.png'); background-color:#00d5ff;}

.sidebar h2 {font-size:1.2em;}
.sidebar h3, .sidebar p.bigger {font-size:1.5em; font-weight:800;}
.sidebar h4 {margin:0.2em 0 0;}
.sidebar .mailLink {font-size:0.8em; color:#551285;}
.sidebar table {width:100%;}
a.blockLink {display:block; padding:0.6em 0.5em; color:#551285;}
a.blockLink strong {font-size:1.1em;}

/* Extras einzelne Seiten  */
iframe, video {max-width:100%;}
p.IntroText {line-height:150%;}
#a6 h1 {margin-bottom:-1.9em;}

#a137 {padding-bottom:1em;}
#a137 a, #a137 img {display:block;}
#a137 video {display:block; width:360px; height:auto; margin:0 auto;}
#videoButton {position:absolute; display:block; height:auto; width:auto; max-width:25%; bottom:1em; right:0; margin:8%; cursor:pointer;}
#videoHolder {display:none; text-align:center; background-color:#B5A2C5;}

@media screen and (min-width:1200px){
  #themennav ul li a:hover, #subnav ul li a:hover, #hauptnav a:hover, #footer ul li a:hover {color:#551285;}
  #wrapper, #fixedWrapper {width:1170px;}
  #logoflaeche, #main, #links {width:886px;}
  #themennav, #logoflaeche {height:240px;}
  #themennav, .sidebar, #diakonie {width:240px;}
  #main {padding:2em 63px 2.5em; font-size:1.13em;}
  #subnav {font-size:0.9em;}
  #links {padding-left:63px;}
}

@media screen and (min-width:767px){
  .textholder {position:absolute; left:0; bottom:20px; width:100%;}
  .textholder:before, .textholder:after {content:""; display:table; clear:both;}
  .textHalf, .csc-textpic-above .textHalf {float:left; width:47%; padding:0.5em 0; margin:1.5%; box-sizing:border-box; background-color:rgba(255,255,255,0.8);}
  .textHalf h2, .textHalf p, .textFull p {padding:0.3em 10px; margin:0; font-weight:bold;}
  .textHalf h2 a {color:#551285; text-decoration:none;}
  .textFull {margin:1.5%; box-sizing:border-box; background-color:rgba(255,255,255,0.8);}
}

@media screen and (max-width:990px) {
	.hidden-md-down {display:none;}
	#wrapper {width:100%; max-width:736px; min-width:320px; margin:0 auto; }
	#inner {width:100%; max-width:740px; min-width:320px; border-top:2.9em #5a2572 solid; padding-bottom:0;}
	#logoflaeche {margin:0 0 0.875em 0; width:100%;}
	#main {float:none; width:100%;}
	.sidebar {float:none; clear:left; width:100%;}
	.sidebar .box {padding:1em 1.125em;}
	.sidebar .slidebox {margin-top:-2em;}
	.sideLang {position:absolute; top:-2.2em; left:0.875em; z-index:98;}
	.langNav li {float:left;}
	.langNav li a {height:26px; width:44px; overflow:hidden; padding:0; background-color:transparent; background-size:75%; background-position:center center;}
	.langNav span {display:none;}
	#footer {width:100%; height:auto;}
	#footerinner {width:100%; height:auto;}
	#links {width:100%; height:auto; margin:0 0 0.875em 0;}
	#footer ul {margin:1em 0 0.125em 0; }
	#footer ul li {margin:0 1.5em 0.875em 0;}
	#fixedWrapper {height:1px; width:100%; max-width:740px; min-width:320px;}
	#fixedWrapper:after {content:""; display:table; clear:both;}
	#fixedInner {position:relative; top:0; right:0; float:right; margin-left:0.875em; margin-right:0.875em; background-color:#5a2572;}
	.de #hauptnavBtn {height:30px; background-image:url(../img/btn_mainnav.png); background-position:center; background-repeat:no-repeat; cursor:pointer;}
	.de #hauptnav {max-height:35px; overflow:hidden; transition:0.5s;}
	#hauptnav.opened {max-height:420px;}
	#hauptnav ul.navMain {height:auto; padding-bottom:1em;}
	#hauptnav ul, #hauptnav ul li {font-size:1em; line-height:1.2em;}
	#hauptnav .liMain, #hauptnav .liMain.last {float:none;}
	#hauptnav a {padding:0.6em;}
	#hauptnav li ul {position:relative; display:block; padding-left:1em;}
	#themennav {position:absolute; top:0; right:-16em; z-index:95; transition:0.5s;}
	#themennav.opened {left:auto; right:0; display:block;}
	#themennavBtn {position:absolute; top:10px; left:-60px; height:40px; width:40px; background-color:#870aa5; background-image:url(../img/btn_themenav.png); background-position:center; background-repeat:no-repeat; border-radius:2px; cursor:pointer;}
	.en #themennavBtn, .es #themennavBtn, .bg #themennavBtn, .ro #themennavBtn {display:none;}
	#links {float:none;}
	#diakonie {float:none; height:auto; width:auto; overflow:hidden; padding:2px 0.525em 0; background-image:none; background-color:#5a2572;}
}
@media screen and (max-width:766px) {
	#logoflaeche {height:9.5em;}
	#logo {margin:0.5em 0 0 1em; height:8.5em; background-size:50%; background-position:left center;}
	#logoflaeche h2 {bottom:0px;}
	#themennav {padding-bottom:0;}
	h1, h2 {font-size:1.2em; }	
	h3 {font-size:1em;}
	p, ul {font-size:0.875em; margin:0 0 1em;}
	.IntroText {font-size:1em;}
	.textHalf, .csc-textpic-above .textHalf {float:none; width:auto; margin:0.5em 0;}
	.boxPicLeft .boxPic, .boxPicRight .boxPic {float:none; width:auto; text-align:center;}
	.boxPicLeft .boxContent, .boxPicRight .boxContent {width:auto;}
	.hidden-sm-down {display:none;}
	#a137 video {width:auto;}
}
@media only screen and (max-width:575px) {
  #logoflaeche h1, #logoflaeche h2 {font-size:13px; white-space:nowrap;}
}