/*-----------------------------------------------------------------------------------------------------------
Description:     General Layout
Author:          Shemsedin Shemi Callaki at 
Url:             www.oxwebs.com		 
Last Updated:    October 2009
-----------------------------------------------------------------------------------------------------------*/

/* STANDARD FORMATTING 
=========================================================================================== */
* {
	margin: 0;
 	padding: 0;
}

body {
	font-family:Verdana;
/*font-family:Arial, Helvetica, sans-serif;*/
	font-size:63.3%;
	margin:0;
	padding:40px 0;
	/*min-width:980px;*/
	min-width:760px;
	text-align:left;
	line-height:140%;                         
	background:#ffffff url(/ekmps/shops/fiddespayne/resources/Design/orange-bg.jpg) top center no-repeat;
	/*background:#ffffff url(../images/generic/orange-bg.jpg) top center no-repeat;*/
	
	color:#7c7c7c;
}


/* Generic 
=========================================================================================== */
h1 {
	font-size: 2.4em; margin:0;
}
h2 {
	font-size: 2.0em; margin:0;
}
h3 {
	font-size: 1.6em; margin:0;
}
img {
	border:none;
}
p {
	color:#7c7c7c; font-size:110%; margin:0;
}
ul {
	list-style-type:none; margin:0; padding:0;
}
a:link {
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
a:active {
	text-decoration:none;
}
/*this has been commented out as it clashes with ekmpowershop tags.  in particular makes the line (hr) long which
couses to go out of the middle content*/
/*hr {
	float:left; position:absolute; border:0; height:1px;
}*/
.right {
	float:right;
}




body.green { background:#ffffff url(../images/generic/green-bg.jpg) top center no-repeat; }
body.green #branding { border-bottom:#5a8443 5px solid; }
body.green #scrollable-holder { border-top:#5a8443 2px solid; border-bottom:#5a8443 5px solid; }
body.green ul.mainNav li.main a { color:#5a8443; }
body.green .infoArea p.title { color:#5a8443; }


body.blue { background:#ffffff url(../images/generic/blue-bg.jpg) top center no-repeat; }
body.blue #branding { border-bottom:#4399cd 5px solid; }
body.blue #scrollable-holder { border-top:#4399cd 2px solid; border-bottom:#4399cd 5px solid; }
body.blue ul.mainNav li.main a { color:#4399cd; }
body.blue .infoArea p.title { color:#4399cd; }


body.pink { background:#ffffff url(../images/generic/pink-bg.jpg) top center no-repeat; }
body.pink #branding { border-bottom:#de64c5 5px solid; }
body.pink #scrollable-holder { border-top:#de64c5 2px solid; border-bottom:#de64c5 5px solid; }
body.pink ul.mainNav li.main a { color:#de64c5; }
body.pink .infoArea p.title { color:#de64c5; }


body.purple { background:#ffffff url(../images/generic/purple-bg.jpg) top center no-repeat; }
body.purple #branding { border-bottom:#aa64d6 5px solid; }
body.purple #scrollable-holder { border-top:#aa64d6 2px solid; border-bottom:#aa64d6 5px solid; }
body.purple ul.mainNav li.main a { color:#aa64d6; }
body.purple .infoArea p.title { color:#aa64d6; }


.revealcontent{
	visibility: hidden;
}


/* Structure 
=========================================================================================== */
div#wrapper {
	width: 980px; margin: auto; text-align: left;
}
#branding {
	height: 125px; border-bottom:#f15b22 5px solid;
}
#content {
	width:980px;
}


#pageContent {
padding-top:10px;
padding-left:10px;

	float:left;/*float:right; position:relative;*/ width:642px; /*width:816px;*//* height:440px; */
	
	/*border-style:solid; border-color:#000000;*//*this is for testing purpose. to see the main content borders*/
}

#secondaryNav {
	float:left;/*added*/
	width:164px; padding-top:10px;	
}
/*added*/
#rightNav {
	float:right;/*added*/
	width:164px; padding-top:10px;	
}

#scrollable-holder {
	float:left; position:relative; display:inline; width:980px; padding:15px 0 5px 0;
	border-top:#f15b22 2px solid; border-bottom:#f15b22 5px solid; background:url(../images/generic/scrollable-bg.gif) top repeat-x;
}
.clear {
	clear: both; text-indent: -9999px;
}	
#branding .logo {
	float:right; position:relative; top:26px; right:10px; border:0;
}

/* Layout
=========================================================================================== */
#homePanel {
	float:left; position:absolute; display:block; z-index:100; width:940px; margin:60px 0 0 20px; 
}

.infoArea {
	float:right; position:absolute; display:block; width:240px; margin:5px 15px 0 0; right:0;
}
	.infoArea img {
		float:right; margin-left:10px;
	}
	.infoArea p.title {
		font-weight:bold; color:#f15b22; margin-bottom:4px; font-size:120%;
	}
		.infoArea p {
			color:#999999; font-size:110%; line-height:130%;
		}
			.infoArea p a {
				color:#999999;
			}




/* Primary Navigation 
=========================================================================================== */
ul.mainNav {
	float:left; position:relative; display:inline; width:120px; height:125px;
	border-left:#cccccc 1px solid; padding:0 8px;
	text-transform:lowercase;/*this to make view cart ekmtags lowercase */
}
	ul.mainNav li {
		font-size:110%; line-height:140%;
	}
		ul.mainNav li a {
			color:#999999; display:block; text-decoration:none;
		}
			ul.mainNav li a:hover, ul.mainNav li.active a {
				color:#00aeef; text-decoration:underline;
			}
			ul.mainNav li.main a {
				font-size:110%; font-weight:bold; color:#f15b22; line-height:160%;
			}
				ul.mainNav li.main a:hover, ul.mainNav li.main.active a {
					text-decoration:underline;
				}



/* Secondary Navigation
=========================================================================================== */
#secondaryNav h2 {
	font-size:130%; color:#ffffff; background:#666666; padding:7px 8px; margin-right:10px;
}
#secondaryNav ul {
	margin:6px 10px 0 5px;
	color:#666666;
}
	#secondaryNav ul li {
		font-size:110%; /*line-height:130%;*/ /*border-bottom:#cccccc 1px solid;*/
		line-height:50%;/*this has been added*/
		
	}
		#secondaryNav ul li a {
			color:#666666; display:block; padding:5px 5px 4px 3px; text-decoration:none;
		}
			#secondaryNav ul li a:hover {
				background:#f7f7f7; text-decoration:underline;
			}
			#secondaryNav ul li.active a {
				background:#e8e8e8; text-decoration:underline;
			}

