@charset "utf-8";

@font-face {
    font-family: 'NotoSansLight';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local("Noto Sans JP"), local("NotoSansJP"),
    url(../fonts/NotoSansJP-Light.woff2) format('woff2'),
    url(../fonts/NotoSansJP-Light.woff) format('woff'),
    url(../fonts/NotoSansJP-Light.otf) format('opentype');
}
@font-face {
    font-family: 'NotoSansRegular';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("Noto Sans JP"), local("NotoSansJP"),
    url(../fonts/NotoSansJP-Regular.woff2) format('woff2'),
    url(../fonts/NotoSansJP-Regular.woff) format('woff'),
    url(../fonts/NotoSansJP-Regular.otf) format('opentype');
}
@font-face {
    font-family: 'NotoSansMedium';
    font-style: normal;
    font-weight: 500;
    src: local("Noto Sans JP"), local("NotoSansJP"),
    url(../fonts/NotoSansJP-Medium.woff2) format('woff2'),
    url(../fonts/NotoSansJP-Medium.woff) format('woff'),
    url(../fonts/NotoSansJP-Medium.otf) format('opentype');
}
@font-face {
    font-family: 'NotoSansBold';
    font-style: normal;
    font-weight: 700;
    src: local("Noto Sans JP"), local("NotoSansJP"),
    url(../fonts/NotoSansJP-Bold.woff2) format('woff2'),
    url(../fonts/NotoSansJP-Bold.woff) format('woff'),
    url(../fonts/NotoSansJP-Bold.otf) format('opentype');
}
@font-face {
    font-family: 'NotoSansBlack';
    font-style: normal;
    font-weight: 900;
    src: local("Noto Sans CJK JP"),
    url(../fonts/NotoSansJP-Black.woff2) format('woff2'),
    url(../fonts/NotoSansJP-Black.woff) format('woff'),
    url(../fonts/NotoSansJP-Black.otf) format('opentype');
}

body {
    /*font-family: Verdana,Arial,Helvetica;*/
    background-color:#ffffff;
    color:#000000;
    word-wrap: normal;
    /*    margin: 0;
        padding:0;
        color:#000000;
        text-align:center;
        font-size:100%;*/
}

/* Bootstrap fix for tables in firefox */
@-moz-document url-prefix() {
    fieldset { display: table-cell; }
}

