/********
Project: Holzen mit Kurt Ming
Created by romics - www.romics.ch
*********/

/* km_forst */
/*********************************************************************/

body {
	margin: 0;
	padding: 0;
	font-family: Arial;
	font-size: 12px;
	color: #555;
	background: #FFF url("../images/design/bg.jpg") top left repeat-x;
	text-align: center;
}

* {
	padding: 0;
	margin: 0;
}

a {
	outline: none;
}

p {
	padding-bottom: 10px;
}

img {
	border: none;
}

.clear {
	height: 0;
	font-size: 0;
	line-height: 0px;
	clear: both;
}

#construction:link {
	text-decoration: none;
	color: #C03636;
}

#construction:visited {
	text-decoration: none;
	color: #C03636;
}

#construction:hover {
	text-decoration: none;
	color: #C03636;
	border-bottom: 1px solid #C03636;
}


a:link {
	text-decoration: none;
	color: #006600;
}

a:visited {
	text-decoration: none;
	color: #006600;
}

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

a:active {
	text-decoration: none;
	color: #333;
}

img.brdImg {
	border: 4px solid #CCC;
	margin: 5px 14px 5px 0;
}

hr {
	border-top: 1px solid #CCC;
	border-bottom: 0;
	height: 0px;
	margin: 10px 0;
}

* html hr {
	border-top: 1px solid #CCC;
	border-bottom: 0;
	height: 0px;
	margin: 3px 0;
}

h1 {
	font-family: Arial;
	font-size: 21px;
	font-weight: normal;
	padding-bottom: 5px;
	color: #006600;
	line-height: 20px;
}

h2 {
	font-family: Arial;
	font-size: 17px;
	font-weight: normal;
	padding-bottom: 10px;
	margin-bottom: 10px;
	color: #7F7F7F;
	border-bottom: 1px solid #CCC;
	line-height: 20px;
}

h3 {
	font-family: Arial;
	font-size: 13px;
	padding-bottom: 5px;
	color: #7F7F7F;
	line-height: 20px;
	padding-top: 10px;
}

#km {
	font-family: Arial;
	font-size: 13px;
	font-weight: bold;
	color: #006600;

}

#mcontent ul {
	list-style-type: none;
	margin-bottom: 10px;
}

#mcontent li {
	list-style-type: none;
	padding: 3px 0 3px 15px;
	border-left: 3px solid #CCC;
	color: #333;
}

/* FRAME */
/*********************************************************************/

#frame {
	width: 910px;
	margin: 0 auto;
	text-align: center;
}

/* HEADER */
/*********************************************************************/

#header {
	width: 910px;
	height: 340px;
	text-align: left;
	background: url("../images/design/header_forest.jpg") top left no-repeat;
}

#headerPlain {
	width: 910px;
	height: 340px;
	text-align: left;
	background: url("../images/design/header_plain.jpg") top left no-repeat;
}

#headerLeft {
	width: 150px;
	height: 37px;
	padding-top: 99px;
	float: left;
	text-align: left;
	position: relative;
}

#headerRight {
	width: 473px;
	height: 298px;
	padding-top: 42px;
	float: right;
	text-align: left;
}

#headerTitleProjects {
	text-align: left;
	padding: 169px 0 0 5px;
	width: 210px;
}

#logo {
	width: 254px;
	height: 82px;
	background: url('../images/design/km_forst.jpg') top left no-repeat;
	display: block;
}

* html #logo {
	background: none;
	width: 254px;
	height: 52px;
}

/* MENU */
/*********************************************************************/

#menu {
	width: 910px;
	height: 37px;
	position: relative;
	z-index: 9998;
	margin-left: 8px;
}

#menu #nav li {
	display: inline;
	list-style-type: none;
}

#menu #nav li a {
	float: left;
	height: 37px;
	overflow: hidden;
	background: url("../images/design/menukm_forst_short.gif") 0 0 no-repeat;
	}

#menu #nav li span {
	float: left;
	height: 37px;
	overflow: hidden;
	background: url("../images/design/menukm_forst_short.gif") 0 0 no-repeat;
	}


/* BUTTONS */
#menu #nav li#homepage a { background-position: 0 0; width: 116px; }
#menu #nav li#spalten a { background-position: -116px 0; width: 108px; }
#menu #nav li#transport a { background-position: -224px 0; width: 96px; }
#menu #nav li#maschinen a { background-position: -320px 0; width: 90px; }



/* HOVER BUTTONS */
#menu #nav li#homepage a:hover { background-position: 0 -37px; }
#menu #nav li#spalten a:hover { background-position: -116px -37px; }
#menu #nav li#transport a:hover { background-position: -224px -37px; }
#menu #nav li#maschinen a:hover { background-position: -320px -37px; }


/* SELECTED */
#menu.homepage #nav li#homepage a { background-position: 0 -74px; cursor: default; }
#menu.homepage #nav li#homepage a:hover { background-position: 0 -74px; cursor: default; }

