
/* HELP
Standard Blue:	#4682b4
Darker Blue:	#407199
Brighter Blue:	#C3DFF7
*/

/* Avatar
-------------------------------------------------- */

#avatar {
	position: absolute;
	top: 20px;
	left: 20px;
	/* Firefox */
	max-height: -moz-calc(100% - 70px);
	/* WebKit */
	max-height: -webkit-calc(100% - 70px);
	/* Opera */
	max-height: -o-calc(100% - 70px);
	/* Standard */
	max-height: calc(100% - 70px);
	z-index: 1;
}

.avatar-responsive {
	max-height: 100%;
	width: auto;
}

/* Navigation
-------------------------------------------------- */

#header,
#navigation,
#content {
	padding: 0px 0px 0px 290px;
}

span.icon-bar {
	background-color: white;
}

button.navbar-toggle {
	background-color: ;
}

div.navbar-brand {
	display: none;
	color: white;
	text-transform: uppercase;
}

.navbar .navbar-nav {
    display: inline-block;
    float: none;
	vertical-align: bottom;
}

.navbar .navbar-collapse {
    text-align: center;
}

.nav>li {
	border-left: 1px solid ;
}

.nav>li.first-nav-item {
	border-left: 0px;
}

.nav>li>a {
	text-transform: uppercase;
}

.nav>li.active:after {
	position: absolute;
	right: calc(50% - 7px);
	bottom: 0;
	border-bottom: 7px solid white;
	border-right: 7px solid transparent;
	border-left: 7px solid transparent;
	content: "";
}

.navbar-custom{
	background-color: ;
	border-color:;
	font-size: 13px;
}

.navbar-custom .navbar-brand{
	color: white;
}

.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus{
	color: white;
	background-color: ;
}

.navbar-custom .navbar-text{
	color: white;
}

.navbar-custom .navbar-nav>li>a{
	color: white;
}

.navbar-custom .navbar-nav>li>a:hover,
.navbar-custom .navbar-nav>li>a:focus{
	color: white;
	background-color: ;
}

.navbar-custom .navbar-nav>.active>a,
.navbar-custom .navbar-nav>.active>a:hover,
.navbar-custom .navbar-nav>.active>a:focus{
	color: white;
	background-color: ;
}

.navbar-custom .navbar-nav>.disabled>a,
.navbar-custom .navbar-nav>.disabled>a:hover,
.navbar-custom .navbar-nav>.disabled>a:focus{
	color: #ccc;
	background-color: transparent;
}

.navbar-custom .navbar-toggle{
	border-color: ;
}

.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus{
	background-color: ;
}

.navbar-custom .navbar-toggle .icon-bar{
	background-color: white;
}

.navbar-custom .navbar-collapse,
.navbar-custom .navbar-form{
	border-color: ;
}

.navbar-custom .navbar-nav>.open>a,
.navbar-custom .navbar-nav>.open>a:hover,
.navbar-custom .navbar-nav>.open>a:focus{
	background-color: ;
	color: white;
}

.navbar-custom .navbar-link{
	color: white;
}

.navbar-custom .navbar-link:hover{
	color: white;
}

/* Content
-------------------------------------------------- */

#content {
	margin: 20px;
}

/* Sticky footer styles
-------------------------------------------------- */

html,
body ,
#wrap{
	height: 100%;
	/* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
	min-height: 100%;
	height: auto !important;
	/* Negative indent footer by it's height */
	margin: 0 auto -50px;
}

#wrap:after {
	content: "";
	display: block;
	height: 50px;
}

#footer {
	width: 100%;
	height: 50px;
	line-height: 50px;
	vertical-align: middle;
	background-color: ;
	border-radius: 4px;
}

#footer>p {
	color: white;
	margin: 0px;
}

/* Fotoalbum
-------------------------------------------------- */

