/*
------------------------------------------------------
RESET
------------------------------------------------------
*/
/*
------------------------------------------------------
Created by: Ammar Mandli - ammar@design-master.com
------------------------------------------------------
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
	margin:0;
	padding:0;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
	line-height:21px;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
.blockquote{
	border:1px solid #ddd;
	background:#eee;
	margin:0 auto;
	padding:10px;
	width:35%;
	text-align:center;
}
/* Cope with font squishing */
li li, li p, li dt, li dd, li address, 
dt li, dd li, dt p, dd p,
p, blockquote p, 
td td, td p, td li, td dt, td dd
{ font-size: 1em; }
/*
------------------------------------------------------
STRUCTURE
------------------------------------------------------
*/
/* Font Adjustment & Body Background
---------------------------------------*/
body {
	font-family:   Arial, Trebuchet MS, Verdana,  sans-serif;
	font-size: 62.5%;
	color: #3F3F3F;
	background:url(../../global/images/bg.jpg) repeat-x center top fixed #1b1b1b;
	height:100%;
	font-size:13px; 
}

/* Generic styles
---------------------------------------*/
img{border:none;}
.no-wrap{ white-space: nowrap; }
a{text-decoration: none; color:#F60; line-height:1.2em;}
a:hover{text-decoration:none; color:#09F;}
a img, a:focus, fieldset{ border: none;}
strong { font-weight: bold;}
p{color:#333; line-height:1.4em; margin-bottom:10px; text-align:justify;}
ul{ list-style:inside; padding-left:15px;}
li{color:#333; line-height:1.4em; padding-bottom:5px; text-align:justify;}
.floatLeft{float:left;}
.floatRight{float:right;}
a:active{outline:none;}
.center{text-align:center;}
.right{text-align:right}
.marginTop{margin-top:15px;}
.marginBottom{margin-bottom:15px;}
.clearfix{clear:both;}
/* Header Tags Styles
---------------------------------------*/
h1 {font-size:24px;}
h2,h3 {font-size:16px;}

/* Form Tags Styles
---------------------------------------*/
label{
	color:#777;
	font-size:1.1em;
	line-height:1.4em;
	padding:2px 0 2px 3px;
}
input {
	padding:2px 0 2px 3px;
	font-size:1.2em;
	line-height:1.4em;
}
button {
	border:0 solid #fff;
	padding:2px 8px;
	font-size:1.2em;
	color:#777;
	background:#333;
	border:1px solid #777;
	margin:5px;
}
.rtl{
direction:rtl;
font-family:Tahoma, Geneva, sans-serif;
}

/*
------------------------------------------------------
Header 
------------------------------------------------------
*/
#header{
	width:980px;
	height:128px;
	z-index:3;
	position:fixed;
	top:0;
	left:50%;
	margin-left:-490px;
	background:url(../../global/images/bg.jpg) repeat-x center top #1b1b1b;
	clear:both;
}
#header h1{
	background:url(../../global/images/wazzan-logo.png) repeat-x left top;
	width:378px;
	height:110px;
	float:left;
	display:block;
	text-indent:-9999px;
	margin:0 10px 0 0;
	}
#header h1 a{
	width:378px;
	height:110px;
	display:block;
	text-indent:-9999px;
	}

/*
------------------------------------------------------
Main Navigations
------------------------------------------------------
*/
#navigation{
	width:570px;
	height:128px;
	float:right;
	display:block;
}

/*Top Navigation - CSS*/
ul.topNavigations{
	margin:10px 0 0 0;
	display:block;
	float:right;
	width:auto;
	text-align:right;
}	
ul.topNavigations li{
	float:left;
	display:inline;
}	
ul.topNavigations li a{
	float:left;
	padding:0 10px 0 15px;
	display:inline;
	color:#FFF;
	font-size:14px;
	background:url(../../global/images/sep.png) no-repeat left center;
	text-shadow:2px 2px 2px #333;
}	
ul.topNavigations li a:hover{
	color:#f9ff92;
}	
ul.topNavigations li a.activeTop{
	color:#f9ff92;
}	
ul.topNavigations li a.sep-none{
	background:none;
}

