├── offline.js
├── logo.png
├── summer.jpg
├── winter.jpg
├── favicon.ico
├── apple-touch-icon-precomposed.png
├── .htaccess
├── master.css
├── cache.manifest
├── .gitmodules
├── prettify.css
├── lang-css.js
├── package.json
├── README.md
├── Gruntfile.js
├── online.js
├── add2home.css
├── dark.css
├── add2home.js
├── style.css
├── prettify.js
├── min
    ├── index.php
    └── style.css
├── index.html
└── fd-slider.css


/offline.js:
--------------------------------------------------------------------------------
1 | function insert_sm() {
2 |   
3 | }
4 | 


--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SimonWaldherr/selfCSS/HEAD/logo.png


--------------------------------------------------------------------------------
/summer.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SimonWaldherr/selfCSS/HEAD/summer.jpg


--------------------------------------------------------------------------------
/winter.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SimonWaldherr/selfCSS/HEAD/winter.jpg


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SimonWaldherr/selfCSS/HEAD/favicon.ico


--------------------------------------------------------------------------------
/apple-touch-icon-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SimonWaldherr/selfCSS/HEAD/apple-touch-icon-precomposed.png


--------------------------------------------------------------------------------
/.htaccess:
--------------------------------------------------------------------------------
1 | AddType text/cache-manifest manifest
2 | <Files cache.manifest>
3 | ExpiresActive On
4 | ExpiresDefault "access"
5 | </Files>


--------------------------------------------------------------------------------
/master.css:
--------------------------------------------------------------------------------
1 | /* master.css */
2 | @import url(./submodules/fd-slider/css/fd-slider.css);
3 | @import url(./submodules/add2home/style/add2home.css);
4 | @import url(./style.css);
5 | @import url(./dark.css);
6 | @import url(./prettify.css);
7 | 


--------------------------------------------------------------------------------
/cache.manifest:
--------------------------------------------------------------------------------
 1 | CACHE MANIFEST
 2 | #v.:21.07.2013
 3 | #time:13:44:00
 4 | 
 5 | CACHE:
 6 | http://selfcss.org/
 7 | http://selfcss.org/script.js
 8 | http://selfcss.org/style.css
 9 | http://selfcss.org/favicon.ico
10 | http://selfcss.org/logo.png
11 | http://selfcss.org/apple-touch-icon-precomposed.png
12 | http://selfcss.org/summer.jpg
13 | http://selfcss.org/winter.jpg
14 | 
15 | NETWORK:
16 | *
17 | 
18 | FALLBACK:
19 | http://selfcss.org/online.js http://selfcss.org/offline.js
20 | 


--------------------------------------------------------------------------------
/.gitmodules:
--------------------------------------------------------------------------------
 1 | [submodule "submodules/add2home"]
 2 | 	path = submodules/add2home
 3 | 	url = https://github.com/cubiq/add-to-homescreen
 4 | [submodule "submodules/webgl-filter"]
 5 | 	path = submodules/webgl-filter
 6 | 	url = https://github.com/evanw/webgl-filter/
 7 | [submodule "submodules/fd-slider"]
 8 | 	path = submodules/fd-slider
 9 | 	url = https://github.com/freqdec/fd-slider
10 | [submodule "submodules/pulltorefresh"]
11 | 	path = submodules/pulltorefresh
12 | 	url = https://SimonWaldherr@github.com/SimonWaldherr/PullToRefresh.git
13 | 


--------------------------------------------------------------------------------
/prettify.css:
--------------------------------------------------------------------------------
1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}


