/* 諸行無常 是生滅法 生滅滅已 寂滅爲樂 */

div.navi {
color:#777;
background-color:#FFF;
height:46px;
line-height:46px;
width:100%;
}
div.navi span.subt {
font-size:10px;
height:10px;
line-height:10px;
display:inline-block;
color:#FFF;
width:160px;
text-align:center;
float:left;
margin-bottom:-38px;
}
div.navi span.sep {
height:28px;
border-left:solid 1px #DDD;
margin:10px 0;
float:left;
}
div.navi a {
height:46px;
line-height:46px;
width:auto;
display:inline-block;
font-size:14px;
color:#333;
float:left;
text-align:center;
overflow:hidden;
white-space:nowrap;
padding:0 20px;
}
div.navi a:hover {
background-color:#F8F8F8;
color:#288BF0;
text-decoration:none;
}
div.navi a.navi_on {
color:#000;
height:43px;
border-bottom:solid 3px #333;
font-weight:bold;
}
div.navi a.subl {
height:38px;
line-height:38px;
margin-top:10px;
}
div.navi a.sub_navi_on {
color:#000;
height:35px;
border-bottom:solid 3px #333;
font-weight:bold;
}
div.navi a.about {
float:right;
width:70px;
padding:0;
}
div.navi a.about i {
display:inline-block;
border-radius:50%;
width:20px;
height:20px;
text-align:center;
background-color:#888;
color:#EEE;
line-height:20px;
}
div.navi a.about:hover i {
background-color:#000;
color:#FFF;
}
div.navi span.exb {
color:#333;
font-size:10px;
margin-left:3px;
}
@media screen and (max-width:900px) {
div.navi a {
font-size:13px;
padding:0 15px;
}
div.navi span.subt {
width:140px;
}
div.navi a.about {
width:60px;
}
}
@media screen and (max-width:700px) {
div.navi a {
font-size:12px;
padding:0 10px;
}
div.navi span.subt {
width:100px;
}
div.navi a.about {
width:50px;
}
}
@media screen and (max-width:400px) {
div.navi a {
font-size:10px;
padding:0 5px;
}
div.navi span.subt {
width:80px;
}
div.navi a.about {
width:40px;
}
}
div.navi span.nlink {
float:left;
}
p.pagenavi {
text-align:center;
padding:1.5vh 0;
}
p.pagenavi span.nopage {
color:#CCC;
margin:0 2em;
}
p.pagenavi a {
margin:0 2em;
}
.opt_form {
display:inline-block;
color:#888;
height:28px;
line-height:28px;
margin:0 10px 0 0;
}
.opt_form h3 {
color:#555;
margin-right:4px;
display:inline-block;
font-size:12px;
}
.opt_form em {
display:inline-block;
color:#FFF;
height:28px;
line-height:28px;
background-color:#444;
padding:0 10px;
min-width:60px;
text-align:center;
font-size:14px;
}
.opt_form a {
color:#444;
background-color:#EEE;
display:inline-block;
height:28px;
line-height:28px;
padding:0 10px;
min-width:60px;
text-align:center;
font-size:14px;
}
.opt_form a:hover {
color:#288BF0;
background-color:#DDD;
text-decoration:none;
}
.opt_form i {
font-style:normal;
display:inline-block;
height:11px;
border-right:1px dotted #888;
margin:0 8px;
vertical-align:middle;
}
#searchform {
display:inline-block;
color:#666;
border-radius:15px;
background-color:#EEE;
padding:3px 15px;
}
#searchform select {
border:1px solid #CCC;
border-radius:3px;
padding:3px;
}
#searchform input[type="text"] {
border:1px solid #CCC;
border-radius:3px;
padding:4px;
}
div.user {
padding:10px;
}
div.user img.uicon {
border:0;
width:48px;
height:48px;
border-radius:50%;
float:left;
}
div.user div.ucont {
margin-left:60px;
}
div.tweet {
padding:12px 10px;
}
div.tweet img.ticon {
border:0;
width:48px;
height:48px;
border-radius:50%;
}
div.tweet div.icon {
width:80px;
text-align:center;
float:left;
}
div.tweet div.tcont {
margin-left:90px;
}
div.tweet div.tstat {
margin-top:8px;
font-size:13px;
}
div.tweet p.rted {
}
div.tweet p.rted i {
width:14px;
height:12px;
display:inline-block;
margin-right:2px;
vertical-align:middle;
}
div.tweet p.rted svg {
width:14px;
height:12px;
vertical-align:top;
fill:#00BA7C;
}
div.tweet p.iined {
margin-top:4px;
}
div.tweet p.iined i {
width:14px;
height:12px;
display:inline-block;
margin-right:1px;
vertical-align:middle;
}
div.tweet p.iined svg {
width:10px;
height:10px;
padding:1px 2px;
vertical-align:top;
fill:#F91880;
}
div.tweet span.stats_unit {
font-size:10px;
margin-left:1px;
}
@media screen and (max-width:500px) {
div.tweet div.tstat {
margin-top:6px;
font-size:12px;
}
}
@media screen and (max-width:800px) {
div.tweet img.ticon {
width:44px;
height:44px;
}
div.tweet div.icon {
width:75px;
}
div.tweet div.tcont {
margin-left:83px;
}
}
@media screen and (max-width:500px) {
div.tweet img.ticon {
width:40px;
height:40px;
}
div.tweet div.icon {
width:70px;
}
div.tweet div.tcont {
margin-left:77px;
}
}
div.tweet p.tbody {
margin-right:2vw;
}
div.tweet div.tintent {
width:130px;
float:right;
opacity:0;
transition:opacity 0.1s;
}
div.tweet div.tintent a {
float:right;
width:18px;
height:18px;
padding:5px;
display:inline-block;
border-radius:50%;
margin-top:-10px;
}
div.tweet div.tintent a i {
vertical-align:top;
width:18px;
height:18px;
}
div.tweet div.tintent a svg {
width:14px;
height:14px;
padding:2px;
fill:#888;
}
div.tweet div.tintent a:hover {
background-color:rgba(0,0,0,0.05);
}
div.tweet div.tintent a:active {
background-color:rgba(0,0,0,0.1);
}
div.tweet div.tintent a.reply {
}
div.tweet div.tintent a.reply i {
}
div.tweet div.tintent a.reply:hover svg {
fill:#1D9BF0;
}
div.tweet div.tintent a.fav {
margin-left:3px;
}
div.tweet div.tintent a.fav i {
}
div.tweet div.tintent a.fav:hover svg {
fill:#F91880;
}
div.tweet div.tintent a.retweet {
margin-left:3px;
}
div.tweet div.tintent a.retweet svg {
width:16px;
height:16px;
padding:1px;
}
div.tweet div.tintent a.retweet:hover svg {
fill:#00BA7C;
}
div.tweet div.tintent a.gotwitter {
margin-left:3px;
}
div.tweet div.tintent a.gotwitter i {
}
div.tweet div.tintent a.gotwitter:hover svg {
fill:#1D9BF0;
}
@media screen and (max-width:600px) {
div.tweet div.tintent {
width:120px;
}
div.tweet div.tintent a {
width:18px;
height:18px;
padding:4px;
}
div.tweet div.tintent a.fav {
margin-left:2px;
}
div.tweet div.tintent a.retweet {
margin-left:2px;
}
div.tweet div.tintent a.gotwitter {
margin-left:2px;
}
}
@media screen and (max-width:400px) {
div.tweet div.tintent {
width:110px;
}
div.tweet div.tintent a {
width:18px;
height:18px;
padding:3px;
}
div.tweet div.tintent a.fav {
margin-left:1px;
}
div.tweet div.tintent a.retweet {
margin-left:1px;
}
div.tweet div.tintent a.gotwitter {
margin-left:1px;
}
}
div.tweet:hover div.tintent {
opacity:1;
}
div.tweet a.photo {
max-height:150px;
display:inline-block;
margin-right:3px;
margin-bottom:3px;
}
div.tweet a.photo img {
max-width:600px;
max-height:150px;
border:0;
}