A:link {color: #ff9204}
A:visited { color: #ff9204}
A:active {text-decoration: none; color: #424242
}
A:hover {text-decoration: none; color: #424242}

.modal-backdrop {
    /*position: fixed; //original*/
    /*position: relative; //fix for BIT static SS */
}

.modal-dialog {
    color: #000;
}

.logo {
    max-width: 100%;
    height: auto;
    max-height: 90px;
    width: auto\9; /* ie8 */

    /*	margin-top: 10px;
        margin-left: 3px;*/

    /*        font-family: Verdana,Arial,Helvetica;
            font-size:2.0em;
            font-weight: bold;
            text-align: center;
            text-decoration: none;
            color: #000000*/
}

.invert {
    filter: invert(100%);
}


.resize {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}


.blink  A:link {text-decoration: none; font-weight:bold; color: #000000}
.blink A:visited {text-decoration: none; font-weight:bold; color: #000000}
.blink A:active {text-decoration: none; font-weight:bold; color: #000000}
.blink A:hover {text-decoration: none; font-weight:bold; color: #000000}

.blink2  A:link {text-decoration: none; color: #000000}
.blink2 A:visited {text-decoration: none; color: #000000}
.blink2 A:active {text-decoration: none; color: #ff9204}
.blink2 A:hover {text-decoration: none;  color: #ff9204}

.wlink  A:link {text-decoration: none; font-weight:bold; color: #ffffff}
.wlink A:visited {text-decoration: none; font-weight:bold; color: #ffffff}
.wlink A:active {text-decoration: none; font-weight:bold; color: #ffffff}
.wlink A:hover {text-decoration: none; font-weight:bold; color: #ffffff}

.wlink2  A:link {text-decoration: none;  color: #ffffff}
.wlink2 A:visited {text-decoration: none; color: #ffffff}
.wlink2 A:active {text-decoration: none; color: #ff9204}
.wlink2 A:hover {text-decoration: none; color: #ff9204}

.tlink  A:link {text-decoration: none; font-weight:bold; color: #34b1db}
.tlink A:visited {text-decoration: none; font-weight:bold; color: #34b1db}
.tlink A:active {text-decoration: none; font-weight:bold; color: #ffffff}
.tlink A:hover {text-decoration: none; font-weight:bold; color: #ffffff}

.artlink A:link {text-decoration: none; font-weight:bold; color: #34b1db}
.artlink A:visited {text-decoration: none; font-weight:bold; color: #34b1db}
.artlink A:active {text-decoration: none; font-weight:bold; color: #8ddbf4}
.artlink A:hover {text-decoration: none; font-weight:bold; color: #8ddbf4}

.infolink A:link {text-decoration: none; font-weight:bold; color: #666666}
.infolink A:visited {text-decoration: none; font-weight:bold; color: #666666}
.infolink A:active {text-decoration: none; font-weight:bold; color: #000000}
.infolink A:hover {text-decoration: none; font-weight:bold; color: #000000}


.sublink A:link {text-decoration: none; font-weight:bold; color: #000000}
.sublink A:visited {text-decoration: none; font-weight:bold; color: #000000}
.sublink A:active {text-decoration: none; font-weight:bold; color: #666666}
.sublink A:hover {text-decoration: none; font-weight:bold; color: #666666}

.subwlink  A:link {text-decoration: none; font-weight:bold; color: #ffffff}
.subwlink A:visited {text-decoration: none; font-weight:bold; color: #ffffff}
.subwlink A:active {text-decoration: none; font-weight:bold; color: #aaaaaa}
.subwlink A:hover {text-decoration: none; font-weight:bold; color: #aaaaaa}


.blackGradient {
    background-image: linear-gradient(to bottom,#3a3838 0,#000000 100%);
    border-color: #3a3838;
}

h1 {
    font-family: Verdana,Arial,Helvetica;
    font-size:1.0em;
    font-weight:normal;
    text-align: center;
    margin-bottom: 10px;
}

h2 {
    font-family: Verdana,Arial,Helvetica;
    font-size:0.9em;
    font-weight:normal;
    text-align: center;
    margin-top: 10px;
}

h3 {
    font-family: Verdana,Arial,Helvetica;
    font-size:0.9em;
    font-weight:normal;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

hr {
    /*  border:none;
      border-top:1px dotted #000;
      color:#fff;
      background-color:#fff;
      height:1px;
      width:100%;*/

    width: 100%;
    height: 2px;
    border: none;
    border-width:0;
    color:  #DDD;
    background-color:  #EEE;
}

.lyric-image {
    border: 0;
}

.bold {
    font-family: Verdana,Arial,Helvetica;
    /*font-size:1.2em;*/
    font-weight:bold;
}

.strong {
    font-family: Verdana,Arial,Helvetica;
    font-size: 0.9em;
    font-weight:bold;
}

.large {
    font-family: Verdana,Arial,Helvetica;
    font-size:1.4em;
}

.bigger {
    font-size:1.3em;
}


.big {

    font-size:1.2em;

}

.small {
    font-size:0.9em;
}

.sort {
    font-size:0.9em;
    line-height: 30px;
}

.sortorder {
    font-size:1.0em;
}

.labels {
    position: relative; top: 10px;
}

.g-recaptcha {
    display: inline-block;
}

.grecaptcha-badge {
    display: none;
!important;
}

.center{
    font-family: Verdana,Arial,Helvetica;
    text-align: center;
}

.righttext {
    padding-right: 5px;
    text-align: right;

}
.right {
    float:right;
    padding-right: 5px;
    text-align: right;

}

.left {
    float:left;
    padding-left: 5px;
    text-align: left;

}
.vtopright {
    padding-right: 5px;
    text-align: right;

}

.vtopleft {
    float: left;
    text-align: left;
}

.fineprint { width:100%; font-size:0.8em;   }

.bbg {
    background-color: #000000;
}

.wbg {
    background-color: #ffffff;
}


.bltext {
    color: #000000;
}

.wtext {
    color: #ffffff;
}

.white-background {
    background: white;
}
.grey-background {
    background: #c1c1c1;
}

.description {

}

.favorites {

}

.titlelink {
    padding-right: 15px;
}

.infotooltip {
    float:right;
    padding: 4px 10px 0 10px;
    text-align: right;
    font-size: 1.4em;
    z-index: 1000;
    position: relative; right: 5px; top: 5px;
}

.scrollable-menu {
    height: auto;
    max-height: 400px;
    overflow-x: hidden;
}

.breadcrumbs {
    font-size: 1.0em;
    margin-left: 5px;
    margin-bottom: 10px;
    line-height: 25px;
}

.breadcrumblink {
    padding-right: 5px;
    padding-bottom: 5px;
}

.navbar {
    margin-bottom: 10px;
}

.topvideo {
    max-width: 500px;
    text-align: center;
    margin-top: 5px;
    margin-right: auto;
    margin-bottom: 5px;
    margin-left: auto;
}

.privacy {
    text-align: center;
    margin-bottom: 10px;
}

#pmLink {
    visibility: hidden;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: none;
}

#pmLink:hover {
    visibility: visible;
    color: grey;
}

#footer {
    max-width: 100%;
    width: auto\9; /* ie8 */
    text-align: center;
}


#toptitle {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
    text-align: center;
    margin-top: 20px;
    vertical-align: top;

}

#toptool {

}

#topbanner {
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;

}


#bottombanner {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
    text-align: center;
}

.iframead {
    overflow:hidden;
}

.dvtable {
    display: table;
    position: relative;
    width: 100%;
}

.trow  {
    display: table-row;

}

.tdata {
    display: table-cell;

}

.dataTables_length {
    margin-left: 10px;
    margin-bottom: 5px;
}

.dataTables_filter {
    margin-right: 10px;
    margin-bottom: 10px;
}

.spanstart {
    font-family: Verdana,Arial,Helvetica;
    font-size:1.0em;
    color: #000000;

    padding: 5px 10px 5px 10px;
    white-space: nowrap;
}

.spanstop {
    font-family: Verdana,Arial,Helvetica;
    font-size:1.0em;
    color: #000000;

    padding: 2px 5px 5px 2px;
    white-space: nowrap;
}


#scrlstart {
    background-color:#e3fce5;
    cursor:pointer;
    text-align: center;
    margin-bottom: 20px;
}

#scrlstart2 {
    background-color:#e3fce5;
    cursor:pointer;
    text-align: center;
    margin-bottom: 20px;
}

#scrlstartV {
    background-color:#e3fce5;
    cursor:pointer;
    text-align: center;
    display: none;
    margin-bottom: 20px;
}

#scrlstartV2 {
    background-color:#e3fce5;
    cursor:pointer;
    text-align: center;
    display: none;
    margin-bottom: 20px;
}

#scrlstop{
    /*background-color:#f8d5d5;*/
    cursor:pointer;
    text-align: center;
    display: none;
    margin-bottom: 20px;
}

#scrlstop2{
    cursor:pointer;
    text-align: center;
    display: none;
    margin-bottom: 20px;
}

#scrlstopV{
    cursor:pointer;
    text-align: center;
    margin-bottom: 20px;
}

#scrlstopV2{
    cursor:pointer;
    text-align: center;
    margin-bottom: 20px;
}

#plysng {
    width: auto;
    width: auto\9; /* ie8 */
}

#plysng2 {
    width: auto;
    width: auto\9; /* ie8 */
}

#youtb {
    /*width: 300px;*/
    /*height: 250px;*/
    z-index:90;
}

#youtb2 {
    z-index:90;
}

#youtbV {
    z-index:90;
}

#youtbV2 {
    z-index:90;
}

.ytb-responsive {
    aspect-ratio: 16 / 9;
    width: 100%;
}

#buad {
    /*margin-top: 20px;*/
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    width: 300px;
}

#buad2 {
    /*margin-top: 20px;*/
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    width: 300px;
}

#buad3 {
    /*margin-top: 20px;*/
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    width: 300px;
}

#boxunit {
    /*width: 330px;*/
    /*        width: auto;
        width: auto\9;  ie8
        vertical-align: top;*/
}

#videopage {

}


.resizetb {
    max-width: 100%;
    height: auto;
    max-height: 90px;
    width: auto\9; /* ie8 */
}

.addthisfloating {
    /*	background-color: transparent;
        display: none;
        position: absolute; top: 2px; left: 15px;
        z-index: 99;*/
}

A.ArtLnk {
    font-family: Verdana,Arial,Helvetica;
    text-decoration: none; width:100%;
    color: #000000; font-size:3.0em;
    font-weight:bold;
}

A.ArtLnk2 {
    font-family: Verdana,Arial,Helvetica;
    text-decoration: none; width:100%;
    color: #000000; font-size:1.8em;
    font-weight:bold;
}


A.SngLnk {
    text-decoration: none; width:100%;
    font-weight:bold; font-size:1.2em;
    color: #ff9204;
}

A.SngLnk2 {

    text-decoration: none; width:100%;
    font-weight:bold; font-size:1.3em;
    color: #ff9204;
}

.songlinks {
    margin-top: 10px;
    text-align: center;
}

.songartist {
    color: #ff9204;
}

.infolnk {
    font-family: Verdana,Arial,Helvetica;
    font-weight:bold; font-size:1.3em;
    text-align: center;
}

.infolnk2 {
    font-family: Verdana,Arial,Helvetica;
    font-weight:bold; font-size:1.1em;
    text-align: center;
}

.bloglnk {
    font-family: Verdana,Arial,Helvetica;
    font-weight:bold; font-size:1.3em;
    text-align: left;
}

.bloglnk2 {
    font-family: Verdana,Arial,Helvetica;
    font-weight:bold; font-size:1.3em;
    text-align: center;
}

.clear {
    clear: both;
    text-align: center;
}

.blog-thumbnail {
    width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
    margin-bottom: 20px;
}

#mcontent {
    /*	max-width: 100%;
        height: auto;
        width: auto\9;  ie8 */
    /*border: 1px solid #e5e5e5;*/
    vertical-align: top;
    margin-top: 20px;
    text-align: center;
}


.fbcomm {
    margin-top: 20px;
    margin-bottom: 20px;
}

.reply-link {
    margin-top: 10px;
    cursor: pointer;
}

.reply-form {
    margin-top: 20px;
}

.load-more {
    cursor: pointer;
    position: relative; top: -10px;
}

.comment-page {
    position: relative; top: -15px;
}

.first5-replies {

}
.restof-replies {
    display: none;
}
.hide-replies {
    margin-top: 10px;
    cursor: pointer;
}



.show-replies {
    margin-top: 10px;
    display: none;
    cursor: pointer;
}

.hide-more {
    margin-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
}

.show-less {
    margin-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    display: none;
}

.pointer {
    cursor: pointer;
}

.show-all {
    display: none;
}

.show-more {
    display: none;
}

.votes {
    position: relative; top: -10px;
}

.vote {
    width: 25px;
}

.uvote {
    position: relative; top: -4px;
    padding-left: 5px;
    width: 50px;
}
.votnum {
    position: relative; top: -3px;
    font-weight:bold;
}
.moderate {
    cursor: pointer;
    font-size:1.3em;
    height: 15px;
    width: 15px;
}

.umoderate {
    position: relative; top: 5px;
    cursor: pointer;
    font-size:1.3em;
    height: 15px;
    width: 15px;
}

.checkmark {
    position: relative; top: 8px;
    cursor: pointer;
    font-size:1.5em;
    height: 20px;
    width: 20px;
}

.cbody {
    padding-left: 20px;
}
.child-comment {

}

#ldata {
    /*	max-width: 100%;
        height: auto;
        width: auto\9;  ie8 */
    border-radius: 10px;
    border: 1px solid #DDD;
    vertical-align: top;
    margin-bottom: 20px;
    padding: 20px;
}

.lcontent {
    font-family: NotoSans,Verdana,Arial,Helvetica;
    font-size:1.0em;
    /*margin-top: 10px;*/
    vertical-align: top;
}

.romajilyrics {
    font-family: NotoSansRegular,Verdana,Arial;
    text-align: left;
    padding-left: 10px;
}
.englishlyrics {
    font-family: NotoSansRegular,Verdana,Arial;
    text-align: left;
    padding-left: 10px;
}
.kanjilyrics {
    font-family: NotoSansRegular,Verdana,Arial;
    text-align: left;
    padding-left: 10px;
}

.romajilyrics-sbs {
    font-family: NotoSansRegular,Verdana,Arial;
    text-align: left;
}
.englishlyrics-sbs {
    font-family: NotoSansRegular,Verdana,Arial;
    text-align: left;
}
.kanjilyrics-sbs {
    font-family: NotoSansRegular,Verdana,Arial;
    text-align: left;
}

#bottomta {
    width: auto;
    width: auto\9; /* ie8 */
    vertical-align: top;

}

.correct {
    margin-top: 20px;
    font-family: Verdana,Arial,Helvetica;
    font-size:1.2em;
}


#topnav {

}


#bottomnav {
    margin-top: 20px;
}


.backlnk {
    margin-top: 10px;
    font-size: 1.0em;
    text-align: center;
    vertical-align: bottom;

}

#searchresults {

}

#search_top {
    border-color: transparent;
}


.info {
    width: 80%;
    margin-left: auto;
    margin-right: auto;

}

.tipjar {
    text-align: center;
    margin-top: 10px;
}

.rounded {
    border-radius: 10px;
    border: 1px solid #DDD;
    width: auto;
    width: auto \9; /*ie8*/
    vertical-align: top;
    font-size: 1.0em;
    text-align: left;
    padding: 10px 5px 5px 10px;
    margin-bottom: 20px;
}

#artinfo {
    border-radius: 10px;
    border: 1px solid #DDD;
    width: auto;
    width: auto\9; /*ie8*/
    vertical-align: top;
    font-size: 1.0em;
    text-align: left;
    padding: 10px 10% 20px 10%;
    margin-bottom: 20px;
}

#artinfo2 {
    border-radius: 10px;
    border: 1px solid #DDD;
    width: auto;
    width: auto\9;  /* ie8  */
    vertical-align: top;
    text-align: left;
    font-size:1.0em;
    padding: 10px 10px 20px 10px;
    margin-bottom: 20px;
}

.related-songs {
    margin-top: 5px;
    margin-bottom: 10px;
}
#relatedsongs {
    border-radius: 10px;
    border: 1px solid #DDD;
    width: auto;
    width: auto\9; /*ie8*/
    vertical-align: top;
    font-size: 1.0em;
    text-align: left;
    padding-top: 20px;
    padding-left: 20px;
    margin-bottom: 20px;
}

#summary {
    border-radius: 10px;
    border: 1px solid #DDD;
    width: auto;
    width: auto\9; /*ie8*/
    vertical-align: top;
    font-size: 1.0em;
    text-align: left;
    padding: 10px 10% 20px 10%;
    margin-bottom: 20px;
}

#summary2 {
    border-radius: 10px;
    border: 1px solid #DDD;
    width: auto;
    width: auto\9;  /* ie8  */
    vertical-align: top;
    text-align: left;
    font-size:1.0em;
    padding: 10px 10px 20px 10px;
    margin-bottom: 20px;
}

.blogpost {
    border-radius: 10px;
    border: 1px solid #ff9204;
    width: auto;
    width: auto\9; /*ie8*/
    vertical-align: top;
    font-size: 1.0em;
    text-align: left;
    padding: 10px 10% 20px 10%;
    margin-bottom: 20px;
}


#snginfo {
    border-radius: 10px;
    border: 1px solid #DDD;
    width: auto;
    width: auto\9;  /* ie8  */
    vertical-align: top;
    text-align: left;
    font-size:1.0em;
    padding: 10px 10px 20px 10px;
    margin-bottom: 20px;

}


.aimobile {
    text-align: right;
}


.correct {
    font-family: Verdana,Arial,Helvetica;
    font-size: 1.1em;
}

.followdth {
    width: 195px;
    /* width: 184px; */
    position: relative;
    margin-left:auto;
    margin-right: auto;

}

.addthis_button_facebook_like {
    /*position: relative; left: 5px;*/
    /*position: relative; top: 4px;*/
}


.addthis_button_twitter_follow_native {
    /*position: relative; top: -30px;*/
    /* width: 167px; */
    overflow: hidden;
    margin-left: 0px;
    /*	margin-top: 4px;
          margin-right: 5px;*/

}

.navbar-nav > li {
    /*width: 15px;*/
    /*padding-left: 5px;*/
    /*padding-right: 5px;*/

}


.lisize {
    font-family: Verdana,Arial,Helvetica;
    font-size: 1.0em;

}

.searchbar  {
    width: 40px;
}

.search  {

}

.sbmtlyr {
    /*background-color: yellow;*/
}

#songlist {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: left;
}


.homesongs {
    text-align: left;
}

.homemessage {
    text-align: center;
    max-width:450px;
    margin-left:auto;
    margin-right: auto;
}

#coverart {
    margin-bottom: 20px;
}