--------------------------------------------------------------------------------
/lang-css.js:
--------------------------------------------------------------------------------
1 | PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\f\r ]+/,null," \t\r\n"]],[["str",/^"(?:[^\n\f\r"\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*"/,null],["str",/^'(?:[^\n\f\r'\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*'/,null],["lang-css-str",/^url\(([^"')]*)\)/i],["kwd",/^(?:url|rgb|!important|@import|@page|@media|@charset|inherit)(?=[^\w-]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^*/][^*]*\*+)*\//],["com",
2 | /^(?:<\!--|--\>)/],["lit",/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],["lit",/^#[\da-f]{3,6}/i],["pln",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i],["pun",/^[^\s\w"']+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[["kwd",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[["str",/^[^"')]+/]]),["css-str"]);
3 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "selfcss",
 3 |   "title": "selfCSS",
 4 |   "description": "a CSS3 WYSIWYG Editor/Generator (in HTML5, CSS3 and JS)",
 5 |   "version": "0.9.2",
 6 |   "homepage": "http://selfcss.org/",
 7 |   "author": {
 8 |     "name": "Simon Waldherr",
 9 |     "email": "contact@simonwaldherr.de",
10 |     "url": "http://simon.waldherr.eu/"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "https://github.com/SimonWaldherr/selfCSS.git"
15 |   },
16 |   "bugs": {
17 |     "url": "https://github.com/SimonWaldherr/selfCSS/issues"
18 |   },
19 |   "licenses": [
20 |     {
21 |       "type": "MIT",
22 |       "url": "http://simon.waldherr.eu/license/mit/"
23 |     }
24 |   ],
25 |   "dependencies": {},
26 |   "devDependencies": {
27 |     "grunt": ">= 0.4.1",
28 |     "grunt-contrib-concat": ">= 0.3.0",
29 |     "grunt-contrib-uglify": ">= 0.2.2",
30 |     "grunt-contrib-cssmin": ">= 0.6.0",
31 |     "gzip-js": ">= 0.3.1"
32 |   },
33 |   "keywords": [
34 |     "css",
35 |     "wysiwyg",
36 |     "editor",
37 |     "webapp",
38 |     "css3",
39 |     "html5"
40 |   ]
41 | }
42 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # selfCSS
 2 | 
 3 | [![DOI](https://zenodo.org/badge/6564234.svg)](https://zenodo.org/badge/latestdoi/6564234) 
 4 | [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)  
 5 | 
 6 | [selfCSS](http://selfcss.org/) a CSS3 WYSIWYG Editor/Generator (in HTML5, CSS3 and JS)
 7 | 
 8 | ## about
 9 | License:   MIT  
10 | Version: 0.9.2  
11 | Date:  03.2014  
12 | 
13 | ## contact
14 | Feel free to contact me via [eMail](mailto:contact@selfcss.org) or on [Twitter](http://twitter.com/simonwaldherr). This software will be continually developed. Suggestions and tips are always welcome.
15 | 
16 | ## resources
17 | This Software uses the following open-source codes: 
18 | 
19 | * Style and look of [webgl-filter](https://github.com/evanw/webgl-filter/) provided under the terms of MIT license by [Evan Wallace](http://madebyevan.com/). 
20 | * Input Range Polyfill [fd-slider](https://github.com/freqdec/fd-slider) provided under the terms of MIT license by [Brian McAllister](http://www.frequency-decoder.com/). 
21 | * [Add to Home Screen](http://cubiq.org/add-to-home-screen) provided under the terms of MIT license by [Matteo Spinelli](http://cubiq.org/). 
22 | * [Pull to Refresh](https://github.com/SimonWaldherr/PullToRefresh) provided under the terms of MIT license by me ([Simon Waldherr](http://simon.waldherr.eu/)).
23 | * [The rest of this code](https://github.com/SimonWaldherr/selfCSS) is provided under the terms of MIT license by me ([Simon Waldherr](http://simon.waldherr.eu/)). 
24 | 
25 | ```More Information about the license on Wikipedia: en.wikipedia.org/wiki/MIT_License```
26 | 


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(grunt) {
 2 |   gzip = require("gzip-js");
 3 |   grunt.initConfig({
 4 |     pkg: grunt.file.readJSON('package.json'),
 5 |     concat: {
 6 |       options: {
 7 |         separator: '\n\n'
 8 |       },
 9 |       dist: {
10 |         src: ['./script.js', './submodules/add2home/src/add2home.js', 'fd-slider.js', 'prettify.js', './submodules/pulltorefresh/ptr.js'],
11 |         dest: './min/script.dev.js'
12 |       }
13 |     },
14 |     uglify: {
15 |       options: {
16 |         banner: '/* * * * * * * * * *\n' +
17 |                 ' *     selfCSS     *\n' +
18 |                 ' *  Version <%= pkg.version %>  *\n' +
19 |                 ' *  License:  MIT  *\n' +
20 |                 ' * Simon  Waldherr *\n' +
21 |                 ' * * * * * * * * * */\n\n',
22 |         footer: '\n\n\n\n /* foo */'
23 |       },
24 |       dist: {
25 |         files: {
26 |           './min/script.js': ['./min/script.dev.js']
27 |         }
28 |       }
29 |     },
30 |     cssmin: {
31 |       add_banner: {
32 |         options: {
33 |           banner: '/* * * * * * * * * *\n' +
34 |                   ' *     selfCSS     *\n' +
35 |                   ' *  Version <%= pkg.version %>  *\n' +
36 |                   ' *  License:  MIT  *\n' +
37 |                   ' * Simon  Waldherr *\n' +
38 |                   ' * * * * * * * * * */\n\n'
39 |         },
40 |         files: {
41 |           './min/style.css': ['./submodules/fd-slider/css/fd-slider.css', './submodules/add2home/style/add2home.css', './style.css', './dark.css', './prettify.css']
42 |         }
43 |       }
44 |     }
45 |   });
46 |   grunt.loadNpmTasks('grunt-contrib-uglify');
47 |   grunt.loadNpmTasks('grunt-contrib-concat');
48 |   grunt.loadNpmTasks('grunt-contrib-cssmin');
49 |   grunt.registerTask('default', ['concat', 'uglify', 'cssmin']);
50 | };
51 | 


--------------------------------------------------------------------------------
/online.js:
--------------------------------------------------------------------------------
 1 | function insert_sm() {
 2 |   if($id('sm_container')) {
 3 |     $id('sm_container').innerHTML = '<iframe style="visibility: visible; height: 21px; width: 100px;" src="http://platform.twitter.com/widgets/tweet_button.html?url=http%3A%2F%2Fselfcss.org%2F&amp;text=selfCSS%20-%20WYSIWYG%20CSS%20Editor" style="width:110px; height:20px;" allowtransparency="true" frameborder="0" scrolling="no"></iframe><div class="g-plusone" data-size="medium" data-href="http://selfcss.org/"></div><div class="t3nAggregator" data-url="http://selfcss.org/"></div><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fselfcss.org%2F&amp;send=false&amp;layout=button_count&amp;width=120&amp;show_faces=true&amp;action=like&amp;colorscheme=dark&amp;font&amp;height=21&amp;appId=216545561765744" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" allowTransparency="true"></iframe><a class="FlattrButton" style="display:none;" rev="flattr;button:compact;" href="http://selfcss.org/"></a><noscript><a href="http://flattr.com/thing/979296/selfCSS" target="_blank"><img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript>';
 4 |   }
 5 |   
 6 |   /* <![CDATA[ */
 7 |     (function() {
 8 |       var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
 9 |       s.type = 'text/javascript';
10 |       s.async = true;
11 |       s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
12 |       t.parentNode.insertBefore(s, t);
13 |     })();
14 |   /* ]]> */
15 |   
16 |   (function() {
17 |     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
18 |     ga.src = 'https://apis.google.com/js/plusone.js';
19 |     var gs = document.getElementsByTagName('script')[0]; gs.parentNode.insertBefore(ga, gs);
20 |   })();
21 |   
22 |   (function() {
23 |     var tn = document.createElement("script"); tn.type = "text/javascript"; tn.async = true;
24 |     tn.src = "http://t3n.de/aggregator/ebutton_async";
25 |     var ts = document.getElementsByTagName("script")[0]; ts.parentNode.insertBefore(tn, ts);
26 |   })();
27 | }
28 | 


--------------------------------------------------------------------------------
/add2home.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  *
  3 |  * Main container
  4 |  *
  5 |  */
  6 | #addToHomeScreen {
  7 | 	z-index:9999;
  8 | 	-webkit-user-select:none;
  9 | 	-webkit-box-sizing:border-box;
 10 | 	width:240px;
 11 | 	font-size:15px;
 12 | 	padding:12px 14px;
 13 | 	text-align:left;
 14 | 	font-family:helvetica;
 15 | 	background-image:-webkit-gradient(linear,0 0,0 100%,color-stop(0,#fff),color-stop(0.02,#eee),color-stop(0.98,#ccc),color-stop(1,#a3a3a3));
 16 | 	border:1px solid #505050;
 17 | 	-webkit-border-radius:8px;
 18 | 	-webkit-background-clip:padding-box;
 19 | 	color:#333;
 20 | 	text-shadow:0 1px 0 rgba(255,255,255,0.75);
 21 | 	line-height:130%;
 22 | 	-webkit-box-shadow:0 0 4px rgba(0,0,0,0.5);
 23 | }
 24 | 
 25 | #addToHomeScreen.addToHomeIpad {
 26 | 	width:268px;
 27 | 	font-size:18px;
 28 | 	padding:14px;
 29 | }
 30 | 
 31 | /**
 32 |  *
 33 |  * The 'wide' class is added when the popup contains the touch icon
 34 |  *
 35 |  */
 36 | #addToHomeScreen.addToHomeWide {
 37 | 	width:296px;
 38 | }
 39 | 
 40 | #addToHomeScreen.addToHomeIpad.addToHomeWide {
 41 | 	width:320px;
 42 | 	font-size:18px;
 43 | 	padding:14px;
 44 | }
 45 | 
 46 | /**
 47 |  *
 48 |  * The balloon arrow
 49 |  *
 50 |  */
 51 | #addToHomeScreen .addToHomeArrow {
 52 | 	position:absolute;
 53 | 	background-image:-webkit-gradient(linear,0 0,100% 100%,color-stop(0,rgba(204,204,204,0)),color-stop(0.4,rgba(204,204,204,0)),color-stop(0.4,#ccc));
 54 | 	border-width:0 1px 1px 0;
 55 | 	border-style:solid;
 56 | 	border-color:#505050;
 57 | 	width:16px; height:16px;
 58 | 	-webkit-transform:rotateZ(45deg);
 59 | 	bottom:-9px; left:50%;
 60 | 	margin-left:-8px;
 61 | 	-webkit-box-shadow:inset -1px -1px 0 #a9a9a9;
 62 | 	-webkit-border-bottom-right-radius:2px;
 63 | }
 64 | 
 65 | 
 66 | /**
 67 |  *
 68 |  * The balloon arrow for iPad
 69 |  *
 70 |  */
 71 | #addToHomeScreen.addToHomeIpad .addToHomeArrow {
 72 | 	-webkit-transform:rotateZ(-135deg);
 73 | 	background-image:-webkit-gradient(linear,0 0,100% 100%,color-stop(0,rgba(238,238,238,0)),color-stop(0.4,rgba(238,238,238,0)),color-stop(0.4,#eee));
 74 | 	-webkit-box-shadow:inset -1px -1px 0 #fff;
 75 | 	top:-9px; bottom:auto; left:50%;
 76 | }
 77 | 
 78 | 
 79 | /**
 80 |  *
 81 |  * Close button
 82 |  *
 83 |  */
 84 | #addToHomeScreen .addToHomeClose {
 85 | 	-webkit-box-sizing:border-box;
 86 | 	position:absolute;
 87 | 	right:4px;
 88 | 	top:4px;
 89 | 	width:18px;
 90 | 	height:18px; line-height:14px;
 91 | 	text-align:center;
 92 | 	text-indent:1px;
 93 | 	-webkit-border-radius:9px;
 94 | 	background:rgba(0,0,0,0.12);
 95 | 	color:#707070;
 96 | 	-webkit-box-shadow:0 1px 0 #fff;
 97 | 	font-size:16px;
 98 | }
 99 | 
100 | 
101 | /**
102 |  *
103 |  * The '+' icon, displayed only on iOS < 4.2
104 |  *
105 |  */
106 | #addToHomeScreen .addToHomePlus {
107 | 	font-weight:bold;
108 | 	font-size:1.3em;
109 | }
110 | 
111 | 
112 | /**
113 |  *
114 |  * The 'share' icon, displayed only on iOS >= 4.2
115 |  *
116 |  */
117 | #addToHomeScreen .addToHomeShare {
118 | 	display:inline-block;
119 | 	width:18px;
120 | 	height:15px;
121 | 	background-repeat:no-repeat;
122 | 	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAQAAABDj1eZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUdJREFUKFNtkLtLw1AYxS/qJLhXVKr2ZRulUNtiqgSb3CziICI6ucTFVYcOnaQOFRwUnNTRwUWXgpP/QdHNUEQUHGxofYBTlRs83iZNjKTncOGe7/vx3QchXUWn6FL3jhfKUdCCr5zuifV5oDiHQM+c+CIhiiCSWNu08iq9oHXKLAiqrgR4UXqlOEYZt++ExEL0wW7+OW0G10muLv9gmqfe5FAWKmTMYQYiFL7PYwyLOD8lSjNh2gdnPzMII4QUBxc4OothbAF7GCBKQ0YbSWyPQsIhqvetS+y0ygGMo/KFZfviDvR4AhwgZU9dGYnA0J/6ndc15i3ouYIMcVVUcEXIoOxCeRCfwP8sXBSdjtpUv/1QW+K16kCCIUC4id9Fa0JtkluwVkSfqPL6RwfSDA0aNlx7k/bWgViB7bMS2/1vk5sdsZLN/ALSuL3tylO4RAAAAABJRU5ErkJggg==);
123 | 	background-size:18px 15px;
124 | 	text-indent:-9999em;
125 | 	overflow:hidden;
126 | }
127 | 
128 | 
129 | /**
130 |  *
131 |  * The touch icon (if available)
132 |  *
133 |  */
134 | #addToHomeScreen .addToHomeTouchIcon {
135 | 	display:block;
136 | 	float:left;
137 | 	-webkit-border-radius:6px;
138 | 	-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5),
139 | 		inset 0 0 2px rgba(255,255,255,0.9);
140 | 	background-repeat:no-repeat;
141 | 	width:57px; height:57px;
142 | 	-webkit-background-size:57px 57px;
143 | 	margin:0 12px 0 0;
144 | 	border:1px solid #333;
145 | 	-webkit-background-clip:padding-box;
146 | }
147 | 
148 | 
149 | /**
150 |  *
151 |  * The 'share' icon for retina display
152 |  *
153 |  */
154 | @media all and (-webkit-min-device-pixel-ratio: 2) {
155 | 	#addToHomeScreen .addToHomeShare {
156 | 		background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAeCAQAAADu6HTYAAADPElEQVR4Xq3TX2gcRRzA8e/M7mVv2+TSNpc/TZtrY6jUGqgaSAmEChKLrYK0YH0RFC2CSCkEfCghiKU04J8qNigq6os+iQV98MHWFwVBrQQRWs21lBw5cw3NNb1/udu72RGG5Y77IzXW77D7sAwf5scyYoL6BGXSDKFZwaGpLvIUaeoCkvX1MmsM0Ny6oRSQYOLuIS+YZOpfQdqslpUxcZrzTVAz4qPwW2O3CeIwC/RSzeY6Ow1QhUrkr+YOWfEKDkEP8Rij7CHKJmrFSDHBdwGEE5wiGChPN+PnT8VdRtEIl1d4gRj/1EVe5ZSBKGh8iqQpo/Fo5+3C/gz0MYg4zgwbqday1/Q4B8BGQ45d/Hi54lakCrU5obOcidJpu1+Lg9whjabyaOYLnrIBFFaRD+xe2ybMDWY66GmP/WA9cGfGp0CWhy0wkMN8inepFiH2rV1j0NQSNQbFLRQnS8/8YSDBBpadfv4CYDub2fmeHDNAsL1MBWUel0iA+Xik6eHcyvD3vAMSU1TGuA/YRS+dD7ovCQN43GKRFCU20Kd3V/avDVVyAZ5niTEuLA5/zBGWg9EEEhfJKN200Tat8CmRAQb9+wv7soPlHt2tQorsz1uPbr0HTY4sJwrH47zJZwABBAKLMBoQXepwgTwdHCo+fXMkQ4lrxEmQ5AaXipPqDY9V2vn09tgvTPI71EEGYxM+/uMJLJ4svpgaWGKOi/xKgmqLSUGSUd5f2vIVJ/CgBaTIUsZ7ZBsn0+NzfMOXLFCXQyTcybN6ep5ZZgUOHn7jpfUpsZshdugPGf+E5zjbyHTSRyQ8xfRPPM/s63RHeuknSoT22mjmmnAOIMkUZ6D1xSfPPAfd1WFKM3sO2CMaHx8M1NjnXKHaAGGkOW0C02WeYHUz4qMtx+w5gUDS8NckYe5lHsMYwCZEPyEEmjLDZFmAS7CDviMdxyTkMNVBKEmYLvbiQQBIBBbCQG04bGQvFWz6CfsCQLWCigILFwcfkGYBiOpbYuOizTAyYyDdCtrGaRG1LCkIgMYEFhI0WqQZoSlbGRyHKe4qOx7iv2bVQW9dp4dlM/x6kmwnWQcd/Q3FCqwTEiT5s+6D5v/pb0SSHyg7uhMWAAAAAElFTkSuQmCC);
157 | 	}
158 | }
159 | 


--------------------------------------------------------------------------------
/dark.css:
--------------------------------------------------------------------------------
  1 | a { color: #FC0;}
  2 | 
  3 | body {
  4 |     background: #FDFDFD;
  5 |     color: white;
  6 | }
  7 | 
  8 | .ui-slider-handle {
  9 |     background: -moz-linear-gradient(#4B4947, #32302D);
 10 |     background: -webkit-gradient(linear, left top, left bottom, from(#4B4947), to(#32302D));
 11 |     box-shadow: inset 0 1px 0 #5B5957, 0 -1px 0 black, 0 1px 0 black, -1px 0 0 black, 1px 0 0 black, 0 1px 1px #111;
 12 |     -moz-box-shadow: inset 0 1px 0 #5B5957, 0 -1px 0 black, 0 1px 0 black, -1px 0 0 black, 1px 0 0 black, 0 1px 1px #111;
 13 |     -webkit-box-shadow: inset 0 1px 0 #5B5957, 0 -1px 0 black, 0 1px 0 black, -1px 0 0 black, 1px 0 0 black, 0 1px 1px #111;
 14 | }
 15 | 
 16 | .ui-state-active {
 17 |     background: -moz-linear-gradient(#6B6967, #42403D);
 18 |     background: -webkit-gradient(linear, left top, left bottom, from(#6B6967), to(#42403D));
 19 | }
 20 | 
 21 | .button, .segment {
 22 |     background: -moz-linear-gradient(#4B4947, #32302D);
 23 |     background: -webkit-gradient(linear, left top, left bottom, from(#4B4947), to(#32302D));
 24 |     box-shadow: inset 0 1px 0 #5B5957, 0 -1px 0 black, 0 1px 0 black, -1px 0 0 black, 1px 0 0 black, 0 1px 1px #111;
 25 |     -moz-box-shadow: inset 0 1px 0 #5B5957, 0 -1px 0 black, 0 1px 0 black, -1px 0 0 black, 1px 0 0 black, 0 1px 1px #111;
 26 |     -webkit-box-shadow: inset 0 1px 0 #5B5957, 0 -1px 0 black, 0 1px 0 black, -1px 0 0 black, 1px 0 0 black, 0 1px 1px #111;
 27 | }
 28 | 
 29 | .button:active {
 30 |     background: #272727;
 31 |     box-shadow: inset 0 0 10px #070707, inset 0 0 5px #070707, 0 1px 0 #4B4947;
 32 |     -moz-box-shadow: inset 0 0 10px #070707, inset 0 0 5px #070707, 0 1px 0 #4B4947;
 33 |     -webkit-box-shadow: inset 0 0 10px #070707, inset 0 0 5px #070707, 0 1px 0 #4B4947;
 34 | }
 35 | 
 36 | .button.disabled {
 37 |     color: #111;
 38 |     text-shadow: 0 1px 0 #4B4947;
 39 |     background: -moz-linear-gradient(#3B3937, #2B2927);
 40 |     background: -webkit-gradient(linear, left top, left bottom, from(#3B3937), to(#2B2927));
 41 |     box-shadow: inset 0 1px 0 #4B4947, 0 -1px 0 #111, 0 1px 0 #111, -1px 0 0 #111, 1px 0 0 #111, 0 1px 1px #111;
 42 |     -moz-box-shadow: inset 0 1px 0 #4B4947, 0 -1px 0 #111, 0 1px 0 #111, -1px 0 0 #111, 1px 0 0 #111, 0 1px 1px #111;
 43 |     -webkit-box-shadow: inset 0 1px 0 #4B4947, 0 -1px 0 #111, 0 1px 0 #111, -1px 0 0 #111, 1px 0 0 #111, 0 1px 1px #111;
 44 | }
 45 | 
 46 | #toolbar {
 47 |     background: -moz-linear-gradient(#3B3937, #2B2927);
 48 |     background: -webkit-gradient(linear, left top, left bottom, from(#3B3937), to(#2B2927));
 49 |     box-shadow: 0 1px 0 black;
 50 |     -moz-box-shadow: 0 1px 0 black;
 51 |     -webkit-box-shadow: 0 1px 0 black;
 52 | }
 53 | 
 54 | #sidebar {
 55 |     background: #3B3937;
 56 |     box-shadow: 1px 0 0 black;
 57 |     -moz-box-shadow: 1px 0 0 black;
 58 |     -webkit-box-shadow: 1px 0 0 black;
 59 | }
 60 | 
 61 | #sidebar .header {
 62 |     color: #777;
 63 | }
 64 | 
 65 | #sidebar .item .wpt_contents table {
 66 |     color: #777;
 67 | }
 68 | 
 69 | #sidebar .item .wpt_contents .reset {
 70 |     color: #777;
 71 | }
 72 | 
 73 | #sidebar .item .wpt_contents .slider {
 74 |     border-top: 1px solid #222;
 75 |     border-bottom: 1px solid #555;
 76 | }
 77 | 
 78 | #sidebar .item .wpt_contents .segment {
 79 |     color: white;
 80 |     background: -moz-linear-gradient(#4B4947, #32302D);
 81 |     background: -webkit-gradient(linear, left top, left bottom, from(#4B4947), to(#32302D));
 82 |     box-shadow: inset 0 1px 0 #5B5957, 0 -1px 0 black, 0 1px 0 black, -1px 0 0 black, 1px 0 0 black, 0 1px 1px #111;
 83 |     -moz-box-shadow: inset 0 1px 0 #5B5957, 0 -1px 0 black, 0 1px 0 black, -1px 0 0 black, 1px 0 0 black, 0 1px 1px #111;
 84 |     -webkit-box-shadow: inset 0 1px 0 #5B5957, 0 -1px 0 black, 0 1px 0 black, -1px 0 0 black, 1px 0 0 black, 0 1px 1px #111;
 85 | }
 86 | 
 87 | #sidebar .item .wpt_contents .segment.selected, #toolbar .segment.selected {
 88 |     background: rgb(21,102,177);
 89 |     background: -moz-linear-gradient(top, rgba(21,102,177,1) 0%, rgba(17,80,151,1) 100%);
 90 |     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(21,102,177,1)), color-stop(100%,rgba(17,80,151,1)));
 91 |     background: -webkit-linear-gradient(top, rgba(21,102,177,1) 0%,rgba(17,80,151,1) 100%);
 92 |     background: -o-linear-gradient(top, rgba(21,102,177,1) 0%,rgba(17,80,151,1) 100%);
 93 |     background: -ms-linear-gradient(top, rgba(21,102,177,1) 0%,rgba(17,80,151,1) 100%);
 94 |     background: linear-gradient(to bottom, rgba(21,102,177,1) 0%,rgba(17,80,151,1) 100%);
 95 |     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1566b1', endColorstr='#115097',GradientType=0 );
 96 |     box-shadow: inset 0 0 10px -2px #070707, inset 0 0 5px #070707, 0 1px 0 #4B4947;
 97 |     -moz-box-shadow: inset 0 0 10px -2px #070707, inset 0 0 5px #070707, 0 1px 0 #4B4947;
 98 |     -webkit-box-shadow: inset 0 0 10px -2px #070707, inset 0 0 5px #070707, 0 1px 0 #4B4947;
 99 | }
100 | 
101 | #sidebar .item .wpt_contents .curves {
102 |     border: 1px solid #4B4947;
103 | }
104 | 
105 | #sidebar .item.active {
106 |     background: #272727;
107 |     box-shadow: inset 0 0 6px #070707, inset 0 0 3px #070707, 0 1px 0 #4B4947;
108 |     -moz-box-shadow: inset 0 0 6px #070707, inset 0 0 3px #070707, 0 1px 0 #4B4947;
109 |     -webkit-box-shadow: inset 0 0 6px #070707, inset 0 0 3px #070707, 0 1px 0 #4B4947;
110 | }
111 | 
112 | #sidebar .item.active .wpt_contents .slider {
113 |     border-top: 1px solid black;
114 |     border-bottom: 1px solid #333;
115 | }
116 | 
117 | #sidebar::-webkit-scrollbar-track {
118 |     background: #1B1917;
119 |     -webkit-box-shadow: inset 0 0 6px #1B1917; 
120 | }
121 | 
122 | #sidebar::-webkit-scrollbar-thumb {
123 |     background: rgba(255,255,255,0.8); 
124 |     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
125 | }
126 | 
127 | #sidebar::-webkit-scrollbar-thumb:window-inactive {
128 |     background: rgba(244,244,244,0.4); 
129 | }
130 | 
131 | #dialog {
132 |     background: #32302D;
133 |     border: 1px solid black;
134 |     -moz-box-shadow: 0 0 50px black, 0 0 20px rgba(0, 0, 0, 0.5);
135 |     -webkit-box-shadow: 0 0 50px black, 0 0 20px rgba(0, 0, 0, 0.5);
136 | }
137 | 
138 | #dialog .contents .credits, #dialog .contents .credits a {
139 |     color: #777;
140 | }
141 | 
142 | #dialog .contents img {
143 |     border: 1px solid black;
144 |     -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
145 |     -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
146 | }
147 | 
148 | #dimmer {
149 |     background: rgba(55,55,55,0.7);
150 | }
151 | 
152 | #loading {
153 |     background: #2B2927;
154 | }
155 | 
156 | #loading .sadface {
157 |     font-size: 100px;
158 |     line-height: 100px;
159 |     padding-bottom: 40px;
160 | }
161 | 
162 | #box{
163 |     background: #1B1917;
164 |     -webkit-box-shadow: 0px 0px 25px 5px rgba(55, 55, 55, 0.5);
165 |     box-shadow: 0px 0px 25px 5px rgba(55, 55, 55, 0.5);
166 |     border: 1px solid #222;
167 | }
168 | 
169 | #topgrad{
170 |     background: #adadad;
171 |     background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FkYWRhZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZGZkZmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
172 |     background: -moz-linear-gradient(top, #adadad 0%, #fdfdfd 100%);
173 |     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#adadad), color-stop(100%,#fdfdfd));
174 |     background: -webkit-linear-gradient(top, #adadad 0%,#fdfdfd 100%);
175 |     background: -o-linear-gradient(top, #adadad 0%,#fdfdfd 100%);
176 |     background: -ms-linear-gradient(top, #adadad 0%,#fdfdfd 100%);
177 |     background: linear-gradient(to bottom, #adadad 0%,#fdfdfd 100%);
178 |     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#adadad', endColorstr='#fdfdfd',GradientType=0 );
179 | }
180 | 
181 | #toolbar .segment {
182 |     color: white;
183 |     background: -moz-linear-gradient(#4B4947, #32302D);
184 |     background: -webkit-gradient(linear, left top, left bottom, from(#4B4947), to(#32302D));
185 |     box-shadow: inset 0 1px 0 #5B5957, 0 -1px 0 black, 0 1px 0 black, -1px 0 0 black, 1px 0 0 black, 0 1px 1px #111;
186 |     -moz-box-shadow: inset 0 1px 0 #5B5957, 0 -1px 0 black, 0 1px 0 black, -1px 0 0 black, 1px 0 0 black, 0 1px 1px #111;
187 |     -webkit-box-shadow: inset 0 1px 0 #5B5957, 0 -1px 0 black, 0 1px 0 black, -1px 0 0 black, 1px 0 0 black, 0 1px 1px #111;
188 | }
189 | 
190 | #toolbar .segment:active {
191 |     background: #272727;
192 |     box-shadow: inset 0 0 10px #070707, inset 0 0 5px #070707, 0 1px 0 #4B4947;
193 |     -moz-box-shadow: inset 0 0 10px #070707, inset 0 0 5px #070707, 0 1px 0 #4B4947;
194 |     -webkit-box-shadow: inset 0 0 10px #070707, inset 0 0 5px #070707, 0 1px 0 #4B4947;
195 | }
196 | 
197 | .fd-slider-bar {
198 |     border-top: 1px solid black;
199 |     border-bottom: 1px solid #333;
200 |     color: #777;
201 | }
202 | 
203 | .fd-slider-handle, .fd-slider-handle:active, .fd-slider-handle:hover {
204 |     background: -moz-linear-gradient(#4B4947, #32302D);
205 |     background: -webkit-gradient(linear, left top, left bottom, from(#4B4947), to(#32302D));
206 |     box-shadow: inset 0 1px 0 #5B5957, 0 -1px 0 black, 0 1px 0 black, -1px 0 0 black, 1px 0 0 black, 0 1px 1px #111;
207 |     -moz-box-shadow: inset 0 1px 0 #5B5957, 0 -1px 0 black, 0 1px 0 black, -1px 0 0 black, 1px 0 0 black, 0 1px 1px #111;
208 |     -webkit-box-shadow: inset 0 1px 0 #5B5957, 0 -1px 0 black, 0 1px 0 black, -1px 0 0 black, 1px 0 0 black, 0 1px 1px #111;
209 | }
210 | 
211 | .fd-slider-range {
212 | 	background: rgb(21,102,177);
213 | }
214 | 


--------------------------------------------------------------------------------
/add2home.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * Add to Homescreen v2.0.4 ~ Copyright (c) 2012 Matteo Spinelli, http://cubiq.org
  3 |  * Released under MIT license, http://cubiq.org/license
  4 |  */
  5 | var addToHome = (function (w) {
  6 |   var nav = w.navigator,
  7 |     isIDevice = 'platform' in nav && (/iphone|ipod|ipad/gi).test(nav.platform),
  8 |     isIPad,
  9 |     isRetina,
 10 |     isSafari,
 11 |     isStandalone,
 12 |     OSVersion,
 13 |     startX = 0,
 14 |     startY = 0,
 15 |     lastVisit = 0,
 16 |     isExpired,
 17 |     isSessionActive,
 18 |     isReturningVisitor,
 19 |     balloon,
 20 |     overrideChecks,
 21 |     positionInterval,
 22 |     closeTimeout,
 23 |     options = {
 24 |       autostart: true, // Automatically open the balloon
 25 |       returningVisitor: false, // Show the balloon to returning visitors only (setting this to true is HIGHLY RECCOMENDED)
 26 |       animationIn: 'drop', // drop || bubble || fade
 27 |       animationOut: 'fade', // drop || bubble || fade
 28 |       startDelay: 2000, // 2 seconds from page load before the balloon appears
 29 |       lifespan: 15000, // 15 seconds before it is automatically destroyed
 30 |       bottomOffset: 14, // Distance of the balloon from bottom
 31 |       expire: 0, // Minutes to wait before showing the popup again (0 = always displayed)
 32 |       message: '', // Customize your message or force a language ('' = automatic)
 33 |       touchIcon: false, // Display the touch icon
 34 |       arrow: true, // Display the balloon arrow
 35 |       hookOnLoad: true, // Should we hook to onload event? (really advanced usage)
 36 |       iterations: 100 // Internal/debug use
 37 |     },
 38 |     intl = {
 39 |       ca_es: 'Per instal·lar aquesta aplicació al vostre %device premeu %icon i llavors <strong>Afegir a pantalla d\'inici</strong>.',
 40 |       cs_cz: 'Pro instalaci aplikace na Váš %device, stiskněte %icon a v nabídce <strong>Přidat na plochu</strong>.',
 41 |       da_dk: 'Tilføj denne side til din %device: tryk på %icon og derefter <strong>Føj til hjemmeskærm</strong>.',
 42 |       de_de: 'Installieren Sie diese App auf Ihrem %device: %icon antippen und dann <strong>Zum Home-Bildschirm</strong>.',
 43 |       el_gr: 'Εγκαταστήσετε αυτήν την Εφαρμογή στήν συσκευή σας %device: %icon μετά πατάτε <strong>Προσθήκη σε Αφετηρία</strong>.',
 44 |       en_us: 'Install this web app on your %device: tap %icon and then <strong>Add to Home Screen</strong>.',
 45 |       es_es: 'Para instalar esta app en su %device, pulse %icon y seleccione <strong>Añadir a pantalla de inicio</strong>.',
 46 |       fi_fi: 'Asenna tämä web-sovellus laitteeseesi %device: paina %icon ja sen jälkeen valitse <strong>Lisää Koti-valikkoon</strong>.',
 47 |       fr_fr: 'Ajoutez cette application sur votre %device en cliquant sur %icon, puis <strong>Ajouter à l\'écran d\'accueil</strong>.',
 48 |       he_il: '<span dir="rtl">התקן אפליקציה זו על ה-%device שלך: הקש %icon ואז <strong>הוסף למסך הבית</strong>.</span>',
 49 |       hr_hr: 'Instaliraj ovu aplikaciju na svoj %device: klikni na %icon i odaberi <strong>Dodaj u početni zaslon</strong>.',
 50 |       hu_hu: 'Telepítse ezt a web-alkalmazást az Ön %device-jára: nyomjon a %icon-ra majd a <strong>Főképernyőhöz adás</strong> gombra.',
 51 |       it_it: 'Installa questa applicazione sul tuo %device: premi su %icon e poi <strong>Aggiungi a Home</strong>.',
 52 |       ja_jp: 'このウェブアプリをあなたの%deviceにインストールするには%iconをタップして<strong>ホーム画面に追加</strong>を選んでください。',
 53 |       ko_kr: '%device에 웹앱을 설치하려면 %icon을 터치 후 "홈화면에 추가"를 선택하세요',
 54 |       nb_no: 'Installer denne appen på din %device: trykk på %icon og deretter <strong>Legg til på Hjem-skjerm</strong>',
 55 |       nl_nl: 'Installeer deze webapp op uw %device: tik %icon en dan <strong>Zet in beginscherm</strong>.',
 56 |       pl_pl: 'Aby zainstalować tę aplikacje na %device: naciśnij %icon a następnie <strong>Dodaj jako ikonę</strong>.',
 57 |       pt_br: 'Instale este web app em seu %device: aperte %icon e selecione <strong>Adicionar à Tela Inicio</strong>.',
 58 |       pt_pt: 'Para instalar esta aplicação no seu %device, prima o %icon e depois o <strong>Adicionar ao ecrã principal</strong>.',
 59 |       ru_ru: 'Установите это веб-приложение на ваш %device: нажмите %icon, затем <strong>Добавить в «Домой»</strong>.',
 60 |       sv_se: 'Lägg till denna webbapplikation på din %device: tryck på %icon och därefter <strong>Lägg till på hemskärmen</strong>.',
 61 |       th_th: 'ติดตั้งเว็บแอพฯ นี้บน %device ของคุณ: แตะ %icon และ <strong>เพิ่มที่หน้าจอโฮม</strong>',
 62 |       tr_tr: '%device için bu uygulamayı kurduktan sonra %icon simgesine dokunarak <strong>Ana Ekrana Ekle</strong>yin.',
 63 |       zh_cn: '您可以将此应用程式安装到您的 %device 上。请按 %icon 然后点选<strong>添加至主屏幕</strong>。',
 64 |       zh_tw: '您可以將此應用程式安裝到您的 %device 上。請按 %icon 然後點選<strong>加入主畫面螢幕</strong>。'
 65 |     };
 66 | 
 67 |   function init() {
 68 |     // Preliminary check, all further checks are performed on iDevices only
 69 |     if (!isIDevice) return;
 70 |     var now = Date.now(),
 71 |       i;
 72 |     // Merge local with global options
 73 |     if (w.addToHomeConfig) {
 74 |       for (i in w.addToHomeConfig) {
 75 |         options[i] = w.addToHomeConfig[i];
 76 |       }
 77 |     }
 78 |     if (!options.autostart) options.hookOnLoad = false;
 79 |     isIPad = (/ipad/gi).test(nav.platform);
 80 |     isRetina = w.devicePixelRatio && w.devicePixelRatio > 1;
 81 |     isSafari = (/Safari/i).test(nav.appVersion) && !(/CriOS/i).test(nav.appVersion);
 82 |     isStandalone = nav.standalone;
 83 |     OSVersion = nav.appVersion.match(/OS (\d+_\d+)/i);
 84 |     OSVersion = OSVersion[1] ? +OSVersion[1].replace('_', '.') : 0;
 85 |     lastVisit = +w.localStorage.getItem('addToHome');
 86 |     isSessionActive = w.sessionStorage.getItem('addToHomeSession');
 87 |     isReturningVisitor = options.returningVisitor ? lastVisit && lastVisit + 28 * 24 * 60 * 60 * 1000 > now : true;
 88 |     if (!lastVisit) lastVisit = now;
 89 |     // If it is expired we need to reissue a new balloon
 90 |     isExpired = isReturningVisitor && lastVisit <= now;
 91 |     if (options.hookOnLoad) w.addEventListener('load', loaded, false);
 92 |     else if (!options.hookOnLoad && options.autostart) loaded();
 93 |   }
 94 | 
 95 |   function loaded() {
 96 |     w.removeEventListener('load', loaded, false);
 97 |     if (!isReturningVisitor) w.localStorage.setItem('addToHome', Date.now());
 98 |     else if (options.expire && isExpired) w.localStorage.setItem('addToHome', Date.now() + options.expire * 60000);
 99 |     if (!overrideChecks && (!isSafari || !isExpired || isSessionActive || isStandalone || !isReturningVisitor)) return;
100 |     var icons = options.touchIcon ? document.querySelectorAll('head link[rel=apple-touch-icon],head link[rel=apple-touch-icon-precomposed]') : [],
101 |       sizes,
102 |       touchIcon = '',
103 |       closeButton,
104 |       platform = nav.platform.split(' ')[0],
105 |       language = nav.language.replace('-', '_'),
106 |       i, l;
107 |     balloon = document.createElement('div');
108 |     balloon.id = 'addToHomeScreen';
109 |     balloon.style.cssText += 'left:-9999px;-webkit-transition-property:-webkit-transform,opacity;-webkit-transition-duration:0;-webkit-transform:translate3d(0,0,0);position:' + (OSVersion < 5 ? 'absolute' : 'fixed');
110 |     // Localize message
111 |     if (options.message in intl) { // You may force a language despite the user's locale
112 |       language = options.message;
113 |       options.message = '';
114 |     }
115 |     if (options.message === '') { // We look for a suitable language (defaulted to en_us)
116 |       options.message = language in intl ? intl[language] : intl['en_us'];
117 |     }
118 |     // Search for the apple-touch-icon
119 |     if (icons.length) {
120 |       for (i = 0, l = icons.length; i < l; i++) {
121 |         sizes = icons[i].getAttribute('sizes');
122 |         if (sizes) {
123 |           if (isRetina && sizes == '114x114') {
124 |             touchIcon = icons[i].href;
125 |             break;
126 |           }
127 |         } else {
128 |           touchIcon = icons[i].href;
129 |         }
130 |       }
131 |       touchIcon = '<span style="background-image:url(' + touchIcon + ')" class="addToHomeTouchIcon"></span>';
132 |     }
133 |     balloon.className = (isIPad ? 'addToHomeIpad' : 'addToHomeIphone') + (touchIcon ? ' addToHomeWide' : '');
134 |     balloon.innerHTML = touchIcon +
135 |       options.message.replace('%device', platform).replace('%icon', OSVersion >= 4.2 ? '<span class="addToHomeShare"></span>' : '<span class="addToHomePlus">+</span>') +
136 |       (options.arrow ? '<span class="addToHomeArrow"></span>' : '') +
137 |       '<span class="addToHomeClose">\u00D7</span>';
138 |     document.body.appendChild(balloon);
139 |     // Add the close action
140 |     closeButton = balloon.querySelector('.addToHomeClose');
141 |     if (closeButton) closeButton.addEventListener('click', clicked, false);
142 |     if (!isIPad && OSVersion >= 6) window.addEventListener('orientationchange', orientationCheck, false);
143 |     setTimeout(show, options.startDelay);
144 |   }
145 | 
146 |   function show() {
147 |     var duration,
148 |       iPadXShift = 208;
149 |     // Set the initial position
150 |     if (isIPad) {
151 |       if (OSVersion < 5) {
152 |         startY = w.scrollY;
153 |         startX = w.scrollX;
154 |       } else if (OSVersion < 6) {
155 |         iPadXShift = 160;
156 |       }
157 |       balloon.style.top = startY + options.bottomOffset + 'px';
158 |       balloon.style.left = startX + iPadXShift - Math.round(balloon.offsetWidth / 2) + 'px';
159 |       switch (options.animationIn) {
160 |       case 'drop':
161 |         duration = '0.6s';
162 |         balloon.style.webkitTransform = 'translate3d(0,' + -(w.scrollY + options.bottomOffset + balloon.offsetHeight) + 'px,0)';
163 |         break;
164 |       case 'bubble':
165 |         duration = '0.6s';
166 |         balloon.style.opacity = '0';
167 |         balloon.style.webkitTransform = 'translate3d(0,' + (startY + 50) + 'px,0)';
168 |         break;
169 |       default:
170 |         duration = '1s';
171 |         balloon.style.opacity = '0';
172 |       }
173 |     } else {
174 |       startY = w.innerHeight + w.scrollY;
175 |       if (OSVersion < 5) {
176 |         startX = Math.round((w.innerWidth - balloon.offsetWidth) / 2) + w.scrollX;
177 |         balloon.style.left = startX + 'px';
178 |         balloon.style.top = startY - balloon.offsetHeight - options.bottomOffset + 'px';
179 |       } else {
180 |         balloon.style.left = '50%';
181 |         balloon.style.marginLeft = -Math.round(balloon.offsetWidth / 2) - (w.orientation % 180 && OSVersion >= 6 ? 40 : 0) + 'px';
182 |         balloon.style.bottom = options.bottomOffset + 'px';
183 |       }
184 |       switch (options.animationIn) {
185 |       case 'drop':
186 |         duration = '1s';
187 |         balloon.style.webkitTransform = 'translate3d(0,' + -(startY + options.bottomOffset) + 'px,0)';
188 |         break;
189 |       case 'bubble':
190 |         duration = '0.6s';
191 |         balloon.style.webkitTransform = 'translate3d(0,' + (balloon.offsetHeight + options.bottomOffset + 50) + 'px,0)';
192 |         break;
193 |       default:
194 |         duration = '1s';
195 |         balloon.style.opacity = '0';
196 |       }
197 |     }
198 |     balloon.offsetHeight; // repaint trick
199 |     balloon.style.webkitTransitionDuration = duration;
200 |     balloon.style.opacity = '1';
201 |     balloon.style.webkitTransform = 'translate3d(0,0,0)';
202 |     balloon.addEventListener('webkitTransitionEnd', transitionEnd, false);
203 |     closeTimeout = setTimeout(close, options.lifespan);
204 |   }
205 | 
206 |   function manualShow(override) {
207 |     if (!isIDevice || balloon) return;
208 |     overrideChecks = override;
209 |     loaded();
210 |   }
211 | 
212 |   function close() {
213 |     clearInterval(positionInterval);
214 |     clearTimeout(closeTimeout);
215 |     closeTimeout = null;
216 |     var posY = 0,
217 |       posX = 0,
218 |       opacity = '1',
219 |       duration = '0',
220 |       closeButton = balloon.querySelector('.addToHomeClose');
221 |     if (closeButton) closeButton.removeEventListener('click', close, false);
222 |     if (!isIPad && OSVersion >= 6) window.removeEventListener('orientationchange', orientationCheck, false);
223 |     if (OSVersion < 5) {
224 |       posY = isIPad ? w.scrollY - startY : w.scrollY + w.innerHeight - startY;
225 |       posX = isIPad ? w.scrollX - startX : w.scrollX + Math.round((w.innerWidth - balloon.offsetWidth) / 2) - startX;
226 |     }
227 |     balloon.style.webkitTransitionProperty = '-webkit-transform,opacity';
228 |     switch (options.animationOut) {
229 |     case 'drop':
230 |       if (isIPad) {
231 |         duration = '0.4s';
232 |         opacity = '0';
233 |         posY = posY + 50;
234 |       } else {
235 |         duration = '0.6s';
236 |         posY = posY + balloon.offsetHeight + options.bottomOffset + 50;
237 |       }
238 |       break;
239 |     case 'bubble':
240 |       if (isIPad) {
241 |         duration = '0.8s';
242 |         posY = posY - balloon.offsetHeight - options.bottomOffset - 50;
243 |       } else {
244 |         duration = '0.4s';
245 |         opacity = '0';
246 |         posY = posY - 50;
247 |       }
248 |       break;
249 |     default:
250 |       duration = '0.8s';
251 |       opacity = '0';
252 |     }
253 |     balloon.addEventListener('webkitTransitionEnd', transitionEnd, false);
254 |     balloon.style.opacity = opacity;
255 |     balloon.style.webkitTransitionDuration = duration;
256 |     balloon.style.webkitTransform = 'translate3d(' + posX + 'px,' + posY + 'px,0)';
257 |   }
258 | 
259 |   function clicked() {
260 |     w.sessionStorage.setItem('addToHomeSession', '1');
261 |     isSessionActive = true;
262 |     close();
263 |   }
264 | 
265 |   function transitionEnd() {
266 |     balloon.removeEventListener('webkitTransitionEnd', transitionEnd, false);
267 |     balloon.style.webkitTransitionProperty = '-webkit-transform';
268 |     balloon.style.webkitTransitionDuration = '0.2s';
269 |     // We reached the end!
270 |     if (!closeTimeout) {
271 |       balloon.parentNode.removeChild(balloon);
272 |       balloon = null;
273 |       return;
274 |     }
275 |     // On iOS 4 we start checking the element position
276 |     if (OSVersion < 5 && closeTimeout) positionInterval = setInterval(setPosition, options.iterations);
277 |   }
278 | 
279 |   function setPosition() {
280 |     var matrix = new WebKitCSSMatrix(w.getComputedStyle(balloon, null).webkitTransform),
281 |       posY = isIPad ? w.scrollY - startY : w.scrollY + w.innerHeight - startY,
282 |       posX = isIPad ? w.scrollX - startX : w.scrollX + Math.round((w.innerWidth - balloon.offsetWidth) / 2) - startX;
283 |     // Screen didn't move
284 |     if (posY == matrix.m42 && posX == matrix.m41) return;
285 |     balloon.style.webkitTransform = 'translate3d(' + posX + 'px,' + posY + 'px,0)';
286 |   }
287 |   // Clear local and session storages (this is useful primarily in development)
288 | 
289 |   function reset() {
290 |     w.localStorage.removeItem('addToHome');
291 |     w.sessionStorage.removeItem('addToHomeSession');
292 |   }
293 | 
294 |   function orientationCheck() {
295 |     balloon.style.marginLeft = -Math.round(balloon.offsetWidth / 2) - (w.orientation % 180 && OSVersion >= 6 ? 40 : 0) + 'px';
296 |   }
297 |   // Bootstrap!
298 |   init();
299 |   return {
300 |     show: manualShow,
301 |     close: close,
302 |     reset: reset
303 |   };
304 | })(window);
305 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     cursor: default;
  3 | }
  4 | 
  5 | a { cursor: pointer; }
  6 | table { border-collapse: collapse; }
  7 | td { padding: 0; vertical-align: top; }
  8 | body {
  9 |     font: 12px Tahoma, sans-serif;
 10 | }
 11 | 
 12 | #toolbar, #sidebar, #fade, #dialog, #dimmer, #topgrad {
 13 |     -moz-user-select: none;
 14 |     -webkit-user-select: none;
 15 | }
 16 | 
 17 | .ui-slider-handle {
 18 |     cursor: default;
 19 |     position: absolute;
 20 |     width: 12px;
 21 |     height: 12px;
 22 |     margin: -6px;
 23 |     border-radius: 6px;
 24 |     -moz-border-radius: 7px;
 25 |     -webkit-border-radius: 7px;
 26 | }
 27 | 
 28 | .ui-state-focus {
 29 |     outline: none;
 30 | }
 31 | 
 32 | .button, .segment {
 33 |     cursor: pointer !important;
 34 |     display: inline-block;
 35 |     padding: 1px 15px;
 36 |     border-radius: 4px;
 37 |     vertical-align: top;
 38 | }
 39 | 
 40 | .button:active {
 41 |     padding: 2px 15px 0 15px;
 42 | }
 43 | 
 44 | .button.disabled {
 45 |     padding: 1px 15px;
 46 | }
 47 | 
 48 | .select_textfield {
 49 |     display: none;
 50 |     visibility: hidden;
 51 | }
 52 | 
 53 | #topbar {
 54 |     position: relative;
 55 |     top: 20px;
 56 |     width: 100%;
 57 |     height: 44px;
 58 |     margin: 20px auto 5px auto;
 59 |     border-radius: 6px;
 60 | }
 61 | 
 62 | #topbar img {
 63 |     position: relative;
 64 |     z-index: 1;
 65 |     height: 75px;
 66 |     display: block;
 67 |     float: left;
 68 |     margin: 5px;
 69 | }
 70 | 
 71 | #topbar .item {
 72 | 
 73 | }
 74 | 
 75 | #toolbar {
 76 |     z-index: 2;
 77 |     position: absolute;
 78 |     left: 0;
 79 |     top: 0;
 80 |     right: 0;
 81 |     height: 44px;
 82 |     border-radius: 6px 6px 0px 0px;
 83 | }
 84 | 
 85 | #toolbar .button {
 86 |     float: left;
 87 |     line-height: 27px;
 88 |     margin: 7px 0 0 7px;
 89 | }
 90 | 
 91 | #sidebar {
 92 |     z-index: 1;
 93 |     position: absolute;
 94 |     text-align: left;
 95 |     left: 0;
 96 |     top: 45px;
 97 |     bottom: 0;
 98 |     width: 300px;
 99 |     padding: 0 0 0 0;
100 |     -webkit-overflow-scrolling: touch;
101 |     overflow-x: hidden;
102 |     overflow-y: auto;
103 |     border-radius: 0px 0px 0px 8px;
104 | }
105 | 
106 | #sidebar .header {
107 |     padding: 15px 0 5px 15px;
108 | }
109 | 
110 | #sidebar .item {
111 |     position: relative;
112 |     margin: 0 0px;
113 |     padding: 0 40px;
114 |     height: auto;
115 |     overflow-y: hidden;
116 | 
117 |     transition: height 0.4s;
118 |     -moz-transition: height 0.4s;
119 |     -webkit-transition: height 0.4s;
120 |     -o-transition: height 0.4s;
121 | }
122 | 
123 | #sidebar .item .title {
124 |     height: 25px;
125 |     font-weight: bold;
126 |     line-height: 25px;
127 | }
128 | 
129 | #sidebar .item .wpt_contents {
130 |     padding: 0 0 20px 0;
131 | }
132 | 
133 | #sidebar .item .wpt_contents table {
134 |     padding: 0 0 5px 0;
135 |     width: 100%;
136 | }
137 | 
138 | #sidebar .item .wpt_contents td {
139 |     width: 0;
140 |     white-space: nowrap;
141 |     padding-top: 5px;
142 | }
143 | 
144 | #sidebar .item .wpt_contents td + td {
145 |     width: 100%;
146 |     padding-left: 15px;
147 | }
148 | 
149 | #sidebar .item .wpt_contents .button {
150 |     line-height: 24px;
151 |     margin: 15px 0 0 0;
152 | }
153 | 
154 | #sidebar .item .wpt_contents .reset {
155 |     text-decoration: underline;
156 |     display: inline-block;
157 |     line-height: 24px;
158 |     margin: 15px 0 0 15px;
159 |     cursor: pointer;
160 | }
161 | 
162 | #sidebar .item .wpt_contents .slider {
163 |     position: relative;
164 |     margin: 8px 0 0 0;
165 | }
166 | 
167 | #sidebar .item .wpt_contents .segmented {
168 |     margin: 6px;
169 |     text-align: center;
170 | }
171 | 
172 | #sidebar .item .wpt_contents .segment {
173 |     line-height: 25px;
174 |     display: inline-block;
175 |     padding: 1px 1px;
176 |     vertical-align: top;
177 |     -webkit-border-radius: 0px 0px 0px 0px;
178 |     border-radius: 0px 0px 0px 0px;
179 | }
180 | 
181 | #sidebar .item .wpt_contents .segment.full {
182 |     min-width: 166px;
183 |     text-align: center;
184 | }
185 | 
186 | #sidebar .item .wpt_contents .segment.selected {
187 |     padding: 1px 1px;
188 | }
189 | 
190 | #sidebar .item .wpt_contents .segment:first-child {
191 |     -webkit-border-radius: 5px 0px 0px 5px;
192 |     border-radius: 5px 0px 0px 5px;
193 | }
194 | 
195 | #sidebar .item .wpt_contents .segment:last-child {
196 |     -webkit-border-radius: 0px 5px 5px 0px;
197 |     border-radius: 0px 5px 5px 0px;
198 | }
199 | 
200 | #sidebar .item .wpt_contents .full .segment:first-child {
201 |     -webkit-border-radius: 5px 5px 0px 0px;
202 |     border-radius: 5px 5px 0px 0px;
203 | }
204 | 
205 | #sidebar .item .wpt_contents .full .segment:last-child {
206 |     -webkit-border-radius: 0px 0px 5px 5px;
207 |     border-radius: 0px 0px 5px 5px;
208 | }
209 | 
210 | #sidebar .item .wpt_contents .curves {
211 |     width: 200px;
212 |     height: 200px;
213 |     margin: 10px 0;
214 | }
215 | 
216 | #sidebar .item.active {
217 |     margin-bottom: 5px;
218 | }
219 | 
220 | #sidebar .item.active .title {
221 |     line-height: 27px;
222 |     margin-bottom: 15px;
223 | }
224 | 
225 | #sidebar .item.active .wpt_contents .slider {
226 |     margin: 8px 0 0 0;
227 | }
228 | 
229 | #sidebar input {
230 |     display: none;
231 | }
232 | 
233 | #sidebar table {
234 |     position: relative;
235 |     top: 10px;
236 | }
237 | 
238 | #sidebar::-webkit-scrollbar {
239 |     width: 8px;
240 | }
241 | 
242 | #sidebar::-webkit-scrollbar-track {
243 |     border-radius: 0px;
244 | }
245 | 
246 | #sidebar::-webkit-scrollbar-thumb {
247 |     -webkit-border-radius: 2px;
248 |     border-radius: 2px;
249 |     padding: 5px;
250 | }
251 | 
252 | #sidebar #sidebarend {
253 |     height: 20px;
254 | }
255 | 
256 | #dialogs {
257 |     display: none;
258 | }
259 | 
260 | #dialog {
261 |     z-index: 4;
262 |     position: absolute;
263 |     left: 50%;
264 |     top: -600px;
265 |     width: 650px;
266 |     margin-left: -325px;
267 |     padding: 20px;
268 |     border-radius: 3px;
269 | 
270 |     transition: all 0.4s;
271 |     -moz-transition: all 0.4s;
272 |     -webkit-transition: all 0.4s;
273 |     -o-transition: all 0.4s;
274 | }
275 | 
276 | #dialog .contents {
277 |     padding-bottom: 20px;
278 |     line-height: 16px;
279 | }
280 | 
281 | #dialog .contents .images {
282 |     padding: 15px 0 8px 0;
283 | }
284 | 
285 | #dialog .contents .credits, #dialog .contents .credits a {
286 |     font-style: italic;
287 |     font-size: 10px;
288 | }
289 | 
290 | #dialog .contents img {
291 |     margin: 0 7px 7px 0;
292 | }
293 | 
294 | #dialog .button {
295 |     position: relative;
296 |     line-height: 24px;
297 |     margin-right: 7px;
298 |     float: right;
299 | }
300 | 
301 | #dialog .contents .button {
302 |     padding: 20px;
303 |     float: left;
304 | }
305 | 
306 | #dialog input.upload {
307 |     position: absolute;
308 |     left: 0;
309 |     top: 0;
310 |     width: 100%;
311 |     height: 100%;
312 |     opacity: 0;
313 | }
314 | 
315 | #dimmer {
316 |     position: fixed;
317 |     z-index: -1;
318 |     top: 0px;
319 |     left: 0px;
320 |     height: 100%;
321 |     width: 100%;
322 |     opacity: 0;
323 | 
324 |     transition: opacity 0.8s;
325 |     -moz-transition: opacity 0.8s;
326 |     -webkit-transition: opacity 0.8s;
327 |     -o-transition: opacity 0.8s;
328 | }
329 | 
330 | #loading {
331 |     text-align: center;
332 |     padding-top: 100px;
333 |     position: absolute;
334 |     left: 0;
335 |     top: 0;
336 |     right: 0;
337 |     bottom: 0;
338 |     z-index: 5;
339 |     line-height: 16px;
340 | }
341 | 
342 | #loading .sadface {
343 |     font-size: 100px;
344 |     line-height: 100px;
345 |     padding-bottom: 40px;
346 | }
347 | 
348 | #box{
349 |     height: 740px;
350 |     width: 90%;
351 |     margin: 0 auto 100px auto;
352 |     position: relative;
353 |     top: 4em;
354 |     border-radius: 6px;
355 | }
356 | 
357 | #topgrad{
358 |     position: absolute;
359 |     top: 0px;
360 |     left: 0px;
361 |     right: 0px;
362 |     width: 100%;
363 |     height: 180px;
364 |     z-index: -1;
365 | }
366 | 
367 | #toolbar .segmented {
368 |     position: absolute;
369 |     right: 6px;
370 |     margin: 7px 0 0 0;
371 | }
372 | 
373 | #toolbar .segment {
374 |     line-height: 27px;
375 |     display: inline-block;
376 |     padding: 1px 15px;
377 |     vertical-align: top;
378 |     -webkit-border-radius: 0px 0px 0px 0px;
379 |     border-radius: 0px 0px 0px 0px;
380 | }
381 | 
382 | #toolbar .segment:active {
383 |     padding: 2px 15px 0 15px;
384 | }
385 | 
386 | #toolbar .segment.selected {
387 |     padding: 2px 15px 0 15px;
388 | }
389 | 
390 | #toolbar .segment:first-child {
391 |     -webkit-border-radius: 5px 0px 0px 5px;
392 |     border-radius: 5px 0px 0px 5px;
393 | }
394 | 
395 | #toolbar .segment:last-child {
396 |     -webkit-border-radius: 0px 5px 5px 0px;
397 |     border-radius: 0px 5px 5px 0px;
398 | }
399 | 
400 | .segtwo > .segment {
401 |     width: 82px;
402 |     text-align: center;
403 |     padding: 0px;
404 | }
405 | 
406 | .segthree > .segment {
407 |     width: 54px;
408 |     text-align: center;
409 |     padding: 1px;
410 | }
411 | 
412 | .segfour > .segment {
413 |     width: 40px;
414 |     text-align: center;
415 |     padding: 0px;
416 | }
417 | 
418 | #editorHTML, #editorHTML textarea, #editorCSS, #editorCSS textarea {
419 |     height: 500px;
420 |     width: 100%;
421 | }
422 | 
423 | #editorCSS .button, #editorHTML .button {
424 |     padding: 15px;
425 |     text-align: center;
426 |     margin: auto;
427 |     display: inline-block;
428 | }
429 | 
430 | #editorCSS .button a, #editorHTML .button a {
431 |     padding: 20px;
432 |     color: white;
433 |     text-decoration: none;
434 | }
435 | 
436 | #editor {
437 |     position: absolute;
438 |     top: 45px;
439 |     left: 300px;
440 |     bottom: 0px;
441 |     right: 0px;
442 |     margin: 0px;
443 |     padding: 25px;
444 |     overflow: auto;
445 |     display: inline-block;
446 |     -moz-user-select: auto;
447 |     -webkit-user-select: auto;
448 | }
449 | 
450 | #editorCSS, #editorHTML {
451 |     display: none;
452 | }
453 | 
454 | #CSSbox {
455 |     background: #ccc;
456 |     overflow: auto;
457 |     height: auto;
458 |     text-shadow: none;
459 |     margin: 0px;
460 |     -moz-user-select: auto;
461 |     -webkit-user-select: auto;
462 | }
463 | 
464 | #backgroundslider {
465 |     position: absolute;
466 |     bottom: 0px;
467 |     right: 0px;
468 |     width: 360px;
469 |     height: 30px;
470 |     padding: 15px 20px 0px 20px;
471 |     background: #3B3937;
472 |     border-radius: 10px 0px 4px 0px;
473 | }
474 | 
475 | #backgroundslider input {
476 |     display: none;
477 | }
478 | 
479 | #toolbar #foldin_btn {
480 |     margin-left: 50px;
481 | }
482 | 
483 | #examples_btn {
484 |     position: absolute;
485 |     right: 195px;
486 | }
487 | 
488 | #dialog {
489 |     top: 200px;
490 |     display: block;
491 | }
492 | 
493 | #dialog iframe {
494 |     border: 0px;
495 | }
496 | #dimmer {
497 |     z-index: 3;
498 |     opacity: 1;
499 | }
500 | 
501 | #onSmartphones {
502 |     display: none;
503 | }
504 | 
505 | .fd-slider-bar {
506 |     display: block;
507 |     position: absolute;
508 |     top: 8px;
509 |     right: 0px;
510 |     left: 10px;
511 |     z-index: 2;
512 |     height: 0px;
513 |     margin: 0;
514 |     padding: 0;
515 |     overflow: hidden;
516 |     border: 0px;
517 |     background-clip: padding-box;
518 | }
519 | 
520 | .fd-slider-bar, .fd-slider-range {
521 |     margin-left: -10px;
522 | }
523 | 
524 | .fd-slider-range {
525 |     opacity: 0.2;
526 | }
527 | 
528 | .fd-slider-handle, .fd-slider-handle:active, .fd-slider-handle:hover {
529 |     cursor: pointer;
530 |     position: absolute;
531 |     width: 12px;
532 |     height: 12px;
533 |     top: 4px;
534 |     padding-left: 10px;
535 |     border-radius: 6px;
536 |     -moz-border-radius: 7px;
537 |     -webkit-border-radius: 7px;
538 | }
539 | 
540 | .fd-slider-drag-horizontal,
541 | .fd-slider-vertical .fd-slider-handle,
542 | body.fd-slider-drag-horizontal,
543 | body.fd-slider-drag-horizontal *,
544 | body.fd-slider-drag-vertical,
545 | body.fd-slider-drag-vertical * {
546 |     cursor:pointer !important;
547 | }
548 | 
549 | @media only screen 
550 | and (min-device-width : 768px) 
551 | and (max-device-width : 1024px) {
552 |     
553 |     #box {
554 |         height: auto;
555 |         width: auto;
556 |         margin: 0px;
557 |         position: absolute;
558 |         top: 0px;
559 |         left: 0px;
560 |         right: 0px;
561 |         bottom: 0px;
562 |         border-radius: 0px;
563 |     }
564 |     #topbar, #topgrad {
565 |         display: none;
566 |         visibility: hidden;
567 |     }
568 |     #editorHTML .button {
569 |         padding: 10px;
570 |         text-align: center;
571 |         margin: 5px;
572 |         display: block;
573 |     }
574 |     #editorHTML textarea {
575 |         height: 490px;
576 |     }
577 |     
578 |     #fullscreen_btn {
579 |         display: none;
580 |     }
581 |     
582 |     #examples_btn {
583 |         right: 205px;
584 |     }
585 |     
586 |     #toolbar .button, #toolbar .segment {
587 |         line-height: 35px;
588 |     }
589 |     
590 |     #toolbar {
591 |         height: 53px;
592 |     }
593 |     
594 |     #sidebar, #editor {
595 |         top: 53px;
596 |     }
597 |     
598 |     #sidebar .item .title {
599 |         height: 35px;
600 |         font-weight: bold;
601 |         line-height: 35px;
602 |         font-size: 16px;
603 |     }
604 |     
605 |     #sidebar .item.active .title {
606 |         line-height: 35px;
607 |         margin-bottom: 15px;
608 |     }
609 |     
610 |     #sidebar tr {
611 |         height: 50px;
612 |     }
613 |     
614 |     .fd-slider-handle, .fd-slider-handle:active, .fd-slider-handle:hover {
615 |         height: 23px;
616 |         top: -2px;
617 |         padding-left: 10px;
618 |         border-radius: 10px;
619 |         -moz-border-radius: 10px;
620 |         -webkit-border-radius: 10px;
621 |     }
622 |     
623 |     #sidebar .item .wpt_contents .segment {
624 |         line-height: 32px;
625 |     }
626 | }
627 | 
628 | @media only screen 
629 | and (min-device-width : 320px) 
630 | and (max-device-width : 480px) {
631 |     
632 |     #box {
633 |         display: none;
634 |     }
635 |     #onSmartphones {
636 |         display: block;
637 |         position: absolute;
638 |         top: 200px;
639 |         bottom: 10px;
640 |         left: 30px;
641 |         right: 30px;
642 |         color: black;
643 |         font-size: 21px;
644 |         text-align: center;
645 |     }
646 | }
647 | 
648 | :-webkit-full-screen #box {
649 |     height: auto;
650 |     width: auto;
651 |     margin: 0px;
652 |     position: absolute;
653 |     top: 0px;
654 |     left: 0px;
655 |     right: 0px;
656 |     bottom: 0px;
657 |     border-radius: 0px;
658 | }
659 | 
660 | :-webkit-full-screen #topbar, :-webkit-full-screen #topgrad, :-webkit-full-screen #fullscreen_btn {
661 |     display: none;
662 |     visibility: hidden;
663 | }
664 | 
665 | :-moz-full-screen #box {
666 |     height: auto;
667 |     width: auto;
668 |     margin: 0px;
669 |     position: absolute;
670 |     top: 0px;
671 |     left: 0px;
672 |     right: 0px;
673 |     bottom: 0px;
674 |     border-radius: 0px;
675 | }
676 | 
677 | :-moz-full-screen #topbar, :-moz-full-screen #topgrad, :-moz-full-screen #fullscreen_btn {
678 |     display: none;
679 |     visibility: hidden;
680 | }
681 | 


