<div class='headerright'>
  <ul>
    <li><a style="background: rgb(255, 255, 255) url(http://icons.iconarchive.com/icons/graphicloads/100-flat/32/home-icon.png) no-repeat right;" href='--------'> الرئيسية</a></li>
<li><a style="    background: rgb(255, 255, 255) url(http://icons.iconarchive.com/icons/graphicloads/100-flat/32/camera-icon.png) no-repeat right;" href='--------'> تصميم</a></li>
<li><a style="   background: rgb(255, 255, 255) url(http://icons.iconarchive.com/icons/graphicloads/100-flat/32/folder-icon.png) no-repeat right;" href='----------'> فوتوشوب</a></li>
<li><a style="   background: rgb(255, 255, 255) url(http://icons.iconarchive.com/icons/graphicloads/100-flat/32/support-icon.png) no-repeat right;" href='-----------'> ملحقات</a></li>
<li><a style="   background: rgb(255, 255, 255) url(http://icons.iconarchive.com/icons/graphicloads/100-flat/32/addition-icon.png) no-repeat right;" href='-----------'> تكسترات</a></li>
<li><a style="   background: rgb(255, 255, 255) url(http://icons.iconarchive.com/icons/graphicloads/100-flat/32/download-2-icon.png) no-repeat right;" href='----------'> ستايلات</a></li>
<li><a style="   background: rgb(255, 255, 255) url(http://icons.iconarchive.com/icons/graphicloads/100-flat/32/email-icon.png) no-repeat right;" href='----------'> منوعات</a></li>
  <div class='clear'/>
  </div></ul>
  </div>
<style>.headerright ul li a{      font-family: lolblogger;
    color: gray;
    line-height: 37px;
    text-decoration: none;
    padding: 0px;
    background: rgb(255, 255, 255);
    width: 255px;
    height: 38px;}
.headerright ul li { font-size: 15px;
    font-family: lolblogger;
    font-weight: normal;
    color: gray;
    background-color: rgb(218, 203, 127);
    padding: 7px;
    border-radius: 2px;
    width: 269px;
    text-align: center;
    margin: 5px;}
.twitter iframe {
    left: 50px;
    top: 10px;
    z-index: 1;
    display: block;
    position: absolute;
}
@-webkit-keyframes hvr-wobble-top {
  16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
  }
  33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }
  49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }
  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }
  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }
  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}
@keyframes hvr-wobble-top {
  16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
  }
  33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }
  49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }
  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }
  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }
  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}
.headerright ul li a {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
.headerright ul li a:hover, .headerright ul li a:focus, .headerright ul li a:active {
  -webkit-animation-name: hvr-wobble-top;
  animation-name: hvr-wobble-top;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}</style>
<a href='http://fancy10.eu' style='display:none;'>fancy10</a>