/* Global rules */

html, body, h1, h2, h3, h4, h5, h6, ul, ol, li, p {
	margin:0;
	padding:0;
	list-style: none;
}


* {
	/* happiness */
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	/* cannot be selected */
	-webkit-user-select:none;
	-moz-user-select: -moz-none;
	-ms-user-select:none;
	user-select: none;
}

[contentEditable=true] {
	outline:none;
	-webkit-user-select: text;
	-moz-user-select:text;
	-ms-user-select:text;
	user-select:text;
}

/* Utility classes */

.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* App */

html, body, #app {
	height: 100%;
}

body, pre {
	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

#app.loading {
	position: relative;
	pointer-events:none !important;
}

	#app.loading #spinner {
		display: block;
	}


#side-bar {
	width:50px;
	height: 100%;
	background: #e6e7e9;
	float:left;
	box-shadow: 3px 0 3px rgba(0,0,0,.18),-1px 0 0 rgba(255,255,255,.4) inset;
	border-right: 1px solid #BBB;
	display: none;
}
	#side-bar .buttons {
		margin-top:50px;
		border-bottom: 1px solid #BBB;
		box-shadow: inset 1px 0 #fff;
	}
		#side-bar .buttons > * {
			background: #e6e7e9;
			width: 49px;
			height: 50px;
			box-shadow: inset 0 1px #fff;
			border-top: 1px solid #BBB;
			padding: 10px 8px;
			font-size: 25px;
			cursor: pointer;
		}

		#side-bar .buttons > *:hover {
			background: rgba(255,255,255,1);
		}

#top-bar {
	width: 100%;/*calc(100% - 50px);*/
	background: #3f4d57;
	background: -linear-gradient(top,rgba(63,77,87,1) 33%,rgba(55,68,77,1) 100%);
	box-shadow: inset 0 -3px rgba(0,0,0,.1),inset 0 1px rgba(255,255,255,.1);
	border-top: 1px solid #232424;
	padding: 12px 0 0 30px;
	overflow: hidden;
}

