@import url(typography.css);

/* CSS Document */
/* Normalisera margin och padding */
* {
	margin:0;
	padding:0;
}

/* Normalisera fontsize för headers */
h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:normal;

}

/* Normalisera list-style */
ol, ul {
	list-style:none;

}

/* Normalisera font-style och font-weight till normal */
address, caption, cite, code, dfn,th, var {
	font-style:normal;
	font-weight:normal;
}

/* Normalisera tabellstil från tabeller */
table {
	border-collapse:collapse;
	border-spacing:0;

}

/* Ta bort border från img och fieldset */
fieldset, img {
	border:none;

}

/* Vänsterställ text i th och caption */
th, caption {
	text-align:left;

}
/* Ta bort citationstecken */
q:before, q:after {
	content:'';

}

/*Ta bort underlinen på a element */
a {
	text-decoration:none;
	
}
.clearthefloats {
	clear:both;

}

html{
	text-align:center;
	
}

body {
	
	background:url(../img/backgrounds/header-bg.gif) 0 0 repeat-x #050505;
}	
body.brown {
	background:url(../img/backgrounds/header-bg.gif) 0 0 repeat-x #1a3125;
}
body.turqoise {
	background:url(../img/backgrounds/header-bg.gif) 0 0 repeat-x #046769;
}
body.green {
	background:url(../img/backgrounds/header-bg.gif) 0 0 repeat-x #194b2c;
}
body.red {
	background:url(../img/backgrounds/header-bg.gif) 0 0 repeat-x #751e16;
}
body.blue {
	background:url(../img/backgrounds/header-bg.gif) 0 0 repeat-x #064295;
}
body.marine {
	background:url(../img/backgrounds/header-bg.gif) 0 0 repeat-x #074a96;
}
body.orange {
	background:url(../img/backgrounds/header-bg.gif) 0 0 repeat-x #c6803e;
}
body.yellow {
	background:url(../img/backgrounds/header-bg.gif) 0 0 repeat-x #c19044;
}
body.bordeaux {
	background:url(../img/backgrounds/header-bg.gif) 0 0 repeat-x #312422;
}
body.pink {
	background:url(../img/backgrounds/header-bg.gif) 0 0 repeat-x #f54958;
}	
#header {
	margin: 0px auto ;
	text-align: left;
	width:860px;
	height:124px;
	
	

}

img#logotype {
	margin:14px 0;
}

#print_logotype {
	display:none;

}
div#topmenu {
	float:left;
	width:856px;
	border:2px solid #b2945c;
	background:url(../img/backgrounds/topmenu-bg.gif) 0 0 repeat-x;
}

html>body #topmenu {
	height:auto;
	
}

ul#topmenulist {
	float:left;
	background:url(../img/backgrounds/topmenulist-bg.gif) 0px 0px no-repeat;
	width:856px;
	
	height:auto;
	
	

}
#topmenulist li {
	float:left;
	padding:0 0 0 18px;
}


#wrap {
	margin: 0px auto ;
	text-align: center;
	width:100%;
	float:left;
	height:690px;
	padding-bottom:20px;
}

html>body #wrap {
	height:auto;
	min-height:670px;
	


}
/*Olika klassdefinitioner av wrap skapar korrekt bakgrund */


.base {
	background:url(../img/backgrounds/base-bg.gif) 0 0 repeat-x ;

}

.pink {
	background:url(../img/backgrounds/pink-bg.gif) 0 0 repeat-x #d31e53 ;
}

.green {
	background:url(../img/backgrounds/green-bg.gif) 0 0 repeat-x #1a4b2c;

}

.red {
	background: url(../img/backgrounds/red-bg.gif) 0 0 repeat-x #751e16;
}

.turqoise {
	background: url(../img/backgrounds/turqoise-bg.gif) 0 0 repeat-x #056769;
}

.brown {
	background: url(../img/backgrounds/brown.bg.gif) 0 0 repeat-x #702005;

}

.bordeaux {
	background:url(../img/backgrounds/bordeaux-bg.gif) 0 0 repeat-x #312522;

}

.yellow {
	background:url(../img/backgrounds/yellow-bg.gif) 0 0 repeat-x #c19044;

}

