/* v1.0 */
/* **************************************************
	General declarations and accessibility
   ************************************************** */
html {height: 100%;}
body {
	margin: 0;
	background-color: #fff;
	color: #1A1A1A;
	height: 100%;
	}
a {
	text-decoration:none;
	color: #15740e;
	}
a:active,
a:hover,
a:focus {
	text-decoration: underline;
	}
.highlight {font-weight: bold;}
.hr hr {display: none;}
.hr{
	background: #e0e0e0;
	height: 1px;
	margin: 1em 0;
	clear: both;
	}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
	}
.clearfix {display: inline-block;}
.clearfix {display: block}
.accessibility{
    display: none;
	}
fieldset {border: none; margin: 0; padding: 0;}
legend {display: none;}
img {border: 0;}
ol,ul{list-style:none; margin: 0; padding: 0;}
dd,dl {margin:0;}

/* **************************************************
	Typography
   ************************************************** */
/* --------- Font  Generic elements  ---------- */
body 
{
    font-size: 10px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #333333;
    line-height: 1.3;
}
/* ----------- Font-size heading and font face ------------ */
h1,h2,h3,h4 {color: #333333;}
h1 
{
	font-size: 1.4em; 
	margin: 4px 0 14px 0;
}
h2 
{
	margin: 0;
	font-size: 1.2em; 
	font-weight: normal; 
}
h3 { font-size: 1.8em; }
h4 { font-size: 1em; font-weight: bold; margin: 0; }

/* --------- menu fonts --------- */
/*top navigation */
#header #headerContent,
#header #headerContent a
{
	font-size: 1.1em;
	color: #fff;
	font-weight: bold;
}
#header #headerContent .selected,
#header #headerContent .selected a
{
	color: #005019;
}
/* generic backlink for pages */
a.backLink
{
	background: transparent url('gfx/green_bullet_left.gif') no-repeat scroll 0 4px;
	padding-left: 7px;
	font-size: 1.1em;
}

/* --------- Search box fonts --------- */
#searchBox input.searchText
{
}

/* --------- filter fonts --------- */
h2#filter 
{
	margin: 12px 0 9px 0;
	font-weight: bold;
}

/* --------- filterInfo area ---------- */
.filterInfo
{
	font-size: 1.1em;
}

a.greenButton
{
	color: #fff;
}

/* --------- filter box fonts ------ */
.recipeFilterList h3
{
	font-size: 1.1em;
	color: #009114;
}


/* --------- box fonts --------- */
.box h2
{
	color: #fff;
	margin: 5px 0 0 7px;
}
/* --------- recipe list fonts --------- */
.recipeList h3
{
	font-size: 1.1em;
	color: #009114;
}
.recipeList span.timeAndIngredients
{
	color: #333;
}
.recipeList span.timeAndIngredients span.pipe
{
	color: #666;
}
/* --------- recipe fonts --------- */
#page.recipePage .ingredients
{
	font-size: 1.1em;
}
#page.recipePage .recipe
{
	font-size: 1.1em;
}
#page.recipePage .recipe .signature
{
	font-weight: bold;
}

#page.recipePage .moreFacts
{
	font-size: 1em;
	color: #676767;
}
#page.recipePage .moreFacts strong
{
	display: block;
}

/* --------- footer fonts --------- */
#footer .copyright
{
	color: #666;
}

/* --------- newsletter signup fonts -----*/
#page.newsLetter .thanksBox
{
	font-size: 1.1em;
}
#page.newsLetter .box .boxHeading h2 
{
	font-weight: bold;
}
#page.newsLetter .box .boxContent p 
{
	font-size: 1.1em;
}

/* **************************************************
	Main containers
   ************************************************** */
#page
{
	position: relative;
}
#header 
{
	height: 37px;
	background: transparent url('gfx/top_bg_repeat.png') repeat-x 0 0;
	border-top: solid 1px #ebffd8;
	border-bottom: solid 1px #086c23;
}
	#header #headerContent
	{
		height: 37px;
		background: transparent url('gfx/top_bg_left.gif') no-repeat 0 0;
	}
#content
{
	padding: 7px 9px 24px 9px;
	border-top: solid 1px #2b8425;
}
#footer 
{
	padding: 5px 9px 13px 9px;
	border-top: solid 1px #c2c2c2;
}

/* **************************************************
	Special Graphic Elements
   ************************************************** */

/* --------- search box --------- */
#searchBox
{
	height: 42px;
	background: transparent url('gfx/search_box_repeat.png') repeat-x 0 0;
	margin-bottom: 9px;
	width: 205px; /*only old iemobiles*/
}
html>body #searchBox
{
	/*other than ie*/
	width: auto;
	min-width: 205px
}
#page.recipePage #searchBox
{
	margin-bottom: 5px;
}

	#searchBox .searchBoxLeft
	{
		float: left;
		width: 2px;
		height: 42px;
	}
	#searchBox .searchBoxRight
	{
		float: right;
		width: 2px;
		height: 42px;
	}
	#searchBox input.searchText
	{
		border: 1px solid #ababab;
		height: 18px;
		padding: 3px 7px 4px 7px;
		width: 130px;
	}
	#searchBox fieldset
	{
		float: left;
	}
	#searchBox .searchTextWrapper
	{
		float: left;
		margin: 8px 7px 0 4px;
	}
	#searchBox input
	{
		display: block;
		float: left;
	}
	/*#searchBox input.searchText:focus { background: #fff !important; }*/
	#searchBox input.searchBtn
	{
		margin: 8px 3px 0 4px;
	}

/* --------- filterInfo area ---------- */
.filterInfo
{
	margin-bottom: 3px;
}
ul.filterPath
{
	margin: 1px 0 4px 0;
	float: left;	
}
	ul.filterPath li
	{
		float: left;
		margin-right: 5px;
	}
	ul.filterPath li a
	{
		background:transparent url(gfx/green_bullet.gif) no-repeat scroll right 3px;
		padding-right: 11px;
	}
	ul.filterPath li a.last
	{
		background:none;
	}

.greenButton
{
	height: 21px;
	display: block;
	float: left;
	clear: left;
	margin: 5px 0 5px 0;
	background:transparent url(gfx/greenbutton_bg_left.png) no-repeat scroll 0 0;
	padding-left: 15px;
}
	.greenButton span
	{
		display: block;
		background:transparent url(gfx/greenbutton_bg_right.gif) no-repeat scroll right 0;
		height:18px;
		padding-right:8px;
		padding-top:3px;
	}


/* --------- filterBox ---------- */
#page .filterBox 
{
}

ul.recipeFilterList
{
	
}
	ul.recipeFilterList li
	{
		border-top: solid 1px #dcdcdc;
		padding: 0 9px 0 0;
		clear: both;
	}
	ul.recipeFilterList li.first
	{
		border-top: none;
	}
		ul.recipeFilterList .imgBox
		{
			width: 37px;
			float: left;
			margin-top: 6px;
			text-align: center;
			height: 20px;
			overflow: hidden;
		}
		ul.recipeFilterList .imgBox a {
		    display: block;
		    height: 25px;
		    width: 37px;
		}
		ul.recipeFilterList h3
		{
			margin: 0 0 1px 9px;
			padding-top: 6px;
		}
		ul.recipeFilterList h3.theme
		{
			margin-left: 37px;
		}
		ul.recipeFilterList h3 a
		{
			display: block;
			background:transparent url(gfx/green_bullet.gif) no-repeat scroll right 6px;
			margin: 2px 0 8px 0;
			padding-right: 11px;
		}

/* --------- generix boxes --------- */	
.box
{
	
}
.box .boxHeading
{
	background: transparent url('gfx/box_heading_bg_repeat.gif') repeat-x 0 0;
}
.box .boxHeading h2
{
	float: left;	
}
.box .boxHeading .boxHeadingLeft
{
	float: left;
	width: 4px;
	height: 24px;
	background: transparent url('gfx/box_heading_bg_left.gif') no-repeat 0 0;
}
.box .boxHeading .boxHeadingRight
{
	float: right;
	width: 4px;
	height: 24px;
	background: transparent url('gfx/box_heading_bg_right.gif') no-repeat 0 0;
}
.box .boxContent
{
	border: solid 1px #dcdcdc;
	border-top: none;
	background: #fcfcfc url('gfx/box_bg_repeat.gif') repeat-x 0 bottom;
}

/* --------- recipe lists --------- */
ul.recipeList
{
	
}
	ul.recipeList li
	{
		border-top: solid 1px #dcdcdc;
	}
	ul.recipeList li.first
	{
		border-top: none;
	}
		ul.recipeList li .imgBox
		{
			width: 47px;
			height: 47px;
			float: left;
			overflow: hidden;
			margin-right: 9px;
		}
		
		ul.recipeList h3
		{
			margin: 0 0 1px 6px;
			padding-top: 6px;
		}
		ul.recipeList .timeAndIngredients
		{
			margin-left: 6px;
			padding-left: 12px;
			background: transparent url('gfx/cooking_time_bg.png') no-repeat scroll 0 2px;
		}
	ul.recipeList li.featured ul.recipeList h3,
	ul.recipeList li.featured ul.recipeList .timeAndIngredients
	{
		margin-left: 56px
	}
/* --------- recipe list paging --------- */
#page .noHits div.paging{display: none;}
#page div.paging {
    width: 100%;
    position: relative;
    padding-bottom: 1em;
    margin-bottom: 30px;
    clear: both;
    float: none;
    z-index: 1;
}
#page div.paging .inactive {
    visibility: hidden;
}
#page div.paging .pages {
    position: absolute;
    width: 100%;
	text-align:center;
	padding: 4px 0 2px 0;
	top: 1.3em;
	}
