PA iframe - à revoir

<meta charset="utf-8" /><title>PA</title><link href="http://fonts.googleapis.com/css?family=Molle:400italic" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Bigelow+Rules" rel="stylesheet" type="text/css" /> <style>
#fond{
text-align:center;
border-radius:35px;
background-color:#99CC32;
border-left:4px double #E47833;
border-right:4px double #E47833;
border-top:2px dotted #E47833;
border-bottom:2px dotted #E47833;
padding:10px;
margin-top:60px;
width:650px;
height:475px;
font-size:13px;}

#nom{
color:#E47833;
text-shadow:0px 0px 5px #D98719;
letter-spacing:4px;
font-variant:small-caps;
margin-top:-65px;
font-weight:bold;
font-family: 'Bigelow Rules', cursive;
font-size:80px;}

#nom2{
color:white;
text-shadow:0px 0px 5px #D98719;
letter-spacing:0px;
margin-top:-27px;
font-family: 'Bigelow Rules', cursive;
font-size:22px;}

#menu1{
width:500px;
height:20px;
margin:auto;
margin-bottom:40px;}

#slider{
float:left;
width:280px;
height:180px;
border-radius:0px 50px 10px 10px;
border:4px solid #E47833;}

#slider p{
width:240px;
text-align:justify;
padding:8px;}

#slider img{
border:4px solid #E47833;
border-radius:0px 50px 10px 10px;
 width:280px;
height:180px;}
 
#slider span{
width:280px;
height:180px;
position:absolute;
margin-top:-173px;
margin-left:-144px;
transition : margin-left 0.7s linear, width 3s ease;}

#slider:hover span{
width:0px;
margin-left:-500px;}

#liens{
margin-left:14px;
float:left;
width:120px;
height:180px;}

#long{
overflow:auto;
text-align:justify;
padding:10px;
border:4px double black;
float:right;
width:180px;
height:344px;
border-radius:50px 0px 10px 0px;
border:4px solid #E47833;
border-left:4px dotted #E47833;
border-top:4px dotted #E47833;
}

#b1{
padding:10px;
float:left;
margin-top:20px;
border:4px double black;
width:220px;
height:140px;
overflow:auto;
text-align:justify;
border:4px solid #E47833;
border-top:4px dotted #E47833;
border-radius:30px 10px 10px 8px;}

#b2{
background-image:url('http://img15.hostingpics.net/pics/537485orangebyisthatwhatyoumintd5tyv5b.jpg'); /*pour modifier l'image dans la ligne du bas, la fille sur un fond orange, c'est ici*/
text-align:justify;
float:right;
margin-top:20px;
margin-right:10px;
border:2px solid white;
border-left:4px dotted white;
border-right:4px dotted white;
border-radius:30px;
width:160px;
height:140px;}

#gif{
width:120px;
height:120px;}

.lien-pa{
border-radius:8px;
font-family: 'Molle', cursive;
margin-top:7px;
font-size:15px;
  width:120px;
  height:18px;
background-color:#E47833;
border-left:3px solid white;
border-right:3px solid white;
transition :background-color 1s linear, font-size 1s linear;}
 
.lien-pa:hover{
background-color:white;
border-left:3px solid #E47833;
border-right:3px solid #E47833;
font-variant:small-caps;}

.lien-pa a{
color:white;
text-decoration:none;}

.lien-pa a:hover{
color:#E47833;}

#menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;}

#menu li {
 float:left; }

#menu li a {
color:white;
font-size:18px;
font-family:'Molle';
 display:block;
 width:150px;
 text-decoration:none;
 padding:5px; }

#menu li a:hover {
 color:#FFD700; }

#menu ul li ul {
 display:none; }

#menu ul li:hover ul {
 display:block;
font-size:14px;
background-color:#99CC32; }

#menu li:hover ul li {
 float:none; }

#menu li ul {
 position:absolute; }

#li1{
border-radius:15px 0px 0px 15px;
border-left:4px solid #E47833;
border-right:2px dotted #D98719;}

#li2{
border-radius:0px 15px 15px 0px;
border-right:4px solid #E47833;
border-left:2px dotted #D98719;}

.li3{
border:1px solid #E47833;
border-top:none;
border-radius:0px 0px 20px 20px;}

#b1:first-letter, #long:first-letter{
margin-left:10px;
font-size:17px;
color:#E47833;
font-weight:bold;}

