html {

	height: 100%;
	margin: 0;
	scroll-behavior: smooth;
	overflow: hidden;
}

body {
	min-width: 1200px;
	overflow: hidden;
	height: 100%;
	margin: 0;
	background-color: white;
	font-family: 'Work Sans', sans-serif;
}

* {
  box-sizing: border-box;
}



/*

html {
  height: 100%;
  margin: 0;


}




body { 
	background-color: white;
	font-family: 'Work Sans', sans-serif;
	margin:0;
	padding:0;
	height: 100%;

}


* {
  box-sizing: border-box;
}

*/

.fileEntry	{

}

h1 {
	font-family: 'Josefin Sans', sans-serif;
	font-size: 190%;
	line-height: 190%;
	color: #333;
}

h2 {
	font-family: 'Josefin Sans', sans-serif;
	font-size: 160%;
	line-height: 160%;
	color: #333;
}

h3 {
	font-family: 'Josefin Sans', sans-serif;
	font-size: 130%;
	line-height: 130%;
	color: #333;
}

h4 {
	font-family: 'Josefin Sans', sans-serif;
	font-size: 100%;
	line-height: 130%;
	color: #333;
}


p {
	font-family: 'Work Sans', sans-serif;
	font-size: 150%;
	line-height: 150%;
	color: #333;
}


form, div, p, h1, h2, h3, h4, h5, h6 {
        margin: 0;
        padding: 0;
}

td, th, p, div, span {
        font-family: 'Work Sans', sans-serif;
        font-size: 17px;
}

a, a:link, a:visited, a:active, a:focus {
	font-style: italic;
    color: black;
    text-decoration: none;
    outline: none;
    -moz-outline-style: none;
}

a:hover {
	color: #8e8e8e;
	text-decoration: none;
}

.images {
	padding: 0;
	margin: 0;
	border: 0px solid blue;
}

.imageEntry {
	float:left;
	padding: 0;
	margin: 0;
	border: 0px solid green;" 
}

.image-thumb {
	padding: 0 15px 0 0;
	margin: 0;
	border: 0px solid red;
}

#general_header {
	border: 0px solid red;
	padding: 40px 0 20px 0;
	margin: 50px 0 30px 0;
	text-align: center;
	height: 10vh;
	width: 100%;
}

#general_header_line {
	border: 0px solid red;
	padding: 0 0 0 0;
	text-align: center;
	height: 5vh;	
}

/* =========================== TOP Menu =========================== */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	#menu_01 { position:fixed; }
}

#menu_01 {
	position: sticky;
	position: -webkit-sticky;
	left: 0px;
	top: 0px;
	width:  100%;
	height: 8vh;
	border-bottom: 1px solid #dadada;
	background: #ffffff;		
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
	z-index: 5000;
}

#menu_02 {
	position: sticky;
	position: -webkit-sticky;
	left: 0px;
	top: 8vh;
	width:  100%;
	height: 4vh;
	padding: 1.5vh 0 0 0;
	border-bottom: 1px solid #dadada;
	background: #ffffff;		
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: left;
	z-index: 5000;
}

.menu_item {
	font-family: 'Josefin Sans', sans-serif;
	font-style: normal;
	font-size: 90%;
	border: 0px solid blue; 
	
}

.menu_item_fade {
	font-family: 'Josefin Sans', sans-serif;
	font-style: normal;
	font-size: 90%;
	color: grey;
}

.menu_item a:hover  {
	color: grey !important;
}

.menu_item_sub {
	font-family: 'Josefin Sans', sans-serif;
	font-style: normal;
	font-size: 80%;
	border: 0px solid blue;
	margin: 0 1vw 0 1vw;
}

.menu_item_sub_fade {
	font-family: 'Josefin Sans', sans-serif;
	font-style: normal;
	font-size: 80%;
	color: #c42924;
	margin: 0 1vw 0 1vw;
}

.menu_item_sub a:hover  {
	color: grey !important;
}


#menu_logo {
	background-color: transparent;
	background-image: url("https://www.klangidee.de/19layout/logo.png");
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: contain; /* Resize the background image to cover the entire container */
	height: 5vh;
	width: 200px;
	border: 0px solid blue;  
}

 /* =========================== Dropdown Button =========================== */

#menu_prod {
	font-family: 'Josefin Sans', sans-serif;
	font-style: normal;
	font-size: 103%;
	border: 0px solid blue; 
}

/* The container <div> - needed to position the dropdown content */

.menu_prod_dropdown {
	font-family: 'Josefin Sans', sans-serif;
	font-style: normal;
	font-size: 90%;
	border: 0px solid red;
	position: relative;
	display: inline-block;
}

