/*
	@ Author : Bernd Göbel
	@ Version: 0.1b
	@ Date   : 16. April 2013 06:36:55 MESZ
	@ Status : beta
*/

/*
• Hintergrund Grau: #e3dcd0
• Hintergrund Mittelgrau: #ebe3d9
• Schrift Weiß: #ffffff
• Schrift Schwarz: #282828
• Schrift Orange: #ea5906
• Schrift Grau: #444444
• Schrift Mittelgrau: #7e796d
• Schrift Hellgrau: #e3e3e3
• Skrollbutton: #cccccc
• Skrollbalken: #f1f1f1
• Kontur Hellgrau: #e4eaee
• Kontur Dunkelgrau: #d0c9ba
*/


/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */
html,
button,
input,
select,
textarea {
    color: #282828;
    font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;}
}

body {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
    border: none;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Custom styles
   ========================================================================== */

/* layout
*******************************************************************************/
/*html {overflow-y:scroll;}*/
html, body {background: #fff;}

#header {position: absolute; height: 100px; z-index: 999; width: 100%;}

#header #logo {position: absolute; left: 30px; top: 39px; display: block; width: 230px;  }
#page {position: relative;}
#contentarea { margin-left: 30px; width: 850px;}

#col_info { float: left; width: 240px; }
#col_content {float: right; width: 560px; padding: 5px; margin: -5px 0 0 -5px;}

#contentarea {padding-top: 166px;}

body.art #contentarea,
body.gallery #contentarea { width: 100%; }
body.art #col_content,
body.gallery #col_content {float: none; width: 100%;  min-width: 1024px;1024- }

body.media #contentarea { width: 100%; }
body.media  #col_content {float: left; width: auto; margin-left: 50px;}

/*!
 * Cookiebar
 * -------------------------------------------------------------------------------------------------
 */
.threeme-cookiebar {
    position: fixed;
    z-index: 99;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 30px;
    color: white;
    background-color: #cbccc1;
    opacity: 0.9;

}

.threeme-cookiebar p {
    margin: 0;
    text-align: center;
    vertical-align: middle;
    font-size: 20px;
    line-height: 1.428571429;
}

.threeme-cookiebar .btn {
    margin-left: 5px;
    display: inline-block;
    margin-bottom: 0;
    padding-bottom: 1px;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    color: white;
}
/*
 *------------------------------------------------------------------------------------------------
 */
.matomo {font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;}


/* typo
*******************************************************************************/
h1, h2, h3, h4, p, ul, ol, li, dt, dd {margin: 0; padding: 0;}
ul, ol {list-style: none; list-style-image: none;}

h1, h2, h3 {font-weight: 300;}


h1 {padding: 0; color: #999791; font-size: 1.625em;}
h2 { position: relative; top: 0;margin: -.25em 0 35px -2px; padding: 0; color: #000; text-transform: uppercase; font-size: 2.5em; font-family: "Courier New", Courier, monospace;}

.special h2 {color: #000;}
body.home  h2 { margin-left: -18px; padding: 8px 16px; background: #fff; display: inline-block;}


h3 { margin: 1em 0 1em; padding: 0; color: #000; text-transform: uppercase; font-size: 1.5em; font-family: "Courier New", Courier, monospace;}

.special h3 { padding-top: 14px; background: url("img/line-dotted.png") repeat-x left top;}

#col_info h3 {  margin-top: 20px; padding-top: 6px; font-size: 14px; font-style: italic; background: url("img/line-dotted.png") repeat-x left top;}


h4 { margin: 1em 0 0; padding: 0; color: #000; font-size: 1em; }

a {
   outline: 0;
}
a:focus {
   outline: 0!important;
   border: 0;
   color: #707070
}


p,
ul,
ol,
dt,
dd {font-size: 1em; line-height: 1.4625em; color: #000;}

dl {line-height: 1.4625em;}

p {padding: 0 0 1.3em; }

dfn {font-style: normal;}

#col_content ul { padding: 0; margin-left: 0; list-style: none;}
#col_content ul li {margin: 0; padding:0 0 .25em;}

h2 a,
h3 a {color: #000; text-decoration: none;}
#col_content p a,
#col_content li a { display: inline-block; margin: 0 -4px; padding: 0 4px; color: #929292; text-decoration: none; }
#col_content p a:hover,
#col_content li a:hover {background: #000; }


#col_content ul li.news-list-item { padding-top: 14px!important; padding-bottom: 20px; background: url("img/line-dotted.png") repeat-x left top; /*border-bottom: 1px dotted #000;*/ }
#col_content ul li.news-list-item:first-child {padding-top: 0px!important; background: none;}

.news-list-item h4 { margin: 0 0 6px!important; font-size: 1.125em; font-family: "Courier New", Courier, monospace; font-weight: normal; text-transform: uppercase; color: #000;}
.news-list-item h3 { margin: 0 0 20px!important; padding-top: 0!important; color: #000; font-size: 2em; line-height: 120%; background: none!important; }
.news-list-item p {color:#000;}

.news-list-item h4,
.news-list-item h3,
.news-list-item p {width: 500px;}

.contact p {color: #000;}
#col_content .contact p a:hover { color: #929292; }

.matomo {
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}

/* pages
*******************************************************************************/
body.art div.csc-default,
body.art div.csc-frame-default {float: left; position: relative; margin-right: 10px; margin-bottom: 10px!important; }
body.art div.csc-default h2,
body.art div.csc-frame-default h2 {position: absolute; top: 10px; right: 0;  margin: 0;color: #fff; font-size: 1.2em;}
body.art div.csc-default h2 a,
body.art div.csc-frame-default h2 a { padding: 10px 20px 10px 50px; color: #fff; background:url("img/bg_70.png") }

body.gallery .csc-textpic-imagecolumn {width: inherit!important;}
body.gallery .csc-textpic-image {display: block; float:left!important; padding-right: 10px!important;}

/* form
*******************************************************************************/

form { padding-top: 30px; background: url("img/line-dotted.png") repeat-x left top; }
form  h2 {display: none;}
fieldset { padding-bottom: 4px; background: url("img/line-dotted.png") repeat-x left bottom; }
legend {display: none;}
form .form-group {color: #000;}
form .form-group,
form .clearfix {clear: both;}

form .clearfix,
form .actions {
  margin-left: 160px;
}

form .form-group label { display: block; float: left; width: 160px; padding-bottom: 8px; color: #000; }
form .form-group div { float: left; padding-bottom: 8px; }

input[type="text"],
textarea { width: 310px; padding: 4px 5px; height: 20px; background-color: #b2b2b2; color: #fff; border: 0 solid; font-size: 18px; font-family: "Courier New", Courier, monospace;}
input[type="text"]:focus,
textarea:focus { background-color: #878787; }

textarea {height: 80px; resize: none;}

form button { margin: 10px 0 10px -4px; padding: 0 4px; border: 0 solid; background: none; text-align: left; font-family: "Courier New", Courier, monospace; font-size: 20px;}
form button:hover{ color: #929292; background: #000;}


form .clearfix p { font-size: 12px; }

.form-group .checkbox .help-block {
  font-size: 12px;
}

/* navigation
*******************************************************************************/
#m_main  { position: absolute; left: 0px; bottom: 26px; margin-left: 270px; min-width: 600px;}

body.msie7 #m_main,
body.msie8 #m_main { width: 800px;}

#navMain { position: relative; bottom: 0; float: left;font-family: "Courier New", Courier, monospace; font-size: 18px; margin-right: 23px;}

#navMain li { display: inline-block; margin-left: 46px; }
#navMain li a {padding: 2px 4px; color: #000; text-decoration: none; text-transform: uppercase;}
#navMain li#current a,
#navMain li a:hover {background: #000; color: #fff; }

#navMain ul {display: none;}

#col_information .csc-menu {margin-top: 30px;}

#col_information .csc-menu,
#subMenu,
#col_information ul {font-family: "Courier New", Courier, monospace; font-size: 14px;}

#col_information ul {margin: 30px 0 0 0;}

#col_information .csc-menu li,
#col_information li,
#subMenu li { padding: 2px 0 10px; background: url("img/line-dotted.png") repeat-x left top }

#col_information li {margin: 0!important; }

#col_information .csc-menu li a,
#col_information li a,
#subMenu li a {padding: 2px 4px; color: #707070; text-decoration: none; text-transform: uppercase;}


#col_information .csc-menu li a:hover,
#col_information li a:hover,
#subMenu li a:hover {background: #000; color: #fff; }

#navPage {position: relative; bottom: -4px; float: left;font-family: "Courier New", Courier, monospace; font-size: 14px;}
#navPage li { display: inline-block; margin-left: 23px; }
#navPage li a {padding: 2px 4px; color: #000; text-decoration: none; text-transform: uppercase;}
#navPage li#current a,
#navPage li a:hover {background: #000; color: #fff; }




/*
image-stretcher ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/

html {_background: url("https://www.klausprior.com/fileadmin/template/default/css/customer/img/white-space.png") no-repeat fixed;}
.bgstretcher-area { text-align: left; }
.image-path {display: none;}
.overlay-path {display: none;}

.bgstretcher, .bgstretcher ul, .bgstretcher ul li {
	position: absolute;
	top: 0;
	left: 0;
}
.bgstretcher ul, .bgstretcher ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.bgstretcher {
	background: #fff;
	overflow: hidden;
	width: 100%;
  min-width: 1024px!important;
	position: fixed;
	z-index: 1;
	_position: absolute; /*IE6 doesn't support fixed positioning*/
	top: 0;
	left: 0;
}

#bgstretcher li.img-loaded {position: relative;}
#bgstretcher li.img-loaded img.overlay {position: absolute; top: 0; left: 0; z-index: 9;}

/*
Bilder ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
#gallery-info{position: absolute; top: 109px; left: 30px; z-index: 10001; width: 256px; display: none;  /*background: url("img/bg_70_white.png");*/ }

.gallery .csc-textpic-imagecolumn .csc-textpic-caption {position: absolute; left: -999em; top: -999em;}

.gallery-elements {display: none; }
.gallery-button { position: absolute; z-index: 99999; overflow: hidden; width: 49px; height:49px; padding: 0; margin: 0; text-indent: -999em;cursor: pointer; background: url("img/sprite.png") no-repeat;}

#gallery-elements-overview{ top: 184px; right: 0;  text-indent: 0;}
#gallery-elements-overview a {display:block; height: 49px; width: 49px; margin: 0!important; text-indent: -999em; background: url("img/sprite.png") no-repeat 0 -100px; }
#gallery-elements-overview a:hover {display:block; height: 49px; width: 49px; text-indent: -999em; margin: 0; padding: 0; border: 0 solid;  }
#gallery-elements-close{ top: 120px; right: 0; }
#gallery-elements-next{ top: 400px; right: 0;  background-position: 0 -200px;}
#gallery-elements-previous{ top: 400px; left: 0;  background-position: 0 -300px; }

#gallery-info h3 {padding-bottom: 9px; margin-bottom: 10px; color: #000; font-size: 14px;  background: url("img/line-dotted.png") repeat-x left bottom }
#gallery-elements-legend{ color: #000; font-size: 14px; line-height: 120%;font-family: "Courier New", Courier, monospace;}
#gallery-elements-pages{ margin-bottom: 0; color: #000; font-size: 11px; font-family: "Courier New", Courier, monospace;}


/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {

}

@media (max-width:800px){
	/*
	#m_main {margin-left: 0; left: -23px; top: 80px;}
	#navPage{ position: absolute; left: 21px; top: 30px;  float: none;}
	*/
}

@media (max-width:1050px){ /*1020*/
	#navPage{ position: absolute; left: 21px; top: 30px;  float: none;}
	#m_main {width: 600px;}
}

@media (max-width:1180px){ /*1020*/
	body.art.js .csc-textpic-image img {width: 485px;height: auto;}
	body.art.js div.csc-default h2 {
    font-size: 1em;
    top: 8px;
	}
	body.art.js div.csc-default h2 a {
    padding: 8px 16px 8px 40px;
	}
}

@media only screen and (max-width: 1024px) {
	body.page #col_content,
	html.mobile body.page #col_content,
	html.no-js body.page #col_content,
	body.special #col_content,
	html.mobile body.special #col_content,
	html.no-js body.special #col_content { background: url("img/bg_50_white.png");}
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}