/*
------------------------------------------------------
Page Wrapper
------------------------------------------------------
*/
html{
	width:100%;
	height:100%;
}
#page{
	width:100%;
	height:100%;
}
#pageWrapper{
	width:978px;
	margin:128px 0 0 -490px;
	min-height:100%;
	position:relative;
	border-right:1px solid #000;
	border-left:1px solid #000;
	background:#fff;
	top:0;
	left:50%;
	display:inline-block;
	padding-bottom: 0px;
}
/*
------------------------------------------------------
Banner 
------------------------------------------------------
*/
#banner{
	width:auto;
	display:block;
	background:#000;
}
/*
------------------------------------------------------
Main 
------------------------------------------------------
*/
#main{
	width:auto;
	min-height:377px;
	background: url(../images/main.jpg) no-repeat left top #fff;
	padding:70px 50px 0 50px;
}
#mainInner{
	width:auto;
	min-height:377px;
	background: url(../images/mainInner.jpg) no-repeat left top #fff;
	padding:30px 47px 0 46px;
	display:inline-block;
}

.primary{
	width:450px;
	float:left;
}
.primary h2{
	color:#f9ff92;
	margin:0 0 20px 0;
	font-weight:lighter;
}
.secondary{
	width:368px;
	float:right;
}
.specialOffer{
	float:right;
	width:auto;
	margin:0 0 7px 0;
	height:160px;
	}
.specialOffer h2{
	color:#f9ff92;
	margin:0 0 20px 0;
	text-align:left;
	padding:0 0 0 230px;
	font-weight:lighter;
}
.specialOffer img{
	margin:0 10px 10px 0;
	float:left;
	height:100px;
	width:auto;
}
.specialOffer a.more{
	float:right;
	color:#ae0b08;
}
.specialOffer a.more:hover{
	color:#333;
}
/*
------------------------------------------------------
Inner Page
------------------------------------------------------
*/
/*-------------------------Breadcrumbs -------------------*/
#breadcrumb {
	width:878px;
	display:inline-block;
	position:relative;
	z-index:1;

}
#breadcrumb ul {list-style:inside; padding-left:0;}
#breadcrumb ul li {	float:left; list-style-type:none;}
#breadcrumb li a {
	background:url(../../global/images/breadcrumb-arrow.jpg) no-repeat scroll right 5px transparent;
	color:#ae0b08;
	margin:0 3px;
	padding:0 10px 0 0;
	text-decoration:none;
}
#breadcrumb a:hover {
	color:#000000;
}
#breadcrumb li.boldbreadcrumb {
	font-weight:bold;
	margin:0 3px;
}
/*-------------------------Browse -------------------*/

ul.browse{
	width:870px;
	position:relative;
	top:38px;
	text-align:right;
	border-bottom:1px solid #999;
}
ul.browse li {
	display:inline;
	height:30px;
	line-height:30px;
}
ul.browse li a{
	display:inline-block;
	*display:inline;
	zoom:1;
	background:url(../../global/images/btn.png) no-repeat center top;
	height:30px;
	line-height:30px;
	text-align:center;
	min-width:90px;
	color:#FFF;
}
ul.browse li a:hover{
	background:url(../../global/images/btn.png) no-repeat center -37px transparent;
	color:#333;
}

ul.browse li a.selectedPro {
	background:url(../../global/images/btn.png) no-repeat center -37px transparent;
	color:#333;
	font-weight:bold;
}

/*sub menu*/
ul.browse li ul.sub {
	position: absolute;
	top:32px;
	right:3px;
}
ul.browse li ul.sub li {
	display:inline;
	height:30px;
	line-height:30px;
	margin:0 -3px 0 0;
	padding:0;
}
ul.browse li ul.sub li a{
	display:inline-block;
	*display:inline;
	zoom:1;
	padding:0 10px;
	height:30px;
	line-height:30px;
	text-align:center;
	color:#FFF;
	background:#666!important;
	border-left:1px solid #fff;
	min-width:0;
}
ul.browse li ul.sub li a:hover{
	background:#ccc!important;
	color:#333;
}
ul.browse li ul.sub li a.active-sub{
	background:#ccc!important;
	color:#333;
}

