/* Some default styles for HTML5 elements */
section, header, footer { display: block; }


/* Basic layout */
html { margin: 0; padding: 2em 4em; }
body { margin: 0 auto; padding: 0.5em; }

body > header { margin: 0; padding: 1px 0; }


/* Main theme styles */
html { font-size: medium; font-family: ubuntu, sans-serif; color: #eee; background: #a6cd4c repeat-x url(media/green-gradient.svg); }
body { background-color: hsla(0, 0%, 50%, 0.5); border: 1px solid hsla(0, 0%, 50%, 0.25); border-radius: 30px;
	box-shadow: 0 0 40px #000, inset 0 0 20px hsla(0, 0%, 100%, 0.25), inset 0 0 1px hsla(0, 0%, 100%, 0.65); }

body > header { color: #444; background: #f7f7f7; border-radius: 20px 20px 0 0; border-bottom: 1px solid #dfdfdf; }
body > * { color: #333; background: #eee; }
body > section:nth-last-of-type(2) { border-radius: 0 0 20px 20px; }

a { color: #28551c; text-decoration: none; }
a:hover, a:focus, a:active { color: #7dad3d; text-decoration: underline; }

body {
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	-o-box-shadow: 0 0 40px #000, inset 0 0 20px hsla(0, 0%, 100%, 0.25), inset 0 0 1px hsla(0, 0%, 100%, 0.65);
	-moz-box-shadow: 0 0 40px #000, inset 0 0 20px hsla(0, 0%, 100%, 0.25), inset 0 0 1px hsla(0, 0%, 100%, 0.65);
	-webkit-box-shadow: 0 0 40px #000; }
body > header { -moz-border-radius: 20px 20px 0 0; -webkit-border-radius: 20px 20px 0 0; }
body > section:nth-last-of-type(2) { -moz-border-radius: 0 0 20px 20px; -webkit-border-radius: 0 0 20px 20px; }


/* Slide styles */
body > section { margin: 0; padding: 1px 1em; }
body > section h2 { font-size: 1.5em; }
body > section h3 { font-size: 1.25em; }
body > section h4 { font-size: 1em; }
body > section > ul > li { margin: 0.25em 0; padding: 0; }

body > section > div { margin: 0; padding: 0; }
body > section > div > *:first-child { margin: 1em 0 0 0; padding: 0; }
body > section > div > p { margin: 0; padding: 0; }

body > section pre { margin: 0; padding: 0.25em 0.5em; font-family: ubuntu, sans-serif;
	color: hsl(240, 100%, 25%); background: white; border-radius: 5px; }

body > section pre { -moz-border-radius: 5px; -webkit-border-radius: 5px; }


/* Section styles */
body > header { margin: 0; padding: 1em; }
body > header h1 { font-size: 2em; margin: 0; padding: 0; }
body > header p { margin: 0; padding: 0; }
body > header address { margin: 0.5em 0 0 0; padding: 0; font-style: normal; }

section#pipeline {}
section#pipeline > ul { position: relative; list-style: none; height: 12.5em; width: 22.5em; margin: 0; padding: 0;}
section#pipeline > ul > li { position: absolute; margin: 0; padding: 0.25em; width: 5em;
	background: hsla(240, 25%, 0%, 0.1); border-radius: 5px; border: 2px solid hsla(0, 0%, 25%, 0.5); text-align: center; }
section#pipeline > ul > li::before, section#pipeline > ul > li::after { content: ''; position: absolute; font-size: 2em; margin: 0; padding: 0; color: #333; }

section#pipeline > ul > li.webserver { left: 0; top: 0; padding: 0.5em; border-radius: 10px; }
section#pipeline > ul > li.browser { right: 0; top: ; padding: 0.5em; border-radius: 10px; }
section#pipeline > ul > li.http { left: 50%; top: 0.25em; margin-left: -2.75em; }
section#pipeline > ul > li.http::before { content: '↔'; top: -0.2em; left: -0.9em; opacity: 0.75; }
section#pipeline > ul > li.http::after { content: '↔'; top: -0.2em; right: -0.9em; opacity: 0.75; }

section#pipeline > ul > li.php { left: 0.25em; top: 3em; }
section#pipeline > ul > li.storage { left: 0.25em; top: 5.5em; }
section#pipeline > ul > li.html { right: 0.25em; top: 3em; }
section#pipeline > ul > li.css { right: 0.25em; top: 5.5em; }
section#pipeline > ul > li.javascript { right: 0.25em; top: 8em; }
section#pipeline > ul > li.svg { right: 0.25em; top: 10.5em; }

section#pipeline > ul > li.browser, section#pipeline > ul > li.javascript, section#pipeline > ul > li.svg { color: hsla(0, 0%, 20%, 0.5); }

section#sources > ul { font-size: 0.77em; }

section#pipeline > ul > li { -moz-border-radius: 5px; -webkit-border-radius: 5px; }
section#pipeline > ul > li.webserver, section#pipeline > ul > li.browser { -moz-border-radius: 10px; -webkit-border-radius: 10px; }


/* Hide some projection only stuff */
ul#clock, section#sources > ul > li.download, section#questions { display: none; }