/* Mobile layout 240–479 px Zoomed out below 320 px */ @media screen and (min-width: 15em) { } /* Wide mobile layout 480-767 px Zoomed in above 480 px */ @media screen and (min-width: 30em) { } /* Tablet layout 600-911 px Zoomed in above 600 px */ @media screen and (min-width: 37.5em) { body { padding: 2em 0; } blockquote { top: 10px; right: 50px; position: absolute; } h1 { /* Open up the top section height so we don't collapse on the blockquote */ margin-top: .5em; } ol { margin: 0 0 0 1em; } ol li { width: 50%; margin: 0; } ol li:nth-child(1), ol li:nth-child(2) { border-top: none; } } /* Widescreen layout 912-1887 px Zoomed in above 912 px */ @media screen and (min-width: 57em) { .container { width: 912px; } .resume { position:relative; padding: 40px 50px; } blockquote { top: 40px; right: 50px; position: absolute; } h1 { margin-top: 0; font-size: 48px; text-transform: uppercase; letter-spacing: 3px; font-weight: normal; } h2 { text-transform: uppercase; font-style: italic; letter-spacing: 2px; font-weight: normal; } h3 { float: left; width: 16%; } h3+p { float: left; width: 84%; } ul li { width: 28%; float: left; } ul dl { dt { font-size: 122%; font-weight: normal; margin-bottom: .75em; } dd { padding: 0 4em 0 0; } } ol { float: left; width: 84%; margin: .6em 0 0; } ol li { width: 33%; margin: 0; } ol li:nth-child(3n) { width: 34%; } ol li:nth-child(1), ol li:nth-child(2), ol li:nth-child(3) { border-top: none; } dl { margin: .5em 0 0; dt { } dd { } strong { float: right; margin-top: -2em; } em { font-size: 130%; font-style: normal; } } } /* Huge-screen layout 1888-2520 px Zoomed in above 1920 px */ @media screen and (min-width: 118em) { }