/*
	 CSS-Tricks Example
	 by Chris Coyier
	 http://css-tricks.com
*/

* { margin: 0; padding: 0; }
/*
html, body { height: 100%; overflow: hidden; background: #eee; }
body { font: 14px Georgia, serif; }
※overflow: hidden があるとスクロールバーが消えるのでコメントアウトした
*/
  #grid_accordion      { width: 960px; padding: 0 0 0  0px; margin: 0 0 0 auto; overflow: hidden; height: 100%; position: relative; }
/*#grid_accordion_main { width: 960px; padding: 0 0 0 15px; margin: 0 auto; overflow: hidden; height: 100%; } */
  #grid_accordion_main { width: 960px; padding: 0 0 0  0px; margin: 0 auto; overflow: hidden; height: 100%; }

/* .info-col { float: left; width: 132px; height: 100%; padding: 50px 0 0 0; } */
.info-col { float: left; width: 188px; height: 100%; padding: 0px 0 0 0; }
.info-col h2 { text-align: center; font-weight: normal; padding: 25px 0; }

.image { height: 100px; text-indent: -9999px; display: block; border-right: 1px solid white; }

.batman { background: url(images/batman.jpg) center center no-repeat; }
.spiderman { background: url(images/spiderman.jpg) center center no-repeat; }
.aquaman { background: url(images/aquaman.jpg) center center no-repeat; }
.ironman { background: url(images/ironman.jpg) center center no-repeat; }
.superman { background: url(images/superman.jpg) center center no-repeat; }

/* dt { padding: 5px; background: #900; color: white; border-bottom: 1px solid white; border-right: 1px solid white; } */
   dt { padding: 5px; background: #900; color: white; border-bottom: 1px solid white; border-right: 1px solid white; 
        height:30px; line-height: 30px; text-align: center; 
      }
/* dd { position: absolute; left: -9999px; top: -9999px; width: 299px; background: #900; padding: 10px; color: white; border-right: 1px solid white; } */
   dd { position: absolute; left: -9999px; top: -9999px;                                 padding:  0px; color: white; border-right: 1px solid white;
        height:120px;
      }

/*
dt:nth-of-type(1) { background: #b44835; }
dd:nth-of-type(1) { background: #b44835; }

dt:nth-of-type(2) { background: #4c443c; } 元 #ff7d3e;
dd:nth-of-type(2) { background: #4c443c; } 元 #ff7d3e;

dt:nth-of-type(3) { background: #656b60; } 元 #ffb03b;
dd:nth-of-type(3) { background: #656b60; } 元 #ffb03b;

dt:nth-of-type(4) { background: #c2a25c; }
dd:nth-of-type(4) { background: #c2a25c; }

dt:nth-of-type(5) { background: #4c443c; }
dd:nth-of-type(5) { background: #4c443c; }

dt:nth-of-type(6) { background: #656b60; }
dd:nth-of-type(6) { background: #656b60; }
*/

