adrusi/Alumina UI.html

## Alumina UI.html
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>UI Kit</title>
    <style>
      html, body, div, span, object, iframe,
      h1, h2, h3, h4, h5, h6, p, blockquote, pre,
      abbr, address, cite, code,
      del, dfn, em, img, ins, kbd, q, samp,
      small, strong, sub, sup, var,
      b, i,
      dl, dt, dd, ol, ul, li,
      fieldset, form, label, legend,
      table, caption, tbody, tfoot, thead, tr, th, td,
      article, aside, canvas, details, figcaption, figure,
      footer, header, hgroup, menu, nav, section, summary,
      time, mark, audio, video {
          margin:0;
          padding:0;
          border:0;
          outline:0;
          font-size:100%;
          vertical-align:baseline;
          background:transparent;
      }

      body {
          line-height:1;
      }

      article,aside,details,figcaption,figure,
      footer,header,hgroup,menu,nav,section {
          display:block;
      }

      nav ul {
          list-style:none;
      }

      blockquote, q {
          quotes:none;
      }

      blockquote:before, blockquote:after,
      q:before, q:after {
          content:'';
          content:none;
      }

      a {
          margin:0;
          padding:0;
          font-size:100%;
          vertical-align:baseline;
          background:transparent;
      }

      /* change colours to suit your needs */
      ins {
          background-color:#ff9;
          color:#000;
          text-decoration:none;
      }

      /* change colours to suit your needs */
      mark {
          background-color:#ff9;
          color:#000;
          font-style:italic;
          font-weight:bold;
      }

      del {
          text-decoration: line-through;
      }

      abbr[title], dfn[title] {
          border-bottom:1px dotted;
          cursor:help;
      }

      table {
          border-collapse:collapse;
          border-spacing:0;
      }

      /* change border colour to suit your needs */
      hr {
          display:block;
          height:1px;
          border:0;
          border-top:1px solid #cccccc;
          margin:1em 0;
          padding:0;
      }

      input, select {
          vertical-align:middle;
      }
      body {
        background: #e3e3e3;
        padding: 20px;
      }
      input[type=button], input[type=submit], button {
        border: 1px solid #aaaaaa;
        min-width: 100px;
        border-radius: 3px;
        padding: 5px;
        background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
        background: -webkit-linear-gradient(top, #ffffff, #dddddd);
        font-family: Helvetica, sans-serif;
        font-size: 13px;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
                            inset 0 0 10px rgba(0,0,0,0.1);
        text-shadow: 0 1px 0 white;
        vertical-align: middle;
        color: #404040;
        cursor: pointer;
      }
      input[type=button]:hover, input[type=submit]:hover, button:hover {
        background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#d8d8d8));
        background: -webkit-linear-gradient(top, #f8f8f8, #d8d8d8);
        border-color: #a8a8a8;
      }
      input[type=button]:focus, input[type=submit]:focus, button:focus {
        outline: 0;
        -webkit-box-shadow: 0 0 4px rgba(27, 155, 224, 0.9),
                            inset 0 0 10px rgba(0,0,0,0.15),
                            0 1px 0 rgba(255, 255, 255, 0.5);
        -webkit-background-clip: padding-box;
      }
      input[type=button]:active, input[type=submit]:active, button:active, input[type=checkbox]:active {
        background: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#ffffff))!important;
        background: -webkit-linear-gradient(top, #dddddd, #ffffff);
        border-color: #aaaaaa;
        position: relative;
        top: 1px;
        -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
      }
      input[type=button]:disabled, input[type=submit]:disabled, button:disabled {
        opacity: 0.6;
        background: #eeeeee;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
        cursor: default;
        text-shadow: none;
      }
      input[type=checkbox]:active {
        top: 0;
      }
      input[type=checkbox], input[type=radio] {
        -webkit-appearance: none;
        height: 15px;
        width: 15px;
        background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
        background: -webkit-linear-gradient(top, #ffffff, #dddddd);
        vertical-align: middle;
        border: 1px solid #aaaaaa;
        border-radius: 3px;
        text-align: center;
        padding: 0!important;
        cursor: pointer;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
                            inset 0 0 3px rgba(0,0,0,0.1);
      }
      input[type=checkbox]:focus, input[type=radio]:focus {
        outline: 0;
        -webkit-box-shadow: 0 0 4px rgba(27, 155, 224, 0.9),
                            inset 0 0 10px rgba(0,0,0,0.15),
                            0 1px 0 rgba(255, 255, 255, 0.5);
        -webkit-background-clip: padding-box;
      }
      input[type=checkbox]:hover, input[type=radio]:hover {
        background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#d8d8d8));
        background: -webkit-linear-gradient(top, #f8f8f8, #d8d8d8);
        border-color: #a8a8a8;
      }
      input[type=checkbox]:checked::after, input[type=radio]:checked::after {
        content: "✓";
        line-height: 10px;
        font-family: Arial, sans-serif!important;
        font-size: 13px;
        margin-left: 1px;
        color: #404040;
        text-shadow: 0 1px 0 white;
      }
      input[type=checkbox]:disabled, input[type=radio]:disabled {
        opacity: 0.6;
        background: #eeeeee;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
        cursor: default;
      }
      input[type=radio] {
        border-radius: 8.5px;
      }
      input[type=radio]:checked::after {
        content: "•";
        font-size: 14px;
        position: relative;
        top: 1px;
      }
      input[type="text"], textarea, input[type=email], input[type=password], input[type=url], input[type=date], input[type=time] {
        min-width: 150px;
        border: 1px solid #aaaaaa;
        border-radius: 3px;
        padding: 5px;
        background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#ffffff));
        background: -webkit-linear-gradient(top, #eeeeee, #ffffff);
        font-family: Helvetica, sans-serif;
        font-size: 13px;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
                            inset 0 0 10px rgba(0,0,0,0.15);
        vertical-align: middle;
      }
      input[type=text]:focus, textarea:focus, input[type=email]:focus, input[type=password]:focus, input[type=url]:focus, input[type=date]:focus, input[type=time]:focus {
        outline: 0;
        -webkit-box-shadow: 0 0 4px rgba(27, 155, 224, 0.9),
                            inset 0 0 10px rgba(0,0,0,0.15),
                            0 1px 0 rgba(255, 255, 255, 0.5);
        -webkit-background-clip: padding-box;
      }
      input[type=text]:disabled, textarea:disabled, input[type=email]:disabled, input[type=password]:disabled, input[type=url]:disabled, input[type=date]:disabled, input[type=time]:disabled {
        background: #e8e8e8;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
        opacity: 0.6;
      }
      textarea {
        display: block;
        overflow: auto;
        height: 150px;
        width: 200px;
        margin: 2px;
      }
      input[type=range] {
        -webkit-appearance: none;
        height: 3px;
        width: 150px;
        border: 1px solid #aaaaaa;
        background: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#ffffff));
        background: -webkit-linear-gradient(top, #dddddd, #ffffff);
        border-radius: 3.5px;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
                            inset 0 0 1px rgba(0,0,0,0.1);
        vertical-align: middle;
        margin: 5px 2px;
        cursor: pointer;
      }
      input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 15px;
        width: 15px;
        border: 1px solid #aaaaaa;
        border-radius: 8.5px;
        background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
        background: -webkit-linear-gradient(top, #ffffff, #dddddd);
        -webkit-background-clip: content-box;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
                            inset 0 0 3px rgba(0,0,0,0.1);
      }
      input[type=range]:hover::-webkit-slider-thumb {
        background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#d4d4d4));
        background: -webkit-linear-gradient(top, #f8f8f8, #d8d8d8);
      }
      input[type=range]:disabled {
        background: #eeeeee;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
        opacity: 0.6;
        cursor: default;
      }
      input[type=range]:disabled::-webkit-slider-thumb {
        background: #eeeeee;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
      }
      .buttonset input[type=button], .buttonset input[type=submit], .buttonset button {
        margin: 0 -5px 0 0;
        border-radius: 0;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25),
                            inset 0 0 10px rgba(0,0,0,0.1);
      }
      .buttonset input[type=button]:first-child, .buttonset input[type=submit]:first-child, .buttonset button:first-child {
        border-radius: 3px 0 0 3px;
      }
      .buttonset input[type=button]:last-child, .buttonset input[type=submit]:last-child, .buttonset button:last-child {
        border-radius: 0 3px 3px 0;
      }
      .buttonset input[type=button]:active, .buttonset input[type=submit]:active, .buttonset button:active {
        top: 0;
        z-index: 1;
      }
      .buttonset input[type=button]:hover, .buttonset input[type=submit]:hover, .buttonset button:hover {
        z-index: 1;
      }
      .buttonset {
        margin: 2px;
        display: inline-block;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25),
                            inset 0 0 10px rgba(0,0,0,0.1);
      }
      select {
        -webkit-appearance: none;
        background: url(dropdown.png) center right no-repeat, -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
        min-width: 150px;
        border: 1px solid #aaaaaa;
        border-radius: 3px;
        padding: 5px;
        padding-right: 34px;
        font-size: 12px;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
                            inset 0 0 10px rgba(0,0,0,0.15);
        vertical-align: middle;
        cursor: pointer;
        text-shadow: 0 1px 0 white;
      }
      select:hover {
        background: url(dropdown.png) center right no-repeat, -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#d8d8d8));
      }
      select:focus {
        outline: 0;
        -webkit-background-clip: padding-box;
        background: url(dropdown.png) center right no-repeat, -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#ffffff));
      }
      select:disabled {
        background: url(dropdown.png) center right no-repeat, #eeeeee;
        opacity: 0.6;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
        text-shadow: none;
        cursor: default;
      }
      input[type=checkbox].switch {
        width: 24px;
        height: 12px;
        margin-top: 4px;
        border-radius: 6px;
        position: relative;
        background: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#ffffff));
        background: -webkit-linear-gradient(top, #dddddd, #ffffff);
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
                            inset 0 2px 2px rgba(0,0,0,0.1);
      }
      input[type=checkbox].switch::after {
        content: " ";
        height: 15px;
        width: 15px;
        position: absolute;
        line-height: auto;
        left: -3px;
        top: -4px;
        margin: 0;
        border: 1px solid #aaaaaa;
        border-radius: 8.5px;
        background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
        background: -webkit-linear-gradient(top, #ffffff, #dddddd);
        -webkit-background-clip: content-box;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
                            inset 0 0 3px rgba(0,0,0,0.1);
      }
      input[type=checkbox].switch:checked {
        background: -webkit-gradient(linear, left top, left bottom, from(#B1CBDD), to(#CCE9FF));
        background: -webkit-linear-gradient(top, #B1CBDD, #CCE9FF);
        border: 1px solid #8FA2B3;
      }
      input[type=checkbox].switch:checked::after {
        right: -3px;
        left: auto;
      }
      input[type=checkbox].switch:disabled, input[type=checkbox].switch:disabled::after {
        background: #eeeeee;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
      }
      input[type=checkbox].switch:checked:disabled {
        background: #bedaee;
      }
      .select {
        font-family: Helvetica, sans-serif;
        font-size: 13px;
        margin: 2px;
        width: 200px;
        border: 1px solid #aaaaaa;
        border-radius: 3px;
        -webkit-background-clip: content-box;
        overflow: hidden;
        position: relative;
        z-index: 1;
        background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
        background: -webkit-linear-gradient(top, #ffffff, #dddddd);
      }
      .select input[type=radio] {
        -wekit-appearance: none;
        padding: 6px 5px!important;
        height: auto;
        display: block;
        margin: 0;
        border: 0;
        width: 200px;
        border-radius: 0;
        background: transparent;
        border-bottom: 1px solid #aaaaaa;
        border-top: 1px solid #ffffff;
        position: relative;
        z-index: -1;
        cursor: pointer;
        text-align: left;
        font-size: 13px!important;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
                            inset 0 0 10px rgba(0,0,0,0.1);
      }
      .select input[type=radio]::after {
        content: attr(value);
        color: inherit;
        text-shadow: none;
        font-family: Helvetica, sans-serif;
        font-size: 13px;
        top: 0;
        margin-left: 0;
      }
      .select input[type=radio]:hover {
        background: rgba(0,0,0,0.05);
      }
      .select input[type=radio]:checked {
        background: rgba(190, 218, 238, 0.7);
        border-bottom: 1px solid #8FA2B3;
        border-top: 1px solid #CCE9FF;
        cursor: default;
      }
      .select input[type=radio]:disabled {
        opacity: 0.6;
        color: #888888;
        cursor: default;
        background: transparent;
        font-family: Helvetica, sans-serif;
        font-size: 13px;
      }
      .select input[type=radio]:first-child {
        border-top: none;
      }
      .select input[type=radio]:last-child {
        border-bottom: none;
      }
    </style>
  </head>
  <body>
    <form>
      <input type="button" value="Button" />
      <input type="button" value="Disabled" disabled />
      <input type="button" value="This is a really long button" />
      <br />
      <div class="buttonset">
        <input type="button" value="First" />
        <input type="button" value="Second" />
        <input type="button" value="Third" />
      </div>
      <br />
      <input type="checkbox" />
      <input type="checkbox" checked />
      <input type="checkbox" disabled />
      <input type="checkbox" disabled checked />
      <input type="radio" name="demo" />
      <input type="radio" name="demo" checked />
      <input type="radio" disabled />
      <input type="radio" disabled checked />
      <input type="checkbox" class="switch" />
      <input type="checkbox" class="switch" checked />
      <input type="checkbox" class="switch" disabled />
      <input type="checkbox" class="switch" disabled checked />
      <br />
      <input type="range" />
      <input type="range" disabled />
      <br />
      <input type="text" value="This is a text input" />
      <input type="text" value="This one's disabled" disabled />
      <br />
      <textarea style="float:left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</textarea>
      <textarea style="float:left" disabled>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</textarea>
      <br style="clear:both" />
      <select>
        <option>Option #1</option>
        <option>Option #2</option>
        <option>Option #3</option>
      </select>
      <select disabled>
        <option>Option #1</option>
        <option selected>Disabled</option>
        <option>Option #3</option>
      </select>
      <!-- okay, maybe this isn't the most semantic thing ever, but oh well -->
      <div class="select">
        <input type="radio" name="select" value="Option #1" />
        <input type="radio" name="select" value="Option #2" checked />
        <input type="radio" name="select" value="Option #3" />
        <input type="radio" name="select" value="Option #4" />
        <input type="radio" name="select" value="Option #5" />
      </div>
    </form>
  </body>
</html>
	<!DOCTYPE html>

	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>UI Kit</title>
	<style>
	html, body, div, span, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	abbr, address, cite, code,
	del, dfn, em, img, ins, kbd, q, samp,
	small, strong, sub, sup, var,
	b, i,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section, summary,
	time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	}

	body {
	line-height:1;
	}

	article,aside,details,figcaption,figure,
	footer,header,hgroup,menu,nav,section {
	display:block;
	}

	nav ul {
	list-style:none;
	}

	blockquote, q {
	quotes:none;
	}

	blockquote:before, blockquote:after,
	q:before, q:after {
	content:'';
	content:none;
	}

	a {
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	}

	/* change colours to suit your needs */
	ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
	}

	/* change colours to suit your needs */
	mark {
	background-color:#ff9;
	color:#000;
	font-style:italic;
	font-weight:bold;
	}

	del {
	text-decoration: line-through;
	}

	abbr[title], dfn[title] {
	border-bottom:1px dotted;
	cursor:help;
	}

	table {
	border-collapse:collapse;
	border-spacing:0;
	}

	/* change border colour to suit your needs */
	hr {
	display:block;
	height:1px;
	border:0;
	border-top:1px solid #cccccc;
	margin:1em 0;
	padding:0;
	}

	input, select {
	vertical-align:middle;
	}
	body {
	background: #e3e3e3;
	padding: 20px;
	}
	input[type=button], input[type=submit], button {
	border: 1px solid #aaaaaa;
	min-width: 100px;
	border-radius: 3px;
	padding: 5px;
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
	background: -webkit-linear-gradient(top, #ffffff, #dddddd);
	font-family: Helvetica, sans-serif;
	font-size: 13px;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
	inset 0 0 10px rgba(0,0,0,0.1);
	text-shadow: 0 1px 0 white;
	vertical-align: middle;
	color: #404040;
	cursor: pointer;
	}
	input[type=button]:hover, input[type=submit]:hover, button:hover {
	background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#d8d8d8));
	background: -webkit-linear-gradient(top, #f8f8f8, #d8d8d8);
	border-color: #a8a8a8;
	}
	input[type=button]:focus, input[type=submit]:focus, button:focus {
	outline: 0;
	-webkit-box-shadow: 0 0 4px rgba(27, 155, 224, 0.9),
	inset 0 0 10px rgba(0,0,0,0.15),
	0 1px 0 rgba(255, 255, 255, 0.5);
	-webkit-background-clip: padding-box;
	}
	input[type=button]:active, input[type=submit]:active, button:active, input[type=checkbox]:active {
	background: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#ffffff))!important;
	background: -webkit-linear-gradient(top, #dddddd, #ffffff);
	border-color: #aaaaaa;
	position: relative;
	top: 1px;
	-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
	}
	input[type=button]:disabled, input[type=submit]:disabled, button:disabled {
	opacity: 0.6;
	background: #eeeeee;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	cursor: default;
	text-shadow: none;
	}
	input[type=checkbox]:active {
	top: 0;
	}
	input[type=checkbox], input[type=radio] {
	-webkit-appearance: none;
	height: 15px;
	width: 15px;
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
	background: -webkit-linear-gradient(top, #ffffff, #dddddd);
	vertical-align: middle;
	border: 1px solid #aaaaaa;
	border-radius: 3px;
	text-align: center;
	padding: 0!important;
	cursor: pointer;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
	inset 0 0 3px rgba(0,0,0,0.1);
	}
	input[type=checkbox]:focus, input[type=radio]:focus {
	outline: 0;
	-webkit-box-shadow: 0 0 4px rgba(27, 155, 224, 0.9),
	inset 0 0 10px rgba(0,0,0,0.15),
	0 1px 0 rgba(255, 255, 255, 0.5);
	-webkit-background-clip: padding-box;
	}
	input[type=checkbox]:hover, input[type=radio]:hover {
	background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#d8d8d8));
	background: -webkit-linear-gradient(top, #f8f8f8, #d8d8d8);
	border-color: #a8a8a8;
	}
	input[type=checkbox]:checked::after, input[type=radio]:checked::after {
	content: "✓";
	line-height: 10px;
	font-family: Arial, sans-serif!important;
	font-size: 13px;
	margin-left: 1px;
	color: #404040;
	text-shadow: 0 1px 0 white;
	}
	input[type=checkbox]:disabled, input[type=radio]:disabled {
	opacity: 0.6;
	background: #eeeeee;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	cursor: default;
	}
	input[type=radio] {
	border-radius: 8.5px;
	}
	input[type=radio]:checked::after {
	content: "•";
	font-size: 14px;
	position: relative;
	top: 1px;
	}
	input[type="text"], textarea, input[type=email], input[type=password], input[type=url], input[type=date], input[type=time] {
	min-width: 150px;
	border: 1px solid #aaaaaa;
	border-radius: 3px;
	padding: 5px;
	background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#ffffff));
	background: -webkit-linear-gradient(top, #eeeeee, #ffffff);
	font-family: Helvetica, sans-serif;
	font-size: 13px;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
	inset 0 0 10px rgba(0,0,0,0.15);
	vertical-align: middle;
	}
	input[type=text]:focus, textarea:focus, input[type=email]:focus, input[type=password]:focus, input[type=url]:focus, input[type=date]:focus, input[type=time]:focus {
	outline: 0;
	-webkit-box-shadow: 0 0 4px rgba(27, 155, 224, 0.9),
	inset 0 0 10px rgba(0,0,0,0.15),
	0 1px 0 rgba(255, 255, 255, 0.5);
	-webkit-background-clip: padding-box;
	}
	input[type=text]:disabled, textarea:disabled, input[type=email]:disabled, input[type=password]:disabled, input[type=url]:disabled, input[type=date]:disabled, input[type=time]:disabled {
	background: #e8e8e8;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	opacity: 0.6;
	}
	textarea {
	display: block;
	overflow: auto;
	height: 150px;
	width: 200px;
	margin: 2px;
	}
	input[type=range] {
	-webkit-appearance: none;
	height: 3px;
	width: 150px;
	border: 1px solid #aaaaaa;
	background: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#ffffff));
	background: -webkit-linear-gradient(top, #dddddd, #ffffff);
	border-radius: 3.5px;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
	inset 0 0 1px rgba(0,0,0,0.1);
	vertical-align: middle;
	margin: 5px 2px;
	cursor: pointer;
	}
	input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 15px;
	width: 15px;
	border: 1px solid #aaaaaa;
	border-radius: 8.5px;
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
	background: -webkit-linear-gradient(top, #ffffff, #dddddd);
	-webkit-background-clip: content-box;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
	inset 0 0 3px rgba(0,0,0,0.1);
	}
	input[type=range]:hover::-webkit-slider-thumb {
	background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#d4d4d4));
	background: -webkit-linear-gradient(top, #f8f8f8, #d8d8d8);
	}
	input[type=range]:disabled {
	background: #eeeeee;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	opacity: 0.6;
	cursor: default;
	}
	input[type=range]:disabled::-webkit-slider-thumb {
	background: #eeeeee;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	}
	.buttonset input[type=button], .buttonset input[type=submit], .buttonset button {
	margin: 0 -5px 0 0;
	border-radius: 0;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25),
	inset 0 0 10px rgba(0,0,0,0.1);
	}
	.buttonset input[type=button]:first-child, .buttonset input[type=submit]:first-child, .buttonset button:first-child {
	border-radius: 3px 0 0 3px;
	}
	.buttonset input[type=button]:last-child, .buttonset input[type=submit]:last-child, .buttonset button:last-child {
	border-radius: 0 3px 3px 0;
	}
	.buttonset input[type=button]:active, .buttonset input[type=submit]:active, .buttonset button:active {
	top: 0;
	z-index: 1;
	}
	.buttonset input[type=button]:hover, .buttonset input[type=submit]:hover, .buttonset button:hover {
	z-index: 1;
	}
	.buttonset {
	margin: 2px;
	display: inline-block;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25),
	inset 0 0 10px rgba(0,0,0,0.1);
	}
	select {
	-webkit-appearance: none;
	background: url(dropdown.png) center right no-repeat, -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
	min-width: 150px;
	border: 1px solid #aaaaaa;
	border-radius: 3px;
	padding: 5px;
	padding-right: 34px;
	font-size: 12px;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
	inset 0 0 10px rgba(0,0,0,0.15);
	vertical-align: middle;
	cursor: pointer;
	text-shadow: 0 1px 0 white;
	}
	select:hover {
	background: url(dropdown.png) center right no-repeat, -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#d8d8d8));
	}
	select:focus {
	outline: 0;
	-webkit-background-clip: padding-box;
	background: url(dropdown.png) center right no-repeat, -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#ffffff));
	}
	select:disabled {
	background: url(dropdown.png) center right no-repeat, #eeeeee;
	opacity: 0.6;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	text-shadow: none;
	cursor: default;
	}
	input[type=checkbox].switch {
	width: 24px;
	height: 12px;
	margin-top: 4px;
	border-radius: 6px;
	position: relative;
	background: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#ffffff));
	background: -webkit-linear-gradient(top, #dddddd, #ffffff);
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
	inset 0 2px 2px rgba(0,0,0,0.1);
	}
	input[type=checkbox].switch::after {
	content: " ";
	height: 15px;
	width: 15px;
	position: absolute;
	line-height: auto;
	left: -3px;
	top: -4px;
	margin: 0;
	border: 1px solid #aaaaaa;
	border-radius: 8.5px;
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
	background: -webkit-linear-gradient(top, #ffffff, #dddddd);
	-webkit-background-clip: content-box;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
	inset 0 0 3px rgba(0,0,0,0.1);
	}
	input[type=checkbox].switch:checked {
	background: -webkit-gradient(linear, left top, left bottom, from(#B1CBDD), to(#CCE9FF));
	background: -webkit-linear-gradient(top, #B1CBDD, #CCE9FF);
	border: 1px solid #8FA2B3;
	}
	input[type=checkbox].switch:checked::after {
	right: -3px;
	left: auto;
	}
	input[type=checkbox].switch:disabled, input[type=checkbox].switch:disabled::after {
	background: #eeeeee;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	}
	input[type=checkbox].switch:checked:disabled {
	background: #bedaee;
	}
	.select {
	font-family: Helvetica, sans-serif;
	font-size: 13px;
	margin: 2px;
	width: 200px;
	border: 1px solid #aaaaaa;
	border-radius: 3px;
	-webkit-background-clip: content-box;
	overflow: hidden;
	position: relative;
	z-index: 1;
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
	background: -webkit-linear-gradient(top, #ffffff, #dddddd);
	}
	.select input[type=radio] {
	-wekit-appearance: none;
	padding: 6px 5px!important;
	height: auto;
	display: block;
	margin: 0;
	border: 0;
	width: 200px;
	border-radius: 0;
	background: transparent;
	border-bottom: 1px solid #aaaaaa;
	border-top: 1px solid #ffffff;
	position: relative;
	z-index: -1;
	cursor: pointer;
	text-align: left;
	font-size: 13px!important;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
	inset 0 0 10px rgba(0,0,0,0.1);
	}
	.select input[type=radio]::after {
	content: attr(value);
	color: inherit;
	text-shadow: none;
	font-family: Helvetica, sans-serif;
	font-size: 13px;
	top: 0;
	margin-left: 0;
	}
	.select input[type=radio]:hover {
	background: rgba(0,0,0,0.05);
	}
	.select input[type=radio]:checked {
	background: rgba(190, 218, 238, 0.7);
	border-bottom: 1px solid #8FA2B3;
	border-top: 1px solid #CCE9FF;
	cursor: default;
	}
	.select input[type=radio]:disabled {
	opacity: 0.6;
	color: #888888;
	cursor: default;
	background: transparent;
	font-family: Helvetica, sans-serif;
	font-size: 13px;
	}
	.select input[type=radio]:first-child {
	border-top: none;
	}
	.select input[type=radio]:last-child {
	border-bottom: none;
	}
	</style>
	</head>
	<body>
	<form>
	<input type="button" value="Button" />
	<input type="button" value="Disabled" disabled />
	<input type="button" value="This is a really long button" />
	<br />
	<div class="buttonset">
	<input type="button" value="First" />
	<input type="button" value="Second" />
	<input type="button" value="Third" />
	</div>
	<br />
	<input type="checkbox" />
	<input type="checkbox" checked />
	<input type="checkbox" disabled />
	<input type="checkbox" disabled checked />
	<input type="radio" name="demo" />
	<input type="radio" name="demo" checked />
	<input type="radio" disabled />
	<input type="radio" disabled checked />
	<input type="checkbox" class="switch" />
	<input type="checkbox" class="switch" checked />
	<input type="checkbox" class="switch" disabled />
	<input type="checkbox" class="switch" disabled checked />
	<br />
	<input type="range" />
	<input type="range" disabled />
	<br />
	<input type="text" value="This is a text input" />
	<input type="text" value="This one's disabled" disabled />
	<br />
	<textarea style="float:left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</textarea>
	<textarea style="float:left" disabled>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</textarea>
	<br style="clear:both" />
	<select>
	<option>Option #1</option>
	<option>Option #2</option>
	<option>Option #3</option>
	</select>
	<select disabled>
	<option>Option #1</option>
	<option selected>Disabled</option>
	<option>Option #3</option>
	</select>
	<!-- okay, maybe this isn't the most semantic thing ever, but oh well -->
	<div class="select">
	<input type="radio" name="select" value="Option #1" />
	<input type="radio" name="select" value="Option #2" checked />
	<input type="radio" name="select" value="Option #3" />
	<input type="radio" name="select" value="Option #4" />
	<input type="radio" name="select" value="Option #5" />
	</div>
	</form>
	</body>
	</html>