div.tweet a.video {
max-height:150px;
display:inline-block;
margin-right:3px;
margin-bottom:3px;
position:relative;
}
div.tweet a.video img {
max-width:600px;
max-height:150px;
border:0;
}
div.tweet a.video span.movieplay {
box-sizing:border-box;
display:inline-block;
border-radius:50%;
width:50px;
height:50px;
opacity:0.8;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
position:absolute;
background:#1D9BF0 url(../../i/playmovie.svg) no-repeat center center;
background-size:cover;
z-index:2;
}
div.tweet a.video:hover span.movieplay {
opacity:1;
}
div.tweet a.video_hovered span.movieplay {
opacity:1;
}
div.tweet a.floatimg {
float:left;
margin-right:8px;
}
div.tweet a.floatimg img {
max-width:250px;
}
div.tweet p.blockimg150,div.tweet p.blockimg200,div.tweet p.blockimg250,div.tweet p.blockimg300 {
display:none;
}
div.tweet blockquote a.photo img,div.tweet blockquote a.video img {
max-width:500px;
}
@media screen and (max-width:800px) {
div.tweet a.floatimg300 {
display:none;
}
div.tweet p.blockimg300 {
display:block;
}
div.tweet a.photo img,div.tweet a.video img {
max-width:500px;
}
div.tweet a.floatimg img {
max-width:200px;
}
div.tweet blockquote a.photo img,div.tweet blockquote a.video img {
max-width:400px;
max-height:130px;
}
div.tweet blockquote a.floatimg img {
max-width:180px;
max-height:130px;
}
}
@media screen and (max-width:600px) {
div.tweet a.floatimg250 {
display:none;
}
div.tweet p.blockimg250 {
display:block;
}
div.tweet a.photo img,div.tweet a.video img {
max-width:400px;
max-height:140px;
}
div.tweet a.floatimg img {
max-width:160px;
max-height:140px;
}
div.tweet blockquote a.photo img,div.tweet blockquote a.video img {
max-width:320px;
max-height:120px;
}
div.tweet blockquote a.floatimg img {
max-width:150px;
max-height:120px;
}
}
#homecont div.tweet a.floatimg300 {
display:none;
}
#homecont div.tweet p.blockimg300 {
display:block;
}
#homecont div.tweet a.floatimg250 {
display:none;
}
#homecont div.tweet p.blockimg250 {
display:block;
}
#homecont div.tweet a.photo img,#homecont div.tweet a.video img {
max-width:400px;
max-height:140px;
}
#homecont div.tweet a.floatimg img {
max-width:160px;
max-height:140px;
}
#homecont div.tweet blockquote a.photo img,#homecont div.tweet blockquote a.video img {
max-width:320px;
max-height:120px;
}
#homecont div.tweet blockquote a.floatimg img {
max-width:150px;
max-height:120px;
}
@media screen and (max-width:500px) {
div.tweet a.floatimg200 {
display:none;
}
div.tweet p.blockimg200 {
display:block;
}
div.tweet a.photo img,div.tweet a.video img {
max-width:300px !important;
max-height:120px !important;
}
div.tweet a.floatimg img {
max-width:120px !important;
max-height:120px !important;
}
div.tweet blockquote a.photo img,div.tweet blockquote a.video img {
max-width:250px !important;
max-height:100px !important;
}
div.tweet blockquote a.floatimg img {
max-width:100px !important;
max-height:100px !important;
}
}
@media screen and (max-width:400px) {
div.tweet a.floatimg150 {
display:none;
}
div.tweet p.blockimg150 {
display:block;
}
div.tweet a.photo img,div.tweet a.video img {
max-width:200px !important;
max-height:100px !important;
}
div.tweet a.floatimg img {
max-width:100px !important;
max-height:100px !important;
}
div.tweet blockquote a.photo img,div.tweet blockquote a.video img {
max-width:180px !important;
max-height:80px !important;
}
div.tweet blockquote a.floatimg img {
max-width:80px !important;
max-height:80px !important;
}
}
div.tweet p.tname {
line-height:1.2;
}
div.tweet span.rank {
float:left;
display:inline-block;
width:3em;
margin-left:-1em;
margin-right:-2em;
margin-top:2px;
text-align:center;
font-size:11px;
color:#999;
}
div.tweet span.rank span {
color:rgba(0,0,0,0.9);
width:20px;
height:20px;
line-height:20px;
text-align:center;
display:inline-block;
margin-top:-4px;
}
div.tweet span.rank span.rank_1 {
background:url(../../i/rank/rank1.png) no-repeat center center;
background-size:cover;
}
div.tweet span.rank span.rank_2 {
background:url(../../i/rank/rank2.png) no-repeat center center;
background-size:cover;
}
div.tweet span.rank span.rank_3 {
background:url(../../i/rank/rank3.png) no-repeat center center;
background-size:cover;
}
div.tweet span.dspace {
margin:0 2px;
color:#CCC;
}
div.tweet blockquote {
border:1px solid #EEE;
background-color:#FAFAFA;
margin-top:10px;
color:#444;
padding:5px 5px 5px 35px;
border-radius:3px;
position:relative;
font-size:12px;
min-height:30px;
}
div.tweet blockquote i.quoteimg {
position:absolute;
top:3px;
left:6px;
width:20px;
height:20px;
}
div.tweet blockquote i.quoteimg svg {
width:20px;
height:20px;
fill:#AAA;
}

