/*
	navigation.css
*/

.homeShort {
	display: inline-block;
}
.homeLong {
	display: none;
}

@media only screen and (min-width: 760px) {
	.homeShort {
		display: none;
	}
	.homeLong {
		display: inline-block;
	}
}

a:link, a:visited, a:hover, a:focus, a:active {
	text-decoration: none;
	color: rgb(32, 13, 0);
	hyphens: none;
	-webkit-hyphens: none;
}
a.marker:link {
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

#logoTopLeft:hover, #logoTopLeft:focus, #self_url a:hover, #self_url a:focus {
	box-shadow: 1.2vmin 1.2vmin rgb(255, 221, 0);
}

#self_url {
	display: inline-block;
	font-weight: 400;
	letter-spacing: 0.2rem;
	margin-top: 2.4em;
	margin-right: 1vmin;
}

@media only screen and (min-width: 760px) {
	#self_url {
		margin-top: 1.7em;
	}
	#logoTopLeft:hover, #logoTopLeft:focus, #self_url a:hover, #self_url a:focus {
		box-shadow: 0.3vmin 0.3vmin rgb(255, 221, 0);
	}
}

@media only screen and (min-width: 980px) {
	#self_url {
		margin-top: 0.9em;
	}
	#logoTopLeft:hover, #logoTopLeft:focus, #self_url a:hover, #self_url a:focus {
		box-shadow: 0.35vmin 0.35vmin rgb(255, 221, 0);
	}
}


#self_url a:link {
	color: rgb(246, 246, 246);
	text-decoration: none;
}
#self_url a:visited {
	color: rgb(246, 246, 246);
	text-decoration: none;
}
#self_url a:hover {
	color: rgb(246, 246, 246);
	text-decoration: none;
	background-color: rgb(32, 13, 0);
	
}
#self_url a:focus {
	color: rgb(246, 246, 246);
	text-decoration: none;
	background-color: rgb(32, 13, 0);
}
#self_url a:active {
	color: rgb(255, 221, 0);
	text-decoration: none;
}

#mainNav {
	display: block;
	padding: 0.3% 2vmin 0.5% 0;
	background-color: rgb(227, 6, 19);
	text-align: center;
/*	z-index: 100; */
}
#mainNav a {
	display: inline-block;
	min-width: 31%;
	margin: 0.3rem 0 0.3rem 0.25rem;
	padding: 0.2rem 1vmin;
	border: 1.5px solid;
	border-radius: 0.5vmin 0.5vmin 0.5vmin 1.8vmin;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.15rem;
	text-align: center;
	transition: all 0.4s ease-out;
}
#mainNav a span {
	display: inline-block;
	min-width: 68%;
	margin-left: 28%;
	font-size: 75%;
	font-weight: 400;
	font-style: italic;
}


@media only screen and (min-width: 760px) {
	#mainNav {
		padding-right: 1.7%;
		text-align: right;
/*		z-index: 100; */
	}
	#mainNav a {
	  min-width: 15%;
	  width: auto;
	  padding: 0.2rem 0.5em;
	}
	#mainNav a span {
	/*	display: none;*/
		min-width: auto;
		margin-left: 1.8em;
	}
}

@media only screen and (min-width: 980px) {
	#mainNav {
		padding-right: 0.7vmin;
		padding-left: 0.7vmin;
		text-align: right;
/*		z-index: 200; */
	}
	#mainNav a {
	  min-width: 18.5%;
	}
}

@media only screen and (min-width: 1081px) {
	#mainNav {
	  z-index: 100;
	}
}


#mainNav a:link {
	color: rgb(246, 246, 246);
	text-decoration: none;
}
#mainNav a:visited {
	color: rgb(246, 246, 246);
}
#mainNav a:hover {
	background-color: rgb(32, 13, 0);
	color: rgb(255, 221, 0);
}
#mainNav a:focus {
	background-color: rgb(255, 221, 0);
	color: rgb(32, 13, 0);
/*	box-shadow: 0.2vmin 0.2vmin 3vmin rgb(255, 221, 0);*/
}
#mainNav a:active {
	color: rgb(227, 6, 19);
	background-color: rgb(32, 13, 0);
}


footer {
	display: block;
/*	padding: 1.5%;*/
	padding: 0.4em;
	background-color: rgb(0, 79, 159);
	text-align: center;
	z-index: 100;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	letter-spacing: 0.5vmin;
	border-top: solid 1.5vmin rgb(246, 246, 246);
}

