﻿/* Farben Bastel-Paradies

Blume gelb -> #fcc020; 252,192,32
Hell gelb -> #ffedbf; 255,237,191
Braun -> #4f3f30; 79,63,48
Schrift -> #a05004; 160,80,4
Blau.dunkel: 55,48,125;	#37307d;




Grau 200,200,200 (C8,C8,C8)
Grau hell 240,240,240, (F0,F0,F0)
Fotos, Breite 300 Pixel

Blau.dunkel: 55,48,125;	#37307d;
Blau.hell: 117,171,218;  #75abda;
Grün-mitte (Logo) 123,154,0  #7b9a00;
Grün-Gras: 142,178,0;	#8eb200:

Grün-Verlauf: 050; bis 110.156.168(#6e9c44)




background: #D8D8D8;
color:#0074BD;
background-color: #0173BC;
background-color: #0E5589;



Google-Fonts: Muli, Exo, Comfortaa, Overlock, Gudea:400,700

	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400" media="all" />
	  src: local('Roboto Regular'), local('Roboto-Regular'), url(https://themes.googleusercontent.com/static/fonts/roboto/v7/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');

	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Muli:300" media="all" />

	<link href='http://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic|Doppio+One' rel='stylesheet' type='text/css'>

	<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
	  src: local('Lora'), url(http://themes.googleusercontent.com/static/fonts/lora/v5/5-AYViExptypIdFoLKAxTA.woff) format('woff');
	  
	<link href='http://fonts.googleapis.com/css?family=Lato:400,100,200,700,900,300' rel='stylesheet' type='text/css'>



@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Droid Sans'), local('DroidSans'), url(../fonts/DroidSans/s-BiyweUPV0v-yRb-cjciBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'Droid Serif';
  font-style: normal;
  font-weight: 400;
  src: local('Droid Serif'), local('DroidSerif'), url(http://themes.googleusercontent.com/static/fonts/droidserif/v3/0AKsP294HTD-nvJgucYTaIbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
*/

@charset "utf-8";

html, body {
	padding: 0;
	height: 100%;
	background:   url('/images/bastel_hg.jpg');
	font-family: verdana, Arial, Sans-serif;
	font-size: 11px;
	margin: 0px; 
	padding: 0px;
	padding-top: 2px; 
}

#page-body{
	width: 1024px;
	margin: auto;
	background-color: #ccc;
}

#content {
height-min: 760px;
	margin-top: 20px;
	padding-top: 25px;
	padding-left: 26px;
	padding-right: 26px;
	padding-bottom: 25px;
	background:   url('/images/body_hg.jpg');

	border: 1px solid #37307d;
	color: 	#37307d;
	/*line-height: 1.5;*/
	font-family: verdana, Arial, Sans-serif;
	font-size: 13px;
	/*text-align: justify;*/
}

#links {height: 100%;
        width: 180px;
        float: left;}
        

#rechts {height: auto;
	margin-right: 32px;
         width: 180px;
         float: right;}

#inhalt {height: 100%;
         width: 500px;
         margin: 0 auto;}
         
#inhalt-galerie {
	height: 600px;
    width: 600px;
    float: left;
    margin-left: 66px;
}


/* Index Rechts - links Spalten */
.start-liste {
	position:relative;
	width: 180px;
	padding: 16px;
	margin-bottom: 20px;
	opacity: 0.8; 
	color: 	#37307d;
	font-family: verdana, Arial, Sans-serif;
	font-size: 13px;
	background-color: #fff;
	border: 1px solid #ccc;
	text-align:left;
	border-radius: 8px;
	
}

.start-liste a {
	color: 	#37307d;
	text-decoration: none;
}

.start-liste a:hover {
	color: 	#37307d;
	text-decoration: underline;
}

.liste a {
	font-family: verdana, Arial, Sans-serif;
	font-size: 13px;
	color: 	#37307d;
	text-decoration: none;
}

.liste a:hover {
	color: 	#37307d;
	text-decoration: underline;
	background: #ddf;
}


/* Ende Index Rechts - links Spalten */






/* Navigations Leiste links ul,li  */
.navig {
	padding-left: 0px;
}

.navig ul {
	margin-left: -26px;
}
.navig li {
	font-family: verdana, Arial, Sans-serif;
	font-size: 13px;
	color: 	#37307d;
	padding-left: 0px;
	text-decoration: none;
}

.navig a {
	color: 	#37307d;
	text-decoration: none;
}

.navig a:hover {
	color: #000;
	text-decoration: underline;
}

/* Ende Navigations Leiste links */






/* Navigations Leiste Fussleiste */
.navigation {
	float:right;
	margin-top: 7px;
	margin-bottom: 2px;
}

.navi a {
	font-family: verdana, Arial, Sans-serif;
	font-size: 13px;
	color: #fff;
	/*font-weight: bold;*/
	background: #75abda;
	text-decoration: none;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-right: 1px;
	border-radius: 13px;
	/*border: 1px solid #cecece;*/
}

