/*
	Farben:
	Hellgelb: #FEB;
	Gelb: #FC0;
	Hellblau: #89C;
	Blau: #039; 

*/

/**************************************************/
/* A. Global **************************************/

html {
	min-height: 101%;
}
body {
	background: #FEB;
	margin: 0;
	font: 16px/1.5 "Quattrocento Sans", Arial, Helvetica, sans-serif;
	font-weight: 400;
	color: #222;
}

/* A.1 Überschriften */

h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: 0.5em;	
	font-weight: 700;
}

h1 {
	font-size: 2em;
	line-height: 1.2;
	color: #039;
}
h2 {
	font-size: 1.75em;
	color: #039;
}
h3 {
	font-size: 1.4em;
	color: #039;
}
h4 {
	font-size: 1.2em;
}
h5 {
	font-size: 1.2em;
}
h6 {
	font-size: 1em;
}

/* A.2 Absätze */

p {
	margin-top: 0;
	margin-bottom: 1em;
}
p.lead {
	font-weight: 600;
	font-size: 1.2em;
}
p.overview {
	text-align: center;
	width: 12em;
	margin-left: auto;
	margin-right: auto;
}
p.accent {
	color: #000;
	font-weight: bold;
}
p.byline {
	color: #999;
}
p.byline a {
	color: #666;
}
p.last {
	margin-bottom: 2em;
}
p:last-child {
	margin-bottom: 0;
}
hr {
	clear: both;
	height: 1px;
	border: none;
	display: block;
	margin: 0 0 2em;
	padding: 2em 0 0;
	border-bottom: 1px solid #DDD;
}

/* A.3 Listen */

ul {
	padding: 0;
	margin: 0;
}
dl {
	margin: 0 0 1em;
	padding: 0;
}
dt {
	float: left;
	margin: 0 5% 0.5em 0;
	width: 25%;
}
dd {
	margin: 0 0 0.5em 30%;
}


/* A.4 Hyperlinks */

a {
	color: #039;
	text-decoration: none;
	transition: background-color 0.5s, color 0.5s;
	-o-transition: background-color 0.5s, color 0.5s;
	-ms-transition: background-color 0.5s, color 0.5s;
	-moz-transition: background-color 0.5s, color 0.5s;
	-webkit-transition: background-color 0.5s, color 0.5s;
}
a:focus,
a:active {
	outline: none;
}
a:hover {
	color: #89C;
	outline: none;
}
a.push {
	padding: 0.25em 1em;
	display: block;
	border-radius: 0.25em;
	border: 1px solid #06C;
	background: #DDD;
}
a.push:hover {
	color: #FFF;
	background: #06A;
}
a.ahead:before {
	content: "\00bb\00a0";
}
a.behind:before {
	content: "\00ab\00a0";
}
a.external:after {
	content: "\00a0\2197";
}

a[href$=".pdf"] {
	padding-right: 20px;
	background-image: url(../images/icon/icon_pdf.gif);
	background-repeat: no-repeat;
	background-position: right center;
}

/* A.5 Textauszeichnung */

strong {
    font-weight: 700;
}
em {
	font-style: normal;
	color: #444;
}
abbr[title] {
    border-bottom: 1px dotted;
	cursor: help;
}
sup, sub {
	font-size: 0.7em;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.3em;
}
sub {
    bottom: -0.3em;
}
small {
	font-size: 0.8em;
	color: #999;
	font-weight: normal;
}
small a {
	color: #666;
}
small a:hover {
	color: #333;
}
address {
	font-style: normal;
	margin-bottom: 1em;
}
dfn,
samp {
	color: #999;
	font: inherit;	
}
dfn {
	display: block;
	margin-left: 25%;
	padding-top: 0.5em;
}
samp {
	padding-left: 1em;
	vertical-align: baseline;
}
mark {
	background: #FFC;
	color: inherit;
	padding: 0 0.25em;
}
pre,
kbd,
code {
	font: 0.9em "Courier New", Courier, monospace;
	color: #000;
	background: #DDD;
	padding: 0.1em 0.25em;
	vertical-align: middle;
	display: inline-block;
}
pre {
	display: block;
	padding: 0.5em 1em;
}
del {
	color: #966;
}
ins {
	text-decoration: none;
	font-weight: 400;
}
blockquote {
	margin: 0 2em 1em 1em;
	padding-left: 1em;
	font-style: italic;
	border-left: 2px solid #DDD;
}
dialog {
}
kbd {
	border: 1px solid #999;
	border-radius: 0.25em;
}
time {
}
q  {
}
cite {
}
span.author {
	padding-right: 1em;
}
span.date {
	color: #666;
	padding-right: 1em;
}