#menu.spalten #nav li#spalten a { background-position: -116px -74px; cursor: default; }
#menu.spalten #nav li#spalten a:hover { background-position: -116px -74px; cursor: default; }

#menu.transport #nav li#transport a { background-position: -224px -74px; cursor: default; }
#menu.transport #nav li#transport a:hover { background-position: -224px -74px; cursor: default; }

#menu.maschinen #nav li#maschinen a { background-position: -320px -74px; cursor: default; }
#menu.maschinen #nav li#maschinen a:hover { background-position: -320px -74px; cursor: default; }



/* MAIN CONTENT */
/*********************************************************************/

#mcontent {
	width: 900px;
	text-align: left;
	padding: 0 5px 0 5px;
	line-height: 18px;
}

#mcontent a:hover {
	border-bottom: 1px solid #006600;
}

#mcontent a:active {
	border-bottom: 1px solid #006600;
}

#mcontentLeft {
	width: 210px;
	padding: 0 26px 0 0;
	float: left;
	background: url('../images/design/shadow.jpg') top right no-repeat;
}

#projectsLeft {
	width: 210px;
	text-align: left;
}

#mcontentLeft #projectsLeft p {
	width: 200px;
	padding: 0 0 8px 0;
	margin: 0 10px 10px 0;
	border-bottom: 1px solid #CCCCCC;
	font-family: Arial;
	font-size: 11px;
}

#mcontentLeft #projectsLeft p a {
	font-size: 12px;
	font-weight: bold;
}

#mcontentLeft #projectsLeft p a:visited {
	font-size: 12px;
	font-weight: bold;
}

#mcontentRight {
	width: 664px;
	text-align: left;
	float: right;
	padding-top: 20px;
}

#columnLeft {
	width: 315px;
	text-align: left;
	float: left;
}

#columnRight {
	width: 315px;
	text-align: left;
	float: right;
}

.projects {
	margin: 5px 10px 10px 0;
	padding-bottom: 10px;
}

.projects img {
	border: 4px solid #CCC;
	margin: 0 10px 10px 0;
}

.projects a {
	font-size: 12px;
	font-weight: bold;
	font-family: Arial;
}

/* FOOTER */
/*********************************************************************/


#footer {
	width: 890px;
	padding: 15px 10px 30px 10px;
	margin: 20px 0 0 0;
	text-align: left;
	font-family: Arial;
	font-size: 11px;
	position: relative;
	background: url('../images/design/bg_footer.jpg') top center no-repeat;
}

#footer a {
	margin-right: 10px;
}

#footer span a {
	margin-right: 0px;
}

#footer a:hover {
	border-bottom: 1px solid #006600;
}

#footer a:active {
	border-bottom: 1px solid #006600;
}

#www a {
	color: #999;
}

/* POSITIONS */
/*********************************************************************/

#logo {
	position: absolute;
	top: 20px;
	left: 0px;
}

/* FORMS */
/*********************************************************************/

.styleForm {
	width: 350px;
	font-family: Arial;
	font-size: 12px;
	color: #333;
	padding: 4px;
	border-top: 1px solid #666;
	border-bottom: 1px solid #C3C3C3;
	border-left: 1px solid #666;
	border-right: 1px solid #C3C3C3;
	background: #ECECEC;
	margin-bottom: 10px;
}

.styleFormE {
	width: 350px;
	font-family: Arial;
	font-size: 12px;
	color: #333;
	padding: 4px;
	border: 1px solid #CC0000;
	background: #ECECEC;
	margin-bottom: 10px;
}

.styleArea {
	width: 654px;
	font-family: Arial;
	font-size: 12px;
	color: #333;
	padding: 4px;
	border-top: 1px solid #666;
	border-bottom: 1px solid #C3C3C3;
	border-left: 1px solid #666;
	border-right: 1px solid #C3C3C3;
	background: #ECECEC;
	margin-bottom: 10px;
}

.styleAreaE {
	width: 654px;
	font-family: Arial;
	font-size: 12px;
	color: #333;
	padding: 4px;
	border: 1px solid #CC0000;
	background: #ECECEC;
	margin-bottom: 10px;
}

#error {
	width: 642px;
	border: 1px solid #FF7979;
	padding: 10px;
	margin-bottom: 10px;
	color: #CC0000;
	background: #FFE8E8;
}

.error {
	color: #CC0000;
}

input.sum {
    text-align: right;
    font-weight: bold;
    background: #F2F2F2;
}

input.readonly {
    background: #F2F2F2;
}

input[type=submit]:disabled {
  background: #cccccc;
}

#amount_total, #staple_total, #delivery_total, #costs_total {
    text-align: right;
    font-weight: bold;
    background: #F2F2F2;
}

#ster_total {
    font-size: 11px;
    background: #F2F2F2;
}

#trimis {
	width: 642px;
	border: 1px solid #DFDCE2;
	padding: 10px;
	margin-bottom: 10px;
	color: #0099CC;
	background: #F8F7F9;
}