.orange {
	background:url(../img/backgrounds/orange-bg.gif) 0 0 repeat-x #c6803e;
}	

.blue {
	background:url(../img/backgrounds/blue-bg.gif) 0 0 repeat-x #054295;

}

.marine {
	background:url(../img/backgrounds/marine-bg.gif) 0 0 repeat-x #00001b; 

}

#holder {
	width:860px;
	margin: 0px auto ;

	
}

div#content_start{
	width:860px;
	text-align:left;
	margin:0px auto;
	height:auto;
	position:relative;
	padding-bottom:20px;
}

#content_start #mainpic {
	height:307px;
	border:2px solid #b2945c;
	border-bottom:none;
	position:relative;

}

div#mainpic {
	width:856px;
	
}

div#puffs {
	position:relative;
	height:170px;
	top:0;

}

div.puff {
	margin:0 0 0 0;
	padding:24px 0 0 2px;
	float:left;
	width:424px;
	border-bottom:2px solid #b2945c;
	background:url(../img/backgrounds/1puff-bg.jpg) 0 0 no-repeat;
	height:auto;
	
	
}

.puff#p2 {
	padding:0;
	margin:6px 0 0 7px;
	background:none;
	width:422px;
	border:2px solid #b2945c;
	height:154px;
	
}

#fonds {
	position:absolute;
	left:0;
	top:0;
}

div#start_products {
	border:2px solid #b2945c;
	border-left:none;
	width:856px;
	position: absolute;
	z-index:100;
	height:186px;
	
}

.fond {
	width:86px;
	position:absolute;
	top: 0px;
}



.prod_yellow {
	width:88px;

}

.prod_orange{
	left:86px;
	width:87px;
	
	
}

.prod_brown{
	left:170px;
	width:87px;

		
}
.prod_pink{
	left:256px;
	width:87px;
	
}
.prod_red{
	left:256px;
	width:87px;
	
}
.prod_bordeaux{
	left:342px;
	width:87px;
	
}
.prod_turqoise{
	left:428px;
	width:87px;
}
.prod_blue{
	left:514px;
	width:87px;
	
}
.prod_marine{
	left:600px;
	width:87px;

	
}
.prod_green{
	left:687px;
	width:88px;
	
}

.prod_uutiset{
	left:772px;
	width:88px;
	
}

#start_products #fonds .fond .prodinfo p { 
	display: none; 
	font-size:.95em;
	color:#fff;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	padding-top:10px;
	z-index:100;
	position:relative;

}

/*Hover effekt för att förlänga textfältet */
#start_products #fonds .fond:hover .prodinfo { 
	height: 225px; 
	z-index:100;

	
}
/*Hover effekt för att visa texten produkinfo */
#start_products #fonds .fond:hover .prodinfo p { 
	display: block; 
}


.prod_yellow:hover {
	background:url(../img/backgrounds/yellow-hover-bg.gif) bottom left no-repeat;
}

.prod_orange:hover {
	background:url(../img/backgrounds/orange-hover.gif) bottom left no-repeat;
}

.prod_brown:hover {
	background:url(../img/backgrounds/brown-hover.gif) bottom left no-repeat;

}

.prod_uutiset:hover {
	background:url(../img/backgrounds/uutiset-hover.gif) bottom left no-repeat;

}

.prod_pink:hover {
	background:url(../img/backgrounds/pink-hover.gif) bottom left no-repeat;

}.prod_red:hover {
	background:url(../img/backgrounds/red-hover.gif) bottom left no-repeat;

}.prod_bordeaux:hover {
	background:url(../img/backgrounds/bordeaux-hover.gif) bottom left no-repeat;

}.prod_turqoise:hover {
	background:url(../img/backgrounds/turqoise-hover.gif) bottom left no-repeat;

}.prod_blue:hover {
	background:url(../img/backgrounds/blue-hover.gif) bottom left no-repeat;

}
.prod_marine:hover {
	background:url(../img/backgrounds/marine-hover.gif) bottom left no-repeat;

}.prod_green:hover {
	
	background:url(../img/backgrounds/green-hover.gif) bottom left no-repeat;

}

div#product_details {
	display:none;
	
}

div#nutrition_details {
	display:none;
	padding-top:20px;

}

