RubyGems - survivalkit - Versions diffs - 0.3.3 → 0.3.4 - Mend

survivalkit 0.3.3 → 0.3.4

Files changed (1167) hide show

data/templates/drupal/sources/pie/tests/border-image-test.html DELETED

@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title></title>
-    <meta content="">
-    <style>
-        html, body {
-            position: relative;
-            height: 100%;
-            padding: 0;
-        }
-        div {
-            padding: 1em;
-            margin: 1em;
-            background: #CCC;
-            border-width: 20px;
-            border-bottom-width: 30px;
-            height:15%;
-            behavior:url(../build/PIE_uncompressed.htc);
-        }
-        #test1 {
-            border-image: url(border.png) 27 fill stretch;
-            border-image: url(border.png) 27 fill stretch;
-            -moz-border-image: url(border.png) 27 stretch;
-            -webkit-border-image: url(border.png) 27 stretch;
-        }
-        #test2 {
-            border-image: url(border.png) 27 repeat;
-            border-image: url(border.png) 27 repeat;
-            -moz-border-image: url(border.png) 27 repeat;
-            -webkit-border-image: url(border.png) 27 repeat;
-        }
-        #test3 {
-            border-image: url(border.png) 27 round;
-            border-image: url(border.png) 27 round;
-            -moz-border-image: url(border.png) 27 round;
-            -webkit-border-image: url(border.png) 27 round;
-        }
-    </style>
-</head>
-<body>
-    <div id="test1">test 1</div>
-    <div id="test2">test 2</div>
-    <div id="test3">test 3</div>
-</body>
-</html>

data/templates/drupal/sources/pie/tests/border.png DELETED

Binary file

data/templates/drupal/sources/pie/tests/border2.png DELETED

Binary file

data/templates/drupal/sources/pie/tests/box-shadow-tests.html DELETED

