head, body { font-family: "Source Sans Pro"; font-size: 14px; color: #202020; } header { margin: 30px auto; text-align: center; } header h1 { margin: 0 0 30px; font-weight: 200; font-size: 50px; } #social { margin-top: 20px; height: 26px; } a { color: #457AA8; text-decoration: none; } a:hover { text-decoration: underline; } a:active { opacity: 0.7; } nav a, .button { padding: 4px 12px; margin: 0 5px; } nav a, .challenge, .button { font-size: 14px; text-decoration: none; color: #202020; background: #F7F7F7; border: 1px solid #EDEDED; border-radius: 3px; box-shadow: inset 0 1px 0 0 #fff; outline: 0; } nav a:hover, nav a:focus, .challenge:hover, .challenge:focus, .button:hover, .button:focus { border-color: #457AA8; text-decoration: none; } nav a:active, .challenge:active, .button:active { opacity: 0.7; } section { width: 600px; margin: 0 auto; } section p { text-align: justify; } section h2 { margin: 30px 0 20px; font-weight: normal; font-size: 22px; } section h3 { margin: 20px 10px 10px; font-weight: normal; font-size: 20px; } .challenges { list-style-type: none; padding: 0; } .challenge { display: block; margin-bottom: 20px; } .challenge date { display: inline-block; padding: 10px; width: 90px; margin-right: 10px; text-align: center; color: #787878; border-right: 1px solid #EDEDED; } input:not([type="checkbox"]), dt, dd, textarea, #congratulations { padding: 10px; margin: 0 8px; width: 260px; outline: none; border-radius: 3px; border: 1px solid #CFCFCF; font-family: monospace; } .single-input input, textarea { width: 560px; } input:focus, textarea:focus { border-color: #457AA8; } input.invalid, textarea.invalid { border-color: #D14B4B; } .hide_passing .passed { display: none; } h3 { margin-left: 8px; } h3 #hide_passing { font-size: 10pt; float: right; } dt, dd { margin-bottom: 20px; white-space: pre-wrap; } dt { clear: both; float: left; } dt:before { display: inline-block; height: 0px; float: right; content: "ยป"; margin-right: -26px; margin-top: -4px; font-size: 19px; } dt.passed, dt.passed + dd { border-color: #BAED9D; background: #D0F7BA; } dt.failed, dt.failed + dd, input.invalid { border-color: #F2BEA7; background: #FFDAC9; } dd { margin-left: 309px; } dd + dd { border-style: dashed; display: none; } dd.showfail + dd { display: block; } footer { margin: 50px 0 30px; text-align: center; color: #A3A3A3; } #congratulations { width: 560px; display: none; } .hide_passing.all_passing #congratulations { display: block; }