body
{
	background-color: transparent;
	margin:0; 
	padding: 0; 
	font-family: "Verdana";
	color: #757575;
	text-align: center;
	line-height: 160%;

	/*REF_RESPONSIVE*/
	font-size: 1em;
}

a 
{
	outline: 0;
}

#main_background
{
	/*REF_RESPONSIVE*/
	background: url('background.jpg') no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#maintitle
{
	background-image: url('header.png');
	background-repeat: no-repeat;
	background-color: transparent;
	
	/*black logo background should not be visible under the cordon menu.*/
	height: 333px;

	/*keeping the header at the top regardless of the scroll position*/
	/*REF_FixedHeader*/
	position: fixed;
	top: 0px;
	width: inherit;
	z-index: 50;
}

#mainmenu-center {
	/*positioning the cordon menu*/
	/*REF_RESPONSIVE*/
	padding-top: 220px;

	/*aligning menu to center*/
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: inherit; /*also needed for center align*/
}

#mainmenu {
	/*aligning menu to center*/
	margin-left: auto;
	margin-right: auto;
	text-align: center;

	/*REF_RESPONSIVE*/
	width: 386px; /*also needed for center align*/
	font-size: 12.8px;
}

.menuitem {
	position: absolute; 
	z-index: 2;
}

#menuitem_music {
	/*REF_RESPONSIVE*/
	left: 280px; 
	top: 233px; 
	width: 102px; 
	height: 25px; 
}

#menuitem_home {
	/*REF_RESPONSIVE*/
	left: 385px; 
	top: 220px; 
	width: 130px; 
	height: 25px; 
}

#menuitem_apps {
	/*REF_RESPONSIVE*/
	left: 518px; 
	top: 233px; 
	width: 102px; 
	height: 25px; 
}

/*
anchor dst position fix, see "Official Bootstrap Adopted Answer":
https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors
IMPORTANT: the anchor must be the first item in the div it point to!
*/
.shift-anchor-by-header-size:before {
  display: block; 
  content: " "; 
  margin-top: -333px;
  height: 333px;
  visibility: hidden; 
}

#centered_alpha_bkg
{
	background-color: rgba(0, 0, 0, 0.35);
	width: 900px;

	/*REF_RESPONSIVE*/
	height: 8000px;

	margin-left: auto;
	margin-right: auto;
	text-align: center;
	vertical-align: top;
}

#space-behind-header
{
	/*REF_FixedHeader*/
	overflow: auto;

	/*REF_RESPONSIVE*/
	padding-top: 325px;
}

.content
{
	background-color: transparent;
	margin-left: auto;
	margin-right: auto;
	font-family:"Verdana";
	color: #757575;
	text-align: justify;

	/*REF_RESPONSIVE*/
	width: 600px;
}

.content-centered
{
	text-align: center;
}

.section-separator
{
	background:url('section separator.svg') no-repeat center center;
	text-align: center;
	width: inherit;
	margin-top: 4em;
	margin-bottom: 4em;
	height: 10em;
}

.section-title
{
	width: inherit;
	text-align: center;
	margin-top: 0em;
	margin-bottom: 4em;
}

.section-title-img
{
	width: 15em;
}

.software-item
{
}

.software-item-img
{
	width: 100%;
	border: 0px;
	padding-top: 0em;
	padding-bottom: 1em;
}

.software-item-video {
	position: relative;
	padding-bottom: 56.33%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	margin-top: 1em;
}

.software-item-video iframe, .software-item-video object, .software-item-video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.software-item-sep-img
{
	background-repeat: no-repeat;
	background: transparent;
	padding-top: 4em;
	padding-bottom: 4em;
}

div.songs 
{
	background-color: transparent;
	color:#D7D9B7;

	margin-left:auto;
	margin-right:auto;
	margin-top: 3em;
	text-align: center;
} 

.fb-like
{
	margin-left: auto;
	margin-right: auto;
	width: 100%;

	/*REF_RESPONSIVE*/
	height: 30px;
	/*needed only on mobile
	transform: scale(2);
	-webkit-transform: scale(2);
	-moz-transform: scale(2);
	-ms-transform: scale(2);*/
}

#no_background
{
	background-color: transparent;
}

a:link 
{
    font-weight: bold;
    text-decoration: none;
    color: #a7a8a6;
}

a:visited 
{
    font-weight: bold;
    text-decoration: none;
    color: #6a6a70;
}

a:hover 
{
    font-weight: bold;
    text-decoration: underline;
    color: #D7D9B7;
}

a:active 
{
    font-weight: bold;
    text-decoration: underline;
    color: #D7D9B7;
}

#a:link 
{
    font-weight: normal;
    text-decoration: none;
    color: #a7a8a6;;
}

