/**
 * @version		v0.0.10 : 2012-12-20 
 * @author		Hayato
 * @package		Hs_image_show
 * @url         http://joomlamp.com
 * @copyright	Copyright (C) Hayatos 2011. All rights reserved.
 * @license		GNU/GPL v3
 */
/*
 * General
 */
.hsi_wrapper, 
.hsi_wrapper a{
	color:#666;
}
.hsi_wrapper a{
	color:#FFF;
}

/*
 * Image
 */


/*
 * Textbox
 */
.hsi_textbox_wrapper{
	
}
/* if you select custom position, you can set textbox position and size.  */
.hsi_textbox_wrapper.custom{
    left:20px;    /* You can set right insted of left. You can set nagative value like -20px.*/
	bottom:20px;  /* You can set top insted of bottom. Available nagative value.*/
	width:600px;  /* Required */
	height:100px; /* This value will be changed depending on text height */
}
/* Textbox background */
.hsi_textbox_box{
	background-color:#666;
	color:#a7fdfd;
}


/*
 * Text
 */
.hsi-text-items .hsi-text-inner0{
	padding:25px;
}
.hsi-text-items h2{
	margin-bottom:15px;
}
.hsi-text-showmore{
	text-align:right;
}

/*
 * Navigation
 */
/* ## Position ## */
/*If the position is set as top, .hsi_navi_top is added. */
.hsi_navigation_wrapper.hsi_navi_top{
	top:20px;
}
/*If the position is set as bottom, .hsi_navi_bottom is added*/
.hsi_navigation_wrapper.hsi_navi_bottom{
	bottom:20px;
}
/*If the position is set as left, .hsi_navi_left is added. */
.hsi_navigation_wrapper.hsi_navi_left{
	left:20px;
}
/*If the position is set as right, .hsi_navi_right is added*/
.hsi_navigation_wrapper.hsi_navi_right{
	right:20px;
}

/* ## Design  ## */
/* If you want to set a background, use this class. The width will be calculate on javascript from div.hsi_navigation_items.*/
.hsi_navigation_back{
	background:url(images/navigation/d1-back.png) repeat 0 0 transparent;
}
.hsi_wrapper .hsi_navigation_box{
}
/* If you want to set some start element or end element, use this class*/
.hsi_wrapper .hsi_navigation_wrapper div.hsi_navigation_start,
.hsi_wrapper .hsi_navigation_wrapper div.hsi_navigation_end{
	display:block;
	width:4px;
	height:12px;
	float:left;
	background
}
/*Each navi items style. This elements uses to detrmine the navigation width and height. */
.hsi_wrapper .hsi_navigation_wrapper div.hsi_navigation_items{
	float:left;
	width:12px;
	height:12px;
	background:url(images/navigation/d1-normal.png) repeat 0 0 transparent;
	margin:6px 4px;
}
.hsi_wrapper .hsi_navigation_wrapper div.hsi_navigation_items .hsi_navigation_items_inner{
	
}
/* Hover Element*/
.hsi_wrapper .hsi_navigation_wrapper div.hsi_navigation_items:hover{
	background:url(images/navigation/d1-hover.png) repeat 0 0 transparent;
}
/*Active(Selected) Element*/
.hsi_wrapper .hsi_navigation_wrapper .hsi_navigation_items.hsi_navi_active{
	background:url(images/navigation/d1-active.png) repeat 0 0 transparent;
}


/*
 * Buttons
 */
/* #playstop Stop*/
/* Position */
.hsi_button_playstop_wrapper,
.hsi_button_playstop_box{
	width:55px;
	height:55px;	
}
.hsi_button_playstop_box{
	background:url(images/button/playstop.png) 0 0 no-repeat transparent; 
	cursor:pointer;
}
/*playstop is clicked*/
.hsi_button_playstop_box.hsi_now_stopped{
	background-position:0 -100px;
}	

/* #Previous and Next Button*/
.hsi_button_previous_wrapper,
.hsi_button_next_wrapper,
.hsi_button_previous_box,
.hsi_button_next_box{
	width:41px;
	height:80px;
}
/*Previous Position*/
.hsi_button_previous_wrapper{
	left:0px;
}
/*Next Position*/
.hsi_button_next_wrapper{
	right:0px;
}
/* Previous and Next Image*/
.hsi_button_previous_box,
.hsi_button_next_box{
	background:url(images/button/nextprevious.png) 0 0 no-repeat transparent; 
}
.hsi_button_previous_box{
	background-position:0 0;
}
.hsi_button_next_box{
	background-position:0 100%;	
}