.menu_prod_dropdown_fade {
	font-family: 'Josefin Sans', sans-serif;
	font-style: normal;
	font-size: 90%;
	border: 0px solid red;
	position: relative;
	display: inline-block;
	color: grey;
}

/* Dropdown Content (Hidden by Default) */

.menu_prod_dropdown_content {
	font-family: 'Josefin Sans', sans-serif;
	font-style: normal;
	font-size: 90%;
	padding-top: 5px;
	border: 0px solid black;
	display: none;
	position: absolute;
	background-color: white;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

/* Links inside the dropdown */

.menu_prod_dropdown_content a {
	border: 0px solid blue;
	font-style: normal;
	color: black;
	padding: 5px 10px;
	text-decoration: none;
	display: block;
}

.menu_prod_dropdown_content a:hover  {
	color: grey !important;
}

/* Change color of dropdown links on hover */
.menu_prod_dropdown_content a:hover {
	color: grey;
}

/* Show the dropdown menu on hover */
#menu_prod:hover .menu_prod_dropdown_content {
	display: block;
}


 /* =========================== Menu search =========================== */

#searchtop-wrapper {
	border: 0px solid blue;
	display: -webkit-flex; /* Safari */
	-webkit-align-items: center; /* Safari 7.0+ */
	display: flex;
	align-items: center;
	justify-content: center;
	vertical-align: text-top;
	height: 25px;
	padding: 0 0 0 0;
	margin: -5px 0 0 0;
	text-align: center;
}

.searchtop-input {
	border: 1px solid grey;
	line-height: 0;
	background-color:#ffffff;
	width: 200px;
	height: 20px;
	margin: 0 0 0 0;
	padding:0 0 0 5px;
	color: grey;
}

.searchtop-search {
	border: 0px solid red;
	line-height: 0;
    border: none;
	background-image: url(https://www.klangidee.de/19layout/search.png);
	background-color: #ffffff;
	background-repeat: no-repeat;
	background-size: 15px 15px;
	background-position: center center;
	width: 20px;
	height: 20px;
	cursor: pointer;	
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}


/* =========================== footer =========================== */

.footer_spacer {
	height: 5vh;
	border: 0px solid grey;
	width: 100vw;
}

#footer {
	position: relative;
	left: 0px;
	bottom: 0px;
	width: 100% !important;
	height: 200px;
	background: #c6c6c6;
	border: 0px solid blue;
	margin-top: -200px;

}



#footer_box_wrapper {
	border: 0px solid red;
	width: 980px;
	margin: auto;
	padding-top: 25px;
	display: flex;       /* establish flex container */
	flex-direction: row; /* default value; can be omitted */
	flex-wrap: wrap;   /* default value; can be omitted */
	justify-content: space-around; /* switched from default (flex-start, see below) */
	align-items: flex-ende;
}

.footer_box {
	border: 0px solid green;
	float: left;
	padding-top: 25px;
}

.footer_box > a, a:link, a:visited, a:active, a:focus {
	font-style: normal !important;
	color: #333 !important;
}

.footer_box a:hover {
	color: #ffffff !important;
}

#logo_fb {
	background-image: url("https://www.klangidee.de/19layout/logo_fb.png");
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: contain; /* Resize the background image to cover the entire container */
	height: 40px;
	width: 40px;
	border: 0px solid blue; 
	margin: 0 15px 0 0;
	z-index: 1000;
}

#logo_li {
	background-image: url("https://www.klangidee.de/19layout/logo_li.png");
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: contain; /* Resize the background image to cover the entire container */
	height: 40px;
	width: 40px;
	border: 0px solid blue;
	margin: 0 0 0 0;
	z-index: 1000;	
}

/* =========================== Startpage parallax =========================== */
/*
.parallax {
	border: 1px  solid red;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
	perspective: 1px;
	perspective-origin: 0 0;

}

#19frontbg {
	width: 100%;
	height: 800px;
	background-image: url('https://www.klangidee.de/19layout/19bg.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	border: 1px solid green;
}

.slide {
	position: relative;
	padding: 0 10% 25vh; 
	min-height: 100vh;
	width: 100vw;
	box-sizing: border-box;
	transform-style: inherit;
	border-bottom: 1px solid blue;
}
*/

/* =========================== Startpage parallax NEW =========================== */




.parallax {
	scroll-behavior: smooth;
	perspective: 1px;
	height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;

}

