/*
    	root element for the scrollable.
    	when scrolling occurs this element stays still.
    */
    
    .gallery_wrapper{
      width: 452px;
    }
    
    .gallery_head{
      height: 36px;
      width: 452px;
      color: #fff;
      background-color: #666;
      font: 14px arial;
      background: url('img/gallery_head_bg.png');
    }
    
    .gallery_head div{
      padding: 10px 0 0 10px;
    }
    
    .gallery_navigation{
      width: 400px;
      padding: 0 25px 12px 25px;
      background-color:#ededed;
      border-bottom: 1px solid #dddddd;
      border-left: 1px solid #dddddd;
      border-right: 1px solid #dddddd;
      clear:both;
    }
    
    
    /* Hide from IE5-mac. Only IE-win sees this. \*/
    * html .gallery_navigation{position: relative; top: -100px}
    
    .photocaption, .captioncontent{color: #fff; position: relative;}
    
    .photocaption{top:-100px; background: #666; 
      filter:alpha(opacity=50);
    	-moz-opacity:0.5;
    	-khtml-opacity: 0.5;
    	opacity: 0.5;
    	height: 50px;
    }
    
    .captioncontent{top:-50px; filter: none;
    -moz-opacity:none;
    -khtml-opacity: none;
    opacity: none;
    z-index: 3;
    text-align: left;
    width: 432px;
    padding: 5px 10px;
    height: 40px;
    }
    
    .gallery_navigation a{color: #b2bb1e; font-size: 14px; font-weight: bold; font-family: arial; line-height: 1;}
    
    .gallery_navigation a:hover{border-bottom: 2px solid #b3bb1e; cursor: pointer; text-decoration: none !important;}
    
    a.right{float: right;}
    
    .scrollable {

    	/* required settings */
    	position:relative;
    	overflow:hidden;
    	width: 400px;
    	height:60px;

    	/* custom decorations */
      
    	background:url(/img/global/gradient/h300.png) repeat-x;
    }

    /*
    	root element for scrollable items. Must be absolutely positioned
    	and it should have a extremely large width to accomodate scrollable items.
    	it's enough that you set the width and height for the root element and
    	not for this element.
    */
    .scrollable .items {
    	/* this cannot be too large */
    	width:20000em;
    	position:absolute;
    	clear:both;
    }

    .items div {
    	float:left;
    	width:460px;
    }

    /* single scrollable item */
    
    .scrollable img {
    	float:left;
    	background-color:#fff;
    	height:40px;
    }
    
    .scrollable ul {float:left; padding: 0; margin: 0;}
    .scrollable ul li{display: block; float: left; position:relative; width: 60px; height: 40px; overflow: hidden; margin:10px 2px 20px 3px; border: 1px solid #a0a1a4;}

    /* active item */
    .scrollable .active {
    	position:relative;
    	cursor:default;
    }


    /* styling for the image wrapper  */
    	.image_wrap {
    		/* dimensions */
    		width:450px;
    		height: 300px;
    		border-left: 1px solid #dddddd;
    		border-right: 1px solid #dddddd;
    		/* centered */
    		text-align:center;
    		/* some "skinning" */
    		/*border:2px solid #fff;*/
    		/*outline:1px solid #ddd;*/

    	}

      /* this makes it possible to add next button beside scrollable */
      .scrollable {
      	float:left;	
      }
      

      
      /* prev, next, prevPage and nextPage buttons */
      /*a.browse {
        background-color: #000;
      	background:url(img/hori_large.png) no-repeat;
      	display:block;
      	width:30px;
      	height:30px;
      	float:left;
      	margin:40px 10px;
      	cursor:pointer;
      	font-size:1px;
      }

      /* right */
      a.right 		{ clear:right; margin-right: 0px; min-height: 1px;}
     


      /* left */
      a.left		{ margin-left: 0px; clear: left; } 
     

      /* up and down */
      a.up, a.down		{ 
      	background:url(../img/scrollable/arrow/vert_large.png) no-repeat; 
      	float: none;
      	margin: 10px 50px;
      }

      /* up */
      a.up:hover  		{ background-position:-30px 0; }
      a.up:active  		{ background-position:-60px 0; }

      /* down */
      a.down 				{ background-position: 0 -30px; }
      a.down:hover  		{ background-position:-30px -30px; }
      a.down:active  	{ background-position:-60px -30px; } 


      /* disabled navigational button */
      a.disabled {
      	visibility:hidden !important;		
      }