@font-face {
    name: 'League Gothic';
    src: url('../../static/fonts/leaguegothic-regular-webfont.ttf');
}

body {
    background-color: #fbfbfb;
    color: black;

    margin: 0;
    padding: 0;

    font-size: 15pt;
    font-family: 'Crete Round', Palatino, serif;

    a {
        color: #aa0060;
        text-decoration: none;

        &:hover {
            color: #900040;
            text-decoration: underline;
        }
    }

    h1, h2, h3, #rounds, #obstacles {
        font-family: 'League Gothic', ChunkFive, Bodoni, serif;
        text-transform: uppercase;
        font-weight: normal;
        font-size: 2em;
    }

    h1 {
        font-size: 4em;
        color: black;
        margin: -10px 0 0 0;
        padding: 0 0 10px 0;

        .heist {
            color: gold;
        }

        a {
            color: black;
            text-decoration: none;
        }

        a:hover, a:hover .heist {
            color: #aa0060;
            text-decoration: none;
        }
    }

    h2 {
        font-size: 3em;
        margin: 20px 0 5px 0;
    }

    #container {
        width: 1100px;
        margin: 0 auto;
        padding: 0 20px;
    }

    #frontpage {
        h2 {
            margin: 0;
        }
        padding: 1px 0 20px 0;
        ul {
            display: block;
            clear: both;
            padding: 0 0 20px 0;
            li {
                display: block;
            }

            &#notes, &#events {
                padding-left: 30px;
                
                .done {
                    text-decoration: line-through;
                }
            }

            &#rounds, &#obstacles {
                margin: 0;
                padding: 0 0 20px 0;
                a {
                    text-decoration: none;
                }
                li {
                    display: block;
                    float: left;
                    width: 183px;
                    margin: 0;
                    padding: 0;
                    div {
                        padding: 10px;
                        margin: -10px auto 0 auto;
                        text-align: center;
                        span {
                            padding: 0;
                            line-height: 0.7em;
                        }
                        .surname {
                            font-size: 1.6em;
                            padding: 0;
                            }
                        .sobriquet {
                            font-size: .6em;
                            display: block;
                        }
                    }
                    img, .no-image {
                        height: 200px;
                    }
                    .no-image {
                        width: 100%;
                    }
                }
                li, li a {
                    color: #aaa;
                    &.unlocked, &.unlocked a {
                        color: gold;
                        &.solved, &.solved a {
                            color: black;
                            &:hover {
                                color: #aa0060;
                            }
                        }
                    }
                    &:hover {
                        color: #aa0060;
                    }
                }
            }
            &#rounds {
                li img, li .no-image {
                    height: 416px;
                    position: relative;
                }

                #oceans_11 img {
                    margin-left: -34px;
                    z-index: 1;
                }

                #feynman img {
                    margin-left: -45px;
                    z-index: 4;
                }

                #get_smart img {
                    margin-left: -20px;
                    z-index: 2;
                }

                #indiana img {
                    margin-left: -35px;
                    z-index: 3;
                }

                #sneakers img {
                    margin-left: -10px;
                    z-index: 5;
                }

                #rubik img {
                    margin-left: 0px;
                    z-index: 1;
                }

                #agent img {
                    margin-left: -37px;
                    z-index: 6;
                }
            }
        }
    }
}