/* 
 1. Frame
 2. Index
 3. Places Locations
	3.1 OPENING HOURS TABLE
	3.2 LOCATION CARDS
	3.3 LOCATION EVENTS
 4. USERS
*/

/* 1. FRAME */

.typeicon{
	width:24px;
	height:24px;
	display:inline-block;
	background:#333;
	padding:5px;
	border-radius:12px;
}

.topbar{
    position: fixed;
    background: #26bfda;
    z-index: 99999;
    color: #000;
    font-weight: 300;
    font-size: 11px;
    left: 0;
    right: 0;
    top: 0;
    padding: 5px 10px;
    height: 24px;
    text-transform: uppercase;
    min-width: 460px;
}

.topbar i{
	margin-right:5px;
}

.topbar a{
	color:#fff !important;
}

.topbar .left a, .topbar .left span{
	margin-right:15px;
}

.wrapcontainercontent{
	position:relative;
	top:30px;
	background-color:#212121;
	border-top-left-radius: 10px;
	padding:30px;
	margin-left:100px;
	min-height: 100%;
}

.navileft{
	position:fixed;
	left:0;
	top: 55px;
}
.navileft a:not(:first-child)
{
	padding:20px;
	height:60px;
}

.navileft a:not(:first-child):hover{
	background:#222;
}

.navileft a{
	height:80px;
	width:100px;
	text-align:center;
	display:block;
	font-size:18px;
	font-size:11px;
}
.navileft a i{
	font-size:18px;
}
.navileft a:hover{
	text-decoration:none;
}

.navileft a.active{
	background:#333;
}

.navitop{
	position:relative;
	top:30px;
	height:80px;
	margin-left:100px;
	color:#fff;
	padding-top:25px;
	padding-bottom:25px;
	z-index:10000;
}

.logo{
	width:70px;
	
}

.search{
	margin-left:15px;
	margin-top:25px;
}

.searchinput{
	border:0;
	padding:5px 15px;
	font-size:16px;
	border:1px solid #ddd;
	-moz-transition: all 0.14s ease-in-out;
	-o-transition: all 0.14s ease-in-out;
	transition: all 0.14s ease-in-out;
    color:#3a4c51;
}

.menu {
	float:right;
	margin:0 15px;
}

.midcontent{
	max-width:720px;
	margin:50px auto;
}

.wrappopup{
	position:fixed;
	top:0;
	right:0;
	left
}

/* 2. INDEX */

.bigheader{
	text-align:center;
	padding:50px 0;
}
.logoout{
	width:100px;
}

/* ADD Location */

.wraplistpage{	
	position:relative;
	padding:30px;
	margin:15px auto;
	text-align:left;
	display:inline-block;
	width:100%;
	border-radius:3px;
}

@media all and (max-width:960px)
{
	.wraplistpage{	
		padding:15px;
	}
}

.fb_picture{
	margin-right:10px;
}

#fb_name{
	line-height:30px;
}

.fb_cover{
	position:relative;
	max-width:100%;
}

#fb_placesubmitted{
	display:none;
}

/* 3. PLACES LOCATIONS */

.wraplocation .topline{
	height:100px;
}


.wraplocation .placetitle{
	margin-left:25px;
	font-size:30px;
	line-height:100px;
}

.authenticating{
	display:none;
}

.authenticating .gps_ring{
	width:30px;
	height:30px;
	display:inline-block;
	position:relative;
	top:10px;
	margin-right:5px;
}

.locationcard{
	width:200px;
	border-radius:4px;
	overflow:hidden;
	margin:5px;
	
	
}

.locationcard .photo{
	height:100px;
	width:100%;
	background-size:contain;
}

.wraplocationcard .title{
	padding:10px 15px;
	font-weight:normal;
	display:inline-block;
	background:#000;
}

.wraplocationcard .address{
	padding:10px 15px;
	font-weight:normal;
	display:inline-block;
	background:#000;
}

.wraplocation{
	width:720px;
	margin:auto;
	min-width:400px;
}

@media all and (max-width:960px)
{
	.wraplocation{
		width:100%;
	}
}

.wraplocation .placelogo{
	height:64px;
	width:64px;
	background-color:#ddd;
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
	border-radius:4px;
	box-sizing:content-box;
	padding:15px;
}

.wraplocation .photo{
	width:100%;
	padding-bottom:56.25%;
	position:relative;
	margin:30px 0;
	border-radius:5px;
	-webkit-box-shadow: inset 0px 0px 68px -9px rgba(0,0,0,0.75);
	-moz-box-shadow: inset 0px 0px 68px -9px rgba(0,0,0,0.75);
	box-shadow: inset 0px 0px 68px -9px rgba(0,0,0,0.75);
	background-size:cover;
	background-position:center center;
	background-repeat: no-repeat;
}


.wraplocation .p50{
	margin:10px 10px 30px 10px;
	padding:50px 30px 30px;	
	width:calc(50% - 10px);
	border-radius:4px;
}

