/**
 * Fonts import
 */
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);

body{
	background-color: #2a2a31;
	color: #ccc; 
	font-family: Roboto, sans-serif; 
	font-size: 10pt;
	text-align: center;
}

button{
	background-color:rgb(80,80,75);
	border-radius:4px;
	border:none;
	box-shadow: inset 0px 1px 2px 0px rgba(148,148,148,0.2),0px 1px 5px 0px rgba(0,0,0,1);
	color: rgb(200,200,210);
	font-family: Roboto,sans-serif;
	margin:2px;
	padding:3px 6px;
	text-shadow: 0px 1px 1px rgba(50, 50, 50, 1);
}

button:active{
	box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,1);
	text-shadow: none;
}

button:hover{
	background-color: rgb(82,82,76);;
	cursor:pointer;
}

button:focus {
	outline:0;
}
button:disabled {
	color:rgb(100,100,100);
	text-shadow: 0px 1px 1px rgba(150, 150, 150, 1);
}
#controls{
	cursor: default;
}

.vertical-range{
	height:10px;
	margin-top:20px;
	transform: rotate(270deg);
	width:30px;
}

#grid{
	background-color: #25252E;
	border-radius: 8px;
	box-shadow: inset 0px 1px 8px #141414;
	display: inline-block;
	margin: 5px;
	min-height: 400px;
	min-width: 400px;
	padding: 5px;
	white-space: nowrap;
}
.row{
	display: block;
	margin-top:0px;
	margin: 0px;
	width: 100%;
}
.cell{
	border: 1px solid rgba(0,0,0,0.01);
	color:rgb(230,250,240);
	display: inline-block;
	height: 20px;
	margin: 1px;
	opacity:0.95;
	overflow: hidden;
	text-align: center;
	text-shadow: 0px 2px 4px rgba(0, 0, 0, 1);
	width: 20px;
}
.cell:hover{
	border: 1px solid rgba(0,0,0,0.2);
}

#framerate{
	background-color:rgb(80,80,75);
	border-radius: 3px;
	border: inset 2px rgba(40,40,30,0.8);
	color: rgb(200,200,210);
	outline:none;
	padding-left: 3px;
	text-shadow: 0px 1px 1px rgba(50, 50, 50, 1);
	width: 3em;
}

#dropzone{
	background-color: #333;
	border-radius: 5px;
	box-shadow: 0px 1px 8px #111;
	display: inline-block;
	margin: 20px;
	overflow: hidden;
}

#dropzone .dz{
	border-radius: 10px;
	border: dashed 2px #6b6b6b;
	color:#666;
	display: inline-block;
	height: 100px;
	margin: 5px;
	padding: 5px;
	text-align: center;
	vertical-align: top;
	width: 100px;
}
#dropzone .dz input{
	opacity:0.1; 
	overflow: hidden;
	width: 100%;
}
/* Implement the color pallete as a set of CSS classes */


/**
 * Timeline Slider CSS
 * Created with the aid of danielstern.ca/range.css
 */
input[type=range]#timelineSeek {
  -webkit-appearance: none;
  cursor: default;
  margin-bottom: 10px;
  margin-right: 40px;
  position:relative;
  top:5px;
  width: 250px;
}
input[type=range]#timelineSeek:focus {
  outline: none;
}
input[type=range]#timelineSeek::-webkit-slider-runnable-track {
  
  background: #484d4d;
  border-radius: 0px;
  border: 0px solid #010101;
  box-shadow: 1.3px 1.3px 4.6px #000000, 0px 0px 1.3px #0d0d0d;
  height: 12px;
  width: 250px;
}
input[type=range]#timelineSeek::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: rgba(164, 133, 136, 0.93);
  border-radius: 1px;
  border: 0px solid #a25200;
  box-shadow: 0px 0px 1px #48516f, 0px 0px 0px #525c7e;
  height: 24px;
  margin-top: 0.8px;
  position:relative; top: -7px;
  width: 5px;
}