img.i16 {
border:0;
width:16px;
height:16px;
border-radius:50%;
vertical-align:middle;
margin-right:3px;
}

i.verifiedimg {
width:15px;
height:15px;
margin-left:2px;
vertical-align:middle;
}
i.verifiedimg svg {
width:15px;
height:15px;
fill:#1D9BF0;
}



i.imgnavi_prev {
display:inline-block;
border-right:4px solid rgba(255,255,255,0);
border-bottom:4px solid rgba(255,255,255,0);
border-radius:1px;
height:7px;
transform:rotate(135deg);
width:7px;
margin-left:3px;
}
i.imgnavi_next {
display:inline-block;
border-right:4px solid rgba(255,255,255,0);
border-bottom:4px solid rgba(255,255,255,0);
border-radius:1px;
height:7px;
transform:rotate(-45deg);
width:7px;
margin-right:3px;
}
#imagebox {
position:relative;
}
#imagebox:hover i.imgnavi_prev {
border-color:rgba(255,255,255,0.6);
}
#imagebox:hover i.imgnavi_next {
border-color:rgba(255,255,255,0.6);
}
#imagebox:hover div.imgnavi {
background-color:rgba(0,0,0,0.2);
}
#imagebox span.navi {
background:transparent;
line-height:50px;
height:50px;
border-radius:25px;
display:inline-block;
width:50px;
text-align:center;
}
#imagebox:hover span.navi {
background-color:rgba(0,0,0,0.3);
}
div.imgnavi {
width:20%;
position:absolute;
background-color:rgba(0,0,0,0);
top:0;
cursor:pointer;
text-align:center;
font-size:15px;
transition:background-color 0.2s;
}
div.imgnavi:hover {
background-color:rgba(0,0,0,0.4) !important;
}
div.imgnavi:hover i.imgnavi_prev {
border-color:#FFF !important;
}
div.imgnavi:hover i.imgnavi_next {
border-color:#FFF !important;
}
div.imgnavi:hover span.navi {
background-color:rgba(0,0,0,0.5) !important;
}
#imgfoot {
background-color:#000;
color:#AAA;
height:13px;
padding:3px 6px;
}
#imgfoot span.susa,#imgfoot a {
color:#CCC;
}
#imgfoot span.susa:hover,#imgfoot a:hover {
color:#FFF;
}
#imgfoot span.susa:active,#imgfoot a:active {
color:#FFF;
}
#imgfoot_closebtn {
color:#CCC;
width:19px;
height:19px;
line-height:19px;
cursor:default;
text-align:center;
font-size:11px;
float:right;
margin:-3px -6px -3px 5px;
}
#imgfoot_closebtn:hover {background-color:#D33;color:#FFF;}
#imgfoot_closebtn:active {background-color:#A11;color:#FFF;}