#content {
	background:#fff;
	text-align:left;
	border:2px solid #b2945c;
	height:705px;
	float:left;
	width:856px;
	position:relative;
	padding-bottom:20px;
	
		
}

html>body #content {
	height:auto;
	min-height:760px;

	

}

#left_content {
	width:214px;
	float:left;
}

#main_content {
	width:435px;
	float:left;
	background:none;
	padding-right:17px;

}

#main_maximized_leftalign_content {
	width:645px;
	padding-right:17px;
	float:left;

}

/*Receptbilden med padding och border */

.recipePicture {
	border:2px solid #b2945c;
	border-left:none;
	border-right:none;
	padding:10px 0;
	margin:4px 0;
	text-align:center;
	float:left;
	clear:both;
	width:100%;

}

/* Fält för receptsidan - extra stort då vi inte har ett högerfält  */
#main_content_max {
	width:640px;
	float:left;
	background:none;
}

/*Listan där alla recept visas med bild, rubrik och ikon */

ul#recipe_list {
	float:left;
	width:640px;
	display:inline;
}

#recipe_list li {
	float:left;
	margin:0 18px 0 0;
	height:190px;
	display:inline;

	

}

#recipe_list li img {
	border:1px solid #b2945c;

}

#search_hits{
	background:url(../img/backgrounds/antalTraffar-bg.gif) bottom left no-repeat;
	float:left;
	width:628px;
	text-align:center;


}

#search_hits p {
	background:url(../img/backgrounds/antalTraffar-bg-top.gif) 0 0 no-repeat;
	padding:4px 0;
	font-size:.95em;
	color:#b2945c;
}

#search_hits a {
	color:#b2945c;

}
#search_hits a.selected {
	color:#231f20;
}

#search_hits a.rew {
	margin-right:15px;

}
#search_hits a.ff {
	margin-left:15px;
	
}
#right_content {
	float:left;
	width:140px;
}

.ingredients {
	padding:9px;
	background:#f7f4ee;
	margin:17px 0 10px 0;
	font-size:.95em;
}

.searchoptions {
	padding:9px;
	background:#f7f4ee;
	margin:12px 0 10px 0;
	font-size:.95em;

}
#zoombutton {
	position:absolute;
	right:210px;
	top:15px;

}

table {
	width:100%;
	margin:10px 0;

}

table th, table td {
	margin:0;
	padding:3px 20px 3px 8px;
	font-size:.95em;	

}

table tr.alt {
	background:#f7f4ee;

}

table th {
	font-weight:bold;

}




/*Allmänna inställningar för alla Extras fält */
.extras {
	float:left;
	width:163px;
	text-align:center;
	padding-bottom:20px;
	font-size:.95em;
	z-index:50;
	margin:0 0 10px 5px;
	/*IE 6 Bug fix */
	display:inline;
}

#wrap #holder #content #right_content .extras .fondbottle{
	border:none;
	display:block;
	float:none;
	margin:0 0 0 30px;
	padding:0;

}

/*Utifrån vilken wrapper class ska toppen på .extras fältet ha olika bakgrunder*/
#wrap.base #holder #content #right_content .extras {
	background:url(../img/backgrounds/extras-beige-bg.gif) bottom left no-repeat;

}

#wrap.green #holder #content #right_content .extras {
	background:url(../img/backgrounds/extras-mint-bg.gif) bottom left no-repeat;

}

#wrap.pink #holder #content #right_content .extras {
	background:url(../img/backgrounds/extras-pink-bg.gif) bottom left no-repeat;

}

#wrap.turqoise #holder #content #right_content .extras, #wrap.blue #holder #content #right_content .extras {
	background:url(../img/backgrounds/extras-babyblue-bg.gif) bottom left no-repeat;

}
#wrap.red #holder #content #right_content .extras {
	background:url(../img/backgrounds/extras-babypink-bg.gif) bottom left no-repeat;

}

#wrap.marine #holder #content #right_content .extras {
	background:url(../img/backgrounds/extras-purple-bg.gif) bottom left no-repeat;

}

