:root {
	--text-color:#555555;
	--bg-color-input:#ffffff;
	--bg-color-button:#74b000;
	--text-color-button:#ffffff;
	--text-color-button-hover:#74b000;
	--text-color-navi-active:#ed1e25;
	--bg-color-button-hover:#ffffff;
	--border-color-button:#74b000;	
	--border-color-button-hover:#74b000;	
	--bg-root-color: #ffffff;
	--line-color: #cccccc;
}

/* --- Browser CSS reset --- */
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,font,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100.01%;font-family:inherit;vertical-align:baseline;}
img{vertical-align:bottom;}
:focus{outline:0;}
ol,ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;font-size:13px;text-shadow:none;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
a img{border:none;}
a:link,a:visited,a:active{color:#666;text-decoration:underline;}
a:hover{color:#999;}

/* --- generic --- */
body{background:#FFF;font-size:1em;font-family:Arial,Helvetica,sans-serif;color:#555;line-height:1.4em;}
body *{box-sizing:border-box;}
br.clearer{clear:both;float:none:height:0;line-height:0;}
.hidden{display:none !important;}
.align-right{text-align:right;}
p{margin-bottom:20px;}
h1,h2,h3,h4,h5,h6{font-weight:normal;line-height:1.4em;color:#555;}
h1{font-size:1.7em;margin-bottom:1em;}
h2{font-size:1.2em;margin-bottom:.7em;}
h3{font-size:1.1em;color:#000;margin-bottom:.5em;}
h2+h3{margin-top:20px;}

hr.separator{display:block;margin:30px 0;border:none;border-top:1px solid #ccc;}

p.noscript{margin-bottom:30px;color:red;}

/* --- messages --- */
.fancybox-slide div.message{border-left:22px solid #fff;}
div.error,
span.error{color:#ff0000;}
div.message.error,
span.message.error{background:url('/img/icon-alert.png') no-repeat #fff left center;background-size:16px 14px;padding-left:26px;}
div.info,
span.info{color:#2f5d93;}
div.message.info,
span.message.info{background:url('/img/icon-info.png') no-repeat #fff left center;background-size:14px 14px;padding-left:24px;}
div.success,
span.success{color:#74b000;}
div.message.success,
span.message.success{background:url('/img/icon-success.png') no-repeat #fff left center;background-size:14px 14px;padding-left:24px;}
div.messages span.message{display:block;margin-bottom:8px;line-height:1.2em;}
span.message.maintenance{display:inline-block;float:right;margin:-30px 0 10px 0;padding:10px 20px;background:#ff0000;color:#fff;font-weight:bold;}
div.messages{margin:25px 0;}
div.messages ul{margin:0 0 20px 0;list-style-type:none !important;}
p.message{margin:25px 0;}
p.maintenance{display:inline-block;float:right;margin:-30px 0 10px 0;padding:10px 20px;background:#ff0000;color:#fff;font-weight:bold;}

/* --- ajax-loader --- */
span.ajax-loader{position:absolute;z-index:999;height:31px;width:63px;background:url('/img/ajax-loader.gif') no-repeat center center;}
span.ajax-loader.by-icon{height:21px;}
span.ajax-loader.left{margin-left:-72px;}
span.ajax-loader.upper{left:0;margin-top:-22px;}

/* --- icons --- */
span.icon,
a.icon{display:inline-block;width:16px;height:16px;margin-right:10px;background-position:center center;background-size:16px 16px;background-repeat:no-repeat;text-indent:-9999px;vertical-align:middle;}
span.icon_edit,
a.icon_edit{background-image:url('/img/icon-edit.png');}
span.icon_save,
a.icon_save{background-image:url('/img/icon-save.png');}
span.icon_cancel,
a.icon_cancel{background-image:url('/img/icon-cancel.png');}
span.icon_create,
a.icon_create{background-image:url('/img/icon-create.png');}
span.icon_delete,
a.icon_delete{background-image:url('/img/icon-delete.png');}
span.icon_next,
a.icon_next{background-image:url('/img/icon-next.png');}
span.icon_success,
a.icon_success{background-image:url('/img/icon-success.png');}

/* --- Forms --- */
.content .inner h2+form{margin-top:30px;}
.content .inner input{border-radius:0;}
.content .inner input[type=text],
.content .inner form input[type=password],
.content .inner form input[type=file],
.content .inner select,
.content .inner textarea{width:100%;color:#000 !important;border:1px solid #ccc;padding:8px 10px;font-family:Arial,sans-serif;font-size:1em;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;background:#fff;}
.content .inner input.inline{display:inline-block;width:auto;min-width:250px;}
.content .inner select{box-sizing:border-box;min-width:70px;}
.content .inner select:focus{color:#000;color:rgba(0,0,0,0);text-shadow:0 0 0 #000;}
.content .inner input[type="submit"],
.content .inner input[type="button"],
.content .inner span.button,
.content .inner a.button{-webkit-appearance:none;display:inline-block;border:2px solid var(--bg-color-button);background-color:var(--border-color-button);color:var(--text-color-button);padding:7px 20px 7px 20px;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;}
.content .inner input[type="submit"],
.content .inner input[type="button"]{line-height:19px;font-weight:600;}
.content .inner input[type="submit"].right,
.content .inner input[type="button"].right{display:block;margin:0 0 0 auto;}
.content .inner input[type="submit"]:hover,
.content .inner input[type="image"]:hover,
.content .inner input[type="button"]:hover,
.content .inner span.button:hover,
.content .inner a.button:hover{background-color:var(--bg-color-button-hover);border:2px solid var(--border-color-button-hover);color:var(--text-color-button-hover);cursor:pointer;text-decoration:none;}
.content .inner input[type="checkbox"],
.content .inner input[type="radio"]{vertical-align:middle;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;}
.content .inner input[type="checkbox"]{margin-right:7px;border:1px solid #ccc;background:#fff;}
.content .inner form label{display:block;padding-bottom:7px;}
.content .inner label.inline-bottom{display:inline-block;padding:7px 0;}
.content .inner label.inline-bottom.icon-success{background:url('/img/icon-success.png') no-repeat right center;background-size:14px 14px;padding-right:22px;}
.content .inner label span.icon_right{padding-right:22px;}
.content .inner label span.icon-success{background:url('/img/icon-success.png') no-repeat right center;background-size:14px 14px;}
.content .inner label.inline{display:inline-block;padding:0 7px 0 3px;}
.content .inner label.nested{margin-bottom:8px;}
.content .inner .row.checkbox{display:table;}
.content .inner .row.checkbox.inline{clear:none;width:auto;padding-right:30px;padding-bottom:5px;}
.content .inner .row.checkbox label.inline{display:table-cell;width:100%;padding-right:0;text-align:left;}
.content .inner .row.checkbox.inline label.inline{width:auto;}
.content .inner .row.checkbox input{margin-top:-2px;}
.content .inner .row.radio.inline{clear:none;width:auto;padding-right:30px;padding-bottom:5px;}
.content .inner .row.radio label.inline{display:inline-block;margin-top:8px;}
.content .inner .row.radio.inline label.inline{width:auto;}
.content .inner .row.radio input{display:inline-block;margin-top:-2px;}
.content .inner input.disabled{cursor:auto !important;filter:alpha(opacity=40); /* IE 6, 7, 8 */ -ms-filter: "alpha(opacity=40)"; /* ab IE 8 zusätzlich möglich */ opacity:.4;/* alle anderen Browser einschließlich IE 9 */}
.content .inner input.error,
.content .inner select.error,
.content .inner textarea.error{border:1px solid #ff0000 !important;}
.content .inner input[type="checkbox"].error,
.content .inner input[type="radio"].error{-webkit-box-shadow:0 0 2px 0 rgba(255,0,0,1);-moz-box-shadow:0 0 2px 0 rgba(255,0,0,1);box-shadow: 0 0 2px 0 rgba(255,0,0,1);}
.content .inner input.inline_edit{max-width:64%;margin-right:10px;}
.content .inner .row.element-active{border:2px solid #76b200;padding:5px 7px 5px 10px;color:#76b200;}
.content .inner .row.element-inactive{border:2px solid #ff0000;padding:5px 7px 5px 10px;color:#ff0000;}
.content .inner .row .inner_wrap{position:relative;}
.content .inner .row .inner_wrap label.begin{width:35px;}
.content .inner .row .inner_wrap label.begin + input{width:calc(100% - 40px);min-width:0;margin-bottom:5px;}
.content .inner .row .inner_wrap label.end{width:35px;}
.content .inner .row .inner_wrap label.end + input{width:calc(100% - 40px);min-width:0;}

.row{clear:left;float:left;width:100%;padding-bottom:20px;}
.row.odd{padding:10px 15px;margin-bottom:15px;background-color:#efefef;}
.row.inline-block{clear:left;display:inline-block;width:auto;}
.row.two-thirds{width:66.667%;}
.row.fifty{width:50%;}
.row.fifty-fifty{width:50%;}
.row.margin_top{margin-top:20px;}
.row.buttons{margin:25px 0;}
.row a{text-decoration:none;}
.content .row > label + .row{margin-top:10px;}
.content .inner .row.checkbox.inline,
.content .inner .row.radio.inline{margin-top:10px;}
.row.mandatory_hint{text-align:left;}
span.mandatory{color:#ff0000;}

.content .inner .create_link_wrap{margin:0 0 25px 0;padding:10px 25px;text-align:center;}
a.button-link{display:inline-block;padding:10px 25px;font-weight:600;text-decoration:none;border-radius:25px;transition:all .15s ease-in-out;}
a.button-link:hover{cursor:pointer;text-decoration:none;}

a.button-link.new{background-color:#76b103;color:#fff;border:2px solid transparent;}
a.button-link.new:hover{background-color:#fff;border:2px solid var(--bg-color-button);color:var(--text-color-button-hover);}

/* --- Header --- */
.header{background-color:#f5f5f5;}
.header .inner{width:100%;max-width:1240px;margin:0 auto;padding:30px 50px;}
.header .inner .logo{float:left;width:250px;margin:0;}
.header .inner .logo img{display:block;width:100%;max-width:100%;height:auto;}
.header .inner nav{display:block;float:left;margin-left:75px;}
.header .inner nav > ul{display:block;width:100%;height:100%;}
.header .inner nav > ul > li{display:inline-block;height:100%;margin:0 30px;}
.header .inner nav > ul > li > a{display:block;height:100%;text-decoration:none;vertical-align:middle;line-height:60px;}
.header .inner nav > ul > li > a.act{color:var(--text-color-navi-active);}
.header .inner nav > ul > li > a.act:hover{cursor:default;}
.header .inner nav > ul > li.logout > a{background:url('/img/icon-logout.png') no-repeat left center;padding-left:18px;}
.header .inner:after{content:"";display:block;clear:both;}

/* --- Content --- */
.content{width:100%;max-width:1240px;margin:0 auto;padding:50px 50px 103px 50px;}

/* --- Content table --- */
.content table{width:100%;}
.content .inner table tr.odd td{background:#efefef;}
.content .inner table tr.even:last-child{border-bottom:1px solid #aaa;}
.content .inner table th{padding:5px 10px;background:#aaa;color:#fff;border-left:1px solid #fff;border-right:1px solid #fff;text-shadow:0 0 2px #666;font-weight:bold;font-size:1.1em;}
.content .inner table th.vote{width:53px;}
.content .inner table td{padding:10px 10px;border-left:1px solid #fff;border-right:1px solid #fff;vertical-align:middle;font-size:1.1em;}
.content .inner table th.vote{text-align:center;}
.content .inner table td.vote{text-align:center;}
.content .inner table td.vote a.icon_vote{display:block;margin:0 auto;height:30px;width:60px;padding:5px 8px;background:url('/img/icon-vote.png') no-repeat center 5px;background-color:var(--bg-color-button);border:2px solid;border-color:var(--border-color-button);background-size:16px 47px;}
.content .inner table td.vote a.icon_vote:hover{background-position:center -26px;background-color:transparent;}
.content .inner table td.vote span.icon_vote-off{display:block;margin:0 auto;height:30px;width:30px;padding:5px 8px;background:url('/img/icon-save.png') no-repeat center 5px;background-size:16px 16px;}
.content .inner table td.vote span.result{display:inline-block;font-weight:600;}
.content .inner table td.comments span.list-item{display:block;margin:0 0 1em 1.5em;}
.content .inner table td.comments span.list-item span.username{display:inline-block;padding:2px 5px;background-color:#f8f8f8;margin-left:-1.5em;}
.content .inner table td.valign-center{vertical-align:middle;}
.content .inner table td.vote .song_accepted{color:#74b000;}
.content .inner table td.vote .song_declined{color:#ff0000;}

/* --- Login --- */
#login_box{max-width:320px;margin:50px auto 0 auto;}

/* --- Password reset --- */
#pw_reset_box{max-width:320px;margin:50px auto 0 auto;}
#pw_reset_wrap .login_link{clear:both;margin-top:30px;padding-top:15px;border-top:1px solid #ccc;}

/* --- Dialog box --- */
.dialog_box{border:1px solid #ccc;}
.dialog_box  h2.box_heading{margin-bottom:20px;color:#fff;background:#aaa;padding:10px 20px;text-align:center;text-transform:uppercase;}
.dialog_box div.box_content{padding:0 20px 20px 20px;}
.dialog_box div.box_bottom{border-top:1px solid #ccc;padding-top:10px;margin-top:10px;}

/* --- Add Song --- */
#add-song_box textarea#comment{min-height:150px;}

/* --- Vote --- */
#vote_box{max-width:650px;margin:0 auto;}
#vote_box textarea#comment{min-height:150px;}

/* --- Downloads --- */
ul.downloads{margin-left:15px;}
ul.downloads li{list-style-type:square;margin-bottom:7px;}

/* --- Footer --- */
.footer:before{content:"";display:block;clear:both;}
.footer{clear:both;position:fixed;bottom:0;width:100%;background-color:#f5f5f5;}
.footer .inner{width:100%;max-width:1240px;margin:0 auto;padding:15px 50px;font-size:.9em;}

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

	.header .inner nav > ul > li{margin:0 20px;}
}

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

	/* --- Header --- */
	.header .inner{padding:20px 25px 10px 25px;}
	.header .inner .logo{float:none;}
	.header .inner nav{width:100%;float:none;margin-left:0;}
	.header .inner nav > ul > li:first-child{margin-left:0;}

	/* --- Content --- */
	.content{padding-left:25px;padding-right:25px;}

	/* --- Content table --- */
	.content .inner table td:nth-child(1){padding: 10px 0;}
	.content .inner table tr.even td.vote{background-color: #f8f8f8;}
	.content .inner table td.title{font-weight:600;}
	.content .inner table td.file a{display:block;}
	.content .inner table td.file a + a{margin-top:7px;}

	/* --- Footable --- */
	span.footable-toggle{display:none;}

	.footer .inner{padding-left:25px;padding-right:25px;}
}

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

	/* --- Header --- */
	.header .inner .logo{float:none;margin:0 auto;}
	.header .inner nav{float:none;margin:0 auto;text-align:center;}
	.header .inner nav > ul{display:inline-block;margin:0;width:auto;}
	.header .inner nav > ul > li{margin:0 10px;width:auto;}
	.header .inner nav > ul > li:first-child{margin-left:10px;}

	/* --- Login --- */
	#login_box{margin-top:0;}

	/* --- Password reset --- */
	#pw_reset_box{margin-top:0;}
}