.wraplocation .p50:nth-child(2n)
{
	margin-right:0;
}
.wraplocation .p50:nth-child(2n+1)
{
	margin-left:0;
}
/*
.wraplocation .p50:nth-child(2n+1){
	padding-right:30px;
}

.wraplocation .p50:nth-child(2n){
	padding-left:30px;
}*/

@media all and (max-width:960px)
{
	.wraplocation .p50{
		width:100%;
		margin:0 0 20px 0;	
	}
	
	
	.wraplocation .photo{
		margin-bottom:60px;
	}
}

.wrapplacephoto{
	position:relative;
}

#place_photo_button{
	position:absolute;
	bottom:15px;
	right:15px;
}

#place_logo_button{
	width:64px;
	height:64px;
	box-sizing:content-box;
	padding:15px;
}

.wraplocation #map { 
	height: 350px; 
	border-radius:4px;
}

.mapmarkerlabel {
    position:absolute;
    color:#fff;
    z-index:2;
    width:100px;
    left: -34px;
    text-align:center;
    top: 45px;
    font-size:1;
    /*opacity:0;*/
}

.savebutton{
	width: calc(100% - 190px);
	position:fixed;
	bottom:15px;
	z-index:10000;
	text-align:center;
	display:none;
}

/* 4. OPENING HOURS TABLE */ 

.openHoursTable {
	width: 100%;
	border-radius:4px;
	border-collapse: collapse;
	overflow: hidden;
}

.hourstr:not(:last-child){
	border-bottom:1px solid #444;
}

.openHoursTable .tableheader{
	padding:15px;
	border-radius:4px;
	color:#999;
	border-bottom:1px solid #444444;
}

.openHoursTable td {
    text-align: left;
    padding: 15px;
}

.openHoursTable input{
	width: 100%;
}

.deleteBtn:hover {
	background: red;
	cursor: pointer;
	color: black;
}

#openhoursForm {
	margin-top: 8px;
	margin-bottom: 25px;
}

#openhoursForm > div {
	display: flex;
  	justify-content: space-between;
}


@media all and (max-width:960px)
{	
	#openhoursForm > div{
		display:block;
	}
	
	#openhoursForm .inputHours{
		width:100%;
		margin:5px 0;
	}
}

#openhoursForm > div > select {
	width: 24%;
	padding: 6px;
}

.addBtn {
	/*width: 8%;*/
}

/* 3.2 LOCATIONS CARDS */

.wraplocationcard{
	overflow:hidden;
}

.locationcardphoto{
	padding:50px 30px;
	background-size:cover;
	background-repeat:no-repeat;
}


.locationbuttons .locationbutton{
	padding:15px;
	font-size:25px;
    display: block;
    width: 80px;
    float: left;
	text-align:center;
}

.locationbuttons .locationbutton:nth-child(1),.locationbuttons .locationbutton:nth-child(2)
{
	border-right:1px solid #444;
}

.locationbuttons .locationbutton.active{
	background:#444444;
	color:#fff;
}

.locationbuttons .locationbutton:hover{
	background:#444444 !important;
}

/* 3.3 LOCATIONS EVENTS */

.eventslist .eventphoto{
	width:150px;
	margin-right:15px;
}

/* 4. USERS */

.usercard{
	width:calc(25%);
	display:block;
	position:relative;
	padding-bottom: 25%;
	-moz-transition: opacity 0.14s ease-in-out;
	-o-transition: opacity 0.14s ease-in-out;
	transition: opacity  0.14s ease-in-out;
}
.usercard:hover{
	opacity:0.4;
	cursor:pointer;
}

.usercard .select{	
	position:absolute;
	top:5px;
	left:5px;
	font-size:1.2em;
}
.usercard:not(.selected) .select{
	display:none;
}
.usercard:hover .select{
	display:block;
}
.usercard.selected{
	border:3px solid #fff;
	padding-bottom: calc(25% - 6px);
}
.usercard.selected .userphoto{
	opacity:0.4;
}
.usercard.selected .select{
	z-index:10;
	color:#fff;
}

.usercard .userphoto{
	padding-bottom:100%;
	background-size:cover;
	background-position:center center;
	opacity:0.8;
	position:absolute;
	top:0;
	right:0;
	left:0;
	bottom:0;
	z-index:1;
	background-color:#111;
}

.usercard .username{
	padding:15px;
	overflow:hidden;
	text-overflow:clip;
	display:block;
	width:100%;
	position:absolute;
	color:#fff;
	bottom:0;
	z-index:2;
}

.actionbar{
	position:fixed;
	bottom:0;
	z-index:1000;
	left:100px;
	right:0;
	padding:15px;
	visibility:hidden;
	-moz-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	transition: opacity  0.2s ease-in-out;
	opacity:0;

}

.actionbarcontent{
	width:720px;
	margin:auto;
}

.actionbar.visible{ 
	visibility:visible;
	opacity:1;
}