.service_btn {
   font-size: 14px;
   padding-top: 4px;
   padding-right: 4px;
   padding-bottom: 4px;
   padding-left: 4px;
   color: #dfdfdf;
   background-color: #2bab1a;
}

.service_btn:hover {
   color: white;
}

.service_div {
   padding-top: 8px;
   padding-right: 0px;
   padding-bottom: 0px;
   padding-left: 0px;
}

.missing_btn {
   font-size: 14px;
   padding-top: 4px;
   padding-right: 4px;
   padding-bottom: 4px;
   padding-left: 4px;
   color: #dfdfdf;
   background-color: #B8B8B8;
}

.missing_btn:hover {
   color: white;
}

.missing_div {
   padding-top: 8px;
   padding-right: 0px;
   padding-bottom: 0px;
   padding-left: 0px;
}

.order_btn {
   font-size: 14px;
   padding-top: 4px;
   padding-right: 4px;
   padding-bottom: 4px;
   padding-left: 4px;
   color: #dfdfdf;
   background-color: #2bab1a;
}

.order_btn:hover {
   color: white;
}


.info {
 font-style: italic;
 padding-top: 4px;
 padding-right: 4px;
 padding-bottom: 4px;
 padding-left: 0px;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #b8b8b8;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #b8b8b8;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #b8b8b8;
}

/* GALLERY */
/* Credits: Dynamic Drive CSS Library */
/* URL: http://www.dynamicdrive.com/style/ */

#gallerycontainer{
position: relative;
z-index: 50;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

#gallerylabel{
width: 210px;
margin-top: 8px;
position: relative;
z-index: 0;
font-family: Arial;
font-size: 11px;
}

/*used to overwrite the setting in mcontent*/
#gallerycontainer a:hover {
border-bottom: none;
}

#gallerycontainer p {
margin-top: 8px;
margin-bottom: -4px;
}

.thumbnail img{
border: 1px solid #7F7F7F;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid #006600;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 30px;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 5500;
text-decoration: none;
}
/* thumbnail01 */
/*********************************************************************/

.thumbnail01 img{
border: 1px solid #7F7F7F;
margin: 0 5px 5px 0;
}

.thumbnail01:hover{
background-color: transparent;
}

.thumbnail01:hover img{
border: 1px solid #006600;
}

.thumbnail01 span{ /*CSS for enlarged image*/
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail01 span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail01:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: -100px;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 5500;
text-decoration: none;
}

/* thumbnail02 */
/*********************************************************************/

.thumbnail02 img{
border: 1px solid #7F7F7F;
margin: 0 5px 5px 0;
}

.thumbnail02:hover{
background-color: transparent;
}

.thumbnail02:hover img{
border: 1px solid #006600;
}

.thumbnail02 span{ /*CSS for enlarged image*/
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail02 span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail02:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: -199px;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 5500;
text-decoration: none;
}

#player {
	display:block;
	height:400px;
	width:520px;
	padding:4px 4px;
	background:#CCC;
	text-align:center;
}

/*
Crossfade for Images
*/
@-webkit-keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 10% {
   opacity:1;
 }
 20% {
   opacity:0;
 }
 90% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-moz-keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 10% {
   opacity:1;
 }
 20% {
   opacity:0;
 }
 90% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-o-keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 10% {
   opacity:1;
 }
 20% {
   opacity:0;
 }
 90% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 10% {
   opacity:1;
 }
 20% {
   opacity:0;
 }
 90% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

#cf4a {
  position:relative;
  height:281px;
  width:450px;
}

#cf4a img {
  position:absolute;
  left:0;
}

#cf4a img {
  -webkit-animation-name: cf4FadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 20s;

  -moz-animation-name: cf4FadeInOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 20s;

  -o-animation-name: cf4FadeInOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 20s;

  animation-name: cf4FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 20s;
}
#cf4a img:nth-of-type(1) {
  -webkit-animation-delay: 16s;
  -moz-animation-delay: 16s;
  -o-animation-delay: 16s
  animation-delay: 16s;
}
#cf4a img:nth-of-type(2) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;
}
#cf4a img:nth-of-type(3) {
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
  -o-animation-delay: 8s;
  animation-delay: 8s;
}
#cf4a img:nth-of-type(4) {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}
#cf4a img:nth-of-type(5) {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
}

/* table */
/*********************************************************************/
.product {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.product td, .product th {
  border: 1px solid #ddd;
  padding: 8px;
}

td.alnright {
  text-align: right;
}

td.sum {
  font-weight: bold;
}

td.num {
  text-align: right;
}

.product tr:nth-child(even){background-color: #f2f2f2;}

.product tr:hover {background-color: #ddd;}

.product th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #2bab1a;
  color: white;
}

.missing th {
  background-color: gray;
}


.customer {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.customer td, .product th {
  padding-top: 5px;
  padding-bottom: 5px;
}

.c_input {
  width: 99%;
}

 /* Modal */
 /*********************************************************************/
 /* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  font-size: 14px;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 40%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.m_close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.m_close:hover,
.m_close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}