/* CSS By Imoku 2007 */

body { 
	font-family:	Arial, Geneva, Helvetica, sans-serif; 
	background:		white;
	color:			black; 
	font-size:		13px;
	height: 		100%;
	margin:			0;
	padding:		0;
	}

#container { 
	width:		100%;
	height:		100%;
	margin:		0;	
	padding:	0;
	}

img.boast {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

/* UNIVERSAL */

h1 { font-size: 20px; }

img { border:	0;
	  margin:	0;
	  padding:	0; }

img.inright{
	display: inline;
	margin:	 10px;
	float: right;
	}

img.inleft{
	display: inline;
	margin:	 10px;
	float: left;
	}

/* .center 	{ text-align: center; }
.justify	{ text-align: justify; }
.caps 		{ text-transform: uppercase; }
.bold 		{ font-weight: bold;} */

.green { 	color: 		rgb(86,103,4);}	
.yellow { 	color: 		#f6a815;}
.red {		color: 		#97151c;}
.purple {	color: 		#34175a;}
.blue { 	color: 		#328cc6;}
.brown {	color: 		#594029;}
.gray {		color:		rgb(133,133,132);}


.greenbg { 	background: rgb(86,103,4);	
			color: 		#f6a815;}
			
.yellowbg { background: #f6a815;	
			color: 		#34175a;}
			
.redbg {	background: #97151c;		
			color: 		#f6a815;}
			
.purplebg {	background: #34175a;		
			color: 		#f6a815;}
			
.bluebg { 	background: #328cc6;		
			color: 		#f6a815;}
			
.brownbg {	background: #594029;		
			color: 		#f6a815;}
			
.graybg {	background: rgb(133,133,132);		
			color: 		#f6a815;}

/* MAIN LAYOUT */


.main {
	margin-top:		0;
	margin-left:	30%;
	margin-bottom:	5em;
	width: 			450px;
	font-size:		13px;
	padding-top:	5.1em;
	padding-left:	10em;
	padding-right:	3em;
	background:		white;
	color:			black;
	}
	
	.main a:link     {color: rgb(86,103,4);}
	.main a:visited  {color: rgb(86,103,4);}
	.main a:active   {color: rgb(86,103,4);}
	.main a:hover    {color: rgb(86,103,4);}

.submenu {
	display:		block;
	padding-top: 	0.3em;
	padding-bottom: 0.3em;
	margin-bottom:	30px;
	width:			450px;
	}
		
	.submenu a:link     		{color: white;	text-decoration: none; font-weight: 200;}
	.submenu a:visited  		{color: white;	text-decoration: none; font-weight: 200;} 
	.submenu a:active   		{color: white; 	text-decoration: none; font-weight: 200;}	
	.submenu a:hover    		{color: white;	text-decoration: none; font-weight: 200;}

/* GREEN - rgb(86,103,4) */
	
	#green h1 { 
		color: rgb(86,103,4);
		}

	#green h2 {
		display: 		inline;
		float:			left;
		text-transform: uppercase;
		text-weight: 	bold;
		font-size:		13px;
		color:			rgb(86,103,4);
		margin:			0;
		margin-right:	0.3em;
		padding:		0;
		height:			1em;
		}
		
	#green h3 {
		margin-bottom:	0;
		padding-bottom:	0;
		text-transform: uppercase;
		text-weight: 	bold;
		font-size:		13px;
		color:			rgb(86,103,4);
		}
	
	#green p {
		margin-top:		0;
		padding-top:	0;
		}
	
	#green .submenu { 
		background: 	rgb(86,103,4);	
		color:			#f6a815;
		}
		
.tillbaka {
	float:		right;
	display:	inline;
	}
	
.graybox {
	border: 	1px solid gray;
	text-align:	center;
	background: silver;
	margin:		2em;
	padding: 	1em;
	}	

/* YELLOW - #f6a815 */

	#yellow .submenu { 
		background: #f6a815;	
		color: 		rgb(133,133,132);}

	#yellow .graybg {
		background: rgb(133,133,132);		
		color: 		#f6a815;}

	#ontop {	
		margin-bottom:	0px;
		text-transform: uppercase;
		}
		
	#yellow h1 {
		color: 		#f6a815;
		}
		
	#yellow h2 {
		font-size:	16px;
		}
		
	#yellow h3 {
		font-size: 		13px;
		font-weight: 	bold;
		margin-bottom:	0;
		padding-bottom:	0;
		}
	
	#gamla h2 {
		color:			rgb(133,133,132);
		}	

	#gamla h3 {
		margin-bottom:	0;
		padding-bottom:	0;
		text-transform: uppercase;
		text-weight: 	bold;
		font-size:		13px;
		color:			rgb(133,133,132);
		}
	
	#gamla p {
		margin-top:		0;
		padding-top:	0;
		}
		
	#yellow .intro {
		color: 		#f6a815;
		}
			
	#yellow .info {
		margin-top:	 0;
		padding-top: 0;
		}

	#yellow div {clear: both;}