/* A.6 Abbildungen */

figure {
	background: #FFF;
	margin: 0 0 1em 0;
	padding: 1em;
	text-align: right;
}
figcaption {
	color: #666;
	font-size: 0.9em;
	margin-top: 1em;
}
img {
	display: block;
    border: none;
	max-width: 100%;
	height: auto;
}
img.inline {
	display: inline;
	margin: 0 0.5em;
	vertical-align: middle;
}
figure img {
	margin: 0 auto;
}


/* A.7 Icons */

i {
	display: inline-block;
}
i.social {
	width: 2em;
	height: 2em;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
i.twitter {
	background-image: url(../images/swyn/swyn_twitter.gif);
}
i.facebook {
	background-image: url(../images/swyn/swyn_facebook.gif);
}
i.googleplus {
	background-image: url(../images/swyn/swyn_googleplus.gif);
}
i.xing {
	background-image: url(../images/swyn/swyn_xing.gif);
}
i.linkedin {
	background-image: url(../images/swyn/swyn_linkedin.gif);
}
i.pinterest {
	background-image: url(../images/swyn/swyn_pinterest.gif);
}
i.instagram {
	background-image: url(../images/swyn/swyn_instagram.gif);
}
i.youtube {
	background-image: url(../images/swyn/swyn_youtube.gif);
}
i.tumblr {
	background-image: url(../images/swyn/swyn_tumblr.gif);
}
i.delicious {
	background-image: url(../images/swyn/swyn_delicious.gif);
}
i.foursquare {
	background-image: url(../images/swyn/swyn_foursquare.gif);
}
i.flickr {
	background-image: url(../images/swyn/swyn_flickr.gif);
}
i.aboutme {
	background-image: url(../images/swyn/swyn_aboutme.gif);
}

/* A.8 Tabellen */

table {
    border-collapse: collapse;
    border-spacing: 0;
	border-style: none;
	table-layout: fixed;
}
caption {
	font-size: 1.2em;
	font-weight: 600;
	text-align: left;
	margin-bottom: 1em;
}

th {
	text-align: left;
	padding: 0.25em;
}
td {
	vertical-align: top;
	padding: 0.25em;
}


/* Spaltenbreiten */

col.title  {
	width: 50%;
}
col.description {
	width: 75%;
}
col.address { 
	width: 30%;
}
col.function {
	width: 40%;
}
col.month,
col.product {
	width: 25%;
}
col.date,
col.price,
col.filesize {
	width: 20%;
}
col.date {
	width: 25%;
}
col.variant,
col.available {
	width: 15%;
}
col.weekday {
	width: 14.2857%;
}
col.unit,
col.total,
col.image,
col.amount,
col.filetype {
	width: 10%;
}
col.action {
	width: 5%;
}




/* A.9 Formulare */

form {
	margin: 0;
	padding: 0;
}
form br {
	clear: left;
}
fieldset {
	margin: 0;
	padding: 1em 0 2em;
	border-style: none;
}
fieldset.button {
	padding-left: 25%;
}
legend {
	padding: 0;
	margin: 0;
	color: #666;
	font-weight: bold;
}
label {
	padding-right: 2%;
	vertical-align: middle;
}
label.before {
	display: block;
	float: left;
	line-height: 2;
	width: 23%;
}
label.error {
	color: #D00;
}
input,
select,
textarea {
	border: 1px solid #999;
	font: inherit;
	margin: 0 0 0.25em 0;
	padding: 0.25em;
	vertical-align: middle;
}
input[type=date],
input[type=time] {
	width: 20%;
}
input.short,
input[type=password] {
	width: 35%;
}
input.standard,
input[type=url],
input[type=email],
textarea {
	width: 70%;
}
input.error,
select.error,
textarea.error {
	border-color: #D00;
}
input[type=checkbox], 
input[type=radio] {
	border: 0;
	height: 1em; 
	margin: 0.55em 0.5em 0.45em 0;
	padding: 0;
	width: 1em;
}
input.vertical {
	float: left;
	margin-left: 25%;
}
input.check {
	float: left;
	margin-right: 1%;
}
select {
	padding: 0.2em 0.25em 0.2em 0.05em;
}
option {
	margin: 0;
}
optgroup {
	font-style: normal;
	padding: 0 0.5em 1em;
}
textarea {
	overflow: auto;
}

input:hover,
select:hover,
textarea:hover {
	border-color: #777;
}
select:focus,
textarea:focus,
input:focus {
	border-color: #555;
	box-shadow: inset 0.05em 0.1em 0.1em #CCC;
}


/* Schaltflächen */

button {
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	border: none;
	background: #888;
	padding: 0.25em 1em;
	margin: 0 0 0.25em;
	color: #FFF;
	box-shadow: 0.1em 0.1em 0.1em  #CCC;
	vertical-align: middle;
	transition: background 0.3s;
}
button.cancel {
	background: #D00;
}
button.event {
	background: #D90;
}
button.okay {
	background: #6C0;
}
button.execute {
	background: #039;
}
button.execute:hover {
	background: #04A;
}

/* A.10 Allgemeine Klassen */

/* Global */

.scope {
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
}
.group:before, 
.group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.previous {
	float: left;
}
.next {
	float: right;
}
.back:before,
.more:after {
	font-size: 1em;
	line-height: 1.3;
	vertical-align: text-bottom
}
.back:before {
	content: "\2039\00a0";
}
.more:after {
	content: "\00a0\203a";
}
.anterior {
	float: left;	
	margin: 0 5% 1em 0;
	width: 30%;
}
.interior {
	margin: 0 auto;
}
.posterior {
	float: right;		
	margin: 0 0 1em 5%;
	width: 30%;
}
.leftAlone {
	float: left;	
	margin: 0 5% 5% 0;
}

.accented {
	display: block;
	border-bottom: 1px dotted #666;
}

/**************************************************/
/* B. Container ***********************************/

#root {
	width: 100%;
	max-width: 1200px;
	text-align: center;
	margin: auto;
	padding: 1.5em 1.5em 0;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
}
#page {
	width: 100%;
	display: inline-block;
	text-align: left;
}