.fullwidth{
	width:auto;
	float:left;
}
.porth2{
	margin-bottom:25px;
	width:auto;
	display:block;
	clear:both;
}.redbold{ font-weight:bold; color:#900;}
.fullwidth > h2{
	color:#f9ff92;
	margin:0 0 35px 0;
	padding:0 20px 0 20px;
	font-weight:lighter;
	background:url(../images/h2_bg.png) no-repeat left center;
	height:38px;
	line-height:38px;
	min-width:100px!important;
	overflow:hidden;
	display:inline-block;
	*display:inline;
	zoom:1;
}

.fullwidth h3{
	color:#f9ff92;
	margin:0 0 15px 0;
	padding:0 20px 0 20px;
	font-weight:lighter;
	background:url(../images/h2_bg.png) no-repeat left center;
	height:38px;
	line-height:38px;
	min-width:100px!important;
	overflow:hidden;
	float:left;
	display:block;
}
.fullwidth h4{
	color:#333;
	margin:0 0 15px 0;
	padding:0 20px 0 20px;
	font-weight:bold;
	height:38px;
	line-height:38px;
	float:left;
	display:block;
}
.fullwidth > p{
	padding:0 10px;
}
.fullwidth p span{
	font-weight:bold;
	color:#AE0B08;
	display:block;
	text-transform:uppercase;
}
.fullwidth p i{
	color:#000000;
	display:block;
	font-size:10px;
	font-style:normal;
	font-weight:bold;
	text-decoration:underline;
	text-transform:uppercase;
}
.pimg{
    padding: 5px;
    border: 1px solid #ccc;
    background: #f0f0f0;
}
.right-pimg{
    padding: 5px;
    border: 1px solid #ccc;
    background: #f0f0f0;
    float: right;
    margin: 5px 0 20px 20px;
max-width: 250px;
max-height: 500px;
}
.pimg.left{
    float: left;
    margin: 5px 20px 20px 0;
}
.pimg.right{
    float: right;
    margin: 5px 0 20px 20px;
}
/*For Arabic*/
.img-right{
	float: right;
    margin: 5px 20px 20px 0;
    padding: 5px;
    border: 1px solid #ccc;
    background: #f0f0f0;
}
.img-left{
	float: left;
    margin: 5px 20px 20px 0;
    padding: 5px;

}
.fullwidth.ar p{
	direction:rtl;
	font-size:14px;
	text-align:justify;
	font-family:Tahoma, Geneva, sans-serif;
	overflow:hidden;
}
.fullwidth.ar p strong{
	color:#900;
}

ul.ulist{
	width:858px;
	float:left;
	margin-bottom:10px;
	padding:0 0 0 20px;
}
ul.ulist li{
	background:url(../../global/images/breadcrumb-arrow.jpg) no-repeat left 12px transparent;
	color:#333333;
	font-size:13px;
	line-height:1.4em;
	text-align:justify;
	padding:3px 0 3px 12px
}
ul.imgBlocks{
	width:100%;
	float:left;
	margin-bottom:10px;
}
ul.imgBlocks h4{
	margin:0 0 0 0px ;
	padding:0;
	display:block;color: #ae0b08;
}
ul.imgBlocks li{
	color:#333333;
	font-size:12px;
	line-height:1.4em;
	text-align:center;
	float:left;
	width:180px;
	margin:0 15px 15px 0;
	border:1px solid #ddd;
	text-align:center;
	display:block;
	padding:11px;
}
ul.imgBlocks li:hover{
	border:1px solid #333;
}
ul.imgBlocks li a img{
	display:block;
	width:180px;
	height:196px
}
ul.imgBlocks li a{
	color:#ae0b08;
}
ul.imgBlocks li a:hover{
	color:#333;
}
/*
------------------------------------------------------
Footer
------------------------------------------------------
*/
#footer{
	background:url(../../global/images/footer.jpg) no-repeat center bottom #ae0a08;
	height:58px;
	margin:0 auto;
	width:100%;
	z-index:1;
	position:relative;
	color:#ff9933;
	bottom:0;
}
#footer ul{
	width:960px;
	margin:0 auto;
	padding:33px 0 0 0
}
#footer li{
	width:50%;
	float:left;
	line-height:1.2em;
	list-style:none;
	color: #EBB;
}
#footer li.dm{
	width:50%;
	float:right;
	text-align:right;
	line-height:1.2em;
	display:none;
}
/*
------------------------------------------------------
Latest News - CSS
------------------------------------------------------
*/
#news{
	width:auto;
	display:block;
}
#news ul li{
	padding:0px 0;
	font-size:13px;
	font-family: 'Roboto', sans-serif;
	line-height:1.3em;
	text-align:justify;
		
}
.newsticker-jcarousellite2 { 
	width:auto; 
	margin:0;
}
.newsticker-jcarousellite2 ul li{ 
	display:block; 
	float:left; 
	width:350px;
	height:100px;
}

