/*
 * Google Plus Like Photo Album CSS
 */

/* -------------------------------------------------------------------
 * Album
 * ------------------------------------------------------------------- */
.album { width : 222px; height : 250px; -webkit-user-select : none; float : left; position : relative; margin : 30px 50px 30px 50px; }
.album img {
 position : absolute;
 display  : block;
 width    : 200px;
 height   : 200px;
 border   : 5px solid #f3f3f3;
 -webkit-transition : all .2s ease-in-out;
 -moz-transition    : all .2s ease-in-out;
 -o-transition      : all .2s ease-in-out;
 -ms-transition     : all .2s ease-in-out;
 transition         : all .2s ease-in-out;
 background-color   : #ffffff;
 box-shadow         : 0 2px 3px #aaa;
 -webkit-box-shadow : 0 2px 3px #aaa;
 -moz-box-shadow    : 0 2px 3px #aaa;
}
.album img:hover {
 -moz-transform     : scale(1.1) rotate(0deg);
 -webkit-transform  : scale(1.1) rotate(0deg);
 -o-transform       : scale(1.1) rotate(0deg);
 -ms-transform      : scale(1.1) rotate(0deg);
 transform          : scale(1.1) rotate(0deg);
 z-index            : 10;
}
.album-title { top : 230px; position : relative; }
.album-title span { margin-left : 2em; font-size : 0.9em; color : #999; }

/* -------------------------------------------------------------------
 * Photo
 * ------------------------------------------------------------------- */
.ap {	/* 1枚目の画像に指定 */
 z-index : 1;
 -moz-transform    : translate(12px,6px) scale(.94);
 -webkit-transform : translate(12px,6px) scale(.94);
 -o-transform      : translate(12px,6px) scale(.94); 
 -ms-transform     : translate(12px,6px) scale(.94); 
 transform         : translate(12px,6px) scale(.94); 
}
.bp {	/* 2枚目の画像に指定 */
 z-index : 2;
 -moz-transform    : translate(6px,3px) scale(.97);
 -webkit-transform : translate(6px,3px) scale(.97);
 -o-transform      : translate(6px,3px) scale(.97);
 -ms-transform     : translate(6px,3px) scale(.97);
 transform         : translate(6px,3px) scale(.97);
}
.zp { z-index : 5; }	/* 3枚目の画像に指定 */
.cp { display : none; }	/* 4枚目以降の表示されない画像に指定 */

/* -------------------------------------------------------------------
 * Rotate
 * ------------------------------------------------------------------- */
.ar {	/* 左に傾く画像 */
 -moz-transform    : rotate(-15deg);
 -webkit-transform : rotate(-15deg);
 transform         : rotate(-15deg);
}
.br {	/* 右に傾く画像 */
 -moz-transform    : rotate(15deg);
 -webkit-transform : rotate(15deg);
 transform         : rotate(15deg);
}
.zr {	/* 中心の画像 */
 -moz-transform    : rotate(0deg);
 -webkit-transform : rotate(0deg);
 transform         : rotate(0deg);
}

/* -------------------------------------------------------------------
 * Overlay
 * ------------------------------------------------------------------- */
.gPlusOverlay {
 text-align   : center;
 margin       : 0;
 position     : absolute;
 display      : none;
 top          : 0;
 width        : 100%;
 height       : 100%;
 background   : url(images/black.png);
 z-index      : 100;
}
.gPlusOverlay .image-view {
 display      : inline-block;
 width        : 1000px;
 margin       : 50px auto 0 auto;
}
.gPlusOverlay img.image {
 display      : inline-block;
 background   : #fff;
 padding      : 15px 15px 15px 15px;
 margin       : 0;
 border-radius         : 10px;
 -webkit-border-radius : 10px;
 -moz-border-radius    : 10px;
}
.gPlusOverlay img.close {	/* 閉じるボタン */
 position     : absolute;
 margin-top   : 0px;
 margin-left  : 3px;
}
.gPlusOverlay img.next {	/* 次の画像ボタン */
 position     : absolute;
 margin-top   : 55px;
 margin-left  : 3px;
}
.gPlusOverlay img.prev {	/* 前の画像ボタン */
 position     : absolute;
 margin-top   : 110px;
 margin-left  : 3px;
}
.gPlusOverlay .image-title {	/* 画像タイトル */
 font-size    : 0.8em;
 width        : 300px;
 background   : #fff;
 padding      : 3px 0 3px 0;
 margin       : 0 auto 50px auto;
 border-radius         : 10px;
 -webkit-border-radius : 10px;
 -moz-border-radius    : 10px;
}