@charset "utf-8";

/*
html5doctor.com Reset Stylesheet v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}ins{background-color:transparent;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
*/
body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}


/*----------------------------------------------------
	Clearfix
----------------------------------------------------*/
.cf:before,.cf:after{content:"";display:table;}
.cf:after{clear:both;}
.cf{zoom:1;}


/*----------------------------------------------------
	Font
----------------------------------------------------*/
/*
10px = 77%      19px = 146.5%
11px = 85%      20px = 153.9%
12px = 93%      21px = 161.6%
13px = 100%     22px = 167%
14px = 108%     23px = 174%
15px = 116%     24px = 182%
16px = 123.1%   25px = 189%
17px = 131%     26px = 197%
18px = 138.5%
*/
body {
	font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Arial, Verdana, sans-serif;
	color: #333;
}


/*----------------------------------------------------
	Main Layout
----------------------------------------------------*/
body {
	text-align: center;
	-webkit-text-size-adjust: none; /* iPhone回転時の文字サイズ自動調整なし */
}
#page {
	width: 930px;
	margin: 0 auto 130px auto;
	text-align: left;
	position: relative;
}
#sub {
	width: 200px;
	float: right;
}
/* index page */
#index #main {
	width: 720px;
	float: left;
	position: relative;
}
/* detail page */
#detail #nav {
	width: 75px;
	float: left;

}
#detail #main {
	width: 430px;
	float: left;
}
#detail #extra {
	float: left;
	width: 190px;
	margin-left: 20px;
}


/*----------------------------------------------------
	Header bar
----------------------------------------------------*/
#top {
	height: 42px;
	font-size: 12px;
}
#top .content {
	width: 930px;
	margin: 0 auto;
	text-align: left;
}
#top .main {
	float: left;
	padding-top: 7px;
}
#top .sub {
	float: right;
	height: 42px;
	line-height: 42px;
}
#top .sub img {
	vertical-align: middle;
}
/* header logo */
#top .main strong a {
	display: block;
	width: 141px;
	height: 28px;
	text-indent: -9999px;
	overflow: hidden;
}
#top .sub span {
	padding-right: 10px;
}
#top .sub span.bullet {
	background: url(http://img.stagramaker.com/settings/bullet.png) no-repeat 0 48%;
	padding-left: 10px;
}
/* プレビュー表示 */
#top p#msg-preview {
	width: 930px;
	margin: 0 auto;
	line-height: 42px;
	font-weight: bold;
	text-align: left;
}
#top p#msg-preview input {
	margin-left: 10px;
}


/*----------------------------------------------------
	Logo and Tagline
----------------------------------------------------*/
#logo {
	margin: 35px 0 3px 0;
}
#logo img {
	vertical-align: middle;
}
#logo,
#tagline {
	width: 550px;
}
#tagline {
	margin: 0 0 6px 0;
}

/*----------------------------------------------------
	Social Buttons
----------------------------------------------------*/
#sb {
	position: absolute;
	top: 20px;
	right: -25px;
	font-size: 5px;
	margin-top: 10px;
}
#sb h3 {
	font-size: 10px;
	margin-bottom: 5px;
}
#bt-hatena {
	padding-right: 8px;
}
#bt-facebook iframe {
	padding-right: 2px;
	margin-bottom: -1px;
}
#bt-twitter,
#bt-facebook,
#bt-hatena,
#bt-google {
}


/*----------------------------------------------------
	Pager
----------------------------------------------------*/
.pager {
	font-family: Verdana, Arial, Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;
	padding-right: 20px;
}
.pager .prev {
	width: 348px;
	float: left;
}
.pager .next {
	width: 348px;
	float: right;
	text-align: right;
}
.pager a {
	display: block;
	padding: 4px 8px 5px 8px;
	text-decoration: none;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
.pager span {
	display: block;
	padding: 4px 8px 5px 8px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}


/*----------------------------------------------------
	Sort Tab
----------------------------------------------------*/
#sortTab {
	margin-top: -5px;
	margin-bottom: 15px;
	width: 700px;
	font-size: 13px;
}
#sortTab ul {
	list-style-type: none;
	padding-left: 15px;
}
#sortTab ul li {
	width: 140px;
	height: 28px;
	letter-spacing: 1px;
	line-height: 30px;
	text-align: center;
	float: left;
	font-weight: bold;
}
#sortTab ul li#sortNewer,
#sortTab ul li#sortLikes {
	line-height: 33px;
	font-size: 12px;
}
#sortTab ul li a {
	display: block;
	width: 100%;
	height: 100%;
	font-weight: normal;
	text-decoration: none;
	outline: none;
}


