@import 'var.less';
header, footer, article, section, nav, menu, figure, video, aside, hgroup {.block;}
figcaption, address {.hidden;}
body {
margin: 0; padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 82%;
background: @backgrey url('../skins/img/bg_body.png') repeat-x top left;
color: @gris;
}
body * {outline:none;}
a {text-decoration: none;}
a img {border: none;}
ul, ol {margin: 0; padding: 0; list-style: none; list-style-image: none;}

.fancy {cursor: url('../javascript/fancybox/zoomin.cur'), pointer;}
.bouton {
padding: 4px 15px;
border: 1px solid #3c3c3c;
box-shadow: 0 0 5px #111;
color: #a8a8a8;
cursor: pointer;
}
a.bouton:hover, input.bouton:hover {
border: 1px solid #4c4c4c;
box-shadow: 0 0 5px #333;
}

#wrapper {
background: url('../skins/img/bg_wrapper.png') no-repeat top center;
    > header {
    background: url('../skins/img/header.png') no-repeat top center;
    height: 150px;
    width: 1221px;
    margin: 0 auto;
        #frmSearch {
        float: right;
        width: 225px; height: 45px;
        padding: 7px 10px 7px 55px;
        background: url('../skins/img/frmRecherche.png') no-repeat top right;
            input.bouton {
            padding: 4px 5px;
            width: 33px;
            background: @backgrey;
            }
            input#q {
            border: none;
            background: #202020;
            text-align: center;
            color: #7d7c7c;
            padding: 5px;
            margin-right: 8px;
            width: 170px;
            }
        }
        > a {
       .alignleft;
        width: 225px; height: 114px;
        background: url('../skins/img/header_h1.png') no-repeat top left;
        }
        nav {
        clear: both;
        height: 34px;
        position: relative;
        border-top: 1px solid #363636;
        border-bottom: 1px solid #000;
        background: url('../skins/img/topmenu.png') repeat-x top left;
            ul {
            .wrap;
            height: 34px;
                li {
                .alignleft;
                background: url('../skins/img/li_topmenu.png') no-repeat top right;
                padding-right: 7px;
                    a {
                    color: #a1a1a1;
                    //*padding: 0 32px 0 25px;*/
                    padding: 0 37px 0 30px;
                    line-height: 34px;
                    .alignleft;
                    font-size: 1.1em;
                        &#lnk_home {
                        width: 13px;
                        .notext;
                        background: url('../skins/img/picto_home.png') no-repeat top center;
                            &:hover, &.selected {background-position: bottom center;}
                        }
                        &:hover, &.selected {
                        .blanc;
                        }
                    }
                }
            }
            #flag_en {background: url('../skins/img/flag_en.png') no-repeat top left; right: 35px}
            #flag_es {background: url('../skins/img/flag_es.png') no-repeat top left; right: 0;}
            #flag_en, #flag_es {
            .notext;
            .hidden; // TEMP
            position: absolute;
            width: 25px; height: 15px;
            .alignright;
            margin: 8px 10px 0 0;
                &:hover {background-position: bottom left;}
            }
        }
    }
    > section {
    .wrap;
    background: @darkgrey url('../skins/img/ombre_wide.png') no-repeat bottom center;
    padding-bottom: 10px;
    border-top: 1px solid #373737;
    width: 1221px;
    margin: 0 auto;
    min-height: 430px;
    height: auto !important;
    height: 430px;
        #main_line {
        position: absolute;
        background: url('../skins/img/main_line.png') no-repeat top center;
        height: 7px; width: 1221px;
        }
        
        > article {
        background: @darkgrey;
        .alignleft;
             > aside {
            background: #252424;
            .alignleft;
                nav {
                background: #313030;
                border-top: 1px solid #3e3e3e;
                    > ul {
                        > li {
                        background: url('../skins/img/ombre_li_nav.png') no-repeat top left;
                        padding-left: 21px;
                        border-bottom: 1px solid #3e3e3e;
                            > a {
                            .block;
                            color: @gris;
                            padding: 14px 12px 10px 22px;
                            text-transform: uppercase;
                            background: url('../skins/img/li_nav.png') no-repeat left center;
                                &:hover, &.selected {
                                background-position: right center;
                                .blanc;
                                }
                            }
                        }
                        ul {
                        background:#2f2f2f;
                        border-bottom: 1px solid #3e3e3e;
                        padding: 3px 0;
                            li a {
                            color: #6e6d6d;
                            .block;
                            padding: 4px 12px 4px 22px;
                                &.selected, &:hover {
                                background: #2a2a2a;
                                color: #9e9d9d;
                                }
                            }
                        }
                    }
                }
                #cata_left {
                height: 48px;
                .centre;
                padding-top: 215px;
                background: url('../skins/img/cata_left.jpg') no-repeat top center;
                }
            }
        }
    }
}
footer {
width: 1221px;
clear: both;
margin: 30px auto 0;
padding: 0 13px;
.wrap;
background: url('../skins/img/bg_footer.png') no-repeat top center;
    #bloc_coord {
    background: @backgrey;
    .alignleft;
    width: 210px; height: 166px;
    .centre;
    padding: 12px;
    }
    nav {
    background: @darkgrey;
    .alignleft;
    width: 937px;
    padding: 25px;
        #frmNewsletter {
        .alignright;
        width: 230px;
            h3 {
            width: 166px; height: 16px;
            margin: 0 0 13px;
            .notext;
            background: url('../skins/img/h3_newsletter.png')no-repeat top left;
            }
            #text_newsletter {
            margin-top: 15px;
            background: #2b2b2b;
            .centre;
            padding: 6px;
            border: none;
            color: #7d7c7c;
            margin-right: 10px;
            width: 171px;
            }
            input.bouton {
            padding: 4px 5px;
            width: 33px;
            background: @backgrey;
            }
            div.bouton {
            .wrap;
            padding: 6px 15px;
                strong {.alignleft; padding: 6px 0;}
                 a {
                .alignright;
                width: 28px; height: 28px;
                margin-left: 4px;
                .notext;
                background-repeat: no-repeat;
                background-position: top center;
                    &#facebook {background-image: url('../skins/img/facebook.png');}
                    &#twitter {background-image: url('../skins/img/twitter.png');}
                    &:hover {background-position: bottom center;}
                }
            }
        }
        .bottom_niv1 {
        .alignleft;
        margin: 10px 35px 0;
            > li > a {
            .bold;
            color: #6e6d6d;
            }
            .bottom_niv2 a {
            color: #4f4f4f;
            }
        }
    }
    #credits {
    .alignleft;
    clear: both;
    width: 100%;
    background: url('../skins/img/ombre_wide.png') no-repeat top center;
    .centre;
    margin: 0;
    padding: 15px 0;
        a {
        color: #7d7f7f;
        .bold;
        }
    }
}