.navi a:hover {
	color: #ffa;
	text-decoration: underline;
	background: #70a7d6;

}

.navia {
	font-family: verdana, Arial, Sans-serif;
	font-size: 13px;
	color: #ff9999;
	/*font-weight: bold;*/
	background: #37307d; 
	text-decoration: none;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-right: 1px;
	border-radius: 13px;
}

.navia a:hover {
	color: #ffa;
	text-decoration: none;
}
/* Ende Navigations Leiste  */


#head {
	background:   url('/images/body_hg.png');
	height: 96px;
	/*	border: 1px solid #37307d; */
}

#head-linie {
	background:   url('/images/kopf-linie.jpg');
	height: 12px;
}


#head #head-info {
	width: 1024px;
	height: 96px;
	margin: auto;
}


#fuss {
	background-color: #ccc;
	height: 76px;
}
#fuss #fuss-info{
	width: 1024px;
	margin: auto;
}

#fuss #fuss-info #fuss2 {
	width: 574px;
	float: right;
	padding-top: 25px;
}


/* Liste für die Index-Datei */
.idx-liste {
	width: auto;
	height: auto;
	padding: 8px;
	background-color: #ffffff;
	opacity: 0.6; 
	/*-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; // first
	filter: alpha(opacity=80); // second
	filter: "alpha(opacity=80)";*/
	margin-bottom: 6px;
	border: 1px solid #cecece;
	border-radius: 18px;
	min-height: 100px;
	color: #000;	
}


#content td {
	font-family: verdana, Arial, Sans-serif;
	font-size: 13px;
	/*text-align: right;*/
}

#content  h1 {
	/*height: 24px;*/
	font-family: verdana, Arial, Sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #37307d;
	text-shadow: 3px 3px 2px #aaa;
}

#content h2 {
	font-family: verdana, Arial, Sans-serif;
	font-size: 16px;
	font-weight: normal;
	color: #37307d;
	text-shadow: 2px 2px 2px #aaa;
	margin: 0px;
}
#content h2 a {
	font-family: verdana, Arial, Sans-serif;
	font-size: 16px;
	font-weight: normal;
	color: #37307d;
	text-decoration: none;
	text-shadow: 2px 2px 2px #aaa;
}
#content h2  a:hover{
	background: #cfc;
	color: #75abda;
	text-decoration: underline;
}


#content h3 {
	font-family: verdana, Arial, Sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #37307d;
	text-decoration: none;
}

#content h4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #555555;
	font-style: italic;
}

#content #blau {
	background-color: #EAEAEA;
	padding: 25px;
	padding-top: 5px;
	padding-bottom: 5px;
}



#kopf {
	background: url('/images/header_logo.gif');
	height: 80px;
}



/*  Kontakt-Formular und Katalog-Formular */

.k_feld {
	text-align: right;	
	float: left;
	/*font-weight: bold;*/
	width: 214px;
	padding-right: 12px;
}

.k_input input {
	float: left;
	height: 20px;
	border: 1px solid #cecece;
	font-size: 13px;
	width: 250px;
	padding-bottom:5px;

}

.k_select select {
	float: left;
	height: 22px;
	border: 1px solid #cecece;
	font-size: 13px;
	width: 250px;
	padding-bottom:5px;
}

.k_notiz textarea  {
	height: 135px;
	width: 450px;
	border: 1px solid #cecece;
	margin-left: 28px;
}
.k_button input {
	width: 210px;
	height: 22px;
	border: 1px solid #cecece;
	font-size: 13px;
	background-color: #ffffff;
	margin-left: 28px;
}





#kontakt {
	text-align: right;	
	float: left;
	/*font-weight: bold;*/
	width: 214px;
	margin-right: 12px;
}

#kontakt input {
	float: left;
	height: 22px;
	border: 1px solid #cecece;
	font-size: 13px;
	width: 250px;
}
#kontakt-select {
	float: left;
	height: 22px;
	border: 1px solid #cecece;
	font-size: 13px;
	width: 250px;
}

#kontakt textarea  {
	height: 135px;
	width: 450px;
	border: 1px solid #cecece;
}

#button input{
	width: 210px;
	float: left;
	height: 22px;
	border: 1px solid #cecece;
	font-size: 13px;
	background-color: #ffffff;
	margin-left: 28px;
}

#kontaktok {
	text-align: left;	
	float: left;
	height: 22px;
	border: 1px solid #cecece;
	font-weight: bold;
	width: 250px;
	margin-right: 12px;
	background-color: #ffffff;
}

#kontaktok input, select {
	float: left;
	height: 22px;
	border: 1px solid #cecece;
	font-size: 13px;
	width: 250px;
}

#kontaktokt {
	font-weight: normal;
	border: 1px solid #cecece;
	text-align: left;	
	height: 135px;
	width: 450px;
	margin-left: 28px;
	background-color: #ffffff;
}


/* +++++++++ Ende neue css ++++++++++++++++++++++ */


#hidden {
	display: none;
}