#songcoverart {
    margin-top: 10px;
    text-align: center;
}

.logreg {
    text-align: center;
    font-family: Verdana,Arial,Helvetica;
    font-size: 1.1em;
}


.hide {
    display: none;
}
.round {
    border:1px solid #DDD;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.round2 {
    border:1px solid #DDD;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

a.back-to-top {
    display: none;
    width: 35px;
    height: 35px;
    text-indent: -9999px;
    position: fixed;
    z-index: 9147483647;
    right: 20px;
    bottom: 55px;
    background: #4d505b url("../images/back-to-top.png") no-repeat center;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    outline: 0;
}

a.down-to-bottom {
    display: none;
    width: 35px;
    height: 35px;
    text-indent: -9999px;
    position: fixed;
    z-index: 9147483647;
    right: 20px;
    bottom: 10px;
    background: #4d505b url("../images/down-to-bottom.png") no-repeat center;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    outline: 0;
}

#toptitle {
    word-wrap: break-word;
}

.hthumb {
    width: 200px;
    height: 300px;
}



.hsthumb {
    width: 33px;
    height: 50px;
    margin-right: 8px;
}

.blogthumb {
    width: 125px;
    margin-right: 8px;
}

.black {
    color: #000000;
    font-weight:bold;
}

.black2 {
    color: #000000;
}

