/*	==============
	=== INHALT ===
	==============
	
	--------------------------------------------
	1. Allgemeines
		- html
		- body
		- p 
		- a
		- h1
		- h2
	--------------------------------------------
	2. Seitenaufbau
		2.1 Wrapper
		2.2 Logo
		2.3 Header
		2.4 Picture
		2.5 Menue
		2.6 Submenue
		2.7 Content
		2.8 Footer
	--------------------------------------------
	3. Diverses
		3.1 
	--------------------------------------------  */	
	
/*
	EM - PX 
	10px = 0.6em
	12px = 0.76em
	14px = 0.9em
	16px = 1.0em
	18px = 1.12em
	22px = 1.38em
	26px = 1.63em
*/


/*  ======================
	=== 1. Allgemeines ===
	======================  */

* {
	border:0;
	margin:0;
	padding:0;
	outline:0;
}

html,body {
	text-align:center;
	font-size:100.01%;
	margin:0 auto;
	width:100%;
	height:100%;
}

body {
	font:12px/16px Arial, Helvetica, sans-serif;
	color:#BCC8DD;
	background:#1D4183 url(../images/bckgr_body.png) repeat-x 0 0;
}

p {
	padding-bottom:12px;
}

a {
	color:#8CADD9;
	text-decoration:none;
}
ul {
	list-style:none;
}

a:hover {
	color:#F90;
}
a.aktuell {
	color:#F90;
}
h1 {
	font:22px/24px Arial, Helvetica, sans-serif;
	color:#A7B8D7;
	padding-bottom:30px;
}
.xtra {
	float:left;
}
h2 {
	font:15px/17px Arial, Helvetica, sans-serif;
	color:#f90;
	padding:20px 0;
}
h3 {
	font:13px/18px Arial, Helvetica, sans-serif;
	color:#A7B8D7;
	border-bottom:1px solid #545CC2;
}
h4 {
	font:normal 14px/18px Arial, Helvetica, sans-serif;
	color:#A7B8D7;
	padding-bottom:10px;
}
.green {
	color:#33CC00;
}
.lightblue {
	color:#A7B8D7;
	clear:left;
	padding-top:30px;
}
/*  =======================
	=== 2. Seitenaufbau ===
	=======================  */
	

/*  -------------------
	--- 2.1 Wrapper ---
	-------------------  */

#container {
	width:900px;
	margin:0 auto;
	text-align:left;
	position:relative;
	min-height:100%;
}

* html #container {
	height: 100%;
}
/*  ------------------
	--- 2.2 Logo ---
	------------------  */
	
#logo {
	position:absolute;
	top:14px;
	left:0;
	width:235px;
	height:90px;
	text-indent:-9999px;
	background:url(../images/Just-Naturstein.png) no-repeat 0 0;
}
#logo a {
	display:block;
	width:232px;
	height:90px;
}
#logo a:hover {
	background:url(../images/.png) no-repeat 0 0;
}

/*  ------------------
	--- 2.3 Header ---
	------------------  */
	
ul#header {
	width:auto;
	height:82px;
	list-style:none;
	backgrond:url(../images/bckgr_header.png) repeat-x 0 0;
	padding:0 0 0 635px;
}
#header li {
	float:left;
}
#header li a {
	display:block;
	width:20px;
	height:32px;
	text-indent:-9999px;
	margin:24px 2px 0 0;
}
/*  ----- deutsch ---------------------------------------------------*/
a.lang_de {
	background:url(../images/lang_de2.png) no-repeat 0 0;
}
a:hover.lang_de,a.lang_de_activ {
	background:url(../images/lang_de.png) no-repeat 0 0;
}
/*  ----- english ---------------------------------------------------*/
a.lang_en {
	background:url(../images/lang_en2.png) no-repeat 0 0;
}
a:hover.lang_en,a.lang_en_activ{
	background:url(../images/lang_en.png) no-repeat 0 0;
}
/*  ----- czech ---------------------------------------------------*/
a.lang_cz {
	background:url(../images/lang_cz2.png) no-repeat 0 0;
}
a:hover.lang_cz,a.lang_cz_activ {
	background:url(../images/lang_cz.png) no-repeat 0 0;
}
/*  ----- polska ---------------------------------------------------*/
a.lang_pl {
	background:url(../images/lang_pl2.png) no-repeat 0 0;
}
a:hover.lang_pl,a.lang_pl_activ {
	background:url(../images/lang_pl.png) no-repeat 0 0;
}
/*  ----- kundenlogin ---------------------------------------------------*/
#header li a.login {
	background:url(../images/btn_kundenlogin.png) no-repeat 0 0;
	width:176px;
	height:65px;
	margin:0;
}
#header li a:hover.login {
	background:url(../images/btn_kundenlogin.png) no-repeat 0 -65px;
}
/*  -----------------
	--- 2.5 Menue ---
	-----------------  */

