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


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


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



#page-wrap, #demo2     {
 width: 90%;
 padding: 0 15px;
 margin: 0 auto 50px;
 position: relative;
 }



h1                     {
 font: bold 60px Helvetica, Sans-Serif;
 letter-spacing: -2px;
 margin: 20px 0;
 text-align: center;
 }


h2                     {
 font: bold 30px Helvetica, Sans-Serif;
 letter-spacing: -1px;
 margin: 0 0 10px 0;
 color: #002266;
 }


h2.title               {
 text-align: center;
 }


h3                     {
 font: bold 20px Georgia, Serif;
 margin: 0 0 10px 0;
 color: #003388;
 }


h5, .header{
 font: bold 15px Georgia, Serif;
 text-align: center;
 }


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: 90%;
 margin: 10px auto;
 text-align: center;
 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;
 white-space: nowrap; 
}


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


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


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


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



.themeselector, .ani   {
 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;
 }


.spacer                {
 height: 50px;
 }




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




/*ƒpƒlƒ‹‚̐ݒ聁*/


/* Set slider2 panel sizes, Main & FX demo pages */

#slider2 .panel1 {
 width: 1121px; 
height: 630px;
 }

#slider2 .panel2 {
 width: 727px;
 height: 720px; 
 }

#slider2 .panel3 {
 width: 1280px;
height: 720px;
 } 

#slider2 .panel4 {
 width: 1600px;
height: 702px;
 }

/*ƒpƒlƒ‹‚̐ݒ聁*/

/* With no specific size, it defaults to wrapper size; except in IE7, it needs a width defined, so set to 100% */

#slider2 .panel5 {
 width: 1440px;
 height: 720px;
 }


#slider2 .panel6 {
 width: 1366px;
 height: 439px;
 }

#slider2 .panel7 {
 width: 800px;
 height: 400px;
 }


/* 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 0px; /*margin: 0 0 2px 10px;*/
 }



.quoteSlide            {
 padding: 20px;
 }


.quoteSlide blockquote {	

/*************•Ά‘ƒtƒ@ƒCƒ‹‚Μ‚Ζ‚«‚́@blockquote‚̐ݒθ@*************/
 font:  24px/1.5 Meiryo, Georgia, Serif;	/* font: italic 24px/1.5 Georgia, Serif;*/
 text-align: left;/*text-align: center;*/
 color: #444;
 margin: 0 0 0px 0;/*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: 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;
 }



/** Demo 2 **/


#demo2 #slider2        {
 width: 600px;
 height: 350px; 
list-style: none;
 }




/** Demo 3 **/


#demo2 #slider3        {
 width: 500px;
 height: 400px;
 list-style: none;
 }




/* expand image */


#slider3 img           {
 width: 100%;
 height: 100%;
 position: relative;
 }

#slider3 .panel        {
 position: relative;
 }




/* 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: absolute;
 z-index: 10;
 opacity: .8; filter: alpha(opacity=80); 
}




/* Top caption - padding is included in the width (480px here, 500px in the script), same for height */


#slider3 .caption-top  {
 left: 0; 
top: 0;
 width: 480px;
 height: 30px;
 }




/* Right caption - padding is included in the width (130px here, 150px in the script), same for height */


#slider3 .caption-right  {
 right: 0; 
bottom: 0;
 width: 130px;
 height: 180px;
  }






/**********************************@bottom caption ‚̐ݒθ******************************************/


/* Bottom caption  - padding is included in the width (480px here, 500px in the script), same for height */



#slider3 .caption-bottom {
 left: 0;
 bottom: 0;
 width: 480px;
 height: 30px;
 }




/* Left caption - padding is included in the width (130px here, 150px in the script), same for height */


#slider3 .caption-left   {
 left: 0;
 bottom: 0;
 width: 130px;
 height: 180px;
  }




/******************
  Expand demo page
 ******************/


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


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




/* div-wrappers for aspect ratio demos: */


#wrapper3              {
 width: 75%;
 height: 500px;
 margin: 0 auto;
 border: solid red;
    }


#wrapper4              {
 width: 75%;
 height: 500px;
 margin: 0 auto;
 border: solid green;
  }


#wrapper5              {
 width: 75%; 
height: 500px;
 margin: 0 auto;
 border: solid green;
  }


#wrapper6              {
 width: 75%;
 height: 500px;
 margin: 0 auto;
 border: solid green;
  }


#wrapper7              { 
width: 75%;
 height: 200px;
 margin: 0 auto;
 border: solid green;
  }


#wrapper8              {
 width: 75%;
 height: 200px;
 margin: 0 auto;
 border: solid green;
  }




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


#expand p              {
 width: 75%;
 margin: 0 auto;
 }




/* The next one is really vital since it is used to calculate the aspect ratio from. */


#expand #slider4       {
 width: 680px;
 height: 317px;
 }



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




/***************************
  Video Compatibility table
 ***************************/


.video-info            {
 width: 700px;
 margin: 0 auto;
 margin-top: 50px;
 font-size: 18px;
 }


.video-info h2         {
 text-align: center;
 }


.video-info ul,
.video-info li         {
 margin: 0;
 }


.video-info sup        {
 font-size: 12px;
 }


.video-info th.header  {
 width: 25px;
 }


.good, .bad, .prob     {
 color: #ddd;
 text-align: center;
 }


.good                  {
 background: #080;
 }


.bad                   {
 background: #800;
 }


.prob                  {
 background: #880;
 }


.group                 {
 border: #000 1px solid;
 }

/**************************
Updating Video
**************************/



#updatingVideoDemo div#slider1, ul#slider1 div {

    width: 300px;

    height: 200px;

    list-style: none;

}



#updatingVideoDemo div#slider2, div#slider2 div {

    width: 300px;

    height: 200px;

    list-style: none;

}



#updatingVideoDemo .updatingVideoDemoInputs {

  clear: both;

  left: 50%;

  margin-left:
 -200px;
 
 position: relative;

  width: 400px;

}




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

}