html, body {
    font-family: 'Lucida Grande', Arial, 'Hiragino Kaku Gothic Pro', Meiryo, 'メイリオ', sans-serif;
    background: url(/img/background.png);
    color: #333;
    text-align:center;
    text-shadow:0 1px 0 #fff;
}
a {
    color:#733;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}

.notice {
    font-size:12px;
    color:#666;
}

.right {
    text-align:right;
}

.active {
    font-weight:bold;
}

.is_official {
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    font-size:12px;
    padding:4px;
    background:#bc543f;
    color:#fff;
    text-shadow:none;
    margin-right:1em;
}

.underline {
    text-decoration:underline;
}

.center {
    text-align:center;
}

/* This css button was generated by css-button-generator.com */
.btn {
    font-size:16px;
    font-family:Arial;
    font-weight:normal;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    border:1px solid #dcdcdc;
    padding:9px 18px;
    text-decoration:none;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    background:-ms-linear-gradient( top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    color:#777777;
    display:inline-block;
    text-shadow:1px 1px 0px #ffffff;
     -webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
     -moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
     box-shadow:inset 1px 1px 0px 0px #ffffff;
}.btn:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
    background:-ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color:#dfdfdf;
}.btn:active {
    position:relative;
    top:1px;
}

.btn-danger {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ed3434), color-stop(100%, #df2323) );
    background:-moz-linear-gradient( center top, #ed3434 5%, #df2323 100% );
    background:-ms-linear-gradient( top, #ed3434 5%, #df2323 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed3434', endColorstr='#df2323');
    background-color:#ed3434;
    color:#fff;
    text-shadow:none;
}

.btn.btn-small {
    font-size:14px;
    padding:4px 8px;
}


.input-text {
    font-size:14px;
    padding:4px 6px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
}

select {
    font-size:14px;
    padding:4px 6px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    color:#666;
    border-color:#aaa;
}

/* This css button was generated by css-button-generator.com */

#wrapper {
}

#title {
    color:#bc543f;
    font-size:20px;
    padding:0 8px;
}
#title a {
    color:#bc543f;
}

#title .title-icon {
    width:72px;
    height:64px;
    float:left;
}

#subtitle {
    padding: 0 8px;
    font-size:16px;
    font-weight:normal;
    text-align:left;
}

.user-profile {
    overflow:hidden;
}

.user-profile #title {
    text-align:left;
}

.user-header-description {
    margin:12px 0 0 20px;
    font-size:12px;
    font-weight:normal;
    text-align:left;
}

.top-link {
    text-align:right;
    margin:12px 24px 12px 4px;
    font-size:14px;
    font-weight:bold;
}

.photo {
    margin:10px auto 32px auto;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -ms-border-radius:4px;
    -o-border-radius:4px;
    border-radius:4px;
    max-width:320px;
    min-height:100px;
}
.photo img {
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    -ms-border-radius:8px;
    -o-border-radius:8px;
    border-radius:8px;
    max-width:300px;
}
.photo-link-outer {
    position:relative;
}

.vertical-middle > * {
    vertical-align:middle;
    display:inline-block;
}
.vertical-middle:before {
    content:"";
    display:inline-block;
    height:100%;
    width:0px;
    vertical-align:middle;
}

.photo-year {
    display:block;
    margin:24px auto;
    width:160px;
    height:160px;
    background:#ba3655;
    border-radius:50%;
    text-align:center;
    color:#fff;
    font-size:36px;
}

.right-angle {
    display:block;
    position:absolute;
    top:12px;
    right:20px;
    color:rgba(248, 248, 248, 0.5);
    background:rgba(248, 135, 135, 0.8);
    border:1px solid rgba(248, 135, 135, 0.9);
    width:36px;
    height:36px;
    border-radius:50%;
    cursor:pointer;
}
.right-angle > i {
    margin-left:4px;
    font-size:32px;
}
img.profile {
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -ms-border-radius:50%;
    -o-border-radius:50%;
    border-radius:50%;
}

img.emoji {
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
}

.tweet-text-u {
    border-bottom:8px solid #fff;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    width:0;
    height:0;
    margin:0 auto;
}

.tweet-text {
    position: relative;
    box-sizing:border-box;
    margin-left:10px;
    margin-right:10px;
    padding: 8px 24px 8px 8px;
    border-radius:8px;
    background:#fff;
    text-align:left;
    font-size:12px;
    color:#555;
}

.tweet-text img.emoji {
    -webkit-border-radius:0;
    -moz-border-radius:0;
    -ms-border-radius:0;
    -o-border-radius:0;
    border-radius:0;
}

.tweet-text::after {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: "FontAwesome";
  content: "\f099";
  color: #1da1f2;
}

