survivalkit 0.3.4 → 1.0.beta.1

data/templates/project/sources/pie/demos/farbtastic/farbtastic.js

@@ -1,345 +0,0 @@
-/**
- * Farbtastic Color Picker 1.2
- * © 2008 Steven Wittens
- *
- * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation; either version 2 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program; if not, write to the Free Software
- * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
- */
-
-jQuery.fn.farbtastic = function (callback) {
-  $.farbtastic(this, callback);
-  return this;
-};
-
-jQuery.farbtastic = function (container, callback) {
-  var container = $(container).get(0);
-  return container.farbtastic || (container.farbtastic = new jQuery._farbtastic(container, callback));
-}
-
-jQuery._farbtastic = function (container, callback) {
-  // Store farbtastic object
-  var fb = this;
-
-  // Insert markup
-  $(container).html('<div class="farbtastic"><div class="color"></div><div class="wheel"></div><div class="overlay"></div><div class="h-marker marker"></div><div class="sl-marker marker"></div></div>');
-  var e = $('.farbtastic', container);
-  fb.wheel = $('.wheel', container).get(0);
-  // Dimensions
-  fb.radius = 84;
-  fb.square = 100;
-  fb.width = 194;
-
-  // Fix background PNGs in IE6
-  if (navigator.appVersion.match(/MSIE [0-6]\./)) {
-    $('*', e).each(function () {
-      if (this.currentStyle.backgroundImage != 'none') {
-        var image = this.currentStyle.backgroundImage;
-        image = this.currentStyle.backgroundImage.substring(5, image.length - 2);
-        $(this).css({
-          'backgroundImage': 'none',
-          'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='" + image + "')"
-        });
-      }
-    });
-  }
-
-  /**
-   * Link to the given element(s) or callback.
-   */
-  fb.linkTo = function (callback) {
-    // Unbind previous nodes
-    if (typeof fb.callback == 'object') {
-      $(fb.callback).unbind('keyup', fb.updateValue);
-    }
-
-    // Reset color
-    fb.color = null;
-
-    // Bind callback or elements
-    if (typeof callback == 'function') {
-      fb.callback = callback;
-    }
-    else if (typeof callback == 'object' || typeof callback == 'string') {
-      fb.callback = $(callback);
-      fb.callback.bind('keyup', fb.updateValue);
-      if (fb.callback.get(0).value) {
-        fb.setColor(fb.callback.get(0).value);
-      }
-    }
-    return this;
-  }
-  fb.updateValue = function (event) {
-    if (this.value && this.value != fb.color) {
-      fb.setColor(this.value);
-    }
-  }
-
-  /**
-   * Change color with HTML syntax #123456
-   */
-  fb.setColor = function (color) {
-    var unpack = fb.unpack(color);
-    if (fb.color != color && unpack) {
-      fb.color = color;
-      fb.rgb = unpack;
-      fb.hsl = fb.RGBToHSL(fb.rgb);
-      fb.updateDisplay();
-    }
-    return this;
-  }
-
-  /**
-   * Change color with HSL triplet [0..1, 0..1, 0..1]
-   */
-  fb.setHSL = function (hsl) {
-    fb.hsl = hsl;
-    fb.rgb = fb.HSLToRGB(hsl);
-    fb.color = fb.pack(fb.rgb);
-    fb.updateDisplay();
-    return this;
-  }
-
-  /////////////////////////////////////////////////////
-
-  /**
-   * Retrieve the coordinates of the given event relative to the center
-   * of the widget.
-   */
-  fb.widgetCoords = function (event) {
-    var x, y;
-    var el = event.target || event.srcElement;
-    var reference = fb.wheel;
-
-    if (typeof event.offsetX != 'undefined') {
-      // Use offset coordinates and find common offsetParent
-      var pos = { x: event.offsetX, y: event.offsetY };
-
-      // Send the coordinates upwards through the offsetParent chain.
-      var e = el;
-      while (e) {
-        e.mouseX = pos.x;
-        e.mouseY = pos.y;
-        pos.x += e.offsetLeft;
-        pos.y += e.offsetTop;
-        e = e.offsetParent;
-      }
-
-      // Look for the coordinates starting from the wheel widget.
-      var e = reference;
-      var offset = { x: 0, y: 0 }
-      while (e) {
-        if (typeof e.mouseX != 'undefined') {
-          x = e.mouseX - offset.x;
-          y = e.mouseY - offset.y;
-          break;
-        }
-        offset.x += e.offsetLeft;
-        offset.y += e.offsetTop;
-        e = e.offsetParent;
-      }
-
-      // Reset stored coordinates
-      e = el;
-      while (e) {
-        e.mouseX = undefined;
-        e.mouseY = undefined;
-        e = e.offsetParent;
-      }
-    }
-    else {
-      // Use absolute coordinates
-      var pos = fb.absolutePosition(reference);
-      x = (event.pageX || 0*(event.clientX + $('html').get(0).scrollLeft)) - pos.x;
-      y = (event.pageY || 0*(event.clientY + $('html').get(0).scrollTop)) - pos.y;
-    }
-    // Subtract distance to middle
-    return { x: x - fb.width / 2, y: y - fb.width / 2 };
-  }
-
-  /**
-   * Mousedown handler
-   */
-  fb.mousedown = function (event) {
-    // Capture mouse
-    if (!document.dragging) {
-      $(document).bind('mousemove', fb.mousemove).bind('mouseup', fb.mouseup);
-      document.dragging = true;
-    }
-
-    // Check which area is being dragged
-    var pos = fb.widgetCoords(event);
-    fb.circleDrag = Math.max(Math.abs(pos.x), Math.abs(pos.y)) * 2 > fb.square;
-
-    // Process
-    fb.mousemove(event);
-    return false;
-  }
-
-  /**
-   * Mousemove handler
-   */
-  fb.mousemove = function (event) {
-    // Get coordinates relative to color picker center
-    var pos = fb.widgetCoords(event);
-
-    // Set new HSL parameters
-    if (fb.circleDrag) {
-      var hue = Math.atan2(pos.x, -pos.y) / 6.28;
-      if (hue < 0) hue += 1;
-      fb.setHSL([hue, fb.hsl[1], fb.hsl[2]]);
-    }
-    else {
-      var sat = Math.max(0, Math.min(1, -(pos.x / fb.square) + .5));
-      var lum = Math.max(0, Math.min(1, -(pos.y / fb.square) + .5));
-      fb.setHSL([fb.hsl[0], sat, lum]);
-    }
-    return false;
-  }
-
-  /**
-   * Mouseup handler
-   */
-  fb.mouseup = function () {
-    // Uncapture mouse
-    $(document).unbind('mousemove', fb.mousemove);
-    $(document).unbind('mouseup', fb.mouseup);
-    document.dragging = false;
-  }
-
-  /**
-   * Update the markers and styles
-   */
-  fb.updateDisplay = function () {
-    // Markers
-    var angle = fb.hsl[0] * 6.28;
-    $('.h-marker', e).css({
-      left: Math.round(Math.sin(angle) * fb.radius + fb.width / 2) + 'px',
-      top: Math.round(-Math.cos(angle) * fb.radius + fb.width / 2) + 'px'
-    });
-
-    $('.sl-marker', e).css({
-      left: Math.round(fb.square * (.5 - fb.hsl[1]) + fb.width / 2) + 'px',
-      top: Math.round(fb.square * (.5 - fb.hsl[2]) + fb.width / 2) + 'px'
-    });
-
-    // Saturation/Luminance gradient
-    $('.color', e).css('backgroundColor', fb.pack(fb.HSLToRGB([fb.hsl[0], 1, 0.5])));
-
-    // Linked elements or callback
-    if (typeof fb.callback == 'object') {
-      // Set background/foreground color
-      $(fb.callback).css({
-        backgroundColor: fb.color,
-        color: fb.hsl[2] > 0.5 ? '#000' : '#fff'
-      });
-
-      // Change linked value
-      $(fb.callback).each(function() {
-        if (this.value && this.value != fb.color) {
-          this.value = fb.color;
-        }
-      });
-    }
-    else if (typeof fb.callback == 'function') {
-      fb.callback.call(fb, fb.color);
-    }
-  }
-
-  /**
-   * Get absolute position of element
-   */
-  fb.absolutePosition = function (el) {
-    var r = { x: el.offsetLeft, y: el.offsetTop };
-    // Resolve relative to offsetParent
-    if (el.offsetParent) {
-      var tmp = fb.absolutePosition(el.offsetParent);
-      r.x += tmp.x;
-      r.y += tmp.y;
-    }
-    return r;
-  };
-
-  /* Various color utility functions */
-  fb.pack = function (rgb) {
-    var r = Math.round(rgb[0] * 255);
-    var g = Math.round(rgb[1] * 255);
-    var b = Math.round(rgb[2] * 255);
-    return '#' + (r < 16 ? '0' : '') + r.toString(16) +
-           (g < 16 ? '0' : '') + g.toString(16) +
-           (b < 16 ? '0' : '') + b.toString(16);
-  }
-
-  fb.unpack = function (color) {
-    if (color.length == 7) {
-      return [parseInt('0x' + color.substring(1, 3)) / 255,
-        parseInt('0x' + color.substring(3, 5)) / 255,
-        parseInt('0x' + color.substring(5, 7)) / 255];
-    }
-    else if (color.length == 4) {
-      return [parseInt('0x' + color.substring(1, 2)) / 15,
-        parseInt('0x' + color.substring(2, 3)) / 15,
-        parseInt('0x' + color.substring(3, 4)) / 15];
-    }
-  }
-
-  fb.HSLToRGB = function (hsl) {
-    var m1, m2, r, g, b;
-    var h = hsl[0], s = hsl[1], l = hsl[2];
-    m2 = (l <= 0.5) ? l * (s + 1) : l + s - l*s;
-    m1 = l * 2 - m2;
-    return [this.hueToRGB(m1, m2, h+0.33333),
-        this.hueToRGB(m1, m2, h),
-        this.hueToRGB(m1, m2, h-0.33333)];
-  }
-
-  fb.hueToRGB = function (m1, m2, h) {
-    h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h);
-    if (h * 6 < 1) return m1 + (m2 - m1) * h * 6;
-    if (h * 2 < 1) return m2;
-    if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6;
-    return m1;
-  }
-
-  fb.RGBToHSL = function (rgb) {
-    var min, max, delta, h, s, l;
-    var r = rgb[0], g = rgb[1], b = rgb[2];
-    min = Math.min(r, Math.min(g, b));
-    max = Math.max(r, Math.max(g, b));
-    delta = max - min;
-    l = (min + max) / 2;
-    s = 0;
-    if (l > 0 && l < 1) {
-      s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l));
-    }
-    h = 0;
-    if (delta > 0) {
-      if (max == r && max != g) h += (g - b) / delta;
-      if (max == g && max != b) h += (2 + (b - r) / delta);
-      if (max == b && max != r) h += (4 + (r - g) / delta);
-      h /= 6;
-    }
-    return [h, s, l];
-  }
-
-  // Install mousedown handler (the others are set on the document on-demand)
-  $('*', e).mousedown(fb.mousedown);
-
-    // Init color
-  fb.setColor('#000000');
-
-  // Set linked elements/callback
-  if (callback) {
-    fb.linkTo(callback);
-  }
-}

