@font-face {
    font-family: 'newsanse-regular';
    src: url('../fonts/2a960d_2_0-webfont.eot');
    src: url('../fonts/2a960d_2_0-webfont.eot?#iefix') format('embedded-opentype'),
            url('../fonts/2a960d_2_0-webfont.woff') format('woff'),
            url('../fonts/2a960d_2_0-webfont.ttf') format('truetype'),
            url('../fonts/2a960d_2_0-webfont.svg#newsanse-reguploaded_file') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 0px;
    background-color: #202020;
    overflow: hidden;
    /* background-color: burlywood; */
    font-weight: normal;
    letter-spacing: 0.025em;
    word-spacing: -0.01875em;
    font-family: 'newsanse-regular';
}

#app, #grid_app{
    width: 100%;
    height: 100%;
    position: absolute;
}

.bg-grid{
	background-image: url('../images/tile.png');
	background-size: 101px 101px;
	background-repeat: repeat;
	/*
	background-image: url(../images/tile.png);
    background-size: 101px 101px;
    background-repeat: repeat;
    background-position-x: 66px;
	background-position-y: 45.5px;
	*/
}

/* ============================== */
/* General Tile helpers */
/* ============================== */

.hide{
    display: none !important;
}

.pointer{
    cursor: pointer;
}

.img-responsive{
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    left: 0; top: 0;
}

.img-raw{
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
	left: 0; top: 0;
	right: 0; bottom: 0;
	margin: auto;
}

.highlight{
	filter: brightness(1);
}

.highlight:hover{
	filter: brightness(1.4);
}

.function-tile .active{
	filter: brightness(1.4);
}

/* ============================== */
/* mosaicTile.js */
/* ============================== */

.mosaic-container{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1000;
}

/* ============================== */
/* basicTile.js */
/* ============================== */

.tile{
    border-right: 1px solid #202020;
    border-bottom: 1px solid #202020;
    position: absolute;
    z-index: 10;
}

/* ============================== */
/* folderTile.js ==> FullImagePopup */ 
/* ============================== */

.full-image-popup{
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 2000;
	background: rgba(32,32,32,0);
	opacity: 1;
}

.full-image-popup .full-image{
	border: none;
	opacity: .7;
}

.full-image-popup .full-image.active{
	opacity: 1
}

.full-image-popup .full-image:hover{
	opacity: 1;
}

.full-image-popup .info-text{
	opacity: 0;
	position: absolute;
	display: table;
}

.full-image-popup .full-text{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.full-image-popup .full-text .title{
	font-size: 1.1em;
	padding: 0.3em;
	color: #cdcdcd;
}

.full-image-popup .full-text .description{
	font-size: 0.9em;
	padding: 0.3em;
	color: #707070;
}




/* ============================== */
/* clockTile.js */
/* ============================== */

.clock-speed{
	top:0;
	bottom: 0;
	margin: auto;
	height: 20px;
	width: 20px;
	line-height: 20px;
	text-align: center;
	opacity: 0;
	cursor: pointer;
	color: white;
	font-weight: normal;
	letter-spacing:0.025em; 
	word-spacing:-0.01875em;
	font-family: 'newsanse-regular';

	-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
}

.clock-speed.up{
	font-size: 20px;
	position: absolute;
	right: 5%;

}

.clock-speed.down{
	font-size: 20px;
	position: absolute;
	left: 5%;
 
}

.clock-tile{
	position: relative;
	width: 100%;
	height: 100%;
	background: black;
}

.clock-wrap{
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	width: 27px;
	height: 27px;
}

.clock-raw {
	align-items:center;
	border-radius: 50%;
	border: solid 2px #808080;
	width: 23px;
	height: 23px;
	justify-content:center;
	-webkit-justify-content:center;
	position: absolute;

}

.hand {
	align-items:center;
	-webkit-align-items:center;
	
	border-radius: 50%;
	display:flex;
	display: -webkit-flex;
	
	justify-content:center;
	-webkit-justify-content:center;
	z-index: 2;

	height: 95%;
	width: 100%;

	-webkit-animation: timer 4s linear infinite;
	animation: timer 4s linear infinite;
	transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	animation-play-state: paused;
	-webkit-animation-play-state: running;

}

.hand:after {
	content: '';
	height: 40%;
	top: -20%;
	width: 1px;
	
	background: #808080;
	border-radius: 1px;
	
	position: relative;
}

@-webkit-keyframes timer {
	0% {
		-webkit-transform: none;
		transform: none;
	}
	
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes timer {
	0% {
		-webkit-transform: none;
		transform: none;
	}
	
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/*
 * Project: CirclePlayer
 * http://www.jplayer.org
 *
 * Copyright (c) 2012 Happyworm Ltd
 *
 * Author: Silvia Benvenuti
 * Edited by: Mark J Panaghiston
 * Date: 2nd October 2012
 * Artwork inspired by: http://forrst.com/posts/Untitled-CJz
 */

.clock-container {
	position:absolute;
	width:100%; /* 200 - (2 * 48) */
	height:100%;  
}

.clock-gauge-1,
.clock-gauge-2 {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	clip:rect(0px,20px,40px,0px);

	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;

	background:url("../images/clock_progress.png") 0 0 no-repeat;
	background-size: contain;
}

.clock-gauge{
	opacity: 0;
	z-index: 1;
	position:absolute;
	width:40px;
	height:40px;
	clip:rect(0px,40px,40px,20px);
	display:none;
} 

.clock-gauge.cp-gt50,
.clock-gauge-1.cp-fallback{
	clip:rect(auto, auto, auto, auto);
}


/* ============================== */
/* function tile base*/
/* ============================== */

.tile.function-tile{
    border-right: 0px solid #202020;
    border-bottom: 0px solid #202020;
    position: absolute;
    z-index: 100;
    cursor: pointer;
    background-color: black;
}

/* ============================== */
/* Select Form classes */
/* ============================== */

#select-options{
	border: 1px solid #ababab;
	border-radius: 4px;
	color: #dedede;
	width: 480px;
	height: 500px;
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	margin: auto;
	text-align: center;
}

#select-options h1{
	text-align: center;
	color: white;
}

#select-options h2{
	text-align: left;
	color: #dedede;
}

#select-options form{
	padding: 1rem 2rem;
	
}

#select-options #form-options>div{
	margin-left: 10%;
	width: 80%;
}

#select-options #form-options div>div{
	padding: .5rem 0rem;
	width: 48%;
	display: inline-block;
	text-align: left;
}

#select-options label, #select-options input{
	cursor: pointer;
}

#select-options label.disabled{
	color: #797979;
}

#select-options button{
	border: 1px solid #ababab;
	border-radius: 4px;
	background-color: #101010;
	color: #dedede;
	font-size: 1.1rem;
	padding: .5rem;
	cursor: pointer;
}

#select-options button:hover{
	border: 1px solid #EFEFEF;
	color: white;
	background-color: black;
}

#select-options button:focus{
	outline: none;
}

#select-options input[type='checkbox']{
	float: left;
	margin-right: 1rem;
}

/* ============================== */
/* Function Tile: FoldersTile - ModeB*/
/* ============================== */

#ft_folders .wrap-animation{
	position: relative;
    width: 44%;
    height: 44%;
    margin: 28%;
}

#ft_folders .wrap-animation ul{
	width: 100%;
	height: 100%;
	padding: 1px;
	white-space: normal;
}

#ft_folders .wrap-animation ul .box{
	width: 24%;
    height: 24%;
    box-shadow: 0px 0px 1px 1px #ababab;
    display: inline-block;
    margin: 4.6%;
}