/* klingt.org/common style sheet */
/* colors will be defined in each page */

/* general */
body {
	font-family: Verdana,Arial,Helvetica,sans-serif;
	text-transform: lowercase;
	/*font-size: 95%;*/
	/*padding-right: 15px;*/
	margin-left: 0px;
	margin-right: 0px;
}

a {
       	text-decoration: underline;
}

input {
	font-size: smaller;
}

select {
	font-size: smaller;
}

textarea {
	font-family: Verdana,Arial,Helvetica,sans-serif;
        font-size: smaller;
}     

details > summary {
  	padding: 2px 6px;
  	border: none;
  	/*box-shadow: 3px 3px 4px black;*/
  	cursor: pointer;
	text-decoration: underline;
  	list-style: none;
}

/*
details[open] > summary {
    list-style-type: '-';
}
*/

td {
	padding: 0;
	margin: 0;
}

@media screen and (min-device-width: 801px) {
	/* for big screens: */

	/* head of the page */
	#pagehead {
		position: absolute;
		font-size: larger;
		top: 15px;
		left: 130px;
		text-align: center;
		padding-left: 10px;
		padding-right: 10px;
		margin-bottom: 10px;
		border-left: 2px solid;
		border-right: 2px solid;
	}
	
	/* navigation  */
	#left_navigation {
		position: fixed;
		width: 110px;
		left: 10px;
	}
	
	#right_navigation {
	/*	position: relative;*/
        	width: 220px;
		top: 0px;
		margin-left: 5px;
		float: right;
	}

	#bottom_navigation {
                position: relative;
                padding-top: 10px;
		padding-bottom: 10px;
                margin: 5px;
		clear: both;
		float: left;
        }
	
	#navihead {
		position: relative;
		width: 110px;
		height: 50px;
	}
	
	.navigationitem {
		position: relative;
		margin-bottom: 5px;
        	text-align: left;
		padding-left: 5px;
		border-left: 2px solid;
		border-right: 2px solid;
		float: inherit;
		overflow: hidden;
	}
	
	.feature {
		position: relative;
		font-size: smaller;
		margin-top: 15px;
		text-align: left;
		padding: 5px;
		border-left: 2px dashed;
		border-bottom: 2px dashed;
	/* invisible float image bug: 1.2 */
		line-height: normal;
	}

	.bottomfeature {
                position: relative;
                font-size: smaller;
                margin-bottom: 15px;
                margin-top: 15px;
                text-align: left;
                padding: 5px;
                border-left: 2px dashed;
                border-bottom: 2px dashed;
        /* invisible float image bug: 1.2 */
                line-height: normal;
		clear: both;
        }

	.headline {
		color: white;
	}

	.mp3artist {
		float: left;
	}
	
	.mp3title {
		display:inline;
	}

        .mp3feature {
                position: relative;
                /*font-size: smaller;*/
		width: 39em;
                margin-top: 15px;
                text-align: left;
                padding: 5px;
                border-left: 2px dashed;
                border-bottom: 2px dashed;
        /* invisible float image bug: 1.2 */
                line-height: normal;
        }

	
	
	/* the content area */
	#content_area {
		position: absolute;
		/*width: 700px;*/
		padding: 15px;
		margin-bottom: 30px;
		margin-right: 10px;
		margin-left: 10px;
		min-height: 85%;
		top: 50px;
		left: 130px; 
		overflow:auto;
		border: 2px dashed;
	}

	#popupcontent_area{
                position: absolute;
                padding: 15px;
                margin-bottom: 30px;
                margin-right: 10px;
                margin-left: 10px;
                min-height: 85%;
                top: 50px;
                left: 20px;
                overflow:auto;
                border: 2px dashed;
        }
	.content_line {
                margin-bottom: 5px;
                display: table-row;
		overflow:auto;
        	/* invisible float image bug: 1.2 */
                line-height: normal;
        }
	
	.content_cell {
		padding-left: 5px;
		padding-right: 5px;
		display: table-cell;
		/* invisible float image bug: 1.2 */
        	line-height: normal;
		margin: 2px;
	}

	.content_headline {
		margin-bottom: 5px;
        	padding-left: 15px;
        	padding-right: 15px;
	/*        clear: both;*/
	/* invisible float image bug: 1.2 */
        	line-height: normal;
		font-size: larger;
	}
	
	.cellcontainer {
		display: table;
		/*float: left;*/
		table-layout: auto;
		width:100%;
	}
	
	.playerbutton {
		/*background-color:rgb(20,20,20);*/
		cursor: pointer;
		color: white;
		border: none;
		background: none;
		text-decoration:none;
		/*margin-top: 5px;*/
		/*padding: 3px;*/
		font-size: 120%;
	}

	footer {
            	width: 100%;
            	bottom: 0px;
	    	left: 0px;
            	position: fixed;
		z-index: 9;
        }

 /* end for big screens */
}

