@charset "UTF-8";
/**
* Theme Name: Hausburg Quartier Responsive
* Author: Drews Design
* Author URI: http://www.drewsdesign.de
* Description: 02/2014 für das Hausburg Quartier gestaltetes und programmiertes Theme auf Basis von XHTML1 und CSS2 und CSS3. Responsive-Umsetzung.
* Version: 2.0
*/

/*------------------------------------------------------------------ 
[Inhalt] 
  
0. Initialisierung
1. Body  / body #wrapper
2. Header / #header 
3. Navigation / #nav 
4. Content / #content 
5. Left column / #left 
6. Right column / #right 
7. Footer / #footer
8. Search / #search 

alle properties sind jeweils alphabetisch sortiert 

[Farben]
#666 - body
#716f91 - heads
#dc754d - links

 -------------------------------------------------------------------*/


/* !0. Initialisierung ------------------------------------------------------------------- */
/* reset styles */
html, body {border: 0; margin: 0; padding: 0; vertical-align: baseline; border-left: 0;}

/* hide from IE mac \*/
html {min-height: 100%; margin-bottom: 1px;}
/* end hiding from IE mac */

div, span, iframe, h1, h2, h3, h4, h5, h6, p, a, abbr, acronym, em, font, img, small, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0; padding: 0; border: 0; vertical-align: baseline;
	}
 
ol, 
ul {}

caption, 
th, 
td {
	text-align: left; 
	font-weight: normal;
	}
	
/* end reset styles */


/* ---------------- wrapper ------------------- */
#headerwrapper {
	background:  url(images/bg-header-wrapper.jpg) repeat-x #3e3e57;
	color: #666;
	font-size: 1em;
	height: 300px;
	margin-left: auto; /*  3 zeilen hack fuer zentrierung */
	margin-right: auto;
	margin-top: 0;
	padding: 0;
	position: relative;
	z-index: 999;
	text-align: left;
	}

#wrapper {
	background: url(images/bg-bluete.png) bottom right no-repeat #fff;
	color: #666;
	font-size: 1em;
	margin-left: auto; /*  3 zeilen hack fuer zentrierung */
	margin-right: auto;
	text-align: left;
	width: 1055px;
	
	-moz-box-shadow: 0 0 15px rgba(0,0,0,.6);
	-webkit-box-shadow: 0 0 15px rgba(0,0,0,.6);
	box-shadow: 0 0 15px rgba(0,0,0,.6);
	}


/* ---------------- skip navigation ------------------- */
#skipnav {
	position: absolute; 
	left: -1000px; 
	overflow: hidden; 
	top: -100px; 
	width: 10em; 
	z-index: 2;
	}
	
#skip a, 
#skip2 a {}

#skip1 a:focus, 
#skip2 a:focus, 
#skip1 a:active, 
#skip2 a:active {
	background: #fff; 
	color: #000; 
	text-decoration: 
	underline; z-index: 99;
	}
	
#blah:active {}
/*
Internet Explorer can be a little flaky showing the skip-navigation link. #blah:active is an empty selector because it has no properties or values. Oddly this dummy selector makes Internet Explorer behave itself and show the skip-navigation link consistently.
*/


