/**
 * @author        Jacques Bodin-Hullin <http://www.bodin-hullin.net>
 * @copyright     (C) 2009 Jacques Bodin-Hullin
 * @license       All rights reserved
 */

/**
 * Body
 */
body {
    font-family:        'Times New Roman', Verdana, Helvetica, Arial, Sans-serif;
    color:              $txt-color;
    background-color:   #fffcf3;
}

/**
 * Tooltik
 */
#tooltip {
    position:           absolute;
    display:            none;
}

/**
 * Enveloppe principale
 */
#mainWrap {
    width:              950px;
    margin:             0 auto 0 auto;
    text-align:         left;
}

/**
 * Header
 * & Espace client
 */
#headerWrap {
    position:           relative;
    width:              100%;
    background:         url(../img/header.png) no-repeat 1px 15px;
    height:             95px;
    border-bottom:      5px solid #292e10;
    h1,
    p {
        text-indent:    -999999px;
        position:       absolute;
        top:            -999999px;
    }
    a {
        float: left;
        width: 375px;
        height: 58px;
        margin: 15px 0 0 1px;
    }
}

/**
 * Magento Certified
 */
#magento_certified {
    height: 80px;
    position: absolute;
    top: 8px;
    left: 750px;
    width: 200px;
    a {
        display: block;
        height: 80px;
        width: 45px;
        margin: 0;
    }
    .developer {
        background: url(../img/magento_developer.png) top left no-repeat transparent;
        margin-right: 5px;
    }
    .developer-plus {
        background: url(../img/magento_developer_plus.png) top left no-repeat transparent;
        margin-right: 5px;
    }
    .frontend-developer {
        background: url(../img/magento_frontend_developer.png) top left no-repeat transparent;
    }
    .solution-specialist {
        background: url(../img/magento_solution_specialist.png) top left no-repeat transparent;
        margin-right: 5px;
    }
}

/**
 * Forum PHP
 */
#forumphp {
    height: 80px;
    position: absolute;
    top: 8px;
    left: 400px;
    width: 364px;
    a {
        display: block;
        margin: 5px 0 0 0;
        width: 200px;
        img {
            width: 550px;
        }
    }
}


/*
#loginWrap {
    background:         url(../img/espace_client.png) left bottom no-repeat #454d1b;
    width:              280px;
    float:              right;
    text-align:         right;
    height:             auto !important;
    height:             30px;
    min-height:         30px;
    padding-right:      20px;
    position:           absolute;
    margin-left:        650px;
    z-index:            20;
}

#loginWrap h5 {
    font-size:          1em;
    float:              left;
    font-style:         italic;
    font-weight:        bold;
    line-height:        25px;
    margin-left:        20px;
    letter-spacing:     1px;
    color:              #FFFFFF;
}

#loginWrap a {
    color:              #FFFFFF;
    line-height:        25px;
}

#loginWrap form {
    text-align:         left;
    padding-left:       30px;
    padding-bottom:     10px;
    display:            none;
}

#loginWrap form p {
}

#loginWrap form label {
    display:            block;
    color:              #FFFFFF;
    font-style:         italic;
    font-size:          1.2em;
    margin-top:         15px;
    letter-spacing:     1px;
    padding:            0 0 5px 10px;
}

#loginWrap form input.text {
    border:             1px solid #3b4217;
    padding:            2px;
    font-size:          13px;
    font-family:        'Times New Roman', Verdana, Helvetica, Arial, Sans-serif;
    height:             17px;
    line-height:        17px;
    width:              225px;
}

#loginWrap form p.send {
    text-align:         center;
    margin-top:         15px;
}

#loginWrap form p.send input {
    background:         url(../img/login_send.png) no-repeat top left;
    width:              80px;
    height:             30px;
    color:              #444c1a;
    border:             none;
    font-family:        'Times New Roman', Verdana, Helvetica, Arial, Sans-serif;
    font-size:          1.2em;
}

#loginWrap p.close {
    text-align:         right;
    padding-top:        15px;
}
*/

/**
 * Citation
 */
#quoteWrap {
    background:         url(../img/banniere.png) top left no-repeat;
    height:             85px;
    border-bottom:      1px solid #25290e;
    padding:            15px 0 0 250px;
}

#quoteWrap p {
    font-weight:        bold;
    font-style:         italic;
    font-size:          1.3em;
    color:              #444c1a;
    width:              450px;
    letter-spacing:     1px;
}

#quoteWrap p:before {
    content:            "“";
}

#quoteWrap p:after {
    content:            "”";
}

#quoteWrap cite {
    font-style:         italic;
    font-size:          1.3em;
    color:              #444c1a;
    padding-left:       10px;
}

/**
 * Menu
 */
#menu, .menu-wrapper {
    height:             45px;
    margin-bottom:      20px;
}

#menu {
    background:         url(../img/menu_fond.png) top left repeat-x;
    padding-left:       20px;
    overflow:           hidden;
    width:              930px;

    &.affix {
        position: fixed;
        top: 0;
        z-index: 99999;
    }

    .search {
        float: right;
        padding-right: 12px;
    }

    li {
        line-height:        45px;
        font-style:         italic;
        font-size:          1.3em;
        float:              left;
        list-style:         none;
        letter-spacing:     1px;

        &.current a, a:hover {
            background:         url(../img/bord_droit_menu_hover.png) right 8px no-repeat;
            text-decoration:    none;

            span {
                background:         url(../img/bord_gauche_menu_hover.png) left 8px no-repeat;
            }
        }

        a {
            color:              #FFFFFF;
            display:            block;
            float:              left;
            padding:            0 25px 0 0;
            outline:            none;

            span {
                display:            block;
                float:              left;
                width:              3px;
                height:             45px;
                margin-right:       22px;
            }
        }
    }
}