ul#menue {
	width:auto;
	height:33px;
	list-style:none;
	background:url(../images/bckgr_menue.png) no-repeat 0 0;
	float:right;
}
#menue li {
	float:left;
	text-align:center;
	margin-right:1px;
}
#menue li a {
	font:12px/14px Tahoma, Arial, Helvetica, sans-serif;
	text-indent:-9999px;
	display:block;
	height:33px;
}
a.nav_10 {
	background:url(../images/nav_10.png) no-repeat 0 0;
}
a.nav_10on,a:hover.nav_10 {
	background:url(../images/nav_10.png) no-repeat 0 -33px;
}
a.nav_10,a.nav_10on,a:hover.nav_10 {
	width:55px;
}

a.nav_20 {
	background:url(../images/nav_20.png) no-repeat 0 0;
}
a.nav_20on,a:hover.nav_20 {
	background:url(../images/nav_20.png) no-repeat 0 -33px;
}
a.nav_20,a.nav_20on,a:hover.nav_20 {
	width:50px;
}

a.nav_30 {
	background:url(../images/nav_30.png) no-repeat 0 0;
}
a.nav_30on,a:hover.nav_30 {
	background:url(../images/nav_30.png) no-repeat 0 -33px;
}
a.nav_30,a.nav_30on,a:hover.nav_30 {
	width:100px;
}

a.nav_40 {
	background:url(../images/nav_40.png) no-repeat 0 0;
}
a.nav_40on,a:hover.nav_40 {
	background:url(../images/nav_40.png) no-repeat 0 -33px;
}
a.nav_40,a.nav_40on,a:hover.nav_40 {
	width:131px;
}

a.nav_50 {
	background:url(../images/nav_50.png) no-repeat 0 0;
}
a.nav_50on,a:hover.nav_50 {
	background:url(../images/nav_50.png) no-repeat 0 -33px;
}
a.nav_50,a.nav_50on,a:hover.nav_50 {
	width:72px;
}

a.nav_60 {
	background:url(../images/nav_60.png) no-repeat 0 0;
}
a.nav_60on,a:hover.nav_60 {
	background:url(../images/nav_60.png) no-repeat 0 -33px;
}
a.nav_60,a.nav_60on,a:hover.nav_60 {
	width:117px;
}
a.nav_70 {
	background:url(../images/nav_70.png) no-repeat 0 0;
}
a.nav_70on,a:hover.nav_70 {
	background:url(../images/nav_70.png) no-repeat 0 -33px;
}
a.nav_70,a.nav_70on,a:hover.nav_70 {
	width:64px;
}

/*  ------------------
	--- 2.4 Picture ---
	------------------  */

#pic_home,#pic_unternehmen,#pic_materialdatenbank,#pic_firma,#pic_produkte,#pic_geschichte,#pic_hartha,#pic_nowadeba,#pic_kundencenter,#pic_material {
	width:900px;
	height:160px;
	border-top:1px solid #000;
	border-bottom:1px solid #DDE6F3;
	text-indent:-9999px;
	float:left;
}	
#pic_home {
	background:url(../images/pic_home.jpg) no-repeat center 0;
}
#pic_unternehmen {
	background:url(../images/pic_unternehmen.jpg) no-repeat center 0;
}
#pic_materialdatenbank {
	background:url(../images/pic_materialdatenbank.jpg) no-repeat center 0;
}
#pic_firma {
	background:url(../images/pic_firmengelaende.jpg) no-repeat center 0;
}
#pic_produkte {
	background:url(../images/pic_produkte.jpg) no-repeat center 0;
}
#pic_geschichte {
	background:url(../images/pic_geschichte.jpg) no-repeat center 0;
}
#pic_hartha {
	background:url(../images/pic_hartha.jpg) no-repeat center 0;
}
#pic_nowadeba {
	background:url(../images/pic_nowadeba.jpg) no-repeat center 0;
}
#pic_kundencenter {
	background:url(../images/pic_kundencenter.jpg) no-repeat center 0;
}
#pic_material {
	background:url(../images/pic_material.jpg) no-repeat center 0;
}

