/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

ul, p {margin: 0; padding: 0;}

body {
  font-family: Helvetica;
  background-color:#ffcb00;
  min-width:1024px;
}

div#head-container {
  background:#f4f4f4;
  height: 62px;
  box-shadow: -2px -6px 20px -8px rgba(0, 0, 0, 0.33) inset;
}

.container {
  margin:auto;
  width:997px;
}

div#head-container header {height: 62px;position: relative;}
div#head-container header .ccm-spacer {display:none;}
img#logo {position: absolute; left:10px; bottom:6px; height:50px; }

/* Das hier ist eine Hilfsteintrag um auf der Startseite mit der Milchtheke die Caption auszublenden: */
#image .nivoSlider img:FIRST-CHILD {
  z-index:10;
}

/* MENU TODO START */
#main-navi {
  position: absolute; right:0; bottom:0px;
}
#main-navi > ul > li {
  font-size:16px; 
  line-height:24px; 
  color:#8dc73f; 
  float:left; 
  margin-left:0px;
  position:relative;
  display:block;
}
#main-navi ul li a {
  padding: 18px 20px 20px 20px;
  display:block;
  color:#8dc73f; 
  text-decoration: none;
  white-space: nowrap;
  font-weight:bold;
  border-left:1px solid #dddddd;
}
#main-navi ul li ul {display:none;}
#main-navi ul ul li {background-color: #ebebec;}

#main-navi ul li:hover > a {
  box-shadow: inset 1px 8px 7px -6px #89898A;
  color: #ebebec !important;
  background-color: #8dc73f;
}

#main-navi ul li:hover ul {display:block;position:absolute;z-index:1000;background-color:#ebebec;top:46px;left:-3px;}

#main-navi ul li:hover ul li {margin-left:0;border-bottom:1px dashed #87888a;}
#main-navi ul li:hover ul li:hover {border-bottom:1px solid #8dc73f;}
#main-navi ul li:hover ul li:LAST-CHILD {border-bottom:none;}
/* MENU TODO END */

#content-container {
  background: #ffcb00;
  box-shadow: inset 1px 8px 7px -6px #89898A;
  padding-bottom:30px;
}

section a {font-style: italic; color:#6b972f;text-decoration: none;}
section a:hover {text-decoration: underline;}
section li a {text-decoration: underline;}
section li a:hover {text-decoration: none;}

/* FIXME: */
section#content a.goto-parent {
  background: url("img/back_arrow.png") no-repeat left 7px;
  display: block;
  font-size: 14px;
  padding-left: 12px;
  position: absolute;
  right: 20px;
  top: 17px;
}

section  {margin-top:34px;}
section#content {position:relative;}
section#image  {margin-top:0px;position:relative;}
section#image div.shadow {box-shadow: inset 1px 8px 7px -6px #89898A;position:absolute;top:0;height:20px;width:100%;z-index:20;}
section.articles {margin-top:0;padding-top:34px;}

section.boxed,
section.articles article {
  background:#ffffff;
  box-shadow:3px 2px 2px 0 #89898A;
  color: #8dc73f;
}
section.articles article.teaser {
  position:relative;
  float:left; 
  margin-bottom:34px;
}
section.articles article.teaser-1of3 {
  width:304px;
  margin-left:42px;
}
section.articles article.teaser-2of3 {
  width:650px;
  margin-left:42px;
}
section.articles article.teaser-3of3 {
  width:998px;
  margin-left:0px;
}
section.articles article.teaser-3of3 + article.teaser-1of3 {
  margin-left:0px;
}

section.articles article.first,
section.articles article:FIRST-CHILD {margin-left:0;}
section header,
section.articles article header {padding:13px 14px 17px 14px;}

/* FIXME: */
section .milestones h2,
section ul,
section p {font-size:14px;line-height:23px; color:#4B4C4B;margin:0 14px 23px 14px; text-align: justify;}
section ul {
  padding-left:49px;
  list-style-image: url(img/list.png);
}
section.articles article ul li {margin-bottom:23px;}

section header h1,
section.articles article header h1 {
  padding:3px 0 15px 28px;
  margin:0;
  border-bottom:1px solid #8dc73f;
  background:url(img/h1_dot.png) no-repeat left 3px;
  font-weight:normal;
  font-size:21px;
  line-height:24px;
  text-transform: uppercase;
}
section header h1 a,
section header h1 a:hover {
  color:#8dc73f;
  font-style: normal;
  text-decoration: none;
}
section header h1 a:hover {
  color:#6b972f;
}

section article h4 {
  margin:10px 14px;
}

section .milestones h2 {width:30px; float: left; font-weight:normal;}
section .machine-box p {text-align:left;}
section .milestones p {margin-left: 58px; text-align:left;}

section.full ul.contact-persons {list-style-type: none;margin:0 0 62px 0;padding-left:0;}
section.full ul.contact-persons li {display:block;float:left;margin-left:41px;margin-bottom:0;}
section.full ul.contact-persons li:FIRST-CHILD {margin-left:14px;}
section.full ul.contact-persons h2 {margin:17px 0px 0px 0px;font-size:16px; line-height:24px; color:#8dc73f;text-transform: uppercase;font-weight: normal;}
section.full ul.contact-persons p {margin-left:0;}

section.sidebar{margin-left:687px;overflow:hidden;}
section.content-2of3,
section.services div.text-content {width:650px;}
section.content-2of3 {float:left;}
section.services div.image-content {padding-top:45px;}
/*section.services div.image-content img {width:270px;height:auto;}  FIXME */

.machine-box {height:332px; overflow:hidden;}

footer {
  font-family:Helvetica;
  font-size:12px;
  line-height:21px;
  text-align: center;
  clear:both;
  height:200px;
  background-image: url('img/wiese.jpg');
  background-position:center bottom;
  background-size: 100% auto; /* width and height, can be %, px or whatever. */
}
footer #footer-wrap {
  height:100px;
  background: url('img/footer_bg.png') repeat-x top left;
}
footer nav#top-navi {
  font-size:13px; 
  line-height:20px; 
  padding-top:7px;
  height:100px;
}

