CODE نسخ الكود
#top-menu {
background: url("http://elsa3a.com/templates/elsa3a/image/top-hed-bg.png") repeat-x scroll center bottom #212121;
height: 49px;
line-height: 49px;
min-width: 970px;
position: fixed;
top: 0;
width: 100%;
z-index: 2000;
}
#top-menu .top-menu-cont {
width:970px;
margin: 0 auto;
}
#top-menu .top-menu-cont ul{
}
#top-menu .top-menu-cont ul li{
float:right;
position: relative;
margin-left: 22px;
}
#top-menu .top-menu-cont ul li span{
color:#fff;
}
#top-menu .top-menu-cont ul li span:hover{
color:#3aa1e2;
}
#top-menu .top-menu-cont ul li img{
vertical-align: middle;
}
#top-menu .top-menu-cont ul li a{
color:#fff;
display: block;
text-decoration:none;
}
#top-menu .top-menu-cont ul li a:hover{
color:#3aa1e2;
}
#top-menu .top-menu-cont ul li > ul{
background: #212121;
position: absolute;
border-radius: 5px;
right: 0;
width: 120px;
visibility: hidden;
top:40px;
transition: all 200ms;
z-index: 1;
opacity: 0;
}
#top-menu .top-menu-cont ul li:hover > ul{
visibility: visible;
top:49px;
opacity: 1;
}
#top-menu .top-menu-cont ul li > ul li{
width: 120px;
text-align: center;
height: 40px;
line-height: 40px;
transition: all 500ms;
}
#top-menu .top-menu-cont ul li > ul li:hover{
}
#top-menu .top-menu-cont ul li > ul li a{
display: inline-block;
color:#fff;
text-decoration:none;
}
#top-menu .top-menu-cont .social{
float:left;
margin-top: 10px;
margin-left:10px;
}
#top-menu .top-menu-cont .social a{
display: block;
width: 26px;
height: 26px;
float:left;
margin-right: 8px;
transition: all 800ms ease;
-moz-transition: all 800ms ease;
-webkit-transition: all 800ms ease;
-o-transition: all 800ms ease;
text-decoration: none;
}
#top-menu .top-menu-cont .social .face{
background: url(https://i93.servimg.com/u/f93/15/47/21/99/social10.png) no-repeat;
}
#top-menu .top-menu-cont .social .face:hover{
background: url(https://i93.servimg.com/u/f93/15/47/21/99/social10.png) no-repeat 0 -28px;
}
#top-menu .top-menu-cont .social .twitter{
background: url(https://i93.servimg.com/u/f93/15/47/21/99/social10.png) no-repeat -35px 0;
}
#top-menu .top-menu-cont .social .twitter:hover{
background: url(https://i93.servimg.com/u/f93/15/47/21/99/social10.png) no-repeat -35px -28px;
}
#top-menu .top-menu-cont .social .youtube{
background: url(https://i93.servimg.com/u/f93/15/47/21/99/social10.png) no-repeat -71px 0;
}
#top-menu .top-menu-cont .social .youtube:hover{
background: url(https://i93.servimg.com/u/f93/15/47/21/99/social10.png) no-repeat -71px -28px;
}
.contaner {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 5px;
margin: 0 auto;
position: relative;
top: 47px;
width: 970px;
padding-bottom: 64px;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
}
.header-contaner{
background: url("https://i93.servimg.com/u/f93/15/47/21/99/bg10.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
margin: 0 auto;
position: relative;
top: 47px;
width: 970px;
}
.effect8
{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
}
.effect8:before, .effect8:after
{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 7px rgba(0, 0, 0, 0.45);
-moz-box-shadow:0 0 7px rgba(0, 0, 0, 0.45);
box-shadow:0 0 7px rgba(0, 0, 0, 0.45);
top:10px;
bottom:10px;
left:0;
right:0;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.effect8:after
{
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
.header-contaner #header{
height: 185px;
overflow: hidden;
}
.header-contaner #header #logo{
background: url("https://i93.servimg.com/u/f93/15/47/21/99/bg-log11.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
float: right;
height: 185px;
margin-right: -22px;
text-align: center;
width: 456px;
}
.header-contaner #header #logo img{
margin-top: 38px;
}
.header-contaner #header #live{
background: url(https://i93.servimg.com/u/f93/15/47/21/99/bg-liv10.png) no-repeat;
width:456px;
height:185px;
float:left;
text-align: center;
}
.header-contaner #header #live #colive{
margin: 26px auto 0;
width: 223px;
height:119px;
}
.header-contaner #header #live #colive h1{
float: left;
font-family: gess;
font-size: 20px;
font-weight: bold;
margin-top: 41px;
}
.header-contaner #header #live #colive a{
float: left;
font-family: gess;
font-size: 20px;
font-weight: bold;
margin-left: 26px;
margin-top: -39px;
text-decoration:none;
}
.header-contaner #header #live #colive .online{
color:#8fbe07;
}
.header-contaner #header #live #colive .offline{
color: #BD4216;
margin-left: 10px;
}