/********************

  Overall Demo pages

 ********************/

body                   { font: 12px Georgia, Serif; background: #fff; color: #000; }

a, a img               { border: 0; text-decoration: none; }



#page-wrap, #demo2     {

	width: 1000px;

	position: relative;

	margin: 0px;

	padding: 0;

}



pre, code              { font: 13px/1.8 Monaco, MonoSpace; margin: 0 0 15px 0; padding: 5px; background: #f5f5f5; block: inline; width: 100%; overflow-x: auto; }

blockquote             { margin-left: 30px; }



ul                     { margin: 0; padding-left: 35px; }

ul li                  { font: 15px Georgia, Serif; margin: 0 0 8px 0; }



#nav                   { display: block; width: auto; margin: 10px auto; text-align: center; white-space: nowrap; line-height: 3em; }

#nav a                 { text-align: center; background: black; color: white; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 10px; }

#nav a.git             { background: #006; }

#nav a.play            { background: #060; }

#nav a.issue           { background: #600; }

#nav a:hover, #nav a.current { background: #666; }



.themeselector         { margin: 0 auto; text-align: center; }



#status                { color: #00a; font-weight: bold; }

.alert                 { color: #f00; font-weight: bold; }

.alert a, .attention   { color: #a00; }

.data                  { width: 100%; border: #555 1px solid; border-collapse: collapse; }

.data td, .data th     { border: #555 1px solid; padding: 0 5px; }

.data th               { background: #eee; }

.data .col             { width: 200px; }



/*****************

  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; }



/***************************

  FX Demo Page

 ***************************/

/* Demo page accordions */

.accordion             { width: 70%; margin: 0 auto; }

.accordion .ui-widget-content a { color: #004499; }



/** Demo 1 **/

/* colorbox images to full size */

#demo2 #slider1        { width: 1000px; height: 350px; list-style: none; }‰æ‘œƒTƒCƒY

#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.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 { text-indent: 0; }



/* 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; }





/* position caption close button */

.caption-top .close,

.caption-right .close,

.caption-bottom .close,

.caption-left .close   { font-size: 80%; cursor: pointer; float: right; display: inline-block; }



/* captions */

/* set to position: relative here in case javascript is disabled, script sets captions to position: absolute */

#slider3 .caption-top,

#slider3 .caption-right,

#slider3 .caption-bottom,

#slider3 .caption-left { background: #000; color: #fff; padding: 10px; margin: 0; position: relative; z-index: 10; opacity: .8; filter: alpha(opacity=80); }





/******************

  Expand demo page

 ******************/

#wrapper1              { width: 100%; height: 300px; margin: 0 auto; }

#wrapper2              { width: 50%; height: 300px; margin: 0 auto; }

#expand #slider1,

#expand #slider2       { width: 100%; height: 300px; list-style: none; }

body#expand h2,

body#expand h3         { text-align: center; }