<div id="admin-conteneur">
  <div>
      <div id="admin-bienvenue" class="pa_large">
        <h2>Bienvenue, {USERNAME}</h2>
        <div>
            <p><strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Aliquam vehicula ullamcorper lorem, eu pharetra orci tempor ut. Proin blandit sagittis libero, et fringilla libero tempor ut. Cras non vulputate ante. Nam sagittis elit at urna blandit accumsan volutpat orci rutrum. Pellentesque ligula est, condimentum eu cursus et, iaculis quis turpis.</p>
        </div>
      </div><!-- fin bienvenue -->

      <div id="admin-news" class="pa_large">
        <h2>Nouveautés / Annonces</h2>
        <div>
            <p><strong>Aliquam facilisis suscipit erat ac consectetur</strong>. Sed a nibh vitae neque vestibulum ornare. Maecenas feugiat tortor at ligula euismod sit amet molestie nisl viverra. Aliquam eget lorem vitae massa mollis pellentesque.</p>
            <p>Quisque eget odio sapien, non adipiscing eros. Duis convallis ultrices metus adipiscing pellentesque. Aliquam non nulla eget dolor dictum fringilla at in velit.</p>
        </div>
      </div><!-- fin news -->


      <div id="admin-staff" class="pa_moyen">
        <h2>Staff</h2>
        <div>
            <p class="popups">
              <a href="#"><img src="http://img68.xooimage.com/files/f/e/a/8854087592691_min...re_copie-2fd1fbd.png" alt="staff 1" /></a>
              <a href="#"><img src="http://img75.xooimage.com/files/8/f/e/633227kimelavastaff-2fd1fc3.png" alt="staff 2" /></a>
              <a href="#"><img src="http://img71.xooimage.com/files/7/a/b/4756583984031_miniavatartite-2fd1fc7.png" alt="staff 3" /></a>
              <a href="#"><img src="http://img72.xooimage.com/files/b/e/a/4445107384806_min...e_copie2-2fd1fcc.png" alt="staff 4" /></a>
            </p>
        </div>
      </div><!-- fin staff -->

      <div id="admin-recrutement" class="pa_moyen">
        <h2>Recrutement</h2>
        <div>
            <p><strong>Donec lorem purus</strong>, ultricies sit amet laoreet eget, porta rhoncus nibh. Sed nunc augue, molestie <strong>commodo dignissim in</strong>, dictum ac lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
        </div>
      </div><!-- fin recrutement -->

      <div id="admin-partenaires" class="pa_moyen">
        <h2>Partenaires</h2>
        <div>
            <p class="popups">
              <a href="#"><img src="http://img72.xooimage.com/files/9/4/2/info1-2fd1f40.png" alt="partenaire 1" /></a>
              <a href="#"><img src="http://img72.xooimage.com/files/3/e/5/info2-2fd1f9b.png" alt="partenaire 2" /></a>
              <a href="#"><img src="http://img73.xooimage.com/files/1/7/2/info3-2fd1f9c.png" alt="partenaire 3" /></a>
              <a href="#"><img src="http://img71.xooimage.com/files/7/5/b/info4-2fd1f9e.png" alt="partenaire 4" /></a>
            </p>
        </div>
      </div><!-- fin partenaires -->

      <div id="admin-concours" class="pa_mini">
        <h2>Concours</h2>
        <div>
            <div>
              <p><img src="http://img69.xooimage.com/files/4/3/6/concours-2fd205d.jpg" alt="Concours" /></p>
            </div>
            <div>
              <div class="contenumasque">
                  <h3>Nom du Gagnant !</h3>
                  <p>Mauris sed porttitor diam. Suspendisse a libero mi, id lobortis nulla. Integer et metus a dolor aliquam rhoncus tincidunt vitae turpis. Sed congue orci ac tellus cursus sed posuere urna commodo. Pellentesque sem eros, volutpat a dictum vel, mattis et libero. Cras iaculis pellentesque dui sed gravida. Sed dapibus tincidunt auctor. Fusce viverra, tortor sit amet consectetur scelerisque, augue justo ullamcorper risus, quis volutpat dui lectus et elit. Nunc adipiscing dolor quis velit fringilla porta. Duis consequat tellus in massa cursus aliquet.</p>
              </div>
              <a class="concours-lien bouton-lien">Plus d'informations ?</a>
            </div>
        </div>
      </div><!-- fin concours -->
  </div>
