<?xml version="1.0" encoding="UTF-8"?>
<nifty-styles xmlns="http://nifty-gui.sourceforge.net/nifty-1.3.xsd"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://nifty-gui.sourceforge.net/nifty-1.3.xsd http://nifty-gui.sourceforge.net/nifty-1.3.xsd">

	<style id="menuButtonNormal">
		<attributes backgroundImage="gui/style/button/buttonNormal.png"
			visibleToMouse="true" childLayout="absolute" width="140px" height="60px" />
	</style>

	<style id="menuButtonNormal#hoverImage">
		<attributes filename="gui/style/button/buttonNormal_hovered.png"
			visibleToMouse="true" width="140px" height="60px" />
	</style>

	<style id="menuButtonNormal#Text">
		<attributes font="gui/font/georgia_25_gold.fnt" width="140px"
			height="60px" x="0px" y="-3px" />
	</style>

	<!-- unfortunately this is required to change the tab-button-style -->
	<style id="nifty-button#panel">
		<attributes backgroundImage="gui/screensHarbour/chapterButton.png"
			width="152" height="23" childLayout="center" visibleToMouse="true"/>
		<effect>
			<onHover name="imageOverlay" filename="gui/screensHarbour/chapterButton_hovered.png"
				post="true" />
			<onFocus name="imageOverlay" filename="gui/screensHarbour/chapterButton_hovered.png"
				post="true" />
		</effect>
	</style>

	<style id="nifty-button#text">
		<attributes font="gui/font/georgia_25_gold.fnt" width="100%"
			height="100%" />
	</style>


