// ==========================================================

/* 320 and Up */
/* Display table-based navigation upstart*/
/* Version: 1.0 */
/* Author: Andy Clarke */
/* URL: http://stuffandnonsense.co.uk/projects/320andup */
// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0

// ==========================================================

/* Banner =================================================== */

[role="banner"] {
margin : 0 auto;
padding-top : @baselineheight; 
width : 90%; 

a[href="#navigation"] {
display : block;
position : absolute;
top : 11px;
right : 22px;
width : 43px;
height : 43px;
white-space : nowrap;
overflow : hidden;
background-color : lighten(@basecolor, 20%);
border : 1px solid lighten(@basecolor, 15%); 
.rounded(4px);
color : lighten(@basecolor, 75%);
.font-size(32);
line-height : 42px;
text-align : center;
text-decoration : none; }
}

/* Navigation =================================================== */

[role="navigation"] {
margin : 0 auto @baselineheight;
width : 90%;
background-color : lighten(@basecolor, 20%);
border : 1px solid lighten(@basecolor, 15%); 

p {
margin-bottom : 0; 
padding : 6px 11px;
color : @white; }

a {
color : @white; }
}

/* Content =================================================== */

.content {
margin : 0 auto;
width : 90%; }

/* contentinfo =================================================== */

[role="contentinfo"] {
padding : @baselineheight 0; 
border-top : 3px solid lighten(@basecolor, 60%); 

small {
display : block;
margin : 0 auto @baselineheight;
width : 90%; }
}

// 480px
@media only screen and (min-width: 480px) {
/* Styles */
}

// 600px
@media only screen and (min-width: 600px) {
/* Styles */
}

// 768px
@media only screen and (min-width: 768px) {

body {
display : table; 
border-collapse : collapse; }

[role="banner"] a[href="#navigation"] {
.hidden; }

[role="navigation"] {
display : table-header-group; 

p {
margin : 0 auto;
width : 90%; }
}

}

// 992px
@media only screen and (min-width: 992px) {
/* Styles */
}

// 1382px
@media only screen and (min-width: 1382px) {
/* Styles */
}

// 2x
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
/* Styles */ 
}