/* Joris-kocht.ch

// Farben:
// Blau: #000  rgb(55,109,140)
*/
body {
    font-family: pt_sansregular, sans-serif;
    /*background-image:url('../images/chilli.jpg');*/
      background: no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}
.wrapper {max-width:1200px;margin:auto;}
/* Grid System */
div.grid {position:absolute;z-index: -1;height:100vh;}
.gridrow {display:flex;height:100%;}
.col {border: 1px solid #dedede;width:80px;}


/* Navigator */
.navigatorcontent {
    display:block;
}
#draggable.affix-top {
    position:absolute;
}
#draggable.affix {
    position:fixed;
}
#draggable {
    /*position:absolute;*/
    display: block; 
    opacity: 1; 
    top: 20px;
    right:240px;
    left:auto;
    z-index:999;
}
div.navigator a.homelink {
    position: absolute;
    width: 85px;
    height: 47px;
    margin-left: -200px;
    margin-top: 4px;
    z-index:990;
    text-decoration:none;
    color:transparent;
}
div.navigator a.homelink:hover {
    background-color:rgba(255,255,255,0.5);
    color: #900;
    font-size:2em;
}
/*
div.navigator a.homelink:after {
    content: "Home";
}
*/
div.navigator {
    width:240px;
    border: 1px solid #999;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.8);
    
    background-color: #fff;
}
div.navigatortrigger {
    position:absolute;
    width:100%;
    height:55px;
    z-index: 900;
}
div.navigatortrigger:hover {
    /*background-image: url('../images/grid-transparent.png');*/
    cursor:pointer; 
}
div.navigator .navigatorhead {
    border-bottom:1px solid #999;
    height:55px;
}
/*
div.navigator .navigatorhead:hover {
    background-image: url('../images/grid.png');
    cursor:pointer;
}*/
div.navigator .navigatorhead span {
    font-size:2em;
    padding-top:8px;
    color: #000;
    cursor:pointer;
    z-index: 998;
}
div.navigator .navigatorhead span:hover {
    color: #990000;
}
div.navigator .navigatorhead img {
    height:55px;
    padding:4px;
}

/* Navigator Top-Navigation */
nav.top ul {
    font-family: pt_sansbold, sans-serif;
    font-size: 3em;
    padding:0px;
    text-align: center;
}
nav.top li {
    list-style-type: none;
}
nav.top li a {
    color: #000;
    display:block;
}
nav.top li a:hover {
    text-decoration: none;
    color: #990000;
}

/*ul.sub {
    height:120px;
    visibility:visible;
    opacity:1;
    filter:alpha(opacity=1);
    -webkit-transition:500ms ease;
    -moz-transition:500ms ease;
    -o-transition:500ms ease;
    transition:500ms ease;
}


nav.top li:hover > ul.subopen {
    visibility:visible;
    opacity:1;
    filter:alpha(opacity=1);
    height:120px;
}
nav.top li:hover > ul.subclosed {
    visibility:hidden;
    opacity:0;
    filter:alpha(opacity=0);
    height:0px;
}
/* Subnavigation */
nav.top li ul.sub {
    font-family: pt_sansbold, sans-serif;
    font-size: 0.5em;
    padding:0px 2px 12px 47px;
    text-align: left;
    border-bottom: 1px solid #999;
    margin-bottom: 12px;
}
nav.top li ul.sub li {
    list-style-type: none;
    border: none;
}
nav.top li ul.sub li a {
    color: #000;
    display:block;
}
nav.top li ul.sub li a:hover {
    text-decoration: none;
    color: #990000;
}

/* Navigator Service Navigation */
nav.service ul {
    font-family: pt_sansbold, sans-serif;
    font-size: 1.5em;
    padding:0px 30px 0px 0px;
    text-align: right;
}
nav.service li {
    list-style-type: none;
}
nav.service li a {
    color: #000;
    display:block;
}
nav.service li a:hover {
    text-decoration: none;
    color: #990000;
}
nav li.smallmenu {
    border: none;
}
nav li a.smallmenu {
    border: none;
    font-size: 0.5em;
}