/* !1. Body ------------------------------------------------------------------- */
@font-face {
	font-family: 'UbuntuLight';
	src: url('https://www.hausburg-quartier.de/hqwp/wp-content/themes/hausburg-responsive/fonts/Ubuntu-L-webfont.eot');
	src: local('☺'), url('https://www.hausburg-quartier.de/hqwp/wp-content/themes/hausburg-responsive/fonts/Ubuntu-L-webfont.woff') format('woff'), url('https://www.hausburg-quartier.de/hqwp/wp-content/themes/hausburg-responsive/fonts/Ubuntu-L-webfont.ttf') format('truetype'), url('https://www.hausburg-quartier.de/hqwp/wp-content/themes/hausburg-responsive/fonts/Ubuntu-L-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
	}

@font-face {
	font-family: 'UbuntuLightItalic';
	src: url('https://www.hausburg-quartier.de/hqwp/wp-content/themes/hausburg-responsive/fonts/Ubuntu-LI-webfont.eot');
	src: local('☺'), url('https://www.hausburg-quartier.de/hqwp/wp-content/themes/hausburg-responsive/fonts/Ubuntu-LI-webfont.woff') format('woff'), url('https://www.hausburg-quartier.de/hqwp/wp-content/themes/hausburg-responsive/fonts/Ubuntu-LI-webfont.ttf') format('truetype'), url('https://www.hausburg-quartier.de/hqwp/wp-content/themes/hausburg-responsive/fonts/Ubuntu-LI-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
	}
	
/* icon-font */
@font-face {
	font-family: 'entypo';
	src:url('https://www.hausburg-quartier.de/hqwp/wp-content/themes/hausburg-responsive/fonts/entypo.eot');
	src:url('https://www.hausburg-quartier.de/hqwp/wp-content/themes/hausburg-responsive/fonts/entypo.eot?#iefix') format('embedded-opentype'),
		url('https://www.hausburg-quartier.de/hqwp/wp-content/themes/hausburg-responsive/fonts/entypo.woff') format('woff'),
		url('https://www.hausburg-quartier.de/hqwp/wp-content/themes/hausburg-responsive/fonts/entypo.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	}

/* !icon fonts ---------------------------------------- */
[data-icon]:before {
	font-family: 'entypo';
	color: #aaa;
	content: attr(data-icon);
	speak: none;
	font-size: 1em;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	}
	
.icon-alone { 
	display: inline-block; /* Chrome 19 was weird with clickability without this */ 
	}

body {
	background: url(images/bg-browser-top.jpg) repeat-x, url(images/bg-browser.jpg) #56576b;
	font: 62.5%/75% 'UbuntuLight', Verdana, Geneva, sans-serif; /* ab jetzt ist 1 em = 10px */
	height: 100%;
	text-align: center; /*  hack fuer zentrierung */
	}

p, h1, h2, h3, h4, h5, h6, ul, ol {
	margin-bottom: 15px;
	}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
	color: #716f91; 
	font-family: 'UbuntuLight', Verdana, Geneva, sans-serif; 
	font-size: 1.2em; 
	font-weight: normal; 
	line-height: 1.1;
	}

h1 {
	font-size: 2.6em; 
	line-height: 1; 
	margin-bottom: 5px;
	}
	
h2 {
	font-size: 1.8em; 
	margin-bottom: 15px; 
	margin-top: 40px;
	}
	
h3 {
	font-size: 1.5em; 
	margin-bottom: 10px; 
	margin-top: 30px;
	}
	
.first {
	margin-top: 0; 
	margin-bottom: 25px;
	}

p {
	font-size: 1.25em; 
	line-height: 1.5;
	}
	
strong {
	color: #716f91; 
	font-weight: bold;
	}
	
em {
	font-family: 'UbuntuLightItalic', Verdana, Geneva, sans-serif; 
	font-style: normal;
	}

sup, sub {
	height: 0; 
	line-height: 1; 
	vertical-align: 
	baseline; 
	position: relative;
	}
	
sup {
	bottom: 1ex; 
	font-size: 0.6em;
	}
	
sub {
	top: .5ex;
	}

table {
	border-collapse: collapse; 
	border-spacing: 5px; 
	font-size: 1.2em; 
	line-height: 1.5; 
	margin: 10px 0 5px 0; 
	width: 720px;
	}
	
td, th {
	padding: 5px; 
	text-align: center; 
	vertical-align: top;
	}
	
tr {
	background-color: #fffadf;
	}
	
tr:hover {
	background-color: #fff1c0;
	}
	
td {
	border-bottom: 2px solid #fff; 
	border-right: 5px solid #fff; 
	padding-bottom: 2px;
	}
	
th {
	background-color: #9489a3; 
	border-right: 5px solid #fff; 
	color: #fff; 
	font-weight: normal; 
	text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
	}
	
th.left, 
td.left {
	padding-left: 10px; 
	text-align: left;
	}
	
table img {
	margin: 0 0 5px; 
	padding: 0;
	}

form label {
	display: block; 
	cursor: pointer; 
	margin-top: 20px; 
	margin-bottom: -10px;
	}
	
textarea, input {
	width: 400px; 
	background: #ECF3F9;
	}
	
textarea {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 1em;
	}
	
input {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 1em;
	}
	
input#reset, 
input#submit {
	width: auto; 
	margin-right: 20px; 
	margin-top: 20px; 
	background: none;
	}
	
input:focus, 
select:focus, 
textarea:focus {
	background: #D9E6F3;
	}

img {
	border: none; 
	-moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
	-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
	font: 80%/100% Verdana, Arial, Helvetica, sans-serif; 
	margin-bottom: 20px;
	max-width: 100%; 
	height: auto; 
	width: auto\9; /* ie8 */	
	}
	
a img {
	border: none; 
	color: #000;
	}
	
img.alignleft {
	float: left; 
	margin-right: 45px; 
	margin-top: 7px;
	} /* wp-class */
	
img.alignright {
	float: right; 
	margin-right: 45px;
	} /* wp-class */
	
img.alignnone {
	margin: 0;
	} /* wp-class */
	
img.size-medium {
	margin-top: 7px;
	} /* wp-class */
	
img.alignnone.size-medium {
	margin-bottom: 20px;
	} /* wp-class */
	
.icon {
	float: left; 
	margin-right: 8px; 
	margin-top: 0; 
	width: 50px;
	}
	
.clear {
	clear: both;
	}

abbr[title] {
	cursor: help;
	}

a:link {
	color: #dc754d; 
	text-decoration: underline;
	}
	
a:visited {
	color: #666;
	}
	
a:hover {
	color: #dc754d; 
	text-decoration: none;
	}
	
.screen-reader-text { /* Reusable, toolbox kind of class */ 
	position: absolute; 
	top: -9999px; 
	left: -9999px; 
	}




/* !2. Header ------------------------------------------------------------------- */
#toolbar {
	background-color: transparent; 
	color: #FFF; 
	font-size: 85.71%; 
	margin: 0 auto; 
	height: 39px; 
	padding-top: 4px; 
	text-align: right; 
	text-shadow: 1px 1px 1px #777; 
	width: 1055px;
	z-index: 10;
	}
	
#searchform {
	display: inline-block; 
	float: right; 
	margin-left: 20px; 
	margin-right: 40px;
	}
	
