/* ========== ContentFlow ========== */
  /*
   * Within this file you can adjust the styling of ContentFlow
   * to your personal needs. The default styling is the same as found on the 
   * project page.
   *
   * To utilze this file for global styleing, rename it to 'mycontentflow.css'.
   */
  
  .ContentFlow {
	  position:inherit;
	  width:90%;
	  padding-bottom: 40px;
	  margin-bottom: 10px;
  }
  .ContentFlow .flow {
		 /* border: 1px solid green; */
		  
  }
	  .ContentFlow .flow * {
		  
  }
  
	  .ContentFlow .flow .item {
			 
			  height: 80%;
			  
			  padding-bottom:10px;
			  padding-top:10px;
	}
	  
	   .item  img{
			 /* border: 3px groove #000;*/
			  border: 4px solid #808785;
			  }
			  .item  img:hover{
			 border: 4px solid #CCC;
			  
			  }
		  .ContentFlow .flow .item canvas.content {
			  height: 100%;
			  width: 100%;
			  /*border: 1px solid yellow;*/
		  }
		  .ContentFlow .flow .item img.content {
			  /*border: 1px solid yellow;*/
			  width: 100%;
		  }
		  .ContentFlow .flow .item img.reflection, 
		  .ContentFlow .flow .item canvas.reflection {
			  width: 100%;
		  }
  
	  /* ----- styling of items ----- */
	  .ContentFlow .flow .item.active {
		  cursor: pointer;
		  
		  
		  
		    
		  
	  }
	  .active img{
		  border: solid 4px #000;
		  
		  
	  }
		  .ContentFlow .flow .item .caption {
			  font-size: 100%;
			  font-weight: bold;
			  text-align: center;
			  color: white;
			  max-height: 30%;
			  bottom: 10%;
			  background: url(img/1x1_0.5_black.png);
			  width: 100%;
		  }
		  * html .ContentFlow .flow .item .caption {
			  background-image: none;
			  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='img/1x1_0.5_black.png');
		  }
			  .ContentFlow .flow .item .caption a,
			  .ContentFlow .flow .item .caption a:link,
			  .ContentFlow .flow .item .caption a:visited,
			  .ContentFlow .flow .item .caption a:active,
			  .ContentFlow .flow .item .caption a:hover {
				  text-decoration: none;
				  color: white;
				  font-style: italic;
				  font-size: 0.8em;
			  }
			  .ContentFlow .flow .item .caption a:hover {
				  text-decoration: underline;
			  }
		  .ContentFlow .flow .item.active .caption {
			  /*display: block;*/ /* uncomment to show caption inside item */
		  }
  
	  /* ----- scrollbar ----- */
	  .ContentFlow .scrollbar {
		  width: 50%;
		  margin: 0px auto;
		  margin-top: 10px;
		  height: 16px;
		  background: url(img/scrollbar_white.png) left center repeat-x;
		  position: relative;
	  }
  
		  .ContentFlow .scrollbar .slider {
			  width: 16px;
			  height: 16px;
			  background: url(img/slider_white.png) center center no-repeat;
		  }
		  
		  /* only for IE <= 6 and a alphatransparent slider image */
		  * html .ContentFlow .scrollbar .slider {
			  background-image: none;
			  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='img/slider_white.png');
		  }
			  .ContentFlow .scrollbar .slider .position {
				  top: 120%;
				  font-size: 16px;
				  font-weight: bold;
				  color: silver
			  }
  
	  /* ----- global caption ----- */
	  .ContentFlow .globalCaption {
		  text-align: center;
		  font-weight: bold;
		  color: white;
		  font-size: 14px;
		  height: 20px;
		  margin: 2em auto;
	  }
		  .ContentFlow .globalCaption .caption {
		  }
			  .ContentFlow .globalCaption .caption a,
			  .ContentFlow .globalCaption .caption a:link,
			  .ContentFlow .globalCaption .caption a:visited,
			  .ContentFlow .globalCaption .caption a:active,
			  .ContentFlow .globalCaption .caption a:hover {
				  text-decoration: none;
				  color: white;
				  font-style: italic;
				  font-size: 0.8em;
			  }
  
			  .ContentFlow .globalCaption .caption a:hover {
				  text-decoration: underline;
			  }
  
	  /* ----- load indicator ----- */
	  .ContentFlow .loadIndicator {
		  width: 100%;
		  height: 100%;
		  top: 0px;
		  left: 0px;
		  background: black;
	  }
		  .ContentFlow .loadIndicator .indicator {
			  background: url(img/loader.gif) center center no-repeat;
			  width: 100%;
			  height: 100%;
			  background-color: #eff1f1;
		  }
		  * html .ContentFlow .loadIndicator .indicator {
			  height: 100px;
		  }
  
  /* ================================= */