@charset "utf-8";

/* [#CONVERT-2-UTF8] */

/**
 * www.floriandombois.ch
 * 
 *
 * @since 2013-02-28
 * @copyright internauta, zurich
 *
 * NOTES:

 */
 
 /* general css styles */
@import url("reset.css");

*{
	margin:0;
	padding:0;
	outline: 0;
	line-height:120%;
}
html {
	height: 100%;
	
}

body {
	padding:0;
	font-family: Arial, Helvetica,  sans-serif;
	font-size:1em;/*16px*/
	height: 100%;
	width:100%;
	-webkit-font-smoothing: antialiased;
}

a {
	text-decoration: none;
	color: black;
}

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

.group:after {
    /* self-clear floats */
    content: " ";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    font-size: 0;
}



/* ---------------------------------------------------------- 

html5
 
---------------------------------------------------------- */

header, nav, footer, article, section, hgroup, figure, figcaption, legend { display: block; }



div#wrapper, div#workwrapper {
	
	margin-left:76px;
	
}

div.nav{
	margin-top:50px;
	font-size:18px;
	font-size:1.125rem;
	line-height:120%;
	width:756px;
}
div.nav span{
	float:left;
	display:block;
	font-weight:bold;
}


div.nav ul{
	float:left;
	margin-left:5px;
	/*line-height:140%;*/
}
div.nav ul li{
	float:left;
	/*font-size:14px;
	font-size:0.875rem;*/
	margin-right:5px;
}
div#container{
	margin-top:8px; /* margin-top:15px;*/
	padding-bottom:100px;
	width:100%;
}
div#workcontainer{
	margin-top:5px; /* margin-top:15px;*/
	padding-top:2px;
	font-size:18px;
	font-size:1.125rem;
	
	padding-bottom:1em;
	border-top:1px solid black;
	border-bottom:1px solid black;
	width:756px;
}

div#textcontainer{
	margin-top:5px; /* margin-top:15px;*/
	padding-top:2px;
	font-size:18px;
	font-size:1.125rem;
	border-top:1px solid black;
	border-bottom:1px solid black;
	width:756px;
	
	padding-bottom:1em;
}

div#workcontainer .further, div#textcontainer p{
	width:502px;
}

div#workcontainer a, div#textcontainer a { text-decoration: underline; }

/* ---------------------------------------------------------- 

styles
 
---------------------------------------------------------- */

h1,h2{
	font-size:18px;
	font-size:1.125rem;
	line-height:120%;

}

h2{
	margin-top:1em;
}

h2:first-of-type{
	margin-top:0em;
}

.pfeile{
	float:right;
	margin-right:-10px;
}
.pfeilefooter{
	width:766px;
	padding-bottom:4em;
	padding-top:0.5em;
}
a.right{
	float:right;
	display:none;
	margin-right:10px;
}

.contentWrap a.right{
	display:block;
}

div.further{
	font-size:13px;
	font-size:0.813rem;
	line-height:115%;
	margin-top:35px;
	width:502px;
}
div.further p{
	margin-top:1.154em;
}
.small{
	font-size:13px;
	font-size:0.813rem;
	line-height:115%;
}
p.small{
	margin-top:0.5em;
	width:502px;
}


.images{
	/*margin-top:-4px;*/
	margin-top:1em;
}
.images img{
	display:block;
	
}

.item {
  margin: 0;
  padding: 0;
  margin-right: 18px;
  margin-bottom: 18px;
  font-size: 0.75em;/* 12px*/
  line-height: 1.2em;/* 14px*/
  float: left;
  
  
}

.item img{
	display:block;
	background-color:white;
	position: relative;
	
	
}
.item img.grayscale {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
	filter: gray; /* IE6-9 */
	-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
	-webkit-animation-name: vergrauen;
   -webkit-animation-duration: 0.8s;
   -webkit-animation-iteration-count: 1;
   -webkit-animation-direction: alternate;
   -webkit-animation-timing-function: ease-out;
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-delay: 0s;
}

.item img.norm {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
	-webkit-filter: grayscale(0%);
	/*width:100%;*/
}
/*.item  img:hover{
	cursor: -webkit-zoom-in; 
	cursor: -moz-zoom-in;
}*/
.label{
	width:100%;
	border-top:1px solid black;
	font-size:4px;
	padding-top:1px;
	line-height:120%;
	padding-bottom:10px;
	background-color:white;
}

@-webkit-keyframes vergrauen {
  0% {
    -webkit-filter: grayscale(0);
  }
  100% {
    -webkit-filter: grayscale(1) ;
  }
}



/**** Isotope filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}
/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item,
.item{
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope,
.item{
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
          
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */



/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;
}


/* ---------------------------------------------------------- 

Overlay
 
---------------------------------------------------------- */

 #overlay
 {
 	height: 100%;
 	width:100%;
 	background-image: url(../img/bg_overlay_back70.png);
 	/* place overlay on top of other elements */
 	z-index: 10000;
 	display: none;
 	position:absolute;
 	top:0px;
 	left:0px;

 	
 }
  /* container for external content. uses vertical scrollbar, if needed */
  div.contentWrap {
  
  	z-index: 10005;
    height:100%;
    width: 890px;
    background-color: rgb(255, 255, 255);
    overflow-y:auto;
    padding-top:4px;
  }
  
.close
  {
  	position: absolute;
  	z-index:2000;
  	left: 890px;
  	top: 0px;
  	cursor: pointer;
  	 height:100%;
  	width: 240px;
  }