/*----------------------------------------------------
	Recent photos
----------------------------------------------------*/
#nav ul {
	list-style-type: none;
}
#nav li {
	margin: 0 0 10px 0;
	width: 62px;
	height: 62px;
	float: left;
}
#nav img {
	margin: 5px;
	vertical-align: bottom;
}
#nav .current img {

}
#nav a {
	display: block;
	width: 62px;
	height: 62px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}


/*----------------------------------------------------
	Recent photos - Here
----------------------------------------------------*/
#nav {
	position: relative;
}
#nav .here {
	width: 9px;
	height: 12px;
	position: absolute;
	right: -1px;
}
#nav .here.p1 {
	top: 27px;
}
#nav .here.p2 {
	top: 99px;
}
#nav .here.p3 {
	top: 171px;
}
#nav .here.p4 {
	top: 242px;
}
#nav .here.p5 {
	top: 313px;
}


/*----------------------------------------------------
	Random photos
----------------------------------------------------*/
#extra #title-randomphotos {
	width: 180px;
	height: 26px;
	font-size: 10px;
	text-indent: -9999px;
	margin-bottom: 4px;
}
#random-photos {
	list-style-type: none;
}
#random-photos li {
	margin: 0 10px 10px 0;
	float: left;
	display: inline;
}
#random-photos img {
	vertical-align: bottom;
}


/*----------------------------------------------------
	Main photo
----------------------------------------------------*/
#main-photo {
	width: 430px;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}
#main-photo .photo {
	height: 410px;
	margin: 10px;
	vertical-align: bottom;
}
#main-photo .data {
	padding: 0 13px 10px 15px;
	position: relative;
}
#main-photo .data #photo-like {
	text-align: right;
	float: right;
}
#main-photo .data #photo-like img {
	vertical-align: middle;
	margin-top: -3px;
}
#main-photo .data #photo-like img:hover,
img#follow {
	cursor: pointer;
}
#main-photo .data #photo-views {
	margin-left: 8px;
	text-align: right;
	float: right;
}
#main-photo .data #photo-like strong,
#main-photo .data #photo-views strong {
	font-size: 116%;
	padding-right: 3px;
	padding-left: 19px;
}
#main-photo .data #photo-like span,
#main-photo .data #photo-views span {
	font-size: 10px;
}
#main-photo .data #photo-text {
	clear: both;
	margin: 10px 0 0 0;
	padding-top: 15px;
	font-size: 108%;
	line-height: 1.5;
}
#main-photo .data #photo-text img {
	vertical-align: middle;
	padding: 0 1px;
}
#main-photo .data #photo-icon {
	clear: both;
	text-align: right;
	width: 48px;
	float: right;
	margin: 10px 0;
}
#main-photo .data #photo-by {
	margin-top: 10px;
	text-align: right;
	font-size: 9px;
}
#main-photo .data #photo-by strong {
	font-weight: bold;
	font-size: 14px;
	padding-left: 2px;
}
#main-photo .data #photo-by span {
	display: block;
	font-size: 10px;
	padding-top: 3px;
}
#main-photo .data #photo-by span img {
	vertical-align: middle;
	padding: 0 1px;
}
/* フォローボタン */
#main-photo .data #photo-by img#follow {
}
/* 申請中 */
#main-photo #reqnow {
	font-size: 10px;
}
/* ツイート用リンク */
#main-photo #tweet-this-photo {
	position: absolute;
	top: 0;
	left: 10px;
	background: url(http://img.stagramaker.com/icon_tweet.png) no-repeat 0 45%;
	padding-left: 20px;
}
/* 翻訳ボタン */
#main-photo span#caption-trans {
	display: block;
}


