Rulebook UI XML

<Defaults>
  <Panel class="RulesBook" width="756" height="1008" color="#141414" active="false" showAnimation="Grow" hideAnimation="Shrink" outline="#141414" outlineSize="5 5"/>
  <Button class="RulesTopButtons" color="#D0D0D0" width="35" height="35" rectAlignment="UpperLeft" offsetXY="0 0"/>
  <Text class="RulesText" fontSize="20" fontStyle="Bold" color="rgb(0.51, 0.51, 0.51)"/>
  <InputField class="RulesInputField" width="50" height="33" fontSize="18" fontStyle="Bold" colors="#D0D0D0|#FFFFFF|#C8C8C8|rgba(0.78,0.78,0.78,0.5)"/>
  <Button class="RulesBottomButtons" color="#D0D0D0" width="35" height="35" rectAlignment="LowerLeft" showAnimation="Grow" hideAnimation="Shrink"/>
  <HorizontalScrollView class="RulesScroll" scrollbarBackgroundColor="#141414" scrollbarColors="rgb(0.51, 0.51, 0.51)" color="rgba(0,0,0,0.95)" scrollSensitivity="30" vertical="true" verticalScrollbarVisibility="AutoHide" raycastTarget="false"/>
  <Button class="RulesControlButtons" height="80" width="45" color="#141414"/>
</Defaults>


<!-- Main rules Panel -->
<Panel id="RulesPanel" class="RulesBook">
  <Text id="RulesText" class="RulesText" fontSize="35" rectAlignment="UpperCenter" height="40" text="Rulebook"></Text>
  <Button id="zoomInButton" class="RulesTopButtons" onClick="RulesClicked">
    <Image image="ZoomIn"></Image>
  </Button>
  <Button id="zoomOutButton" class="RulesTopButtons" offsetXY="40 0" onClick="RulesClicked">
    <Image image="ZoomOut"></Image>
  </Button>
  <InputField
    id="InputZoomMultiplier"
    class="RulesInputField"
    characterValidation="Decimal"
    tooltip="Percentage by which zooming and resizing happens. Must be above 100."
    tooltipPosition="Above"
    rectAlignment="UpperLeft"
    textAlignment="MiddleCenter"
    text="120"
    offsetXY="80 -1"
    onEndEdit="onEndEditZoomPercentage"></InputField>
  <Image rectAlignment="UpperLeft" width="20" height="20" offsetXY="135 -7" image="Percentage" preserveAspect="true"></Image>
  <Button id="closeButton" class="RulesTopButtons" rectAlignment="UpperRight" onClick="RulesClicked">
    <Image image="X Sign"></Image>
  </Button>

  <HorizontalScrollView class="RulesScroll" id="imageScroll" width="756" height="928">
    <Image id="RulesImage" rectAlignment="MiddleCenter" image="1" raycastTarget="false" preserveAspect="true" width="756" height="920"></Image>
  </HorizontalScrollView>
  <Button id="previousPage" class="RulesControlButtons" onClick="RulesClicked" rectAlignment="MiddleLeft" active="false">
    <Image image="ArrowLeft"></Image>
  </Button>
  <Button id="nextPage" class="RulesControlButtons" onClick="RulesClicked" rectAlignment="MiddleRight">
    <Image image="ArrowRight"></Image>
  </Button>

  <Button id="widenButton" class="RulesBottomButtons" onClick="RulesClicked">
    <Image image="Widen"></Image>
  </Button>

  <InputField id="CurrentPageCount" class="RulesInputField" characterValidation="Integer" text="1" rectAlignment="LowerCenter" textAlignment="LowerRight" offsetXY="-33 1" onEndEdit="onEndEditCurrentPage"></InputField>
  <Text id="MaxPageCount" class="RulesText" text="/ 25" alignment="LowerCenter" offsetXY="12 6"></Text>

  <Button id="narrowButton" class="RulesBottomButtons" rectAlignment="LowerRight" onClick="RulesClicked">
    <Image image="Narrow"></Image>
  </Button>
</Panel>