RubyGems - survivalkit - Versions diffs - 0.1 - Mend

survivalkit 0.1

Files changed (1368) hide show

data/templates/project/sources/pie/tests/border-image-test.html ADDED Viewed

@@ -0,0 +1,52 @@
+<!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/project/sources/pie/tests/border.png ADDED Viewed

Binary file

data/templates/project/sources/pie/tests/border2.png ADDED Viewed

Binary file

data/templates/project/sources/pie/tests/box-shadow-tests.html ADDED Viewed

@@ -0,0 +1,166 @@
+<!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/project/sources/pie/tests/buttons.html ADDED Viewed

@@ -0,0 +1,735 @@
+<!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>