/*----------------------------------------------------
	Admin Panel
----------------------------------------------------*/
#admin-panel {
	width: 430px;
	margin-top: 10px;
	padding: 10px 0;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}
#admin-panel p {
	padding: 5px 15px;
}


/*----------------------------------------------------
	Created time
----------------------------------------------------*/
#main #created-time {
	font-size: 10px;
	text-align: right;
	margin: 10px 0;
}


/*----------------------------------------------------
	Filter name
----------------------------------------------------*/
#main #photo-filter {
	font-size: 10px;
	width: 170px;
	margin-top: -22px;
}


/*----------------------------------------------------
	Login Recommend
----------------------------------------------------*/
#main #login-recommend {
	margin: 25px 0 20px 0;
	line-height: 1.5;
}


/*----------------------------------------------------
	Comments
----------------------------------------------------*/
#comments {
	margin-top: 40px;
}
#comments ul {
	list-style-type: none;
}
#comments li {
	padding: 5px;
	line-height: 1.5;
}
#comments li em {
	font-style: normal;
}
#comments li span.user {
	font-weight: bold;
}
#comments li img {
	vertical-align: middle;
	margin: 0 2px;
}
#comments h3 {
	font-size: 116%;
	font-weight: bold;
	margin-top: 20px;
	padding: 5px 0 10px 28px;
}
#comments .more {
	padding: 7px;
	margin-bottom: 8px;
}
#comments .more a {
	display: block;
	outline: none;
}
ul#commentList li {
	position: relative;
}
ul#commentList li div.button-area {
	position: absolute;
	top: 4px;
	right: 3px;
}
ul#commentList li div.comment-area,
ul#commentList li div.tranLine {
	width: 345px;
}
ul#commentList li div.tranLine {
	margin-top: 5px;
}
p#commentTrans {
	text-align: right;
	font-size: 13px;
	margin-top: -25px;
	margin-right: 10px;
}
/* テキストエリア */
#commentTA {
	margin-top: 10px;
	margin-left: 5px;
	width: 410px;
	height: 50px;
	padding: 5px;
}
/* コメント各種ボタン */
#comments input#postComment {
	margin-top: 5px;
	margin-left: 5px;
	font-size: 12px;
	padding: 6px 10px 5px 10px;
}
input.delComment,
input.translate {
	font-size: 10px;
	padding: 1px 3px 1px 3px;
}
input.translate {
	margin-left: 3px;
}
#comments input#postComment,
input.delComment,
input.translate {
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	outline: none;
}
#comments input#postComment:hover,
#comments input.delComment:hover,
input.translate:hover {
	cursor: pointer;
}
/* 言語表示 */
#comments span.lang,
#main-photo span.lang {
	font-size: 10px;
	padding-left: 3px;
}
/* 翻訳ボタン disabled */
input.translate.disabled,
input.translate.disabled:hover {
	background-color: #ccc;
	cursor: default;
}


/*----------------------------------------------------
	Tooltip
----------------------------------------------------*/
/*BG color is a must for IE6*/
a.tooltip:hover {
	text-decoration: none;
}
a.tooltip span {
	display: none;
	padding: 12px;
	margin: 25px 0 0 -200px;
	width: 200px;
	font-size: 85%;
	font-weight: normal;
	line-height: 1.5;
}
a.tooltip:hover span {
	display: inline;
	position: absolute;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
a.tooltip em {
	line-height: 1.8;
	font-weight: bold;
	font-size: 110%;
}


/*----------------------------------------------------
	Sub - h3
----------------------------------------------------*/
#sub h3 {
	margin: 30px 0 10px 0;
}
#sub h3 strong {
	font-size: 116%;
}
#sub h3 strong span {
	white-space: nowrap;
}


/*----------------------------------------------------
	Sub - help
----------------------------------------------------*/
#sub .help {
	vertical-align: top;
	padding-top: 1px;
}


/*----------------------------------------------------
	About Stagram
----------------------------------------------------*/
#about-stagram {
	padding: 15px 15px 10px 15px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
