/* Css originally by mejobloggs  Design by Aran @ stuio7designs.com  Please email me if you use this, as I would love to see how it is being used, also you can join my linkshare to help you with your google ranking */



body { font-family: "trebuchet ms", verdana, arial, tahoma; font-size: 90%; color: #707070; line-height: 150%; background-color: white; margin: 0; padding: 0; text-align: center; }

/* Set the page width */
#oben, #grafik, #mitte-inhalt, #unten {
	width: 900px;
	margin: 0 auto;
	text-align: left;
}

#oben { background-image: url(../images/oben_kosmetik.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: 15px bottom; }

#oben-inhalt {
	background: url(../images/rand_rechts_weiss.gif) no-repeat right top;
	overflow: hidden; /* no idea why this works, but it fixes a FF problem */
}

#oben-inhalt ul { padding: 2em 20px 0; list-style: none; font-size: 100%; background-image: url(../images/rand_links_weiss.gif); background-repeat: no-repeat; background-attachment: scroll; background-position: left top; float: left; margin: 0; }

#oben-inhalt li { display: inline; float: left; padding-right: 0; padding-left: 0; }

#oben-inhalt a { float: left; background:url(../images/reiter_links.png) no-repeat left top; text-decoration:none; line-height: 1.8em; padding: 0 0 0 11px; }

#oben-inhalt a span { background: url(../images/reiter_rechts.png) no-repeat right top; padding:3px 12px 2px 2px; color:#393939; display: block; float: left; cursor: pointer; /* IE doesnt display the hand when you roll over the link for some reason. This fixes it */
}

 #oben-inhalt a:hover { background-color: transparent; background-image: url(../images/reiter_linkshover.png); background-position:0 -2px; text-transform: uppercase; }
 #oben-inhalt a:hover span { color: #39a92c; background-color: transparent; background-image: url(../images/reiter_rechtshover.png); background-position:100% -2px; }

#grafik-breit {
	background: transparent url(../images/banner_gruen.png) top center repeat-x;
}

#grafik { background-image: url(../images/banner_kosmetik.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: 15px top; }

#grafik-links {
	background: url(../images/rand_links_gruen.png) no-repeat left top;
}

#grafik-rechts {
	background: transparent url(../images/rand_rechts_gruen.png) top right no-repeat;
}

#grafik h1 {
	margin: 0;
	padding: 0 0 0 610px;
	height: 170px;
	line-height: 22em;
	color: #ccc;
	font-size: 100%;
}

#mitte-inhalt {
	background: url(../images/inhalt_kosmetik.jpg) no-repeat 15px top;
}
#inhalt-rechts { background-image: url(../images/rand_rechts_weiss.gif); background-repeat: no-repeat; background-position: right top; }
* html #mitte-inhalt { height: 1%; }

#inhalt {
	background: url(../images/rand_links_weiss.gif) no-repeat left top;
	padding: 5px 230px 0 30px;
}
#naviblock { float: right; width:205px; margin: 20px 30px 5px 1em; background: url(../images/navi_menu.png) no-repeat; text-align: center; line-height: 120%; font-family:"trebuchet ms", verdana, arial, tahoma; }

* html #naviblock { margin-right: 15px; }

#navi { padding-top: 5px; }

#navi ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 100%;
}

#navi h3 {
	font-size: 100%;
	text-transform: uppercase;
	margin: 0.8em 0 0.2em;
	color: #39a92c;
	font-weight: bold;
	letter-spacing: 0.15em;
}

#navi a:link, #navi a:visited { color: #4e4e4e; }
#navi a:hover { color: #39a92c; }

#unten-breit { background: url(../images/banner_gruen_klein.png) repeat-x left 25px; clear: both; }

#unten { background-image: url(../images/banner_unten.png); background-repeat: no-repeat; background-attachment: scroll; background-position: 15px bottom; }

#unten-links {background: url(../images/rand_links_gruenklein.png) no-repeat left 25px;}

#unten-rechts {background: url(../images/rand_rechts_gruenklein.png) no-repeat right 25px;}

#unten p { height: 80px; color: #4e4e4e; font-size: 70%; line-height: 1.4em; text-align: right; overflow: hidden; margin: 0; padding: 0 40px 0 0; }

/*
 #unten { background: url(images/banner_gruen.gif) repeat-x center top; margin-top: 1em; text-align: center; }

#unten-inhalt { background: url(images/oben_kosmetik.jpg) no-repeat left top; margin: 0 20px; clear: both; border-top: 1px solid #707070; }
*/

h2 { color: #39a92c; font-size: 120%; margin-bottom: -10px; }
h3 { color: #39a92c; font-size: 100%; margin-bottom: -5px; }

a:link, a:visited { color: #39a92c; text-decoration: none; }
a:hover{ color: #39a92c; text-decoration: none; }
table { width: 100%; }
p a:link { text-decoration: underline; }