/* 
 * Warnings for lack of feature support
 * System 1
 * use with div to form groups
 */

/* If you can do something all at once, do it... */
.rcf-fatal, .rcf-warning, .rcf-info { position:relative; display: none; padding-right: 18px; }
.rcf-warning span, .rcf-info span { color:red; }
.rcf-fatal span { color: white; } 

/* Things that must be different must be separate */
.rcf-fatal { background-color: red; color:black; padding: 3px 6px; font-weight: bold; }
.rcf-warning { background-color: #EAEA11;  color: black;  font-weight: bold;  padding: 3px 6px; }
.rcf-info {  background-color: #00B4CC; color:black; padding: 3px 6px; font-weight: bold; }

/* The next ones you adjust according to needs */
/* fatal -- show-stoppers */ 
.no-js .rcf-fatal { 
    display: block; 
} 
/* warning - ugly, annoying, broken features */
.no-video .rcf-warning, .no-audio .rcf-warning { 
    display: block; 
}
/* unfortunate */
.no-csscolumns .rcf-info,
.no-csstransforms .rcf-info, .no-csstransitions .rcf-info,
.no-fontface .rcf-info, .no-textshadow .rcf-info,
.no-boxshadow .rcf-info, .no-borderradius .rcf-info,
.no-cssgradients .rcf-info {
    display: block;
}   


/*
 * System 2
 * use with spans inside group containers
 */

.no-js-warning, .no-flexbox-warning, .no-flexbox-legacy-warning, .no-draganddrop-warning, 
.no-rgba-warning, .no-hsla-warning, .no-multiplebgs-warning, .no-backgroundsize-warning, 
.no-borderimage-warning, .no-borderradius-warning, .no-boxshadow-warning, .no-textshadow-warning, 
.no-opacity-warning, .no-cssanimations-warning, .no-csstransitions-warning, .no-csscolumns-warning, 
.no-cssgradients-warning, .no-cssreflections-warning, .no-csstransforms-warning, .no-3d-warning,
.no-fontface-warning, .no-generatedcontent-warning, .no-video-warning, .no-audio-warning, .no-localstorage-warning, 
.no-sessionstorage-warning {
    display: none !important;
}

/* Modernizr adds the prefix classes */
.no-js .no-js-warning, .no-flexbox .no-flexbox-warning, .no-flexbox-legacy .no-flexbox-legacy-warning,
.no-draganddrop .no-draganddrop-warning, .no-rgba .no-rgba-warning, .no-hsla .no-hsla-warning,
.no-multiplebgs .no-multiplebgs-warning, .no-backgroundsize .no-backgroundsize-warning,
.no-borderimage .no-borderimage-warning, .no-borderradius .no-borderradius-warning,
.no-boxshadow .no-boxshadow-warning, .no-textshadow .no-textshadow-warning,
.no-opacity .no-opacity-warning, .no-cssanimations .no-cssanimations-warning,
.no-csstransitions .no-csstransitions-warning, .no-csscolumns .no-csscolumns-warning,
.no-cssgradients .no-cssgradients-warning, .no-cssreflections .no-cssreflections-warning,
.no-csstransforms .no-csstransforms-warning, .no-3d .no-3d-warning, .no-fontface .no-fontface-warning,
.no-generatedcontent .no-generatedcontent-warning, .no-video .no-video-warning, .no-audio .no-audio-warning,
.no-localstorage .no-localstorage-warning, .no-sessionstorage .no-sessionstorage-warning {
    display:inline !important;
    font-family: "Courier New", Courier, monospace;
}


/* jQuery companion script, place in docready:
 * $('.close-warning').on('click',function(event){ event.preventDefault(); $(this).parent().hide('slow'); }); */
.close-warning {
    background-color: #FFFFFF;
    border: 2px solid red;
    border-radius: 0 0 0 12px;
    color: red;
    cursor: pointer;
    font-size: 18px;
    padding: 1px 3px;
    position: absolute;
    right: -2px;
    top: -2px;
}



/*
 * These are the detections 
 * available with the custom 
 * compilation of modernizr.js 
 * I've provided with this version
 * of jSyncWithMedia. See modernizr.com
 * for modernizr documentation, tutorials,
 * etc.
 * 
 * tip *
 * I use the ones below as templates.
 * Copy above and then place your own
 * subclass between the .no- and the 
 * first curly brace {. 

 .no-js {
    
}

.no-flexbox {
    
}

.no-flexbox-legacy {
    
}

.no-draganddrop {
    
}

.no-rgba {
    
}

.no-hsla {
    
}

.no-multiplebgs {
    
}

.no-backgroundsize {
    
}

.no-borderimage {
    
}

.no-borderradius {
    
}

.no-boxshadow {
    
}

.no-textshadow {
    
}

.no-opacity {
    
}

.no-cssanimations {
    
}

.no-csstransitions {
    
}

.no-csscolumns {
    
}

.no-cssgradients {
    
}

.no-cssreflections {
    
}

.no-csstransforms {
	    
}

.no-3d {
	
}

.no-fontface {
    
}

.no-generatedcontent {
    
}

.no-video {
    
}

.no-audio {
    
}

.no-localstorage {
    
}

.no-sessionstorage {
    
}

* * * * * * * * * * * * * * * * * *  EXAMPLE USAGE

		<div class="rcf-fatal">Your browser does not support <span class="no-js-warning"> JavaScript</span>
		<span class="no-video-warning"> video</span>	 <span class="no-audio-warning"> audio </span>
		<span class="no-opacity-warning"> opacity </span>.
		This is a fatal error.<div class="close-warning">X</div></div>  

		<div class="rcf-warning">Your browser does not support <span class="no-csscolumns-warning"> css columns</span>
		<span class="no-csstransforms-warning"> css transforms</span> <span class="no-csstransitions-warning"> css transitions</span>.
		Some features may not work, and the presentation will not look exactly as the author intended.<div class="close-warning">X</div></div>  

		<div class="rcf-info">Your browser does not support <span class="no-fontface-warning"> embedded fonts</span> 
		<span class="no-textshadow-warning"> text shadow</span> <span class="no-cssgradients-warning"> css gradients</span>.
		The presentation will not look exactly as the author intended.<div class="close-warning">X</div></div>

*
* 
* * * * * * * * * * * * * * * * * */