/* Mediaquery Debugging awesomeness */
body::before{ 
  content: " "; 
  background: rgba(155,155,155, 0.7);   
  border-bottom:1px solid #aaa;
  font-family: "Monaco", "Courier New", monospace;
  font-size:10px; color:#333;
  display: block; text-align: center; position: absolute; top: 0px; left:0px; z-index: 666;
  width:100%;
}

body.toolbar::before{ top: 30px}
body.toolbar-drawer::before{ top: 65px}
body.admin-menu::before{ top: 20px}

@media only screen  and (max-width: 319px){ 
  body::before{ content: "phone: up to 320px"; }
}
@media only screen and (min-width: 320px) and (max-width: 480px){ 
  body::before{ content: "phone vertical: 320px to 480px";}
}
@media only screen and (min-width: 481px) and (max-width: 600px){ 
  body::before{ content: "tablet Small: 481px to 600px";}
}
@media only screen and (min-width: 601px) and (max-width: 767px){ 
  body::before{ content: "tablet: 601px to 767px";}
}
@media only screen and (min-width: 768px) and (max-width: 992px){ 
  body::before{ content: "screen 768px to 992px";}
}
@media only screen and (min-width: 993px) and (max-width: 1383px){ 
  body::before{ content: "screen 993px to 1200px";}
}
@media only screen and (min-width: 1383px){ 
  body::before{ content: "screen 1383px + ";}
}