From 6ecb2e7fdc809ef13686fa223201c6a66916cf64 Mon Sep 17 00:00:00 2001 From: Marcin Kulik Date: Sun, 12 Feb 2012 14:02:25 +0100 Subject: [PATCH] Improved cursor behavior --- .../player/terminal_view.js.coffee | 11 +- app/assets/stylesheets/asciicasts.css.scss | 1159 +++++++++-------- 2 files changed, 588 insertions(+), 582 deletions(-) diff --git a/app/assets/javascripts/player/terminal_view.js.coffee b/app/assets/javascripts/player/terminal_view.js.coffee index 1752321..832a1e9 100644 --- a/app/assets/javascripts/player/terminal_view.js.coffee +++ b/app/assets/javascripts/player/terminal_view.js.coffee @@ -81,10 +81,14 @@ class AsciiIo.TerminalView extends Backbone.View blinkCursor: -> cursor = @$el.find(".cursor") - if cursor.hasClass("inverted") - cursor.removeClass "inverted" + if cursor.hasClass("visible") + cursor.removeClass "visible" else - cursor.addClass "inverted" + cursor.addClass "visible" + + resetCursorState: -> + cursor = @$el.find(".cursor") + cursor.addClass "visible" startCursorBlink: -> @cursorTimerId = setInterval(@blinkCursor.bind(this), 500) @@ -96,6 +100,7 @@ class AsciiIo.TerminalView extends Backbone.View restartCursorBlink: -> @stopCursorBlink() + @resetCursorState() @startCursorBlink() visualBell: -> diff --git a/app/assets/stylesheets/asciicasts.css.scss b/app/assets/stylesheets/asciicasts.css.scss index d366ae9..13ec58e 100644 --- a/app/assets/stylesheets/asciicasts.css.scss +++ b/app/assets/stylesheets/asciicasts.css.scss @@ -4,607 +4,608 @@ .asciicast { width: 100%; - background-color: #222 -} + background-color: #222; -.player { - /* border: 1px solid #777;*/ - /* background-color: #333;*/ - float: left; - display: block; - padding: 0px; - margin: 0px 0px 30px 20px; - position: relative; -} + .player { + /* border: 1px solid #777;*/ + /* background-color: #333;*/ + float: left; + display: block; + padding: 0px; + margin: 0px 0px 30px 20px; + position: relative; -.terminal { - padding: 2px; - margin: 0px; - display: block; - font-family: 'Droid Sans Mono', Monospace; - white-space: pre; - background-color: black; - line-height: 1.2em; - color: #ccc; - overflow: auto; - overflow-x: hidden; -} + .terminal { + padding: 2px; + margin: 0px; + display: block; + font-family: 'Droid Sans Mono', Monospace; + white-space: pre; + background-color: black; + line-height: 1.2em; + color: #ccc; + overflow: auto; + overflow-x: hidden; -.terminal .line { - font-size: 12px; - /* background-color: black;*/ - /* padding: 0;*/ - /* margin: 0;*/ -} + .line { + font-size: 12px; + /* background-color: black;*/ + /* padding: 0;*/ + /* margin: 0;*/ + } -.cursor-on .line span.cursor, .cursor-on .line .cursor > span { - background-color: #D3D7CF; -} + &.cursor-on { + .line { + .cursor.visible { + background-color: #D3D7CF; + } + } + } + } -.cursor-on .line span.cursor.inverted, .cursor-on .line .cursor.inverted > span { - background-color: inherit; -} + .hud { + background-color: #333; + opacity: 0.85; + position: absolute; + left: 20px; + right: 20px; + bottom: 10px; + display: none; + height: 30px; + color: white; + } -.hud { - background-color: #333; - opacity: 0.85; - position: absolute; - left: 20px; - right: 20px; - bottom: 10px; - display: none; - height: 30px; - color: white; -} + .player:hover .hud { + display: block; + } -.player:hover .hud { - display: block; -} + } -.bright { font-weight: bold } -.underline { text-decoration: underline } + .bright { font-weight: bold } + .underline { text-decoration: underline } -/* Foregrounds: */ + /* Foregrounds: */ -/* ansi colors */ + /* ansi colors */ - .fg0 { color: #000000 } - .fg1 { color: #CC0000 } - .fg2 { color: #4E9A06 } - .fg3 { color: #C4A000 } - .fg4 { color: #3465A4 } - .fg5 { color: #75507B } - .fg6 { color: #06989A } - .fg7 { color: #D3D7CF } - .fg8 { color: #555753; font-weight: bold } - .fg9 { color: #EF2929; font-weight: bold } - .fg10 { color: #8AE234; font-weight: bold } - .fg11 { color: #FCE94F; font-weight: bold } - .fg12 { color: #729FCF; font-weight: bold } - .fg13 { color: #AD7FA8; font-weight: bold } - .fg14 { color: #34E2E2; font-weight: bold } - .fg15 { color: #EEEEEC; font-weight: bold } + .fg0 { color: #000000 } + .fg1 { color: #CC0000 } + .fg2 { color: #4E9A06 } + .fg3 { color: #C4A000 } + .fg4 { color: #3465A4 } + .fg5 { color: #75507B } + .fg6 { color: #06989A } + .fg7 { color: #D3D7CF } + .fg8 { color: #555753; font-weight: bold } + .fg9 { color: #EF2929; font-weight: bold } + .fg10 { color: #8AE234; font-weight: bold } + .fg11 { color: #FCE94F; font-weight: bold } + .fg12 { color: #729FCF; font-weight: bold } + .fg13 { color: #AD7FA8; font-weight: bold } + .fg14 { color: #34E2E2; font-weight: bold } + .fg15 { color: #EEEEEC; font-weight: bold } -/* 216 rgb colors */ + /* 216 rgb colors */ - .fg16 { color: #000000 } - .fg17 { color: #00005f } - .fg18 { color: #000087 } - .fg19 { color: #0000af } - .fg20 { color: #0000d7 } - .fg21 { color: #0000ff } - .fg22 { color: #005f00 } - .fg23 { color: #005f5f } - .fg24 { color: #005f87 } - .fg25 { color: #005faf } - .fg26 { color: #005fd7 } - .fg27 { color: #005fff } - .fg28 { color: #008700 } - .fg29 { color: #00875f } - .fg30 { color: #008787 } - .fg31 { color: #0087af } - .fg32 { color: #0087d7 } - .fg33 { color: #0087ff } - .fg34 { color: #00af00 } - .fg35 { color: #00af5f } - .fg36 { color: #00af87 } - .fg37 { color: #00afaf } - .fg38 { color: #00afd7 } - .fg39 { color: #00afff } - .fg40 { color: #00d700 } - .fg41 { color: #00d75f } - .fg42 { color: #00d787 } - .fg43 { color: #00d7af } - .fg44 { color: #00d7d7 } - .fg45 { color: #00d7ff } - .fg46 { color: #00ff00 } - .fg47 { color: #00ff5f } - .fg48 { color: #00ff87 } - .fg49 { color: #00ffaf } - .fg50 { color: #00ffd7 } - .fg51 { color: #00ffff } - .fg52 { color: #5f0000 } - .fg53 { color: #5f005f } - .fg54 { color: #5f0087 } - .fg55 { color: #5f00af } - .fg56 { color: #5f00d7 } - .fg57 { color: #5f00ff } - .fg58 { color: #5f5f00 } - .fg59 { color: #5f5f5f } - .fg60 { color: #5f5f87 } - .fg61 { color: #5f5faf } - .fg62 { color: #5f5fd7 } - .fg63 { color: #5f5fff } - .fg64 { color: #5f8700 } - .fg65 { color: #5f875f } - .fg66 { color: #5f8787 } - .fg67 { color: #5f87af } - .fg68 { color: #5f87d7 } - .fg69 { color: #5f87ff } - .fg70 { color: #5faf00 } - .fg71 { color: #5faf5f } - .fg72 { color: #5faf87 } - .fg73 { color: #5fafaf } - .fg74 { color: #5fafd7 } - .fg75 { color: #5fafff } - .fg76 { color: #5fd700 } - .fg77 { color: #5fd75f } - .fg78 { color: #5fd787 } - .fg79 { color: #5fd7af } - .fg80 { color: #5fd7d7 } - .fg81 { color: #5fd7ff } - .fg82 { color: #5fff00 } - .fg83 { color: #5fff5f } - .fg84 { color: #5fff87 } - .fg85 { color: #5fffaf } - .fg86 { color: #5fffd7 } - .fg87 { color: #5fffff } - .fg88 { color: #870000 } - .fg89 { color: #87005f } - .fg90 { color: #870087 } - .fg91 { color: #8700af } - .fg92 { color: #8700d7 } - .fg93 { color: #8700ff } - .fg94 { color: #875f00 } - .fg95 { color: #875f5f } - .fg96 { color: #875f87 } - .fg97 { color: #875faf } - .fg98 { color: #875fd7 } - .fg99 { color: #875fff } -.fg100 { color: #878700 } -.fg101 { color: #87875f } -.fg102 { color: #878787 } -.fg103 { color: #8787af } -.fg104 { color: #8787d7 } -.fg105 { color: #8787ff } -.fg106 { color: #87af00 } -.fg107 { color: #87af5f } -.fg108 { color: #87af87 } -.fg109 { color: #87afaf } -.fg110 { color: #87afd7 } -.fg111 { color: #87afff } -.fg112 { color: #87d700 } -.fg113 { color: #87d75f } -.fg114 { color: #87d787 } -.fg115 { color: #87d7af } -.fg116 { color: #87d7d7 } -.fg117 { color: #87d7ff } -.fg118 { color: #87ff00 } -.fg119 { color: #87ff5f } -.fg120 { color: #87ff87 } -.fg121 { color: #87ffaf } -.fg122 { color: #87ffd7 } -.fg123 { color: #87ffff } -.fg124 { color: #af0000 } -.fg125 { color: #af005f } -.fg126 { color: #af0087 } -.fg127 { color: #af00af } -.fg128 { color: #af00d7 } -.fg129 { color: #af00ff } -.fg130 { color: #af5f00 } -.fg131 { color: #af5f5f } -.fg132 { color: #af5f87 } -.fg133 { color: #af5faf } -.fg134 { color: #af5fd7 } -.fg135 { color: #af5fff } -.fg136 { color: #af8700 } -.fg137 { color: #af875f } -.fg138 { color: #af8787 } -.fg139 { color: #af87af } -.fg140 { color: #af87d7 } -.fg141 { color: #af87ff } -.fg142 { color: #afaf00 } -.fg143 { color: #afaf5f } -.fg144 { color: #afaf87 } -.fg145 { color: #afafaf } -.fg146 { color: #afafd7 } -.fg147 { color: #afafff } -.fg148 { color: #afd700 } -.fg149 { color: #afd75f } -.fg150 { color: #afd787 } -.fg151 { color: #afd7af } -.fg152 { color: #afd7d7 } -.fg153 { color: #afd7ff } -.fg154 { color: #afff00 } -.fg155 { color: #afff5f } -.fg156 { color: #afff87 } -.fg157 { color: #afffaf } -.fg158 { color: #afffd7 } -.fg159 { color: #afffff } -.fg160 { color: #d70000 } -.fg161 { color: #d7005f } -.fg162 { color: #d70087 } -.fg163 { color: #d700af } -.fg164 { color: #d700d7 } -.fg165 { color: #d700ff } -.fg166 { color: #d75f00 } -.fg167 { color: #d75f5f } -.fg168 { color: #d75f87 } -.fg169 { color: #d75faf } -.fg170 { color: #d75fd7 } -.fg171 { color: #d75fff } -.fg172 { color: #d78700 } -.fg173 { color: #d7875f } -.fg174 { color: #d78787 } -.fg175 { color: #d787af } -.fg176 { color: #d787d7 } -.fg177 { color: #d787ff } -.fg178 { color: #d7af00 } -.fg179 { color: #d7af5f } -.fg180 { color: #d7af87 } -.fg181 { color: #d7afaf } -.fg182 { color: #d7afd7 } -.fg183 { color: #d7afff } -.fg184 { color: #d7d700 } -.fg185 { color: #d7d75f } -.fg186 { color: #d7d787 } -.fg187 { color: #d7d7af } -.fg188 { color: #d7d7d7 } -.fg189 { color: #d7d7ff } -.fg190 { color: #d7ff00 } -.fg191 { color: #d7ff5f } -.fg192 { color: #d7ff87 } -.fg193 { color: #d7ffaf } -.fg194 { color: #d7ffd7 } -.fg195 { color: #d7ffff } -.fg196 { color: #ff0000 } -.fg197 { color: #ff005f } -.fg198 { color: #ff0087 } -.fg199 { color: #ff00af } -.fg200 { color: #ff00d7 } -.fg201 { color: #ff00ff } -.fg202 { color: #ff5f00 } -.fg203 { color: #ff5f5f } -.fg204 { color: #ff5f87 } -.fg205 { color: #ff5faf } -.fg206 { color: #ff5fd7 } -.fg207 { color: #ff5fff } -.fg208 { color: #ff8700 } -.fg209 { color: #ff875f } -.fg210 { color: #ff8787 } -.fg211 { color: #ff87af } -.fg212 { color: #ff87d7 } -.fg213 { color: #ff87ff } -.fg214 { color: #ffaf00 } -.fg215 { color: #ffaf5f } -.fg216 { color: #ffaf87 } -.fg217 { color: #ffafaf } -.fg218 { color: #ffafd7 } -.fg219 { color: #ffafff } -.fg220 { color: #ffd700 } -.fg221 { color: #ffd75f } -.fg222 { color: #ffd787 } -.fg223 { color: #ffd7af } -.fg224 { color: #ffd7d7 } -.fg225 { color: #ffd7ff } -.fg226 { color: #ffff00 } -.fg227 { color: #ffff5f } -.fg228 { color: #ffff87 } -.fg229 { color: #ffffaf } -.fg230 { color: #ffffd7 } -.fg231 { color: #ffffff } + .fg16 { color: #000000 } + .fg17 { color: #00005f } + .fg18 { color: #000087 } + .fg19 { color: #0000af } + .fg20 { color: #0000d7 } + .fg21 { color: #0000ff } + .fg22 { color: #005f00 } + .fg23 { color: #005f5f } + .fg24 { color: #005f87 } + .fg25 { color: #005faf } + .fg26 { color: #005fd7 } + .fg27 { color: #005fff } + .fg28 { color: #008700 } + .fg29 { color: #00875f } + .fg30 { color: #008787 } + .fg31 { color: #0087af } + .fg32 { color: #0087d7 } + .fg33 { color: #0087ff } + .fg34 { color: #00af00 } + .fg35 { color: #00af5f } + .fg36 { color: #00af87 } + .fg37 { color: #00afaf } + .fg38 { color: #00afd7 } + .fg39 { color: #00afff } + .fg40 { color: #00d700 } + .fg41 { color: #00d75f } + .fg42 { color: #00d787 } + .fg43 { color: #00d7af } + .fg44 { color: #00d7d7 } + .fg45 { color: #00d7ff } + .fg46 { color: #00ff00 } + .fg47 { color: #00ff5f } + .fg48 { color: #00ff87 } + .fg49 { color: #00ffaf } + .fg50 { color: #00ffd7 } + .fg51 { color: #00ffff } + .fg52 { color: #5f0000 } + .fg53 { color: #5f005f } + .fg54 { color: #5f0087 } + .fg55 { color: #5f00af } + .fg56 { color: #5f00d7 } + .fg57 { color: #5f00ff } + .fg58 { color: #5f5f00 } + .fg59 { color: #5f5f5f } + .fg60 { color: #5f5f87 } + .fg61 { color: #5f5faf } + .fg62 { color: #5f5fd7 } + .fg63 { color: #5f5fff } + .fg64 { color: #5f8700 } + .fg65 { color: #5f875f } + .fg66 { color: #5f8787 } + .fg67 { color: #5f87af } + .fg68 { color: #5f87d7 } + .fg69 { color: #5f87ff } + .fg70 { color: #5faf00 } + .fg71 { color: #5faf5f } + .fg72 { color: #5faf87 } + .fg73 { color: #5fafaf } + .fg74 { color: #5fafd7 } + .fg75 { color: #5fafff } + .fg76 { color: #5fd700 } + .fg77 { color: #5fd75f } + .fg78 { color: #5fd787 } + .fg79 { color: #5fd7af } + .fg80 { color: #5fd7d7 } + .fg81 { color: #5fd7ff } + .fg82 { color: #5fff00 } + .fg83 { color: #5fff5f } + .fg84 { color: #5fff87 } + .fg85 { color: #5fffaf } + .fg86 { color: #5fffd7 } + .fg87 { color: #5fffff } + .fg88 { color: #870000 } + .fg89 { color: #87005f } + .fg90 { color: #870087 } + .fg91 { color: #8700af } + .fg92 { color: #8700d7 } + .fg93 { color: #8700ff } + .fg94 { color: #875f00 } + .fg95 { color: #875f5f } + .fg96 { color: #875f87 } + .fg97 { color: #875faf } + .fg98 { color: #875fd7 } + .fg99 { color: #875fff } + .fg100 { color: #878700 } + .fg101 { color: #87875f } + .fg102 { color: #878787 } + .fg103 { color: #8787af } + .fg104 { color: #8787d7 } + .fg105 { color: #8787ff } + .fg106 { color: #87af00 } + .fg107 { color: #87af5f } + .fg108 { color: #87af87 } + .fg109 { color: #87afaf } + .fg110 { color: #87afd7 } + .fg111 { color: #87afff } + .fg112 { color: #87d700 } + .fg113 { color: #87d75f } + .fg114 { color: #87d787 } + .fg115 { color: #87d7af } + .fg116 { color: #87d7d7 } + .fg117 { color: #87d7ff } + .fg118 { color: #87ff00 } + .fg119 { color: #87ff5f } + .fg120 { color: #87ff87 } + .fg121 { color: #87ffaf } + .fg122 { color: #87ffd7 } + .fg123 { color: #87ffff } + .fg124 { color: #af0000 } + .fg125 { color: #af005f } + .fg126 { color: #af0087 } + .fg127 { color: #af00af } + .fg128 { color: #af00d7 } + .fg129 { color: #af00ff } + .fg130 { color: #af5f00 } + .fg131 { color: #af5f5f } + .fg132 { color: #af5f87 } + .fg133 { color: #af5faf } + .fg134 { color: #af5fd7 } + .fg135 { color: #af5fff } + .fg136 { color: #af8700 } + .fg137 { color: #af875f } + .fg138 { color: #af8787 } + .fg139 { color: #af87af } + .fg140 { color: #af87d7 } + .fg141 { color: #af87ff } + .fg142 { color: #afaf00 } + .fg143 { color: #afaf5f } + .fg144 { color: #afaf87 } + .fg145 { color: #afafaf } + .fg146 { color: #afafd7 } + .fg147 { color: #afafff } + .fg148 { color: #afd700 } + .fg149 { color: #afd75f } + .fg150 { color: #afd787 } + .fg151 { color: #afd7af } + .fg152 { color: #afd7d7 } + .fg153 { color: #afd7ff } + .fg154 { color: #afff00 } + .fg155 { color: #afff5f } + .fg156 { color: #afff87 } + .fg157 { color: #afffaf } + .fg158 { color: #afffd7 } + .fg159 { color: #afffff } + .fg160 { color: #d70000 } + .fg161 { color: #d7005f } + .fg162 { color: #d70087 } + .fg163 { color: #d700af } + .fg164 { color: #d700d7 } + .fg165 { color: #d700ff } + .fg166 { color: #d75f00 } + .fg167 { color: #d75f5f } + .fg168 { color: #d75f87 } + .fg169 { color: #d75faf } + .fg170 { color: #d75fd7 } + .fg171 { color: #d75fff } + .fg172 { color: #d78700 } + .fg173 { color: #d7875f } + .fg174 { color: #d78787 } + .fg175 { color: #d787af } + .fg176 { color: #d787d7 } + .fg177 { color: #d787ff } + .fg178 { color: #d7af00 } + .fg179 { color: #d7af5f } + .fg180 { color: #d7af87 } + .fg181 { color: #d7afaf } + .fg182 { color: #d7afd7 } + .fg183 { color: #d7afff } + .fg184 { color: #d7d700 } + .fg185 { color: #d7d75f } + .fg186 { color: #d7d787 } + .fg187 { color: #d7d7af } + .fg188 { color: #d7d7d7 } + .fg189 { color: #d7d7ff } + .fg190 { color: #d7ff00 } + .fg191 { color: #d7ff5f } + .fg192 { color: #d7ff87 } + .fg193 { color: #d7ffaf } + .fg194 { color: #d7ffd7 } + .fg195 { color: #d7ffff } + .fg196 { color: #ff0000 } + .fg197 { color: #ff005f } + .fg198 { color: #ff0087 } + .fg199 { color: #ff00af } + .fg200 { color: #ff00d7 } + .fg201 { color: #ff00ff } + .fg202 { color: #ff5f00 } + .fg203 { color: #ff5f5f } + .fg204 { color: #ff5f87 } + .fg205 { color: #ff5faf } + .fg206 { color: #ff5fd7 } + .fg207 { color: #ff5fff } + .fg208 { color: #ff8700 } + .fg209 { color: #ff875f } + .fg210 { color: #ff8787 } + .fg211 { color: #ff87af } + .fg212 { color: #ff87d7 } + .fg213 { color: #ff87ff } + .fg214 { color: #ffaf00 } + .fg215 { color: #ffaf5f } + .fg216 { color: #ffaf87 } + .fg217 { color: #ffafaf } + .fg218 { color: #ffafd7 } + .fg219 { color: #ffafff } + .fg220 { color: #ffd700 } + .fg221 { color: #ffd75f } + .fg222 { color: #ffd787 } + .fg223 { color: #ffd7af } + .fg224 { color: #ffd7d7 } + .fg225 { color: #ffd7ff } + .fg226 { color: #ffff00 } + .fg227 { color: #ffff5f } + .fg228 { color: #ffff87 } + .fg229 { color: #ffffaf } + .fg230 { color: #ffffd7 } + .fg231 { color: #ffffff } -/* 24 shades of grey */ + /* 24 shades of grey */ -.fg232 { color: #080808 } -.fg233 { color: #121212 } -.fg234 { color: #1c1c1c } -.fg235 { color: #262626 } -.fg236 { color: #303030 } -.fg237 { color: #3a3a3a } -.fg238 { color: #444444 } -.fg239 { color: #4e4e4e } -.fg240 { color: #585858 } -.fg241 { color: #626262 } -.fg242 { color: #6c6c6c } -.fg243 { color: #767676 } -.fg244 { color: #808080 } -.fg245 { color: #8a8a8a } -.fg246 { color: #949494 } -.fg247 { color: #9e9e9e } -.fg248 { color: #a8a8a8 } -.fg249 { color: #b2b2b2 } -.fg250 { color: #bcbcbc } -.fg251 { color: #c6c6c6 } -.fg252 { color: #d0d0d0 } -.fg253 { color: #dadada } -.fg254 { color: #e4e4e4 } -.fg255 { color: #eeeeee } + .fg232 { color: #080808 } + .fg233 { color: #121212 } + .fg234 { color: #1c1c1c } + .fg235 { color: #262626 } + .fg236 { color: #303030 } + .fg237 { color: #3a3a3a } + .fg238 { color: #444444 } + .fg239 { color: #4e4e4e } + .fg240 { color: #585858 } + .fg241 { color: #626262 } + .fg242 { color: #6c6c6c } + .fg243 { color: #767676 } + .fg244 { color: #808080 } + .fg245 { color: #8a8a8a } + .fg246 { color: #949494 } + .fg247 { color: #9e9e9e } + .fg248 { color: #a8a8a8 } + .fg249 { color: #b2b2b2 } + .fg250 { color: #bcbcbc } + .fg251 { color: #c6c6c6 } + .fg252 { color: #d0d0d0 } + .fg253 { color: #dadada } + .fg254 { color: #e4e4e4 } + .fg255 { color: #eeeeee } -/* Backgrounds: */ + /* Backgrounds: */ -/* ansi colors */ + /* ansi colors */ - .bg0 { background-color: #000000 } - .bg1 { background-color: #CC0000 } - .bg2 { background-color: #4E9A06 } - .bg3 { background-color: #C4A000 } - .bg4 { background-color: #3465A4 } - .bg5 { background-color: #75507B } - .bg6 { background-color: #06989A } - .bg7 { background-color: #D3D7CF } - .bg8 { background-color: #555753 } - .bg9 { background-color: #EF2929 } - .bg10 { background-color: #8AE234 } - .bg11 { background-color: #FCE94F } - .bg12 { background-color: #729FCF } - .bg13 { background-color: #AD7FA8 } - .bg14 { background-color: #34E2E2 } - .bg15 { background-color: #EEEEEC } + .bg0 { background-color: #000000 } + .bg1 { background-color: #CC0000 } + .bg2 { background-color: #4E9A06 } + .bg3 { background-color: #C4A000 } + .bg4 { background-color: #3465A4 } + .bg5 { background-color: #75507B } + .bg6 { background-color: #06989A } + .bg7 { background-color: #D3D7CF } + .bg8 { background-color: #555753 } + .bg9 { background-color: #EF2929 } + .bg10 { background-color: #8AE234 } + .bg11 { background-color: #FCE94F } + .bg12 { background-color: #729FCF } + .bg13 { background-color: #AD7FA8 } + .bg14 { background-color: #34E2E2 } + .bg15 { background-color: #EEEEEC } -/* 216 rgb colors */ + /* 216 rgb colors */ - .bg16 { background-color: #000000 } - .bg17 { background-color: #00005f } - .bg18 { background-color: #000087 } - .bg19 { background-color: #0000af } - .bg20 { background-color: #0000d7 } - .bg21 { background-color: #0000ff } - .bg22 { background-color: #005f00 } - .bg23 { background-color: #005f5f } - .bg24 { background-color: #005f87 } - .bg25 { background-color: #005faf } - .bg26 { background-color: #005fd7 } - .bg27 { background-color: #005fff } - .bg28 { background-color: #008700 } - .bg29 { background-color: #00875f } - .bg30 { background-color: #008787 } - .bg31 { background-color: #0087af } - .bg32 { background-color: #0087d7 } - .bg33 { background-color: #0087ff } - .bg34 { background-color: #00af00 } - .bg35 { background-color: #00af5f } - .bg36 { background-color: #00af87 } - .bg37 { background-color: #00afaf } - .bg38 { background-color: #00afd7 } - .bg39 { background-color: #00afff } - .bg40 { background-color: #00d700 } - .bg41 { background-color: #00d75f } - .bg42 { background-color: #00d787 } - .bg43 { background-color: #00d7af } - .bg44 { background-color: #00d7d7 } - .bg45 { background-color: #00d7ff } - .bg46 { background-color: #00ff00 } - .bg47 { background-color: #00ff5f } - .bg48 { background-color: #00ff87 } - .bg49 { background-color: #00ffaf } - .bg50 { background-color: #00ffd7 } - .bg51 { background-color: #00ffff } - .bg52 { background-color: #5f0000 } - .bg53 { background-color: #5f005f } - .bg54 { background-color: #5f0087 } - .bg55 { background-color: #5f00af } - .bg56 { background-color: #5f00d7 } - .bg57 { background-color: #5f00ff } - .bg58 { background-color: #5f5f00 } - .bg59 { background-color: #5f5f5f } - .bg60 { background-color: #5f5f87 } - .bg61 { background-color: #5f5faf } - .bg62 { background-color: #5f5fd7 } - .bg63 { background-color: #5f5fff } - .bg64 { background-color: #5f8700 } - .bg65 { background-color: #5f875f } - .bg66 { background-color: #5f8787 } - .bg67 { background-color: #5f87af } - .bg68 { background-color: #5f87d7 } - .bg69 { background-color: #5f87ff } - .bg70 { background-color: #5faf00 } - .bg71 { background-color: #5faf5f } - .bg72 { background-color: #5faf87 } - .bg73 { background-color: #5fafaf } - .bg74 { background-color: #5fafd7 } - .bg75 { background-color: #5fafff } - .bg76 { background-color: #5fd700 } - .bg77 { background-color: #5fd75f } - .bg78 { background-color: #5fd787 } - .bg79 { background-color: #5fd7af } - .bg80 { background-color: #5fd7d7 } - .bg81 { background-color: #5fd7ff } - .bg82 { background-color: #5fff00 } - .bg83 { background-color: #5fff5f } - .bg84 { background-color: #5fff87 } - .bg85 { background-color: #5fffaf } - .bg86 { background-color: #5fffd7 } - .bg87 { background-color: #5fffff } - .bg88 { background-color: #870000 } - .bg89 { background-color: #87005f } - .bg90 { background-color: #870087 } - .bg91 { background-color: #8700af } - .bg92 { background-color: #8700d7 } - .bg93 { background-color: #8700ff } - .bg94 { background-color: #875f00 } - .bg95 { background-color: #875f5f } - .bg96 { background-color: #875f87 } - .bg97 { background-color: #875faf } - .bg98 { background-color: #875fd7 } - .bg99 { background-color: #875fff } -.bg100 { background-color: #878700 } -.bg101 { background-color: #87875f } -.bg102 { background-color: #878787 } -.bg103 { background-color: #8787af } -.bg104 { background-color: #8787d7 } -.bg105 { background-color: #8787ff } -.bg106 { background-color: #87af00 } -.bg107 { background-color: #87af5f } -.bg108 { background-color: #87af87 } -.bg109 { background-color: #87afaf } -.bg110 { background-color: #87afd7 } -.bg111 { background-color: #87afff } -.bg112 { background-color: #87d700 } -.bg113 { background-color: #87d75f } -.bg114 { background-color: #87d787 } -.bg115 { background-color: #87d7af } -.bg116 { background-color: #87d7d7 } -.bg117 { background-color: #87d7ff } -.bg118 { background-color: #87ff00 } -.bg119 { background-color: #87ff5f } -.bg120 { background-color: #87ff87 } -.bg121 { background-color: #87ffaf } -.bg122 { background-color: #87ffd7 } -.bg123 { background-color: #87ffff } -.bg124 { background-color: #af0000 } -.bg125 { background-color: #af005f } -.bg126 { background-color: #af0087 } -.bg127 { background-color: #af00af } -.bg128 { background-color: #af00d7 } -.bg129 { background-color: #af00ff } -.bg130 { background-color: #af5f00 } -.bg131 { background-color: #af5f5f } -.bg132 { background-color: #af5f87 } -.bg133 { background-color: #af5faf } -.bg134 { background-color: #af5fd7 } -.bg135 { background-color: #af5fff } -.bg136 { background-color: #af8700 } -.bg137 { background-color: #af875f } -.bg138 { background-color: #af8787 } -.bg139 { background-color: #af87af } -.bg140 { background-color: #af87d7 } -.bg141 { background-color: #af87ff } -.bg142 { background-color: #afaf00 } -.bg143 { background-color: #afaf5f } -.bg144 { background-color: #afaf87 } -.bg145 { background-color: #afafaf } -.bg146 { background-color: #afafd7 } -.bg147 { background-color: #afafff } -.bg148 { background-color: #afd700 } -.bg149 { background-color: #afd75f } -.bg150 { background-color: #afd787 } -.bg151 { background-color: #afd7af } -.bg152 { background-color: #afd7d7 } -.bg153 { background-color: #afd7ff } -.bg154 { background-color: #afff00 } -.bg155 { background-color: #afff5f } -.bg156 { background-color: #afff87 } -.bg157 { background-color: #afffaf } -.bg158 { background-color: #afffd7 } -.bg159 { background-color: #afffff } -.bg160 { background-color: #d70000 } -.bg161 { background-color: #d7005f } -.bg162 { background-color: #d70087 } -.bg163 { background-color: #d700af } -.bg164 { background-color: #d700d7 } -.bg165 { background-color: #d700ff } -.bg166 { background-color: #d75f00 } -.bg167 { background-color: #d75f5f } -.bg168 { background-color: #d75f87 } -.bg169 { background-color: #d75faf } -.bg170 { background-color: #d75fd7 } -.bg171 { background-color: #d75fff } -.bg172 { background-color: #d78700 } -.bg173 { background-color: #d7875f } -.bg174 { background-color: #d78787 } -.bg175 { background-color: #d787af } -.bg176 { background-color: #d787d7 } -.bg177 { background-color: #d787ff } -.bg178 { background-color: #d7af00 } -.bg179 { background-color: #d7af5f } -.bg180 { background-color: #d7af87 } -.bg181 { background-color: #d7afaf } -.bg182 { background-color: #d7afd7 } -.bg183 { background-color: #d7afff } -.bg184 { background-color: #d7d700 } -.bg185 { background-color: #d7d75f } -.bg186 { background-color: #d7d787 } -.bg187 { background-color: #d7d7af } -.bg188 { background-color: #d7d7d7 } -.bg189 { background-color: #d7d7ff } -.bg190 { background-color: #d7ff00 } -.bg191 { background-color: #d7ff5f } -.bg192 { background-color: #d7ff87 } -.bg193 { background-color: #d7ffaf } -.bg194 { background-color: #d7ffd7 } -.bg195 { background-color: #d7ffff } -.bg196 { background-color: #ff0000 } -.bg197 { background-color: #ff005f } -.bg198 { background-color: #ff0087 } -.bg199 { background-color: #ff00af } -.bg200 { background-color: #ff00d7 } -.bg201 { background-color: #ff00ff } -.bg202 { background-color: #ff5f00 } -.bg203 { background-color: #ff5f5f } -.bg204 { background-color: #ff5f87 } -.bg205 { background-color: #ff5faf } -.bg206 { background-color: #ff5fd7 } -.bg207 { background-color: #ff5fff } -.bg208 { background-color: #ff8700 } -.bg209 { background-color: #ff875f } -.bg210 { background-color: #ff8787 } -.bg211 { background-color: #ff87af } -.bg212 { background-color: #ff87d7 } -.bg213 { background-color: #ff87ff } -.bg214 { background-color: #ffaf00 } -.bg215 { background-color: #ffaf5f } -.bg216 { background-color: #ffaf87 } -.bg217 { background-color: #ffafaf } -.bg218 { background-color: #ffafd7 } -.bg219 { background-color: #ffafff } -.bg220 { background-color: #ffd700 } -.bg221 { background-color: #ffd75f } -.bg222 { background-color: #ffd787 } -.bg223 { background-color: #ffd7af } -.bg224 { background-color: #ffd7d7 } -.bg225 { background-color: #ffd7ff } -.bg226 { background-color: #ffff00 } -.bg227 { background-color: #ffff5f } -.bg228 { background-color: #ffff87 } -.bg229 { background-color: #ffffaf } -.bg230 { background-color: #ffffd7 } -.bg231 { background-color: #ffffff } + .bg16 { background-color: #000000 } + .bg17 { background-color: #00005f } + .bg18 { background-color: #000087 } + .bg19 { background-color: #0000af } + .bg20 { background-color: #0000d7 } + .bg21 { background-color: #0000ff } + .bg22 { background-color: #005f00 } + .bg23 { background-color: #005f5f } + .bg24 { background-color: #005f87 } + .bg25 { background-color: #005faf } + .bg26 { background-color: #005fd7 } + .bg27 { background-color: #005fff } + .bg28 { background-color: #008700 } + .bg29 { background-color: #00875f } + .bg30 { background-color: #008787 } + .bg31 { background-color: #0087af } + .bg32 { background-color: #0087d7 } + .bg33 { background-color: #0087ff } + .bg34 { background-color: #00af00 } + .bg35 { background-color: #00af5f } + .bg36 { background-color: #00af87 } + .bg37 { background-color: #00afaf } + .bg38 { background-color: #00afd7 } + .bg39 { background-color: #00afff } + .bg40 { background-color: #00d700 } + .bg41 { background-color: #00d75f } + .bg42 { background-color: #00d787 } + .bg43 { background-color: #00d7af } + .bg44 { background-color: #00d7d7 } + .bg45 { background-color: #00d7ff } + .bg46 { background-color: #00ff00 } + .bg47 { background-color: #00ff5f } + .bg48 { background-color: #00ff87 } + .bg49 { background-color: #00ffaf } + .bg50 { background-color: #00ffd7 } + .bg51 { background-color: #00ffff } + .bg52 { background-color: #5f0000 } + .bg53 { background-color: #5f005f } + .bg54 { background-color: #5f0087 } + .bg55 { background-color: #5f00af } + .bg56 { background-color: #5f00d7 } + .bg57 { background-color: #5f00ff } + .bg58 { background-color: #5f5f00 } + .bg59 { background-color: #5f5f5f } + .bg60 { background-color: #5f5f87 } + .bg61 { background-color: #5f5faf } + .bg62 { background-color: #5f5fd7 } + .bg63 { background-color: #5f5fff } + .bg64 { background-color: #5f8700 } + .bg65 { background-color: #5f875f } + .bg66 { background-color: #5f8787 } + .bg67 { background-color: #5f87af } + .bg68 { background-color: #5f87d7 } + .bg69 { background-color: #5f87ff } + .bg70 { background-color: #5faf00 } + .bg71 { background-color: #5faf5f } + .bg72 { background-color: #5faf87 } + .bg73 { background-color: #5fafaf } + .bg74 { background-color: #5fafd7 } + .bg75 { background-color: #5fafff } + .bg76 { background-color: #5fd700 } + .bg77 { background-color: #5fd75f } + .bg78 { background-color: #5fd787 } + .bg79 { background-color: #5fd7af } + .bg80 { background-color: #5fd7d7 } + .bg81 { background-color: #5fd7ff } + .bg82 { background-color: #5fff00 } + .bg83 { background-color: #5fff5f } + .bg84 { background-color: #5fff87 } + .bg85 { background-color: #5fffaf } + .bg86 { background-color: #5fffd7 } + .bg87 { background-color: #5fffff } + .bg88 { background-color: #870000 } + .bg89 { background-color: #87005f } + .bg90 { background-color: #870087 } + .bg91 { background-color: #8700af } + .bg92 { background-color: #8700d7 } + .bg93 { background-color: #8700ff } + .bg94 { background-color: #875f00 } + .bg95 { background-color: #875f5f } + .bg96 { background-color: #875f87 } + .bg97 { background-color: #875faf } + .bg98 { background-color: #875fd7 } + .bg99 { background-color: #875fff } + .bg100 { background-color: #878700 } + .bg101 { background-color: #87875f } + .bg102 { background-color: #878787 } + .bg103 { background-color: #8787af } + .bg104 { background-color: #8787d7 } + .bg105 { background-color: #8787ff } + .bg106 { background-color: #87af00 } + .bg107 { background-color: #87af5f } + .bg108 { background-color: #87af87 } + .bg109 { background-color: #87afaf } + .bg110 { background-color: #87afd7 } + .bg111 { background-color: #87afff } + .bg112 { background-color: #87d700 } + .bg113 { background-color: #87d75f } + .bg114 { background-color: #87d787 } + .bg115 { background-color: #87d7af } + .bg116 { background-color: #87d7d7 } + .bg117 { background-color: #87d7ff } + .bg118 { background-color: #87ff00 } + .bg119 { background-color: #87ff5f } + .bg120 { background-color: #87ff87 } + .bg121 { background-color: #87ffaf } + .bg122 { background-color: #87ffd7 } + .bg123 { background-color: #87ffff } + .bg124 { background-color: #af0000 } + .bg125 { background-color: #af005f } + .bg126 { background-color: #af0087 } + .bg127 { background-color: #af00af } + .bg128 { background-color: #af00d7 } + .bg129 { background-color: #af00ff } + .bg130 { background-color: #af5f00 } + .bg131 { background-color: #af5f5f } + .bg132 { background-color: #af5f87 } + .bg133 { background-color: #af5faf } + .bg134 { background-color: #af5fd7 } + .bg135 { background-color: #af5fff } + .bg136 { background-color: #af8700 } + .bg137 { background-color: #af875f } + .bg138 { background-color: #af8787 } + .bg139 { background-color: #af87af } + .bg140 { background-color: #af87d7 } + .bg141 { background-color: #af87ff } + .bg142 { background-color: #afaf00 } + .bg143 { background-color: #afaf5f } + .bg144 { background-color: #afaf87 } + .bg145 { background-color: #afafaf } + .bg146 { background-color: #afafd7 } + .bg147 { background-color: #afafff } + .bg148 { background-color: #afd700 } + .bg149 { background-color: #afd75f } + .bg150 { background-color: #afd787 } + .bg151 { background-color: #afd7af } + .bg152 { background-color: #afd7d7 } + .bg153 { background-color: #afd7ff } + .bg154 { background-color: #afff00 } + .bg155 { background-color: #afff5f } + .bg156 { background-color: #afff87 } + .bg157 { background-color: #afffaf } + .bg158 { background-color: #afffd7 } + .bg159 { background-color: #afffff } + .bg160 { background-color: #d70000 } + .bg161 { background-color: #d7005f } + .bg162 { background-color: #d70087 } + .bg163 { background-color: #d700af } + .bg164 { background-color: #d700d7 } + .bg165 { background-color: #d700ff } + .bg166 { background-color: #d75f00 } + .bg167 { background-color: #d75f5f } + .bg168 { background-color: #d75f87 } + .bg169 { background-color: #d75faf } + .bg170 { background-color: #d75fd7 } + .bg171 { background-color: #d75fff } + .bg172 { background-color: #d78700 } + .bg173 { background-color: #d7875f } + .bg174 { background-color: #d78787 } + .bg175 { background-color: #d787af } + .bg176 { background-color: #d787d7 } + .bg177 { background-color: #d787ff } + .bg178 { background-color: #d7af00 } + .bg179 { background-color: #d7af5f } + .bg180 { background-color: #d7af87 } + .bg181 { background-color: #d7afaf } + .bg182 { background-color: #d7afd7 } + .bg183 { background-color: #d7afff } + .bg184 { background-color: #d7d700 } + .bg185 { background-color: #d7d75f } + .bg186 { background-color: #d7d787 } + .bg187 { background-color: #d7d7af } + .bg188 { background-color: #d7d7d7 } + .bg189 { background-color: #d7d7ff } + .bg190 { background-color: #d7ff00 } + .bg191 { background-color: #d7ff5f } + .bg192 { background-color: #d7ff87 } + .bg193 { background-color: #d7ffaf } + .bg194 { background-color: #d7ffd7 } + .bg195 { background-color: #d7ffff } + .bg196 { background-color: #ff0000 } + .bg197 { background-color: #ff005f } + .bg198 { background-color: #ff0087 } + .bg199 { background-color: #ff00af } + .bg200 { background-color: #ff00d7 } + .bg201 { background-color: #ff00ff } + .bg202 { background-color: #ff5f00 } + .bg203 { background-color: #ff5f5f } + .bg204 { background-color: #ff5f87 } + .bg205 { background-color: #ff5faf } + .bg206 { background-color: #ff5fd7 } + .bg207 { background-color: #ff5fff } + .bg208 { background-color: #ff8700 } + .bg209 { background-color: #ff875f } + .bg210 { background-color: #ff8787 } + .bg211 { background-color: #ff87af } + .bg212 { background-color: #ff87d7 } + .bg213 { background-color: #ff87ff } + .bg214 { background-color: #ffaf00 } + .bg215 { background-color: #ffaf5f } + .bg216 { background-color: #ffaf87 } + .bg217 { background-color: #ffafaf } + .bg218 { background-color: #ffafd7 } + .bg219 { background-color: #ffafff } + .bg220 { background-color: #ffd700 } + .bg221 { background-color: #ffd75f } + .bg222 { background-color: #ffd787 } + .bg223 { background-color: #ffd7af } + .bg224 { background-color: #ffd7d7 } + .bg225 { background-color: #ffd7ff } + .bg226 { background-color: #ffff00 } + .bg227 { background-color: #ffff5f } + .bg228 { background-color: #ffff87 } + .bg229 { background-color: #ffffaf } + .bg230 { background-color: #ffffd7 } + .bg231 { background-color: #ffffff } -/* 24 shades of grey */ + /* 24 shades of grey */ -.bg232 { background-color: #080808 } -.bg233 { background-color: #121212 } -.bg234 { background-color: #1c1c1c } -.bg235 { background-color: #262626 } -.bg236 { background-color: #303030 } -.bg237 { background-color: #3a3a3a } -.bg238 { background-color: #444444 } -.bg239 { background-color: #4e4e4e } -.bg240 { background-color: #585858 } -.bg241 { background-color: #626262 } -.bg242 { background-color: #6c6c6c } -.bg243 { background-color: #767676 } -.bg244 { background-color: #808080 } -.bg245 { background-color: #8a8a8a } -.bg246 { background-color: #949494 } -.bg247 { background-color: #9e9e9e } -.bg248 { background-color: #a8a8a8 } -.bg249 { background-color: #b2b2b2 } -.bg250 { background-color: #bcbcbc } -.bg251 { background-color: #c6c6c6 } -.bg252 { background-color: #d0d0d0 } -.bg253 { background-color: #dadada } -.bg254 { background-color: #e4e4e4 } -.bg255 { background-color: #eeeeee } + .bg232 { background-color: #080808 } + .bg233 { background-color: #121212 } + .bg234 { background-color: #1c1c1c } + .bg235 { background-color: #262626 } + .bg236 { background-color: #303030 } + .bg237 { background-color: #3a3a3a } + .bg238 { background-color: #444444 } + .bg239 { background-color: #4e4e4e } + .bg240 { background-color: #585858 } + .bg241 { background-color: #626262 } + .bg242 { background-color: #6c6c6c } + .bg243 { background-color: #767676 } + .bg244 { background-color: #808080 } + .bg245 { background-color: #8a8a8a } + .bg246 { background-color: #949494 } + .bg247 { background-color: #9e9e9e } + .bg248 { background-color: #a8a8a8 } + .bg249 { background-color: #b2b2b2 } + .bg250 { background-color: #bcbcbc } + .bg251 { background-color: #c6c6c6 } + .bg252 { background-color: #d0d0d0 } + .bg253 { background-color: #dadada } + .bg254 { background-color: #e4e4e4 } + .bg255 { background-color: #eeeeee } -.description { - color: #666; - font-family: arial, helvetica; - font-size: 16px; - margin: 20px; -} + .description { + color: #666; + font-family: arial, helvetica; + font-size: 16px; + margin: 20px; + } -.description p { - margin-bottom: 20px; + .description p { + margin-bottom: 20px; + } }