/* css Zen Garden new style by Joshua Seigler -http://www.seigler.net/ */ /* css released under Creative Commons License -http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* basic elements */ html { margin: 0; padding: 0; height: 100%; } body { color: #eee; text-shadow: #eee 0 0 2px; font-family: FreePixelCSSZenGarden,monospace; font-size: 24pt; line-height: 1.1em; padding: 0; margin: 0; height: 100%; border: none; cursor: default; /* gradient generated by http://www.colorzilla.com/gradient-editor/#05070c+10,4b574a+18,323c31+53,141817+82;Custom */ background: #282E22; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiMwNTA3MGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxOCUiIHN0b3AtY29sb3I9IiM0YjU3NGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MyUiIHN0b3AtY29sb3I9IiMzMjNjMzEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI4MiUiIHN0b3AtY29sb3I9IiMxNDE4MTciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+"); background: -moz-linear-gradient(left, rgba(5,7,12,1) 10%, rgba(75,87,74,1) 18%, rgba(50,60,49,1) 53%, rgba(20,24,23,1) 82%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(10%,rgba(5,7,12,1)), color-stop(18%,rgba(75,87,74,1)), color-stop(53%,rgba(50,60,49,1)), color-stop(82%,rgba(20,24,23,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(5,7,12,1) 10%,rgba(75,87,74,1) 18%,rgba(50,60,49,1) 53%,rgba(20,24,23,1) 82%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(5,7,12,1) 10%,rgba(75,87,74,1) 18%,rgba(50,60,49,1) 53%,rgba(20,24,23,1) 82%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(5,7,12,1) 10%,rgba(75,87,74,1) 18%,rgba(50,60,49,1) 53%,rgba(20,24,23,1) 82%); /* IE10+ */ background: linear-gradient(to right, rgba(5,7,12,1) 10%,rgba(75,87,74,1) 18%,rgba(50,60,49,1) 53%,rgba(20,24,23,1) 82%); /* W3C */ overflow-x: hidden; } header, section, div, aside { display: block; } header { margin: 25px 0; border-bottom: 3px solid rgba(239,239,239,0.5); clear: both; } h1,h2,h3 { font-weight: 400; font-family: pixChicagoCSSZenGarden,monospace; margin: 0; padding: 0; line-height: 1.5em; } h1 { font-size: 200%; } h2 { font-size: 16px; margin: 0 0 8px; } h3 { font-size: 100%; margin: 2em 0 0.8em; } a { color: inherit; } a:link { cursor: pointer; } a:link:hover { background-color: rgba(0,0,255,0.5); } a:visited:hover { background-color: rgba(127,0,127,0.5); } body:before { content: ""; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: -2; background: -webkit-linear-gradient(-5deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49.5%, rgba(255,255,255,0.125) 50%, rgba(255,255,255,0) 50.5%, rgba(255,255,255,0) 100%); background: -moz-linear-gradient(-5deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49.5%, rgba(255,255,255,0.125) 50%, rgba(255,255,255,0) 50.5%, rgba(255,255,255,0) 100%); background: -o-linear-gradient(-5deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49.5%, rgba(255,255,255,0.125) 50%, rgba(255,255,255,0) 50.5%, rgba(255,255,255,0) 100%); background: -ms-linear-gradient(-5deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49.5%, rgba(255,255,255,0.125) 50%, rgba(255,255,255,0) 50.5%, rgba(255,255,255,0) 100%); background: linear-gradient(-5deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49.5%, rgba(255,255,255,0.125) 50%, rgba(255,255,255,0) 50.5%, rgba(255,255,255,0) 100%); background-repeat: repeat; -webkit-background-size: 2000px 175px; -moz-background-size: 2000px 175px; background-size: 2000px 175px; -webkit-animation: drift 10s linear infinite; -moz-animation: drift 10s linear infinite; -ms-animation: drift 10s linear infinite; -o-animation: drift 10s linear infinite; animation: drift 10s linear infinite; } body::after { content: ""; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; background: transparent url(monitor.5d3dfa3a.png); -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; background-size: 100% 100%; background-position: center center; pointer-events: none; } abbr { text-decoration: none; border-bottom: 2px dotted rgba(239,239,239,0.25); cursor: help; } h1 abbr,h2 abbr,h3 abbr { border-bottom: none; line-height: inherit; } ul { padding: 0; } li { list-style: none; } footer { margin: 0 0 2em; } /* classes and IDs */ .page-wrapper { padding: 3em 10%; padding: 8vh 10%; } .design-selection > nav > ul { -webkit-column-width: 12em; -moz-column-width: 12em; column-width: 12em; -webkit-column-rule: 3px solid rgba(239,239,239,0.5); -moz-column-rule: 3px solid rgba(239,239,239,0.5); column-rule: 3px solid rgba(239,239,239,0.5); } .design-selection > nav > ul > li { display: inline-block; width: 100%; text-align: right; } .design-name { float: left; text-align: left; } .accesskey { text-decoration: none; color: #000; background: #eee; display: inline-block; line-height: 1.3; } /* pseudo-content changes */ #zen-summary > .p2::after { content: "."; } footer::before { content: "This design conforms to web standards: "; display: block; } /* resources */ @font-face { font-family: pixChicagoCSSZenGarden; src: url('pixChicago.9997891f.eot'), url('pixChicago.9997891f.eot?#ieFix') format('embedded-opentype'), url('pixChicago.fe66e41d.woff') format('woff'), url('pixChicago.ab0ef53a.ttf') format('truetype'); } @font-face { font-family: FreePixelCSSZenGarden; src: url('FreePixel.4a097a86.eot'), url('pixChicago.9997891f.eot?#ieFix') format('embedded-opentype'), url('FreePixel.525b04e9.woff') format('woff'), url('FreePixel.f9a6db47.ttf') format('truetype'); } @-moz-keyframes drift { from { background-position: 0 0; } to { background-position: 0 -175px; } } @-webkit-keyframes drift { from { background-position: 0 0; } to { background-position: 0 -175px; } } @-ms-keyframes drift { from { background-position: 0 0; } to { background-position: 0 -175px; } } @-o-keyframes drift { from { background-position: 0 0; } to { background-position: 0 -175px; } } @keyframes drift { from { background-position: 0 0; } to { background-position: 0 -175px; } }