.parallax_layer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.parallax_layer-base {
	padding: 100vh 0;
	border: 0px solid red;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.parallax_layer-back {
	height: 100vh;
	width: 100vw;
	background-image: url('https://www.klangidee.de/19layout/19bg.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	border: 0px solid green;
	-webkit-transform: translateZ(-1px) scale(2);
	transform: translateZ(-1px) scale(2);

}

   /* add some padding to force scrollbars 
.parallax_layer {
    padding: 100vh 0;
}
*/
   /* centre the content in the parallax layers */
.title {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* =========================== Startpage parallax NEW END=========================== */





/* -------------------Logo------------------- */

#start_headline {
	border: 0px solid blue;
	position: absolute;
	width: 100vw;
    height: 105px;
	left: 0px;
	top: 15vh;
	background-image: url("https://www.klangidee.de/19layout/logo.png");
	background-repeat: no-repeat;
	background-position: center;
	
}

/* -------------------Title------------------- */

#start_headline_content {
    border: 0px solid red;
	position: absolute;
	width: 100vw;
	left: 0px;
	top: 30vh;
    text-align: center;
}

/* =========================== Main Search =========================== */

#form-wrapper {
	display: -webkit-flex; /* Safari */
	-webkit-align-items: center; /* Safari 7.0+ */
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0px solid blue;
	vertical-align: text-top;
	position: absolute;
	width: 100vw;
	left: 0px;
	top: 75vh;
	text-align: center;
}

.form-input {
	border: 0px solid green;	
	line-height: 0;
	background-color:#c5c6c6;
	width:400px;
	height:40px;
	margin:0 0 0 0;
	padding:0 0 0 10px;
	color:#666;
	opacity: 0.9;
	filter: alpha(opacity=90); /* For IE8 and earlier */
}

.form-search {
	border: 0px solid red;
	background-image:url(https://www.klangidee.de/19layout/search.png);
	background-color: #c5c6c6;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	background-position: center center;
	width: 40px;
	height: 40px;
	cursor: pointer;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	opacity: 0.9;
	filter: alpha(opacity=90); /* For IE8 and earlier 	line-height: 0;*/
}
/*
.slide:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

}

.slide, .slide:before {
	background: 50% 50% / cover;  
}
*/
#start_bg:before {
	background-image: url("https://www.klangidee.de/19layout/19bg.jpg");
	transform: translateZ(-1px) scale(2);

}

#start_content {
	background: transparent;
	border: 0px solid red;
}

.start_prod_wrapper {
	min-width: 1200px;
	position: relative;
	z-index: 1;
	background-color: white;
	width: 100vw;
	margin: 0 0 50px 0;
	border: 0px solid green;
	display: flex;
	justify-content: center;
}

#start_footer {
	position: relative;
	left: 0px;
	bottom: 0px;
	width: 100% !important;
	height: 200px;
	background: #c6c6c6;
	border: 0px solid blue;
	margin-top: 0px;

}

/* =========================== Content headlines =========================== */

.start_content_header {
	border: 0px solid red;
	background-color: white;
	padding: 3vh 0 3vh 0;
	margin: 80px 0 0 0;
	text-align: center;
	height: 12vh;
	width: 100%;
}

/* =========================== Morelink Buttons =========================== */

#start_morelink {

	border: 0px solid blue;
	padding: 30px 0 30px 0;
	text-align: center;
	height: 10vh;
}

.start_morelink_button {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color:#c5c6c6;
	width: 400px;
	height: 40px;
	margin: auto;
	padding: 0 0 0 0;
	border: 0px solid green;
	color: #666;
	opacity: 0.9;
	filter: alpha(opacity=80); /* For IE8 and earlier */
}

/* =========================== Cookie Consent Begin =========================== */



/* =========================== Cookie Consent End =========================== */


/* =========================== Startpage Productions Section =========================== 

#start_productions_header {
	border: 0px solid red;
	text-align: center;
	height: 10vh;
}


#start_productions_wrapper {
	width: 1100px;
	border: 1px solid green;
	display: flex;       
	flex-direction: row; 
	flex-wrap: wrap;   
	justify-content: space-around; 
	align-items: flex-start;
	margin: auto;

}

.start_productions_cp {
	margin-top: 20px;
	text-align: center;
	border: 0px solid blue;
	width: 280px;
}

.start_productions_cp_wrapper {
	height: 100%;
	display: inline-block;
	text-align: left;
	width: 240px;
	border: 0px solid red;
}

div.start_productions_cp_wrapper { 
    position:relative;
}


div.start_productions_cp_wrapper a {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    text-decoration: none; 
    z-index: 10; 
    background-color: white; 
    opacity: 0; 
    filter: alpha(opacity=1); 
}

.start_productions_cp_hr {
	width: 100%;
	border-top: 1px solid black;
}*/
	
/* =========================== Classes for Productions and playlists =========================== */

