html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    overflow: hidden;
}

* {
    /*cursor: none !important;*/
}

body {
    background-image: url(../images/background2.png);
    background-size: cover;
}

#main {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    margin: 0px;
    overflow: hidden;
}

#header {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 60px;
    width: 100%;
}

#header #logo {
    height: 40px;
    right: 10px;
}

#main.weather #weather {
    position: absolute;
    top: 60px;
    left: 0px;
    width: 100%;
    height: 158px;
    border-top: 1px solid darkgrey;
    border-bottom: 1px solid #525050;
    background: linear-gradient(#777, #000);
}

#main:not(.weather) #weather, #main:not(.weather) #weather .weather_day {
    display: none;
}

#main.weather #weather, #main.weather #weather .weather_day {
    display: block;
}

.weather_day {
    position: absolute;
    width: 19%;
    height: 100%;
}

.weather_day:not(:last-child):after {
    content: ' ';
    position: absolute;
    height: 80%;
    width: 1px;
    background: linear-gradient(#000, #777);
    right: 0%;

    bottom: 50%;
    transform: translateY(50%);
}

.weather_day:nth-of-type(1) {
    width: 24%;
    left: 0%;
}

.weather_day:nth-of-type(2) {
    left: 24%;
}

.weather_day:nth-of-type(3) {
    left: calc( (24% + (19% * 1)) );
}

.weather_day:nth-of-type(4) {
    left: calc( (24% + (19% * 2)) );
}

.weather_day:nth-of-type(5) {
    left: calc( (24% + (19% * 3)) );
}

#footer {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 50px;
    display: none;
}

#main.footer #footer {
    display: block;
}

#footer p {
    font-size: 0.6em;
    font-family: Arial;
    color: white;
    text-align: center;
    margin: 0px;
}

#slides {
    position: absolute;
    left: 0px;
    width: 100%;
    background: rgba(192, 192, 192, 0);
}

#main.weather.footer #slides {
    top: calc(60px + 160px);
    height: calc(100% - (60px + 160px + 50px));
}

#main:not(.weather).footer #slides {
    top: 60px;
    height: calc(100% - (60px + 50px));
}

#main.weather:not(.footer) #slides {
    top: calc(60px + 160px);
    height: calc(100% - (60px + 160px));
}

#main:not(.weather):not(.footer) #slides {
    top: 60px;
    height: calc(100% - (60px));
}

.region {
    z-index: 100;
}

#loading {
    position: absolute;
    top: 60px;
    left: 0px;
    width: 100%;
    height: calc(100% - 60px);
    background: black;
    z-index: 200;
}

#loading_perc {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 100%;
    background: black;
    color: white;
    z-index: 201;
    font-size: 21px;
    font-family: Arial, serif;
    font-weight: bold;
    text-align: right;
}

.cube-wrap {
    perspective: 800px;
    perspective-origin: 50% 100px;
    bottom: 65%;
}

.cube {
    position: relative;
    width: 160px;
    transform-style: preserve-3d;
    color: #fff;
}

.cube > div {
    position: absolute;
    width: 160px;
    height: 160px;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0px 0px 7px 2px rgb(255, 255, 255);
    font-weight: bold;
    font-size: 13px;
    text-align: center;
}

.cube > div img {
    width:70%;
    height:70%;
}

.cube-back {
    transform: translateZ(-80px) rotateY(180deg);
}
.cube-right {
    transform: rotateY(-270deg) translateX(80px);
    transform-origin: top right;
}
.cube-left {
    transform: rotateY(270deg) translateX(-80px);
    transform-origin: center left;
}
.cube-top {
    transform: rotateX(-90deg) translateY(-80px);
    transform-origin: top center;
}
.cube-bottom {
    transform: rotateX(90deg) translateY(80px);
    transform-origin: bottom center;
}
.cube-front {
    transform: translateZ(80px);
}

@keyframes spin {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

.cube {
    animation: spin 4s infinite linear;
}

#main:not(.weather) #weather_city_name, #main:not(.weather) #weather_title {
    display: none;
}

#main.weather #weather_city_name, #main.weather #weather_title {
    display: block;
    font-weight: bold;
    font-size: 25px;
    font-family: Arial;
}

#main.weather #weather_city_name {
    left: 10px;
    color: gold;
}

#main.weather #weather_title {
    color: #fff;
}

.weather_day > div {
    height: 80%;
    width: 100%;
}

.weather_day > div img {
    height: 90%;
    right: 10px;
}

.weather_day:nth-of-type(1) > div img {
    height: 100%;

}

.weather_txt {
    color: white;
    font-family: Arial;
    left: 10px;
}

.weather_txt .weather_txt_period {
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 23px;
}