#searchform #s {
	background-color: rgba(255,255,255,0.2);
  	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,.3);
	-moz-box-shadow: inset 1px 1px 3px rgba(0,0,0,.3);
	box-shadow: inset 1px 1px 3px rgba(0,0,0,.3);
  	color: #b1b1bd;
  	border: 1px solid #686882;
  	font: 13px 'UbuntuLight', Verdana, Geneva, sans-serif;
	margin: 0 5px 0 5px;
 	padding: 3px 6px;
  	text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  	width: 160px;   	
	}
	
#searchform input#s {
	color: #b1b1bd;
	}
	
#searchform #searchsubmit {
	background: transparent; 
	width: 17px;
	}
	
img.langbtn {
	margin: 3px 5px;
	}

#shine {
	background: url(images/bg-shine-cutout.png) no-repeat; 
	height: 300px; 
	left: -115px; 
	position: absolute; 
	top: -51px; 
	width: 704px; 
	z-index: 0;
	}
	
#header {
	background:  url(images/bg-header.jpg) no-repeat #fff; 
	-moz-box-shadow: 0 0 15px rgba(0,0,0,.6);
	-webkit-box-shadow: 0 0 15px rgba(0,0,0,.6);
	box-shadow: 0 0 15px rgba(0,0,0,.6);
	height: 250px; 
	margin: 0 auto 0; 
	position: relative; 
	width: 1055px;	
	}

#logo {
	background: transparent; 
	height: 155px; 
	left: 39px; 
	position: absolute; 
	top: 37px; 
	width: 400px;
	}


	
	
/* !3. Navigation ------------------------------------------------------------------- */

#nav-main {
	
	}

/* smartphone-menu */
/* menu icon, wird dynamisch per js eingefügt */
#menu-icon {
	display: none;
	}

/* horizontale Liste */
ul#nav {
	background: #ee9560;
	background: -moz-linear-gradient(top, #ee9560 0%, #dc764d 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ee9560), color-stop(100%,#dc764d));
	background: -webkit-linear-gradient(top, #ee9560 0%,#dc764d 100%);
	background: -o-linear-gradient(top, #ee9560 0%,#dc764d 100%);
	background: -ms-linear-gradient(top, #ee9560 0%,#dc764d 100%);
	background: linear-gradient(top, #ee9560 0%,#dc764d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee9560', endColorstr='#dc764d',GradientType=0 );
	bottom: 0;
	color: #fff;
	font-family: 'UbuntuLight', Verdana, Geneva, sans-serif;
	font-size: 1.6em;
	height: 50px;
	line-height: 1.2;
	list-style: none;
	padding-left: 25px;
	position: absolute;
	margin-bottom: 0;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
	width: 1030px; /* 1055px - 25px padding-left */	
	}


ul#nav {
	list-style-type: none;
	}
	
ul#nav li {
	display: inline; 
	float: left; 
	list-style-type: none; 
	width: auto;
	}

ul#nav a:link, 
ul#nav a:visited {
	background: transparent; 
	color: #fff; 
	display: block;
	height: 25px; 
	padding: 15px 15px 10px; 
	text-decoration: none; 
	}

ul#nav a:hover {
	padding: 14px 15px 11px;
	}
	
ul#nav a:hover, 
ul#nav li.naviactive {
	background: #ee9560;
	background: -moz-linear-gradient(top, #ee9560 0%, #c46743 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ee9560), color-stop(100%,#c46743));
	background: -webkit-linear-gradient(top, #ee9560 0%,#c46743 100%);
	background: -o-linear-gradient(top, #ee9560 0%,#c46743 100%);
	background: -ms-linear-gradient(top, #ee9560 0%,#c46743 100%);
	background: linear-gradient(top, #ee9560 0%,#c46743 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee9560', endColorstr='#c46743',GradientType=0 );
	}
		
ul#nav li.naviactive {
	height: 25px; 
	padding: 15px 20px 10px;
	} /* aktives level 1 */

ul#nav li.naviactive a {} /* aktives level 1 */

#sidebar li#menu-item-128 {
	margin-bottom: 20px;
	} /* eintrag agnes-wabnitz-str hat abstand zu den darauffolgenden rubriken */
	
#sidebar li#menu-item-136 {
	margin-bottom: 20px;
	} /* eintrag agnes-wabnitz-str (englisch) hat abstand zu den darauffolgenden rubriken */



/* !4. Content ------------------------------------------------------------------- */
#content {
	background: transparent;
	float: left;
	font-size: 1.2em;
	line-height: 1.8em;
	margin: 20px 0 40px 40px;
	width: 720px;
	}
	
#content.fullscreen {
	width: 975px;
	}
	
