

html {
	position: relative;
  	min-height: 100%;
}


body {
  /* Margin bottom by footer height */
  margin-bottom: 20px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 20px;
  background-color: #f5f5f5;

 }

 .box {
	background: rgba(251, 251, 251, 0.83);
	border-radius: 5px;
	padding: 7px 10px 10px 10px;
 }



.slogan {
	font-family: "Karla",cursive;
	font-size: 27px;
	color: black;
	text-decoration: none;
	margin-left:auto;
	margin-right:auto;
	width: 100%;
}


.splash {
	
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 494px;
  height: 494px;
  overflow: hidden;
  top: 50px;
  margin-bottom: 100px;
  box-shadow: 0px 0px 50px rgb(47, 81, 102);
  border-radius: 50%;
  border: 5px groove rgb(142, 130, 130);
  /* transform: translateY(-50%); */
}

.splash .pull-center {
	margin-left:auto;
	margin-right:auto;
}

.splash .center {
	
	position: absolute;
	left: 0;
	top: 0;
	width:100%;
	height:100%;
	
}

.splash .center-shadow {
	position: relative;
	/* Change top and transform to top only px*/
	/*top:50%;*/
	/*transform: translateY(-50%);*/
	top:120px;
	
	/*background: radial-gradient(circle at 50% 50% , rgba(75, 54, 80, 0.59), rgba(0, 0, 0, 0.22) 32%, transparent 38%) repeat scroll 0% 0% transparent;*/
	margin-left:auto;
	margin-right:auto;
	width:250px;
	height:250px;
	
	border-radius:50%;
	z-index: 9;
	box-shadow: 0px 0px 130px black;
	border: 10px solid rgba(8, 8, 8, 0.48)
}

.splash .center-logo {
	position: relative;
	z-index: 10;
	
	width:230px;
	height:230px;
	opacity: 0.95;
	
}

.splash .image-left-1 {
  /* border: 1px solid red; */
  width: 50%;
  height: 50%;
  position: absolute;
  border-top-left-radius: 100%;
  background: rgb(21, 48, 90);
  
  border-left: 1px solid #2C2209;
  border-top: 1px solid #15120A;
  overflow: hidden;
  z-index: 2;
  box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.64), 8px 0px 10px rgba(0, 0, 0, 0.67);
}
.splash .image-left-2 {
  /* border: 1px solid red; */
  width: 50%;
  height: 50%;
  position: absolute;
  /* left: 50%; */
  top: 50%;
  border-bottom-left-radius: 100%;
  /* border-bottom-right-radius: 50%; */
  background: rgb(200, 200, 200);
  /* border-right: 3px solid #6EA9E5; */
  border-left: 1px solid rgba(118, 118, 118, 1);
  border-top: 3px solid #6EA9E5;
  border-bottom: 1px solid rgba(118, 118, 118, 1);
  /* background: url("img/kuva1.png"); */
  /* background-size: cover; */
  overflow: hidden;
  box-shadow: -1px 1px 4px rgb(55, 21, 21);
}

.splash .image-right-1 {
  position: absolute;
  left: 50%;
  width: 50%;
  height: 50%;
  background: white;
  overflow: hidden;
  border-top-right-radius: 100%;
  /* border-bottom: 3px solid #6EA9E5; */
  /* border-left: 3px solid #6EA9E5; */
  border-right: 1px solid #A6A6A6;
  border-top: 1px solid #5F5F5F;
  /*background: url("img/kuva2.png");*/
  background-size: cover;
  box-shadow: 1px 1px 2px rgb(59, 58, 37);
}
.splash .image-right-2 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  /* border: 2px solid green; */
    background: rgb(9, 69, 119);
  border-bottom-right-radius: 100%;
  overflow: hidden;
  z-index: 2;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.64), 0px -10px 10px rgba(0, 0, 0, 0.67), 1px 1px 2px rgba(81, 57, 57, 0.67);
}

.splash .image-mosaic {
	opacity:0.55;
	
}

.image-mosaic:hover {
	opacity:1;
}


.member-profile {
	background-repeat: no-repeat;
	/* width:100%; */
	/* height:260px; */
	background-size:cover;
	/* position: relative; */
	border: 0px solid black;
	/* display: block; */
	margin-bottom: 00px;
	/* float: none; */
	background: transparent linear-gradient(rgba(255, 255, 255, 0), rgba(254, 254, 254, 0.01), rgba(221, 221, 221, 0.41)) repeat scroll 0% 0%;
}