/* --------------- */
/* B.1 Kopfbereich */

header {
	background: #FFF;
	border: 1.5em solid #FFF;
	margin-bottom: 1.5em;
	box-shadow: 0 0 1px 0 rgba(0,0,0,0.05);
}
header ul {
	list-style: none;
}
header li {
	float: left;
}
header div {
	float: left;
	width: 70%;
	padding-top: 1em;
}
header h3 {
	font-size: 1em;
	border-bottom: 1px dotted #666;
}

/* B.1.1 Titel */

#title {
	float: left;
	text-align: center;
	width: 23.5%;
	margin-right: 2%;
	padding: 0;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
}
#title img {
	margin: auto;
}

/* B.1.2 Servicenavigation */

#service {
	float: left;
	background: #CCC;
	width: 49%;
	line-height: 2;
	margin-left: 2%;
}
#service ul {
	float: right;
}
#service li {
	margin: 0 1em;
}
#service li a {
	color: #000;
}
#service li a:hover {
	color: #333;
}
#service li a.current {
	color: #999;
}

/* B.1.3 Social Media Profile */

#social {
	float: left;
	width: 23.5%;
	margin-left: 2%;
}
#social ul {
	float: right;
	height: 2em;
}
#social li {
	margin: 0 0 0 0.5em;
	padding: 0;
}

/* B.1.4 Suche  */

#search {
	background: #FEB;
}
#search input {
	width: 75%;
	display: inline-block;
	height: 2em;
	line-height: 1.5em;
	border: 1px solid #ccc;
	border-right: none;
	padding: 0 2%;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#search input:focus {
	border-color: #999;
}
#search button {
	display: inline-block;
	width: 20%;
	margin: 0;
	height: 2em;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	background-color: #999;
	background-image: url("../images/icon/icon_search.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 18px;
	text-indent: -555em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#search button:hover,
#search input:focus + button {
	background-color: #777;
	cursor: pointer;
}

/* B.1.5 Status */

#status {
	float: left;
	width: 49%;
	margin: 1em 0 0 2%;
	line-height: 2;
	background: #CCC;
	text-align: right;
}
#status a {
	padding: 0 1em;
}



/* ---------------- */
/* B.2 Hauptbereich */

#main {
	clear: left;
	background: #FFF;
	margin-bottom: 1.5em;
	overflow: hidden;
	border: 1.5em solid #FFF;
	hyphens: auto;
	-o-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	box-shadow: 0 0 1px 0 rgba(0,0,0,0.05);
}

/* Absatzformate */

#main p.previous {
	color: #999;
}
#main p.next {
	color: #999;
}