#breadcrumb {
	color: #716f91; 
	font-size: 85.7%; 
	margin-bottom: 40px;
	}
	
#breadcrumb a:link {
	text-decoration: none;
	}
	
#breadcrumb a:hover {
	text-decoration: underline;
	}
	
#breadcrumb a:visited {
	color: #dc754d;
	}
	
#breadcrumb span {
	color: #dc754d;
	}

.totop {
	clear: both; 
	display: block; 
	font-size: 1em; 
	margin-top: 40px;
	}
	
.totop a:visited {
	color: #dc754d;
	}

.addspace {
	margin-top: 40px;
	}
	
.vertspace {
	clear: both; 
	display: block; 
	margin-top: 50px;
	}
	
.hinweis {
    background-color: #fff1c0;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
    padding: 1em;
}

.hinweis-2 {
	border-top: 1px solid #666;
    border-bottom: 1px solid #666;
    display: inline-block;
    margin-top: 50px;
    padding: 1em;
}

img.noshadow, table img {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	}

img.imgleft, img.imgright, img.imgsecond {
	margin-bottom: 5px; 
	margin-top: 5px;
	}
	
img.imgleft {
	float: left;
	margin-right: 20px;
	}
	
img.imgright {
	float: right; 
	margin-left: 20px; 
	margin-right: 0;
	}

#content ul, #content ol {
	font-size: 1.25em; 
	line-height: 1.2; 
	margin: 0 0 20px 15px;
	}
	
#content ol {
	margin: 0 0 20px 20px;
	}
	
#content li {
	margin-bottom: 5px;
	}
	
#content ul li, 
#sidebar ul li, 
#sidebar ul.widget li .textwidget ul li {
	background: url(images/bullet.png) no-repeat  0em  0.5em; 
	list-style: none; 
	padding-left: 1.2em; 
	padding-bottom: 3px;
	}
	
#content ul.ohnebullet li, 
#sidebar ul#subnav li, 
#sidebar ul.ohnebullet li, 
#sidebar ul.widget li {
	background: none; 
	padding-left: 0;
	}