@media screen and (max-device-width: 800px) {
        /* target mobile devices*/
        body {
		font-size: x-large;
	}
	        /* head of the page */
        #pagehead {
		width: 100%;
                white-space:nowrap;
		/*font-size: larger;*/
                left: 10px;
                text-align: left;
                padding-left: 5px;
                padding-right: 5px;
		margin-right: 5px;
                margin-bottom: 10px;
		margin-top: 10px;
                border-left: 2px solid;
                border-right: 2px solid;
        }

        /* navigation  */
        #left_navigation {
		min-width: 100%;
                left: 10px;
        }

        #right_navigation {
		margin-top: 10px;
		margin-bottom: 10px;
              	position: relative;
                width: 100%;
                clear: both;
        }
	#bottom_navigation {
                position: relative;
                padding-top: 10px;
                margin: 5px;
                clear: both;
                float: left;
        }


        #navihead {
                position: relative;
                width: 100%;
                height: 5px;
        }

        .navigationitem {
                position: relative;
                margin-bottom: 5px;
		padding-left: 5px;
                padding-right: 5px;
                text-align: left;
                border-left: 2px solid;
                border-right: 2px solid;
		float: left;
		clear: both;
		width: 100%;
        }

        .feature {
                font-size: smaller;
                margin-top: 10px;
		margin-left: 5px;
		margin-right: 5px;
                text-align: left;
                padding: 5px;
		border: 2px dashed;
        /* invisible float image bug: 1.2 */
                line-height: normal;
		/*float: bottom;*/
        }

	.bottomfeature {
                font-size: smaller;
                margin-top: 10px;
                margin-left: 5px;
                margin-right: 5px;
                text-align: left;
                padding: 5px;
                border: 2px dashed;
                line-height: normal;
        }

        #content_area {
		width: 100%;
                /*left: 0px;*/
                padding: 0px;
                margin-bottom: 20px;
		margin-left: 2px;
		margin-right: 2px;
                min-height: 85%;
                border: 2px dashed;
		overflow: auto;
		clear: both;
        }

        .content_cell {
                padding-left: 2px;
                padding-right: 2px;
                /* invisible float image bug: 1.2 */
                line-height: normal;
                margin: 2px;
		display: table-cell;
		font-size: smaller;
        }

        .content_line {
                margin-bottom: 5px;
        /* invisible float image bug: 1.2 */
                line-height: normal;
		display:  table-row;
        }

        .content_headline {
                margin-bottom: 5px;
                padding-left: 5px;
                padding-right: 5px;
        /* invisible float image bug: 1.2 */
                line-height: normal;
                font-size: larger;
		clear: both;
        }

	.mp3artist{
		float:left;
	}

	.mp3title {
		clear: both;
		float: left;
        }

        .mp3feature {
                position: relative;
                /*font-size: smaller;*/
                margin-top: 15px;
		width: 90%;
                text-align: left;
                padding: 5px;
                border-left: 2px dashed;
                border-bottom: 2px dashed;
        /* invisible float image bug: 1.2 */
                line-height: normal;
        }


        .cellcontainer {
                display: table;
		table-layout: fixed; i
		width: 100%:
        }
	.playerbutton {
		/*background-color:rgb(20,20,20);*/
		cursor: pointer;
                color: white;
                border: none;
                background: none;
                text-decoration:none;
		padding-left: 25px;
		padding-right: 25px;
		/*
                margin-top: 5px;
                padding: 3px;
		*/
		font-size: 120%;
        }

	details > summary {
		width: 100%:
	}

	footer {
            width: 100%;
            bottom: 0;
            position: relative;
        }
}