html,body,h1,ul,li,button {
margin:0;
padding:0;
}
img {
border-width:0;
}
a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
/*
.timeline li:hover .date a,
.timeline li:hover .screen-name {
color:#003973;
}
*/
body {
-webkit-text-size-adjust:none;
background:#dfdfdf url('http://twistar-cc.appspot.com/img/back.gif');/* taken from http://d.hatena.ne.jp/designset/393 */
font-family:"Lucida Grande",Arial,Sans-serif;
font-size:14px;
min-height:320px;
margin:auto;
}
#site_wrapper {
max-width:520px;
background-color:#fff;
margin:5px auto 10px;
padding:0px;
border:1px solid transparent;
border-width:1px 0;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
box-shadow:3px 3px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow:3px 3px 8px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:3px 3px 8px rgba(0, 0, 0, 0.3);
position:relative;
z-index:2;
}

.iphone #site_wrapper {
box-shadow:none;
-webkit-box-shadow:none;
}

.header {
max-width:520px;
margin: 6px auto;
padding: 0 6px;
position:relative;
z-index:2;
text-align:right;
}
.header h1 {
float:left;
width: 146px;
text-align:left;
}
.iphone .header h1 {
width: 91px;
}

h1 a,
#index h1 a {
margin: 0;
padding: 0;
background: url("http://twistar-cc.appspot.com/img/twistar.png") no-repeat 0 0;
width: 146px;
height: 37px;
display:block;
text-indent:-9999em;
outline-width:0;
}
.iphone h1 a,
.iphone .header h1 a {
background-image: url("http://twistar-cc.appspot.com/img/twistar_mini.png");
width: 91px;
height: 23px;
}
.login {
margin-top: 2px;
background:#fff;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
display:inline-block;
padding: 2px 0.5em;
font-size:12px;
box-shadow:3px 3px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow:3px 3px 8px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:3px 3px 8px rgba(0, 0, 0, 0.3);
}
.iphone .login {
box-shadow:2px 2px 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.3);
}
.login img {
vertical-align:bottom;
}
.login a {
color:#333;
}
.login button {
background:#fff;
border:none;
font-size:12px;
}
.login .bird {
display:inline-block;
padding-left:20px;
height:14px;
background:url("http://twistar-cc.appspot.com/img/bird_16_blue.png") no-repeat 0 -2px;
font-weight:bold;
font-size:11px;
vertical-align:middle;
}
h2 {
margin:8px 9px 2px;
padding:0;
font-size:15px;
height:1%;
}
h2 a {
color:#333;
}
h2 img {
width:24px;
height:24px;
float:left;
margin-right:5px;
}

#index {
max-width:310px;
text-align:right;
}
#index h1 {
margin: 10px auto 10px;
padding: 0;
text-align:left;
}
#index h1 a {
margin:0 auto;
}
#index .login {
position:absolute;
top:5px;
right:12px;
}
#index.iphone .login {
position:static;
}
#desc {
margin: 20px auto 10px;
padding: 0;
font-size:12px;
text-align:center;
}
#site_footer {
margin: 10px auto;
}
#site_footer h4 {
margin: 20px auto;
padding: 0;
color: #999;
font-size: 10px;
text-align: center;
}
#site_footer h4 a {
color:#999;
}

.clearFix {
/zoom:1;
}
.clearFix:after {
content:'';
display:block;
clear:both;
height: 0;
}

#menu {
clear:both;
margin:8px 0;
padding:0 8px;
border-bottom:1px solid #72BEFF;
}
#menu li {
float:left;
margin:0 4px 0 0;
padding:0;
width:4.6em;
list-style-type: none;
font-size:13px;
line-height:1.1em;
text-align:center;
}
#menu li.recent {
width:4.5em;
}
#menu li.popular {
width:4.8em;
}
#menu li.picks {
width:4.2em;
}
#menu li.faved {
width:4.2em;
}
#menu li.favs {
width:4.2em;
}
#menu li a,
#menu li strong{
display:block;
height:14px;
border:1px solid #f0f0f0;
border-radius:3px 3px 0 0;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-moz-border-radius:3px 3px 0 0;
}
#menu li a {
margin:2px 0 0;
padding:7px 1px;
color:#666;
background-color:#f6f6f6;
border-width:1px 1px 0;
text-decoration:none;
}
/*
#menu li.faved a,
#menu li.favs a,
#menu li.starred a,
#menu li.stars a {
border-color:#fdde5a;
border-color:transparent;
}
*/
#menu li a:hover {
margin:0;
padding:8px 1px;
color:#000;
background-color:#fff;
border-color:#72beff;
text-shadow:none;
}
#menu li.faved a:hover,
#menu li.favs a:hover,
#menu li.starred a:hover,
#menu li.stars a:hover {
border-color:#fdde5a;
}

#menu li strong{
padding:8px 1px;
margin-bottom:-1px;
color:#000;
background-color:#fff;
border-color:#72beff #72beff transparent;
*border-color:#72beff #72beff #fff;
}
#menu li.faved strong,
#menu li.favs strong,
#menu li.starred strong,
#menu li.stars strong {
border-color:#fdde5a #fdde5a transparent;
*border-color:#fdde5a #fdde5a #fff;
}
#menu li a strong{
display:inline;
padding:0;
border-style:none;
background-color:transparent !important;
}


