@charset "utf-8";
/* CSS Document 
@author Imran Rashid 


This css will be focused on the slideshow and the rest of the homepage showing advertisment 
of dishes and its description.  
*/

/*-------- slide show --------*/

/*change the size of the background size*/
div.wrap 

{
	
	width: 600px;
	margin-bottom : 0px; auto;
	text-align : left;
}

div#top div#nav 
{
	float : left;
	clear : both;
	width : 700px;
	height : 52px;
	margin : 22px 0 0;
}



div#top div#nav ul 

{
	float : left;
	width : 700px;
	height : 52px;
	list-style-type : none;
}


div#nav ul li
 
{
	float : left;
	height : 52px;
}


div#nav ul li a 

{
	border : 0;
	height : 52px;
	display : block;
	line-height : 52px;
	text-indent : -9999px;
}


div#header 


{	
	
	padding:40px;
	margin-left:82px;
	padding-right:200px;
}
/* moves the whole video and change the background size */
div#video-header

 
{
	background-color:red;
	height : 100px;
	margin : -1px 0 0;
}

/*the background canvas image */

div#header div.wrap

{
	height: 160px;
	background : url(../Images/header-bg.png) no-repeat 50% 0;
}


div#slide-holder
{
	float:right;
}
div#header div#slide-holder
 
{
	z-index : 40px;
	width : 400px;
	height : 299px;
	position : absolute;
}
/* controls the width and info label of the canvas*/
div#header div#slide-holder div#slide-runner
 
{	
	padding-right:40px;
	top: 9px;
	left: 9px;
	width: 550px;
	height : 379px;
	overflow : hidden;
	position : absolute;
}

/*control and change the image size*/
div#header div#slide-holder img
 
{
	left:12px;
	margin: 0px;
	display: none;
	position: absolute;
}

/*  moves the  image button controls */
div#header div#slide-holder div#slide-controls
 
{

	bottom: 255px;
	width: 700px;
	height: 46px;
	display: none;
	position: absolute;
	background: url(../images/slide-bg.png) 0 0;
}


/*controls the text field*/
div#header div#slide-holder div#slide-controls p.text 
{
	float: left;
	color: #fff;
	display: inline;
	font-size: 10px;
	line-height: 12px;
	margin-left: 3px;
	margin-bottom:-3px;
	text-transform : uppercase;
}

/*floats  the image button controls and movment*/
div#header div#slide-holder div#slide-controls p#slide-nav

 
{
	float : left;
	height : 48px;
	display : inline;
	margin : 11px 11px 0px 0;
}
/* controls the movement of the numbers*/
div#header div#slide-holder div#slide-controls p#slide-nav a 

{
	float : left;
	width : 24px;
	height : 24px;
	display : inline;
	font-size : 11px;
	margin : 0 5px 0 0;
	line-height : 24px;
	font-weight : bold;
	text-align : center;
	text-decoration : none;
	background-position : 0 0;
	background-repeat : no-repeat;
}

div#header div#slide-holder div#slide-controls p#slide-nav a.on 
{
	background-position : 0 -24px;
	
	
}

/* slide  button image */
div#header div#slide-holder div#slide-controls p#slide-nav a 

{
	background-image: url(../Images/silde-nav.png);
}



div#nav ul li a 
{
	background : url(images/nav.png) no-repeat;
}


/* wraps the colums*/
#wrapper2
{
	
	/*background-color:#0C0;  Green */
	
	
	
	
	
	
}
/*aligns the Image  side by sideside*/
#wrapper2 .col
{
	
	float:left;
	width:200px;
	display:inline-block;
}





/*controls the canvas size of the adverts underneath the homepage info*/

/*.food
{
	
	float:left;
	width:160px;
			
}

/*controls the canvas size of the adverts underneath the opening*/
/*.food2
{
	
	width:150px;
	text-align:center; 
	/*controls the canvas size of the adverts underneath the homepage info*/
}
/*colour covers the top sideadvert for all salma products*/
/*.sideFood { 

	
	width:180px;
	margin-left:8px;
	background-color:#d9d9d9;
	border-radius: 7px;
	-moz-border-radius:5px;
	
	 
}
/*creates orange border*/
/*.sideFood p 

{ 	padding-top:4px;
	padding-bottom:10px;
	background-color:#474646;
	margin-top:5px;
	text-align:center;
	border-radius: 0px;
	-moz-border-radius: 4px;
	
	
}
/*helps aligns the text underneath the images on all salma product advert*/
/*.sideFood a img 
{
	
	display: block; 
	margin-bottom: 5px; 
	margin-left:25px;
		
 }


/*line goes accross in the home page*/
#line
{
	border-bottom:1px solid #666;
}