body {
    background: #81A8B8;
    background: #3da0c9;
    width: 70%;
    margin: 0 auto;
    padding: 0em;
    height: auto;
    font-family: ubuntu, arial, sans-serif;
    color: #E8F3F8;
    color: #eefcef;
}

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

section {
    width: 100%;
    display: block;
    clear: both;
    padding-top: 2em;
}

#banner {
    margin-right: 2%;
    min-height: 100%;
    max-width: 18%;
    border-radius: 10px 0 0 10px;
    font-family: 'Satisfy', cursive;
    float: left;
    text-align: center;
    padding: 1em;
    font-size: 2em;
    min-width: 5em;
    
}

#description {
    padding: 1em;
    max-width: 80%;
    margin-top: 1em;
        
    position: relative;

    border-radius: 0 10px 10px 0;
    float: left;

}

#download {
    padding: 1em;
    position: relative;
    float: left;
    top: 150px;
    left: 10em;
}

#note {
    font-size: 0.8em;
    font-family: serif;
    width: 400px;
    max-width: 100%;
    padding: 1.25em;
    position: relative;

    border-radius: 0 0 10px 10px;
    float: left;
}

#note p {
    margin: 0;
}

#credits {
    font-size: 0.8em;
    float: left;
    padding: 1.25em;
    border-radius: 10px;
    position: relative;
    left: 21em;
    top: 1em;
}

#credits a {
    margin-left: 2em;
}

h2 {
    font-size: 1.5em;
}

img {
    border: 0;
}

#screenshot {
    width: 400px;
    max-width: 100%;
    padding: 1em;
    text-align: center;
    
    position: relative;

    border-radius: 10px 10px 0 0;
    float: left;
}

#screenshot img {
    max-width: 100%;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}

#download img {
    vertical-align: middle;
}

.button {
    cursor: pointer;
}

.active {
    border: 1px inset;
}

#weather, #solar {
    text-align: center;
}


/*Download-Button*/

.dlbutton {
    width: 200px;
}

.dlbutton a {
    display: block;
    padding-top: 2em;
    padding-bottom: 2em;
    z-index: 2;
    position: relative;
    width: 200px;

    /*TYPE*/
    /*color: #eefcef;*/
    color: #454545;
    vertical-align: middle;
    text-decoration: none;
    text-align: center;

    /*GRADIENT*/
    background: #f4a700;
    background: linear-gradient(top, #f4c300 0%,#35a578 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4c300), color-stop(100%,#f4a700)); 
    background: -webkit-linear-gradient(top, #f4c300 0%, #f4a700 100%);
    background: -moz-linear-gradient(top, #f4c300 0%, #f4a700 100%);
    background: -o-linear-gradient(top, #f4c300 0%, #f4a700 100%); 
    background: -ms-linear-gradient(top, #f4c300 0%, #f4a700 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4c300', endColorstr='#f4a700',GradientType=0 );    
}

.dlbutton a, .dlbottom, .dltop {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
  
    -webkit-box-shadow: 2px 2px 8px rgba(255, 255, 255, 0.2);
    -moz-box-shadow: 2px 2px 8px rgba(255, 255, 255, 0.2);
    box-shadow: 2px 2px 8px rgba(255, 255, 255, 0.2);
}

.dlbottom, .dltop {
    background: #DBE6EC;
    background: white;
    display: block;
    padding: 1em;
    width: 150px;


    /*TYPE*/
    text-align: center;
    font-size: 0.8em;
    color: #454545;

    /*POSITION*/
    position: absolute;
    z-index: -1;
    bottom: 2em;
    margin-left: 25px;


    /*TRANSITION*/  
    -webkit-transition: bottom 0.5s ease;
     -moz-transition: bottom 0.5s ease;
       -o-transition: bottom 0.5s ease;
      -ms-transition: bottom 0.5s ease;
          transition: bottom 0.5s ease;
    }

/*HOVER*/
.dlbutton:hover p.dlbottom {
    bottom: -2.5em;
    padding-top: 2em;
    z-index: 1;
}

.dlbutton:hover p.dltop {
    bottom: 5em;
    padding-bottom: 2em;
    z-index: 1;
}

/*ACTIVE*/
.dlbutton a:active {
    background: #f4c300;
    background: linear-gradient(top, #f4c300 36%,#35a578 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#f4c300), color-stop(100%,#f4a700)); 
    background: -webkit-linear-gradient(top, #f4c300 36%, #f4a700 100%);
    background: -moz-linear-gradient(top, #f4c300 36%, #f4a700 100%);
    background: -o-linear-gradient(top, #f4c300 36%, #f4a700 100%); 
    background: -ms-linear-gradient(top, #f4c300 36%, #f4a700 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4c300', endColorstr='#f4a700',GradientType=0 ); 
}