dt{
	font-size: 12px;
	padding: 5px;
	border-bottom: 1px solid white;
	border-right: 1px solid white;
	height:30px;
	line-height: 33px;
	text-align: center; 
	color:#000;

	background:rgba(255,255,255,0.1);
	border:1px solid rgba(255,255,255,0.1);

	border: solid 1px #aaa;
	padding: 1px;
	border-radius: 5px;
	background: #eee;
	-moz-border-radius: 5px;
	background: -moz-linear-gradient(top, #fff, #eee);
	-webkit-border-radius: 5px;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
	-pie-background: linear-gradient(top, #fff, #eee);
	behavior: url(images/PIE.htc);
}
.dt_2line {
	line-height: 16px;
}
dd{
	position: absolute;
	left: -9999px;
	top: -9999px;
/*	background: #eee; */
	padding:  0px;
	color: white;
	border-right: 1px solid white;
	height:120px;
}



.curCol { -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 1; position: relative; }

/* .col_01 dd:nth-of-type(1) { background: url(images/peri_01.jpg) center center no-repeat; }  *//* { background: #b44835; } */
/* .col_02 dd:nth-of-type(1) { background: url(images/peri_02.jpg) center center no-repeat; }  *//* { background: #b44835; } */
/* .col_03 dd:nth-of-type(1) { background: url(images/peri_01.jpg) center center no-repeat; }  *//* { background: #b44835; } */
/* .col_04 dd:nth-of-type(1) { background: url(images/peri_02.jpg) center center no-repeat; }  *//* { background: #b44835; } */
/* .col_05 dd:nth-of-type(1) { background: url(images/peri_05.jpg) center center no-repeat; }  *//* { background: #b44835; } */

/* .col_01 dd:nth-of-type(2) { background: url(images/peri_02.jpg) center center no-repeat; }  *//* { background: #b44835; } */
/* .col_02 dd:nth-of-type(2) { background: url(images/peri_01.jpg) center center no-repeat; }  *//* { background: #b44835; } */
/* .col_03 dd:nth-of-type(2) { background: url(images/peri_02.jpg) center center no-repeat; }  *//* { background: #b44835; } */
/* .col_04 dd:nth-of-type(2) { background: url(images/peri_05.jpg) center center no-repeat; }  *//* { background: #b44835; } */
/* .col_05 dd:nth-of-type(2) { background: url(images/peri_02.jpg) center center no-repeat; }  *//* { background: #b44835; } */

/* .col_01 dd:nth-of-type(3) { background: url(images/peri_05.jpg) center center no-repeat; }  *//* { background: #b44835; } */
/* .col_02 dd:nth-of-type(3) { background: url(images/peri_02.jpg) center center no-repeat; }  *//* { background: #b44835; } */
/* .col_03 dd:nth-of-type(3) { background: url(images/peri_13.jpg) center center no-repeat; }  *//* { background: #b44835; } */
/* .col_04 dd:nth-of-type(3) { background: url(images/peri_14.jpg) center center no-repeat; }  *//* { background: #b44835; } */

.back01 { background: url(images/peri_01.jpg) center center no-repeat; }
.back02 { background: url(images/peri_02.jpg) center center no-repeat; }
.back03 { background: url(images/peri_03.jpg) center center no-repeat; }
.back17 { background: url(images/peri_17.jpg) center center no-repeat; }

.back04 { background: url(images/peri_04.jpg) center center no-repeat; }
.back05 { background: url(images/peri_05.jpg) center center no-repeat; }
.back06 { background: url(images/peri_06.jpg) center center no-repeat; }

.back07 { background: url(images/peri_07.jpg) center center no-repeat; }
.back08 { background: url(images/peri_08.jpg) center center no-repeat; }
.back09 { background: url(images/peri_09.jpg) center center no-repeat; }

.back10 { background: url(images/peri_10.jpg) center center no-repeat; }
.back11 { background: url(images/peri_11.jpg) center center no-repeat; }
.back12 { background: url(images/peri_12.jpg) center center no-repeat; }

.back13 { background: url(images/peri_13.jpg) center center no-repeat; }
.back14 { background: url(images/peri_14.jpg) center center no-repeat; }
.back15 { background: url(images/peri_15.jpg) center center no-repeat; }
.back16 { background: url(images/peri_16.jpg) center center no-repeat; }



dd .description{
	position:absolute;
	left:10px;
	top:10px;
	width:300px;
	background:rgb(100,100,100);
	background:rgba(0,0,0,0.5);
	border:1px solid rgba(255,255,255,0.0);
	color:#fff;
	padding:2px 4px;
	text-decoration:none;
	text-shadow:none;
}
dd .description:hover {
	background:rgb(255,255,255);
	background:rgba(0,0,0,0.1);
	color:#fff !important;
	filter: alpha(opacity=25);
	-moz-opacity:0.25;
	opacity:0.25;
}
#grid_accordion .title {
	background:rgba(255,255,255,0.1);
	border:1px solid rgba(255,255,255,0.1);
	left:0px;
	top:0px;
	width:936px;
	padding:4px;
/*	position:absolute; */
	
	font-size:14px;
	font-weight:bold;
	text-align:center;
	letter-spacing:0.2em;
	text-transform:uppercase;
	
/*	background:rgb(34,92,122);  Fallback 
	background:rgba(255,255,255,0.1);
	border:1px solid rgba(255,255,255,0.1); */
	color:#000;
	padding:2px 4px;
	text-decoration:none;
	text-shadow:none;
	
	border: solid 1px #aaa;
	padding: 1px;
	border-radius: 5px;
	background: #eee;
	-moz-border-radius: 5px;
	background: -moz-linear-gradient(top, #fff, #eee);
	-webkit-border-radius: 5px;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
	-pie-background: linear-gradient(top, #fff, #eee);
	behavior: url(images/PIE.htc);
}


dt a{
text-decoration: none;
color: #000000;
}
dt a:visited {
color: #000000;
}