/*  --------------------
	--- 2.6 Submenue ---
	--------------------  */

ul#submenue {
	width:166px;
	height:384px;
	list-style:none;
	float:left;
	background:url(../images/bckgr_submenue.png) no-repeat 0 0;
	padding:50px 25px 0;
}
#submenue li {
	background:url(../images/border_submenue.png) no-repeat 0 31px;	
}
#submenue li a {
	display:block;
	width:151px;
	height:27px;
	background:url(../images/bullet.png) no-repeat 3px 12px;
	padding:6px 0 0 15px;
}
#submenue li a:hover,#submenue li a.activ {
	background:url(../images/bullet_on.png) no-repeat 0 9px;
}
#submenue li a.activ {
	color:#F90;
}
#submenue li.xtra {
	height:auto;
	padding-bottom:3px;
	background:url(../images/border_submenue.png) no-repeat 0 bottom;	
}

#submenue li ul {
 	list-style-type:none;
 	margin:0px;
 	padding:3px 0 3px 15px;	
}
#submenue li li a {
	display:block;
	width:141px;
	height:16px;
	background:none;
 	padding:2px 0 2px 10px;
}
#submenue li li a:hover {
	color:#F90;
	background:none;
}
#submenue li li a.activ {
	background:url(../images/bullet_arrow.png) no-repeat 0 7px;
	color:#f90;
}

ul#submenue h1 {
	font:700 13px/16px Arial, Helvetica, sans-serif;
	padding-bottom:10px;
}
/*  -------------------
	--- 2.8 Content ---
	-------------------  */

.contentstart {
	width:844px;
	height:auto;
	float:left;
	padding:50px 0 30px 56px;
	background:url(../images/bckgr_contentstart.png) no-repeat 0 0;
}
.contentstart h1 {
	background:url(../images/h1_home.png) no-repeat 0 0;
	width:auto;
	height:24px;
	text-indent:-9999px;
}
.contentstart p {
	width:760px;
}
.content {
	width:588px;
	height:auto;
	float:left;
	padding:50px 40px 100px 56px;
	background:url(../images/bckgr_content.png) no-repeat 0 0;
}
.content ul {
	padding:0 0 12px 0;
}
.content ul li {
	padding:0 0 8px 12px;
	background:url(../images/bullet-li.png) no-repeat 0 6px;
}
.content li img {
	padding-bottom:20px;
}
.content img {
	padding-bottom:20px;
}
.img-right {
	float:right;	
}
.img-left {
	float:left;	
}
.content img.img-left {
	padding:0 20px 10px 0;	
}
.content img.img-right {
	padding:0;
	
}
.h1_unternehmen {
	background:url(../images/h1_unternehmen.png) no-repeat 0 0;
	width:321px;
	height:29px;
	text-indent:-9999px;
}

/* --- News ---*/

#news {
	clear:left;
	width:818px;
	height:360px;	
	background:url(../images/bckgr_wrapnews.png) no-repeat 0 0;
	padding:24px 0 20px 40px;
	margin:0 0 0 20px;
}

/* --- Spalten News Startseite --- */

.column-news {
	position:relative;
	float:left;
	width:233px;
	height:210px;
	padding:6px 10px 0;
	margin:0 10px 15px 0;
	font-size:11px;
	background:url(../images/bckgr_news.png) no-repeat 0 0;
}
.column-news h2 {
	padding:0 0 8px;
	color:#f90;
	font-weight:100;
}
.column-news img {
	padding:5px 0;
}
.column-news p {
	padding:0 0 5px;
	line-height:13px;
}
.column-news a {
	position:absolute;
	bottom:10px;
	right:10px;
	display:block;
	width:46px;
	height:17px;
	background:url(../images/a_produkte_start.png) no-repeat 0 0;
	padding:0 0 0 10px;
}

.small {
	font-size:11px;
}
.arrow {
	list-style:none;
	margin-top:10px;
}
.arrow li {
	background:url(../images/ico_arrow.png) no-repeat 0 0;
	padding-left:50px;
	line-height:20px;
}