#general_bg {
	/*background-image: url('https://www.klangidee.de/19layout/bg_gen.jpg');*/
	background-color: white;
}

.pages_bg {
	position: fixed;
	top: 5vh;
	width: 100%;
	height: 55vh;
	border: 0px solid blue;
	background-repeat: no-repeat;
	background-size: cover;

}

#prod_header {
	border: 0px solid red;
	padding: 40px 0 20px 0;
	margin: 50px 0 50px 0;
	text-align: center;
	overflow: hidden;
	height: 1%;
	width: 100%;
}

#prod_ek_head {
	border-bottom: 2px solid black;
	height: 20px;
	width: 75vw;
}

.prod_wrapper {
	min-width: 1200px;
	position: relative;
	z-index: 1;
	background-color: white;
	width: 100vw;
	margin: 0 0 200px 0;
	border: 0px solid green;
	display: flex;
	justify-content: center;
}

.prod_ek_headline {
	min-width: 1200px;
	position: relative;
	z-index: 1;
	background-color: white;
	width: 100vw;
	border: 0px solid green;
	display: flex;
	justify-content: center;
	margin: 30px 0 0 0;
}

/* ==============  begin centering flexbox ======================================== */

.p_grid {
	min-width: 800px;
	border: 0px solid red;
	list-style-type: none;
	display: flex;
	flex-flow: row wrap;

}

.p_container {
/*	flex-grow: 1;    */
	border: 0px solid green;
	margin: 0.5rem;
	padding: 0.5rem;
	z-index: 20;
}

.p_container.full {
	border: 0px solid blue;

 }
 
 .p_container.empty {
	border: 0px solid red;
	height: 10px;
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
}

.p_grid.center {
	justify-content: center;
}

.p_grid.width {
	width: 75vw;
}

/* ==============  end centering flexbos ======================================== */

.p_wrap {
	border: 0px solid black;
	margin: 0 auto;
	display: table;
}
.p_image {
	border: 0px solid grey;
	display: table-cell;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain; 
}
.p_image img {
	visibility: hidden;
	max-width: 100vw;
	min-width: 100%;

}
.p_caption {
	border: 0px solid black;
	display: table-caption;
	caption-side: bottom;
	line-height: 22px;
	padding: 10px 5px 0 5px;
	background-color: #ffffff;
	overflow: hidden;
}

.prod_titlebox {
	height: 40px;
}


.p_left {
	text-align: left; 
}

.prod_cp_hr {
	border-top: 1px solid black;
}


/* =========================== Playlists =========================== 

#playlist_wrapper {
	width: 980px;
	border: 0px solid green;
	display: flex;       
	flex-direction: row; 
	flex-wrap: wrap;  
	justify-content: space-around; 
	align-items: flex-start;
	margin: auto;

}

.playlist_cp {
	margin: 20px 0;
	text-align: center;
	border: 00px solid blue;
	width: 240px;
}

.playlist_cp_wrapper {
	height: 200px;
	width: 220px;
	display: inline-block;
	text-align: left;
	border: 0px solid grey;
}

div.playlist_cp_wrapper a {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    text-decoration: none; 
    z-index: 10; 
    background-color: white; 
    opacity: 0; 
    filter: alpha(opacity=1); 
}

div.playlist_cp_wrapper { 
    position:relative;
}

.playlist_cp_hr {
	width: 100%;
	border-top: 1px solid black;
}
*/
/* =========================== references =========================== */

#reference_wrapper {
	width: 980px;
	height: 700px;
	border: 0px solid green;
	display: flex;       /* establish flex container*/
	flex-direction: column; /* default value;*/
	flex-wrap: wrap;   /* default value; can be omitted*/
	align-items: baseline;
	margin: 30px auto 10vh auto;
	background-color: white;

}

.reference_cp_wrapper {
	padding: 10px;
	background-color: #efefef;
	margin: 5px 5px;
	display: inline-block;
	text-align: center;
	border: 1px solid #dadada;
}

div.reference_cp_wrapper a {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    text-decoration: none; /* Makes sure the link   doesn't get underlined */
    z-index: 10; /* raises anchor tag above everything else in div */
    background-color: transparent; /*workaround to make clickable in IE */
    opacity: 0; /*workaround to make clickable in IE */
    filter: alpha(opacity=1); /*workaround to make clickable in IE */
}

div.reference_cp_wrapper { /* Containing div must have a position value */
    position:relative;
}

#video_wrapper {
	position: relative;
	margin: auto;
	z-index: 20;
	width: 980px;
	height: 1490px;
	border: 0px solid green;
	display: flex;       /* establish flex container*/
	flex-direction: column; /* default value;*/
	flex-wrap: wrap;   /* default value; can be omitted*/
	align-items: baseline;
	margin: 0 auto 200px auto;
	background-color: white;
}

