/* set our custom font family using @font-face */

@font-face {
   font-family: champ;
   src: url("../fonts/CL.ttf") format("truetype");
}


* { margin:0;padding:0; }
body {	color: #ffffff; 
	background: #ffffff; 
	height:100%;
	width:100%;
	display:table;
	vertical-align:middle;
	padding:0px;

 }
a:hover {color:#CCC;}

a.button { 
	padding:6px;
	
	color:#FFF;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	margin:10px;text-decoration:none;
	font-size:12px;
	text-transform:uppercase;
	font-weight:bold;border:2px solid transparent;
	background: rgba(1,0,0,.25);
   	box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   	-o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   	-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
  	-moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
	}
a.button:hover { border:2px solid #990080; }
h1, h2, h3, h4 { text-transform:uppercase;
	
				font-family: "Arabic Typesetting";
				text-shadow: #000099 2px 2px 1px;
				font-size: 14px;
				color: #ffffff;

 }
#container {
	background:#ffffff;
	height:100%;
	width:900px;
	height:300px;
	display:table;
	vertical-align:middle;
	width:900px;border:1px solid #dddddd;
	-moz-border-radius-topleft: 30px;
	-moz-border-radius-bottomright: 30px;
	-moz-border-radius-bottomleft: 30px;margin:20px auto;
	padding:5px;
	
   box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
	}
#container2 {
	background:#ffffff;
	height:100%;
	width:900px;
	height:150px;
	display:table;
	vertical-align:middle;
	width:900px;border:1px solid #dddddd;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 30px;
	-moz-border-radius-bottomright: 30px;
	-moz-border-radius-bottomleft: 10px;margin:20px auto;
	padding:5px;
	color: #000099;
   box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
	}
#header {}

#header h1 { 
	font-family:champ, arial, sans-serif;
	text-transform:uppercase;
	margin:-25px 3px 0 0;
	font-size:20px;
	color:#990080;
	display:block;
	float:left;
	width:200px;
	text-align:center; 
	}
#header p { 
	font-family:arial, sans-serif;
	color:#CCC;
	display:block;
	float:right;
	width:620px; 
	}

#nav { width:1020px;
	clear:both;
	border-bottom:0px dotted #660099;
	height:20px;
	padding:0px 0 0 0; 
	}
#nav ul {}
#nav li { list-style:none;
	
	display:block;
	float:right;
	border:1px solid #666;
	padding:6px;
	margin:-25px 3px 0 0;
	z-index:1500;
	color:#ffffff;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-bottom:0;
	background: rgba(0,0,0,0.25);
   	box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   	-o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   	-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
  	-moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);

 }
#nav li a { 
	 display: block;
 height: 50px;
 padding: 0 1px;
 margin: 0;
 -webkit-transition: 0.15s linear;
 -webkit-transition-property: -webkit-transform margin;
 -webkit-box-reflect: below 2px; -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.45, transparent), to(rgba(255, 255, 255, 0.25))); 
	}
#nav li:hover { background:#990080; }
#nav li:hover a { color:#FFF; }

#content { 
	float:right;
	width:450px;
	padding:10px 0px 0 0;
	margin:20px 0px 0 0; 
	z-index:-100
	text-align:center;
	padding:20px;
	-moz-border-radius-topleft: 50px;
	-moz-border-radius-topright: 50px;
	-moz-border-radius-bottomright: 50px;
	-moz-border-radius-bottomleft: 50px;
	margin:0px;
	background: rgba(0,0,0,0.25);
   	box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   	-o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   	-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
  	-moz-box-shadow: 0 2px 60px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);

 }
	}

#welcome { 
	float:right;
	width:1000px;
	padding:10px 0px 0 0;
	margin:20px 0px 0 0; 
	z-index:-100
	text-align:center;
	padding:0px;
	-moz-border-radius-topleft: 50px;
	-moz-border-radius-topright: 50px;
	-moz-border-radius-bottomright: 50px;
	-moz-border-radius-bottomleft: 50px;
	margin:0px;
	background-image: url(/img/banner/back.png);
   	box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   	-o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   	-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
  	-moz-box-shadow: 0 2px 60px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);

	}
#products {
	width:840px;
	padding:0px 0px 0 0;
	margin:-5px 0 0 0; 
			
}
.column { 
	float:right;
	width:206px;
	padding:10px 10px 10px 0; 
	}
.column img { 
	border:3px solid #333;
	margin:4px 0;
	opacity:0.5; 
	}
.column:hover img { opacity:1; }
.column p { font-size:11px;padding:4px 0; }
.column:last-of-type { padding:10px 0; }


#sidebar { 
	float:left;
	width:380px;
	height:50px;
	padding:10px 0 0 0; 
	z-index=2000;
	text-align:center;
	margin:0px 0px 0px 0;
	}

.sidepanel { 
	width:400px;
	border:0px dotted #666;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-topright: 50px;
	-moz-border-radius-bottomright: 50px;
	padding:5px;
	background: rgba(0,0,0,0.25);
   	box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   	-o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   	-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
  	-moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
	z-index=2000;
	margin:0 0 8px 0;
	color:#CCC; 

	}
.sidepanel h4 {
				font-family: "Arabic Typesetting";
				text-shadow: #00dd00 2px 2px 1px;
				font-size: 22px;
				color: #ffffff;
}
.sidepanel p { 
	padding:4px 0;
	font-size:11px;
	color:#ffffff; 
	}


#footer { 
	clear:both;
	width:860px;
	padding:30px 0 10px 0;
	text-align:center; 
	}