#about-stagram .created {
	font-size: 10px;
	margin-bottom: 5px;
}
#about-stagram .created span {
	font-size: 9px;
}
#about-stagram .created img {
	vertical-align: middle;
}
#about-stagram .description {
	margin-top: 13px;
	margin-bottom: 5px;
	line-height: 150%;
	font-size: 93%;
}
#about-stagram .web {
	font-size: 85%;
	margin-bottom: 5px;
}


/*----------------------------------------------------
	Sub - Stagram List
----------------------------------------------------*/
#sub .stagram-list {
	margin-left: 7px;
}
#sub .stagram-list img {
	vertical-align: top;
	margin-left: -25px;
	margin-right: 5px;
}
#sub .stagram-list a {
	font-weight: bold;
	line-height: 1.5;
}
#sub .stagram-list dt {
	padding-left: 25px;
}
#sub .stagram-list dd {
	margin: 2px 0 7px 25px;
	font-size: 11px;
	line-height: 130%;
}


/*----------------------------------------------------
	Pagetop
----------------------------------------------------*/
#pagetop {
	clear: both;
	width: 100%;
	height: 18px;
	position: fixed;
	bottom: 45px;
}
#pagetop p {
	margin: 0 auto;
	width: 930px;
	height: 18px;
	position: relative;

}
#pagetop p a {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 75px;
	height: 18px;
	text-indent: -9999px;
	overflow: hidden;
}


/*----------------------------------------------------
	Button
----------------------------------------------------*/
input[type="button"]::-moz-focus-inner{
	border :0px;
}


/*----------------------------------------------------
	Ads
----------------------------------------------------*/
#ad160 {
	width: 160px;
	height: 600px;
	margin-top: 30px;
}
#ad336 {
	width: 336px;
	height: 280px;
	margin-top: 30px;
}
#ad200 {
	width: 200px;
	height: 200px;
	margin-top: 20px;
}
#ad160 p,
#ad336 p {
	padding: 20px;
}


/*----------------------------------------------------
	Stargram
----------------------------------------------------*/
#stargram {
	width: 550px;
	margin-top: 10px;
	margin-bottom: 25px;
}
#stargram img {
	vertical-align: middle;
	margin-right: 2px;
}
#stargram #add-star {
	padding: 0 2px;
}
#stargram #star-count {
	font-size: 11px;
	padding: 1px 5px 1px 10px;
}
#stargram a {
	outline: none;
	text-decoration: none;
}
/* Star info */
/*BG color is a must for IE6*/
a.star-info:hover {
	text-decoration: none;
}
a.star-info span {
	display: none;
	padding: 6px;
	margin: -33px 0 0 -20px;
/*
	width: 100px;
*/
	font-size: 11px;
	font-weight: normal;
	line-height: 1.5;
}
#stargram a.star-info span img {
	margin-right: 3px;
}
a.star-info:hover span {
	display: inline;
	position: absolute;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
a.star-info:hover span {
	filter: alpha(opacity=95);
	-moz-opacity:0.95;
	opacity:0.95;
}


/*----------------------------------------------------
	Footer
----------------------------------------------------*/
footer {
	height: 45px;
	width: 100%;
	position: fixed;
	bottom: 0;
	font-family: Verdana, Arial, Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;
	font-size: 9px;
}
footer .content {
	width: 930px;
	margin: 0 auto;
	text-align: left;
}
footer .title,
footer .generated {
	float: left;
	padding-top: 14px;
}
footer .title {
	font-weight: bold;
	font-size: 14px;
}
footer .title a,
footer .title a:link,
footer .title a:visited {
	text-decoration: none;
}
footer .title a:hover,
footer .title a:active {
	text-decoration: none;
}
footer .generated {
	padding-left: 5px;
	padding-top: 17px;
}
footer .generated a,
footer .generated a:link,
footer .generated a:hover,
footer .generated a:active {
	text-decoration: none;
}
footer .copyright {
	float: right;
	padding-top: 17px;
}
footer .copyright a,
footer .copyright a:link,
footer .copyright a:hover,
footer .copyright a:active {
	text-decoration: none;
}
footer .generated a:hover,
footer .generated a:active,
footer .copyright a:hover,
footer .copyright a:active {
	text-decoration: none;
	border-bottom: none;
}