.video-js	{
	border: 1px solid #dadada;
}


/* =========================== pages =========================== */

.pages {
	scroll-behavior: smooth;
	perspective: 1px;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	border: 0px solid red;
}



.pages_hr {
	width: 100%;
	border-top: 1px solid black;
	margin-top: 20px;
}


#pages_content_wrapper {
	min-width: 730px;
	position: relative;
	z-index: 20;
	width: 60vw;
	padding: 70px 120px 70px 120px;
	border: 0px solid green;
	background-color: white;
	margin: 55vh auto 200px auto;
}

.ki_table_pages {
     border: 0;
	 width: 100%;
}
.ki_table_pages table, tr, td, th {
     border: 0;
	 padding: 5px 30px 0 0;
	 white-space: nowrap;
}

#pages_ueberuns_bg {
	background-image: url('https://www.klangidee.de/19layout/bg_ueber-uns.jpg');
}

#pages_lizenzierung_bg {
	background-image: url('https://www.klangidee.de/19layout/bg_lizenzierungi.jpg');
}

#pages_imp_bg {
	background-image: url('https://www.klangidee.de/19layout/bg_imp.jpg');
}

#pages_kontakt_bg {
	background-image: url('https://www.klangidee.de/19layout/bg_kontakt.jpg');
}

#start_pages_content {
	border: 0px solid red;
	margin-top: -30vh;
	background: none;
}

/* =============================   classes for emailform ========================= */

.inputfield      {
	border: none;
	background:#efefef;
	width: calc(100% - 20px);
	height: 30px;
	box-shadow:none;
	padding: 0 10px 0 10px;
	margin: 0 0 0 20px;

}

.formTextArea    {
	border: none;
	background:#efefef;
	width: calc(100% - 20px);
	height: 300px;
	box-shadow:none;
	padding: 10px;
	margin: 0 0 0 20px;
}

.messagediv {
	width: 100%;
	height: 170px;
}

.mailsend        {
	border: none;
	cursor: pointer;
	border: none;
	background:#efefef;
	width: calc(100% - 20px);
	height: 30px;
	padding: 0 10px 0 10px;
	margin: 0 0 0 20px;
}

input:invalid {
    box-shadow: none;
}

input:required {
    box-shadow:none;
}

.label_div {
	width: 100%;
	border: 0px solid black;
	padding: 0 0 0 0;
	margin: -20px 0 7px 20px;
}

.input_div {
	width: 100%;
	border: 0px solid blue;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}

/* =============================   Cockie Consent Classes ========================= */


















/*




.start_dates     {
         font-family: 'Work Sans', sans-serif;
         font-size: 16px;
         font-weight: bold;
}



.listEntry {
        margin-bottom: 12px;
}



.articlehead_container {
width: 100%;
height: 60px;
}




.articleText {
        font-family: 'Work Sans', sans-serif;
        margin-bottom: 3px;
        text-align: justify;
}

.articleCode {
        margin-bottom: 3px;
        font-family: "Courier New", Courier, monospace;
        font-size: 12px;
}

.articleSummary {
        font-family: 'Work Sans', sans-serif;
        font-size: 12px;
        color: #000000;
        line-height: 135%;
}

.nav_table, .nav_table a, .nav_table a:link, .nav_table a:active, .nav_table a:visited, .nav_table a:hover {
        font-family: 'Josefin Sans', sans-serif;
        font-size: 12px;
        color: #4A5966;
        font-weight: normal;
        text-decoration: none;
}
.nav_table a:hover {
        text-decoration: underline;
}

.nav_table_active, .nav_table_active a, .nav_table_active a:link, .nav_table_active a:active, .nav_table_active a:visited, .nav_table_active a:hover {
        font-family: 'Josefin Sans', sans-serif;
        font-size: 12px;
        color: #4A5966;
        font-weight: bold;
        text-decoration: none;
}

.articleList_toptext {
        font-family: 'Josefin Sans', sans-serif;
        font-size: 12px;
}

.articleList_listhead {
        font-family: 'Josefin Sans', sans-serif;
        font-size: 12px;
        font-weight: bold;
}


/* CSS for the top level list 
ul.list_top, ul.list_level {
        padding: 3px 0;
        margin-left: 0;
        border-bottom: 1px solid #5E747F;
        font-family: 'Josefin Sans', sans-serif;
}
ul.list_top li, ul.list_level li {
        list-style: none;
        margin: 0;
        display: inline;
        padding: 0;
}
ul.list_top li a, ul.list_level li a {
        padding: 3px 0.5em;
        margin: 0px;
        border: 1px solid #778;
        border-bottom: none;
        background: #D7DEE5;
        text-decoration: none;
}
ul.list_top li a:link, ul.list_level li a:link { color: #5E747F; }
ul.list_top li a:visited, ul.list_level li a:visited { color: #5E747F; }
ul.list_top li a:hover, ul.list_level li a:hover {
        color: Black;
        background: #92A1AF;;
        border-color: #227;
}
ul.list_top li.active a, ul.list_level li.active a {
        background: white;
        border-bottom: 1px solid white;
}
*/