a.actionbtn, .actionbtn:visited {
	background: #f4914d;
	background: -moz-linear-gradient(top, #ffc074 8%, #fdac6a 31%, #f4914d 51%, #df7a51 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(8%,#ffc074), color-stop(31%,#fdac6a), color-stop(51%,#f4914d), color-stop(100%,#df7a51));
	background: -webkit-linear-gradient(top, #ffc074 8%,#fdac6a 31%,#f4914d 51%,#df7a51 100%);
	background: -o-linear-gradient(top, #ffc074 8%,#fdac6a 31%,#f4914d 51%,#df7a51 100%);
	background: -ms-linear-gradient(top, #ffc074 8%,#fdac6a 31%,#f4914d 51%,#df7a51 100%);
	background: linear-gradient(top, #ffc074 8%,#fdac6a 31%,#f4914d 51%,#df7a51 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc074', endColorstr='#df7a51',GradientType=0 );
	 
	border: 1px solid #f4914d;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	margin: 10px 20px 20px 0; 
	outline: none;
	position: relative;
	text-align: center;
	text-decoration: none;
		
	font: 110%/100% 'UbuntuLight', Verdana, Geneva, sans-serif;
	padding: 9px 15px;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
	box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
	}

.actionbtn:hover {
	background: #ea8542;
	background: -moz-linear-gradient(top, #f7b463 8%, #f49f5a 31%, #ea8542 51%, #d46e46 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(8%,#f7b463), color-stop(31%,#f49f5a), color-stop(51%,#ea8542), color-stop(100%,#d46e46));
	background: -webkit-linear-gradient(top, #f7b463 8%,#f49f5a 31%,#ea8542 51%,#d46e46 100%);
	background: -o-linear-gradient(top, #f7b463 8%,#f49f5a 31%,#ea8542 51%,#d46e46 100%);
	background: -ms-linear-gradient(top, #f7b463 8%,#f49f5a 31%,#ea8542 51%,#d46e46 100%);
	background: linear-gradient(top, #f7b463 8%,#f49f5a 31%,#ea8542 51%,#d46e46 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7b463', endColorstr='#d46e46',GradientType=0 );
	}
	
.actionbtn:active {
	top: 1px;
	}

.smalltext {
	font-size: 1em;
	}

.teaser {
	margin-top: 30px;
	}
	
.teaser p {
	font-size: 1.083em; 
	line-height: 1.4;
	}
	
.teaser h3 {
	margin-top: 0;
	}
	
.threecol {
	float: left; 
	margin-right: 45px; 
	width: 210px;
	}
	
.last {
	margin-right: 0;
	}


/*----------- Flexslider CSS anpassen ---------------*/
#content .flexslider {
	border: none;
	border-radius: 0;
	-moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
	-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
	margin: 0;
	}
	
#content ul.slides,
#content ul.flex-direction-nav {
	margin: 0;
	}
	
#content ul.slides li,
#content ul.flex-direction-nav li {
	margin: 0;
	padding: 0;
	}
	
#content ul.slides img,
#content ul.slides img.alignnone {
	margin: 0;
	padding: 0;
	}

#content ol.flex-control-nav {
	margin: 1em 0;
	}



/*----------- jQuery Tools slideshow CSS ---------------*/
#slideshow { 
	-moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
	-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
	color: #fff; 
	clear: both; 
	height: 443px; 
	margin-top: 0; 
	margin-bottom: 40px; 
	overflow: hidden; 
	position: relative;	
	}
	
#slideshow img.alignnone {
	margin-top: 0;
	}

.images {} /* container for slides */

.images div {} /* single slide */

.slidetabs {
	clear: both; 
	visibility: hidden;
	} /* tabs (those little circles below slides) */
	
/* single tab */
.slidetabs a {}

.slidetabs a:hover {} /* mouseover state */

.slidetabs a.current {} /* active state (current page state) */
 	
.forward, .backward {} /* prev and next buttons */

/* next */
.forward {
	background: url(images/slideshow-arrows-dark.png) no-repeat 0 -30px; 
	display: block; 
	height: 30px; 
	position: absolute; 
	top: 200px; 
	left: 670px;
	text-indent: -999em; 
	width: 30px; 
	z-index: 200;
	}
	
.forward:hover {
	background-position: -30px -30px;
	}
	
.forward:active {} 

/* prev */
.backward {
	background: url(images/slideshow-arrows-dark.png) no-repeat 0 0; 
	display: block; 
	height: 30px; 
	position: absolute; 
	top: 200px; 
	left: 20px;
	text-indent: -999em; 
	width: 30px; 
	z-index: 200;
	}
	
.backward:hover {
	background-position: -30px 0;
	}
	
.backward:active {}

/* disabled navigational button. is not needed when tabs are configured with rotate: true */
.disabled {
	visibility:hidden !important;
	}
/*----------------------------------------------------*/


/*----------- jQuery Tools Fotogalerie CSS ---------------*/

/* mein container */
.fotogalerie {
	background-color: #fff; 
	height: 600px; 
	width: 975px;
	}

/* styling for the image wrapper  */
#imagewrap {
	width: 975px;
	margin: 0;
	padding: 0;
	text-align: center;
}


/*	root element for the scrollable. when scrolling occurs this element stays still. */
.scrollable {
	background: transparent;
	float: left;
	position: relative;
	overflow: hidden;
	width: 805px;
	height: 120px;
}

/*	root element for scrollable items. Must be absolutely positioned and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and not for this element. */
.scrollable .items {
	clear: both; 
	position: absolute; 
	width: 20000em;
	}
	
.items div {
	float: left; 
	width: 805px;
	}

/* single scrollable item */
.scrollable img {
	cursor: pointer;
	float: left;
	margin: 20px 5px 20px 21px; /* war 20px 5px 20px 21px */
	background-color: #fff;
	padding: 2px;
	border: 1px solid #ccc;
	width: 125px;
	height: 77px;
}

/* active item */
.scrollable .active {
	border: 3px solid #716f91; 
	cursor: default; 
	position: relative;
	}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background: url(images/slideshow-arrows-dark.png) no-repeat;
	display: block;
	width: 30px;
	height: 30px;
	float: left;
	margin: 50px 20px;
	cursor: pointer;
	font-size: 1px;
	}

/* right */
a.right {
	background-position: 0 -30px; 
	clear: right; 
	margin-right: 0;
	}
	
a.right:hover {
	background-position: -30px -30px;
	}
	
a.right:active {
	background-position: -60px -30px;
	} 


/* left */
a.left { 
	margin-left: 30px;
	}
	 
a.left:hover {
	background-position: -30px 0;
	}
	
a.left:active {
	background-position: -60px 0;
	}


/* disabled navigational button */
a.disabled { 
	visibility:hidden !important; 
	} 
/*----------------------------------------------------*/



/*----------- Wohnungslisten ---------------*/
table.apartments {
	margin-bottom: 20px;
	}
	
table.apartments .reserviert {
	background-color: #f90; 
	padding-top: 8px;
	} /* verkaufsindikator reserviert */
	
table.apartments .frei {
	background-color: #6ec666; 
	padding-top: 8px;
	} /* verkaufsindikator frei */


dl.legend {
	margin: 10px 0 30px 0;
	}
	
dl.legend dd, dl.legend dt {
	display: inline; 
	margin: 0;
	}
	
dl.legend dt {
	margin-right: 3px;
	}
	
dt img {
	margin: 0 3px 0 0;
	}
	
dl.legend dd {
	margin-right: 10px;
	}
/*----------------------------------------------------*/



/* !5. Left column ------------------------------------------------------------------- */



/* !6. Right column ------------------------------------------------------------------- */
#sidebar {
	color: #666; 
	font-size: 1.5em; 
	float: right; 
	line-height: 1.3; 
	margin: 160px 40px 0 0; 
	width: 210px;
	}
	
#sidebar h3:first-child {
	margin-top: 0;
	}
	
#sidebar h3 {
	margin-bottom: 10px;
	}
	
#sidebar p {
	font-size: 1em;
	}
	