.member-profile .picture {
	/* position: absolute; */
	/* top: 20px; */
	margin: 30px 0px 10px 20px;	
	border: 1px solid #030000;
	width: 202px;
	height: 202px;
	/* left: 20px; */
	/* float:left; */
	box-shadow: 0px 0px 10px 5px;
}

.member-profile .info {
	/* position: absolute; */
	/* top: 0px; */
	/* left: 300px; */
	padding-left: 30px;
}

.member-profile .info .pname {
	font-size: 1.6em;
	width: 270px;
	/*! border-bottom: 1px solid black; */
	padding-bottom: 13px;
}

 .info ul {
	text-decoration: none;
	list-style-type: none;
	margin: 0px;
	/* padding: 0px; */
	/* padding-left:20px; */
	/* width: 350px; */
	border: 1px solid #969696;
	border-radius: 10px;
	box-shadow: 0px 0px 7px 0px #7A7A7A;
	padding: 5px;
}

.member-profile .info .name {
	width: 110px;
	/* float: left; */
	display:table-cell;
	text-align:right;
	font-size: 1.2em;
	margin-right: 5px;
	padding-right: 5px;
	border-right: 1px solid #ababab;
	font-family: 'Arial';
	font-weight: lighter;

}
.member-profile .info .value {
	font-size: 1.1em;
	font-family: 'Arial';
	font-weight: lighter;
	padding-left: 5px;
	display: table-cell;
}

.div2 {
	height: 26px;
	background: linear-gradient(rgba(242, 240, 240, 0.38),rgba(215, 215, 215, 0.73),#B9AEAE,rgba(86, 83, 83, 0.5));
	margin: 0px -11px 30px -11px;
	border-top: 1px solid #bdbcbc;
	border-bottom: 1px solid #d4d4d4;
}
.cover { 
	background-repeat: no-repeat;
	background-size:cover;
}
body {
	background-color: #f1f1f1;
	font-family:Verdana,'Ubuntu',sans-serif;
	background: url('/s/images/background.jpg') no-repeat center center fixed;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	background-size: cover;
	-o-background-size: cover;
}


.container {
	
}

.main-content {
	min-height: auto;
}

.divider-top {
	background: #7D0000;
	height:5px;
}
.divider {
	background: #f1f1f1;
	height: 30px;
}

.divider-transparent {
	height:30px;
	content:"";
}

.divider-grey {
	background: #e7e7e8;
	height: 10px;
}

.navbar {
	border:none;
	/*background: #e7e7e8;*/
	background: transparent;
/*	margin: 0 auto;*/
	box-shadow:none;
	color: white;
}


.sub-nav li a {
	color: rgb(30, 171, 230);
	/* font-size: 1.2em; */
	width:100%;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 0px;
	padding-bottom: 0px;
	height: 24px;
	min-width: 100px;
	text-align: center;
	font-size:0.9em;
	color:black;
}

.sub-nav li {
	

	border-bottom: 1px solid grey;
	/* border-right: 1px solid grey; */
	border-left: 1px solid grey;
	background: rgba(179, 179, 179, 0.23) linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9)) repeat scroll 0% 0%;
	padding: 0px;
	float: left;
}

.sub-nav li:first-child, .sub-nav li:first-child a  {
	border-bottom-left-radius: 10px;
}
.sub-nav li:last-child { border-right: 1px solid grey; }
.sub-nav li:last-child, .sub-nav li:last-child a {
	border-bottom-right-radius: 10px;
}

.sub-nav li {
	
}

.sub-nav {
	float: left;
    margin-left: auto;

}

.navbar-default .navbar-nav li a {
	color:white;
	font-family: Verdana,'Ubuntu',sans-serif;
	text-transform: uppercase;
	font-size: 15px;
	letter-spacing: 0px;
	background: #3399cc;
	background: rgba(57, 177, 224, 0);
	z-index: 10000;
}

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
	background: #3399cc;
	background: rgba(255, 255, 255, 0.07);
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.open>a {
	color: #fff;
	background-color: transparent;
	background:none;
	/*border-bottom: 4px solid orange;*/
	/*height: 53px;*/
	box-shadow: inset 0 48px 16px rgba(0, 0, 0, 0.09);
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
	color: #FFF;
  	background-color: rgba(169, 166, 166, 0);
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover,
.dropdown-menu>li>a {
  color: #000 !important;
  white-space: nowrap;
  background: rgba(240, 240, 240, 0) ;

}

.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
	color: #000 !important;
	text-decoration: none;
	background-color: rgba(126, 147, 155, 0.12) !important;
}

.dropdown-menu {

	background-color: #F0F0F0 !important;
}

.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
	background-color: #F0F0F0;
	background-image: none;
}



