/* --------------------------- */
/*  Général
/* --------------------------- */

body
{
    background: #feebb0 url(../images/background.png) repeat-y;
    margin: 0;
    padding: 0;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    color: #82502b;
}

#message
{
    border: 1px dashed #b38d82;
    background: #ffece6;
    text-align: center;
    margin: 15px 30px 15px 30px;
    padding: 10px;
    box-shadow: 0px 0px 5px #b38d82;
}

#error
{
    border: 1px dashed #5a0f0f;
    background: #ffece6;
    color: #a60000;
    text-align: center;
    margin: 15px 30px 15px 30px;
    padding: 10px;
    box-shadow: 0px 0px 5px #b38d82;
}

strong
{
    color: #89410b;
}

a, .link
{
    color: #8F5B34;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

a > img
{
    border: 0;
}

a:hover, .link:hover
{
    color: #D55E17;
}

table thead td
{
    background: url(../images/news-background.gif) repeat-x 50%;
    padding: 10px;
    border-bottom: 1px solid #dcb7a1;
    font-weight: bold;
}

/* --------------------------- */
/*  Header
/* --------------------------- */
#top-menu
{
    width: 1120px;
    height: 27px;
    background: url(../images/top-menu.png) no-repeat;
    position: fixed;
    top: 0;
    left: 50%;
    margin-left: -560px;
    z-index: 100;
}

#top-menu #top-menu-content
{
    margin-top: 1px;
    width: 900px;
    margin-left: 110px;
}

#top-menu #logout
{
    display: block;
    float: right;
    background: url(../images/logout.gif);
    width: 94px;
    height: 15px;
    margin-left: 5px;
    margin-top: 2px;
}

#top-menu #top-menu-bouton {
    display: block;
    float: left;
    margin: 2px 10px 0 10px;
    width: 120px;
    height: 15px;
    background : url(../images/bouton-top-astuce.png) no-repeat;
}

#top-menu span
{
    font-size: 12px;
    position: relative;
    top: 2px;
    margin-left: 50px;
}

#header
{
    background: url(../images/header.png) no-repeat top center;
    height: 360px;
    z-index: -1;
}

#header #header-content
{
    width: 900px;
    margin: auto;
}

#header #header-content #anim
{
    width: 354px;
    height: 215px;
    position: relative;
    top: 15px;
    left: -45px;
}

#header #header-advert
{
    width: 728px;
    height: 90px;
    position: relative;
    top: 0;
    left: 50%;
    margin: 49px 0 0 -353px;
}

/* --------------------------- */
/*  Content
/* --------------------------- */

#content
{
    width: 935px;
    margin: auto;
    background: url(../images/content.png) repeat-y;
    overflow: hidden;
}

.hidden
{
    display: none;
}

/* Left Menu */

#content #left
{
    width: 164px;
    float: left;
    margin-left: 17px;
}

#content #left #site-du-jour
{
    width: 164px;
    height: 51px;
    background : url(../images/menu-site-du-jour.png) no-repeat;
}

#content #left #site-du-jour + div
{
    background: url(../images/menu-background.png) repeat-y;
    width : 163px;
    padding-top: 5px;
}

#content #left #site-du-jour + div > div
{
    margin-left: 11px;
    width: 141px;
}

#content #left #le-site
{
    width: 164px;
    height: 56px;
    background : url(../images/menu-le-site.png) no-repeat;
}

#content #left #gagner-sur-le-net
{
    width: 164px;
    height: 56px;
    background : url(../images/menu-gagner-sur-le-net.png) no-repeat;
}

#content #left #s-amuser
{
    width: 164px;
    height: 56px;
    background : url(../images/menu-s-amuser.png) no-repeat;
}

#content #left #gagner-des-codes
{
    width: 164px;
    height: 56px;
    background : url(../images/menu-gagner-des-codes.png) no-repeat;
}

#content #left #menu-bottom
{
    width: 164px;
    height: 23px;
    background : url(../images/menu-bottom.png) no-repeat;
}

#content #left div > ul
{
    background: url(../images/menu-background.png) repeat-y;
    margin: 0;
    padding: 0;
    width : 163px;
    list-style: none;
}

#content #left div > ul > li
{
    display: block;
    background: url(../images/menu-item.png);
    width : 153px;
    height: 22px;
    margin-left: 5px;
}