nav#top-navi,
nav#top-navi a {color: #ffffff;font-family:Helvetica;text-decoration: none;}
nav#top-navi a:hover {text-decoration: underline;}
nav#top-navi li {float:left;}
nav#top-navi li:before {content:" | "; padding-left:5px;}
nav#top-navi li:FIRST-CHILD:before {content:"";padding-left:0px;}
nav#top-navi .actual-date {float:right;}

/* Gadget Styles: */
ul.service-image-list {list-style: none;padding:0 0 30px 15px;margin:0;}
ul.service-image-list li {float:left;height:270px;width:270px;margin:0 25px;}
.fancybox-title {text-align: center;}
.fancybox-title-outside-wrap{margin-top:15px;}
.fancybox-next span {right:-10px;}
.fancybox-prev span {left:-10px;}
.fancybox-nav span {visibility: visible;}

form p.form-line label {
  display:block;width:100px; float:left;
  padding-top:6px;
}
form p.form-line textarea,
form p.form-line input {
  display:block;width:500px;margin-left:100px;
  border:0;
  background-color:#e8eaec;
  padding:6px;
  font-family: Helvetica;
  font-size:16px;
}

form:focus p.form-line textarea:invalid,
form:focus p.form-line input:invalid {
  box-shadow: 0 0 1.5px 2px red;
  outline: 0;
}
form button {
  margin-left:100px;
  border:1px solid #b4b6b6;width:auto;border-radius:10px;
  font-family: Helvetica;
  font-size:14px;
  padding:6px 24px;
  color:#808285;
  background-color:#e8eaec;
}
span.contact-phone{font-weight:bold;font-size:21px;color:#4b617c;font-family: Helvetica;}
p.contact-image {position:absolute;right:0;bottom:0;margin:0;}


.slider-wrapper {
    position:relative;
}
.slider-wrapper .nivo-caption {
  background-color: #ffffff;
  color: #8dc73f;
  padding:21px 0 20px 35px;
  margin:0;
  font-size:21px;
  line-height:24px;
  cursor: pointer;
}
.slider-wrapper .nivo-caption .highlighted {text-transform: uppercase;}
.slider-wrapper .nivo-controlNav {
    padding: 0;
    text-align: right;
    position:absolute;
    bottom:18px;
    right:85px;
    z-index:10;
}
.slider-wrapper .nivo-controlNav a {
    background: url("img/bullet.png") no-repeat scroll 0 0 transparent;
    border: 0 none;
    display: inline-block;
    height: 18px;
    margin: 0 0 0 8px;
    width: 18px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}
.slider-wrapper .nivo-controlNav a.active {
    background-position: 0 -18px;
}

.jigdetail .nivo-controlNav {display:none;}

.nivoSlider.uninitialized {height:433px;}
.nivoSlider.uninitialized img{display:none;}
.nivoSlider.uninitialized img:FIRST-CHILD{display:block;}
.nivoSlider.hidecaption .nivo-caption {display:none !important;}

ul.jigdetail-image-list {list-style-type: none;padding:0;margin:0;margin-left:14px;padding-bottom:40px;}
ul.jigdetail-image-list li {float:left;display:block;padding:0;margin:0 3px 0 0;opacity:0.4;overflow:hidden;width:190px;height:82px;}
ul.jigdetail-image-list li.active {opacity:1;}

.jigdetail-link a {display:block;overflow:hidden;}
.jigdetail-link a img,
.jigdetail-image-list a img{
  -webkit-transition:all .3s ease 0s;
  -moz-transition:all .3s ease 0s;
  -ms-transition:all .3s ease 0s;
  -o-transition:all .3s ease 0s;
  transition:all .3s ease 0s
}
.jigdetail-link a:hover img,
.jigdetail-image-list a:hover img{
  -webkit-transform:scale(1.05) rotate(-1deg);
  -moz-transform:scale(1.05) rotate(-1deg);
  -ms-transform:scale(1.05) rotate(-1deg);
  -o-transform:scale(1.05) rotate(-1deg);
  transform:scale(1.05) rotate(-1deg)
}















/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@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;
    }
}