/* Vorschaubilder */

#main figure ul {
	margin: 1em 0;
	list-style: none;
	overflow: hidden;
}
#main figure li {
	float: left;
	margin: 0 0 0 2%;
	padding: 0;
	width: 15%;
}
#main figure li:first-child {
	margin-left: 0;
}


/* Listen */

#main li {
	margin-bottom: 0.5em;
	margin-top: 0;
}
#main ul.row {
	list-style: none;
	margin: 0;
}
#main ul.row li {
	display: inline-block;
	margin-right: 0.5em;
	line-height: 1;
}

/* Tabellen */

#main table {
	width: 100%;
	margin: 0 0 3em;
}
#main tbody tr {
	transition: background 0.5s;
	border-bottom: 1px solid #DDD;
}
#main tbody tr:hover {
}
#main thead {
	background: #8899cc;
	color: #FFF;
}
}
#main tbody th.caption {
	vertical-align: top;
}
#main tfoot {
	background: #DDD;
}

/* Feldbezeichner */

#main label.between {
	padding-left: 2%;
}
#main label.after,
#main label.check {
	display: block;
	float: left;
	margin-top: 0.25em;
	margin-bottom: 0.25em;
	width: 90%;
}
#main label.after {
	width: 65%;
}
#main label.none {
	float: left;
	line-height: 2;
	white-space: nowrap;
	width: 0;
	margin-right: -11em;
	padding-right: 0;
}
#main label.required {
	cursor: help;
}
#main label.required:after {
	content: "\00a0\002a";
	color: #D00;
}



/* Eingabefelder */

#main input.payment {
	float: left;
	margin-left: 11em;
	margin-right: 0.5em;
}




/* B.2.1 Ganzseite */

#master {
	clear: left;
	margin-bottom: 1.5em;
	position: relative;
}

#master:before {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	background: #FEB;
	width: 23.5%;
	z-index: 0;
}

/* News */
#news {
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	background: #FEB;
	padding: 1em;
	margin-bottom: 1em;
}

#news h6 {
	border-bottom: 1px dotted #666;
}

/* Visual */

#visual {
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	margin-bottom: 2rem;
}

/* B.2.2 Slideshow */

#slideshow {
	position: relative;
}
#slideshow ol {
	clear: left;
	height: 1em;
	margin: 0;
	padding: 1em 0;
	text-align: center;
}
#slideshow ol li {
	display: inline-block;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background: #666;
	cursor: pointer;
	margin-right: 0.5em;
}
#slideshow ol li:hover {
	background: #333;
}
#slideshow ol li.current {
	background: #000;
}
#slideshow a.control {
	position: absolute;
	display: block;
	background: #000;
	font-size: 2em;
	line-height: 0.75;
	font-weight: 900;
	width: 1em;
	height: 1em;
	border-radius: 0.25em;
	top: 50%;
	color: #999;	
	text-align: center;
	margin-top: -1.25em;
	cursor: pointer;
}
#slideshow a.control:hover {
	background: #222;
	color: #FFF;
}
#slideshow a.previous {
	left: 0.5em;
}
#slideshow a.next {
	right: 0.5em;
}

/* Bühne für Slides */

#stage {
    height: 235px;
	width: 100%;
    overflow: hidden;
    position: relative;
}
#stage ul {
	height: 235px;
	width: 1000%;
	list-style: none;
	position: absolute;
}
#stage ul li {
	display: block;
	float: left;
	width: 10%;
	height: 235px;
	margin: 0;
	background: #EEE;
	position: relative;
}
#stage ul li img {
	width: 100%;
	margin: 0;
}
#stage ul li div {
	position: absolute;
	background: #CCC;
	padding: 1em;
	width: 22em;
	top: 2em;
	right: 5em;
}


/* B.2.3 Menü */

