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

sidebar {background:#ccc;}
sidebar p {margin:0 1em;}
sidebar #greeting {padding:1em; font-size:1.1em; background:#aaa; color:#fff; margin:0 0 2em 0; font-weight:700;}
sidebar h2 {margin:0 0 1em .6em;}
sidebar h2 span {text-transform: capitalize; font-weight:700;}
sidebar ul {padding:0 1em 0 2em;}
sidebar ul li {font-size:1em; margin:0 0 1em 0;}
sidebar ul li strong {font-size:1.2em; display:block;}
sidebar nav {padding:0 1em;}
sidebar nav .button,
sidebar nav button {width:100%; margin:0 0 1em 0; padding:.5em; border:none; background:#fff; font-size:1.3em; text-align:center;}
sidebar dl {padding:1em;}
sidebar dl dd {margin-bottom:1em;}
sidebar select {width:100%; border:none; padding:.5em; background:#fff; border-radius:5px; font-size:1.3em; margin:0 0 1em 0;}
sidebar a {width:100%; display:block; font-size:1.2em; margin-bottom:.75em; color:#333;}


/* pc [narrow]  */
@media screen and (max-resolution: 96dpi) and (max-width:850px) {    
    sidebar {padding:.3em;}
    sidebar p {display:none;}
    sidebar nav {text-align:center;  }
    sidebar nav a,
    sidebar nav button {width:25% !important; display:inline-block;}        
}    

/* mobile [medium density] */
@media only screen (min-resolution: 160ppi) { 
    sidebar {padding:.5em;}
    sidebar p {display:none;}
    sidebar nav {text-align:center;}
    sidebar nav a,
    sidebar nav button {width:25% !important; display:inline-block; margin:auto .25em !important; padding:.3em 1em !important; font-size:2em !important;}    
}

/* mobile [high denisty] */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution:2dppx) { 
    sidebar {padding:.5em;}
    sidebar p {display:none;}
    sidebar nav {text-align:center;}
    sidebar nav a,
    sidebar nav button {width:29% !important; display:inline-block; margin:0 .25em !important;}
}