/* Colours */

/* red */
a, nav ul li p, header, aside *, section#content a, nav ul:first-child:after { color: rgb(237, 28, 36); }
/* blue */
body, nav ul li ul li a { color: rgb(0, 90, 170); }

/* Generic */

h1, h2, h3, h4 { margin: 0px; padding: 0px; }
header, section, nav, footer { display: block; }
ul li { padding: 0px 0px 4px 0px; }
a { text-decoration: none; }

/* Layout */

html { overflow-y: scroll; }
body { text-align: center; font-family: "Plan Grotesque Regular", georgia, sans-serif; font-style: normal; font-weight: normal; font-stretch: normal; font-variant: normal; font-size: 0.8em; line-height: 1.35; margin: 0px 0px 60px; }

header { padding: 5px 0px 20px; width: 360px; position: static; left: 50%; margin: -90px 0px 0px; z-index: 3; }
header h1 { font-size: 2.4em; letter-spacing: 0.03em; font-family: "Plan Grotesque Medium", georgia, sans-serif; font-style: normal; font-weight: normal; font-stretch: normal; font-variant: normal;  }
header h2 { font-size: 1em; font-weight: normal; margin: -3px 0px 0px; }

nav { position: fixed; top: 0px; bottom: 47px; z-index: 5; left: 50%; background: transparent url('../../../public/images/menu-bg.gif'); width: 360px; margin: 0px 0px 0px -180px; padding: 100px 0px 0px; overflow: hidden; }
nav div#navigations { display: table; height: 100%; width: 100%; }
nav div#navigations div.cell { display: table-cell; vertical-align: middle; }

nav ul, 
footer ul { padding: 0px; margin: 0px; list-style: none; }
nav ul { margin: 10px 0px 20px; }
nav ul p { margin: 0px; }
nav ul ul { margin: 4px 0px 0px; }
nav ul:nth-child(2):after { content: '\2219'; font-size: 2em; display: block; margin: 10px 0px -10px; color: rgb(237, 28, 36); }
nav ul ul:nth-child(2):after { display: none; }

nav#home { position: fixed; top: 8px; left: 0px; right: auto; bottom: auto; width: auto; height: auto; margin: 0px; padding: 0px; z-index: 10; background: none; }
nav#home a { display: inline; padding: 20px; font-family: 'Lucida Grande', sans-serif; font-weight: normal; font-size: 1.2em; }

section#content { position: absolute; left: 0px; top: 10px; bottom: 60px; text-align: left; z-index: 1; }
section#content header { padding: 0px; background: transparent; width: auto; margin: 0px; position: static; float: left; }

div#media { white-space: nowrap; position: absolute; top: 0px; left: 230px; height: 100%; display: table; }
div#media div.media { height: 100%; display: table-cell; vertical-align: middle; }
div#media div.media * { display: inline; margin: 0px 10px 0px 20px; }
body#index div#media { left: 0px; }

section#content div#project-details { display: table; height: 100%; }
section#content div#project-details article { display: table-cell; vertical-align: middle; }
section#content div#project-details article * { position: relative; }

section#content h1,
section#content h2,
section#content p,
section#colophon,
section#information { font-family: georgia, sans-serif; font-size: 0.9em; margin: 0px; padding: 0px 20px; width: 200px; }

section#content h1,
section#content h2 { margin: 0em 0em 1em; }

section#content h1:first-line,
section#content h2:first-line { font-weight: bold; }
section#content p:nth-child(2) { text-indent: 0em; }
section#content p { text-indent: 1.5em; }
section#content aside { font-family: georgia, sans-serif; font-size: 1em; width: 200px; float: left; margin: 1.5em 0em 0em; }
section#content aside h2 { font-style: normal; font-size: 0.9em; margin: 0.5em 20px 0em; padding: 0px; }
section#content aside p { text-indent: 0px; }
section#content aside a { display: inline; margin: 0px; text-decoration: underline; }

body#page section#content { left: 50%; width: 320px; margin: 30px 0px 0px -160px; padding: 0px 0px 40px; text-align: center; }
body#page section#content h1,
body#page section#content p { width: auto; text-indent: 0px; }
body#page section#content p { margin: 0em 0em 1em; }

section#information { display: none; position: fixed; top: 0px; padding: 10px 0px 0px; bottom: 47px; left: 50%; width: 500px; margin: 0px 0px 0px -250px; z-index: 6; background: transparent url('../../../public/images/menu-bg.gif'); }
section#information div { display: table; height: 100%; }
section#information article { display: table-cell; height: 100%; vertical-align: middle; width: 220px; }
article#colophon { padding: 0px 20px 0px 0px; text-align: left; width: 160px; }
article#information { padding: 0px 20px 0px 30px; text-align: right; }
article#colophon h1,
article#information h1 { font-size: 1em; display: none; }

section#information, nav, footer { text-shadow: 1px 1px 0px #fff; -webkit-text-shadow: 1px 1px 0px #fff; }

footer { font-family: "Plan Grotesque Medium", georgia, sans-serif; padding: 15px 0px 15px; background: transparent url('../../../public/images/menu-bg.gif'); margin: 100px 0px 0px; text-align: center; position: fixed; bottom: 0px; width: 100%; z-index: 7; }
footer ul { display: block; margin: 0px 0px 0px 35px; }
footer ul li { display: inline; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.8em; padding: 0px 70px 0px 0px; }