/**
 * Sample CSS for DIV pagelayout

#container {
        width: 760px;
        \width: 780px;
        w\idth: 760px;
        border: 1px solid gray;
        margin: 10px;
        margin-left: auto;
        margin-right: auto;
        padding: 10px;
}

#headerBlock {
        padding: 5px;
        margin-bottom: 5px;
        background-color: rgb(213, 219, 225);
}

#mainBlock {
        padding: 5px;
        margin-left: 215px;
        margin-right: 215px;
        background-color: gray;
}

#leftBlock {
        float: left;
        width: 200px;
        \width: 210px;
        w\idth: 200px;
        margin: 0;
        margin-right: 5px;
        padding: 5px;
        background-color: rgb(235, 235, 235);
}

#rightBlock {
        float: right;
        width: 200px;
        \width: 210px;
        w\idth: 200px;
        margin: 0;
        margin-left: 5px;
        padding: 5px;
        background-color: rgb(235, 235, 235);
}

#footerBlock {
        clear: both;
        padding: 5px;
        margin-top: 5px;
        background-color: rgb(213, 219, 225);
}

.imgDIVinTextLeft {
        float: left;
        margin-right: 5px;
        margin-bottom: 5px;
        padding: 0;
}
.imgDIVinTextRight {
        float: right;
        margin-left: 5px;
        margin-bottom: 5px;
        padding: 0;
}
.imgDIVtopLeft {
        margin:8px 10px 5px 20px;
        padding:0px;
        border:0;
}
.imgDIVtopCenter {
        margin:8px -50% 5px -50%;
        padding:0px;
        border:0;
}

.imgDIVblockImgLeft {
        margin-right: 10px;
}
.imgDIVblockImgRight {
        margin-left: 10px;
}

.phpwcmsImgListRight {
        text-align: right;
        margin: 0;
        padding: 0;
}
.phpwcmsImgListLeft {
        text-align: right;
        margin: 0;
        padding: 0;
}


.phpwcmsSearchResult {
        margin: 15px 0 15px 0;
}
.phpwcmsSearchResult h3 {
        margin: 10px 0 1px 0;
        font-size: 12px;
        font-weight: bold;
}
.phpwcmsSearchResult p {
        margin: 0;
}
.phpwcmsSearchResult em.highlight, em.highlight {
        background-color: #FFFF00;
        font-style:inherit;
}

.phpwcmsArticleListEntry {
        clear: both;
}
.phpwcmsArticleListImage {
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
        padding-top: 3px;
}
.phpwcmsArticleListImageCaption {
        padding-top: 5px;
}

div.cpPagination {
        margin: 10px 0 10px 0;
        text-align: right;
}
a.cpPaginate, a.cpPaginateActive, a.cpPaginationPrev, a.cpPaginationNext {
        padding: 0px 3px 1px 3px;
        background-color: #FFFFFF;
        color: #BBBBBB;
        text-decoration: none;
        font-weight: bold;
        border: 1px solid #CBCBCB;
}
a.cpPaginateActive {
        background-color: #CBCBCB;
        color: #FFFFFF;
        border: 1px inset #CBCBCB;
}

a.cpPaginationPrev:hover, a.cpPaginationNext:hover, a.cpPaginate:hover {
        background-color: #DDDDDD;
        color: #666666;
        border: 1px inset #CBCBCB;
}

*/