#sidebar ul {
	list-style-type: none; 
	margin: 0 0 15px 0; 
	padding-bottom: 20px;
	}
	
#sidebar li {
	margin-bottom: 6px; 
	padding-top: 0;
	}

#sidebar ul#subnav li a:link {
	text-decoration: none;
	}
	
#sidebar ul#subnav li a:hover {
	text-decoration: underline;
	}
	
#sidebar ul#subnav li a:visited {
	color: #dc754d;
	}
	
#sidebar ul#subnav li.current-menu-item a {
	color: #716f91;
	}

#sidebar a.actionbtn {
	margin: 0 0 30px; 
	width: 130px;
	}

/* besichtigungsbanner */
#sidebar ul.widget li#text-4, 
#sidebar ul.widget li#text-5, 
#sidebar ul.widget li#text-6, 
#sidebar ul.widget li#text-7 {
	background: #fff6dd;
	background: -moz-linear-gradient(top,  #fff6dd 0%, #fff3ce 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff6dd), color-stop(100%,#fff3ce));
	background: -webkit-linear-gradient(top,  #fff6dd 0%,#fff3ce 100%);
	background: -o-linear-gradient(top,  #fff6dd 0%,#fff3ce 100%);
	background: -ms-linear-gradient(top,  #fff6dd 0%,#fff3ce 100%);
	background: linear-gradient(top,  #fff6dd 0%,#fff3ce 100%);
	margin-top: 5px;
	padding: 10px;
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
	box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
	}
	
#sidebar ul.widget li#text-4 h4, 
#sidebar ul.widget li#text-5 h4 {
	margin-bottom: 0;
	}
	
#sidebar ul.widget li#text-4 p, 
#sidebar ul.widget li#text-5 p {
	margin-bottom: 10px;
	}
	
#sidebar ul.widget li#text-6,
#sidebar ul.widget li#text-7 {
	background: #ee9560;
	background: -moz-linear-gradient(top, #ee9560 50%, #dc764d 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#ee9560), color-stop(100%,#dc764d));
	background: -webkit-linear-gradient(top, #ee9560 50%,#dc764d 100%);
	background: -o-linear-gradient(top, #ee9560 50%,#dc764d 100%);
	background: -ms-linear-gradient(top, #ee9560 50%,#dc764d 100%);
	background: linear-gradient(top, #ee9560 50%,#dc764d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee9560', endColorstr='#dc764d',GradientType=0 );
	color: #fff;
	margin-bottom: 20px;
	text-align: center;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
	}
	
#sidebar ul.widget li#text-6 h4,
#sidebar ul.widget li#text-7 h4 {
	color: #fff;
	line-height: 1.3;
	margin-bottom: 0;
	}



/* !7. Footer ------------------------------------------------------------------- */
#footer {
	clear: both; 
	color: #fff; 
	font-size: 1.2em; 
	line-height: 1.2; 
	margin: 0 auto; 
	height: 60px; 
	padding: 1em 0 2em; 
	text-align: center; 
	text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
	width: 1055px;	
	}

#footer ul {
	text-align: center;
	margin: 0 auto;;
	width: 600px;
	}
	
#footer ul li {
	display: inline-block;
	float: left;
	list-style-type: none;
	border-right: 1px solid #fff;
	padding: 0 10px;
	}
	
#footer ul li:last-child {
	border-right: none;
	}

#footer a:link {
	background: transparent; 
	color: #fff; 
	font-weight: normal; 
	text-decoration: none;
	}
	
#footer a:visited {
	color: #fff;
	}
	
#footer a:hover {
	text-decoration: underline;
	}

#footer span {
	margin: 0 5px;
	}
	
.totopicon {
	display: none;
	margin: .5em 0;
	}

#footer a.icon-alone {
	color: #fff;
	font-size: 3em;
	}
	
#footer a.icon-alone:hover {
	text-decoration: none;
	}

#footer a.icon-alone:hover [data-icon]:before {
	color: #fff;
	}







/* ==========================================================================
   Media Queries
   ========================================================================== */

/* ========================================================================== */
/* !10. RESPONSIVENESS           ---------------------------------------- */
/* ========================================================================== */


/* achtung: bei max-device-width wird es schwierig, da retina-displays eine höhere auflösung haben! */

		
/* !max-width: 1100px = 68.75em in diesem fall ----------------------------------- */
/* ab hier verändern sich die container flexibel */