#a:visited 
{
    font-weight: normal;
    text-decoration: none;
    color: #6a6a70;
}

#a:hover 
{
    font-weight: normal;
    text-decoration: underline;
    color: #D7D9B7;
}

#a:active 
{
    font-weight: normal;
    text-decoration: underline;
    color: #D7D9B7;
}

img 
{
	display: block;
	margin: auto;
	border: 0;
	outline: none;
}

img.contact
{
	display: inline-block;

	/*REF_RESPONSIVE*/
	width: 50px;
	padding: 5px;
}

img.dropdown
{
	display: inline-block;
	padding: 0px;
}

.play-all{
	font-size: 0.8em;
	color:#6a6a70;
	margin-bottom: 5em;
	cursor: pointer;
}

.play-all-img{
	border: 0;
	background: url(audio_player_btn_play.svg) no-repeat;
	cursor: pointer;

	/*REF_RESPONSIVE*/
	/*IMPORTANT: Both background-size and normal width/height settings are needed to size the button!*/
	background-size: 72px 50px;
	width: 72px;
	height: 50px;
}

table
{
	border-spacing: 0px;
}

table.songs
{
	margin: auto;
	background-color: transparent;
	border-collapse: collapse;
	text-align: left;

	/*REF_RESPONSIVE*/
	width: 600px;
}

td.album-title
{
	font-weight: bold;
	text-align: left;
	vertical-align: bottom; 

	/*REF_RESPONSIVE*/
	padding-bottom: 0.8em;
	height: 4em;
}

td.song-list-item-cell
{
	color: #6a6a70;
	background: rgba(255, 255, 255, 0.05);
	border: none;
	padding: 3px 7px 2px 7px;
	text-align: left;
	cursor: pointer;
	font-size: 1em;
}

td.col-left
{
}

td.col-right
{
	vertical-align: top;
	width: 10px;
}

td.song-long-desc
{
	color: #6a6a70;
	font-size: 0.8em;
	border: none;
	padding: 3px 7px 40px 100px;
	vertical-align: bottom;
	text-align: justify;
}

td.quote
{
	font-size: 0.8em;
	color:#6a6a70;
	text-align: justify;
}

td.song-copy-link
{
	color: #6a6a70;
	font-size: 1em;
	border: none;
	padding: 10px 7px 20px 45px;
	vertical-align: bottom;
	text-align: left;
}

tr.song-copy-link-tr-opened
{
	background: rgba(255, 255, 255, 0.02);
}

tr.song-copy-link-tr-closed
{
	display: none;
}

img.play-song-img {
	float: right;
	padding-top: 0.4em;
	height: 0.7em; /*adjusting image size to font size*/

	/*REF_RESPONSIVE*/
	margin-right: 0;     /*on mobile play and download icons have to be separated to be tappable*/
}

img.download-song-img {
	float: right;
	padding-top: 0.4em;
	height: 0.7em; /*adjusting image size to font size*/

	/*REF_RESPONSIVE*/
	margin-right: 0;     /*on mobile play and download icons have to be separated to be tappable*/
}

img.song-get-link-img {
	float: right;
	padding-top: 0.4em;
	height: 0.7em; /*adjusting image size to font size*/
}

img.song-copy-link-img {
	padding-left: 0.5em;
	cursor: pointer;
	float: right;

	/*REF_RESPONSIVE*/
	height: 33px;
}

.song-copy-link-input {
	font-size: 1em;
	border: 6px solid rgb(85, 85, 85);
	border-radius: 6px;
	color: rgb(214, 214, 182);
	background: rgb(85, 85, 85);
	width: 85%;
}

/* SUBMENU >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
ul.mainmenulist {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
}

li img, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 0px;
    text-decoration: none;
}

li img:hover, .dropdown:hover .dropbtn {
    background-color: transparent;
}

li.dropdown {
	display: inline-block;

	/*REF_RESPONSIVE*/
	width: 10em;

	float: left; /*else gaps appear between the cordon svgs*/
}

/*REF_SubMenusToCenter*/
.dropdown-centered-submenu
{
	position: relative;
	left: -35px;
	width: inherit;
	text-align: right;
}

.dropdown-content {
	display: none;
	background-color: #36444D;
	min-width: 200px;
	z-index: 1;

	/*REF_SubMenusToCenter*/
	position: fixed;
	text-align: center;

	/*REF_RESPONSIVE*/
	font-size: 1.2em;
}

.dropdown-content a {
	color: #EEEEE2;
	padding: 0px 15px 0px 15px;
	text-decoration: none;
	display: block;
	text-align: center;

	/*adding separating line between submenu items*/
	border-style: hidden hidden solid hidden;
	border-width: 1px;
	border-color: #232C34;
	
	/*submenu items same height as cordon menu*/
	/*REF_RESPONSIVE*/
	line-height: 1.7em;
}

