@cobalt: #031544;
@neon-blue: #0088EE;
@palmtree-green: #745C2A;
@gold: gold;
@box: 150px;

.beveled(@color, @thickness: 4px) {
    border-top: @thickness solid @color + #666666;
    border-left: @thickness solid @color + #666666;
    border-right: @thickness solid @color - #333333;
    border-bottom: @thickness solid @color - #333333;
}

@media screen {

html {
    height: 100%;
}

body {
    height: 100%;

    font-family: Arial, sans-serif;
    h1, h2, h3 {
        font-family: 'Kaushan Script', cursive;
    }
    &.vegas-day {

        background-color: #F9FF99;
        background-image: url('palmtree-day-left.png');
        background-repeat: no-repeat;
        background-position: bottom left;
        background-attachment: fixed;

        #pre-container {
            min-height: 100%;
            height: auto !important;
            height: 100%;

            min-width: 100%;
            float: left;

            margin-bottom: -20px;
            background-image: url('palmtree-day-right.png');
            background-repeat: no-repeat;
            background-position: bottom right;
            background-attachment: fixed;
        }

        #casinos {
            background: url('blue-bg.png') repeat-x;
        }

        .back-button {
            font-family: 'Kaushan Script', cursive;
            font-weight: bold;
            a {
                color: @palmtree-green;
                &:hover {
                    border-bottom: 2pt dotted @palmtree-green;
                }
            }
        }
    }
    &.vegas-night {
        background-color: @cobalt;
        background-image: url('palmtree-night-left.png');
        background-repeat: no-repeat;
        background-position: bottom left;
        background-attachment: fixed;
        color: white;

        #pre-container {
            min-height: 100%;
            height: auto !important;
            height: 100%;

            min-width: 100%;
            float: left;

            margin-bottom: -20px;
            background-image: url('palmtree-night-right.png');
            background-repeat: no-repeat;
            background-position: bottom right;
            background-attachment: fixed;
        }
        
        a {
            color: @cobalt;
            &:hover {
                border-color: @cobalt;
            }
        }
        
        .answer {
            text-shadow: none;
            color: @neon-blue;
        }
        
        #content h1 {
            margin-top: 0;
        }

        .puzzlebody {
            padding: 10px;
            background: rgba(255,255,255,.6);
            color: black;
        }

        .back-button {
            font-family: 'Kaushan Script', cursive;
            font-weight: bold;
            a {
                color: @neon-blue;
                &:hover {
                    border-bottom: 2pt dotted @neon-blue;
                }
            }
        }
    }

    font-size: 14pt;

    a {
        color: @neon-blue;
        text-decoration: none;
        &:hover {
            border-bottom: 2pt dotted @neon-blue;
        }
    }
}

#header {
    #casinos {
        width: 100%;
        a, a:hover {
            text-decoration: none;
            border: none;
        }
        img {
            margin: 0 -5px 0 0;
            padding: 0;
            &#stratosphere {
                width: 15.24%;
            }
            &#treasure-island {
                width: 15.40%;
            }
            &#caesars-palace {
                width: 19.39%;
            }
            &#aria {
                width: 17.35%;
            }
            &#excalibur {
                width: 16.99%;
            }
            &#luxor {
                width: 15.63%;
            }
        }
    }

}


.puzzle .answer, #listing .puzzle-title {
    text-shadow: 4px 5px 0 rgba(0,150,250,.5), -5px 2px 0 rgba(255,240,0,.7);
}

.puzzle h1 {
    font-size: 32pt;
}

#content {
    padding: 20px 10px 30px 10px;
    margin: 0 160px;
    #conspirators {
        list-style-type: none;
        margin-left: 50px;
        padding: 0;
        display: block;
        li {
            display: block;
            clear: both;
            .right-stuff {
                float: left;
                width: 400px;
            }

            .casinos {
                float: left;
                clear: both;
            }
            .thumbnail {
                width: @box;
                height: @box;
                margin: 4px 4px 20px 0;
                background-color: @gold;
                .beveled(@gold);
                float: left;
                border-top-left-radius: 10px;
                border-bottom-right-radius: 10px;

                &.casino {
                    width: @box / 2;
                    height: @box / 2;
                    background-color: @cobalt;
                    .beveled(@cobalt);
                    border-top: 4px solid @neon-blue;
                    border-left: 4px solid @neon-blue;
                    margin-bottom: 0;
                }
            }

            .puzzle-title {
                font-family: 'Kaushan Script', cursive;
                clear: both;
                float: left;
                margin-top: 0;
                padding-top: 0;
                font-size: 36pt;
                width: 100%;
                white-space: nowrap;
                text-transform: uppercase;
            }

            .puzzle-title {
                text-transform: none;
                margin-top: -8px;
                padding-bottom: 10px;
            }
        }
    }
}

.back-button {
    margin-top: 10px;
}

.centered {
    width: 500px;
    margin: -10px auto 20px auto;
    color: white;
    padding: 0;
    font-size: 20pt;
    border-top: 1pt solid white;
    border-bottom: 1pt solid white;
    span {
        position: relative;
        top: -4px;
    }
    marquee {
        font-size: 14pt;
        margin: 0 10px;
        width: 480px;
        color: @neon-blue;
    }
}

} /* end of @media screen */

@media print {

    body {
        font-family: Arial, sans-serif;
        h1, h2, h3 {
            font-family: 'Kaushan Script', cursive;
        }
    }

    #header {
        visibility: hidden;
    }

    #stratosphere {
        height: 0px;
    }

    #treasure-island {
        height: 0px;
    }

    #caesars-palace {
        height: 0px;
    }

    #aria {
        height: 0px;
    }

    #excalibur {
        height: 0px;
    }

    #luxor {
        height: 0px;
    }

    font-size: 14pt;

    .puzzle h1 {
        font-size: 32pt;
    }
    
    .puzzle-title {
        font-family: 'Kaushan Script', cursive;
        font-size: 36pt;
    }

    .back-button {
        visibility: hidden;
    }

    #fixie-nav {
        visibility: hidden;
    }

}