/* RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

.clear {
        clear: both;
}

.social-share {
        margin-top:  50px;
        margin-left: 20px;
        position: fixed;
        z-index: 1000;
        
        &.pie {
                display: block;
        }
}

.cover {
        background-size: cover;
        background-position: center center;
}

.transition( @duration:400ms, @target:all ) {
        -webkit-transition: @target @duration ease;
        -moz-transition: @target @duration ease;
        -o-transition: @target @duration ease;
        transition: @target @duration ease;
}

.box-sizing {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
}

.radius( @value: 1000px ) {
        -webkit-border-radius: @value;
        border-radius: @value;
    background-clip: padding-box;
}

.box-scale(@value) {
  -webkit-transform: scale(@value);
     -moz-transform: scale(@value);
      -ms-transform: scale(@value); 
       -o-transform: scale(@value);
          transform: scale(@value);
}

.transform-origin( @x, @y ) {
        transform-origin: @x @y;
        -ms-transform-origin: @x @y;
        -moz-transform-origin: @x @y;
        -o-transform-origin: @x @y;
        -webkit-transform-origin: @x @y;
}

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

.no-select {
        -webkit-user-select: none;
        -moz-user-select: none;
}

/*================================*/

@height: 650px;
@width: 1000px;
@w_width: 1000px;
@w_height: 600px;
@a_width: 800px;
@a_height: 1px;
@c_size: 24px;
@red: #fb5855;

#page {
    position: relative;
    width: @width;
    height: @height;
    
    #panel {
    	height: 50px;
    	padding-left: 100px;
    	z-index: 1;
    	
    	.button {
    		cursor: pointer;
    		font-family: 'ProximaNova-Regular';
			font-size: 20px;
			line-height: 46px;
			border: 2px solid #000000;
			float: left;
			padding: 0px 20px;
			margin-right: 20px;
			color: #000000;
			.box-sizing;
    		
    		&.active {
    			border-color: @red;
    			color: @red;
    			pointer-events: none;
    		}
    	}
    }
    
    .filters-label {
    	position: absolute;
    	left: 34px;
    	top: 20px;
    	font-family: 'ProximaNova-Regular';
		font-size: 12px;
		line-height: 14px;
		text-align: right;
    }
    
    #workspace {
    	position: absolute;
	    width: @w_width;
	    height: @w_height;
	    left: 50%;
	    bottom: 0%;
	    margin-left: -@w_width / 2;
	    /*margin-top: -@w_height / 2;*/
	    
	    #axis {
	    	position: absolute;
		    width: @a_width;
		    height: @a_height;
		    left: (@w_width - @a_width) / 2;
		   	top: (@w_height - @a_height) / 2;
		    background-color: #000000;
		    z-index: 1;
	    }
	    
	    .words-label {
	    	position: absolute;
	    	left: 20px;
	    	top: 287px;
	    	font-family: 'ProximaNova-Regular';
			font-size: 12px;
			line-height: 14px;
			text-align: right;
	    }
	    
	    .line {
	    	height: 500px;
	    	width: 1px;
	    	position: absolute;
	    	top: 50px;
	    	background-color: #333333;
	    	z-index: 1;
	    	
	    	&.one {
	    		left: 100px;
	    		
	    		&:after {
	    			content: '500';
	    			position: absolute;
	    			left: -10px;
	    			bottom: -18px;
	    			font-family: 'ProximaNova-Regular';
	    			font-size: 12px;
	    			line-height: 12px;
	    		}
	    	}
	    	
	    	&.two {
	    		left: 240px;
	    		
	    		&:after {
	    			content: '2000';
	    			position: absolute;
	    			left: -10px;
	    			bottom: -18px;
	    			font-family: 'ProximaNova-Regular';
	    			font-size: 12px;
	    			line-height: 12px;
	    		}
	    	}
	    	
	    	&.three {
	    		left: 430px;
	    		
	    		&:after {
	    			content: '4000';
	    			position: absolute;
	    			left: -10px;
	    			bottom: -18px;
	    			font-family: 'ProximaNova-Regular';
	    			font-size: 12px;
	    			line-height: 12px;
	    		}
	    	}
	    	
	    	&.four {
	    		left: 620px;
	    		
	    		&:after {
	    			content: '6000';
	    			position: absolute;
	    			left: -10px;
	    			bottom: -18px;
	    			font-family: 'ProximaNova-Regular';
	    			font-size: 12px;
	    			line-height: 12px;
	    		}
	    	}
	    	
	    	&.five {
	    		left: 810px;
	    		
	    		&:after {
	    			content: '8000';
	    			position: absolute;
	    			left: -10px;
	    			bottom: -18px;
	    			font-family: 'ProximaNova-Regular';
	    			font-size: 12px;
	    			line-height: 12px;
	    		}
	    	}
	    	
	    	&.six {
	    		left: 900px;
	    		
	    		&:after {
	    			content: '9000';
	    			position: absolute;
	    			left: -10px;
	    			bottom: -18px;
	    			font-family: 'ProximaNova-Regular';
	    			font-size: 12px;
	    			line-height: 12px;
	    		}
	    	}
	    }
	    
	    .circle {
	    	position: absolute;
	    	z-index: 2;
	    	width: @c_size * 2;
	    	height:  @c_size * 2;
	    	background-color: #000000;
	    	margin-left: -@c_size;
	    	margin-top: -@c_size;
	    	opacity: 0;
	    	border: 2px solid #000000;
	    	pointer-events: none;
	    	.radius;
	    	.transition;
	    	.cover;
	    	.box-sizing;
	    	
	    	.hint {
	    		position: absolute;
	    		width: 160px;
	    		height: 100px;
	    		background-color: @red;
	    		color: #ffffff;
	    		opacity: 0;
	    		pointer-events: none;
	    		top: 64px;
	    		left: -57px;
	    		text-align: center;
	    		.transition;
	    		
	    		.name {
	    			font-family: 'ProximaNova-Regular';
	    			font-size: 12px;
	    			line-height: 35px;
	    		}
	    		
	    		.score {
	    			font-family: 'ProximaNova-Regular';
	    			font-size: 20px;
	    			line-height: 30px;
	    		}
	    		
	    		.genre {
	    			font-family: 'PTSerif-Italic';
	    			font-size: 12px;
	    			line-height: 35px;
	    		}
	    		
	    		&:before {
	    			content: '';
	    			position: absolute;
	    			height: 20px;
	    			width: 2px;
	    			left: 78px;
	    			top: -19px;
	    			background-color: @red;
	    		}
	    	}
	    	
	    	&.shown {
	    		opacity: 1;
	    		/*cursor: pointer;*/
	    		pointer-events: auto;
	    		
	    		&:hover {
	    			border: 2px solid @red;
	    			z-index: 3;
	    			
	    			.hint {
	    				opacity: 1;
	    			}
	    		}
	    	}
	    }
    }
}