.vote-pending #top-bar {
	color: #2D3133;
}

	#mural-title {
		font-size: 18px;
		color: #fff;
		text-shadow: 0 1px 1px rgba(0,0,0,.5);
		float: left;
		font-weight: 600;
		text-transform: uppercase;
		width: calc(100% - 350px);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		/* Else it bugs the floating :( */
		/*display: table;*/
	}

	#views {
		float: left;
		overflow: hidden;
		clear:both;
		margin-top:5px;
	}

		#views li {
			float: left;
			margin-right: 5px;
			background: #868e93;
			padding: 7px 12px;
			border-radius: 3px 3px 0 0;
			cursor: pointer;
		}

		#views li:hover { background: #E3E3E3; }
		
		#views li.selected {
			background: #E3E3E3;
			cursor:default;
		}

		#views li.add { background: #E3E3E3; }

			#views li .caption {
				text-transform: capitalize;
				max-width: 85px;
				overflow: hidden;
				text-overflow: ellipsis;
				display: inline-block;
				white-space: nowrap;
				vertical-align: bottom;
				letter-spacing: -1px;
			}

			#views li .fa {
				margin-left: 5px;
				font-size: 20px;
				line-height: 18px;
				pointer-events:all;
				vertical-align: bottom;
				cursor: pointer;
				color: #777;
			}


			#views li .fa.icon { 
				pointer-events:none;
				color:black;
				margin-right:5px;
				margin-left:0;
			}

			#views li.add .fa {
				margin-left: 0;
				font-size: 24px;
			}

			#views li .fa:hover { color: black; }

			#views li .fa-clock-o { color:red; }
			#views li .fa-clock-o:hover { color:darkred; }

	#right-nav {
		float:right;
		position: relative;
		margin-right: 20px;
		margin-top: -8px;
	}

	#right-nav > * {
		float:left;
		margin-left: 10px;
	}

	#app.vote-pending #voting-start,
	#app.loading #voting-start,
	#app.loading #voting-stop,
	#app:not(.vote-pending) #voting-count,
	#app:not(.vote-pending) #voting-running,
	#app.vote-owner #voting-running,
	#app:not(.vote-owner) #voting-stop {
		display: none;
	}

	#voting-start, #voting-stop {
		cursor: pointer;
		border-radius: 7px;
		padding: 5px 9px;
	}

	#voting-stop {
		background: #B61616;
		color: #ededed;
	}
	#voting-start {
		background: #868e93;
	}

	#voting-count {
		padding: 5px 9px;
		color: #ededed;
	}

		#voting-count .number:empty:before {
			content: "0";
			color:red;
		}

	#voting-running {
		background: #E4DDB7;
		padding: 5px 9px;
	}

	#export {
		color: black;
		display: none;
	}

		#filters .button,
		#export {
			border-radius: 100%;
			cursor: pointer;
			background: #868e93;
			width: 28px;
			height: 28px;
			line-height: 29px;
			text-align: center;
			font-size: 17px;
		}

		#filters .button:hover,
		#export:hover,
		#voting-start:hover,
		#voting-stop:hover {
			background: #DDD;
		}

		#filters { position: relative; }
		#filters.opened .button  { background: white; }

		#filters:not(.opened) .list { display: none; }
		#filters .list {
			position: fixed;
			top: 37px;
			right: 20px;
			width: 200px;
			background: white;
			border-radius: 5px;
			z-index: 2;
			padding: 17px 20px 8px;
		}

			#filters.opened img.collab {
				top: 33px;
				left: -85px;
				width: 35px !important;
				height: 35px !important;
			}
			#filters:not(.opened) .collab {
				opacity: 0.5;
			}


			#filters .list h3 {
				font-size: 18px;
				font-weight: normal;
				margin-bottom: 12px;
				color: #666;
			}

			/* Search */
			
			#filters input {
				border-radius: 4px;
				border: 1px solid #ccc;
				padding: 3px;
				font-size: 14px;
				margin-top: 6px;
			}

			#filters .searches {
				overflow: hidden;
				margin:10px 0;
			}
				#filters .searches li {
					float:left;
					background: #699FD2;
					padding:3px 6px;
					border-radius: 10px;
					margin-right: 3px;
					cursor: default;
				}

				#filters .searches .fa {
					color: #444;
					cursor: pointer;
					margin-left: 3px;
				}

				#filters .searches .fa:hover {
					color: black;
				}

			/* Filters */

			#filters .filters li {
				width: 100%;
				margin: 15px 0;
			}
					
				/* Sliders */

				#filters .label.left { float: left; }
				#filters .label.right { float:right; }

				#filters .label.left,
				#filters .label.right { 
					height: 26px;
					text-transform: capitalize;
					font-size: 13px;
					color: #777;
					max-width: 50%;
					text-overflow:ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				#filters .control {
					padding: 30px 17px 4px;
				}

				#filters .bar {
					position: relative;
					background: #EDEDED;
					width: 100%;
					height: 4px;
					border-radius: 5px;
				}
					#filters .bar .left,
					#filters .bar .right {
						position: absolute;
						top: 2px;
						left: 0;
						background: #F7F7F7;
						cursor: pointer;
						padding:8px;
						border-radius: 100%;
						z-index: 3;
						margin-top: -10px;
						border: 1px solid #CCC;
					}

					#filters .bar .left {
						margin-left: -17px;
					}

					#filters .bar .right {
						left:100%;
					}

					#filters .bar .selection {
						position: absolute;
						right: 0;
						left: 0;
						height: 100%;
						background: #699FD2;
						z-index: 1;
					}

					#filters .bar:after {
						content:"";
						width:4px;
						height: 100%;
						position: absolute;
						background: black;
						left:50%;
						top:0;
						margin-left:-2px;
						z-index: 2;
					}

				/* Checkboxes */

				#filters label {
					display: block;
					text-transform: capitalize;
					font-size: 12px;
					color: #777;
					max-width: 100%;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					height: 19px;
					vertical-align: top;
					line-height: 25px;
				}

