body {
  text-align:center; 
  color: #fff;
  background-color: #000;
  font: 18pt "Comic Sans MS", sans-serif;
}

a:link{color: #aff }
a:visited{color: DarkSlateGray}            /* DarkSlateGray=#2F4F4F */
a:hover{text-shadow: 0px 0px 10px #fff; opacity:1.0; }   /* Crimson=#DC143C */
a {text-decoration: none;opacity:0.4;}                 /* eliminate underlines */

#wrapper{
  text-align:left;
  margin:0 auto; 
  width:1020;
  height:660;
  
  background: -webkit-gradient(radial, center top, 0, center center, 800, from(#666666), to(rgba(89,89,171,0)));
}

#inner{
  margin:0 10; 
}

#side{
  font: 12pt "Comic Sans MS", sans-serif;
  text-align: center;
  float:left;
  width:190;
  height:630;
  overflow:auto;
}

/* 元の絵が1000x1000なので*/
.sidecrop{ width: 190; height: 120; overflow: hidden; }
.sidecrop img{ width: 190; margin:-40px 0px -50px 0px;object-fit: cover;}

#dispimg{
  float:right;
  width:800;
  /*height:630;*/
  object-fit: cover;
}


/* 元の絵が1000x1000なので*/
.crop{ width: 800; height: 600; overflow: hidden; }
.crop img{ width: 800; margin:-100px 0px -100px 0px;}

/* 640x480 */
.pec img{
    width: 800;
    height: 200;
    position: absolute;
    top: 400px; /*bottom: 0px;*/
    /*background-color: rgba(0, 0, 0, 0.5);*/
    /*color: white;*/
    /*padding: 10px;*/

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

#controller{
  text-align:center; 
  height:24;
  background-color: #444444;
  padding: 6px 0px 0px 0px;
}

#header{
  text-align:center; 
  margin-left:10%;
  height:10;
}

#footer{
  text-align: right;
  font-size: 10pt;
  height:10;
  width:100%;
  clear:left;
}

dl {
	position:relative;
	height:1px;
	text-align:auto;
	/*margin-right:6;*/
	top:-15;
	/*opacity:0.4;*/
	/*
  text-align: center;
  text-decoration: none;
  font-size: 10pt;
  */
}

btn {
  /* ボタンの文字 */
  font: bold 16px/1.7 "arial black", sans-serif;
  color: #444444;
  text-decoration: none;
  background-color: #000;
  
  /* ボタンのレイアウト */
  position:relative;
  top: -4px;
  float: center;
  padding: 0 10;
  margin: 0 10;
  
  /* 角を丸くする */
          border-radius: 10px;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
}

btn:hover {
  /* マウスオーバーの状態 */
  cursor: pointer;
  background-color: #FD4;

  /* ボックスシャドウ */
          box-shadow: 2px 2px 2px #aaa, -2px -2px 2px #aaa, -2px 2px 2px #aaa, 2px -2px 2px #aaa;
  -webkit-box-shadow: 2px 2px 2px #aaa, -2px -2px 2px #aaa, -2px 2px 2px #aaa, 2px -2px 2px #aaa;
     -moz-box-shadow: 2px 2px 2px #aaa, -2px -2px 2px #aaa, -2px 2px 2px #aaa, 2px -2px 2px #aaa;
  
}

btn:active {
  /* クリック中の状態 */
  top: -2px;
}