.navbar-top {
	background: #e7e7e8;
	height: 55px;
	/*border-top: 10px #e7e7e8 solid;
	border-color: #e7e7e8;*/
	padding-top:2px;

	/*margin-top: 10px;*/
}

.navbar-bottom {
	background: #3399cc;
	background: rgba(57, 177, 224, 1);
	background: -webkit-linear-gradient(180deg, rgba(61, 196, 255, 0.87), rgb(26, 129, 137));
	background: -moz-linear-gradient(180deg, rgba(61, 196, 255, 0.87), rgb(26, 129, 137));
	background: -o-linear-gradient(180deg, rgba(61, 196, 255, 0.87), rgb(26, 129, 137));
	background: linear-gradient(180deg, rgba(61, 196, 255, 0.87), rgb(26, 129, 137));
	
	height: 55px;
	border-bottom: 1px solid black;
	border-top: 1px solid #aaaaaa;
}

.navbar-text2 {
  font-family: Verdana,'Ubuntu',sans-serif;
  font-size: 35px;
  color: #1494C6;
  padding-bottom: 20px;
  vertical-align: top;
  margin-bottom: 62px;
  padding-top: 10px;
  padding-left: 115px;
  float: none;
}

/* Stash the Event Info_App Stuff here too - for now */

.event-menu {
	margin-left:auto;
	margin-right:auto;
	display:table;
	margin-bottom: 10px;
}

.event-menu *:before {
	padding-right: 5px;
}

.event {
	border-radius: 15px;
	margin-top: 15px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #f1f1f1;
	border-top: 2px solid rgb(131, 113, 113);
	border-bottom: 2px solid rgb(178, 178, 180);
	background: rgba(255, 255, 255, 0.61);
}

.event a {
	text-decoration: none;
	color: black;
}


.unpublished-date {
	border: 3px dashed grey;
}

.unpublished-disabled {
	border: 3px dashed red;
}
.unpublished-date:before {
	position: absolute;
	top: -13px;
	content: "Julkaisupäivä tulevaisuudessa.";
	
	background: rgba(255, 255, 255, 0.88);
	
	color: rgb(105, 33, 82);
	padding-left: 10px;
	border-radius: 20px;
	border-bottom: 1px dashed rgb(68, 68, 68);
	border-top: 1px dashed black;
	padding-right: 10px;
	text-align: center;
	font-weight: bold;
}

.unpublished-disabled:before {
	position: absolute;
	top: -13px;
	content: "Ei julkaisulupaa.";
	
	background: rgba(255, 255, 255, 0.88);
	/* width: 225px; */
	color: rgb(234, 6, 50);
	padding-left: 10px;
	border-radius: 20px;
	border-bottom: 1px dashed rgb(152, 82, 82);
	border-top: 1px dashed red;
	padding-right: 10px;
	text-align: center;
	font-weight: bold;
}

.event .image {
	float: left;
	margin-right: 10px;
	margin-top: 18px;
	margin-bottom: 5px;
	min-width:75px;
	border: 1px solid black;
}

.event .date {
	font-size:10px;
	padding-top: 8px;
}
.event .title {
	font-size:24px;
	margin-bottom: 12px;
}

.event .date-day {
	background: rgba(150, 85, 0, 0.82);
	color: white;
	width: 100%;
	height: 50px;
	/* vertical-align: middle; */
	text-align: center;
	font-family: 'Ubuntu';
	font-weight: bold;
	font-size: 35px;
	border: 1px solid rgba(145, 3, 3, 0.51);
}

.event .date-year {
	background: rgb(127, 21, 21);
	width: 100%;
	/*height: 25px;*/
	color: white;
	display: block;
	text-align: center;
	padding-left: 3px;
	padding-right: 3px;

	font-family: 'Ubuntu';
	padding: 3px;

}

/* Some Filer Image stuff that seems to be missing */
.right {
	float:right;
}
.left {
	float: left;
 	margin: 5px 15px 10px 10px; /*Filer imagery..*/
}

.logo {
	background: url('./logo.gif') no-repeat center center fixed;
}


/* Gallery Plugin CSS - Stashed here... */

.gallery {
	width: 300px;
	min-height: 220px;
	border: 0px solid black;
	float: left;
	margin: 6px;
	padding: 0px;
	position:relative;

}

/*
.hover .admin {
	display: block;
}*/

.gallery .admin {
	display:none;
	position: absolute;
	z-index: 20;
	width: 282px;
}

.gallery .admin .remove {
	position:absolute; 
	right: 6px;
	top: 6px;
}

.gallery .admin .remove a {
	color: red; 
	font-size: 16px;
}

