html, body { height: 100%; } body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; } nav { font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", Calibri, sans-serif; } nav { opacity: 0.85; } h1, h2, h3, h4 { margin-top: 1em; } /* *[id]::before { position: relative; content: ""; display: block; height: 60px; width: 5px; background: red; margin-top: -60px; } */ section { padding: 1ex 0; text-align: center; } .content { padding-top: 100px; width: 940px; margin: auto; text-align: left; text-align: initial; } .hlvl { border-left: 5px solid #EEE; padding-left: 1em; } .hlvl .hlvl { border-color: #CCC; margin-left: -1em; padding-left: 2em; } .hlvl .hlvl .hlvl { border-color: #AAA; margin-left: -2em; padding-left: 3em; } h2.inline, h3.inline, h4.inline { display: inline-block; line-height: inherit; } .box { display: inline-block; position: relative; font-size: 0; } .box img { border: 1px solid white; } .thumb { clear: both; border-bottom: 2px ridge white; margin-bottom: 4em; } .thumb .pull-right { margin-left: 5ex; } .thumb .pull-left { margin-right: 5ex; } .column { display: inline-block; margin: 0 2em; vertical-align: top; } .navbar .nav .img { padding: 4px; } .navbar .nav .img img { display: block; height: 32px; } ul.pictures { list-style: none; } ul.pictures li { display: inline-block; padding: 1ex; } header { position: relative; overflow: hidden; color: white; background: black; text-shadow: black 0 1px 50px; box-shadow: 0 1px 5px #000; } header .container { position: relative; width: 100%; height: 100%; z-index: 1; background: radial-gradient(center, ellipse cover, rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.8) 100%); background: gradient(radial, center center, 0px, center center, 100%, color-stop(50%,rgba(0,0,0,0.3)), color-stop(100%,rgba(0,0,0,0.8))); background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.8) 100%); background: radial-gradient(70% 50% at 30% 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.8) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#44000000', endColorstr='#cc000000',GradientType=1 ); } header .background { position: absolute; width: 100%; height: 100%; } #app header { height: 80%; } #app header .background { background: url('../img/shot-laptop-standing-iphone-angled-flipped.png') center center; background-size: cover; } #algorithm header, #support header { height: 40%; background: #272727; } #algorithm header .background, #support header .background { width: 940px; height: auto; left: 50%; top: -10%; margin-left: -470px; } #algorithm header .container, #support header .container { background: radial-gradient(center, ellipse cover, rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.8) 100%); background: gradient(radial, center center, 0px, center center, 100%, color-stop(50%,rgba(0,0,0,0.3)), color-stop(100%,rgba(0,0,0,0.8))); background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.8) 100%); background: radial-gradient(50% 50% at 50% 30%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.8) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#44000000', endColorstr='#cc000000',GradientType=1 ); } header .content { position: absolute; bottom: 5px; left: 50%; margin-left: -470px; text-align: right; /*background: linear-gradient(to bottom, rgba(0,0,0,0) 85%, rgba(0,0,0,0.7) 85%);*/ /*background: black url("../img/shot-laptop-leaning-iphone.png") center top / cover no-repeat;*/ } h1, h2 { font-weight: 100; } h1 { font-size: 3em; margin: 0 0 1ex; } header h1 { font-size: 6em; margin: 0; } header h2 { font-size: 2em; font-style: oblique; } footer { overflow: hidden; text-align: center; } footer h1 { background: #EEE; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 170%; font-weight: 100; } footer .content { margin: 1em auto; padding: 0; } footer .column { text-align: left; } q::before { content: open-quote; } q { font-style: italic; } q::after { content: close-quote; } table { width: 100%; } thead { background: #DDD; } tbody { background: #EEE; } th { background: #E9E9E9; } td, th { padding: 1ex; } thead { border: 1px solid #DDD; } tbody td, tbody th { border: 1px solid #DDD; } caption { font-weight: bold; font-size: 120%; } table .box { display: block; width: 15px; height: 15px; float: right; border-radius: 5px; } table .box.red { background: #A66; border: 1px solid #C33; } table .box.orange { background: #AA6; border: 1px solid #CC3; } table .box.green { background: #6A6; border: 1px solid #3C3; }