/********************
  Overall Demo pages
 ********************/


/*****************
  Main demo page
 *****************/
#main #slider1         { width: 800px; height: 390px; list-style: none; }
#main #slider2         { width: 800px; height: 390px; list-style: none; }

/* Set slider1 panel 5 stuff - adding padding directly to the panel will
   shift panels after it, so we need a wrapper */
#main #slider1 .panel5 ul { width: 200px; margin: 0 5px; }

/* Set slider2 panel sizes, Main & FX demo pages */
#slider2 .panel1 { width: 500px; height: 350px; }
#slider2 .panel2 { width: 450px; height: 420px; }
#slider2 .panel3 { width: 680px; height: 317px; }
#slider2 .panel4 { width: 100%; } /* With no specific size, it defaults to wrapper size; except in IE7, it needs a width defined, so set to 100% */
#slider2 .panel5 { width: 680px; height: 317px; }
#slider2 .panel6 { width: 450px; height: 300px; }

/* For Specific Slides, these also apply to FX demo pages */
.textSlide             { padding: 10px 30px; }
.textSlide h3          { font: 20px Georgia, Serif; }
.textSlide h4          { text-transform: uppercase; font: 15px Georgia, Serif; margin: 10px 0; }
.textSlide ul          { list-style: disc; margin: 0; padding-left: 20px; }
.textSlide ul li       { display: list-item; }
.rightside             { float: right; margin: 0 0 2px 10px; }

.quoteSlide            { padding: 20px; }
.quoteSlide blockquote { font: italic 24px/1.5 Georgia, Serif; text-align: center; color: #444; margin: 0 0 10px 0; }
.quoteSlide p          { text-align: center; }



/** Demo 1 **/
/* colorbox images to full size */
#demo2 #slider1        { width: 400px; height: 300px; list-style: none; }
.cboxPhoto             { width: 100%; height: 100%; margin: 0 !important; }
#cboxTitle             { color: #000 !important; }

/* Change metallic slider defaults to show thumbnails -
  using #demo2 (page wrapper) to increase this CSS priority */
#demo2 div.anythingControls { bottom: 25px; }
#demo2 div.anythingSlider-metallic .thumbNav a { background-image: url(); height: 30px; width: 30px; border: #000 1px solid; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
#demo2 div.anythingSlider-metallic .thumbNav a span { visibility: visible; }

/* border around image to show current page */
#demo2 div.anythingSlider-metallic .thumbNav a:hover,
#demo2 div.anythingSlider-metallic .thumbNav a.cur { border-color: #fff; }
/* reposition the start/stop button */
#demo2 div.anythingSlider-metallic .start-stop { margin-top: 15px; }


/******************
  Expand demo page
 ******************/
#wrapper1              { width: 100%; height: 300px; margin: 0 auto; }




/******************
  css3 demo page
 ******************/
.animations            { margin: 20px 20px 20px 5px; }
.ani                   { margin-top: 10px; }

/******************
  tooltips (Jatt)
 ******************/
.tooltip { cursor: pointer; }
#tooltip {
 min-width: 100px;
 color: #dddddd;
 background: #444;
 border: 1px solid #777;
 padding: 8px;
 display: none;
 opacity: 0.9;
 filter: alpha(opacity=90);
 text-align: left;
 border-radius: .5em;
 -moz-border-radius: .5em;
 -webkit-border-radius: .5em;
 z-index: 1000;
}
#tooltip .body {
 display: block;
 text-align: center;
}