/* RESET */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,abbr,article,aside,command,details,figcaption,figure,footer,header,hgroup,mark,meter,nav,output,progress,section,summary,time { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th,figcaption { font-size: 1em; font-weight: normal; font-style: normal; display:inline-block; }
strong, em { display: inline; }
ul { list-style: none outside; }

@font-face {
    font-family: 'zonapro';
    src: url('/css/ZonaPro-Bold.otf');
    src: url('/css/ZonaPro-Bold.eot?#iefix') format('embedded-opentype'),
         url('/css/ZonaPro-Bold.ttf') format('truetype'),
         url('/css/ZonaPro-Bold.svg#ZonaPro-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'zonapro';
    src: url('/css/ZonaPro.otf');
    src: url('/css/ZonaPro.eot?#iefix') format('embedded-opentype'),
         url('/css/ZonaPro.woff') format('woff'),
         url('/css/ZonaPro.ttf') format('truetype'),
         url('/css/ZonaPro.svg#ZonaPro') format('svg');
    font-weight: normal;
    font-style: normal;
}

html { -webkit-font-smoothing: antialiased; }
body { font-family: zonapro; text-align: center; background: #ffffff; color: #62686f; font-size: 1em; background-position: center top; }
/*@media only screen and (min-width: 0px) and (max-width: 1024px) {
	body { background-image: url(/css/bg-1024.jpg); background-repeat: no-repeat; }
}
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
	body { background-image: url(/css/bg-1280.jpg); background-repeat: no-repeat; }
}
@media only screen and (min-width: 1281px) and (max-width: 1680px) {
	body { background-image: url(/css/bg-1680.jpg); background-repeat: no-repeat; }
}
@media only screen and (min-width: 1681px) and (max-width: 2000px) {
	body { background-image: url(/css/bg-2000.jpg); background-repeat: no-repeat; }
}
@media only screen and (min-width:2001px){
	body { background-image: url(/css/bg-2500.jpg); background-repeat: no-repeat; }
}*/

#container, #header, #footer, #header-menu { width: 100%; text-align: center; }
#main, #header-content, #footer-content, #search { width: 1024px; margin: auto; text-align: left; padding: 0 10px 0 10px; }

#header { background: #fff; margin: 0; padding: 6px 0 10px 0; }
#header .logo { width: 290px; height: 90px; float: left; background-image: url(/css/songtextemania-logo.png); background-repeat: no-repeat; background-position: left center; }
#header .logo a { display: block; width: 100%; height: 100%; }
#header .logo span { display: none; }
#header .leaderboard { width: 728px; float: right; }

#header-menu { background: #021643; }
#header-menu ul li { float: left; text-transform: uppercase; margin: 0 35px 0 0; padding: 14px 0 0 0; font-size: 12px; height: 26px; }
#header-menu ul li a { color:#a6c2dd; font-weight: bold; }
#header-menu ul li:hover a { text-decoration: none; color: #ffffff; }
#header-menu ul li:last-child { border: none; margin: 0; padding: 0; }

#search { position: relative; margin: 20px auto 20px auto; text-align: center; font-size: 28px; font-weight: bold; color: #fff;  text-transform: uppercase; }
#search-form { width: 90%; height: 45px; margin: 10px auto 0 auto; position: relative; }
#search input[type="text"] { background: #021643; color:#fff; width: 100%; border: none; padding: 13px 10px 13px 20px; font-size: 15px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; position: absolute; top:0; left: 0; z-index: 1; outline: 0 none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-weight: bold; }
#search input[type="image"] { position: absolute; top: 7px; right: 12px; z-index: 2; } 

#main { background: #fff; padding: 0; }

#content { width: 684px; padding: 0 10px 20px 10px; float: left; }
#content-big { width: 100%; }

ul.list li, ul.album li { width: 100%; padding: 0 0 10px 0; margin: 0 0 10px 0; border-bottom: 1px solid #f1f1f1; font-size: 14px; font-weight: bold; }
ul.list li a { font-weight: normal; }
.albums ul.list li a { color: #62686f; }
ul.list h4 { position: relative; left: -10px; width: 100%; margin-bottom: 20px; }
ul#half-list li, li#half-list, ul#half-list-ricerca li, ul.album { float: left; width: 49% !important; margin: 0 2% 10px 0; }
ul#half-list li.no-margin, li#half-list.no-margin, ul#half-list-ricerca li.no-margin { margin: 0 0 10px 0 !important; }
ul.album { margin: 0 2% 20px 0; }
ul.album h3,ul.album h2,.albums h3 { width: 100%; display: block; }
ul.album h3 a,ul.album h2 a,.albums h3 { background: #eff1f5; width: 100%; font-weight: bold; display: block; margin-bottom: 15px; color: #62686f; padding: 8px 10px 8px 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
ul.album li a { color: #62686f; font-weight: normal; }
#skyscraper { width: 170px; text-align: left; float: left; }
#update-lyrics { width: 100%; }
#update-lyrics h1, #latest-lyrics h4, #latest-artists h4 { padding: 12px 0 12px 10px !important; }
#update-lyrics ul, #latest-lyrics ul, #latest-artists ul { margin-bottom: 15px; }
#update-lyrics ul li, #latest-lyrics ul li, #latest-artists ul li { float: left; margin: 0 15px 5px 0; font-size: 13px; }
#latest-lyrics ul li { font-weight: bold; }
#latest-lyrics ul li a { font-weight: normal; }
#update-lyrics ul li strong { font-weight: bold; text-decoration: underline; }
#update-lyrics ul li a.dark { color: #62686f; font-weight: bold; }
#sponsor-app { width: 684px; height: 148px; background-image: url(/css/bg-sponsor-app.png); background-repeat: no-repeat; position: relative; }
#sponsor-app .sponsor-android, #sponsor-app .sponsor-ios { position: absolute; bottom: 5px; left: 20px; }
#sponsor-app .sponsor-ios { left: 210px; }
ul.nav-lyrics { background: #eff1f5; width: 100%; display: block; position: relative; left: -10px; padding-right: 10px; margin-bottom: 10px; }
ul.nav-lyrics li { float: left; font-weight: bold; }
ul.nav-lyrics li a, ul.nav-lyrics li.selected { display: block; padding: 10px 20px; color: #62686f; }
ul.nav-lyrics li.selected { background: #fff; color: #2c2d2f; }
ul.nav-lyrics li a:hover { background: #fff; text-decoration: none; }
.lyrics-header { background: #eff1f5; width: 100%; display: block; position: relative; left: -10px; padding: 10px 10px 10px 0; margin-bottom: 20px;  }
.lyrics-header img.artist { display: block; float: left; max-width: 80px; margin: 0 20px 0 10px; }
.lyrics-header .center-header { width: 439px; float: left; }
.lyrics-header .center-header h1,.lyrics-header .center-header h2, .lyrics-header .center-header h3 { display: block; font-weight: bold; margin-bottom: 10px; font-size: 22px; }
.lyrics-header .center-header h2 { font-size: 16px; margin-bottom: 12px; }
.lyrics-header .center-header h3 { font-size: 14px; margin-bottom: 12px; }
.lyrics-header ul.social, .lyrics-header .center-header { float: left; border-bottom: 1px solid #f1f1f1; }
.lyrics-header ul.social { height: 80px; }
.lyrics-header .center-header { min-height: 80px; }
ul.function-nav li,ul.function-nav-left li { font-size: 12px; margin-bottom: 5px; }
ul.function-nav li img,ul.function-nav-left li img { vertical-align: middle; margin-right: 5px; }
ul.function-nav-left { margin-top: 20px; }
ul.social { width: 135px; float: right!important; }
ul.social li { float: right; margin-left: 15px; }
ul.social li a { display: block; padding: 5px 5px 0 5px; -webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px; }
ul.social li a img { max-height: 20px; }
ul.social li a.facebook { background:#2d609b; }
ul.social li a.twitter { background:#00c3f3; }
ul.social li a.gplus{ background:#eb4026; }
ul.social li a.whatsapp{background:#57BB63;}
ul.social li span { display: none; }
ul.function-nav li { float: left; margin-right: 15px; }
ul.function-nav-left li { float: none; margin-right: 0; font-weight: bold; }
.lyrics-function { border-bottom: 1px solid #f1f1f1; padding-bottom: 10px; font-size: 12px; }
.lyrics-function h5 { float: left; font-weight: bold; font-size: 12px; margin-right: 5px; margin-top: 3px; }
.lyrics-function form { float: left; width: 30%; font-size:12px; margin-top: 3px; }
.lyrics-function form input[type="radio"] { margin-right: 3px; }
.notes { float: left; width: 20%; margin-top: 3px; }
#add-lyrics { float: right; width: 30%; text-align: right; }
#add-lyrics img { vertical-align: middle; }
#add-lyrics a, #add-lyrics a:hover { font-size: 12px; color: #62686f; font-weight: bold; }
.video-container{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;}
.video-container iframe,.video-container object,.video-container embed{position:absolute;top:0;left:0;width:100%;height:100%;}
#video-player { padding: 5px 0 10px 0; }
.col-left-lyrics { width: 504px; float: right; margin-top: 20px; }
.col-right-lyrics { width: 160px; float: left; margin-top: 20px; }
.col-lyrics{width:100%;margin-top:20px;}
strong.lyrics { width: 100%; display: block; border: 1px solid #f1f1f1; border-left: none; border-right: none; margin: 0 0 10px 0; font-weight: bold; padding: 8px 0; font-size: 12px; }
.lyrics-body { line-height: 32px; font-size: 16px; color: #000;margin-bottom:15px; }
.print-lyrics{margin-bottom:15px;font-weight:bold;}
.print-lyrics img{margin-right:10px;}
#video-musictory,#video-youtube { position: relative; float: right; margin-left: 15px; width: 200px; top: -40px; }
#video-musictory h5,#video-youtube h5 { font-weight: bold; margin-bottom: 30px; color: #62686f; }
#video-musictory .a-video { position:relative; display:block; width:200px; height: 150px; }
#video-musictory .thumb-video { width:200px; height: 150px; }
#video-musictory .play-video { border: none; position: absolute; left: 50%; top:50%; margin-top: -20px; margin-left: -31px; }
#video-youtube {width:250px;padding-bottom:56.25%;height:0;margin-top:-3px;overflow:hidden;margin-bottom:10px;}
#video-youtube iframe {width:250px;}
.credits,  .link-lyrics, .link-lyrics a { font-size: 12px; }
.comment-lyrics { font-size: 14px; }
#leave_comment { display: block; background: #f8fafb; font-weight: bold; padding: 10px; }
.letters-list { text-align: center; font-size: 12px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #f1f1f1; line-height: 18px; }
.letters-list a { color: #62686f; }
.translation { font-weight: bold; }
ul.top-home,ul.charts ,ul.search{ width: 100%; margin-bottom: 30px; float: left; }
ul.top-home h4 { left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
ul.top-home { width: 49%; margin-right: 2%; }
ul.top-home li,ul.charts li,ul.search li{background:#f8fafb;width:100%;margin:0 0 20px 0;position:relative;padding:10px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
ul.search li { margin: 0 0 15px 0; }
ul.top-home li a,ul.charts li a,ul.search li a {font-weight: bold; font-size: 17px;}
ul.search li a { font-size: 15px; }
ul.top-home li:hover,ul.charts li:hover,ul.search li:hover{background:#021643; cursor:pointer;}
ul.top-home li:hover a, ul.top-home li:hover a:hover,ul.charts li:hover a, ul.charts li:hover a:hover,ul.search li:hover a, ul.search li:hover a:hover{ color: #fff; text-decoration: none; }
ul.top-home li img,ul.charts li img,ul.search li img{width:100px;max-width:100px;vertical-align: middle;margin-right:10px;}
ul.search li img { width: 50px; max-width: 50px; }
ul.top-home li .position,ul.charts li .position{float:right;color:#ccc;font-weight:bold;margin:20px 0 0 5px;font-size:40px;}
ul.charts li.small { width: 48%; margin: 0 4% 20px 0; float: left; }
ul.charts li.small img { max-width: 50px; }
.contact {width: 100%; text-align: center;}
.contact input[type="text"], .contact textarea{ width: 80%; margin: 5px 0 20px 0;}
.contact textarea { height: 200px; resize: none; }
.search-title { display: block; font-weight: bold; margin: 10px 0 25px 0; font-size: 22px; }
#copyright{font-size:13px;margin:10px 0 10px 0;}
#video-fixed{max-width:400px;}
.stuck{width:400px;height:255px!important;position:fixed;bottom:20px;right:20px;box-shadow:0 2px 4px rgba(0, 0, 0, .3);-webkit-transition: all 1s;-moz-transition: all 1s;-o-transition: all 1s;transition: all 1s;z-index:100000;}
#remove-stuck{width:100%;color:#454545;font-weight:bold;clear:both;display:block;text-align:right;margin-bottom:5px;font-size:22px;}

#navigation { background: #f8fafb; width: 300px; padding: 0 10px 0 10px; float: right; }
#navigation h4 { margin-top: 20px; }
#navigation ul.top li { width: 100%; font-size: 13px; }
#navigation ul.top li a { font-weight: bold; }
#navigation ul.top li img { max-width: 50px; vertical-align: middle; margin-right: 10px; }

h4, #update-lyrics h1, .comment-lyrics h5, .list-lyrics h1 { background: #eff1f5; padding: 12px 10px; text-transform: uppercase; font-size: 17px; color: #44494d; display: block; font-weight: bold; margin-bottom: 20px; position: relative; left: -10px; width: 100%; }
.comment-lyrics h5 a, .comment-lyrics h5 a:hover { color: #44494d; text-decoration: none; }

#footer { background: #343536; padding: 20px 0; }
#footer-content {text-align: center!important; }
#footer-content ul { display: block; margin: auto; }
#footer-content ul li { float: left; text-transform: uppercase; margin: 0 25px 0 0; font-size: 11px; }
#footer-content ul li a { color: #686f72; font-weight: bold; }

textarea, input[type="text"] { border: none; background: #f3f3f3; padding: 15px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 16px; outline: none 0; font-family: zonapro,zonaproblod; }
input[type="submit"] { background: #196bb5; color: #ffffff; padding: 10px 20px; font-weight: bold; border: none; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; outline: none 0; font-size: 15px; }

#overlay{background: #ffffff;width: 100%;height: 100%;position: fixed;top: 0%;left: 0%; z-index: 9;text-align: center;overflow:hidden;filter: alpha(opacity=95);opacity: 0.95;-moz-opacity: 0.95;}
#overlay-facebook {background: #fcf9f9;width: 400px;height: 340px;position: fixed;top: 6%;left: 50%; z-index: 10;text-align: left;filter: alpha(opacity=100);opacity: 100;-moz-opacity: 100;margin: 0 0 0 -200px;padding: 0px 0px 5px 0px;border: 1px solid #f7f5f5; box-shadow: 0 2px 5px rgba(34,25,25,0.5); -moz-box-shadow: 0 2px 5px rgba(34,25,25,0.5); -webkit-box-shadow: 0 2px 5px rgba(34,25,25,0.5);}
.title-overlay { font-size: 20px; padding: 10px; }
.close-overlay { position: absolute; right: -15px; top: -15px; }
.close-overlay img { width: 30px; height: 30px; }

a { text-decoration: none; color: #217acf; }
a.blue-links { color: #042d5d; }
a:hover { text-decoration: underline; color: #161616; }
a.blue-links:hover { color: #042d5d; }
a.dark { color: #62686f; font-weight: bold !important; } 
a img { border: none; }
a img:hover{ opacity:.8; filter:alpha(opacity=80); filter:"alpha(opacity=80)"; }

.clear { display: block; clear: both; }
.hidden { display:none; }

.left { float: left; }
.right { float: right; }
.relative { position: relative; }
.border-bottom, .border-bottom-dotted { border-bottom: 1px solid #D5D5D5; margin-bottom: 15px; }
.border-bottom-dotted { border-bottom: 1px dotted #D5D5D5; }
.bold { font-weight: bold; }
.font-13 { font-size: 13px !important; }
.font-15 { font-size: 15px !important; }
.font-16 { font-size: 16px !important; }
.font-18 { font-size: 18px !important; }
.site-display { display: none; }
.width-50 { width: 50% !important; }
.width-48 { width: 48% !important; }
.no-border { border: none !important; }

.spacer-5 { display: block; height: 5px !important; }
.spacer-10 { display: block; height: 10px !important; }
.spacer-15 { display: block; height: 15px !important; }
.spacer-20 { display: block; height: 20px !important; }
.spacer-25 { display: block; height: 25px !important; }
.spacer-30 { display: block; height: 30px !important; }
.spacer-35 { display: block; height: 35px !important; }
.spacer-40 { display: block; height: 40px !important; }
.spacer-50 { display: block; height: 50px !important; }
.spacer-60 { display: block; height: 60px !important; }
.spacer-70 { display: block; height: 70px !important; }
.spacer-80 { display: block; height: 80px !important; }
.spacer-90 { display: block; height: 90px !important; }
.spacer-100 { display: block; height: 100px !important; }