#secondaryNav h2.bakery {
	background:#f15b22;
}
#secondaryNav h2.herbs {
	background:#5a8443;
}
	


/*--------------------------------------------------------------------------------------------------*/
/*right Navigation
--------------------------------------------------------------------------------------------------*/

#rightNav h2 {
	font-size:130%; color:#ffffff; background:#666666; padding:7px 8px; margin-right:10px;
}
#rightNav ul {
	margin:6px 10px 0 5px;
	color:#666666;
}
	#rightNav ul li {
		font-size:110%; line-height:130%; /*border-bottom:#cccccc 1px solid;*/
		/*line-height:50%;this has been added*/
	}
		#rightNav ul li a {
			color:#666666; display:block; padding:5px 5px 4px 3px; text-decoration:none;
		}
			#rightNav ul li a:hover {
				background:#f7f7f7; text-decoration:underline;
			}
			#rightNav ul li.active a {
				background:#e8e8e8; text-decoration:underline;
			}
			
			#rightNav ul ol{
			padding-left:17px;/*this is for the listed product on best sellers*/
			}

#rightNav h2.heading {
	background:#f15b22;
}
#rightNav h2.herbs {
	background:#5a8443;
}





			
/* Content Area - backgrounds
=========================================================================================== */
#homepage #pageContent {
	/*width:980px;*/
	width:640px;/*added*/
}
#homepage #pageContent .homeFlash {
	background:url(../homepage-movie.swf) no-repeat left !important;
}
#pageContent.mapMenu {
	background:#e0eafe url(../images/generic/worldmap.jpg) top left no-repeat;
}
#pageContent.baking {
	background:#ffffff url(../images/generic/baking.jpg) top left no-repeat;
}




/* Menu
=========================================================================================== */
#frontItems {
	float:left; width:816px; height:480px;
}

.mapItem {
	float:left; position:absolute; display:inline;
}
	.mapItem:hover {
	}
	.mapItem a {
		display:block;
	}


/*Front Button Locations*/

	.mapItem.USA {
		top:30px; left:40px; width:250px; height:200px;
	}
		.mapItem.USA a {
			width:250px; height:200px; 
		}
		
	.mapItem.southAmerica {
		top:240px; left:210px; width:120px; height:190px;
	}
		.mapItem.southAmerica a {
			width:120px; height:190px;
		}
		
	.mapItem.Africa {
		top:180px; left:340px; width:140px; height:190px;
	}
		.mapItem.Africa a {
			width:140px; height:190px;
		}
		
	.mapItem.USSR {
		top:40px; left:500px; width:250px; height:130px;
	}
		.mapItem.USSR a {
			width:250px; height:130px;
		}

