/**
 * (c) 2011 Markus Bigler (markus.bigler#nullnulleins.ch). All rights reserved.
 */

@charset "UTF-8";
html, body { height: 100%; }
body { font: normal normal normal 80%/1.3em Arial, 'Helvetica Neue', Helvetica, Verdana, sans-serif; margin: 0; padding: 0; background-color: #FFF; color: #000; scroll; min-width: 1010px; }
body #container { letter-spacing: 1px; }

/* structure */
#container { margin: 0; padding: 0; width: 100%; min-height: 100%; position: relative; float: left; }
header { width: 210px; float: left; clear: none; margin: 16px 0 25px 30px; padding: 0; }
#logo { margin: 0 0 16px; padding: 0 0 14px; min-height: 54px; }
nav { margin: 0; padding: 0 0 80px; }
nav ul { margin: 0; padding: 0; list-style: none; }
nav li { margin: 0; padding: 0; list-style: none; }
nav > ul > li { margin: 22px 0 0; padding: 0; list-style: none; }
nav span { font-weight: bold; }
nav ul ul span { font-weight: normal; }
#logo a, nav a { text-decoration: none; color: #000; }
nav a.active, nav a:hover, nav a:active { text-decoration: underline; }

#body { min-width: 730px; padding: 16px 20px 20px; margin: 0 0 0 240px; }
#content { margin: 0 0 120px; }
footer { position: absolute; bottom: 0px; width: 100%; color: #999; height: 65px; }
footer p { font-weight: bold; border-top: 1px solid #999; margin: 0 20px 0 260px; padding: 22px 0 0; min-width: 730px; }
#gibb { margin: 2px 30px 20px; padding: 0; display: inline-block; float: left; width: 70px; height: 162px; background-image: url(./../img/gkk_bms_bern_gibb.svg); opacity: .45; background-position: 0 0; }
#gibb:hover { opacity: .9; }

#totop { position: absolute; right: 20px; top: -38px; display: none; }
#totop span { display: inline-block; width: 0px; height: 0px; border-style: solid; border-width: 0 7px 6px 7px; border-color: transparent transparent #999999 transparent; margin-bottom: 1px; }
#totop:hover span { border-color: transparent transparent #222 transparent; }

div.head { min-height: 70px; margin: 0; padding: 0; /*border-bottom: 1px solid #999; margin: 0 0 14px; padding: 0 0 20px; min-height: 54px;*/  }
div.gallerywrapper { border-bottom: 1px solid #999; margin: 20px 0 26px; padding: 2px 0 26px; }
ul.overview div.gallerywrapper { border: none; margin: 0; padding-bottom: 0; }
div.gallery { margin: 0; padding: 0; width: 710px; height: 475px; overflow: hidden; position: relative; }
div.foot { border-top: 1px solid #999; margin: -1px 0 100px; padding: 0; width: 100%; /*float: left; color: #999;*/ }

h1, h2, h3, p { font-size: 100%; margin: 20px 0; padding: 0; }
h1, h2 { font-weight: bold; }
div.head h1, #logo h1 { font-size: 150%; line-height: 120%; }
div.head h1, #logo h1, .overview h2, .overview p { margin: 0; }
.overview h2 { padding-top: 10px; }
h2.worktitle { font-size: 150%; margin: -2px 0 20px; line-height: 120%; }
a { outline: none; color: #999; text-decoration: none; }
a:hover { color: #333; }
a img { border: none; }
ul.overview { margin: 0; padding: 12px 0 0; list-style: none; }
ul.overview > li { margin: 0 20px 0 0; padding: 10px 0 20px; list-style: none; float: left; width: 280px; }
ul.overview > li div.workdetail { display: none; margin-top: -2px; }
ul.overview > li.expanded { margin-top: -1px; padding-bottom: 19px; width: 100%; border: 1px solid #999; border-left: none; border-right: none; border-top: 1px solid #999; border-bottom: 1px solid #999; position: relative; }
ul.overview > li.expanded figure { margin-top: -1px; }
ul.overview > li.expanded div.workdetail { display: block; }
div.workdetail div.text { width: 610px; margin: 0; }
ul.overview > li.expanded div.workpreview { display: none; }
ul.overview > li figure { margin: 0; padding: 0; background-repeat: no-repeat; background-position: center center; background-size: cover; }
figure div.thumbbg { background-color: #000; display: table-cell; }
figure div.thumbbg img { display: block; }
ul.overview > li figure.loadondemand { background-image: url(./../img/ajax-loader.gif); background-size: 16px 11px; background-position: center; }

ul.overview .workpreview > a { color: #000; }
ul.overview .workpreview > a figure, ul.overview .workpreview > a h2, ul.overview .workpreview > a p { opacity: 1; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; }
ul.overview .workpreview > a:hover figure, ul.overview .workpreview > a:hover h2, ul.overview .workpreview > a:hover p { opacity: .7; }

a.hidedetails { color: #000; position: absolute; right: 0; top: 8px; margin: 0; padding: 0; background-image: url(./../img/snippets.0.png); background-position: right center; background-repeat: no-repeat; opacity: .45; display: block; width: 14px; height: 14px; }
a.hidedetails:hover { opacity: 1; }

div.gallery { position: relative; }
div.gallery .galleryhover { z-index: 1; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-color: #FFF; cursor: w-resize; opacity: 0; filter: alpha(opacity=0); }
div.gallery .galleryhover.next { z-index: 1; left: auto; right: 0; cursor: e-resize; }
div.gallery ul { list-style: none; margin: 0; padding: 0; }
div.gallery li { list-style: none; margin: 0; padding: 0; display: table-cell; height: 475px; vertical-align: middle; text-align: center; /*background-color: #F1F1F1;*/ }
div.gallery figure { margin: 0; padding: 0; width: 710px; }
div.gallery figure.video { position: relative; height: 475px; }
ul.gallerynavigation { list-style: none; padding: 0; margin: 0; width: 710px; text-align: center; }
ul.gallerynavigation.hidden { visibility: hidden; }
ul.gallerynavigation li { display: inline-block; margin: 23px 0px 10px; padding: 0; }
ul.gallerynavigation li a { width: 14px; height: 14px; cursor: pointer; display: inline-block; margin: 4px; padding: 0; text-align: center; }
ul.gallerynavigation li a span { border-radius: 2px; background-color: #848484; display: inline-block; width: 4px; height: 4px; margin: 2px; }
ul.gallerynavigation li.selected a span, ul.gallerynavigation li a:hover span { border-radius: 4px; width: 8px; height: 8px; cursor: pointer; margin: 0; }
ul.gallerynavigation li a:hover span { background-color: #666; }

div.text { max-width: 640px; margin: 20px 20px 20px 0; padding: 0; }

span.gvideoembed { display: block; background-size: cover; }
span.gvideoembed a.gvideoembed { display: none; }

img.gimageleft { margin: 2px 20px 20px 0 !important; }
img.gimageright { margin: 2px 0 20px 20px !important; }

@media screen and (min-width: 1010px) {
	body.fixed header { position: fixed; }
	body.fixed #gibb { position: fixed; bottom: 0; }
}