@media screen and (max-width: 68.75em) {
	
	/* h1 {color: gold;} */ /* breakpoint-indikator */
	
	body {
		background: url(images/bg-browser.jpg) #56576b;
		}
	
	#headerwrapper {
		height: auto;
		position: relative;
		}
	
	#toolbar,
	#header,
	#wrapper,
	#footer,
	ul#nav {
		width: 96%; /* mit seitenabstand */
		}
		
	#header {
		background-size: 100% auto;
		height: auto;
		padding-top: 2em;
		}
	
	#content,
	table {
		width: 65%;
		}
		
	#content {
		margin: 1.25em 0 2.5em 2.5em;
		}
		
	.threecol {
		margin-right: 4%;
		width: 29%;
		}
		
	.threecol img.size-medium { /* wp-klasse, bilder in teasern sollen nicht noch zusätzlich gedrittelt werden */
		width: 100%;
		}
		
	img.size-medium { /* wp-klasse, wichtig für drei-bilder-nebeneinander-reihe */
		width: 30%;
		}
		
	img.alignleft {
		margin-right: 4%;
		}

		
	#sidebar {
		margin: 11em 2.5em 0 0;
		width: 23%;
		}
		
	textarea,
	#logo {
		width: 37.91469194%;
		}
		
	#shine {
		background: url(images/bg-shine-cutout-fade.png) no-repeat;
		height: 130px;
		top: -5.2em;
		width: 600px;
		}
		
	ul#nav {
		bottom: auto;
		padding-left: 1em;
		position: relative;
		width: auto;
		}
		
	#logo {
		height: auto;
		left: auto;
		margin: 1.5em 0 0 3em;
		position: relative;
		top: auto;
		}
		
	#logo img {
		margin-bottom: 0;
		}
		
	table {
		width: 100%;
		}
		
	/*----------- jQuery Tools Fotogalerie CSS responsiv ---------------*/
	#content.fullscreen {
		width: 92%;
		}
	
	.fotogalerie,
	#imagewrap {
		height: auto; 
		width: 100%;
		}
		
	#imagewrap img {
		margin-bottom: 0;
		}
		
	.scrollable {
		height: 9em;
		width: 37em;
		}
		
	.items div {
		width: 38em; /* % funktionieren nicht, da die thumbs um eine bestimmte breite verschoben werden */
		}
		
	.scrollable img {
		height: auto;
		margin: 2.5em .7em 1.5em;
		width: 7em; /* % funktionieren nicht, da die thumbs um eine bestimmte breite verschoben werden */
		}
		
	a.browse {
		margin: 30px 1em;
		}
	
	/* end fotogalerie */	
		

	}


/* !max-width: 880px = 55em in diesem fall ----------------------------------- */
/* ab hier verändern sich die container flexibel */

@media screen and (max-width: 55em) {
	/* h1 {color: grey;} */ /* breakpoint-indikator */

	ul#nav {
		font-size: 1.5em;
		padding-left: 1.7em;
		}
		
	ul#nav a:link, 
	ul#nav a:visited {
		padding: 1.1em .6em .6em;
		}
	
	#logo {
		margin-top: 1em;
		}
}


/* !max-width: 800px = 50em in diesem fall ----------------------------------- */
/* sidebar unter content */

@media screen and (max-width: 50em) {
	     
	/* h1 {color: orange;} */ /* breakpoint-indikator */	
		
	#content,
	#sidebar {
		width: 92%;
		}
	
	#sidebar {
		margin: 2em 2em 0;
		}
	
	ul#nav {
		font-size: 1.4em;
		}
		
	ul#nav a:link, 
	ul#nav a:visited {
		padding: 1.1em .5em .6em;
		}	   

	}

/* !max-width: 700px = 43,75em in diesem fall ----------------------------------- */
/* einspaltig */