#menu {
	box-sizing: border-box;
	-o-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	width: 23.5%;
	float: left;
	margin: 0 2% 0 0;
}
#menu label {
	background: #039;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	cursor: pointer;
	display: none;
	border-bottom: 1px dotted #666;
}
#menu input {
	display: none;
}
#menu h4 {
	background: #666;
	margin: 0;
	line-height: 2;
	padding: 0 0.75em;
}
#menu ul {
	background: #FC0;
	padding: 1em;
	margin: 0 0 1em;
	list-style: none;
}
#menu li {
	margin: 0;
	padding: 0;
}
#menu li a {
	display: block;
	padding: 0.25em 0 ;
	color: #039;
	border-bottom: 1px dotted #666;
}
#menu li a:hover {
	color: #000;
	border-bottom-style:  solid;
}
#menu li a.current {
	color: #000;
}
#menu li a.current:hover {
}
#menu li a.disabled {
	color: #666;
	cursor: default;
}
#menu li a.disabled:hover {
	background: #999;
}
#menu ul ul {
	padding-bottom: 0.5em;
	margin-bottom: 0;
}
#menu li li {
	font-size: 0.9em;
}
#menu li li a {
	color: #444;
	font-weight: normal;
	border-bottom: none;
	padding: 0.25em 0 0 1em;
	line-height: 1.4;
}
#menu li li a:hover {
	border-bottom: none;
	font-weight: bold;
}
#menu li li a.current {
	font-weight: bold;
	color: #000;
	text-decoration: none;
}
#menu li li ul {
	padding:  0;
}
#menu li li li {
	font-size: 1em;
}
#menu li li li a {
	
	color: #333;
}
#menu li li li a:before {
	content: '→ ';
}

/* B.2.4 Wrapper */

#wrapper {
	float: left;
	width: 74.5%;
}
#wrapper.full {
	width: 100%;
}
#wrapper ul {
	margin: 1em 0 1em 1.3em;
}
#wrapper ul li {
	background: url(../images/elem/elem_bullet.gif) no-repeat left 7px;
	list-style: none;
	margin-left: 0;
	padding-left: 1em;
}


/* B.2.5 Breadcrumb */

#breadcrumb {
	font-size: 0.9em;
	margin-bottom: 1em;
	background: #CCC;
	padding: 0.5em 1em;
}
#breadcrumb li:after {
	content: "\00a0\003e";
	padding-left: 0.5em;
}
#breadcrumb li:last-child:after {
	content: "";
}


/* B.2.6 Inhalte */

#content {
	background: #FFF;
	clear: both;
	overflow: hidden;
	margin-bottom: 1em;
}
#journal {
	box-sizing: border-box;
	-o-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	float: left;
	width: 70.7718%;
	background: #FFF;
	padding: 0 0 1em;
}
#journal h2 a {
	/*display: block;
	border-bottom: 1px dotted #666;*/
}


/* B.2.8 Zusatzspalte */

#aside {
	box-sizing: border-box;
	-o-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	float: left;
	width: 26.5615%;
	padding: 0 0 0 1em;
	margin: 0 0 1em 2.6667%;
}
#aside div {
	padding: 1em;
	margin-bottom: 1em;
}
#aside h5 {
	border-bottom: 1px solid #666;
}
#aside p {
	margin-bottom: 0.5em;
}

/* Aside Inhaltselmente  */
#aside div.default {
	background: #89C;
	color: #EEE;
}
#aside div.default a {
	color: #FFF;
	//text-decoration: underline;
}
#aside div.default a:hover {
	color: #DDD;
}

#aside div.default h5 {
	border-bottom: 1px dotted #666;
	color: #FFF;
}
div#facebook {
	background: #FEB;
}
div#openinghours {
	background: #FC0;
}
div#openinghours h5 {
	color: #039;
	border-bottom: 1px dotted #666;
}
div#europedirect small {
	color: #DDD;
	font-size: 0.75em;
	display: block;
}


/* B.2.9 Seitenleiste */

#sidebar {
	box-sizing: border-box;
	-o-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	width: 23.5%;
	margin-left: 2%;
	float: right;
	background: #CCC;
	padding: 1em;
}



/* B.2.10 Teaserboxen */

#teaser {
	clear: left;
	overflow: hidden;
	margin-bottom: 1em;
}
#teaser ul {
	list-style: none;
}
#teaser li {
	box-sizing: border-box;
	-o-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	background: #CCC;
	float: left;
	margin-left: 2%;
	padding: 1em;
	width: 23.5%;
}
#teaser li:first-child {
	margin-left: 0;
}
#teaser img {
	margin: 0 0 1em;
}

/* B.2.11 Meldungen */

#error,
#warning,
#confirm,
#mandate {
	border: 1px solid;
	margin-bottom: 2em;
	padding: 1em;
	overflow: auto;
}
#error p,
#warning p,
#confirm p {
}
#error img,
#warning img,
#confirm img {
	float: left;
	width: 11em;
	margin: 0 2em 0 0;
}
#error button,
#warning button,
#confirm button {
	float: right;
	margin-left: 0.5em;
}
#error {
	border-color: #D00;
	color: #D00;
}
#warning {
	background: #FFD;
	border-color: #D90;
	color: #D90;
}
#confirm {
	border-color: #4A0;
	color: #4A0;
}
#mandate {
	background: #FFF;
	border-color: #999;
	color: #444;
}


