html { background: url("../img/back2-light.png") center 0; } body { padding: 0; margin: 0; color: black; font: 105% "Hoefler Text", Garamond, Baskerville, "Baskerville Old Face", "Times New Roman", serif; font-weight: 100; } h1, h2, h3, h4 { text-shadow: #FFF 0 -1px 1px, #AAA 0 0 5px; font-weight: 600; } h1 { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", "Liberation Sans", sans-serif; font-weight: 100; } strong { font-weight: 600; } h1 .sub { font-size: 0.5em; } h1 { font-size: 250%; } h2 { font-size: inherit; } p, blockquote, ul { text-shadow: #FFF 0 -1px 1px, #CCC 0 0 3px; } p { text-align: justify; } ul { font-size: 90%; font-weight: 400; } blockquote { font-size: 90%; font-weight: 400; } a, .link, :link { color: inherit; text-decoration: underline; cursor: pointer; font-weight: 400; } a:hover, .link:hover { text-decoration: none; } label { display: inline-block; width: 15em; } img { border: none; } /* Classes */ .button { display: inline-block; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 1); border-radius: 5px; -webkit-box-shadow: 1px 1px 6px rgba(200, 200, 200, 0.5); -moz-box-shadow: 1px 1px 6px rgba(200, 200, 200, 0.5); box-shadow: 1px 1px 6px rgba(200, 200, 200, 0.5); padding: 1em; text-decoration: none; } .button:hover { background: rgba(240, 240, 240, 0.5); border-color: white; } /* Page */ header { position: relative; z-index: 99; background: url("../img/back2-dark.png") center 0; border-bottom: 1px solid #FFF; -webkit-box-shadow: 0 0 50px #666; -moz-box-shadow: 0 0 50px #666; box-shadow: 0 0 50px #666; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; top: 0; left: 0; width: 100%; height: 150px; margin: 0; padding: 1em 0 0; text-align: center; } header h1 { margin: 0; color: white; font-size: 350%; } header .logo { height: 128px; vertical-align: middle; } header .divider { position: absolute; width: 100%; bottom: -90px; } #fixedheader { position: fixed; z-index: 98; background: url("../img/back2-dark.png") center 0; border-bottom: 1px solid #FFF; -webkit-box-shadow: 0 0 10px #000; -moz-box-shadow: 0 0 10px #000; box-shadow: 0 0 10px #000; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; top: 0; left: 0; width: 100%; height: 50px; padding: 10px 0 0; text-align: center; } #fixedheader h2 { margin: 0; color: white; font-size: 20px; } header a, header .link, header :link, #fixedheader a, #fixedheader .link, #fixedheader :link { font-family: Exo; font-weight: 600; text-decoration: none; } header a:hover, header .link:hover, #fixedheader a:hover, #fixedheader .link:hover { text-decoration: underline; } footer { clear: both; padding: 10em 0 1em; color: #333; text-shadow: #FFF 0 -1px 1px, #999 0 0 5px; text-align: center; font-size: 80%; } section { width: 950px; margin: 0 auto 2em; padding: 1em 0 0; } section.heading { background: rgba(200, 200, 200, 0.3); border: 1px solid rgba(200, 200, 200, 0.5); border-width: 0 0 1px; -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); width: 100%; padding: 0; } section.heading>div { width: 950px; margin: 0 auto; padding: 1em 0; } hr { background: url("../img/Dividers/Simple.png") center center no-repeat; border: none; height: 4em; clear: both; } blockquote { margin-left: 5em; } blockquote:before { content: "❝"; position: absolute; margin: -0.5ex 0 0 -1em; font-size: 300%; 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: 2; float: right; margin: 1em; width: 546px; text-align: center; } .sidebox .clip { overflow: hidden; position: relative; z-index: 1; } .appstore { position: fixed; display: none; z-index: 100; font-size: 0; /* appstore-bubble.png * top: 8px; right: 5px; */ /* appstore.png */ top: 25px; right: 25px; } .appstore img { border-radius: 5px; -webkit-box-shadow: 0 0 30px #AAA; -moz-box-shadow: 0 0 30px #AAA; box-shadow: 0 0 30px #AAA; } .appstore:hover img { -webkit-box-shadow: 0 0 30px #FFF; -moz-box-shadow: 0 0 30px #FFF; box-shadow: 0 0 30px #FFF; } header .appstore { position: absolute; display: block; top: auto; /* appstore-bubble.png * bottom: -73px; */ /* appstore.png */ bottom: -25px; } .tip { background: url("../img/tip.png") no-repeat; color: white; position: absolute; display: block; right: 0; width: 410px; height: 60px; padding: 12px 20px; margin-top: -60px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font: 14px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", "Liberation Sans", sans-serif; } .footnote { color: #444; position: absolute; width: 100%; bottom: 2px; font: 14px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", "Liberation Sans", sans-serif !important; } .footnote:hover { color: #666; } *>.nothover { display: inline-block; } *:hover>.nothover { display: none; } *>.hover { display: none; } *:hover>.hover { display: inline-block; } .columns { position: relative; clear: both; text-align: center; } .columns>div { float: left; width: 25%; height: 22em; margin: 0 4%; padding: 3em 0 1em; text-align: justify; font-size: smaller; } .columns h2 { font-size: 120%; } .columns .columnhead { } .box { display: inline-block; position: relative; font-size: 0; } .box img { border: 1px solid white; } .hoverShow { display: none; } .center { text-align: center; } .clear { clear: both; } *:hover>.hoverShow { display: inline-block; } a.previous, a.next { display: block; font-size: 150%; font-weight: 400; text-align: center; text-decoration: none; } a.previous { left: 0; } a.previous:before { content: "< "; } a.next { } a.next:after { content: " >"; } #ribbon { background: url("../img/ribbon-join-beta.png"); display: block; position: absolute; left: 0; margin-top: -1em; width: 184px; height: 184px; } #frontpage .sidebox { margin-right: -100px; } #frontpage .sidebox .clip { height: 416px; margin-bottom: 84px; }