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

.jswm-fatal, .jswm-warning, .jswm-info { position:relative; display: none; }
.jswm-fatal { background-color: red; color:black; padding: 3px 6px; font-weight: bold; }
.jswm-warning {  background-color: rgb(209,209,33); color:black; padding: 3px 6px; font-weight: bold; }
.jswm-info {  background-color: cornflowerblue; color:black; padding: 3px 6px; font-weight: bold; }

/* fatal -- show-stoppers */ 
.no-js .jswm-fatal, .no-video .jswm-fatal, .no-audio .jswm-fatal
.no-opacity .jswm-fatal { 
    display: block; 
} 


/* warning - ugly, annoying, broken features */

.no-csscolumns .jswm-warning,
.no-csstransforms .jswm-warning, .no-csstransitions .jswm-warning { 
    display: block; 
}

/* unfortunate */
.no-fontface .jswm-info, .no-textshadow .jswm-info,
.no-cssgradients .jswm-info {
    display: block;
}   



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

.no-js-warning, .no-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;
}

.no-js .no-js-warning, .no-no-flexbox .no-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;
}


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



/*
 * 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-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 {
    
}

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