.gallery .thumbnails {
	position: absolute;
	top: 0px;

	margin-left:auto;
	margin-right:auto;
	margin-bottom:0px;
	width: 282px;
	min-height: 200px;
	box-shadow: 5px 5px 5px #888888;
	z-index: 0;
	font-size:0px;

}

.gallery .title {
	position: absolute;
	top: 0px;
	z-index: 11;

	padding-left: 10px;
	/*margin-top: 5px;*/
	margin-left: auto;
	margin-right: auto;
	width: 282px;
	font-size: 22px;
	background: rgba(150,150,150,0.4);
}

.gallery a {
	color: white;
}

.gallery img {
	border-image-width: 0px;
	float:left;
	position:relative;
}

.hover a {
	color: rgb(165, 245, 255);
	text-decoration: none;

}
	
.hover .title {
	background: rgba(130,130,130,0.8);	
}


.gallery .description {
	position: absolute;
	top: 31px;
	z-index: 10;
	/* margin: 0px 15px 15px 15px; */
	/* padding-left: 12px; */
	width: 100%;
	width: 282px;
	height: 167px;
	/* text-align: justify; */
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	display: none;
	padding-top: 10px;

	background: linear-gradient(rgba(130,130,130,0.8),rgba(84, 84, 84, 0.57),rgba(84, 84, 84, 0.44),rgba(84, 84, 84, 0.11));
}

/* This is now shown with jquery
.hover .description {
	display: block;
} /* 


/* Image Gallery - Lightbox setup */

.imageGallery {

}

.imageGallery .image-thumbnail {
	float: left;
	position: relative;
}

.hover .admin{
	display:block !important;
}
.hover .gradient-grey {

	width: 100%;
	height: 100%;
	z-index: 1;
	position: absolute;
	
	top: 5px;
	left: 5px;
	right: 5px;
	width: auto;


	background: -webkit-linear-gradient(rgba(203, 203, 203, 0.95),rgba(160, 160, 160, 0.65),rgba(160, 160, 160, 0.09), rgba(203, 203, 203, 0.07));
  	background: -o-linear-gradient(rgba(203, 203, 203, 0.95),rgba(160, 160, 160, 0.65),rgba(160, 160, 160, 0.09), rgba(203, 203, 203, 0.07));
  	background: -moz-linear-gradient(rgba(203, 203, 203, 0.95),rgba(160, 160, 160, 0.65),rgba(160, 160, 160, 0.09), rgba(203, 203, 203, 0.07));
	background:	linear-gradient(rgba(203, 203, 203, 0.95),rgba(160, 160, 160, 0.65),rgba(160, 160, 160, 0.09), rgba(203, 203, 203, 0.07));
}



.imageGallery  .admin {
	position: absolute;
	z-index: 10;
	width: 100%;
	height: 30px;
	display:none;
}



.image-thumbnail > .admin > .remove {
	top: 15px;
	left: 15px;
	position: absolute;
	color: red;
	font-size: 16px;
}

.image-thumbnail > .admin > .remove a {
	color: red;
}


.image-thumbnail > .admin > .edit {
	position: absolute;
	top: 15px;
	right: 15px;
	color: white;
	font-size: 16px;
}
.image-thumbnail > .admin > .edit a {
	color: black;
}
.image-thumbnail .admin a:hover {
	font-size: 20px;
} 



.blueimp-gallery > .description {
  position: absolute;
  top: 30px;
  left: 15px;
  color: #fff;
  display: none;
}
.blueimp-gallery-controls > .description {
  display: block;
}


.contact-entry {
	/*background: black;*/
}

/* Hack for image responsive - dont know if this breaks things more than fixes */
.img-responsive-600 {
	display: block;
	width: 100%;
	max-width: 600px;
	height: auto;
}

.img-responsive-500 {
	display: block;
	width: 100%;
	max-width: 500px;
	height: auto;
}

.img-responsive-400 {
	display: block;
	width: 100%;
	max-width: 400px;
	height: auto;
}