/* History
=========================================================================================== */
#pageContent.history {
	background:url(../images/generic/history-bg.jpg) top left no-repeat;
}
	#pageContent.history p {
		float:left; font-size:110%; line-height:150%; width:380px; 
		margin:160px 0 0 18px;
	}

/* Products
=========================================================================================== */
#pageContent.products {
	background:url(../images/generic/products-bg.jpg) top left no-repeat;
}
	#pageContent.products p {
		float:left; font-size:110%; line-height:150%; width:480px; 
		margin:160px 0 0 35px;
	}
	

/* Baking Front Page
=========================================================================================== */
#pageContent.bgBaking {
	background:url(../images/generic/baking-bg.jpg) top left no-repeat;
}
	#pageContent.bgBaking h1 {
		margin:40px 0 0 30px; width:327px; height:271px; text-indent:-5000em; overflow:hidden;
		background:url(../images/generic/baking-title.gif) top left no-repeat;
	}
/* Disney Cake Kits
=========================================================================================== */
#pageContent.disneyCake {
	text-align:center;
}
	#pageContent.disneyCake h1 {
		font-size:190%; line-height:120%; color:#5c5d60; margin:10px 0;
	}
		#pageContent.disneyCake p {
			font-size:120%; color:#5c5d60; line-height:140%; width:700px; margin:0 auto;
		}


/* Disney Icing
=========================================================================================== */
#pageContent.disneyIcing {
	background:url(../images/generic/disney-icing.jpg) top left no-repeat;
}
	#pageContent.disneyIcing p.princess {
		float:left; font-size:130%; line-height:160%; font-weight:bold; color:#af3b77; width:140px; 
		margin:120px 0 0 30px; text-align:center;
	}
	#pageContent.disneyIcing p.winnie {
		float:right; font-size:130%; line-height:160%; font-weight:bold; color:#499bd0; width:330px; 
		margin:380px 25px 0 0; text-align:center;
	}

/* Disney Candles
=========================================================================================== */
#pageContent.disneyCandles {
	background:url(../images/generic/disney-candles.jpg) top left no-repeat;
}
	#pageContent.disneyCandles p.candles {
		float:left; font-size:130%; line-height:160%; font-weight:bold; color:#005c9b; width:120px; 
		margin:120px 0 0 34px; text-align:center;
	}

/* High School Musical
=========================================================================================== */
#pageContent.highSchool {
	background:url(../images/generic/hsm-product.jpg) top right no-repeat;
}
	#pageContent.highSchool .pic {
		float:left; margin-top:150px;
	}

/* Winnie The Pooh
=========================================================================================== */
#pageContent.pooh {
	background:url(../images/generic/pooh-product.jpg) top right no-repeat;
}
	#pageContent.pooh .pic {
		float:left; margin-top:150px;
	}
	
/* Princess
=========================================================================================== */
#pageContent.princess {
	background:url(../images/generic/princess-product.jpg) top right no-repeat;
}
	#pageContent.princess .pic {
		float:left; margin-top:120px;
	}

/* Mr Men
=========================================================================================== */
#pageContent.mrmen {
	background:url(../images/generic/mrmen-product.jpg) top right no-repeat;
}
	#pageContent.mrmen .pic {
		float:right; margin-top:244px;
	}
	
	

/* Indian Spices
=========================================================================================== */
#pageContent.indianSpices {
	background:#ffffff url(../images/generic/indian-spices.jpg) top right no-repeat;
}
	#pageContent.indianSpices h1 {
		margin:25px 0 0 20px; width:390px; height:178px; text-indent:-5000em; overflow:hidden;
		background:url(../images/generic/title-indianSpices.gif) top right no-repeat;
	}
	#pageContent.indianSpices p {
		margin:25px 0 0 20px; font-size:120%; line-height:150%; width:240px;
	}
	
	.hotSpot { float:left; position:absolute; display:inline; }
	.hotSpot a { display:block; }
	
	.hotSpot.tikka { top:175px; left:300px; width:110px; height:230px; }
	.hotSpot.tikka a { width:110px; height:230px; }
	.hotSpot.madras { top:175px; left:425px; width:110px; height:230px; }
	.hotSpot.madras a { width:110px; height:230px; }
	.hotSpot.masala { top:175px; left:545px; width:110px; height:230px; }
	.hotSpot.masala a { width:110px; height:230px; }
	.hotSpot.korma { top:175px; left:665px; width:110px; height:230px; }
	.hotSpot.korma a { width:110px; height:230px; }
	
	
