@charset "utf-8";

.hide {display:none;}

h1 {text-indent: -9999px; height:70px; width:780px;}

h1#index {background: url(images/h1-index.gif) center top no-repeat;}
h1#simplyOrganic { background: url(images/h1-simply_organic.gif) center top no-repeat;}
h1#produkter { background: url(images/h1-produkter.gif) center top no-repeat;}
h1#tipsTrick { background: url(images/h1-tips_och_trick.gif) center top no-repeat;}
h1#pressMedia { background: url(images/h1-press_media.gif) center top no-repeat;}

h1#schampoBalsam { background: url(images/h1-schampo_balsam.gif) #fff no-repeat center bottom; float: right; }
h1#inpackningar { background: url(images/h1-inpackningar.gif) #fff no-repeat center bottom; float: right }
h1#stylingprodukter { background: url(images/h1-stylingprodukter.gif) #fff no-repeat center bottom; float: right }

h2 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 2em;
	font-style: italic;
	color:#696;
	margin-bottom: 0.3em;
	text-align: left;
	font-weight:300;
}

p {
	font-size: 1.2em;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	line-height: 2em;
	text-align: justify;
	margin-bottom: 0.7em;
}

.line { height: 1px; border-bottom: 1px #ccc dotted; margin: 20px 0;}

body {
	font-size:62.5%;
	background: #fff;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000;
}
#container {
	width: 850px;
	position: relative;
	background: #fff url(images/tree_top.jpg) no-repeat;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
}
#header {
	position: relative;
	height: 170px;
}

#menu {
	position: relative;
	left: 0; top: -31px;
	width: 850px; height: 29px;
}
#menu ul {
	position: relative;
	background: url(images/menu.gif);
	width: 850px; height: 29px; 
}
#menu ul li {
	position: absolute; top: 0;
	height: 29px;
	list-style: none;
}
#menu ul li, #menu a{
	display: block;
	height: 29px;
	border-bottom: 0;
}
#menu ul li a{
	text-indent: -9999px;
	text-decoration: none;
}

#m1{left:36px; top:0; width:53px;}
#m2{left:114px; top:0; width:162px;}
#m3{left:302px; top:0; width:117px;}
#m4{left:444px; top:0; width:119px;}
#m5{left:589px; top:0; width:129px;}
#m6{left:744px; top:0; width:79px;}

#m1 a:focus, #m1 a:hover, #m1 a:active {background: transparent url(images/menu.gif) -36px -29px no-repeat;border-bottom:0; outline:0;}
#m2 a:focus, #m2 a:hover, #m2 a:active {background: transparent url(images/menu.gif) -114px -29px no-repeat;border-bottom:0; outline:0;}
#m3 a:focus, #m3 a:hover, #m3 a:active {background: transparent url(images/menu.gif) -302px -29px no-repeat;border-bottom:0; outline:0;}
#m4 a:focus, #m4 a:hover, #m4 a:active {background: transparent url(images/menu.gif) -444px -29px no-repeat;border-bottom:0; outline:0;}
#m5 a:focus, #m5 a:hover, #m5 a:active {background: transparent url(images/menu.gif) -589px -29px no-repeat;border-bottom:0; outline:0;}
#m6 a:focus, #m6 a:hover, #m6 a:active {background: transparent url(images/menu.gif) -744px -29px no-repeat;border-bottom:0; outline:0;}

#mainContent {
	position: relative;
	float: left;
	width: 780px;
	padding: 0 35px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background: #fff url(images/content_bg.gif) no-repeat center top;
	margin-bottom: 20px;
}

.leftContent {
	position: relative;
	width: 355px;
	float: left;
	text-align: center;
}
.rightContent {
	position: relative;
	width: 355px;
	float: right;
	text-align: center;
}
#footer {
	position: relative; left: 35px;
	clear: both;
	width: 780px;
	margin: 0 ;
	padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	border-top: 1px #ccc solid ;
}
#footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
	text-align: center; color: #666;
}
a { text-decoration:none; color:#666;}
a:hover { text-decoration:none; color:#666; border-bottom: 1px dotted #666}