.form-signin {
  max-width: 300px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 13px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="text"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.form-control:focus {
  border-color:  !important;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(255,136,0,.6) !important;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(255,136,0,.6) !important;
}

.thumbnail {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  border: 1px solid #444;
}
.thumbnail img {
  opacity: .75;
}
.thumbnail img:hover {
  opacity: 1;
}

h4>form {
  display: inline;
}

h4>form>button {
	background-color: none !important;
	border-width: 0px !important;
	border-color: transparent !important;
}

/* Standards
-------------------------------------------------- */

::selection {
	background-color: ;
}

#ten-spacer {
	height: 10px;
}

#tw-spacer {
	height: 20px;
}

.white-font {
	color: white;
}

.centered-text {
	text-align: center !important;
}

.no-padding {
	padding-left: 0px !important;
	padding-right: 0px !important;
	padding-bottom: 0px !important;
	padding-top: 0px !important;
}

.no-float {
	float: none !important;
}

.tw-margin-right {
	margin-right: 20px;
}

.tw-margin-left {
	margin-left: 20px;
}

.tw-margin-side {
	margin-right: 20px;
	margin-left: 20px;
}

.ten-margin-side {
	margin-right: 10px;
	margin-left: 10px;
}

.ten-margin {
	margin: 10px;
}

.ft-margin-bottom {
	margin-bottom: 40px;
}

.ft-margin-vertical {
	margin-bottom: 40px;
	margin-height: 40px;
}

.ten-padding {
	padding: 10px;
}

.ten-padding-left {
	padding-left: 10px;
}

.tw-padding {
	padding: 20px;
}

.btn-customized {
	color: white;
	background-color: ;
	border-color: ;
}

.btn-customized:hover,
.btn-customized:focus,
.btn-customized:active,
.btn-customized.active,
.open
.dropdown-toggle.btn-customized {
	color: white !important;
	background-color: ;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(255,136,0,.6) !important;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(255,136,0,.6) !important;
}

.float-left {
	float: left;
	margin: 10px 20px 20px 0px;
}

.half-sized {
	width: 50%;
	height: auto;
}

.modal-body>table>tbody>tr>td{
	padding: 2px 5px;
}

h1, h2, h3 {
	font-family: 'Courgette', cursive !important;
}

/* HOME
-------------------------------------------------- */

.brautpaar {
	display: block;
	width: 100%;
	vertical-align: baseline;
}

.personInfo {
	display: inline-block;
	vertical-align: top;
	position: relative;
	min-width: 250px;
	border-radius: 4px;
	border: 1px  solid;
	border-bottom: 0px;
}

.personInfo:first-child:before {
	font-family: 'Glyphicons Halflings';
	content: "\2b";
	width: 60px;
	height: 60px;
	background: ;
	border-radius: 45px;
	color: white;
	font-size: 35px;
	line-height: 1;
	position: absolute;
	top: 125px;
	right: -43px;
	z-index: 1;
	padding-top: 12px;
}

.personTop {
	display: block;
	border-bottom: 1px solid #e0e0dd;
	position: relative;
	text-align: left;
	vertical-align: baseline;
	min-height: 115px;
	height: 50%;
}

.personTop:after{
	content: " ";
	display: table;
	clear: both;
}

.personBottom {
	display: block;
	position: relative;
	vertical-align: baseline;
	min-height: 115px;
	height: 50%;
}

.personBild {
	float: right;
	max-width: 115px;
}

#veranstaltung {
	min-width: 215px;
	border-radius: 4px;
	border: 1px solid ;
	display: inline-block;
}

.veranstaltungsBild {
	min-height: 50px;
	width: 100%;
}

.veranstaltungsThema {
	border-top: 1px solid ;
	border-bottom: 1px solid ;
	border-color: ;
	background-color: ;
	text-align: left;
}

.veranstaltungsWeiterleitung,
.veranstaltungsThema {

	padding: 20px;
}

#countdown {
  color: ;
  text-align: center;
  font-size: 50px;
}

.countdownSection {
	border-radius: 4px;
	border: 1px solid ;
	vertical-align: middle;
	color: white;
	background-color: ;
	min-width: 130px;
}

.countdownSection ,
.countdownSpacer {
	display: inline-block;
}

.countdownTop {
	text-align: left;
}