/* Calendar entries */
	.calendar {
		
		border-collapse: separate;
		border: 0px solid #757575;
		display:table;
	}

	.calendar .small {
		border:1px solid black;
	}

	.calendar .big {
		width: 100%;
	}

	.day a {
		text-decoration: none;
		color:black;
	}

	.calendar .cal-row {
		display: table-row;
	}
	.calendar th {
		text-align: center;
		display: table-cell;

	}

	.calendar .week-number {
		padding: 5px;
		font-weight: bold;
		border:;
	}

	.calendar.big .day {
		width: 14.285714286%;
		min-width: 14.285714286%;
		max-width: 14.285714286%;
		height: 80px;
		max-height: 80px;
		min-height:80px;
		border: 1px solid #757575;
		vertical-align: top;
		/*padding: 6px;*/
		display: table-cell;
		overflow: hidden;
	}

	.calendar.small .day {
		width: 14.285714286%;
		min-width: 14.285714286%;
		max-width: 14.285714286%;
		/* height: 80px; */
		/* max-height: 80px; */
		/* min-height:80px; */
		border: 1px solid #757575;
		vertical-align: top;
		/*padding: 6px;*/
		display: table-cell;
		overflow: hidden;
	}

	.calendar .day-container {
		width: 100%;
		height: 100%;
		vertical-align: top;
	}
	.calendar.big .day:hover {
		background: rgba(42, 0, 255, 0.05);
	}

	.big .day .number {
		font-size: 1em;
		padding-top: 5px;
		padding-left: 5px;
	}

	.small .day .number {
		padding: 2px;
		text-align: center;
	}

	.calendar .off-day {
		background: #ababab;
	}

	.calendar .week-day {
		background: linear-gradient(#fff,#fff);
	}

	.calendar .event {
		background: linear-gradient(#fbcca4,rgb(246, 154, 77));
		margin-top: 5px;
		border-radius: 2px;
		padding-top:0px;
		padding-bottom:2px;
	}

	.calendar.small .event2 {
		background: linear-gradient(#fbcca4,rgb(246, 154, 77));

	}
	.calendar .event-multiday {
		padding-left: 8px;
		overflow:hidden;
		border: 1px solid black;
	}

	.calendar .event-multiday.event-first-week {
		border-bottom-left-radius: 10px;
		border-top-left-radius: 10px;
	}
	.calendar .event-multiday.event-last-week {
		border-bottom-right-radius: 10px;
		border-top-right-radius: 10px;
	}

	.calendar .weekend {
		background: linear-gradient(#f5ffda,#eaffb1);
	}
	.calendar.big .today {
		border: 4px solid #f05353;
	}
	.calendar.small .today {
		border: 1px solid #f00 !important;
		box-shadow: inset 0px 0px 6px #f00;
	}


/* Member */
	.member {
		width: 100%;
		height: 200px;
		border: 0px solid black;
		margin-bottom: 10px;
		position:relative;
	}

	.member .info {
		position: absolute;
		top:0px;
		left:180px;
	}
	.member .picture {
		width: 162px;
		height: 162px;
		border: 1px solid black;
	}

	.member .name {
		font-size: 1.5em;
		border-bottom: 1px solid grey;
		width: 300px;
	}

	.member .basic-info {
		margin-top: 15px;
	}


/* Col-XS */
@media screen and (max-width: 766px) {
	.navbar-bottom {
		background: #e7e7e8;
		border-top: none;
	}
	.navbar-logo {
		float:left;
	}
	.navbar-text2 {
		padding-top: 25px;
  		margin-left: -17px;
  		font-size: 28px;
	}

	/* Make Splash screen work with small screen devices too */
	.splash {
		width: 242px;
		height: 242px;
	}

	.splash .center-shadow {
		width:125px;
		height:125px;
		left: 0px;
 		 top: 55px;
 		 border: 6px solid rgba(8, 8, 8, 0.48);
 		 box-shadow: 0px 0px 40px black;
	}
	.splash .center-logo {
		width:115px;
		height:115px;
	}

	.splash .image-small {
		width:24px;
		height:24px;
	}
	.splash .image-big {
		width: 40px;
		height: 40px;
	}

	/* Menu is being a bitch */
	.navbar-nav .open .dropdown-menu {
	    position: relative;
	    float: none;
	    width: auto;
	    margin-top: 0;
	    background-color: black !important;
	    border: 0;
	    -webkit-box-shadow: none;
	    box-shadow: none;
	    z-index: 10000;
	}

	.navbar-default .navbar-nav li a {
	    color: #0b0202;;
	    /* font-family: Verdana,'Ubuntu',sans-serif; */
	    /* text-transform: uppercase; */
	    /* font-size: 15px; */
	    /* letter-spacing: 0px; */
	    background: #fefefe !important;
	    /* z-index: 10000; */
	}

	.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
    	color: #555;
    	/* background-color: rgba(169, 166, 166, 0); */
	}
	.nav {
    	border-bottom: 2px solid black
		z-index: 1000000000;
		position: relative; /* Dont know if this will break this */
	}
}


@media screen and (min-width: 786px) {
	.navbar {
		display: table;
	}

	.navbar-bottom {
		
	}


@media screen and (min-width: 1200px) {
	.container {
		/*width: 970px;*/
		width: 800px;
	}
}