/* PURPLE */

p.butiksinfo { font-size: 110%;}
	
form.purple {	
	display:		block;
	margin: 		0;
	padding:		0.3em;
	margin-bottom:	30px;	
	width:			100%;
	color:			white;
	text-align:		right;
	}

span.butik { color: #4c2c71; }


/* BLUE */

	#kontakt h4 { 
		margin-bottom: 0;
		padding-bottom: 0;
		}

	#kontakt p {
		margin-top:		0;
		padding-top:	0;
		}



/* RED */

	div.tips {
	display: block;
	margin,padding: 0;
	padding-bottom: 0.3em;
	width: 450px;
	text-align: right;
	color: 		#f6a815;
	font-weight: 900;
	}
	
	.tips a:link     		{color: rgb(133,133,132); text-decoration: none; font-weight: 900;}
	.tips a:visited  		{color: rgb(133,133,132); text-decoration: none; font-weight: 900;} 
	.tips a:active   		{color: rgb(133,133,132); text-decoration: none; font-weight: 900;}	
	.tips a:hover    		{color: rgb(133,133,132); text-decoration: none; font-weight: 900;}

	#recept a:link     		{color: black; text-decoration: none; font-weight: bold; line-height: 1.5em; font-size: 14px;}
	#recept a:visited  		{color: rgb(133,133,132); text-decoration: none; font-weight: bold; line-height: 1.5em; font-size: 14px;} 
	#recept a:active   		{color: black; text-decoration: none; font-weight: bold; line-height: 1.5em; font-size: 14px;}	
	#recept a:hover    		{color: #97151c; text-decoration: underline; font-weight: bold; line-height: 1.5em; font-size: 14px;}

	#recept img { 
		display:	inline;
		float:		right;
		margin:		10px;
		}

	#baktips h2 {
		font-size: 17px;
		color: black;
		}	
	
	#baktips h3 {
		margin-bottom:	0;
		padding-bottom:	0;
		text-transform: uppercase;
		text-weight: 	bold;
		font-size:		13px;
		color:			#97151c;
		}
	
	#baktips p {
		margin-top:		0;
		padding-top:	0;
		}
	
/* MENU */

.menu { 
	font-size:	13px;
	position: absolute;
		left:	20%;
		top:	2em;
	width: 		auto;
	height:		41em;
	}

	#menu {position: relative;}

	.menu img {
		display:		block;
		margin:			0;
		padding:		0;
		margin-bottom:	1em;
		}
	
	.menu ul { margin: 0; padding: 0;}
	
	.menu li {
		display:		block;
		}

	.menu a { 
		display:		block;
		text-align: 	center;
		text-transform: uppercase;
		letter-spacing:	0.1em;
		height:			1em;
		width: 			10em;
		padding: 		0.5em;
		border:			0;
		border-bottom:  0.5em solid white;
		}
	
	.menu li img {
		position:		absolute;
			top:			0;
			left:			-2000px;
		visibility:		hidden;
		}
		
		.menu a:hover {background: transparent}
		
		.menu a:hover img {
			border:					0;
			background:				white;
			background-repeat:		no-repeat;
			background-position:	center center;
			width: 			200px;
			height: 		200px;
				top:		25em;
				left:		-10px;
			visibility:	visible;
			z-index:	1000;
			}

		#gr img { background-image: 		url(green/gr.jpg);}
		#gu img { background-image: 		url(yellow/gu.jpg);}
		#ro img { background-image: 		url(red/ro.jpg);}
		#li img { background-image: 		url(purple/li.jpg);}
		#bl img { background-image: 		url(blue/bl.jpg);}
		#br img { background-image: 		url(brown/br.jpg);}
		
#komihag { 
	display: 				block; 
	position: 				absolute;
		top:					26em;
		left:					-1em;
	width:					200px;
	height:					168px;
	background-image: 		url(komihag.gif);
	background-repeat:		no-repeat;
	background-position:	center center;
	}

	#komihag span { 
		display:		block;
		color:			black;
		font-size: 		10px;
		text-align:		left;
		letter-spacing:	normal;
		padding-top:	87px;
		padding-left:	16px;
		padding-right:	26px;
		padding-bottom:	20px;
		}
		
	.menu a:link     		{color: white;	text-decoration: none; font-weight: 200;}
	.menu a:visited  		{color: white;	text-decoration: none; font-weight: 200;} 
	.menu a:active   		{color: white; 	text-decoration: none; font-weight: 200;}	
	.menu a:hover    		{color: white;	text-decoration: none; font-weight: 200;}