/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 02.02.2016, 10:19:13
    Author     : Georg Worch
*/
@import "global.css";

/*******************************************************************************
    1. Seite  --  index.html
*******************************************************************************/

figure figcaption {
  padding: 2px 4px 2px 4px;
  background-color: #335599;
  color: #cccccc;
  font-style:normal;
  font-size: 1.5em;
  text-align: center;
  border-radius: 0 0 3px 3px;
}

#maschinen-bilder {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1;
    justify-content: space-between;
    margin: 20px 0;
}

#welcome {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1;
    justify-content: space-between;
}

#firma-slideshow {
    width: 330px;
    height: 250px;
}

#welcome-text {
    flex: 1;
    text-align: left;
    margin: 3em;
}

#welcome-text h2 {
    margin-bottom: 2em;
}

#welcome-text p {
    font: Helvetica;
    font-size: 120%;
    line-height: 2em;
    color: #323232;
}

/*******************************************************************************
    produkte.html
*******************************************************************************/

.einleitung {
    color: #323232;
    width: 60%;
    font-size: 120%;
    line-height: 2em;
    margin: 50px 0;
}
.einleitung p {
    color: #323232;
}

.head {
    margin: 30px 0;
    font-weight: 700;
    font-size: 120%;
}

.produkte {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.bilderProdukte {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    justify-content: space-between;
    min-width: 320px;
}

.produkte-Text {
    width: 50%;
    font-size: 120%;
    line-height: 2em;
    text-align: left;
    margin-right: 20px;
}

/*******************************************************************************
    abfuellen.html
*******************************************************************************/
#abfuellen-inhalt {
    display: flex;
    flex-wrap: wrap;
}

#abfuellen-inhalt p {
    color: black;
}

#abfuellen-inhalt #spalte1 {
    flex: 2;
}

#abfuellen-inhalt #spalte2 {
    flex: 1;
    margin-left: 20px;
}

/*******************************************************************************
    verschweissen.html
*******************************************************************************/
#verschweissen-inhalt {
    display: flex;
    flex-wrap: wrap;
}

#verschweissen-inhalt p {
    color: black;
}

#verschweissen-inhalt #spalte1 {
    flex: 2;
}

#verschweissen-inhalt #spalte2 {
    flex: 1;
    margin-left: 20px;
}

/*******************************************************************************
    m56.html
*******************************************************************************/
.m56-inhalt {
    display: flex;
    flex-wrap: wrap;
}

.m56-inhalt h1 {
    margin: 20px 0;
    font-size: 200%
}
.m56-inhalt #spalte1 {
    flex: 2;
}

.m56-inhalt #spalte2 {
    flex: 1;
}

.m56-inhalt p {
    color: black;
    font-size: 120%;
    line-height: 2em;
    margin: 10px 30px 50px 0;
}

#slideshow {
    margin-bottom: 10px;
}

.models {
    margin-top: 50px;
}


/*******************************************************************************
    impressum.html
*******************************************************************************/
#impressum p {
    color: black;
}

/*******************************************************************************
    kontakt.html
*******************************************************************************/
.kontakt-inhalt {
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    color: #646464;
    background: transparent;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-weight: 700;
    margin-bottom: 40px;
}

.kontakt-inhalt #right {
    flex: 1;
    display: flex; 
    flex-wrap: wrap;
    padding: 25px;    
}

.kontakt-inhalt #right #adr {
    flex: 1;
}

.kontakt-inhalt #right #bild {
    flex: 1;
}

.kontakt-inhalt #left {
    flex: 1;
    display: block;
    height: 500px;
    background-color: #F0F0F0;
    padding: 15px;
}

.kontakt-inhalt h1 {
    font-weight: 800;
    margin-bottom: 30px;
}

/** Field Styles **/
.kontaktForm .field, #form-title.field {
    padding: 0;
    /*
    padding-bottom: 12px;
    padding-top: 12px;
    */
    position: relative;
    clear: both;
}

.kontaktForm .field:first-child{
    padding-top:0;
}

.kontaktForm .field:last-child{
    padding-bottom:0;
}

.kontaktForm #prodList {
    display: flex;
    flex-wrap: wrap;
}

.kontaktForm #prodList1 {
    flex: 1;
    padding-left: 100px;
    padding-bottom: 10px;
}

.kontaktForm #prodList2 {
    flex: 1;
    padding-bottom: 10px;
}

.kontaktForm #anliegen {
    padding-left: 150px;
}

/** Field Widths */
.f_25 {
    width: 21%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%; /* jquery ui resize grid hack - not sure why */
}

.f_50 {
    width: 46%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%; /* jquery ui resize grid hack - not sure why */
}

.f_75 {
    width: 71%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%; /* jquery ui resize grid hack - not sure why */
}

.f_100 {
    width: 96%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%; /* jquery ui resize grid hack - not sure why */
}

.kontaktForm label, p {
    color: #798e94;
    text-align: left;
    font: 14px/24px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
    margin-bottom:5px;
    display:inline-block;
}

.kontaktForm label {
    width: 100px;
}

.kontaktForm p {
    padding-top: 10px;
}

.kontaktForm .submit input {
    text-align: center;
    font-size: 12px;
    text-decoration: none;
    border-radius: 3px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    -ms-border-radius: 14px;
    /*
    text-shadow: 1px 1px 0px #fff;
    */
    display: block;
    margin: 12px -2px 12px 0;
    text-align: center;
    float: right;
    padding: 6px 12px;
    height: 28px;
    cursor: pointer;
    min-width: 96px;
    width:auto;
    background-color: #822368;
    /*
    background:#ddedf3 url(../images/button-bg.jpg) repeat-x 0 0 scroll;
    */
    box-shadow: 0 0 0 5px #eef5f7;
    -moz-box-shadow: 0 0 0 5px #eef5f7;
    -webkit-box-shadow: 0 0 0 5px #eef5f7;
    border: 1px solid #a4c5d0;
    font-weight: 900;
    color: white;
    /*
    color: #6b97a8;
    */
}

.kontaktForm .option{
    margin:6px 0;
}

.kontaktForm .option-title{
    position:relative;
    top:2px;
    color: #798e94;
}

/** Clearfix */
.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

/*
	The following zoom:1 rule is specifically for IE6 + IE7.
	Move to separate stylesheet if invalid CSS is a problem.
*/
* html .clearfix,
*:first-child+html .clearfix {
	zoom: 1;
}