/* article content */
h1, h2, h3, h4 {
    color:#000;
    font-family: pt_sansbold, sans-serif;
}
h1 {font-size: 3em;} h2 {font-size: 2em;} h3 {font-size: 1.5em;}
article .textbox {
    font-family: pt_sansregular, sans-serif;
    background-color: rgba(255,255,255,0.85);
    height:100%;
    padding-top:60px;
    border-bottom: 6px solid #000;
}
article p.lead {
    font-size:1em;
    color: #000;
    line-height:1.4em;
}
article p .mediumtext {font-size:1.1em;font-family: pt_sansbold, sans-serif;}
article p .largetext {font-size:1.5em;font-family: pt_sansbold, sans-serif;}
article p.legend {
    font-size:1em;
    color: #000;
    text-align: right;
}
article p.legend img {
    float:right;
}
hr {
    margin: 8px -15px 0px -15px;
    border: 0;
    border-bottom: 6px solid #000;
}
.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 18px;
    color: inherit;
    letter-spacing: 0.5px;
}
    /* Search form */

    .search-bar {
        /*position: absolute;
        right: 13px;
        top: 12px;*/
    }
        .glyphicon-search {
            color:#000;
            float:left;
            padding: 8px 12px 0 0;
        }
        .search-bar .field {
            margin: 0;
            padding: 0;
        }
        .search-bar form input.text {
            width: 155px;
            padding: 5px 34px 5px 15px;
            color: #ccc;
            margin: 0 0 20px 0;
            border: none;
            -moz-border-radius: 14px;
            border-radius: 14px;
            background: #000;
            float:left;
        }

        .search-bar form input.action {
            font-size: 14px;
            cursor: pointer;
            border: none;
            padding: 5px;
            background: #000;
            color: #ccc;
            border-radius: 15px;
            margin: 0 0 0 12px;
        }
        .search-bar form input.active,
        .search-bar form input.action:hover {
            color: #000;
        }
        .search-bar form input:focus,
        .header textarea:focus {
            outline: none; /* removes default browser outlining on focus */
        }
        .search-dropdown-icon {
            display: none; /* hides search-dropdown-icon when site is at full width - media queries set it to display:block when at mobile/tablet width */
        }

/* ACCORDION *********************************/
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
    z-index: 2;
    color: #fff;
    background-color: #000;
    border-color: #000;
}
.panel-heading {
    padding: 0px;
    border-bottom: 0px solid transparent;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}
div.panel-body img {
    border: 1px solid #ccc;
    width:330px;
    margin-left: 3px;
    display: block;
    overflow:hidden;
}
/* IMAGES 
-------------------------------------------- */
img {
    
    height: auto; /* resets the image height so that it maintains its aspect ratio when width is set */
    /*background: transparent url(../images/ajax-loader.gif) no-repeat center center;*/
}
img.left {
    float: left;
    max-width: 50%;
    margin: 5px 20px 10px 0;
}
img.right {
    float: right;
    max-width: 50%; /* Responsive width */
    margin: 5px 0 10px 20px;
}
img.leftAlone {
    float: left;
    margin-right: 100%;
    margin-bottom: 10px;
    clear: both;
}
img.center {
    float: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 10px;
    clear: both;
}


/* Breakpoints **********************************************************************************/
@media only screen and (max-width: 1280px) {
    /* Navigator */
    
    #draggable {
        /*position:absolute;*/
        display: block; 
        opacity: 1; 
        position:absolute;
        top: 20px;
        right:10px;
        left:auto;
        z-index:999;
    }

}
@media only screen and (max-width: 768px) {
    .wrapper {max-width:100%;margin:0;}
        .navigatorcontent {
        display:none;
    }
    div.navigator {
        width:100%;
        border: 1px solid #999;
        box-shadow: 3px 3px 5px rgba(0,0,0,0.8);
        position:static;
        top: 0px;
        right:auto;
        left:0px;
        z-index:999;
        background-color: #fff;
    }  
    #draggable.affix {
        position:static;
    }

    #draggable {
        display: block; 
        opacity: 1; 
        left: 0px; 
        top: 0px;
    }
    div.navigatortrigger {
        display:none;
    }
    div.navigator .navigatorhead {
        border-bottom: 1px solid #999;
        height: 94px;
    }
    div.navigator .navigatorhead:hover {
        background-image: none;
        cursor:auto;
    }
    div.navigator .navigatorhead img {
        height: 90px;
        padding: 4px;
    }
    div.navigator .navigatorhead span {
        font-size: 3em;
        padding-top: 20px;
        color: #000;
        cursor: pointer;
        float: right;
    }
    nav.top li > ul.sub {
        visibility:visible;
        opacity:1;
        height:120px;
    }

    
}