/* B.2.12 Tabs */



#tabs ul {
	margin: 0 0 1em;
	border-bottom: 1px solid #CCC;
}
#tabs ul li {
	display: block;
	float: left;
	margin: 0 3px -1px 0;
	background: transparent;
	list-style: none;
	padding-left: 0;
}
#tabs ul a {
	display: block;
	color: #EEE;
	padding: 0.5em 1.5em;
	background: #89C;
	border: 1px solid #89C;
	border-bottom: 1px solid #89C;
}
#tabs ul a:hover {
	color: #FFF;
	background: #78B;
}
#tabs ul a.current {
	background: #FFF;
	color: #000;
	border-bottom: 1px solid #FFF;
}
#cards {
	padding: 1em;
	background: #FFF;
}


/* B.2.13 Dialoge */ 

div.dialog {
	display: none;
    z-index: 10000;
    background-color: #FFF;
    min-width: 36em;
    min-height: 10em;
    padding: 1em;
    border-radius: 0.25em;
}
a.close {
	position: absolute;
	top: -1em;
	right: -1em;
	width: 1.8em;
	height: 1.8em;
	font-weight: bold;
	color: #FFF;
	cursor: pointer;
	background: #666 url(../images/elem/elem_close.png) center center no-repeat;
	background-position: center center;
	border: 2px solid #CCC;
	border-radius: 50%;
	box-shadow: 1px 1px 4px #000;
}
a.close:hover {
	background-color: #900;
}


/* Social Plugins */

#share {
	background: #DDD;
	clear: left;
	padding: 1em;
	height: 2em;
	margin: 2em 0;
}
#share li {
	padding-top: 0.25em;
	}
#share li.like { 
	width: 12em;
	padding-top: 0;
}
#share li.tweet { 
	width: 8em;
}
#share li.plusone { 
	width: 6em;
}
#share li.xing {
	width: 8em;
}
#share li.pinit {
	width: 6em;
}

/* Kommentare */

#comments ol {
	margin-top: 2em;
	color: #666;
}	
#comments li {
	margin: 0 0 3em;
	list-style: decimal outside;
	font-weight: bold;
}
#comments blockquote {
	color: #000;
	background: #DDD;
	margin: 1.5em 2em 0 0;
	padding: 1em;
	font-weight: normal;
	position: relative;
	border-radius: 0.25em;
}
#comments blockquote:before {
      content: "";
	  position: absolute;
	  border: 1em solid;
      border-color: transparent transparent #DDD transparent;
	  top: -1.75em;
	  left: 1em;
}


/* Listendarstellung */

#list small,
#list strong {
	display: block;
}
#list img {
	display: block;
	margin: auto;
}
#list img.landscape {
	max-width: 80%;
	padding: 20% 10%;
}
#list img.portrait {
	max-width: 60%;
	padding: 10% 20%;
}
#list img.square {
	max-width: 80%;
	padding: 10%;
}
#list button {
	margin-top: 1em;
}

/* gerastert */

#list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#list li {
	background: #DDD;
	text-align: center;
	float: left;
	width: 18%;
	padding: 0 0 1em;
	margin: 0 2.5% 2em 0;
	transition: background 0.5s;
}
#list li:nth-child(5n) {
	margin-right: 0;
}
#list li:hover {
	background: #FFF;
}
#list li h3 {
	font-size: 1em;
	margin: 0.25em 1em;
}
#list li h3 a {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* tabellarisch */

#list td {
	border-bottom: 0.2em solid #DDD;
	padding: 1em;	
}
#list td.price {
	text-align: right;
	vertical-align: bottom;
}
#list td:first-child {
	padding-left: 0;
}

/* Paginierung */