<!--####################
	####	slider	####
	#################### -->
	<style id="nifty-horizontal-slider#panel">
		<attributes childLayout="horizontal" height="23px" align="center"
			focusable="true" />
	</style>
	<style id="nifty-horizontal-slider#left">
		<attributes filename="gui/style/slider.png" width="23px"
			height="23px" imageMode="sprite:23,23,6" />
		<effect>
			<onClick name="focus" targetElement="#parent" />
			<onClick name="imageOverlay" filename="gui/style/slider.png"
				imageMode="sprite:23,23,8" post="true" />
			<onFocus name="imageOverlay" filename="gui/style/slider.png"
				imageMode="sprite:23,23,7" post="true" />
			<onHover name="border" color="#822f" post="true" />
			<onEnabled name="renderQuad" startColor="#2228" endColor="#2220"
				post="true" length="150" />
			<onDisabled name="renderQuad" startColor="#2220" endColor="#2228"
				post="true" length="150" />
		</effect>
	</style>
	<style id="nifty-horizontal-slider#right">
		<attributes filename="gui/style/slider.png" width="23px"
			height="23px" imageMode="sprite:23,23,9" />
		<effect>
			<onClick name="focus" targetElement="#parent" />
			<onClick name="imageOverlay" filename="gui/style/slider.png"
				imageMode="sprite:23,23,11" post="true" />
			<onFocus name="imageOverlay" filename="gui/style/slider.png"
				imageMode="sprite:23,23,10" post="true" />
			<onHover name="border" color="#822f" post="true" />
			<onEnabled name="renderQuad" startColor="#2228" endColor="#2220"
				post="true" length="150" />
			<onDisabled name="renderQuad" startColor="#2220" endColor="#2228"
				post="true" length="150" />
		</effect>
	</style>
	<style id="nifty-horizontal-slider#background">
		<attributes filename="gui/style/slider.png" width="*" height="23px"
			childLayout="absolute" imageMode="sprite-resize:23,23,16,4,15,4,4,4,15,4,15,4,15,4,4" />
		<effect>
			<onClick name="focus" targetElement="#parent" />
		</effect>
	</style>
	<style id="nifty-horizontal-slider#position">
		<attributes filename="gui/style/slider.png" x="0px" y="0px"
			width="23px" height="23px"
			imageMode="sprite-resize:23,23,17,4,15,4,4,4,15,4,15,4,15,4,4" />
		<effect>
			<onClick name="focus" targetElement="#parent#parent" />
			<onFocus name="imageOverlay" filename="gui/style/slider.png" imageMode="sprite-resize:23,23,19,4,15,4,4,4,15,4,15,4,15,4,4" post="true" />
			<onHover name="imageOverlay" filename="gui/style/slider.png" imageMode="sprite-resize:23,23,18,4,15,4,4,4,15,4,15,4,15,4,4" post="true" />
			<onEnabled name="renderQuad" startColor="#2228" endColor="#2220" post="true" length="150" />
			<onDisabled name="renderQuad" startColor="#2220" endColor="#2228"
				post="true" length="150" />
		</effect>
	</style>

	<!-- scroll panel -->
	<style id="nifty-scrollpanel#scrollpanel">
		<attributes backgroundColor="#9999" />
		<effect overlay="true">
			<onActive name="blendMode" blendMode="multiply" post="true" />
			<onActive name="imageOverlay" filename="blackborder.png"
				imageMode="resize:1,30,1,1,1,30,1,1,1,30,1,1" post="true" />
		</effect>
	</style>
	
	<style id="nifty-scrollpanel#bottom-right">
		<attributes width="23px" height="23px" />
	</style>
	
	<!-- scrollbar vertical -->
	
	  <style id="nifty-vertical-scrollbar#panel">
    <attributes childLayout="vertical" width="23px" align="center" focusable="true" />
  </style>
  <style id="nifty-vertical-scrollbar#up">
    <attributes filename="gui/style/slider.png" width="23px" height="23px" imageMode="sprite:23,23,3"/>
    <effect>
      	<onClick name="focus" targetElement="#parent" />
      	<onClick name="imageOverlay" filename="gui/style/slider.png" imageMode="sprite:23,23,5" post="true" />
		<onFocus name="imageOverlay" filename="gui/style/slider.png" imageMode="sprite:23,23,4" post="true" />
	  	<onHover name="border" color="#822f" post="true" />
      	<onEnabled name="renderQuad" startColor="#2228" endColor="#2220" post="true" length="150" />
      	<onDisabled name="renderQuad" startColor="#2220" endColor="#2228" post="true" length="150" />
    </effect>
  </style>
  <style id="nifty-vertical-scrollbar#down">
    <attributes filename="gui/style/slider.png" width="23px" height="23px" imageMode="sprite:23,23,0"/>
    <effect>
      <onClick name="focus" targetElement="#parent" />
      <onClick name="imageOverlay" filename="gui/style/slider.png" imageMode="sprite:23,23,2" post="true" />
      <onFocus name="imageOverlay" filename="gui/style/slider.png" imageMode="sprite:23,23,1" post="true" />
	  <onHover name="border" color="#822f" post="true" />
      <onEnabled name="renderQuad" startColor="#2228" endColor="#2220" post="true" length="150" />
      <onDisabled name="renderQuad" startColor="#2220" endColor="#2228" post="true" length="150" />
    </effect>
  </style>
  <style id="nifty-vertical-scrollbar#background">
    <attributes filename="gui/style/slider.png" width="23px" height="*" childLayout="absolute" imageMode="sprite:23,23,12"/>
    <effect>
      <onClick name="focus" targetElement="#parent" />
    </effect>
  </style>
  <style id="nifty-vertical-scrollbar#position">
    <attributes filename="gui/style/slider.png" x="0px" y="0px" width="23px" height="8px" imageMode="sprite-resize:23,23,15,4,15,4,4,4,15,4,15,4,15,4,4" childLayout="center" />
    <!-- 
    <effect>
      <onActive name="imageOverlay" filename="gui/style/slider.png" width="7px" height="8px" imageMode="subImage:468,0,7,8" post="true" overlay="true" center="true" hideIfNotEnoughSpace="true" />
      <onClick name="focus" targetElement="#parent#parent" />
      <onFocus name="imageOverlay" filename="gui/style/slider.png" imageMode="sprite-resize:23,23,15,4,15,4,4,4,15,4,15,4,15,4,4" post="true" />
      <onHover name="imageOverlay" filename="gui/style/slider.png" imageMode="sprite-resize:23,23,14,4,15,4,4,4,15,4,15,4,15,4,4" post="true" />
      <onEnabled name="renderQuad" startColor="#2228" endColor="#2220" post="true" length="150" />
      <onDisabled name="renderQuad" startColor="#2220" endColor="#2228" post="true" length="150" />
    </effect>
     -->
  </style>

	<!-- ++++++++++ -->
	<!-- horizontal -->
	<!-- ++++++++++ -->
	<style id="nifty-horizontal-scrollbar#panel">
		<attributes childLayout="horizontal" height="23px" align="center" focusable="true" />
	</style>
	<style id="nifty-horizontal-scrollbar#left">
		<attributes filename="gui/style/slider.png" width="23px" height="23px" imageMode="sprite:23,23,6"/>
	    <effect>
			<onClick name="focus" targetElement="#parent" />
			<onClick name="imageOverlay" filename="scrollbar/scrollbar.png" imageMode="sprite:23,23,8" post="true" />
			<onFocus name="imageOverlay" filename="scrollbar/scrollbar.png" imageMode="sprite:23,23,7" post="true" />
			<onHover name="border" color="#822f" post="true" />
			<onEnabled name="renderQuad" startColor="#2228" endColor="#2220" post="true" length="150" />
			<onDisabled name="renderQuad" startColor="#2220" endColor="#2228" post="true" length="150" />
		</effect>
	  </style>
	  <style id="nifty-horizontal-scrollbar#right">
	    <attributes filename="scrollbar/scrollbar.png" width="23px" height="23px" imageMode="sprite:23,23,9"/>
	    <effect>
	      <onClick name="focus" targetElement="#parent" />
	      <onClick name="imageOverlay" filename="scrollbar/scrollbar.png" imageMode="sprite:23,23,11" post="true" />
	      <onFocus name="imageOverlay" filename="scrollbar/scrollbar.png" imageMode="sprite:23,23,10" post="true" />
		  <onHover name="border" color="#822f" post="true" />
	      <onEnabled name="renderQuad" startColor="#2228" endColor="#2220" post="true" length="150" />
	      <onDisabled name="renderQuad" startColor="#2220" endColor="#2228" post="true" length="150" />
	    </effect>
	  </style>
	  <style id="nifty-horizontal-scrollbar#background">
	    <attributes filename="scrollbar/scrollbar.png" width="*" height="23px" childLayout="absolute" imageMode="sprite-resize:23,23,16,4,15,4,4,4,15,4,15,4,15,4,4" />
	    <effect>
	      <onClick name="focus" targetElement="#parent" />
	    </effect>
	  </style>
	  <style id="nifty-horizontal-scrollbar#position">
	    <attributes filename="scrollbar/scrollbar.png" x="0px" y="0px" width="8px" height="23px" imageMode="sprite-resize:23,23,17,4,15,4,4,4,15,4,15,4,15,4,4" />
	    <effect>
	      <onActive name="imageOverlay" filename="scrollbar/scrollbar.png" width="8px" height="7px" imageMode="subImage:490,8,8,7" post="true" overlay="true" center="true" hideIfNotEnoughSpace="true" />
	      <onClick name="focus" targetElement="#parent#parent" />
	      <onFocus name="imageOverlay" filename="scrollbar/scrollbar.png" imageMode="sprite-resize:23,23,19,4,15,4,4,4,15,4,15,4,15,4,4" post="true" />
	      <onHover name="imageOverlay" filename="scrollbar/scrollbar.png" imageMode="sprite-resize:23,23,18,4,15,4,4,4,15,4,15,4,15,4,4" post="true" />
	      <onEnabled name="renderQuad" startColor="#2228" endColor="#2220" post="true" length="150" />
	      <onDisabled name="renderQuad" startColor="#2220" endColor="#2228" post="true" length="150" />
	    </effect>
	  </style>
	  
	  <!-- listBox -->
	  
	    <style id="nifty-listbox">
    <attributes />
  </style>
  <style id="nifty-listbox#scrollpanel">
    <attributes focusable="true" padding="1px"/>
    <effect overlay="true">
      <onActive name="colorBar" color="#0009" post="false" neverStopRendering="true" timeType="infinite" />
      <onActive name="border" border="1px" color="#222f" inset="1px,0px,0px,1px"/>
      <onEnabled name="renderQuad" startColor="#2228" endColor="#2220" post="false" length="150" />
      <onDisabled name="renderQuad" startColor="#2220" endColor="#2228" post="false" length="150" />
    </effect>
  </style>
  <style id="nifty-listbox#bottom-right">
    <attributes width="23px" height="23px" />
  </style>
  
  <!-- this one head a base-label. It's removed due to not overdo the complexity -->
  <style id="nifty-listbox-item" >
    <attributes width="100%" align="left" textVAlign="center" textHAlign="left" textLineHeight="25px" textMinHeight="25px" 
    	font="gui/font/georgia_25_gold.fnt" />
    <interact onClick="listBoxItemClicked()" />
    <effect>
      <onCustom customKey="focus" name="colorBar" post="false" color="#444f" neverStopRendering="true" timeType="infinite" />
      <onCustom customKey="select" name="colorBar" post="false" color="#444f" neverStopRendering="true" timeType="infinite" />
      <onCustom customKey="select" name="textColor" post="false" color="#fc0f" neverStopRendering="true" timeType="infinite" />
      <onHover name="colorBar" color="#444f" post="false" neverStopRendering="true" timeType="infinite" inset="1px"/>
      <onClick name="focus" targetElement="#parent#parent"/>
      <onActive name="clip" post="false" />
    </effect>
  </style>

	<!-- checkbox -->
	<style id="pirateCheckBox-style#panel">
		<attributes width="35px" height="35px" childLayout="center"
			backgroundImage="gui/style/checkboxFrame.png" />
		<effect>
			<onFocus name="imageOverlay" filename="gui/style/checkboxFrame_focused.png" post="true" />
		</effect>
	</style>

	<style id="pirateCheckBox-style#select">
		<attributes align="center" valign="center" width="35px"
			height="35px" />
		<effect overlay="true">
			<onCustom customKey="show" name="imageSize" startSize="2.0"
				endSize="1.0" length="250" post="true" />
			<onCustom customKey="show" name="fade" start="#0" end="#f"
				length="250" post="true" />
			<onCustom customKey="show" name="imageOverlay"
				filename="gui/style/checkBoxSign.png" width="35px" height="35px"
				post="true" neverStopRendering="true" />
			<onCustom customKey="hide" name="fade" start="#f" end="#0"
				length="250" post="true" />
			<onCustom customKey="hide" name="imageOverlay"
				filename="gui/style/checkBoxSign.png" width="35px" height="35px"
				post="true" length="250" />
			<onEnabled name="fade" start="#4" end="#f" length="150"
				post="false" />
			<onDisabled name="fade" start="#f" end="#4" length="150"
				post="false" />
		</effect>
	</style>
  
</nifty-styles>