.white {
    color: #ffffff;
    font-weight:bold;
}

.white2 {
    color: #ffffff;
}
.bolder {
    font-weight: 500  !important;
}

.orange {
    color: #ff9204;
}

.red {
    color: #c91616;
}

.blue {
    color: #1432e0;
}

.green {
    color: #15c63c;
}

.grey {
    color: #cccccc;
}

.new {
    background-color:#f5f32c;
}

.txtlink {
    font-family: Verdana,Arial,Helvetica;
    font-size: 18px;
    color: red;
    font-weight:bold;
    text-decoration: underline;

}

.txtlink2 {
    font-family: Verdana,Arial,Helvetica;
    font-size: 12px;
    color: red;
    font-weight:bold;
    text-decoration: underline;

}

.amzimg {
    position: relative; top: -10px;
}
.favtable {
    margin-left: 10px;
    /*padding-left: 10px;*/
}
.favbut {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    z-index: 5; /* fix for glyphicon */

    font-size:1.3em;
    padding: 4px 5px 4px 4px;
}

.btn-background {
    border:1px solid #000;
    background: white;
}


.themebut {
    border:1px solid #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    z-index: 5; /* fix for glyphicon */
    background-color:#ffffff;
    color: #000000;
    width: 85px;

    font-size:1.1em;
    padding: 4px 5px 4px 8px;
}