@@ -1,166 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
-    <title>Test cases for box-shadow</title>
-    <style type="text/css">
-        .w3cSpec {
-            border:5px solid blue;
-            background-color:#FFA500;
-            width: 144px;
-            height: 144px;
-            margin: 0 40px 40px 184px;
-            behavior: url(../build/PIE.htc);
-        }
-        .w3cSpecRound {
-            -webkit-border-radius: 20px;
-            -moz-border-radius: 20px;
-            border-radius: 20px;
-            clear: left;
-            float: left;
-            margin-left: 0;
-        }
-        .w3cSpecOutset {
-            -webkit-box-shadow: rgba(0,0,0,0.4) 10px 10px;
-            -moz-box-shadow: rgba(0,0,0,0.4) 10px 10px;
-            box-shadow: rgba(0,0,0,0.4) 10px 10px;
-        }
-        .w3cSpecInset {
-            -webkit-box-shadow: rgba(0,0,0,0.4) 10px 10px inset;
-            -moz-box-shadow: rgba(0,0,0,0.4) 10px 10px inset;
-            box-shadow: rgba(0,0,0,0.4) 10px 10px inset;
-        }
-        .w3cSpecOutsetSpread {
-            -webkit-box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px;
-            -moz-box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px;
-            box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px;
-        }
-        .w3cSpecInsetSpread {
-            -webkit-box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px inset;
-            -moz-box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px inset;
-            box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px inset;
-        }
-        #elektroNotdienst {
-            background: khaki;
-            padding: 2em;
-        }
-        #elektroNotdienst div {
-            width: 8em;
-            font: small "Courier New", "Nimbus Mono L", FreeMono, "Luxi Mono";
-            padding: 0.5em;
-            margin: 1.6em 0;
-            background: white;
-            white-space: pre;
-            behavior: url(../build/PIE.htc);
-            position: relative;
-        }
-    </style>
-</head>
-<body>
-    <h1>Tests for box-shadow</h1>
-    <div id="w3cTests">
-        <h2>Examples from W3C <a href="http://dev.w3.org/csswg/css3-background/#box-shadow-samples">spec</a></h2>
-        <div class="w3cSpec w3cSpecOutset w3cSpecRound"></div>
-        <div class="w3cSpec w3cSpecOutset"></div>
-        <div class="w3cSpec w3cSpecInset w3cSpecRound"></div>
-        <div class="w3cSpec w3cSpecInset"></div>
-        <div class="w3cSpec w3cSpecOutsetSpread w3cSpecRound"></div>
-        <div class="w3cSpec w3cSpecOutsetSpread"></div>
-        <div class="w3cSpec w3cSpecInsetSpread w3cSpecRound"></div>
-        <div class="w3cSpec w3cSpecInsetSpread"></div>
-    </div>
-    <div id="elektroNotdienst">
-        <h2>Examples from <a href="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html">Elektro-Notdienst test document</a></h2>
-        <div>0.5em -0.5em 0.4em red,
-0.5em  0.5em 0.4em yellow,
--0.5em  0.5em 0.4em lime,
--0.5em -0.5em 0.4em blue;</div>
-        <div>0 0 0 0.5em;</div>
-        <div>0 0 1em;</div>
-        <div>1em 0.5em;</div>
-        <div>1em 0.5em 1em;</div>
-        <div>0.3em 0.3em silver;</div>
-        <div>0.3em 0.3em 0 0.6em silver;</div>
-        <div>0 0 1em maroon;</div>
-        <div>0 0 1em 0.5em maroon;</div>
-        <div>-0.4em -0.4em 1em olive;</div>
-        <div>0.4em 0.4em 1em olive;</div>
-        <div>0.4em 0.4em 1em -0.2em olive;</div>
-        <div>0.4em 0.4em 1em 0.4em olive;</div>
-        <div>inset 0 0 0.5em blue;</div>
-        <div>inset 0 0 1em blue;</div>
-        <div>inset 0 0 2em blue;</div>
-        <div>inset 0 2em 3em -1em green;</div>
-        <div>inset 0 2em 3em -2em green;</div>
-        <div>inset 0 2em 3em -3em green;</div>
-        <div>inset 0 0 1em khaki, inset 0 0 1em khaki, inset 0 0 1em khaki, inset 0 0 1em khaki;</div>
-        <div>inset 0 2em 3em -1.5em green, inset 0 -2em 3em -2em blue;</div>
-        <div>inset 1em 1em 2em -1em blue;</div>
-        <div>inset 1em 1em 2em -1em blue, inset -1em -1em 2em -1em red;</div>
-        <div style="background:red;">inset 0 2em 3em -2em white, inset 0 -2em 3em -2.5em black; /* background:red */</div>
-        <div style="background:red;">inset 1em 1em 1em -1em white, inset -1em -1em 1em -1em black; /* background:red */</div>
-        <div style="background:red;">inset -1em -1em 1em -1em black, inset 1em 1em 1em -1em white; /* background:red */</div>
-        <div>inset -3em 0 3em -2em blue;</div>
-        <div>0.2em 0.2em 0.7em black, inset 0 0 0.7em red;</div>
-        <script type="text/javascript">
-            (function() {
-                var S= "";
-                var D= document.getElementById("elektroNotdienst").getElementsByTagName("div");
-                for(var i=0; S=D[i] && D[i].firstChild.data; i++) {
-                    D[i].style.cssText += "; -moz-box-shadow:" + S + "-webkit-box-shadow:" + S + "box-shadow:" + S;
-                }
-            })();
-        </script>
-    </div>
-    <div id="misc">
-        <h2>Miscellaneous</h2>
-        <style type="text/css">
-            #misc div {
-                behavior: url(../build/PIE.htc);
-            }
-            #misc1 {
-                margin: 16px;
-                padding: 20px;
-                -webkit-border-radius: 20px;
-                -moz-border-radius: 20px;
-                border-radius: 20px;
-                background: #EEE;
-                width: 400px;
-                -webkit-box-shadow: 0 0 0 2px blue, 0 0 0 4px red, 0 0 0 6px green, 0 0 0 8px yellow, 0 0 0 10px purple, 0 0 0 12px olive, 0 0 0 14px aqua, 0 0 0 16px black;
-                -moz-box-shadow: 0 0 0 2px blue, 0 0 0 4px red, 0 0 0 6px green, 0 0 0 8px yellow, 0 0 0 10px purple, 0 0 0 12px olive, 0 0 0 14px aqua, 0 0 0 16px black;
-                box-shadow: 0 0 0 2px blue, 0 0 0 4px red, 0 0 0 6px green, 0 0 0 8px yellow, 0 0 0 10px purple, 0 0 0 12px olive, 0 0 0 14px aqua, 0 0 0 16px black;
-            }
-        </style>
-        <div id="misc1">Faking multiple borders with box-shadow</div>
-    </div>
-</body>
-</html>

data/templates/drupal/sources/pie/tests/buttons.html DELETED

