body {
	background-image: url(../images/net2.jpg);
	background-repeat: repeat;
	margin: 0px;
	padding: 0px;
	behavior:url(csshover.htc);
}
* {
	margin:0; padding:0;
}
img {
	border:0px;
}
a:link, a:visited{
	COLOR:inherit;
	text-decoration:inherit;
}
#wrapperOuter {
	width: 880px;
	border: 1px solid #000;
	left: 50%;
	top: 50px;
	position: absolute;
	margin-left: -440px;
	background-color: #FFF;
}
#wrapperTop {
	height: 140px;
	width: 880px;
}
.logo {
	position: absolute;
	left:22px;
	top:12px;
	width:101px;
	height:101px;
	background-image: url(../images/logo.gif);
}
.mamamasai_FTF {
	position: absolute;
	left:150px;
	top:26px;
	width:327px;
	height:47px;
	background-image: url(../images/mamamasai_logo.png);
}
.payoff {
	position: absolute;
	left:490px;
	top:57px;
	width:300px;
	height:14px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.75em;
	font-style: normal;
	color: #999;
}
.bread {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.75em;
	font-style: normal;
	line-height: 180%;
	color: #666;
}
.chart {
	position: absolute;
	left:799px;
	top:56px;
	width:47px;
	height:21px;
	background-image: url(../images/chart.gif);
}

/*  ---------------------  TopNav  ----------------------------------*/
.meny {
	position: absolute;
	left:150px;
	top:85px;
	width:700px;
	height:20px;
	background-image: url(../images/meny.png);
}
#topNav {
	position: absolute;
	left: 150px;
	top: 85px;
	z-index: 3;
}
#topNav ul {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	font-style: normal;
	text-transform: uppercase;
	text-align: center;
}
#topNav ul li {
	display: block;
	width: 132px;
	list-style-type: none;
	border-bottom: 0.2em solid #000;
}
#topNav ul li a {
	height: 20px;
	display: block;
	color: #000;
	text-decoration: none;
	margin-top: 4px;
}
#topNav ul li:hover {
	display: block;
	border-bottom: 0.5em solid #000;
}
#topNav ul li a:hover {
	display: block;
	color: #FFF;
}

#topNav ul li ul {
	display:none; /* döljer listmenyn när användaren inte pekar på menyn */
	position:absolute;
	width: 132px;
	background-color:#abd197;
	margin-top: -1px;
}
#topNav ul li:hover ul {
	display:block; /* visar listmenyn när användaren pekar på menyn */
} 
#topNav ul li ul li {
	width: 100%;
	border-left: 0px solid #06C;
	border-bottom: 2px solid #000;
	border-right: 0px solid #06C;
	padding-top: 5px;
	padding-bottom: 5px;
}
#topNav ul li ul li:hover {
	background-color:#d7e9ce;
	border-bottom: 2px solid #000;
}
#topNav ul li ul li a:hover {
	color:#000;
}
#topNav ul li ul li:first-child {
	border-top: 2px solid #000;
}
#topNav ul li ul li.tvaRader {
	height: 30px;
}
.menyHome {
	background-color: #d90024;
	position: absolute;
	left: 0px;
	top: 0px;
	height: 20px;
	width: 132px;
}
.menyMamaMasai {
	background-color: #33a633;
	position: absolute;
	left: 142px;
	top: 0px;
	height: 20px;
	width: 132px
}
.menyFTF {
	background-color: #faf12b;
	position: absolute;
	left: 284px;
	top: 0px;
	height: 20px;
	width: 132px
}
.menyContact {
	background-color: #3b89c4;
	position: absolute;
	left: 426px;
	top: 0px;
	height: 20px;
	width: 132px;
}
.menyWebshop {
	background-color: #d9dadb;
	position: absolute;
	left: 568px;
	top: 0px;
	height: 20px;
	width: 132px;
}


/*  ---------------------   Header  ----------------------------------*/
#wrapperHeader{
	position: absolute;
	left: 190px;
	top: 140px;
	width: 690px;
	height: 40px;
	background-image: url(../images/streckat.jpg);
	background-repeat: no-repeat;
	z-index: 1;
}
.header {
	position: absolute;
	left: 0px;
	top: 0px;
	width:660px;
	height:30px;
	text-indent: -9999px;
}
.headerImages {
	position: absolute;
	left: 0px;
	top: -3px;
	width: 660px;
	height: 30px;
}

/*  ---------------------   Main  ----------------------------------*/
#wrapperMain{
	width: 880px;
}
#wrapperLeftColumn{
	width: 150px;
	height: 320px;
	margin-top: 50px;
	float:left;
}
#wrapperMiddleColumn{
	width: 400px;
	margin-top: 50px;
	margin-left: 40px;
	float:left;
}
#wrapperHomeMiddleColumn{
	width: 300px;
	margin-top: 50px;
	margin-left: 40px;
	float:left;
}
.bread {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.75em;
	font-style: normal;
	line-height: 180%;
	color: #666;
}

#wrapperRightColumn{
	width: 240px;
	margin-top: 55px;
	margin-left: 20px;
	float:left;
}
#wrapperHomeRightColumn{
	width: 340px;
	margin-top: 50px;
	margin-left: 23px;
	float:left;
}
.imageBorder {
	border: 1px solid #963;
}
.caption {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.65em;
	font-style: normal;
	line-height: 120%;
	color: #963;
	margin-top: 5px;
}

#wrapperBottom{
	width: 880px;
	height: 60px;
}
.pearls {
	margin-left: 30px;
	margin-top: 40px;
	width: 820px;
	height: 14px;
	background-image: url(../images/pearls.gif);
	background-repeat: no-repeat;
}

/*
.border {
	margin-left: 30px;
	margin-top: 40px;
	width: 820px;
	height: 14px;
	background-image: url(../images/pearls.gif);
	background-repeat: no-repeat;
}
*/



/* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
    content: ".";              /* the period is placed on the page as the last thing before the div closes */
	display: block;          /* inline elements don't respond to the clear property */ 
    height: 0;                  /* ensure the period is not visible */
    clear: both;               /* make the container clear the period */
    visibility: hidden;	     /* further ensures the period is not visible */
}

.clearfix {display: inline-block;}   /* a fix for IE Mac */

/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* end of "no-extra-markup" clearing method */

#wrapperOuter #wrapperMain #wrapperMiddleColumn ul li {
	margin-left: 18px;
}