* {    
     margin: 0;    
     padding: 0;    
     border: none;    
     }    
#article {    
     height: 360px;    
     width: 586px;    
     font-family: "TeXGyreReg",sans-serif;    
     font-size: 17px;    
     }    
#article dl {    
     position: relative;    
     top: 15px;    
     left: 50%;    
     margin-left: -75px;    
     width: 150px;    
     height: 155px;    
     color: #324040;    
     text-align: center;    
     background: #04b3d2;    
     background: -moz-linear-gradient(top,#04b3d2,#48dfff);    
     background: -webkit-gradient(linear,left top,left bottom,from(#04b3d2),to(#48dfff));    
     -webkit-border-radius: 4px;    
     -moz-border-radius: 4px;    
     border-radius: 4px;    
     -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.7);    
     -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.7);    
     box-shadow: 0px 0px 6px rgba(0,0,0,0.7);    
     -webkit-transform-origin: 50% 120px;    
     -moz-transform-origin: 50% 120px;    
     -o-transform-origin: 50% 120px;    
     -moz-transition: -moz-transform 0.7s ease-in-out;    
     -o-transition: -o-transform 0.7s ease-in-out;    
     -webkit-animation: bounceOut 0.7s ease-in-out;    
     }    
#article dt {    
     position: absolute;    
     bottom: 0px;    
     width: 100%;    
     height: 27px;    
     padding-top: 5px;    
     }    
#article dd {    
     -webkit-transform: rotate(180deg);    
     -moz-transform: rotate(180deg);    
     -o-transform: rotate(180deg);    
     }    
#article dd a {    
     display: block;    
     height: 22px;    
     padding: 3px 0px;    
     color: #324040;    
     text-decoration: none;    
     }    
#article dd a:hover {    
     background: rgba(255,255,255,0.1);    
     }    
#article dl:hover {    
     -webkit-transform: rotate(-180deg);    
     -moz-transform: rotate(-180deg);    
     -o-transform: rotate(-180deg);    
     -moz-transition: -moz-transform 0.5s ease-in-out;    
     -o-transition: -o-transform 0.5s ease-in-out;    
     -webkit-animation: bounceIn 0.7s ease-in-out;    
     }    
@-webkit-keyframes bounceIn {    
     from {-webkit-transform: rotate(0deg);}    
     75%{-webkit-transform: rotate(-200deg);}    
     90%{-webkit-transform: rotate(-175deg);}    
     to {-webkit-transform: rotate(-180deg);}    
     }    
@-webkit-keyframes bounceOut {    
     from {-webkit-transform: rotate(-360deg);}    
     0% {-webkit-transform: rotate(-180deg);}    
     10%{-webkit-transform: rotate(-160deg);}    
     to {-webkit-transform: rotate(-360deg);}    
     }    
#article .masque {    
     position: absolute;    
     z-index: 50;    
     width: 585px;    
     height: 135px;    
     top: 0;    
     left: 0;    
     background: #fff;    
     }    
#article .ombre {    
     position: absolute;    
     z-index: 40;    
     width: 300px;    
     height: 6px;    
     top: 133px;    
     margin-top: -103px;    
     left: 142px;    
     -webkit-box-shadow: 0px 100px 3px black;    
     -moz-box-shadow: 0px 100px 3px black;    
     box-shadow: 0px 100px 3px black;    
     -webkit-border-radius: 75px 75px 75px 75px / 3px 3px 3px 3px;    
     -moz-border-radius: 75px 75px 75px 75px / 3px 3px 3px 3px;    
     border-radius: 75px 75px 75px 75px / 3px 3px 3px 3px;    
     }

section id="article">    
     <dl class="menu">    
     <dt class="btnRot">Закладки</dt>    
     <dd><a href="">...</a></dd>    
     <dd><a href="">Закладка №3</a></dd>    
     <dd><a href="">Закладка №2</a></dd>    
     <dd><a href="">Закладка №1</a></dd>    
     </dl>    
     <div class="masque"></div>    
     <div class="ombre"></div>    
</section>