data/templates/project/sources/pie/demos/farbtastic/farbtastic.min.js

@@ -1 +0,0 @@
-jQuery.fn.farbtastic=function(a){$.farbtastic(this,a);return this};jQuery.farbtastic=function(a,b){var a=$(a).get(0);return a.farbtastic||(a.farbtastic=new jQuery._farbtastic(a,b))};jQuery._farbtastic=function(a,d){var b=this;$(a).html('<div class="farbtastic"><div class="color"></div><div class="wheel"></div><div class="overlay"></div><div class="h-marker marker"></div><div class="sl-marker marker"></div></div>');var c=$(".farbtastic",a);b.wheel=$(".wheel",a).get(0);b.radius=84;b.square=100;b.width=194;if(navigator.appVersion.match(/MSIE [0-6]\./)){$("*",c).each(function(){if(this.currentStyle.backgroundImage!="none"){var e=this.currentStyle.backgroundImage;e=this.currentStyle.backgroundImage.substring(5,e.length-2);$(this).css({backgroundImage:"none",filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='"+e+"')"})}})}b.linkTo=function(e){if(typeof b.callback=="object"){$(b.callback).unbind("keyup",b.updateValue)}b.color=null;if(typeof e=="function"){b.callback=e}else{if(typeof e=="object"||typeof e=="string"){b.callback=$(e);b.callback.bind("keyup",b.updateValue);if(b.callback.get(0).value){b.setColor(b.callback.get(0).value)}}}return this};b.updateValue=function(e){if(this.value&&this.value!=b.color){b.setColor(this.value)}};b.setColor=function(e){var f=b.unpack(e);if(b.color!=e&&f){b.color=e;b.rgb=f;b.hsl=b.RGBToHSL(b.rgb);b.updateDisplay()}return this};b.setHSL=function(e){b.hsl=e;b.rgb=b.HSLToRGB(e);b.color=b.pack(b.rgb);b.updateDisplay();return this};b.widgetCoords=function(i){var g,m;var h=i.target||i.srcElement;var f=b.wheel;if(typeof i.offsetX!="undefined"){var l={x:i.offsetX,y:i.offsetY};var j=h;while(j){j.mouseX=l.x;j.mouseY=l.y;l.x+=j.offsetLeft;l.y+=j.offsetTop;j=j.offsetParent}var j=f;var k={x:0,y:0};while(j){if(typeof j.mouseX!="undefined"){g=j.mouseX-k.x;m=j.mouseY-k.y;break}k.x+=j.offsetLeft;k.y+=j.offsetTop;j=j.offsetParent}j=h;while(j){j.mouseX=undefined;j.mouseY=undefined;j=j.offsetParent}}else{var l=b.absolutePosition(f);g=(i.pageX||0*(i.clientX+$("html").get(0).scrollLeft))-l.x;m=(i.pageY||0*(i.clientY+$("html").get(0).scrollTop))-l.y}return{x:g-b.width/2,y:m-b.width/2}};b.mousedown=function(e){if(!document.dragging){$(document).bind("mousemove",b.mousemove).bind("mouseup",b.mouseup);document.dragging=true}var f=b.widgetCoords(e);b.circleDrag=Math.max(Math.abs(f.x),Math.abs(f.y))*2>b.square;b.mousemove(e);return false};b.mousemove=function(h){var i=b.widgetCoords(h);if(b.circleDrag){var g=Math.atan2(i.x,-i.y)/6.28;if(g<0){g+=1}b.setHSL([g,b.hsl[1],b.hsl[2]])}else{var f=Math.max(0,Math.min(1,-(i.x/b.square)+0.5));var e=Math.max(0,Math.min(1,-(i.y/b.square)+0.5));b.setHSL([b.hsl[0],f,e])}return false};b.mouseup=function(){$(document).unbind("mousemove",b.mousemove);$(document).unbind("mouseup",b.mouseup);document.dragging=false};b.updateDisplay=function(){var e=b.hsl[0]*6.28;$(".h-marker",c).css({left:Math.round(Math.sin(e)*b.radius+b.width/2)+"px",top:Math.round(-Math.cos(e)*b.radius+b.width/2)+"px"});$(".sl-marker",c).css({left:Math.round(b.square*(0.5-b.hsl[1])+b.width/2)+"px",top:Math.round(b.square*(0.5-b.hsl[2])+b.width/2)+"px"});$(".color",c).css("backgroundColor",b.pack(b.HSLToRGB([b.hsl[0],1,0.5])));if(typeof b.callback=="object"){$(b.callback).css({backgroundColor:b.color,color:b.hsl[2]>0.5?"#000":"#fff"});$(b.callback).each(function(){if(this.value&&this.value!=b.color){this.value=b.color}})}else{if(typeof b.callback=="function"){b.callback.call(b,b.color)}}};b.absolutePosition=function(f){var g={x:f.offsetLeft,y:f.offsetTop};if(f.offsetParent){var e=b.absolutePosition(f.offsetParent);g.x+=e.x;g.y+=e.y}return g};b.pack=function(f){var i=Math.round(f[0]*255);var h=Math.round(f[1]*255);var e=Math.round(f[2]*255);return"#"+(i<16?"0":"")+i.toString(16)+(h<16?"0":"")+h.toString(16)+(e<16?"0":"")+e.toString(16)};b.unpack=function(e){if(e.length==7){return[parseInt("0x"+e.substring(1,3))/255,parseInt("0x"+e.substring(3,5))/255,parseInt("0x"+e.substring(5,7))/255]}else{if(e.length==4){return[parseInt("0x"+e.substring(1,2))/15,parseInt("0x"+e.substring(2,3))/15,parseInt("0x"+e.substring(3,4))/15]}}};b.HSLToRGB=function(m){var o,n,e,j,k;var i=m[0],p=m[1],f=m[2];n=(f<=0.5)?f*(p+1):f+p-f*p;o=f*2-n;return[this.hueToRGB(o,n,i+0.33333),this.hueToRGB(o,n,i),this.hueToRGB(o,n,i-0.33333)]};b.hueToRGB=function(f,e,g){g=(g<0)?g+1:((g>1)?g-1:g);if(g*6<1){return f+(e-f)*g*6}if(g*2<1){return e}if(g*3<2){return f+(e-f)*(0.66666-g)*6}return f};b.RGBToHSL=function(m){var i,o,p,j,q,f;var e=m[0],k=m[1],n=m[2];i=Math.min(e,Math.min(k,n));o=Math.max(e,Math.max(k,n));p=o-i;f=(i+o)/2;q=0;if(f>0&&f<1){q=p/(f<0.5?(2*f):(2-2*f))}j=0;if(p>0){if(o==e&&o!=k){j+=(k-n)/p}if(o==k&&o!=n){j+=(2+(n-e)/p)}if(o==n&&o!=e){j+=(4+(e-k)/p)}j/=6}return[j,q,f]};$("*",c).mousedown(b.mousedown);b.setColor("#000000");if(d){b.linkTo(d)}};

data/templates/project/sources/pie/demos/tabs.html

@@ -1,296 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-
-    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
-    <title>CSS3 PIE Demo: Tabs</title>
-
-    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
-
-    <!--[if lt IE 9]>
-        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-
-    <script type="text/javascript">
-        $( function() {
-            var cb = $( '#togglePIE' );
-            if( !( cb[0] && cb[0].addBehavior ) ) return; //IE only
-
-            function togglePIE() {
-                $( cb[0].getAttribute( 'data-target' ) ).each( function() {
-                    if( cb.is(":checked") ) {
-                        if( !this.behaviorId ) {
-                            this.behaviorId = this.addBehavior( '../build/PIE.htc' );
-                        }
-                    }
-                    else if( this.behaviorId ) {
-                        this.removeBehavior( this.behaviorId );
-                        this.behaviorId = null;
-                    }
-                } );
-            }
-
-            cb.change( togglePIE );
-            togglePIE();
-        } );
-    </script>
-
-
-    <style type="text/css">
-
-        /* Page styles */
-
-        body {
-            font-size: 12px;
-            font-family: sans-serif;
-        }
-
-        section {
-            display: block;
-        }
-
-        .control, .demo {
-            border: 1px solid #CCC;
-            padding: 10px;
-            margin: 2em 0;
-            float: left;
-            width: 275px;
-            height: 250px;
-        }
-        .control {
-            margin-right: 1em;
-        }
-
-        .control .desc, .demo .desc {
-            height: 4em;
-        }
-
-        .code {
-            clear: both;
-        }
-
-        .code pre {
-            background: #EEE;
-            padding: 10px;
-        }
-
-
-
-        /* Demo styles */
-
-        .tabBox {
-            padding: 0 3px;
-            font-size: 12px;
-            font-family: sans-serif;
-        }
-
-        .tabBox .tabs {
-            margin: 0;
-            padding: 0 10px;
-            overflow: hidden;
-            margin-bottom: -1px;
-            height: 2.25em;
-        }
-        .tabBox .tabs li {
-            float: left;
-            list-style: none;
-            margin: 0;
-            padding: .25em .25em 0;
-            height: 2em;
-            overflow: hidden;
-            position: relative;
-            z-index: 1;
-            border-bottom: 1px solid #FFF;
-        }
-        .tabBox .tabs li.selected {
-            z-index: 3;
-        }
-        .tabBox .tabs a {
-            float: left;
-            height: 2em;
-            line-height: 2em;
-            -webkit-border-radius: 8px 8px 0 0;
-            -moz-border-radius: 8px 8px 0 0;
-            border-radius: 8px 8px 0 0;
-            background: #EEE;
-            border: 1px solid #CCC;
-            border-bottom: 0;
-            padding: 0 10px;
-            color: #000;
-            text-decoration: none;
-            /* applied by script instead so it can be toggled dynamically... behavior: url(../build/PIE.htc); */
-        }
-        .tabBox .tabs .selected a {
-            background: #FFF;
-            -webkit-box-shadow: #CCC 0 0 .25em;
-            -moz-box-shadow: #CCC 0 0 .25em;
-            box-shadow: #CCC 0 0 .25em;
-        }
-
-        .tabBox .tabs a:hover {
-            background: -webkit-gradient(linear, 0 0, 0 70%, from(#EEF), to(#FFF));
-            background: -moz-linear-gradient(#EEF, #FFF 70%);
-            background: linear-gradient(#EEF, #FFF 70%);
-            -pie-background: linear-gradient(#EEF, #FFF 70%);
-        }
-
-        .tabBox .content {
-            clear: left;
-            position: relative;
-            z-index: 2;
-            padding: 2em 1em;
-            border: 1px solid #CCC;
-            background: #FFF;
-            -webkit-border-radius: 3px;
-            -moz-border-radius: 3px;
-            border-radius: 3px;
-            -webkit-box-shadow: #CCC 0 0 .25em;
-            -moz-box-shadow: #CCC 0 0 .25em;
-            box-shadow: #CCC 0 0 .25em;
-            /* applied by script instead so it can be toggled dynamically... behavior: url(../build/PIE.htc); */
-        }
-        .tabBox .content p {
-            margin: 0;
-        }
-    </style>
-
-</head>
-<body>
-
-    <h1>CSS3 PIE Demo: Tabs</h1>
-
-
-    <section class="explain">
-        <h2>Explanation</h2>
-        <p>This example demonstrates a common tabbed interface, styled only with CSS3 (no images are used). The tabs
-        don't actually do anything, as that would require extra JavaScript beyond the scope of this demo.</p>
-        <p>In this demo <code>border-radius</code> is used to give the tabs rounded corners on the top. Also, <code>box-shadow</code>
-        gives the active tab and the content container a subtle glow, which creates a sense of depth and makes the inactive
-        tabs look like they are sliding behind the content box. The tabs have a hover effect using a linear gradient.</p>
-    </section>
-
-
-    <section class="control">
-        <h2>Screenshot</h2>
-        <p class="desc">This is a screenshot of the intended rendering, captured in Firefox.</p>
-
-        <img src="tabs-control.png" alt="Rendering in Firefox" />
-    </section>
-
-    <section class="demo">
-        <h2>Live Demo</h2>
-        <p class="desc">This is the live code as rendered by your browser. If you use IE, you can toggle the PIE behavior on and off.</p>
-
-        <div class="tabBox">
-            <ul class="tabs">
-                <li class="selected"><a href="#">Tab One</a></li>
-                <li><a href="#">Tab Two</a></li>
-                <li><a href="#">Tab Three</a></li>
-            </ul>
-            <div class="content">
-                <p>Lorem ipsum dolor sit amet</p>
-            </div>
-        </div>
-
-        <!--[if lt IE 9]>
-            <p>
-                <input type="checkbox" id="togglePIE" checked="checked" data-target=".demo .tabs a, .demo .content" />
-                <label for="togglePIE">Toggle PIE behavior</label>
-            </p>
-        <![endif]-->
-    </section>
-
-    <section class="code">
-        <h2>Code</h2>
-        
-        <div class="html">
-            <h3>HTML markup</h3>
-<pre><code>&lt;div class="tabBox">
-    &lt;ul class="tabs">
-        &lt;li class="selected">&lt;a href="#">Tab One&lt;/a>&lt;/li>
-        &lt;li>&lt;a href="#">Tab Two&lt;/a>&lt;/li>
-        &lt;li>&lt;a href="#">Tab Three&lt;/a>&lt;/li>
-    &lt;/ul>
-    &lt;div class="content">
-        &lt;p>Lorem ipsum dolor sit amet&lt;/p>
-    &lt;/div>
-&lt;/div></code></pre>
-        </div>
-
-        <div class="css">
-            <h3>CSS</h3>
-<pre><code>.tabBox .tabs {
-    margin: 0;
-    padding: 0 10px;
-    overflow: hidden;
-    margin-bottom: -1px;
-    height: 2.25em;
-}
-
-.tabBox .tabs li {
-    float: left;
-    list-style: none;
-    margin: 0;
-    padding: .25em .25em 0;
-    height: 2em;
-    overflow: hidden;
-    position: relative;
-    z-index: 1;
-    border-bottom: 1px solid #FFF;
-}
-
-.tabBox .tabs li.selected {
-    z-index: 3;
-}
-
-.tabBox .tabs a {
-    float: left;
-    height: 2em;
-    line-height: 2em;
-    -webkit-border-radius: 8px 8px 0 0;
-    -moz-border-radius: 8px 8px 0 0;
-    border-radius: 8px 8px 0 0;
-    background: #EEE;
-    border: 1px solid #CCC;
-    border-bottom: 0;
-    padding: 0 10px;
-    color: #000;
-    text-decoration: none;
-    behavior: url(PIE.htc);
-}
-
-.tabBox .tabs .selected a {
-    background: #FFF;
-    -webkit-box-shadow: #CCC 0 0 .25em;
-    -moz-box-shadow: #CCC 0 0 .25em;
-    box-shadow: #CCC 0 0 .25em;
-}
-
-.tabBox .tabs a:hover {
-    background: -webkit-gradient(linear, 0 0, 0 70%, from(#EEF), to(#FFF));
-    background: -moz-linear-gradient(#EEF, #FFF 70%);
-    background: linear-gradient(#EEF, #FFF 70%);
-    -pie-background: linear-gradient(#EEF, #FFF 70%);
-}
-
-.tabBox .content {
-    clear: left;
-    position: relative;
-    z-index: 2;
-    padding: 2em 1em;
-    border: 1px solid #CCC;
-    background: #FFF;
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    border-radius: 3px;
-    -webkit-box-shadow: #CCC 0 0 .25em;
-    -moz-box-shadow: #CCC 0 0 .25em;
-    box-shadow: #CCC 0 0 .25em;
-    behavior: url(PIE.htc);
-}</code></pre>
-        </div>
-    </section>
-
-
-</body>
-</html>