.themebut:hover {
    background-color: #000000;
    color: #ffffff;
}

.themeprofile {
    margin-top: 5px;
    margin-bottom: 10px;
}

.themetext {
    position: relative; left: 6px; top: -3px;
    padding-right: 6px;
}

.playbut {
    border:1px solid #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    z-index: 5; /* fix for glyphicon */
    background-color:#444444;
    color: #ffffff;
    width: 130px;
    margin-top: 10px;
    margin-bottom: 5px;

    font-size:2.0em;
    padding: 10px 0px 10px 0px;
}

.playbut:hover {
    background-color: #ff9204;
    color: #ffffff;
}

.themesize {
    width: 80px;
}

.reqbut {
    border:1px solid #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    z-index: 5; /* fix for glyphicon */
    background-color:#ffffff;
    color: #000000;
    margin-top: 10px;
    margin-bottom: 5px;

    font-size:1.1em;
    padding: 4px 5px 4px 4px;
}

.reqbut:hover {
    background-color: #000000;
    color: #ffffff;
}

.userfav {

}

.usrfav-rating {
    width: 300px;
}


#rating-1 {

}

.ratinglb{
    position: relative; top: 10px;
}

.startd {
    position: relative; top: 6px; left: -6px;
    /*cursor: pointer;*/


}

