@font-face {
	FONT-FAMILY: MainFlow;
	SRC: url("./font/OpenSans-Regular.ttf") format("truetype");
	FONT-WEIGHT: 400;
	FONT-STYLE: normal;
}

@font-face {
	FONT-FAMILY: MainPre;
	SRC: url("./font/IBMPlexMono-Regular.ttf") format("truetype");
	FONT-WEIGHT: 400;
	FONT-STYLE: normal;
}

@font-face {
	FONT-FAMILY: MainFlowBold;
	SRC: url("./font/OpenSans-Semibold.ttf") format("truetype");
	FONT-WEIGHT: 700;
	FONT-STYLE: bold;
}

@font-face {
	FONT-FAMILY: NavFlow;
	SRC: url("../css/OpenSans-Semibold.ttf") format("truetype"),
	FONT-WEIGHT:400;
	FONT-STYLE:normal;
}


HTML
{
	
}

BODY
{
	MARGIN: 2em;

 	FONT-FAMILY: MainFlow, Arial, Helvetica, Geneva, Sans-Serif;
	-webkit-font-smoothing: subpixel-antialiased;
	FONT-SIZE: 16px;
	LINE-HEIGHT: 24px;
	FONT-WEIGHT: normal;
	FONT-STYLE: normal;
	TEXT-ALIGN: left;
	TEXT-DECORATION: none;
	COLOR: .202020;

}


/* 
 *
 *    BASIC PAGE ELEMENTS
 *
 */


DIV.left
{
	float:left;
}

DIV.player
{
	margin: 0px;
	float:left;
	padding: 12px;
	padding-top: 16px;
	width: 80px;
}

IFRAME.player
{
	margin: 0px;
	padding: 0px;
	width: 80px;
	height: 60px;
}

IMG.hdrimg
{
	width: 80%;
	height: auto;
}

DIV.audio
{
	margin-bottom: 2em;
}

SPAN.title
{
 	font-family: MainFlowBold, Modern, Arial, Geneva, Sans-Serif;
	font-size: 120%;
}

DIV.freeandeasy,
DIV.footer
{
	margin: 0px;
	float:left;
	padding: 12px; 
}

SPAN.monospaced
{
 	FONT-FAMILY: MainPre, Consolas, Courier, Courier-New, Geneva, Sans-Serif;
}

PRE,
SPAN.Impressum
{
 	FONT-FAMILY: MainPre, Consolas, Courier, Courier-New, Geneva, Sans-Serif;
	FONT-SIZE: 12px;
}

PRE.qqq,
SPAN.qqq,
SPAN.qqqs,
P.qqq
{
 	FONT-FAMILY: MainFlow, Helvetica, Arial, Consolas, Courier, Courier-New, Geneva, Sans-Serif;
	font-size: 90%;
	line-height: 150%;
	Width: 80%;
}

SPAN.qqqs
{
	font-size: 80%;
}

PRE.text
{
	margin: 0px;
	line-height: 150%;
}


PRE.impressum,
SPAN.impressum
{
	FONT-SIZE: 75%;
}




@media
    ONLY SCREEN AND (max-width : 1000px)
{
	BODY
	{
		FONT-SIZE: 15px;
	}

	IMG.hdrimg
	{
		width: 95%;
	}

	PRE.qqq,
	SPAN.qqq,
	SPAN.qqqs,
	P.qqq
	{
		font-size: 100%;
		Width: 90%;
	}
}

@media
    ONLY SCREEN AND (max-width : 750px)
{
	DIV.player,
	IFRAME.player
	{
		width: 120px;
		height: 100px;
		padding-bottom: 20px;
	}

	BODY
	{
		FONT-SIZE: 14px;
	}
}

@media
    ONLY SCREEN AND (max-width : 360px)
{
	BODY
	{
		FONT-SIZE: 12px;
	}
}