@media screen and (max-width: 43.75em) {
	
	/* h1 {color: red;} */ /* breakpoint-indikator */
	
	html { 
		-webkit-text-size-adjust: none; 
		-ms-text-size-adjust: none;
		}
		
	h1 {
		font-size: 2em; 
		}
		
	h2 {
		font-size: 1.6em; 
		}
		
	h3 {
		font-size: 1.3em; 
		}
	
	#toolbar, 
	#header, 
	#wrapper, 
	#footer, 
	ul#nav {
	    width: 100%;
		}
	
	#shine {
		display: none;
		}
	
	#nav-main {
		background: #ee9560;
		background: -moz-linear-gradient(top, #ee9560 0%, #dc764d 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ee9560), color-stop(100%,#dc764d));
		background: -webkit-linear-gradient(top, #ee9560 0%,#dc764d 100%);
		background: -o-linear-gradient(top, #ee9560 0%,#dc764d 100%);
		background: -ms-linear-gradient(top, #ee9560 0%,#dc764d 100%);
		background: linear-gradient(top, #ee9560 0%,#dc764d 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee9560', endColorstr='#dc764d',GradientType=0 );
		margin-top: -.6em;
		}
	
	ul#nav {
		display: none; /* menu-icon-function: visibility will be toggled with jquery */
		font-size: 1.6em;
		padding-left: 0;
		}
		
	ul#nav li {
		background: #ee9560;
		background: -moz-linear-gradient(top, #ee9560 0%, #dc764d 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ee9560), color-stop(100%,#dc764d));
		background: -webkit-linear-gradient(top, #ee9560 0%,#dc764d 100%);
		background: -o-linear-gradient(top, #ee9560 0%,#dc764d 100%);
		background: -ms-linear-gradient(top, #ee9560 0%,#dc764d 100%);
		background: linear-gradient(top, #ee9560 0%,#dc764d 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee9560', endColorstr='#dc764d',GradientType=0 );
		display: block;
		float: none;
		}
		
	ul#nav a:link, 
	ul#nav a:visited {
		padding: 1.1em 2em .6em;
		}
	
	#menu-icon {
		color: #fff;
		cursor: pointer;
		display: block; /* show menu icon */
		font-size: 1.5em;
		padding: .2em 5%;
		width: 100%;
		}
		
	#menu-icon [data-icon]:before {
		color: #fff;
		font-size: 1.7em;
		margin-right: .2em;
		vertical-align: -25%;
		}
	
	#menu-icon:hover,
	#menu-icon.active {
		background: #ee9560;
		background: -moz-linear-gradient(top, #ee9560 0%, #c46743 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ee9560), color-stop(100%,#c46743));
		background: -webkit-linear-gradient(top, #ee9560 0%,#c46743 100%);
		background: -o-linear-gradient(top, #ee9560 0%,#c46743 100%);
		background: -ms-linear-gradient(top, #ee9560 0%,#c46743 100%);
		background: linear-gradient(top, #ee9560 0%,#c46743 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee9560', endColorstr='#c46743',GradientType=0 );
		}
		
	#logo {
		margin: -1.5em 4% 0;
		width: 47%;
		}
		
	#content,
	#sidebar {
		margin: 1em 4.5% 1em;
		width: 90%;
		}
		
	#sidebar ul {
		margin-bottom: 0;
		}
		
	#sidebar ul#subnav {
		font-size: 1.4em;
		}
		
	#breadcrumb {
		margin-bottom: 2em;
		}
		
	p,
	.teaser p {
		font-size: 1.35em;
		}
	
	.threecol {
		margin-right: 0;
		width: 100%;
		}
		
	.teaser h3 {
		font-size: 1.6em;
		}
		
	#content ul.flex-direction-nav {
		display: none;
		}

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
		}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
		}
	
	tr { 
		/* border: 2px solid #fff; */ 
		}
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 3px solid #fff; 
		position: relative;
		padding-left: 50%; 
		text-align: left;
		}
		
	th {
		font-weight: bold;
		}
		
	tr:hover {
		background-color: #fffadf; /* gleiche farbe = kein hover sichtbar */
		}
		
	td:nth-of-type(1) {
		border-top: 1.5em solid #fff;
		}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		}
	
		/*
		Label the data
		*/
		td:nth-of-type(1):before { content: "Wohnung"; font-weight: bold;}
		td:nth-of-type(2):before { content: "Lage"; font-weight: bold;}
		td:nth-of-type(3):before { content: "Zimmer"; font-weight: bold;}
		td:nth-of-type(4):before { content: "ca. m2"; font-weight: bold;}
		td:nth-of-type(5):before { content: "Aufzug"; font-weight: bold;}
		td:nth-of-type(6):before { content: "Balkon/Garten"; font-weight: bold;}
		td:nth-of-type(7):before { content: "Preis EUR"; font-weight: bold;}
		td:nth-of-type(8):before { content: "Nettokalt/Jahr EUR"; font-weight: bold;}
		td:nth-of-type(9):before { content: "Status"; font-weight: bold;}
		td:nth-of-type(10):before { content: "Plan"; font-weight: bold;}
		
		td:nth-of-type(1) {background-color: #9489a3; color: #fff; font-weight: bold; text-shadow: 1px 1px 2px rgba(0,0,0,0.5);}
		
	/* footer-totop-nav einblenden und seiten-totop-nav ausblenden */
	.totopicon { 
		display: block;
		}
		
	p.totop {
		display: none;
		}
		
	/*----------- jQuery Tools Fotogalerie CSS responsiv ---------------*/
	/* scrollable aufheben und alle thumbs als float zeigen */
		
	.scrollable {
		height: auto;
		margin-bottom: 3em;
		width: 100%;
		}
		
	.scrollable .items {
		position: relative;
		width: 100%;
		}
		
	.items div {
		display: inline-block;
		float: left;
		width: 100%;
		}
		
	.scrollable img {
		height: auto;
		margin: 2em 1.5% 0;
		width: 15%;
		}
		
	a.browse {
		display: none;
		}
	
	#footer ul {
		font-size: 1.25em;
		width: 100%;
		}
	
	#footer ul li {
		display: block;
		float: none;
		border-right: none;
		padding: .6em 0;
		}
		
	#footer ul li:last-child {
		padding-bottom: 3em;
		}
	
	/* end fotogalerie */


	}
	
/*  !max-device-width: 320px (iPhone) ----------------------------------- */

@media screen and (max-width: 20em) { 
	
	/* h1 {color: #900;} */ /* breakpoint-indikator */
	
	h1,
	h2,
	h3 {
		word-wrap: break-word;
		}
			
	img.langbtn {
		width: 6%;
		}
		
	#searchform {
		margin-right: 1em;
		}
	
	#searchform #s {
		width: 10em;
		}
		
	#header {
		background-size: 150% auto;
		background-position-x: -15em;
		}
		
	#logo {
		margin: -.5em 4% .6em;
		width: 55%;
		}
	
	
	}