body { font-family:"Segoe UI", Helvetica, Arial, sans-serif; font-size:13px; color:#000; background:url(/images/smooth_wall.png) fixed repeat; margin:0; -webkit-font-smoothing: antialiased; background-color:#EEE; } .bottom { width:100%; position:fixed; line-height:40px; bottom:0px; z-index:3; opacity:0; filter:alpha(opacity=0); } .bottom_container { height: 40px; width: 1180px; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.70); text-align: center; bottom: 0; left: 0; padding-top: 10px; } .comment_container { text-align:left; margin:10px; padding:10px; } .odd { background:url(/images/trans.png) repeat; } .even { background:url(/images/trans5.png) repeat; } .comment_container_main { margin:0; background:#FFF; } .comment_details { padding:10px; vertical-align:middle; } .comment_empty { text-align:center; font-size:16px; } .comment_hr { height:3px; /*background-color:#09C;*/ margin:20px 0; } .comment_text { color:#999; } .comment_title { padding-bottom:10px; } .comment_title span { float:right; font-size:11px; color:#999;} .comment_reply { text-align:right;} .comment_reply a { color:#09C; text-decoration:none;} .comment_reply a:hover { text-decoration:underline;} .copy { margin:10px 0 60px 0; line-height:25px; } .date { float:right; line-height:14px; text-align:right; color:#FFF; } .date .month { font-size:10px; } .db { display:block; } .dib { display:inline-block; } .err_reg_login { width:220px; padding:2px 2px; position:fixed; top:178px; left:80px; z-index:3; background-color:#09C; color:#FFF; display:none; text-align:left; } .err_reg_login_taken { width:220px; padding:2px 2px; position:fixed; top:178px; left:80px; z-index:3; background-color:#09C; color:#FFF; display:none; text-align:left; } .err_reg_email { width:220px; padding:2px 2px; position:fixed; top:238px; left:80px; z-index:3; background-color:#09C; color:#FFF; display:none; text-align:left; } .err_reg_email_taken { width:220px; padding:2px 2px; position:fixed; top:238px; left:80px; z-index:3; background-color:#09C; color:#FFF; display:none; text-align:left; } .err_login_na { width:220px; padding:2px 2px; position:fixed; top:238px; left:80px; z-index:3; background-color:#09C; color:#FFF; display:none; text-align:left; } .fb_edge_widget_with_comment span.fb_edge_comment_widget { left: -300px !important; display:none; } .filter_container { height:40px; width:1140px; top:0; left:0; position:relative; display:inline-block; padding:0 10px; text-align:left; background-color:#E4F3F8; z-index:101; } .fltleft { float:left;} .fltright { float:right;} .hr { height:1px; margin:20px 0; } input { width:190px; height:35px; margin:5px 0 5px 0; padding:0px; border:none; background:#09C; padding:0 5px; font-size:14px; color:#FFF; } .left { text-align:left; position:fixed; display:block;top:10px; padding:10px; background-color:#FFF; z-index:3; width:120px; } .left a:hover, .left .active { /*background-color:#09C;*/ } .left_bottom { width:200px; text-align:left; position:fixed; display:block; bottom:0; left:0px; padding:20px 10px 10px 10px; } .left_search { text-align:left; position:fixed; display:block; top:210px; padding:10px; background-color:#FFF; z-index:3; width:120px; } .lh40 { line-height:40px !important; } .light { background-color:#09C; } .login { top:169px; display:none; z-index:2; height:170px; } .main_navigation { width:800px; text-align:left; line-height:50px; margin-top:10px; } .main_navigation a { color:#09C; text-decoration:none;} .main_navigation a:hover { text-decoration:underline;} .top_nav_mar { margin-top:60px; } .mar_bot_4 { margin:0 0 4px 0 !important; } .mar_bot_10 { margin-bottom:10px !important; } .mar_rig_6 { margin-right:6px !important; } .mar_rig_10 { margin-right:10px !important; } .mar_top_3 { margin-top:3px !important; } .mar_top_10 { margin-top:10px !important; } .mw0 { min-width:0 !important; } #new_comment_text {} .nomar { margin:0px !important; } /*.play_overlay { opacity:0; transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; position:absolute; top:-50px; width:100%; } .play_overlay img { width: 172px !important; }*/ .pointer { cursor:pointer; } .post_comment { text-align:left; padding:10px; } .post_comment .err { color: #C00;} #post_comment { cursor: pointer; } .p4-6 { padding:4px 6px !important; } .pt5 { padding-top:5px; } .pt10 { padding-top:10px; } .rating { background: #89CBE1; color: #000; line-height: 12px; font-size: 12px; text-align: center; width: 20px; margin-top: 3px; } .rating_container { float:right; margin:-6px 0 0 10px; display:none; } .rating_container img { cursor:pointer; } .right { text-align:left; position:absolute; display:block; top:10px; right:0; padding:10px; background-color:#FFF; z-index:3; width:120px; } .right a:hover { text-decoration:none; } .right a.purple-stripe { overflow: hidden; } .share_container { height:40px; line-height:40px; width:1140px; top:0; left:0; position:relative; display:inline-block; padding:0 10px; text-align:left; vertical-align:middle; background-color:#E4F3F8; } .social_pics { height:20px !important; width:20px !important; margin-top:-3px; } .social-text-long { display: block; } .social-text-short { display: none; } .tags { display:inline-block; } .tags a { color:#09C; text-decoration:none; } .tags a:hover { text-decoration:none; } .tags a:hover span { text-decoration:none; } .tags span { cursor:pointer; background:#0C496C; padding:3px; margin-right:5px; color:#999; } .tags span:hover { background:#09C; color:#FFF; } .tags .active { background:#09C; color:#FFF;} .tags div a:hover { text-decoration:underline; } .tags_titl { display:inline-block; } .tal { text-align:left !important; } textarea { resize:none; } .top { width:100%; position:fixed; display:block; top:0px; z-index:2; } .top_container { width: 1180px; height: 50px; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.50); text-align:center; } .topMenu { display:none; } #topMenuDD { display:none; } .total_tracks { font-size: 40px; font-weight: bold; color: #FFF; margin:0; text-align:right; font-family: 'Metrophobic', sans-serif; background-color: #852b99; line-height: 40px; padding: 5px 10px; } .track_container { width:800px; margin:0; background:#FFF; } .track_container .track_details { height: 420px; } .track_container_inside .track_details iframe { width: 1160px; height: 625px; } .track_title { font-size:16px; padding:10px 13px; text-align:left; line-height:25px; border-bottom:4px solid #89CBE1; color:#FFF; background:#09C; } .track_title a { color:#09C; text-decoration:none;} .track_title a:hover { color:#09C; text-decoration:underline;} .track_title h1 { font-size:16px; text-align:left; line-height:25px; color:#FFF; font-weight:normal; padding:0; margin:0; border:none; display:inline-block;} .track_title a h3 { font-size:16px; text-align:left; line-height:25px; color:#FFF; font-weight:normal; padding:0; margin:0; border:none; display:inline-block;} .track_title a h3:hover { text-decoration:underline; } .track_rating { float:right; width:100px; line-height:25px; } .track_details { padding:10px; /*width:1160px; height:420px;*/ vertical-align:middle; /*display:table-cell;*/ position: relative; } .track_details a { cursor:pointer; position:relative; } .track_details a .play { display: inline-block; position: absolute; width: 100%; height: 100%; z-index: 2; vertical-align: middle; font-size: 100px; color: #222; top: -40px; transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -webkit-transition: all 250ms ease-in-out; } .track_details a:hover .play { color: #900; } .track_details iframe { height: 420px; } .track_details img.track_img { opacity: 0.85; transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -webkit-transition: all 250ms ease-in-out; filter: url("/includes/filters.svg#greyscale"); filter: gray; -webkit-filter: grayscale(1); max-height: 420px; } .track_details img.track_img:hover { } .track_details:hover img.track_img { opacity: 1; transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -webkit-transition: all 250ms ease-in-out;filter: none; -webkit-filter: grayscale(0); } /*.track_details:hover div.play_overlay { opacity:0.85; transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -webkit-transition: all 300ms ease-in-out; }*/ .track_bottom_container { padding:10px; text-align:left; background:#E4F3F8; height:22px; } .track_bottom_container .tags a:hover { text-decoration:none;} .track_bottom_container a { color:#046E92; text-decoration:none;} .track_bottom_container table tr td:nth-child(2) { text-align: right; } .track_bottom_container table tr td:nth-child(2) a:first-child { margin-left: 10px; } .w40 { width:40px !important; } .w75 { width:75px; } .w90 { width:90px; } .w97 { width:97px; } .w100 { width:100px; } .w103 { width:103px; } .w107 { width:107px !important; } .w147 { width:147px !important; } .w184 { width: 184px !important; } .w200 { width:200px; } .w260 { width: 260px !important; } .formText { width:70px; float:left; line-height:30px; } /*PAGING*/ .paging { width:660px; margin-bottom:20px; display:inline-block; text-align:center; position:relative; font-size:20px; } .page_num { position:relative; bottom:0; margin:14px 0 0 0; min-width:100px; display:inline-block; } .page_num_link { float:left; } #seachResults { display:none; width:120px; } #seachResults ul li a.track { display: block; } .lyrics { font-size: 16px; text-align: left; padding: 40px; } .banner-side { width: 120px; padding: 10px; position: fixed; left: 0; top: 280px; background-color: #FFF; } body.download { text-align: center; } body.download .track_container_inside { margin: 0 auto; } body.download .track_details { padding: 100px 0; position: relative; font-size: 20px; } body.download .track_details img { width: auto; } body.download .top_banner { margin: 0 auto 20px auto; padding: 10px; background: #FFF; display: inline-block; } body.download .bottom_banner { margin: 20px auto 0 auto; padding: 10px; background: #FFF; display: inline-block; } body.download .left_banner { position: absolute; left: 0; background: #FFF; padding: 10px; top:0; z-index: 9999; } body.download .right_banner { position: absolute; right: 0; background: #FFF; padding: 10px; top:0; z-index: 9999; } body.download .inner_left_banner { position: absolute; left:0; top:0; } body.download .inner_right_banner { position: absolute; right:0; top:0; } .m-btn + .m-btn, .m-btn + .m-btn-group, .m-btn-group + .m-btn, .m-btn-group + .m-btn-group { margin-left: 0; } @media only screen and (max-width : 767px) { body { padding:0; } .bottom { display:none; } .comment_container_main { width:480px; } .comment_hr { width:480px; } .copy { width:480px; } .filter_container { display:none; } .hr { margin:5px 0; } .left { display:none; } .left_search { display:none; } .main_navigation { display:none; } #new_comment_text { width: 426px; height: 50px; } .paging { width:480px; } .right { display:none; } .share_container { display:none; } .tags { width:100%; } .top { display:none; } .topMenu { display: block; width: 480px; height: 48px; background: #BFC2AE; margin-bottom: 20px; } #topMenuDD { display:none; width:480px; position:absolute; top:48px; background: #BFC2AE; z-index:3; } #topMenuDDCont { position:relative; } .track_bottom_container { height:inherit; } .track_container { width:480px; margin:0; background:#FFF; } .track_container .track_details { height: auto; } .track_container .track_details iframe { width: 460px; height: 260px; } .track_container_inside { width:480px; background:#FFF; } .track_details { height:100%; } .track_details a .play { color: #900; } .track_container_inside .track_details iframe { width:460px; height: 260px; } .track_details img { width:460px; opacity: 1; transition:initial !important; -moz-transition:initial !important; -webkit-transition:initial !important; filter:initial !important; -webkit-filter: initial !important; max-height: none; } .track_title a { display:inline-block; } .vertical_spacer { display:none; } .banner-side { display: none; } body.download .inner_left_banner { display: none; } body.download .inner_right_banner { display: none; } body.download .left_banner { display: none; } body.download .right_banner { display: none; } } @media only screen and (min-width : 768px) and (max-width : 880px) { body { padding:0 20px; } .bottom { display:none; } .filter_container { display:none; } .hr { margin:5px 0; } .left { display:none; } .left_search { display:none; } .main_navigation { display:none; } #new_comment_text { width: 98%; height: 50px; } .paging { width:100%; } .right { display:none; } .share_container { display:none; } .tags { width:100%; } .top { display:none; } .topMenu { display:block; width:100%; height: 48px; background: #BFC2AE; margin-bottom: 20px; } #topMenuDD { display:none; position:absolute; margin: 48px 20px 0 0; background: #BFC2AE; z-index:9999; } #topMenuDDCont { position:relative; } .track_bottom_container { height:inherit; } .track_container { width:100%; background:#FFF; } .track_container_inside { width:100%; background:#FFF; } .track_container_inside .track_details { display: inherit; } .track_container .track_details { height:100%; display:inherit; width:auto; } .track_container .track_details img { width:100%; max-height: none; } .track_container_inside .track_details iframe { width:100%; height:460px; } .track_details iframe { width:100%; height:460px; } .track_title a { display:inline-block; } .vertical_spacer { display:none; } .banner-side { display: none; } body.download .inner_left_banner { display: none; } body.download .inner_right_banner { display: none; } body.download .left_banner { display: none; } body.download .right_banner { display: none; } } @media only screen and (min-width : 881px) and (max-width : 1259px) { .bottom_container { width:580px; } .comment_container_main { width:580px; } .comment_hr { width:580px; } .filter_container { height:70px; } .hr { width:580px; } .filter_container { width:540px; height:60px; } .main_navigation { width:580px; } #new_comment_text { width: 526px; height: 50px; } .paging { width:580px; } .share_container { width:540px; } .social_text { display:none; } .tags_titl { display:block; margin-bottom:5px; } .top_container { width:580px; height:70px; } .top_nav_mar { margin-top:80px; } .topMenu { display:none; } #topMenuDD { display:none; } .track_container { width:580px; margin:0; background:#FFF; } .track_container .track_details { height: auto; } .track_container_inside { width:580px; margin:0; background:#FFF; } .track_container_inside .track_details iframe { width: 560px; height: 315px; } .track_details img { width:560px; max-height: none; } .vertical_spacer { display:none; } body.download .inner_left_banner { display: none; } body.download .inner_right_banner { display: none; } } @media only screen and (min-width : 1260px) and (max-width : 1474px) { .bottom_container { width:800px; } .comment_container_main { width:800px; } .comment_hr { width:800px; } .filter_container { width:760px; } .hr { width:800px; } .main_container { padding:0; } .main_navigation { width:800px; } #new_comment_text { width: 746px; height: 50px; } .paging { width:800px; } .share_container { width:760px; } .social-text-long { display: none; } .social-text-short { display: block; } .tags { width:607px; } .top_container { width:800px; } .topMenu { display:none; } #topMenuDD { display:none; } .track_container { width:800px; margin:0; background:#FFF; } .track_container .track_details { height: auto; } .track_container .track_details iframe { width: 780px; height: 440px; } .track_container_inside { width:800px; margin:0; background:#FFF; } .track_container_inside .track_details iframe { width: 780px; height: 440px; } .track_details { width:780px; height:100%; } body.download .track_details { width: auto; } body.download .track_details .download_up { width: 300px; margin: 0 auto; } .track_details img { width:780px; max-height: none !important; } .vertical_spacer { display:none; } } @media only screen and (min-width : 1475px) { .comment_container_main { width: 1180px; } .comment_hr { width:800px; } .hr { display:none; } .main_container { text-align:center; width:1180px; display:inline-block; } .main_navigation { width:800px; } #new_comment_text { width: 1126px; height: 50px; } .paging { width:1180px; } .tags { width:490px; } .topMenu { display:none; } #topMenuDD { display:none; } .top_tags { width:100%; } .track_container { width:580px; height:534px; margin:0; float:left; z-index:1; margin-bottom:20px; background:#FFF; } .track_container_inside { width:1180px; margin:0; background:#FFF; } .track_details img { width:560px; } .vertical_spacer { float:left; width:20px; } } /*-------------------------------- CSS3 BUTTONS ----------------------------------*/ button.blueButton { background-color: #52a8e8; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #52a8e8), color-stop(100%, #377ad0)); background-image: -webkit-linear-gradient(top, #52a8e8, #377ad0); background-image: -moz-linear-gradient(top, #52a8e8, #377ad0); background-image: -ms-linear-gradient(top, #52a8e8, #377ad0); background-image: -o-linear-gradient(top, #52a8e8, #377ad0); background-image: linear-gradient(top, #52a8e8, #377ad0); border-top: 1px solid #4081af; border-right: 1px solid #2e69a3; border-bottom: 1px solid #20559a; border-left: 1px solid #2e69a3; border-radius: 16px; color: #fff; font: normal 12px/1 "lucida grande", sans-serif; padding: 3px 10px; text-align: center; text-shadow: 0 -1px 1px #3275bc; -webkit-background-clip: padding-box; } button.blueButton:hover { background-color: #3e9ee5; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e9ee5), color-stop(100%, #206bcb)); background-image: -webkit-linear-gradient(top, #3e9ee5 0%, #206bcb 100%); background-image: -moz-linear-gradient(top, #3e9ee5 0%, #206bcb 100%); background-image: -ms-linear-gradient(top, #3e9ee5 0%, #206bcb 100%); background-image: -o-linear-gradient(top, #3e9ee5 0%, #206bcb 100%); background-image: linear-gradient(top, #3e9ee5 0%, #206bcb 100%); border-top: 1px solid #2a73a6; border-right: 1px solid #165899; border-bottom: 1px solid #07428f; border-left: 1px solid #165899; -webkit-box-shadow: inset 0 1px 0 0 #62b1e9; box-shadow: inset 0 1px 0 0 #62b1e9; cursor: pointer; text-shadow: 0 -1px 1px #1d62ab; -webkit-background-clip: padding-box; } button.blueButton:active { background: #3282d3; border: 1px solid #154c8c; border-bottom: 1px solid #0e408e; text-shadow: 0 -1px 1px #2361a4; -webkit-background-clip: padding-box; } /* ================= SPEECH BUBBLE =================== */ .bubble { position:relative; padding:3px 8px 5px 8px; margin:1em 0 3em; color:#fff; background:#C10000; /* default background for browsers without gradient support */ /* css3 */ background:-webkit-gradient(linear, 0 0, 0 100%, from(#F81414), to(#C10000)); background:-moz-linear-gradient(#F81414, #C10000); background:-o-linear-gradient(#F81414, #C10000); background:linear-gradient(#F81414, #C10000); } .bubble:after { content:""; position:absolute; bottom:-5px; /* value = - border-top-width - border-bottom-width */ left:20px; /* controls horizontal position */ border-width:5px 5px 0 5px; /* vary these values to change the angle of the vertex */ border-style:solid; border-color:#C10000 transparent; /* reduce the damage in FF3.0 */ display:block; width:0; } .bubble_red { display:none; position:absolute; padding:3px 8px; margin:1em 0 3em -70px;; color:#fff; background:#C10000; /* default background for browsers without gradient support */ /* css3 */ background:-webkit-gradient(linear, 0 0, 0 100%, from(#F81414), to(#C10000)); background:-moz-linear-gradient(#F81414, #C10000); background:-o-linear-gradient(#F81414, #C10000); background:linear-gradient(#F81414, #C10000); -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; font-size:12px; line-height:14px; z-index:5; width: 90px; text-align: center; } .bubble_red:before { content:""; position:absolute; top:-5px; /* value = - border-top-width - border-bottom-width */ left:75px; /* controls horizontal position */ border-width:0px 5px 5px 5px; /* vary these values to change the angle of the vertex */ border-style:solid; border-color:#F81414 transparent; /* reduce the damage in FF3.0 */ display:block; width:0; } .red_button { background-color:#590202 !important; } .red_button:hover { background-color:#BF0404 !important; } .green_button { background-color:#044C29 !important; } .green_button:hover { background-color:#45BF55 !important; } /*SHARRRE*/ #example2 { cursor:pointer; margin-top:10px; text-align: center; display: inline-block; } .sharrre .box { background:#6f838c; height:22px; display:inline-block; position:relative; padding:0px 55px 0 8px; font-size:12px; float:left; clear:both; overflow:hidden; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; } .sharrre .share_left { line-height:22px; display:block; white-space:nowrap; color:#ffffff; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; } .sharrre .middle { position:absolute; height:22px; top:0px; right:30px; width:0px; background:#35464D; color:#fff; white-space:nowrap; text-align:left; overflow:hidden; -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; -webkit-transition:width 0.3s linear; -moz-transition:width 0.3s linear; -o-transition:width 0.3s linear; transition:width 0.3s linear; } .sharrre .middle a { color:#fff; font-weight:bold; padding:0 9px 0 9px; text-align:center; float:left; line-height:22px; -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; } .sharrre .share_right { position:absolute; right:0px; top:0px; height:100%; width:45px; text-align:center; line-height:22px; color:#4b5d61; background:#f1faf9; } .sharrre .box:hover { padding-right:130px; } .sharrre .middle a:hover { text-decoration:none; } .sharrre .box:hover .middle { width:90px; } .question { line-height: 30px; font-size: 16px; } .redBorder { border: 1px solid #C00 !important; }