@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
        p{
            font-family:  Droid Arabic Kufi , serif;
        }

body {
		font-family:Droid Arabic Kufi;
background-image: url( ? );
background-color: #ffffff; 
		width:100% center;
}

#header {
margin-top:-9px;

	width:100%;
	z-index:2;
	
}

.checkbox {
  display: none;
} 
.label{
			 -webkit-transition:.3s;
	 -moz-transition:.3s;
	 -o-transition:.3s;
	 transition:.3s;
	width: 69px;
  display: inline-block;
	background-size:cover;
	margin:.5em;
	border-radius:1px;
}

.checkbox:checked + .label {
		 -webkit-transition:.3s;
	 -moz-transition:.3s;
	 -o-transition:.3s;
	 transition:.3s;
	box-shadow:inset 0px 0px 10px rgba #000;
		background:#A82828
			background:#A82828;
color:#9e003;
}

#mobiledropmenu:checked ~ .title {
	 -webkit-transition:1s;
	width: 100%;
	height: 470px;
	opacity: 1;
}
	
.title {
	 -webkit-transition:1s;
	width: 0%;
	height: 0px;
	opacity: 0;
}
			
			.button {
				color:#941494;
				text-decoration:none;
					border-top:1px solid #941494;
					text-align:center;
					text-transform:uppercase;
					width:100%;
						padding:4px;
				}
					
					.button:hover {
					cursor:pointer;
					background:#941494;
					color:#515151;

							}
							

h1 {
	width:100%;
	color:rgba(188, 230, 255, 0.2);
	text-align:center;
	text-transform:uppercase;
	text-shadow: 1px 3px 6px #941494,
								0 0 0 #47a0d3,
							1px 4px 6px #E5F2FF;
	font-weight:lighter;
	font-size:2.5em;
	position:absolute;
	margin-top:20%;
}

a:link
{
text-decoration: none;
}
a:visited
{
text-decoration: none;
}
a:active
{
text-decoration: none;
}
a:hover
{
text-decoration: none;
}
a.forumlink:hover
{
text-decoration:none;
}

  /* SMO ALAMIR */

      .logo 
      {
       background: url(https://l.top4top.io/p_1876wf3g90.gif) no-repeat;
       width: 321px;
       height: 205px;
       display: block;
       ; background-size: 100% 100%; }
       margin-top: -9;
       text-indent: -9999px;
       -moz-border-radius: 10em 1em 1em 30em;
       border-radius: 0em 0em 0em 1em;
       }
        
   #nav {
      width: 100%;
      float: center;
      margin: 5 5 4em 5;
      padding: 0;
      	margin:-42 auto;
	height: 38px;
      list-style: none;
color: #333;
    border-color: #ddd;
     }

   #nav li {
      float: left; }
   #nav li a {
      padding: 8px 10px;
      	margin:0 auto;

      text-decoration: none;
      font-weight: bold;
    color: #1C441D;
      border-right: 0px solid #941494; }      
         #nav li a:hover {
      color: #545454;
      background-color: #941494; }

* {
	padding: initial;
	margin: auto;
	margin-bottom: 6;
}


header {
	width:100%;
	background-color: #941494;
	z-index:1000;
}

.menu-bar {
	color:#BDAFC3;
	font-size:26px;
	cursor:pointer;
	padding:10px 12px;
	margin-left:10px;
	/* margin-top:5px; */
	/* margin-bottom:5px; */
}

.menu-bar:hover {
	background-color: #941494;
	border-radius:50px;
}

#tag-menu {
	display:none;
}


#tag-menu:checked ~ div.drawer {
 animation: slide-in 0.5s ease;
 animation-fill-mode: forwards;
}

.drawer {
	position:fixed;
	left:-280px;
	background-color: #941494;
	height:100%;
	z-index:100;
	width:280px;
	animation: slide-out 0.5s ease;
	animation-fill-mode: forwards;
}

.drawer ul li {
	list-style:none;
}

.drawer ul li a {
	padding:10px 30px;
	text-decoration:none;
	display:block;
	color:#FFF;
	border-top: 1px solid #941494;
}

.drawer ul li a:hover{
	background-color: #941494;
}

.drawer ul li a i {
	width:50px;
	height:35px;
	text-align:center;
	padding-top:15px;
}

@keyframes slide-in {
 from {left: -280px;}
 to {left: 0;}
}

@keyframes slide-out {
 from {left: 0;}
 to {left: -280px;}
}