/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

  body {
    background:#FFF;
    color:#000;
    font-family:verdana, sans-serif;
    font-size:10pt;
    margin:0;
    padding:10px;
}

a:link, a:visited {
    color:#008;
    font-weight:bold;
    text-decoration:none;
}

a:active, a:hover {
    color:#ACF;
}

.info {
    font-weight:bold;
}

button {
    font-family:inherit;
    cursor:pointer;
    border:0;
    border-radius:3px;
    padding:0.3em 0.5em;
    background:#CCC;
    color:#000;
}

button:hover {
    background:#DDD;
}

button.disabled {
    background:#DDD;
    color:#888;
    cursor:not-allowed;
}

button.disabled:hover {
    background:#DDD;
}

#container {
    position:relative;
    margin-left:-10px;
    margin-right:-10px;
    padding:10px;
    overflow:hidden;
}

@media (min-width:1024px) {
    /* Put the found favorites beside the picking div when the window is sufficiently large */
    #picking {
        float:left;
        width:636px;
    }

    #secondary {
        margin-left:646px;
    }
}

@media (min-width:1300px) {
    /* Once we get to the point where 636px is less than half of the width of the screen, make the picking div just take up half */
    #picking {
        width:50%;
    }

    #secondary {
        margin-left:51%;
    }
}

#pick {
    background:#58F;
    color:#FFF;
    font-size:larger;
    font-weight:bold;
    width:6em;
    border-radius:5px;
    margin-right:10px;
}

#pick.disabled {
    background:#ACF;
}

#pick:hover {
    background:#ACF;
}

.item-list {
    padding:0;
    list-style-type:none;
    line-height:100px;
}

.item-list li {
    margin:0;
    display:inline-block;
    height:100px;
    width:100px;
    line-height:100px;
    border:3px solid transparent;
    text-align:center;
    position:relative;
    vertical-align:top;
    overflow:hidden;
    border-radius:100%;
    background:#F7F7F7;
    color:#000;
}

.item-list li img {
    vertical-align:middle;
    max-height:100%;
    max-width:100%;
}

.item-list li span {
    display:inline-block;
    vertical-align:middle;
    line-height:1.2;
}

@media (max-width:636px) {
    .item-list {
        line-height:75px;
    }

    .item-list li {
        line-height:75px;
        height:75px;
        width:75px;
    }
}

@media (max-width:423px) {
    .item-list {
        line-height:50px;
    }

    .item-list li {
        line-height:50px;
        height:50px;
        width:50px;
    }
}

#evaluating li {
    cursor:pointer;
}

#favorites li {
    cursor:move;
}

.item-list li:hover {
    background:#CDF;
}

.item-list.sorting li:hover {
    background:#F7F7F7;
}

#evaluating .selected {
    border:3px solid #7AC;
}

#evaluating, #buttons {
    text-align:center;
    margin:auto;
}

#evaluating .notice {
    width:auto;
    height:auto;
    max-width:260px;
    margin:auto;
    background:#F7F7F7;
    border-radius:10px;
    padding:30px 30px;
    color:#000;
    text-align:center;
    line-height:1.4;
    cursor:auto;
    font-size:10pt;
}

#buttons {
    margin-top:30px;
    position:relative;
    z-index:3;
}