#viewport {
	width: 100%;/*calc(100% - 50px);*/
	height: calc(100% - 73px);
	overflow: hidden;
	background-image: url(../img/safari-bg-texture.png);
	position: relative;
	float:left;
}

	#mural {
		width: 2545px;
		height: 2000px;
		background: #E3E3E3;
		position: absolute;
		cursor: default;
		top:0;
		left:0;
		z-index: 1;
		transform-origin: 0 0;
		-ms-transform-origin: 0 0;
		-moz-transform-origin: 0 0;
		-webkit-transform-origin: 0 0;
	}

	/*#mural.transitioning,*/
	#mural.transitioning .widget {
		-webkit-transition: left 0.5s ease-out, top 0.5s ease-out;
		-moz-transition: left 0.5s ease-out, top 0.5s ease-out;
		-ms-transition: left 0.5s ease-out, top 0.5s ease-out;
		transition: left 0.5s ease-out, top 0.5s ease-out;
	}

	#viewport.panning,
	#viewport.panning #mural {
		cursor: -webkit-grabbing;
		cursor: -moz-grabbing;
		cursor: -ms-grabbing;
		cursor: grabbing;
	}

	#spinner {
		display: none;
		position: absolute;
		left:50%;
		top:50%;
		z-index: 3;
		margin: -14px -15px;
	}

	#marquee {
		position: absolute;
		border: 2px dashed #555;
		z-index: 99999;
	}

	#zoom {
		display: none;
		position: absolute;
		width: 130px;
		height: 60px;
		left: 50%;
		top: 50%;
		z-index: 4;
		margin: -30px -65px;
		background: rgba(10,10,10,.2);
		font-weight: 700;
		text-align: center;
		border-radius: 12px;
		padding: 5px;
		pointer-events: none;
		font-size: 44px;
		color: rgba(255,255,255,.4);
	}

	#magnifier {
		position: absolute;
		top:0;
		left:0;
		pointer-events:none;
		z-index: 10;
	}

#context-menu {
	position: absolute;
	width: 200px;
	z-index: 11;
	display: block;
	background: white;
	display: none;

	border: 1px solid rgba(0,0,0,.3);
	border-radius: 4px;
	box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

	#context-menu > * {
		width: 100%;
		height: 30px;
		line-height: 30px;
		color: #333;
		font-size: 18px;
		cursor: pointer;
		text-transform: capitalize;
	}

	#context-menu > *:hover {
		background: #5a5c5c;
		color: white;
	}

		#context-menu .fa {
			margin: 0 3px 0 11px;
		}

	/** Hiding rules */
	#context-menu.mural,
	#context-menu.locked,
	#context-menu:not(.cm-sticky):not(.cm-photo) [data-action=duplicate],
	#context-menu.mural [data-action=duplicate],
	#context-menu:not(.cm-sticky):not(.cm-photo) [data-action=front],
	#context-menu.mural [data-action=front],
	#context-menu:not(.many) [data-action=cluster],
	#context-menu.mural [data-action=del] {
		display: none !important;
	}

.popup {
	position: absolute;
	left:0; right:0;
	top:0; bottom:0;
	background: rgba(0,0,0,0.7);
	z-index: 20;
}
	.popup .content {
		margin: 50px auto;
		background: white;
		padding: 20px;
		/* solves auto width, centering & clears buttons floats */
		display: table;
	}
		
		.popup h3 {
			border-bottom: 1px solid #777;
			margin-bottom:10px;
		}

		.popup .body {
			width: 100%;
		}

		.popup .footer {
			width: 100%;
		}
			.popup .footer button {
				padding:5px 10px;
				border-radius: 5px;
				border: 1px solid #AAA;
				float:right;
				cursor: pointer;
				margin:10px 0 0 5px;
				text-transform: capitalize;
				background: white;
				font-size: 14px;
			}

			.popup .footer button:hover {
				background: rgba(0,0,0,0.2);
			}

#alert {
}
	#alert .content {
		min-width: 300px;
	}

	#alert pre {
		margin:20px 0 0 0;
	}