#wrap.orange #holder #content #right_content .extras {
	background:url(../img/backgrounds/extras-babyyellow-bg.gif) bottom left no-repeat;

}
#wrap.yellow #holder #content #right_content .extras {
	background:url(../img/backgrounds/extras-lightyellow-bg.gif) bottom left no-repeat;

}
#wrap.bordeaux #holder #content #right_content .extras {
	background:url(../img/backgrounds/extras-lightbordeaux-bg.gif) bottom left no-repeat;

}
#wrap.brown #holder #content #right_content .extras {
	background:url(../img/backgrounds/extras-lightbrown-bg.gif) bottom left no-repeat;

}

.extras ol {
	width:130px;
	margin:15px;
}

.extras ul {
	width:125px;
	margin:0 0 0 20px;
	float:left;
	display:inline;


}

#right_content img{
	border:2px solid #b2945c;
	margin:10px 0 0 4px;
	float:left;


}



div#submenu {
	width:192px;
	position:relative;
	left:-8px;
	background:url(../img/backgrounds/submenu-bg.gif) bottom left no-repeat;
	z-index:100;
}
ul#submenulist {
	background:url(../img/backgrounds/submenu-top-bg.gif) 0 0 no-repeat;
	padding:13px 2px;
	
}

/* Aktuelltlistan */

ul#news_list {
	
	


}

#news_list li {
	float:left;
	width:100%;
	clear:both;
	margin-bottom:10px;

}

/*#news_list li .news_list_image {
	width:192px;
	position:relative;
	left:-8px;
	float:left;
	background:url(../img/backgrounds/submenu-bg.gif) bottom left no-repeat;
	width:192px;
	text-align:center;
	padding-bottom:10px;
	
}

#news_list li .news_list_image .image_top {
	background:url(../img/backgrounds/submenu-top-bg.gif) 0 0 no-repeat;
	padding:2px;
}

*/

#news_list li img {
	width:192px;
	position:relative;
	left:-8px;
	float:left;
	border:2px solid #B2945C;

}

/**/


/* Sök recept box med undertexter och bilder */
div#searchbox {
	width:192px;
	position:relative;
	left:-8px;
	top:13px;
	background:url(../img/backgrounds/searchbox-bg.gif) bottom left no-repeat;
	z-index:100;
	padding-bottom:18px;
	margin-bottom:20px;
	
}

#searchbox input.textbox {
	width:160px;
	border:1px solid  #b2945c;
	height:18px;
	
}

#searchbox input.smalltextbox {
	width:125px;
	border:1px solid  #b2945c;
	height:16px;
	
}


#searchbox #submit_recipe {
	position:relative;
	top:5px;
	left:35px;

}

#searchbox #submit_portions {
	position:relative;
	top:9px;
	left:5px;

}


#searchbox checkbox {
	border:1px solid  #b2945c;
	border:none;
}

#searchbox select {
	border:1px solid  #b2945c;
	width:160px;
	
}

ul#checkboxes {
	float:left;
	padding:10px 0 0 10px;


}
ul#checkboxes li {
	float:left;
	width:90px;
	margin:0 0 5px 0 ;
	
}

/* Slut söktextbox */
/* Antal portioner scroll */
select.portioner {
	border:1px solid  #b2945c;
	width:95px;
	font-size:.95em;
	margin-left:5px;
	
	
}


/* Formulär skicka recept med e-post */

.extras .textbox {
	width:125px;
	border:1px solid  #b2945c;
	height:18px;
	
}

.extras form p {
	font-size:10px;
	/*margin-bottom:5px;*/


}

.extras .textarea {
	width:125px;
	border:1px solid  #b2945c;
	height:50px;
	
}

#searchbox #submit_recipe {
	position:relative;
	top:5px;
	left:35px;

}

/* Skicka e-post med formulär */

#address {
	width:860px;
	margin: 0px auto ;
	text-align:left;
	position:relative;
	top:191px;
	color:#ececec;
	z-index:0;
	padding-bottom:20px;

}



/* Adress på andra sidor */
#holder #address {
	top:1px;
	float:left;
	padding-bottom:20px;
	


}

#address #finflag {
	margin:0 4px 0 12px;

}

#campbellslogo {
/*	position:relative;
	top:-10px;
*/
	position:relative;
	left:10px;
	top:6px;
	z-index:90;


}








/* Vanliga sidor */