.ratebtn {
    position: relative; top: -7px; left: 6px;

}

#title-rating {
    width: 300px;
    margin-left: auto;
    margin-right: auto;

}

#song-rating {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.ui-autocomplete {
    /*width: 400px;*/
    width: 80%;
    /*overflow-y: scroll;*/
    overflow-x: hidden;
}

#tabs {

}

.addtag {
    margin-top: 15px;
    margin-bottom: 20px;
}
.tagheader {
    font-family: Verdana,Arial,Helvetica;
    font-weight:bold;
    font-size:1.2em;
    margin-bottom: 10px;
}
.tagbub {
    display: inline-block;
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;

    text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);

    padding: 5px;
    margin-top: 3px;
    margin-bottom: 3px;
    /*position: relative; top: 10px;*/
    border: 1px solid transparent;
    border-radius: 10px;

    background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
    background-image:      -o-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#b9def0));
    background-image:         linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
    background-repeat: repeat-x;
    border-color: #9acfea;
}

/* bootstrap override*/
.songlistback a{
    color: #f7f7d9 !important;
    background-color: #f7f7d9 !important;
}

.faded {
    opacity: 40%;
}

.normalop {
    opacity: 100%;
}

#tab1title {
    padding:12px;
}
#tab2title {
    padding:12px;
}
#tab3title {
    padding:12px;
    /*display: none;*/
}
#videotab1title {
    padding:12px;
}
#videotab2title {
    padding:12px;
}

