body {
margin: 0;
font-family: Skia;
-webkit-transition-property: background;
-webkit-transition-duration: 4s;
background: #acf;
}

#sidepanel>div,
span.answer,
#lightswitch,
#snowswitch,
.closeMessage {
cursor: pointer;
}

body.night {
-webkit-transition-property: background;
-webkit-transition-duration: 4s;
background: #003;
}

#nightsky {
position: absolute;
width: 100%;
height: 100%;
z-index: 7500;
-webkit-transition-property: top;
-webkit-transition-duration: 4s;
-webkit-transition-timing-function: easy-out;
top: -100%;
}

body.night #nightsky {
-webkit-transition-property: top;
-webkit-transition-duration: 4s;
-webkit-transition-timing-function: easy-out;
top: 0;
}

#daysky {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
-webkit-transition-property: top;
-webkit-transition-duration: 4s;
-webkit-transition-timing-function: easy-out;
top: 0;
}

body.night #daysky {
-webkit-transition-property: top;
-webkit-transition-duration: 4s;
-webkit-transition-timing-function: easy-out;
top: 75%;
}

@-webkit-keyframes falling {
  0% {
    top: -1000px;
  }
  100% {
    top: 0px
  }
}

body.snow #snowsky {
-webkit-animation:falling 30s infinite linear;
position: absolute;
width: 3000px;
height: 3000px;
z-index: 4999;
background-image: url('snow.png');
}

#defaultlayer {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
}

#decor {
position: fixed;
width: 100%;
height: 100%;
}

#ground {
-webkit-transition-property: background-color;
-webkit-transition-duration: 10s;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40%;
background-color: #0c0;
z-index: 0;
}

body.snow #ground {
-webkit-transition-property: background-color;
-webkit-transition-duration: 10s;
background-color: #eee;
}

#brightness {
position: absolute;
width: 100%;
height: 100%;
z-index: 5000;
background: black;
-webkit-transition-property: opacity;
-webkit-transition-duration: 4s;
opacity: 0;
}

body.night #brightness {
-webkit-transition-property: opacity;
-webkit-transition-duration: 4s;
opacity: 0.7;
}

#decor .object {
position: absolute;
}

#decor.selecting .object {
opacity: 0.4;
}

#decor .object.selected {
opacity: 1.0;
}

#topbar {
width: 100%;
overflow: hidden;
position: relative;
z-index: 9999;
}

#messagebar {
position: relative;
z-index: 10000;
}


#sidepanel {
position: fixed;
z-index: 9999;
}

.topbox, #sidepanel, .messagebox, div.global {
max-width: 50%;
border-style: solid;
border-radius: 20px;
border-width: 6px;
z-index: 9999;
}

.topbox, .messagebox, div.global {
-webkit-transition-property: margin-top;
-webkit-transition-duration: 400ms;
margin-top: -20px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 30px;
padding: 20px 10px 12px 10px;
}

body.busy .topbox, body.busy #lightswitch, body.busy #snowswitch {
-webkit-transition-property: margin-top;
-webkit-transition-duration: 400ms;
margin-top: -150px;
}

.topbox {
display: none;
}

.topbox.show {
display: block;
}

.topbox, .messagebox {
float: left;
}

.acorns {
background-color: #fcc;
border-color: brown;
}

.coins {
background-color: #9f9;
border-color: green;
}

.tally {
background-color: white;
border-color: black;
}

#moretally {
float:left;
height: 45px;
}

#moretally img {
float:left;
height: 16px;
}

#weekdays {
background-color: black;
}

#weekdays div {
color: gray;
float: left;
width: 50px;
height: 50px;
vertical-align: top;
text-align: center;
}

#weekdays div.weekdayspacer {
height: 10px;
}

#weekdays img {
height: 30px;
}

#lightswitch, #snowswitch {
border-radius: 12px;
margin-top: 13;
padding: 0;
float: right;
width: 50px;
height: 50px;
background-size: 50px 50px;
background-repeat: no-repeat;
}

#lightswitch {
border-color: #333;
background-image: url('night.png');
}

#lightswitch:hover {
border-color: #999;
}

body.night #lightswitch {
border-color: blue;
background-image: url('day.png');
}

body.night #lightswitch:hover {
border-color: #69f;
}

#snowswitch {
border-color: #eee;
background-image: url('snowflake.png');
}

#snowswitch:hover {
border-color: #ccf;
}

@-webkit-keyframes slideIn {
  0% {
opacity: 0;
  }
  100% {
opacity: 1;
  }
}

.messagebox {
/* -webkit-animation: slideIn 500ms 1; */
background-color: black;
border-color: brown;
color: #f90;
font-size: 24pt;
}

.messagebox img {
  max-height: 20px;
}

#sidepanelslider {
-webkit-transition-property: width;
-webkit-transition-duration: 400ms;
width: 20px;
position: fixed;
top: 20%;
right: 0;
}

#sidepanelslider:hover {
-webkit-transition-property: width;
-webkit-transition-duration: 200ms;
width: 400px;
}

body.busy #sidepanelslider {
-webkit-transition-property: width;
-webkit-transition-duration: 200ms;
width: 0;
}

#sidepanel {
border-radius: 20px 0 0 20px;
max-height: 60%;
overflow-y: auto;
width: 394px;
border-color: #666;
background-color: #aaa;
}

#sidepanel img {
max-height: 20px;
}

#sidepanel div {
font-size: 24pt;
color: purple;
text-decoration: none;
background-color: #ccc;
padding: 4px;
border-radius: 5px 0 0 5px;
margin: 14px;
margin-right: 0;
display: block;
}

#sidepanel div:hover {
  background-color: white;
}

#question {
display: none;
position: fixed;
left:25%;
width: 50%;
top:20%;
font-size: 28pt;
padding: 20px;
background-color: black;
color: yellow;
z-index: 10000;
border-radius: 10px;
}

#question.active {
display: block;
}

span.answer {
float: right;
color: green;
margin: 0 10px;
background: gray;
padding: 6px;
border-radius: 4px;
}

span.answer:hover {
background: #666;
color: #0f0;
}

.closeMessage {
opacity: .5;
background-color: #aaf;
border-radius: 4px;
padding: 4px;
margin: 4px 0 -6px 4px;
}

div.global {
float:right;
background-color: black;
border-color: red;
color: yellow;
font-size: 18pt;
}

div.global .closeMessage {
background-color: yellow;
color: black;
}

div .closeMessage:hover {
opacity: 1;
}

.number img {
height: 50px;
vertical-align: bottom;
}

.numbericon {
float: left;
height: 50px;
margin-right: 5px;
vertical-align: bottom;
}

img.moon {
position: absolute;
top: 0;
width: 50%;
height: 100%;
}

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

div.blades {
position: absolute;
top: -45%;
left: -8%;
width: 100%;
-webkit-transform: scale(.7, 1);
}

img.blades {
-webkit-animation:phases 3s infinite linear;
width: 140%;
}

body.night img.blades {
-webkit-animation: none;
-webkit-transform: rotate(20deg);
}

img.mill {
width: 100%;
}