.left {float: left; margin-right: -344px;}
.left .left_in {width: 300px; margin: -20px 0 0 0;}
.left .ad h2{padding: 0 0 2px 15px; position: relative; font-weight: normal; font-size: 11px; color: #999999; text-transform: uppercase;}
.left .ad h2:before{content: ""; position: absolute; top: 5px; left: 2px; width: 0; height: 0;border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #999999;}
.left .ad{height: 325px;}
.left .scroll {display: block; height: 588px; z-index:1000; display: relative;}

.right {float: right; width: 100%;}
.right .right_in {margin: 0 0 0 344px;}
.right .nav {padding: 15px 0; margin: -35px 0 15px 0; border-bottom: 1px solid #eeeeee;}
.right .nav a {text-decoration: underline; color: #3878bb;}
.right .nav a:hover {color: #cb2930;}

.title  {position: relative; border-bottom: 1px solid #eeeeee; padding: 0 130px 0 0;}
.title h1 {font-size: 32px; line-height: 1.2; font-weight: normal; padding: 15px 0 5px 0;}
.title h1 span{display: none;}
.title h2 {font-size: 16px; font-weight: bold; padding: 0 0 15px 0;}
.title h2 a{color: #cb2930;}
.title h2 a:hover{color: #bb232a;}

.title .rating{display: block; position: absolute; top: 50%; margin: -20px 0 0 0; right: 10px;}
.title .rating p {display: block;}
.title .rating p.rat {cursor: pointer; width: 110px; background: url('../images/stars_grey_large.svg') 0 0 no-repeat; overflow: hidden;}
.title .rating p.rat span {display: block; height: 20px; background: url('../images/stars_large.svg') 0 0 no-repeat; text-indent: -999px; white-space: nowrap; overflow:hidden;}
.title .rating p.rat:hover span {background-position: 0 bottom;}
.title .rating p.rat.clicked span {background-position: 0 0;}
.title .rating p.count {text-align: center; padding: 5px 0 0 0; color: #666666; font-size: 12px;}
.title .rating p.count em{font-style: normal;}

.options {display: block; padding: 5px 0 25px 0; width: 300px;}
.options ul {display: block; list-style: none;}
.options ul li {display: block; font-size: 14px; border: 1px solid #cacaca; box-shadow:inset 0 -15px 15px 0 rgba(0,0,0,0.05); margin: 0 0 5px 0; border-radius: 5px; overflow: hidden;}
.options ul li a:hover {box-shadow:inset 0 -15px 15px 0 rgba(0,0,0,0.04);}
.options ul li a:active{background-color: #eeeeee; box-shadow:inset 2px 2px 5px 0 rgba(0,0,0,0.2);}

.options .scroller {position: relative; padding: 8px 80px 8px 44px; background: url('../images/autoscroll.svg') 17px center no-repeat;}
.options .scroller a{position: absolute; display: inline-block; width: 38px; height: 38px; line-height: 38px; font-size: 24px; color: #333333; text-align: center; font-weight: bold; border-left: 1px solid #cacaca;}
.options .scroller a:hover{color: #000000;}
.options .scroller a.plus{top: 0; right: 0; bottom: 0;}
.options .scroller a.minus{top: 0; right: 38px; bottom: 0;}
.options .scroller span{display: inline-block;}
.options .scroller span.val{position: absolute; top: 10px; right: 90px; font-size: 12px; font-weight: bold; color: #cb2930;}
.options .scroller a.disable{color: #cccccc; pointer-events: none; cursor: default;}
.options .scroller.off span.val{color: #cccccc;}
.options .trans {position: relative; padding: 8px 80px 8px 44px; background: url('../images/note.svg') 16px center no-repeat;}
.options .trans a{position: absolute; display: inline-block; width: 38px; height: 38px; line-height: 38px; font-size: 16px; color: #333333; text-align: center; font-weight: bold; border-left: 1px solid #cacaca;}
.options .trans a:hover{color: #000000; font-weight: bold;}
.options .trans a.up{top: 0; right: 0; bottom: 0; background: url('../images/up.svg') center center no-repeat;}
.options .trans a.down{top: 0; right: 38px; bottom: 0; background: url('../images/down.svg') center center no-repeat;}
.options .trans a.up.disable{background-image: url('../images/up_disable.svg');}
.options .trans a.down.disable{background-image: url('../images/down_disable.svg');}
.options .trans a.disable{pointer-events: none; cursor: default;}
.options .trans span{display: inline-block;}
.options .trans span.capt{width: 100px;}
.options .trans span.val{position: absolute; top: 10px; right: 90px; font-size: 12px; font-weight: bold; color: #cb2930;}
.options .trans.off span.val{color: #cccccc;}
.options .showchords {background: url('../images/showchords.svg') 14px center no-repeat; position: relative; display: block;padding: 8px 15px 8px 44px;}
.options .showchords a{background: url('../images/no.svg') center center no-repeat; position: absolute; right: 0; top: 0; display: inline-block; width: 76px; height: 38px; line-height: 38px; border-left: 1px solid #cacaca;}
.options .showchords a.active{background: url('../images/check.svg') center center no-repeat;}
.options .showchords a:active{background-color: #eeeeee;}
.options .print a {background: url('../images/print.svg') 14px center no-repeat; position: relative; display: block;padding: 8px 15px 8px 44px;}
.options .tuner a {background: url('../images/tunerico.svg') 13px center no-repeat; position: relative; display: block;padding: 8px 15px 8px 44px;}
.options .tuner a span {margin: 0 0 0 10px; color: #cb2930; font-size: 12px; font-weight: bold;}
.options .share {border: 1px solid #306aa7;}
.options .share a {background: url('../images/fb.svg') 17px center no-repeat #3878bb; position: relative; display: block;padding: 8px 15px 8px 44px; color: #ffffff; box-shadow:inset 0 -15px 15px 0 rgba(0,0,0,0.2);}
.options .share a:hover {box-shadow:inset 0 -15px 15px 0 rgba(0,0,0,0.27);}
.options .share a:active{background: url('../images/fb.svg') 17px center no-repeat #29487d; box-shadow:inset 2px 2px 5px 0 rgba(0,0,0,0.5);}

.author {padding: 15px 0 0 0; font-size: 12px;}
.author span{display: inline-block;}
.author span.capt{padding: 5px 10px 5px 0;}
.author span.name{background-color: #ecf3fc; padding: 5px 12px; border-radius: 5px; font-weight: bold;}

.chords {float: right; width: 22%;}
svg.chord {width: 90px; height: auto; max-width: 100%;}
svg.chord .grid{stroke: black; stroke-linecap: round;}
svg.chord .labels{fill: white;}
svg.chord .text{font-family: Arial, sans-serif;}
svg.chord .title{font-size:150%;}

.chordbox {text-align: center; padding: 0 0 10px 0;}
.chordbox a {display: block;}
.chordbox a:hover {color: #000000;}
.chordbox:nth-child(odd) {float: left; width: 50%; clear: both;}
.chordbox:nth-child(even) {float: right; width: 50%;}

.content .text {line-height: 1.65;  margin: 25px 0 35px 0; white-space: pre-line;}
.content .text.chordpad {padding: 0 24% 0 0;}
.content .text h3 {display: none;}
.content .text.plaintext {display: none;}
.content .text span {position: relative; cursor: help; display: inline-block; line-height: 1; padding: 0 1px 2px 1px; margin: 0 2px 9px 2px; vertical-align: bottom; font-weight: bold; font-size: 17px; color: #cb2930;}
.content .text span:hover {color: #bb232a;}
.content .text p.taby {color: #666666; background-color: #f9f9f9; font-family: "Lucida Console", Monaco, monospace; padding: 10px 10px 10px 25px; border-radius: 5px; line-height: 1.2; white-space: pre; border-left: 5px solid #eeeeee; transition: color 0.5s ease;}
.content .text p.taby b{font-weight: normal; text-align: center; background-color: #f9f9f9; border-radius: 5px; color: #cb2930; margin: 0 -1px; padding: 0 1px;}
.content .lyrics {line-height: 1.8; margin: 25px 0 35px 0; white-space: pre-line; display: none;}

.popchord {position: absolute; bottom: 31px; border-radius: 5px; width: 80px; left: 50%; transform: translateX(-50%); height: 100px; text-align: center; background-color: #ffffff; border: 1px solid #bbbbbb; box-shadow: 0 0 6px 0 #cccccc;}
.popchord em {border: 6px solid transparent; border-top: 6px solid #000; border-bottom: none; bottom: -6px; left: 34px; display: block; position: absolute;}
.popchord svg.chord {width: 70px;}
.popchord b {display: block; text-align: center; font-style: normal; padding: 30px 0 0 0; line-height: 1.5; font-size: 13px; font-weight: normal; color: #444444;}

@media screen and (max-width: 1180px) {
.left {float: none; margin-right: 0;}
.left .left_in {width: auto; margin: 20px 0 0 0;}
.right {float: none;}
.right .right_in {margin: 0;}
.scroll{position: static !important;}
.options {width: auto;}
.options:before{content: ""; position: fixed; bottom: 0; left: 0; right: 0; height: 38px; background-color: #ffffff; box-shadow: 0 0 10px 0 #dddddd; z-index: 1000;}
.options .scroller{position: fixed; bottom: 0; right: 0; left: 50%; border-radius: 0; margin: 0; border-bottom: 0; border-right: 0; z-index: 1001;}
.options .trans{position: fixed; bottom: 0; left: 0; right: 50%; border-radius: 0; margin: 0; border-bottom: 0; border-left: 0; z-index: 1001;}
}
@media screen and (max-width: 790px) {
.chords {float: none; width: 100%; border-bottom: 1px solid #eeeeee; padding: 10px 0;}
.chordbox:nth-child(odd) {width: auto; clear: none;}
.chordbox:nth-child(even) {float: left; width: auto;}
.chords svg.chord {width: 70px;}
.content .text p.taby {padding: 5px 5px 5px 10px;}
.content .text.chordpad {padding: 0;}
}
@media screen and (max-width: 580px) {
.title h1 {font-size: 28px;}
.chords svg.chord {width: 50px;}
.options span.capt{visibility: hidden;}
.content .text p.taby {border-left: 2px solid #eeeeee; padding: 2px 2px 2px 5px;}
}