div.tooltipuser {
}
div.tooltipuser .stat {
color:#AAA;
}
div.tooltipuser .stat em {
color:#FFF;
}
div.tooltipuser .date {
color:#AAA;
}
div.tooltipuser .date em {
color:#FFF;
}


#imageexpbox {
background-repeat:no-repeat;
background-size:cover;
position:fixed;
z-index:901;
}
#imageexpimg_cover {
top:0;
left:0;
cursor:pointer;
background-color:transparent;
position:fixed;
z-index:902;
}

#imageexpbox span.movieplay {
box-sizing:border-box;
display:inline-block;
border-radius:50%;
width:50px;
height:50px;
opacity:0.8;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
position:absolute;
background:#1D9BF0 url(../../i/playmovie.svg) no-repeat center center;
background-size:cover;
z-index:2;
}
i.tpb:hover span.movieplay,a.tpb:hover span.movieplay {
opacity:1;
}
#imageexpbox span.movieplay,#seektlbar_tweet div.cont span.movieplay {
opacity:1;
}
.youtube span.movieplay {
background-color:#F00 !important;
border-radius:15% !important;
}
.youtube span.moviebox-ctrl-play:hover {
background-color:#F00 !important;
}

a.pagenavi {
display:inline-block;
border-radius:5px;
padding:0 1em;
height:2.5em;
line-height:2.5em;
background-color:#EEE;
border:1px solid #DDD;
color:#333;
box-shadow:0 1px 2px rgba(0,0,0,0.1);
}
a.pagenavi:hover {
background-color:#DDD;
border-color:#CCC;
color:#000;
box-shadow:0 1px 2px rgba(0,0,0,0.2);
}