@media only screen and (min-width: 760px) {
	footer {
		border-top: solid 0.75vmin rgb(246, 246, 246);
	}
}
@media only screen and (min-width: 980px) {
	footer {
		border-top: solid 0.4vmin rgb(246, 246, 246);
	}
}

footer a {
	display: inline-block;
/*	min-width: 31%;*/
	margin: 0 0.35rem;
	padding: 0.35rem 0.8rem;
	border: 1.5px solid;
	border-radius: 2.0vmin;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.15rem;
	transition: all 0.4s ease-out;
}

@media only screen and (min-width: 760px) {
	footer a {
		font-size: 1rem;
	}
}

footer a:link {
	color: rgb(246, 246, 246);
	text-decoration: none;
}
footer a:visited {
	color: rgb(246, 246, 246);
	text-decoration: none;
}
footer a:hover {
	color: rgb(32, 13, 0);
	background-color: rgb(183, 190, 207);
	box-shadow: 0.2vmin 0.2vmin 3vmin rgb(235, 233, 233);
}
footer a:focus {
	color: rgb(32, 13, 0);
	background-color: rgb(183, 190, 207);
	box-shadow: 0.2vmin 0.2vmin 3vmin rgb(235, 233, 233);
}
footer a:active {
	color: rgb(255, 221, 0);
	text-decoration: none;
}

a.textlink::before {
	content: "[ ";
}
a.textlink::after {
	content: " ]";
}
a.textlink:link {
	color: rgb(0, 79, 159);
	text-decoration: none;
	font-size: 75%;
	font-style: italic;
	font-weight: 700;
	-webkit-hyphens: auto;
	hyphens: auto;
}
a.textlink:visited {
	color: rgb(0, 79, 159);
	text-decoration: none;
}
a.textlink:hover {
	color: rgb(227, 6, 19);
	text-decoration: underline;
}
a.textlink:focus {
	color: rgb(0, 79, 159);
	text-decoration: underline;
}
a.textlink:active {
	color: rgb(255, 221, 0);
	text-decoration: none;
}

a.runningTextLink:link, a.runningTextLink:visited {
	color: rgb(0, 79, 159);
	font-weight: 700;
	-webkit-hyphens: auto;
	hyphens: auto;
}
a.runningTextLink:hover, a.runningTextLink:focus {
	text-decoration: underline;
}
a.runningTextLink:active {
	color: rgb(227, 6, 19);
}

.navTopRight a {
	display: inline-block;
	font-size: 1.3rem;
	font-style: italic;
	font-weight: 700;
	margin-left: 0.5rem;
	padding: 0.3rem 0.8rem 0.3rem 1.0rem;
	box-shadow: 0.8vmin 0.4vmin 0 rgb(246, 246, 246);
}
.navTopRight a:link {
	color: rgb(246, 246, 246);
	text-decoration: none;
}
.navTopRight a:visited {
	color: rgb(246, 246, 246);
}
.navTopRight a:hover, .navTopRight a:focus {
	color: rgb(255, 221, 0);
	box-shadow: 1.2vmin 1.2vmin rgb(255, 221, 0);
}
.navTopRight a:active {
	color: rgb(227, 6, 19);
	box-shadow: 1.2vmin 1.2vmin rgb(227, 6, 19);
}

@media only screen and (min-width: 760px) {
	.navTopRight a {
		font-size: 1.0em;
		margin-left: 0.5em;
		padding: 0.3em 0.8em 0.3em 1.0em;
		box-shadow: 0.3em 0.15em 0 rgb(246, 246, 246);
	}
	.navTopRight a:hover, .navTopRight a:focus {
		color: rgb(255, 221, 0);
		box-shadow: 0.4em 0.25em rgb(255, 221, 0);
	}
	.navTopRight a:active {
		color: rgb(227, 6, 19);
		box-shadow: 0.4em 0.25em rgb(227, 6, 19);
	}
}

a.sourceLink {
	font-weight: 700;
	text-decoration: none;
	color: rgb(183, 190, 207);
}
a.sorceLink:link, a.sourceLink:visited {
	color: rgb(183, 190, 207);
}
a.sourceLink:hover, a.sourceLink:focus {
	text-decoration: underline;
	color: rgb(255, 221, 0);
}
a.sourceLink:active {
	text-decoration: underline;
	color: rgb(227, 6, 19);
}

