/* Style für Freundschaftsringe.com */

/* Custom fonts importieren */
@font-face {
	font-family:Vollkorn;
	src:url("/font/vollkorn-regular-webfont.woff");
}
@font-face {
	font-family:VollkornBold;
	src:url("/font/vollkorn-bold-webfont.woff");
}
@font-face {
	font-family:VollkornSemiBold;
	src:url("/font/vollkorn-semibold-webfont.woff");
}
@font-face {
	font-family:VollkornMediumItalic;
	src:url("/font/vollkorn-mediumitalic-webfont.woff");
}
@font-face {
	font-family:VollkornItalic;
	src:url("/font/vollkorn-italic-webfont.woff");
}


/* Document style */

* {
	margin:0;
}
html, body {
	height:100%;
	font-size:14pt;
}
body {
	background-color:#DEDC96;
	font-family:"Vollkorn";
	display:table;
	width:100%;
}
.contentWrapper {
	display:table-cell;
	width:55em;
	background-color:#FFFACD;
	min-height:100%;
}
.content {
	padding:0.8em;
}
body::before {
	content:"";
	display:table-cell;
	background-image:url("/img/misc/background_left.png");
	background-repeat:repeat-y;
	background-position:100% 0;
}
body::after {
	content:"";
	display:table-cell;
	background-image:url("/img/misc/background_right.png");
	background-repeat:repeat-y;
	background-position:0% 0;
}


/* Banner Style */

header {
	font-size:0;
	color:#29190B;
}
.headerH3 {
	font-family:"VollkornBold";
}
.headerH1 {
	font-family:"VollkornBold";
	font-size:30pt;
}
.header {
	padding:1em;
	padding-top:0.5em;
	font-size:12pt;
	background-image:url("/img/misc/header_icon.png");
	background-repeat:no-repeat;
	background-size:6em auto;
	padding-left:6em;
	text-shadow:1px 1px 2px #777;
}


/* Navigation Style */

nav {
	background-color:#E37E26;
	margin:0;
	padding:0;
	font-size:0;
}
nav>a {
	display:inline-block;
	margin:0em;
	padding:0.7em;
	color:#111;
	text-decoration:none;
	font-size:14.5pt;
	text-shadow:1px 1px 2px #222;
}
nav>a:hover {
	color:#FDD8B8;
	background-color:#864F1E;
}
nav.submenu {
	background-color:#F79641;
}
nav.submenu>a {
	display:inline-block;
	margin:0em;
	padding:0.7em;
	font-size:13pt;
	color:#111;
	text-decoration:none;
	text-shadow:none;
}
nav.submenu>a:hover {
	background-color:#FDD8B8;
}
nav>a.selected {
	background-color:#29190B;
	color:#FDD8B8;
	text-shadow:0px 0px 6px #F7C090;
}
nav.submenu>a.selected {
	background-color:#673E1A;
	color:#FDD8B8;
	text-shadow:0px 0px 6px #F7C090;
}
footer {
	margin-top:3em;
	margin-bottom:0;
	text-align:center;
}
footer>a {
	display:inline-block;
	margin:1em;
	padding:1em;
	vertical-align:middle;
	font-size:1.3em;
	white-space:nowrap;
}
.bottommenu {
	margin-top:1em;
	font-size:0.8em;
}
.bottommenu>a {
	display:inline-block;
	margin:0.3em;
	padding:0.3em;
	vertical-align:middle;
	white-space:nowrap;
}
.bottommenu>a.selected {
	background-color:#FDD8B8;
	font-weight:bold;
}


/* Text Styles */

