*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html { width: 100%; height: 100%; margin: 0; padding: 0; } body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: rgb(255, 255, 255); font-family: Arial, sans-serif; color: rgb(51, 51, 51); } h1, h2, h3, h4 { margin-top: 0; margin-bottom: 16px; padding: 0; font-weight: 300; line-height: 100%; color: rgb(0, 132, 190); letter-spacing: -1px; display: block; } h1 { font-size: 38px; } h2 { font-size: 26px; } h3 { font-size: 20px; } h4 { font-size: 16px; } .date { float: right; font-style: italic; position: relative; top: -20px; font-size: 16px; } p { margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 16px; padding: 0; font-size: 16px; } th { text-align: left; } pre { overflow-x: auto; color: #f8f8f2; background: #272822; padding: 1em; margin: .5em 0; overflow: auto; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em; text-shadow: 0 1px rgba(0, 0, 0, 0.3); font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; line-height: 1.5; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } :not(pre) > code { font-family: monospace; } pre > code { font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; } img { max-width: 100%; } form { margin-bottom: 48px; } label { margin-left: 1px; padding: 0; } input[type=text], input[type=email] { height: auto; margin-top: 6px; margin-bottom: 16px; padding: 8px; display: block; box-sizing: content-box; outline: none; font-family: inherit; font-size: inherit; border: 1px solid rgb(168, 172, 177); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba(0, 0, 0, 0.06) 0 8px 12px 0px, rgba(255, 255, 255, 0.8) 0px 0px 0px 1px; -moz-box-shadow: rgba(0, 0, 0, 0.06) 0 8px 12px 0px, rgba(255, 255, 255, 0.8) 0px 0px 0px 1px; box-shadow: rgba(0, 0, 0, 0.06) 0 8px 12px 0px, rgba(255, 255, 255, 0.8) 0px 0px 0px 1px; } input[type=text]:focus, input[type=email]:focus { border: 1px solid rgb(0, 132, 190); } input[type=submit] { width: 64px; height: 32px; padding: 4px; outline: none; font-family: inherit; font-size: inherit; text-align: center; cursor: pointer; background: rgb(255,255,255); background: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(240,240,240) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(240,240,240))); background: -webkit-linear-gradient(top, rgb(255,255,255) 0%,rgb(240,240,240) 100%); background: -o-linear-gradient(top, rgb(255,255,255) 0%,rgb(240,240,240) 100%); background: -ms-linear-gradient(top, rgb(255,255,255) 0%,rgb(240,240,240) 100%); background: linear-gradient(to bottom, rgb(255,255,255) 0%,rgb(240,240,240) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0',GradientType=0 ); border: 1px solid rgb(172, 172, 172); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba(0, 0, 0, 0.06) 0 8px 12px 0px, rgba(255, 255, 255, 0.8) 0px 0px 0px 1px; -moz-box-shadow: rgba(0, 0, 0, 0.06) 0 8px 12px 0px, rgba(255, 255, 255, 0.8) 0px 0px 0px 1px; box-shadow: rgba(0, 0, 0, 0.06) 0 8px 12px 0px, rgba(255, 255, 255, 0.8) 0px 0px 0px 1px; } input[type=submit]:hover { padding: 4px; outline: none; background: rgb(240,240,240); background: -moz-linear-gradient(top, rgb(240,240,240) 0%, rgb(225,225,225) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(240,240,240)), color-stop(100%,rgb(225,225,225))); background: -webkit-linear-gradient(top, rgb(240,240,240) 0%,rgb(225,225,225) 100%); background: -o-linear-gradient(top, rgb(240,240,240) 0%,rgb(225,225,225) 100%); background: -ms-linear-gradient(top, rgb(240,240,240) 0%,rgb(225,225,225) 100%); background: linear-gradient(to bottom, rgb(240,240,240) 0%,rgb(225,225,225) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#e1e1e1',GradientType=0 ); } input[type=submit]:active { padding: 4px; outline: none; border: 1px solid rgb(150, 150, 150); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3) inset; -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3) inset; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3) inset; } input[type="submit"]::-moz-focus-inner { border: 0; } textarea, .input-box { min-width: 100%; width: 100%; min-height: 300px; height: 300px; margin-top: 6px; margin-bottom: 16px; padding: 8px; display: block; box-sizing: content-box; outline: none; overflow: auto; background-color: rgb(255, 255, 255); font-family: inherit; font-size: inherit; border: 1px solid rgb(168, 172, 177); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba(0, 0, 0, 0.06) 0 8px 12px 0px, rgba(255, 255, 255, 0.8) 0px 0px 0px 1px; -moz-box-shadow: rgba(0, 0, 0, 0.06) 0 8px 12px 0px, rgba(255, 255, 255, 0.8) 0px 0px 0px 1px; box-shadow: rgba(0, 0, 0, 0.06) 0 8px 12px 0px, rgba(255, 255, 255, 0.8) 0px 0px 0px 1px; } textarea:focus, .input-box:focus { border: 1px solid rgb(0, 132, 190); } textarea { resize: both; } .input-box { height: auto; } li { margin-bottom: 3px; } a { color: rgb(0, 132, 190); text-decoration: none; outline: none; } a:hover { /* Optional: */ /* text-decoration: underline; */ /* /Optional */ } a:active { color: rgb(0, 89, 127); } .header a { color: rgb(0, 132, 190); text-decoration: none; } .header { height: 38px; margin-top: 16px; margin-bottom: 38px; padding-right: 16px; font-size: 14px; color: rgb(0, 132, 150); background: rgb(255,255,255); background: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(240,240,240) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(240,240,240))); background: -webkit-linear-gradient(top, rgb(255,255,255) 0%,rgb(240,240,240) 100%); background: -o-linear-gradient(top, rgb(255,255,255) 0%,rgb(240,240,240) 100%); background: -ms-linear-gradient(top, rgb(255,255,255) 0%,rgb(240,240,240) 100%); background: linear-gradient(to bottom, rgb(255,255,255) 0%,rgb(240,240,240) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0',GradientType=0 ); border: 1px solid rgb(168, 172, 177); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba(0, 0, 0, 0.06) 0 8px 12px 0px, rgba(255, 255, 255, 0.8) 0px 0px 0px 1px; -moz-box-shadow: rgba(0, 0, 0, 0.06) 0 8px 12px 0px, rgba(255, 255, 255, 0.8) 0px 0px 0px 1px; box-shadow: rgba(0, 0, 0, 0.06) 0 8px 12px 0px, rgba(255, 255, 255, 0.8) 0px 0px 0px 1px; } .logo { width: auto; height: 100%; margin-left: 8px; padding-top: 2px; padding-bottom: 2px; float: left; border: none; text-align: center; cursor: pointer; } .logo-text { height: 100%; margin-left: 8px; padding-top: 3px; float: left; font-size: 26px; font-weight: bold; letter-spacing: -1px; } .header-element { width: 24%; /* 100 / elementCount - 1 */ max-width: 100px; height: 100%; margin: 0; padding-top: 10px; float: right; text-align: center; display: block; } .header-element:hover { border-left: 1px solid rgb(168, 172, 177); border-right: 1px solid rgb(168, 172, 177); background: rgb(240,240,240); background: -moz-linear-gradient(top, rgb(240,240,240) 0%, rgb(225,225,225) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(240,240,240)), color-stop(100%,rgb(225,225,225))); background: -webkit-linear-gradient(top, rgb(240,240,240) 0%,rgb(225,225,225) 100%); background: -o-linear-gradient(top, rgb(240,240,240) 0%,rgb(225,225,225) 100%); background: -ms-linear-gradient(top, rgb(240,240,240) 0%,rgb(225,225,225) 100%); background: linear-gradient(to bottom, rgb(240,240,240) 0%,rgb(225,225,225) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#e1e1e1',GradientType=0 ); color: rgb(0, 132, 190); } .header-element:active { border-left: 1px solid rgb(168, 172, 177); border-right: 1px solid rgb(168, 172, 177); background: rgb(230,230,230); background: -moz-linear-gradient(top, rgb(230,230,230) 0%, rgb(210,210,210) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(230,230,230)), color-stop(100%,rgb(210,210,210))); background: -webkit-linear-gradient(top, rgb(230,230,230) 0%,rgb(210,210,210) 100%); background: -o-linear-gradient(top, rgb(230,230,230) 0%,rgb(210,210,210) 100%); background: -ms-linear-gradient(top, rgb(230,230,230) 0%,rgb(210,210,210) 100%); background: linear-gradient(to bottom, rgb(230,230,230) 0%,rgb(210,210,210) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6e6', endColorstr='#d2d2d2',GradientType=0 ); } .page { width: 100%; min-height: 100%; height: auto !important; margin-bottom: -108px; /* -(footer.height + footer.margin-top) */ display: inline-block; } .container { min-width: 256px; /* may vary depending on content */ max-width: 1000px; width: 85%; margin-left: auto; margin-right: auto; } .pad-in { padding-left: 5%; } .inline-right { float: right; margin: 0; padding-left: 5%; padding-right: 0; padding-top: 5%; padding-bottom: 5%; } hr { width: 100%; height: 1px; margin-left: 0; margin-right: 0; margin-top: 16px; margin-bottom: 32px; padding: 0; color: rgb(0, 132, 150); background-color: rgb(0, 132, 150); border-color: rgb(0, 132, 150); } .quote { padding: 12px; background-color: rgb(234, 234, 255); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; margin-bottom: 6px; } .quote p:last-child { margin-bottom: 0px; } .quote-reference { float: right; font-style: italic; } .center { width: 100%; text-align: center; } iframe { display: block; margin-left: auto; margin-right: auto; margin-bottom: 16px; border: 0; } .youtube { max-width: 100%; width: 560px; height: 315px; } .contributions { width: 721px; height: 110px; } .footer { width: 100%; height: 60px; margin: 0; margin-top: 48px; padding-top: 32px; background-color: rgb(220, 224, 226); -moz-box-shadow: 0 2px 4px rgb(191, 200, 204) inset; -webkit-box-shadow: 0 2px 4px rgb(191, 200, 204) inset; box-shadow: 0 2px 4px rgb(191, 200, 204) inset; } .footer-right { margin: 0; padding: 0; float: right; font-size: 14px; }