span.movie_info {
display:block;
position:absolute;
top:2px;
right:2px;
height:15px;
line-height:15px;
background:rgba(0,0,0,0.8);
font-size:11px;
padding:0 2px;
box-sizing:border-box;
color:rgba(255,255,255,0.9);
}
span.movie_stat {
left:2px;
bottom:2px;
top:unset;
right:unset;
}
span.movie_duration {
bottom:2px;
top:unset;
}
span.movie_info a {
color:rgba(255,255,255,0.85);
float:right;
}
span.movie_info a:hover {
color:rgba(255,255,255,1);
}


#movies {
display:flex;
flex-wrap:wrap;
align-content:flex-start;
justify-content:space-around;
width:100%;
}
#movies div.ch {
width:23%;
box-sizing:border-box;
margin-bottom:1vh;
}
#movies div.ch div.img {
background:url(../../i/_.gif) no-repeat center center;
background-size:cover;
position:relative;
}
#movies div.ch div.img::before {
content:"";
display:block;
padding-top:65%;
}
#movies div.ch div.img a.img_ {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
display:block;
}
#movies div.ch div.img div.info span.rted {
margin-right:1px;
}
#movies div.ch div.img div.info span.iined {
margin-right:1px;
}
@media screen and (max-width:920px) {
#movies div.ch {
width:31%;
}
}
#homecont #movies div.ch {
width:31%;
}
@media screen and (max-width:700px) {
#movies div.ch {
width:47% !important;
}
}
@media screen and (max-width:400px) {
#movies div.ch {
width:90% !important;
}
}