#prompt{
}
	#prompt .content {
		min-width: 300px;
	}

	#prompt input { width: 100%; }

/** Heads */

.widget .collab,
#filters .collab {
	background: rgba(0,0,0,.2);
	box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,.2);
	padding:2px;
	border-radius: 100%;
	position: absolute;
	top:10px;
	left:10px;
	width: 40px !important;
	height: 40px !important;
	z-index: 10;
	pointer-events:none;
}

/** Create view */

#create-view-popup {
}
	#create-view-popup .content {
		width: 305px;
		border-radius: 10px;
	}

		#create-view-popup h4 {
			margin: 20px 0 10px;
		}

		#create-view-popup .spaces label {
			cursor: pointer;
			width: 100%;
			margin:5px 0;
			display: block;
		}

		#create-view-popup .spaces .fa {
			margin: 0 3px;
		}

		#create-view-popup .labels {
		}
		
			#create-view-popup .labels span {
				width: 15px;
				display: inline-block;
			}

			#create-view-popup .labels input,
			#create-view-popup .labels select {
				margin: 0 5px 10px;
				font-size: 15px;
				padding: 5px;
			}
			#create-view-popup .labels input { width:115px; }
			#create-view-popup .labels select { 
				cursor: pointer;
				width:240px; 
			}

/** Widgets **/

.widget {
	position: absolute;
	cursor: pointer;
}

/* Experiment send to front when hover */
.widget:hover {	
	/*z-index: 999999 !important; */
}

.widget.locked {
	cursor: inherit;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	-ms-box-shadow: none !important;
	box-shadow: none !important;
}

.widget.hidden {
	display: none !important;
}

.widget.selected:after {
	content:"";
	position: absolute;
	top: -20px;
	left: -20px;
	bottom: -20px;
	right: -20px;
	border: 1px solid #AAA;
	pointer-events:none;
}

.widget.loading:before {
	/*content: "\f03e";*/
	content: "\f021";
	font-family: FontAwesome;
	color: rgba(0,0,0,0.5);
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -10px;
	font-size: 20px;
	z-index: 2;
}

	.widget.loading * {
		visibility: hidden;
	}

.widget.filtered {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
	filter: gray; /* IE6-9 */
	-webkit-filter: grayscale(80%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.widget.ghost {
	background: none !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	-ms-box-shadow: none !important;
	box-shadow: none !important;
}
	.widget.ghost * {
		visibility: hidden;
	}
	.widget.ghost:after {
		content:"";
		position: absolute;
		top:0;
		left:0;
		bottom:0;
		right:0;
		border: 2px solid cyan;
		pointer-events:none;
	}

.widget.sticky,
.widget.photo {
	-webkit-box-shadow: 0 1px 5px 1px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 5px 1px rgba(0,0,0,.2);
	-ms-box-shadow: 0 1px 5px 1px rgba(0,0,0,.2);
	box-shadow: 0 1px 5px 1px rgba(0,0,0,.2);

	/* (0, 0) on center */
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

#mural .widget.sticky.small:not(.dragging),
#mural .widget.photo.small:not(.dragging) {
	-webkit-transform: translate(-50%, -50%) scale(0.5);
	-moz-transform: translate(-50%, -50%) scale(0.5);
	-ms-transform: translate(-50%, -50%) scale(0.5);
	transform: translate(-50%, -50%) scale(0.5);
}

/** Stickies */

.widget.sticky {
	background-color: #fff784;
	background-image: linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,0) 50%,rgba(255,255,255,.2) 100%);
	-ms-background-image: linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,0) 50%,rgba(255,255,255,.2) 100%);
	-moz-background-image: linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,0) 50%,rgba(255,255,255,.2) 100%);
	-webkit-background-image: linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,0) 50%,rgba(255,255,255,.2) 100%);
	display: table;
}

.widget.sticky.round {
	border-radius: 100%;
}

	.widget.sticky .text {
		width: 100%;
		height: 100%;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		padding:10px;
		white-space: pre-line;
		word-break: break-word;
		font-size: 15px;
	}

	.widget.sticky.editing .text {
		cursor: text;
	}

