/*
  	root element for the scrollable.
  	when scrolling occurs this element stays still.
  */
  .scrollable.gallery {
  
  	/* required settings */
  	position:relative;
  	overflow:hidden;
  	width: 540px;
  	height:120px;
  
  	/* custom decorations */
  	border:1px solid #ccc;
  	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.gallery .items {
  	/* this cannot be too large */
  	width:20000em;
  	position:absolute;
  	clear:both;
  }
  
  .items div {
  	float:left;
  	width:550px;
  }
  
  /* single scrollable item */
  .scrollable.gallery img {
  	float:left;
  	margin:20px 5px 20px 21px;
  	background-color:#fff;
  	padding:2px;
  	border:1px solid #ccc;
  	width:100px;
  	height:75px;
  	
  	-moz-border-radius:4px;
  	-webkit-border-radius:4px;
  }
  
  /* active item */
  .scrollable.gallery .active {
  	border:2px solid #000;
  	position:relative;
  	cursor:default;
  }
  
  a.left.gallery {
    margin-left: 0px;
  }
  
  a.gallery {
    margin-top: 45px;
  }
		
	/* styling for the image wrapper  */
	#image_wrap {
		/* dimensions */
		width:460px;
		margin:15px 0 15px 40px;
		padding:15px 0;

		/* centered */
		text-align:center;

		/* some "skinning" */
		background-color:#efefef;
		border:2px solid #fff;
		outline:1px solid #ddd;
		-moz-ouline-radius:4px;
		margin-left: 150px;
		margin-top: 1px;
	}
	
	.page {
    opacity: 1.0;
    position: relative;
  }
	
	.page.disable {
    opacity: 0.0;
    display: none;
  }
	
	#page1 .navi {
    margin-left: 291px;
  }

	#page2 .navi {
    margin-left: 285px;
  }
	
	#page3 .navi {
    margin-left: 265px;
  }	
	
	#page4 .navi {
    margin-left: 215px;
  }	
	
	#page4 .welcome {
    width: 98%px;
    float: left;
    margin-bottom: 10px;
  }
	
	#page4 .welcome p {
    font-weight: normal;
    color: black;
  }
	
	#page5 .navi {
    width: 240px;
    margin-left: 200px;
  }	
	
	/* main navigator */
	#main_navi_gallery {
		float:left;
		padding:0px !important;
		margin:0px !important;
	}
	
	#main_navi_gallery li {
		background-color:#333;
		border-top:1px solid #666;
		clear:both;
		color:#FFFFFF;
		font-size:11px;
		height:10px;
		list-style-type:none;
		padding:10px;
		padding-top: 5px;
		width:130px;
		cursor:pointer;
		text-align: left;
	}
	
		#main_navi_gallery li.medium {
		  height: 25px;
    }
	
		#main_navi_gallery li.big {
		  height: 75px;
    }
	
	#main_navi_gallery li:hover {
		background-color:#444;
	}
	
	#main_navi_gallery li.active {
		background-color:#555;
	}

	#main_navi_gallery li div.youtube, #main_navi_gallery li div.info {
	  background-image: url(../images/youtube.png);
	  height: 20px;
	  width: 20px;
	  float: right;
	  margin-top: -3px;
	  margin-right: -4px;
  }
  
  #main_navi_gallery li div.info {
    background-image: url(../images/infoG.png);
    margin-top: -8px; 
  }