/* login-form

.labelpos_firstname{
clear:both;
margin-top:5px;
}


.labelpos{
margin-top:3px;
float: left;
}

#title0 {
float:left;
margin-top:0px;
margin-left:100px;
}

#title1 {
float:left;
margin-top:0px;
margin-left:30px;
}

#title2 {
float:left;
margin-top:0px;
margin-left:30px;
}

#user_login {
border: none;
outline-color: #707070;
outline-style: solid;
outline-width: 1px;
background:#b3b3b0;
width:171px;
}

#user_password {
border: none;
outline-color: #707070;
outline-style: solid;
outline-width: 1px;
background:#b3b3b0;
width:171px;
}

#user_password2 {
border: none;
outline-color: #707070;
outline-style: solid;
outline-width: 1px;
background:#b3b3b0;
width:171px;
}

#user_firstname {
width:252px;
border:none;
outline-color: #707070;
outline-style: solid;
outline-width: 1px;
background:#b3b3b0;

}

#user_lastname {
width:252px;
border: none;
outline-color: #707070;
outline-style: solid;
outline-width: 1px;
background:#b3b3b0;
}

#user_street {
width:252px;
width:252px;
border: none;
outline-color: #707070;
outline-style: solid;
outline-width: 1px;
background:#b3b3b0;
}

#user_zip {
margin-right: 8px;
width:60px;
border: none;
outline-color: #707070;
outline-style: solid;
outline-width: 1px;
background:#b3b3b0;
}

#user_city{
width:182px;
border: none;
outline-color: #707070;
outline-style: solid;
outline-width: 1px;
background:#b3b3b0;

}

#user_email {
width:252px;
border: none;
outline-color: #707070;
outline-style: solid;
outline-width: 1px;
background:#b3b3b0;
}

#user_tel {
width:252px;
border: none;
outline-color: #707070;
outline-style: solid;
outline-width: 1px;
background:#b3b3b0;
}

#user_mobile {
margin-left:85px;
}


#user_country {
float: right;
margin-right:100px;
width: 254px;
background:#b3b3b0;
border: none;
outline-color: #707070;
outline-style: solid;
outline-width: 1px;
}

#user_prof {
float: right;
margin-right: 100px;
width: 254px;
background:#b3b3b0;
border: none;
outline-color: #707070;
outline-style: solid;
outline-width: 1px;
}

#user_company {
width:252px;
border: none;
outline-color: #707070;
outline-style: solid;
outline-width: 1px;
background:#b3b3b0;
}

#user_website {
width:252px;
border: none;
outline-color: #707070;
outline-style: solid;
outline-width: 1px;
background:#b3b3b0;
}

#user_signature {
margin-left:121px;
}

#label_signature {
position:absolute;
margin-top:5px;
}

/* Start personel / userdetail module css */
/* from the templates */

