/*body {
    background-color: #f6f6f6;
    margin: 0px;
}
#footer {
    margin-top: 100px;
}
#footer p {
    margin-bottom: 0px;
}
#topLinks {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.previewContainer {
    width: 100%;
    position:relative;
    margin: 20px 0px;
    float: left;
}
.itemPreview{
    width: 50%;
    float: left;
}
.codePreview{
    width: 50%;
    float: left;
}
.formatCSS {
    font-family: Arial, Helvetica, sans-serif;
    border: 1px dashed #DDD;
    background-color: #F7F7F7;
    width: auto;
    margin: 10px;
    padding: 10px;
    color: #707070;
    width: 50%;
}*/
/* Columns for output display */
.fullWidth {
    width: 100%;
}
.oneHalf {
    width: 48%;
}
.oneThird {
    width: 30.66%;
}
.twoThird {
    width: 65.33%;
}
.oneFourth {
    width: 22%;
}
.threeFourth {
    width: 74%;
}
.oneFifth {
    width: 16.8%;
}
.twoFifth {
    width: 37.6%;
}
.threeFifth {
    width: 58.4%;
}
.fourFifth {
    width: 67.2%;
}
.oneSixth {
    width: 13.33%;
}
.fiveSixth {
    width: 82.67%;
}
.oneHalf, .oneThird, .twoThird, .threeFourth, .oneFourth, .oneFifth, .twoFifth, .threeFifth, .fourFifth, .oneSixth, .fiveSixth {
    position: relative;
    margin-right: 4%;
    float: left;
}
.last {
    margin-right: 0 !important;
    clear: right;
}
.clearBoth {
    clear: both;
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0;
    width: 100%;
}
.marginBottom {
    margin-bottom: 20px;
}
.colorBox {
    height: 90px;
    line-height: 90px;
}
.linkList {
    list-style-type: none;
    padding: 0px;
}
/* Code output */
pre[class*="language-"] {
    font-size: 14px !important;
    margin: 15px 0px;
    border: 1px solid #d6d6d6;
}
/* Components */
/* Background colours */
.grey1 {
    background-color: #F6F6F6;
}
.grey2 {
    background-color: #D6D6D6;
}
.grey3 {
    background-color: #ADADAD;
}
.grey4 {
    background-color: #E2E2E2;
}
.black1 {
    background-color: #000000;
}
/* Background gradients */
.lightGreyGradient {
    background: #eeeeee; /* Old browsers */
    background: -moz-linear-gradient(top, #eeeeee 0%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #eeeeee 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #eeeeee 0%,#ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 100%); /* IE10+ */
    background: linear-gradient(to bottom, #eeeeee 0%,#ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.darkGreyGradient {
    background: #707070; /* Old browsers */
    background: -moz-linear-gradient(top, #707070 0%, #424242 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#707070), color-stop(100%,#424242)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #707070 0%,#424242 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #707070 0%,#424242 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #707070 0%,#424242 100%); /* IE10+ */
    background: linear-gradient(to bottom, #707070 0%,#424242 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#707070', endColorstr='#424242',GradientType=0 ); /* IE6-9 */
}
.blackGradient {
    background: #2c2c2c; /* Old browsers */
    background: -moz-linear-gradient(top, #2c2c2c 0%, #030303 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c2c2c), color-stop(100%,#030303)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #2c2c2c 0%,#030303 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #2c2c2c 0%,#030303 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #2c2c2c 0%,#030303 100%); /* IE10+ */
    background: linear-gradient(to bottom, #2c2c2c 0%,#030303 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c2c2c', endColorstr='#030303',GradientType=0 ); /* IE6-9 */
}
/* Recommended colour palette */
.greenBG {
    background-color: #3DA94D;
}
.blueBG {
    background-color: #0396D9;
}
.orangeBG {
    background-color: #F38108;
}
.orange {
    color: #F38108;
}
.black {
    color: #000000;
}
.white {
    color: #ffffff;
}
/* Alignment */
.left {
    text-align: left;
}
.right {
    text-align: right;
}
/* Fonts */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
}
.headingDiv {
    height: 60px;
    margin-bottom: 10px;
}
h1 {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 28px;
}
h2 {
    font-family: Arial, sans-serif;
    font-size: 20px;
}
h3 {
    font-family: Arial, sans-serif;
    font-size: 16px; 
}
h4 {
    font-family: Arial, sans-serif;
    font-size: 12px;
}
.borderBottom {
    border-bottom: 1px solid #ADADAD;
}
.centerText {
    text-align: center;
    padding: 10px 0px;
}
/* Input Boxes */
input[type=text],
input[type=password] {
    color: #000000;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -khtml-border-radius: 2px;
    border-radius: 2px;
    border: 1px solid #d7d7d7;
    font-family: Arial, sans-serif;
    font-size: 12px;
    width: 220px;
    margin: 1px 0;
    padding: 5px;
    
}
label {
    color: #666666;
}
input[type=text].largeInput {
    width: 220px;
}
input[type=text].smallInput {
    width: 110px;
}
input[type=text].tinyInput {
    width: 50px;
}
input[type=text].singleInput {
    width: 20px;
}
textarea {
    color: #000000;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -khtml-border-radius: 2px;
    border-radius: 2px;
    border: 1px solid #d7d7d7;
    font-family: Arial, sans-serif;
    font-size: 12px;
    margin: 1px 0;
    padding: 5px;
}
/* Tooltip */
.tooptip {
    background-color: #EFEFEF;
    border: 4px solid #C2C2C2;
    padding: 8px;
    opacity: 0.85;
    max-width: 600px;
    font-size: 12px;
    line-height: 14px;
    width: 300px;
    position: relative;
}
.tooltipArrow {
    background-image: url(images/tooltip_arrow.png);
    background-repeat: no-repeat;
    background-size: auto auto;
    width: 14px;
    height: 13px;
    position: absolute;
    top: -12px;
    left: 15px;
}
/* Links */
.linkDiv span.iconLeft {
    margin-right: 10px;
}
.linkDiv span.iconRight {
    margin-left: 10px;
}
.defaultLink {
    color: #0396D9;
}
.defaultLink:hover {
    color: #0077CC;
}
.documentLink {
    color: #0396D9;
}
.documentLink:hover {
    color: #0077CC;
}
.externalLink {
    color: #0396D9;
}
.externalLink:hover {
    color: #0077CC;
}
.backToTopLink {
    color: #666666;
}
.backToTopLink:hover {
    color: #000000;
}
/* Buttons */
.button {
    -moz-box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-family: "Helvetica Neue",Arial,sans-serif;
    font-size: 12px;
    padding: 6px 9px;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
    border-radius: 0px;
    font-weight: bold;
    color: #FFFFFF;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.btn-primary {
    background: #2e913a; /* Old browsers */
    background: -moz-linear-gradient(top, #2e913a 0%, #3da94d 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e913a), color-stop(100%,#3da94d)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #2e913a 0%,#3da94d 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #2e913a 0%,#3da94d 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #2e913a 0%,#3da94d 100%); /* IE10+ */
    background: linear-gradient(to bottom, #2e913a 0%,#3da94d 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e913a', endColorstr='#3da94d',GradientType=0 ); /* IE6-9 */
    border: 1px solid #3DA94D;
    color: #ffffff;
}
.btn-primary:hover {
    background: #3da94d; /* Old browsers */
    background: -moz-linear-gradient(top, #3da94d 0%, #2e913a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3da94d), color-stop(100%,#2e913a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #3da94d 0%,#2e913a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #3da94d 0%,#2e913a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #3da94d 0%,#2e913a 100%); /* IE10+ */
    background: linear-gradient(to bottom, #3da94d 0%,#2e913a 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3da94d', endColorstr='#2e913a',GradientType=0 ); /* IE6-9 */
}
.btn-secondary {
    background: #ededed; /* Old browsers */
    background: -moz-linear-gradient(top, #ededed 0%, #dfdfdf 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#dfdfdf)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ededed 0%,#dfdfdf 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ededed 0%,#dfdfdf 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ededed 0%,#dfdfdf 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ededed 0%,#dfdfdf 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0 ); /* IE6-9 */
    border: 1px solid #DCDCDC;
    color: #555555;
}
.btn-secondary:hover {
    background: #dfdfdf; /* Old browsers */
    background: -moz-linear-gradient(top, #dfdfdf 0%, #ededed 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dfdfdf), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #dfdfdf 0%,#ededed 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #dfdfdf 0%,#ededed 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #dfdfdf 0%,#ededed 100%); /* IE10+ */
    background: linear-gradient(to bottom, #dfdfdf 0%,#ededed 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
}
.btn-login {
    background: #666666; /* Old browsers */
    background: -moz-linear-gradient(top, #666666 0%, #333333 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#333333)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #666666 0%,#333333 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #666666 0%,#333333 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #666666 0%,#333333 100%); /* IE10+ */
    background: linear-gradient(to bottom, #666666 0%,#333333 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#333333',GradientType=0 ); /* IE6-9 */
    border: 1px solid #333333;
    color: #ffffff;
}
.btn-login:hover {
    background: #333333; /* Old browsers */
    background: -moz-linear-gradient(top, #333333 0%, #666666 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#666666)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #333333 0%,#666666 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #333333 0%,#666666 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #333333 0%,#666666 100%); /* IE10+ */
    background: linear-gradient(to bottom, #333333 0%,#666666 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#666666',GradientType=0 ); /* IE6-9 */
}