/* Jamie Oliver
=========================================================================================== */
#pageContent.jamieOliver {
	background:#ffffff url(../images/generic/jamie-oliver.jpg) top left no-repeat;
}
	#pageContent.jamieOliver h1 {
		margin:180px 0 0 20px; width:222px; height:98px; text-indent:-5000em; overflow:hidden;
		background:url(../images/generic/title-jamieOliver.gif) top left no-repeat;
	}
	#pageContent.jamieOliver p {
		margin:20px 0 0 18px; font-size:120%; line-height:150%; width:250px;
	}	

/* Mini Marshmallows
=========================================================================================== */
#pageContent.miniMarshmallows {
	background:#ffffff url(../images/generic/mini-marshmallows.jpg) bottom right no-repeat;
}
	#pageContent.miniMarshmallows h1 {
		margin:10px 0 0 13px; width:496px; height:145px; text-indent:-5000em; overflow:hidden;
		background:url(../images/generic/title-miniMarshmallows.gif) top left no-repeat;
	}
	#pageContent.miniMarshmallows p {
		margin:190px 0 0 600px; font-size:120%; line-height:150%; width:200px;
	}
	/* Christmas Cupcakes
=========================================================================================== */
#pageContent.christmas {
	background:#ffffff url(../images/generic/christmas-bg.jpg) bottom right no-repeat;
}
	#pageContent.christmas h1 {
		float:left; margin:20px 0 0 18px; width:272px; height:142px; text-indent:-5000em; overflow:hidden;
		background:url(../images/generic/title-christmas.gif) top left no-repeat;
	}
	#pageContent.christmas p {
		margin:190px 0 0 40px; font-size:120%; line-height:150%; width:200px; text-align:center;
	}
/* 4-in-1 Sprinkler
=========================================================================================== */
#pageContent.sprinklers {
	background:#ffffff url(../images/generic/sprinklers.jpg) bottom right no-repeat;
}
	#pageContent.sprinklers h1 {
		margin:38px 0 0 20px; width:436px; height:165px; text-indent:-5000em; overflow:hidden;
		background:url(../images/generic/title-sprinklers.gif) top left no-repeat;
	}
	#pageContent.sprinklers p {
		margin:-190px 0 0 25px; font-size:120%; line-height:150%; width:300px;
	}
	
	
/* Candles
=========================================================================================== */
#pageContent.candles {
	background:#ffffff url(../images/generic/candles.jpg) bottom right no-repeat;
}
	#pageContent.candles h1 {
		margin:10px 0 0 20px; width:252px; height:123px; text-indent:-5000em; overflow:hidden;
		background:url(../images/generic/title-candles.gif) top left no-repeat;
	}
	#pageContent.candles p {
		margin:30px 0 0 25px; font-size:120%; line-height:150%; width:160px;
	}
	
	/* Spice It Up
=========================================================================================== */
#pageContent.spice {
	background:#ffffff url(../images/generic/spice-bg.jpg) bottom right no-repeat;
}
	#pageContent.spice h1 {
		float:left; margin:10px 0 0 15px; width:352px; height:144px; text-indent:-5000em; overflow:hidden;
		background:url(../images/generic/title-spice.gif) top left no-repeat;
	}
	#pageContent.spice p {
		margin:30px 0 0 400px; font-size:110%; line-height:140%; width:160px;
	}
	
/* Vanilla
=========================================================================================== */
#pageContent.vanilla {
	background:#ffffff url(../images/generic/vanilla-bg.jpg) bottom left no-repeat;
}
	#pageContent.vanilla p {
		float:right; margin:370px 50px 0 0; font-size:120%; line-height:150%; width:240px; text-align:center;
	}
	
/* Seasonings
=========================================================================================== */
#pageContent.seasoning {
	background:#ffffff url(../images/generic/seasoning.jpg) bottom right no-repeat;
}
	#pageContent.seasoning h1 {
		margin:25px 0 0 160px; width:357px; height:190px; text-indent:-5000em; overflow:hidden;
		background:url(../images/generic/title-seasoning.gif) top left no-repeat;
	}
	#pageContent.seasoning p {
		float:left; margin:20px 0 0 15px; font-size:120%; line-height:150%; width:160px;
	}
	
	.hotSpot.american { top:235px; left:25px; width:100px; height:200px; }
	.hotSpot.american a { width:100px; height:200px; }
	.hotSpot.cajun { top:235px; left:178px; width:100px; height:200px; }
	.hotSpot.cajun a { width:100px; height:200px; }
	.hotSpot.tex { top:235px; left:330px; width:100px; height:200px; }
	.hotSpot.tex a { width:100px; height:200px; }
	.hotSpot.jamaican { top:235px; left:490px; width:100px; height:200px; }
	.hotSpot.jamaican a { width:100px; height:200px; }
	
	
