/* Document */

body {
        /* workaround for fixed div rendering in safari */
        -webkit-font-smoothing: subpixel-antialiased;
	font-size: 17px;
	line-height: 20px;
	color: #000;
	background-color: #FFF;
	}

a:link {	
	color: #000;
	/* text-shadow: 0px 0px 2px rgb(0, 0, 0); */
	text-decoration: underline;
	border-bottom: 1px #000; 
	}

a:visited {
	color: #000;
	}

a:hover {
	color: #000;
	}
	
a:active { 
	color: #FFF; 
	}

iframe {
    	width: 100%;
    	height: 100%;
	}

ul {
	margin: 0px;
	list-style-type: none;
	}


/* @ */

@font-face{ 
	font-family: 'mtdbt2f-PP';
	src: url('../_Fonts/mtdbt2f-PP.eot');
	src: url('../_Fonts/mtdbt2f-PP.eot?#iefix') format('embedded-opentype'),
	     url('../_Fonts/mtdbt2f-PP.woff') format('woff'),
	     url('../_Fonts/mtdbt2f-PP.ttf') format('truetype'),
	     url('../_Fonts/mtdbt2f-PP.svg#webfont') format('svg');
}

@font-face{ 
	font-family: 'mtdbt2f4d-915';
	src: url('../_Fonts/mtdbt2f4d-915.eot');
	src: url('../_Fonts/mtdbt2f4d-915.eot?#iefix') format('embedded-opentype'),
	     url('../_Fonts/mtdbt2f4d-915.woff') format('woff'),
	     url('../_Fonts/mtdbt2f4d-915.ttf') format('truetype'),
	     url('../_Fonts/mtdbt2f4d-915.svg#webfont') format('svg');
}



/* Fonts */

.helvetica {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
	}

.courier {
        font-family: "Courier New", Courier, monospace;
        }

.dactylographe {
        font-family: "Dactylographe", Courier, "Courier New", monospace;
        }

.mtdbt2f-PP {
        font-family: "mtdbt2f-PP", Courier, "Courier New", monospace;
        }

.mtdbt2f4d-915 {
        font-family: "mtdbt2f4d-915", Courier, "Courier New", monospace;
        }

.caption {
        font-size: 12px;
        line-height: 14px;
        }



/* id */

#radio {
	position: fixed;
	z-index: 0;
	top: 50%;
	left: 50%;
	width: 480px;
	height: 360px;
 	margin-top: -180px;
	margin-left: -240px;
	}

#name {
	width: 320px;
	}

#controls {
	position:fixed;
	bottom: 5px;
	width: 320px;	
	}

#text {
	visibility: hidden;
	width: 320px;
	}

#logo {
	mix-blend-mode: multiply;    
	-webkit-filter: drop-shadow(0px 0px 20px #F66);
	filter: drop-shadow(0px 0px 20px #F66);
	}

#logo:hover {
	mix-blend-mode: multiply;    
	-webkit-filter: drop-shadow(0px 0px 20px #F00);
	filter: drop-shadow(0px 0px 20px #F00); 
	}


/* Containers */

.menuContainer {
	position: absolute;
	top: 40px;
	left: 30px;
	width: 400px;
	}

.detailContainer {
	margin-top: 18px;
	margin-bottom: 18px;
	margin-left: 20px;
	width: 400px;
	}

.displayContainer {
	position: fixed;
        /* workaround for fixed div rendering in safari */
        -webkit-font-smoothing: subpixel-antialiased;
	top: 0px;
	left: 0px;
	width: 250px;
	padding:20px 30px 20px 50px;
	z-index:99;
	background-color:#FFF;
	box-shadow: 2px 2px 20px #FCC;
	}

.captionContainer {
	padding-top: 10px;
	}
	
	
/* Navigation */

.active {
	}

.active a {
	color:#FFF;
	}

.active a:hover {
	color:#000;
	}

.active a:active {
	color:#FFF;
	}

.static {
	}
	
.static a {
	/*color:#FC0;*/
	}

.static a:hover {
	color:#000;
	}

.static a:active {
	color:#FFF;
	}


/* Utility */

.black{
	color:#000;
	}

.black a {
	color:#000;
	}

.hide 	{
	visibility: hidden;
	}

.show 	{
	visibility: visible; 
	}

.collapsible {
	display: none;
	}

.active a::before {
	content: "";
	}

.plain {
	text-decoration: none;
	}

.plain a {
	text-decoration: none;
	}







/* mobile */

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

html {
        -webkit-tap-highlight-color: rgba(255);
        }

body {
        }

.menuContainer {
        position: absolute;
        top: 40px;
        left: 30px;
        width: 75%;
        }

.detailContainer {
        margin-top: 18px;
        margin-bottom: 18px;
        margin-left: 20px;
        width: 75%;
        }