/*
* @author: William Khoe
*/

section#browse-projects ul:after {
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
    content: ".";
}

.ie section#browse-projects ul {
    zoom: 1;
}

#browse-projects {
    position: relative;
    margin: 0 0 30px 0;
    padding: 19px;
    border: 1px solid #DEDEDE;
    background: #FFF;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

section#browse-projects h2 {
    margin: 0 0 15px 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

section#browse-projects ul li {
    float: left;
    width: 100px;
    padding: 36px 0 0 18px;
    border-top: 1px solid #DDD;
}

    section#browse-projects ul li:first-child {
        padding-right: 18px;
        padding-left: 0;
        border-right: 1px solid #DDD;
    }

    section#browse-projects ul li a {
        display: block;
        margin: 0 0 10px 0;
        text-align:center;
    }

    section#browse-projects ul li img {
        /*max-width: 100px;*/
        /*height: 57px;*/
        max-width: 100px !important;
        height:auto !important;
        width:auto !important;
    }

section#browse-projects nav.pagination {
    position: relative;
}

    section#browse-projects nav.pagination a {
        position: absolute;
        top: 17px;
        font-size: 13px;
        font-family: "nimbus-sans", "Helvetica Neue", Helvetica, Arial;
        font-weight: 700;
        text-transform: uppercase;
        line-height: 11px;
        background: url(/img/ui/icon-sprite.png) no-repeat 0 -705px;
    }

    section#browse-projects nav.pagination .prev {
        left: 0;
        padding: 0 0 0 15px;
    }

        section#browse-projects nav.pagination .prev:hover {
            background-position: 0 -4337px;
        }

    section#browse-projects nav.pagination .next {
        right: 0;
        padding: 0 15px 0 0;
        background-position: 100% -583px;
    }

        section#browse-projects nav.pagination .next:hover {
            background-position: 100% -4148px;
        }

/* Regular Desktop */

@media only screen and (min-width:1024px) {
}

/* Tablet Portrait */

@media only screen and (min-width:768px) and (max-width:1023px) {
    section#browse-projects ul li {
        width: 77px;
    }

        section#browse-projects ul li img {
            width: 77px;
            height: 44px;
        }

        section#browse-projects ul li .project-name {
            font-size: 11px;
        }
}

/* Mobile Portrait & Landscape */

@media only screen and (max-width:767px) {
    #browse-projects {
        height: 12px;
        margin: 0 0 10px 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
        border: 0;
        display: none;
    }

    section#browse-projects h2,
    section#browse-projects ul {
        display: none;
    }

    section#browse-projects nav.pagination a {
        top: 0;
    }
}