/* Stylesheet basics Scheuerl.net */
/* peter@scheuerl.net */

/*
<!-- #bbinclude "filestat.pl" -->
                        Filename:     css_standard.css
                        Filesize:     13101 Byte
                        Last update:  10-Jun-2018 21:20 +1200
                        By:           Peter Scheuerl
<!-- end bbinclude -->
*/



/* # # # # # # # # # # # #    C O L O U R S  # # # # # # # # # # #  */

/*         B o r d e r s   a n d   B a c k g r o u n d s            */

/* Avocado green:           #74725c   ->   colour0                  */
/* Header (Mahogany-MD):    #d16654   ->   colour1                  */
/* Ertra (Wedgewood-LT):    #66949a   ->   colour2                  */
/* Avocado Green-VY LT:     #b0bb8c   ->   colour3                  */
/*																	*/
/*                           F o n t s                              */
/*																	*/
/* Standard (Royal Blue):   #1e3655   ->   colour0                  */
/* Header (Mahogany-MD):    #d16654   ->   colour2                  */
/* On Dark (White):         #fff      ->   colour3                  */


/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #  */

/* ######### Global Layout Styles ######### */

html {min-height: 100%;} /* For Fx incl. 3.6 to fix body height problem for gradient */

body {
	margin: 0; padding: 20px; font-weight: 300; text-align: justify; color: #1e3655;
	/* Add background image (eg gradient) here for browsers who do not support css gradients */
	background: #74725c;
	/* following css gradienst for FF & Webkit, IE gets a filter in ie_all.css */
	background: -moz-linear-gradient(top, #74725c, #b0bb8c);
	background: -webkit-gradient(linear, 0 top , 0 bottom, color-stop(0, #74725c), color-stop(1, #b0bb8c));
	background: -o-linear-gradient(top, #74725c, #b0bb8c);
	background: linear-gradient(top, #74725c, #b0bb8c);
	font-family: lucida grande, trebuchet ms, arial, tahoma, geneva, verdana, sans-serif;
	font-size:15px;
	}



/* Set Form elements to same Font as rest of page */
input, textarea {font-family: Trebuchet MS, Arial, Tahoma, Geneva, Verdana, sans-serif;}
form {margin: 0; padding: 0;}


/* # # # # # # # # # # # START standard elements, might be changed later */

a:link, a:visited {color: #55402c; text-decoration: none;
-webkit-transition: color .1s ease-in;
-moz-transition: color .1s ease-in;
-o-transition: color .1s ease-in;
transition: color .1s ease-in;
}
a:hover, a:active {color: #ff9c00; text-decoration: underline;}
a:focus {outline: 1px solid}
h1, h2, h3, h4, h5 {font-weight: normal; color: #ff9c00; margin: 5px 0;}
#header h1, #header h2, #header h3, .colour1 h1, .colour1 h2, .colour1 h3 {text-shadow: #a13624 -1px -1px 0px, #f18674 1px 1px 0px;}
.colour2 h1, .colour2 h2, .colour2 h3 {text-shadow: #36643a -1px -1px 0px, #86b4ba 1px 1px 0px;}

/* for Explorer */
a:link img, a:visited img, a:hover img, a:active img {border: none;}

.xs {font-size: 9px}
em {color: #a06200}

/* a container to surround floated boxes anywhere, might get extra definitions later in this stylesheet */
.floatcontainer {overflow: hidden}

/* # # # # # # # # # # # END standard elements, might be changed later */

/* Background for whole page */
#container {margin: 0 auto;}

/* Background around content, if a background layer is desired */
#content {
	min-width: 600px;
	max-width: 1050px;
	margin: 0 auto 10px auto; text-align: left; border: 2px solid #66949a; background: #fff; position: relative;
	-webkit-box-shadow: 3px 3px 20px #000;
	-moz-box-shadow: 3px 3px 20px #000;
	box-shadow: 3px 3px 20px #000;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	overflow: hidden;
	}


#header {background: #d16654; margin: 0; padding: 0;
	-webkit-border-radius:  7px 7px 0 0;
	-moz-border-radius:  7px 7px 0 0;
	border-radius: 7px 7px 0 0;
	background: -moz-linear-gradient(top, #d16654, #a75142);
	background: -webkit-gradient(linear, 0 top , 0 bottom, color-stop(0, #d16654), color-stop(1, #a75142));
	background: linear-gradient(top, #d16654, #a75142);
}
#header h1 {font-family: lobster, arial, sans-serif; font-size: 4em; color: #fff; margin: 0; padding: 10px 0; text-align: center}
#header h1 a:link, #header h1 a:visited {color: #fff; text-decoration: none;
-webkit-transition: color .3s ease-in;
-moz-transition: color .3s ease-in;
-o-transition: color .3s ease-in;
transition: color .3s ease-in;
}
#header h1 a:hover, #header h1 a:active {color: #ccc; text-decoration: none}


#main1, #main2 {margin: 0; padding: 0}
#left {float: left; display: none; width: 0}
#right {float: right; width: 30%; overflow: hidden; font-size: .8em; margin: 20px 2% 0 0;}
#maincolumn {overflow: hidden; margin-right: 30%; padding: 3%; width: 62%;}


/* Portrait */
@media screen and (orientation:portrait) {
	#main1, #main2 {margin: 0; padding: 0}
	#right { margin: 0 2% 0 0; padding: 10px 3%; width: 94%; overflow: hidden; font-size: .8em;}
	#maincolumn {margin-right: 0; padding: 10px 3%; width: 94%; overflow: hidden;}
}

/* Landscape */

@media screen and (orientation:landscape) {
	#main1, #main2 {margin: 0; padding: 0}
	#left {float: left; display: none; width: 0}
	#right {margin: 20px 2% 0 0; width: 30%; float: right; overflow: hidden; font-size: .8em; }
	#maincolumn {margin-right: 30%; padding: 3%; width: 62%; overflow: hidden;}
}



h1, h2, h3, h4
{font-family: 'Fugaz One', Helvetica, arial, sans-serif;} /* lobster */

.middle h1 {color: #d16654; font-size: 1.4em;}
.middle h2 {color: #d16654; font-size: 1.3em;}
.middle h3 {color: #1e3655; font-size: 1.2em;}
.middle h4 {color: #d16654; font-size: 1em;}
.middle p {line-height: 1.3em;}

/* Boxes  */

#right h3 {text-align: center; line-height: 1.5em; margin: 0; padding: 0; font-size: 1.6em;}
#right > div > p, #right > div > div {margin: 0; padding: 3%;}
#right ul.nav {margin: 0; padding: 3%; list-style: none;}
#right ul.nav > li {margin: 0; padding: 2% 0;}
#right ul.nav > li a:before {content: "▶ ";}
#right ul.nav > li a:hover {text-decoration: none;}

/* colour0: border avocado green standard font colour */
.colour0 { border: 2px solid #74725c; color: #1e3655;
	margin: 0;
	-webkit-border-radius:  5px;
	-moz-border-radius:  5px;
	border-radius: 5px;
}

#right > .colour0 > h3 {background: #66949a; color: #fff;}

#right > div {margin: 0 0 1.8em 0;}



/* colour0: border + head avocado green, standard font colour */
.colour0 { border: 2px solid #74725c; color: #1e3655;
	-webkit-border-radius:  5px;
	-moz-border-radius:  5px;
	border-radius: 5px;
}

#right > .colour0 > h3 {background: #74725c; color: #fff;}

/* colour1: border + head mahogany, standard font colour */
.colour1 { border: 2px solid #d16654; color: #1e3655;
	margin: 0;
	-webkit-border-radius:  5px;
	-moz-border-radius:  5px;
	border-radius: 5px;
}

#right > .colour1 > h3 {background: #d16654; color: #fff;}

/* colour2: border + head Wedgewood, standard font colour */
.colour2 { border: 2px solid #66949a; color: #1e3655;
	-webkit-border-radius:  5px;
	-moz-border-radius:  5px;
	border-radius: 5px;
}

#right > .colour2 > h3 {background: #66949a; color: #fff;}

/* Portfolio */
.project h2, .project h3, .project h4
{font-family: lucida grande, trebuchet ms, arial, tahoma, geneva, verdana, sans-serif;}

.project {margin-bottom: 10px; padding-bottom: 5px; overflow: hidden; border-bottom: 1px dotted #74725c; position: relative;}

.project + h2 {margin-top: 20px;}

.project .preview {float:right; margin: 0 0 5px 10px; padding: 0; position: relative; overflow: visible;}

.preview .previewnote {margin: 0; padding: 0; line-height: 65px; position: absolute; top: 0; left: 10%; height: 60%; width: 80%; color: #fff; background: rgba(77,75,61,.7); text-align: center;
opacity: 1;
-webkit-transition:  .5s ease-in;
-webkit-transform: perspective(300px) rotateX(270deg);
-webkit-transform-origin: 50% 0;
-o-transition: 1s;
-o-transform: perspective(500px) rotateX(270deg);
-o-transform-origin: 50% 0;
-moz-transition: 1s;
-moz-transform: perspective(500px) rotateX(270deg);
-moz-transform-origin: 50% 0;
transition: 1s;
transform: perspective(500px) rotateX(270deg);
transform-origin: 50% 0;

}
.preview:hover .previewnote { opacity: 1;
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}

/* ipic */
.ipic {margin:0; border: 5px solid #fff;
	-webkit-box-shadow: 1px 1px 5px #333;
	-moz-box-shadow: 1px 1px 5px #333;
	box-shadow: 1px 1px 5px #333;
}
.ipic img {margin: 0; padding: 0; vertical-align: text-bottom; border: none;}
.ipic .caption {text-align: left; font-size: 0.8em; padding: .3em; line-height: 1.2;}
.ipic .caption div {padding: 5px 3px 0px 3px;}

.ipic.floatleft {
margin: 5px 20px 10px 0;
-webkit-transform:rotate(-2deg);
-moz-transform:rotate(-2deg);
-ms-transform:rotate(-2deg);
-o-transform:rotate(-2deg);
transform:rotate(-2deg);
}
.ipic.floatright {
margin: 5px 0 10px 20px;
-webkit-transform:rotate(2deg);
-moz-transform:rotate(2deg);
-ms-transform:rotate(2deg);
-o-transform:rotate(2deg);
transform:rotate(2deg);
}

.floatleft {float: left;}
.floatright {float: right;}
.center, .ipic.center .caption {text-align:center;}
.center .caption {margin:auto;}

.ipic.floatleft.straight, .ipic.floatright.straight {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
}

/* List position beside floatet elements (in ie6: zoom:1): */
/* has to be limited on which lists it acts, otherwise there are problems with navigations etc. */
/* The padding is needed to get the dots or numbers far enough right to show beside a left floatet element */
/* IE6 needs additional zoom:1 */
.fliess ul, .fliess ol {overflow: auto; padding-left: 2.5em}
#maincolumn li {padding-bottom: 15px;}

/* START Inline Links */
/* <span class="ilink internal"><a href="/unternehmen?JOB_NAME=DisplayPage" target="_top" id="13091">Mehr Informationen</a></span>*/
.ilink {padding: 0;}

/* give space for icon if needed */
.ilink a:link, .ilink a:visited
{padding: 2px 0;}


.internal a:link, .internal a:visited
{color: #798896;}

.external a:link, .external a:visited
{color: #a06200;}

/* Document icon before ilink This ONLY works in CSS3 comlplying Browsers - others ignore it */

a[href$="pdf"]:link, a[href$="pdf"]:visited, a[href$="pdf"]:hover, a[href$="pdf"]:active
	{background: url('./icon_pdf.gif') left 2px no-repeat; padding-left: 20px;}
a[href$="txt"]:link, a[href$="txt"]:visited, a[href$="txt"]:hover, a[href$="txt"]:active
	{background: url('./icon_txt.gif') left 2px no-repeat; padding-left: 20px;}
a[href$="xls"]:link, a[href$="xls"]:visited, a[href$="xls"]:hover, a[href$="xls"]:active
	{background: url('./icon_xls.gif') left 2px no-repeat; padding-left: 20px;}
a[href$="doc"]:link, a[href$="doc"]:visited, a[href$="doc"]:hover, a[href$="doc"]:active
	{background: url('./icon_doc.gif') left 2px no-repeat; padding-left: 20px;}
a[href$="ppt"]:link, a[href$="ppt"]:visited, a[href$="ppt"]:hover, a[href$="ppt"]:active
	{background: url('./icon_ppt.gif') left 2px no-repeat; padding-left: 20px;}
a[href$="zip"]:link, a[href$="zip"]:visited, a[href$="zip"]:hover, a[href$="zip"]:active
	{background: url('./icon_zip.gif') left 2px no-repeat; padding-left: 20px;}
a[href$="avi"]:link, a[href$="avi"]:visited, a[href$="avi"]:hover, a[href$="avi"]:active,
a[href$="mov"]:link, a[href$="mov"]:visited, a[href$="mov"]:hover, a[href$="mov"]:active,
a[href$="ogg"]:link, a[href$="ogg"]:visited, a[href$="ogg"]:hover, a[href$="ogg"]:active,
a[href$="mp4"]:link, a[href$="mp4"]:visited, a[href$="mp4"]:hover, a[href$="mp4"]:active
	{background: url('./icon_mov.gif') left 2px no-repeat; padding-left: 20px;}
a[href$="mp3"]:link, a[href$="mp3"]:visited, a[href$="mp3"]:hover, a[href$="mp3"]:active
	{background: url('./icon_mp3.gif') left 2px no-repeat; padding-left: 20px;}
a[href$="eps"]:link, a[href$="eps"]:visited, a[href$="eps"]:hover, a[href$="eps"]:active,
a[href$="EPS"]:link, a[href$="EPS"]:visited, a[href$="EPS"]:hover, a[href$="EPS"]:active,
a[href$="tif"]:link, a[href$="tif"]:visited, a[href$="tif"]:hover, a[href$="tif"]:active,
a[href$="gif"]:link, a[href$="gif"]:visited, a[href$="gif"]:hover, a[href$="gif"]:active,
a[href$="GIF"]:link, a[href$="GIF"]:visited, a[href$="GIF"]:hover, a[href$="GIF"]:active,
a[href$="jpg"]:link, a[href$="jpg"]:visited, a[href$="jpg"]:hover, a[href$="jpg"]:active,
a[href$="JPG"]:link, a[href$="JPG"]:visited, a[href$="JPG"]:hover, a[href$="JPG"]:active
{background: url('./icon_jpg.gif') left 2px no-repeat; padding-left: 20px;}


/* END Inline Links */

/* Some links without type-icon */
 a.preview:link, a.preview:visited, a.preview:hover, a.preview:active {background: none; padding-left: 0;}

/* Whitespace problem-fix */
img {display: inline-block;}

/* within Editor */
.error {margin: 10px;}
.error ul {margin: 0; padding: 5px; list-style-type: none; border: 1px solid red; font-weight: bold;}
.error ul li {color: red; list-style-image: none;}

@media screen and (max-width: 480px) {
body {font-size: 20px; padding: 20px 1px;}
#content {min-width: 320px;}
}