--------------------------------------------------------------------------------
/prettify.js:
--------------------------------------------------------------------------------
  1 | var q = null;
  2 | window.PR_SHOULD_USE_CONTINUATION = !0;
  3 | (function () {
  4 |   function L(a) {
  5 |     function m(a) {
  6 |       var f = a.charCodeAt(0);
  7 |       if (f !== 92) return f;
  8 |       var b = a.charAt(1);
  9 |       return (f = r[b]) ? f : "0" <= b && b <= "7" ? parseInt(a.substring(1), 8) : b === "u" || b === "x" ? parseInt(a.substring(2), 16) : a.charCodeAt(1)
 10 |     }
 11 | 
 12 |     function e(a) {
 13 |       if (a < 32) return (a < 16 ? "\\x0" : "\\x") + a.toString(16);
 14 |       a = String.fromCharCode(a);
 15 |       if (a === "\\" || a === "-" || a === "[" || a === "]") a = "\\" + a;
 16 |       return a
 17 |     }
 18 | 
 19 |     function h(a) {
 20 |       for (var f = a.substring(1, a.length - 1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g), a = [], b = [], o = f[0] === "^", c = o ? 1 : 0, i = f.length; c < i; ++c) {
 21 |         var j = f[c];
 22 |         if (/\\[bdsw]/i.test(j)) a.push(j);
 23 |         else {
 24 |           var j = m(j),
 25 |             d;
 26 |           c + 2 < i && "-" === f[c + 1] ? (d = m(f[c + 2]), c += 2) : d = j;
 27 |           b.push([j, d]);
 28 |           d < 65 || j > 122 || (d < 65 || j > 90 || b.push([Math.max(65, j) | 32, Math.min(d, 90) | 32]), d < 97 || j > 122 || b.push([Math.max(97, j) & -33, Math.min(d, 122) & -33]))
 29 |         }
 30 |       }
 31 |       b.sort(function (a, f) {
 32 |         return a[0] - f[0] || f[1] - a[1]
 33 |       });
 34 |       f = [];
 35 |       j = [NaN, NaN];
 36 |       for (c = 0; c < b.length; ++c) i = b[c], i[0] <= j[1] + 1 ? j[1] = Math.max(j[1], i[1]) : f.push(j = i);
 37 |       b = ["["];
 38 |       o && b.push("^");
 39 |       b.push.apply(b, a);
 40 |       for (c = 0; c <
 41 |         f.length; ++c) i = f[c], b.push(e(i[0])), i[1] > i[0] && (i[1] + 1 > i[0] && b.push("-"), b.push(e(i[1])));
 42 |       b.push("]");
 43 |       return b.join("")
 44 |     }
 45 | 
 46 |     function y(a) {
 47 |       for (var f = a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g), b = f.length, d = [], c = 0, i = 0; c < b; ++c) {
 48 |         var j = f[c];
 49 |         j === "(" ? ++i : "\\" === j.charAt(0) && (j = +j.substring(1)) && j <= i && (d[j] = -1)
 50 |       }
 51 |       for (c = 1; c < d.length; ++c) - 1 === d[c] && (d[c] = ++t);
 52 |       for (i = c = 0; c < b; ++c) j = f[c], j === "(" ? (++i, d[i] === void 0 && (f[c] = "(?:")) : "\\" === j.charAt(0) &&
 53 |         (j = +j.substring(1)) && j <= i && (f[c] = "\\" + d[i]);
 54 |       for (i = c = 0; c < b; ++c) "^" === f[c] && "^" !== f[c + 1] && (f[c] = "");
 55 |       if (a.ignoreCase && s)
 56 |         for (c = 0; c < b; ++c) j = f[c], a = j.charAt(0), j.length >= 2 && a === "[" ? f[c] = h(j) : a !== "\\" && (f[c] = j.replace(/[A-Za-z]/g, function (a) {
 57 |           a = a.charCodeAt(0);
 58 |           return "[" + String.fromCharCode(a & -33, a | 32) + "]"
 59 |         }));
 60 |       return f.join("")
 61 |     }
 62 |     for (var t = 0, s = !1, l = !1, p = 0, d = a.length; p < d; ++p) {
 63 |       var g = a[p];
 64 |       if (g.ignoreCase) l = !0;
 65 |       else if (/[a-z]/i.test(g.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi, ""))) {
 66 |         s = !0;
 67 |         l = !1;
 68 |         break
 69 |       }
 70 |     }
 71 |     for (var r = {
 72 |       b: 8,
 73 |       t: 9,
 74 |       n: 10,
 75 |       v: 11,
 76 |       f: 12,
 77 |       r: 13
 78 |     }, n = [], p = 0, d = a.length; p < d; ++p) {
 79 |       g = a[p];
 80 |       if (g.global || g.multiline) throw Error("" + g);
 81 |       n.push("(?:" + y(g) + ")")
 82 |     }
 83 |     return RegExp(n.join("|"), l ? "gi" : "g")
 84 |   }
 85 | 
 86 |   function M(a) {
 87 |     function m(a) {
 88 |       switch (a.nodeType) {
 89 |       case 1:
 90 |         if (e.test(a.className)) break;
 91 |         for (var g = a.firstChild; g; g = g.nextSibling) m(g);
 92 |         g = a.nodeName;
 93 |         if ("BR" === g || "LI" === g) h[s] = "\n", t[s << 1] = y++, t[s++ << 1 | 1] = a;
 94 |         break;
 95 |       case 3:
 96 |       case 4:
 97 |         g = a.nodeValue, g.length && (g = p ? g.replace(/\r\n?/g, "\n") : g.replace(/[\t\n\r ]+/g, " "), h[s] = g, t[s << 1] = y, y += g.length,
 98 |           t[s++ << 1 | 1] = a)
 99 |       }
100 |     }
101 |     var e = /(?:^|\s)nocode(?:\s|$)/,
102 |       h = [],
103 |       y = 0,
104 |       t = [],
105 |       s = 0,
106 |       l;
107 |     a.currentStyle ? l = a.currentStyle.whiteSpace : window.getComputedStyle && (l = document.defaultView.getComputedStyle(a, q).getPropertyValue("white-space"));
108 |     var p = l && "pre" === l.substring(0, 3);
109 |     m(a);
110 |     return {
111 |       a: h.join("").replace(/\n$/, ""),
112 |       c: t
113 |     }
114 |   }
115 | 
116 |   function B(a, m, e, h) {
117 |     m && (a = {
118 |       a: m,
119 |       d: a
120 |     }, e(a), h.push.apply(h, a.e))
121 |   }
122 | 
123 |   function x(a, m) {
124 |     function e(a) {
125 |       for (var l = a.d, p = [l, "pln"], d = 0, g = a.a.match(y) || [], r = {}, n = 0, z = g.length; n < z; ++n) {
126 |         var f = g[n],
127 |           b = r[f],
128 |           o = void 0,
129 |           c;
130 |         if (typeof b ===
131 |           "string") c = !1;
132 |         else {
133 |           var i = h[f.charAt(0)];
134 |           if (i) o = f.match(i[1]), b = i[0];
135 |           else {
136 |             for (c = 0; c < t; ++c)
137 |               if (i = m[c], o = f.match(i[1])) {
138 |                 b = i[0];
139 |                 break
140 |               }
141 |             o || (b = "pln")
142 |           } if ((c = b.length >= 5 && "lang-" === b.substring(0, 5)) && !(o && typeof o[1] === "string")) c = !1, b = "src";
143 |           c || (r[f] = b)
144 |         }
145 |         i = d;
146 |         d += f.length;
147 |         if (c) {
148 |           c = o[1];
149 |           var j = f.indexOf(c),
150 |             k = j + c.length;
151 |           o[2] && (k = f.length - o[2].length, j = k - c.length);
152 |           b = b.substring(5);
153 |           B(l + i, f.substring(0, j), e, p);
154 |           B(l + i + j, c, C(b, c), p);
155 |           B(l + i + k, f.substring(k), e, p)
156 |         } else p.push(l + i, b)
157 |       }
158 |       a.e = p
159 |     }
160 |     var h = {}, y;
161 |     (function () {
162 |       for (var e = a.concat(m),
163 |           l = [], p = {}, d = 0, g = e.length; d < g; ++d) {
164 |         var r = e[d],
165 |           n = r[3];
166 |         if (n)
167 |           for (var k = n.length; --k >= 0;) h[n.charAt(k)] = r;
168 |         r = r[1];
169 |         n = "" + r;
170 |         p.hasOwnProperty(n) || (l.push(r), p[n] = q)
171 |       }
172 |       l.push(/[\S\s]/);
173 |       y = L(l)
174 |     })();
175 |     var t = m.length;
176 |     return e
177 |   }
178 | 
179 |   function u(a) {
180 |     var m = [],
181 |       e = [];
182 |     a.tripleQuotedStrings ? m.push(["str", /^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/, q, "'\""]) : a.multiLineStrings ? m.push(["str", /^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,
183 |       q, "'\"`"
184 |     ]) : m.push(["str", /^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/, q, "\"'"]);
185 |     a.verbatimStrings && e.push(["str", /^@"(?:[^"]|"")*(?:"|$)/, q]);
186 |     var h = a.hashComments;
187 |     h && (a.cStyleComments ? (h > 1 ? m.push(["com", /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, q, "#"]) : m.push(["com", /^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/, q, "#"]), e.push(["str", /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/, q])) : m.push(["com", /^#[^\n\r]*/,
188 |       q, "#"
189 |     ]));
190 |     a.cStyleComments && (e.push(["com", /^\/\/[^\n\r]*/, q]), e.push(["com", /^\/\*[\S\s]*?(?:\*\/|$)/, q]));
191 |     a.regexLiterals && e.push(["lang-regex", /^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);
192 |     (h = a.types) && e.push(["typ", h]);
193 |     a = ("" + a.keywords).replace(/^ | $/g,
194 |       "");
195 |     a.length && e.push(["kwd", RegExp("^(?:" + a.replace(/[\s,]+/g, "|") + ")\\b"), q]);
196 |     m.push(["pln", /^\s+/, q, " \r\n\t\xa0"]);
197 |     e.push(["lit", /^@[$_a-z][\w$@]*/i, q], ["typ", /^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/, q], ["pln", /^[$_a-z][\w$@]*/i, q], ["lit", /^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i, q, "0123456789"], ["pln", /^\\[\S\s]?/, q], ["pun", /^.[^\s\w"-$'./@\\`]*/, q]);
198 |     return x(m, e)
199 |   }
200 | 
201 |   function D(a, m) {
202 |     function e(a) {
203 |       switch (a.nodeType) {
204 |       case 1:
205 |         if (k.test(a.className)) break;
206 |         if ("BR" === a.nodeName) h(a),
207 |         a.parentNode && a.parentNode.removeChild(a);
208 |         else
209 |           for (a = a.firstChild; a; a = a.nextSibling) e(a);
210 |         break;
211 |       case 3:
212 |       case 4:
213 |         if (p) {
214 |           var b = a.nodeValue,
215 |             d = b.match(t);
216 |           if (d) {
217 |             var c = b.substring(0, d.index);
218 |             a.nodeValue = c;
219 |             (b = b.substring(d.index + d[0].length)) && a.parentNode.insertBefore(s.createTextNode(b), a.nextSibling);
220 |             h(a);
221 |             c || a.parentNode.removeChild(a)
222 |           }
223 |         }
224 |       }
225 |     }
226 | 
227 |     function h(a) {
228 |       function b(a, d) {
229 |         var e = d ? a.cloneNode(!1) : a,
230 |           f = a.parentNode;
231 |         if (f) {
232 |           var f = b(f, 1),
233 |             g = a.nextSibling;
234 |           f.appendChild(e);
235 |           for (var h = g; h; h = g) g = h.nextSibling, f.appendChild(h)
236 |         }
237 |         return e
238 |       }
239 |       for (; !a.nextSibling;)
240 |         if (a = a.parentNode, !a) return;
241 |       for (var a = b(a.nextSibling, 0), e;
242 |         (e = a.parentNode) && e.nodeType === 1;) a = e;
243 |       d.push(a)
244 |     }
245 |     var k = /(?:^|\s)nocode(?:\s|$)/,
246 |       t = /\r\n?|\n/,
247 |       s = a.ownerDocument,
248 |       l;
249 |     a.currentStyle ? l = a.currentStyle.whiteSpace : window.getComputedStyle && (l = s.defaultView.getComputedStyle(a, q).getPropertyValue("white-space"));
250 |     var p = l && "pre" === l.substring(0, 3);
251 |     for (l = s.createElement("LI"); a.firstChild;) l.appendChild(a.firstChild);
252 |     for (var d = [l], g = 0; g < d.length; ++g) e(d[g]);
253 |     m === (m | 0) && d[0].setAttribute("value",
254 |       m);
255 |     var r = s.createElement("OL");
256 |     r.className = "linenums";
257 |     for (var n = Math.max(0, m - 1 | 0) || 0, g = 0, z = d.length; g < z; ++g) l = d[g], l.className = "L" + (g + n) % 10, l.firstChild || l.appendChild(s.createTextNode("\xa0")), r.appendChild(l);
258 |     a.appendChild(r)
259 |   }
260 | 
261 |   function k(a, m) {
262 |     for (var e = m.length; --e >= 0;) {
263 |       var h = m[e];
264 |       A.hasOwnProperty(h) ? window.console && console.warn("cannot override language handler %s", h) : A[h] = a
265 |     }
266 |   }
267 | 
268 |   function C(a, m) {
269 |     if (!a || !A.hasOwnProperty(a)) a = /^\s*</.test(m) ? "default-markup" : "default-code";
270 |     return A[a]
271 |   }
272 | 
273 |   function E(a) {
274 |     var m =
275 |       a.g;
276 |     try {
277 |       var e = M(a.h),
278 |         h = e.a;
279 |       a.a = h;
280 |       a.c = e.c;
281 |       a.d = 0;
282 |       C(m, h)(a);
283 |       var k = /\bMSIE\b/.test(navigator.userAgent),
284 |         m = /\n/g,
285 |         t = a.a,
286 |         s = t.length,
287 |         e = 0,
288 |         l = a.c,
289 |         p = l.length,
290 |         h = 0,
291 |         d = a.e,
292 |         g = d.length,
293 |         a = 0;
294 |       d[g] = s;
295 |       var r, n;
296 |       for (n = r = 0; n < g;) d[n] !== d[n + 2] ? (d[r++] = d[n++], d[r++] = d[n++]) : n += 2;
297 |       g = r;
298 |       for (n = r = 0; n < g;) {
299 |         for (var z = d[n], f = d[n + 1], b = n + 2; b + 2 <= g && d[b + 1] === f;) b += 2;
300 |         d[r++] = z;
301 |         d[r++] = f;
302 |         n = b
303 |       }
304 |       for (d.length = r; h < p;) {
305 |         var o = l[h + 2] || s,
306 |           c = d[a + 2] || s,
307 |           b = Math.min(o, c),
308 |           i = l[h + 1],
309 |           j;
310 |         if (i.nodeType !== 1 && (j = t.substring(e, b))) {
311 |           k && (j = j.replace(m, "\r"));
312 |           i.nodeValue =
313 |             j;
314 |           var u = i.ownerDocument,
315 |             v = u.createElement("SPAN");
316 |           v.className = d[a + 1];
317 |           var x = i.parentNode;
318 |           x.replaceChild(v, i);
319 |           v.appendChild(i);
320 |           e < o && (l[h + 1] = i = u.createTextNode(t.substring(b, o)), x.insertBefore(i, v.nextSibling))
321 |         }
322 |         e = b;
323 |         e >= o && (h += 2);
324 |         e >= c && (a += 2)
325 |       }
326 |     } catch (w) {
327 |       "console" in window && console.log(w && w.stack ? w.stack : w)
328 |     }
329 |   }
330 |   var v = ["break,continue,do,else,for,if,return,while"],
331 |     w = [
332 |       [v, "auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],
333 |       "catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"
334 |     ],
335 |     F = [w, "alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],
336 |     G = [w, "abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"],
337 |     H = [G, "as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],
338 |     w = [w, "debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],
339 |     I = [v, "and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],
340 |     J = [v, "alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],
341 |     v = [v, "case,done,elif,esac,eval,fi,function,in,local,set,then,until"],
342 |     K = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,
343 |     N = /\S/,
344 |     O = u({
345 |       keywords: [F, H, w, "caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END" +
346 |         I, J, v
347 |       ],
348 |       hashComments: !0,
349 |       cStyleComments: !0,
350 |       multiLineStrings: !0,
351 |       regexLiterals: !0
352 |     }),
353 |     A = {};
354 |   k(O, ["default-code"]);
355 |   k(x([], [
356 |     ["pln", /^[^<?]+/],
357 |     ["dec", /^<!\w[^>]*(?:>|$)/],
358 |     ["com", /^<\!--[\S\s]*?(?:--\>|$)/],
359 |     ["lang-", /^<\?([\S\s]+?)(?:\?>|$)/],
360 |     ["lang-", /^<%([\S\s]+?)(?:%>|$)/],
361 |     ["pun", /^(?:<[%?]|[%?]>)/],
362 |     ["lang-", /^<xmp\b[^>]*>([\S\s]+?)<\/xmp\b[^>]*>/i],
363 |     ["lang-js", /^<script\b[^>]*>([\S\s]*?)(<\/script\b[^>]*>)/i],
364 |     ["lang-css", /^<style\b[^>]*>([\S\s]*?)(<\/style\b[^>]*>)/i],
365 |     ["lang-in.tag", /^(<\/?[a-z][^<>]*>)/i]
366 |   ]), ["default-markup", "htm", "html", "mxml", "xhtml", "xml", "xsl"]);
367 |   k(x([
368 |     ["pln", /^\s+/, q, " \t\r\n"],
369 |     ["atv", /^(?:"[^"]*"?|'[^']*'?)/, q, "\"'"]
370 |   ], [
371 |     ["tag", /^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],
372 |     ["atn", /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
373 |     ["lang-uq.val", /^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],
374 |     ["pun", /^[/<->]+/],
375 |     ["lang-js", /^on\w+\s*=\s*"([^"]+)"/i],
376 |     ["lang-js", /^on\w+\s*=\s*'([^']+)'/i],
377 |     ["lang-js", /^on\w+\s*=\s*([^\s"'>]+)/i],
378 |     ["lang-css", /^style\s*=\s*"([^"]+)"/i],
379 |     ["lang-css", /^style\s*=\s*'([^']+)'/i],
380 |     ["lang-css",
381 |       /^style\s*=\s*([^\s"'>]+)/i
382 |     ]
383 |   ]), ["in.tag"]);
384 |   k(x([], [
385 |     ["atv", /^[\S\s]+/]
386 |   ]), ["uq.val"]);
387 |   k(u({
388 |     keywords: F,
389 |     hashComments: !0,
390 |     cStyleComments: !0,
391 |     types: K
392 |   }), ["c", "cc", "cpp", "cxx", "cyc", "m"]);
393 |   k(u({
394 |     keywords: "null,true,false"
395 |   }), ["json"]);
396 |   k(u({
397 |     keywords: H,
398 |     hashComments: !0,
399 |     cStyleComments: !0,
400 |     verbatimStrings: !0,
401 |     types: K
402 |   }), ["cs"]);
403 |   k(u({
404 |     keywords: G,
405 |     cStyleComments: !0
406 |   }), ["java"]);
407 |   k(u({
408 |     keywords: v,
409 |     hashComments: !0,
410 |     multiLineStrings: !0
411 |   }), ["bsh", "csh", "sh"]);
412 |   k(u({
413 |     keywords: I,
414 |     hashComments: !0,
415 |     multiLineStrings: !0,
416 |     tripleQuotedStrings: !0
417 |   }), ["cv", "py"]);
418 |   k(u({
419 |     keywords: "caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",
420 |     hashComments: !0,
421 |     multiLineStrings: !0,
422 |     regexLiterals: !0
423 |   }), ["perl", "pl", "pm"]);
424 |   k(u({
425 |     keywords: J,
426 |     hashComments: !0,
427 |     multiLineStrings: !0,
428 |     regexLiterals: !0
429 |   }), ["rb"]);
430 |   k(u({
431 |     keywords: w,
432 |     cStyleComments: !0,
433 |     regexLiterals: !0
434 |   }), ["js"]);
435 |   k(u({
436 |     keywords: "all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes",
437 |     hashComments: 3,
438 |     cStyleComments: !0,
439 |     multilineStrings: !0,
440 |     tripleQuotedStrings: !0,
441 |     regexLiterals: !0
442 |   }), ["coffee"]);
443 |   k(x([], [
444 |     ["str", /^[\S\s]+/]
445 |   ]), ["regex"]);
446 |   window.prettyPrintOne = function (a, m, e) {
447 |     var h = document.createElement("PRE");
448 |     h.innerHTML = a;
449 |     e && D(h, e);
450 |     E({
451 |       g: m,
452 |       i: e,
453 |       h: h
454 |     });
455 |     return h.innerHTML
456 |   };
457 |   window.prettyPrint = function (a) {
458 |     function m() {
459 |       for (var e = window.PR_SHOULD_USE_CONTINUATION ? l.now() + 250 : Infinity; p < h.length && l.now() < e; p++) {
460 |         var n = h[p],
461 |           k = n.className;
462 |         if (k.indexOf("prettyprint") >= 0) {
463 |           var k = k.match(g),
464 |             f, b;
465 |           if (b = !k) {
466 |             b = n;
467 |             for (var o = void 0, c = b.firstChild; c; c = c.nextSibling) var i = c.nodeType,
468 |             o = i === 1 ? o ? b : c : i === 3 ? N.test(c.nodeValue) ? b : o : o;
469 |             b = (f = o === b ? void 0 : o) && "CODE" === f.tagName
470 |           }
471 |           b && (k = f.className.match(g));
472 |           k && (k = k[1]);
473 |           b = !1;
474 |           for (o = n.parentNode; o; o = o.parentNode)
475 |             if ((o.tagName === "pre" || o.tagName === "code" || o.tagName === "xmp") && o.className && o.className.indexOf("prettyprint") >= 0) {
476 |               b = !0;
477 |               break
478 |             }
479 |           b || ((b = (b = n.className.match(/\blinenums\b(?::(\d+))?/)) ? b[1] && b[1].length ? +b[1] : !0 : !1) && D(n, b), d = {
480 |             g: k,
481 |             h: n,
482 |             i: b
483 |           }, E(d))
484 |         }
485 |       }
486 |       p < h.length ? setTimeout(m,
487 |         250) : a && a()
488 |     }
489 |     for (var e = [document.getElementsByTagName("pre"), document.getElementsByTagName("code"), document.getElementsByTagName("xmp")], h = [], k = 0; k < e.length; ++k)
490 |       for (var t = 0, s = e[k].length; t < s; ++t) h.push(e[k][t]);
491 |     var e = q,
492 |       l = Date;
493 |     l.now || (l = {
494 |       now: function () {
495 |         return +new Date
496 |       }
497 |     });
498 |     var p = 0,
499 |       d, g = /\blang(?:uage)?-([\w.]+)(?!\S)/;
500 |     m()
501 |   };
502 |   window.PR = {
503 |     createSimpleLexer: x,
504 |     registerLangHandler: k,
505 |     sourceDecorator: u,
506 |     PR_ATTRIB_NAME: "atn",
507 |     PR_ATTRIB_VALUE: "atv",
508 |     PR_COMMENT: "com",
509 |     PR_DECLARATION: "dec",
510 |     PR_KEYWORD: "kwd",
511 |     PR_LITERAL: "lit",
512 |     PR_NOCODE: "nocode",
513 |     PR_PLAIN: "pln",
514 |     PR_PUNCTUATION: "pun",
515 |     PR_SOURCE: "src",
516 |     PR_STRING: "str",
517 |     PR_TAG: "tag",
518 |     PR_TYPE: "typ"
519 |   }
520 | })();
521 | 


--------------------------------------------------------------------------------
/min/index.php:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html> <html manifest="cache.manifest"> <head> <title>selfCSS - WYSIWYG CSS Editor</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/> <meta name="viewport" content="width=device-width, initial-scale = 0.9, user-scalable = no"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link href="https://plus.google.com/112354811285966128277?rel=author" rel="author" type="text/plain"/> <meta name="description" content="selfCSS is a WYSIWYG CSS3 Editor"> <meta name="author" content="Simon Waldherr"> <meta name="keywords" content="CSS, WYSIWYG, HTML, JS, Editor, Generator, Position, Style, Background, Border, Margin, Padding, Shadow, Filter"><script src="script.js" type="text/javascript"></script> <script src="online.js" type="text/javascript"></script><link href="style.css" rel="stylesheet" type="text/css"/><link rel="apple-touch-icon" href="/apple-touch-icon-precomposed.png"/> <link href="favicon.ico" rel="icon" type="image/x-icon"/> <style id="special_style"> </style> <style id="editable_style"> </style> </head> <body onload="wpt_init();"> <div id="topbar"> <div class="item"><a href="./"><img id="logo" src="./logo.png" alt="selfCSS Logo"/></a></div>
  2 | </div>
  3 | <div id="box"> <div id="toolbar"> <div class="button" id="about_btn" onclick="wpt_dialog('about');">About</div>
  4 | <div class="button" id="fullscreen_btn" onclick="wpt_fullscreen();">Fullscreen</div>
  5 | <div class="button" id="foldin_btn" onclick="wpt_collapse_all();">collapse all</div>
  6 | <div class="button" id="foldout_btn" onclick="wpt_expand_all();">expand all</div>
  7 | <div class="button" id="foldout_btn" onclick="wpt_expand_enabled();">expand enabled</div>
  8 | <div class="button" id="examples_btn" onclick="wpt_dialog('examples');">Examples</div>
  9 | <div id="viewmode" class="segmented"><div class="segment" onclick="editor_show('CSS');">CSS</div><div class="segment" onclick="editor_show('HTML');">HTML</div><div class="segment selected" onclick="editor_show('View');">Preview</div>
 10 | </div>
 11 | </div>
 12 | <div id="sidebar" class="ptr_scrollable"> <div class="ptr_wrap"> <div class="header">Main</div>
 13 | <div class="item"><div class="title" id="Main-Position">Position</div>
 14 | <div class="wpt_contents"> <div id="posonoff" class="segmented segtwo"><div class="off segment selected">off</div><div class="on segment">on</div></div>
 15 | <div id="postype1" class="segmented segthree"><div class="relative segment selected">relative</div><div class="absolute segment">absolute</div><div class="fixed segment">fixed</div></div>
 16 | <div id="postype2" class="segmented segthree"><div class="px segment selected">px</div><div class="em segment">em</div><div class="percent segment">%</div></div>
 17 | <table> <tbody> <tr> <td>Top:</td> <td> <input name="postop" id="postop" class="fd_slider" type="range" max="100" min="-100" title="postop" value="0" maxlength="6" /> </td> </tr> <tr> <td>Left:</td> <td> <input name="posleft" id="posleft" class="fd_slider" type="range" max="100" min="-100" title="posleft" value="0" maxlength="6" /> </td> </tr> <tr> <td>Right:</td> <td> <input name="posright" id="posright" class="fd_slider" type="range" max="100" min="-100" title="posright" value="0" maxlength="6" /> </td> </tr> <tr> <td>Bottom:</td> <td> <input name="posbottom" id="posbottom" class="fd_slider" type="range" max="100" min="-100" title="posbottom" value="0" maxlength="6" /> </td> </tr> </tbody> </table> </div>
 18 | </div>
 19 | <div class="item"><div class="title" id="Main-Size">Size</div>
 20 | <div class="wpt_contents"> <div id="sizeonoff" class="segmented segtwo"><div class="off segment">off</div><div class="on segment selected">on</div></div>
 21 | <div id="sizetype" class="segmented segthree"><div class="px segment selected">px</div><div class="em segment">em</div><div class="percent segment">%</div></div>
 22 | <table> <tbody> <tr> <td>Width:</td> <td> <input name="width" id="width" class="fd_slider" type="range" max="800" min="0" title="width" value="440" maxlength="6" /> </td> </tr> <tr> <td>Height:</td> <td> <input name="height" id="height" class="fd_slider" type="range" max="800" min="0" title="height" value="535" maxlength="6" /> </td> </tr> </tbody> </table> </div>
 23 | </div>
 24 | <div class="item"><div class="title" id="Main-Padding">Padding</div>
 25 | <div class="wpt_contents"> <div id="padonoff" class="segmented segtwo"><div class="off segment">off</div><div class="on segment selected">on</div></div>
 26 | <div id="paddd" class="segmented segtwo"><div class="separate segment selected">separate</div><div class="common segment">common</div></div>
 27 | <table> <tbody> <tr> <td>Top:</td> <td> <input name="padtop" id="padtop" class="fd_slider" type="range" max="100" min="0" title="padtop" value="15" maxlength="6" /> </td> </tr> <tr> <td>Left:</td> <td> <input name="padleft" id="padleft" class="fd_slider" type="range" max="100" min="0" title="padleft" value="15" maxlength="6" /> </td> </tr> <tr> <td>Right:</td> <td> <input name="padright" id="padright" class="fd_slider" type="range" max="100" min="0" title="padright" value="15" maxlength="6" /> </td> </tr> <tr> <td>Bottom:</td> <td> <input name="padbottom" id="padbottom" class="fd_slider" type="range" max="100" min="0" title="padbottom" value="15" maxlength="6" /> </td> </tr> </tbody> </table> </div>
 28 | </div>
 29 | <div class="item"><div class="title" id="Main-Margin">Margin</div>
 30 | <div class="wpt_contents"> <div id="margonoff" class="segmented segtwo"><div class="off segment">off</div><div class="on segment selected">on</div></div>
 31 | <div id="margd" class="segmented segtwo"><div class="separate segment selected">separate</div><div class="common segment">common</div></div>
 32 | <table> <tbody> <tr> <td>Top:</td> <td> <input name="martop" id="martop" class="fd_slider" type="range" max="100" min="-101" title="martop" value="30" maxlength="6" /> </td> </tr> <tr> <td>Left:</td> <td> <input name="marleft" id="marleft" class="fd_slider" type="range" max="100" min="-101" title="marleft" value="-101" maxlength="6" /> </td> </tr> <tr> <td>Right:</td> <td> <input name="marright" id="marright" class="fd_slider" type="range" max="100" min="-101" title="marright" value="-101" maxlength="6" /> </td> </tr> <tr> <td>Bottom:</td> <td> <input name="marbottom" id="marbottom" class="fd_slider" type="range" max="100" min="-101" title="marbottom" value="0" maxlength="6" /> </td> </tr> </tbody> </table> </div>
 33 | </div>
 34 | <div class="item"><div class="title" id="Main-Display">Display</div>
 35 | <div class="wpt_contents"> <div id="disponoff" class="segmented segtwo"><div class="off segment">off</div><div class="on segment selected">on</div></div>
 36 | <div id="displayt" class="segmented full"><div class="block segment full selected">block</div><div class="inline segment full">inline</div><div class="inline-block segment full">inline-block</div><div class="inline-table segment full">inline-table</div><div class="none segment full">none</div></div>
 37 | </div>
 38 | </div>
 39 | <div class="header">Background</div>
 40 | <div class="item"><div class="title" id="Background-Color">Color</div>
 41 | <div class="wpt_contents"> <div id="bgonoff" class="segmented segtwo"><div class="off segment">off</div><div class="on segment selected">on</div></div>
 42 | <div id="bgd" class="segmented segtwo"><div class="separate segment selected">colored</div><div class="common segment">gray</div></div>
 43 | <table> <tbody> <tr> <td>Red:</td> <td> <input name="bgred" id="bgred" class="fd_slider" type="range" max="255" min="0" title="bgred" value="255" maxlength="6" /> </td> </tr> <tr> <td>Green:</td> <td> <input name="bggreen" id="bggreen" class="fd_slider" type="range" max="255" min="0" title="bggreen" value="255" maxlength="6" /> </td> </tr> <tr> <td>Blue:</td> <td> <input name="bgblue" id="bgblue" class="fd_slider" type="range" max="255" min="0" title="bgblue" value="255" maxlength="6" /> </td> </tr> <tr> <td>Opacity:</td> <td> <input name="bgalpha" id="bgalpha" class="fd_slider" type="range" max="1" min="0" step="0.1" title="bgalpha" value="1" maxlength="6" /> </td> </tr> </tbody> </table> </div>
 44 | </div>
 45 | <div class="item"><div class="title" id="Background-Image">Image</div>
 46 | <div class="wpt_contents"> <div id="backgroundimg" class="segmented full"><div class="none segment full selected">none</div><div class="summer segment full">summer</div><div class="winter segment full">winter</div></div>
 47 | </div>
 48 | </div>
 49 | <div class="item"><div class="title" id="Background-Size">Size</div>
 50 | <div class="wpt_contents"> <div id="bgstype" class="segmented segtwo"><div class="px segment selected">px</div><div class="percent segment">%</div></div>
 51 | <table> <tbody> <tr> <td>Width:</td> <td> <input name="bgw" id="bgw" class="fd_slider" type="range" max="200" min="0" title="bgw" value="100" maxlength="6" /> </td> </tr> <tr> <td>Height:</td> <td> <input name="bgh" id="bgh" class="fd_slider" type="range" max="200" min="0" title="bgh" value="100" maxlength="6" /> </td> </tr> </tbody> </table> </div>
 52 | </div>
 53 | <div class="item"><div class="title" id="Background-Position">Position</div>
 54 | <div class="wpt_contents"> <div id="bgptype" class="segmented segtwo"><div class="px segment selected">px</div><div class="percent segment">%</div></div>
 55 | <table> <tbody> <tr> <td>Top:</td> <td> <input name="bgtop" id="bgtop" class="fd_slider" type="range" max="200" min="0" title="bgtop" value="0" maxlength="6" /> </td> </tr> <tr> <td>Left:</td> <td> <input name="bgleft" id="bgleft" class="fd_slider" type="range" max="200" min="0" title="bgleft" value="0" maxlength="6" /> </td> </tr> </tbody> </table> </div>
 56 | </div>
 57 | <div class="header">Font</div>
 58 | <div class="item"><div class="title" id="Text-Size">Size</div>
 59 | <div class="wpt_contents"> <div id="fsizeonoff" class="segmented segtwo"><div class="off segment selected">off</div><div class="on segment">on</div></div>
 60 | <div id="fontsizetype" class="segmented segfour"><div class="px segment selected">px</div><div class="em segment">em</div><div class="pt segment">pt</div><div class="percent segment">%</div></div>
 61 | <table> <tbody> <tr> <td>Size:</td> <td> <input name="fsize" id="fsize" class="fd_slider" type="range" max="100" min="0" title="fsize" value="20" maxlength="6" /> </td> </tr> </tbody> </table> </div>
 62 | </div>
 63 | <div class="item"><div class="title" id="Text-Color">Color</div>
 64 | <div class="wpt_contents"> <div id="tconoff" class="segmented segtwo"><div class="off segment">off</div><div class="on segment selected">on</div></div>
 65 | <div id="tcd" class="segmented segtwo"><div class="separate segment selected">colored</div><div class="common segment">gray</div></div>
 66 | <table> <tbody> <tr> <td>Red:</td> <td> <input name="tcred" id="tcred" class="fd_slider" type="range" max="255" min="0" title="tcred" value="0" maxlength="6" /> </td> </tr> <tr> <td>Green:</td> <td> <input name="tcgreen" id="tcgreen" class="fd_slider" type="range" max="255" min="0" title="tcgreen" value="0" maxlength="6" /> </td> </tr> <tr> <td>Blue:</td> <td> <input name="tcblue" id="tcblue" class="fd_slider" type="range" max="255" min="0" title="tcblue" value="0" maxlength="6" /> </td> </tr> <tr> <td>Opacity:</td> <td> <input name="tcalpha" id="tcalpha" class="fd_slider" type="range" max="1" min="0" step="0.1" title="tcalpha" value="1" maxlength="6" /> </td> </tr> </tbody> </table> </div>
 67 | </div>
 68 | <div class="item"><div class="title" id="Main-Font">Family</div>
 69 | <div class="wpt_contents"> <div id="fontonoff" class="segmented segtwo"><div class="off segment selected">off</div><div class="on segment">on</div></div>
 70 | <div id="font" class="segmented full"><div class="Helvetica segment full selected">Helvetica</div><div class="Lucida segment full">Lucida</div><div class="Georgia segment full">Georgia</div><div class="Menlo segment full">Menlo</div><div class="Hoefler segment full">Hoefler</div></div>
 71 | </div>
 72 | </div>
 73 | <div class="header">Border</div>
 74 | <div class="item"><div class="title" id="Border-Thickness">Width</div>
 75 | <div class="wpt_contents"> <div id="btonoff" class="segmented segtwo"><div class="off segment">off</div><div class="on segment selected">on</div></div>
 76 | <div id="bordert" class="segmented segtwo"><div class="separate segment selected">separate</div><div class="common segment">common</div></div>
 77 | <table> <tbody> <tr> <td>Top:</td> <td> <input name="bttop" id="bttop" class="fd_slider" type="range" max="25" min="0" title="bttop" value="1" maxlength="6" /> </td> </tr> <tr> <td>Left:</td> <td> <input name="btleft" id="btleft" class="fd_slider" type="range" max="25" min="0" title="btleft" value="1" maxlength="6" /> </td> </tr> <tr> <td>Right:</td> <td> <input name="btright" id="btright" class="fd_slider" type="range" max="25" min="0" title="btright" value="1" maxlength="6" /> </td> </tr> <tr> <td>Bottom:</td> <td> <input name="btbottom" id="btbottom" class="fd_slider" type="range" max="25" min="0" title="btbottom" value="25" maxlength="6" /> </td> </tr> </tbody> </table> </div>
 78 | </div>
 79 | <div class="item"><div class="title" id="Border-Color">Color</div>
 80 | <div class="wpt_contents"> <div id="bcd" class="segmented segtwo"><div class="separate segment selected">colored</div><div class="common segment">gray</div></div>
 81 | <table> <tbody> <tr> <td>Red:</td> <td> <input name="bcred" id="bcred" class="fd_slider" type="range" max="255" min="0" title="bcred" value="255" maxlength="6" /> </td> </tr> <tr> <td>Green:</td> <td> <input name="bcgreen" id="bcgreen" class="fd_slider" type="range" max="255" min="0" title="bcgreen" value="255" maxlength="6" /> </td> </tr> <tr> <td>Blue:</td> <td> <input name="bcblue" id="bcblue" class="fd_slider" type="range" max="255" min="0" title="bcblue" value="255" maxlength="6" /> </td> </tr> <tr> <td>Opacity:</td> <td> <input name="bcalpha" id="bcalpha" class="fd_slider" type="range" max="1" min="0" step="0.1" title="bcalpha" value="1" maxlength="6" /> </td> </tr> </tbody> </table> </div>
 82 | </div>
 83 | <div class="item"><div class="title" id="Border-Type">Type</div>
 84 | <div class="wpt_contents"> <div id="btype" class="segmented full"><div class="solid segment full selected">solid</div><div class="dotted segment full">dotted</div><div class="dashed segment full">dashed</div><div class="double segment full">double</div><div class="none segment full">none</div></div>
 85 | </div>
 86 | </div>
 87 | <div class="item"><div class="title" id="Border-Radius">Radius</div>
 88 | <div class="wpt_contents"> <div id="bradonoff" class="segmented segtwo"><div class="off segment">off</div><div class="on segment selected">on</div></div>
 89 | <div id="borderd" class="segmented segtwo"><div class="separate segment selected">separate</div><div class="common segment">common</div></div>
 90 | <table> <tbody> <tr> <td>Top-Left:</td> <td> <input name="brtl" id="brtl" class="fd_slider" type="range" max="100" min="0" title="brtl" value="4" maxlength="6" /> </td> </tr> <tr> <td>Top-Right:</td> <td> <input name="brtr" id="brtr" class="fd_slider" type="range" max="100" min="0" title="brtr" value="4" maxlength="6" /> </td> </tr> <tr> <td>Bottom-Right:</td> <td> <input name="brbr" id="brbr" class="fd_slider" type="range" max="100" min="0" title="brbr" value="4" maxlength="6" /> </td> </tr> <tr> <td>Bottom-Left:</td> <td> <input name="brbl" id="brbl" class="fd_slider" type="range" max="100" min="0" title="brbl" value="4" maxlength="6" /> </td> </tr> </tbody> </table> </div>
 91 | </div>
 92 | <div class="header">Box-Shadow</div>
 93 | <div class="item"><div class="title" id="BS-Position">Position</div>
 94 | <div class="wpt_contents"> <div id="bsonoff" class="segmented segtwo"><div class="off segment">off</div><div class="on segment selected">on</div></div>
 95 | <div id="bstype" class="segmented segtwo"><div class="inset segment selected">inset</div><div class="outside segment">outside</div></div>
 96 | <table> <tbody> <tr> <td>Horizontal:</td> <td> <input name="bsh" id="bsh" class="fd_slider" type="range" max="25" min="-25" title="bsh" value="2" maxlength="6" /> </td> </tr> <tr> <td>Vertical:</td> <td> <input name="bsv" id="bsv" class="fd_slider" type="range" max="25" min="-25" title="bsv" value="2" maxlength="6" /> </td> </tr> </tbody> </table> </div>
 97 | </div>
 98 | <div class="item"><div class="title" id="BS-Color">Color</div>
 99 | <div class="wpt_contents"> <div id="bscold" class="segmented segtwo"><div class="separate segment selected">colored</div><div class="common segment">gray</div></div>
100 | <table> <tbody> <tr> <td>Red:</td> <td> <input name="bsred" id="bsred" class="fd_slider" type="range" max="255" min="0" title="bsred" value="255" maxlength="6" /> </td> </tr> <tr> <td>Green:</td> <td> <input name="bsgreen" id="bsgreen" class="fd_slider" type="range" max="255" min="0" title="bsgreen" value="255" maxlength="6" /> </td> </tr> <tr> <td>Blue:</td> <td> <input name="bsblue" id="bsblue" class="fd_slider" type="range" max="255" min="0" title="bsblue" value="255" maxlength="6" /> </td> </tr> <tr> <td>Opacity:</td> <td> <input name="bsalpha" id="bsalpha" class="fd_slider" type="range" max="1" min="0" step="0.1" title="bsalpha" value="1" maxlength="6" /> </td> </tr> </tbody> </table> </div>
101 | </div>
102 | <div class="item"><div class="title" id="BS-Blur">Blur</div>
103 | <div class="wpt_contents"> <table> <tbody> <tr> <td>Radius:</td> <td> <input name="bsrad" id="bsrad" class="fd_slider" type="range" max="25" min="0" title="bsrad" value="25" maxlength="6" /> </td> </tr> <tr> <td>Spread:</td> <td> <input name="bssp" id="bssp" class="fd_slider" type="range" max="25" min="-25" title="bssp" value="7" maxlength="6" /> </td> </tr> </tbody> </table> </div>
104 | </div>
105 | <div class="header">Text-Shadow</div>
106 | <div class="item"><div class="title" id="TS-Position">Position</div>
107 | <div class="wpt_contents"> <div id="tsonoff" class="segmented segtwo"><div class="off segment selected">off</div><div class="on segment">on</div></div>
108 | <table> <tbody> <tr> <td>Horizontal:</td> <td> <input name="tsh" id="tsh" class="fd_slider" type="range" max="10" min="-10" title="tsh" value="0" maxlength="6" /> </td> </tr> <tr> <td>Vertical:</td> <td> <input name="tsv" id="tsv" class="fd_slider" type="range" max="10" min="-10" title="tsv" value="0" maxlength="6" /> </td> </tr> </tbody> </table> </div>
109 | </div>
110 | <div class="item"><div class="title" id="TS-Color">Color</div>
111 | <div class="wpt_contents"> <div id="tscold" class="segmented segtwo"><div class="separate segment selected">colored</div><div class="common segment">gray</div></div>
112 | <table> <tbody> <tr> <td>Red:</td> <td> <input name="tsred" id="tsred" class="fd_slider" type="range" max="255" min="0" title="tsred" value="0" maxlength="6" /> </td> </tr> <tr> <td>Green:</td> <td> <input name="tsgreen" id="tsgreen" class="fd_slider" type="range" max="255" min="0" title="tsgreen" value="0" maxlength="6" /> </td> </tr> <tr> <td>Blue:</td> <td> <input name="tsblue" id="tsblue" class="fd_slider" type="range" max="255" min="0" title="tsblue" value="0" maxlength="6" /> </td> </tr> <tr> <td>Opacity:</td> <td> <input name="tsalpha" id="tsalpha" class="fd_slider" type="range" max="1" min="0" step="0.1" title="tsalpha" value="1" maxlength="6" /> </td> </tr> </tbody> </table> </div>
113 | </div>
114 | <div class="item"><div class="title" id="TS-Blur">Blur</div>
115 | <div class="wpt_contents"> <table> <tbody> <tr> <td>Radius:</td> <td> <input name="tsrad" id="tsrad" class="fd_slider" type="range" max="25" min="0" title="tsrad" value="0" maxlength="6" /> </td> </tr> </tbody> </table> </div>
116 | </div>
117 | <div class="header">Special</div>
118 | <div class="item"><div class="title" id="skew">Skew</div>
119 | <div class="wpt_contents"> <table> <tbody> <tr> <td>Skew-X:</td> <td> <input name="skewx" id="skewx" class="fd_slider" type="range" max="360" min="-360" title="skewx" value="0" maxlength="6" /> </td> </tr> <tr> <td>Skew-Y:</td> <td> <input name="skewy" id="skewy" class="fd_slider" type="range" max="360" min="-360" title="skewy" value="0" maxlength="6" /> </td> </tr> </tbody> </table> </div>
120 | </div>
121 | <div class="item"><div class="title" id="rotate">Rotate</div>
122 | <div class="wpt_contents"> <table> <tbody> <tr> <td>Degrees:</td> <td> <input name="degrot" id="degrot" class="fd_slider" type="range" max="360" min="-360" title="degrot" value="-3" maxlength="6" /> </td> </tr> </tbody> </table> </div>
123 | </div>
124 | <div class="item"><div class="title" id="filter">Filter</div>
125 | <div class="wpt_contents"> <div id="filteronoff" class="segmented segtwo"><div class="off segment">off</div><div class="on segment selected">on</div></div>
126 | <table> <tbody> <tr> <td>Blur:</td> <td> <input name="fblur" id="fblur" class="fd_slider" type="range" max="25" min="0" title="fblur" value="0" maxlength="6" /> </td> </tr> <tr> <td>Grayscale:</td> <td> <input name="fgray" id="fgray" class="fd_slider" type="range" max="100" min="0" title="fgray" value="0" maxlength="6" /> </td> </tr> <tr> <td>Sepia:</td> <td> <input name="fsepia" id="fsepia" class="fd_slider" type="range" max="100" min="0" title="fsepia" value="12" maxlength="6" /> </td> </tr> <tr> <td>Brightness:</td> <td> <input name="fbright" id="fbright" class="fd_slider" type="range" max="100" min="0" title="fbright" value="0" maxlength="6" /> </td> </tr> <tr> <td>Hue-Rotate:</td> <td> <input name="fhue" id="fhue" class="fd_slider" type="range" max="359" min="0" title="fhue" value="0" maxlength="6" /> </td> </tr> <tr> <td>Saturate:</td> <td> <input name="fsat" id="fsat" class="fd_slider" type="range" max="200" min="0" title="fsat" value="200" maxlength="6" /> </td> </tr> <tr> <td>Contrast:</td> <td> <input name="fcontr" id="fcontr" class="fd_slider" type="range" max="100" min="0" title="fcontr" value="100" maxlength="6" /> </td> </tr> </tbody> </table> </div>
127 | </div>
128 | <div id="sidebarend"></div></div>
129 | </div>
130 | <div id="editor"> <div id="editorView"> <div class="selfCSS" style="background-image:url(./summer.jpg);"></div>
131 | </div>
132 | <div id="editorHTML"> <textarea name="HTMLedit" id="HTMLedit" onchange="$id('editorView').innerHTML = this.value;">&lt;div class="selfCSS" style="background-image:url(./summer.jpg);"&gt;&lt;/div&gt;</textarea> <div id="demos" style="display:none;"> <div id="demo_lorem"><span class="selfCSS">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div>
133 | <div id="demo_list"><ul><li class="selfCSS">Lorem</li><li class="selfCSS">ipsum</li><li class="selfCSS">dolor</li><li class="selfCSS">sit</li></ul></div>
134 | <div id="demo_div"><div class="selfCSS"></div></div>
135 | <div id="demo_imgs"><div class="selfCSS" style="background-image:url(./summer.jpg);"></div></div>
136 | <div id="demo_imgw"><div class="selfCSS" style="background-image:url(./winter.jpg);"></div></div>
137 | </div>
138 | </div>
139 | <div id="editorCSS"> <pre class="prettyprint lang-css linenums" id="CSSbox"> </pre> <textarea id="CSStextarea" style="display:none;" onchange="CSStextarea();"></textarea> <br /> <div id="sendCSSviaMail" class="button"></div>
140 | <div id="editCSSbutton" onclick="editCSS('on');" class="button">edit CSS</div>
141 | <div id="showCSSbutton" onclick="editCSS();" style="display:none;" class="button">show CSS</div>
142 | </div>
143 | <div id="backgroundslider"><table><tbody><tr><td>Background:</td><td style="padding-left:15px;width:275px;"><input name="bgslider" id="bgslider" class="fd_slider" type="range" max="255" min="0" title="bgslider" value="23"  maxlength="6" /></td></tr></tbody></table>
144 |   </div>
145 | </div>
146 | <div id="dialog"><h1 id="loadingstat" style="text-align: center;">loading .</h1></div>
147 | <div id="dialogs"> <div id="about"><div class="contents"><h1>about <a href="http://selfcss.org/">selfCSS</a></h1><br/> selfCSS is a <a href="http://de.wikipedia.org/wiki/WYSIWYG">WYSIWYG</a> <a href="http://de.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a> Editor. Feel free to contact me via <a href="mailto:contact@selfcss.org">eMail</a> or on <a href="simon.waldherr.eu/t">Twitter</a>. This software will be continually developed. Suggestions and tips are always welcome. <br/><br/>selfCSS works on desktop Browsers just as well as on Tablets (like the iPad). It has automatically detected and loaded the <b id="devicetype"></b> of selfCSS. <br/><br/>Other good resources for Web Devs are: <a href="http://css3generator.com/">CSS3generator</a>, <a href="http://html5please.com/">HTML5please</a>, <a href="http://subtlepatterns.com/">SubtlePatterns</a>, <a href="http://css3please.com/">CSS3please</a>, <a href="http://www.colorzilla.com/gradient-editor/">Colorzilla Gradient Editor</a>, <a href="http://www.css3.me/">css3.me</a>, <a href="http://border-radius.com/">border-radius</a>, <a href="http://selfcss.org/baf/editor/buttons.html">BaF Button Editor</a> and <a href="http://selfcss.org/baf/editor/forms.html">BaF Forms Editor</a>.<br/><br/> This Software uses the following open-source codes: <br/><br/>Style and look of <a href="https://github.com/evanw/webgl-filter/">webgl-filter</a> provided under the terms of <b>MIT license</b> by <a href="http://madebyevan.com/">Evan Wallace</a>. <br/>Input Range Polyfill <a href="https://github.com/freqdec/fd-slider">fd-slider</a> provided under the terms of <b>MIT license</b> by <a href="http://www.frequency-decoder.com/">Brian McAllister</a>. <br/><a href="http://cubiq.org/add-to-home-screen">Add to Home Screen</a> provided under the terms of <b>MIT license</b> by <a href="http://cubiq.org/">Matteo Spinelli</a>. <br/><a href="https://github.com/SimonWaldherr/selfCSS">The rest of this code</a> is provided under the terms of <b>MIT license</b> by me (<a href="http://simon.waldherr.eu/">Simon Waldherr</a>). <br/><br/>More Information about the license on Wikipedia: <a href="http://en.wikipedia.org/wiki/MIT_License">en.wikipedia.org/wiki/MIT_License</a> </div><div id="sm_container"></div><div class="button closedialog" onclick="wpt_dialog();">Close</div>
148 | <?php if(strpos($_SERVER["HTTP_ACCEPT_LANGUAGE"], 'de-DE') !== false) { echo '<div class="button" id="about_btn" onclick="wpt_dialog(\'tmg\');">Impressum</div>'; } ?>
149 | </div>
150 | <div id="examples"><div class="contents"><h1>Examples</h1> <div class="button" onclick="loadCSSexample('imgs');">Image</div>
151 | <div class="button" onclick="loadCSSexample('imgw');">Image 2</div>
152 | <div class="button" onclick="loadCSSexample('text');">Text</div>
153 | <div class="button" onclick="loadCSSexample();">clear</div>
154 | </div><br/><br/> <div class="button closedialog" onclick="wpt_dialog();">Close</div>
155 | </div>
156 | <div id="tmg"><div class="contents"><h1>Impressum</h1> <p>Angaben gem&auml;&szlig; &sect; 5 TMG:<br/></p><br /> <h2>Kontakt:</h2> <table><tr> <td>Name:</td><td>Simon Waldherr</td></tr> <td>Stra&szlig;e:</td><td>Kloepfstrasse 2</td></tr> <td>Wohnort:</td><td>94522 Ettling</td></tr> <td>Telefon:</td><td>0049 151 11309488</td></tr> <tr><td>Telefax:</td><td>0049 32 224178618</td></tr> <tr><td>E-Mail:</td><td>contact@selfcss.org</td> </tr></table> </div>
157 | <div class="button closedialog" onclick="wpt_dialog();">Close</div>
158 | </div>
159 | </div>
160 | <div id="dimmer" onclick="wpt_dialog();"></div>
161 | </div>
162 | <div id="topgrad"></div>
163 | <div id="onSmartphones">selfCSS does not work on Smartphones, please try it on the iPad or on a PC</div>
164 | <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-36066376-1']); _gaq.push(['_setDomainName', 'selfcss.org']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = 'http://statistik.simon.waldherr.eu/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script>
165 | </body></html>
166 | 


--------------------------------------------------------------------------------
/min/style.css:
--------------------------------------------------------------------------------
1 | /* * * * * * * * * *
2 |  *     selfCSS     *
3 |  *  Version 0.9.1  *
4 |  *  License:  MIT  *
5 |  * Simon  Waldherr *
6 |  * * * * * * * * * */
7 | 
8 | 
9 | .fd-form-element-hidden{display:none}.fd-slider{width:100%;height:20px;margin:0 0 10px}.fd-slider-vertical{width:20px;height:100%;margin:0 10px 10px 0}.fd-slider,.fd-slider-vertical{text-align:center;display:block;position:relative;cursor:pointer;text-decoration:none;border:0 none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.oldie .fd-slider,.oldie .fd-slider-vertical{}.fd-slider-wrapper{position:absolute;top:0;left:0;width:100%;height:100%}.oldie .fd-slider-vertical .fd-slider-wrapper{*clear:expression(style.height=parentNode.offsetHeight+'px',style.clear='none',0)}.fd-slider-inner{display:none}.oldie .fd-slider-inner{position:absolute;height:2px;border:1px solid #bbf;background:#bbf;top:4px;bottom:auto;left:4px;right:12px;z-index:2;margin:0;padding:0;overflow:hidden;line-height:4px;_right:auto;_width:expression((this.parentNode.offsetWidth - 12)+"px");filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=3.5)}.oldie .fd-slider-vertical .fd-slider-inner{width:2px;height:auto;bottom:12px;right:auto;_bottom:auto;*clear:expression(style.height=(parentNode.offsetHeight - 8)+'px',style.clear='none',0)}.oldie .fd-slider-focused .fd-slider-inner{display:block}.fd-slider-bar{display:block;position:absolute;top:8px;right:10px;left:10px;z-index:2;height:2px;margin:0;padding:0;overflow:hidden;border:1px solid #bbb;border-bottom:1px solid #aaa;border-right:1px solid #aaa;border:1px solid rgba(187,187,187,.8);border-bottom:1px solid rgba(170,170,170,.8);border-right:1px solid rgba(170,170,170,.8);line-height:4px;background-color:#ddd;background-image:-webkit-gradient(linear,left top,left bottom,from(#ececec),to(#ccc));background-image:-webkit-linear-gradient(top,#ececec,#ccc);background-image:-moz-linear-gradient(top,#ececec,#ccc);background-image:-ms-linear-gradient(top,#ececec,#ccc);background-image:-o-linear-gradient(top,#ececec,#ccc);background-image:linear-gradient(to bottom,#ececec,#ccc);border-radius:2px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box}.oldie .fd-slider-bar{_right:auto;_width:expression((this.parentNode.offsetWidth - 20)+"px");filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#ffececec', endColorstr='#ffcccccc')}.fd-slider-vertical .fd-slider-bar{width:2px;top:10px;right:auto;bottom:10px;left:8px;height:auto;background-color:#ddd;background-image:-webkit-gradient(linear,left top,right top,from(#ececec),to(#ccc));background-image:-webkit-linear-gradient(left,#ececec,#ccc);background-image:-moz-linear-gradient(left,#ececec,#ccc);background-image:-ms-linear-gradient(left,#ececec,#ccc);background-image:-o-linear-gradient(left,#ececec,#ccc);background-image:linear-gradient(to right,#ececec,#ccc)}.oldie .fd-slider-vertical .fd-slider-bar{_bottom:auto;*clear:expression(style.height=(parentNode.offsetHeight - 20)+'px',style.clear='none',0);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffececec', endColorstr='#ffcccccc')}.fd-slider-focused .fd-slider-bar{box-shadow:0 0 6px rgba(10,130,170,.7);-webkit-animation:fd-pulse 2s infinite;-moz-animation:fd-pulse 2s infinite;-o-animation:fd-pulse 2s infinite;animation:fd-pulse 2s infinite}.fd-slider-range{display:block;position:absolute;top:9px;left:11px;z-index:3;height:2px;margin:0;padding:0;overflow:hidden;line-height:2px;background-color:#4cc;background-image:-webkit-gradient(linear,left top,right top,from(#6cc),to(#3cf));background-image:-webkit-linear-gradient(left,#6cc,#3cf);background-image:-moz-linear-gradient(left,#6cc,#3cf);background-image:-ms-linear-gradient(left,#6cc,#3cf);background-image:-o-linear-gradient(left,#6cc,#3cf);background-image:linear-gradient(to right,#6cc,#3cf);border-radius:2px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box}.oldie .fd-slider-range{_left:10px;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#ff66cccc', endColorstr='#ff33ccff')}.fd-slider-vertical .fd-slider-range{height:auto;width:2px;top:auto;right:auto;bottom:11px;left:9px;background-image:-webkit-gradient(linear,left top,left bottom,from(#3cf),to(#6cc));background-image:-webkit-linear-gradient(top,#3cf,#6cc);background-image:-moz-linear-gradient(top,#3cf,#6cc);background-image:-ms-linear-gradient(top,#3cf,#6cc);background-image:-o-linear-gradient(top,#3cf,#6cc);background-image:linear-gradient(to bottom,#3cf,#6cc)}.oldie .fd-slider-vertical .fd-slider-range{filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ff66cccc', endColorstr='#ff33ccff')}.fd-slider-handle{position:absolute;display:block;padding:0;border:0 none;margin:0;z-index:3;top:0;left:0;width:20px;height:20px;outline:0 none;background-color:transparent;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAABQCAYAAAAZQFV3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFFRDg4NEVDNENDODExRTFCMTZDREIyQTZDMjlDNTQ2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFFRDg4NEVENENDODExRTFCMTZDREIyQTZDMjlDNTQ2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUVEODg0RUE0Q0M4MTFFMUIxNkNEQjJBNkMyOUM1NDYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUVEODg0RUI0Q0M4MTFFMUIxNkNEQjJBNkMyOUM1NDYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz68iMNZAAAIQElEQVR42uxYW28b1xGes7tckiIp3iRboi6mbollya5DF4VsVWpaw42ABCmaogWSFH3oDyjQoijQP2AUyFOLFshbn4SqsYFabowmdaW4NhDJiKXaUuwotm6UKJK6kKIkipfl7p7OWR3aa5kiVdQoEjQLDM7u2TPfnss3MztDKKXwPC8BnvP1xQeUSnUSvGBwshl8R18Fq70PZOtx44WSn4F89hYkV6/B26ElWuIAyP4+xBKd70311tXV/bzb7+oLOcDaYiWSTSAkR0EfT9P8UDj1j8Rq/Lfw1ukx1NcOnKExs4tDbT6f75e9tc6+c05q90gEtwWRdAoyblG/k4jeVvcr76qKZePi0K9Q5ZF5pvuXLENj6xv1Pvc5n6DJyQJAQgGdjWZCuFQRwTLQ7P/W6PaLb0YBfoNd+YMAq8BR/TIpFCzhDECEgK5SeGafJAJEA0FqO+L7LgL+rhygEwE7FrMFWMqAVvY4CX6I2hoMHYDNg5es60I8Z9xXNiHd2A25PG3WInFPY9BfLRFiwePQS8AKuJEFHWA3Fl1PVOChArPT96Gp5YRDJMSFoExZ1Z8cisQ/sqOBroRnZgydMoBpGLk8mm9uDemdJzs8kkA8FgZKQMSXbFN1ZEiqQGl26eFS4cbwiKFTxvQyMPbhZPb9weHl6bsL4ZymZzRKXSKBADKbtew5+vDB8vKVwb8kPrh029A5yFIMYgO4UNrh1Nl+6H/9PBwPtUMg6DcGRBcTMDM5CzevjsDU2E3smUXZMRO7pOlh40AJoAR56+KvdxgsyiJvd/ebHinlYPlMZYPoezyTHx/a3p6xZSqHcg5fCn9ITC0xPRcvapJnLEoqASQUOczvRdM7WqQjisqfdTOwtA9M5GLhByHzMSJ/r3EghUuB92kcg5pnKHJlK4qdSxV/Lo5Tuatip5zlkjd9zBhITEtjyg5FUdx/iuVeuJQi35lTxZc2QGpkg2tAjbRJ2r9+6KGjb9bbHsqyLOzbV53RhnAwG+NcMpn0vxPVvz2pWn/sc9i6TlcRyzErCDbkZhY94CdpWhhPZO72yvnBXzeI/8RwkeDcZE5Pk0wHIOfz+ao/r6RP3M67ftLhtXb3OInFKyFXGV9xAnZ0qn0ukL2iPfS3mCri2PWfOhwTVqtV4duhC6Yly/F43H0lBa8QW1WnX6TSlqqTRQx1KHRhT/BeJw6BSl0+58mPdoXXmA4/PAOrOEPjQGKxmHtRD4aaqS5G8wRWC0B1YFvyhDXovigOpgWKftZq/0Ys9sh97Nix9SK9zLQRNzY2XEnP8QDJaSReIFTECIpbR83cZaaqUZ1q6GUF3eJnOmauPmUpu7u7FnDrwpqigygKCMimAcRMazZDjYmGY3R1T6eEpRgWUCgUVM/uZlLx1Lp8shFTCC6YFBHZwRi+hAqQ1yhYt7ZSTIdz8LGlFM1JxeXt1iUjC2FPbbMVuzFQ4SzxJX0SU9g3VJzdFm7u0VQszHT4CWtFSynao+JwOBKdCzMfp1w1L6iB5oATQ4nXQowoZwDrBMEpwSCsy4n4Wmv8848dDd4EN0N9b+57gIZ9NjU1JTvU7YmWR7dv5FcWV8NZVUurGrXjXtYiH1mbVnWajUc2XA/GP2rKbNxmOhxQNdsyAy20tbVtz8/Pz21PTV1zfBLfnm/s6rlzpKVxq7q2mg1yb69v16wtRFoj98fbIXsreOrUHNPhTuKpPWTT1TweT66rq2sdN3oaPvts2zf19xm0ngAeqpOHhjRaRRTNba6zszOMYxNMx+TSaDEEPOW+kFvyxMSEc2VlpZqRXVVVm/F1ScrV19dvNTQ0bJ85cyZdU1OjmNwXmAGfu4M1u3Ld1P5XIWA/MP1CRL0vcZ5y4cKFZuTcq6Io9qEYeYqmaTMot5Cb165fv374PGVgYOAckvdntbW1fdjKaOMicpABUuSoMjs7O5pKpX6PoJXzlJ6enrbq6upfIIG/iYA2FtlYIEMww9lin4h9F6anpy04dq1inoKzeQMBe1HJiksTstnsfgrhDy2Rg8FgP5roj/D5nbJ5isVieRk/aNnZ2SHpdFo/4HePNRa/338e2z+UzVMQsAPBBASrRGzCf0jL5yk4o1LLLHnx2ZfPUxAs7na7fThT/iN7MBiuZK0SD5Wtra37CNiJ3COMKgx034+98YwujSLgg4p5SiQSGXW5XCGkTTueNEF5Csj4qqIA8nB+aWnpmTxlP2AGfy0m7Xb7MN7/AEGDgiAQm80GbAuQJjSXywGOCSO5h8Ph8J1D5ylIif5AIHDe6/W2V1VVGXlKJpNJbG5uzkaj0ZFEIvFVnvJ/67H/p6WqWvAd/TpY7V0gWxt5qSoC+ex9SK7egbdD64cNAYLzvakTdXV13+v2u7pCDrC0WInAS1V0HNOKoXDqbmI1fhXeOj2D+nqlUlU9xpHv99Y6u845qeyRGCcfl6pIv5NYva3u0LuqIm1cHPojqkTLhQAJGlvP1vvcnT5Bk3ipipYoVYkDzf7u0e0X+9FcLvPfuZKAVnBUn0QvIPJSFS1TqhLbjvheQsC/lgO0IWCAl6r0Q5Sq/DylSx8EaPkPS1XAU+GypapNT2PQdchS1ValUlUBZqeXoKmliZeqoEypiirhmYh5/0oB5mDk8r18c2ub3nkyUKFUtVa4MXyPp7UHml4exj6cy74/OL48fTcezmnUVKoCU6lqY/nK4Fjig0ufm4P8QSGAlQbq4dTZbuh//WtwPFQPgaCLl6p2YGYyBjev3oOpsU+xJ8Yib6UQIHAq+FCO8tZeDNsoLNFZ5W1uv+mVCwHFgobNRI0C3zO2TPWrEGBc/xZgAJyadcoLu6zuAAAAAElFTkSuQmCC);background-position:0 0;cursor:W-resize;line-height:20px;font-size:10px;-moz-outline:0 none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.oldie .fd-slider-handle{_background-image:none;outline:expression(hideFocus='true')}.fd-slider-handle:focus{outline:0 none;border:0 none;-moz-user-focus:normal}.fd-slider-handle:focus::-moz-focus-inner{border-color:transparent}.fd-slider-focused .fd-slider-handle,.fd-slider-hover .fd-slider-handle,.fd-slider-active .fd-slider-handle{background-position:0 -20px}.oldie .fd-slider-focused .fd-slider-handle,.oldie .fd-slider-hover .fd-slider-handle,.oldie .fd-slider-active .fd-slider-handle{}.fd-slider-vertical .fd-slider-handle{cursor:N-resize}.fd-slider-no-value .fd-slider-handle{background-position:0 -59px}.oldie .fd-slider-no-value .fd-slider-handle{}body.fd-slider-drag-horizontal,body.fd-slider-drag-horizontal *,body.fd-slider-drag-vertical,body.fd-slider-drag-vertical *{cursor:N-resize!important;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}body.fd-slider-drag-horizontal,body.fd-slider-drag-horizontal *{cursor:W-resize!important}.fd-slider-disabled{opacity:.8;cursor:default}.fd-slider-disabled .fd-slider-handle{cursor:default!important;background-position:0 -40px;opacity:1}.oldie .fd-slider-disabled .fd-slider-handle{}.fd-slider-disabled .fd-slider-bar{cursor:auto!important;border:1px solid #888;border-bottom:1px solid #999;border-right:1px solid #999;border:1px solid rgba(136,136,136,.8);border-bottom:1px solid rgba(153,153,153,.8);border-right:1px solid rgba(153,153,153,.8);background-color:#555;background-image:-webkit-gradient(linear,left top,right top,from(#666),to(#333));background-image:-webkit-linear-gradient(left,#666,#333);background-image:-moz-linear-gradient(left,#666,#333);background-image:-ms-linear-gradient(left,#666,#333);background-image:-o-linear-gradient(left,#666,#333);background-image:linear-gradient(to right,#666,#333)}.fd-slider-vertical .fd-slider-disabled .fd-slider-bar{background-image:-webkit-gradient(linear,left top,right bottom,from(#333),to(#666));background-image:-webkit-linear-gradient(top,#333,#666);background-image:-moz-linear-gradient(top,#333,#666);background-image:-ms-linear-gradient(top,#333,#666);background-image:-o-linear-gradient(top,#333,#666);background-image:linear-gradient(to bottom,#333,#666)}.oldie .fd-slider-disabled .fd-slider-bar{filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ff666666', endColorstr='#ff333333')}.oldie .fd-slider-vertical .fd-slider-disabled .fd-slider-bar{filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#ff666666', endColorstr='#ff333333')}.fd-slider-disabled .fd-slider-range{cursor:auto!important;background-color:#222;background-image:-webkit-gradient(linear,left top,right top,from(#222),to(#000));background-image:-webkit-linear-gradient(left,#222,#000);background-image:-moz-linear-gradient(left,#222,#000);background-image:-ms-linear-gradient(left,#222,#000);background-image:-o-linear-gradient(left,#222,#000);background-image:linear-gradient(to right,#222,#000)}.oldie .fd-slider-disabled .fd-slider-range{filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ff222222', endColorstr='#ff000000')}.fd-slider-vertical .fd-slider-disabled .fd-slider-range{background-image:-webkit-gradient(linear,left top,right bottom,from(#000),to(#222));background-image:-webkit-linear-gradient(top,#000,#222);background-image:-moz-linear-gradient(top,#000,#222);background-image:-ms-linear-gradient(top,#000,#222);background-image:-o-linear-gradient(top,#000,#222);background-image:linear-gradient(to bottom,#000,#222)}.oldie .fd-slider-vertical .fd-slider-disabled .fd-slider-range{filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#ff222222', endColorstr='#ff000000')}@-webkit-keyframes fd-pulse{0%{box-shadow:0 0 3px rgba(100,130,170,.55)}20%{box-shadow:0 0 4px rgba(70,130,170,.6)}40%{box-shadow:0 0 5px rgba(40,130,170,.65)}60%{box-shadow:0 0 6px rgba(10,130,170,.7)}80%{box-shadow:0 0 5px rgba(40,130,170,.65)}100%{box-shadow:0 0 4px rgba(70,130,170,.6)}}@-moz-keyframes fd-pulse{0%{box-shadow:0 0 3px rgba(100,130,170,.55)}20%{box-shadow:0 0 4px rgba(70,130,170,.6)}40%{box-shadow:0 0 5px rgba(40,130,170,.65)}60%{box-shadow:0 0 6px rgba(10,130,170,.7)}80%{box-shadow:0 0 5px rgba(40,130,170,.65)}100%{box-shadow:0 0 4px rgba(70,130,170,.6)}}@-o-keyframes fd-pulse{0%{box-shadow:0 0 3px rgba(100,130,170,.55)}20%{box-shadow:0 0 4px rgba(70,130,170,.6)}40%{box-shadow:0 0 5px rgba(40,130,170,.65)}60%{box-shadow:0 0 6px rgba(10,130,170,.7)}80%{box-shadow:0 0 5px rgba(40,130,170,.65)}100%{box-shadow:0 0 4px rgba(70,130,170,.6)}}@keyframes fd-pulse{0%{box-shadow:0 0 3px rgba(100,130,170,.55)}20%{box-shadow:0 0 4px rgba(70,130,170,.6)}40%{box-shadow:0 0 5px rgba(40,130,170,.65)}60%{box-shadow:0 0 6px rgba(10,130,170,.7)}80%{box-shadow:0 0 5px rgba(40,130,170,.65)}100%{box-shadow:0 0 4px rgba(70,130,170,.6)}}#addToHomeScreen{z-index:9999;-webkit-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-touch-callout:none;touch-callout:none;width:240px;font-size:15px;padding:12px 14px;text-align:left;font-family:helvetica;background-image:-webkit-gradient(linear,0 0,0 100%,color-stop(0,#fff),color-stop(0.02,#eee),color-stop(0.98,#ccc),color-stop(1,#a3a3a3));border:1px solid #505050;-webkit-border-radius:8px;-webkit-background-clip:padding-box;color:#333;text-shadow:0 1px 0 rgba(255,255,255,.75);line-height:130%;-webkit-box-shadow:0 0 4px rgba(0,0,0,.5)}#addToHomeScreen.addToHomeIOS7{background:#f2f2f2!important;-webkit-border-radius:1px!important;border:1px solid #ccc;-webkit-box-shadow:0 0 4px rgba(0,0,0,.2)}#addToHomeScreen.addToHomeIpad{width:268px;font-size:18px;padding:14px}#addToHomeScreen.addToHomeWide{width:296px}#addToHomeScreen.addToHomeIpad.addToHomeWide{width:320px;font-size:18px;padding:14px}#addToHomeScreen .addToHomeArrow{position:absolute;background-image:-webkit-gradient(linear,0 0,100% 100%,color-stop(0,rgba(204,204,204,0)),color-stop(0.4,rgba(204,204,204,0)),color-stop(0.4,#ccc));border-width:0 1px 1px 0;border-style:solid;border-color:#505050;width:16px;height:16px;-webkit-transform:rotateZ(45deg);bottom:-9px;left:50%;margin-left:-8px;-webkit-box-shadow:inset -1px -1px 0 #a9a9a9;-webkit-border-bottom-right-radius:2px}#addToHomeScreen.addToHomeIOS7 .addToHomeArrow{background-image:-webkit-gradient(linear,0 0,100% 100%,color-stop(0,rgba(204,204,204,0)),color-stop(0.4,rgba(204,204,204,0)),color-stop(0.4,#f2f2f2))!important;-webkit-box-shadow:inset -1px -1px 0 #fff!important;border-color:#ccc!important}#addToHomeScreen.addToHomeIpad .addToHomeArrow{-webkit-transform:rotateZ(-135deg);background-image:-webkit-gradient(linear,0 0,100% 100%,color-stop(0,rgba(238,238,238,0)),color-stop(0.4,rgba(238,238,238,0)),color-stop(0.4,#eee));-webkit-box-shadow:inset -1px -1px 0 #fff;top:-9px;bottom:auto;left:50%}#addToHomeScreen .addToHomeClose{-webkit-box-sizing:border-box;position:absolute;right:4px;top:4px;width:18px;height:18px;line-height:14px;text-align:center;text-indent:1px;-webkit-border-radius:9px;background:rgba(0,0,0,.12);color:#888;-webkit-box-shadow:0 1px 0 #fff;font-size:16px}#addToHomeScreen.addToHomeIOS7 .addToHomeClose{line-height:12px;padding-right:1px;background:transparent;border:1px solid #888;-webkit-box-shadow:none}#addToHomeScreen .addToHomePlus{font-weight:700;font-size:1.3em}#addToHomeScreen .addToHomeShare{display:inline-block;width:18px;height:15px;background-repeat:no-repeat;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAeCAQAAADu6HTYAAADPElEQVR4Xq3TX2gcRRzA8e/M7mVv2+TSNpc/TZtrY6jUGqgaSAmEChKLrYK0YH0RFC2CSCkEfCghiKU04J8qNigq6os+iQV98MHWFwVBrQQRWs21lBw5cw3NNb1/udu72RGG5Y77IzXW77D7sAwf5scyYoL6BGXSDKFZwaGpLvIUaeoCkvX1MmsM0Ny6oRSQYOLuIS+YZOpfQdqslpUxcZrzTVAz4qPwW2O3CeIwC/RSzeY6Ow1QhUrkr+YOWfEKDkEP8Rij7CHKJmrFSDHBdwGEE5wiGChPN+PnT8VdRtEIl1d4gRj/1EVe5ZSBKGh8iqQpo/Fo5+3C/gz0MYg4zgwbqday1/Q4B8BGQ45d/Hi54lakCrU5obOcidJpu1+Lg9whjabyaOYLnrIBFFaRD+xe2ybMDWY66GmP/WA9cGfGp0CWhy0wkMN8inepFiH2rV1j0NQSNQbFLRQnS8/8YSDBBpadfv4CYDub2fmeHDNAsL1MBWUel0iA+Xik6eHcyvD3vAMSU1TGuA/YRS+dD7ovCQN43GKRFCU20Kd3V/avDVVyAZ5niTEuLA5/zBGWg9EEEhfJKN200Tat8CmRAQb9+wv7soPlHt2tQorsz1uPbr0HTY4sJwrH47zJZwABBAKLMBoQXepwgTwdHCo+fXMkQ4lrxEmQ5AaXipPqDY9V2vn09tgvTPI71EEGYxM+/uMJLJ4svpgaWGKOi/xKgmqLSUGSUd5f2vIVJ/CgBaTIUsZ7ZBsn0+NzfMOXLFCXQyTcybN6ep5ZZgUOHn7jpfUpsZshdugPGf+E5zjbyHTSRyQ8xfRPPM/s63RHeuknSoT22mjmmnAOIMkUZ6D1xSfPPAfd1WFKM3sO2CMaHx8M1NjnXKHaAGGkOW0C02WeYHUz4qMtx+w5gUDS8NckYe5lHsMYwCZEPyEEmjLDZFmAS7CDviMdxyTkMNVBKEmYLvbiQQBIBBbCQG04bGQvFWz6CfsCQLWCigILFwcfkGYBiOpbYuOizTAyYyDdCtrGaRG1LCkIgMYEFhI0WqQZoSlbGRyHKe4qOx7iv2bVQW9dp4dlM/x6kmwnWQcd/Q3FCqwTEiT5s+6D5v/pb0SSHyg7uhMWAAAAAElFTkSuQmCC);background-size:18px 15px;text-indent:-9999em;overflow:hidden}#addToHomeScreen.addToHomeIOS7 .addToHomeShare{width:11px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAA8CAYAAAAQTCjdAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAASCQAAEgkB80sG3AAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAKjSURBVGiB7dpPiFVVHMDxz7m9NCtMyI2bEJEC25WrEkzHUXCRraIwdNE8ZxfYIlcis1ZEbGEzT1QCF4XgH1CyWhUoJKIWNRGEiCNKmkSiYTzfcfGuOokx77x3ZlS8382959zfn+/invvn3RdijHIRBrwkOINCYXEcdjpb7VyiYdBsLScwt5y6IloYdzqXo36Ro0gY9IKWo+5JwmzBt2HQnBw9ehYNazyn5TBee8Dh+Vq+CWu92GufnkTDR6ab7gDeBNHouMM/l9tXTXM0fGBmL726Fg1Dam74EsvKqR8VNowL2Yzj5f7rnnE4DHq2235diYYhhTGfC94up35T0y+6di/ITU0rKVd+sEi0P7xr2pSJOu8zvF+OzqEv7vDH/WFxt7/cshy/ticsN8sXYUht0kXDOlsF9XJ4UaEvNoz9X3zc5bKaZThbyr5jzJ4wlNY7KTgM+ES0vhz+KeiPw36fKC/ucAF9uFBOrTZm26SJCtaV27+xIo7cXdkTEhvOoh+XyxprU1qnim7CQdGK2HAyKRexYVShT3RItDElN+mkjiP2Ym+S3f01hv2EVal5WW6hU0ElmptaqJuBpXg6MbeFH2LDpU6CQ93zWIKnEvs0cayGU3glMfkOo1jQYewZzOuyz7FC95Jwo5OgUFfgeg993hh/eTqCTxOSm/iuk8DY0Ap1b2GhtHXxsfZN4j/X0fOx4auEIknEhqv4OiUn1L13Z/+xWfWVaG4q0dxUormpRHNTieamEs1NJZqbJ1Q0jHvdiJo5S2cVjSNOCHZhn3/SnuYnIvl3yomIIz7MXZMn9hydRCrR3FSiualEc1OJ5qYSzU0lmptKNDePjWgwcPePT7/g+4cp8wCW4GXaryK3tL+mLdD5x62ppllgu7bso8q/2HIbzGWdNmWnSJwAAAAASUVORK5CYII=);background-size:11px 15px}#addToHomeScreen .addToHomeTouchIcon{display:block;float:left;-webkit-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.5),inset 0 0 2px rgba(255,255,255,.9);box-shadow:0 1px 3px rgba(0,0,0,.5),inset 0 0 2px rgba(255,255,255,.9);background-repeat:no-repeat;width:57px;height:57px;-webkit-background-size:57px 57px;background-size:57px 57px;margin:0 12px 0 0;border:1px solid #333;-webkit-background-clip:padding-box;background-clip:padding-box}*{cursor:default}a{cursor:pointer}table{border-collapse:collapse}td{padding:0;vertical-align:top}body{font:12px Tahoma,sans-serif}#toolbar,#sidebar,#fade,#dialog,#dimmer,#topgrad{-moz-user-select:none;-webkit-user-select:none}.ui-slider-handle{cursor:default;position:absolute;width:12px;height:12px;margin:-6px;border-radius:6px;-moz-border-radius:7px;-webkit-border-radius:7px}.ui-state-focus{outline:0}.button,.segment{cursor:pointer!important;display:inline-block;padding:1px 15px;border-radius:4px;vertical-align:top}.button:active{padding:2px 15px 0}.button.disabled{padding:1px 15px}.select_textfield{display:none;visibility:hidden}#topbar{position:relative;top:20px;width:100%;height:44px;margin:20px auto 5px;border-radius:6px}#topbar img{position:relative;z-index:1;height:75px;display:block;float:left;margin:5px}#topbar .item{}#toolbar{z-index:2;position:absolute;left:0;top:0;right:0;height:44px;border-radius:6px 6px 0 0}#toolbar .button{float:left;line-height:27px;margin:7px 0 0 7px}#sidebar{z-index:1;position:absolute;text-align:left;left:0;top:45px;bottom:0;width:300px;padding:0;-webkit-overflow-scrolling:touch;overflow-x:hidden;overflow-y:auto;border-radius:0 0 0 8px}#sidebar .header{padding:15px 0 5px 15px}#sidebar .item{position:relative;margin:0;padding:0 40px;height:auto;overflow-y:hidden;transition:height .4s;-moz-transition:height .4s;-webkit-transition:height .4s;-o-transition:height .4s}#sidebar .item .title{height:25px;font-weight:700;line-height:25px}#sidebar .item .wpt_contents{padding:0 0 20px}#sidebar .item .wpt_contents table{padding:0 0 5px;width:100%}#sidebar .item .wpt_contents td{width:0;white-space:nowrap;padding-top:5px}#sidebar .item .wpt_contents td+td{width:100%;padding-left:15px}#sidebar .item .wpt_contents .button{line-height:24px;margin:15px 0 0}#sidebar .item .wpt_contents .reset{text-decoration:underline;display:inline-block;line-height:24px;margin:15px 0 0 15px;cursor:pointer}#sidebar .item .wpt_contents .slider{position:relative;margin:8px 0 0}#sidebar .item .wpt_contents .segmented{margin:6px;text-align:center}#sidebar .item .wpt_contents .segment{line-height:25px;display:inline-block;padding:1px;vertical-align:top;-webkit-border-radius:0;border-radius:0}#sidebar .item .wpt_contents .segment.full{min-width:166px;text-align:center}#sidebar .item .wpt_contents .segment.selected{padding:1px}#sidebar .item .wpt_contents .segment:first-child{-webkit-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px}#sidebar .item .wpt_contents .segment:last-child{-webkit-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0}#sidebar .item .wpt_contents .full .segment:first-child{-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}#sidebar .item .wpt_contents .full .segment:last-child{-webkit-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}#sidebar .item .wpt_contents .curves{width:200px;height:200px;margin:10px 0}#sidebar .item.active{margin-bottom:5px}#sidebar .item.active .title{line-height:27px;margin-bottom:15px}#sidebar .item.active .wpt_contents .slider{margin:8px 0 0}#sidebar input{display:none}#sidebar table{position:relative;top:10px}#sidebar::-webkit-scrollbar{width:8px}#sidebar::-webkit-scrollbar-track{border-radius:0}#sidebar::-webkit-scrollbar-thumb{-webkit-border-radius:2px;border-radius:2px;padding:5px}#sidebar #sidebarend{height:20px}#dialogs{display:none}#dialog{z-index:4;position:absolute;left:50%;top:-600px;width:650px;margin-left:-325px;padding:20px;border-radius:3px;transition:all .4s;-moz-transition:all .4s;-webkit-transition:all .4s;-o-transition:all .4s}#dialog .contents{padding-bottom:20px;line-height:16px}#dialog .contents .images{padding:15px 0 8px}#dialog .contents .credits,#dialog .contents .credits a{font-style:italic;font-size:10px}#dialog .contents img{margin:0 7px 7px 0}#dialog .button{position:relative;line-height:24px;margin-right:7px;float:right}#dialog .contents .button{padding:20px;float:left}#dialog input.upload{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0}#dimmer{position:fixed;z-index:-1;top:0;left:0;height:100%;width:100%;opacity:0;transition:opacity .8s;-moz-transition:opacity .8s;-webkit-transition:opacity .8s;-o-transition:opacity .8s}#loading{text-align:center;padding-top:100px;position:absolute;left:0;top:0;right:0;bottom:0;z-index:5;line-height:16px}#loading .sadface{font-size:100px;line-height:100px;padding-bottom:40px}#box{height:740px;width:90%;margin:0 auto 100px;position:relative;top:4em;border-radius:6px}#topgrad{position:absolute;top:0;left:0;right:0;width:100%;height:180px;z-index:-1}#toolbar .segmented{position:absolute;right:6px;margin:7px 0 0}#toolbar .segment{line-height:27px;display:inline-block;padding:1px 15px;vertical-align:top;-webkit-border-radius:0;border-radius:0}#toolbar .segment:active{padding:2px 15px 0}#toolbar .segment.selected{padding:2px 15px 0}#toolbar .segment:first-child{-webkit-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px}#toolbar .segment:last-child{-webkit-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0}.segtwo>.segment{width:82px;text-align:center;padding:0}.segthree>.segment{width:54px;text-align:center;padding:1px}.segfour>.segment{width:40px;text-align:center;padding:0}#editorHTML,#editorHTML textarea,#editorCSS,#editorCSS textarea{height:500px;width:100%}#editorCSS .button,#editorHTML .button{padding:15px;text-align:center;margin:auto;display:inline-block}#editorCSS .button a,#editorHTML .button a{padding:20px;color:#fff;text-decoration:none}#editor{position:absolute;top:45px;left:300px;bottom:0;right:0;margin:0;padding:25px;overflow:auto;display:inline-block;-moz-user-select:auto;-webkit-user-select:auto}#editorCSS,#editorHTML{display:none}#CSSbox{background:#ccc;overflow:auto;height:auto;text-shadow:none;margin:0;-moz-user-select:auto;-webkit-user-select:auto}#backgroundslider{position:absolute;bottom:0;right:0;width:360px;height:30px;padding:15px 20px 0;background:#3B3937;border-radius:10px 0 4px}#backgroundslider input{display:none}#toolbar #foldin_btn{margin-left:50px}#examples_btn{position:absolute;right:195px}#dialog{top:200px;display:block}#dialog iframe{border:0}#dimmer{z-index:3;opacity:1}#onSmartphones{display:none}.fd-slider-bar{display:block;position:absolute;top:8px;right:0;left:10px;z-index:2;height:0;margin:0;padding:0;overflow:hidden;border:0;background-clip:padding-box}.fd-slider-bar,.fd-slider-range{margin-left:-10px}.fd-slider-range{opacity:.2}.fd-slider-handle,.fd-slider-handle:active,.fd-slider-handle:hover{cursor:pointer;position:absolute;width:12px;height:12px;top:4px;padding-left:10px;border-radius:6px;-moz-border-radius:7px;-webkit-border-radius:7px}.fd-slider-drag-horizontal,.fd-slider-vertical .fd-slider-handle,body.fd-slider-drag-horizontal,body.fd-slider-drag-horizontal *,body.fd-slider-drag-vertical,body.fd-slider-drag-vertical *{cursor:pointer!important}@media only screen and (min-device-width :768px) and (max-device-width :1024px){#box{height:auto;width:auto;margin:0;position:absolute;top:0;left:0;right:0;bottom:0;border-radius:0}#topbar,#topgrad{display:none;visibility:hidden}#editorHTML .button{padding:10px;text-align:center;margin:5px;display:block}#editorHTML textarea{height:490px}#fullscreen_btn{display:none}#examples_btn{right:205px}#toolbar .button,#toolbar .segment{line-height:35px}#toolbar{height:53px}#sidebar,#editor{top:53px}#sidebar .item .title{height:35px;font-weight:700;line-height:35px;font-size:16px}#sidebar .item.active .title{line-height:35px;margin-bottom:15px}#sidebar tr{height:50px}.fd-slider-handle,.fd-slider-handle:active,.fd-slider-handle:hover{height:23px;top:-2px;padding-left:10px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px}#sidebar .item .wpt_contents .segment{line-height:32px}}@media only screen and (min-device-width :320px) and (max-device-width :480px){#box{display:none}#onSmartphones{display:block;position:absolute;top:200px;bottom:10px;left:30px;right:30px;color:#000;font-size:21px;text-align:center}}:-webkit-full-screen #box{height:auto;width:auto;margin:0;position:absolute;top:0;left:0;right:0;bottom:0;border-radius:0}:-webkit-full-screen #topbar,:-webkit-full-screen #topgrad,:-webkit-full-screen #fullscreen_btn{display:none;visibility:hidden}:-moz-full-screen #box{height:auto;width:auto;margin:0;position:absolute;top:0;left:0;right:0;bottom:0;border-radius:0}:-moz-full-screen #topbar,:-moz-full-screen #topgrad,:-moz-full-screen #fullscreen_btn{display:none;visibility:hidden}a{color:#FC0}body{background:#FDFDFD;color:#fff}.ui-slider-handle{background:-moz-linear-gradient(#4B4947,#32302D);background:-webkit-gradient(linear,left top,left bottom,from(#4B4947),to(#32302D));box-shadow:inset 0 1px 0 #5B5957,0 -1px 0 black,0 1px 0 black,-1px 0 0 black,1px 0 0 black,0 1px 1px #111;-moz-box-shadow:inset 0 1px 0 #5B5957,0 -1px 0 black,0 1px 0 black,-1px 0 0 black,1px 0 0 black,0 1px 1px #111;-webkit-box-shadow:inset 0 1px 0 #5B5957,0 -1px 0 black,0 1px 0 black,-1px 0 0 black,1px 0 0 black,0 1px 1px #111}.ui-state-active{background:-moz-linear-gradient(#6B6967,#42403D);background:-webkit-gradient(linear,left top,left bottom,from(#6B6967),to(#42403D))}.button,.segment{background:-moz-linear-gradient(#4B4947,#32302D);background:-webkit-gradient(linear,left top,left bottom,from(#4B4947),to(#32302D));box-shadow:inset 0 1px 0 #5B5957,0 -1px 0 black,0 1px 0 black,-1px 0 0 black,1px 0 0 black,0 1px 1px #111;-moz-box-shadow:inset 0 1px 0 #5B5957,0 -1px 0 black,0 1px 0 black,-1px 0 0 black,1px 0 0 black,0 1px 1px #111;-webkit-box-shadow:inset 0 1px 0 #5B5957,0 -1px 0 black,0 1px 0 black,-1px 0 0 black,1px 0 0 black,0 1px 1px #111}.button:active{background:#272727;box-shadow:inset 0 0 10px #070707,inset 0 0 5px #070707,0 1px 0 #4B4947;-moz-box-shadow:inset 0 0 10px #070707,inset 0 0 5px #070707,0 1px 0 #4B4947;-webkit-box-shadow:inset 0 0 10px #070707,inset 0 0 5px #070707,0 1px 0 #4B4947}.button.disabled{color:#111;text-shadow:0 1px 0 #4B4947;background:-moz-linear-gradient(#3B3937,#2B2927);background:-webkit-gradient(linear,left top,left bottom,from(#3B3937),to(#2B2927));box-shadow:inset 0 1px 0 #4B4947,0 -1px 0 #111,0 1px 0 #111,-1px 0 0 #111,1px 0 0 #111,0 1px 1px #111;-moz-box-shadow:inset 0 1px 0 #4B4947,0 -1px 0 #111,0 1px 0 #111,-1px 0 0 #111,1px 0 0 #111,0 1px 1px #111;-webkit-box-shadow:inset 0 1px 0 #4B4947,0 -1px 0 #111,0 1px 0 #111,-1px 0 0 #111,1px 0 0 #111,0 1px 1px #111}#toolbar{background:-moz-linear-gradient(#3B3937,#2B2927);background:-webkit-gradient(linear,left top,left bottom,from(#3B3937),to(#2B2927));box-shadow:0 1px 0 #000;-moz-box-shadow:0 1px 0 #000;-webkit-box-shadow:0 1px 0 #000}#sidebar{background:#3B3937;box-shadow:1px 0 0 #000;-moz-box-shadow:1px 0 0 #000;-webkit-box-shadow:1px 0 0 #000}#sidebar .header{color:#777}#sidebar .item .wpt_contents table{color:#777}#sidebar .item .wpt_contents .reset{color:#777}#sidebar .item .wpt_contents .slider{border-top:1px solid #222;border-bottom:1px solid #555}#sidebar .item .wpt_contents .segment{color:#fff;background:-moz-linear-gradient(#4B4947,#32302D);background:-webkit-gradient(linear,left top,left bottom,from(#4B4947),to(#32302D));box-shadow:inset 0 1px 0 #5B5957,0 -1px 0 black,0 1px 0 black,-1px 0 0 black,1px 0 0 black,0 1px 1px #111;-moz-box-shadow:inset 0 1px 0 #5B5957,0 -1px 0 black,0 1px 0 black,-1px 0 0 black,1px 0 0 black,0 1px 1px #111;-webkit-box-shadow:inset 0 1px 0 #5B5957,0 -1px 0 black,0 1px 0 black,-1px 0 0 black,1px 0 0 black,0 1px 1px #111}#sidebar .item .wpt_contents .segment.selected,#toolbar .segment.selected{background:#1566b1;background:-moz-linear-gradient(top,rgba(21,102,177,1) 0,rgba(17,80,151,1) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(21,102,177,1)),color-stop(100%,rgba(17,80,151,1)));background:-webkit-linear-gradient(top,rgba(21,102,177,1) 0,rgba(17,80,151,1) 100%);background:-o-linear-gradient(top,rgba(21,102,177,1) 0,rgba(17,80,151,1) 100%);background:-ms-linear-gradient(top,rgba(21,102,177,1) 0,rgba(17,80,151,1) 100%);background:linear-gradient(to bottom,rgba(21,102,177,1) 0,rgba(17,80,151,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1566b1', endColorstr='#115097', GradientType=0);box-shadow:inset 0 0 10px -2px #070707,inset 0 0 5px #070707,0 1px 0 #4B4947;-moz-box-shadow:inset 0 0 10px -2px #070707,inset 0 0 5px #070707,0 1px 0 #4B4947;-webkit-box-shadow:inset 0 0 10px -2px #070707,inset 0 0 5px #070707,0 1px 0 #4B4947}#sidebar .item .wpt_contents .curves{border:1px solid #4B4947}#sidebar .item.active{background:#272727;box-shadow:inset 0 0 6px #070707,inset 0 0 3px #070707,0 1px 0 #4B4947;-moz-box-shadow:inset 0 0 6px #070707,inset 0 0 3px #070707,0 1px 0 #4B4947;-webkit-box-shadow:inset 0 0 6px #070707,inset 0 0 3px #070707,0 1px 0 #4B4947}#sidebar .item.active .wpt_contents .slider{border-top:1px solid #000;border-bottom:1px solid #333}#sidebar::-webkit-scrollbar-track{background:#1B1917;-webkit-box-shadow:inset 0 0 6px #1B1917}#sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.8);-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.5)}#sidebar::-webkit-scrollbar-thumb:window-inactive{background:rgba(244,244,244,.4)}#dialog{background:#32302D;border:1px solid #000;-moz-box-shadow:0 0 50px black,0 0 20px rgba(0,0,0,.5);-webkit-box-shadow:0 0 50px black,0 0 20px rgba(0,0,0,.5)}#dialog .contents .credits,#dialog .contents .credits a{color:#777}#dialog .contents img{border:1px solid #000;-moz-box-shadow:0 1px 2px rgba(0,0,0,.5);-webkit-box-shadow:0 1px 2px rgba(0,0,0,.5)}#dimmer{background:rgba(55,55,55,.7)}#loading{background:#2B2927}#loading .sadface{font-size:100px;line-height:100px;padding-bottom:40px}#box{background:#1B1917;-webkit-box-shadow:0 0 25px 5px rgba(55,55,55,.5);box-shadow:0 0 25px 5px rgba(55,55,55,.5);border:1px solid #222}#topgrad{background:#adadad;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FkYWRhZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZGZkZmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background:-moz-linear-gradient(top,#adadad 0,#fdfdfd 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#adadad),color-stop(100%,#fdfdfd));background:-webkit-linear-gradient(top,#adadad 0,#fdfdfd 100%);background:-o-linear-gradient(top,#adadad 0,#fdfdfd 100%);background:-ms-linear-gradient(top,#adadad 0,#fdfdfd 100%);background:linear-gradient(to bottom,#adadad 0,#fdfdfd 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#adadad', endColorstr='#fdfdfd', GradientType=0)}#toolbar .segment{color:#fff;background:-moz-linear-gradient(#4B4947,#32302D);background:-webkit-gradient(linear,left top,left bottom,from(#4B4947),to(#32302D));box-shadow:inset 0 1px 0 #5B5957,0 -1px 0 black,0 1px 0 black,-1px 0 0 black,1px 0 0 black,0 1px 1px #111;-moz-box-shadow:inset 0 1px 0 #5B5957,0 -1px 0 black,0 1px 0 black,-1px 0 0 black,1px 0 0 black,0 1px 1px #111;-webkit-box-shadow:inset 0 1px 0 #5B5957,0 -1px 0 black,0 1px 0 black,-1px 0 0 black,1px 0 0 black,0 1px 1px #111}#toolbar .segment:active{background:#272727;box-shadow:inset 0 0 10px #070707,inset 0 0 5px #070707,0 1px 0 #4B4947;-moz-box-shadow:inset 0 0 10px #070707,inset 0 0 5px #070707,0 1px 0 #4B4947;-webkit-box-shadow:inset 0 0 10px #070707,inset 0 0 5px #070707,0 1px 0 #4B4947}.fd-slider-bar{border-top:1px solid #000;border-bottom:1px solid #333;color:#777}.fd-slider-handle,.fd-slider-handle:active,.fd-slider-handle:hover{background:-moz-linear-gradient(#4B4947,#32302D);background:-webkit-gradient(linear,left top,left bottom,from(#4B4947),to(#32302D));box-shadow:inset 0 1px 0 #5B5957,0 -1px 0 black,0 1px 0 black,-1px 0 0 black,1px 0 0 black,0 1px 1px #111;-moz-box-shadow:inset 0 1px 0 #5B5957,0 -1px 0 black,0 1px 0 black,-1px 0 0 black,1px 0 0 black,0 1px 1px #111;-webkit-box-shadow:inset 0 1px 0 #5B5957,0 -1px 0 black,0 1px 0 black,-1px 0 0 black,1px 0 0 black,0 1px 1px #111}.fd-slider-range{background:#1566b1}.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:700}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:700}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:700}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html manifest="cache.manifest">
  3 |   <head>
  4 |     <title>selfCSS - WYSIWYG CSS Editor</title>
  5 |     <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
  6 |     <meta name="viewport" content="width=device-width, initial-scale = 0.9, user-scalable = no">
  7 |     <meta name="apple-mobile-web-app-capable" content="yes" />
  8 |     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  9 |     <link href="https://plus.google.com/112354811285966128277?rel=author" rel="author" type="text/plain"/>
 10 |     <meta name="description" content="selfCSS is a WYSIWYG CSS3 Editor">
 11 |     <meta name="author" content="Simon Waldherr">
 12 |     <meta name="keywords" content="CSS, WYSIWYG, HTML, JS, Editor, Generator, Position, Style, Background, Border, Margin, Padding, Shadow, Filter">
 13 |     
 14 |     <script src="script.js" type="text/javascript"></script>
 15 |     <script src="./submodules/add2home/src/add2home.js" type="text/javascript"></script>
 16 |     <script src="fd-slider.js" type="text/javascript"></script>
 17 |     <script src="prettify.js" type="text/javascript"></script>
 18 |     <script src="./submodules/pulltorefresh/ptr.js" type="text/javascript"></script>
 19 |     <script src="online.js" type="text/javascript"></script>
 20 |     
 21 |     <link rel="stylesheet" type="text/css" media="screen, projection" href="submodules/fd-slider/css/fd-slider.css">
 22 |     <link rel="stylesheet" type="text/css" media="screen, projection" href="add2home.css">
 23 |     <link href="style.css" rel="stylesheet" type="text/css"/>
 24 |     <link href="dark.css" rel="stylesheet" type="text/css"/>
 25 |     <link href="prettify.css" type="text/css" rel="stylesheet" />
 26 |     
 27 |     <link rel="apple-touch-icon" href="/apple-touch-icon-precomposed.png"/>
 28 |     <link href="favicon.ico" rel="icon" type="image/x-icon"/>
 29 |     <style id="special_style">
 30 |       
 31 |     </style>
 32 |     <style id="editable_style">
 33 |     
 34 |     </style>
 35 |   </head>
 36 |   <body onload="wpt_init();">
 37 |     <div id="topbar">
 38 |       <div class="item"><a href="./"><img id="logo" src="./logo.png" alt="selfCSS Logo"/></a></div>
 39 |     </div>
 40 |     <div id="box">
 41 |       <div id="toolbar">
 42 |         <div class="button" id="about_btn" onclick="wpt_dialog('about');">About</div>
 43 |         <div class="button" id="fullscreen_btn" onclick="wpt_fullscreen();">Fullscreen</div>
 44 |         <div class="button" id="foldin_btn" onclick="wpt_collapse_all();">collapse all</div>
 45 |         <div class="button" id="foldout_btn" onclick="wpt_expand_all();">expand all</div>
 46 |         <div class="button" id="foldout_btn" onclick="wpt_expand_enabled();">expand enabled</div>
 47 |         <div class="button" id="examples_btn" onclick="wpt_dialog('examples');">Examples</div>
 48 |         <div id="viewmode" class="segmented"><div class="segment" onclick="editor_show('CSS');">CSS</div><div class="segment" onclick="editor_show('HTML');">HTML</div><div class="segment selected" onclick="editor_show('View');">Preview</div></div>
 49 |       </div>
 50 |       <div id="sidebar" class="ptr_scrollable">
 51 |         <div class="ptr_wrap">
 52 |           <div class="header">Main</div>
 53 |           <div class="item"><div class="title" id="Main-Position">Position</div>
 54 |             <div class="wpt_contents">
 55 |               <div id="posonoff" class="segmented segtwo"><div class="off segment selected">off</div><div class="on segment">on</div></div>
 56 |               <div id="postype1" class="segmented segthree"><div class="relative segment selected">relative</div><div class="absolute segment">absolute</div><div class="fixed segment">fixed</div></div>
 57 |               <div id="postype2" class="segmented segthree"><div class="px segment selected">px</div><div class="em segment">em</div><div class="percent segment">%</div></div>
 58 |               <table>
 59 |                 <tbody>
 60 |                   <tr>
 61 |                     <td>Top:</td>
 62 |                     <td>
 63 |                       <input name="postop" id="postop" class="fd_slider" type="range" max="100" min="-100" title="postop" value="0"  maxlength="6" />
 64 |                     </td>
 65 |                   </tr>
 66 |                   <tr>
 67 |                     <td>Left:</td>
 68 |                     <td>
 69 |                       <input name="posleft" id="posleft" class="fd_slider" type="range" max="100" min="-100" title="posleft" value="0"  maxlength="6" />
 70 |                     </td>
 71 |                   </tr>
 72 |                   <tr>
 73 |                     <td>Right:</td>
 74 |                     <td>
 75 |                       <input name="posright" id="posright" class="fd_slider" type="range" max="100" min="-100" title="posright" value="0"  maxlength="6" />
 76 |                     </td>
 77 |                   </tr>
 78 |                   <tr>
 79 |                     <td>Bottom:</td>
 80 |                     <td>
 81 |                       <input name="posbottom" id="posbottom" class="fd_slider" type="range" max="100" min="-100" title="posbottom" value="0"  maxlength="6" />
 82 |                     </td>
 83 |                   </tr>
 84 |                 </tbody>
 85 |               </table>
 86 |             </div>
 87 |           </div>
 88 |           <div class="item"><div class="title" id="Main-Size">Size</div>
 89 |             <div class="wpt_contents">
 90 |               <div id="sizeonoff" class="segmented segtwo"><div class="off segment">off</div><div class="on segment selected">on</div></div>
 91 |               <div id="sizetype" class="segmented segthree"><div class="px segment selected">px</div><div class="em segment">em</div><div class="percent segment">%</div></div>
 92 |               <table>
 93 |                 <tbody>
 94 |                   <tr>
 95 |                     <td>Width:</td>
 96 |                     <td>
 97 |                       <input name="width" id="width" class="fd_slider" type="range" max="800" min="0" title="width" value="440"  maxlength="6" />
 98 |                     </td>
 99 |                   </tr>
100 |                   <tr>
101 |                     <td>Height:</td>
102 |                     <td>
103 |                       <input name="height" id="height" class="fd_slider" type="range" max="800" min="0" title="height" value="535"  maxlength="6" />
104 |                     </td>
105 |                   </tr>
106 |                 </tbody>
107 |               </table>
108 |             </div>
109 |           </div>
110 |           <div class="item"><div class="title" id="Main-Padding">Padding</div>
111 |             <div class="wpt_contents">
112 |               <div id="padonoff" class="segmented segtwo"><div class="off segment">off</div><div class="on segment selected">on</div></div>
113 |               <div id="paddd" class="segmented segtwo"><div class="separate segment selected">separate</div><div class="common segment">common</div></div>
114 |               <table>
115 |                 <tbody>
116 |                   <tr>
117 |                     <td>Top:</td>
118 |                     <td>
119 |                       <input name="padtop" id="padtop" class="fd_slider" type="range" max="100" min="0" title="padtop" value="15"  maxlength="6" />
120 |                     </td>
121 |                   </tr>
122 |                   <tr>
123 |                     <td>Left:</td>
124 |                     <td>
125 |                       <input name="padleft" id="padleft" class="fd_slider" type="range" max="100" min="0" title="padleft" value="15"  maxlength="6" />
126 |                     </td>
127 |                   </tr>
128 |                   <tr>
129 |                     <td>Right:</td>
130 |                     <td>
131 |                       <input name="padright" id="padright" class="fd_slider" type="range" max="100" min="0" title="padright" value="15"  maxlength="6" />
132 |                     </td>
133 |                   </tr>
134 |                   <tr>
135 |                     <td>Bottom:</td>
136 |                     <td>
137 |                       <input name="padbottom" id="padbottom" class="fd_slider" type="range" max="100" min="0" title="padbottom" value="15"  maxlength="6" />
138 |                     </td>
139 |                   </tr>
140 |                 </tbody>
141 |               </table>
142 |             </div>
143 |           </div>
144 |           <div class="item"><div class="title" id="Main-Margin">Margin</div>
145 |             <div class="wpt_contents">
146 |               <div id="margonoff" class="segmented segtwo"><div class="off segment">off</div><div class="on segment selected">on</div></div>
147 |               <div id="margd" class="segmented segtwo"><div class="separate segment selected">separate</div><div class="common segment">common</div></div>
148 |               <table>
149 |                 <tbody>
150 |                   <tr>
151 |                     <td>Top:</td>
152 |                     <td>
153 |                       <input name="martop" id="martop" class="fd_slider" type="range" max="100" min="-101" title="martop" value="30"  maxlength="6" />
154 |                     </td>
155 |                   </tr>
156 |                   <tr>
157 |                     <td>Left:</td>
158 |                     <td>
159 |                       <input name="marleft" id="marleft" class="fd_slider" type="range" max="100" min="-101" title="marleft" value="-101"  maxlength="6" />
160 |                     </td>
161 |                   </tr>
162 |                   <tr>
163 |                     <td>Right:</td>
164 |                     <td>
165 |                       <input name="marright" id="marright" class="fd_slider" type="range" max="100" min="-101" title="marright" value="-101"  maxlength="6" />
166 |                     </td>
167 |                   </tr>
168 |                   <tr>
169 |                     <td>Bottom:</td>
170 |                     <td>
171 |                       <input name="marbottom" id="marbottom" class="fd_slider" type="range" max="100" min="-101" title="marbottom" value="0"  maxlength="6" />
172 |                     </td>
173 |                   </tr>
174 |                 </tbody>
175 |               </table>
176 |             </div>
177 |           </div>
178 |           <div class="item"><div class="title" id="Main-Display">Display</div>
179 |             <div class="wpt_contents">
180 |               <div id="disponoff" class="segmented segtwo"><div class="off segment">off</div><div class="on segment selected">on</div></div>
181 |               <div id="displayt" class="segmented full"><div class="block segment full selected">block</div><div class="inline segment full">inline</div><div class="inline-block segment full">inline-block</div><div class="inline-table segment full">inline-table</div><div class="none segment full">none</div></div>
182 |             </div>
183 |           </div>
184 |           <div class="header">Background</div>
185 |           <div class="item"><div class="title" id="Background-Color">Color</div>
186 |             <div class="wpt_contents">
187 |               <div id="bgonoff" class="segmented segtwo"><div class="off segment">off</div><div class="on segment selected">on</div></div>
188 |               <div id="bgd" class="segmented segtwo"><div class="separate segment selected">colored</div><div class="common segment">gray</div></div>
189 |               <table>
190 |                 <tbody>
191 |                   <tr>
192 |                     <td>Red:</td>
193 |                     <td>
194 |                       <input name="bgred" id="bgred" class="fd_slider" type="range" max="255" min="0" title="bgred" value="255"  maxlength="6" />
195 |                     </td>
196 |                   </tr>
197 |                   <tr>
198 |                     <td>Green:</td>
199 |                     <td>
200 |                       <input name="bggreen" id="bggreen" class="fd_slider" type="range" max="255" min="0" title="bggreen" value="255"  maxlength="6" />
201 |                     </td>
202 |                   </tr>
203 |                   <tr>
204 |                     <td>Blue:</td>
205 |                     <td>
206 |                       <input name="bgblue" id="bgblue" class="fd_slider" type="range" max="255" min="0" title="bgblue" value="255"  maxlength="6" />
207 |                     </td>
208 |                   </tr>
209 |                   <tr>
210 |                     <td>Opacity:</td>
211 |                     <td>
212 |                       <input name="bgalpha" id="bgalpha" class="fd_slider" type="range" max="1" min="0" step="0.1" title="bgalpha" value="1"  maxlength="6" />
213 |                     </td>
214 |                   </tr>
215 |                 </tbody>
216 |               </table>
217 |             </div>
218 |           </div>
219 |           <div class="item"><div class="title" id="Background-Image">Image</div>
220 |             <div class="wpt_contents">
221 |               <div id="backgroundimg" class="segmented full"><div class="none segment full selected">none</div><div class="summer segment full">summer</div><div class="winter segment full">winter</div></div>
222 |             </div>
223 |           </div>
224 |           <div class="item"><div class="title" id="Background-Size">Size</div>
225 |             <div class="wpt_contents">
226 |               <div id="bgstype" class="segmented segtwo"><div class="px segment selected">px</div><div class="percent segment">%</div></div>
227 |               <table>
228 |                 <tbody>
229 |                   <tr>
230 |                     <td>Width:</td>
231 |                     <td>
232 |                       <input name="bgw" id="bgw" class="fd_slider" type="range" max="200" min="0" title="bgw" value="100"  maxlength="6" />
233 |                     </td>
234 |                   </tr>
235 |                   <tr>
236 |                     <td>Height:</td>
237 |                     <td>
238 |                       <input name="bgh" id="bgh" class="fd_slider" type="range" max="200" min="0" title="bgh" value="100"  maxlength="6" />
239 |                     </td>
240 |                   </tr>
241 |                 </tbody>
242 |               </table>
243 |             </div>
244 |           </div>
245 |           <div class="item"><div class="title" id="Background-Position">Position</div>
246 |             <div class="wpt_contents">
247 |               <div id="bgptype" class="segmented segtwo"><div class="px segment selected">px</div><div class="percent segment">%</div></div>
248 |               <table>
249 |                 <tbody>
250 |                   <tr>
251 |                     <td>Top:</td>
252 |                     <td>
253 |                       <input name="bgtop" id="bgtop" class="fd_slider" type="range" max="200" min="0" title="bgtop" value="0"  maxlength="6" />
254 |                     </td>
255 |                   </tr>
256 |                   <tr>
257 |                     <td>Left:</td>
258 |                     <td>
259 |                       <input name="bgleft" id="bgleft" class="fd_slider" type="range" max="200" min="0" title="bgleft" value="0"  maxlength="6" />
260 |                     </td>
261 |                   </tr>
262 |                 </tbody>
263 |               </table>
264 |             </div>
265 |           </div>
266 |           <div class="header">Font</div>
267 |           <div class="item"><div class="title" id="Text-Size">Size</div>
268 |             <div class="wpt_contents">
269 |               <div id="fsizeonoff" class="segmented segtwo"><div class="off segment selected">off</div><div class="on segment">on</div></div>
270 |               <div id="fontsizetype" class="segmented segfour"><div class="px segment selected">px</div><div class="em segment">em</div><div class="pt segment">pt</div><div class="percent segment">%</div></div>
271 |               <table>
272 |                 <tbody>
273 |                   <tr>
274 |                     <td>Size:</td>
275 |                     <td>
276 |                       <input name="fsize" id="fsize" class="fd_slider" type="range" max="100" min="0" title="fsize" value="20"  maxlength="6" />
277 |                     </td>
278 |                   </tr>
279 |                 </tbody>
280 |               </table>
281 |             </div>
282 |           </div>
283 |           <div class="item"><div class="title" id="Text-Color">Color</div>
284 |             <div class="wpt_contents">
285 |               <div id="tconoff" class="segmented segtwo"><div class="off segment">off</div><div class="on segment selected">on</div></div>
286 |               <div id="tcd" class="segmented segtwo"><div class="separate segment selected">colored</div><div class="common segment">gray</div></div>
287 |               <table>
288 |                 <tbody>
289 |                   <tr>
290 |                     <td>Red:</td>
291 |                     <td>
292 |                       <input name="tcred" id="tcred" class="fd_slider" type="range" max="255" min="0" title="tcred" value="0"  maxlength="6" />
293 |                     </td>
294 |                   </tr>
295 |                   <tr>
296 |                     <td>Green:</td>
297 |                     <td>
298 |                       <input name="tcgreen" id="tcgreen" class="fd_slider" type="range" max="255" min="0" title="tcgreen" value="0"  maxlength="6" />
299 |                     </td>
300 |                   </tr>
301 |                   <tr>
302 |                     <td>Blue:</td>
303 |                     <td>
304 |                       <input name="tcblue" id="tcblue" class="fd_slider" type="range" max="255" min="0" title="tcblue" value="0"  maxlength="6" />
305 |                     </td>
306 |                   </tr>
307 |                   <tr>
308 |                     <td>Opacity:</td>
309 |                     <td>
310 |                       <input name="tcalpha" id="tcalpha" class="fd_slider" type="range" max="1" min="0" step="0.1" title="tcalpha" value="1"  maxlength="6" />
311 |                     </td>
312 |                   </tr>
313 |                 </tbody>
314 |               </table>
315 |             </div>
316 |           </div>
317 |           <div class="item"><div class="title" id="Main-Font">Family</div>
318 |             <div class="wpt_contents">
319 |               <div id="fontonoff" class="segmented segtwo"><div class="off segment selected">off</div><div class="on segment">on</div></div>
320 |               <div id="font" class="segmented full"><div class="Helvetica segment full selected">Helvetica</div><div class="Lucida segment full">Lucida</div><div class="Georgia segment full">Georgia</div><div class="Menlo segment full">Menlo</div><div class="Hoefler segment full">Hoefler</div></div>
321 |             </div>
322 |           </div>
323 |           <div class="header">Border</div>
324 |           <div class="item"><div class="title" id="Border-Thickness">Width</div>
325 |             <div class="wpt_contents">
326 |               <div id="btonoff" class="segmented segtwo"><div class="off segment">off</div><div class="on segment selected">on</div></div>
327 |               <div id="bordert" class="segmented segtwo"><div class="separate segment selected">separate</div><div class="common segment">common</div></div>
328 |               <table>
329 |                 <tbody>
330 |                   <tr>
331 |                     <td>Top:</td>
332 |                     <td>
333 |                       <input name="bttop" id="bttop" class="fd_slider" type="range" max="25" min="0" title="bttop" value="1"  maxlength="6" />
334 |                     </td>
335 |                   </tr>
336 |                   <tr>
337 |                     <td>Left:</td>
338 |                     <td>
339 |                       <input name="btleft" id="btleft" class="fd_slider" type="range" max="25" min="0" title="btleft" value="1"  maxlength="6" />
340 |                     </td>
341 |                   </tr>
342 |                   <tr>
343 |                     <td>Right:</td>
344 |                     <td>
345 |                       <input name="btright" id="btright" class="fd_slider" type="range" max="25" min="0" title="btright" value="1"  maxlength="6" />
346 |                     </td>
347 |                   </tr>
348 |                   <tr>
349 |                     <td>Bottom:</td>
350 |                     <td>
351 |                       <input name="btbottom" id="btbottom" class="fd_slider" type="range" max="25" min="0" title="btbottom" value="25"  maxlength="6" />
352 |                     </td>
353 |                   </tr>
354 |                 </tbody>
355 |               </table>
356 |             </div>
357 |           </div>
358 |           <div class="item"><div class="title" id="Border-Color">Color</div>
359 |             <div class="wpt_contents">
360 |               <div id="bcd" class="segmented segtwo"><div class="separate segment selected">colored</div><div class="common segment">gray</div></div>
361 |               <table>
362 |                 <tbody>
363 |                   <tr>
364 |                     <td>Red:</td>
365 |                     <td>
366 |                       <input name="bcred" id="bcred" class="fd_slider" type="range" max="255" min="0" title="bcred" value="255"  maxlength="6" />
367 |                     </td>
368 |                   </tr>
369 |                   <tr>
370 |                     <td>Green:</td>
371 |                     <td>
372 |                       <input name="bcgreen" id="bcgreen" class="fd_slider" type="range" max="255" min="0" title="bcgreen" value="255"  maxlength="6" />
373 |                     </td>
374 |                   </tr>
375 |                   <tr>
376 |                     <td>Blue:</td>
377 |                     <td>
378 |                       <input name="bcblue" id="bcblue" class="fd_slider" type="range" max="255" min="0" title="bcblue" value="255"  maxlength="6" />
379 |                     </td>
380 |                   </tr>
381 |                   <tr>
382 |                     <td>Opacity:</td>
383 |                     <td>
384 |                       <input name="bcalpha" id="bcalpha" class="fd_slider" type="range" max="1" min="0" step="0.1" title="bcalpha" value="1"  maxlength="6" />
385 |                     </td>
386 |                   </tr>
387 |                 </tbody>
388 |               </table>
389 |             </div>
390 |           </div>
391 |           <div class="item"><div class="title" id="Border-Type">Type</div>
392 |             <div class="wpt_contents">
393 |               <div id="btype" class="segmented full"><div class="solid segment full selected">solid</div><div class="dotted segment full">dotted</div><div class="dashed segment full">dashed</div><div class="double segment full">double</div><div class="none segment full">none</div></div>
394 |             </div>
395 |           </div>
396 |           <div class="item"><div class="title" id="Border-Radius">Radius</div>
397 |             <div class="wpt_contents">
398 |               <div id="bradonoff" class="segmented segtwo"><div class="off segment">off</div><div class="on segment selected">on</div></div>
399 |               <div id="borderd" class="segmented segtwo"><div class="separate segment selected">separate</div><div class="common segment">common</div></div>
400 |               <table>
401 |                 <tbody>
402 |                   <tr>
403 |                     <td>Top-Left:</td>
404 |                     <td>
405 |                       <input name="brtl" id="brtl" class="fd_slider" type="range" max="100" min="0" title="brtl" value="4"  maxlength="6" />
406 |                     </td>
407 |                   </tr>
408 |                   <tr>
409 |                     <td>Top-Right:</td>
410 |                     <td>
411 |                       <input name="brtr" id="brtr" class="fd_slider" type="range" max="100" min="0" title="brtr" value="4"  maxlength="6" />
412 |                     </td>
413 |                   </tr>
414 |                   <tr>
415 |                     <td>Bottom-Right:</td>
416 |                     <td>
417 |                       <input name="brbr" id="brbr" class="fd_slider" type="range" max="100" min="0" title="brbr" value="4"  maxlength="6" />
418 |                     </td>
419 |                   </tr>
420 |                   <tr>
421 |                     <td>Bottom-Left:</td>
422 |                     <td>
423 |                       <input name="brbl" id="brbl" class="fd_slider" type="range" max="100" min="0" title="brbl" value="4"  maxlength="6" />
424 |                     </td>
425 |                   </tr>
426 |                 </tbody>
427 |               </table>
428 |             </div>
429 |           </div>
430 |           <div class="header">Box-Shadow</div>
431 |           <div class="item"><div class="title" id="BS-Position">Position</div>
432 |             <div class="wpt_contents">
433 |               <div id="bsonoff" class="segmented segtwo"><div class="off segment">off</div><div class="on segment selected">on</div></div>
434 |               <div id="bstype" class="segmented segtwo"><div class="inset segment selected">inset</div><div class="outside segment">outside</div></div>
435 |               <table>
436 |                 <tbody>
437 |                   <tr>
438 |                     <td>Horizontal:</td>
439 |                     <td>
440 |                       <input name="bsh" id="bsh" class="fd_slider" type="range" max="25" min="-25" title="bsh" value="2"  maxlength="6" />
441 |                     </td>
442 |                   </tr>
443 |                   <tr>
444 |                     <td>Vertical:</td>
445 |                     <td>
446 |                       <input name="bsv" id="bsv" class="fd_slider" type="range" max="25" min="-25" title="bsv" value="2"  maxlength="6" />
447 |                     </td>
448 |                   </tr>
449 |                 </tbody>
450 |               </table>
451 |             </div>
452 |           </div>
453 |           <div class="item"><div class="title" id="BS-Color">Color</div>
454 |             <div class="wpt_contents">
455 |               <div id="bscold" class="segmented segtwo"><div class="separate segment selected">colored</div><div class="common segment">gray</div></div>
456 |               <table>
457 |                 <tbody>
458 |                   <tr>
459 |                     <td>Red:</td>
460 |                     <td>
461 |                       <input name="bsred" id="bsred" class="fd_slider" type="range" max="255" min="0" title="bsred" value="255"  maxlength="6" />
462 |                     </td>
463 |                   </tr>
464 |                   <tr>
465 |                     <td>Green:</td>
466 |                     <td>
467 |                       <input name="bsgreen" id="bsgreen" class="fd_slider" type="range" max="255" min="0" title="bsgreen" value="255"  maxlength="6" />
468 |                     </td>
469 |                   </tr>
470 |                   <tr>
471 |                     <td>Blue:</td>
472 |                     <td>
473 |                       <input name="bsblue" id="bsblue" class="fd_slider" type="range" max="255" min="0" title="bsblue" value="255"  maxlength="6" />
474 |                     </td>
475 |                   </tr>
476 |                   <tr>
477 |                     <td>Opacity:</td>
478 |                     <td>
479 |                       <input name="bsalpha" id="bsalpha" class="fd_slider" type="range" max="1" min="0" step="0.1" title="bsalpha" value="1"  maxlength="6" />
480 |                     </td>
481 |                   </tr>
482 |                 </tbody>
483 |               </table>
484 |             </div>
485 |           </div>
486 |           <div class="item"><div class="title" id="BS-Blur">Blur</div>
487 |             <div class="wpt_contents">
488 |               <table>
489 |                 <tbody>
490 |                   <tr>
491 |                     <td>Radius:</td>
492 |                     <td>
493 |                       <input name="bsrad" id="bsrad" class="fd_slider" type="range" max="25" min="0" title="bsrad" value="25"  maxlength="6" />
494 |                     </td>
495 |                   </tr>
496 |                   <tr>
497 |                     <td>Spread:</td>
498 |                     <td>
499 |                       <input name="bssp" id="bssp" class="fd_slider" type="range" max="25" min="-25" title="bssp" value="7"  maxlength="6" />
500 |                     </td>
501 |                   </tr>
502 |                 </tbody>
503 |               </table>
504 |             </div>
505 |           </div>
506 |           <div class="header">Text-Shadow</div>
507 |           <div class="item"><div class="title" id="TS-Position">Position</div>
508 |             <div class="wpt_contents">
509 |               <div id="tsonoff" class="segmented segtwo"><div class="off segment selected">off</div><div class="on segment">on</div></div>
510 |               <table>
511 |                 <tbody>
512 |                   <tr>
513 |                     <td>Horizontal:</td>
514 |                     <td>
515 |                       <input name="tsh" id="tsh" class="fd_slider" type="range" max="10" min="-10" title="tsh" value="0"  maxlength="6" />
516 |                     </td>
517 |                   </tr>
518 |                   <tr>
519 |                     <td>Vertical:</td>
520 |                     <td>
521 |                       <input name="tsv" id="tsv" class="fd_slider" type="range" max="10" min="-10" title="tsv" value="0"  maxlength="6" />
522 |                     </td>
523 |                   </tr>
524 |                 </tbody>
525 |               </table>
526 |             </div>
527 |           </div>
528 |           <div class="item"><div class="title" id="TS-Color">Color</div>
529 |             <div class="wpt_contents">
530 |               <div id="tscold" class="segmented segtwo"><div class="separate segment selected">colored</div><div class="common segment">gray</div></div>
531 |               <table>
532 |                 <tbody>
533 |                   <tr>
534 |                     <td>Red:</td>
535 |                     <td>
536 |                       <input name="tsred" id="tsred" class="fd_slider" type="range" max="255" min="0" title="tsred" value="0"  maxlength="6" />
537 |                     </td>
538 |                   </tr>
539 |                   <tr>
540 |                     <td>Green:</td>
541 |                     <td>
542 |                       <input name="tsgreen" id="tsgreen" class="fd_slider" type="range" max="255" min="0" title="tsgreen" value="0"  maxlength="6" />
543 |                     </td>
544 |                   </tr>
545 |                   <tr>
546 |                     <td>Blue:</td>
547 |                     <td>
548 |                       <input name="tsblue" id="tsblue" class="fd_slider" type="range" max="255" min="0" title="tsblue" value="0"  maxlength="6" />
549 |                     </td>
550 |                   </tr>
551 |                   <tr>
552 |                     <td>Opacity:</td>
553 |                     <td>
554 |                       <input name="tsalpha" id="tsalpha" class="fd_slider" type="range" max="1" min="0" step="0.1" title="tsalpha" value="1"  maxlength="6" />
555 |                     </td>
556 |                   </tr>
557 |                 </tbody>
558 |               </table>
559 |             </div>
560 |           </div>
561 |           <div class="item"><div class="title" id="TS-Blur">Blur</div>
562 |             <div class="wpt_contents">
563 |               <table>
564 |                 <tbody>
565 |                   <tr>
566 |                     <td>Radius:</td>
567 |                     <td>
568 |                       <input name="tsrad" id="tsrad" class="fd_slider" type="range" max="25" min="0" title="tsrad" value="0"  maxlength="6" />
569 |                     </td>
570 |                   </tr>
571 |                 </tbody>
572 |               </table>
573 |             </div>
574 |           </div>
575 |           <div class="header">Special</div>
576 |           <div class="item"><div class="title" id="skew">Skew</div>
577 |             <div class="wpt_contents">
578 |               <table>
579 |                 <tbody>
580 |                   <tr>
581 |                     <td>Skew-X:</td>
582 |                     <td>
583 |                       <input name="skewx" id="skewx" class="fd_slider" type="range" max="360" min="-360" title="skewx" value="0"  maxlength="6" />
584 |                     </td>
585 |                   </tr>
586 |                   <tr>
587 |                     <td>Skew-Y:</td>
588 |                     <td>
589 |                       <input name="skewy" id="skewy" class="fd_slider" type="range" max="360" min="-360" title="skewy" value="0"  maxlength="6" />
590 |                     </td>
591 |                   </tr>
592 |                 </tbody>
593 |               </table>
594 |             </div>
595 |           </div>
596 |           <div class="item"><div class="title" id="rotate">Rotate</div>
597 |             <div class="wpt_contents">
598 |               <table>
599 |                 <tbody>
600 |                   <tr>
601 |                     <td>Degrees:</td>
602 |                     <td>
603 |                       <input name="degrot" id="degrot" class="fd_slider" type="range" max="360" min="-360" title="degrot" value="-3"  maxlength="6" />
604 |                     </td>
605 |                   </tr>
606 |                 </tbody>
607 |               </table>
608 |             </div>
609 |           </div>
610 |           <div class="item"><div class="title" id="filter">Filter</div>
611 |             <div class="wpt_contents">
612 |               <div id="filteronoff" class="segmented segtwo"><div class="off segment">off</div><div class="on segment selected">on</div></div>
613 |               <table>
614 |                 <tbody>
615 |                   <tr>
616 |                     <td>Blur:</td>
617 |                     <td>
618 |                       <input name="fblur" id="fblur" class="fd_slider" type="range" max="25" min="0" title="fblur" value="0"  maxlength="6" />
619 |                     </td>
620 |                   </tr>
621 |                   <tr>
622 |                     <td>Grayscale:</td>
623 |                     <td>
624 |                       <input name="fgray" id="fgray" class="fd_slider" type="range" max="100" min="0" title="fgray" value="0"  maxlength="6" />
625 |                     </td>
626 |                   </tr>
627 |                   <tr>
628 |                     <td>Sepia:</td>
629 |                     <td>
630 |                       <input name="fsepia" id="fsepia" class="fd_slider" type="range" max="100" min="0" title="fsepia" value="12"  maxlength="6" />
631 |                     </td>
632 |                   </tr>
633 |                   <tr>
634 |                     <td>Brightness:</td>
635 |                     <td>
636 |                       <input name="fbright" id="fbright" class="fd_slider" type="range" max="100" min="0" title="fbright" value="0"  maxlength="6" />
637 |                     </td>
638 |                   </tr>
639 |                   <tr>
640 |                     <td>Hue-Rotate:</td>
641 |                     <td>
642 |                       <input name="fhue" id="fhue" class="fd_slider" type="range" max="359" min="0" title="fhue" value="0"  maxlength="6" />
643 |                     </td>
644 |                   </tr>
645 |                   <tr>
646 |                     <td>Saturate:</td>
647 |                     <td>
648 |                       <input name="fsat" id="fsat" class="fd_slider" type="range" max="200" min="0" title="fsat" value="200"  maxlength="6" />
649 |                     </td>
650 |                   </tr>
651 |                   <tr>
652 |                     <td>Contrast:</td>
653 |                     <td>
654 |                       <input name="fcontr" id="fcontr" class="fd_slider" type="range" max="100" min="0" title="fcontr" value="100"  maxlength="6" />
655 |                     </td>
656 |                   </tr>
657 |                 </tbody>
658 |               </table>
659 |             </div>
660 |           </div>
661 |           <div id="sidebarend"></div>
662 |         </div>
663 |       </div>
664 |       <div id="editor">
665 |         <div id="editorView">
666 |           <div class="selfCSS" style="background-image:url(./summer.jpg);"></div>
667 |         </div>
668 |         <div id="editorHTML">
669 |           <textarea name="HTMLedit" id="HTMLedit" onchange="$id('editorView').innerHTML = this.value;">&lt;div class="selfCSS" style="background-image:url(./summer.jpg);"&gt;&lt;/div&gt;</textarea>
670 |           <div id="demos" style="display:none;">
671 |             <div id="demo_lorem"><span class="selfCSS">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div>
672 |             <div id="demo_list"><ul><li class="selfCSS">Lorem</li><li class="selfCSS">ipsum</li><li class="selfCSS">dolor</li><li class="selfCSS">sit</li></ul></div>
673 |             <div id="demo_div"><div class="selfCSS"></div></div>
674 |             <div id="demo_imgs"><div class="selfCSS" style="background-image:url(./summer.jpg);"></div></div>
675 |             <div id="demo_imgw"><div class="selfCSS" style="background-image:url(./winter.jpg);"></div></div>
676 |           </div>
677 |         </div>
678 |         <div id="editorCSS">
679 |           <pre class="prettyprint lang-css linenums" id="CSSbox">
680 |           </pre>
681 |           <textarea id="CSStextarea" style="display:none;" onchange="CSStextarea();"></textarea>
682 |           <br />
683 |           <div id="sendCSSviaMail" class="button"></div>
684 |           <div id="editCSSbutton" onclick="editCSS('on');" class="button">edit CSS</div>
685 |           <div id="showCSSbutton" onclick="editCSS();" style="display:none;" class="button">show CSS</div>
686 |         </div>
687 |         <div id="backgroundslider">
688 |           <table>
689 |             <tbody>
690 |               <tr>
691 |                 <td>Background:</td>
692 |                 <td style="padding-left:15px;width:275px;"><input name="bgslider" id="bgslider" class="fd_slider" type="range" max="255" min="0" title="bgslider" value="23"  maxlength="6" /></td>
693 |               </tr>
694 |             </tbody>
695 |           </table>
696 |         </div>
697 |       </div>
698 |       <div id="dialog"><h1 id="loadingstat" style="text-align: center;">loading .</h1></div>
699 |       <div id="dialogs">
700 |         <div id="about"><div class="contents"><h1>about
701 |           <a href="http://selfcss.org/">selfCSS</a></h1><br/>
702 |           selfCSS is a <a href="http://de.wikipedia.org/wiki/WYSIWYG">WYSIWYG</a> <a href="http://de.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a> Editor. Feel free to contact me via <a href="mailto:contact@selfcss.org">eMail</a> or on <a href="simon.waldherr.eu/t">Twitter</a>. This software will be continually developed. Suggestions and tips are always welcome.
703 |           <br/><br/>selfCSS works on desktop Browsers just as well as on Tablets (like the iPad). It has automatically detected and loaded the <b id="devicetype"></b> of selfCSS.
704 |           <br/><br/>Other good resources for Web Devs are: <a href="http://css3generator.com/">CSS3generator</a>, <a href="http://html5please.com/">HTML5please</a>, <a href="http://subtlepatterns.com/">SubtlePatterns</a>, <a href="http://css3please.com/">CSS3please</a>, <a href="http://www.colorzilla.com/gradient-editor/">Colorzilla Gradient Editor</a>, <a href="http://www.css3.me/">css3.me</a>, <a href="http://border-radius.com/">border-radius</a>, <a href="http://selfcss.org/baf/editor/buttons.html">BaF Button Editor</a> and <a href="http://selfcss.org/baf/editor/forms.html">BaF Forms Editor</a>.<br/><br/>
705 |           This Software uses the following open-source codes:
706 |           <br/><br/>Style and look of <a href="https://github.com/evanw/webgl-filter/">webgl-filter</a> provided under the terms of <b>MIT license</b> by <a href="http://madebyevan.com/">Evan Wallace</a>.
707 |           <br/>Input Range Polyfill <a href="https://github.com/freqdec/fd-slider">fd-slider</a> provided under the terms of <b>MIT license</b> by <a href="http://www.frequency-decoder.com/">Brian McAllister</a>.
708 |           <br/><a href="http://cubiq.org/add-to-home-screen">Add to Home Screen</a> provided under the terms of <b>MIT license</b> by <a href="http://cubiq.org/">Matteo Spinelli</a>.
709 |           <br/><a href="https://github.com/SimonWaldherr/selfCSS">The rest of this code</a> is provided under the terms of <b>MIT license</b> by me (<a href="http://simon.waldherr.eu/">Simon Waldherr</a>).
710 |           <br/><br/>More Information about the license on Wikipedia: <a href="http://en.wikipedia.org/wiki/MIT_License">en.wikipedia.org/wiki/MIT_License</a>
711 |         </div><div id="sm_container"></div><div class="button closedialog" onclick="wpt_dialog();">Close</div>
712 | <!--          <?php
713 |           if(strpos($_SERVER["HTTP_ACCEPT_LANGUAGE"], 'de-DE') !== false)
714 |             {
715 |               echo '<div class="button" id="about_btn" onclick="wpt_dialog(\'tmg\');">Impressum</div>';
716 |             }
717 |           ?> -->
718 |         </div>
719 |         <div id="examples"><div class="contents"><h1>Examples</h1>
720 |           <div class="button" onclick="loadCSSexample('imgs');">Image</div>
721 |           <div class="button" onclick="loadCSSexample('imgw');">Image 2</div>
722 |           <div class="button" onclick="loadCSSexample('text');">Text</div>
723 |           <div class="button" onclick="loadCSSexample();">clear</div>
724 |         </div><br/><br/>
725 |           <div class="button closedialog" onclick="wpt_dialog();">Close</div>
726 |         </div>
727 |         <div id="tmg"><div class="contents"><h1>Impressum</h1>
728 |           <p>Angaben gem&auml;&szlig; &sect; 5 TMG:<br/></p><br />
729 |           <h2>Kontakt:</h2>
730 |           <table><tr>
731 |             <td>Name:</td><td>Simon Waldherr</td></tr>
732 |             <td>Stra&szlig;e:</td><td>Kloepfstrasse 2</td></tr>
733 |             <td>Wohnort:</td><td>94522 Ettling</td></tr>
734 |             <td>Telefon:</td><td>0049 151 11309488</td></tr>
735 |             <tr><td>Telefax:</td><td>0049 32 224178618</td></tr>
736 |             <tr><td>E-Mail:</td><td>contact@selfcss.org</td>
737 |           </tr></table>
738 |           </div>
739 |           <div class="button closedialog" onclick="wpt_dialog();">Close</div>
740 |         </div>
741 |       </div>
742 |       <div id="dimmer" onclick="wpt_dialog();"></div>
743 |     </div>
744 |     <div id="topgrad"></div>
745 |     <div id="onSmartphones">selfCSS does not work on Smartphones, please try it on the iPad or on a PC</div>
746 |     <script type="text/javascript">
747 |       var _gaq = _gaq || [];
748 |       _gaq.push(['_setAccount', 'UA-36066376-1']);
749 |       _gaq.push(['_setDomainName', 'selfcss.org']);
750 |       _gaq.push(['_trackPageview']);
751 |       
752 |       (function() {
753 |         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
754 |         ga.src = 'http://statistik.simon.waldherr.eu/ga.js';
755 |         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
756 |       })();
757 |     </script>
758 |   </body>
759 | </html>
760 | 


--------------------------------------------------------------------------------
/fd-slider.css:
--------------------------------------------------------------------------------
   1 | /* 
   2 | 
   3 |    Don't use this version of the file in a production environment. A minified 
   4 |    version tailored specifically to your needs can be generated in-browser by
   5 |    using the /css-generator/index.html file.
   6 |    
   7 |    Notes for the adventurous:
   8 |    
   9 |    1. The script automagically adds the classname "oldie" to IE6, 7 & 8.
  10 |    
  11 |    2. A combination of the .oldie class and "safe css hacks" are used to target 
  12 |       specific IE versions. See: http://mathiasbynens.be/notes/safe-css-hacks
  13 |    
  14 |    3. MSHTML has been used to base64 encode the various png images used for the 
  15 |       drag handle in IE6 and 7. IE7 gets served one base64 encoded image sprite 
  16 |       whereas IE6 gets served individual base64 encoded images.
  17 |        
  18 |       See: http://www.phpied.com/the-proper-mhtml-syntax/ for more info on MHTML
  19 |       
  20 |       The base64 encoded images have been placed into their own .mht file. This
  21 |       means only IE6 and 7 will ever be burdened with downloading the file.
  22 |       
  23 |       A Microsoft security update in July 2011 means that .mht files now have to
  24 |       be delivered with the mimetype "message/rfc822". If using IIS, there is 
  25 |       nothing to do as IIS appears to default to using the required 
  26 |       "message/rfc822" mimetype, if using Apache, there are two ways in which to
  27 |       configure this behaviour:
  28 |       
  29 |       A. You have Admin rights and can restart the Apache server
  30 |       
  31 |       Update the apache_root/httpd/conf/Srm.conf file and add the following 
  32 |       line:
  33 |       
  34 |       AddType message/rfc822 mht
  35 |       
  36 |       This method requires that you restart Apache.
  37 |       
  38 |       B. You can simply use an htaccess directive 
  39 |       
  40 |       You can add the following to an .htaccess file that sits in the same 
  41 |       directory as the .mht file (or to an htaccess file at the root of your
  42 |       website if one exists already): 
  43 |       
  44 |       AddType message/rfc822 mht
  45 |       
  46 |       You do not need to restart Apache for the change to take effect.
  47 |       
  48 |       Yikes - I cant do either of the above!
  49 |       
  50 |       Don't worry, using the .mht file isn't compulsory - just replace the 
  51 |       various mhtml: references (found within the .oldie classes) to point to 
  52 |       the correct image file on your server (not forgetting to actually upload 
  53 |       the image files to your server of course). 
  54 |       
  55 |       All of the relevant rules have further instructions embedded within them.
  56 |        
  57 |    4. All browsers but IE6 get one "normal" base64 encoded image sprite. IE6 has
  58 |       to use separate images for each animation state.
  59 |    
  60 |    5. The drag handle is only 20px in width & height, most probably not suitable 
  61 |       for touch screen devices. 
  62 |       
  63 |    6. It's painless to base64 encode your own images, use an online encoder. 
  64 |       See: http://www.google.com/search?q=base+64+encoder - the only problem is 
  65 |       that IE6 needs each frame of the handle sprite to be encoded individually.
  66 |       
  67 |    7. If you want to use a different image for vertical slider drag handles,
  68 |       uncomment the relevant classes below (easy to spot as they all have the 
  69 |       classname ".fd-slider-vertical" somewhere within the declaration).
  70 |        
  71 |    8. As a reminder, the following HTML is being targetted by the CSS:
  72 |  
  73 | <span class="fd-slider[-vertical]" 
  74 |       id="fd-slider-[the associated form element id]" 
  75 |       role="application" 
  76 |       aria-disabled="false">
  77 |   <span class="fd-slider-wrapper (fd-slider-[focus|hover|no-value|disabled|active])">
  78 |     <span class="fd-slider-inner"></span>
  79 |     <span class="fd-slider-range"></span>
  80 |     <span class="fd-slider-bar"></span>
  81 |     <span class="fd-slider-handle" 
  82 |           tabindex="0" 
  83 |           role="slider" 
  84 |           aria-valuemin="-10" 
  85 |           aria-valuemax="10" 
  86 |           aria-labelledby="[the associated form element label id]" 
  87 |           id="fd-slider-handle-[the associated form element id]" 
  88 |           aria-describedby="fd-slider-describedby" 
  89 |           aria-valuenow="-3.50" 
  90 |           aria-valuetext="-3.50">&nbsp;</span>
  91 |   </span>
  92 | </span>
  93 | 
  94 | */
  95 | 
  96 | /*
  97 |         Element: Form element associated with the slider
  98 |         Notes: The styles given to the associated form element in order to hide 
  99 |         it within the display
 100 | */  
 101 | .fd-form-element-hidden
 102 |         {
 103 |         display:none;
 104 |         } 
 105 | /*
 106 |         Element: Outer wrapper
 107 |         Orientation: Horizontal 
 108 | */ 
 109 | .fd-slider
 110 |         {                     
 111 |         width:100%;
 112 |         height:20px;
 113 |         margin:0 0 10px 0;
 114 |         }
 115 | /*
 116 |         Element: Outer wrapper
 117 |         Orientation: Vertical
 118 |         Notes: You may wish to float the vertical sliders left or use
 119 |         display:inline-block (inline-block should work even in IE6 as the slider
 120 |         is constructed from span elements but don't quote me on that)
 121 | */ 
 122 | .fd-slider-vertical
 123 |         {               
 124 |         width:20px;
 125 |         height:100%; 
 126 |         margin:0 10px 10px 0;              
 127 |         }
 128 | /*
 129 |         Element: Outer wrapper
 130 |         Orientation: Both horizontal & vertical
 131 | */ 
 132 | .fd-slider,
 133 | .fd-slider-vertical
 134 |         {
 135 |         text-align:center;
 136 |         display:block;
 137 |         position:relative;
 138 |         cursor:pointer;        
 139 |         text-decoration:none;
 140 |         border:0 none;
 141 |         -webkit-user-select: none;
 142 |          -khtml-user-select: none;
 143 |            -moz-user-select: none;
 144 |             -ms-user-select: none;
 145 |              -o-user-select: none;
 146 |                 user-select: none;
 147 |         }
 148 | /*
 149 |         Element: Outer Wrapper 
 150 |         Orientation: Both horizontal & vertical
 151 |         Notes: IE6 & 7 need a transparent gif as a background in order for
 152 |         hover events to work. This has been base64 encoded within the .mht file.
 153 |         As it's not a png, no AlphaImageLoader filter is required for IE6. 
 154 | */
 155 | .oldie .fd-slider,
 156 | .oldie .fd-slider-vertical
 157 |         {
 158 |         /* 
 159 |            If using the .mht file then uncomment the following rule and edit the 
 160 |            filepath to match the absolute path to the fd-slider.mht file on your 
 161 |            server (replace "www.your-domain.com/the/path/to/") 
 162 |         */        
 163 |         
 164 |         /*
 165 |         
 166 |         *background:transparent url(mhtml:http://www.your-domain.com/the/path/to/fd-slider.mht!blank) repeat;
 167 |         
 168 |         */
 169 |         
 170 |         /* 
 171 |            If not using the .mht file then uncomment the following rule and edit 
 172 |            the filepath to match the absolute path to the blank.gif file on your 
 173 |            server (replace "www.your-domain.com/the/path/to/") 
 174 |         */        
 175 |         
 176 |         /*
 177 |         
 178 |         *background:transparent url(http://www.your-domain.com/the/path/to/blank.gif) repeat;
 179 |         
 180 |         */                
 181 |         }                 
 182 | /*
 183 |         Element: Inner wrapper
 184 |         Notes: All other DOM elements added as children to this element.
 185 | */
 186 | .fd-slider-wrapper
 187 |         {
 188 |         position:absolute;
 189 |         top:0;
 190 |         left:0;
 191 |         width:100%;
 192 |         height:100%;
 193 |         }
 194 | /*
 195 |         Element: Inner wrapper
 196 |         Notes: IE6 needs an expression as it cannot do a height:100% on 
 197 |         absolutely positioned elements and it also can't position on four 
 198 |         corners - so we are left with a "one time evaluated" self-deleting 
 199 |         expression to do the dirty work.
 200 | */
 201 | 
 202 | .oldie .fd-slider-vertical .fd-slider-wrapper
 203 |         {
 204 |         *clear:expression(style.height=parentNode.offsetHeight+'px',style.clear='none', 0);
 205 |         }
 206 | /*
 207 |         Element: ieBlur shiv
 208 |         Notes: Used only by IE for the onfocus "Blur" effect
 209 | */ 
 210 | .fd-slider-inner
 211 |         {
 212 |         display:none;
 213 |         }
 214 | /*
 215 |         Element: ieBlur shiv
 216 |         Orientation: Horizontal
 217 |         Notes: IE6, 7 & 8 only.
 218 |         Use the "Blur" filter to simulate the box-shadow - not brilliant but the 
 219 |         best we can do for IE. IE6 can't absolutely position on 4 sides so we 
 220 |         reset the right to "auto" and use a nasty expression to calculate the 
 221 |         width dynamically. 
 222 | */ 
 223 | .oldie .fd-slider-inner
 224 |         {        
 225 |         position:absolute;        
 226 |         height:2px;
 227 |         border:1px solid #bbf;
 228 |         background:#bbf;      
 229 |         top:4px;        
 230 |         bottom:none;
 231 |         left:4px;
 232 |         right:12px;              
 233 |         z-index:2;       
 234 |         margin:0;
 235 |         padding:0;
 236 |         overflow:hidden;
 237 |         line-height:4px; 
 238 |         _right:auto;
 239 |         _width:expression((this.parentNode.offsetWidth - 12) + "px");
 240 |         filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=3.5); 
 241 |         }
 242 | /*
 243 |         Element: ieBlur shiv
 244 |         Orientation: Vertical
 245 |         Notes: Reposition the "Blur" filter for the vertical slider for IE6, 
 246 |         7 & 8. The "Blur" filter rule cascades from the rule above so no need to 
 247 |         redeclare here, we just reposition.
 248 | */ 
 249 | .oldie .fd-slider-vertical .fd-slider-inner
 250 |         {        
 251 |         width:2px;
 252 |         height:auto;     
 253 |         bottom:12px;
 254 |         right:auto; 
 255 |         _bottom:auto;
 256 |         *clear:expression(style.height=(parentNode.offsetHeight - 8)+'px',style.clear='none', 0);
 257 |         }
 258 | /*
 259 |         Element: ieBlur shiv
 260 |         Orientation: Horizontal & Vertical
 261 |         Notes: Display the "Blurred" inner div for IE6, 7 & 8 when the slider 
 262 |         gains focus
 263 | */ 
 264 | .oldie .fd-slider-focused .fd-slider-inner
 265 |         {        
 266 |         display:block;
 267 |         }  
 268 | /*
 269 |         Element: Inner track bar
 270 |         Orientation: Horizontal   
 271 | */
 272 | .fd-slider-bar
 273 |         {
 274 |         display:block;
 275 |         position:absolute;
 276 |         top:8px;
 277 |         right:10px; 
 278 |         left:10px;                
 279 |         z-index:2;
 280 |         height:2px;
 281 |         margin:0;
 282 |         padding:0;
 283 |         overflow:hidden;
 284 |         border:1px solid #bbb;
 285 |         border-bottom:1px solid #aaa;
 286 |         border-right:1px solid #aaa;
 287 |         border:1px solid rgba(187, 187, 187, .8);
 288 |         border-bottom:1px solid rgba(170, 170, 170, .8);
 289 |         border-right:1px solid rgba(170, 170, 170, .8);                   
 290 |         line-height:4px;
 291 |         background-color:#ddd;
 292 |         background-image: -webkit-gradient(linear, left top, left bottom, from(#ececec), to(#ccc)); 
 293 |         background-image: -webkit-linear-gradient(top, #ececec, #ccc); 
 294 |         background-image:    -moz-linear-gradient(top, #ececec, #ccc); 
 295 |         background-image:     -ms-linear-gradient(top, #ececec, #ccc); 
 296 |         background-image:      -o-linear-gradient(top, #ececec, #ccc); 
 297 |         background-image:         linear-gradient(to bottom, #ececec, #ccc);
 298 |         border-radius:2px;
 299 |         -webkit-background-clip: padding-box; 
 300 |            -moz-background-clip: padding; 
 301 |                 background-clip: padding-box;
 302 |         }
 303 | /*
 304 |         Element: Inner track bar
 305 |         Orientation: Horizontal
 306 |         Notes: For IE6 & 7 & 8. IE6 does not recognise absolute positioning on 
 307 |         four sides (top, right, bottom & left) so we use an expression to 
 308 |         dynamically calculate the track bar size. Yes, it is horrible - you 
 309 |         don't need to remind me.
 310 | */
 311 | .oldie .fd-slider-bar
 312 |         {
 313 |         _right:auto;        
 314 |         _width:expression((this.parentNode.offsetWidth - 20) + "px");
 315 |         filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffececec',endColorstr='#ffcccccc');
 316 |         }
 317 | /*
 318 |         Element: Inner track bar
 319 |         Orientation: Vertical
 320 | */
 321 | .fd-slider-vertical .fd-slider-bar
 322 |         {         
 323 |         width:2px;   
 324 |         top:10px;
 325 |         right:auto;
 326 |         bottom:10px;
 327 |         left:8px;        
 328 |         height:auto;
 329 |         background-color:#ddd;
 330 |         background-image: -webkit-gradient(linear, left top, right top, from(#ececec), to(#ccc)); 
 331 |         background-image: -webkit-linear-gradient(left, #ececec, #ccc); 
 332 |         background-image:    -moz-linear-gradient(left, #ececec, #ccc); 
 333 |         background-image:     -ms-linear-gradient(left, #ececec, #ccc); 
 334 |         background-image:      -o-linear-gradient(left, #ececec, #ccc); 
 335 |         background-image:         linear-gradient(to right, #ececec, #ccc);
 336 |         }
 337 | /*
 338 |         Element: Inner track bar
 339 |         Orientation: Vertical
 340 |         Notes: For IE6 & 7 & 8. The gradient filter colour strings in AARRGGBB 
 341 |         format (to save you one less google). IE6 gets repositioned and alas,
 342 |         an expression to calculate the height.
 343 | */
 344 | .oldie .fd-slider-vertical .fd-slider-bar
 345 |         {  
 346 |         _bottom:auto;
 347 |         *clear:expression(style.height=(parentNode.offsetHeight - 20)+'px',style.clear='none', 0);
 348 |         filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffececec',endColorstr='#ffcccccc');
 349 |         }
 350 | /*
 351 |         Element: Inner track bar
 352 |         Orientation: Horizontal & Vertical
 353 |         State: Focused
 354 |         Notes: Drop shadow on the inner bar when focused - newer browsers get 
 355 |         an animation. IE6, 7 & 8 get a "Blur" filter on an inner SPAN 
 356 |         .fd-slider-inner instead 
 357 | */
 358 | .fd-slider-focused .fd-slider-bar
 359 |         {
 360 |         box-shadow: 0 0 6px rgba(10, 130, 170, 0.7);
 361 |         -webkit-animation:fd-pulse 2s infinite;
 362 |            -moz-animation:fd-pulse 2s infinite;
 363 |             -ms-animation:fd-pulse 2s infinite;
 364 |              -o-animation:fd-pulse 2s infinite;           
 365 |         } 
 366 | /*
 367 |         Element: Inner animated range bar 
 368 |         Orientation: Horizontal
 369 | */
 370 | .fd-slider-range
 371 |         {
 372 |         display:block;
 373 |         position:absolute;
 374 |         top:9px;
 375 |         left:11px;         	      
 376 |         z-index:3;
 377 |         height:2px;      
 378 |         margin:0;
 379 |         padding:0;
 380 |         overflow:hidden;
 381 |         line-height:2px;
 382 |         background-color:#4cc;
 383 |         background-image: -webkit-gradient(linear, left top, right top, from(#6cc), to(#3cf)); 
 384 |         background-image: -webkit-linear-gradient(left, #6cc, #3cf); 
 385 |         background-image:    -moz-linear-gradient(left, #6cc, #3cf); 
 386 |         background-image:     -ms-linear-gradient(left, #6cc, #3cf); 
 387 |         background-image:      -o-linear-gradient(left, #6cc, #3cf); 
 388 |         background-image:         linear-gradient(to right, #6cc, #3cf);
 389 |         border-radius:2px;
 390 |         -webkit-background-clip: padding-box; 
 391 |            -moz-background-clip: padding; 
 392 |                 background-clip: padding-box;
 393 |         }
 394 | /*
 395 |         Element: Inner range bar 
 396 |         Orientation: Horizontal
 397 |         Notes: IE6, 7 & 8
 398 | */
 399 | .oldie .fd-slider-range
 400 |         {
 401 |         /* IE6 - is this needed? To test. */ 
 402 |         _left:10px;
 403 |         filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff66cccc',endColorstr='#ff33ccff');
 404 |         }
 405 | /*
 406 |         Element: Inner range bar 
 407 |         Orientation: Vertical
 408 | */
 409 | .fd-slider-vertical .fd-slider-range
 410 |         {
 411 |         height:auto;
 412 |         width:2px;
 413 |         top:auto;        
 414 |         right:auto;
 415 |         bottom:11px;
 416 |         left:9px;        
 417 |         background-image: -webkit-gradient(linear, left top, left bottom, from(#3cf), to(#6cc)); 
 418 |         background-image: -webkit-linear-gradient(top, #3cf, #6cc); 
 419 |         background-image:    -moz-linear-gradient(top, #3cf, #6cc); 
 420 |         background-image:     -ms-linear-gradient(top, #3cf, #6cc); 
 421 |         background-image:      -o-linear-gradient(top, #3cf, #6cc); 
 422 |         background-image:         linear-gradient(to bottom, #3cf, #6cc);       
 423 |         }
 424 | /*
 425 |         Element: Inner range bar 
 426 |         Orientation: Vertical
 427 |         Notes: IE6, 7 & 8
 428 | */
 429 | .oldie .fd-slider-vertical .fd-slider-range
 430 |         {
 431 |         filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff66cccc',endColorstr='#ff33ccff');
 432 |         }     
 433 | /*
 434 |         Element: Drag handle 
 435 |         Orientation: Horizontal
 436 |         State: Default.
 437 |         Notes: The image sprite used for the handle is base64 encoded below. IE7
 438 |         gets its own version within the .mht file, IE6 does not use an image
 439 |         sprite and it is necessary to base64 encode individual animation frames
 440 |         within the .mht file.
 441 | */
 442 | .fd-slider-handle
 443 |         {
 444 |         position:absolute;
 445 |         display:block;
 446 |         padding:0;
 447 |         border:0 none;
 448 |         margin:0;
 449 |         z-index:3;
 450 |         top:0;
 451 |         left:0;
 452 |         width:20px;
 453 |         height:20px;
 454 |         outline:0 none;
 455 |         background-color:transparent;
 456 |         background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAABQCAYAAAAZQFV3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFFRDg4NEVDNENDODExRTFCMTZDREIyQTZDMjlDNTQ2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFFRDg4NEVENENDODExRTFCMTZDREIyQTZDMjlDNTQ2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUVEODg0RUE0Q0M4MTFFMUIxNkNEQjJBNkMyOUM1NDYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUVEODg0RUI0Q0M4MTFFMUIxNkNEQjJBNkMyOUM1NDYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz68iMNZAAAIQElEQVR42uxYW28b1xGes7tckiIp3iRboi6mbollya5DF4VsVWpaw42ABCmaogWSFH3oDyjQoijQP2AUyFOLFshbn4SqsYFabowmdaW4NhDJiKXaUuwotm6UKJK6kKIkipfl7p7OWR3aa5kiVdQoEjQLDM7u2TPfnss3MztDKKXwPC8BnvP1xQeUSnUSvGBwshl8R18Fq70PZOtx44WSn4F89hYkV6/B26ElWuIAyP4+xBKd70311tXV/bzb7+oLOcDaYiWSTSAkR0EfT9P8UDj1j8Rq/Lfw1ukx1NcOnKExs4tDbT6f75e9tc6+c05q90gEtwWRdAoyblG/k4jeVvcr76qKZePi0K9Q5ZF5pvuXLENj6xv1Pvc5n6DJyQJAQgGdjWZCuFQRwTLQ7P/W6PaLb0YBfoNd+YMAq8BR/TIpFCzhDECEgK5SeGafJAJEA0FqO+L7LgL+rhygEwE7FrMFWMqAVvY4CX6I2hoMHYDNg5es60I8Z9xXNiHd2A25PG3WInFPY9BfLRFiwePQS8AKuJEFHWA3Fl1PVOChArPT96Gp5YRDJMSFoExZ1Z8cisQ/sqOBroRnZgydMoBpGLk8mm9uDemdJzs8kkA8FgZKQMSXbFN1ZEiqQGl26eFS4cbwiKFTxvQyMPbhZPb9weHl6bsL4ZymZzRKXSKBADKbtew5+vDB8vKVwb8kPrh029A5yFIMYgO4UNrh1Nl+6H/9PBwPtUMg6DcGRBcTMDM5CzevjsDU2E3smUXZMRO7pOlh40AJoAR56+KvdxgsyiJvd/ebHinlYPlMZYPoezyTHx/a3p6xZSqHcg5fCn9ITC0xPRcvapJnLEoqASQUOczvRdM7WqQjisqfdTOwtA9M5GLhByHzMSJ/r3EghUuB92kcg5pnKHJlK4qdSxV/Lo5Tuatip5zlkjd9zBhITEtjyg5FUdx/iuVeuJQi35lTxZc2QGpkg2tAjbRJ2r9+6KGjb9bbHsqyLOzbV53RhnAwG+NcMpn0vxPVvz2pWn/sc9i6TlcRyzErCDbkZhY94CdpWhhPZO72yvnBXzeI/8RwkeDcZE5Pk0wHIOfz+ao/r6RP3M67ftLhtXb3OInFKyFXGV9xAnZ0qn0ukL2iPfS3mCri2PWfOhwTVqtV4duhC6Yly/F43H0lBa8QW1WnX6TSlqqTRQx1KHRhT/BeJw6BSl0+58mPdoXXmA4/PAOrOEPjQGKxmHtRD4aaqS5G8wRWC0B1YFvyhDXovigOpgWKftZq/0Ys9sh97Nix9SK9zLQRNzY2XEnP8QDJaSReIFTECIpbR83cZaaqUZ1q6GUF3eJnOmauPmUpu7u7FnDrwpqigygKCMimAcRMazZDjYmGY3R1T6eEpRgWUCgUVM/uZlLx1Lp8shFTCC6YFBHZwRi+hAqQ1yhYt7ZSTIdz8LGlFM1JxeXt1iUjC2FPbbMVuzFQ4SzxJX0SU9g3VJzdFm7u0VQszHT4CWtFSynao+JwOBKdCzMfp1w1L6iB5oATQ4nXQowoZwDrBMEpwSCsy4n4Wmv8848dDd4EN0N9b+57gIZ9NjU1JTvU7YmWR7dv5FcWV8NZVUurGrXjXtYiH1mbVnWajUc2XA/GP2rKbNxmOhxQNdsyAy20tbVtz8/Pz21PTV1zfBLfnm/s6rlzpKVxq7q2mg1yb69v16wtRFoj98fbIXsreOrUHNPhTuKpPWTT1TweT66rq2sdN3oaPvts2zf19xm0ngAeqpOHhjRaRRTNba6zszOMYxNMx+TSaDEEPOW+kFvyxMSEc2VlpZqRXVVVm/F1ScrV19dvNTQ0bJ85cyZdU1OjmNwXmAGfu4M1u3Ld1P5XIWA/MP1CRL0vcZ5y4cKFZuTcq6Io9qEYeYqmaTMot5Cb165fv374PGVgYOAckvdntbW1fdjKaOMicpABUuSoMjs7O5pKpX6PoJXzlJ6enrbq6upfIIG/iYA2FtlYIEMww9lin4h9F6anpy04dq1inoKzeQMBe1HJiksTstnsfgrhDy2Rg8FgP5roj/D5nbJ5isVieRk/aNnZ2SHpdFo/4HePNRa/338e2z+UzVMQsAPBBASrRGzCf0jL5yk4o1LLLHnx2ZfPUxAs7na7fThT/iN7MBiuZK0SD5Wtra37CNiJ3COMKgx034+98YwujSLgg4p5SiQSGXW5XCGkTTueNEF5Csj4qqIA8nB+aWnpmTxlP2AGfy0m7Xb7MN7/AEGDgiAQm80GbAuQJjSXywGOCSO5h8Ph8J1D5ylIif5AIHDe6/W2V1VVGXlKJpNJbG5uzkaj0ZFEIvFVnvJ/67H/p6WqWvAd/TpY7V0gWxt5qSoC+ex9SK7egbdD64cNAYLzvakTdXV13+v2u7pCDrC0WInAS1V0HNOKoXDqbmI1fhXeOj2D+nqlUlU9xpHv99Y6u845qeyRGCcfl6pIv5NYva3u0LuqIm1cHPojqkTLhQAJGlvP1vvcnT5Bk3ipipYoVYkDzf7u0e0X+9FcLvPfuZKAVnBUn0QvIPJSFS1TqhLbjvheQsC/lgO0IWCAl6r0Q5Sq/DylSx8EaPkPS1XAU+GypapNT2PQdchS1ValUlUBZqeXoKmliZeqoEypiirhmYh5/0oB5mDk8r18c2ub3nkyUKFUtVa4MXyPp7UHml4exj6cy74/OL48fTcezmnUVKoCU6lqY/nK4Fjig0ufm4P8QSGAlQbq4dTZbuh//WtwPFQPgaCLl6p2YGYyBjev3oOpsU+xJ8Yib6UQIHAq+FCO8tZeDNsoLNFZ5W1uv+mVCwHFgobNRI0C3zO2TPWrEGBc/xZgAJyadcoLu6zuAAAAAElFTkSuQmCC);
 457 |         background-position:0 0;
 458 |         cursor:W-resize;  
 459 |         line-height:20px;
 460 |         font-size:10px;       
 461 |         -moz-outline:0 none;
 462 |         -webkit-touch-callout: none;        
 463 |           -webkit-user-select: none;
 464 |            -khtml-user-select: none;
 465 |              -moz-user-select: none;
 466 |               -ms-user-select: none;
 467 |                -o-user-select: none;
 468 |                   user-select: none;                                 
 469 |         }
 470 | /*
 471 |         Element: Drag handle 
 472 |         Orientation: Horizontal
 473 |         State: Default
 474 |         Notes: IE6, 7 & 8 use a nasty expression in order to not draw focus 
 475 |         outline on drag handle. 
 476 | */
 477 | .oldie .fd-slider-handle
 478 |         {
 479 |         /* IE6 & 7 - set the handle sprite as the background image */ 
 480 |         
 481 |         /* 
 482 |            If using the .mht file then uncomment the following rule and edit the 
 483 |            filepath to match the absolute path to the fd-slider.mht file on your 
 484 |            server (replace "www.your-domain.com/the/path/to/") 
 485 |         */        
 486 |         
 487 |         /*
 488 |         
 489 |         *background-image:url(mhtml:http://www.your-domain.com/the/path/to/fd-slider.mht!fullsprite);
 490 |         
 491 |         */
 492 |         
 493 |         /* 
 494 |            If not using the .mht file then uncomment the following rule and edit 
 495 |            the filepath to match the absolute path to the fd-slider-sprite.png 
 496 |            file on your server (replace "www.your-domain.com/the/path/to/") 
 497 |         */
 498 |                 
 499 |         /* 
 500 |         
 501 |         *background-image:url(http://www.your-domain.com/the/path/to/fd-slider-sprite.png);
 502 |         
 503 |         */        
 504 |         
 505 |         /**********************************************************************/
 506 |                 
 507 |         /* IE6 - reset the background image sprite stipulated above. */
 508 |         _background-image:none;
 509 | 
 510 |         /* 
 511 |            IE6 - use the AlphaImageLoader to either load a base64 encoded image 
 512 |            from the .mht file or a normal png image from the server 
 513 |         */
 514 |         
 515 |         /* 
 516 |            If using the .mht file then uncomment the following rule and edit the 
 517 |            filepath to match the absolute path to the fd-slider.mht file on your 
 518 |            server (replace "www.your-domain.com/the/path/to/") 
 519 |         */ 
 520 |         
 521 |         /*
 522 |                
 523 |         _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='mhtml:http://www.your-domain.com/the/path/to/fd-slider.mht!handlenormal');
 524 |         
 525 |         */
 526 |         
 527 |         /* 
 528 |            If not using the .mht file then uncomment the following rule and edit 
 529 |            the filepath to match the absolute path to the fd-handle-normal.png
 530 |            file on your server (replace "www.your-domain.com/the/path/to/") 
 531 |         */        
 532 |         
 533 |         /*
 534 |         
 535 |         _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.your-domain.com/the/path/to/fd-handle-normal.png');
 536 |         
 537 |         */
 538 |         
 539 |         /* IE6, 7 & 8 */
 540 |         outline:expression(hideFocus='true');
 541 |         }       
 542 | /*
 543 |         Element: Drag handle 
 544 |         Orientation: Horizontal & Vertical
 545 |         State: Focused
 546 |         Notes: Attempts to remove the focus outline, remove the rule if it
 547 |         offends your sensibilities.
 548 | */
 549 | .fd-slider-handle:focus
 550 |         {
 551 |         outline:0 none;
 552 |         border:0 none;
 553 |         -moz-user-focus:normal;
 554 |         }
 555 | .fd-slider-handle:focus::-moz-focus-inner 
 556 |         { 
 557 |         border-color: transparent; 
 558 |         }
 559 | /*
 560 |         Element: Drag handle 
 561 |         Orientation: Horizontal
 562 |         State: Focused and Hovered and also while handle is animating into 
 563 |         position or being dragged.
 564 |         Notes: I'm using the same image for focused, hover and active states
 565 |         but you can, of course, go wild.
 566 | */
 567 | .fd-slider-focused .fd-slider-handle,
 568 | .fd-slider-hover   .fd-slider-handle,
 569 | .fd-slider-active  .fd-slider-handle
 570 |         {
 571 |         background-position:0 -20px;
 572 |         }
 573 | /*
 574 |         Element: Drag handle 
 575 |         Orientation: Horizontal
 576 |         State: Focused and Hovered and also while handle is animating into 
 577 |         position or being dragged.
 578 |         Notes: IE6 only.
 579 | */
 580 | .oldie .fd-slider-focused .fd-slider-handle,
 581 | .oldie .fd-slider-hover   .fd-slider-handle,
 582 | .oldie .fd-slider-active  .fd-slider-handle
 583 |         {
 584 |         /* 
 585 |            IE6 - use the AlphaImageLoader to either load a base64 encoded image 
 586 |            from the .mht file or a normal png image from the server 
 587 |         */
 588 |         
 589 |         /* 
 590 |            If using the .mht file then uncomment the following rule and edit the 
 591 |            filepath to match the absolute path to the fd-slider.mht file on your 
 592 |            server (replace "www.your-domain.com/the/path/to/") 
 593 |         */ 
 594 |         
 595 |         /*
 596 |         
 597 |         _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='mhtml:http://www.your-domain.com/the/path/to/fd-slider.mht!handleglow');
 598 |         
 599 |         */
 600 |         
 601 |         /* 
 602 |            If not using the .mht file then uncomment the following rule and edit 
 603 |            the filepath to match the absolute path to the fd-handle-glow.png
 604 |            file on your server (replace "www.your-domain.com/the/path/to/") 
 605 |         */        
 606 |         
 607 |         /*
 608 |         
 609 |         _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.your-domain.com/the/path/to/fd-handle-glow.png');
 610 | 
 611 |         */
 612 |         }
 613 | /*
 614 |         Element: Drag handle 
 615 |         Orientation: Vertical
 616 |         Notes: Change the cursor to the correct icon.
 617 | */
 618 | .fd-slider-vertical .fd-slider-handle
 619 |         {
 620 |         cursor:N-resize;
 621 |         }
 622 | /*
 623 |         Element: Drag handle 
 624 |         Orientation: Vertical
 625 |         Notes: IE6, 7 & 8
 626 |          
 627 | .oldie .fd-slider-vertical .fd-slider-handle
 628 |         {
 629 |         }
 630 | */
 631 | /*
 632 |         Element: Drag handle 
 633 |         Orientation: Vertical
 634 |         State: Focused and Hovered and also while handle is animating into 
 635 |         position or being dragged.
 636 |  
 637 | .fd-slider-vertical .fd-slider-focused .fd-slider-handle,
 638 | .fd-slider-vertical .fd-slider-hover   .fd-slider-handle,
 639 | .fd-slider-vertical .fd-slider-active  .fd-slider-handle
 640 |         {
 641 |         }
 642 | */
 643 | /*
 644 |         Element: Drag handle 
 645 |         Orientation: Vertical
 646 |         State: Focused and Hovered and also while handle is animating into 
 647 |         position or being dragged.
 648 |         Notes: IE6, 7 & 8
 649 |  
 650 | .oldie .fd-slider-vertical .fd-slider-focused .fd-slider-handle,
 651 | .oldie .fd-slider-vertical .fd-slider-hover   .fd-slider-handle,
 652 | .oldie .fd-slider-vertical .fd-slider-active  .fd-slider-handle
 653 |         {
 654 |         }
 655 | */
 656 | /*
 657 |         Element: Drag handle 
 658 |         Orientation: Horizontal & Vertical
 659 |         State: User has not yet used the slider to set a value
 660 |         Notes: I screwed the positioning of the image sprite by 1px which is why
 661 |         it's -59px and not -60px. Yeah - I suck at Photoshop.      
 662 | */
 663 | .fd-slider-no-value .fd-slider-handle
 664 |         {
 665 |         background-position:0 -59px;
 666 |         }
 667 | /*
 668 |         Element: Drag handle 
 669 |         Orientation: Horizontal
 670 |         State: User has not yet used the slider to set a value
 671 |         Notes: IE6 only
 672 | */
 673 | .oldie .fd-slider-no-value .fd-slider-handle
 674 |         {
 675 |         /* 
 676 |            IE6 - use the AlphaImageLoader to either load a base64 encoded image 
 677 |            from the .mht file or a normal png image from the server 
 678 |         */
 679 |         
 680 |         /* 
 681 |            If using the .mht file then uncomment the following rule and edit the 
 682 |            filepath to match the absolute path to the fd-slider.mht file on your 
 683 |            server (replace "www.your-domain.com/the/path/to/") 
 684 |         */ 
 685 |         
 686 |         /*
 687 |         
 688 |         _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='mhtml:http://www.your-domain.com/the/path/to/fd-slider.mht!handlenovalue');
 689 |         
 690 |         */
 691 |         
 692 |         /* 
 693 |            If not using the .mht file then uncomment the following rule and edit 
 694 |            the filepath to match the absolute path to the fd-handle-no-value.png
 695 |            file on your server (replace "www.your-domain.com/the/path/to/") 
 696 |         */        
 697 |         
 698 |         /*
 699 |         
 700 |         _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.your-domain.com/the/path/to/fd-handle-no-value.png');
 701 | 
 702 |         */
 703 |         }
 704 | /*
 705 |         Element: Drag handle 
 706 |         Orientation: Vertical
 707 |         State: User has not yet used the slider to set a value
 708 |         Notes: IE6, 7 & 8. Only required should you use a different image for
 709 |         vertical sliders.
 710 |         
 711 | .oldie .fd-slider-vertical .fd-slider-no-value .fd-slider-handle
 712 |         {
 713 |         }        
 714 | */ 
 715 | /*
 716 |         Element: document.body
 717 |         Orientation: Horizontal and  Vertical
 718 |         Notes: Class given to body to change cursor style when dragging. It also
 719 |         attempts to stop text selection while dragging. 
 720 | */
 721 | body.fd-slider-drag-horizontal,
 722 | body.fd-slider-drag-horizontal *,
 723 | body.fd-slider-drag-vertical,
 724 | body.fd-slider-drag-vertical *
 725 |         {
 726 |         cursor:N-resize !important;
 727 |         -webkit-user-select: none;
 728 |            -moz-user-select: none;
 729 |             -ms-user-select: none;
 730 |              -o-user-select: none;
 731 |                 user-select: none;
 732 |         }
 733 | /*
 734 |         Element: document.body
 735 |         Orientation: Horizontal
 736 |         Notes: Class given to body to change cursor style when dragging 
 737 | */
 738 | body.fd-slider-drag-horizontal,
 739 | body.fd-slider-drag-horizontal *
 740 |         {
 741 |         cursor:W-resize !important;
 742 |         }
 743 | /*
 744 |         Element: Inner wrapper
 745 |         Orientation: Horizontal & Vertical
 746 |         State: disabled
 747 |         Notes: Class given to slider when disabled
 748 | */  
 749 | .fd-slider-disabled
 750 |         {
 751 |         opacity:.8;
 752 |         cursor:default;
 753 |         }
 754 | /*
 755 |         Element: Drag handle
 756 |         Orientation: Horizontal
 757 |         State: disabled
 758 |         Notes: Class given to slider when disabled
 759 | */ 
 760 | .fd-slider-disabled .fd-slider-handle
 761 |         {
 762 |         cursor:default !important;
 763 |         background-position:0 -40px;
 764 |         opacity:1;
 765 |         }
 766 | /*
 767 |         Element: Drag handle
 768 |         Orientation: Horizontal
 769 |         State: disabled
 770 |         Notes: IE6 only
 771 | */ 
 772 | .oldie .fd-slider-disabled .fd-slider-handle
 773 |         {
 774 |         /* 
 775 |            IE6 - use the AlphaImageLoader to either load a base64 encoded image 
 776 |            from the .mht file or a normal png image from the server 
 777 |         */
 778 |         
 779 |         /* 
 780 |            If using the .mht file then uncomment the following rule and edit the 
 781 |            filepath to match the absolute path to the fd-slider.mht file on your 
 782 |            server (replace "www.your-domain.com/the/path/to/") 
 783 |         */ 
 784 |         
 785 |         /*
 786 |         
 787 |         _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='mhtml:http://www.your-domain.com/the/path/to/fd-slider.mht!handledisabled');
 788 |         
 789 |         */
 790 |         
 791 |         /* 
 792 |            If not using the .mht file then uncomment the following rule and edit 
 793 |            the filepath to match the absolute path to the fd-handle-disabled.png
 794 |            file on your server (replace "www.your-domain.com/the/path/to/") 
 795 |         */        
 796 |         
 797 |         /*
 798 |         
 799 |         _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.your-domain.com/the/path/to/fd-handle-disabled.png');
 800 | 
 801 |         */
 802 |         }
 803 | /*
 804 |         Element: Drag handle
 805 |         Orientation: Vertical
 806 |         State: disabled
 807 |         
 808 | .fd-slider-vertical .fd-slider-disabled .fd-slider-handle
 809 |         {
 810 |         }
 811 | .oldie .fd-slider-vertical .fd-slider-disabled .fd-slider-handle
 812 |         {
 813 |         }
 814 | */ 
 815 | /*
 816 |         Element: Inner track bar
 817 |         Orientation: Horizontal
 818 |         State: disabled
 819 | */ 
 820 | .fd-slider-disabled .fd-slider-bar
 821 |         {
 822 |         cursor:auto !important;
 823 |         border:1px solid #888;
 824 |         border-bottom:1px solid #999;
 825 |         border-right:1px solid #999;
 826 |         border:1px solid rgba(136,136,136,.8);
 827 |         border-bottom:1px solid rgba(153,153,153,.8);
 828 |         border-right:1px solid rgba(153,153,153,.8);
 829 |         background-color:#555;
 830 |         background-image: -webkit-gradient(linear, left top, right top, from(#666), to(#333)); 
 831 |         background-image: -webkit-linear-gradient(left, #666, #333); 
 832 |         background-image:    -moz-linear-gradient(left, #666, #333); 
 833 |         background-image:     -ms-linear-gradient(left, #666, #333); 
 834 |         background-image:      -o-linear-gradient(left, #666, #333); 
 835 |         background-image:         linear-gradient(to right, #666, #333);
 836 |         }
 837 | /*
 838 |         Element: Inner track bar
 839 |         Orientation: Vertical
 840 |         State: disabled
 841 | */ 
 842 | .fd-slider-vertical .fd-slider-disabled .fd-slider-bar
 843 |         {
 844 |         background-image: -webkit-gradient(linear, left top, right bottom, from(#333), to(#666)); 
 845 |         background-image: -webkit-linear-gradient(top, #333, #666); 
 846 |         background-image:    -moz-linear-gradient(top, #333, #666); 
 847 |         background-image:     -ms-linear-gradient(top, #333, #666); 
 848 |         background-image:      -o-linear-gradient(top, #333, #666); 
 849 |         background-image:         linear-gradient(to bottom, #333, #666);
 850 |         }
 851 | /*
 852 |         Element: Inner track bar
 853 |         Orientation: Horizontal
 854 |         State: disabled
 855 |         Notes: IE6, 7 & 8
 856 | */
 857 | .oldie .fd-slider-disabled .fd-slider-bar
 858 |         {
 859 |         filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff666666',endColorstr='#ff333333');
 860 |         }
 861 | /*
 862 |         Element: Inner track bar
 863 |         Orientation: Vertical
 864 |         State: disabled
 865 |         Notes: IE6, 7 & 8
 866 | */
 867 | .oldie .fd-slider-vertical .fd-slider-disabled .fd-slider-bar
 868 |         {
 869 |         filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff666666',endColorstr='#ff333333');
 870 |         }
 871 | /*
 872 |         Element: Range bar
 873 |         Orientation: Horizontal
 874 |         State: disabled
 875 | */
 876 | .fd-slider-disabled .fd-slider-range
 877 |         {
 878 |         cursor:auto !important;
 879 |         background-color:#222;
 880 |         background-image: -webkit-gradient(linear, left top, right top, from(#222), to(#000)); 
 881 |         background-image: -webkit-linear-gradient(left, #222, #000); 
 882 |         background-image:    -moz-linear-gradient(left, #222, #000); 
 883 |         background-image:     -ms-linear-gradient(left, #222, #000); 
 884 |         background-image:      -o-linear-gradient(left, #222, #000); 
 885 |         background-image:         linear-gradient(to right, #222, #000);
 886 |         }
 887 | /*
 888 |         Element: Range bar
 889 |         Orientation: Horizontal
 890 |         State: disabled
 891 |         Notes: IE6, 7 & 8
 892 | */
 893 | .oldie .fd-slider-disabled .fd-slider-range
 894 |         {
 895 |         filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff222222',endColorstr='#ff000000');
 896 |         }
 897 | /*
 898 |         Element: Range bar
 899 |         Orientation: Vertical
 900 |         State: disabled
 901 | */
 902 | .fd-slider-vertical .fd-slider-disabled .fd-slider-range
 903 |         {
 904 |         background-image: -webkit-gradient(linear, left top, right bottom, from(#000), to(#222)); 
 905 |         background-image: -webkit-linear-gradient(top, #000, #222); 
 906 |         background-image:    -moz-linear-gradient(top, #000, #222); 
 907 |         background-image:     -ms-linear-gradient(top, #000, #222); 
 908 |         background-image:      -o-linear-gradient(top, #000, #222); 
 909 |         background-image:         linear-gradient(to bottom, #000, #222);     
 910 |         }
 911 | /*
 912 |         Element: Range bar
 913 |         Orientation: Vertical
 914 |         State: disabled
 915 |         Notes: IE6, 7 & 8
 916 | */
 917 | .oldie .fd-slider-vertical .fd-slider-disabled .fd-slider-range
 918 |         {
 919 |         filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ff222222',endColorstr='#ff000000');
 920 |         }
 921 | /* 
 922 |         The various prefixed keyframe rules for the glow effect used whenever
 923 |         the slider gains keyboard focus
 924 | */
 925 | @-webkit-keyframes fd-pulse {
 926 | 0%      {
 927 |         box-shadow:0 0 3px rgba(100, 130, 170, 0.55);
 928 |         }
 929 | 20%     {
 930 |         box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
 931 |         }
 932 | 40%     {
 933 |         box-shadow:0 0 5px rgba(40, 130, 170, 0.65);
 934 |         }
 935 | 60%     {
 936 |         box-shadow:0 0 6px rgba(10, 130, 170, 0.7);
 937 |         }
 938 | 80%     {
 939 |         box-shadow:0 0 5px rgba(40, 130, 170, 0.65);
 940 |         }
 941 | 100%    {
 942 |         box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
 943 |         }
 944 | }
 945 | @-moz-keyframes fd-pulse {
 946 | 0%      {
 947 |         box-shadow:0 0 3px rgba(100, 130, 170, 0.55);
 948 |         }
 949 | 20%     {
 950 |         box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
 951 |         }
 952 | 40%     {
 953 |         box-shadow:0 0 5px rgba(40, 130, 170, 0.65);
 954 |         }
 955 | 60%     {
 956 |         box-shadow:0 0 6px rgba(10, 130, 170, 0.7);
 957 |         }
 958 | 80%     {
 959 |         box-shadow:0 0 5px rgba(40, 130, 170, 0.65);
 960 |         }
 961 | 100%    {
 962 |         box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
 963 |         }
 964 | }
 965 | @-ms-keyframes fd-pulse {
 966 | 0%      {
 967 |         box-shadow:0 0 3px rgba(100, 130, 170, 0.55);
 968 |         }
 969 | 20%     {
 970 |         box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
 971 |         }
 972 | 40%     {
 973 |         box-shadow:0 0 5px rgba(40, 130, 170, 0.65);
 974 |         }
 975 | 60%     {
 976 |         box-shadow:0 0 6px rgba(10, 130, 170, 0.7);
 977 |         }
 978 | 80%     {
 979 |         box-shadow:0 0 5px rgba(40, 130, 170, 0.65);
 980 |         }
 981 | 100%    {
 982 |         box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
 983 |         }
 984 | }
 985 | @-o-keyframes fd-pulse {
 986 | 0%      {
 987 |         box-shadow:0 0 3px rgba(100, 130, 170, 0.55);
 988 |         }
 989 | 20%     {
 990 |         box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
 991 |         }
 992 | 40%     {
 993 |         box-shadow:0 0 5px rgba(40, 130, 170, 0.65);
 994 |         }
 995 | 60%     {
 996 |         box-shadow:0 0 6px rgba(10, 130, 170, 0.7);
 997 |         }
 998 | 80%     {
 999 |         box-shadow:0 0 5px rgba(40, 130, 170, 0.65);
1000 |         }
1001 | 100%    {
1002 |         box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
1003 |         }
1004 | }
1005 | 


--------------------------------------------------------------------------------