.back4Mobile {
	display: block;
	position: fixed;
	right: 2vmin;
	bottom: 3vmin;
	width: 12vmin;
	height: 12vmin;
	padding: 1.3vmin 1.6vmin 0 1.6vmin;
	border: 1.5px solid;
	border-radius: 50%;
	font-size: 8vmin;
	font-weight: 700;
	color: rgb(32, 13, 0);
	background-color: rgb(255, 221, 0);
	box-shadow: 1vmin 1vmin 2.5vmin rgb(183, 190, 207);
	cursor: pointer;
	transition: background-color 0.3s ease-in;
	z-index: 135;
}
.back4Mobile:hover {
	color: rgb(255, 221, 0);
	background-color: rgb(183, 190, 207);
}



@media only screen and (min-width: 760px) {
  .back4Mobile {
    width: 9vmin;
    height: 9vmin;
	font-size: 6vmin;
	padding: 0.5vmin 1.6vmin;
	bottom: 1.5vmin;
  }
}

@media only screen and (min-width: 980px) {
  .back4Mobile {
    width: 6vmin;
    height: 6vmin;
	font-size: 4vmin;
	padding: 0vmin 1.6vmin 0vmin 1.6vmin;
  }
}

/* 
@media only screen and (min-width: 1081px) {
	.back4Mobile {
		right: 8vmin;
	}
}
 */

/* 
@media only screen and (min-width: 1440px) {
	.back4Mobile {
		right: 2vmin;
	}
}
 */

@media only screen and (min-width: 1670px) {
	.back4Mobile {
		right: 3vmin;
	}
}

.surroundPost:hover .dateOfPost {
	color: rgb(32, 13, 0);
}
.surroundPost:hover article.postWrapper {
	border-top: 0.2vmin solid rgb(32, 13, 0);
	border-bottom: 0.2vmin solid rgb(32, 13, 0);
	border-left: 0.1vmin solid rgb(32, 13, 0);
	border-right: 1.5vmin solid rgb(32, 13, 0);
}
.surroundPost:hover h3 {
	background-color: rgb(32, 13, 0);
	color: rgb(255, 221, 0);
}

/* Navigation sedcard.html: Buttons mehr/ausblenden, jetzt auch bible.html */
.meaning, a.vanish, {
	font-size: 75%;
	display: inline-block;
	padding: 0.2em 1.2em 0.3em 1.2em;
	margin-left: 0.45em;
	border-radius: 1vmin;
}
a.vanish {
/*	font-size: 75%; */
	padding: 0 0.5em;
	border: solid 1px rgb(32, 13, 0);
	transition: all 0.4s ease-out;
}

.reddish {background-color: rgb(227, 6, 19);}
.blueish {background-color: rgb(0, 79, 159);}

a.meaning:link, a.vanish:link {
	text-decoration: none;
	font-style: italic;
	font-weight: 700;
	/* font-size: 85%; */
	display: inline-block;
	padding: 0.2em 1.2em 0.3em 1.2em;
	margin-left: 0.45em;
	border-radius: 1vmin;
}

a.vanish:link, a.vanish:visited {
	color: rgb(32, 13, 0);
	background-color: rgb(255, 221, 0);
}
a.vanish:hover, a.vanish:focus {
	color: rgb(255, 221, 0);
	background-color: rgb(32, 13, 0);
	border: solid 1px rgb(255, 221, 0);
}
a.vanish:active {
	color: rgb(183, 190, 207);
	border: solid 1px rgb(183, 190, 207);
}

a.meaning:link, a.meaning:visited  {
	color: rgb(235, 233, 233);
}
a.meaning:hover {
	color: rgb(255, 221, 0);
/*	text-decoration: underline;*/
}
a.meaning:focus {
	color: rgb(246, 246, 246);
	text-decoration: underline;
}
a.meaning:active {
	color: rgb(255, 221, 0);
	text-decoration: underline;
}

.circleButton {
	color: rgb(32, 13, 0);
	background-color: rgb(255, 221, 0);
	border: solid 1.5px rgb(32,13,0);
	border-radius: 50%;	
	font-size: 1.4em;
	font-weight: 700;
	padding: 0.7em 0.55em;
	box-shadow: 0.25vmin 0.15vmin 1.1vmin rgb(183, 190, 207);
	transition: color 0.2s ease-in, background-color 0.2s ease-in;
}
.circleButton:hover, .circleButton:active {
	color: rgb(255, 221, 0);
	background-color: rgb(183, 190, 207);
}

/*
Die FARBEN
Blau:
0, 79, 159

Rot:
227, 6, 19

Gelb
255, 221, 0

Grau
183, 190, 207

Hellgrau
235, 233, 233

Weiß
246, 246, 246

Filmschwarz
32, 13, 0
*/