// Copyright (C) 2015 Sam Parkinson
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program.  If not, see <http://www.gnu.org/licenses/>.

.canvasHolder
    transition: 0.75s ease all
    transform-origin: 0 0

    position: absolute
    top: 0
    left: 0

.canvasHolder.hide
    transform: scale(0.24)

    top: 117px
    left: 1%

    width: 100vw
    height: 75vw
    overflow: hidden
    z-index: 10

    background: #99CCFF

.canvasHolder.hide canvas
    width: 100%
    height: 100%

nav
    position: fixed
    top: 0px
    left: 0px
    z-index: 100

    background-color: #8bc34a
    height: 64px
    width: 100%
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12)
    
    font: 32px sans
    vertical-align: middle
    line-height: 64px
    color: white

    .nav-container
        padding: 0 12px

    .logo
        padding-left: 12px

    h1
        font-size: 32px
        position: relative
        top: -12px
        display: inline

    img
        height: 48px
        width: 48px
        margin-top: 6px
    
        border-radius: 100%

        &hover
            background-color: rgba(255, 255, 255, 0.3)

        &active
            background-color: rgba(255, 255, 255, 0.8)

    ul
        list-style: none
        text-align: right
        display: inline

        li 
            dispalay: inline
            padding-right: 12px
            float: right

.nav-spacer
    height: 48px

.content
    padding: 0px
    margin: 0px

    li
        display: block
        list-style: none
        width: 24%
        float: left
        padding-left: 1%

    li[current=true] img.thumbnail
        opacity: 0

@media (max-width: 500px)
    .content li
        width: 49%
        padding-left: 1%
    
    .canvasHolder.hide
        transform: scale(0.49)
        
    nav h1
        display: none
    
@media (max-width: 800px) and (min-width: 501px)
    .content li
        width: 32%
        padding-left: 1%
    
    .canvasHolder.hide
        transform: scale(0.32)
    
.content li img.thumbnail
    background: #96D3F3
    width: 100%
    padding: 0

.content li .options, .content li .options input
    text-align: center

.planet-content
    color: #727272

.planet-content h2
    color: #212121
    clear: both

img.icon
    border-radius: 100%
    width: 30px

img.icon:hover
    background-color: rgba(139, 195, 74, 0.3)

img.icon:hover
    background-color: rgba(139, 195, 74, 0.8)