/********************
  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: 15px Meiryo, Serif;		/*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: 0px;			/*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: 640px;			/*720-540*/
 height: 530px;
 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: 720px;
 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 {			/*************文書ファイルのときの　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: 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;

}