#faved #menu,
#favs #menu {
border-bottom:1px solid #FDDE5A;
}

#timeline {
clear:both;
margin:0 auto;
padding:0 0;
max-width:505px;
word-wrap:break-word;
}

/* each status */
#timeline li {
position:relative;
padding:6px 0 7px;
border-bottom:1px dotted #ccc;
list-style-type: none;
}
#timeline li:first-child {
border-top:1px dotted #ccc;
}
#timeline li:only-child {
border:none;
}
#timeline li.last-on-page {
border-bottom:1px solid #ccc;
}
.icon {
position:absolute;
top: 7px;
left: 6px;
width: 48px;
height:48px;
}
.icon a:before {
position:absolute;
top:0px;
left:0px;
width:48px;
height:48px;
background: url("http://twistar-cc.appspot.com/img/frame48.png") no-repeat 0 0;
content: "";
}
.icon img {
width:48px;
height:48px;
}
.info {
margin:0 0 0 62px;
font-size:15px;
font-family: Helvetica Neue,Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;
line-height:1.1em;
}
.iphone .info {
margin:0 0 0 60px;
}
.status {
margin:3px 4px 4px 0;
font-size:15px;
font-family: Arial,Helvetica Neue,sans-serif;
line-height:1.2;
overflow:hidden;
}
.date {
position:relative;
margin:4px 4px 4px 0;
font-size:12px;
}
.reply .date {
position:static;
}
.date a {
color:#999;
}
.date span.bird {
display:inline-block;
margin-right:4px;
width:16px;
height:13px;
text-indent: -9999px;
background-image:url("http://twistar-cc.appspot.com/img/bird_gray.png");
}
.date a,
.date img {
vertical-align:text-top;
}
.date small {
font-size:9px;
font-family:"メイリオ",Osaka,Tahoma,Verdana,Arial,sans-serif;
}
.stars {
margin:6px 4px 0 0;
font-size:12px;
color:#999;
line-height:100%;
position:relative;
}
.screen-name {
font-weight: bold;
color:#333;
}
.full-name {
font-size:12px;
color:#999;
}
.fav-action {
position:absolute;
top:-2px;
right:3px;
width:16px;
height:16px;
background: url("http://twistar-cc.appspot.com/img/stars.gif") no-repeat 0 0;
cursor:pointer;
text-decoration:none;
}
.fav-action:hover {
text-decoration:none;
}
.fav-action.fav {
background-position:-16px 0;
}
.fav-action.fav-throb {
background: url("http://twistar-cc.appspot.com/img/star-throb.gif") no-repeat 0 0;
background-size:16px 16px;
-webkit-background-size:16px 16px;
cursor:default;
}
.stars img {
width:16px;
height:16px;
vertical-align:text-bottom;
}
.stars .f img {
width:22px;
height:22px;
}
.stars .f {
margin-right:5px;
}
.stars .more {
padding:0 5px;
cursor:pointer;
}
.stars .more:hover {
text-decoration:underline;
}

.stars .faved {
position:absolute;
top:5px;
left:-68px;
width:60px;
height:22px;
display:block;
text-align:right;
}
.iphone .stars .faved {
left:-66px;
}
.stars .faved a {
padding:2px 0;
}
.stars .faved a:hover {
text-decoration:none;
}
.stars .faved span {
padding:2px 3px;
font-weight:bold;
color:#fff;
background-color:#67BBE6;
}
.r2 .faved .friend {
background-color:#54B7E8;
}
.r3 .faved .friend {
background-color:#329CD1;
}
.r5 .faved .friend {
background-color:#2276A1;
}
.faved .other {
background-color:#ddd !important;
}

#faved .stars .faved span,
#favs .stars .faved span {
background-color:#FFE373;
}
#faved .r2 .faved span,
#favs .r2 .faved span {
background-color:#E8CA54;
}
#faved .r3 .faved span,
#favs .r3 .faved span {
background-color:#D1B132;
}
#faved .r5 .faved span,
#favs .r5 .faved span {
background-color:#A18722;
}

.r5 .status {
font-weight:bold;
font-size:16px;
}
.r3 .status {
font-weight:bold;
}
.r2 .status {
font-weight:bold;
}

#pagination {
margin:4px auto 0;
}

#more {
display:block;
background:#fff url(http://twistar-cc.appspot.com/img/more.gif) repeat-x 0 0;
width:97%;
height:52px;
margin:0 auto;
padding:30px 0 0;
border:1px solid #ccc;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
vertical-align:middle;
text-align:center;
font-size:15px;
color:#666;
text-shadow:#fff 1px 1px 0px;
}
#more:hover {
background:#f5f5f5 url(http://twistar-cc.appspot.com/img/loading.gif) no-repeat 0px -100px;
text-shadow:none;
}
#more:active {
background:#fff url(http://twistar-cc.appspot.com/img/more.gif) repeat-x 0 -82px;
}
#more.loading {
background:#fff url(http://twistar-cc.appspot.com/img/loading.gif) no-repeat center center;
border-color:#eee;
}