.videolink {
    margin-bottom:10px;
}

#tab1 {

}
#tab2 {

}
#tab3 {

    /*word-wrap: break-word;*/
    /*display: none;*/
}


#lfcredits {

    margin-top: 15px;
    margin-bottom: 5px;
    font-size:0.7em;
}


.source {
    font-size: 0.8em;
}

.wordwrap {
    white-space: pre-wrap;      /* CSS3 */
    white-space: -moz-pre-wrap; /* Firefox */
    white-space: -pre-wrap;     /* Opera <7 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    word-wrap: break-word;      /* IE */
    word-break: break-all;
}

.wordwrap2 {
    white-space: pre-wrap;      /* CSS3 */
    white-space: -moz-pre-wrap; /* Firefox */
    white-space: -pre-wrap;     /* Opera <7 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    word-wrap: break-word;      /* IE */
}


rt {
    font-size: 0.8em;
    color: #ff9204
}

@media screen and (max-width:450px){
    #search_top {
        position: relative; top: -10px;
        width: 85%;
    }

    .hthumb {
        width: 80px;
        height: 120px;
    }
}

@media screen and (min-width:451px)  and (max-width:510px){
    .hthumb {
        width: 90px;
        height: 135px;
    }
}

@media screen and (min-width:511px) and (max-width:767px){

    .hthumb {
        width: 110px;
        height: 165px;
    }
}

@media screen and (min-width:768px) and (max-width:979px){
    .hthumb {
        width: 130px;
        height: 195px;
    }
}

@media screen and (min-width:980px)  and (max-width:1280px){
    .hthumb {
        width: 170px;
        height: 255px;
    }
}

@media screen and (min-width:1281px)  and (max-width:1449px){
    .hthumb {
        width: 220px;
        height: 330px;
    }
}

@media screen and (min-width:1450px) and (max-width:1880px){
    .hthumb {
        width: 260px;
        height: 390px;
    }
}


@media screen and (min-width:1881px){
    .hthumb {
        width: 300px;
        height: 450px;
    }
}

@media screen and (min-width:450px) and (max-width:767px){
    #search_top {
        position: relative; top: -10px;
        width: 90%;
    }

}

@media screen and (max-width:991px){
    #scrlstart{
        display: none;
    }

    #scrlstop{
        display: none;
    }

    #scrlstart2{
        display: none;
    }

    #scrlstop2{
        display: none;
    }
}


@media screen and (min-width:768px){
    #skyscraper2 {
        display: none;
    }

    .infolink {
        display: none;
    }
}