/**
 * Link to Monsieur Biz
 */
#topWrap {
    div.mbiz {
        border: 1px solid #BBD367;
        padding: 5px;
        width: 938px;
        text-align: center;
        p {
            background-color: #F2F4D1;
            width: 100%;
            a {
                display: block;
                width: 100%;
                padding-top: 10px;
                padding-bottom: 10px;
                color: $txt-color;
                position: relative;
                img {
                    position: absolute;
                    top: 0px;
                    height: 35px;
                }
                span {
                    padding-left: 45px;
                }
            }
        }
    }
}
.notfound #topWrap div.mbiz {
    display: none;
}

/**
 * Sidebar
 */
#sideWrap {
    width:              290px;
    float:              right;
    color:              #292e10;
    text-align:         justify;
    margin-bottom:      40px;
    p {
        font-size:          1.1em;
    }
    img {
        display:            block;
        padding:            5px;
        border:             1px solid #bbd367;
        margin:             0 auto 5px;
    }
    .service {
        width:              265px;
        float: none;
        clear: both;
        img {
            display:            block;
            padding:            0;
            border:             none;
            margin:             0 2px 0 0;
        }
    }
    ul {
        padding-left:       15px;
        li {
            line-height: 20px;
        }
    }
    .tags {
        a {
            color: #292E10;
            :hover {
                text-decoration: underline;
            }
        }
    }
    .infos {
        strong {
            float: right;
            font-weight: normal;
        }
    }
    .me {
        margin-top: 20px;

        img {
            border-color: transparent;
        }
    }
}

/**
 * Contenu
 */
#contentWrap {
    width:              620px;
    float:              left;
    margin-bottom:      40px;
    ul, ol {
        padding-left:       35px;
        li {
            font-size: 1.1em;
            line-height: 20px;
            p {
                padding: 0;
            }
        }
    }
    p {
        padding: 5px;
        font-size: 1.1em;
    }
}

.pagination {
    text-align: center;
}

/**
 * Bas de page
 */
#bottomWrap {
    height: 390px;
    clear: both;
}

/**
 * Contact
 */
#contactWrap {
    clear:              both;
    background:         url(../img/fleur_footer.png) 420px bottom no-repeat #f5f5d6;
    height:             260px;
    padding:            0 20px 0;
    margin-top:         20px;
    border-top:         5px solid #000000;
    width:              910px;
    overflow:           visible;
    form {
        width:              390px;
        float:              left;
        h3 {
            margin-bottom:      10px;
        }
        p {
            padding-bottom:     2px;
        }
        label {
            display:            block;
            width:              75px;
            float:              left;
            line-height:        21px;
            font-size:          1.1em;
        }
        input.text, textarea {
            border:             1px solid #d9d9c5;
            padding:            2px;
            font-size:          13px;
            font-family:        'Times New Roman', Verdana, Helvetica, Arial, Sans-serif;
        }
        input.text {
            height:             17px;
            line-height:        17px;
            width:              306px;
        }
        textarea {
            width:              306px;
            height:             100px;
        }
        p.send {
            text-align:         center;
            padding-left:       75px;
            padding-top:        5px;
            input {
                background:         url(../img/contact_send.png) no-repeat top left;
                width:              104px;
                height:             30px;
                color:              white;
                border:             none;
                font-family:        'Times New Roman', Verdana, Helvetica, Arial, Sans-serif;
                font-size:          1.2em;
            }
        }
    }
    div.qrcode {
        width:              270px;
        float:              right;
        p {
            text-align:         center;
        }
    }
}


/**
 * Footer
 */
#footerWrap {
    clear:              both;
    background:         #444c1a;
    height:             60px;
    line-height:        60px;
    text-align:         right;
    font-size:          1.1em;
    color:              #FFFFFF;
    letter-spacing:     10px;
    padding-right:      20px;
    margin-bottom:      50px;
    a {
        color:              #FFFFFF;
        font-style:         italic;
        letter-spacing:     1px;
        margin-right:       10px;
    }
    .social {
        float: left;
        margin: 5px 20px;
    }
    .copy {
        color: $txt-color;
        letter-spacing: 2px;
    }
}



#contentWrap blockquote {
    padding-left: 10px;
    margin: 15px 0 15px 10px;
    border-left: 3px solid $border-color;
    color: lighten(#292E10, 15%);
}

/**
 * 404
 */
.notfound {
    #headerWrap {
        border-bottom: none;
    }
    #menu {
        margin-bottom: 0;
    }
    #bottomWrap {
        height: 60px;
    }
    #lost {
        background: transparent url(../img/lost.png) center center no-repeat;
        width: 950px;
        height: 382px;
        position: relative;
        .msg {
            display: block;
            font-weight: bold;
            font-size: 2em;
            position: absolute;
            top: 227px;
            left: 155px;
        }
    }

    #quoteWrap, #contactWrap {
        display: none;
    }
}