html { background: url("../img/back-dark.png") center 0; } body { padding: 0; margin: 0; color: white; font: 120% Exo, sans-serif; font-weight: 100; } h1, h2, h3, h4 { text-shadow: #000 0 1px 1px; color: #999; font-weight: 600; } strong { font-weight: 400; } h1 .sub { font-size: 0.5em; } h1 { font-size: 250%; } h2 { color: #666; font-size: inherit; font-weight: 400; } p, blockquote, ul { text-shadow: #FFF 0 -1px 1px, #CCC 0 0 3px; } p { text-align: justify; } ul { font-weight: 600; font-size: 90%; font-weight: 500; } blockquote { font-weight: 600; font-size: 90%; font-weight: bold; } a, .link, :link { color: inherit; text-decoration: underline; cursor: pointer; font-weight: 500; } a:hover, .link:hover { text-decoration: none; } label { display: inline-block; width: 15em; } /* Classes */ .stripe { background: rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.7); border-width: 1px 0; -webkit-box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(200, 200, 200, 0.5); -moz-box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(200, 200, 200, 0.5); box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(200, 200, 200, 0.5); } /* Page */ header { position: relative; z-index: 1; width: 900px; margin: 2em auto 0; } header h1 { display: inline-block; margin: 0; color: inherit; font-size: 150%; } header .logo { height: 3em; vertical-align: middle; } header .divider { position: absolute; width: 100%; bottom: -90px; } footer { clear: both; padding: 1em 0; color: #333; text-shadow: #FFF 0 -1px 1px, #999 0 0 5px; text-align: center; font-size: 80%; } section { background: url("../img/back-light.png") center 0; -webkit-box-shadow: 2px 2px 2px #000, 0 0 50px #CCC, inset 0 0 50px #FFF; -moz-box-shadow: 2px 2px 2px #000, 0 0 50px #AAA, inset 0 0 50px #FFF; box-shadow: 1px 1px 4px #000, 0 0 200px #666; border-radius: 5px; border: 1px solid white; color: black; width: 900px; margin: 0 auto; padding: 2em; } #content section.current { opacity: 1; z-index: 1; } hr { background: url("../img/Dividers/Simple.png") center center no-repeat; border: none; height: 5px; } blockquote { margin-left: 5em; } blockquote:before { content: "❝"; position: absolute; margin: -0.5ex 0 0 -1em; font-size: 300%; font-weight: 200; font-weight: 100; } /* Utilities */ .side { float: right; margin: 1em -10em 1em 1em; } .sidebox { background: url("../img/Dividers/Divider_H.png") center bottom no-repeat; position: relative; z-index: 1; float: right; margin: 1em; width: 546px; text-align: center; } .sidebox .clip { overflow: hidden; position: relative; z-index: 0; } .frontpage .sidebox { margin-right: -100px; } .frontpage .sidebox .clip { height: 416px; margin-bottom: 84px; } .hoverShow { display: none; } *:hover>.hoverShow { display: inline-block; } section { position: relative; display: none; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } section.active { display: block; } a.previous, a.next { display: block; position: absolute; width: 100%; margin: -2.5em 0 0 0; font-size: 150%; font-weight: 600; text-decoration: none; } a.previous { margin-left: -3em; } a.previous:before { content: "< "; } a.next { margin-left: 3em; text-align: right; } a.next:after { content: " >"; } #frontpage .sidebox { margin-top: -50px; }