// TODO clean up! article { counter-reset: cfc ifc h2 h3 } article > h2[id] { counter-reset: h3 } article > h3[id] { counter-reset: h4 } article > h2[id]:before { content: counter(h2) ". "; counter-increment: h2 } article > h3[id]:before { content: counter(h2) "." counter(h3) ". "; counter-increment: h3 } article > h4[id]:before { content: counter(h2) "." counter(h3) "." counter(h4) ". "; counter-increment: h4 } article pre+figcaption:before { color: grey; content: "Code snippet " counter(cfc, lower-roman) ". – "; counter-increment: cfc; font-size: smaller; font-style: bold } article img+figcaption:before { color: grey; content: "Image " counter(ifc, lower-roman) ". – "; counter-increment: ifc; font-size: smaller; font-style: bold } /* TODO drop caps and QED only on 'real' articles (not simple things like portfolio items) */ /* article > h1 ~ p + * { clear: left } */ /* article > p:first-of-type:first-letter { float: left; font: bold 5em/0.9 Georgia; margin: 0; padding: 0; overflow: hidden; text-transform: uppercase } */ /*article > p:first-of-type:first-letter{line-height:.5;display:block;margin:-15px 10px 15px 0px;float:left;font-family:"Oswald", sans-serif;font-size:5.5rem;font-weight:bold} */ article > p:last-of-type:after { content: "∎"; color: #65ba00 } button, input[type="button"], input[type="submit"], .button { background: #eee; border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -webkit-border-radius: 3px; border: 1px outset lightgray; box-shadow: lightgrey 0 0 1px; -moz-box-shadow: lightgrey 0 0 1px; -webkit-box-shadow: lightgrey 0 0 1px; color: #444; cursor: pointer; margin: 10px 10px 0 0; padding: 5px 10px } .link { background: none; border: none; box-shadow: none; text-decoration: underline } /* todo - responsive (full width days!) */ .calendar th, .calendar td { border: 1px solid lightgray; height: 75px; width: 75px }/* TODO responsive: full width search form on small screens */ form > fieldset { background: white; border: 2px solid white; border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: lightgrey 0 0 2px; -moz-box-shadow: lightgrey 0 0 2px; -webkit-box-shadow: lightgrey 0 0 2px; margin: 1em 0; padding: 1em } fieldset fieldset { border: 1px solid lightgray; border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -webkit-border-radius: 3px } form > fieldset > legend { background: #f8f8f8; border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; -webkit-border-radius: 1px; box-sizing: content-box; float: left; margin: -1em 0 0 -1em; padding: 1em; text-align: left; width: 100% } form > fieldset input, form > fieldset select, form > fieldset textarea { width: 100% } form > fieldset > legend a { color: green; float: right } label { color: gray; display: block; font-size: .8em; margin-top: 1em; vertical-align: top } input, select, textarea { border: 1px solid #bbb; border-radius: 3px; padding: 5px; width: 15em } button, input, select, textarea { font-family: inherit } input:focus, select:focus, textarea:focus { background: lightyellow; } label input, label select, label textarea { color: #666; display: block; margin: 0 .5em 0 0 } label input + input { display: inherit; } input[type="checkbox"]+label, input[type="radio"]+label { border: none; display: inherit; width: auto } /* TODO combine with .number */ input[type="number"] { text-align: right; width: 5em } .checkboxgroup, .radiogroup { list-style: none inside none; margin: 0 0 1em 0; padding: 0; } .number option { text-align: right; } input[type="checkbox"], input[type="radio"] { visibility: hidden } input[type="checkbox"]+label:before { color: darkred; content: "✘ " } input[type="checkbox"]:checked+label:before { color: darkgreen; content: "✔ " } input[type="radio"]+label:before { content: "( ) "; font-family: Courier } input[type="radio"]:checked+label:before { color: darkgreen; content: "(*) "; font-family: Courier } /* compact form */ .compact label { border: 1px solid lightgrey; color: gray; font-style: italic; margin: .5em 0; padding: .5em; } .compact label input, .compact label select, .compact label textarea { border: 0 none transparent; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none } .compact textarea { clear: both; width: 100%; } /* TODO this should be the default (big full-width inputs and buttons */ /* @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { fieldset { display: inherit; } button, input, select, textarea { font-size: 1.5em; width: 100%; } input[type="checkbox"], input[type="radio"] { width: auto; } } */ a[rel="help"] { background: darkblue; border-radius: 50%; color: white !important; font-weight: bold; margin-left: 5px; padding: 2px 5px; text-decoration: none; width: 1.5em } .gallery figure { background: lightgrey url(images/gallery/loading.gif) no-repeat center 60px; box-shadow: 0 2px 0 lightgrey; -moz-box-shadow: 0 2px 0 lightgrey; -webkit-box-shadow: 0 2px 0 lightgrey; -webkit-filter: grayscale(100%); float: left; height: 150px; margin: 0 10px 10px 0; position: relative; overflow: hidden; width: 300px; -webkit-transition: all 250ms linear } .gallery figure:hover { -webkit-filter: grayscale(0); -webkit-transition: all 250ms linear } .gallery figcaption { background: rgba(0, 0, 0, 0); bottom: 0; color: white; left: 0; margin: 0; padding: 5px 10px; position: absolute; visibility: hidden; width: 300px; z-index: 1; -webkit-transition: background 250ms linear } .gallery figure:hover figcaption, .gallery figure:active figcaption { background: rgba(0, 0, 0, .75); visibility: visible; -webkit-transition: background 250ms linear } .gallery a { color: white; } /* responsive *buzzword* content-first mobile-first *buzzword* BEM *buzzword* retina-friendly superfracilious design */ /* mobile first! media query should be reversed */ *, *:after, *:before { box-sizing: border-box } img { border: 0 } hr { border: 0; background: lightgray; height: 1px; margin-bottom: 10px } abbr[title], dfn[title] { border-bottom: 1px dotted black; font-size: 90% } article abbr[title]:after, article dfn[title]:after { border-bottom: 1px solid white; content: ' (' attr(title) ')'; font-style: italic } ins, mark { background: #ee0 } del { color: gray; text-decoration: line-through } candy css: del:after { content: "(deleted " attr(datetime) ")" } figure { margin-left: 0 } .date, .number { max-width: 12em; text-align: right; white-space: nowrap; width: 1px } blockquote { background-color: white; border-left: 5px solid purple; border-radius: 2px; box-shadow: 0 0 3px lightgrey; color: purple; margin: .25em 0; padding: .25em 1em; position: relative } blockquote footer cite:before { content: "– " } blockquote:before { color: #ccc; content: "“"; font-size: 144px; position: absolute; top: 0px; left: -100px; z-index: -1; } blockquote:after { color: #ccc; content: "”"; font-size: 144px; position: absolute; top: 0; right: -144px; } blockquote blockquote { background-color: #eee; border-left-color: blue; box-shadow: none; color: blue; margin: 5px } blockquote blockquote blockquote { background-color: white; border-left-color: green; color: green } blockquote blockquote blockquote blockquote { background-color: #f8f8f8; border-left-color: #fc0; color: #fc0 } blockquote blockquote blockquote blockquote blockquote { background-color: white; border-left-color: orange; color: orange } blockquote blockquote blockquote blockquote blockquote blockquote { background-color: #f8f8f8; border-left-color: red; color: red } .pull { border-top: 6px solid #65ba00; border-bottom: 6px solid #65ba00; float: right; font-size: 2em; font-weight: bold; line-height: 2; width: 15em } .pull:nth-child(odd) { float: left } .pull-right { float: right !important } .filter { display: inline-block } .filter select { display: none } .filter:hover select, .filter:focus select, .filter:active select { display: block; margin: -2em 0 0 0; position: absolute } /* @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { p, pre, ul, ol, table, h1, h2, h3 { max-width: 60em; } } */ ::-webkit-scrollbar { width: 10px } ::-webkit-scrollbar-thumb { background: #65ba00; border-radius: 5px } address { border: 4px double #65ba00; line-height: 3; padding: 1em; text-align: center } address > h1 { font-variant: small-caps } .border { background: lightgray; border: 1px solid #ccc; padding: .6em } .transparent { /* TODO blocky gradient instead of image or data-url for image */ background-image: url(images/imgtrans.gif) } .well { background: #eee; border-radius: 3px; clear: both; padding: .5em 1em; } :target, .new { /* TODO fade in */ border-left: 4px solid blue } .skip-to-content { background: #65ba00; color: white; left: 0; padding: 2px 5px; position: absolute; top: -40px } .skip-to-content:focus { top: 0; transition: top .1s ease-in; -webkit-transition: top .1s } body { margin: 0 } /* mobile first grid, TODO use flexbox with nice fallback? */ header, section, footer { clear: both; overflow: hidden; width: 100% } .col { float: left; width: 100% } body > header > *, body > nav > *, body > main, body > footer > * { margin: 0 auto; padding: 0 10px } body > header { color: gray } body > main { padding-top: 30px; padding-bottom: 30px } @media screen and (min-width: 1024px) { header > *, nav > *, main, footer > * { margin-left: auto; margin-right: auto; width: 960px } .col { width: 33.33333% } .hidden-lg { display: none } .visible-lg { display: none } } main, article, header, footer { display: block } html { overflow-y: scroll } body { overflow-x: hidden } body > footer li > ul { color: #65ba00; list-style: square inside } header, footer, small { color: gray; font-size: small } /* sticky footer */ html { min-height: 100%; position: relative } body { margin-bottom: 100px } body > footer { bottom: 0; border-top: 1px solid rgba(192,192,192,.25); font-size: .75em; height: 100px; position: absolute; width: 100% } /* end sticky footer */ /* TODO decorate ul with green • */ ol, ul { padding-left: 1.75em } ol ol { list-style-type: lower-roman } ol ol ol { list-style-type: lower-alpha } .condensed { list-style: none outside; padding-left: 0 } /* dt { float: left; font-weight: bold; width: 15em } dd { clear: both; overflow: hidden } */ /* text-indent all in key frames for graceful degradation */ .loader { animation: loadingWheel 1s ease infinite; -webkit-animation: loadingWheel 1s ease infinite; border-radius: 50%; border: 25px groove red; font-family: sans-serif; color: gray; width: 5em; height: 5em; line-height: 5; text-align: center } @keyframes loadingWheel { to { transform: rotate(360deg); } } @-webkit-keyframes loadingWheel { to { -webkit-transform: rotate(360deg); } } pre { background: #f8f8f8; border: 1px solid #f8f8f8; border-width: 1px 0; border-left-width: 50vw; border-right-width: 50vw; box-shadow: 0 0 1px lightgrey; box-sizing: content-box; counter-reset: linenumber; font-size: .8em; letter-spacing: 1px; line-height: 1.4; margin-bottom: 0; margin-left: -50vw; white-space: pre-wrap; width: 100% } pre[class]:before { color: #ccc; content: attr(class); float: right; font-size: 2em; position: relative } var, code { color: #9284f9 } output, samp { color: green } kbd { background: white; border: 1px solid gray; border-radius: 3px; box-shadow: lightgrey 0 0 .1px; color: black; font-style: italic; padding: 0 .5em } /* line numbers and tabs */ pre > code:not(:only-child):before { background: #eee; border-right: 1px solid #65ba00; color: #aaa; content: counter(linenumber); counter-increment: linenumber; float: left; margin-right: .3em; padding-right: .3em; text-align: right; width: 2.5em; /* tabs */ background-image: linear-gradient(left to right, rgba(128, 0, 0, .75) .1em, transparent .1em); background-position: 0 1em; background-size: 100% 2.2em; } pre > kbd:before { content: "$ " } .c64 { background-color: #4242e7; border-color: #a5a5ff; border-bottom-width: 2em; border-top-width: 2em; color: #a5a5ff; font-family: fixedsys, monospace; font-weight: bold; height: 25em; padding: 1px } .terminal { background: black; border-color: black; color: #65ba00; text-shadow: 0 0 1px lightgreen } /* syntax highlighting */ .ident { color: darkblue; font-weight: bold } .int, .float { color: darkblue } .char, .string { color: darkred } .comment { color: #65ba00; font-style: italic } @media print { body header, body nav, body footer, form { display: none } table { width: 100% } table, th, td { border-width: 1px } html, body { background-color: transparent; border: none } a { border: none; color: black !important; text-underline: none } } .progress { border: 4px solid #000; color: #65ba00; text-align: center } .progress > .bar { background: #000; border: 5px solid white } nav { display: inline-block; width: 100% } .puremenu { /* height of menu */ line-height: 3; overflow: visible; position: relative; z-index: 2 } .puremenu, .puremenu ul { background: white; list-style: none inside none; margin: auto; padding: 0 } .puremenu ul { border: 1px solid gray; border-width: 0 1px 1px 1px; display: none; left: 0; margin: 0; position: absolute; top: 100%; z-index: 3 } .puremenu ul ul { left: 100%; top: 0 } .puremenu li { position: relative } .puremenu > li { float: left } .puremenu li:hover > ul { display: block } /* .puremenu li a:hover, .puremenu li.current > a, .puremenu li.current > a:visited { color: black; } */ .puremenu > li > ul { min-width: 100% } .puremenu li a { display: block; font-weight: bold; padding: 0 1em; white-space: nowrap } .puremenu li:first-child a { padding-left: 10px } .puremenu ul li a { font-size: .8em; padding: 0 10px; /* height of sub menu */ line-height: 2 } .puremenu .has-childs > a:after { color: gray; content: "▼"; margin-left: 5px } .puremenu ul .has-childs > a:after { color: gray; content: "►"; float: right; margin-left: 5px } .puremenu ul { border: 1px solid lightgrey; border-width: 0 1px 1px 1px; z-index: 5 } .breadcrumbs { font-size: small; padding-left: 0 } .breadcrumbs li { display: inline-block } .breadcrumbs li+li:before { color: #aaa; content: " › " } .breadcrumbs li:last-child a { color: gray } .metergroup { list-style: none; margin-left: 0; padding-left: 0 } .metergroup meter { width: 100% } .metergroup.vertical li { float: left; width: 40px; overflow: hidden; } .likert { border: none; } .likert thead th, .likert tbody td { text-align: center; } .likert tbody th { color: inherit; font-weight: normal } input[name="previous"] { float: left } input[name="next"] { float: right } .q-and-a { overflow: hidden } .q-and-a > dt, .q-and-a > dd { background: #ddd; border: 1px solid lightgrey; border-radius: 3px; clear: both; margin-bottom: 10px; padding: 10px; width: 90% } .q-and-a > dd { background: #eee; float: right; margin-bottom: 20px } td, th { vertical-align: top; text-align: left } .table { border-collapse: collapse; margin: 1em -1.5em; width: 100% } .table caption { background: #f8f8f8; font-weight: bold; padding: 1em 1.5em; text-align: left } .table tbody tr:first-child { border-top: 1px solid lightgrey } .table tbody tr:nth-child(even) { background: #f8f8f8 } .table th, .table td { min-width: 3em; max-width: 40em; overflow: hidden; padding: .2em 1.5em; text-overflow: ellipsis } .table th { color: green; white-space: nowrap } .table tfoot { background: #f8f8f8; border-top: 1px dashed lightgrey } .table .sort a:after { color: gray; content: "▼"; font-size: .8em; margin-left: 5px } .table .sort.up a:after { color: gray; content: "▲"; font-size: .75em; margin-left: 5px } .table .sort.active a:after { color: #c00; content: "▼"; font-size: .75em; margin-left: 5px } .table .sort.active.up a:after { color: #c00; content: "▲"; font-size: .75em; margin-left: 5px } .table .edit, .table .add, .table .delete { float: right; } /* todo mobile first */ @media (min-width: 480px) { .table td:before { display: none; } .table th, .table td { display: table-cell } } @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { .table thead { display: none } .table tr { position: relative; } .table td { display: block } .table td:before { content: attr(title); color: #65ba00; display: inline-block; width: 6.5em } .table td:last-child { padding-bottom: .5em; } .table th { display: none } .table .number { float: right } } .smallest { background: none !important; color: black !important } .small { background: gray !important; font-size: .75em; line-height: 1.5 } .middle { background: #ccc } .big { font-size: 1.5em; line-height: 1.5 } .biggest { background: none !important; color: black !important; font-size: 2em; line-height: 1.5 } /* default */ body { background: white; color: #444 } /* greasy green */ .greasy-green h1 { border-bottom-color: green; } .greasy-green h2, .greasy-green a, .greasy-green caption, .greasy-green legend { color: green; } .greasy-green .calender th { background: green; } /* office orange */ .office-orange h1 { border-bottom-color: orange; } .office-orange h2, .office-orange a, .office-orange caption, .office-orange legend { color: orange; } .office-orange .calendar th { background: orange; } .tree * { margin: 0; padding: 0 } .tree ul { margin-left: 20px } .tree li { list-style-type: none; margin: 10px; position: relative } .tree li:before { content: ""; position: absolute; top:-7px; left:-20px; border-left: 1px solid #ccc; border-bottom:1px solid #ccc; border-radius:0 0 0 0px; width: 20px; height: 15px; } .tree li:after { position:absolute; content:""; top:8px; left:-20px; border-left: 1px solid #ccc; border-top:1px solid #ccc; border-radius: 0 0 0 0; width:20px; height:100%; } .tree li:last-child:after { display: none } .tree li:last-child:before{ border-radius: 0 0 0 5px } .tree > li:first-child:before { display: none } .tree > li:first-child:after { } .tree li a { padding: 0 5px } /* .tree li a:after { content: attr(href); display: block } */ h2, h3, h4, h5, h6 { margin-bottom: 1em; margin-top: 2em; page-break-after: avoid }