h1 {
	font-family:"VollkornSemiBold";
	font-size:3.5em;
	text-shadow:1px 1px 2px #222;
	padding-bottom:0.1em;
	font-weight:normal;
}
h2 {
	font-family:"VollkornMediumItalic";
	font-size:1.5em;
	text-shadow:1px 1px 2px #222;
	padding-top:0.6em;
	font-weight:bold;
}
h3 {
	font-size:1em;
	padding-top:0.6em;
	font-weight:bold;
	text-decoration:underline;
}
h3.nofat {
	font-weight:normal;
	text-decoration:none;
}
h3.nofat>span {
	font-weight:bold;
	text-decoration:underline;
}
p {
	padding-top:0.2em;
	padding-bottom:0.2em;
}
.introduction {
	font-style:italic;
	padding:1em;
}
.warning {
	color:#F11;
}
.lastUpdate {
	font-style:italic;
	text-align:center;
}
.centered {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.centerBox {
	text-align:center;
}
.linklist {
	font-size:1.2em;
	font-family:"VollkornSemiBold";
	text-shadow:0px 0px 1px #669;
}
.caption {
	text-align:center;
	text-shadow:1px 1px 2px #777;
	font-family:"VollkornItalic";
	margin:1em;
}
.subtitle {
	text-shadow:1px 1px 2px #777;
	font-family:"VollkornItalic";
}


/* Figure stuff */

/* a small image gallery (images are inline (or inline-block)) */
.shortGallery {
	margin:1.5em 0em;
	text-align:center;
	display:block;
}
/* a component inside it, targeting a vertical image order (images are block) */
.shortGalleryVertical {
	margin:1em;
	vertical-align:middle;
	display:inline-block;
}
.imgShortGallery {
	vertical-align:middle;
	margin:1em;
}
.imgShortGalleryVertical {
	margin:0.5em 0em;
}
figure.shortGallery {
	margin-bottom:3em;
}
.gallery {
	text-align:center;
	margin:1em;
}
.imgGallery {
	display:inline-block;
	vertical-align:middle;
	margin:1em;
}
.img9em>a>img {
	height:9em;
}

/* Termin stuff */
.termineSort {
	text-align:center;
}
.termineSort>* {
	display:inline-block;
	margin:1em;
	padding:1em;
	font-size:1.2em;
	background:#D8C593;
	text-decoration:none;
	text-shadow:1px 1px 2px #FFF;
	border:2px outset #000;
	text-shadow:1px 1px 2px #FFF;
	border-style:solid;
	border-width:2px;
	border-radius:0.3em;
}
.termineSort>a {
	text-decoration:none;
	background:#D8C593;
	/* IE does not like inset/outset :( */
	border-left-color:#AAA;
	border-top-color:#AAA;
	border-right-color:#000;
	border-bottom-color:#000;
}
.termineSort>span {
	color:#888;
	background:#D3C6A9;
	/* IE does not like inset/outset :( */
	border-left-color:#000;
	border-top-color:#000;
	border-right-color:#AAA;
	border-bottom-color:#AAA;
}
.termin {
	display:block;
	cursor:pointer;
	margin:0em;
	padding:0.3em;
	background-color:#E5C780;
	margin-bottom:0.5em;
	border-radius:0.2em;
}
.termin:hover {
	background-color:#D0B070;
}
.terminHeading {
	text-shadow:1px 1px 2px #FFF;
	color:#2B281E;
}
.terminLink {
	white-space:nowrap;
	font-size:0.5em;
	font-weight:normal;
	vertical-align:middle;
}
.terminNew {
	color:#E00000;
	font-size:0.8em;
	vertical-align:middle;
}
label.terminCanceled {
	background-color:#DDD;
}
span.terminCanceled {
	text-decoration:line-through;
	color:#888;
}
.terminNotice {
	display:block;
	font-family:"VollkornSemiBold";
	font-size:1.3em;
	margin:1em;
}
.fakeBox {
	display:none;
}
.fakeBoxExtended {
	display:none;
}
.fakeBox:checked ~ span.fakeBoxExtended {
	display:block;
}
.terminExtended {
	margin:0.3em;
	padding:0.5em;
	background-color:#E8E8C0;
}
.terminSeparator {
	margin-left:1em;
	margin-right:1em;
	color:#666666;
}
@media screen and (max-width: 800px) {
    .terminHeadingPart2 {
        display: none !important;
    }
}


/* Images and image text */

img {
	border:0px solid #000;
	display:block;
}
.imgLink {
	display:inline-block;
}
.clickable {
	box-shadow:0px 0px 6px 2px rgba(0,0,0,0.75);
}
.clickable:hover {
	opacity:0.8;
	transform:scale(1.02);
}
.imgBox {
	font-size:0.7em;
	text-align:center;
	/*border:1px solid #C1B699;*/
	padding:0.5em;
	margin-top:0.5em;
	margin-bottom:0.5em;
}
.imgNoBox {
	font-size:0px;
}
.imgSpecial1 {
	margin:0.3em;
	height:7em;
}
.imgRight {
	float:right;
	margin-left:1em;
	margin-right:0;
}
.imgLeft {
	float:left;
	margin-right:1em;
	margin-left:0;
}
.imgCenter {
	text-align:center;
}
figcaption {
	display:block;
}
.imgSubtitle {
	text-shadow:1px 1px 2px #777;
	font-family:"VollkornMediumItalic";
	font-size:1em;
}


/* Link Styles */

a {
	color:#042360;
}
a:hover {
	color:#FF0000;
}
a.external::after {
	/* 🔗 ↗ */
	content:" ⧉";
	font-size:0.7em;
}
a.external {
	font-family:"VollkornSemiBold";
}