/* {font-size:13pt;font-weight:normal;} */ table { border-collapse: collapse; } td { border: 6px double darkorange; padding: 10px; } ol { margin-left: 1em; } body { margin: 1em; font-family: "courier new", monospace; color: darkorange; background: #000400; word-wrap: break-word; } a { background: darkorange; color: #223; font-weight: bold; padding-right: 0.25em; } hr { border-color: darkorange; } .advisory { background: darkorange; color: #223; font-weight: bold; padding-right: 0.25em; } h1 { text-transform: uppercase; font-weight: bold; color: #000400; background: darkorange; } .advisory { -webkit-animation-name: blinker; -webkit-animation-duration: 8s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-name: blinker; -moz-animation-duration: 8s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; animation-name: blinker; animation-duration: 8s; animation-timing-function: linear; animation-iteration-count: infinite; } .sourceCode { color:#06287e; } /* Style the navbar */ #navbar { overflow: hidden; background-color: darkorange; z-index: 99; position: relative; top: 0; left: 0; width: 100%; } /* Navbar links */ #navbar a { float: left; display: block; color: black; text-align: center; padding: 14px; text-decoration: none; } /* Page content */ .content { padding-top: 5px; } input[type="text"], textarea { background-color: #333; color: darkorange; } div.alert-warning { background-color: darkred; } div.alert-success { background-color: darkgreen; } @-moz-keyframes blinker { 0% { opacity: 1; } 50% { opacity: 0.75; } 100% { opacity: 1; } } @-webkit-keyframes blinker { 0% { opacity: 1; } 50% { opacity: 0.75; } 100% { opacity: 1; } } @keyframes blinker { 0% { opacity: 1; } 50% { opacity: 0.75; } 100% { opacity: 1; } } /* Mobile */ @media (max-width: 768px) { td { display: block; } } /*christmas lights */ $globe-width: 12px; $globe-height: 28px; $globe-spacing: 40px; $globe-spread: 3px; $light-off-opacity: 0.4; body { background: #000; } .lightrope { text-align: center; white-space: nowrap; overflow: hidden; position: absolute; z-index: 1; margin: -15px 0 0 0; padding: 0; pointer-events: none; width: 100%; li { position: relative; animation-fill-mode: both; animation-iteration-count:infinite; list-style: none; margin: 0; padding: 0; display: block; width: $globe-width; height: $globe-height; border-radius: 50%; margin: $globe-spacing/2; display: inline-block; background: rgba(0,247,165,1); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,247,165,1); animation-name: flash-1; animation-duration: 2s; &:nth-child(2n+1) { background: rgba(0,255,255,1); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,255,255,0.5); animation-name: flash-2; animation-duration: 0.4s; } &:nth-child(4n+2) { background: rgba(247,0,148,1); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(247,0,148,1); animation-name: flash-3; animation-duration: 1.1s; } &:nth-child(odd) { animation-duration: 1.8s; } &:nth-child(3n+1) { animation-duration: 1.4s; } &:before { content: ""; position: absolute; background: #222; width: ($globe-width - 2); height: $globe-height/3; border-radius: 3px; top: (0 - ($globe-height/6)); left: 1px; } &:after { content: ""; top: (0 - $globe-height/2); left: $globe-width - 3; position: absolute; width: $globe-spacing + 12; height: ($globe-height/3 * 2); border-bottom: solid #222 2px; border-radius: 50%; } &:last-child:after { content: none; } &:first-child { margin-left: -$globe-spacing; } } } @keyframes flash-1 { 0%, 100% { background: rgba(0,247,165,1); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,247,165,1);} 50% { background: rgba(0,247,165,$light-off-opacity); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,247,165,0.2);} } @keyframes flash-2 { 0%, 100% { background: rgba(0,255,255,1); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,255,255,1);} 50% { background: rgba(0,255,255,$light-off-opacity); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,255,255,0.2);} } @keyframes flash-3 { 0%, 100% { background: rgba(247,0,148,1); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(247,0,148,1);} 50% { background: rgba(247,0,148,$light-off-opacity); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(247,0,148,0.2);} }