.countdownBottom {
	font-size: 16px;
	text-align: left;
}

/* Polterabend
-------------------------------------------------- */

.location-iframe {
	width: 100%;
	height: 400px;
	border: 0px;
	overflow: hidden;
	margin: 20px 0px;
}

.location-description {
	margin-top: 20px;
}

.location-meta-data {
	float: right;
	margin-bottom: 20px;
}

.location-meta {
	background-color: ;
	color: white;
	padding: 20px 20px 20px 60px;
	margin-left: 30px;
	margin-bottom: 1px;
}

.location-meta-glyphicon {
	position: relative;
	left: -20px;
	font-size: 20px;
}

.location-meta-glyphicon:before {
	position: relative;
	left: -20px;
}

.location-meta-glyphicon-map:before {
	font-family: "Glyphicons Halflings";
	content: "\e062";
}

.location-meta-glyphicon-calendar:before {
	font-family: "Glyphicons Halflings";
	content: "\e109";
}

.location-meta-glyphicon-time:before {
	font-family: "Glyphicons Halflings";
	content: "\e023";
}

.location-description>p{
	font-size: 16px !important;
	line-height: 1.6;
	margin-bottom: 15px;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 1210px) {
	#header,
	#navigation,
	#content {
		padding: 0px 0px 0px 200px;
	}
	
	.avatar-responsive {
		max-width: 200px;
	}
	
	.nav>li>a {
		padding: 15px 10px !important;
	}
}

/*@media (max-width: 1082px) {*/
@media (max-width: 1031px) {
	.personInfo:first-child:before {
		top: 125px;
	}
	
	.brautpaar>.personInfo>.tw-padding{
		padding: 20px;
	}
}

@media (max-width: 1043px) {
	.personInfo:first-child:before {
		top: 105px;
	}
	.brautpaar>.personInfo>.tw-padding{
		padding: 10px;
	}
	.nav>li {
		font-size: 12px;
	}
	.nav>li>a {
		padding: 15px 9px !important;
	}
}

@media (max-width: 1023px) {
	#avatar {
		display: none;
	}
	
	#header,
	#navigation,
	#content {
		padding: 0px;
	}
}

@media (max-width: 991px) {
	.personInfo:first-child:before {
		top: calc(100% - 20px);
		right: calc(50% - 30px);
	}
	.personInfo {
		border-bottom: 1px  solid;
	}
}

@media (max-width: 982px) {
	.countdownSection {
		display: block;
		margin: 5px;
	}
	.countdownSpacer {
		display: none;
	}
	.nav>li {
		font-size: 12px;
	}
	.nav>li>a {
		padding: 15px 9px !important;
	}
}

@media (max-width: 831px) {
	.nav>li {
		font-size: 12px;
	}
	.nav>li>a {
		padding: 15px 9px !important;
	}
}

@media (max-width: 777px) {
	.nav>li {
		font-size: 12px;
	}
	.nav>li>a {
		padding: 15px 8px !important;
	}
}

@media (max-width: 767px) {
	#avatar {
		display: none;
	}
	
	#header,
	#navigation,
	#content {
		padding: 0px;
	}
	
	#footer {
		border-radius: 0px;
	}
	
	.navbar .navbar-nav {
		display: block;
	}

	.navbar .navbar-collapse {
		text-align: left;
	}
	
	.nav>li {
		font-size: 14px;
	}
	
	.nav>li>a {
		padding: 10px 10px !important;
	}
	
	div.navbar-brand {
		display: block;
	}
	
	.nav>li.active:after {
		display: none;
	}
	
	.personTop {
		padding-top: 30px;
		text-align: center;
	}
		
	.personBild {
		float: none;
	}
	
	#tw-spacer {
		display: none;
	}
	
	.location-meta-data {
		float: none;
	}
	
	.location-meta {
		margin-left: 0px;
	}
	
	img.float-left {
		float: none;
		margin: 0px;
	}
	img.half-sized {
		width: 100%;
	}
	
	.brautpaar>.personInfo>.tw-padding{
		padding: 20px 10px 10px 10px;
	}
}