/* --- play.html --- */

body{
font-family:Meiryo, Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
line-height: 160%;
letter-spacing:0.5px;
margin:0px;
color: #666666;
background-image: url(img/back.jpg);
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
}

p{
margin:0px 0px 0px 0px; 
}

*:focus {
  outline: none;
}

/*上右下左*/
img.example {
margin: 0px 10px 10px 0px;
vertical-align: top;
}

dl,dd,dt{
font-family:Meiryo, Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
line-height: 150%;
letter-spacing:0.5px;
margin: 0px 0px 10px 0px;
}

dd{
padding: 0px 10px 0px 0px;
}

/*widthは並べたい枚数にあわせて調整*/
#play{
    width:920px;
    background-color:#ffffff;
	margin: 10px 0px 0px 0px;
}
/*widthは写真の大きさにあわせて調整
font-sizeは固定した方が良い*/
dl{
    margin-right:0px;
    margin-bottom:10px;
    padding:0px;
	position: relative;
	left: 10px;
    float:left;
    width:900px;
    border-width:1px 1px 1px;
    border-style:solid;
    border-color:#f460aa;
}
dt{
	color: #ffffff;
    margin:0px;
}
dd{
	color: #666666;
    margin:10px 0px 10px 10px;
}
/*heightは行数＋αにしておく。
コメントの文字数はあらかじめ決めておきましょう。*/
dt.title{
    font-size: 13px;
	font-weight:bold;
	background-color:#f460aa;
	padding:5px 0px 5px 10px;
}

/* --- ここまで --- */

/* フッターの背景 */
div#footer-bk
{
	background-color: #000000;   /* 背景色(黒) */
	width:952px;               /* 横の幅を100% */
	bottom: 0px;              /* 絶対位置指定(左0px,下0px) */
	padding: 10px 0;          /* 上下に余白を取る */
}
/* フッターの表示領域 */
div#footer{
	width: 950px;           /* 横の幅970px */
	vertical-align:top;
}

/* --- ここまで --- */

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:10px;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{outline:0;}
    #cboxContent{margin-top:auto;margin-bottom:auto;background:#000;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{border-top:30px solid #000;  border-left:5px solid #000; border-right:5px solid #000; border-bottom:90px solid #000; background:#000;}
        #cboxTitle{position:relative; top:-90px; left:0px; color:#fff; font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;font-size: 11px;line-height: 1.6;letter-spacing: 0.5px;}
        #cboxCurrent{position:absolute; top:5px; left:10px; color:#fff; font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;font-size: 11px;line-height: 1.6;letter-spacing: 0.5px;}
        #cboxLoadingGraphic{background:url(play_img/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
        
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:0px; margin-top:-32px; background:url(play_img/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:bottom left;}
        #cboxNext{position:absolute; top:50%; right:0px; margin-top:-32px; background:url(play_img/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
        #cboxNext:hover{background-position:bottom right;}
        #cboxClose{position:absolute; top:0px; right:-10px; display:block; background:url(play_img/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
        #cboxClose:hover{background-position:bottom center;}