#trend_list {
color:#333;
margin:0 auto;
}
#trend_list td.name {
width:30vw;
max-width:380px;
}
#trend_list td.pt {
text-align:right;
}

div.homecontbox {
border-radius:3px;
background-color:#FFF;
margin-bottom:1vh;
box-shadow:0 1px 3px rgba(0,0,0,0.12);
}
div.homecontbox h2 {
border-top-left-radius:3px;
border-top-right-radius:3px;
background-color:#333;
}
div.homecontbox h2 a {
color:#FFF;
display:block;
padding:9px;
}
div.homecontbox-cont {
padding:6px;
}
div.homecontbox h2 img {
vertical-align:middle;
margin-right:3px;
border:0;
}
div.tweetline {
border-bottom:1px solid #EEE;
}

a.morebtn {
display:inline-block;
color:#666;
height:28px;
line-height:28px;
padding:0 8px 0 9px;
border:1px solid #BBB;
border-radius:15px;
margin-top:0.5em;
}
a.morebtn::after {
content:"";
display:inline-block;
border-right:2px solid #888;
border-top:2px solid #888;
border-radius:1px;
margin:0 0 0 2px;
height:7px;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
width:7px;
}

a.morebtn:visited {
color:#666;
}
a.morebtn:hover {
color:#333;
border-color:#888;
background-color:#F4F4F4;
}
a.morebtn:hover::after {
border-color:#666;
}

#homecont {
width:74%;
float:left;
}
#homecont-side {
width:25%;
margin-left:75%;
}
@media screen and (max-width:900px) {
#homecont {
width:auto;
float:unset;
}
#homecont-side {
width:auto;
margin:0;
}
}
span.trend_rank {
color:rgba(0,0,0,0.6);
width:16px;
height:16px;
line-height:16px;
border-radius:50%;
text-align:center;
display:inline-block;
font-size:12px;
background-color:#F4F4F4;
vertical-align:middle;
margin-right:0.7em;
}
span.trend_rank_1 {
background:url(../../i/rank/rank1.png) no-repeat center center;
background-size:cover;
color:rgba(0,0,0,0.9);
border-radius:unset;
}
span.trend_rank_2 {
background:url(../../i/rank/rank2.png) no-repeat center center;
background-size:cover;
color:rgba(0,0,0,0.9);
border-radius:unset;
}
span.trend_rank_3 {
background:url(../../i/rank/rank3.png) no-repeat center center;
background-size:cover;
color:rgba(0,0,0,0.9);
border-radius:unset;
}
h3.trend_title {
font-size:11px;
background-color:#F4F4F4;
border-left:3px solid #888;
padding:4px;
}
div.moreload {
background-color:#F4F4F4;
cursor:pointer;
color:#888;
height:26px;
line-height:26px;
text-align:center;
}
div.moreload:hover {
color:#288BF0;
background-color:#E8E8E8;
}
fieldset.trend {
border:1px solid #E8E8E8;
padding:8px 10px;
border-radius:3px;
}
fieldset.trend legend {
font-size:11px;
color:#333;
}

div.trend_tweets {
}
div.trend_tweets img.icon {
width:16px;
height:16px;
border-radius:50%;
border:0;
margin-right:3px;
vertical-align:middle;
}

i.headicon {
width:16px;
height:16px;
margin-right:3px;
vertical-align:middle;
}
i.headicon svg {
width:16px;
height:16px;
vertical-align:top;
fill:#FFF;
}

i.twitterimg {
width:14px;
height:14px;
margin-right:2px;
vertical-align:middle;
}
i.twitterimg svg {
width:14px;
height:14px;
fill:#1D9BF0;
}

#chlogo i {
vertical-align:middle;
margin-right:5px;
width:30px;
height:30px;
padding:3px;
}
#chlogo svg {
width:30px;
height:30px;
fill:#FFF;
}