@import "mixins.less";

* { 
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

@footer_h:40px;
@header_h:40px;

@core-requests:#3ea214;
@core-organizations:#a81544;
@core-documents:#a2451c;
@core-projects:#279378;
@core-people:#2b63a6;

body,html{
	height:100%;
	width:100%;
}


body{
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 16px;
	overflow:hidden;
	background:#D5D7DC;
}
body > .stage::-webkit-scrollbar{
	display: none;
}


ul, li{
	list-style: none;
}
img{
	vertical-align: top;
}

/* Group animation types together */
body > nav, 
body > aside, 
main.stage, 
main.stage > .cards
{
	.transition();
}


.ghost {
  .opacity(0.5);
  outline: 2px dotted #222;
}
.stage{
	overflow-y: hidden;
	overflow-x:scroll;
	padding:25px 0 100px 70px;
	height: 100%;
	//height: ~"calc(100% - 110px)";
	.cards{
		height:100%;
		width:100%;
		white-space: nowrap;
		position: relative;
		padding: 5px 10px;
		> li{
			.drop-shadow(0, 1px, 10px, 1px, 0.2);
			vertical-align: top;
			background:#fafafa;
			border-radius: 4px;
			margin: 0 20px 0 0;
			height: 100%;
			display: inline-block;
			position: relative;
			//overflow: hidden;
			.min{
				display: none;
			}
			&.core-requests > header >i, &.core-requests > header .reveal{
				.gradient (@core-requests, darken(@core-requests, 3%));
			}
			&.red > header >i, &.red > header .reveal{
				.gradient (@core-organizations, darken(@core-organizations, 3%));
			}
			&.orange > header >i, &.orange > header .reveal{
				.gradient (@core-documents, darken(@core-documents, 3%));
			}
			&.forest > header >i, &.forest > header .reveal{
				.gradient (@core-projects, darken(@core-projects, 3%));
			}
			&.blue > header >i, &.blue > header .reveal{
				.gradient (@core-people, darken(@core-people, 3%));
			}
			&.card_expanded{
				
				> .details{
					display: inline-block;
				}
				>header >aside{
					.opacity(0.5);
					.lest{
						.opacity (0.3);
					}
				}
			}
			&.card_connected{
				>header >aside .cdata{
					>i + i{
						.opacity(1);
						color:#2f4d88;
					}
				}
			}
			&.cardmin{
				
				.opacity(0.8);
				overflow: hidden;
				
				.reveal{
					display: none;
				}
				
				&:hover{
					.opacity(1);
					cursor: pointer;
					.reveal{
						display: none;
					}
				}
				> .min{
					display: block;
					height: 100%;
					background:rgba(230, 230, 230, 0.2);
					width:45px;
					z-index: 3;
					position: absolute;
				}
				> header > h4{
					.rotate();
					position: absolute;
					top: 60px;
					left: 0;
					margin: 0;
					color:#555;
					width:100%;
					
				}
				> .details{
					display: none;
				}
				> .list{
					display: none;
				}
			}
			> header{
				height:@header_h;
				width:100%;
				.drop-shadow(0,1px,2px,0,0.2);
				color:#222;
				background:#fff;
				cursor: move;
				position: relative;
				z-index: 10;
				border-top-right-radius: 4px;
				border-top-left-radius: 4px;
				> i{
					.transition();
					width:45px;
					height: @header_h;
					color:#fff;
					line-height: 35px;
					vertical-align: top;
					text-align: center;
					font-size: 21px;
					border-top-left-radius: 4px;
				}
				.reveal{
					.transition(all 300ms ease-in-out);
					.opacity(0);
					position: absolute;
					left:0;
					top:0;
					width:45px;
					height:41px;
					font-size: 22px;
					border-top-left-radius:4px;
					color:#fff;
					i{
						width:100%;
						text-align: center;
						line-height: 36px;
					}
					
				}
				.card_name{
					line-height: @header_h;
					font-size: 16px;
					text-transform: uppercase;
					font-weight: 300;
					letter-spacing: 0.5px;
					display: inline-block;
					margin-left: 5px;
				}
				&:hover{
					
					cursor: move;
					.opacity(0.9);
					
					
					.reveal{
						.opacity(1);
					}
					aside{
						.opacity(1);
						.transition();
					}					
				}
				&:active { 
				    cursor: grabbing;
				    cursor: -moz-grabbing;
				    cursor: -webkit-grabbing;
				}
				aside {
					.opacity(0.1);
					.transition();
					font-size:22px;
					position: absolute;
					right: 6px;
					top:-1px;
					>span{
						position: relative;
						width: 33px;
						height:@header_h;
						float:right;
						i{
							position: absolute;
							line-height: 37px;
							width:100%;
							text-align: center;
							.transition();
							
						}
						&.showopen{
							display: none;
						}
						&.minimize{
							top: 1px;
							right: -4px;
						}
					}
					
					
					span:hover{
						cursor: pointer;
					}
					span > i + i,
					span:hover > i{
						opacity: 0;
					}
					span:hover > i + i{
						opacity: 1;
						color:#555;
					}

				}
			}
			.list{
				white-space: normal;
				float: left;
				width:300px;
				position: relative;
				height: ~"calc(100% - 40px)";
				z-index: 3;
				.overlay{
					background: #999;
					width:300px;
					height: ~"calc(100% - 40px)";
					position: absolute;
					opacity: 0;
					margin-top: 5px;
					z-index: 0;
				}
				.actions{
					position: relative;
					z-index: 3;
					.search{
						.drop-shadow(-1px,1px,2px,0,0.15);
						width:100%;
						display: inline-block;
						line-height: 37px;
						padding-left: 37px;
						background:#fff;
						color:#888;
						margin-top:3px;
						font-size: 13px;
						> i{
							position: absolute;
							top:10px;
							left:13px;
							font-size: 18px;
						}
					}
					
					>aside{
						.transition();
						position: absolute;
						top: 3px;
						right: 0;
						height:37px;
						width:75px;
						font-size:28px;
						z-index: 2;
						color:#888;
						border-left: 2px solid #e0e0e0;
						
						>span{
							height: 100%;
							display: block;
							i{
								width:60%;
								left:21%;
								text-align: center;
							}
						}
						
						> nav {
							.transition();
							width:300px;
							font-size: 13px;
							position: absolute;
							overflow: hidden;
							right: 0;
							top:37px;
							background:url('../img/aside-bg.png');
							
							.views, .grid{
								width:140px;
								display: inline-block;
								>li{
									.opacity(0);
									.transition();
									height: 0;
									text-align: left;
									line-height: 26px;
									padding-left: 32px;
									margin: 0 7px;
									color:#555;
									border-radius: 4px;
									
									>i + i{
										color:#fff;
									}
									&:hover{
										background:#40547B;
										color:#fff;
									}
									&.selected{
										background:#B4B3BB;
										color:#fff;
										>i{
											color:#fff;
										}
										&:hover{
											background: #B4B3BB;
										}
									}
									&.header{
										border-radius: 0;
										text-transform: uppercase;
										padding-left: 10px;
										letter-spacing: 1px;
										font-weight: 500;
										margin: 0;
										line-height: 24px;
										color:#777;
										font-size:12px;
										&:hover{
											background:none;
											color:inherit;
										}
									}
									> i{
										color:#555;
										position: absolute;
										margin: 4px 0 0 -26px;
										font-size: 18px;
									}
								}
							}
							.views{
								float: left;
								margin-left: 5px;
								
							}
							.grid{
								float: right;
								margin-right: 4px;
							}
						}
						&:hover {
							cursor: pointer;
							background:#F7F7F7;
						}
						&:hover > nav {
							padding: 10px 0px 10px 0;
							.drop-shadow(0,3px,5px,-1px,0.2);
							border-top:1px solid #ccc;
							
							.views, .grid{
								> li {
								.opacity(1);
								height: 28px;
								margin:3px 7px;
									&.header {
										height: 25px;
										margin: 0 0 3px;
									}
								}
							}
						}
					}
				}
				> ul{
					height: ~"calc(100% - 73px)";
					padding-bottom:40px;
					position: relative;
					z-index: 2;
				}
				> ul li {
					.transition();
					position: relative;
					border-bottom: 1px solid #ddd;
					padding: 12px 15px 7px 17px;
					
					> h3{
						font-size: 16px;
						margin:0 0 8px 0;
						font-weight: 400;
						color:#222;
					}
					> .details{
						font-size: 13px;
						line-height: 18px;
						color:#555;
						span{
							display: block;
							margin-top: 7px;
							font-size: 11px;
							font-weight: 600;
						}
					}
					&:hover{
						cursor: pointer;
						background:#EFEFEF;
					}
					
					.lineleft{
						width:1px;
						height:100%;
						background:#6A6E75;
						content:' ';
						display: block;
						position: absolute;
						top:0;
						left: 0; 
					}
					
					&.selected{
						.gradient (@startColor: #fafafa 60%, @endColor: #f3f3f3);						
						border-bottom: 1px solid #B3B9C5;
						
						&:hover{
							cursor: default;
							box-shadow: none;
							
						}
					}
				}
				.paging {
					.gradient(@startColor: #e0e0e0, @endColor: #efefef 35%);
					.inner-shadow(0px, 2px, 1px, 0px, 0.1);
					width:100%;
					height:@footer_h;
					z-index: 3;
					position: absolute;
					line-height: @footer_h;
					border-bottom-left-radius: 4px;
					bottom:0;
					color:#222;
					font-size: 12px;
					
					.left, .right{	
						border-radius: 3px;
						margin: 0 17px;
						font-size: 20px;
						&:hover{
							cursor: pointer;
						}
					}
					.left {
						float: left;
						color:#aaa;
					}
					.right {
						float: right;
						color:#555;
					}
					.details {
						text-align: center;
						width:50%;
						margin: 0 25%;
						position: absolute;
					}
				}
			}
			> .details{
				.inner-shadow(1px,-1px,2px,0px,0.15);
				.opacity(0);
				white-space: normal;
				border-left: 0px solid #ddd;
				width:500px;
				height:~"calc(100% - 40px)";
				position: absolute;
				display: none;
				z-index: 2;
				
				> .overlay{
					.opacity(0);
					width:100%;
					height:~"calc(100% - 40px)";
					position: absolute;
					background: rgba(0,0,0,0.3);
					z-index: 1;
				}
				
				article{
					height: ~"calc(100% - 45px)";
					overflow-y: scroll;
					background:#fff;
					margin:5px 0 0 5px;
					position: absolute;
					z-index: 2;
					h3{
						font-size: 28px;
						margin-bottom: 20px;
						display: none;
					}
					img.placeholder{
						width:100%;
					}
				}
				>footer{
					.gradient(#e0e0e0, #efefef 35%);
					.inner-shadow(0, 2px, 1px, 0px, 0.15);
					height:@footer_h;
					width:100%;
					border-bottom-right-radius: 4px;
					position: absolute;
					line-height: 38px;
					bottom:0;
					.edit{
					    .gradient(#F1F1F1, #efefef);
					    .inner-shadow(0,2px,1px,0,0.2);
					    .transition();
						padding:0 12px;
						margin-left: 16px;
						float: left;
						color:#2d78c8;
						line-height: 30px;
						border-radius: 3px;
						border-top-left-radius: 0;
						border-top-right-radius: 0;
						font-size: 14px;
						font-weight: 500;
						letter-spacing: 0.3px;
						position: relative;
						border-bottom: 1px solid #A7A7A7;
						&:hover{
							cursor:pointer;
							color: #555;
							background: #fff;
							>i{
								color:#2d78c8;
							}
						}
						> i{
							color:#888;
						}
					}
					.utility{
						position: absolute;
						width:170px;
						margin-left: 165px;
						top:-22px;
						
						li{
							display: inline-block;
							font-size: 16px;
							width:28px;
							font-weight: 500;
							color:#7a7a7a;
							&:hover{
								cursor: pointer;
								color:#555;						
							}
							&.gold i + i{
								color:#edba00;
								.opacity(1);
							}
							i{
								position: absolute;
								width:100%;
								text-align: center;
								line-height: 32px;
							}
						}
					}
					.workflow{
						float: right;
						color:#19735D;
						margin-right:15px;
						margin-top: -6px;
						z-index: 4;
						> nav{
							.transition();
							.gradient(#F1F1F1, #efefef);
							.borders(0,3px,3px,0);
							.inner-shadow(0,3px,1px,0,0.2);
							display: inline-block;
							padding:0 28px 0 14px;
							line-height: 30px;
							font-size: 14px;
							font-weight: 500;
							letter-spacing: 0.3px;
							position: relative;
							border-bottom: 1px solid #A7A7A7;
							>i{
								width:24px;
								height:100%;
								position: absolute;
								line-height: 30px;
								text-align: center;
								font-size: 22px;
								right:2px;
								color:#888;
							}
						}
						aside{
							.transition();
							position: absolute;
							bottom:@footer_h;
							right: 0px;
							border-top-left-radius: 6px;
							width:300px;
							background:#fff;
							overflow: hidden;
							z-index: 4;
							ul li{
								.transition();
								height: 0;
								margin: 0;
								padding-left: 45px;
								font-size:16px;
								font-weight:300;
								.opacity(0);
								color: #555;
								
								i{
									.transition();
									position: absolute;
									margin: 5px 0 0 -27px;
									font-size: 18px;
									color: #097309;
								}
								
								&.note{
									color:#555;
									padding: 0 10px;
									span{
										padding-left: 10px;
										font-size:13px;
										display: block;
										background:#eee;
										border-radius: 3px;
									}
									&:hover{
										text-decoration: none;
									}
									>i{
										line-height: 30px;
										display: block;
									}
								}
								
								&.header{
									font-size:15px;
									padding: 0;
									text-align: center;
									color:#888;
									span{
										font-weight: 600;
										color:#2ca126;
										
									}
								}
							}
						}
						&:hover{
							cursor: pointer;
							>nav{
								.drop-shadow(0,0,2px,0,0.2);
								color: #555;
								background: #fff;
							}
							aside{
								.drop-shadow(0,-1px,3px,-1px,0.2);
								ul li{
									height: 28px;
									line-height: 28px;
									.opacity(1);
									> i + i,
									&:hover > i{
										.opacity(0.05);
									}
									&:hover > i + i{
										.opacity(1);
									}
									&:last-child{
										margin-bottom: 9px;
									}
									&:hover{
										color:#2ca126;
										cursor: pointer;
									}
									&.note{
										
										height:37px;
										padding: 3px 10px;
										
									}
									&.header{
										height: 40px;
										line-height: 44px;
										
										&:hover{
											cursor: default;
											color: inherit;
										}
									}
								}
							}
						}
					}
				}
			}
			.connected {
				.opacity(0);
				.inner-shadow(1px,2px,1px,0,0.15);
				background:#fafafa;
				width:220px;
				height: ~"calc(100% - 40px)";
				overflow: hidden;
				position: absolute;
				right: 0;
				.connected_nav, .connected_data{
					> footer{
						.gradient(#e0e0e0, #efefef 35%);
						.inner-shadow(0,2px,1px,0px,0.15);
						height:40px;
						width:100%;
						border-bottom-right-radius: 4px;
						position: absolute;
						background:#fafafa;
						line-height: 38px;
						bottom:0;
						font-size: 12px;
						.left, .right{
							color:#aaa;
							font-size: 20px;
							margin: 0 17px;
						}
						.left {
							float: left;
						}
						.right {
							float: right;
						}
						.details {
							text-align: center;
							width:50%;
							margin: 0 25%;
							position: absolute;
						}
					}
				}
				
				.connected_nav{
					height:100%;
					overflow-x: hidden;
					position: relative;
					.listing{
						.drop-shadow(0,1px,0,0,0.2);
						background: #eaedf3;
						text-transform: uppercase;
						font-size:12px;
						color:#555;
						line-height: 40px;
						padding: 0;
						top:2px;
						left:2px;
						width:100%;
						position: absolute;
						overflow: hidden;
						>i{
							font-size:20px;
							vertical-align: middle;
							color:#777;
						}
						span{
							float: right;
						}
						
						li{
							.transition();
							height: 40px;
							border-top: 1px solid #D2D2D2;
							line-height: 40px;
							width: 100%;
							overflow: hidden;
							padding: 0 10px;
							position: relative;
							&:first-child{
								border-top:none;
							}
							span{
								right: 10px;
							    position: absolute;
							    top:8px;
							    background:#E1E3E8;
								border-radius:8px;
								
								text-align: center;
								padding: 0 10px;
								line-height: 20px;
								font-weight: 600;
							}
							&:hover{
								background:#fefefe;
								cursor: pointer;
							}
						}	
					}
				}
				
				
				.connected_data{
					position: absolute;
					left:220px;
					width:100%;
					height:100%;
					top:0px;
					> header{
						.drop-shadow(0,1px,0,0,0.2);
						background: #eaedf3;
						text-transform: uppercase;
						font-size:12px;
						color:#555;
						line-height: 40px;
						padding: 0 10px;
						margin: 3px 0 0 2px;
						
						>i{
							font-size:20px;
							vertical-align: middle;
							color:#777;
						}
						span{
							float: right;
							background:#E1E3E8;
							border-radius:8px;
							margin: 8px 0;
							text-align: center;
							padding: 0 10px;
							line-height: 20px;
							font-weight: 600;
						}
						ul{
							margin: 0;
							padding: 0;
							position: absolute;
							left: 0;
							width: 100%;
							overflow: hidden;
							background: #eaedf3;
							li{
								.transition();
								height: 0;
								line-height: 40px;
								width: 100%;
								overflow: hidden;
								padding: 0 10px;
								span{
									margin: 0;
									right: 10px;
								    position: absolute;
								    margin-top: 8px;
								}
								&:hover{
									background:#FBFCFF;
								}
								
							}
						}
						&:hover{
							cursor: pointer;
							ul{
								border-bottom: 2px solid #aaa;				
								li{
									height: 40px;
									border-top: 1px solid #D2D2D2;
								}
							}
						}
					}
					>ul {
						margin-top:2px;
						height: ~"calc(100% - 85px)";
						overflow-y:scroll;
						 
						 >li{
							.transition();
							padding: 10px 15px;
							border-bottom: 1px solid #e2e2e2;
							background:#fff;
							margin-left: 2px;							
							white-space: normal;
							
							&:hover{
								cursor: pointer;
								background:#EFEFEF;
							}
							
							h4{
								font-size:13px;
								font-weight: 500;
								margin-bottom: 4px;
								
							}
							p{
								line-height: 16px;
								font-size:12px;
								color:#888;
							}
							span{
								display: block;
								margin-top:4px;
								color:#555;
								font-size:11px;
							}
						}
					}
				}
			}
		}
	}
}

.dock{
	height:80px;
	margin-left:90px;
	width: ~"calc(100% - 90px)";
	position: fixed;
	padding-top: 0px;
	bottom: 0;
	z-index: 10;
	.dock_add{
		.transition();
		.drop-shadow(0,0,4px,1px,0.3);
		background:#4D5158;
		position: absolute;
		top:5px;
		right:40px;
		border-radius: 50%;
		width:42px;
		line-height: 44px;
		font-size: 20px;
		height:42px;
		text-align: center;
		color:#fff;
		text-shadow: none;
		cursor: pointer;
		&:hover{
			.transition(all 500ms ease-in-out);
			background:#fff;
			color:#394E71;
			aside{
				right: -75px;
			}
		}
		aside{
			.transition(all 500ms ease-in-out);
			width: 700px;
			background: #fff;
			position: absolute;
			right: -775px;
			bottom: 38px;
			padding-bottom: 10px;
			font-size: 12px;
			line-height: 18px;
			text-align: left;
			display: flex;
			flex-flow: row wrap;
			padding-right: 70px;
			justify-content: space-between;
			box-shadow:0px 0px 8px 1px rgba(0,0,0,0.3);
			border-radius: 4px;
			h4{
				width:700px;
				margin-right: -70px;
				background:#eee;
				line-height: 46px;
				margin-bottom: 25px;
				color:#555;
				text-align: center;
				font-size: 18px;
			    text-align: center;
			    text-transform: uppercase;
			    font-weight: 300;
			    letter-spacing: .5px;
			    border-top-left-radius: 4px;
			    span{
				    color:#14a04c;
				    font-size: 20px;
			    }
			}
			ul{
				
				width:170px;
				margin: 0 10px 20px 30px;
				
				li{
					display: block;
					margin-left: 20px;
					font-size:14px;
					line-height: 20px;
					color:#1c3f96;
					position: relative;
					&.header{
						font-weight: 400;
						color:#888;
						font-size: 13px;
						letter-spacing: .5px;
						text-transform: uppercase;
						margin-left: 0;
						margin-bottom: 4px;
					}
					&.dropdown{
						margin-left: 0;
						select{
							color:#888;
						}
					}
					
					span{
						color:#14a04c;
						border-right:1px solid #ddd;
						position: absolute;
						display: block;
						left:-26px;
						height: 15px;
						line-height: 12px;
						width:20px;
						top:2px;
						text-align: center;
					}
				}
			}
		}
	}
	.dock_icons{
		margin:0 auto;
		width:250px;
		ul {
			white-space: nowrap;
			li{
				display: inline-block;
				width:42px;
				line-height: 42px;
				text-align: center;
				border-radius: 4px;
				height:42px;
				position: relative;
				margin:4px 2px;
				&.requests { .cardColor(@core-requests); }
				&.organizations { .cardColor(@core-organizations); }
				&.documents { .cardColor(@core-documents); }
				&.projects { .cardColor(@core-projects); }
				&.people { .cardColor(@core-people); }
				aside{
					.transition();
					.opacity(0);
					position:absolute;
					bottom:-14px;
					left:-8px;
					z-index: 5;
					width:20px;
					height:20px;
					border-radius: 50%;
					color:#555;
					line-height: 22px;
					background:#c7c9ce;
					text-align: center;
					font-size: 12px;
					&:hover{
						background:#31363E;
						color:#fff;
					}
				}
				
				>i{
					font-size: 22px;
					line-height: 36px;
				}
				&:hover{
					aside{
						.transition();
						.opacity(1);
					}
				}
			}	
		}
	}
	.dock_handle{
		
		left:0;
		width:100px;
		height:10px;
		border-radius: 10px;
		background:#B6B6BD;
		margin-bottom: 4px;
		&:hover{
			cursor: move;
			background: #808086;
		}
	} 
}