﻿
::-moz-selection {
    background: #56b6d0;
    color: #fff;
    text-shadow: none;
}

::selection {
    background: #56b6d0;
    color: #fff;
    text-shadow: none;
}

/* Generic Stuff */
#main {
    width: 100%;
    float: left;
    margin-top: 250px;
    padding: 20px 0 50px;
}

    #main li {
        list-style: none;
    }

.wrap:before, .wrap:after {
    content: "\0020";
    display: block;
    height: 0;
    visibility: hidden;
}

.wrap:after {
    clear: both;
}

.wrap {
    zoom: 1;
    width: 960px;
    margin: 0 auto;
}

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

/* Header */
header {
    text-align: center;
    padding: 70px 0;
    background: rgba(255, 255, 255, 0.66);
}

    header h1 {
        font: 500%/1 Impact, Helvetica, sans-serif;
        text-transform: uppercase;
        margin: 0;
        color: #32364B;
        text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 -1px 0 rgba(0,0,0,.8);
    }

        header h1 em {
            font-style: normal;
            color: #F0D200;
            text-shadow: 0 1px 0 rgba(0, 50, 40, 0.5), 0 -1px 0 rgba(255, 255, 0, 0.8);
        }

    header h2 {
        font-size: 177%;
        font-weight: normal;
        color: #000;
        text-shadow: 0 1px 0 #4C7C7B;
        font-family: "lemonde-courrier-1","lemonde-courrier-2", Helvetica, Arial, sans-serif !important;
    }

        header h2 em {
            font-weight: 700;
        }

/* Main */
#browserlist:before, #browserlist:after {
    content: "\0020";
    display: block;
    height: 0;
    visibility: hidden;
}

#browserlist:after {
    clear: both;
}

#browserlist {
    zoom: 1;
}

    #browserlist li {
        width: 192px;
        float: left;
        margin: 0;
    }

        #browserlist li .icon {
            width: 125px;
            height: 135px;
            margin: 0 auto 20px;
            background: url(../img/browsers.png) no-repeat;
        }

        #browserlist li#chrome .icon {
            background-position: 0 0;
        }

        #browserlist li#firefox .icon {
            background-position: -125px 0;
        }

        #browserlist li#opera .icon {
            background-position: -250px 0;
        }

        #browserlist li#safari .icon {
            background-position: -375px 0;
        }

        #browserlist li#ie .icon {
            background-position: -500px 0;
        }

    #browserlist h2 {
        font: 140%/1 Impact, Helvetica, sans-serif;
        text-align: center;
        text-transform: uppercase;
        color: #DC3228;
        text-shadow: 0 1px 0 #fff;
        background-color: rgba(255,255,255,.3);
        margin: 0 0 10px;
        line-height: 1;
        padding: 8px 0;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

    #browserlist p {
        padding: 0 5px;
        text-shadow: 0 1px 0 rgba(255,255,255,.8);
    }

        #browserlist p.info {
            min-height: 120px;
        }

        #browserlist p.version {
            margin-bottom: 10px;
            text-align: center;
        }

        #browserlist p.website {
            background-color: rgba(255,255,255,.3);
            line-height: 1;
            margin: 0;
            padding: 8px 5px;
            text-align: center;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        }

    #browserlist li a:link, #browserlist li a:visited {
        color: #324B4B;
        padding: 30px 10px 10px;
        display: block;
        overflow: hidden;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

    #browserlist li a:hover {
        background: rgba(255,255,255,.3);
        -webkit-transform: scale(1.05,1.05);
        -moz-transform: scale(1.05,1.05);
        -o-transform: scale(1.05,1.05);
        transform: scale(1.05,1.05);
    }

.no-rgba #browserlist li a:hover {
    background: url(imgs/alphabg.png) repeat;
}

#browserlist li a:hover .website {
    background: #4daaa7;
    color: #fff;
    text-shadow: 0 1px 0 #266E67;
}

#browserlist li a:hover .icon {
    -webkit-transform: scale(1.1,1.1);
    -moz-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);
}

#browserlist li a, #browserlist li a .icon {
    -webkit-transition: all .1s;
    -moz-transition: all .1s;
    -o-transition: all .1s;
    transition: all .1s;
}

    #browserlist li a .website {
        -webkit-transition: all .5s ease-in;
        -moz-transition: all .5s ease-in;
        -o-transition: all .5s ease-in;
        transition: all .5s ease-in;
    }

    #browserlist li a:hover, #browserlist li a:hover .icon {
        -webkit-transition: all .8s;
        -moz-transition: all .8s;
        -o-transition: all .8s;
        transition: all .8s;
    }

    #browserlist li a:link, #browserlist li a:link .icon {
        -webkit-transition: all .2s;
        -moz-transition: all .2s;
        -o-transition: all .2s;
        transition: all .2s;
    }

    #browserlist li a:hover .website {
        -webkit-transition: all .3s ease-out;
        -moz-transition: all .3s ease-out;
        -o-transition: all .3s ease-out;
        transition: all .3s ease-out;
    }

    #browserlist li a:link .website {
        -webkit-transition: all .1s ease-out;
        -moz-transition: all .1s ease-out;
        -o-transition: all .1s ease-out;
        transition: all .1s ease-out;
    }