@media screen and (max-width:767px){

    .romajilyrics {
        font-family: NotoSansMedium,Verdana,Arial;
        font-weight: 500;
    }
    .englishlyrics {
        font-family: NotoSansMedium,Verdana,Arial;
        font-weight: 500;
    }
    .kanjilyrics {
        font-family: NotoSansMedium,Verdana,Arial;
        font-weight: 500;
    }
    .romajilyrics-sbs {
        font-family: NotoSansMedium,Verdana,Arial;
        font-weight: 500;
    }
    .englishlyrics-sbs {
        font-family: NotoSansMedium,Verdana,Arial;
        font-weight: 500;
    }
    .kanjilyrics-sbs {
        font-family: NotoSansMedium,Verdana,Arial;
        font-weight: 500;
    }

    .userfav {
        display: none;
    }

    #boxunit {
        margin: 0 auto;
        width: 100%;
    }

    #videopage {
        margin: 0 auto;
        width: 100%;
    }

    #youtb {
        margin-bottom: 20px;
    }

    #youtb2 {
        margin-bottom: 20px;
    }

    #youtbV {
        margin-bottom: 20px;
    }

    #youtbV2 {
        margin-bottom: 20px;
    }

    #skyscraper {
        display: none;
    }

    .infolink {
        display: block;
    }

    .sortorder {
        padding-left: 5px;
        padding-right: 5px;
    }
}



@media screen and (min-width:760px){

    #mcontent {
        margin-left: 20px;
    }
    #topnav {
        /*margin-right: 10px;*/
    }
    #bottomnav {
        margin-right: 10px;
    }
    .aimobile {
        display: none;
    }

    .lisize {
        font-size: 1.1em;

    }
    #ldata {
        font-size: 1.1em;
    }
    #snginfo {
        font-size: 1.1em;
    }
    #artinfo {
        font-size: 1.1em;
    }
    #artinfo2  {
        font-size: 1.1em;
    }
    #relatedsongs {
        font-size: 1.1em;
    }
    #summary {
        font-size: 1.1em;
    }
    #summary2 {
        font-size: 1.1em;
    }
}

@media screen and (min-width:768px){

    .romajilyrics {
        font-family: NotoSansRegular,Verdana,Arial;
    }
    .englishlyrics {
        font-family: NotoSansRegular,Verdana,Arial;
    }
    .kanjilyrics {
        font-family: NotoSansRegular,Verdana,Arial;
    }
    .romajilyrics-sbs {
        font-family: NotoSansRegular,Verdana,Arial;
    }
    .englishlyrics-sbs {
        font-family: NotoSansRegular,Verdana,Arial;
    }
    .kanjilyrics-sbs {
        font-family: NotoSansRegular,Verdana,Arial;
    }
}


@media screen and (min-width:850px){
    .navbar-nav > li {
        /*width: 18px;*/
        /*padding-left: 5px;*/
        /*padding-right: 5px;*/
    }

}


@media screen and (min-width:1000px){

    .navbar-nav > li {
        /*width: 23px;*/
        /*padding-left: 10px;*/
        /*padding-right: 10px;*/
    }
    .lisize {
        font-size: 1.2em;

    }
    .themebut {
        width: 90px;
    }

    #ldata {
        font-size: 1.2em;
    }
    #snginfo {
        font-size: 1.2em;
    }
    #artinfo {
        font-size: 1.2em;
    }
    #artinfo2  {
        font-size: 1.2em;
    }
    #relatedsongs {
        font-size: 1.2em;
    }
    #summary {
        font-size: 1.2em;
    }
    #summary2 {
        font-size: 1.2em;
    }

}


@media screen and (min-width:1170px){
    .navbar-nav > li {
        /*width: 30px;*/
        /*padding-left: 15px;*/
        /*padding-right: 15px;*/

    }

    /*
    #boxunit {
        width: 350px;
    }
    #scrlstart{
        width: 400px;
    }

    #scrlstart2{
        width: 400px;
    }

    #scrlstop{
        width: 400px;
    }

    #scrlstop2{
        width: 400px;
    }

    .spanstart{
        width: 400px;
    }

    .spanstop{
        width: 400px;
    }

    #youtb {
        width: 400px;
    }

    #youtb2 {
        width: 400px;
    }

    #snginfo {
        width: 350px;
    }
    #artinfo2 {
        width: 350px;
    }
    #summary2 {
        width: 350px;
    }
    */

}