/** Add css rules here for your application. */


/** Example rules used by the template application (remove for your app) */

.title-box{
	margin:5px 0px;
	width:467px;
	padding:3px;
}

.labelization-label{
	margin:5px 5px;
}


.labelization-label,.title-box{
	font-size:26px;
	
	/*font-weight:bold;*/	
	font-family:'lucida grande', tahoma, verdana, arial, sans-serif;
}

#slider{
	
	height:18px;
	position:relative;
	margin:0 auto;
}

#slider-track{
	margin:20px 0px;
	border-radius:3px;
	height:5px;
	background-color:#DDD;
	cursor:pointer;
}


#slider-handle{
	position:absolute;
	width:30px;
	height:30px;
	top:0px;
	margin-top:-12.5px;
	margin-left:-16px;
	left:50%;
	cursor:pointer;
	border-radius:7px;
	background-color:#EEE;
	background-image: linear-gradient(bottom, rgb(230,230,230) 0%, rgb(242,242,242) 60%);
	background-image: -o-linear-gradient(bottom, rgb(230,230,230) 0%, rgb(242,242,242) 60%);
	background-image: -moz-linear-gradient(bottom, rgb(230,230,230) 0%, rgb(242,242,242) 60%);
	background-image: -webkit-linear-gradient(bottom, rgb(230,230,230) 0%, rgb(242,242,242) 60%);
	background-image: -ms-linear-gradient(bottom, rgb(230,230,230) 0%, rgb(242,242,242) 60%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(230,230,230)),
		color-stop(0.6, rgb(242,242,242))
	);
}

#slider-handle:hover{
	background-image: linear-gradient(bottom, rgb(222,222,222) 0%, rgb(237,237,237) 70%);
	background-image: -o-linear-gradient(bottom, rgb(222,222,222) 0%, rgb(237,237,237) 70%);
	background-image: -moz-linear-gradient(bottom, rgb(222,222,222) 0%, rgb(237,237,237) 70%);
	background-image: -webkit-linear-gradient(bottom, rgb(222,222,222) 0%, rgb(237,237,237) 70%);
	background-image: -ms-linear-gradient(bottom, rgb(222,222,222) 0%, rgb(237,237,237) 70%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(222,222,222)),
		color-stop(0.7, rgb(237,237,237))
	);
}
#outer-triangle{
	position:relative;
	margin:0 auto;
	position:relative;
	border-bottom-color:#AAA;
}

#inner-triangle{
	position:absolute;
	top:1px;
	left:-10px;
	border-bottom-color:hsl(0, 0%, 97%);
}

.triangle{
	
	height:0;
	width:0;
	border-color:transparent;
	border-style:solid;
	border-width:0px 10px 10px 10px;
}


.paste-button{
	display:block;
	font-weight:bold;
	color:white;
	margin:0px auto;
	padding:2px;
	min-height:90px;
	min-width:90px;
	border:solid 2px hsl(58, 60%, 50%);
	border-radius:7px;
	cursor:pointer;
	background-image: linear-gradient(bottom, rgb(245,227,24) 0%, rgb(250,250,37) 70%);
	background-image: -o-linear-gradient(bottom, rgb(245,227,24) 0%, rgb(250,250,37) 70%);
	background-image: -moz-linear-gradient(bottom, rgb(245,227,24) 0%, rgb(250,250,37) 70%);
	background-image: -webkit-linear-gradient(bottom, rgb(245,227,24) 0%, rgb(250,250,37) 70%);
	background-image: -ms-linear-gradient(bottom, rgb(245,227,24) 0%, rgb(250,250,37) 70%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(245,227,24)),
		color-stop(0.7, rgb(250,250,37))
	);
}

.paste-button-clickable:hover{
	
	background-image: linear-gradient(bottom, rgb(240,212,26) 0%, rgb(252,237,25) 70%);
	background-image: -o-linear-gradient(bottom, rgb(240,212,26) 0%, rgb(252,237,25) 70%);
	background-image: -moz-linear-gradient(bottom, rgb(240,212,26) 0%, rgb(252,237,25) 70%);
	background-image: -webkit-linear-gradient(bottom, rgb(240,212,26) 0%, rgb(252,237,25) 70%);
	background-image: -ms-linear-gradient(bottom, rgb(240,212,26) 0%, rgb(252,237,25) 70%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(240,212,26)),
		color-stop(0.7, rgb(252,237,25))
	);
}

.paste-button-clickable:active{
	
	background-image: linear-gradient(bottom, rgb(235,203,44) 100%, rgb(237,216,31) 0%);
	background-image: -o-linear-gradient(bottom, rgb(235,203,44) 100%, rgb(237,216,31) 0%);
	background-image: -moz-linear-gradient(bottom, rgb(235,203,44) 100%, rgb(237,216,31) 0%);
	background-image: -webkit-linear-gradient(bottom, rgb(235,203,44) 100%, rgb(237,216,31) 0%);
	background-image: -ms-linear-gradient(bottom, rgb(235,203,44) 100%, rgb(237,216,31) 0%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(1, rgb(235,203,44)),
		color-stop(0, rgb(237,216,31))
	);

}

.check-icon,.clock-icon{
	width:70px;
	height:70px;
	margin:0 auto;
	background:no-repeat url("chrome-extension://gfoknoomofgpahflbeoiniicokplgfhg/images/button_icons.png");
}

.check-icon{
	background-position:0px 0px;
	
	
}
.clock-icon{
	background-position:-70px 0px;
}

#labelizationCanvas{
	display:block;
	background-image:url("chrome-extension://gfoknoomofgpahflbeoiniicokplgfhg/images/500blank_bg.png");
	background-size:435px 435px;
	margin:5px;
	cursor:none;
}

#preview-canvas{
	display:block;
	margin:5px;
}

#labelization-panel>#main-panel{
	display:inline-block;
	padding:5px;
	border-radius:15px;
	
	background-image: linear-gradient(bottom, rgb(230,230,230) 0%, rgb(245,245,245) 70%);
	background-image: -o-linear-gradient(bottom, rgb(230,230,230) 0%, rgb(245,245,245) 70%);
	background-image: -moz-linear-gradient(bottom, rgb(230,230,230) 0%, rgb(245,245,245) 70%);
	background-image: -webkit-linear-gradient(bottom, rgb(230,230,230) 0%, rgb(245,245,245) 70%);
	background-image: -ms-linear-gradient(bottom, rgb(230,230,230) 0%, rgb(245,245,245) 70%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(230,230,230)),
		color-stop(0.7, rgb(245,245,245))
	);
}
.gray-border{
	outline:none;
	border:solid 2px #AAA;
}
#labelization-panel{
	position:fixed;
	
	top:50%;
	left:50%;
	margin-top:-287.5px;
	margin-left:-314px;
	z-index:3000;
}

.panel{
	display:inline-block;
	/*text-align:center;*/
}

.float-panel{
	float:left;
	text-align:center;
}

.color-block{
	outline:none;
	border:solid 1px #CCC;
	width:40px;
	height:40px;
	margin:5px;
	border-radius:10px;
}

.color-ribbon{
	float:left;
}
.color-block:hover{
	box-shadow:2px 2px 7px #999;
	border-color:transparent;
}

#palette{
	display:inline-block;
}