#content #left div > ul > li > a
{
    position: relative;
    left: 20px;
    top: 4px;
    color: #8f5b34;
    font-weight: bold;
    text-decoration: none;
}

#content #left div > ul > li > a:hover
{
    color: #d55e17;
}

/* Right content */

#content #right
{
    width: 737px;
    float: right;
    margin-right: 17px;
}

#content #right #content-top
{
    background: url(../images/content-right-top.png) no-repeat;
    width: 737px;
    height: 31px;
}

#content #right #content-bottom
{
    background: url(../images/content-right-bottom.png) no-repeat;
    width: 737px;
    height: 17px;
}

#content #right #content-body
{
    background: url(../images/content-right.png) repeat-y;
    padding: 5px 35px;
}

/* Titres */

#content #right #content-body h1:first-child
{
    margin-top : 0px;
}

#content #right h1, #website h2, #profile h2
{
    display: block;
    background: url(../images/titre.png);
    width: 669px;
    height: 57px;
}

#content #right #website-top h1
{
    display: block;
    background: none;
    height: 20px;
    text-transform : uppercase;
}

#content #right h1 img, #website h2 img, #profile h2 img
{
    margin-left: 85px;
}

#website > h1, #website > h3, #proposal h2, #website > h1, #admin h2, #admin h3
{
    background: url(../images/arrow.gif) no-repeat center left !important;
    margin-top: 20px !important;
    padding-left: 20px;
}

#website .arrow
{
    background: url(../images/arrow.gif) no-repeat center left !important;
    margin-top: 20px !important;
    padding-left: 20px;
}

.news .news-title h3, .trick .trick-title h3
{
    background: url(../images/arrow.gif) left no-repeat;
    margin: 0 0 5px -22px;
    padding-left: 22px;
}

/* News, Astuces*/

.news, .trick
{
    width: 669px;
}

.news .news-title, .trick .trick-title
{
    background: url(../images/news-background.gif) repeat-x;
    height: 40px;
    border-bottom: 2px dotted #dcb7a1;
    padding-left : 22px;
    padding-top: 5px;
}

.news .news-title > span
{
    font-style: italic;
}

.news-title h3 > span, .news-title h3 > span > a
{
    color: #794117;
}

.trick .trick-title h3
{
    margin-top: 10px;
    font-size: 16px;
}

.news .screenshot
{
    width: 146px;
    height: 141px;
    background-image: url(../images/full-screenshot.png);
    padding: 20px 0 0 10px;
    float: right;
    margin-left: 20px;
}

/* Screenshots */

.screenshot-link
{
    width: 140px;
    height: 120px;
}

.screenshot-link a
{
    position: absolute;
    width: 138px;
    height: 118px;
    overflow: hidden;
}

