body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 300; color: rgba(0, 0, 0, 0.8); } /* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements in most situations. nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /* headings */ h1, h2, h3, h4, h5, h6 { margin: 30px 0 15px 0; } h1 { font-size: 55px; } h2 { border-bottom: 1px solid #DFDFDF; font-size: 30px; } h3 { font-size: 20px; } h4 { font-size: 20px; } p { margin: 20px 0; line-height: 30px; } small { font-size: 70%; } ul { list-style: disc; margin: 20px 0 20px 25px; } ul li { margin: 5px 0; } strong { font-weight: 700; } code { background-color: #EEEEEE; padding: 4px; margin: -4px 0; } #header { background: #000000 url(../images/bg.jpg) repeat; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); color: white; height: 250px; position: relative; border-bottom: 1px solid #DEDEDE; } #header .gradient { position: absolute; bottom: 0; width: 100%; height: 20px; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0, 0, 0, 0.2)), color-stop(1, transparent)); background-image: -moz-linear-gradient(center bottom, rgba(0, 0, 0, 0.2) 0%, transparent 100%); } #header-wrapper { width: 900px; margin: 0 auto; position: relative; } #header-wrapper h1, #header-wrapper h2, #header-wrapper p { margin: 0; } #header-wrapper h1 { position: absolute; top: 40px; } #header-wrapper h2 { position: absolute; top: 110px; left: 40px; border-bottom: none; } #header-wrapper p { margin: 0; position: absolute; top: 180px; font-weight: bold; } #header-wrapper a { text-decoration: none; color: white; font-weight: normal; } #header-wrapper a:hover, #header-wrapper a:active, #header-wrapper a:focus { text-decoration: underline; } #footer { color: white; background: #000000 url(../images/bg.jpg) repeat; } #footer .gradient { height: 10px; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, transparent), color-stop(2, rgba(0, 0, 0, 0.1))); background-image: -moz-linear-gradient(center bottom, transparent 0%, rgba(0, 0, 0, 0.2) 100%); bottom: 0; width: 100%; } #footer-wrapper { font-size: 16px; width: 900px; padding: 20px 20px 30px 20px; margin: 0 auto; } #footer-wrapper p { margin: 0; } #footer-wrapper a { color: white; } header { margin-bottom: 60px; } header h1 { margin-bottom: 5px; } header h2 { margin-top: 0; margin-left: 30px; } #wrapper { padding: 20px; width: 900px; margin: 0 auto; } /* button ---------------------------------------------- */ .button { display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ *display: inline; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); -webkit-border-radius: .4em; -moz-border-radius: .4em; border-radius: .4em; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .button:hover { text-decoration: none; } .button:active { position: relative; top: 1px; } .bigrounded { -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; } .large { font-size: 18px; font-weight: bold; } .medium { font-size: 12px; padding: .4em 1.5em .42em; } .small { font-size: 11px; padding: .2em 1em .275em; } /* color styles ---------------------------------------------- */ /* blue */ .blue { color: #FFF; border: solid 1px #0076a3; background: #0095cd; background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)); background: -moz-linear-gradient(top, #00adee, #0078a5); } .blue:hover { background: #007ead; background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)); background: -moz-linear-gradient(top, #0095cc, #00678e); } .blue:active { color: #80bed6; background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee)); background: -moz-linear-gradient(top, #0078a5, #00adee); } #question { background-color: #EFEFEF; border: 1px solid #B4B4B4; font-family: monospace; font-size: 14px; line-height: 18px; padding: 10px; }