.weather_txt .weather_txt_temp {
    position: absolute;
    bottom: 0px;
    left: 0px;
    font-weight: bold;
    font-size: 16px;
}

.weather_txt .weather_txt_temp .weather_txt_temp_max {
    font-size: 27px;
}

.weather_txt .weather_txt_temp .weather_txt_temp_min {

}

.weather_day:nth-of-type(1) .weather_txt {

}

.weather_day:nth-of-type(1) .weather_txt .weather_txt_period {
    font-size: 25px;
}

.weather_day:nth-of-type(1) .weather_txt .weather_txt_temp {
    position: absolute;
    bottom: 50%;
    transform: translateY(50%);
    font-size: 23px;
}

.weather_day:nth-of-type(1) .weather_txt .weather_txt_temp .weather_txt_temp_max {
    font-size: 32px;
}

.weather_day:nth-of-type(1) .weather_txt .weather_txt_temp .weather_txt_temp_min {

}

.weather_day:nth-of-type(1) .weather_txt .weather_txt_conditions {
    position: absolute;
    bottom: 0px;
    left: 0px;
    font-size: 20px;
}

#downloading {
    position: absolute;
    bottom: 0px;
    left: 10px;
    width: 50px;
    height: 50px;
    z-index: 1000;
    display: none;
}

#downloading[type=downloading] {
    display: block;
    background-image: url(../images/download_red.png);
}
#downloading[type=settings] {
    display: block;
    background-image: url(../images/download_purple.png);
}
#downloading[type=fetching] {
    display: block;
    background-image: url(../images/download_orange.png);
}
#downloading[type=checking] {
    display: block;
    background-image: url(../images/download_green.png);
}
#downloading[type=update] {
    display: block;
    background-image: url(../images/download_white.png);
}

.slide {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    display: none;
}

.slide.transition {
    background: #000;/* url(../images/background.png);*/
    background-size: cover;
}

.slide.show {
    display: block;
}

.slide_element {
    position: absolute;
}

.slide_element[content_type=text] {
    color: white;
}

.slide_element[content_type=text] > div {
    width: 98%;
    text-align: center;
    font-size: 27px;
}

.slide_element[content_type=graph] > div {
    width: 99%;
    height: 99%;
    border: 1px solid silver;
    border-radius: 5px;
}

.slide_element[content_type=graph] > div > div.graph_title {
    position: absolute;
    width: 100%;
    height: 10%;
    top: 0px;
    left: 0px;
    background: linear-gradient(#777, #000);
    color: white;
}

.slide_element[content_type=graph] > div > div.graph_title > div.graph_title_content {
    position: absolute;
    color: white;
    font-size: 15px;
    font-family: sans-serif;
    width: 98%;
    text-align: center;
}

span.test_char {
    position: absolute !important;
    opacity: 0 !important;
}

.slide_element[content_type=graph] > div > div.graph_body {
    position: absolute;
    width: 100%;
    height: calc(90% - 2px);
    bottom: 0px;
    left: 0px;
}

#transition_slides_container {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: transparent;
}

#transition_slides_container.transition {
    background: #1b1b1b
}

.transition-pt-perspective {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    perspective: 1200px;
}


#message_cover {
    position: absolute;
    z-index: 1000000000000;
    background: rgba(0,0,0,0.75);
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: none;
}

#message {
    width: 340px;
    height: 300px;
    max-width: calc(100% - 10px);
    max-height: calc(100% - 10px);

    background: #fff;
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    -webkit-box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    -moz-box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    -o-box-shadowow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    position: absolute;
    right: 50%;
    bottom: 50%;
    -webkit-transform: translateX(50%) translateY(50%);
    -moz-transform: translateX(50%) translateY(50%);
    -ms-transform: translateX(50%) translateY(50%);
    -o-transform: translateX(50%) translateY(50%);
    transform: translateX(50%) translateY(50%);
    font-family: Arial;
}

#message_title {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
    background: #a05024;
    position: absolute;
    color: white;
    font-size: 21px;
}

#message_title > label {
    left: 5px;
    width: calc(100% - 15px);
    padding: 0px 0px 0px 5px;
}

#message_body {
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: calc(100% - 50px);
    overflow: hidden;
    overflow-y: auto;
    position: absolute;
    font-size: 19px;
}

#message_body > p {
    box-sizing: border-box;
    padding: 0px 5px;
    margin: 10px 0px;
}

#current_value {
    position: absolute;
    display: none;
    color: gold;
    z-index: 1000000;
    top: -10px;
    right: 10px;
    width: 100%;
    font-family: sans-serif;
}

#current_value > div {
    right: 0;
    text-align: right;
}

#current_value_value {
    font-style: italic;
    font-weight: bold;
}