<script type="text/javascript" src="http://sd-2.archive-host.com/membres/up/190331098933529247/PA_CSS/Onglets_Microbe.js"></script>

<!-- ONGLETS -->
<table width="100%" align="center"><tr>
      <td width="15%"><div class="onglets" onClick="javascript:showaccueil()">Accueil</div></td>
      <td width="15%"><div class="onglets" onClick="javascript:showpostesvacants()">Scénarios</div></td>
      <td width="15%"><div class="onglets" onClick="javascript:showintrigue()">Intrigue</div></td>
      <td width="15%"><div class="onglets" onClick="javascript:showasavoir()">A savoir</div></td>
</tr></table>
<!-- FIN ONGLETS -->


<table width="100%">
    <tr>
      <!-- CONTEXTE -->
        <td width="40%" align="center" valign="top"><br>
        <div class="contexte">
            <div class="titres" align="center">Contexte</div><div style="margin:auto;text-align:center;width:100%"><font face="Georgia"><span style="font-size: 18px; line-height: normal"><strong><font color="steelblue">«</font></strong> <font color="#A7B03F">Great Académy</font> <strong><font color="steelblue">»</font></strong></span></font></div><div style="background:#D2D7D7; color:#D2D7D7;"><span style="font-size: 7px; line-height: normal">.</span></div><span><marquee><img src="IMAGE" border="0" alt="" /></marquee></span><div style="background:#D2D7D7; color:#D2D7D7;"><span style="font-size: 7px; line-height: normal">.</span></div>