#page div.paging .pages span {
    background: url('gfx/circleGray.gif') no-repeat right top;
    height: 18px;
    padding: 3px 7px 6px 0px;
}
#page div.paging .pages a {
	background:url('gfx/circleGray.gif') no-repeat left top;
    padding: 3px 0px 6px 8px;
	}
#page div.paging .pages a.selected,
#page div.paging .pages a.selected span {
	background-image:url('gfx/circleGreen.gif');
	color:#fff;
	}
#page div.paging .pages a:hover,
#page div.paging .pages a:hover span {
	background-image:url('gfx/circleGreenHover.gif');
	color:#fff;
	text-decoration: none;
	}

	/* Forward/back-buttons (paging) */
	div.pagingLeft {
	    position: absolute;
        overflow:hidden;
        left: 0px;
        top: 1.3em;
        z-index: 999;
		}
		div.pagingLeft div {
			}
			div.pagingLeft div a {
				display: block;
				width: 18px;
				height: 18px;
				background: transparent url('gfx/paging_firstlast_sprite.gif') no-repeat 0 -36px;
				text-indent:-999px;
				}
				div.pagingLeft div a:hover {background-position: 0 -54px;}
	div.pagingRight {
	    overflow:hidden;
        position: absolute;
        right: 0px;
        top: 1.3em;
        z-index: 999;
		}
		div.pagingRight div {
			}
			div.pagingRight div a {
				display: block;
				width: 18px;
				height: 18px;
				background: transparent url('gfx/paging_firstlast_sprite.gif') no-repeat top left;
				text-indent:-999px;
				}
				div.pagingRight div a:hover {background-position: 0 -18px;}