@@ -1,735 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
-    <title>Styled Buttons</title>
-    <style type="text/css">
-        html, body {
-            font-size: 11px;
-            font-family: sans-serif;
-        }
-        .section {
-            margin: 2em 0;
-            border: 1px solid #CCC;
-            padding: 2em;
-            overflow: hidden;
-            zoom: 1;
-        }
-        h2 {
-            font-size: 1.1em;
-            margin: 0 0 2em;
-        }
-        .button {
-            background: none;
-            border: 0;
-            padding: 0;
-            text-decoration: none;
-            color: inherit;
-            font-family: inherit;
-            font-size: 11px;
-            margin-right: 2em;
-            cursor: pointer;
-            overflow: visible; /* prevent extra horizontal padding in IE */
-            behavior: url(../build/PIE.htc);
-            white-space: nowrap;
-            position: relative;
-            -pie-lazy-init: true;
-        }
-        .button::-moz-focus-inner { /* prevent extra padding in Firefox */
-            padding: 0;
-            border: 0;
-        }
-        #test1 .button {
-            background: #EFD;
-            background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EFD), to(#BF6));
-            background: -moz-linear-gradient(#EFD, #BF6);
-            background: linear-gradient(#EFD, #BF6);
-            -pie-background: linear-gradient(#EFD, #BF6);
-            color: #09700B;
-            font-size: 14px;
-            padding: 12px;
-            -webkit-border-radius: 5px;
-            -moz-border-radius: 5px;
-            border-radius: 5px;
-            border: 1px solid #87C462;
-            -webkit-box-shadow: #C0C0C0 3px 3px 6px;
-            -moz-box-shadow: #C0C0C0 3px 3px 6px;
-            box-shadow: #C0C0C0 3px 3px 6px;
-        }
-        #test1 .button:hover,
-        #test1 .button.pie_hover {
-            border-width: 2px;
-            padding: 11px;
-        }
-        #test2 .button {
-            padding: 2px 10px;
-            font-weight: bold;
-            font-size: 11px;
-            line-height: 15px;
-            background: #EEE;
-            color: #333;
-            border: 1px solid #FFF;
-            -webkit-border-radius: 3px;
-            -webkit-border-radius: 3px;
-            -moz-border-radius: 3px;
-            border-radius: 3px;
-            -webkit-box-shadow: #666 0 0 4px;
-            -moz-box-shadow: #666 0 0 4px;
-            box-shadow: #666 0 0 4px;
-        }
-        #test2 .button:hover,
-        #test2 .button.pie_hover {
-            -webkit-box-shadow: #333 0 0 6px;
-            -moz-box-shadow: #333 0 0 6px;
-            box-shadow: #333 0 0 6px;
-        }
-        #test3 .button {
-            border: 1px solid #AEAEAE;
-            -webkit-border-radius: 5px;
-            -moz-border-radius: 5px;
-            border-radius: 5px;
-            font-weight: bold;
-            color: #666;
-            padding: 4px 12px;
-            /*text-shadow: #FFF 0 -1px;*/
-            background: #E6E6E6;
-            background: -webkit-gradient(linear, left top, left bottom, from(#FDFDFD), color-stop(0.4, #E6E6E6), color-stop(0.6, #D6D6D6), to(#CECECE));
-            background: -moz-linear-gradient(#FDFDFD, #E6E6E6 40%, #D6D6D6 60%, #CECECE);
-            background: linear-gradient(#FDFDFD, #E6E6E6 40%, #D6D6D6 60%, #CECECE);
-            -pie-background: linear-gradient(#FDFDFD, #E6E6E6 40%, #D6D6D6 60%, #CECECE);
-            -webkit-box-shadow: 0 0 0 2px rgba(220, 220, 220, 0.25);
-            -moz-box-shadow: 0 0 0 2px rgba(220, 220, 220, 0.25);
-            box-shadow: 0 0 0 2px rgba(220, 220, 220, 0.25);
-        }
-        #test3 .button:hover,
-        #test3 .button.pie_hover {
-            -webkit-box-shadow: 0 0 0 2px rgba(220, 220, 220, 0.75);
-            -moz-box-shadow: 0 0 0 2px rgba(220, 220, 220, 0.75);
-            box-shadow: 0 0 0 2px rgba(220, 220, 220, 0.75);
-        }
-        #test3 .style2 .button {
-            color: #FFF;
-            /*text-shadow: #AB2525 0 -1px;*/
-            border-color: #AB2525;
-            background: #D50623;
-            background: -webkit-gradient(linear, left top, left bottom, from(#EA655E), color-stop(0.4, #EA655E), color-stop(0.6, #D50623), to(#D50623));
-            background: -moz-linear-gradient(#EA655E, #EA655E 40%, #D50623 60%, #D50623);
-            background: linear-gradient(#EA655E, #EA655E 40%, #D50623 60%, #D50623);
-            -pie-background: linear-gradient(#EA655E, #EA655E 40%, #D50623 60%, #D50623);
-        }
-        #test3 .style3 .button {
-            color: #FFF;
-            /*text-shadow: #3774C8 0 -1px;*/
-            border-color: #3774C8;
-            background: #097FEB;
-            background: -webkit-gradient(linear, left top, left bottom, from(#B0D2EF), color-stop(0.4, #44A4E8), color-stop(0.6, #168CE6), to(#097FEB));
-            background: -moz-linear-gradient(#B0D2EF, #44A4E8 40%, #168CE6 60%, #097FEB);
-            background: linear-gradient(#B0D2EF, #44A4E8 40%, #168CE6 60%, #097FEB);
-            -pie-background: linear-gradient(#B0D2EF, #44A4E8 40%, #168CE6 60%, #097FEB);
-        }
-        #test3 .style4 .button {
-            color: #FFF;
-            /*text-shadow: #DFB844 0 -1px;*/
-            border-color: #DFB844;
-            background: #EDD077;
-            background: -webkit-gradient(linear, left top, left bottom, from(#F6E6B6), color-stop(0.4, #EDD077), color-stop(0.6, #E3B62E), to(#DFB844));
-            background: -moz-linear-gradient(#F6E6B6, #EDD077 40%, #E3B62E 60%, #DFB844);
-            background: linear-gradient(#F6E6B6, #EDD077 40%, #E3B62E 60%, #DFB844);
-            -pie-background: linear-gradient(#F6E6B6, #EDD077 40%, #E3B62E 60%, #DFB844);
-        }
-        #test3 .style5 .button {
-            color: #FFF;
-            /*text-shadow: #DFB844 0 -1px;*/
-            border-color: #EF7210;
-            background: #EF7311;
-            background: -webkit-gradient(linear, left top, left bottom, from(#F3A66B), color-stop(0.4, #F08A3A), color-stop(0.6, #F08029), to(#EF7311));
-            background: -moz-linear-gradient(#F3A66B, #F08A3A 40%, #F08029 60%, #EF7311);
-            background: linear-gradient(#F3A66B, #F08A3A 40%, #F08029 60%, #EF7311);
-            -pie-background: linear-gradient(#F3A66B, #F08A3A 40%, #F08029 60%, #EF7311);
-        }
-        #test4 .button {
-            float: left;
-            padding: 0 14px;
-            height: 22px;
-            line-height: 22px;
-            color: #FFF;
-            background: #71B6E8;
-            background: -webkit-gradient(linear, 0 0, 0 bottom, from(#71B6E8), to(#2E76CF));
-            background: -moz-linear-gradient(#71B6E8, #2E76CF);
-            background: linear-gradient(#71B6E8, #2E76CF);
-            -pie-background: linear-gradient(#71B6E8, #2E76CF);
-            -webkit-border-radius: 11px;
-            -moz-border-radius: 11px;
-            border-radius: 11px;
-            -webkit-box-shadow: #666 0 1px 3px;
-            -moz-box-shadow: #666 0 1px 3px;
-            box-shadow: #666 0 1px 3px;
-        }
-        #test5 .button {
-            float: left;
-            height: 26px;
-            line-height: 26px;
-            font-family: Helvetica, sans-serif;
-            font-weight: bold;
-            border-width: 0 8px 0 14px;
-            color: white;
-            /*text-shadow: #000 0px 1px 1px;*/
-            -webkit-border-image: url("iPhoneBackButton.png") 0 8 0 14;
-            -moz-border-image: url("iPhoneBackButton.png") 0 8 0 14;
-            border-image: url("iPhoneBackButton.png") 0 8 0 14 fill;
-        }
-        #test6 .button {
-            float: left;
-            -webkit-border-radius: 4px;
-            -moz-border-radius: 4px;
-            border-radius: 4px;
-            -webkit-box-shadow: 0 1px 4px #CCC;
-            -moz-box-shadow: 0 1px 4px #CCC;
-            box-shadow: 0 1px 4px #CCC;
-            background: #E1E1E1;
-            background: -webkit-gradient(linear, 0 0, 0 100%, from(#FFF), to(#E1E1E1));
-            background: -moz-linear-gradient(#FFF, #E1E1E1);
-            background: linear-gradient(#FFF, #E1E1E1);
-            -pie-background: linear-gradient(#FFF, #E1E1E1);
-            border: 0;
-            border-bottom: 1px solid #EBEBEB;
-            color:#333333;
-            font-family:helvetica,arial,freesans,clean,sans-serif;
-            font-size:12px;
-            font-weight:bold;
-            height:34px;
-            line-height: 36px;
-            margin-left:10px;
-            overflow:visible;
-            padding:0 13px;
-            text-shadow:1px 1px 0 #FFFFFF;
-        }
-    #test6 .button:hover,
-    #test6 .button.pie_hover {
-        background: #0CA6DD;
-        background: -webkit-gradient(linear, 0 0, 0 100%, from(#0CA6DD), to(#0770A0));
-        background: -moz-linear-gradient(#0CA6DD, #0770A0);
-        background: linear-gradient(#0CA6DD, #0770A0);
-        -pie-background: linear-gradient(#0CA6DD, #0770A0);
-        border-bottom-color: #0770A0;
-        color:#FFFFFF;
-        text-shadow:-1px -1px 0 rgba(0, 0, 0, 0.3);
-    }
-    #test7 div {
-        padding: 20px 0;
-        border-bottom: solid 1px #ccc;
-    }
-    #test7 .wdwbutton  {
-        display: inline-block;
-        zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
-        *display: inline;
-        vertical-align: baseline;
-        margin: 0 2px;
-        outline: none;
-        cursor: pointer;
-        text-align: center;
-        text-decoration: none;
-        font: 14px/100% Arial, Helvetica, sans-serif;
-        padding: .5em 2em .55em;
-        text-shadow: 0 1px 1px rgba(0,0,0,.3);
-        -webkit-border-radius: .5em;
-        -moz-border-radius: .5em;
-        border-radius: .5em;
-        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-        -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-        box-shadow: 0 1px 2px rgba(0,0,0,.2);
-        /* added: */
-        behavior: url(../build/PIE.htc);
-        overflow: visible;
-        -pie-lazy-init: true;
-    }
-    #test7 .wdwbutton:hover {
-        text-decoration: none;
-    }
-    #test7 .wdwbutton:active {
-        position: relative;
-        top: 1px;
-    }
-    #test7 .bigrounded {
-        -webkit-border-radius: 2em;
-        -moz-border-radius: 2em;
-        border-radius: 2em;
-    }
-    #test7 .medium {
-        font-size: 12px;
-        padding: .4em 1.5em .42em;
-    }
-    #test7 .small {
-        font-size: 11px;
-        padding: .2em 1em .275em;
-    }
-    /* black */
-    #test7 .black {
-        color: #d7d7d7;
-        border: solid 1px #333;
-        background: #333;
-        background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
-        background: -moz-linear-gradient(top,  #666,  #000);
-        background: linear-gradient(top,  #666,  #000);
-        -pie-background: linear-gradient(top,  #666,  #000);
-    }
-    #test7 .black:hover {
-        background: #000;
-        background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
-        background: -moz-linear-gradient(top,  #444,  #000);
-        background: linear-gradient(top,  #444,  #000);
-        -pie-background: linear-gradient(top,  #444,  #000);
-    }
-    #test7 .black:active {
-        color: #666;
-        background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
-        background: -moz-linear-gradient(top,  #000,  #444);
-        background: linear-gradient(top,  #000,  #444);
-        -pie-background: linear-gradient(top,  #000,  #444);
-    }
-    /* gray */
-    #test7 .gray {
-        color: #e9e9e9;
-        border: solid 1px #555;
-        background: #6e6e6e;
-        background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
-        background: -moz-linear-gradient(top,  #888,  #575757);
-        background: linear-gradient(top,  #888,  #575757);
-        -pie-background: linear-gradient(top,  #888,  #575757);
-    }
-    #test7 .gray:hover {
-        background: #616161;
-        background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
-        background: -moz-linear-gradient(top,  #757575,  #4b4b4b);
-        background: linear-gradient(top,  #757575,  #4b4b4b);
-        -pie-background: linear-gradient(top,  #757575,  #4b4b4b);
-    }
-    #test7 .gray:active {
-        color: #afafaf;
-        background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
-        background: -moz-linear-gradient(top,  #575757,  #888);
-        background: linear-gradient(top,  #575757,  #888);
-        -pie-background: linear-gradient(top,  #575757,  #888);
-    }
-    /* white */
-    #test7 .white {
-        color: #606060;
-        border: solid 1px #b7b7b7;
-        background: #fff;
-        background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
-        background: -moz-linear-gradient(top,  #fff,  #ededed);
-        background: linear-gradient(top,  #fff,  #ededed);
-        -pie-background: linear-gradient(top,  #fff,  #ededed);
-    }
-    #test7 .white:hover {
-        background: #ededed;
-        background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
-        background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
-        background: linear-gradient(top,  #fff,  #dcdcdc);
-        -pie-background: linear-gradient(top,  #fff,  #dcdcdc);
-    }
-    #test7 .white:active {
-        color: #999;
-        background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
-        background: -moz-linear-gradient(top,  #ededed,  #fff);
-        background: linear-gradient(top,  #ededed,  #fff);
-        -pie-background: linear-gradient(top,  #ededed,  #fff);
-    }
-    /* orange */
-    #test7 .orange {
-        color: #fef4e9;
-        border: solid 1px #da7c0c;
-        background: #f78d1d;
-        background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
-        background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
-        background: linear-gradient(top,  #faa51a,  #f47a20);
-        -pie-background: linear-gradient(top,  #faa51a,  #f47a20);
-    }
-    #test7 .orange:hover {
-        background: #f47c20;
-        background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
-        background: -moz-linear-gradient(top,  #f88e11,  #f06015);
-        background: linear-gradient(top,  #f88e11,  #f06015);
-        -pie-background: linear-gradient(top,  #f88e11,  #f06015);
-    }
-    #test7 .orange:active {
-        color: #fcd3a5;
-        background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
-        background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
-        background: linear-gradient(top,  #f47a20,  #faa51a);
-        -pie-background: linear-gradient(top,  #f47a20,  #faa51a);
-    }
-    /* red */
-    #test7 .red {
-        color: #faddde;
-        border: solid 1px #980c10;
-        background: #d81b21;
-        background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
-        background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
-        background: linear-gradient(top,  #ed1c24,  #aa1317);
-        -pie-background: linear-gradient(top,  #ed1c24,  #aa1317);
-    }
-    #test7 .red:hover {
-        background: #b61318;
-        background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
-        background: -moz-linear-gradient(top,  #c9151b,  #a11115);
-        background: linear-gradient(top,  #c9151b,  #a11115);
-        -pie-background: linear-gradient(top,  #c9151b,  #a11115);
-    }
-    #test7 .red:active {
-        color: #de898c;
-        background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
-        background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);
-        background: linear-gradient(top,  #aa1317,  #ed1c24);
-        -pie-background: linear-gradient(top,  #aa1317,  #ed1c24);
-    }
-    /* blue */
-    #test7 .blue {
-        color: #d9eef7;
-        border: solid 1px #0076a3;
-        background: #0095cd;
-        background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
-        background: -moz-linear-gradient(top,  #00adee,  #0078a5);
-        background: linear-gradient(top,  #00adee,  #0078a5);
-        -pie-background: linear-gradient(top,  #00adee,  #0078a5);
-    }
-    #test7 .blue:hover {
-        background: #007ead;
-        background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
-        background: -moz-linear-gradient(top,  #0095cc,  #00678e);
-        background: linear-gradient(top,  #0095cc,  #00678e);
-        -pie-background: linear-gradient(top,  #0095cc,  #00678e);
-    }
-    #test7 .blue:active {
-        color: #80bed6;
-        background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
-        background: -moz-linear-gradient(top,  #0078a5,  #00adee);
-        background: linear-gradient(top,  #0078a5,  #00adee);
-        -pie-background: linear-gradient(top,  #0078a5,  #00adee);
-    }
-    /* rosy */
-    #test7 .rosy {
-        color: #fae7e9;
-        border: solid 1px #b73948;
-        background: #da5867;
-        background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));
-        background: -moz-linear-gradient(top,  #f16c7c,  #bf404f);
-        background: linear-gradient(top,  #f16c7c,  #bf404f);
-        -pie-background: linear-gradient(top,  #f16c7c,  #bf404f);
-    }
-    #test7 .rosy:hover {
-        background: #ba4b58;
-        background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));
-        background: -moz-linear-gradient(top,  #cf5d6a,  #a53845);
-        background: linear-gradient(top,  #cf5d6a,  #a53845);
-        -pie-background: linear-gradient(top,  #cf5d6a,  #a53845);
-    }
-    #test7 .rosy:active {
-        color: #dca4ab;
-        background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));
-        background: -moz-linear-gradient(top,  #bf404f,  #f16c7c);
-        background: linear-gradient(top,  #bf404f,  #f16c7c);
-        -pie-background: linear-gradient(top,  #bf404f,  #f16c7c);
-    }
-    /* green */
-    #test7 .green {
-        color: #e8f0de;
-        border: solid 1px #538312;
-        background: #64991e;
-        background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
-        background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
-        background: linear-gradient(top,  #7db72f,  #4e7d0e);
-        -pie-background: linear-gradient(top,  #7db72f,  #4e7d0e);
-    }
-    #test7 .green:hover {
-        background: #538018;
-        background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
-        background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
-        background: linear-gradient(top,  #6b9d28,  #436b0c);
-        -pie-background: linear-gradient(top,  #6b9d28,  #436b0c);
-    }
-    #test7 .green:active {
-        color: #a9c08c;
-        background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
-        background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);
-        background: linear-gradient(top,  #4e7d0e,  #7db72f);
-        -pie-background: linear-gradient(top,  #4e7d0e,  #7db72f);
-    }
-    /* pink */
-    #test7 .pink {
-        color: #feeef5;
-        border: solid 1px #d2729e;
-        background: #f895c2;
-        background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));
-        background: -moz-linear-gradient(top,  #feb1d3,  #f171ab);
-        background: linear-gradient(top,  #feb1d3,  #f171ab);
-        -pie-background: linear-gradient(top,  #feb1d3,  #f171ab);
-    }
-    #test7 .pink:hover {
-        background: #d57ea5;
-        background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
-        background: -moz-linear-gradient(top,  #f4aacb,  #e86ca4);
-        background: linear-gradient(top,  #f4aacb,  #e86ca4);
-        -pie-background: linear-gradient(top,  #f4aacb,  #e86ca4);
-    }
-    #test7 .pink:active {
-        color: #f3c3d9;
-        background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3));
-        background: -moz-linear-gradient(top,  #f171ab,  #feb1d3);
-        background: linear-gradient(top,  #f171ab,  #feb1d3);
-        -pie-background: linear-gradient(top,  #f171ab,  #feb1d3);
-    }
-    </style>
-</head>
-<body>
-    <h1>Demos of button styles</h1>
-    <p>Each demo shows the same button-like styling on a <code>&lt;a&gt;</code> element and on a <code>&lt;button&gt;</code> element.</p>
-    <div class="section" id="test1">
-        <h2>Ala mozilla.com</h2>
-        <a href="#" class="button">I'm a link, as cute as a button</a>
-        <button class="button">I'm actually a &lt;button/&gt;</button>
-        <input class="button" type="button" value="I'm an &lt;input/&gt; button" />
-    </div>
-    <div class="section" id="test2">
-        <h2>Ala detelefoongids.nl</h2>
-        <a href="#" class="button">I'm a link, as cute as a button</a>
-        <button class="button">I'm actually a &lt;button/&gt;</button>
-        <input class="button" type="button" value="I'm an &lt;input/&gt; button" />
-    </div>
-    <div class="section" id="test3">
-        <h2>Ala realestate.com.au</h2>
-        <p class="style1">
-            <a href="#" class="button">I'm a link, as cute as a button</a>
-            <button class="button">I'm actually a &lt;button/&gt;</button>
-            <input class="button" type="button" value="I'm an &lt;input/&gt; button" />
-        </p>
-        <p class="style2">
-            <a href="#" class="button">I'm a link, as cute as a button</a>
-            <button class="button">I'm actually a &lt;button/&gt;</button>
-            <input class="button" type="button" value="I'm an &lt;input/&gt; button" />
-        </p>
-        <p class="style3">
-            <a href="#" class="button">I'm a link, as cute as a button</a>
-            <button class="button">I'm actually a &lt;button/&gt;</button>
-            <input class="button" type="button" value="I'm an &lt;input/&gt; button" />
-        </p>
-        <p class="style4">
-            <a href="#" class="button">I'm a link, as cute as a button</a>
-            <button class="button">I'm actually a &lt;button/&gt;</button>
-            <input class="button" type="button" value="I'm an &lt;input/&gt; button" />
-        </p>
-        <p class="style5">
-            <a href="#" class="button">I'm a link, as cute as a button</a>
-            <button class="button">I'm actually a &lt;button/&gt;</button>
-            <input class="button" type="button" value="I'm an &lt;input/&gt; button" />
-        </p>
-    </div>
-    <div class="section" id="test4">
-        <h2>Ala itunes.com</h2>
-        <a href="#" class="button">I'm a link, as cute as a button</a>
-        <button class="button">I'm actually a &lt;button/&gt;</button>
-        <input class="button" type="button" value="I'm an &lt;input/&gt; button" />
-    </div>
-    <div class="section" id="test5">
-        <h2>iPhone back button  (<a href="http://groupaware.mobi/iphone/#_Samples">source</a>)</h2>
-        <a href="#" class="button">I'm a link, as cute as a button</a>
-        <button class="button">I'm actually a &lt;button/&gt;</button>
-        <input class="button" type="button" value="I'm an &lt;input/&gt; button" />
-    </div>
-    <div class="section" id="test6">
-        <h2>Ala GitHub.com</h2>
-        <a href="#" class="button">I'm a link, as cute as a button</a>
-        <button class="button">I'm actually a &lt;button/&gt;</button>
-        <input class="button" type="button" value="I'm an &lt;input/&gt; button" />
-    </div>
-    <div class="section" id="test7">
-        <h2>Webdesignerwall.com CSS3 Buttons Demo (<a href="http://www.webdesignerwall.com/demo/css-buttons.html">Source</a>)</h2>
-        <div>
-            <a href="#" class="wdwbutton black">Rectangle</a>  or
-            <a href="#" class="wdwbutton black bigrounded">Rounded</a> Can be
-            <a href="#" class="wdwbutton black medium">Medium</a> or
-            <a href="#" class="wdwbutton black small">Small</a>
-            <br /><br />
-            <input class="wdwbutton black" type="button" value="Input Element" />
-            <button class="wdwbutton black">Button Tag</button>
-            <span class="wdwbutton black">Span</span>
-            <div class="wdwbutton black">Div</div>
-            <p class="wdwbutton black">P Tag</p>
-            <h3 class="wdwbutton black">H3</h3>
-        </div>
-        <div>
-            <a href="#" class="wdwbutton gray">Gray</a>
-            <a href="#" class="wdwbutton gray bigrounded">Rounded</a>
-            <a href="#" class="wdwbutton gray medium">Medium</a>
-            <a href="#" class="wdwbutton gray small">Small</a>
-            <br /><br />
-            <input class="wdwbutton gray" type="button" value="Input Element" />
-            <button class="wdwbutton gray">Button Tag</button>
-            <span class="wdwbutton gray">Span</span>
-            <div class="wdwbutton gray">Div</div>
-            <p class="wdwbutton gray">P Tag</p>
-            <h3 class="wdwbutton gray">H3</h3>
-        </div>
-        <div>
-            <a href="#" class="wdwbutton white">White</a>
-            <a href="#" class="wdwbutton white bigrounded">Rounded</a>
-            <a href="#" class="wdwbutton white medium">Medium</a>
-            <a href="#" class="wdwbutton white small">Small</a>
-            <br /><br />
-            <input class="wdwbutton white" type="button" value="Input Element" />
-            <button class="wdwbutton white">Button Tag</button>
-            <span class="wdwbutton white">Span</span>
-            <div class="wdwbutton white">Div</div>
-            <p class="wdwbutton white">P Tag</p>
-            <h3 class="wdwbutton white">H3</h3>
-        </div>
-        <div>
-            <a href="#" class="wdwbutton orange">Orange</a>
-            <a href="#" class="wdwbutton orange bigrounded">Rounded</a>
-            <a href="#" class="wdwbutton orange medium">Medium</a>
-            <a href="#" class="wdwbutton orange small">Small</a>
-            <br /><br />
-            <input class="wdwbutton orange" type="button" value="Input Element" />
-            <button class="wdwbutton orange">Button Tag</button>
-            <span class="wdwbutton orange">Span</span>
-            <div class="wdwbutton orange">Div</div>
-            <p class="wdwbutton orange">P Tag</p>
-            <h3 class="wdwbutton orange">H3</h3>
-        </div>
-        <div>
-            <a href="#" class="wdwbutton red">Red</a>
-            <a href="#" class="wdwbutton red bigrounded">Rounded</a>
-            <a href="#" class="wdwbutton red medium">Medium</a>
-            <a href="#" class="wdwbutton red small">Small</a>
-            <br /><br />
-            <input class="wdwbutton red" type="button" value="Input Element" />
-            <button class="wdwbutton red">Button Tag</button>
-            <span class="wdwbutton red">Span</span>
-            <div class="wdwbutton red">Div</div>
-            <p class="wdwbutton red">P Tag</p>
-            <h3 class="wdwbutton red">H3</h3>
-        </div>
-        <div>
-            <a href="#" class="wdwbutton blue">Blue</a>
-            <a href="#" class="wdwbutton blue bigrounded">Rounded</a>
-            <a href="#" class="wdwbutton blue medium">Medium</a>
-            <a href="#" class="wdwbutton blue small">Small</a>
-            <br /><br />
-            <input class="wdwbutton blue" type="button" value="Input Element" />
-            <button class="wdwbutton blue">Button Tag</button>
-            <span class="wdwbutton blue">Span</span>
-            <div class="wdwbutton blue">Div</div>
-            <p class="wdwbutton blue">P Tag</p>
-            <h3 class="wdwbutton blue">H3</h3>
-        </div>
-        <div>
-            <a href="#" class="wdwbutton rosy">Rosy</a>
-            <a href="#" class="wdwbutton rosy bigrounded">Rounded</a>
-            <a href="#" class="wdwbutton rosy medium">Medium</a>
-            <a href="#" class="wdwbutton rosy small">Small</a>
-            <br /><br />
-            <input class="wdwbutton rosy" type="button" value="Input Element" />
-            <button class="wdwbutton rosy">Button Tag</button>
-            <span id="scrolltest" class="wdwbutton rosy">Span</span>
-            <div class="wdwbutton rosy">Div</div>
-            <p class="wdwbutton rosy">P Tag</p>
-            <h3 class="wdwbutton rosy">H3</h3>
-        </div>
-        <div>
-            <a href="#" class="wdwbutton green">Green</a>
-            <a href="#" class="wdwbutton green bigrounded">Rounded</a>
-            <a href="#" class="wdwbutton green medium">Medium</a>
-            <a href="#" class="wdwbutton green small">Small</a>
-            <br /><br />
-            <input class="wdwbutton green" type="button" value="Input Element" />
-            <button class="wdwbutton green">Button Tag</button>
-            <span class="wdwbutton green">Span</span>
-            <div class="wdwbutton green">Div</div>
-            <p class="wdwbutton green">P Tag</p>
-            <h3 class="wdwbutton green">H3</h3>
-        </div>
-        <div>
-            <a href="#" class="wdwbutton pink">Pink</a>
-            <a href="#" class="wdwbutton pink bigrounded">Rounded</a>
-            <a href="#" class="wdwbutton pink medium">Medium</a>
-            <a href="#" class="wdwbutton pink small">Small</a>
-            <br /><br />
-            <input class="wdwbutton pink" type="button" value="Input Element" />
-            <button class="wdwbutton pink">Button Tag</button>
-            <span class="wdwbutton pink">Span</span>
-            <div class="wdwbutton pink">Div</div>
-            <p class="wdwbutton pink">P Tag</p>
-            <h3 class="wdwbutton pink">H3</h3>
-        </div>
-    </div>
-</body>
-</html>