</div><!-- fin conteneur -->

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".contenumasque").hide();
  $(".concours-lien").click(function () {
      $(this).prev('.contenumasque').slideToggle();
     
      if(!$(this).hasClass('ouvert')) {
        $(this).addClass('ouvert');
      }
      else if ($(this).hasClass('ouvert')) {
        $(this).removeClass('ouvert');
      }
  });
});
</script>

/**************************************************************************************/
/* TEMP:  Page Admin version Yuffie
/* PAR:      Manumanu
/* DATE:  18/12/2011
/**************************************************************************************/

/* FONTS ******************************************************************************/
@font-face {
  font-family: 'Lobster13Regular';
  src: url('http://88.191.129.135/share/fonts/lobster_1.3-webfont.eot');
  src: url('http://88.191.129.135/share/fonts/lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'),
      url('http://88.191.129.135/share/fonts/lobster_1.3-webfont.woff') format('woff'),
      url('http://88.191.129.135/share/fonts/lobster_1.3-webfont.ttf') format('truetype'),
      url('http://88.191.129.135/share/fonts/lobster_1.3-webfont.svg#Lobster13Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* LAYOUT *****************************************************************************/
#admin-conteneur {
  font: 9px/1.5em "Trebuchet MS", Arial, sans-serif;
  text-align: justify;
  background: url("http://img68.xooimage.com/files/2/1/f/background-2fcf81f.jpg") center center;
}

#admin-conteneur strong {
  font-weight: 400;
  color: #33b1d0;
}

#admin-conteneur h2 {
  font: 25px/1.5em Lobster13Regular, serif;
  text-align: center;
  margin: 10px 0 0;
  color: #fff;
  text-shadow: 1px 1px #206273;
}

#admin-conteneur h3 {
  font: 20px/1.5em Lobster13Regular, serif;
  color: #80d1e6;
  text-align: center;
}

#admin-conteneur h2:before {
  content: "· "
}

#admin-conteneur h2:after {
  content: " ·"
}

#admin-conteneur > div {
  width: 760px;
  margin: auto;
  padding: 20px 0;
}

.pa_large{
  width: 376px;
  display: inline-block;
  vertical-align: top;
  background: url("http://img74.xooimage.com/files/0/f/b/shadow-large-2fd1f07.png") center bottom no-repeat;
  padding-bottom: 17px;
}

.pa_moyen {
  width: 247px;
  display: inline-block;
  vertical-align: top;
  background: url("http://img74.xooimage.com/files/2/8/b/shadow-moyen-2fd1f19.png") center bottom no-repeat;
  padding-bottom: 17px;
}

.pa_mini {
  width: 245px;
  margin: auto;
  background: url("http://img74.xooimage.com/files/2/8/b/shadow-moyen-2fd1f19.png") center bottom no-repeat;
  padding-bottom: 17px;
}

#admin-bienvenue > div, #admin-news > div {
  height: 110px
}

.pa_moyen > div {
  height: 102px
}

.pa_mini> div > div:first-child {
  height: 53px
}

.pa_moyen + .pa_moyen {
  margin-left: 6px
}

#admin-conteneur > div > div > div {
  background: #fff;
  vertical-align: top;
  box-shadow: 0 0 20px #e4edef inset, 0 0 5px #f0f6f7 inset;
  padding: 1px 10px;
  border-radius: 2px;
  border: 1px solid #fefefe;
}

#admin-staff a img, #admin-partenaires a img {
  border: none;
  box-shadow: 1px 2px 3px #ccc;
  display: inline-block;
  margin-top: 6px;
}

#admin-staff a + a, #admin-partenaires a + a {
  margin-left: 5px;
  display: inline-block;
}

.bouton-lien {
  display: block;
  height: 25px;
  font-size: 12px;
  line-height: 25px;
  text-align: center;
  border-radius: 5px;
  border: 1px solid #5ebdd3;
  background: url("http://img69.xooimage.com/files/8/7/8/btn-2fd2023.png") 0 top;
  color: #fefefe;
  text-shadow: 0 -1px #48a8be;
  text-decoration: none;
  corsor: pointer;
}

.bouton-lien:hover {
  background-position: 0 bottom;
  color: #2263a0;
  text-shadow: 0 -1px #fefefe;
}

.concours-lien:before, .concours-lien:after {
  content: " ▼ "
}

.concours-lien.ouvert:before, .concours-lien.ouvert:after {
  content: " ▲ "
}

.concours-lien {
  margin-bottom: 8px
}