.tweet-created-at {
    display: block;
    font-size:10px;
    color:#aaa;
    padding-top:8px;
    text-align:right;
}

.tweet-created-at a {
    color:#aaa;
}

.user-info {
    padding:12px 4px;
    text-align:left;
    overflow:hidden;
}
.user-info .profile-icon {
    width:42px;
    height:42px;
    float:left;
}
.user-info .user-name {
    width:220px;
    float:left;
    margin:0;
    padding:0;
    font-weight:normal;
    font-size:16px;
}
.user-info.ranking .user-name {
    width:180px;
}
.user-info .user-name .screen-name {
    font-size:12px;
}
.user-info .user-name .screen-name a {
    color:#777;
}

.go-to-next-page,
.random-again {
    border:1px solid #edcfc9;
    background:#faf1ef;
    padding:8px;
    margin:12px 18px;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    -ms-border-radius:6px;
    -o-border-radius:6px;
    border-radius:6px;
}
.go-to-next-page a,
.random-again a {
    display:block;
    width:90%;
    margin:0 auto;
}

.social-media-counts {
    list-style:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
.social-media-counts li {
    display:block;
    margin:18px 0 18px 36px;
    text-align:left;
}

/* users */
ul.users-list {
    list-style:none;
    margin:0;
    padding:0;
    text-align:left !important;
}
ul.users-list li {
    margin:12px 5px;
    overflow:hidden;
    position:relative;
}
ul.users-list li .profile-image {
    float:left;
    margin-right:6px;
}
ul.users-list li .profile-name {
    display:inline-block;
    padding-top:3px;
    max-width:240px;
}
ul.users-list li .screen-name {
    font-size:12px;
}
ul.users-list li .screen-name a {
    color:#777;
}
ul.users-list li .furigana {
    font-size:13px;
}
ul.users-list .tweet-count {
    font-size:12px;
    color:#888;
    position:absolute;
    right:2px;
    top:8px;
    text-align:right;
}

/* user */
.description {
    overflow:hidden;
    font-size:12px;
    text-align:center;
    margin:0 20px 8px 20px;
    padding:12px;
    background:#fcfafa;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -ms-border-radius:4px;
    -o-border-radius:4px;
    border-radius:4px;
}

.description-profile {
    text-align:center;
}
.description-profile span:after {
    content: ' / ';
}
.description-profile span.last:after {
    content: '';
}

.description-profile img.profile {
}

.profile-attrs {
    text-align:center;
}

.description-body {
    font-size:12px;
    text-align:left;
}
.description-body blockquote {
    margin:6px 12px;
}

.name-info {
    font-size:14px;
}

.stats {
    margin-right:1em;
}
.birthday {
    margin-left:1em;
}
.zodiac {
    margin-left:1em;
}

.follow-button-area {
    margin:8px;
}

.ranking-info .ranking-point {
    display:inline-block;
    width:97px;
    padding:4px 0 4px;
    margin-bottom:10px;
    font-size:16px;
    font-weight:bold;
    color:#fff;
    text-shadow:none;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
}
.ranking-info .ranking-point.fav {
    background:#f90;
}
.ranking-info .ranking-point.rt {
    background:#5f9828;
}
.ranking-info .ranking-point.total{
    background:#09c;
}

.posr {
    position:relative;
}

.rank {
    position:absolute;
    top:12px;
    right:6px;
    width:30px;
    height:18px;
    background:#cb7463;
    opacity:0.6;
    text-align:center;
    color:#fff;
    text-shadow:none;
    padding:8px 2px;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -ms-border-radius:50%;
    -o-border-radius:50%;
    border-radius:50%;
}

.menu {
    display:block;
}
.menu-en {
    font-size:12px;
}

.footer-links {
    padding:18px 0;
}
.footer-links a {
    margin:6px;
    font-size:13px;
}

.section-header {
    font-size:16px;
}
.section-header.left {
    text-align:left;
}
.section-body {
    text-align:left;
    font-size:14px;
}

.birthday-members {
    background:#fff;
    margin:16px 16px 6px 16px;
    padding:12px;
    overflow:hidden;
    border-radius:8px;
    text-align:center;
}
h3.birthday-header {
    margin:0 auto 16px auto;
    padding:0;
    font-size:16px;
    font-weight:bold;
    color:#333;
}
.birthday-member {
    display:inline-block;
    width:96px;
    height:108px;
    text-align:center;
    font-size:14px;
}
.birthday-notice {
    margin-right:18px;
    font-size:11px;
    color:#aaa;
    text-align:right;
}
.birthday-member-not-found {
    font-size:12px;
    color:#666;
}

.anniversary-header {
    color:#ba3655;
    margin:12px 0 6px 0;
    padding:12px 0;
    border-top:1px solid #ededed;
    border-bottom:1px solid #ededed;
    font-size:18px;
}
.anniversary-header a {
    color:#ba3655;
    text-decoration:underline;
}

.go-to-birthday-list {
    margin-top:18px;
    font-size:12px;
}

.congrats-birthday {
    margin:18px 0 24px 0;
    font-size:14px;
    font-weight:bold;
    color:#cf8070;
    text-align:center;
}
.congrats-tweet {
    clear:both;
    padding-top:12px;
    margin-bottom:12px;
    text-align:center;
    font-size:14px;
}
.congrats-tweet a {
    display:inline-block;
    padding:4px 8px;
    background-color:#6694f4;
    color:#fff;
    text-shadow:none;
    border-radius:4px;
}

.birthday-table {
    table-layout:fixed;
    border-collapse:collapse;
    margin:24px auto;
    min-width:300px;
}
.birthday-table th {
    display:none;
    border:2px solid #fff;
    background:#fff;
}
.birthday-table td {
    display:block;
    padding:4px 8px;
    text-align:left;
    border-top:1px solid #fafafa;
    border-bottom:1px solid #e9e9e9;
    min-height:60px;
}
.birthday-table td.none {
    display:none;
}
.birthday-table td.today {
    background:#feeada;
}
.birthday-table td .cell {
    padding:6px 0;
}
.birthday-table td .day {
    float:left;
    width:24px;
    font-size:18px;
    color:#666;
}
.birthday-table td .anniversary {
    float:left;
    padding:2px 6px;
    margin-bottom:2px;
    border-radius:4px;
    font-size:12px;
    background:#fff;
    color:#ba3655;
}
.birthday-table td .anniversary a {
    color:#ba3655;
    display:inline-block;
    width:100%;
    height:100%;
}
.birthday-table td .users {
    clear:both;
    padding-top:8px;
    text-align:center;
}

.month-list {
    list-style:none;
    margin:0;
    padding:0;
}
.month-list li {
    display:inline-block;
    margin:0;
    padding:0;
    width:3em;
}

/**
 * for desktop (width >= 640px)
 */
@media all and (min-width:640px) {
    #title {
        font-size:28px;
        margin-left:20px;
        padding:0;
    }
    #subtitle {
        text-align:center;
        font-size:14px;
    }

    .user-header-description {
        float:left;
        width:70%;
        margin:0 0 0 20px;
    }

    ul.users-list {
        text-align:left;
    }
    ul.users-list li {
        display:inline-block;
        text-align:center;
        width:420px;
        text-align:left !important;
    }
    ul.users-list li.user-list-right {
        float:right;
        width:420px;
    }
    ul.users-list li .profile-name {
        max-width:none;
    }
    #wrapper {
        width:1000px;
        margin:0 auto;
    }
    .row {
        overflow:hidden;
    }

    .photo {
        float:left;
        margin-left:10px;
        text-align:center;
        width:320px;
    }
    .photo.first {
    }

    .user-info .user-name {
        width:270px;
        float:left;
    }

    .menu {
        display:inline-block;
        padding:0 12px;
    }

    .description {
        text-align:left;
    }

    .description-profile {
        float:left;
        width:120px;
        height:140px;
        margin:8px 12px 8px 0;
        padding:0 6px 0 12px;
        text-align:left;
        border-right:1px solid #e7e7e7;
    }
    .description-profile span {
        display:inline-block;
        height:22px;
    }
    .description-profile span:after {
        display:none;
    }

    .description-detail {
        float:left;
        width:700px;
        min-height:120px;
    }


    .profile-attrs {
        text-align:left;
    }

    .social-media-counts li {
        display:inline;
        text-align:left;
    }

    .congrats-birthday {
        font-size:24px;
    }

    .birthday-table tr {
        min-height:100px;
    }
    .birthday-table th {
        display:table-cell;
        border:2px solid #fff;
        background:#fff;
        width:14%;
    }
    .birthday-table td {
        display:table-cell;
        border:2px solid #fff;
        height:120px;
        padding:4px 8px;
        text-align:left;
    }
    .birthday-table td.none {
        display:table-cell;
    }
    .birthday-table td.today {
        background:#feeada;
    }
    .birthday-table td .cell {
        position:relative;
        height:100%;
    }
    .birthday-table td .day {
        float:none;
        width:100%;
        height:16px;
        padding:2px;
        font-size:12px;
        color:#666;
    }
    .birthday-table td .anniversary {
        float:none;
    }
    .birthday-table td .users {
        text-align:center;
    }

    .inline-if-desktop {
        display: inline;
    }
}