/*-----------*/
/*-- FONTS --*/
/*-----------*/
@font-face 
{
    font-family : TTCommons;
    font-style : normal;
    font-weight : normal;
    src : url('fonts/TTCommons-Regular.woff') format("woff"),
          url('fonts/TTCommons-Regular.ttf') format("truetype");
}

@font-face 
{
    font-family : TTCommons;
    font-style : normal;
    font-weight : bold;
    src : url('fonts/TTCommons-Bold.woff') format("woff"),
          url('fonts/TTCommons-Bold.ttf') format("truetype");
}

@font-face 
{
    font-family : TTCommons;
    font-style : italic;
    font-weight : normal;
    src : url('fonts/TTCommons-Italic.woff') format("woff"),
          url('fonts/TTCommons-Italic.ttf') format("truetype");
}


/*----------*/
/*-- BASE --*/
/*----------*/
* {
    outline: none;
    -webkit-text-size-adjust: none;
}

html {
    margin: 0;
    padding: 0;
    background: #000 url('../images/body_background.jpg') no-repeat top center fixed;
    background-size: cover;
}

body {
    position: absolute;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    font: 1.2em/1.4em 'TTCommons', sans-serif; /*86%*/
    text-align: center;
    color: #fff;
    display: block;
    background: rgba(0,0,0,1);
}

img {
    border: none;
}

/*-- Modifs W3.CSS --*/
.w3-container { 
    padding-left : 8px; 
    padding-right : 8px; 
}


/*---------*/
/*-- PAGE--*/
/*---------*/

/*-- CONTENANT --*/
#divMain {
    position: relative;
    margin: 0 auto;
    max-width: 1160px;
    text-align: center;
    background-color: #313338;
    border: 1px solid rgba(255,255,255,0.2);
    animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */
}

#divMain > div {
    background-color: #1e1f22;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.75);
}

/*-- MENU --*/
menu {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

menu > div.w3-bar-item {
    padding: 0 !important;
}

menu > div.w3-bar-item:first-child a {
    padding-left: 0 !important;
}

menu > div.w3-bar-item:last-child a {
    padding-right: 0 !important;
}

/*-- CONTENU --*/
#divContent {
    margin: 0 auto 40px auto;
}

/*-- DIAPORAMA --*/
.imgDiaporama {
    display: none;
}

.w3-left, .w3-right, .w3-badge {
    cursor: pointer;
}

.w3-badge {
    height: 13px;
    width: 13px;
    padding: 0
}

/*-- INFOS DU SERVEUR --*/
#divServerInfos div.w3-row {
    position: relative;
    margin: 4px auto;
}

#divServerInfos div.w3-row div.w3-col {
    padding: 4px;
    background-color: #313338;
    border-left: 4px solid #1e1f22;
}

#divServerInfos div.w3-row div.w3-col:first-child {
    border: none;
}

/*-- CONFIG/RÈGLES --*/
#ulRulesConfig {
    list-style-image: url('../images/listitem_icon.png');
}

#ulRulesConfig li {
    margin-left: 16px;
    padding: 0 5px;
    border: none;
}

/*-- BOUTONS --*/
div.divLinkButton {
    margin: 10px auto;
    border: 2px solid #fff;
}

div.divLinkButton a {
    text-decoration: none;
}

/*-- PIED-DE-PAGE --*/
footer {
    font-size: 0.8em;
}


/*----------------*/
/*-- Responsive --*/
/*----------------*/

/*-- CSS [Small] --*/
@media only screen and (min-device-width : 320px) and (max-device-width : 600px) {
    html { background-image : none; }

    #lnkGS4U {
        margin-top: 10px;
    }
}

/*-- CSS [Medium] --*/
@media only screen and (min-device-width : 750px) and (max-device-width : 992px) {
    html { background-image : none; }
}

/*-- CSS [Large] --*/
@media (min-width:992px) {
    body {
        animation: fadein 2s;
        -moz-animation: fadein 2s; /* Firefox */
        -webkit-animation: fadein 2s; /* Safari and Chrome */
        -o-animation: fadein 2s; /* Opera */
    }

    #divMain {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
    }
}


/*----------------*/
/*-- Animations --*/
/*----------------*/
@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadein { /* Firefox */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-o-keyframes fadein { /* Opera */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}