/*
.detail_list_entry {
clear:left;
display:block;
padding-left : 10px;
padding-top:0px;
   }

.detail_list_entry h3 {
   color : #fd761d;
}

.userdetail_name {
width: 50px;
}

.userdetail_city {
display:block;
font-size:12px;
font-weight:normal;
width: 50px;
}

.userdetail {
display:inline;
font-size:12px;
}

.detail_list_space {
padding:0px;
margin:0px;
}

.detail_list_entry {
padding-left : 10px;
padding-top:0px;
   }

.detail_list_entry h3 {
   color : #fd761d;
}

.userdetail_name {
width: 500px;
}

.userdetail_city {
font-size:12px;
font-weight:normal;
width: 500px;
}

.userdetail {
font-size:12px;
}

.detail_list_space {
padding:0px;
margin:0px;
}

.textfield       {
float: right;
margin: 0px 100px 0px 0px;
}

.linediv {
width: 100%;
height: 25px;
}

.spacer  {
height: 10px;
width: 100%;
}

.legend  {
color: #9d0122;
border: 1px solid #d3d3d1;
padding: 3px 5px 3px 6px;
}

.fieldset       {
width: 100%;
margin: 0px 0px 10px 0px;
border: 1px solid #d3d3d1;
padding: 10px 10px 10px 10px;
}

#feLogin {
float: right;
margin: 0px 33% 0px 0px;
border: none;
outline-color: #707070;
outline-style: solid;
outline-width: 1px;
background:#b3b3b0;
width:171px;
}

#fePassword {
float: right;
margin: 0px 33% 0px 0px;
border: none;
outline-color: #707070;
outline-style: solid;
outline-width: 1px;
background:#b3b3b0;
width:171px;
}

#feSubmit        {
cursor: pointer;
color: #9d0122;
float: right;
margin: 0px 33% 0px 0px;
border: none;
outline-color: #707070;
outline-style: solid;
outline-width: 1px;
background:#b3b3b0;
width: 80px;
}

.btn        {
margin: 15px;
margin-right: 25px;
float: right;
cursor: pointer;
color: #9d0122;
border: none;
outline-color: #707070;
outline-style: solid;
outline-width: 1px;
background:#b3b3b0;
width: 150px;
}

#feReminder      {
float: right;
margin: 0px 33% 0px 0px;
border: none;
outline-color: #707070;
outline-style: solid;
outline-width: 1px;
background:#b3b3b0;
width:171px;
}

#feLogout        {
cursor: pointer;
color: #9d0122;
border: none;
outline-color: #707070;
outline-style: solid;
outline-width: 1px;
background:#b3b3b0;
width: 150px;
}

#feEscape        {
cursor: pointer;
color: #9d0122;
border: none;
outline-color: #707070;
outline-style: solid;
outline-width: 1px;
background:#b3b3b0;
width: 150px;
}



.orderbutton        {
line-height: 25px;
text-align: center;
margin-top: 10px;
height: 25px;
width: 250px;
cursor: pointer;
border: none;
background-color: #686868;
opacity: 0.9;
}

.cart_update_button        {
line-height: 25px;
text-align: center;
margin-top: 10px;
height: 25px;
width: 250px;
cursor: pointer;
border: none;
background-color: #686868;
opacity: 0.9;
}

.cart_checkout_button        {
line-height: 25px;
text-align: center;
margin-top: 10px;
height: 25px;
width: 250px;
cursor: pointer;
border: none;
background-color: #686868;
opacity: 0.9;
}

.shop-list-amount        {
line-height: 25px;
text-align: center;
margin-top: 10px;
height: 25px;
width: 50px;
cursor: pointer;
border: none;
background-color: #686868;
opacity: 0.9;
}


#usage_box	{
padding: 0 12px 0 12px;
border: 0px solid black;
float: left;
width: 100px;
        font-family: sessions, Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: normal;
}

#usage_box_grey	{
   color: #8e8e8e;
   font-weight: normal;
padding: 0 12px 0 12px;
border: 0px solid black;
float: left;
width: 100px;
        font-family: sessions, Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: normal;
}


.cat_wrap	{
color: black;
float: left;
width: 98%;
height: 26px;
padding: 5px;
margin: -10px 1% 0 5px; 
background: rgba(104, 104, 104, .7);

}

.cat_wrap ul {
   margin: 0;
   padding: 0;
   border: 0;
   list-style: none;

}

.cat_wrap ul li {
border-right: 1px solid black;
padding: 0 12px 0 12px;
   display: block;
   float: left;
   margin: 0 0 0 0;
   font-family: sessions, Arial, Helvetica, sans-serif;
   font-size: 24px;
   font-weight: normal;

}

/* state for the active link 
.cat_wrap ul li.active a,
.cat_wrap ul li.active a:link,
.cat_wrap ul li.active a:visited,
.cat_wrap ul li.active a:active {
   color: #8e8e8e;
   font-weight: normal;
}

.cat_wrap_black	{
float: left;
width: 99%;
height: 26px;
padding: 5px;
margin: 10px 1% 0 0; 
background: rgba(104, 104, 104, .7);

}


.cat_wrap_black ul {
   margin: 0;
   padding: 0;
   border: 0;
   list-style: none;

}

.cat_wrap_black ul li {
border-right: 1px solid black;
padding: 0 12px 0 12px;
   display: block;
   float: left;
   margin: 0 0 0 0;
   font-family: sessions, Arial, Helvetica, sans-serif;
   font-size: 24px;
   font-weight: normal;

}

/* state for the active link 
.cat_wrap_black ul li.active a,
.cat_wrap_black ul li.active a:link,
.cat_wrap_black ul li.active a:visited,
.cat_wrap_black ul li.active a:active {
   color: black;
   font-weight: normal;
}

#small_usage_wrap	{
width: 16%;
float: left;
height: 26px; 
margin: 0 1% 0 0; 
padding:5px; 
background: rgba(104, 104, 104, .7);
}

#usage_wrap	{
float: left;
width: 36%;
height: 26px; 
margin: 0 0 0 0; 
padding: 5px; 
background: rgba(104, 104, 104, .7);
}

#backoverview_wrap	{
text-align: right;
width: 16%;
float: left;
height: 26px; 
margin: 0 0 1% 0; 
padding:5px; 
background: rgba(104, 104, 104, .7);
}

.help1 {
margin: 0 0 0 5px;
float: right;
width:25px; 
height:25px; 
/*background:url("../../layout/button_quest_dark.png");
}

.help1:hover {
cursor: pointer;
/*background:url("../../layout/button_quest_high.png");
}


.help2 {
margin: 0 0 0 5px;
float: right;
height:25px;
cursor: pointer;
/*background:url("../../layout/button_use_dark.png");
}

.help2:hover {
cursor: pointer;
/*background:url("../../layout/button_use_high.png");
}


.help3 {
margin: 0 0 0 5px;
float: right;
width:70px; 
height:25px; 
background:url("../../layout/button_use_darke.png");
}

.help3:hover {
cursor: pointer;
background:url("../../layout/button_use_highe.png");
}

.help_divider	{
font-weight: thin;
line-height: 20px;
height: 25px;
float: left;
font-size: 22px;
}


*/