/* 
wireframe_cp 
============
- medium density: samsung galaxy tab 3
- high density: htc m8, iphone 5
*/

html {width:100%; height:100%;}
body {background:#fff; padding:0; margin:0;}
header {height:3em;}
sidebar {display:block; position:absolute; top:3em; left:0; bottom:0; width:20%; background:#ccc; overflow:auto;}
content {display:block; position:absolute; top:3em; right:0; bottom:0; width:80%; overflow:auto;}

/* pc [narrow]  */
@media screen and (max-resolution: 96dpi) and (max-width:850px) {    
    sidebar {top:3em; height:3.6em; width:100%; overflow:hidden;}
    content {top:6.5em; left:0; width:100%; }
    .not-crucial {display:none !important;}    
}    

/* mobile [medium density] */
@media only screen (min-resolution: 160ppi) { 
    header {height:5em;}   
    sidebar {top:5em; height:5em; width:100%; overflow:hidden;}
    content {top:10em; left:0; width:100%;}
}

/* mobile [medium density / vertical] */
@media only screen (min-resolution: 160ppi) and (max-width: 600px) {
    .not-crucial {display:none !important;}
}

/* mobile [high density] */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution:2dppx) { 
    sidebar {top:3em; height:4em; width:100%; overflow:hidden; dispay:block;}
    content {top:7em; left:0; width:100%; display:block;}
    .not-crucial {display:none !important;}    
}