.screenshot-link img
{
    position: absolute;
    border: 4px solid #ffd9cf;
    border-radius: 3px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.screenshot-link:hover img
{
    border-color: white;
}

.screenshot-link:hover span
{
    margin-top: 87px;
}

.screenshot-link span
{
    background: rgba(255, 255, 255, 0.75);
    color: #9d410b;
    display: block;
    text-align: center;
    padding-top: 5px;
    height: 22px;
    position: absolute;
    width: 130px;
    margin: 120px 0 0 4px;
    -webkit-transition: margin 0.3s ease-in-out;
    -moz-transition: margin 0.3s ease-in-out;
    transition: margin 0.3s ease-in-out;
}

/* Ranking */

#content #right #ranking-ad
{
    text-align: center;
    margin: 15px 0 15px 0;
}

.website
{
    background: url(../images/website.png) no-repeat;
    height: 222px;
    width: 699px;
    margin: 0 0 25px -15px;
    overflow: hidden;
}

.website h2
{
    margin: 6px 0 0 35px;
    font-size: 18px;
}

.website h2 > a
{
    font-weight: normal !important;
}

.website div:first-child
{
    float: right;
    width: 95px;
    height: 20px;
    margin: 11px 14px 0 0;
}

.website div:first-child img
{
    margin-right: 2px;
}

.website > a > img
{
    border: 0;
    width: 130px;
    height: 110px;
    float: left;
    margin: 30px 0 25px 37px;
    border-radius: 3px;
    -webkit-transition: box-shadow 0.2s ease-in-out;
    -moz-transition: box-shadow 0.2s ease-in-out;
    transition: box-shadow 0.2s ease-in-out;
}

.website > a > img:hover
{
    box-shadow: 0px 0px 16px #f68556;
}

.website p
{
    width: 480px;
    height: 130px;
    margin: 30px 20px 0 200px;
}

.website .coup-de-coeur
{
    display: block;
    margin: 10px 0 5px 0;
}

.website .coup-de-coeur img
{
    vertical-align: middle;
}

.website p+div
{
    float: right;
    margin: 0 10px 10px 0;
}

.website p+div  a, #website table+div a
{
    display: block;
    float: right;
}

.website p+div a.fiche, #website table+div a.fiche
{
    background: url(../images/bouton-fiche.png) 0 0 no-repeat;
    width: 77px;
    height: 21px;
}

.website p+div a.fiche:hover, #website table+div a.fiche:hover
{
    background-position: -77px 0;
}

.website p+div a.astuces, #website table+div a.astuces
{
    background: url(../images/bouton-astuces.png) 0 0 no-repeat;
    width: 83px;
    height: 21px;
}

.website p+div a.astuces:hover, #website table+div a.astuces:hover
{
    background-position: -83px 0;
}

.website  p+div a.visiter, #website table+div a.visiter
{
    background: url(../images/bouton-visiter.png) 0 0 no-repeat;
    width: 77px;
    height: 21px;
}

.website p+div a.visiter:hover, #website table+div a.visiter:hover
{
    background-position: -77px 0;
}

/* Website */

#website h1
{
    background: none !important;
}

#website > h1
{
    height: 30px !important;
}

#website #website-top, #website #website-top+div, #website #website-bottom
{
    margin-left: -15px;
}
#website #website-top
{
    width: 699px;
    height: 48px;
    background: url(../images/website-top.png) no-repeat;
}

#website #website-top h1
{
    position: relative;
    top: 8px;
    left: 35px;
    padding: 0;
    font-size: 16px;
}

#website #website-top+div
{
    background: url(../images/website-content.png) repeat-y;
    width: 699px;
    min-height: 160px;
}

#website #website-top+div table
{
    margin: 0 0 0 200px;
    list-style: none;
    width: 480px;
    padding-left: 0;
    padding-bottom: 40px;
}

#website #website-top+div table tr td
{
    padding-top: 5px;
}

#website #website-top+div table tr td:first-child
{
    font-weight: bold;
    width: 150px;
}

#website #website-top+div ul span
{
    font-weight: normal;
    margin-left: 10px;
}

#website #website-top+div .screenshot
{
    width: 157px;
    height: 152px;
    background: url(../images/screenshot.png);
    float: left;
    margin-left: 28px;
}

#website #website-top+div .screenshot img
{
    width: 130px;
    height: 110px;
    float: left;
    margin: 10px 0 25px 9px;
    border-radius: 3px;
}

#website table+div
{
    float: right;
    margin: -15px 10px 10px 0;
}

#website table+div a.description
{
    background: url(../images/bouton-description.png) 0 0 no-repeat;
    width: 93px;
    height: 21px;
}

#website table+div a.description:hover
{
    background-position: -93px 0;
}

#website table+div a.actualite
{
    background: url(../images/bouton-actualite.png) 0 0 no-repeat;
    width: 86px;
    height: 21px;
}

#website table+div a.actualite:hover
{
    background-position: -86px 0;
}

#website-bottom
{
    width: 699px;
    height: 14px;
    background: url(../images/website-bottom.png) no-repeat;
    margin-bottom: 15px;
}

#website .link
{
    list-style-type: none;
    line-height: 140%;
    margin: 5px 0 0 0;
}

#website .link img
{
    vertical-align: middle;
    display: inline-block; 
}

#website #presentation-hidden
{
    display: none;
}

/* Lexique */

#lexique ul li span
{
    font-weight: bold;
    color: #89410b;
}

#lexique ul li p
{
    display: block;
    margin: 10px 0px 20px 5px;
    padding-left: 10px;
    text-align: justify;
    border-left: 3px solid #d5a27c;
}

#website #lexique ul li span
{
    font-size: 14px;
    color: #8f5b34;
}

#lexique div > span
{
    display: block;
    width: 650px;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
}

#lexique > span
{
    display: block;
    width: 650px;
    text-align: center;
    margin-bottom: 20px; 
}

#lexique > span a
{
    font-size: 12px;
    font-weight: bold;
}

#lexique div
{
    border-bottom: 1px solid #82502b;
    margin-top: 15px;
}

#lexicon-show span
{
    font-weight: bold;
}

#lexicon-show p
{
    margin: 10px 0px 20px 5px;
    padding-left: 10px;
    text-align: justify;
    border-left: 3px solid #d5a27c;
}

#lexicon ul li
{
    line-height: 160%;
}

/* Comments */

.comment span
{
    display: block;
    width: 669px;
    padding-bottom: 5px;
    border-bottom: 1px dashed #dcb7a1;
    background: url(../images/news-background.gif) repeat-x 50%;
    font-style: italic;
}

.comment span img
{
    margin-left: 5px;
    position: relative;
    top: 5px;
}

.comment p
{
    text-align: justify;
    margin-left: 20px;
    padding-left: 10px;
    border-left: 2px solid #d5a27c;
}

.comment .mark
{
    float: right;
    margin: 2px 5px 0 0;
}

/* Pagination */

.pagination
{
    margin: 20px 0 0 0;
    text-align: right;
}

.pagination a
{
    display: inline-block;
    background-color: #ffd9cf;
    text-align: center;
    width: 25px;
    height: 20px;
    padding-top: 5px;
    text-decoration: none;
}

.pagination span
{
    display: inline-block;
    text-align: center;
    width: 25px;
    height: 20px;
    padding-top: 5px;
    text-decoration: none;
}

.pagination a:hover
{

}

/* Profil, Admin*/

#profile  #infos table
{
    border: none;
    text-align: left;
    background: #fffaf9;
    border: 3px double #dcb7a1;
}

#profile  #infos table td, #profile  #infos table th
{
    border: none;
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid transparent;
}

#profile table, #admin table
{
    margin: 10px 0;
    border-collapse: collapse;
    border: 3px double #dcb7a1;
}

#profile table td, #admin table td
{
    border-right: 1px dashed #dcb7a1;
    border-bottom: 1px solid #fee3d3;
    padding: 5px;
    text-align: center;
}

#profile table thead td, #admin table thead td
{
    background: url(../images/news-background.gif) repeat-x 50%;
    width: 669px;
    border-bottom: 1px solid #dcb7a1;
    font-weight: bold;
}

#profile table tbody td, #admin table tbody td
{
    background: #fffaf9;
}

#admin #position
{
    width: 50px;
}

#admin #action
{
    width: 250px;
}

/* Coup de coeur */

#favorites-top
{
    width: 672px;
    height: 61px;
    background: url(../images/favorites-top.png) no-repeat;
}

#favorites-bottom
{
    width: 672px;
    height: 22px;
    background: url(../images/favorites-bottom.png) no-repeat;
}

#favorites
{
    width: 672px;
    background: url(../images/favorites.png) repeat-y;
    overflow: hidden;
    padding-left: 17px;
    padding-top: 10px;
}

#favorites > div
{
    float: left;
    margin: 0 10px 10px 9px;
}

#favorites > div > div
{
    text-align: center;
    width: 141px;
}

/* Codes gratuits */

#code-gratuit
{
    position: absolute;
    width: 351px;
    height: 207px;
    background-image: url('../images/code-cache.png');
    margin: -40px 0 0 500px;
    text-align: center;
}

#code-gratuit > a:first-child
{
    position: absolute;
    margin: 30px 0 0 250px;
}

#code-gratuit span
{
    display: block;
    margin: 45px 0 0 0;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
}


/* Bannières */
.banner
{
    text-align: center;
    padding: 10px;
    border: 1px dashed #b38d82;
    margin-top: 20px;
}

/* --------------------------- */
/*  Footer
/* --------------------------- */
#footer
{
    background: url(../images/footer.png);
    width: 935px;
    margin: auto;
    text-align: center;
    padding-top: 15px;
    min-height: 109px;
}

#footer > div
{
    margin-top: 5px
}


#partner-footer
{
    margin: 0 auto;
    width: 800px;
}

#partner-footer > div:last-child
{
    clear: both;
    padding-bottom: 20px;
}

#partner-footer h3
{
    font-size: 13px;
    text-align: center;
}

#partner-footer ul
{
    margin: 10px 0 0 90px;
}

#partner-footer li
{
    display: block;
    background: url('../images/link-partner.png') no-repeat 0 50%;
    padding: 0 0 0 13px;
    width: 120px;
    float: left;
}

#partner-footer li[float="left"] + li
{
    float: none;
}

#partner-footer li > a
{
    font-size: 11px;
    font-weight: normal;
}

#partner-footer > p
{
    clear: both;
    padding: 15px 0 20px 0;
}

#seo
{
    border: 1px solid #edab58;
    padding: 10px;
    position: fixed;
    top: 50px;
    left: 15px;
    background-color: #fff5f1;
    opacity: 0.8;
}

#seo h1
{
    font-size: 18px;
    margin: 5px;
}

#seo h2
{
    font-size: 14px;
    margin: 5px;
}

/* --------------------------- */
/*  Formulaires
/* --------------------------- */

#content form > div > div
{
    margin-top: 10px;
    padding-left: 175px;
}

#content form > div > div > div > div
{
    margin-top: 10px;
}

#content form label
{
    position: absolute;
    margin: 3px 0 0 -175px;
}

/* Formulaire gestion seo */

#seo form > div > div
{
    padding-left: 115px;
}

#seo form label
{
    position: absolute;
    margin: 3px 0 0 -115px;
}

#seo input
{
    width: 300px;
    color: #82502b;
}

#seo textarea
{
    width: 300px;
    height: 70px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 13px;
    color: #82502b;
}

/* Formulaire de login en haut de page */

#top-menu form
{
    float: right;
    font-size: 11px;
    font-weight: bold;
    padding: 0;
    margin: 0;
}

#top-menu form label
{
    margin-left: 10px;
}

#top-menu input[type="text"], #top-menu input[type="password"]
{
    height: 11px;
    width: 90px;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #ffc3a2;
    background-color: #844d25;
    border: 1px solid #b67b23;
}

#top-menu input[name="login"]
{
    background: url(../images/login.gif) no-repeat;
    width: 36px;
    height: 15px;
    border: none;
    padding: 0;
    position: relative;
    top: 2px;
}

/* Propositions */

.proposal
{
    margin-bottom: 20px;
}

.proposal input[type="text"], .proposal input[type="url"], 
.proposal input[type="password"], .proposal input[type="number"], .proposal input[type="email"]
{
    width: 250px;
    height: 25px;
    padding-left: 8px;
    border: 1px solid #b67b23;
    color: #82502b;
    outline: 0;
    background-color: #fffaf8;
}

.proposal select
{
    color: #82502b;
    outline: 0;
    border: 1px solid #b67b23;
    height: 25px;
    background-color: #fffaf8;
}

.proposal textarea
{
    width: 100%;
    height: 150px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 13px;
    border: 1px solid #b67b23;
    color: #82502b;
    outline: 0;
    padding: 5px;
    background-color: #fffaf8;
}

.proposal input:focus, textarea:focus, input:hover, textarea:hover
{  
    box-shadow: 0px 0px 8px #faa582;
}

/* Boutons */

input[type="submit"], button[type="submit"]
{
    border: none;
    cursor: pointer;
}

.ajouter
{
    background: url(../images/bouton-ajouter.png) 0 0 no-repeat;
    width: 78px;
    height: 21px;
}

.ajouter:hover
{
    background-position: -78px 0;
}

.modifier
{
    background: url(../images/bouton-modifier.png) 0 0 no-repeat;
    width: 86px;
    height: 21px;
}

.modifier:hover
{
    background-position: -86px 0;
}

.supprimer
{
    background: url(../images/bouton-supprimer.png) 0 0 no-repeat;
    width: 90px;
    height: 21px;
}

.supprimer:hover
{
    background-position: -90px 0;
}

.valider
{
    background: url(../images/bouton-valider.png) 0 0 no-repeat;
    width: 79px;
    height: 21px;
}

.valider:hover
{
    background-position: -79px 0;
}

#content #right .right
{
    float: right;
    margin: 20px 100px 0 0;
}

div.imgintxt {display:block; max-width:100%; clear:both;}
div.imgintxt img {display:block; max-width:100%; margin:0 auto;}
div.imgintxt div {float:none; text-align:center; border:1px #ccc solid; padding:5px; margin:5px auto 0;}
div.floatleft {float:left; margin:8px 10px 0 0;}
div.floatright {float:right; margin:8px 0 0 10px;}
div.floatnone {float:none; margin:5px auto 10px;}

div#content-body ul {
	margin:10px 0; list-style:none; padding:0; margin-left:20px;
}
div#content-body ul li {
	 background:url(../images/arrow.gif) no-repeat; padding:0 0 0 20px; margin:0 0 7px 0;
}