/*
------------------------------------------------------
Latest Offer - CSS
------------------------------------------------------
*/
#offer{
	width:auto;
	float:left;
	display:block;
}
#offer ul li{
	padding:10px 0;
	font-size:12px;
	line-height:1.3em;
	text-align:justify;
	border-bottom:1px dotted #ccc;
		
}
.newsticker-offer { 
	width:auto; 
	margin:0;
}
.newsticker-offer ul li{ 
	display:block; 
	float:left; 
	width:350px;
	height:100px;
}

/*
------------------------------------------------------
Whats New - CSS
------------------------------------------------------
*/
#whatsNew{
	width:auto;
	float:left;
	display:block;
}
#whatsNew ul li{
	padding:10px 0;
	font-size:12px;
	line-height:1.3em;
	text-align:justify;
	border-bottom:1px dotted #ccc;
		
}
.newsticker-whatsNew { 
	width:auto; 
	margin:0;
}
.newsticker-whatsNew ul li{ 
	display:block; 
	float:left; 
	width:350px;
	height:100px;
}

.gallery{}
.gallery a img{ margin:0 24px 20px 0; background:#f7f7f7; border:1px solid #ddd;  padding:5px; width:180px; height:200px;}

.grid li { list-style:none; float:left; margin:0 20px 20px 0}
.grid li a{ border:1px solid #ddd; display:inline-block; padding:5px; }
.grid li a:hover{ border:1px solid #666;}

.ui-tabs-vertical .ui-tabs-nav {
padding: .2em .1em .2em .2em;
float: left;
width: 15em !important;
overflow:auto !important;
height:350px !important;
}
.ui-tabs .ui-tabs-nav li a {
padding: .2em 0.3em !important;
font-size: 13px !important;
text-transform:uppercase;
}

.ui-tabs-vertical .ui-tabs-panel {width: 44em !important;}

table.contact td{ vertical-align:top; padding:10px;}

.smallAnimals { background:#222 url(../../global/images/rabbits-running.jpg) no-repeat right center !important; display:block;}

.register							{float:left; width:90%; padding:0;}
.register h4						{font-size: 20px;padding: 8px 0;color: #cc0000; margin:0; line-height:21px; height:inherit; font-weight:normal;}
.register li						{float:left; width:100%; display:block; padding:5px 0;}
.register li dd						{float:left; width:50%; display:block;}
.register li span					{float:left; width:100%; display:block;}
.register li tt						{float:left; width:100%; display:block;}
.inputtext							{width:300px; padding:6px; border:#999999 1px solid;}
.inputtextarea						{width:700px; padding:6px; border:#999999 1px solid;}
.inputtext1							{width:314px; padding:6px; border:#999999 1px solid;}
.inputtext2							{padding:6px; border:#999999 1px solid; width:auto;}

.baloon_form								{background:url(../../global/images/form_buttons.jpg) left top no-repeat; width:90px; height:30px; color:#FFF; font-size:15px; border:none;}
.baloon_form:hover, .baloon_form:focus		{background:url(../../global/images/form_buttons.jpg) left bottom no-repeat; }