/* // max herre | athen 2 | popup.css */

/* @font-face */
@font-face { font-family:'webfont1'; src:url('../fonts/webfont1.eot'); src:url('../fonts/webfont1.eot?#iefix') format('embedded-opentype'), url('../fonts/webfont1.woff2') format('woff2'), url('../fonts/webfont1.woff') format('woff'), url('../fonts/webfont1.ttf') format('truetype'), url('../fonts/webfont1.svg#webfont1') format('svg'); font-weight:normal; font-style:normal; }


/* reset etc. */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { color:inherit; margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
body, body div { line-height:1.3em; }
body, td { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
ol, ul, li { margin:0; padding:0; list-style:none; list-style-type:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
table { border-collapse:collapse; border-spacing:0; }
html { -webkit-text-size-adjust:100%; }
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin:0; }


/* basics */
html, body { }
body { line-height:1.5em; font-size:18px; font-family:Helvetica Neue, Helvetica, Arial, sans-serif; color:#eee; margin:0px; padding:20px 20px 20px 20px; margin-left:0px; margin-top:0px; margin-right:0px; margin-bottom:0px; background:#222; }
td, th { line-height:1.5em; font-size:18px; font-family:Helvetica Neue, Helvetica, Arial, sans-serif; color:#eee; }
h1, h2, h3, h4, h5, h6 { color:#fff; font-weight:normal; margin:0; padding:0; }
h1 { }
h2 { }
h3 { font-family:'webfont1', Arial, Helvetica, sans-serif; font-size:36px; line-height:1.2em; text-align:center; text-transform:uppercase; margin:10px 0 30px 0; }
h5 { font-size:14px; line-height:14px; text-transform:uppercase; }
h6 { font-size:11px; text-transform:uppercase; }
ul, li { margin:0; padding:0; list-style:none; }
td img, img { display:block; }
td { text-align:left; }
a:link, a:visited { color:#5093f2; text-decoration:none; -moz-outline-style:none; outline:none; }
a:hover, a:active { color:#fff; text-decoration:none; -moz-outline-style:none; outline:none; }


body.display .content b, body.display .content strong { color:#fff; font-size:22px; }


/* lyrics */
body.lyrics { border:1px solid #333; }
body.lyrics h3 { font-size:28px; }
.lyrics .related { margin:40px 0 0 0; padding:40px 0 0 0; border-top:1px dotted #666; }
.lyrics .related .title { margin:0 0 10px 0; }
.lyrics .related .imageborder_holder { margin:0; }


/* help, notice */
.help ul li.hl, .notice ul li.hl { font-family:'webfont1', Arial, Helvetica, sans-serif; font-size:18px; margin:10px 0 0 0; padding:10px 0 5px 0; border-top:1px dotted #666; }
.help ul li.desc, .notice ul li.desc { margin:0px 0 10px 20px; list-style:square; list-style-type:square; }


/* images */
.imageborder, .contentborder { position:relative; border:0px none; background:#000; }
a.imageborder { display:block; border:0px none; }
a.imageborder:link, a.imageborder:visited, a:link .imageborder, a:visited .imageborder { border:0px none; }
a.imageborder:hover, a.imageborder:active, a:hover .imageborder, a:active .imageborder { border:0px none; }

.imageborder_holder { margin:0 0 15px 0; position:relative; overflow:hidden; box-sizing:border-box; }
.imageborder_holder img { width:100%; height:auto !important; }
.imageborder_holder a img { box-sizing:border-box; position:relative; -webkit-transition:-webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.175), opacity 0.1s; transition:transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.175), opacity 0.1s; -webkit-transform:translateZ(0); -ms-transform:translateZ(0); transform:translateZ(0); -webkit-filter:blur(0); filter:blur(0); }
.imageborder_holder a { box-sizing:border-box; position:relative; width:100%; height:100%; display:block; }
.imageborder_holder a .icon { color:#fff; text-shadow:0px 0px 3px rgba(0,0,0,.75); background:rgba(0,0,0,0.5); width:100%; height:100%; top:0%; text-align:center; font-size:32px; display:block; filter:alpha(opacity=0); -moz-opacity:0; opacity:0; position:absolute; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; }
.imageborder_holder a .icon:before { position:absolute; width:100%; text-align:center; top:50%; left:0; margin:-30px 0 0 0; padding:0; filter:alpha(opacity=0); -moz-opacity:0; opacity:0; }
.imageborder_holder a:hover .icon, .imageborder_holder a:focus .icon { top:0%; filter:alpha(opacity=100); -moz-opacity:1; opacity:1; }
.imageborder_holder a:hover .icon:before, .imageborder_holder a:focus .icon:before { filter:alpha(opacity=100); -moz-opacity:1; opacity:1; }
.imageborder_holder a:hover img, .imageborder_holder a:focus img { }

.imageborder_ratio a { position:absolute; top:0px; right:0px; bottom:0px; left:0px; width:100%; height:100%; display:block; }
.imageborder_ratio a .imageborder { position:relative; width:100%; height:100%; box-sizing:border-box; }
.imageborder_ratio a .imageborder .display { position:relative; top:0px; right:0px; bottom:0px; left:0px; display:block; overflow:hidden; width:100%; height:100%; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; transform-style:preserve-3d; }
.imageborder_ratio a .imageborder .display img { position:relative; width:100%; top:50%; height:auto !important; -webkit-transform:translateY(-50%) translateZ(0); -ms-transform:translateY(-50%) translateZ(0); transform:translateY(-50%) translateZ(0); -webkit-filter:blur(0); filter:blur(0); }
@media screen and (-webkit-min-device-pixel-ratio:0) { /* safari 5.1-6.0 "only" override, stack->q=16348489 */ ::i-block-chrome,.imageborder_ratio a .imageborder .display img { position:absolute; top:0; bottom:0; margin:auto; -webkit-transform:translateY(0) translateZ(0); -ms-transform:translateY(0) translateZ(0); transform:translateY(0) translateZ(0); } }

.imageborder_ratio_s a .imageborder .display { background:#000; }
.imageborder_ratio_s a .imageborder .display img { max-height:100%; max-width:100%; width:auto; height:auto; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; -webkit-transform:translateY(0) translateZ(0); -ms-transform:translateY(0) translateZ(0); transform:translateY(0) translateZ(0); }

img.contained { max-height:100%; max-width:100%; width:auto; height:auto; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; }
img.fancybox { cursor:pointer; }
img.grayscale { -webkit-filter:grayscale(100%); filter:grayscale(100%); filter:gray; filter:url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale"); }


/* videos */
.videoborder { position:relative; border:1px solid #666; margin:0 0 15px 0; background:#000; }
.videoborder .display { width:100%; height:0; display:block; position:relative; padding-bottom:56.25%; background:#000; background:rgba(0,0,0,0.5); }
.videoborder .display iframe, .videoborder .display video { position:absolute; top:0; left:0; width:100%; height:100%; }
.videoborder .display .loading { position:absolute; left:50%; top:50%; margin:-25px 0 0 -25px; color:#666; }


/* misc */
.hashtag { color:#f00; letter-spacing:1px; }
.small { font-size:9px; line-height:9px; }
a.arrow_fw:link, a.arrow_fw:visited { text-align:right; background-image:url(../images/icons/arrow_fw.png); background-repeat:no-repeat; background-position:100% 0px; padding:0 40px 0 0; line-height:30px; height:30px; display:block; }
a.arrow_fw:hover, a.arrow_fw:active { background-position:100% -30px; }
#log { position:fixed; z-index:1000; left:5px; bottom:5px; background:#666; color:#fff; font-size:9px; font-family:Arial, Helvetica, sans-serif; border:1px solid #000; padding:5px; width:500px; max-height:100px; overflow:auto; }
.trackname_display { display:none; }
.show_more { color:#f09; padding:0 12px 0 0; background:url(../images/icons/icon_show_more.png) no-repeat 100% 50%; cursor:pointer; }
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
* html .clearfix { height:1%; }
.clearfix { display:block; }
.float_left { float:left; }
.float_right { float:right; }
.inline { display:inline; }
.none { display:none; }
.hidden { display:hidden; }
.anchor { width:1px; height:1px; overflow:hidden; }
object, embed, object:hover, embed:hover, object:active, embed:active { -moz-outline-style:none; outline:none; }
hr { height:0px; border-bottom:1px solid #666; border-top:none; border-right:none; border-left:none; }


/* forms.css */
input.text, input.title, textarea, .norminput { font-family:Arial, Helvetica, sans-serif; font-size:13px; width:200px; border:1px solid #666; color:#ccc; background:rgba(0,0,0,0.7); margin:2px 0px 5px 0px; padding:4px; }
select { border:1px solid #666; color:#ccc; background:rgba(0,0,0,0.7); margin:2px 0px 5px 0px; padding:4px 2px !important; }
input.text:focus, input.title:focus, textarea:focus, select:focus, .norminput:focus, .norminput:active { border:1px solid #fff; color:#fff; }
input.submit { cursor:pointer; margin:5px 0; padding:10px 40px; border:0px none; overflow-y:hidden; font-size:24px; color:#ddd; font-family:'webfont1', Arial, Helvetica, sans-serif; background:#c00; }
input.submit:hover, input.submit:focus, input.submit:active { color:#fff; background:#f00; }

a.btn { cursor:pointer; margin:5px 0; padding:5px 40px; border:0px none; height:47px; overflow-y:hidden; font-size:32px; color:#ddd; font-family:'webfont1', Arial, Helvetica, sans-serif; background:#c00; }
a.btn:hover, a.btn:focus, a.btn:active { color:#fff; background:#f00; }

input.share_url { font-family:Arial, Helvetica, sans-serif; font-size:13px; width:200px; border:1px solid #666; color:#ccc; background:rgba(0,0,0,0.7) url(../images/icons/bg_link.png) 4px center no-repeat; margin:0; padding:4px 4px 4px 24px; }
input.share_url:focus, input.share_url:active { border:1px solid #fff; color:#fff; }