.bildergalerie {
	float:left;
	text-align:left;
	width:145px;
	margin:0 0 20px 0;
	font-size:11px
}
.bildergalerie img {
	width:90px;
	height:90px;
	border:1px solid #545CC2;
	margin:10px 0 0;
	padding:0;
	float:left;
}

.skip {
	list-style:none;
	float:right;
	padding:5px 0 0;
}
ul.skip li {
	float:left;
	line-height:12px;
	font-size:11px;
	padding:0 4px;
	background:none;
}
.skip li a.back,.skip li a.forward {
	text-indent:-9999px;
	display:block;
	width:13px;
	height:16px;
	border:none;
}
.skip li a.back {
	background:url(../images/back.png) no-repeat 0 0;
}
.skip li a.forward {
	background:url(../images/forward.png) no-repeat 0 0;
}
.orange {
	color:#f90;
}
p.clear {
	clear:both;
}

/* --- Newsticker --- */

#moreNews {
 	clear:left;
	float:left;
	width:764px;
	height:28px;
	margin:0 0 0 2px;
	padding:13px 0 0 12px;
	background:url(../images/bckgr_newsMore.png) no-repeat 0 0;
}
#moreNews li {
	float:left;
	margin:0 0 0 20px;
}
.newsticker {
	list-style-type:none;
	background:#1D4183;
	padding:5px;
	margin:0;
}

/* --- Spalten Kontakte --- */

.column-contact {
	float:left;
	width:auto;
	padding:0 36px 20px 0;
}
.column-contact img {
	padding-bottom:0px;
	vertical-align:top;
	padding-right:4px;
}



/*  ------------------
	--- 2.7 Footer ---
	------------------  */

#footer {
	background:#4576C0 url(../images/bckgr_footer.png) repeat-x 0 0;	
	height:86px;
	width:100%;
	margin:-87px auto 0 auto;
	border-top:1px solid #fff;
	text-align:left;
	position:relative;
	clear:left;
}
ul#info {
	width:900px;
	margin:0 auto;
	font-size:11px;
	color:#ACC2E3;
	list-style:none;
	padding:13px 0 0;
}
#info li {
	float:left;
	padding:0 50px 0 0;
}
#info li.kontakt {
	float:right;
	padding:0;
}
li.kontakt a {
	background:url(../images/btn_kontakt.png) no-repeat 0 0;
	display:block;
	width:157px;
	height:53px;
	text-indent:-9999px;
}

/*  --------------------
	--- 2.8 Tabellen ---
	--------------------  */

table {
	border-collapse:collapse;
	width:100%;
	margin-bottom:10px;
	border:none;
}
td {
	text-align:left;
	vertical-align:top;
	padding-bottom:15px;
}

/*  ---------------------------------
	--- 3.1 Formatierung Formular ---
	---------------------------------  */

form {
	font:13px/16px Arial, Helvetica, sans-serif;
}
input, select, textarea {
	font:11px/12px Arial, Helvetica, sans-serif;
}
form br {
	clear: left;
}
form p {
	padding:0;
}

input {
	display: block;
	width:10em;
	float: left;
	background-color: #fff;
	margin: 2px;
	padding: 2px;
	color:#333;
	border:1px solid #333;
}
select {
	float:left;
	width: 7em;
	background-color:#fff;
	margin:2px;
	padding:1px 0;
	color:#333;
}
textarea {
	display: block;
	width:19em;
	float: left;
	background-color: #fff;
	margin: 2px;
	padding: 2px;
	color:#333;
	border:1px solid #333;
}

label {
	width:70px;
	float:left;
	text-align:right;
	padding-top:2px;
	padding-right:4px;
}
#nummer {
	width: 3em;
}
#plz {
	width: 3em;
}
#send input {
	width:79px;
	height:22px;
	padding:0;
	margin:0;
	cursor:pointer;
	border:none;
}
#send {
	padding:5px 0 0 78px;
	margin:0;
	cursor:pointer;
}
.hinweis {
	color:#f90;
}
.echo {
	clear:left;
	padding-top:40px;
}
p#contactform {
	clear:both;
	float:left;
	width:auto;
	border:1px solid #4E8F2D;
	background:#D0DD93;	
	padding:10px;
	margin:20px 0 0;
	color:#4E8F2D;	
}
p#contactform img {
	float:left;
	padding:2px 15px 0 0;
}