#paging {
	margin-bottom: 2em;
	height: 2.5em;
	clear: both;
}
#paging ol, 
#paging ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#paging ol {
	float: left;
}
#paging ul {
	float: right;
}
#paging li {
	float: left;
	margin: 0 1px 0 0;
	white-space: nowrap;
	line-height: 2.5;
}
#paging li:first-child {
	margin: 0 1em 0 0;
}
#paging ul li:last-child {
	margin: 0 0 0 1em;
}
#paging li span {
	margin: 0 0.5em;
}
#paging li i {
	font-size: 1.5em;
	line-height: 1;
	font-style: normal;
}
#paging a {
	display: block;
	text-align: center;
	background: #DDD;
	width: 2.5em;
	color: #333;
	font-weight: 600;
}
#paging a:hover {
	background: #CCC;
	color: #000;
}
#paging a.current {
	color: #FFF;
	background: #89C;
}
#paging a.disabled {
	cursor: default;
	background: #EEE;
	color: #999;
}


/* Warenkorb */

#cart .unit,
#cart .total,
#cart .sum {
	text-align: right;
}
#cart tbody td {
	padding: 1em 0.25em;
}
#cart tbody td.variant,
#cart tbody td.amount,
#cart tbody td.available,
#cart tbody td.unit,
#cart tbody td.total {
	vertical-align: bottom;
}
#cart tfoot th {
	font-weight: normal;
}
#cart tfoot tr:first-child td,
#cart tfoot tr:first-child th {
	padding-top: 1em;
}
#cart tfoot .vat {
	font-size: 0.9em;
	color: #666;
}
#cart tfoot .payable {
	font-size: 1.2em;
	font-weight: 600;
	padding-top: 0.5em;
}



/* Kalender */

#calendar th,
#calendar td {
	text-align: center;
}
#calendar a {
	display: block;
	font-weight: bold;
}

/* Kopf */

#calendar thead {
	border: 1px solid #666;
}
#calendar thead th {
	border-style: none;
}
#calendar thead td {
	font-size: 0.75em;
	color: #333;
	border: 1px solid #666;
}
#calendar thead td:last-child {
	background: #DDD;
	font-weight: bold;
}
#calendar thead a {
	width: 100%;
	float: none;
}

/* Körper */

#calendar tbody td {	
	border: 1px solid #666;
	line-height: 3;
	padding: 0;
}
#calendar tbody td a {
	background: #DEE;
}
#calendar tbody td a:hover {
	color: #FFF;
	background: #06A;
}
#calendar tbody td.today {
	background: #FFD;
	color: #D90;
	padding: 0px;
	font-weight: bold;
}
#calendar tbody td.today a {
	color: #D90;
	background: #FFD;
	border: 2px solid #D90;
	margin: -2px;
}
#calendar tbody td:last-child {
	background-color: #BBB;
}
#calendar tbody td.other {
	color: #999;
}

/* Jahreskalender */

#calendar table.year tbody td {
	line-height: 6;
}


/* Termine */

.dates th {
	background: #EEE;
	color: #999;
}
.dates td {
	padding: 1em 0.25em;
}




/* Akkordeon */

#accordion section p {
	display: none;
}
#accordion section:target {
	margin-bottom: 1em;
}
#accordion section:target p {
	display: block;
}

/* Suchergebnisse */

#results {
	margin-top: 2em;
}
#results h5 {
	margin-bottom: 0;
}
#results div {
	margin-bottom: 2em;
}
.highlight {
	background: #FF9;
	padding: 0 2px;
}





/* -------------- */
/* B.3 Fußbereich */

footer {
	clear: both;
	border: 1.5em solid #FFF;
	background: #FFF;
	overflow: hidden;
	box-shadow: 0 0 1px 0 rgba(0,0,0,0.05);
}
footer ul {	
	width: 100%;
}
footer li {
	list-style: none;
}
footer a {
	color: #666;
}
footer a:hover {
	color: #000;
}	

/* B.3.1 Sitemap */

#sitemap li {
	box-sizing: border-box;
	-o-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	background: #CCC;
	float: left;	
	line-height: 2;	
	margin-left: 2%;
	margin-bottom: 1em;
	padding: 1em;
	width: 32%;
}
#sitemap li:first-child {
	margin-left: 0;
}
#sitemap ul ul {
	float: none;
	margin-top: 0.5em;
}
#sitemap li li {
	float: none;	
	margin: 0;
	padding: 0;
	width: auto;
}

/* B.3.2. Fußzeile */

#footnote {	
	clear: left;
	float: right;
	text-align: center;
	background: #FFF;
}
#footnote ul {
}
#footnote li {
	float: none;
	display: inline;
	line-height: 2.5;
	margin-right: 1em;
}
#links {
	float: left;
}
#links li {
	float: left;
	margin-right: 1em;
}


/**************************************************/
/* C. Responsive **********************************/