</style>
<div id="fond">
   
   <div id="nom">
       Nom du forum
   </div>
   
   <div id="nom2">
       Petite phrase pour le présenter.
   </div>
   
   <div id="menu1">
      
      <div id="menu">
         
         <ul>
            
            <li id="li1">
                <a href="#">Staff</a>
               <ul class="li3">
                  
                  <li>
                      <a href="#">XXX</a>
                  </li>
                  
                  <li>
                      <a href="#">XXX</a>
                  </li>
                  
                  <li>
                      <a href="#">XXX</a>
                  </li>
                  
               </ul>
               
            </li>
            
            <li>
                <a href="#">Prédéfinis</a>
               <ul class="li3">
                  
                  <li>
                      <a href="#">XXX</a>
                  </li>
                  
                  <li>
                      <a href="#">XXX</a>
                  </li>
                  
                  <li>
                      <a href="#">XXX</a>
                  </li>
                  
               </ul>
               
            </li>
            
            <li id="li2">
                <a href="#">RP libres</a>
               <ul class="li3">
                  
                  <li>
                      <a href="#">XXX</a>
                  </li>
                  
                  <li>
                      <a href="#">XXX</a>
                  </li>
                  
                  <li>
                      <a href="#">XXX</a>
                  </li>
                  
               </ul>
               
            </li>
            
         </ul>
         
      </div>
      
   </div>
   
   <div id="slider">
      
      <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula tincidunt eros, non eleifend nunc bibendum sed. Curabitur malesuada metus ac aliquet molestie. Curabitur ipsum nibh, lacinia vitae ornare vel, fermentum quis odio. In nec lorem vel odio tristique pulvinar. Proin aliquam ullamcorper arcu ac mollis.
      </p><span><img src="http://img15.hostingpics.net/pics/570035ilikeorangebylicchan.jpg" /></span>
   </div>
   
   <div id="liens">
      
      <div class="lien-pa">
          <a href="LIEN" alt="Règlement" target="_blank">Règlement</a>
      </div>
      
      <div class="lien-pa">
          <a href="LIEN" target="_blank">Avatars pris</a>
      </div>
      
      <div class="lien-pa">
          <a href="LIEN" target="_blank">Prédéfinis</a>
      </div>
      
      <div class="lien-pa">
          <a href="LIEN" target="_blank">Un RP ?</a>
      </div>
      
      <div class="lien-pa">
          <a href="LIEN" target="_blank">Un lieu ?</a>
      </div>
      
      <div class="lien-pa">
          <a href="LIEN" target="_blank">Qui est qui ?</a>
      </div>
      
      <div class="lien-pa">
          <a href="LIEN" target="_blank">Gazette</a>
      </div>
      
   </div>
   
   <div id="long">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula tincidunt eros, non eleifend nunc bibendum sed. Curabitur malesuada metus ac aliquet molestie. Curabitur ipsum nibh, lacinia vitae ornare vel, fermentum quis odio. In nec lorem vel odio tristique pulvinar. Proin aliquam ullamcorper arcu ac mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula tincidunt eros, non eleifend nunc bibendum sed. Curabitur malesuada metus ac aliquet molestie. Curabitur ipsum nibh, lacinia vitae ornare vel, fermentum quis odio. In nec lorem vel odio tristique pulvinar. Proin aliquam ullamcorper arcu ac mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula tincidunt eros, non eleifend nunc bibendum sed. Curabitur malesuada metus ac aliquet molestie. Curabitur ipsum nibh, lacinia vitae ornare vel, fermentum quis odio. In nec lorem vel odio tristique pulvinar. Proin aliquam ullamcorper arcu ac mollis.
   </div>
   
   <div id="b1">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula tincidunt eros, non eleifend nunc bibendum sed. Curabitur malesuada metus ac aliquet molestie. Curabitur ipsum nibh, lacinia vitae ornare vel, fermentum quis odio. In nec lorem vel odio tristique pulvinar. Proin aliquam ullamcorper arcu ac mollis. Mauris aliquet scelerisque malesuada. Vivamus aliquet ipsum velit, sed consectetur mauris luctus sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nisi neque, dapibus et dignissim at, mattis quis arcu. Phasellus eleifend condimentum porttitor. Quisque sed mauris eget risus fermentum lobortis a quis turpis. Vestibulum hendrerit orci et odio viverra, a tincidunt tellus pulvinar. Aenean nec ligula nisi. Etiam egestas quis purus nec pellentesque.
   </div>
   
   <div id="b2">
      
   </div>
</div>