/* --------- Error text and 404's --------- */
.errorText {
    margin-top: 1em;
}
.errorText h2 {
    font-weight: bold;
}

/* --------- No search results --------- */
#noHits ul, #noHits p { font-size: 1.1em; }

#noHits ul {
    list-style-type: disc;
    list-style-position: inside;
    margin-left: 10px;
}
 
/* **************************************************
	Header area
************************************************** */
#header #headerContent ul
{
	margin-top: 12px;
	margin-left: 51px;
	float: left;
}
	#header #headerContent ul li
	{
		margin-left: 9px;
		float: left;
	}
    
    
    
/* **************************************************
	Footer area
************************************************** */
#footer .copyright
{
	margin-top: 3px;
	float: left;
}
#footer .footerLogo
{
	float: right;
	margin-left: 10px;
}


/* **************************************************
	Recipe Page
************************************************** */
#page.recipePage .imgBox
{
	overflow: hidden;
	margin-bottom: 15px;
	/*height: 138px;*/
}
#page.recipePage .ingredients
{
	padding: 10px 9px 10px 9px;
	background: #e5f0e6 none;
}
    .recipePage .karolineLogo
    {
	    float: right;
	    background: transparent url('gfx/karoline-recipelogo.gif') no-repeat scroll 0 0;
	    height: 43px;
	    width: 119px;
    }
	#page.recipePage .ingredients li.ingHeading
	{
		margin-top: 12px;
	}
	
