title: making royal slider fullscreen
body: <p>Hi I'm using royal slider and am trying to make it fullscreen.  The nav arrows seem to be working correctly, but nothing else does.  I'd like it to function like this site (click on any of the thumbnails to see the slider) <a href="http://ahrengot.com/work/skive-festival-website/" rel="nofollow">http://ahrengot.com/work/skive-festival-website/</a> and this is the page I'm having trouble replicate that <a href="http://klossal.com/js/royalslider/demo/test.html" rel="nofollow">http://klossal.com/js/royalslider/demo/test.html</a></p>
  
  <p>Any help I can get with this would be great, this is pretty much the last feature I need for my site and I've just been failing at it for acouple days now, thanks.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="content-slider" class="royalSlider iskin"&gt;                
  &lt;ul class="royalSlidesContainer"&gt;       
      &lt;li class="royalSlide"&gt; 
          &lt;div style="border:1px solid red;height:100%;"&gt;
              &lt;img src="img/contentSliderAssets/4.jpg" width="285" height="200"/&gt;
              &lt;div style="border:1px solid red;"&gt;
                  &lt;h4&gt;Content Slider&lt;/h4&gt;
                  &lt;p&gt;You can place HTML content on each slide, touch navigation still 
  works. Also you can disable mouse navigation completely or just for specific elements:   
  &lt;/p&gt;
                  &lt;a class="learnMore non-draggable" href="javascript:void()"&gt;Non-  
  draggable element&lt;/a&gt;
                  &lt;a class="learnMore" href="javascript:void()"&gt;Draggable element&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="royalSlide"&gt; 
          &lt;div &gt;
              &lt;img src="img/contentSliderAssets/1.jpg" width="195" height="240"/&gt;
              &lt;img src="img/contentSliderAssets/2.jpg" width="178" height="240"/&gt;
              &lt;img src="img/contentSliderAssets/3.jpg" width="197" height="240"/&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="royalSlide"&gt; 
          &lt;div&gt;               
              &lt;div style="text-align:center; width: 660px; margin: 100px auto 0;"&gt;                    
                  &lt;p&gt;Slider is tested on  iPad, iPad 2, iPhone 4, HTC Desire and 
  Blackberry PlayBook.&lt;br/&gt; If you've found that something works incorrect on your 
  device, so please contact me using contact form on my &lt;a 
  href="http://goo.gl/H9VAg"&gt;profile page&lt;/a&gt; and I'll try to fix it asap.&lt;/p&gt;
              &lt;/div&gt;   
          &lt;/div&gt;      
      &lt;/li&gt;        
  &lt;/ul&gt;   
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/**
  *  Slides area (set background here)
  */
  
  .royalSlider .royalWrapper {
  overflow:hidden;    
  position:relative;
  
  width:100%; 
  height:100%;
  }
  .royalSlider .royalSlide,
  .royalSlider .royalWrapper {
  /* Bakground behind slides */
  background: #111111;
  }
  /* slides holder, grabbing container */
  .royalSlider .royalSlidesContainer {
  position: relative;
  left: 0;
  top: 0 !important;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  border: 0 !important;
  }
  
  
  /* slide item */
  .royalSlider .royalSlide {
  padding: 0 !important;
  margin: 0 !important;   
  border: 0 !important;
  list-style: none !important;
  
  position:relative;
  float:left; 
  
  overflow:hidden;    
  }
  
  /* 
  
  Direction Navigation (arrows) 
  
  */
  .royalSlider .arrow
  {   
  /*background:url(../img/controlsSprite.png) no-repeat 0 0;*/
  background-color: #C00;
  background-repeat: no-repeat;
  background-position: 0 0;
  
  /* change arrows size here */
  width: 45px;
  height: 90px;
  
  top:50%;
  margin-top:-45px;   
  
  cursor: pointer;
  display: block;
  position: absolute;     
  
  z-index:25;
  
  }
  .royalSlider .arrow:hover {
  
  }
  .royalSlider .arrow.disabled {
  
  }
  /* left arrow */
  .royalSlider .arrow.left {
  background-position: top left;
  left: 0;    
  }
  /* right arrow */
  .royalSlider .arrow.right {
  background-position: top right;
  right: 0;
   }
  
  
  
  
  /* Control navigation container (bullets or thumbs) */
  .royalSlider .royalControlNavOverflow {
  width:100%;
  overflow:hidden;
  position:absolute;
  margin-top:-20px;
  z-index:25;
  }
  /* This container is inside ".royalControlNavContainer"  
  and is used for auto horizontal centering */
  .royalSlider .royalControlNavCenterer { 
  float: left;
  position: relative;
  left: -50%;
  }
  /* Control navigation container*/ 
  .royalSlider .royalControlNavContainer {
  float: left;
  position: relative;
  left: 50%;  
  }
  
  
  /* Scrollable thumbnails containers */
  .royalSlider .royalControlNavThumbsContainer {      
  left:0;
  position:relative;
  }
  .royalSlider .thumbsAndArrowsContainer {
  overflow:hidden;
  width: 100%;
  position: relative;
  }
  .royalSlider .royalControlNavOverflow.royalThumbs { 
  width: auto;
  position: relative;
  overflow: hidden;
  margin-top:4px; 
  }
  
  
  
  
  
  
  /* 
  
  Control navigation (bullets, thumbnails)
  
  */
  .royalSlider .royalControlNavOverflow a{    
  background:#0C0 none no-repeat scroll 0 0;
  
  width:20px;
  height:20px;    
  
  float:left; 
  cursor:pointer; 
  
  position:relative;
  display:block;
  
  text-indent: -9999px;   
  }
  /* Current control navigation item */
  .royalSlider .royalControlNavOverflow a.current {   
  background-color: #C00; 
  }
  /* Hover state navigation item */
  .royalSlider .royalControlNavOverflow a:hover { 
  background-color: #00C;
  }
  
  /* Thumbnails */
  .royalSlider .royalControlNavOverflow a.royalThumb{ 
  /*background: none no-repeat 0 0;*/
  /*background-color: ;*/
  width:144px;
  height:60px;    
  /* thumbnails spacing, use margin-right only */ 
  margin-right:4px;
  
  }
  .royalSlider .royalControlNavOverflow a.royalThumb.current {    
  background-position: -3px -3px  !important;
  border:3px solid #C00 !important;
  width:138px;
  height:54px;
  }
  .royalSlider .royalControlNavOverflow a.royalThumb:hover {  
  background-position: -3px -3px; 
  border:3px solid #00C;
  width:138px;
  height:54px;
  }
  
  
  
  /* 
  
  Thumbnails navigation arrows 
  
  */
  .royalSlider .thumbsArrow { 
  width: 38px;
  height: 68px;   
  
  cursor: pointer;
  display: block;
  position: relative;     
  z-index: 25;
  
  background: #C99;
  
  }
  .royalSlider .thumbsArrow.left {    
  float: left;
  }
  .royalSlider .thumbsArrow.right {   
  float: right;
  }
  .royalSlider .thumbsArrow:hover  {
  
  }
  .royalSlider .thumbsArrow.disabled {
  
  }
  
  
  
  
  
  
  /* Captions container */
  .royalSlider .royalCaption {
  z-index:20;
  display:block;
  position:absolute;  
  left:0;
  top:0;
  /*font: normal normal normal 1em/1.5em Georgia, serif;
  color:#FFF;     */
  }
  /* Caption item */
  .royalSlider .royalCaptionItem {
  position:absolute;  
  left:0;
  top:0;
  margin: 0;
  padding: 0;
  }
  
  
  
  /* Loading (welcome) screen */
  .royalSlider .royalLoadingScreen {
  background:#FFF;
  width:100%;
  height:100%;
  position:absolute;
  z-index:99; 
  }
  /* Loading screen text ("Loading...") */
  .royalSlider .royalLoadingScreen p {        
  width:100%;
  position:absolute;  
  margin:0 auto;
  top: 45%;
  text-align:center;
  }
  
  /* single slide image preloader */
  .royalSlider .royalPreloader {  
  position:absolute;
  width:24px;
  height:24px;
  left:50%;
  top:50%;
  margin-left:-12px;
  margin-top:-12px;   
  z-index:0;  
  background-image:url(../img/preloader.gif);
  }
  
  .royalSlider .grab-cursor{cursor:move;}
  .royalSlider .grab-cursor{cursor:url("../img/cursors/grab.png") 8 8,-moz-grab;}
  .royalSlider .grab-cursor{*cursor:url(../img/cursors/grab.cur);}
  .royalSlider .grab-cursor{cursor:move\0/;} /* ie8 hack */
  
  .royalSlider .grabbing-cursor{cursor:move;}
  .royalSlider .grabbing-cursor{cursor:url("../img/cursors/grabbing.png") 8 8,-moz-
  grabbing;}
  .royalSlider .grabbing-cursor{*cursor:url(../img/cursors/grabbing.cur);}
  
  
  /* Cursor used if mouse dragging is disabled */
  .royalSlider .auto-cursor{cursor:auto;}
  
  .royalSlider .royalHtmlContent {
  position: absolute;
  top: 0;
  left: 0;
  }
  .royalSlider .non-draggable {
  cursor: auto;
  }
  .royalSlider .fade-container .royalSlide{
  position: absolute;
  left: 0;
  top: 0;
  list-style-type: none;
  margin: 0;
  padding: 0;
  z-index: 10;
  }
  .royalSlider .royalImage {
  max-width:none;
  margin:0;
  padding: 0 !important;
  border: 0 !important;   
  }
  </code></pre>