<ul><div align="justify"><font face="tahoma"><span style="font-size: 11px; line-height: normal"><strong>T</strong>on contexte. </div>
      </td>
      <!-- FIN CONTEXTE -->
   
   
  <!-- PARTIE CONTENU ONGLETS -->
      <td width="60%" align="center" valign="top" height="300px"><br><br>
        <div style="line-height: 7px;">
        <span style="font-size: 27px; font-family: Time New Roman; color: #BABABA; text-transform: uppercase; ">Bienvenue à Spring`Break</span>
        <span style="font-size: 24px; font-family: Monotype Corsiva;  color: #531014;  margin-left: 150px;">{USERNAME}</span></div>
        <br><br>
     
        <!-- Contenu Onglet "Accueil" -->
        <div id="accueil" style="display: block">
        <table border="0" cellpadding="1" cellspacing="1" width="100%"><tr>
        <td valign="top" width="100%" align="center">
            <div class="contenu">
            - Les nouveauté du forum. <br>
            </div>
        </td>
        </tr></table>
        </div>

        <!-- Contenu Onglet "Scénarios" -->
        <div id="postesvacants" style="display: none">
        <table border="0" cellpadding="1" cellspacing="1" width="100%"><tr>
        <td valign="top" width="100%" align="center">
            <div class="titres" align="center">Scénarios</div><br>
           
              <!-- INFOBULLES SCENARIOS -->
              <table cellspacing="1"><tbody><tr>
                  <!-- Première ligne de Scénarios -->
                  <td>
                    <div class="infobulle">
                    <a href="#"><img src="http://i33.tinypic.com/30a3rsm.jpg"></a>
                    <span>Nom du personnage<br>
                    Feat : Nom de la célébrité</span>
                    </div>
                  </td>
 
                  <td>
                    <div class="infobulle">
                    <a href="#"><img src="http://i37.tinypic.com/iqe8nb.jpg"></a>
                    <span>Nom du personnage<br>
                    Feat : Nom de la célébrité</span>
                    </div>
                  </td>
               
                  <td>
                    <div class="infobulle">
                    <a href="#"><img src="http://i33.tinypic.com/2gt7m11.jpg"></a>
                    <span>Nom du personnage<br>
                    Feat : Nom de la célébrité</span>
                    </div>
                  </td>
               
                  <td>
                    <div class="infobulle">
                    <a href="#"><img src="http://i33.tinypic.com/30a3rsm.jpg"></a>
                    <span>Nom du personnage<br>
                    Feat : Nom de la célébrité</span>
                    </div>
                  </td>
              </tr>
           
              <!-- Deuxième ligne de Scénarios -->
              <tr>
                  <td>
                    <div class="infobulle">
                    <a href="#"><img src="http://i37.tinypic.com/iqe8nb.jpg"></a>
                    <span>Nom du personnage<br>
                    Feat : Nom de la célébrité</span>
                    </div>
                  </td>
               
                  <td>
                    <div class="infobulle">
                    <a href="#"><img src="http://i33.tinypic.com/2gt7m11.jpg"></a>
                    <span>Nom du personnage<br>
                    Feat : Nom de la célébrité</span>
                    </div>
                  </td>
               
                  <td>
                    <div class="infobulle">
                    <a href="#"><img src="http://i33.tinypic.com/30a3rsm.jpg"></a>
                    <span>Nom du personnage<br>
                    Feat : Nom de la célébrité</span>
                    </div>
                  </td>
               
                  <td>
                    <div class="infobulle">
                    <a href="#"><img src="http://i37.tinypic.com/iqe8nb.jpg"></a>
                    <span>Nom du personnage<br>
                    Feat : Nom de la célébrité</span>
                    </div>
                  </td>
              </tr></table>
              <!-- FIN INFOBULLES SCENARIOS -->
        </td>
        </tr></table>
        </div>
     
     
        <!-- Contenu Onglet "Intrigue" -->
        <div id="intrigue" style="display: none">
        <table border="0" cellpadding="1" cellspacing="1" width="100%"><tr>
        <td valign="top" width="100%" align="center">
            <div class="contenu">
            Intrigues du moment
            </div>
        </td>
        </tr></table>
        </div>
     
     
        <!-- Contenu Onglet "A Savoir" -->
        <div id="asavoir" style="display: none">
        <table border="0" cellpadding="1" cellspacing="1" width="100%"><tr>
        <td valign="top" width="100%" align="center">
     
            <!-- INFOBULLES STAFF -->
            <table cellspacing="1"><tbody><tr>
              <td>
                  <div class="infobulle">
                  <img src="http://images2.fanpop.com/image/photos/13800000/Megan-Fox-megan-fox-13890834-100-100.jpg" alt="Staff 1">
                  <span>Nom et prénom<br>
                  Fondatrice && Admin.<br><br>
                  <img src="http://i50.tinypic.com/3129udd.gif"><br><br>
                  <div><a href="lien">Me Contacter ?</a></div>
                  </span>
                  </div>
              </td>
            </tr></table>
            <!-- FIN INFOBULLES -->
         
            <!-- TOP SITES & PARTENAIRES -->
            <table cellpadding="2"><tbody><tr>

              <!-- Top sites -->
              <td valign="top" width="50%">
              <a href="http://www.root-top.com/topsite/obsession27/in.php?ID=15525"><img src="http://i31.servimg.com/u/f31/12/71/38/17/sans_t26.jpg"></a>
              <a href="http://www.root-top.com/topsite/odealavie/in.php?ID=732"><img src="http://i31.servimg.com/u/f31/12/71/38/17/sans_t27.jpg"></a>
              <a href="http://www.root-top.com/topsite/graphix/in.php?ID=1805"><img src="http://i31.servimg.com/u/f31/12/71/38/17/sans_t26.jpg"></a>
              <a href="http://www.root-top.com/topsite/pubrpgdesign/in.php?ID=138"><img src="http://i31.servimg.com/u/f31/12/71/38/17/sans_t27.jpg"></a>
              <a href="http://www.root-top.com/topsite/lavip_oth6/in.php?ID=81"><img src="http://i31.servimg.com/u/f31/12/71/38/17/sans_t26.jpg"></a>
              <a href="http://www.root-top.com/topsite/sexa/in.php?ID=4506"><img src="http://i31.servimg.com/u/f31/12/71/38/17/sans_t27.jpg"></a>
              </td>
 
              <!-- Menu déroulant pour partenaires -->
              <td valign="middle" width="50%" align="right">
              <form><select style="width: 70%px" onchange="location = this.options[this.selectedIndex].value">
              <option selected="selected">Nos top partenaires</option>
              <option value="#">Partenaire numéro 1</option>
              <option value="#">Partenaire numéro 2</option>
              <option value="#">Partenaire numéro 3</option>

              <option value="#">Partenaire numéro 4</option>
              <option value="#">Partenaire numéro 5</option>
              </select></form>
              </td>
            </tr></table><br>
            <!-- FIN TOP SITES & PARTENAIRES -->
         
            <!-- COPYRIGHT -->
            <div align="right">
            par ici, si tu veux faire des remerciements, ou autre !<br>
            </div>
        </td>
        </tr></table>
        </div>

     
      </td>
    </tr>
</table>

.onglets
{font-family: Georgia;
font-weight: bold;
text-align: center;
color: #000000;
padding-top: 3px;
padding-bottom: 3px;
border: 2px solid #00c8ff;
cursor: help;}

.onglets:hover
{-moz-border-radius: 10px;
border: 2px solid #f7ff05;
padding-top: 3px;
padding-bottom: 3px;
color: #000000;
cursor: help;}

.contenu
{border: 2px solid #00c8ff;
-moz-border-radius: 15px;
width: 75%;
overflow: auto;
height: 150px;
text-align: justify;
padding: 7px;}

.titres
{font-size: 20px;
font-family: georgia;
color: #474553;
text-shadow: #cfcfcf 0px 1px 1px;}

.contexte
{border: 2px solid #00c8ff;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
overflow: auto;
width: 90%;
height: 250px;
text-align: justify;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;}

div.infobulle
{position: relative;
color: #000000;
text-decoration: none;
font-size: 10px;
border-bottom: none;
text-align: center;}

div.infobulle span
{display: none;}

div.infobulle:hover
{background: none;
z-index: 999;
cursor: defaut;}
 
div.infobulle:hover span
{display: inline;
position: absolute;
white-space: nowrap;
top: 30px;
left: 30px;
background-color: #FFFFFF;;
text-decoration: none;
color: #000000;
padding: 3px;
border: 2px solid #00c8ff;
border-left: 2px solid #00c8ff;
font-size: 10px;
min-width:120px;
text-align: center;}

<table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 600px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById('chatboxpop').style.display=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'block':'none';this.src=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png':'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png';"/></td></tr></table>