p.thumbnail {
margin:5px;
}
p.thumbnail .loading {
display:inline-block;
border:solid 1px #ccc;
background: #fff url("http://twistar-cc.appspot.com/img/loading.gif") no-repeat center center;
width:40px;
height:40px;
}
p.thumbnail img {
max-height:240px;
max-width:240px;
border:0;
}

.reply {
background:#fff;
margin-right:4px;
padding:5px 5px 1px;
font-size:14px;
line-height:1.2;
border:1px solid #bbb;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
}
.reply .reply {
margin:0;
padding:0;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
border: none;
border-radius: none;
-webkit-border-radius: none;
-moz-border-radius: none;
}

/**
 * search box
 **************/
#search_entry {
position: relative;
margin: 20px auto 10px;
padding: 5px;
width: 200px;
background-color: #eee;
border: 1px solid #ccc;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius:5px;
text-align:center;
}
#placeholder {
display:none;
position: absolute;
top: 9px;
left: 13px;
font-size: 16px;
color:#bbb;
}
#search_box {
margin:0 auto;
padding: 2px;
width: 190px;
font-size: 16px;
}
#search_button {
text-align: center;
}
#search_button input {
font-size: 1em;
}

.wrap{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
background-color:#000;
opacity:0.8;
filter:alpha(opacity=80)
z-index:10;
}

#help_back {
position:fixed;
width:100%;
height:220px;
bottom:0;
left:0;
background-color:#000;
opacity:0.8;
filter:alpha(opacity=80);
z-index:1000;
}

#help {
color:#fff;
position:fixed;
width:100%;
bottom:0;
left:0;
z-index:1001;
}

#help_body {
width:500px;
margin:10px auto;
line-height:1.2;
}
#help_body h2 {
margin:0 0 10px 0;
text-align:center;
}
#help_body ul.left {
float:left;
width:50%;
}
#help_body ul.right {
float:right;
width:50%;
}
#help_body li {
list-style-type: none;
margin:5px 0;
}
#help_body strong{
color:#fbc728;
font-family:serif;
font-size:16px;
}

#ad_160 {
position:absolute;
top:0px;
right:-166px;
z-index:1;
}
#ad_iphone {
margin:8px auto;
}
#ad_468_60 {
margin:8px auto;
width:468px;
text-align:center;
}
#ad_468_15 {
margin:8px auto;
width:468px;
text-align:center;
}

.tipsy {
padding: 5px;
font-size: 12px;
font-weight:bold;
font-family:"Lucida Grande",sans-serif;
opacity: 0.8;
filter: alpha(opacity=80);
background-repeat: no-repeat;
background-image: url("http://twistar-cc.appspot.com/img/tipsy.gif");
}
.tipsy-inner {
padding: 5px 8px 4px 8px;
background-color: black;
color: white;
max-width: 200px;
text-align: center;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.tipsy-north { background-position: top center; }
.tipsy-south { background-position: bottom center; }
.tipsy-east { background-position: right center; }
.tipsy-west { background-position: left center; }

.jquery-notify-bar {
z-index:32765;
position:fixed;
top:0;
left:0;
width:100%;
border-bottom:2px solid rgba(0, 0, 0, 0.07);
}
.jquery-notify-bar-container {
z-index:32766;
position:relative;
}
.jquery-notify-bar-front,
.jquery-notify-bar-back {
width:100%;
padding:20px 0px;
font-size:18px;
text-align:center;
font-family: Arial, Verdana, sans-serif;
}
.jquery-notify-bar-front {
position:absolute;
top:0;
left:0;
z-index:32768;
color:#000;
cursor:pointer;
}
.jquery-notify-bar-back {
background-color:#efefef;
opacity:0.9;
filter:alpha(opacity=90);
}
.error .jquery-notify-bar-front {
color:#453C00;
}
.error .jquery-notify-bar-back {
filter:alpha(opacity=90);
background-color:#ffd;
}
.succeed .jquery-notify-bar-front {
color:#060;
}
.succeed .jquery-notify-bar-back {
filter:alpha(opacity=90);
background-color:#BBFFB6;
}

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
	h1 a,
	#index h1 a {
		background-image: url("http://twistar-cc.appspot.com/img/twistar_2x.png");
		-webkit-background-size: 146px 37px;
	}
	.iphone h1 a,
	.iphone .header h1 a {
		background-image: url("http://twistar-cc.appspot.com/img/twistar_mini_2x.png");
		-webkit-background-size: 91px 23px;
	}
	.fav-action {
		background-image: url("http://twistar-cc.appspot.com/img/stars_2x.gif");
		-webkit-background-size:32px 16px;
	}
	.date span.bird {
		background-image:url("http://twistar-cc.appspot.com/img/bird_gray_2x.png");
		-webkit-background-size:16px 13px;
	}
	.login .bird {
		background-image:url("http://twistar-cc.appspot.com/img/bird_32_blue.png");
		-webkit-background-size:16px 16px;
	}
}