Commit 8ba31b16 authored by addyosmani's avatar addyosmani

patching broke.js app initialization, preparing index for 0.2 release

parent 2faccd98
/*!
* Bootstrap v1.3.0
*
* Copyright 2011 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Mon Oct 10 14:31:07 CDT 2011
*/
/* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
html, body {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
cite,
code,
del,
dfn,
em,
img,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dd,
dl,
dt,
li,
ol,
ul,
fieldset,
form,
label,
legend,
button,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
line-height: 1;
font-family: inherit;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
q:before,
q:after,
blockquote:before,
blockquote:after {
content: "";
}
html {
overflow-y: scroll;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
a:focus {
outline: thin dotted;
}
a:hover, a:active {
outline: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
audio, canvas, video {
display: inline-block;
*display: inline;
*zoom: 1;
}
audio:not([controls]) {
display: none;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
-ms-interpolation-mode: bicubic;
}
button,
input,
select,
textarea {
font-size: 100%;
margin: 0;
vertical-align: baseline;
*vertical-align: middle;
}
button, input {
line-height: normal;
*overflow: visible;
}
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
-webkit-appearance: button;
}
input[type="search"] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
textarea {
overflow: auto;
vertical-align: top;
}
/* Variables.less
* Variables to customize the look and feel of Bootstrap
* ----------------------------------------------------- */
/* Mixins.less
* Snippets of reusable CSS to develop faster and keep code readable
* ----------------------------------------------------------------- */
/*
* Scaffolding
* Basic and global styles for generating a grid system, structural layout, and page templates
* ------------------------------------------------------------------------------------------- */
html, body {
background-color: #ffffff;
}
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 18px;
color: #404040;
}
.container {
width: 940px;
margin-left: auto;
margin-right: auto;
zoom: 1;
}
.container:before, .container:after {
display: table;
content: "";
zoom: 1;
*display: inline;
}
.container:after {
clear: both;
}
.container-fluid {
position: relative;
min-width: 940px;
padding-left: 20px;
padding-right: 20px;
zoom: 1;
}
.container-fluid:before, .container-fluid:after {
display: table;
content: "";
zoom: 1;
*display: inline;
}
.container-fluid:after {
clear: both;
}
.container-fluid > .sidebar {
float: left;
width: 220px;
}
.container-fluid > .content {
margin-left: 240px;
}
a {
color: #0069d6;
text-decoration: none;
line-height: inherit;
font-weight: inherit;
}
a:hover {
color: #00438a;
text-decoration: underline;
}
.pull-right {
float: right;
}
.pull-left {
float: left;
}
.hide {
display: none;
}
.show {
display: block;
}
.row {
zoom: 1;
margin-left: -20px;
}
.row:before, .row:after {
display: table;
content: "";
zoom: 1;
*display: inline;
}
.row:after {
clear: both;
}
[class*="span"] {
display: inline;
float: left;
margin-left: 20px;
}
.span1 {
width: 40px;
}
.span2 {
width: 100px;
}
.span3 {
width: 160px;
}
.span4 {
width: 220px;
}
.span5 {
width: 280px;
}
.span6 {
width: 340px;
}
.span7 {
width: 400px;
}
.span8 {
width: 460px;
}
.span9 {
width: 520px;
}
.span10 {
width: 580px;
}
.span11 {
width: 640px;
}
.span12 {
width: 700px;
}
.span13 {
width: 760px;
}
.span14 {
width: 820px;
}
.span15 {
width: 880px;
}
.span16 {
width: 940px;
}
.span17 {
width: 1000px;
}
.span18 {
width: 1060px;
}
.span19 {
width: 1120px;
}
.span20 {
width: 1180px;
}
.span21 {
width: 1240px;
}
.span22 {
width: 1300px;
}
.span23 {
width: 1360px;
}
.span24 {
width: 1420px;
}
.offset1 {
margin-left: 80px;
}
.offset2 {
margin-left: 140px;
}
.offset3 {
margin-left: 200px;
}
.offset4 {
margin-left: 260px;
}
.offset5 {
margin-left: 320px;
}
.offset6 {
margin-left: 380px;
}
.offset7 {
margin-left: 440px;
}
.offset8 {
margin-left: 500px;
}
.offset9 {
margin-left: 560px;
}
.offset10 {
margin-left: 620px;
}
.offset11 {
margin-left: 680px;
}
.offset12 {
margin-left: 740px;
}
.span-one-third {
width: 300px;
}
.span-two-thirds {
width: 620px;
}
.offset-one-third {
margin-left: 340px;
}
.offset-two-thirds {
margin-left: 660px;
}
/* Typography.less
* Headings, body text, lists, code, and more for a versatile and durable typography system
* ---------------------------------------------------------------------------------------- */
p {
font-size: 13px;
font-weight: normal;
line-height: 18px;
margin-bottom: 9px;
}
p small {
font-size: 11px;
color: #bfbfbf;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
color: #404040;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
color: #bfbfbf;
}
h1 {
margin-bottom: 18px;
font-size: 30px;
line-height: 36px;
}
h1 small {
font-size: 18px;
}
h2 {
font-size: 24px;
line-height: 36px;
}
h2 small {
font-size: 14px;
}
h3,
h4,
h5,
h6 {
line-height: 36px;
}
h3 {
font-size: 18px;
}
h3 small {
font-size: 14px;
}
h4 {
font-size: 16px;
}
h4 small {
font-size: 12px;
}
h5 {
font-size: 14px;
}
h6 {
font-size: 13px;
color: #bfbfbf;
text-transform: uppercase;
}
ul, ol {
margin: 0 0 18px 25px;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin-bottom: 0;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
li {
line-height: 18px;
color: #808080;
}
ul.unstyled {
list-style: none;
margin-left: 0;
}
dl {
margin-bottom: 18px;
}
dl dt, dl dd {
line-height: 18px;
}
dl dt {
font-weight: bold;
}
dl dd {
margin-left: 9px;
}
hr {
margin: 20px 0 19px;
border: 0;
border-bottom: 1px solid #eee;
}
strong {
font-style: inherit;
font-weight: bold;
}
em {
font-style: italic;
font-weight: inherit;
line-height: inherit;
}
.muted {
color: #bfbfbf;
}
blockquote {
margin-bottom: 18px;
border-left: 5px solid #eee;
padding-left: 15px;
}
blockquote p {
font-size: 14px;
font-weight: 300;
line-height: 18px;
margin-bottom: 0;
}
blockquote small {
display: block;
font-size: 12px;
font-weight: 300;
line-height: 18px;
color: #bfbfbf;
}
blockquote small:before {
content: '\2014 \00A0';
}
address {
display: block;
line-height: 18px;
margin-bottom: 18px;
}
code, pre {
padding: 0 3px 2px;
font-family: Monaco, Andale Mono, Courier New, monospace;
font-size: 12px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
code {
background-color: #fee9cc;
color: rgba(0, 0, 0, 0.75);
padding: 1px 3px;
}
pre {
background-color: #f5f5f5;
display: block;
padding: 8.5px;
margin: 0 0 18px;
line-height: 18px;
font-size: 12px;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
/* Forms.less
* Base styles for various input types, form layouts, and states
* ------------------------------------------------------------- */
form {
margin-bottom: 18px;
}
fieldset {
margin-bottom: 18px;
padding-top: 18px;
}
fieldset legend {
display: block;
padding-left: 150px;
font-size: 19.5px;
line-height: 1;
color: #404040;
*padding: 0 0 5px 145px;
/* IE6-7 */
*line-height: 1.5;
/* IE6-7 */
}
form .clearfix {
margin-bottom: 18px;
zoom: 1;
}
form .clearfix:before, form .clearfix:after {
display: table;
content: "";
zoom: 1;
*display: inline;
}
form .clearfix:after {
clear: both;
}
label,
input,
select,
textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
line-height: normal;
}
label {
padding-top: 6px;
font-size: 13px;
line-height: 18px;
float: left;
width: 130px;
text-align: right;
color: #404040;
}
form .input {
margin-left: 150px;
}
input[type=checkbox], input[type=radio] {
cursor: pointer;
}
input,
textarea,
select,
.uneditable-input {
display: inline-block;
width: 210px;
height: 18px;
padding: 4px;
font-size: 13px;
line-height: 18px;
color: #808080;
border: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
/* mini reset for non-html5 file types */
input[type=checkbox], input[type=radio] {
width: auto;
height: auto;
padding: 0;
margin: 3px 0;
*margin-top: 0;
/* IE6-7 */
line-height: normal;
border: none;
}
input[type=file] {
background-color: #ffffff;
padding: initial;
border: initial;
line-height: initial;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
input[type=button], input[type=reset], input[type=submit] {
width: auto;
height: auto;
}
select, input[type=file] {
height: 27px;
line-height: 27px;
*margin-top: 4px;
/* For IE7, add top margin to align select with labels */
}
select[multiple] {
height: inherit;
}
textarea {
height: auto;
}
.uneditable-input {
background-color: #ffffff;
display: block;
border-color: #eee;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
cursor: not-allowed;
}
:-moz-placeholder {
color: #bfbfbf;
}
::-webkit-input-placeholder {
color: #bfbfbf;
}
input, textarea {
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
input:focus, textarea:focus {
outline: 0;
border-color: rgba(82, 168, 236, 0.8);
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}
input[type=file]:focus, input[type=checkbox]:focus, select:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
outline: 1px dotted #666;
}
form div.clearfix.error {
background: #fae5e3;
padding: 10px 0;
margin: -10px 0 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
form div.clearfix.error > label, form div.clearfix.error span.help-inline, form div.clearfix.error span.help-block {
color: #9d261d;
}
form div.clearfix.error input, form div.clearfix.error textarea {
border-color: #c87872;
-webkit-box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
-moz-box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
}
form div.clearfix.error input:focus, form div.clearfix.error textarea:focus {
border-color: #b9554d;
-webkit-box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
-moz-box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
}
form div.clearfix.error .input-prepend span.add-on, form div.clearfix.error .input-append span.add-on {
background: #f4c8c5;
border-color: #c87872;
color: #b9554d;
}
.input-mini,
input.mini,
textarea.mini,
select.mini {
width: 60px;
}
.input-small,
input.small,
textarea.small,
select.small {
width: 90px;
}
.input-medium,
input.medium,
textarea.medium,
select.medium {
width: 150px;
}
.input-large,
input.large,
textarea.large,
select.large {
width: 210px;
}
.input-xlarge,
input.xlarge,
textarea.xlarge,
select.xlarge {
width: 270px;
}
.input-xxlarge,
input.xxlarge,
textarea.xxlarge,
select.xxlarge {
width: 530px;
}
textarea.xxlarge {
overflow-y: auto;
}
input.span1, textarea.span1, select.span1 {
display: inline-block;
float: none;
width: 30px;
margin-left: 0;
}
input.span2, textarea.span2, select.span2 {
display: inline-block;
float: none;
width: 90px;
margin-left: 0;
}
input.span3, textarea.span3, select.span3 {
display: inline-block;
float: none;
width: 150px;
margin-left: 0;
}
input.span4, textarea.span4, select.span4 {
display: inline-block;
float: none;
width: 210px;
margin-left: 0;
}
input.span5, textarea.span5, select.span5 {
display: inline-block;
float: none;
width: 270px;
margin-left: 0;
}
input.span6, textarea.span6, select.span6 {
display: inline-block;
float: none;
width: 330px;
margin-left: 0;
}
input.span7, textarea.span7, select.span7 {
display: inline-block;
float: none;
width: 390px;
margin-left: 0;
}
input.span8, textarea.span8, select.span8 {
display: inline-block;
float: none;
width: 450px;
margin-left: 0;
}
input.span9, textarea.span9, select.span9 {
display: inline-block;
float: none;
width: 510px;
margin-left: 0;
}
input.span10, textarea.span10, select.span10 {
display: inline-block;
float: none;
width: 570px;
margin-left: 0;
}
input.span11, textarea.span11, select.span11 {
display: inline-block;
float: none;
width: 630px;
margin-left: 0;
}
input.span12, textarea.span12, select.span12 {
display: inline-block;
float: none;
width: 690px;
margin-left: 0;
}
input.span13, textarea.span13, select.span13 {
display: inline-block;
float: none;
width: 750px;
margin-left: 0;
}
input.span14, textarea.span14, select.span14 {
display: inline-block;
float: none;
width: 810px;
margin-left: 0;
}
input.span15, textarea.span15, select.span15 {
display: inline-block;
float: none;
width: 870px;
margin-left: 0;
}
input.span16, textarea.span16, select.span16 {
display: inline-block;
float: none;
width: 930px;
margin-left: 0;
}
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
background-color: #f5f5f5;
border-color: #ddd;
cursor: not-allowed;
}
.actions {
background: #f5f5f5;
margin-top: 18px;
margin-bottom: 18px;
padding: 17px 20px 18px 150px;
border-top: 1px solid #ddd;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
.actions .secondary-action {
float: right;
}
.actions .secondary-action a {
line-height: 30px;
}
.actions .secondary-action a:hover {
text-decoration: underline;
}
.help-inline, .help-block {
font-size: 11px;
line-height: 18px;
color: #bfbfbf;
}
.help-inline {
padding-left: 5px;
*position: relative;
/* IE6-7 */
*top: -5px;
/* IE6-7 */
}
.help-block {
display: block;
max-width: 600px;
}
.inline-inputs {
color: #808080;
}
.inline-inputs span, .inline-inputs input {
display: inline-block;
}
.inline-inputs input.mini {
width: 60px;
}
.inline-inputs input.small {
width: 90px;
}
.inline-inputs span {
padding: 0 2px 0 1px;
}
.input-prepend input, .input-append input {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.input-prepend .add-on, .input-append .add-on {
position: relative;
background: #f5f5f5;
border: 1px solid #ccc;
z-index: 2;
float: left;
display: block;
width: auto;
min-width: 16px;
height: 18px;
padding: 4px 4px 4px 5px;
margin-right: -1px;
font-weight: normal;
line-height: 18px;
color: #bfbfbf;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.input-prepend .active, .input-append .active {
background: #a9dba9;
border-color: #46a546;
}
.input-prepend .add-on {
*margin-top: 1px;
/* IE6-7 */
}
.input-append input {
float: left;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.input-append .add-on {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
margin-right: 0;
margin-left: -1px;
}
.inputs-list {
margin: 0 0 5px;
width: 100%;
}
.inputs-list li {
display: block;
padding: 0;
width: 100%;
}
.inputs-list label {
display: block;
float: none;
width: auto;
padding: 0;
line-height: 18px;
text-align: left;
white-space: normal;
}
.inputs-list label strong {
color: #808080;
}
.inputs-list label small {
font-size: 11px;
font-weight: normal;
}
.inputs-list .inputs-list {
margin-left: 25px;
margin-bottom: 10px;
padding-top: 0;
}
.inputs-list:first-child {
padding-top: 6px;
}
.inputs-list li + li {
padding-top: 2px;
}
.inputs-list input[type=radio], .inputs-list input[type=checkbox] {
margin-bottom: 0;
}
.form-stacked {
padding-left: 20px;
}
.form-stacked fieldset {
padding-top: 9px;
}
.form-stacked legend {
padding-left: 0;
}
.form-stacked label {
display: block;
float: none;
width: auto;
font-weight: bold;
text-align: left;
line-height: 20px;
padding-top: 0;
}
.form-stacked .clearfix {
margin-bottom: 9px;
}
.form-stacked .clearfix div.input {
margin-left: 0;
}
.form-stacked .inputs-list {
margin-bottom: 0;
}
.form-stacked .inputs-list li {
padding-top: 0;
}
.form-stacked .inputs-list li label {
font-weight: normal;
padding-top: 0;
}
.form-stacked div.clearfix.error {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
margin-top: 0;
margin-left: -10px;
}
.form-stacked .actions {
margin-left: -20px;
padding-left: 20px;
}
/*
* Tables.less
* Tables for, you guessed it, tabular data
* ---------------------------------------- */
table {
width: 100%;
margin-bottom: 18px;
padding: 0;
border-collapse: separate;
*border-collapse: collapse;
/* IE7, collapse table to remove spacing */
font-size: 13px;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
table th, table td {
padding: 10px 10px 9px;
line-height: 18px;
text-align: left;
}
table th {
padding-top: 9px;
font-weight: bold;
vertical-align: middle;
border-bottom: 1px solid #ddd;
}
table td {
vertical-align: top;
}
table th + th, table td + td {
border-left: 1px solid #ddd;
}
table tr + tr td {
border-top: 1px solid #ddd;
}
table tbody tr:first-child td:first-child {
-webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
border-radius: 4px 0 0 0;
}
table tbody tr:first-child td:last-child {
-webkit-border-radius: 0 4px 0 0;
-moz-border-radius: 0 4px 0 0;
border-radius: 0 4px 0 0;
}
table tbody tr:last-child td:first-child {
-webkit-border-radius: 0 0 0 4px;
-moz-border-radius: 0 0 0 4px;
border-radius: 0 0 0 4px;
}
table tbody tr:last-child td:last-child {
-webkit-border-radius: 0 0 4px 0;
-moz-border-radius: 0 0 4px 0;
border-radius: 0 0 4px 0;
}
.zebra-striped tbody tr:nth-child(odd) td {
background-color: #f9f9f9;
}
.zebra-striped tbody tr:hover td {
background-color: #f5f5f5;
}
table .header {
cursor: pointer;
}
table .header:after {
content: "";
float: right;
margin-top: 7px;
border-width: 0 4px 4px;
border-style: solid;
border-color: #000 transparent;
visibility: hidden;
}
table .headerSortUp, table .headerSortDown {
background-color: rgba(141, 192, 219, 0.25);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}
table .header:hover:after {
visibility: visible;
}
table .headerSortDown:after, table .headerSortDown:hover:after {
visibility: visible;
filter: alpha(opacity=60);
-khtml-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
table .headerSortUp:after {
border-bottom: none;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #000;
visibility: visible;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
filter: alpha(opacity=60);
-khtml-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
table .blue {
color: #049cdb;
border-bottom-color: #049cdb;
}
table .headerSortUp.blue, table .headerSortDown.blue {
background-color: #ade6fe;
}
table .green {
color: #46a546;
border-bottom-color: #46a546;
}
table .headerSortUp.green, table .headerSortDown.green {
background-color: #cdeacd;
}
table .red {
color: #9d261d;
border-bottom-color: #9d261d;
}
table .headerSortUp.red, table .headerSortDown.red {
background-color: #f4c8c5;
}
table .yellow {
color: #ffc40d;
border-bottom-color: #ffc40d;
}
table .headerSortUp.yellow, table .headerSortDown.yellow {
background-color: #fff6d9;
}
table .orange {
color: #f89406;
border-bottom-color: #f89406;
}
table .headerSortUp.orange, table .headerSortDown.orange {
background-color: #fee9cc;
}
table .purple {
color: #7a43b6;
border-bottom-color: #7a43b6;
}
table .headerSortUp.purple, table .headerSortDown.purple {
background-color: #e2d5f0;
}
/* Patterns.less
* Repeatable UI elements outside the base styles provided from the scaffolding
* ---------------------------------------------------------------------------- */
.topbar {
height: 40px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10000;
overflow: visible;
}
.topbar a {
color: #bfbfbf;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.topbar h3 a:hover, .topbar .brand a:hover, .topbar ul .active > a {
background-color: #333;
background-color: rgba(255, 255, 255, 0.05);
color: #ffffff;
text-decoration: none;
}
.topbar h3 {
position: relative;
}
.topbar h3 a, .topbar .brand {
float: left;
display: block;
padding: 8px 20px 12px;
margin-left: -20px;
color: #ffffff;
font-size: 20px;
font-weight: 200;
line-height: 1;
}
.topbar p {
margin: 0;
line-height: 40px;
}
.topbar p a:hover {
background-color: transparent;
color: #ffffff;
}
.topbar form {
float: left;
margin: 5px 0 0 0;
position: relative;
filter: alpha(opacity=100);
-khtml-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
.topbar form.pull-right {
float: right;
}
.topbar input {
background-color: #444;
background-color: rgba(255, 255, 255, 0.3);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: normal;
font-weight: 13px;
line-height: 1;
padding: 4px 9px;
color: #ffffff;
color: rgba(255, 255, 255, 0.75);
border: 1px solid #111;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.25);
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.topbar input:-moz-placeholder {
color: #e6e6e6;
}
.topbar input::-webkit-input-placeholder {
color: #e6e6e6;
}
.topbar input:hover {
background-color: #bfbfbf;
background-color: rgba(255, 255, 255, 0.5);
color: #ffffff;
}
.topbar input:focus, .topbar input.focused {
outline: 0;
background-color: #ffffff;
color: #404040;
text-shadow: 0 1px 0 #ffffff;
border: 0;
padding: 5px 10px;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}
.topbar-inner, .topbar .fill {
background-color: #222;
background-color: #222222;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));
background-image: -moz-linear-gradient(top, #333333, #222222);
background-image: -ms-linear-gradient(top, #333333, #222222);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));
background-image: -webkit-linear-gradient(top, #333333, #222222);
background-image: -o-linear-gradient(top, #333333, #222222);
background-image: linear-gradient(top, #333333, #222222);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.topbar div > ul, .nav {
display: block;
float: left;
margin: 0 10px 0 0;
position: relative;
left: 0;
}
.topbar div > ul > li, .nav > li {
display: block;
float: left;
}
.topbar div > ul a, .nav a {
display: block;
float: none;
padding: 10px 10px 11px;
line-height: 19px;
text-decoration: none;
}
.topbar div > ul a:hover, .nav a:hover {
color: #ffffff;
text-decoration: none;
}
.topbar div > ul .active > a, .nav .active > a {
background-color: #222;
background-color: rgba(0, 0, 0, 0.5);
}
.topbar div > ul.secondary-nav, .nav.secondary-nav {
float: right;
margin-left: 10px;
margin-right: 0;
}
.topbar div > ul.secondary-nav .menu-dropdown,
.nav.secondary-nav .menu-dropdown,
.topbar div > ul.secondary-nav .dropdown-menu,
.nav.secondary-nav .dropdown-menu {
right: 0;
border: 0;
}
.topbar div > ul a.menu:hover,
.nav a.menu:hover,
.topbar div > ul li.open .menu,
.nav li.open .menu,
.topbar div > ul .dropdown-toggle:hover,
.nav .dropdown-toggle:hover,
.topbar div > ul .dropdown.open .dropdown-toggle,
.nav .dropdown.open .dropdown-toggle {
background: #444;
background: rgba(255, 255, 255, 0.05);
}
.topbar div > ul .menu-dropdown,
.nav .menu-dropdown,
.topbar div > ul .dropdown-menu,
.nav .dropdown-menu {
background-color: #333;
}
.topbar div > ul .menu-dropdown a.menu,
.nav .menu-dropdown a.menu,
.topbar div > ul .dropdown-menu a.menu,
.nav .dropdown-menu a.menu,
.topbar div > ul .menu-dropdown .dropdown-toggle,
.nav .menu-dropdown .dropdown-toggle,
.topbar div > ul .dropdown-menu .dropdown-toggle,
.nav .dropdown-menu .dropdown-toggle {
color: #ffffff;
}
.topbar div > ul .menu-dropdown a.menu.open,
.nav .menu-dropdown a.menu.open,
.topbar div > ul .dropdown-menu a.menu.open,
.nav .dropdown-menu a.menu.open,
.topbar div > ul .menu-dropdown .dropdown-toggle.open,
.nav .menu-dropdown .dropdown-toggle.open,
.topbar div > ul .dropdown-menu .dropdown-toggle.open,
.nav .dropdown-menu .dropdown-toggle.open {
background: #444;
background: rgba(255, 255, 255, 0.05);
}
.topbar div > ul .menu-dropdown li a,
.nav .menu-dropdown li a,
.topbar div > ul .dropdown-menu li a,
.nav .dropdown-menu li a {
color: #999;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.topbar div > ul .menu-dropdown li a:hover,
.nav .menu-dropdown li a:hover,
.topbar div > ul .dropdown-menu li a:hover,
.nav .dropdown-menu li a:hover {
background-color: #191919;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));
background-image: -moz-linear-gradient(top, #292929, #191919);
background-image: -ms-linear-gradient(top, #292929, #191919);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));
background-image: -webkit-linear-gradient(top, #292929, #191919);
background-image: -o-linear-gradient(top, #292929, #191919);
background-image: linear-gradient(top, #292929, #191919);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);
color: #ffffff;
}
.topbar div > ul .menu-dropdown .active a,
.nav .menu-dropdown .active a,
.topbar div > ul .dropdown-menu .active a,
.nav .dropdown-menu .active a {
color: #ffffff;
}
.topbar div > ul .menu-dropdown .divider,
.nav .menu-dropdown .divider,
.topbar div > ul .dropdown-menu .divider,
.nav .dropdown-menu .divider {
background-color: #222;
border-color: #444;
}
.topbar ul .menu-dropdown li a, .topbar ul .dropdown-menu li a {
padding: 4px 15px;
}
li.menu, .dropdown {
position: relative;
}
a.menu:after, .dropdown-toggle:after {
width: 0;
height: 0;
display: inline-block;
content: "↓";
text-indent: -99999px;
vertical-align: top;
margin-top: 8px;
margin-left: 4px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #ffffff;
filter: alpha(opacity=50);
-khtml-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
}
.menu-dropdown, .dropdown-menu {
background-color: #ffffff;
float: left;
display: none;
position: absolute;
top: 40px;
z-index: 900;
min-width: 160px;
max-width: 220px;
_width: 160px;
margin-left: 0;
margin-right: 0;
padding: 6px 0;
zoom: 1;
border-color: #999;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 0 1px 1px;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.menu-dropdown li, .dropdown-menu li {
float: none;
display: block;
background-color: none;
}
.menu-dropdown .divider, .dropdown-menu .divider {
height: 1px;
margin: 5px 0;
overflow: hidden;
background-color: #eee;
border-bottom: 1px solid #ffffff;
}
.topbar .dropdown-menu a, .dropdown-menu a {
display: block;
padding: 4px 15px;
clear: both;
font-weight: normal;
line-height: 18px;
color: #808080;
text-shadow: 0 1px 0 #ffffff;
}
.topbar .dropdown-menu a:hover, .dropdown-menu a:hover {
background-color: #dddddd;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
background-image: -ms-linear-gradient(top, #eeeeee, #dddddd);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));
background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
background-image: linear-gradient(top, #eeeeee, #dddddd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);
color: #404040;
text-decoration: none;
-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
}
.open .menu,
.dropdown.open .menu,
.open .dropdown-toggle,
.dropdown.open .dropdown-toggle {
color: #ffffff;
background: #ccc;
background: rgba(0, 0, 0, 0.3);
}
.open .menu-dropdown,
.dropdown.open .menu-dropdown,
.open .dropdown-menu,
.dropdown.open .dropdown-menu {
display: block;
}
.tabs, .pills {
margin: 0 0 20px;
padding: 0;
list-style: none;
zoom: 1;
}
.tabs:before,
.pills:before,
.tabs:after,
.pills:after {
display: table;
content: "";
zoom: 1;
*display: inline;
}
.tabs:after, .pills:after {
clear: both;
}
.tabs > li, .pills > li {
float: left;
}
.tabs > li > a, .pills > li > a {
display: block;
}
.tabs {
float: left;
width: 100%;
border-bottom: 1px solid #ddd;
}
.tabs > li {
position: relative;
top: 1px;
}
.tabs > li > a {
padding: 0 15px;
margin-right: 2px;
line-height: 36px;
border: 1px solid transparent;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.tabs > li > a:hover {
text-decoration: none;
background-color: #eee;
border-color: #eee #eee #ddd;
}
.tabs > li.active > a {
color: #808080;
background-color: #ffffff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.tabs .menu-dropdown, .tabs .dropdown-menu {
top: 35px;
border-width: 1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.tabs a.menu:after, .tabs .dropdown-toggle:after {
border-top-color: #999;
margin-top: 15px;
margin-left: 5px;
}
.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle {
border-color: #999;
}
.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after {
border-top-color: #555;
}
.tab-content {
clear: both;
}
.pills a {
margin: 5px 3px 5px 0;
padding: 0 15px;
text-shadow: 0 1px 1px #ffffff;
line-height: 30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.pills a:hover {
background: #00438a;
color: #ffffff;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.pills .active a {
background: #0069d6;
color: #ffffff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.tab-content > *, .pill-content > * {
display: none;
}
.tab-content > .active, .pill-content > .active {
display: block;
}
.breadcrumb {
margin: 0 0 18px;
padding: 7px 14px;
background-color: #f5f5f5;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));
background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));
background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
background-image: linear-gradient(top, #ffffff, #f5f5f5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
}
.breadcrumb li {
display: inline;
text-shadow: 0 1px 0 #ffffff;
}
.breadcrumb .divider {
padding: 0 5px;
color: #bfbfbf;
}
.breadcrumb .active a {
color: #404040;
}
.hero-unit {
background-color: #f5f5f5;
margin-bottom: 30px;
padding: 60px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.hero-unit h1 {
margin-bottom: 0;
font-size: 60px;
line-height: 1;
letter-spacing: -1px;
}
.hero-unit p {
font-size: 18px;
font-weight: 200;
line-height: 27px;
}
footer {
margin-top: 17px;
padding-top: 17px;
border-top: 1px solid #eee;
}
.page-header {
margin-bottom: 17px;
border-bottom: 1px solid #ddd;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.page-header h1 {
margin-bottom: 8px;
}
.btn.danger,
.alert-message.danger,
.btn.danger:hover,
.alert-message.danger:hover,
.btn.error,
.alert-message.error,
.btn.error:hover,
.alert-message.error:hover,
.btn.success,
.alert-message.success,
.btn.success:hover,
.alert-message.success:hover,
.btn.info,
.alert-message.info,
.btn.info:hover,
.alert-message.info:hover {
color: #ffffff;
}
.btn.danger,
.alert-message.danger,
.btn.error,
.alert-message.error {
background-color: #c43c35;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
background-image: linear-gradient(top, #ee5f5b, #c43c35);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #c43c35 #c43c35 #882a25;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn.success, .alert-message.success {
background-color: #57a957;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
background-image: -moz-linear-gradient(top, #62c462, #57a957);
background-image: -ms-linear-gradient(top, #62c462, #57a957);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
background-image: -webkit-linear-gradient(top, #62c462, #57a957);
background-image: -o-linear-gradient(top, #62c462, #57a957);
background-image: linear-gradient(top, #62c462, #57a957);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #57a957 #57a957 #3d773d;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn.info, .alert-message.info {
background-color: #339bb9;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));
background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
background-image: linear-gradient(top, #5bc0de, #339bb9);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #339bb9 #339bb9 #22697d;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn {
cursor: pointer;
display: inline-block;
background-color: #e6e6e6;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
padding: 5px 14px 6px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
color: #333;
font-size: 13px;
line-height: normal;
border: 1px solid #ccc;
border-bottom-color: #bbb;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-webkit-transition: 0.1s linear all;
-moz-transition: 0.1s linear all;
-ms-transition: 0.1s linear all;
-o-transition: 0.1s linear all;
transition: 0.1s linear all;
}
.btn:hover {
background-position: 0 -15px;
color: #333;
text-decoration: none;
}
.btn:focus {
outline: 1px dotted #666;
}
.btn.primary {
color: #ffffff;
background-color: #0064cd;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
background-image: -o-linear-gradient(top, #049cdb, #0064cd);
background-image: linear-gradient(top, #049cdb, #0064cd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #0064cd #0064cd #003f81;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn:active {
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn.disabled {
cursor: default;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
filter: alpha(opacity=65);
-khtml-opacity: 0.65;
-moz-opacity: 0.65;
opacity: 0.65;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.btn[disabled] {
cursor: default;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
filter: alpha(opacity=65);
-khtml-opacity: 0.65;
-moz-opacity: 0.65;
opacity: 0.65;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.btn.large {
font-size: 15px;
line-height: normal;
padding: 9px 14px 9px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.btn.small {
padding: 7px 9px 7px;
font-size: 11px;
}
:root .alert-message, :root .btn {
border-radius: 0 \0;
}
button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
padding: 0;
border: 0;
}
.close {
float: right;
color: #000000;
font-size: 20px;
font-weight: bold;
line-height: 13.5px;
text-shadow: 0 1px 0 #ffffff;
filter: alpha(opacity=20);
-khtml-opacity: 0.2;
-moz-opacity: 0.2;
opacity: 0.2;
}
.close:hover {
color: #000000;
text-decoration: none;
filter: alpha(opacity=40);
-khtml-opacity: 0.4;
-moz-opacity: 0.4;
opacity: 0.4;
}
.alert-message {
position: relative;
padding: 7px 15px;
margin-bottom: 18px;
color: #404040;
background-color: #eedc94;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
background-image: -o-linear-gradient(top, #fceec1, #eedc94);
background-image: linear-gradient(top, #fceec1, #eedc94);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #eedc94 #eedc94 #e4c652;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
border-width: 1px;
border-style: solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.alert-message .close {
*margin-top: 3px;
/* IE7 spacing */
}
.alert-message h5 {
line-height: 18px;
}
.alert-message p {
margin-bottom: 0;
}
.alert-message div {
margin-top: 5px;
margin-bottom: 2px;
line-height: 28px;
}
.alert-message .btn {
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.alert-message.block-message {
background-image: none;
background-color: #fdf5d9;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
padding: 14px;
border-color: #fceec1;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.alert-message.block-message ul, .alert-message.block-message p {
margin-right: 30px;
}
.alert-message.block-message ul {
margin-bottom: 0;
}
.alert-message.block-message li {
color: #404040;
}
.alert-message.block-message .alert-actions {
margin-top: 5px;
}
.alert-message.block-message.error, .alert-message.block-message.success, .alert-message.block-message.info {
color: #404040;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.alert-message.block-message.error {
background-color: #fddfde;
border-color: #fbc7c6;
}
.alert-message.block-message.success {
background-color: #d1eed1;
border-color: #bfe7bf;
}
.alert-message.block-message.info {
background-color: #ddf4fb;
border-color: #c6edf9;
}
.pagination {
height: 36px;
margin: 18px 0;
}
.pagination ul {
float: left;
margin: 0;
border: 1px solid #ddd;
border: 1px solid rgba(0, 0, 0, 0.15);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.pagination li {
display: inline;
}
.pagination a {
float: left;
padding: 0 14px;
line-height: 34px;
border-right: 1px solid;
border-right-color: #ddd;
border-right-color: rgba(0, 0, 0, 0.15);
*border-right-color: #ddd;
/* IE6-7 */
text-decoration: none;
}
.pagination a:hover, .pagination .active a {
background-color: #c7eefe;
}
.pagination .disabled a, .pagination .disabled a:hover {
background-color: transparent;
color: #bfbfbf;
}
.pagination .next a {
border: 0;
}
.well {
background-color: #f5f5f5;
margin-bottom: 20px;
padding: 19px;
min-height: 20px;
border: 1px solid #eee;
border: 1px solid rgba(0, 0, 0, 0.05);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.well blockquote {
border-color: #ddd;
border-color: rgba(0, 0, 0, 0.15);
}
.modal-backdrop {
background-color: #000000;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop, .modal-backdrop.fade.in {
filter: alpha(opacity=80);
-khtml-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
z-index: 11000;
width: 560px;
margin: -250px 0 0 -250px;
background-color: #ffffff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid #999;
/* IE6-7 */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.modal .close {
margin-top: 7px;
}
.modal.fade {
-webkit-transition: opacity .3s linear, top .3s ease-out;
-moz-transition: opacity .3s linear, top .3s ease-out;
-ms-transition: opacity .3s linear, top .3s ease-out;
-o-transition: opacity .3s linear, top .3s ease-out;
transition: opacity .3s linear, top .3s ease-out;
top: -25%;
}
.modal.fade.in {
top: 50%;
}
.modal-header {
border-bottom: 1px solid #eee;
padding: 5px 15px;
}
.modal-body {
padding: 15px;
}
.modal-footer {
background-color: #f5f5f5;
padding: 14px 15px 15px;
border-top: 1px solid #ddd;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
zoom: 1;
margin-bottom: 0;
}
.modal-footer:before, .modal-footer:after {
display: table;
content: "";
zoom: 1;
*display: inline;
}
.modal-footer:after {
clear: both;
}
.modal-footer .btn {
float: right;
margin-left: 5px;
}
.twipsy {
display: block;
position: absolute;
visibility: visible;
padding: 5px;
font-size: 11px;
z-index: 1000;
filter: alpha(opacity=80);
-khtml-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
}
.twipsy.fade.in {
filter: alpha(opacity=80);
-khtml-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
}
.twipsy.above .twipsy-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000000;
}
.twipsy.left .twipsy-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #000000;
}
.twipsy.below .twipsy-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #000000;
}
.twipsy.right .twipsy-arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #000000;
}
.twipsy-inner {
padding: 3px 8px;
background-color: #000000;
color: white;
text-align: center;
max-width: 200px;
text-decoration: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.twipsy-arrow {
position: absolute;
width: 0;
height: 0;
}
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
padding: 5px;
display: none;
}
.popover.above .arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000000;
}
.popover.right .arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #000000;
}
.popover.below .arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #000000;
}
.popover.left .arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #000000;
}
.popover .arrow {
position: absolute;
width: 0;
height: 0;
}
.popover .inner {
background-color: #000000;
background-color: rgba(0, 0, 0, 0.8);
padding: 3px;
overflow: hidden;
width: 280px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
.popover .title {
background-color: #f5f5f5;
padding: 9px 15px;
line-height: 1;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
border-bottom: 1px solid #eee;
}
.popover .content {
background-color: #ffffff;
padding: 14px;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.popover .content p, .popover .content ul, .popover .content ol {
margin-bottom: 0;
}
.fade {
-webkit-transition: opacity 0.15s linear;
-moz-transition: opacity 0.15s linear;
-ms-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
opacity: 0;
}
.fade.in {
opacity: 1;
}
.label {
padding: 1px 3px 2px;
background-color: #bfbfbf;
font-size: 9.75px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
white-space: nowrap;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.label.important {
background-color: #c43c35;
}
.label.warning {
background-color: #f89406;
}
.label.success {
background-color: #46a546;
}
.label.notice {
background-color: #62cffc;
}
.media-grid {
margin-left: -20px;
margin-bottom: 0;
zoom: 1;
}
.media-grid:before, .media-grid:after {
display: table;
content: "";
zoom: 1;
*display: inline;
}
.media-grid:after {
clear: both;
}
.media-grid li {
display: inline;
}
.media-grid a {
float: left;
padding: 4px;
margin: 0 0 20px 20px;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
}
.media-grid a img {
display: block;
}
.media-grid a:hover {
border-color: #0069d6;
-webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
-moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:normal;font-style:normal;font-size:100%;line-height:1;font-family:inherit;}
table{border-collapse:collapse;border-spacing:0;}
ol,ul{list-style:none;}
q:before,q:after,blockquote:before,blockquote:after{content:"";}
html{overflow-y:scroll;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
a:focus{outline:thin dotted;}
a:hover,a:active{outline:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}
audio:not([controls]){display:none;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{border:0;-ms-interpolation-mode:bicubic;}
button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle;}
button,input{line-height:normal;*overflow:visible;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;}
input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
textarea{overflow:auto;vertical-align:top;}
html,body{background-color:#ffffff;}
body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;color:#404040;}
.container{width:940px;margin-left:auto;margin-right:auto;zoom:1;}.container:before,.container:after{display:table;content:"";zoom:1;*display:inline;}
.container:after{clear:both;}
.container-fluid{position:relative;min-width:940px;padding-left:20px;padding-right:20px;zoom:1;}.container-fluid:before,.container-fluid:after{display:table;content:"";zoom:1;*display:inline;}
.container-fluid:after{clear:both;}
.container-fluid>.sidebar{float:left;width:220px;}
.container-fluid>.content{margin-left:240px;}
a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:hover{color:#00438a;text-decoration:underline;}
.pull-right{float:right;}
.pull-left{float:left;}
.hide{display:none;}
.show{display:block;}
.row{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;}
.row:after{clear:both;}
[class*="span"]{display:inline;float:left;margin-left:20px;}
.span1{width:40px;}
.span2{width:100px;}
.span3{width:160px;}
.span4{width:220px;}
.span5{width:280px;}
.span6{width:340px;}
.span7{width:400px;}
.span8{width:460px;}
.span9{width:520px;}
.span10{width:580px;}
.span11{width:640px;}
.span12{width:700px;}
.span13{width:760px;}
.span14{width:820px;}
.span15{width:880px;}
.span16{width:940px;}
.span17{width:1000px;}
.span18{width:1060px;}
.span19{width:1120px;}
.span20{width:1180px;}
.span21{width:1240px;}
.span22{width:1300px;}
.span23{width:1360px;}
.span24{width:1420px;}
.offset1{margin-left:80px;}
.offset2{margin-left:140px;}
.offset3{margin-left:200px;}
.offset4{margin-left:260px;}
.offset5{margin-left:320px;}
.offset6{margin-left:380px;}
.offset7{margin-left:440px;}
.offset8{margin-left:500px;}
.offset9{margin-left:560px;}
.offset10{margin-left:620px;}
.offset11{margin-left:680px;}
.offset12{margin-left:740px;}
.span-one-third{width:300px;}
.span-two-thirds{width:620px;}
.offset-one-third{margin-left:340px;}
.offset-two-thirds{margin-left:660px;}
p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;}
h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}
h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;}
h2{font-size:24px;line-height:36px;}h2 small{font-size:14px;}
h3,h4,h5,h6{line-height:36px;}
h3{font-size:18px;}h3 small{font-size:14px;}
h4{font-size:16px;}h4 small{font-size:12px;}
h5{font-size:14px;}
h6{font-size:13px;color:#bfbfbf;text-transform:uppercase;}
ul,ol{margin:0 0 18px 25px;}
ul ul,ul ol,ol ol,ol ul{margin-bottom:0;}
ul{list-style:disc;}
ol{list-style:decimal;}
li{line-height:18px;color:#808080;}
ul.unstyled{list-style:none;margin-left:0;}
dl{margin-bottom:18px;}dl dt,dl dd{line-height:18px;}
dl dt{font-weight:bold;}
dl dd{margin-left:9px;}
hr{margin:20px 0 19px;border:0;border-bottom:1px solid #eee;}
strong{font-style:inherit;font-weight:bold;}
em{font-style:italic;font-weight:inherit;line-height:inherit;}
.muted{color:#bfbfbf;}
blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:14px;font-weight:300;line-height:18px;margin-bottom:0;}
blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';}
address{display:block;line-height:18px;margin-bottom:18px;}
code,pre{padding:0 3px 2px;font-family:Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;}
pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
form{margin-bottom:18px;}
fieldset{margin-bottom:18px;padding-top:18px;}fieldset legend{display:block;padding-left:150px;font-size:19.5px;line-height:1;color:#404040;*padding:0 0 5px 145px;*line-height:1.5;}
form .clearfix{margin-bottom:18px;zoom:1;}form .clearfix:before,form .clearfix:after{display:table;content:"";zoom:1;*display:inline;}
form .clearfix:after{clear:both;}
label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:normal;}
label{padding-top:6px;font-size:13px;line-height:18px;float:left;width:130px;text-align:right;color:#404040;}
form .input{margin-left:150px;}
input[type=checkbox],input[type=radio]{cursor:pointer;}
input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;}
input[type=file]{background-color:#ffffff;padding:initial;border:initial;line-height:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;}
select,input[type=file]{height:27px;line-height:27px;*margin-top:4px;}
select[multiple]{height:inherit;}
textarea{height:auto;}
.uneditable-input{background-color:#ffffff;display:block;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;}
:-moz-placeholder{color:#bfbfbf;}
::-webkit-input-placeholder{color:#bfbfbf;}
input,textarea{-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);}
input:focus,textarea:focus{outline:0;border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);}
input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;outline:1px dotted #666;}
form div.clearfix.error{background:#fae5e3;padding:10px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}form div.clearfix.error>label,form div.clearfix.error span.help-inline,form div.clearfix.error span.help-block{color:#9d261d;}
form div.clearfix.error input,form div.clearfix.error textarea{border-color:#c87872;-webkit-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);-moz-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);box-shadow:0 0 3px rgba(171, 41, 32, 0.25);}form div.clearfix.error input:focus,form div.clearfix.error textarea:focus{border-color:#b9554d;-webkit-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);-moz-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);box-shadow:0 0 6px rgba(171, 41, 32, 0.5);}
form div.clearfix.error .input-prepend span.add-on,form div.clearfix.error .input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;}
.input-mini,input.mini,textarea.mini,select.mini{width:60px;}
.input-small,input.small,textarea.small,select.small{width:90px;}
.input-medium,input.medium,textarea.medium,select.medium{width:150px;}
.input-large,input.large,textarea.large,select.large{width:210px;}
.input-xlarge,input.xlarge,textarea.xlarge,select.xlarge{width:270px;}
.input-xxlarge,input.xxlarge,textarea.xxlarge,select.xxlarge{width:530px;}
textarea.xxlarge{overflow-y:auto;}
input.span1,textarea.span1,select.span1{display:inline-block;float:none;width:30px;margin-left:0;}
input.span2,textarea.span2,select.span2{display:inline-block;float:none;width:90px;margin-left:0;}
input.span3,textarea.span3,select.span3{display:inline-block;float:none;width:150px;margin-left:0;}
input.span4,textarea.span4,select.span4{display:inline-block;float:none;width:210px;margin-left:0;}
input.span5,textarea.span5,select.span5{display:inline-block;float:none;width:270px;margin-left:0;}
input.span6,textarea.span6,select.span6{display:inline-block;float:none;width:330px;margin-left:0;}
input.span7,textarea.span7,select.span7{display:inline-block;float:none;width:390px;margin-left:0;}
input.span8,textarea.span8,select.span8{display:inline-block;float:none;width:450px;margin-left:0;}
input.span9,textarea.span9,select.span9{display:inline-block;float:none;width:510px;margin-left:0;}
input.span10,textarea.span10,select.span10{display:inline-block;float:none;width:570px;margin-left:0;}
input.span11,textarea.span11,select.span11{display:inline-block;float:none;width:630px;margin-left:0;}
input.span12,textarea.span12,select.span12{display:inline-block;float:none;width:690px;margin-left:0;}
input.span13,textarea.span13,select.span13{display:inline-block;float:none;width:750px;margin-left:0;}
input.span14,textarea.span14,select.span14{display:inline-block;float:none;width:810px;margin-left:0;}
input.span15,textarea.span15,select.span15{display:inline-block;float:none;width:870px;margin-left:0;}
input.span16,textarea.span16,select.span16{display:inline-block;float:none;width:930px;margin-left:0;}
input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
.actions{background:#f5f5f5;margin-top:18px;margin-bottom:18px;padding:17px 20px 18px 150px;border-top:1px solid #ddd;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}.actions .secondary-action{float:right;}.actions .secondary-action a{line-height:30px;}.actions .secondary-action a:hover{text-decoration:underline;}
.help-inline,.help-block{font-size:11px;line-height:18px;color:#bfbfbf;}
.help-inline{padding-left:5px;*position:relative;*top:-5px;}
.help-block{display:block;max-width:600px;}
.inline-inputs{color:#808080;}.inline-inputs span,.inline-inputs input{display:inline-block;}
.inline-inputs input.mini{width:60px;}
.inline-inputs input.small{width:90px;}
.inline-inputs span{padding:0 2px 0 1px;}
.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
.input-prepend .add-on,.input-append .add-on{position:relative;background:#f5f5f5;border:1px solid #ccc;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;padding:4px 4px 4px 5px;margin-right:-1px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
.input-prepend .active,.input-append .active{background:#a9dba9;border-color:#46a546;}
.input-prepend .add-on{*margin-top:1px;}
.input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
.input-append .add-on{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin-right:0;margin-left:-1px;}
.inputs-list{margin:0 0 5px;width:100%;}.inputs-list li{display:block;padding:0;width:100%;}
.inputs-list label{display:block;float:none;width:auto;padding:0;line-height:18px;text-align:left;white-space:normal;}.inputs-list label strong{color:#808080;}
.inputs-list label small{font-size:11px;font-weight:normal;}
.inputs-list .inputs-list{margin-left:25px;margin-bottom:10px;padding-top:0;}
.inputs-list:first-child{padding-top:6px;}
.inputs-list li+li{padding-top:2px;}
.inputs-list input[type=radio],.inputs-list input[type=checkbox]{margin-bottom:0;}
.form-stacked{padding-left:20px;}.form-stacked fieldset{padding-top:9px;}
.form-stacked legend{padding-left:0;}
.form-stacked label{display:block;float:none;width:auto;font-weight:bold;text-align:left;line-height:20px;padding-top:0;}
.form-stacked .clearfix{margin-bottom:9px;}.form-stacked .clearfix div.input{margin-left:0;}
.form-stacked .inputs-list{margin-bottom:0;}.form-stacked .inputs-list li{padding-top:0;}.form-stacked .inputs-list li label{font-weight:normal;padding-top:0;}
.form-stacked div.clearfix.error{padding-top:10px;padding-bottom:10px;padding-left:10px;margin-top:0;margin-left:-10px;}
.form-stacked .actions{margin-left:-20px;padding-left:20px;}
table{width:100%;margin-bottom:18px;padding:0;border-collapse:separate;*border-collapse:collapse;font-size:13px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;}
table th{padding-top:9px;font-weight:bold;vertical-align:middle;border-bottom:1px solid #ddd;}
table td{vertical-align:top;}
table th+th,table td+td{border-left:1px solid #ddd;}
table tr+tr td{border-top:1px solid #ddd;}
table tbody tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;}
table tbody tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;}
table tbody tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;}
table tbody tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;}
.zebra-striped tbody tr:nth-child(odd) td{background-color:#f9f9f9;}
.zebra-striped tbody tr:hover td{background-color:#f5f5f5;}
table .header{cursor:pointer;}table .header:after{content:"";float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:hidden;}
table .headerSortUp,table .headerSortDown{background-color:rgba(141, 192, 219, 0.25);text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);}
table .header:hover:after{visibility:visible;}
table .headerSortDown:after,table .headerSortDown:hover:after{visibility:visible;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;}
table .headerSortUp:after{border-bottom:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;visibility:visible;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;}
table .blue{color:#049cdb;border-bottom-color:#049cdb;}
table .headerSortUp.blue,table .headerSortDown.blue{background-color:#ade6fe;}
table .green{color:#46a546;border-bottom-color:#46a546;}
table .headerSortUp.green,table .headerSortDown.green{background-color:#cdeacd;}
table .red{color:#9d261d;border-bottom-color:#9d261d;}
table .headerSortUp.red,table .headerSortDown.red{background-color:#f4c8c5;}
table .yellow{color:#ffc40d;border-bottom-color:#ffc40d;}
table .headerSortUp.yellow,table .headerSortDown.yellow{background-color:#fff6d9;}
table .orange{color:#f89406;border-bottom-color:#f89406;}
table .headerSortUp.orange,table .headerSortDown.orange{background-color:#fee9cc;}
table .purple{color:#7a43b6;border-bottom-color:#7a43b6;}
table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0;}
.topbar{height:40px;position:fixed;top:0;left:0;right:0;z-index:10000;overflow:visible;}.topbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
.topbar h3 a:hover,.topbar .brand a:hover,.topbar ul .active>a{background-color:#333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;}
.topbar h3{position:relative;}
.topbar h3 a,.topbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;}
.topbar p{margin:0;line-height:40px;}.topbar p a:hover{background-color:transparent;color:#ffffff;}
.topbar form{float:left;margin:5px 0 0 0;position:relative;filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}
.topbar form.pull-right{float:right;}
.topbar input{background-color:#444;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;padding:4px 9px;color:#ffffff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.topbar input:-moz-placeholder{color:#e6e6e6;}
.topbar input::-webkit-input-placeholder{color:#e6e6e6;}
.topbar input:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;}
.topbar input:focus,.topbar input.focused{outline:0;background-color:#ffffff;color:#404040;text-shadow:0 1px 0 #ffffff;border:0;padding:5px 10px;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);}
.topbar-inner,.topbar .fill{background-color:#222;background-color:#222222;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-moz-linear-gradient(top, #333333, #222222);background-image:-ms-linear-gradient(top, #333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(top, #333333, #222222);background-image:-o-linear-gradient(top, #333333, #222222);background-image:linear-gradient(top, #333333, #222222);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);}
.topbar div>ul,.nav{display:block;float:left;margin:0 10px 0 0;position:relative;left:0;}.topbar div>ul>li,.nav>li{display:block;float:left;}
.topbar div>ul a,.nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;text-decoration:none;}.topbar div>ul a:hover,.nav a:hover{color:#ffffff;text-decoration:none;}
.topbar div>ul .active>a,.nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
.topbar div>ul.secondary-nav,.nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}.topbar div>ul.secondary-nav .menu-dropdown,.nav.secondary-nav .menu-dropdown,.topbar div>ul.secondary-nav .dropdown-menu,.nav.secondary-nav .dropdown-menu{right:0;border:0;}
.topbar div>ul a.menu:hover,.nav a.menu:hover,.topbar div>ul li.open .menu,.nav li.open .menu,.topbar div>ul .dropdown-toggle:hover,.nav .dropdown-toggle:hover,.topbar div>ul .dropdown.open .dropdown-toggle,.nav .dropdown.open .dropdown-toggle{background:#444;background:rgba(255, 255, 255, 0.05);}
.topbar div>ul .menu-dropdown,.nav .menu-dropdown,.topbar div>ul .dropdown-menu,.nav .dropdown-menu{background-color:#333;}.topbar div>ul .menu-dropdown a.menu,.nav .menu-dropdown a.menu,.topbar div>ul .dropdown-menu a.menu,.nav .dropdown-menu a.menu,.topbar div>ul .menu-dropdown .dropdown-toggle,.nav .menu-dropdown .dropdown-toggle,.topbar div>ul .dropdown-menu .dropdown-toggle,.nav .dropdown-menu .dropdown-toggle{color:#ffffff;}.topbar div>ul .menu-dropdown a.menu.open,.nav .menu-dropdown a.menu.open,.topbar div>ul .dropdown-menu a.menu.open,.nav .dropdown-menu a.menu.open,.topbar div>ul .menu-dropdown .dropdown-toggle.open,.nav .menu-dropdown .dropdown-toggle.open,.topbar div>ul .dropdown-menu .dropdown-toggle.open,.nav .dropdown-menu .dropdown-toggle.open{background:#444;background:rgba(255, 255, 255, 0.05);}
.topbar div>ul .menu-dropdown li a,.nav .menu-dropdown li a,.topbar div>ul .dropdown-menu li a,.nav .dropdown-menu li a{color:#999;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}.topbar div>ul .menu-dropdown li a:hover,.nav .menu-dropdown li a:hover,.topbar div>ul .dropdown-menu li a:hover,.nav .dropdown-menu li a:hover{background-color:#191919;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));background-image:-moz-linear-gradient(top, #292929, #191919);background-image:-ms-linear-gradient(top, #292929, #191919);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));background-image:-webkit-linear-gradient(top, #292929, #191919);background-image:-o-linear-gradient(top, #292929, #191919);background-image:linear-gradient(top, #292929, #191919);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);color:#ffffff;}
.topbar div>ul .menu-dropdown .active a,.nav .menu-dropdown .active a,.topbar div>ul .dropdown-menu .active a,.nav .dropdown-menu .active a{color:#ffffff;}
.topbar div>ul .menu-dropdown .divider,.nav .menu-dropdown .divider,.topbar div>ul .dropdown-menu .divider,.nav .dropdown-menu .divider{background-color:#222;border-color:#444;}
.topbar ul .menu-dropdown li a,.topbar ul .dropdown-menu li a{padding:4px 15px;}
li.menu,.dropdown{position:relative;}
a.menu:after,.dropdown-toggle:after{width:0;height:0;display:inline-block;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}
.menu-dropdown,.dropdown-menu{background-color:#ffffff;float:left;display:none;position:absolute;top:40px;z-index:900;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:6px 0;zoom:1;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:0 1px 1px;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.menu-dropdown li,.dropdown-menu li{float:none;display:block;background-color:none;}
.menu-dropdown .divider,.dropdown-menu .divider{height:1px;margin:5px 0;overflow:hidden;background-color:#eee;border-bottom:1px solid #ffffff;}
.topbar .dropdown-menu a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#808080;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover{background-color:#dddddd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);color:#404040;text-decoration:none;-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);}
.open .menu,.dropdown.open .menu,.open .dropdown-toggle,.dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
.open .menu-dropdown,.dropdown.open .menu-dropdown,.open .dropdown-menu,.dropdown.open .dropdown-menu{display:block;}
.tabs,.pills{margin:0 0 20px;padding:0;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";zoom:1;*display:inline;}
.tabs:after,.pills:after{clear:both;}
.tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;}
.tabs{float:left;width:100%;border-bottom:1px solid #ddd;}.tabs>li{position:relative;top:1px;}.tabs>li>a{padding:0 15px;margin-right:2px;line-height:36px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{text-decoration:none;background-color:#eee;border-color:#eee #eee #ddd;}
.tabs>li.active>a{color:#808080;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;}
.tabs .menu-dropdown,.tabs .dropdown-menu{top:35px;border-width:1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.tabs a.menu:after,.tabs .dropdown-toggle:after{border-top-color:#999;margin-top:15px;margin-left:5px;}
.tabs li.open.menu .menu,.tabs .open.dropdown .dropdown-toggle{border-color:#999;}
.tabs li.open a.menu:after,.tabs .dropdown.open .dropdown-toggle:after{border-top-color:#555;}
.tab-content{clear:both;}
.pills a{margin:5px 3px 5px 0;padding:0 15px;text-shadow:0 1px 1px #ffffff;line-height:30px;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills a:hover{background:#00438a;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
.pills .active a{background:#0069d6;color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
.tab-content>*,.pill-content>*{display:none;}
.tab-content>.active,.pill-content>.active{display:block;}
.breadcrumb{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #ffffff, #f5f5f5);background-image:-ms-linear-gradient(top, #ffffff, #f5f5f5);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));background-image:-webkit-linear-gradient(top, #ffffff, #f5f5f5);background-image:-o-linear-gradient(top, #ffffff, #f5f5f5);background-image:linear-gradient(top, #ffffff, #f5f5f5);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}.breadcrumb li{display:inline;text-shadow:0 1px 0 #ffffff;}
.breadcrumb .divider{padding:0 5px;color:#bfbfbf;}
.breadcrumb .active a{color:#404040;}
.hero-unit{background-color:#f5f5f5;margin-bottom:30px;padding:60px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}.hero-unit h1{margin-bottom:0;font-size:60px;line-height:1;letter-spacing:-1px;}
.hero-unit p{font-size:18px;font-weight:200;line-height:27px;}
footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
.page-header{margin-bottom:17px;border-bottom:1px solid #ddd;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}.page-header h1{margin-bottom:8px;}
.btn.danger,.alert-message.danger,.btn.danger:hover,.alert-message.danger:hover,.btn.error,.alert-message.error,.btn.error:hover,.alert-message.error:hover,.btn.success,.alert-message.success,.btn.success:hover,.alert-message.success:hover,.btn.info,.alert-message.info,.btn.info:hover,.alert-message.info:hover{color:#ffffff;}
.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
.btn.success,.alert-message.success{background-color:#57a957;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
.btn.info,.alert-message.info{background-color:#339bb9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
.btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;}
.btn:focus{outline:1px dotted #666;}
.btn.primary{color:#ffffff;background-color:#0064cd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
.btn:active{-webkit-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);}
.btn.disabled{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.btn[disabled]{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.btn.large{font-size:15px;line-height:normal;padding:9px 14px 9px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
.btn.small{padding:7px 9px 7px;font-size:11px;}
:root .alert-message,:root .btn{border-radius:0 \0;}
button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;}
.close{float:right;color:#000000;font-size:20px;font-weight:bold;line-height:13.5px;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;}
.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;background-color:#eedc94;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;}
.alert-message h5{line-height:18px;}
.alert-message p{margin-bottom:0;}
.alert-message div{margin-top:5px;margin-bottom:2px;line-height:28px;}
.alert-message .btn{-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);}
.alert-message.block-message{background-image:none;background-color:#fdf5d9;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);padding:14px;border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-message.block-message ul,.alert-message.block-message p{margin-right:30px;}
.alert-message.block-message ul{margin-bottom:0;}
.alert-message.block-message li{color:#404040;}
.alert-message.block-message .alert-actions{margin-top:5px;}
.alert-message.block-message.error,.alert-message.block-message.success,.alert-message.block-message.info{color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
.alert-message.block-message.error{background-color:#fddfde;border-color:#fbc7c6;}
.alert-message.block-message.success{background-color:#d1eed1;border-color:#bfe7bf;}
.alert-message.block-message.info{background-color:#ddf4fb;border-color:#c6edf9;}
.pagination{height:36px;margin:18px 0;}.pagination ul{float:left;margin:0;border:1px solid #ddd;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);}
.pagination li{display:inline;}
.pagination a{float:left;padding:0 14px;line-height:34px;border-right:1px solid;border-right-color:#ddd;border-right-color:rgba(0, 0, 0, 0.15);*border-right-color:#ddd;text-decoration:none;}
.pagination a:hover,.pagination .active a{background-color:#c7eefe;}
.pagination .disabled a,.pagination .disabled a:hover{background-color:transparent;color:#bfbfbf;}
.pagination .next a{border:0;}
.well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);}
.modal-backdrop{background-color:#000000;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;}.modal-backdrop.fade{opacity:0;}
.modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}
.modal{position:fixed;top:50%;left:50%;z-index:11000;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;}
.modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;}
.modal.fade.in{top:50%;}
.modal-header{border-bottom:1px solid #eee;padding:5px 15px;}
.modal-body{padding:15px;}
.modal-footer{background-color:#f5f5f5;padding:14px 15px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;margin-bottom:0;}.modal-footer:before,.modal-footer:after{display:table;content:"";zoom:1;*display:inline;}
.modal-footer:after{clear:both;}
.modal-footer .btn{float:right;margin-left:5px;}
.twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:1000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}.twipsy.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}
.twipsy.above .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
.twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;}
.twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
.twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
.twipsy-inner{padding:3px 8px;background-color:#000000;color:white;text-align:center;max-width:200px;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.twipsy-arrow{position:absolute;width:0;height:0;}
.popover{position:absolute;top:0;left:0;z-index:1000;padding:5px;display:none;}.popover.above .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
.popover.right .arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
.popover.below .arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
.popover.left .arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;}
.popover .arrow{position:absolute;width:0;height:0;}
.popover .inner{background-color:#000000;background-color:rgba(0, 0, 0, 0.8);padding:3px;overflow:hidden;width:280px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);}
.popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;}
.popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;}
.fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;}
.label{padding:1px 3px 2px;background-color:#bfbfbf;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;white-space:nowrap;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;}
.label.warning{background-color:#f89406;}
.label.success{background-color:#46a546;}
.label.notice{background-color:#62cffc;}
.media-grid{margin-left:-20px;margin-bottom:0;zoom:1;}.media-grid:before,.media-grid:after{display:table;content:"";zoom:1;*display:inline;}
.media-grid:after{clear:both;}
.media-grid li{display:inline;}
.media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;}
.media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);}
<!doctype html> <html lang="en">
<head>
<meta charset="utf-8">
<!-- disable iPhone inital scale --> <meta name="viewport" content="width=device-width;
initial-scale=1.0">
<title>TodoMVC</title>
<!-- main css --> <link href="res/style.css" rel="stylesheet" type="text/css"> <!-- fontface css -->
<link href="res/fonts.css" rel="stylesheet" type="text/css">
<!-- media queries css --> <link href="res/media-queries.css" rel="stylesheet" type="text/css">
<!-- html5.js for IE less than 9 --> <!--[if lt IE 9]> <script
src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
<!-- css3-mediaqueries.js for IE less than 9 --> <!--[if lt IE 9]> <script
src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div id="pagewrap">
<a href="http://github.com/addyosmani/todomvc"><img style="position: absolute; top: 0; right: 0;
border: 0;" src="https://d3nwyuy0nl342s.cloudfront.net/img/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/
687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768
745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>
<header id="header">
<hgroup> <h1 id="site-logo"></h1> </hgroup>
<nav> <ul id="main-nav" class="clearfix"> <li><a href="http://addyosmani.github.com/todomvc">Home</a></li> <li><a
href="#gettingstarted">Getting Started</a> </li> </ul> <!--
/#main-nav --> </nav>
</header> <!-- /#header -->
<div id="content">
<article class="post clearfix">
<!-- /.paragraph -->
<p>&nbsp;</p>
<!--startpara--> <header> <h1 class="post-title"><a name="gettingstarted">Thanks for downloading! Let's get started</a></h1> </header>
<!--startpara--> <h2 class="site-headline"> TodoMVC is a <strong>common</strong> set of JavaScript
<strong>examples</strong> for MVC frameworks like SproutCore, JavaScriptMVC, Backbone, YUILibrary, Spine, Sammy, AngularJS and others.</h2>
<h2>Live examples</h2>
<p>To preview a Todo implementation for a particular framework, simply select it from the menu
to the right of the screen. </p>
<p>Depending on the browser you're using, you may need to access the examples over a network/localhost to avoid incurring security exceptions with localStorage.</p>
<h2>Source code</h2>
<p>The directory structure for this download is quite easy to navigate around. 'todo-example' is the main implementation folder
and this contains sub-directories for each of the frameworks an implementation is available for. </p>
<p>To keep TodoMVC as self-contained as possible, all of the dependencies you need are included in this download, so you can easily
go in and start making changes to examples right away.</p>
<!-- /.paragraph -->
</article> <!-- /.post -->
</div> <!-- /#content -->
<aside id="sidebar">
<section class="widget clearfix"> <h4 class="widgettitle">Select framework:</h4> <ul>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TodoMVC</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
}
</style>
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>
<body>
<div class="topbar">
<div class="topbar-inner">
<div class="container-fluid">
<a class="brand" href="http://github.com/addyosmani/todomvc">TodoMVC</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="http://github.com/addyosmani/todomvc/issues/new">Submit New Ticket</a></li>
</ul>
<p class="pull-right">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://addyosmani.github.com/todomvc" data-count="horizontal">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
&nbsp; </p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="sidebar">
<div class="well">
<h5>Examples Included For:</h5>
<ul>
<li><a href="http://www.sproutcore.com/">SproutCore</a></li>
<li><a href="http://javascriptmvc.com/">JavaScriptMVC</a></li>
<li><a href="http://documentcloud.github.com/backbone/">Backbone.js</a></li>
<li><a href="http://spinejs.com/">Spine.js</a></li>
<li><a href="http://sammyjs.org/">Sammy.js</a></li>
<li><a href="http://knockoutjs.com/">KnockoutJS</a></li>
<li><a href="http://developer.yahoo.com/yui/">YUILibrary</a></li>
<li><a href="http://angularjs.org/">AngularJS</a></li>
<li><a href="https://github.com/brokenseal/broke-client">Broke.js</a></li>
<li><a href="https://github.com/jgallen23/fidel">Fidel.js</a></li>
</ul>
<h5>0.2 Changelog</h5>
<ul>
<li>Patches to existing applications</li>
<li>Sylistic updates</li>
<li><span class="label">New</span> AngularJS examples</li>
<li><span class="label">New</span> Broke.js example</li>
<li><span class="label">New</span> YUILibrary example</li>
<li><span class="label">New</span> Fidel.js example</li>
</ul>
<h5>Live demos</h5>
<ul>
<li><a href="todo-example/sproutcore/index.html">SproutCore 2.0</a></li>
<li><a href="todo-example/javascriptmvc/todo/todo/index.html">JavaScriptMVC</a></li>
<li><a href="todo-example/spine/index.html">Spine.js</a></li>
......@@ -96,48 +86,122 @@ go in and start making changes to examples right away.</p>
<li><a href="todo-example/sammyjs/index.html">Sammy.js</a></li>
<li><a href="todo-example/knockoutjs/index.html">KnockoutJS (MVVM)</a></li>
<li><a href="todo-example/yuilibrary/index.html">YUILibrary</a></li>
<li><a href="todo-example/angularjs/index.html">AngularJS</a></li>
<li><a href="todo-example/angularjs/main/index.html">AngularJS</a></li>
<li><a href="todo-example/angularjs/persistencejs/index.html">Angular + PersistenceJS</a></li>
<li><a href="todo-example/broke/index.html">Broke.js</a></li>
</ul> </section> <!-- /.widget -->
<section class="widget"> <h4 class="widgettitle">GitHub</h4> <ul> <li><a
href="https://github.com/addyosmani/todomvc/">View repository</a></li> </ul>
</section> <!-- /.widget -->
<section class="widget clearfix">
<h4 class="widgettitle">Contributors include:</h4>
<ul> <li><a
href="http://twitter.com/addyosmani">Addy Osmani</a></li> <li><a
href="http://twitter.com/justinbmeyer">Justin Meyer</a></li> <li><a
href="http://twitter.com/jeromegn">Jérôme Gravel-Niquet</a></li> <li><a
href="http://alexmaccaw.co.uk">Alex MacCaw</a></li>
<li><a href="">Ashish Sharma</a></li>
<li><a href="http://sproutcore.com">Tom Dale, Yehuda Katz</a></li>
<li><a href="http://cburgdorf.wordpress.com/">Christoph Burgdorf</a></li>
<li><a href="http://developer.yahoo.com">The YUI team</a></li>
</ul>
</section> <!-- /.widget -->
</aside> <!-- /#sidebar -->
<footer id="footer">
<p>Copyright respective contributors, TodoMVC & Addy Osmani, 2011.</p>
</footer> <!-- /#footer -->
</div> <!-- /#pagewrap -->
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css" rel="stylesheet"
type="text/css" /> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"
type="text/javascript"></script> <script
src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js"
type="text/javascript"></script> <script
src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js"
type="text/javascript"></script> <script type="text/javascript"> SyntaxHighlighter.all() </script>
<li><a href="todo-example/fidel/index.html">Fidel.js</a></li>
</ul>
<h5>Contributors</h5>
<ul>
<li><a href="http://twitter.com/addyosmani">Addy Osmani</a></li>
<li><a href="http://twitter.com/jeromegn">Jérôme Gravel-Niquet</a></li>
<li><a href="http://twitter.com/justinbmeyer">Justin Meyer</a></li>
<li><a href="http://twitter.com/macmann">Alex MacCaw</a></li>
<li><a href="">Ashish Sharma</a></li>
<li><a href="http://sproutcore.com">Tom Dale, Yehuda Katz</a></li>
<li><a href="http://cburgdorf.wordpress.com/">Christoph Burgdorf</a></li>
<li><a href="http://developer.yahoo.com">The YUI team</a></li>
<li><a href="https://github.com/jacobmumm">Jacob Mumm</a></li>
<li><a href="https://github.com/brokenseal">Davide Callegari</a></li>
</ul>
<h5>Coming Soon</h5>
<ul>
<li>ES.Next Todo app using native Models, Modules, Classes.</li>
<li>Dojo Todo app (with MVC patterns)</li>
<li>Batman.js Todo app</li>
<li>Todo app boilerplate</li>
</ul>
</div>
</div>
<div class="content">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<h1>TodoMVC</h1>
<p>A common learning application for popular JavaScript MVC frameworks</p>
<p><a class="btn primary large" href="https://github.com/addyosmani/todomvc/zipball/v0.2">Download Version 0.2</a> &nbsp;
<a class="btn secondary large" href="http://github.com/addyosmani/todomvc">Follow On GitHub</a></p>
</div>
<div class="row">
<div class="span12">
<h3>Screenshots</h3>
<p>A preview of the Todo apps included in the download:</p>
<ul class="media-grid">
<li>
<a href="#"><img src="images/sproutcore.jpg" alt="SproutCore"></a>
</li>
<li>
<a href="#"><img src="images/backbone.jpg" alt="Backbone"></a>
</li>
<li>
<a href="#"><img src="images/yui.jpg" alt="YUILibrary"></a>
</li>
</ul>
</div>
<a name="about"></a>
<!-- end row-->
<div class="span12">
<h2>Introduction</h2>
<p>Developers these days are spoiled with choice when it comes to selecting an <strong>MVC framework</strong> for structuring and organizing JavaScript web apps. Backbone, Spine, SproutCore, JavaScriptMVC..the list of new and stable solutions goes on and on, but just how do you <strong>decide</strong> on which to use in a sea of so many options?.</p>
<p>To help solve this problem, I created <a href="http://github.com/addyosmani/todomvc">TodoMVC</a> - a project which offers the same Todo application implemented using MVC concepts in most of the popular JavaScript MVC frameworks of today. Solutions look and feel the same, have a common simple feature-set and make it <strong>easy</strong> for you to compare the syntax and structure of different frameworks so you can select the one you feel the most comfortable with.</p>
</div>
<hr class="span12">
<div class="span12">
<h2>Getting Started</h2>
<p>You can get setup with TodoMVC in just a few short steps:</p>
<p>
<ol>
<li>Download the <a href="https://github.com/addyosmani/todomvc/zipball/v0.2">latest release</a>.</li>
<li>Run TodoMVC on a local server (using <a href="http://www.mamp.info">MAMP</a>, <a href="http://www.wampserver.com/en/">WAMP</a> or another suitable setup). You can then select an app to run using the 'Live demos' link to the left.</li>
<li>Browse through the Todo apps, examine their source and discover which framework you might feel the most comfortable working with.</li>
</ol>
</p>
</div>
<hr class="span12">
<div class="span12">
<h2>Selecting A Framework</h2>
<p>Once you've downloaded the latest release and played around with the apps, you'll want to decide on a specific framework to use. </p>
<p>Study the syntax required for defining models, views, controllers and classes (if supported) in the frameworks you're interested in and try your hand at editing the code to see how it feels using it first-hand. </p>
<p>Some developers have also found that creating derivative apps that take the basic list-editing concept further greatly helped them in their selection process, so you may find a similar exercise helpful.</p>
</div>
<hr class="span12">
<div class="span12">
<h2>Getting Involved</h2>
<p>Is there a bug we haven't fixed or an MVC framework you feel would benefit from being included in TodoMVC? If so, feel free to submit a pull request and I'll be happy to review it for inclusion. A boilerplate for Todo apps will probably land in TodoMVC 0.3, but until then if you have any stylistic or app-specific questions you'd like to ask, feel free to ask on <a href="http://twitter.com">Twitter</a>.</p>
<p><a class="btn" href="https://github.com/addyosmani/todomvc/pull/new/master">Submit Pull Request&raquo;</a></p>
</div>
</div>
</div>
<footer>
<p>&copy; TodoMVC, Addy Osmani 2011</p>
</footer>
</div>
</div>
</body> </html>
\ No newline at end of file
</body>
</html>
\ No newline at end of file
/* ==========================================================
* bootstrap-alerts.js v1.3.0
* http://twitter.github.com/bootstrap/javascript.html#alerts
* ==========================================================
* Copyright 2011 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================== */
!function( $ ){
/* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
* ======================================================= */
var transitionEnd
$(document).ready(function () {
$.support.transition = (function () {
var thisBody = document.body || document.documentElement
, thisStyle = thisBody.style
, support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
return support
})()
// set CSS transition event type
if ( $.support.transition ) {
transitionEnd = "TransitionEnd"
if ( $.browser.webkit ) {
transitionEnd = "webkitTransitionEnd"
} else if ( $.browser.mozilla ) {
transitionEnd = "transitionend"
} else if ( $.browser.opera ) {
transitionEnd = "oTransitionEnd"
}
}
})
/* ALERT CLASS DEFINITION
* ====================== */
var Alert = function ( content, options ) {
this.settings = $.extend({}, $.fn.alert.defaults, options)
this.$element = $(content)
.delegate(this.settings.selector, 'click', this.close)
}
Alert.prototype = {
close: function (e) {
var $element = $(this).parent('.alert-message')
e && e.preventDefault()
$element.removeClass('in')
function removeElement () {
$element.remove()
}
$.support.transition && $element.hasClass('fade') ?
$element.bind(transitionEnd, removeElement) :
removeElement()
}
}
/* ALERT PLUGIN DEFINITION
* ======================= */
$.fn.alert = function ( options ) {
if ( options === true ) {
return this.data('alert')
}
return this.each(function () {
var $this = $(this)
if ( typeof options == 'string' ) {
return $this.data('alert')[options]()
}
$(this).data('alert', new Alert( this, options ))
})
}
$.fn.alert.defaults = {
selector: '.close'
}
$(document).ready(function () {
new Alert($('body'), {
selector: '.alert-message[data-alert] .close'
})
})
}( window.jQuery || window.ender );
\ No newline at end of file
/* ============================================================
* bootstrap-dropdown.js v1.3.0
* http://twitter.github.com/bootstrap/javascript.html#dropdown
* ============================================================
* Copyright 2011 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ============================================================ */
!function( $ ){
/* DROPDOWN PLUGIN DEFINITION
* ========================== */
$.fn.dropdown = function ( selector ) {
return this.each(function () {
$(this).delegate(selector || d, 'click', function (e) {
var li = $(this).parent('li')
, isActive = li.hasClass('open')
clearMenus()
!isActive && li.toggleClass('open')
return false
})
})
}
/* APPLY TO STANDARD DROPDOWN ELEMENTS
* =================================== */
var d = 'a.menu, .dropdown-toggle'
function clearMenus() {
$(d).parent('li').removeClass('open')
}
$(function () {
$('html').bind("click", clearMenus)
$('body').dropdown( '[data-dropdown] a.menu, [data-dropdown] .dropdown-toggle' )
})
}( window.jQuery || window.ender );
/* =========================================================
* bootstrap-modal.js v1.3.0
* http://twitter.github.com/bootstrap/javascript.html#modal
* =========================================================
* Copyright 2011 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================= */
!function( $ ){
/* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
* ======================================================= */
var transitionEnd
$(document).ready(function () {
$.support.transition = (function () {
var thisBody = document.body || document.documentElement
, thisStyle = thisBody.style
, support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
return support
})()
// set CSS transition event type
if ( $.support.transition ) {
transitionEnd = "TransitionEnd"
if ( $.browser.webkit ) {
transitionEnd = "webkitTransitionEnd"
} else if ( $.browser.mozilla ) {
transitionEnd = "transitionend"
} else if ( $.browser.opera ) {
transitionEnd = "oTransitionEnd"
}
}
})
/* MODAL PUBLIC CLASS DEFINITION
* ============================= */
var Modal = function ( content, options ) {
this.settings = $.extend({}, $.fn.modal.defaults, options)
this.$element = $(content)
.delegate('.close', 'click.modal', $.proxy(this.hide, this))
if ( this.settings.show ) {
this.show()
}
return this
}
Modal.prototype = {
toggle: function () {
return this[!this.isShown ? 'show' : 'hide']()
}
, show: function () {
var that = this
this.isShown = true
this.$element.trigger('show')
escape.call(this)
backdrop.call(this, function () {
var transition = $.support.transition && that.$element.hasClass('fade')
that.$element
.appendTo(document.body)
.show()
if (transition) {
that.$element[0].offsetWidth // force reflow
}
that.$element
.addClass('in')
transition ?
that.$element.one(transitionEnd, function () { that.$element.trigger('shown') }) :
that.$element.trigger('shown')
})
return this
}
, hide: function (e) {
e && e.preventDefault()
if ( !this.isShown ) {
return this
}
var that = this
this.isShown = false
escape.call(this)
this.$element
.trigger('hide')
.removeClass('in')
function removeElement () {
that.$element
.hide()
.trigger('hidden')
backdrop.call(that)
}
$.support.transition && this.$element.hasClass('fade') ?
this.$element.one(transitionEnd, removeElement) :
removeElement()
return this
}
}
/* MODAL PRIVATE METHODS
* ===================== */
function backdrop ( callback ) {
var that = this
, animate = this.$element.hasClass('fade') ? 'fade' : ''
if ( this.isShown && this.settings.backdrop ) {
var doAnimate = $.support.transition && animate
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.appendTo(document.body)
if ( this.settings.backdrop != 'static' ) {
this.$backdrop.click($.proxy(this.hide, this))
}
if ( doAnimate ) {
this.$backdrop[0].offsetWidth // force reflow
}
this.$backdrop.addClass('in')
doAnimate ?
this.$backdrop.one(transitionEnd, callback) :
callback()
} else if ( !this.isShown && this.$backdrop ) {
this.$backdrop.removeClass('in')
function removeElement() {
that.$backdrop.remove()
that.$backdrop = null
}
$.support.transition && this.$element.hasClass('fade')?
this.$backdrop.one(transitionEnd, removeElement) :
removeElement()
} else if ( callback ) {
callback()
}
}
function escape() {
var that = this
if ( this.isShown && this.settings.keyboard ) {
$(document).bind('keyup.modal', function ( e ) {
if ( e.which == 27 ) {
that.hide()
}
})
} else if ( !this.isShown ) {
$(document).unbind('keyup.modal')
}
}
/* MODAL PLUGIN DEFINITION
* ======================= */
$.fn.modal = function ( options ) {
var modal = this.data('modal')
if (!modal) {
if (typeof options == 'string') {
options = {
show: /show|toggle/.test(options)
}
}
return this.each(function () {
$(this).data('modal', new Modal(this, options))
})
}
if ( options === true ) {
return modal
}
if ( typeof options == 'string' ) {
modal[options]()
} else if ( modal ) {
modal.toggle()
}
return this
}
$.fn.modal.Modal = Modal
$.fn.modal.defaults = {
backdrop: false
, keyboard: false
, show: false
}
/* MODAL DATA- IMPLEMENTATION
* ========================== */
$(document).ready(function () {
$('body').delegate('[data-controls-modal]', 'click', function (e) {
e.preventDefault()
var $this = $(this).data('show', true)
$('#' + $this.attr('data-controls-modal')).modal( $this.data() )
})
})
}( window.jQuery || window.ender );
/* ===========================================================
* bootstrap-popover.js v1.3.0
* http://twitter.github.com/bootstrap/javascript.html#popover
* ===========================================================
* Copyright 2011 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* =========================================================== */
!function( $ ) {
var Popover = function ( element, options ) {
this.$element = $(element)
this.options = options
this.enabled = true
this.fixTitle()
}
/* NOTE: POPOVER EXTENDS BOOTSTRAP-TWIPSY.js
========================================= */
Popover.prototype = $.extend({}, $.fn.twipsy.Twipsy.prototype, {
setContent: function () {
var $tip = this.tip()
$tip.find('.title')[this.options.html ? 'html' : 'text'](this.getTitle())
$tip.find('.content p')[this.options.html ? 'html' : 'text'](this.getContent())
$tip[0].className = 'popover'
}
, getContent: function () {
var content
, $e = this.$element
, o = this.options
if (typeof this.options.content == 'string') {
content = $e.attr(o.content)
} else if (typeof this.options.content == 'function') {
content = this.options.content.call(this.$element[0])
}
return content
}
, tip: function() {
if (!this.$tip) {
this.$tip = $('<div class="popover" />')
.html('<div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div>')
}
return this.$tip
}
})
/* POPOVER PLUGIN DEFINITION
* ======================= */
$.fn.popover = function (options) {
if (typeof options == 'object') options = $.extend({}, $.fn.popover.defaults, options)
$.fn.twipsy.initWith.call(this, options, Popover, 'popover')
return this
}
$.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, { content: 'data-content', placement: 'right'})
}( window.jQuery || window.ender );
\ No newline at end of file
/* =============================================================
* bootstrap-scrollspy.js v1.3.0
* http://twitter.github.com/bootstrap/javascript.html#scrollspy
* =============================================================
* Copyright 2011 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ============================================================== */
!function ( $ ) {
var $window = $(window)
function ScrollSpy( topbar, selector ) {
var processScroll = $.proxy(this.processScroll, this)
this.$topbar = $(topbar)
this.selector = selector || 'li > a'
this.refresh()
this.$topbar.delegate(this.selector, 'click', processScroll)
$window.scroll(processScroll)
this.processScroll()
}
ScrollSpy.prototype = {
refresh: function () {
this.targets = this.$topbar.find(this.selector).map(function () {
var href = $(this).attr('href')
return /^#\w/.test(href) && $(href).length ? href : null
})
this.offsets = $.map(this.targets, function (id) {
return $(id).offset().top
})
}
, processScroll: function () {
var scrollTop = $window.scrollTop() + 10
, offsets = this.offsets
, targets = this.targets
, activeTarget = this.activeTarget
, i
for (i = offsets.length; i--;) {
activeTarget != targets[i]
&& scrollTop >= offsets[i]
&& (!offsets[i + 1] || scrollTop <= offsets[i + 1])
&& this.activateButton( targets[i] )
}
}
, activateButton: function (target) {
this.activeTarget = target
this.$topbar
.find(this.selector).parent('.active')
.removeClass('active')
this.$topbar
.find(this.selector + '[href="' + target + '"]')
.parent('li')
.addClass('active')
}
}
/* SCROLLSPY PLUGIN DEFINITION
* =========================== */
$.fn.scrollSpy = function( options ) {
var scrollspy = this.data('scrollspy')
if (!scrollspy) {
return this.each(function () {
$(this).data('scrollspy', new ScrollSpy( this, options ))
})
}
if ( options === true ) {
return scrollspy
}
if ( typeof options == 'string' ) {
scrollspy[options]()
}
return this
}
$(document).ready(function () {
$('body').scrollSpy('[data-scrollspy] li > a')
})
}( window.jQuery || window.ender );
\ No newline at end of file
/* ========================================================
* bootstrap-tabs.js v1.3.0
* http://twitter.github.com/bootstrap/javascript.html#tabs
* ========================================================
* Copyright 2011 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ======================================================== */
!function( $ ){
function activate ( element, container ) {
container
.find('> .active')
.removeClass('active')
.find('> .dropdown-menu > .active')
.removeClass('active')
element.addClass('active')
if ( element.parent('.dropdown-menu') ) {
element.closest('li.dropdown').addClass('active')
}
}
function tab( e ) {
var $this = $(this)
, $ul = $this.closest('ul:not(.dropdown-menu)')
, href = $this.attr('href')
, previous
if ( /^#\w+/.test(href) ) {
e.preventDefault()
if ( $this.parent('li').hasClass('active') ) {
return
}
previous = $ul.find('.active a').last()[0]
$href = $(href)
activate($this.parent('li'), $ul)
activate($href, $href.parent())
$this.trigger({
type: 'change'
, relatedTarget: previous
})
}
}
/* TABS/PILLS PLUGIN DEFINITION
* ============================ */
$.fn.tabs = $.fn.pills = function ( selector ) {
return this.each(function () {
$(this).delegate(selector || '.tabs li > a, .pills > li > a', 'click', tab)
})
}
$(document).ready(function () {
$('body').tabs('ul[data-tabs] li > a, ul[data-pills] > li > a')
})
}( window.jQuery || window.ender );
/* ==========================================================
* bootstrap-twipsy.js v1.3.0
* http://twitter.github.com/bootstrap/javascript.html#twipsy
* Adapted from the original jQuery.tipsy by Jason Frame
* ==========================================================
* Copyright 2011 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================== */
!function( $ ) {
/* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
* ======================================================= */
var transitionEnd
$(document).ready(function () {
$.support.transition = (function () {
var thisBody = document.body || document.documentElement
, thisStyle = thisBody.style
, support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
return support
})()
// set CSS transition event type
if ( $.support.transition ) {
transitionEnd = "TransitionEnd"
if ( $.browser.webkit ) {
transitionEnd = "webkitTransitionEnd"
} else if ( $.browser.mozilla ) {
transitionEnd = "transitionend"
} else if ( $.browser.opera ) {
transitionEnd = "oTransitionEnd"
}
}
})
/* TWIPSY PUBLIC CLASS DEFINITION
* ============================== */
var Twipsy = function ( element, options ) {
this.$element = $(element)
this.options = options
this.enabled = true
this.fixTitle()
}
Twipsy.prototype = {
show: function() {
var pos
, actualWidth
, actualHeight
, placement
, $tip
, tp
if (this.getTitle() && this.enabled) {
$tip = this.tip()
this.setContent()
if (this.options.animate) {
$tip.addClass('fade')
}
$tip
.remove()
.css({ top: 0, left: 0, display: 'block' })
.prependTo(document.body)
pos = $.extend({}, this.$element.offset(), {
width: this.$element[0].offsetWidth
, height: this.$element[0].offsetHeight
})
actualWidth = $tip[0].offsetWidth
actualHeight = $tip[0].offsetHeight
placement = maybeCall(this.options.placement, this, [ $tip[0], this.$element[0] ])
switch (placement) {
case 'below':
tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}
break
case 'above':
tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}
break
case 'left':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset}
break
case 'right':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset}
break
}
$tip
.css(tp)
.addClass(placement)
.addClass('in')
}
}
, setContent: function () {
var $tip = this.tip()
$tip.find('.twipsy-inner')[this.options.html ? 'html' : 'text'](this.getTitle())
$tip[0].className = 'twipsy'
}
, hide: function() {
var that = this
, $tip = this.tip()
$tip.removeClass('in')
function removeElement () {
$tip.remove()
}
$.support.transition && this.$tip.hasClass('fade') ?
$tip.bind(transitionEnd, removeElement) :
removeElement()
}
, fixTitle: function() {
var $e = this.$element
if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') {
$e.attr('data-original-title', $e.attr('title') || '').removeAttr('title')
}
}
, getTitle: function() {
var title
, $e = this.$element
, o = this.options
this.fixTitle()
if (typeof o.title == 'string') {
title = $e.attr(o.title == 'title' ? 'data-original-title' : o.title)
} else if (typeof o.title == 'function') {
title = o.title.call($e[0])
}
title = ('' + title).replace(/(^\s*|\s*$)/, "")
return title || o.fallback
}
, tip: function() {
if (!this.$tip) {
this.$tip = $('<div class="twipsy" />').html('<div class="twipsy-arrow"></div><div class="twipsy-inner"></div>')
}
return this.$tip
}
, validate: function() {
if (!this.$element[0].parentNode) {
this.hide()
this.$element = null
this.options = null
}
}
, enable: function() {
this.enabled = true
}
, disable: function() {
this.enabled = false
}
, toggleEnabled: function() {
this.enabled = !this.enabled
}
}
/* TWIPSY PRIVATE METHODS
* ====================== */
function maybeCall ( thing, ctx, args ) {
return typeof thing == 'function' ? thing.apply(ctx, args) : thing
}
/* TWIPSY PLUGIN DEFINITION
* ======================== */
$.fn.twipsy = function (options) {
$.fn.twipsy.initWith.call(this, options, Twipsy, 'twipsy')
return this
}
$.fn.twipsy.initWith = function (options, Constructor, name) {
var twipsy
, binder
, eventIn
, eventOut
if (options === true) {
return this.data(name)
} else if (typeof options == 'string') {
twipsy = this.data(name)
if (twipsy) {
twipsy[options]()
}
return this
}
options = $.extend({}, $.fn[name].defaults, options)
function get(ele) {
var twipsy = $.data(ele, name)
if (!twipsy) {
twipsy = new Constructor(ele, $.fn.twipsy.elementOptions(ele, options))
$.data(ele, name, twipsy)
}
return twipsy
}
function enter() {
var twipsy = get(this)
twipsy.hoverState = 'in'
if (options.delayIn == 0) {
twipsy.show()
} else {
twipsy.fixTitle()
setTimeout(function() {
if (twipsy.hoverState == 'in') {
twipsy.show()
}
}, options.delayIn)
}
}
function leave() {
var twipsy = get(this)
twipsy.hoverState = 'out'
if (options.delayOut == 0) {
twipsy.hide()
} else {
setTimeout(function() {
if (twipsy.hoverState == 'out') {
twipsy.hide()
}
}, options.delayOut)
}
}
if (!options.live) {
this.each(function() {
get(this)
})
}
if (options.trigger != 'manual') {
binder = options.live ? 'live' : 'bind'
eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus'
eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur'
this[binder](eventIn, enter)[binder](eventOut, leave)
}
return this
}
$.fn.twipsy.Twipsy = Twipsy
$.fn.twipsy.defaults = {
animate: true
, delayIn: 0
, delayOut: 0
, fallback: ''
, placement: 'above'
, html: false
, live: false
, offset: 0
, title: 'title'
, trigger: 'hover'
}
$.fn.twipsy.elementOptions = function(ele, options) {
return $.metadata ? $.extend({}, options, $(ele).metadata()) : options
}
}( window.jQuery || window.ender );
\ No newline at end of file
<!DOCTYPE HTML>
<html>
<head>
<title>Bootstrap Plugin Test Suite</title>
<!-- jquery -->
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<!-- qunit -->
<link rel="stylesheet" href="vendor/qunit.css" type="text/css" media="screen" />
<script src="vendor/qunit.js"></script>
<!-- plugin sources -->
<script src="../../js/bootstrap-alerts.js"></script>
<script src="../../js/bootstrap-dropdown.js"></script>
<script src="../../js/bootstrap-modal.js"></script>
<script src="../../js/bootstrap-tabs.js"></script>
<script src="../../js/bootstrap-twipsy.js"></script>
<script src="../../js/bootstrap-popover.js"></script>
<!-- unit tests -->
<script src="unit/bootstrap-alerts.js"></script>
<script src="unit/bootstrap-dropdown.js"></script>
<script src="unit/bootstrap-modal.js"></script>
<script src="unit/bootstrap-popover.js"></script>
<script src="unit/bootstrap-tabs.js"></script>
<script src="unit/bootstrap-twipsy.js"></script>
<body>
<div>
<h1 id="qunit-header">Bootstrap Plugin Test Suite</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-runoff"></div>
</div>
</body>
</html>
\ No newline at end of file
$(function () {
module("bootstrap-alerts")
test("should be defined on jquery object", function () {
ok($(document.body).alert, 'alert method is defined')
})
test("should return element", function () {
ok($(document.body).alert()[0] == document.body, 'document.body returned')
})
test("should fade element out on clicking .close", function () {
var alertHTML = '<div class="alert-message warning fade in">'
+ '<a class="close" href="#">×</a>'
+ '<p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>'
+ '</div>'
, alert = $(alertHTML).alert()
alert.find('.close').click()
ok(!alert.hasClass('in'), 'remove .in class on .close click')
})
test("should remove element when clicking .close", function () {
$.support.transition = false
var alertHTML = '<div class="alert-message warning fade in">'
+ '<a class="close" href="#">×</a>'
+ '<p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>'
+ '</div>'
, alert = $(alertHTML).appendTo('#qunit-runoff').alert()
ok($('#qunit-runoff').find('.alert-message').length, 'element added to dom')
alert.find('.close').click()
ok(!$('#qunit-runoff').find('.alert-message').length, 'element removed from dom')
})
})
\ No newline at end of file
$(function () {
module("bootstrap-dropdowns")
test("should be defined on jquery object", function () {
ok($(document.body).dropdown, 'dropdown method is defined')
})
test("should return element", function () {
ok($(document.body).dropdown()[0] == document.body, 'document.body returned')
})
test("should add class open to menu if clicked", function () {
var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">'
+ '<a href="#" class="dropdown-toggle">Dropdown</a>'
+ '<ul class="dropdown-menu">'
+ '<li><a href="#">Secondary link</a></li>'
+ '<li><a href="#">Something else here</a></li>'
+ '<li class="divider"></li>'
+ '<li><a href="#">Another link</a></li>'
+ '</ul>'
+ '</li>'
+ '</ul>'
, dropdown = $(dropdownHTML).dropdown()
dropdown.find('.dropdown-toggle').click()
ok(dropdown.find('.dropdown').hasClass('open'), 'open class added on click')
})
test("should remove open class if body clicked", function () {
var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">'
+ '<a href="#" class="dropdown-toggle">Dropdown</a>'
+ '<ul class="dropdown-menu">'
+ '<li><a href="#">Secondary link</a></li>'
+ '<li><a href="#">Something else here</a></li>'
+ '<li class="divider"></li>'
+ '<li><a href="#">Another link</a></li>'
+ '</ul>'
+ '</li>'
+ '</ul>'
, dropdown = $(dropdownHTML).dropdown().appendTo('#qunit-runoff')
dropdown.find('.dropdown-toggle').click()
ok(dropdown.find('.dropdown').hasClass('open'), 'open class added on click')
$('body').click()
ok(!dropdown.find('.dropdown').hasClass('open'), 'open class removed')
dropdown.remove()
})
})
\ No newline at end of file
$(function () {
module("bootstrap-modal")
test("should be defined on jquery object", function () {
var div = $("<div id='modal-test'></div>")
ok(div.modal, 'modal method is defined')
})
test("should return element", function () {
var div = $("<div id='modal-test'></div>")
ok(div.modal() == div, 'div element returned')
})
test("should expose defaults var for settings", function () {
ok($.fn.modal.defaults, 'default object exposed')
})
test("should insert into dom when show method is called", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'></div>")
div
.modal()
.bind("shown", function () {
ok($('#modal-test').length, 'modal insterted into dom')
start()
div.remove()
})
.modal("show")
})
test("should hide modal when hide is called", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'></div>")
div
.modal()
.bind("shown", function () {
ok($('#modal-test').is(":visible"), 'modal visible')
ok($('#modal-test').length, 'modal insterted into dom')
div.modal("hide")
})
.bind("hidden", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden')
start()
div.remove()
})
.modal("show")
})
test("should toggle when toggle is called", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'></div>")
div
.modal()
.bind("shown", function () {
ok($('#modal-test').is(":visible"), 'modal visible')
ok($('#modal-test').length, 'modal insterted into dom')
div.modal("toggle")
})
.bind("hidden", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden')
start()
div.remove()
})
.modal("toggle")
})
test("should remove from dom when click .close", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'><span class='close'></span></div>")
div
.modal()
.bind("shown", function () {
ok($('#modal-test').is(":visible"), 'modal visible')
ok($('#modal-test').length, 'modal insterted into dom')
div.find('.close').click()
})
.bind("hidden", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden')
start()
div.remove()
})
.modal("toggle")
})
test("should add backdrop when desired", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'></div>")
div
.modal({ backdrop:true })
.bind("shown", function () {
equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom')
start()
div.remove()
$('.modal-backdrop').remove()
})
.modal("show")
})
test("should not add backdrop when not desired", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'></div>")
div
.modal({backdrop:false})
.bind("shown", function () {
equal($('.modal-backdrop').length, 0, 'modal backdrop not inserted into dom')
start()
div.remove()
})
.modal("show")
})
test("should close backdrop when clicked", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'></div>")
div
.modal({backdrop:true})
.bind("shown", function () {
equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom')
$('.modal-backdrop').click()
equal($('.modal-backdrop').length, 0, 'modal backdrop removed from dom')
start()
div.remove()
})
.modal("show")
})
test("should not close backdrop when click disabled", function () {
stop()
$.support.transition = false
var div = $("<div id='modal-test'></div>")
div
.modal({backdrop: 'static'})
.bind("shown", function () {
equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom')
$('.modal-backdrop').click()
equal($('.modal-backdrop').length, 1, 'modal backdrop still in dom')
start()
div.remove()
$('.modal-backdrop').remove()
})
.modal("show")
})
})
$(function () {
module("bootstrap-popover")
test("should be defined on jquery object", function () {
var div = $('<div></div>')
ok(div.popover, 'popover method is defined')
})
test("should return element", function () {
var div = $('<div></div>')
ok(div.popover() == div, 'document.body returned')
})
test("should render popover element", function () {
$.support.transition = false
var popover = $('<a href="#" title="mdo" data-content="http://twitter.com/mdo">@mdo</a>')
.appendTo('#qunit-runoff')
.popover()
.popover('show')
ok($('.popover').length, 'popover was inserted')
popover.popover('hide')
ok(!$(".popover").length, 'popover removed')
$('#qunit-runoff').empty()
})
test("should store popover instance in popover data object", function () {
$.support.transition = false
var popover = $('<a href="#" title="mdo" data-content="http://twitter.com/mdo">@mdo</a>')
.popover()
ok(!!popover.data('popover'), 'popover instance exists')
})
test("should get title and content from options", function () {
$.support.transition = false
var popover = $('<a href="#">@fat</a>')
.appendTo('#qunit-runoff')
.popover({
title: function () {
return '@fat'
}
, content: function () {
return 'loves writing tests (╯°□°)╯︵ ┻━┻'
}
})
popover.popover('show')
ok($('.popover').length, 'popover was inserted')
equals($('.popover .title').text(), '@fat', 'title correctly inserted')
equals($('.popover .content').text(), 'loves writing tests (╯°□°)╯︵ ┻━┻', 'content correctly inserted')
popover.popover('hide')
ok(!$('.popover').length, 'popover was removed')
$('#qunit-runoff').empty()
})
test("should get title and content from attributes", function () {
$.support.transition = false
var popover = $('<a href="#" title="@mdo" data-content="loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻" >@mdo</a>')
.appendTo('#qunit-runoff')
.popover()
.popover('show')
ok($('.popover').length, 'popover was inserted')
equals($('.popover .title').text(), '@mdo', 'title correctly inserted')
equals($('.popover .content').text(), "loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻", 'content correctly inserted')
popover.popover('hide')
ok(!$('.popover').length, 'popover was removed')
$('#qunit-runoff').empty()
})
})
\ No newline at end of file
$(function () {
module("bootstrap-scrollspy")
test("should be defined on jquery object", function () {
ok($(document.body).scrollspy, 'scrollspy method is defined')
})
test("should return element", function () {
ok($(document.body).scrollspy()[0] == document.body, 'document.body returned')
})
test("should switch active class on scroll", function () {
var sectionHTML = '<div id="masthead"></div>'
, $section = $(sectionHTML).append('#qunit-runoff')
, topbarHTML ='<div class="topbar">'
+ '<div class="topbar-inner">'
+ '<div class="container">'
+ '<h3><a href="#">Bootstrap</a></h3>'
+ '<ul class="nav">'
+ '<li><a href="#masthead">Overview</a></li>'
+ '</ul>'
+ '</div>'
+ '</div>'
+ '</div>'
, $topbar = $(topbarHTML).topbar()
ok(topbar.find('.active', true)
})
})
\ No newline at end of file
$(function () {
module("bootstrap-tabs")
test("should be defined on jquery object", function () {
ok($(document.body).tabs, 'tabs method is defined')
})
test("should return element", function () {
ok($(document.body).tabs()[0] == document.body, 'document.body returned')
})
test("should activate element by tab id", function () {
var $tabsHTML = $('<ul class="tabs">'
+ '<li class="active"><a href="#home">Home</a></li>'
+ '<li><a href="#profile">Profile</a></li>'
+ '</ul>')
$('<ul><li id="home"></li><li id="profile"></li></ul>').appendTo("#qunit-runoff")
$tabsHTML.tabs().find('a').last().click()
equals($("#qunit-runoff").find('.active').attr('id'), "profile")
$tabsHTML.tabs().find('a').first().click()
equals($("#qunit-runoff").find('.active').attr('id'), "home")
$("#qunit-runoff").empty()
})
test("should activate element by pill id", function () {
var $pillsHTML = $('<ul class="pills">'
+ '<li class="active"><a href="#home">Home</a></li>'
+ '<li><a href="#profile">Profile</a></li>'
+ '</ul>')
$('<ul><li id="home"></li><li id="profile"></li></ul>').appendTo("#qunit-runoff")
$pillsHTML.pills().find('a').last().click()
equals($("#qunit-runoff").find('.active').attr('id'), "profile")
$pillsHTML.pills().find('a').first().click()
equals($("#qunit-runoff").find('.active').attr('id'), "home")
$("#qunit-runoff").empty()
})
test( "should trigger change event on activate", function () {
var $tabsHTML = $('<ul class="tabs">'
+ '<li class="active"><a href="#home">Home</a></li>'
+ '<li><a href="#profile">Profile</a></li>'
+ '</ul>')
, $target
, count = 0
, relatedTarget
, target
$tabsHTML
.tabs()
.bind( "change", function (e) {
target = e.target
relatedTarget = e.relatedTarget
count++
})
$target = $tabsHTML
.find('a')
.last()
.click()
equals(relatedTarget, $tabsHTML.find('a').first()[0])
equals(target, $target[0])
equals(count, 1)
})
})
\ No newline at end of file
$(function () {
module("bootstrap-twipsy")
test("should be defined on jquery object", function () {
var div = $("<div></div>")
ok(div.twipsy, 'popover method is defined')
})
test("should return element", function () {
var div = $("<div></div>")
ok(div.twipsy() == div, 'document.body returned')
})
test("should expose default settings", function () {
ok(!!$.fn.twipsy.defaults, 'defaults is defined')
})
test("should remove title attribute", function () {
var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>').twipsy()
ok(!twipsy.attr('title'), 'title tag was removed')
})
test("should add data attribute for referencing original title", function () {
var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>').twipsy()
equals(twipsy.attr('data-original-title'), 'Another twipsy', 'original title preserved in data attribute')
})
test("should place tooltips relative to placement option", function () {
$.support.transition = false
var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>')
.appendTo('#qunit-runoff')
.twipsy({placement: 'below'})
.twipsy('show')
ok($(".twipsy").hasClass('fade below in'), 'has correct classes applied')
twipsy.twipsy('hide')
ok(!$(".twipsy").length, 'twipsy removed')
$('#qunit-runoff').empty()
})
test("should add a fallback in cases where elements have no title tag", function () {
$.support.transition = false
var twipsy = $('<a href="#" rel="twipsy"></a>')
.appendTo('#qunit-runoff')
.twipsy({fallback: '@fat'})
.twipsy('show')
equals($(".twipsy").text(), "@fat", 'has correct default text')
twipsy.twipsy('hide')
ok(!$(".twipsy").length, 'twipsy removed')
$('#qunit-runoff').empty()
})
test("should not allow html entities", function () {
$.support.transition = false
var twipsy = $('<a href="#" rel="twipsy" title="<b>@fat</b>"></a>')
.appendTo('#qunit-runoff')
.twipsy()
.twipsy('show')
ok(!$('.twipsy b').length, 'b tag was not inserted')
twipsy.twipsy('hide')
ok(!$(".twipsy").length, 'twipsy removed')
$('#qunit-runoff').empty()
})
test("should allow html entities if html option set to true", function () {
$.support.transition = false
var twipsy = $('<a href="#" rel="twipsy" title="<b>@fat</b>"></a>')
.appendTo('#qunit-runoff')
.twipsy({html: true})
.twipsy('show')
ok($('.twipsy b').length, 'b tag was inserted')
twipsy.twipsy('hide')
ok(!$(".twipsy").length, 'twipsy removed')
$('#qunit-runoff').empty()
})
})
\ No newline at end of file
/**
* QUnit - A JavaScript Unit Testing Framework
*
* http://docs.jquery.com/QUnit
*
* Copyright (c) 2011 John Resig, Jörn Zaefferer
* Dual licensed under the MIT (MIT-LICENSE.txt)
* or GPL (GPL-LICENSE.txt) licenses.
*/
/** Font Family and Sizes */
#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
}
#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
#qunit-tests { font-size: smaller; }
/** Resets */
#qunit-tests, #qunit-tests ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult {
margin: 0;
padding: 0;
}
/** Header */
#qunit-header {
padding: 0.5em 0 0.5em 1em;
color: #8699a4;
background-color: #0d3349;
font-size: 1.5em;
line-height: 1em;
font-weight: normal;
border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0;
-webkit-border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
}
#qunit-header a {
text-decoration: none;
color: #c2ccd1;
}
#qunit-header a:hover,
#qunit-header a:focus {
color: #fff;
}
#qunit-banner {
height: 5px;
}
#qunit-testrunner-toolbar {
padding: 0.5em 0 0.5em 2em;
color: #5E740B;
background-color: #eee;
}
#qunit-userAgent {
padding: 0.5em 0 0.5em 2.5em;
background-color: #2b81af;
color: #fff;
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
}
/** Tests: Pass/Fail */
#qunit-tests {
list-style-position: inside;
}
#qunit-tests li {
padding: 0.4em 0.5em 0.4em 2.5em;
border-bottom: 1px solid #fff;
list-style-position: inside;
}
#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running {
display: none;
}
#qunit-tests li strong {
cursor: pointer;
}
#qunit-tests li a {
padding: 0.5em;
color: #c2ccd1;
text-decoration: none;
}
#qunit-tests li a:hover,
#qunit-tests li a:focus {
color: #000;
}
#qunit-tests ol {
margin-top: 0.5em;
padding: 0.5em;
background-color: #fff;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
box-shadow: inset 0px 2px 13px #999;
-moz-box-shadow: inset 0px 2px 13px #999;
-webkit-box-shadow: inset 0px 2px 13px #999;
}
#qunit-tests table {
border-collapse: collapse;
margin-top: .2em;
}
#qunit-tests th {
text-align: right;
vertical-align: top;
padding: 0 .5em 0 0;
}
#qunit-tests td {
vertical-align: top;
}
#qunit-tests pre {
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
}
#qunit-tests del {
background-color: #e0f2be;
color: #374e0c;
text-decoration: none;
}
#qunit-tests ins {
background-color: #ffcaca;
color: #500;
text-decoration: none;
}
/*** Test Counts */
#qunit-tests b.counts { color: black; }
#qunit-tests b.passed { color: #5E740B; }
#qunit-tests b.failed { color: #710909; }
#qunit-tests li li {
margin: 0.5em;
padding: 0.4em 0.5em 0.4em 0.5em;
background-color: #fff;
border-bottom: none;
list-style-position: inside;
}
/*** Passing Styles */
#qunit-tests li li.pass {
color: #5E740B;
background-color: #fff;
border-left: 26px solid #C6E746;
}
#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
#qunit-tests .pass .test-name { color: #366097; }
#qunit-tests .pass .test-actual,
#qunit-tests .pass .test-expected { color: #999999; }
#qunit-banner.qunit-pass { background-color: #C6E746; }
/*** Failing Styles */
#qunit-tests li li.fail {
color: #710909;
background-color: #fff;
border-left: 26px solid #EE5757;
white-space: pre;
}
#qunit-tests > li:last-child {
border-radius: 0 0 15px 15px;
-moz-border-radius: 0 0 15px 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
}
#qunit-tests .fail { color: #000000; background-color: #EE5757; }
#qunit-tests .fail .test-name,
#qunit-tests .fail .module-name { color: #000000; }
#qunit-tests .fail .test-actual { color: #EE5757; }
#qunit-tests .fail .test-expected { color: green; }
#qunit-banner.qunit-fail { background-color: #EE5757; }
/** Result */
#qunit-testresult {
padding: 0.5em 0.5em 0.5em 2.5em;
color: #2b81af;
background-color: #D2E0E6;
border-bottom: 1px solid white;
}
/** Fixture */
#qunit-fixture {
position: absolute;
top: -10000px;
left: -10000px;
}
/** Runoff */
#qunit-runoff {
display:none;
}
\ No newline at end of file
/**
* QUnit - A JavaScript Unit Testing Framework
*
* http://docs.jquery.com/QUnit
*
* Copyright (c) 2011 John Resig, Jörn Zaefferer
* Dual licensed under the MIT (MIT-LICENSE.txt)
* or GPL (GPL-LICENSE.txt) licenses.
*/
(function(window) {
var defined = {
setTimeout: typeof window.setTimeout !== "undefined",
sessionStorage: (function() {
try {
return !!sessionStorage.getItem;
} catch(e) {
return false;
}
})()
};
var testId = 0;
var Test = function(name, testName, expected, testEnvironmentArg, async, callback) {
this.name = name;
this.testName = testName;
this.expected = expected;
this.testEnvironmentArg = testEnvironmentArg;
this.async = async;
this.callback = callback;
this.assertions = [];
};
Test.prototype = {
init: function() {
var tests = id("qunit-tests");
if (tests) {
var b = document.createElement("strong");
b.innerHTML = "Running " + this.name;
var li = document.createElement("li");
li.appendChild( b );
li.className = "running";
li.id = this.id = "test-output" + testId++;
tests.appendChild( li );
}
},
setup: function() {
if (this.module != config.previousModule) {
if ( config.previousModule ) {
QUnit.moduleDone( {
name: config.previousModule,
failed: config.moduleStats.bad,
passed: config.moduleStats.all - config.moduleStats.bad,
total: config.moduleStats.all
} );
}
config.previousModule = this.module;
config.moduleStats = { all: 0, bad: 0 };
QUnit.moduleStart( {
name: this.module
} );
}
config.current = this;
this.testEnvironment = extend({
setup: function() {},
teardown: function() {}
}, this.moduleTestEnvironment);
if (this.testEnvironmentArg) {
extend(this.testEnvironment, this.testEnvironmentArg);
}
QUnit.testStart( {
name: this.testName
} );
// allow utility functions to access the current test environment
// TODO why??
QUnit.current_testEnvironment = this.testEnvironment;
try {
if ( !config.pollution ) {
saveGlobal();
}
this.testEnvironment.setup.call(this.testEnvironment);
} catch(e) {
QUnit.ok( false, "Setup failed on " + this.testName + ": " + e.message );
}
},
run: function() {
if ( this.async ) {
QUnit.stop();
}
if ( config.notrycatch ) {
this.callback.call(this.testEnvironment);
return;
}
try {
this.callback.call(this.testEnvironment);
} catch(e) {
fail("Test " + this.testName + " died, exception and test follows", e, this.callback);
QUnit.ok( false, "Died on test #" + (this.assertions.length + 1) + ": " + e.message + " - " + QUnit.jsDump.parse(e) );
// else next test will carry the responsibility
saveGlobal();
// Restart the tests if they're blocking
if ( config.blocking ) {
start();
}
}
},
teardown: function() {
try {
this.testEnvironment.teardown.call(this.testEnvironment);
checkPollution();
} catch(e) {
QUnit.ok( false, "Teardown failed on " + this.testName + ": " + e.message );
}
},
finish: function() {
if ( this.expected && this.expected != this.assertions.length ) {
QUnit.ok( false, "Expected " + this.expected + " assertions, but " + this.assertions.length + " were run" );
}
var good = 0, bad = 0,
tests = id("qunit-tests");
config.stats.all += this.assertions.length;
config.moduleStats.all += this.assertions.length;
if ( tests ) {
var ol = document.createElement("ol");
for ( var i = 0; i < this.assertions.length; i++ ) {
var assertion = this.assertions[i];
var li = document.createElement("li");
li.className = assertion.result ? "pass" : "fail";
li.innerHTML = assertion.message || (assertion.result ? "okay" : "failed");
ol.appendChild( li );
if ( assertion.result ) {
good++;
} else {
bad++;
config.stats.bad++;
config.moduleStats.bad++;
}
}
// store result when possible
if ( QUnit.config.reorder && defined.sessionStorage ) {
if (bad) {
sessionStorage.setItem("qunit-" + this.module + "-" + this.testName, bad);
} else {
sessionStorage.removeItem("qunit-" + this.module + "-" + this.testName);
}
}
if (bad == 0) {
ol.style.display = "none";
}
var b = document.createElement("strong");
b.innerHTML = this.name + " <b class='counts'>(<b class='failed'>" + bad + "</b>, <b class='passed'>" + good + "</b>, " + this.assertions.length + ")</b>";
var a = document.createElement("a");
a.innerHTML = "Rerun";
a.href = QUnit.url({ filter: getText([b]).replace(/\([^)]+\)$/, "").replace(/(^\s*|\s*$)/g, "") });
addEvent(b, "click", function() {
var next = b.nextSibling.nextSibling,
display = next.style.display;
next.style.display = display === "none" ? "block" : "none";
});
addEvent(b, "dblclick", function(e) {
var target = e && e.target ? e.target : window.event.srcElement;
if ( target.nodeName.toLowerCase() == "span" || target.nodeName.toLowerCase() == "b" ) {
target = target.parentNode;
}
if ( window.location && target.nodeName.toLowerCase() === "strong" ) {
window.location = QUnit.url({ filter: getText([target]).replace(/\([^)]+\)$/, "").replace(/(^\s*|\s*$)/g, "") });
}
});
var li = id(this.id);
li.className = bad ? "fail" : "pass";
li.removeChild( li.firstChild );
li.appendChild( b );
li.appendChild( a );
li.appendChild( ol );
} else {
for ( var i = 0; i < this.assertions.length; i++ ) {
if ( !this.assertions[i].result ) {
bad++;
config.stats.bad++;
config.moduleStats.bad++;
}
}
}
try {
QUnit.reset();
} catch(e) {
fail("reset() failed, following Test " + this.testName + ", exception and reset fn follows", e, QUnit.reset);
}
QUnit.testDone( {
name: this.testName,
failed: bad,
passed: this.assertions.length - bad,
total: this.assertions.length
} );
},
queue: function() {
var test = this;
synchronize(function() {
test.init();
});
function run() {
// each of these can by async
synchronize(function() {
test.setup();
});
synchronize(function() {
test.run();
});
synchronize(function() {
test.teardown();
});
synchronize(function() {
test.finish();
});
}
// defer when previous test run passed, if storage is available
var bad = QUnit.config.reorder && defined.sessionStorage && +sessionStorage.getItem("qunit-" + this.module + "-" + this.testName);
if (bad) {
run();
} else {
synchronize(run);
};
}
};
var QUnit = {
// call on start of module test to prepend name to all tests
module: function(name, testEnvironment) {
config.currentModule = name;
config.currentModuleTestEnviroment = testEnvironment;
},
asyncTest: function(testName, expected, callback) {
if ( arguments.length === 2 ) {
callback = expected;
expected = 0;
}
QUnit.test(testName, expected, callback, true);
},
test: function(testName, expected, callback, async) {
var name = '<span class="test-name">' + testName + '</span>', testEnvironmentArg;
if ( arguments.length === 2 ) {
callback = expected;
expected = null;
}
// is 2nd argument a testEnvironment?
if ( expected && typeof expected === 'object') {
testEnvironmentArg = expected;
expected = null;
}
if ( config.currentModule ) {
name = '<span class="module-name">' + config.currentModule + "</span>: " + name;
}
if ( !validTest(config.currentModule + ": " + testName) ) {
return;
}
var test = new Test(name, testName, expected, testEnvironmentArg, async, callback);
test.module = config.currentModule;
test.moduleTestEnvironment = config.currentModuleTestEnviroment;
test.queue();
},
/**
* Specify the number of expected assertions to gurantee that failed test (no assertions are run at all) don't slip through.
*/
expect: function(asserts) {
config.current.expected = asserts;
},
/**
* Asserts true.
* @example ok( "asdfasdf".length > 5, "There must be at least 5 chars" );
*/
ok: function(a, msg) {
a = !!a;
var details = {
result: a,
message: msg
};
msg = escapeHtml(msg);
QUnit.log(details);
config.current.assertions.push({
result: a,
message: msg
});
},
/**
* Checks that the first two arguments are equal, with an optional message.
* Prints out both actual and expected values.
*
* Prefered to ok( actual == expected, message )
*
* @example equal( format("Received {0} bytes.", 2), "Received 2 bytes." );
*
* @param Object actual
* @param Object expected
* @param String message (optional)
*/
equal: function(actual, expected, message) {
QUnit.push(expected == actual, actual, expected, message);
},
notEqual: function(actual, expected, message) {
QUnit.push(expected != actual, actual, expected, message);
},
deepEqual: function(actual, expected, message) {
QUnit.push(QUnit.equiv(actual, expected), actual, expected, message);
},
notDeepEqual: function(actual, expected, message) {
QUnit.push(!QUnit.equiv(actual, expected), actual, expected, message);
},
strictEqual: function(actual, expected, message) {
QUnit.push(expected === actual, actual, expected, message);
},
notStrictEqual: function(actual, expected, message) {
QUnit.push(expected !== actual, actual, expected, message);
},
raises: function(block, expected, message) {
var actual, ok = false;
if (typeof expected === 'string') {
message = expected;
expected = null;
}
try {
block();
} catch (e) {
actual = e;
}
if (actual) {
// we don't want to validate thrown error
if (!expected) {
ok = true;
// expected is a regexp
} else if (QUnit.objectType(expected) === "regexp") {
ok = expected.test(actual);
// expected is a constructor
} else if (actual instanceof expected) {
ok = true;
// expected is a validation function which returns true is validation passed
} else if (expected.call({}, actual) === true) {
ok = true;
}
}
QUnit.ok(ok, message);
},
start: function() {
config.semaphore--;
if (config.semaphore > 0) {
// don't start until equal number of stop-calls
return;
}
if (config.semaphore < 0) {
// ignore if start is called more often then stop
config.semaphore = 0;
}
// A slight delay, to avoid any current callbacks
if ( defined.setTimeout ) {
window.setTimeout(function() {
if (config.semaphore > 0) {
return;
}
if ( config.timeout ) {
clearTimeout(config.timeout);
}
config.blocking = false;
process();
}, 13);
} else {
config.blocking = false;
process();
}
},
stop: function(timeout) {
config.semaphore++;
config.blocking = true;
if ( timeout && defined.setTimeout ) {
clearTimeout(config.timeout);
config.timeout = window.setTimeout(function() {
QUnit.ok( false, "Test timed out" );
QUnit.start();
}, timeout);
}
}
};
// Backwards compatibility, deprecated
QUnit.equals = QUnit.equal;
QUnit.same = QUnit.deepEqual;
// Maintain internal state
var config = {
// The queue of tests to run
queue: [],
// block until document ready
blocking: true,
// when enabled, show only failing tests
// gets persisted through sessionStorage and can be changed in UI via checkbox
hidepassed: false,
// by default, run previously failed tests first
// very useful in combination with "Hide passed tests" checked
reorder: true,
// by default, modify document.title when suite is done
altertitle: true,
urlConfig: ['noglobals', 'notrycatch']
};
// Load paramaters
(function() {
var location = window.location || { search: "", protocol: "file:" },
params = location.search.slice( 1 ).split( "&" ),
length = params.length,
urlParams = {},
current;
if ( params[ 0 ] ) {
for ( var i = 0; i < length; i++ ) {
current = params[ i ].split( "=" );
current[ 0 ] = decodeURIComponent( current[ 0 ] );
// allow just a key to turn on a flag, e.g., test.html?noglobals
current[ 1 ] = current[ 1 ] ? decodeURIComponent( current[ 1 ] ) : true;
urlParams[ current[ 0 ] ] = current[ 1 ];
}
}
QUnit.urlParams = urlParams;
config.filter = urlParams.filter;
// Figure out if we're running the tests from a server or not
QUnit.isLocal = !!(location.protocol === 'file:');
})();
// Expose the API as global variables, unless an 'exports'
// object exists, in that case we assume we're in CommonJS
if ( typeof exports === "undefined" || typeof require === "undefined" ) {
extend(window, QUnit);
window.QUnit = QUnit;
} else {
extend(exports, QUnit);
exports.QUnit = QUnit;
}
// define these after exposing globals to keep them in these QUnit namespace only
extend(QUnit, {
config: config,
// Initialize the configuration options
init: function() {
extend(config, {
stats: { all: 0, bad: 0 },
moduleStats: { all: 0, bad: 0 },
started: +new Date,
updateRate: 1000,
blocking: false,
autostart: true,
autorun: false,
filter: "",
queue: [],
semaphore: 0
});
var tests = id( "qunit-tests" ),
banner = id( "qunit-banner" ),
result = id( "qunit-testresult" );
if ( tests ) {
tests.innerHTML = "";
}
if ( banner ) {
banner.className = "";
}
if ( result ) {
result.parentNode.removeChild( result );
}
if ( tests ) {
result = document.createElement( "p" );
result.id = "qunit-testresult";
result.className = "result";
tests.parentNode.insertBefore( result, tests );
result.innerHTML = 'Running...<br/>&nbsp;';
}
},
/**
* Resets the test setup. Useful for tests that modify the DOM.
*
* If jQuery is available, uses jQuery's html(), otherwise just innerHTML.
*/
reset: function() {
if ( window.jQuery ) {
jQuery( "#qunit-fixture" ).html( config.fixture );
} else {
var main = id( 'qunit-fixture' );
if ( main ) {
main.innerHTML = config.fixture;
}
}
},
/**
* Trigger an event on an element.
*
* @example triggerEvent( document.body, "click" );
*
* @param DOMElement elem
* @param String type
*/
triggerEvent: function( elem, type, event ) {
if ( document.createEvent ) {
event = document.createEvent("MouseEvents");
event.initMouseEvent(type, true, true, elem.ownerDocument.defaultView,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
elem.dispatchEvent( event );
} else if ( elem.fireEvent ) {
elem.fireEvent("on"+type);
}
},
// Safe object type checking
is: function( type, obj ) {
return QUnit.objectType( obj ) == type;
},
objectType: function( obj ) {
if (typeof obj === "undefined") {
return "undefined";
// consider: typeof null === object
}
if (obj === null) {
return "null";
}
var type = Object.prototype.toString.call( obj )
.match(/^\[object\s(.*)\]$/)[1] || '';
switch (type) {
case 'Number':
if (isNaN(obj)) {
return "nan";
} else {
return "number";
}
case 'String':
case 'Boolean':
case 'Array':
case 'Date':
case 'RegExp':
case 'Function':
return type.toLowerCase();
}
if (typeof obj === "object") {
return "object";
}
return undefined;
},
push: function(result, actual, expected, message) {
var details = {
result: result,
message: message,
actual: actual,
expected: expected
};
message = escapeHtml(message) || (result ? "okay" : "failed");
message = '<span class="test-message">' + message + "</span>";
expected = escapeHtml(QUnit.jsDump.parse(expected));
actual = escapeHtml(QUnit.jsDump.parse(actual));
var output = message + '<table><tr class="test-expected"><th>Expected: </th><td><pre>' + expected + '</pre></td></tr>';
if (actual != expected) {
output += '<tr class="test-actual"><th>Result: </th><td><pre>' + actual + '</pre></td></tr>';
output += '<tr class="test-diff"><th>Diff: </th><td><pre>' + QUnit.diff(expected, actual) +'</pre></td></tr>';
}
if (!result) {
var source = sourceFromStacktrace();
if (source) {
details.source = source;
output += '<tr class="test-source"><th>Source: </th><td><pre>' + escapeHtml(source) + '</pre></td></tr>';
}
}
output += "</table>";
QUnit.log(details);
config.current.assertions.push({
result: !!result,
message: output
});
},
url: function( params ) {
params = extend( extend( {}, QUnit.urlParams ), params );
var querystring = "?",
key;
for ( key in params ) {
querystring += encodeURIComponent( key ) + "=" +
encodeURIComponent( params[ key ] ) + "&";
}
return window.location.pathname + querystring.slice( 0, -1 );
},
extend: extend,
id: id,
addEvent: addEvent,
// Logging callbacks; all receive a single argument with the listed properties
// run test/logs.html for any related changes
begin: function() {},
// done: { failed, passed, total, runtime }
done: function() {},
// log: { result, actual, expected, message }
log: function() {},
// testStart: { name }
testStart: function() {},
// testDone: { name, failed, passed, total }
testDone: function() {},
// moduleStart: { name }
moduleStart: function() {},
// moduleDone: { name, failed, passed, total }
moduleDone: function() {}
});
if ( typeof document === "undefined" || document.readyState === "complete" ) {
config.autorun = true;
}
QUnit.load = function() {
QUnit.begin({});
// Initialize the config, saving the execution queue
var oldconfig = extend({}, config);
QUnit.init();
extend(config, oldconfig);
config.blocking = false;
var urlConfigHtml = '', len = config.urlConfig.length;
for ( var i = 0, val; i < len, val = config.urlConfig[i]; i++ ) {
config[val] = QUnit.urlParams[val];
urlConfigHtml += '<label><input name="' + val + '" type="checkbox"' + ( config[val] ? ' checked="checked"' : '' ) + '>' + val + '</label>';
}
var userAgent = id("qunit-userAgent");
if ( userAgent ) {
userAgent.innerHTML = navigator.userAgent;
}
var banner = id("qunit-header");
if ( banner ) {
banner.innerHTML = '<a href="' + QUnit.url({ filter: undefined }) + '"> ' + banner.innerHTML + '</a> ' + urlConfigHtml;
addEvent( banner, "change", function( event ) {
var params = {};
params[ event.target.name ] = event.target.checked ? true : undefined;
window.location = QUnit.url( params );
});
}
var toolbar = id("qunit-testrunner-toolbar");
if ( toolbar ) {
var filter = document.createElement("input");
filter.type = "checkbox";
filter.id = "qunit-filter-pass";
addEvent( filter, "click", function() {
var ol = document.getElementById("qunit-tests");
if ( filter.checked ) {
ol.className = ol.className + " hidepass";
} else {
var tmp = " " + ol.className.replace( /[\n\t\r]/g, " " ) + " ";
ol.className = tmp.replace(/ hidepass /, " ");
}
if ( defined.sessionStorage ) {
if (filter.checked) {
sessionStorage.setItem("qunit-filter-passed-tests", "true");
} else {
sessionStorage.removeItem("qunit-filter-passed-tests");
}
}
});
if ( config.hidepassed || defined.sessionStorage && sessionStorage.getItem("qunit-filter-passed-tests") ) {
filter.checked = true;
var ol = document.getElementById("qunit-tests");
ol.className = ol.className + " hidepass";
}
toolbar.appendChild( filter );
var label = document.createElement("label");
label.setAttribute("for", "qunit-filter-pass");
label.innerHTML = "Hide passed tests";
toolbar.appendChild( label );
}
var main = id('qunit-fixture');
if ( main ) {
config.fixture = main.innerHTML;
}
if (config.autostart) {
QUnit.start();
}
};
addEvent(window, "load", QUnit.load);
function done() {
config.autorun = true;
// Log the last module results
if ( config.currentModule ) {
QUnit.moduleDone( {
name: config.currentModule,
failed: config.moduleStats.bad,
passed: config.moduleStats.all - config.moduleStats.bad,
total: config.moduleStats.all
} );
}
var banner = id("qunit-banner"),
tests = id("qunit-tests"),
runtime = +new Date - config.started,
passed = config.stats.all - config.stats.bad,
html = [
'Tests completed in ',
runtime,
' milliseconds.<br/>',
'<span class="passed">',
passed,
'</span> tests of <span class="total">',
config.stats.all,
'</span> passed, <span class="failed">',
config.stats.bad,
'</span> failed.'
].join('');
if ( banner ) {
banner.className = (config.stats.bad ? "qunit-fail" : "qunit-pass");
}
if ( tests ) {
id( "qunit-testresult" ).innerHTML = html;
}
if ( config.altertitle && typeof document !== "undefined" && document.title ) {
// show ✖ for good, ✔ for bad suite result in title
// use escape sequences in case file gets loaded with non-utf-8-charset
document.title = [
(config.stats.bad ? "\u2716" : "\u2714"),
document.title.replace(/^[\u2714\u2716] /i, "")
].join(" ");
}
QUnit.done( {
failed: config.stats.bad,
passed: passed,
total: config.stats.all,
runtime: runtime
} );
}
function validTest( name ) {
var filter = config.filter,
run = false;
if ( !filter ) {
return true;
}
var not = filter.charAt( 0 ) === "!";
if ( not ) {
filter = filter.slice( 1 );
}
if ( name.indexOf( filter ) !== -1 ) {
return !not;
}
if ( not ) {
run = true;
}
return run;
}
// so far supports only Firefox, Chrome and Opera (buggy)
// could be extended in the future to use something like https://github.com/csnover/TraceKit
function sourceFromStacktrace() {
try {
throw new Error();
} catch ( e ) {
if (e.stacktrace) {
// Opera
return e.stacktrace.split("\n")[6];
} else if (e.stack) {
// Firefox, Chrome
return e.stack.split("\n")[4];
} else if (e.sourceURL) {
// Safari, PhantomJS
// TODO sourceURL points at the 'throw new Error' line above, useless
//return e.sourceURL + ":" + e.line;
}
}
}
function escapeHtml(s) {
if (!s) {
return "";
}
s = s + "";
return s.replace(/[\&"<>\\]/g, function(s) {
switch(s) {
case "&": return "&amp;";
case "\\": return "\\\\";
case '"': return '\"';
case "<": return "&lt;";
case ">": return "&gt;";
default: return s;
}
});
}
function synchronize( callback ) {
config.queue.push( callback );
if ( config.autorun && !config.blocking ) {
process();
}
}
function process() {
var start = (new Date()).getTime();
while ( config.queue.length && !config.blocking ) {
if ( config.updateRate <= 0 || (((new Date()).getTime() - start) < config.updateRate) ) {
config.queue.shift()();
} else {
window.setTimeout( process, 13 );
break;
}
}
if (!config.blocking && !config.queue.length) {
done();
}
}
function saveGlobal() {
config.pollution = [];
if ( config.noglobals ) {
for ( var key in window ) {
config.pollution.push( key );
}
}
}
function checkPollution( name ) {
var old = config.pollution;
saveGlobal();
var newGlobals = diff( config.pollution, old );
if ( newGlobals.length > 0 ) {
ok( false, "Introduced global variable(s): " + newGlobals.join(", ") );
}
var deletedGlobals = diff( old, config.pollution );
if ( deletedGlobals.length > 0 ) {
ok( false, "Deleted global variable(s): " + deletedGlobals.join(", ") );
}
}
// returns a new Array with the elements that are in a but not in b
function diff( a, b ) {
var result = a.slice();
for ( var i = 0; i < result.length; i++ ) {
for ( var j = 0; j < b.length; j++ ) {
if ( result[i] === b[j] ) {
result.splice(i, 1);
i--;
break;
}
}
}
return result;
}
function fail(message, exception, callback) {
if ( typeof console !== "undefined" && console.error && console.warn ) {
console.error(message);
console.error(exception);
console.warn(callback.toString());
} else if ( window.opera && opera.postError ) {
opera.postError(message, exception, callback.toString);
}
}
function extend(a, b) {
for ( var prop in b ) {
if ( b[prop] === undefined ) {
delete a[prop];
} else {
a[prop] = b[prop];
}
}
return a;
}
function addEvent(elem, type, fn) {
if ( elem.addEventListener ) {
elem.addEventListener( type, fn, false );
} else if ( elem.attachEvent ) {
elem.attachEvent( "on" + type, fn );
} else {
fn();
}
}
function id(name) {
return !!(typeof document !== "undefined" && document && document.getElementById) &&
document.getElementById( name );
}
// Test for equality any JavaScript type.
// Discussions and reference: http://philrathe.com/articles/equiv
// Test suites: http://philrathe.com/tests/equiv
// Author: Philippe Rathé <prathe@gmail.com>
QUnit.equiv = function () {
var innerEquiv; // the real equiv function
var callers = []; // stack to decide between skip/abort functions
var parents = []; // stack to avoiding loops from circular referencing
// Call the o related callback with the given arguments.
function bindCallbacks(o, callbacks, args) {
var prop = QUnit.objectType(o);
if (prop) {
if (QUnit.objectType(callbacks[prop]) === "function") {
return callbacks[prop].apply(callbacks, args);
} else {
return callbacks[prop]; // or undefined
}
}
}
var callbacks = function () {
// for string, boolean, number and null
function useStrictEquality(b, a) {
if (b instanceof a.constructor || a instanceof b.constructor) {
// to catch short annotaion VS 'new' annotation of a
// declaration
// e.g. var i = 1;
// var j = new Number(1);
return a == b;
} else {
return a === b;
}
}
return {
"string" : useStrictEquality,
"boolean" : useStrictEquality,
"number" : useStrictEquality,
"null" : useStrictEquality,
"undefined" : useStrictEquality,
"nan" : function(b) {
return isNaN(b);
},
"date" : function(b, a) {
return QUnit.objectType(b) === "date"
&& a.valueOf() === b.valueOf();
},
"regexp" : function(b, a) {
return QUnit.objectType(b) === "regexp"
&& a.source === b.source && // the regex itself
a.global === b.global && // and its modifers
// (gmi) ...
a.ignoreCase === b.ignoreCase
&& a.multiline === b.multiline;
},
// - skip when the property is a method of an instance (OOP)
// - abort otherwise,
// initial === would have catch identical references anyway
"function" : function() {
var caller = callers[callers.length - 1];
return caller !== Object && typeof caller !== "undefined";
},
"array" : function(b, a) {
var i, j, loop;
var len;
// b could be an object literal here
if (!(QUnit.objectType(b) === "array")) {
return false;
}
len = a.length;
if (len !== b.length) { // safe and faster
return false;
}
// track reference to avoid circular references
parents.push(a);
for (i = 0; i < len; i++) {
loop = false;
for (j = 0; j < parents.length; j++) {
if (parents[j] === a[i]) {
loop = true;// dont rewalk array
}
}
if (!loop && !innerEquiv(a[i], b[i])) {
parents.pop();
return false;
}
}
parents.pop();
return true;
},
"object" : function(b, a) {
var i, j, loop;
var eq = true; // unless we can proove it
var aProperties = [], bProperties = []; // collection of
// strings
// comparing constructors is more strict than using
// instanceof
if (a.constructor !== b.constructor) {
return false;
}
// stack constructor before traversing properties
callers.push(a.constructor);
// track reference to avoid circular references
parents.push(a);
for (i in a) { // be strict: don't ensures hasOwnProperty
// and go deep
loop = false;
for (j = 0; j < parents.length; j++) {
if (parents[j] === a[i])
loop = true; // don't go down the same path
// twice
}
aProperties.push(i); // collect a's properties
if (!loop && !innerEquiv(a[i], b[i])) {
eq = false;
break;
}
}
callers.pop(); // unstack, we are done
parents.pop();
for (i in b) {
bProperties.push(i); // collect b's properties
}
// Ensures identical properties name
return eq
&& innerEquiv(aProperties.sort(), bProperties
.sort());
}
};
}();
innerEquiv = function() { // can take multiple arguments
var args = Array.prototype.slice.apply(arguments);
if (args.length < 2) {
return true; // end transition
}
return (function(a, b) {
if (a === b) {
return true; // catch the most you can
} else if (a === null || b === null || typeof a === "undefined"
|| typeof b === "undefined"
|| QUnit.objectType(a) !== QUnit.objectType(b)) {
return false; // don't lose time with error prone cases
} else {
return bindCallbacks(a, callbacks, [ b, a ]);
}
// apply transition with (1..n) arguments
})(args[0], args[1])
&& arguments.callee.apply(this, args.splice(1,
args.length - 1));
};
return innerEquiv;
}();
/**
* jsDump Copyright (c) 2008 Ariel Flesler - aflesler(at)gmail(dot)com |
* http://flesler.blogspot.com Licensed under BSD
* (http://www.opensource.org/licenses/bsd-license.php) Date: 5/15/2008
*
* @projectDescription Advanced and extensible data dumping for Javascript.
* @version 1.0.0
* @author Ariel Flesler
* @link {http://flesler.blogspot.com/2008/05/jsdump-pretty-dump-of-any-javascript.html}
*/
QUnit.jsDump = (function() {
function quote( str ) {
return '"' + str.toString().replace(/"/g, '\\"') + '"';
};
function literal( o ) {
return o + '';
};
function join( pre, arr, post ) {
var s = jsDump.separator(),
base = jsDump.indent(),
inner = jsDump.indent(1);
if ( arr.join )
arr = arr.join( ',' + s + inner );
if ( !arr )
return pre + post;
return [ pre, inner + arr, base + post ].join(s);
};
function array( arr, stack ) {
var i = arr.length, ret = Array(i);
this.up();
while ( i-- )
ret[i] = this.parse( arr[i] , undefined , stack);
this.down();
return join( '[', ret, ']' );
};
var reName = /^function (\w+)/;
var jsDump = {
parse:function( obj, type, stack ) { //type is used mostly internally, you can fix a (custom)type in advance
stack = stack || [ ];
var parser = this.parsers[ type || this.typeOf(obj) ];
type = typeof parser;
var inStack = inArray(obj, stack);
if (inStack != -1) {
return 'recursion('+(inStack - stack.length)+')';
}
//else
if (type == 'function') {
stack.push(obj);
var res = parser.call( this, obj, stack );
stack.pop();
return res;
}
// else
return (type == 'string') ? parser : this.parsers.error;
},
typeOf:function( obj ) {
var type;
if ( obj === null ) {
type = "null";
} else if (typeof obj === "undefined") {
type = "undefined";
} else if (QUnit.is("RegExp", obj)) {
type = "regexp";
} else if (QUnit.is("Date", obj)) {
type = "date";
} else if (QUnit.is("Function", obj)) {
type = "function";
} else if (typeof obj.setInterval !== undefined && typeof obj.document !== "undefined" && typeof obj.nodeType === "undefined") {
type = "window";
} else if (obj.nodeType === 9) {
type = "document";
} else if (obj.nodeType) {
type = "node";
} else if (typeof obj === "object" && typeof obj.length === "number" && obj.length >= 0) {
type = "array";
} else {
type = typeof obj;
}
return type;
},
separator:function() {
return this.multiline ? this.HTML ? '<br />' : '\n' : this.HTML ? '&nbsp;' : ' ';
},
indent:function( extra ) {// extra can be a number, shortcut for increasing-calling-decreasing
if ( !this.multiline )
return '';
var chr = this.indentChar;
if ( this.HTML )
chr = chr.replace(/\t/g,' ').replace(/ /g,'&nbsp;');
return Array( this._depth_ + (extra||0) ).join(chr);
},
up:function( a ) {
this._depth_ += a || 1;
},
down:function( a ) {
this._depth_ -= a || 1;
},
setParser:function( name, parser ) {
this.parsers[name] = parser;
},
// The next 3 are exposed so you can use them
quote:quote,
literal:literal,
join:join,
//
_depth_: 1,
// This is the list of parsers, to modify them, use jsDump.setParser
parsers:{
window: '[Window]',
document: '[Document]',
error:'[ERROR]', //when no parser is found, shouldn't happen
unknown: '[Unknown]',
'null':'null',
'undefined':'undefined',
'function':function( fn ) {
var ret = 'function',
name = 'name' in fn ? fn.name : (reName.exec(fn)||[])[1];//functions never have name in IE
if ( name )
ret += ' ' + name;
ret += '(';
ret = [ ret, QUnit.jsDump.parse( fn, 'functionArgs' ), '){'].join('');
return join( ret, QUnit.jsDump.parse(fn,'functionCode'), '}' );
},
array: array,
nodelist: array,
arguments: array,
object:function( map, stack ) {
var ret = [ ];
QUnit.jsDump.up();
for ( var key in map ) {
var val = map[key];
ret.push( QUnit.jsDump.parse(key,'key') + ': ' + QUnit.jsDump.parse(val, undefined, stack));
}
QUnit.jsDump.down();
return join( '{', ret, '}' );
},
node:function( node ) {
var open = QUnit.jsDump.HTML ? '&lt;' : '<',
close = QUnit.jsDump.HTML ? '&gt;' : '>';
var tag = node.nodeName.toLowerCase(),
ret = open + tag;
for ( var a in QUnit.jsDump.DOMAttrs ) {
var val = node[QUnit.jsDump.DOMAttrs[a]];
if ( val )
ret += ' ' + a + '=' + QUnit.jsDump.parse( val, 'attribute' );
}
return ret + close + open + '/' + tag + close;
},
functionArgs:function( fn ) {//function calls it internally, it's the arguments part of the function
var l = fn.length;
if ( !l ) return '';
var args = Array(l);
while ( l-- )
args[l] = String.fromCharCode(97+l);//97 is 'a'
return ' ' + args.join(', ') + ' ';
},
key:quote, //object calls it internally, the key part of an item in a map
functionCode:'[code]', //function calls it internally, it's the content of the function
attribute:quote, //node calls it internally, it's an html attribute value
string:quote,
date:quote,
regexp:literal, //regex
number:literal,
'boolean':literal
},
DOMAttrs:{//attributes to dump from nodes, name=>realName
id:'id',
name:'name',
'class':'className'
},
HTML:false,//if true, entities are escaped ( <, >, \t, space and \n )
indentChar:' ',//indentation unit
multiline:true //if true, items in a collection, are separated by a \n, else just a space.
};
return jsDump;
})();
// from Sizzle.js
function getText( elems ) {
var ret = "", elem;
for ( var i = 0; elems[i]; i++ ) {
elem = elems[i];
// Get the text from text nodes and CDATA nodes
if ( elem.nodeType === 3 || elem.nodeType === 4 ) {
ret += elem.nodeValue;
// Traverse everything else, except comment nodes
} else if ( elem.nodeType !== 8 ) {
ret += getText( elem.childNodes );
}
}
return ret;
};
//from jquery.js
function inArray( elem, array ) {
if ( array.indexOf ) {
return array.indexOf( elem );
}
for ( var i = 0, length = array.length; i < length; i++ ) {
if ( array[ i ] === elem ) {
return i;
}
}
return -1;
}
/*
* Javascript Diff Algorithm
* By John Resig (http://ejohn.org/)
* Modified by Chu Alan "sprite"
*
* Released under the MIT license.
*
* More Info:
* http://ejohn.org/projects/javascript-diff-algorithm/
*
* Usage: QUnit.diff(expected, actual)
*
* QUnit.diff("the quick brown fox jumped over", "the quick fox jumps over") == "the quick <del>brown </del> fox <del>jumped </del><ins>jumps </ins> over"
*/
QUnit.diff = (function() {
function diff(o, n) {
var ns = {};
var os = {};
for (var i = 0; i < n.length; i++) {
if (ns[n[i]] == null)
ns[n[i]] = {
rows: [],
o: null
};
ns[n[i]].rows.push(i);
}
for (var i = 0; i < o.length; i++) {
if (os[o[i]] == null)
os[o[i]] = {
rows: [],
n: null
};
os[o[i]].rows.push(i);
}
for (var i in ns) {
if (ns[i].rows.length == 1 && typeof(os[i]) != "undefined" && os[i].rows.length == 1) {
n[ns[i].rows[0]] = {
text: n[ns[i].rows[0]],
row: os[i].rows[0]
};
o[os[i].rows[0]] = {
text: o[os[i].rows[0]],
row: ns[i].rows[0]
};
}
}
for (var i = 0; i < n.length - 1; i++) {
if (n[i].text != null && n[i + 1].text == null && n[i].row + 1 < o.length && o[n[i].row + 1].text == null &&
n[i + 1] == o[n[i].row + 1]) {
n[i + 1] = {
text: n[i + 1],
row: n[i].row + 1
};
o[n[i].row + 1] = {
text: o[n[i].row + 1],
row: i + 1
};
}
}
for (var i = n.length - 1; i > 0; i--) {
if (n[i].text != null && n[i - 1].text == null && n[i].row > 0 && o[n[i].row - 1].text == null &&
n[i - 1] == o[n[i].row - 1]) {
n[i - 1] = {
text: n[i - 1],
row: n[i].row - 1
};
o[n[i].row - 1] = {
text: o[n[i].row - 1],
row: i - 1
};
}
}
return {
o: o,
n: n
};
}
return function(o, n) {
o = o.replace(/\s+$/, '');
n = n.replace(/\s+$/, '');
var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/));
var str = "";
var oSpace = o.match(/\s+/g);
if (oSpace == null) {
oSpace = [" "];
}
else {
oSpace.push(" ");
}
var nSpace = n.match(/\s+/g);
if (nSpace == null) {
nSpace = [" "];
}
else {
nSpace.push(" ");
}
if (out.n.length == 0) {
for (var i = 0; i < out.o.length; i++) {
str += '<del>' + out.o[i] + oSpace[i] + "</del>";
}
}
else {
if (out.n[0].text == null) {
for (n = 0; n < out.o.length && out.o[n].text == null; n++) {
str += '<del>' + out.o[n] + oSpace[n] + "</del>";
}
}
for (var i = 0; i < out.n.length; i++) {
if (out.n[i].text == null) {
str += '<ins>' + out.n[i] + nSpace[i] + "</ins>";
}
else {
var pre = "";
for (n = out.n[i].row + 1; n < out.o.length && out.o[n].text == null; n++) {
pre += '<del>' + out.o[n] + oSpace[n] + "</del>";
}
str += " " + out.n[i].text + nSpace[i] + pre;
}
}
}
return str;
};
})();
})(this);
\ No newline at end of file
/*!
* Bootstrap @VERSION
*
* Copyright 2011 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: @DATE
*/
// CSS Reset
@import "reset.less";
// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";
// Grid system and page structure
@import "scaffolding.less";
// Styled patterns and elements
@import "type.less";
@import "forms.less";
@import "tables.less";
@import "patterns.less";
\ No newline at end of file
/* Forms.less
* Base styles for various input types, form layouts, and states
* ------------------------------------------------------------- */
// FORM STYLES
// -----------
form {
margin-bottom: @baseline;
}
// Groups of fields with labels on top (legends)
fieldset {
margin-bottom: @baseline;
padding-top: @baseline;
legend {
display: block;
padding-left: 150px;
font-size: @basefont * 1.5;
line-height: 1;
color: @grayDark;
*padding: 0 0 5px 145px; /* IE6-7 */
*line-height: 1.5; /* IE6-7 */
}
}
// Parent element that clears floats and wraps labels and fields together
form .clearfix {
margin-bottom: @baseline;
.clearfix()
}
// Set font for forms
label,
input,
select,
textarea {
#font > .sans-serif(normal,13px,normal);
}
// Float labels left
label {
padding-top: 6px;
font-size: @basefont;
line-height: @baseline;
float: left;
width: 130px;
text-align: right;
color: @grayDark;
}
// Shift over the inside div to align all label's relevant content
form .input {
margin-left: 150px;
}
// Checkboxs and radio buttons
input[type=checkbox],
input[type=radio] {
cursor: pointer;
}
// Inputs, Textareas, Selects
input,
textarea,
select,
.uneditable-input {
display: inline-block;
width: 210px;
height: @baseline;
padding: 4px;
font-size: @basefont;
line-height: @baseline;
color: @gray;
border: 1px solid #ccc;
.border-radius(3px);
}
/* mini reset for non-html5 file types */
input[type=checkbox],
input[type=radio] {
width: auto;
height: auto;
padding: 0;
margin: 3px 0;
*margin-top: 0; /* IE6-7 */
line-height: normal;
border: none;
}
input[type=file] {
background-color: @white;
padding: initial;
border: initial;
line-height: initial;
.box-shadow(none);
}
input[type=button],
input[type=reset],
input[type=submit] {
width: auto;
height: auto;
}
select,
input[type=file] {
height: @baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
line-height: @baseline * 1.5;
*margin-top: 4px; /* For IE7, add top margin to align select with labels */
}
// Make multiple select elements height not fixed
select[multiple] {
height: inherit;
}
textarea {
height: auto;
}
// For text that needs to appear as an input but should not be an input
.uneditable-input {
background-color: @white;
display: block;
border-color: #eee;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
cursor: not-allowed;
}
// Placeholder text gets special styles; can't be bundled together though for some reason
:-moz-placeholder {
color: @grayLight;
}
::-webkit-input-placeholder {
color: @grayLight;
}
// Focus states
input,
textarea {
@transition: border linear .2s, box-shadow linear .2s;
.transition(@transition);
.box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
}
input:focus,
textarea:focus {
outline: 0;
border-color: rgba(82,168,236,.8);
@shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
.box-shadow(@shadow);
}
input[type=file]:focus,
input[type=checkbox]:focus,
select:focus {
.box-shadow(none); // override for file inputs
outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline
}
// Error styles
form div.clearfix.error {
background: lighten(@red, 57%);
padding: 10px 0;
margin: -10px 0 10px;
.border-radius(4px);
@error-text: desaturate(lighten(@red, 25%), 25%);
> label,
span.help-inline,
span.help-block {
color: @red;
}
input,
textarea {
border-color: @error-text;
.box-shadow(0 0 3px rgba(171,41,32,.25));
&:focus {
border-color: darken(@error-text, 10%);
.box-shadow(0 0 6px rgba(171,41,32,.5));
}
}
.input-prepend,
.input-append {
span.add-on {
background: lighten(@red, 50%);
border-color: @error-text;
color: darken(@error-text, 10%);
}
}
}
// Form element sizes
// TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes
.input-mini,
input.mini,
textarea.mini,
select.mini {
width: 60px;
}
.input-small,
input.small,
textarea.small,
select.small {
width: 90px;
}
.input-medium,
input.medium,
textarea.medium,
select.medium {
width: 150px;
}
.input-large,
input.large,
textarea.large,
select.large {
width: 210px;
}
.input-xlarge,
input.xlarge,
textarea.xlarge,
select.xlarge {
width: 270px;
}
.input-xxlarge,
input.xxlarge,
textarea.xxlarge,
select.xxlarge {
width: 530px;
}
textarea.xxlarge {
overflow-y: auto;
}
// Grid style input sizes
// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
.formColumns(@columnSpan: 1) {
display: inline-block;
float: none;
width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10;
margin-left: 0;
}
input,
textarea,
select {
// Default columns
&.span1 { .formColumns(1); }
&.span2 { .formColumns(2); }
&.span3 { .formColumns(3); }
&.span4 { .formColumns(4); }
&.span5 { .formColumns(5); }
&.span6 { .formColumns(6); }
&.span7 { .formColumns(7); }
&.span8 { .formColumns(8); }
&.span9 { .formColumns(9); }
&.span10 { .formColumns(10); }
&.span11 { .formColumns(11); }
&.span12 { .formColumns(12); }
&.span13 { .formColumns(13); }
&.span14 { .formColumns(14); }
&.span15 { .formColumns(15); }
&.span16 { .formColumns(16); }
}
// Disabled and read-only inputs
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
background-color: #f5f5f5;
border-color: #ddd;
cursor: not-allowed;
}
// Actions (the buttons)
.actions {
background: #f5f5f5;
margin-top: @baseline;
margin-bottom: @baseline;
padding: (@baseline - 1) 20px @baseline 150px;
border-top: 1px solid #ddd;
.border-radius(0 0 3px 3px);
.secondary-action {
float: right;
a {
line-height: 30px;
&:hover {
text-decoration: underline;
}
}
}
}
// Help Text
.help-inline,
.help-block {
font-size: @basefont - 2;
line-height: @baseline;
color: @grayLight;
}
.help-inline {
padding-left: 5px;
*position: relative; /* IE6-7 */
*top: -5px; /* IE6-7 */
}
// Big blocks of help text
.help-block {
display: block;
max-width: 600px;
}
// Inline Fields (input fields that appear as inline objects
.inline-inputs {
color: @gray;
span, input {
display: inline-block;
}
input.mini {
width: 60px;
}
input.small {
width: 90px;
}
span {
padding: 0 2px 0 1px;
}
}
// Allow us to put symbols and text within the input field for a cleaner look
.input-prepend,
.input-append {
input {
.border-radius(0 3px 3px 0);
}
.add-on {
position: relative;
background: #f5f5f5;
border: 1px solid #ccc;
z-index: 2;
float: left;
display: block;
width: auto;
min-width: 16px;
height: 18px;
padding: 4px 4px 4px 5px;
margin-right: -1px;
font-weight: normal;
line-height: 18px;
color: @grayLight;
text-align: center;
text-shadow: 0 1px 0 @white;
.border-radius(3px 0 0 3px);
}
.active {
background: lighten(@green, 30);
border-color: @green;
}
}
.input-prepend {
.add-on {
*margin-top: 1px; /* IE6-7 */
}
}
.input-append {
input {
float: left;
.border-radius(3px 0 0 3px);
}
.add-on {
.border-radius(0 3px 3px 0);
margin-right: 0;
margin-left: -1px;
}
}
// Stacked options for forms (radio buttons or checkboxes)
.inputs-list {
margin: 0 0 5px;
width: 100%;
li {
display: block;
padding: 0;
width: 100%;
}
label {
display: block;
float: none;
width: auto;
padding: 0;
line-height: @baseline;
text-align: left;
white-space: normal;
strong {
color: @gray;
}
small {
font-size: @basefont - 2;
font-weight: normal;
}
}
.inputs-list {
margin-left: 25px;
margin-bottom: 10px;
padding-top: 0;
}
&:first-child {
padding-top: 6px;
}
li + li {
padding-top: 2px;
}
input[type=radio],
input[type=checkbox] {
margin-bottom: 0;
}
}
// Stacked forms
.form-stacked {
padding-left: 20px;
fieldset {
padding-top: @baseline / 2;
}
legend {
padding-left: 0;
}
label {
display: block;
float: none;
width: auto;
font-weight: bold;
text-align: left;
line-height: 20px;
padding-top: 0;
}
.clearfix {
margin-bottom: @baseline / 2;
div.input {
margin-left: 0;
}
}
.inputs-list {
margin-bottom: 0;
li {
padding-top: 0;
label {
font-weight: normal;
padding-top: 0;
}
}
}
div.clearfix.error {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
margin-top: 0;
margin-left: -10px;
}
.actions {
margin-left: -20px;
padding-left: 20px;
}
}
/* Mixins.less
* Snippets of reusable CSS to develop faster and keep code readable
* ----------------------------------------------------------------- */
// Clearfix for clearing floats like a boss h5bp.com/q
.clearfix() {
zoom: 1;
&:before,
&:after {
display: table;
content: "";
zoom: 1;
*display: inline;
}
&:after {
clear: both;
}
}
// Center-align a block level element
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Sizing shortcuts
.size(@height: 5px, @width: 5px) {
height: @height;
width: @width;
}
.square(@size: 5px) {
.size(@size, @size);
}
// Input placeholder text
.placeholder(@color: @grayLight) {
:-moz-placeholder {
color: @color;
}
::-webkit-input-placeholder {
color: @color;
}
}
// Font Stacks
#font {
.shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
.sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
.serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
font-family: "Georgia", Times New Roman, Times, serif;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
.monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
font-family: "Monaco", Courier New, monospace;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
}
// Grid System
.fixed-container() {
width: @siteWidth;
margin-left: auto;
margin-right: auto;
.clearfix();
}
.columns(@columnSpan: 1) {
width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
}
.offset(@columnOffset: 1) {
margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
}
// Necessary grid styles for every column to make them appear next to each other horizontally
.gridColumn() {
display: inline;
float: left;
margin-left: @gridGutterWidth;
}
// makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
.makeColumn(@columnSpan: 1) {
.gridColumn();
.columns(@columnSpan);
}
// Border Radius
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
// Drop shadows
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
}
// Transitions
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-ms-transition: @transition;
-o-transition: @transition;
transition: @transition;
}
// Background clipping
.background-clip(@clip) {
-webkit-background-clip: @clip;
-moz-background-clip: @clip;
background-clip: @clip;
}
// CSS3 Content Columns
.content-columns(@columnCount, @columnGap: 20px) {
-webkit-column-count: @columnCount;
-moz-column-count: @columnCount;
column-count: @columnCount;
-webkit-column-gap: @columnGap;
-moz-column-gap: @columnGap;
column-gap: @columnGap;
}
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
#translucent {
.background(@color: @white, @alpha: 1) {
background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
}
.border(@color: @white, @alpha: 1) {
border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
background-clip: padding-box;
}
}
// Gradient Bar Colors for buttons and allerts
.gradientBar(@primaryColor, @secondaryColor) {
#gradient > .vertical(@primaryColor, @secondaryColor);
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
}
// Gradients
#gradient {
.horizontal (@startColor: #555, @endColor: #333) {
background-color: @endColor;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(left, @startColor, @endColor); // Le standard
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
}
.vertical (@startColor: #555, @endColor: #333) {
background-color: @endColor;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(top, @startColor, @endColor); // The standard
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
}
.directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
background-color: @endColor;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
}
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
background-color: @endColor;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
}
}
// Reset filters for IE
.reset-filter() {
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}
// Opacity
.opacity(@opacity: 100) {
filter: e(%("alpha(opacity=%d)", @opacity));
-khtml-opacity: @opacity / 100;
-moz-opacity: @opacity / 100;
opacity: @opacity / 100;
}
\ No newline at end of file
/* Patterns.less
* Repeatable UI elements outside the base styles provided from the scaffolding
* ---------------------------------------------------------------------------- */
// TOPBAR
// ------
// Topbar for Branding and Nav
.topbar {
height: 40px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10000;
overflow: visible;
// Links get text shadow
a {
color: @grayLight;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
// Hover and active states
// h3 for backwards compatibility
h3 a:hover,
.brand a:hover,
ul .active > a {
background-color: #333;
background-color: rgba(255,255,255,.05);
color: @white;
text-decoration: none;
}
// Website name
// h3 left for backwards compatibility
h3 {
position: relative;
}
h3 a,
.brand {
float: left;
display: block;
padding: 8px 20px 12px;
margin-left: -20px; // negative indent to left-align the text down the page
color: @white;
font-size: 20px;
font-weight: 200;
line-height: 1;
}
// Plain text in topbar
p {
margin: 0;
line-height: 40px;
a:hover {
background-color: transparent;
color: @white;
}
}
// Search Form
form {
float: left;
margin: 5px 0 0 0;
position: relative;
.opacity(100);
}
// Todo: remove from v2.0 when ready, added for legacy
form.pull-right {
float: right;
}
input {
background-color: #444;
background-color: rgba(255,255,255,.3);
#font > .sans-serif(13px, normal, 1);
padding: 4px 9px;
color: @white;
color: rgba(255,255,255,.75);
border: 1px solid #111;
.border-radius(4px);
@shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
.box-shadow(@shadow);
.transition(none);
// Placeholder text gets special styles; can't be bundled together though for some reason
&:-moz-placeholder {
color: @grayLighter;
}
&::-webkit-input-placeholder {
color: @grayLighter;
}
// Hover states
&:hover {
background-color: @grayLight;
background-color: rgba(255,255,255,.5);
color: @white;
}
// Focus states (we use .focused since IE8 and down doesn't support :focus)
&:focus,
&.focused {
outline: 0;
background-color: @white;
color: @grayDark;
text-shadow: 0 1px 0 @white;
border: 0;
padding: 5px 10px;
.box-shadow(0 0 3px rgba(0,0,0,.15));
}
}
}
// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
// For backwards compatibility, include .topbar .fill
.topbar-inner,
.topbar .fill {
background-color: #222;
#gradient > .vertical(#333, #222);
@shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
.box-shadow(@shadow);
}
// NAVIGATION
// ----------
// Topbar Nav
// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
// For backwards compatibility, leave in .topbar div > ul
.topbar div > ul,
.nav {
display: block;
float: left;
margin: 0 10px 0 0;
position: relative;
left: 0;
> li {
display: block;
float: left;
}
a {
display: block;
float: none;
padding: 10px 10px 11px;
line-height: 19px;
text-decoration: none;
&:hover {
color: @white;
text-decoration: none;
}
}
.active > a {
background-color: #222;
background-color: rgba(0,0,0,.5);
}
// Secondary (floated right) nav in topbar
&.secondary-nav {
float: right;
margin-left: 10px;
margin-right: 0;
// backwards compatibility
.menu-dropdown,
.dropdown-menu {
right: 0;
border: 0;
}
}
// Dropdowns within the .nav
// a.menu:hover and li.open .menu for backwards compatibility
a.menu:hover,
li.open .menu,
.dropdown-toggle:hover,
.dropdown.open .dropdown-toggle {
background: #444;
background: rgba(255,255,255,.05);
}
// .menu-dropdown for backwards compatibility
.menu-dropdown,
.dropdown-menu {
background-color: #333;
// a.menu for backwards compatibility
a.menu,
.dropdown-toggle {
color: @white;
&.open {
background: #444;
background: rgba(255,255,255,.05);
}
}
li a {
color: #999;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
&:hover {
#gradient > .vertical(#292929,#191919);
color: @white;
}
}
.active a {
color: @white;
}
.divider {
background-color: #222;
border-color: #444;
}
}
}
// For backwards compatibility with new dropdowns, redeclare dropdown link padding
.topbar ul .menu-dropdown li a,
.topbar ul .dropdown-menu li a {
padding: 4px 15px;
}
// Dropdown Menus
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
// li.menu for backwards compatibility
li.menu,
.dropdown {
position: relative;
}
// The link that is clicked to toggle the dropdown
// a.menu for backwards compatibility
a.menu:after,
.dropdown-toggle:after {
width: 0;
height: 0;
display: inline-block;
content: "&darr;";
text-indent: -99999px;
vertical-align: top;
margin-top: 8px;
margin-left: 4px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid @white;
.opacity(50);
}
// The dropdown menu (ul)
// .menu-dropdown for backwards compatibility
.menu-dropdown,
.dropdown-menu {
background-color: @white;
float: left;
display: none; // None by default, but block on "open" of the menu
position: absolute;
top: 40px;
z-index: 900;
min-width: 160px;
max-width: 220px;
_width: 160px;
margin-left: 0; // override default ul styles
margin-right: 0;
padding: 6px 0;
zoom: 1; // do we need this?
border-color: #999;
border-color: rgba(0,0,0,.2);
border-style: solid;
border-width: 0 1px 1px;
.border-radius(0 0 6px 6px);
.box-shadow(0 2px 4px rgba(0,0,0,.2));
.background-clip(padding-box);
// Unfloat any li's to make them stack
li {
float: none;
display: block;
background-color: none;
}
// Dividers (basically an hr) within the dropdown
.divider {
height: 1px;
margin: 5px 0;
overflow: hidden;
background-color: #eee;
border-bottom: 1px solid @white;
}
}
.topbar .dropdown-menu, .dropdown-menu {
// Links within the dropdown menu
a {
display: block;
padding: 4px 15px;
clear: both;
font-weight: normal;
line-height: 18px;
color: @gray;
text-shadow: 0 1px 0 @white;
// Hover state
&:hover {
#gradient > .vertical(#eeeeee, #dddddd);
color: @grayDark;
text-decoration: none;
@shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
.box-shadow(@shadow);
}
}
}
// Open state for the dropdown
// .open for backwards compatibility
.open,
.dropdown.open {
// .menu for backwards compatibility
.menu,
.dropdown-toggle {
color: @white;
background: #ccc;
background: rgba(0,0,0,.3);
}
// .menu-dropdown for backwards compatibility
.menu-dropdown,
.dropdown-menu {
display: block;
}
}
// Tabs and Pills
.tabs,
.pills {
margin: 0 0 20px;
padding: 0;
list-style: none;
.clearfix();
> li {
float: left;
> a {
display: block;
}
}
}
// Basic Tabs
.tabs {
float: left;
width: 100%;
border-bottom: 1px solid #ddd;
> li {
position: relative; // For the dropdowns mostly
top: 1px;
> a {
padding: 0 15px;
margin-right: 2px;
line-height: @baseline * 2;
border: 1px solid transparent;
.border-radius(4px 4px 0 0);
&:hover {
text-decoration: none;
background-color: #eee;
border-color: #eee #eee #ddd;
}
}
&.active > a {
color: @gray;
background-color: @white;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
}
// first one for backwards compatibility
.menu-dropdown,
.dropdown-menu {
top: 35px;
border-width: 1px;
.border-radius(0 6px 6px 6px);
}
// first one for backwards compatibility
a.menu:after,
.dropdown-toggle:after {
border-top-color: #999;
margin-top: 15px;
margin-left: 5px;
}
// first one for backwards compatibility
li.open.menu .menu,
.open.dropdown .dropdown-toggle {
border-color: #999;
}
// first one for backwards compatibility
li.open a.menu:after,
.dropdown.open .dropdown-toggle:after {
border-top-color: #555;
}
}
.tab-content {
clear: both;
}
// Basic pill nav
.pills {
a {
margin: 5px 3px 5px 0;
padding: 0 15px;
text-shadow: 0 1px 1px @white;
line-height: 30px;
.border-radius(15px);
&:hover {
background: @linkColorHover;
color: @white;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
}
.active a {
background: @linkColor;
color: @white;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
}
.tab-content > *,
.pill-content > * {
display: none;
}
.tab-content > .active,
.pill-content > .active {
display:block;
}
// BREADCRUMBS
// -----------
.breadcrumb {
margin: 0 0 @baseline;
padding: 7px 14px;
#gradient > .vertical(#ffffff, #f5f5f5);
border: 1px solid #ddd;
.border-radius(3px);
.box-shadow(inset 0 1px 0 @white);
li {
display: inline;
text-shadow: 0 1px 0 @white;
}
.divider {
padding: 0 5px;
color: @grayLight;
}
a {
}
.active a {
color: @grayDark;
}
}
// PAGE HEADERS
// ------------
.hero-unit {
background-color: #f5f5f5;
margin-bottom: 30px;
padding: 60px;
.border-radius(6px);
h1 {
margin-bottom: 0;
font-size: 60px;
line-height: 1;
letter-spacing: -1px;
}
p {
font-size: 18px;
font-weight: 200;
line-height: @baseline * 1.5;
}
}
footer {
margin-top: @baseline - 1;
padding-top: @baseline - 1;
border-top: 1px solid #eee;
}
// PAGE HEADERS
// ------------
.page-header {
margin-bottom: @baseline - 1;
border-bottom: 1px solid #ddd;
.box-shadow(0 1px 0 rgba(255,255,255,.5));
h1 {
margin-bottom: (@baseline / 2) - 1px;
}
}
// BUTTON STYLES
// -------------
// Shared colors for buttons and alerts
.btn,
.alert-message {
// Set text color
&.danger,
&.danger:hover,
&.error,
&.error:hover,
&.success,
&.success:hover,
&.info,
&.info:hover {
color: @white
}
// Danger and error appear as red
&.danger,
&.error {
.gradientBar(#ee5f5b, #c43c35);
}
// Success appears as green
&.success {
.gradientBar(#62c462, #57a957);
}
// Info appears as a neutral blue
&.info {
.gradientBar(#5bc0de, #339bb9);
}
}
// Base .btn styles
.btn {
// Button Base
cursor: pointer;
display: inline-block;
#gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
padding: 5px 14px 6px;
text-shadow: 0 1px 1px rgba(255,255,255,.75);
color: #333;
font-size: @basefont;
line-height: normal;
border: 1px solid #ccc;
border-bottom-color: #bbb;
.border-radius(4px);
@shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow);
&:hover {
background-position: 0 -15px;
color: #333;
text-decoration: none;
}
// Focus state for keyboard and accessibility
&:focus {
outline: 1px dotted #666;
}
// Primary Button Type
&.primary {
color: @white;
.gradientBar(@blue, @blueDark)
}
// Transitions
.transition(.1s linear all);
// Active and Disabled states
&:active {
@shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow);
}
&.disabled {
cursor: default;
background-image: none;
.reset-filter();
.opacity(65);
.box-shadow(none);
}
&[disabled] {
// disabled pseudo can't be included with .disabled
// def because IE8 and below will drop it ;_;
cursor: default;
background-image: none;
.reset-filter();
.opacity(65);
.box-shadow(none);
}
// Button Sizes
&.large {
font-size: @basefont + 2px;
line-height: normal;
padding: 9px 14px 9px;
.border-radius(6px);
}
&.small {
padding: 7px 9px 7px;
font-size: @basefont - 2px;
}
}
// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
:root .alert-message,
:root .btn {
border-radius: 0 \0;
}
// Help Firefox not be a jerk about adding extra padding to buttons
button.btn,
input[type=submit].btn {
&::-moz-focus-inner {
padding: 0;
border: 0;
}
}
// CLOSE ICONS
// -----------
.close {
float: right;
color: @black;
font-size: 20px;
font-weight: bold;
line-height: @baseline * .75;
text-shadow: 0 1px 0 rgba(255,255,255,1);
.opacity(20);
&:hover {
color: @black;
text-decoration: none;
.opacity(40);
}
}
// ERROR STYLES
// ------------
// Base alert styles
.alert-message {
position: relative;
padding: 7px 15px;
margin-bottom: @baseline;
color: @grayDark;
.gradientBar(#fceec1, #eedc94); // warning by default
text-shadow: 0 1px 0 rgba(255,255,255,.5);
border-width: 1px;
border-style: solid;
.border-radius(4px);
.box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
// Adjust close icon
.close {
*margin-top: 3px; /* IE7 spacing */
}
// Remove extra margin from content
h5 {
line-height: @baseline;
}
p {
margin-bottom: 0;
}
div {
margin-top: 5px;
margin-bottom: 2px;
line-height: 28px;
}
.btn {
// Provide actions with buttons
.box-shadow(0 1px 0 rgba(255,255,255,.25));
}
&.block-message {
background-image: none;
background-color: lighten(#fceec1, 5%);
.reset-filter();
padding: 14px;
border-color: #fceec1;
.box-shadow(none);
ul, p {
margin-right: 30px;
}
ul {
margin-bottom: 0;
}
li {
color: @grayDark;
}
.alert-actions {
margin-top: 5px;
}
&.error,
&.success,
&.info {
color: @grayDark;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
&.error {
background-color: lighten(#f56a66, 25%);
border-color: lighten(#f56a66, 20%);
}
&.success {
background-color: lighten(#62c462, 30%);
border-color: lighten(#62c462, 25%);
}
&.info {
background-color: lighten(#6bd0ee, 25%);
border-color: lighten(#6bd0ee, 20%);
}
}
}
// PAGINATION
// ----------
.pagination {
height: @baseline * 2;
margin: @baseline 0;
ul {
float: left;
margin: 0;
border: 1px solid #ddd;
border: 1px solid rgba(0,0,0,.15);
.border-radius(3px);
.box-shadow(0 1px 2px rgba(0,0,0,.05));
}
li {
display: inline;
}
a {
float: left;
padding: 0 14px;
line-height: (@baseline * 2) - 2;
border-right: 1px solid;
border-right-color: #ddd;
border-right-color: rgba(0,0,0,.15);
*border-right-color: #ddd; /* IE6-7 */
text-decoration: none;
}
a:hover,
.active a {
background-color: lighten(@blue, 45%);
}
.disabled a,
.disabled a:hover {
background-color: transparent;
color: @grayLight;
}
.next a {
border: 0;
}
}
// WELLS
// -----
.well {
background-color: #f5f5f5;
margin-bottom: 20px;
padding: 19px;
min-height: 20px;
border: 1px solid #eee;
border: 1px solid rgba(0,0,0,.05);
.border-radius(4px);
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
blockquote {
border-color: #ddd;
border-color: rgba(0,0,0,.15);
}
}
// MODALS
// ------
.modal-backdrop {
background-color: @black;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
// Fade for backdrop
&.fade { opacity: 0; }
}
.modal-backdrop, .modal-backdrop.fade.in {
.opacity(80);
}
.modal {
position: fixed;
top: 50%;
left: 50%;
z-index: 11000;
width: 560px;
margin: -250px 0 0 -250px;
background-color: @white;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.3);
*border: 1px solid #999; /* IE6-7 */
.border-radius(6px);
.box-shadow(0 3px 7px rgba(0,0,0,0.3));
.background-clip(padding-box);
.close { margin-top: 7px; }
&.fade {
.transition(e('opacity .3s linear, top .3s ease-out'));
top: -25%;
}
&.fade.in { top: 50%; }
}
.modal-header {
border-bottom: 1px solid #eee;
padding: 5px 15px;
}
.modal-body {
padding: 15px;
}
.modal-footer {
background-color: #f5f5f5;
padding: 14px 15px 15px;
border-top: 1px solid #ddd;
.border-radius(0 0 6px 6px);
.box-shadow(inset 0 1px 0 @white);
.clearfix();
margin-bottom: 0;
.btn {
float: right;
margin-left: 5px;
}
}
// POPOVER ARROWS
// --------------
#popoverArrow {
.above(@arrowWidth: 5px) {
bottom: 0;
left: 50%;
margin-left: -@arrowWidth;
border-left: @arrowWidth solid transparent;
border-right: @arrowWidth solid transparent;
border-top: @arrowWidth solid @black;
}
.left(@arrowWidth: 5px) {
top: 50%;
right: 0;
margin-top: -@arrowWidth;
border-top: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid transparent;
border-left: @arrowWidth solid @black;
}
.below(@arrowWidth: 5px) {
top: 0;
left: 50%;
margin-left: -@arrowWidth;
border-left: @arrowWidth solid transparent;
border-right: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid @black;
}
.right(@arrowWidth: 5px) {
top: 50%;
left: 0;
margin-top: -@arrowWidth;
border-top: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid transparent;
border-right: @arrowWidth solid @black;
}
}
// TWIPSY
// ------
.twipsy {
display: block;
position: absolute;
visibility: visible;
padding: 5px;
font-size: 11px;
z-index: 1000;
.opacity(80);
&.fade.in {
.opacity(80);
}
&.above .twipsy-arrow { #popoverArrow > .above(); }
&.left .twipsy-arrow { #popoverArrow > .left(); }
&.below .twipsy-arrow { #popoverArrow > .below(); }
&.right .twipsy-arrow { #popoverArrow > .right(); }
}
.twipsy-inner {
padding: 3px 8px;
background-color: @black;
color: white;
text-align: center;
max-width: 200px;
text-decoration: none;
.border-radius(4px);
}
.twipsy-arrow {
position: absolute;
width: 0;
height: 0;
}
// POPOVERS
// --------
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
padding: 5px;
display: none;
&.above .arrow { #popoverArrow > .above(); }
&.right .arrow { #popoverArrow > .right(); }
&.below .arrow { #popoverArrow > .below(); }
&.left .arrow { #popoverArrow > .left(); }
.arrow {
position: absolute;
width: 0;
height: 0;
}
.inner {
background-color: @black;
background-color: rgba(0,0,0,.8);
padding: 3px;
overflow: hidden;
width: 280px;
.border-radius(6px);
.box-shadow(0 3px 7px rgba(0,0,0,0.3));
}
.title {
background-color: #f5f5f5;
padding: 9px 15px;
line-height: 1;
.border-radius(3px 3px 0 0);
border-bottom:1px solid #eee;
}
.content {
background-color: @white;
padding: 14px;
.border-radius(0 0 3px 3px);
.background-clip(padding-box);
p, ul, ol {
margin-bottom: 0;
}
}
}
// PATTERN ANIMATIONS
// ------------------
.fade {
.transition(opacity .15s linear);
opacity: 0;
&.in {
opacity: 1;
}
}
// LABELS
// ------
.label {
padding: 1px 3px 2px;
background-color: @grayLight;
font-size: @basefont * .75;
font-weight: bold;
color: @white;
text-transform: uppercase;
white-space: nowrap;
.border-radius(3px);
&.important { background-color: #c43c35; }
&.warning { background-color: @orange; }
&.success { background-color: @green; }
&.notice { background-color: lighten(@blue, 25%); }
}
// MEDIA GRIDS
// -----------
.media-grid {
margin-left: -20px;
margin-bottom: 0;
.clearfix();
li {
display: inline;
}
a {
float: left;
padding: 4px;
margin: 0 0 20px 20px;
border: 1px solid #ddd;
.border-radius(4px);
.box-shadow(0 1px 1px rgba(0,0,0,.075));
img {
display: block;
}
&:hover {
border-color: @linkColor;
.box-shadow(0 1px 4px rgba(0,105,214,.25));
}
}
}
/* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
// ERIC MEYER RESET
// --------------------------------------------------
html, body { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
ol, ul { list-style: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; }
// Normalize.css
// Pulling in select resets form the normalize.css project
// --------------------------------------------------
// Display in IE6-9 and FF3
// -------------------------
// Source: http://github.com/necolas/normalize.css
html {
overflow-y: scroll;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
// Focus states
a:focus {
outline: thin dotted;
}
// Hover & Active
a:hover,
a:active {
outline: 0;
}
// Display in IE6-9 and FF3
// -------------------------
// Source: http://github.com/necolas/normalize.css
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
// Display block in IE6-9 and FF3
// -------------------------
// Source: http://github.com/necolas/normalize.css
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
// Prevents modern browsers from displaying 'audio' without controls
// -------------------------
// Source: http://github.com/necolas/normalize.css
audio:not([controls]) {
display: none;
}
// Prevents sub and sup affecting line-height in all browsers
// -------------------------
// Source: http://github.com/necolas/normalize.css
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
// Img border in a's and image quality
// -------------------------
// Source: http://github.com/necolas/normalize.css
img {
border: 0;
-ms-interpolation-mode: bicubic;
}
// Forms
// -------------------------
// Source: http://github.com/necolas/normalize.css
// Font size in all browsers, margin changes, misc consistency
button,
input,
select,
textarea {
font-size: 100%;
margin: 0;
vertical-align: baseline;
*vertical-align: middle;
}
button,
input {
line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
*overflow: visible; // Inner spacing ie IE6/7
}
button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
border: 0;
padding: 0;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer; // Cursors on all buttons applied consistently
-webkit-appearance: button; // Style clicable inputs in iOS
}
input[type="search"] { // Appearance in Safari/Chrome
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
}
textarea {
overflow: auto; // Remove vertical scrollbar in IE6-9
vertical-align: top; // Readability and alignment cross-browser
}
\ No newline at end of file
/*
* Scaffolding
* Basic and global styles for generating a grid system, structural layout, and page templates
* ------------------------------------------------------------------------------------------- */
// STRUCTURAL LAYOUT
// -----------------
html, body {
background-color: @white;
}
body {
margin: 0;
#font > .sans-serif(normal,@basefont,@baseline);
color: @grayDark;
}
// Container (centered, fixed-width layouts)
.container {
.fixed-container();
}
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
.container-fluid {
position: relative;
min-width: 940px;
padding-left: 20px;
padding-right: 20px;
.clearfix();
> .sidebar {
float: left;
width: 220px;
}
// TODO in v2: rename this and .popover .content to be more specific
> .content {
margin-left: 240px;
}
}
// BASE STYLES
// -----------
// Links
a {
color: @linkColor;
text-decoration: none;
line-height: inherit;
font-weight: inherit;
&:hover {
color: @linkColorHover;
text-decoration: underline;
}
}
// Quick floats
.pull-right {
float: right;
}
.pull-left {
float: left;
}
// Toggling content
.hide {
display: none;
}
.show {
display: block;
}
// GRID SYSTEM
// -----------
// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there
.row {
.clearfix();
margin-left: -1 * @gridGutterWidth;
}
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
// Credit to @dhg for the idea
[class*="span"] {
.gridColumn();
}
// Default columns
.span1 { .columns(1); }
.span2 { .columns(2); }
.span3 { .columns(3); }
.span4 { .columns(4); }
.span5 { .columns(5); }
.span6 { .columns(6); }
.span7 { .columns(7); }
.span8 { .columns(8); }
.span9 { .columns(9); }
.span10 { .columns(10); }
.span11 { .columns(11); }
.span12 { .columns(12); }
.span13 { .columns(13); }
.span14 { .columns(14); }
.span15 { .columns(15); }
.span16 { .columns(16); }
// For optional 24-column grid
.span17 { .columns(17); }
.span18 { .columns(18); }
.span19 { .columns(19); }
.span20 { .columns(20); }
.span21 { .columns(21); }
.span22 { .columns(22); }
.span23 { .columns(23); }
.span24 { .columns(24); }
// Offset column options
.offset1 { .offset(1); }
.offset2 { .offset(2); }
.offset3 { .offset(3); }
.offset4 { .offset(4); }
.offset5 { .offset(5); }
.offset6 { .offset(6); }
.offset7 { .offset(7); }
.offset8 { .offset(8); }
.offset9 { .offset(9); }
.offset10 { .offset(10); }
.offset11 { .offset(11); }
.offset12 { .offset(12); }
// Unique column sizes for 16-column grid
.span-one-third { width: 300px; }
.span-two-thirds { width: 620px; }
.offset-one-third { margin-left: 340px; }
.offset-two-thirds { margin-left: 660px; }
/*
* Tables.less
* Tables for, you guessed it, tabular data
* ---------------------------------------- */
// BASELINE STYLES
// ---------------
table {
width: 100%;
margin-bottom: @baseline;
padding: 0;
border-collapse: separate; // Done so we can round those corners!
*border-collapse: collapse; /* IE7, collapse table to remove spacing */
font-size: @basefont;
border: 1px solid #ddd;
.border-radius(4px);
th, td {
padding: 10px 10px 9px;
line-height: @baseline;
text-align: left;
}
th {
padding-top: 9px;
font-weight: bold;
vertical-align: middle;
border-bottom: 1px solid #ddd;
}
td {
vertical-align: top;
}
th + th,
td + td {
border-left: 1px solid #ddd;
}
tr + tr td {
border-top: 1px solid #ddd;
}
tbody tr:first-child td:first-child {
.border-radius(4px 0 0 0);
}
tbody tr:first-child td:last-child {
.border-radius(0 4px 0 0);
}
tbody tr:last-child td:first-child {
.border-radius(0 0 0 4px);
}
tbody tr:last-child td:last-child {
.border-radius(0 0 4px 0);
}
}
// ZEBRA-STRIPING
// --------------
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.zebra-striped {
tbody {
tr:nth-child(odd) td {
background-color: #f9f9f9;
}
tr:hover td {
background-color: #f5f5f5;
}
}
}
table {
// Tablesorting styles w/ jQuery plugin
.header {
cursor: pointer;
&:after {
content: "";
float: right;
margin-top: 7px;
border-width: 0 4px 4px;
border-style: solid;
border-color: #000 transparent;
visibility: hidden;
}
}
// Style the sorted column headers (THs)
.headerSortUp,
.headerSortDown {
background-color: rgba(141,192,219,.25);
text-shadow: 0 1px 1px rgba(255,255,255,.75);
}
// Style the ascending (reverse alphabetical) column header
.header:hover {
&:after {
visibility:visible;
}
}
// Style the descending (alphabetical) column header
.headerSortDown,
.headerSortDown:hover {
&:after {
visibility:visible;
.opacity(60);
}
}
// Style the ascending (reverse alphabetical) column header
.headerSortUp {
&:after {
border-bottom: none;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #000;
visibility:visible;
.box-shadow(none); //can't add boxshadow to downward facing arrow :(
.opacity(60);
}
}
// Blue Table Headings
.blue {
color: @blue;
border-bottom-color: @blue;
}
.headerSortUp.blue,
.headerSortDown.blue {
background-color: lighten(@blue, 40%);
}
// Green Table Headings
.green {
color: @green;
border-bottom-color: @green;
}
.headerSortUp.green,
.headerSortDown.green {
background-color: lighten(@green, 40%);
}
// Red Table Headings
.red {
color: @red;
border-bottom-color: @red;
}
.headerSortUp.red,
.headerSortDown.red {
background-color: lighten(@red, 50%);
}
// Yellow Table Headings
.yellow {
color: @yellow;
border-bottom-color: @yellow;
}
.headerSortUp.yellow,
.headerSortDown.yellow {
background-color: lighten(@yellow, 40%);
}
// Orange Table Headings
.orange {
color: @orange;
border-bottom-color: @orange;
}
.headerSortUp.orange,
.headerSortDown.orange {
background-color: lighten(@orange, 40%);
}
// Purple Table Headings
.purple {
color: @purple;
border-bottom-color: @purple;
}
.headerSortUp.purple,
.headerSortDown.purple {
background-color: lighten(@purple, 40%);
}
}
\ No newline at end of file
/* Typography.less
* Headings, body text, lists, code, and more for a versatile and durable typography system
* ---------------------------------------------------------------------------------------- */
// BODY TEXT
// ---------
p {
#font > .shorthand(normal,@basefont,@baseline);
margin-bottom: @baseline / 2;
small {
font-size: @basefont - 2;
color: @grayLight;
}
}
// HEADINGS
// --------
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
color: @grayDark;
small {
color: @grayLight;
}
}
h1 {
margin-bottom: @baseline;
font-size: 30px;
line-height: @baseline * 2;
small {
font-size: 18px;
}
}
h2 {
font-size: 24px;
line-height: @baseline * 2;
small {
font-size: 14px;
}
}
h3, h4, h5, h6 {
line-height: @baseline * 2;
}
h3 {
font-size: 18px;
small {
font-size: 14px;
}
}
h4 {
font-size: 16px;
small {
font-size: 12px;
}
}
h5 {
font-size: 14px;
}
h6 {
font-size: 13px;
color: @grayLight;
text-transform: uppercase;
}
// COLORS
// ------
// Unordered and Ordered lists
ul, ol {
margin: 0 0 @baseline 25px;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin-bottom: 0;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
li {
line-height: @baseline;
color: @gray;
}
ul.unstyled {
list-style: none;
margin-left: 0;
}
// Description Lists
dl {
margin-bottom: @baseline;
dt, dd {
line-height: @baseline;
}
dt {
font-weight: bold;
}
dd {
margin-left: @baseline / 2;
}
}
// MISC
// ----
// Horizontal rules
hr {
margin: 20px 0 19px;
border: 0;
border-bottom: 1px solid #eee;
}
// Emphasis
strong {
font-style: inherit;
font-weight: bold;
}
em {
font-style: italic;
font-weight: inherit;
line-height: inherit;
}
.muted {
color: @grayLight;
}
// Blockquotes
blockquote {
margin-bottom: @baseline;
border-left: 5px solid #eee;
padding-left: 15px;
p {
#font > .shorthand(300,14px,@baseline);
margin-bottom: 0;
}
small {
display: block;
#font > .shorthand(300,12px,@baseline);
color: @grayLight;
&:before {
content: '\2014 \00A0';
}
}
}
// Addresses
address {
display: block;
line-height: @baseline;
margin-bottom: @baseline;
}
// Inline and block code styles
code, pre {
padding: 0 3px 2px;
font-family: Monaco, Andale Mono, Courier New, monospace;
font-size: 12px;
.border-radius(3px);
}
code {
background-color: lighten(@orange, 40%);
color: rgba(0,0,0,.75);
padding: 1px 3px;
}
pre {
background-color: #f5f5f5;
display: block;
padding: (@baseline - 1) / 2;
margin: 0 0 @baseline;
line-height: @baseline;
font-size: 12px;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
.border-radius(3px);
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
\ No newline at end of file
/* Variables.less
* Variables to customize the look and feel of Bootstrap
* ----------------------------------------------------- */
// Links
@linkColor: #0069d6;
@linkColorHover: darken(@linkColor, 15);
// Grays
@black: #000;
@grayDark: lighten(@black, 25%);
@gray: lighten(@black, 50%);
@grayLight: lighten(@black, 75%);
@grayLighter: lighten(@black, 90%);
@white: #fff;
// Accent Colors
@blue: #049CDB;
@blueDark: #0064CD;
@green: #46a546;
@red: #9d261d;
@yellow: #ffc40d;
@orange: #f89406;
@pink: #c3325f;
@purple: #7a43b6;
// Baseline grid
@basefont: 13px;
@baseline: 18px;
// Griditude
// Modify the grid styles in mixins.less
@gridColumns: 16;
@gridColumnWidth: 40px;
@gridGutterWidth: 20px;
@extraSpace: (@gridGutterWidth * 2); // For our grid calculations
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// Color Scheme
// Use this to roll your own color schemes if you like (unused by Bootstrap by default)
@baseColor: @blue; // Set a base color
@complement: spin(@baseColor, 180); // Determine a complementary color
@split1: spin(@baseColor, 158); // Split complements
@split2: spin(@baseColor, -158);
@triad1: spin(@baseColor, 135); // Triads colors
@triad2: spin(@baseColor, -135);
@tetra1: spin(@baseColor, 90); // Tetra colors
@tetra2: spin(@baseColor, -90);
@analog1: spin(@baseColor, 22); // Analogs colors
@analog2: spin(@baseColor, -22);
// More variables coming soon:
// - @basefont to @baseFontSize
// - @baseline to @baseLineHeight
// - @baseFontFamily
// - @primaryButtonColor
// - anything else? File an issue on GitHub
\ No newline at end of file
......@@ -4,9 +4,9 @@
$(function(){
broke.init('todo.settings', function(){
// fill db
todo.models.Task.objects.create({"pk": 1, "model": "todo.task", "fields": {"is_complete": false, "title": "Title A"}});
todo.models.Task.objects.create({"pk": 2, "model": "todo.task", "fields": {"is_complete": false, "title": "Title B"}});
todo.models.Task.objects.create({"pk": 3, "model": "todo.task", "fields": {"is_complete": false, "title": "Title C"}});
//todo.models.Task.objects.create({"pk": 1, "model": "todo.task", "fields": {"is_complete": false, "title": "Title A"}});
//todo.models.Task.objects.create({"pk": 2, "model": "todo.task", "fields": {"is_complete": false, "title": "Title B"}});
//todo.models.Task.objects.create({"pk": 3, "model": "todo.task", "fields": {"is_complete": false, "title": "Title C"}});
broke.events.request('/');
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment