@charset "utf-8"; /* Base -------------------------------------------------- */ body { font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック",sans-serif; text-align: center; } /* Layout -------------------------------------------------- */ #container , .photo_page_list { width: 980px; margin: 25px auto; overflow: hidden; } /* Header -------------------------------------------------- */ #header { text-align: left; position: relative; padding-top: 80px; padding-bottom: 28px; z-index: 98; } #header_box, #header p, #album_list { width: 980px; margin: 0 auto; } #header_menu h2 { width: 955px; margin: 0 auto; } #header h1, #header_menu h2 { font-weight: normal; } #header h1 { font-size: 177%; background-position: 0 -55px; max-width: 600px; padding-left: 30px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: inline-block; *display: inline; } #header h1, #album_info, #share_album{ vertical-align: middle; } #header p, #album_list, #album_info, #share_album { position: relative; } #album_info, #share_album { display: inline-block; *display: inline; *zoom: 1; } .info_icon, .share_icon { width: 20px; height: 20px; margin: 0 5px; *margin: 0 5px 0 10px; display: inline-block; *display: inline; } .info_icon { background-position: 0 -92px; } .share_icon { background-position: 0 -123px; } .album_list_open { font-size: 154%; position: absolute; right: 0; top: -30px; } .album_list_open span, .login span { display: inline-block; vertical-align: middle; width: 22px; height: 22px; margin-right: 5px; } .album_list_open span { background-position: 0 -59px; } .login span { background-position: 0 -29px; } #header_menu { position: absolute; width: 100%; height: 30px; padding: 8px 0; left: 0; top: 0; } #header_menu h2 { font-size: 169%; padding-left: 25px; background-position: 0 4px; } .login { display: block; font-size: 139%; height: 46px; line-height: 46px; padding: 0 20px; position: absolute; right: 0; top: -39px; } /* no Ads -------------------------------------------------- */ .no_notice_img #header{ padding-top: 61px; } .no_notice_img #header_menu{ top: 0; border-top: none; padding: 6px 0 3px; } /* Pop menu -------------------------------------------------- */ #pop_menu a { color:#333; } #pop_menu { width: 980px; margin: 0 auto; position: relative; } .pop { position: absolute; text-align: left; -moz-opacity: 0.95; -webkit-opacity: 0.95; opacity: 0.95; filter: alpha(opacity=95); /* IE7 */ padding: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .pop:after { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; border-color: rgba(255, 255, 255, 0); border-width: 10px; margin-left: -10px; -moz-opacity: 0.95; -webkit-opacity: 0.95; opacity: 0.95; filter: alpha(opacity=95); /* IE7 */ } .pop dt { float: left; margin-right: 10px; overflow: hidden; } .accordion_head { cursor: pointer; overflow: hidden; } /* Album info -------------------- */ #album_infomation { left: -95px; top: 35px; width: 200px; } #album_infomation:after { left: 50%; } /* Share album -------------------- */ #share_btns { left: -60px; top: 35px; overflow: visible !important; } #share_btns:after { left: 75px; } #snsButtonContainer div { margin: 5px; padding: 3px; display: table-cell; vertical-align: top; } /* Album list -------------------- */ #albums { right: 0; top: 10px; min-width: 260px; } #albums:after { left: 70%; } #albums dt { background-color: #000; text-align: center; width: 100px; height: 100px; line-height: 100px; } #albums li { clear: both; padding: 10px 0; max-width: 400px; min-height: 100px; } #albums li.first { padding-top: 0; border-top: 0px none; } #albums li.last { padding-bottom: 0; border-bottom: 0px none; } #albums img { vertical-align:middle; margin-top: -1px; } /* Calendar -------------------------------------------------- */ #calendar { overflow: hidden; font-size: 139%; padding-top: 20px; min-width: 1000px; } #calendar ul { position:relative !important; left: 50% !important; float: left !important; } #calendar li { float: left; position:relative; left: -50%; float: left; } #calendar a, #calendar span { display: block; margin: 0 8px 0 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; overflow: visible; } .month { padding: 5px 13px; } .prev, .next { padding: 5px 10px; } .month, .on { position: relative; } .month:after, .on:after { top: 0; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; border-color: rgba(255, 255, 255, 0); border-width: 5px; left: 50%; margin-left: -5px; } .prev { position: relative; } .prev:after { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; border-color: rgba(159, 160, 160, 0); border-width: 5px; top: 50%; margin-top: -5px; } .next { position: relative; } .next:after { left: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; border-color: rgba(159, 160, 160, 0); border-width: 5px; top: 50%; margin-top: -5px; } /* Photo list -------------------------------------------------- */ .photo_list li { float: left; margin: 0 8px 5px 0; } .photo_list .list img { width: auto; height: 150px; } /* Photo page -------------------------------------------------- */ #share_photo { text-align: right; width: 800px; margin: 0 auto -10px; padding: 30px 0 0; } .photo_box { display: table-cell; text-align: center; vertical-align: middle; width: 800px; height: 600px; } .photo a { color: #FFF; } .view_photo { float: left; width: 800px; display: inline-block; } .view_photo img { max-width: 800px; max-height: 600px; vertical-align: middle; } .photo a #photo_info { display: none; background-color: #000; text-align: left; -moz-opacity: 0.8; -webkit-opacity: 0.8; opacity: 0.8; filter: alpha(opacity=80); /* IE7 */ position: relative; } .photo a:hover #photo_info { display: block; width: 760px; height: 60px; margin: -100px auto 0; padding: 20px; } #photo_info h3 { font-weight: normal; font-size: 139%; white-space: nowrap; text-overflow: ellipsis; width: 680px; overflow: hidden; } #photo_info dt, #photo_info dd { float: left; font-size: 116%; } #photo_info dd { margin-right: 20px; } .lupe_icon { width: 20px; height: 20px; position: absolute; right: 10px; top: 10px; } /* photo list -------------------- */ .photo_page_list li { width: 90px; height: 90px; line-height: 90px; padding: 0; margin: 0 5px 5px 0; } .photo_page_list li img { vertical-align: middle; max-height: 90px; max-width: 90px; width: auto; height: auto; margin-top: -3px; } /* arrow -------------------- */ .prev_photo, .next_photo { display: inline-block; width: 65px; height: 600px; margin: 0; padding: 0; float: left; position: relative; } .prev_photo span { background-position: 0 0; } .next_photo span { background-position: 0 -190px; } .prev_photo { padding-right: 25px; } .next_photo { padding-left: 25px; } .prev_photo span, .next_photo span { display: block; width: 65px; height: 115px; position: absolute; top: 45%; cursor: pointer; } .prev_photo span { left: 0; } .next_photo span { right: 0; } .list_prev, .list_next { display: block; width: 15px; height: 90px; float: left; position: relative; } .list_prev span, .list_next span { display: block; width: 8px; height: 15px; position: absolute; top: 40%; cursor: pointer; } .list_prev span { background-position: 0 -389px; left: 0; } .list_next span { background-position: 0 -434px; right: 0; } /* Message -------------------------------------------------- */ .message p { margin-bottom: 1em; } .message a { color: #00CCCC; } /* Footer -------------------------------------------------- */ #footer { clear: both; margin: 50px 0; } /* Ad -------------------------------------------------- */ .header_ad { position: absolute; left: 0; top: 15px; width: 100%; text-align: center; z-index: 99; }