.dropdown-content a:hover {
	background-color: #232C34
}

.dropdown:hover .dropdown-content {
    display: block;
}
/* SUBMENU <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/


/* FOOTER >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
.footer 
{
	position: fixed;
	overflow: hidden;
	bottom: 0;
	width: 900px;
	background-color: rgb(33, 42, 49);
	text-align:center;
	font-size: 16px; /*important for mobile*/

	/*REF_RESPONSIVE*/
	height: 90px;
}
/* FOOTER <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/

/* AUDIO PLAYER >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
.audio-player-container{
	padding-top: 0px;
	width: 900px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#audio-info{
	color: #C7C8C6;
	text-align: center;
	margin-top: 0px;
	padding-bottom: 0px;

	/*REF_RESPONSIVE*/
	height: 25px;
	line-height: 35px;
	padding-top: 0px;
	font-size: 1em;
}

#audio-info .artist{
	font-weight:bold;
}

#audio-info .album-title{
	font-weight:bold;
}

.audio-player{
	width: 900px;
	line-height: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.audio-player-table{
	width: 900px;
	table-layout: fixed;
	border-collapse: separate;

	/*REF_RESPONSIVE*/
	border-spacing: 0;
}

.audio-player-td{
	display: inline-block;
	padding: 0;
}

.player-control-label{
	text-align: center;
	padding: 0;

	/*REF_RESPONSIVE*/
	min-width: 66px;
	min-height: 26px;
	line-height: 26px;
}

td.player-control-label{
	background:url(audio_player_label_bkg.svg) no-repeat;

	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: 0;

	/*REF_RESPONSIVE*/
	font-size: 1.0em;
	background-size: 66px 26px;
	width: 66px;
	height: 26px;
}

.audio-player-toggle-mute{
	margin: auto;
	text-align: center;
	cursor: pointer;

	/*REF_RESPONSIVE*/
	width: 66px;
	height: 26px;
}

.audio-player-toggle-mute-img{
	vertical-align: middle;

	/*REF_RESPONSIVE*/
	width: 66px;
	height: 26px;
}

td.player-control-slider{
	background-position: center; 

	text-align: center;
	margin-left: auto;
	margin-right: auto;

	/*REF_RESPONSIVE*/
	background:url(audio_player_slider_bkg.svg) no-repeat;
	background-size: 166px 26px;
	width: 166px;
	height: 26px;
}

.player-control-big-button{

}

td.player-control-big-button{
	/*REF_RESPONSIVE*/
	width: 60px;
	height: 50px;
	padding-top: 10px;
}

button.player-control-big-button{
	margin: 0px;
	border: 0px;
	cursor: pointer;

	/*REF_RESPONSIVE*/
	width: 60px;
	height: 50px;
}

/*Two cells around the three player-control-big-buttons for the mobile version to break table rows at the correct position*/
.player-control-big-buttons-sep{
	padding: 0;

	/*REF_RESPONSIVE*/
	width: 0px;
}

.audio-player-controls{
	width: 900px;
	line-height: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-family: "Courier New";
	font-weight: bold;
}

button#play{
	background:url(audio_player_btn_play.svg) no-repeat;

	/*REF_RESPONSIVE*/
	background-size: 60px;
}

button#pause{
	background:url(audio_player_btn_pause.svg) no-repeat;

	/*REF_RESPONSIVE*/
	background-size: 60px;
}

button#prev{
	background:url(audio_player_btn_prev.svg) no-repeat;

	/*REF_RESPONSIVE*/
	background-size: 60px;
}

button#next{
	background:url(audio_player_btn_next.svg) no-repeat;

	/*REF_RESPONSIVE*/
	background-size: 60px;
}

.player-control-slider-bar{
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	padding: 0px;

	text-align: left;
	background: #404040;

	cursor: pointer;

	/*REF_RESPONSIVE*/
	width: 148px;
	height: 8px;
	margin-top: 9px;
}

#volume-knob{
	background:url(audio_player_knob.svg) repeat;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0; 
	padding: 0;
	height: 100%;

	display: inline-block;

	/*REF_RESPONSIVE*/
	margin-bottom: 5px;
}

#progress{
	background:url(audio_player_song_pos.svg) repeat;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0; 
	padding: 0;
	height: 100%;

	display: inline-block;

	/*REF_RESPONSIVE*/
	margin-bottom: 5px;
}

#volume-percent{
}

#current-time{
}

#duration{
}

tr.currently-playing{
	background: rgb(214, 214, 182);
}
/* AUDIO PLAYER <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/