/*.widget.sticky:hover,*/
#magnifier .widget,
.widget.sticky.selected {
	-webkit-box-shadow: 0 1px 20px 1px rgba(0,0,0,.4);
	-moz-box-shadow: 0 1px 20px 1px rgba(0,0,0,.4);
	-ms-box-shadow: 0 1px 20px 1px rgba(0,0,0,.4);
	box-shadow: 0 1px 20px 1px rgba(0,0,0,.4);
}

/** Titles */

.widget.title {
	width: auto !important;
	height: 59px !important;
	min-width: 200px;
	cursor: text;
}

	.widget.title .text {
		width: 100%;
		height: 100%;
		text-align: left;
		white-space: nowrap;
		font-size: 33px;
		margin:0;
		padding:10px 0;
		font-weight: bold;
	}

/** Spaces */

.widget.space {
	pointer-events:none;
}

.widget.space.border {
	border:1px solid #AAA;
}

	.widget.space img {
		width: 100%;
		height: 100%;
	}

	.widget.space .label {
		white-space: nowrap;
		position: absolute;
		min-height: 27px;
		text-align: left;
		font-size: 22px;
		min-width: 40px;
		color: #555;
		display: block;
		text-transform: capitalize;
	}

/** Photos */

.widget.photo {
}

	.widget.photo h4 {
		position: absolute;
		top: 0;
		left: 0;
		background: white;
		width: 100%;
		z-index: 2;
		font-size: 14px;
		font-weight: normal;
		word-break: break-word;
	}

	.widget.photo > img {
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	.widget.photo .footer {
		position: absolute;
		bottom: 0;
		left: 0;
		background: white;
		width: 100%;
		z-index: 2;
		font-size: 14px;
		font-weight: normal;
		padding:2px 0;
		vertical-align: top;

		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
		.widget.photo .footer img {
			width: 16px;
			height: 16px;
			margin: 0 5px;
		}

/** Voting */

.widget .voting {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	z-index: 4;
	cursor: pointer;
}

.widget.filtered .voting:not(.locked) {
	/* Don't allow voting on filtered widgets */
	display: none;
}

.widget .voting.locked {
	pointer-events:none;
}
	
	.widget .voting .fa {
		position: absolute;
		font-size:30px;
		bottom:5px;
		right:5px;
	}

	.widget .voting.locked .fa {
		opacity: 0.4;
	}

	.widget .voting .counter {
		position: absolute;
		bottom: 9px;
		right: 8px;
		color: white;
		pointer-events: none;
		width: 18px;
		text-align: center;
		font-weight: bold;
		font-size: 13px;
	}

	.widget .voting.locked .counter {
		color: black;
	}

/* Clusters */

.widget.clusters {
}

	.widget.clusters ul {
		width: 100%;
		height: 100%;
		display: table;
		table-layout: fixed;
	}

		.widget.clusters li {
			position: relative;
			display:table-cell;
			height: 100%;
			border: 1px solid #999;
		}

		.widget.clusters h4 {
			position: absolute;
			width: 100%;
			height: 62px;
			font-size:50px;
			border-bottom: inherit;
			text-indent: 5px;
			cursor: pointer;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		.widget.clusters h4.editing { cursor: text; }
		.widget.clusters h4:empty { color: #999; }
		.widget.clusters h4:not(.editing):empty:before { content:attr(placeholder); }
		
		.widget.clusters .cluster .fa {
			position: absolute;
			top: 12px;
			right: 12px;
			color: #E09292;
			font-size: 41px;
			cursor: pointer;
		}

		.widget.clusters .cluster .fa:hover { color: #F04F4F; }

		.widget.clusters .create * { pointer-events: none; }

		.widget.clusters .create .fa {
			color: #999;
			position: absolute;
			top: 45%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			-moz-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			font-size: 250px;
		}

		.widget.clusters .create p {
			color: #999;
			position: absolute;
			top: 55%;
			left:0;
			width: 100%;
			text-align: center;
			font-size: 60px;
		}