@media only screen and (max-width: 1024px) {
	
	body {
		font-size: 14px;
	}


}
@media only screen and (max-width: 800px) {
	
	#teaser li {
		width: 48%;
		margin: 0 0 2em 4%;
	}
	#teaser li:nth-child(odd) {
		margin-left: 0;
	}
	#master:before {
		display: none;
	}
	#news {
		float: none;
		width: 100%;
	}
	#visual {
		width: 100%;
		float: none;
	}
	#journal {
		float: none;
		width: 100%;
	} 
	#aside {
		float: none;
		width: 100%;
		margin: 0; 
	}
	#aside .posterior {
		width: auto;
		margin: 0 1em;
	}
}
@media only screen and (max-width: 640px) {
}

@media only screen and (max-width: 480px) {
	
	body {
		font-size: 14px;
	}
	samp {
		padding-left: 0;
	}
	#root {
		padding: 0;
	}
	#page {
		width: 320px;
		margin-top: 0;
	}
	header {
		height: auto;
	}
	#title {
		width: 300px;
	}
	#service, #search, #status {
		display: none;
	}
	#menu {
		font-size: 15px;
		line-height: 1.5;
		padding: 0;
		height: auto;
		float: none;
		width: 100%;
		margin-bottom: 1em;
	}
	#menu ul {
		display: none;	
	}
	#menu li {
		width: 100%;
		text-align: center;
	}
	#menu li ul {
		margin: 0;
		background: #EB0;
	}
	#menu li li {
		width: 100%;
	}
	#menu li li a {
		padding: 0.5em 0;
	}
	#menu li li li a {
		padding: 0.5em  0 0 2em;
	}

	#menu label {
		display: block;
		text-align: center;
	}
	#menu label:hover {
		background: #89C;
	}
	#menu input {
		display: none;
	}
	#menu input:checked + ul,
	#menu input:checked + ul  ul {
		display: block;
	}

	#tabs ul {
		border-bottom: none;
	}
	#tabs ul li {
		float: none;
	}
	
	
	
	/* Formulare */
	
	#main label.before {
		float: none;
	}
	#main label.after,
	#main label.check {
		width: 16.75em;
	}
	#main label.none {
		margin-bottom: 0.5em;
	}
	#main input.vertical,
	#main input.payment {
		clear: left;
		margin-left: 0;
	}
	#main input.short,
	#main input.standard,
	#main input[type=url],
	#main input[type=email],
	#main input[type=password],
	#main textarea {
		width: 100%;
	}
	#main input.payment + label {
		width: 17.75em;
		margin-left: -0.5em;
	}
	
	
	
	/* Tabellen */
	
	thead {
		display: none;
	}
	table,
	tr {
		display: block;
		width: 20em;
		margin-bottom: 1em;
	}
	td {
		display: block;
	}
	th,
	td.blind,
	td.action {
		display: none;
	}
	th.caption {
		display: block;
	}
	td.image {
		float: right;
		width: 6em;
	}
	td.product {
		float: left;
		width: 13em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	td.variant {
		clear: both;
		float: right;
	}
	td.variant select {
		width: 9.5em;
		margin-right: 6.5em;
	}
	td.amount {
		float: left;
	}
	td.amount input {
		width: 2em;
	}
	td.available {
		clear: both;
	}
	td.sum,
	td.unit {
		clear: both;
	}
	td.sum:before,
	td.unit:before,
	td.total:before {
		content: attr(title);
		float: left;
	}
	td.entry {
		text-align: right;
	}
	td.entry:before {
		content: attr(title);
		float: left;
		line-height: 2;
	}
	td.entry input {
		width: 10em;
	}
	td.entry select,
	td.entry button {
		width: 10.6em;
	}
	td.address:before {
		content: attr(title);
		display: block;
		float: none;
		font-weight: bold;
		padding: 0.5em 0;
	}
	td img {
		max-width: 100%;
	}
	#master, #wrapper  {
		width: 300px;
	}
	#journal {
		width: 280px;
	}
	#aside, #sidebar {
		display: none;
	}
	#teaser li {
		width: 100%;
		margin-left: 0;
	}
	#list li {
		width: 140px;
	}
	
	#sitemap {
		display: none;
	}
	#footnote {
		height: auto;
	}
	#footnote {
		overflow: hidden;
		float: none;
		margin-bottom: 1em;
		border-top: 1px solid #DDD;
	}
	#footnote li {
		font-size: 12px;
		display: block;
		width: 100%;
		border-bottom: solid 1px #DDD;
	}
}