#page.recipePage .recipe
{
	margin: 2px 0 0 0;
}	
#page.recipePage .moreFacts
{
	border: solid 1px #ccc;
}
#page.recipePage .noTopFill
{
	border-top-color: #fff;
}
#page.recipePage .moreFacts p
{
	margin: 9px 10px 13px 10px	
}


/* **************************************************
	Newsletter signup page
************************************************** */
#page.newsLetter .thanksBox
{
	border: solid 1px #ccc;
	background: #fcfcfc url(gfx/box_bg_repeat.gif) repeat-x scroll 0 top;
	margin-bottom: 10px;
}

#page.newsLetter .thanksBox p
{
	margin: 9px 10px 13px 10px	
}

#page.newsLetter .box .boxContent
{
	padding: 8px 9px 13px 9px;
	overflow: hidden;
}
#page.newsLetter .box .boxContent .imgBox
{
	overflow: hidden;
}
#page.newsLetter .box .boxContent p
{
	margin: 5px 0 5px 0;
}
#page.newsLetter .box .newsLetterTxtWrapper
	{
		float: left;
		margin: 6px 7px 0 4px;
		width: 175px;
	}
	#page.newsLetter .box input
	{
		display: block;
	}
	#page.newsLetter .box input.newsLetterTxt,
	#page.newsLetter .box input.password
	{
		border: 1px solid #ababab;
		height: 18px;
		padding: 3px 7px 4px 7px;
		width:170px;
	}
	#page.newsLetter .box span.passwordHeading {
	    margin-top: 10px;
	    font-size: 1.1em;
	    font-weight: bold;
	    display: block;
	} 
	#page.newsLetter .box div.error {
	    color: Red;
	    font-size: 1.1em;
	    margin: 5px 0 2px 0;
	}
	/*#page.newsLetter .box input.newsLetterTxt:focus { background: #fff !important; }*/
	#page.newsLetter .box input.newsLetterBtn
	{
		margin: 0 3px 0 4px;
		padding-top: 0;
		clear: both;
	}
/* **************************************************
	Newsletter signup page
************************************************** */
    .shoppingListPage dd,
    .shoppingListPage dt {
        padding: 10px;
        font-size: 13px;
    }
    .shoppingListPage dt {
        clear: left;
        float: left;
        min-width: 15%;
        font-weight: bold;
    }
    .shoppingListPage dd {
        border-bottom: 1px solid #c2c2c2;    
    }
    .shoppingListPage .strikethrough {
        text-decoration: line-through;
        opacity: .5;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;  
    }
    .shoppingListPage .bought {
        text-decoration: line-through;
        color: #999999;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;  
    }
    .shoppingListPage div.heading {
        font-size: 13px;
        color: #3d3d3d;
        background-color: #d9d9d9;
        padding: 7px 10px;
        border-bottom: 1px solid #c2c2c2;
    }
    .shoppingListPage div.boxContent {
        border-bottom: none;
    }
    .shoppingListPage .border {
        border-bottom:  1px solid #c2c2c2;
    }
    .shoppingListPage p.intro {
        font-size: 11px;
        margin-top: 0;
    }
    .shoppingListPage h1 {
        margin-bottom: 7px;
    }
    .shoppingListPage .heading:after {
        content: ":";
    }
    .shoppingListPage .noOfItems {
        margin-left: 5px;
        font-weight: bold;
    }