/* Seasonings
=========================================================================================== */
#pageContent.decorations {
	background:#ffffff url(../images/generic/decorations.jpg) bottom right no-repeat;
}
	#pageContent.decorations h1 {
		margin:8px 0 0 20px; width:470px; height:131px; text-indent:-5000em; overflow:hidden;
		background:url(../images/generic/title-decorations.gif) top left no-repeat;
	}
	#pageContent.decorations p {
		float:left; margin:25px 0 0 20px; font-size:120%; line-height:150%; width:140px;
	}
	
	.hotSpot.sugar { top:150px; left:190px; width:60px; height:260px; }
	.hotSpot.sugar a { width:60px; height:260px; }
	.hotSpot.rainbow { top:150px; left:260px; width:65px; height:260px; }
	.hotSpot.rainbow a { width:65px; height:260px; }
	.hotSpot.pearl { top:150px; left:330px; width:70px; height:260px; }
	.hotSpot.pearl a { width:70px; height:260px; }
	.hotSpot.magic { top:150px; left:405px; width:70px; height:260px; }
	.hotSpot.magic a { width:70px; height:260px; }
	/* Decorations
=========================================================================================== */
#pageContent.decorations {
	background:#ffffff url(../images/generic/decorations.jpg) bottom right no-repeat;
}
	#pageContent.decorations h1 {
		margin:8px 0 0 20px; width:470px; height:131px; text-indent:-5000em; overflow:hidden;
		background:url(../images/generic/title-decorations.gif) top left no-repeat;
	}
	#pageContent.decorations p {
		float:left; margin:15px 0 0 20px; font-size:120%; line-height:150%; width:140px;
	}
	.hotSpot.sugar { top:150px; left:190px; width:60px; height:260px; }
	.hotSpot.sugar a { width:60px; height:260px; }
	.hotSpot.rainbow { top:150px; left:260px; width:65px; height:260px; }
	.hotSpot.rainbow a { width:65px; height:260px; }
	.hotSpot.pearl { top:150px; left:330px; width:70px; height:260px; }
	.hotSpot.pearl a { width:70px; height:260px; }
	.hotSpot.magic { top:150px; left:405px; width:70px; height:260px; }
	.hotSpot.magic a { width:70px; height:260px; }
	
	
	

/* Recipe Page
=========================================================================================== */
#pageContent h1.recipes {
	margin:10px 10px 0 10px; width:757px; height:202px; text-indent:-5000em; overflow:hidden;
	background:url(../images/generic/recipes-title.gif) top left no-repeat;
}
#pageContent h1.herbuses {
	margin:10px; width:782px; height:159px; text-indent:-5000em; overflow:hidden;
	background:url(../images/generic/herb-uses-title.gif) top left no-repeat;
}

.recipeHolder {
	float:left; border:#e7e2bd 2px solid; padding:15px; width:95%; margin:10px 0 15px 0;
}
	.recipeHolder h2 {
		font-size:230%; font-weight:normal; padding-bottom:10px; margin-bottom:15px; border-bottom:#e7e2bd 1px solid;
	}
		.recipeHolder h2 em {
			font-size:70%; color:#999;
		}
	.recipeHolder h3 {
		font-size:150%; margin-bottom:5px; color:#aa64d6;
	}
	.recipeHolder p {
		font-size:120%; line-height:140%;
	}
		.recipeHolder ul {
			margin:10px 20px 20px 20px; list-style:disc;
		}
			.recipeHolder ul li {
				font-size:120%; line-height:140%; color:#666;
			}
		.recipeHolder ol {
			margin:10px 20px 20px 20px; 
		}
			.recipeHolder ol li {
				font-size:120%; line-height:140%; color:#666; padding-bottom:6px;
			}


dl {
	float:left; border:#e7e2bd 2px solid; width:20%; padding:10px; height:100px; margin:0 15px 15px 0;
}
	dt {
		font-size:130%; line-height:130%; font-weight:bold; margin-bottom:5px;
	}
	dd {
		font-size:110%; color:#666;
	}

	
	
/* Image Enlarge Overlay
=========================================================================================== */
#overlay {
	width:auto !important; height:550px ; text-align:center;
	background-image:url(../images/popup/white.png);			
	display:none;
}
#overlay div.close {
	position:absolute; right:-15px; top:-15px; cursor:pointer; height:35px; width:35px;
	background:url(../images/popup/close.png) !important;
}