Boite de dialogue utilisateur

by matmat

HTML

<script src="http://fonts.googleapis.com/css?family=Italianno"></script>
<div class='appliboxRound'> 
	<div class='content'>
	    <div class='InnerApp1'>
           <p class="IAheader">Envoyer un message</p>
           <p class="IAheader">Ajouter aux contacts</p>
           <p class="">Marquer ce membre</p>
        </div>  
  	</div> 
    <div class='roundsign rsu1'> 
	    <div class='contentroundsign'>
	        <div class='Innerroundsign'>
            Brocante
             </div>    
	    </div> 
    </div>
     <div class='roundsign rsu2'> 
	    <div class='contentroundsign'>
	        <div class='Innerroundsign'>
            DĂ©barras
             </div>    
	    </div> 
    </div>
    <div class='roundsign rsu3'> 
	    <div class='contentroundsign'>
	        <div class='Innerroundsign'>
            Service
             </div>    
	    </div> 
    </div>
    <div class='idsign'>
        john calagan
    </div>    
    <div class='closeappliboxRound'>
             X
      </div>    
</div>

CSS

.appliboxRound{
	position: absolute;
    top:10%;
    left:50%;
    margin-left:-150px;
	width: 400px;		/* desired width */

}
.appliboxRound:before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}
.content{
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
    padding-left:33%;
    padding-right:33%;
    padding-top:40%;
    padding-bottom:40%;
    vertical-align:middle!important;
}
.InnerApp1{

    height:90%;
    vertical-align:middle;
    text-align:center;
    padding:5%;
    border:2px solid gainsboro;
    border-radius:3px;    
    box-shadow: 8px 8px 5px #aaa; 
    cursor:pointer;
}
.InnerApp1 p{
    height:35%;
    vertical-align:baseline!important;
    text-align:center;

    font-family:calibri;
    margin:0;
    padding:0;
    font-size:80%;
}

.IAheader{

    border-bottom:1px solid gainsboro;
    
}
.InnerApp1 p:hover{
background:gainsboro;
}

.roundsign{
	position: absolute;
	width: 25%;		/* desired width */
    background:#990000;
    border-radius:100%;
    border:4px solid grey;
    box-shadow: 8px 8px 5px #aaa; 
    cursor:pointer;
    opacity:0.7;
}
.roundsign:hover{
    opacity:1;
}
.roundsign:before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}
.contentroundsign{
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
    padding-left:10%;
    padding-right:10%;
    padding-top:40%;
    padding-bottom:40%;
}
.Innerroundsign{
    height:100%;
    vertical-align:middle;
    text-align:center;
    color:whitesmoke;
    font-size:24px;
    font-family:'italianno';
    line-height:100%;
}
.rsu1{
    top:7.5%;
    left:37.5%;
}
.rsu2{
    top:37.5%;
    left:0;
}
.rsu3{
    top:37.5%;
    right:0;
}

.idsign{
	position: absolute;
	background:#whitesmoke;
    border:2px solid gainsboro;
    border-radius:2px;
    box-shadow: 8px 8px 5px #aaa; 
    cursor:pointer;
    font-family:calibri;
    opacity:1;
    top:10%;
    left:0;
    padding:2%;
   ...