@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,700italic,600,400italic,300italic,600italic);
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700);
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
html {
overflow-y: scroll;
min-height: 100%; }
body {
font-size: 100%;
line-height: 1.5; }
body, blockquote, h1, h2, h3, h4, h5, h6, p, pre, form, fieldset, img,
legend, table, th, td, caption, hr {
border: 0;
margin: 0;
outline: 0;
padding: 0; }
hr {
border-top: 1px solid #ddd;
display: block;
height: 1px;
margin: 24px 0; }
article, aside, details, figure, figcaption, footer,
header, main, nav, section, summary {
display: block; }
[hidden] {
display: none; }
img {
color: red;
font-style: italic; }
audio, img, object, embed, video {
max-width: 100%; }
audio, canvas, video {
display: inline-block; }
audio:not([controls]) {
display: none;
height: 0; }
svg:not(:root) {
overflow: hidden; }
small {
display: block; }
p small, li small {
display: inline;
margin: 0; }
b, strong {
font-weight: bold; }
i, em, dfn {
font-style: italic; }
blockquote {
font-size: 1.125em;
font-style: italic; }
blockquote:before, blockquote:after {
font-size: 1.25em;
font-weight: 400;
line-height: 1;
position: relative;
top: 2px; }
blockquote:before {
content: '"';
left: -1px; }
blockquote:after {
content: '"';
right: -1px; }
q {
quotes: "\201C" "\201D" "\2018" "\2019"; }
abbr[title], dfn[title] {
border-bottom: 1px dotted #cccccc;
cursor: help; }
mark {
background: yellow;
color: #131313; }
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sub {
bottom: -.25em; }
sup {
top: -.5em; }
code, kbd, pre, samp {
background: #16414c;
border-left: 6px solid #acd473;
color: #a9b9b9;
display: block;
font-family: monospace, serif;
font-size: 1em;
padding: 12px 8px 12px 20px; }
pre {
overflow: auto;
white-space: pre-wrap; }
pre mark {
background: #eee;
border-bottom: 1px solid #ddd;
color: #333; }
p code, p kbd, p pre, p samp, li code, li kbd, li pre, li samp, pre code, pre kbd, pre pre, pre samp {
display: inline-block;
margin: 0;
padding: 4px; }
.code-Value {
color: #24b9af; }
.code-Tag {
color: #8ab04c; }
ol, ul {
margin: 0 0 8px;
padding: 0 0 0 24px; }
ol > li:last-child, ul > li:last-child {
margin-bottom: 0; }
ol li ol, ol li ul, ul li ol, ul li ul {
margin-top: 8px; }
ol li li, ul li li {
font-size: 1em; }
dd {
margin: 0 0 8px;
padding-left: 16px; }
button, input, select, textarea {
border: 0;
font-family: inherit;
font-size: 100%;
line-height: normal;
margin: 0;
text-transform: none; }
button, html input[type='button'], input[type='reset'], input[type='submit'] {
cursor: pointer;
-webkit-appearance: button; }
input[type='search'] {
-webkit-appearance: textfield; }
input[disabled] {
background: #eeeeee;
cursor: not-allowed; }
input[readonly] {
background: #fafafa; }
input[type='search']::-webkit-search-decoration {
-webkit-appearance: none; }
buton::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0; }
textarea {
overflow: auto;
vertical-align: top; }
table {
border-collapse: collapse;
border-spacing: 0; }
.table-Base, .table-Border, .table-Stripe {
background: #fafafa;
font-size: 1em;
width: 100%; }
.table-Base th, .table-Border th, .table-Stripe th,
.table-Base td,
.table-Border td,
.table-Stripe td {
padding: 4px;
text-align: left; }
.table-Header {
background: #eee; }
.table-Footer {
background: #e3e3e3; }
.table-Border {
border-bottom: 1px solid #cccccc;
border-right: 1px solid #cccccc; }
.table-Border tr {
border-top: 1px solid #cccccc; }
.table-Border th, .table-Border td {
border-left: 1px solid #cccccc; }
.table-Stripe tr:nth-child(2n) {
background: #eeeeee; }
.row, .c-Row {
margin-left: -20px;
margin-bottom: 20px; }
.col {
float: left;
margin-bottom: 0 !important;
padding-left: 20px;
position: relative;
width: 100%; }
.c-Row {
font-size: 0;
text-align: center; }
.c-Row .col {
display: inline-block;
float: none;
font-size: 16px;
text-align: left; }
.col-90 {
width: 90%; }
.col-80 {
width: 80%; }
.col-75 {
width: 75%; }
.col-66 {
width: 66.6666%; }
.col-60 {
width: 60%; }
.col-50 {
width: 50%; }
.col-40 {
width: 40%; }
.col-33 {
width: 33.3333%; }
.col-25, .website-Gallery li {
width: 25%; }
.col-20 {
width: 20%; }
.col-10 {
width: 10%; }
.rfl {
padding-left: 300px; }
.rfl .f-Col {
float: left;
margin-left: -280px;
width: 280px; }
.rfr {
padding-right: 300px; }
.rfr .f-Col {
float: right;
margin-right: -300px;
width: 280px; }
.block {
background: #ccc;
color: #333;
padding: 4px; }
.block > :last-child {
margin-bottom: 0; }
nav ul,
nav ol {
list-style: none;
margin: 0;
padding: 0; }
nav li {
margin: 0; }
nav a {
display: inline-block;
padding: 4px 8px;
text-decoration: underline; }
nav a:hover {
text-decoration: none; }
.grouping {
padding: 4px 0; }
.fs-Legend {
border: 1px solid #cccccc;
margin-bottom: 8px;
padding: 8px 12px; }
legend, .legend {
font-size: 1.25em;
margin-left: -4px;
padding: 0 4px; }
/* Text Input Areas & Labels */
.text-Label, .option-Container {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
cursor: pointer;
display: block;
margin-bottom: 4px; }
.dis-Label {
cursor: not-allowed; }
.input-Area, .text-Area, .select-Container, .input-Number {
background: #fff;
border: 1px solid #cccccc;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
line-height: 1.25;
margin-bottom: 8px;
padding: 8px 4px;
width: 50%; }
.input-Area:focus, .text-Area:focus, .select-Container:focus, .input-Number:focus {
background: #f8f8f8;
border: 1px solid #50B6D5;
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25) inset;
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25) inset;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.25) inset; }
.text-Area {
display: block;
min-height: 150px;
resize: vertical;
width: 100%; }
/* Check/Radio Inputs & Labels */
.option-Container {
position: relative; }
.option-Container:hover .btn-Radio,
.option-Container:hover .btn-Check {
border-color: #333; }
.option-Label {
cursor: pointer;
display: block;
padding-left: 28px;
position: relative;
z-index: 2; }
.input-Hide {
border: 0 !important;
height: 1px !important;
left: -999999px !important;
overflow: hidden !important;
position: absolute !important;
width: 1px !important; }
.btn-Radio, .btn-Check {
background: #eeeeee;
border: 1px solid #ccc;
font-size: 14px;
font-weight: bold;
height: 19px;
left: 0;
padding: 2px;
position: absolute;
top: 0;
width: 19px; }
.btn-Radio:hover, .input-Radio.selected-Radio .btn-Radio, .btn-Check:hover, .input-Check.selected-Check .btn-Check {
background: #e93250; }
.btn-Radio {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
background-clip: padding-box; }
.input-Radio.selected-Radio .btn-Radio {
border-color: #333; }
.input-Check.selected-Check .btn-Check {
border-color: #333; }
.ifChecked {
visibility: hidden; }
.selected-Check .ifChecked {
visibility: visible; }
/* Drop Down Selection Inputs */
.select-Container {
background: url(../img/drop-Arrow.png) no-repeat 99% center white;
display: inline-block;
overflow: hidden; }
.input-Select {
background: none;
border: 0;
font-size: 1em;
padding-right: 16px;
width: 120%;
-webkit-appearance: textarea; }
.file-Input-Area {
position: relative; }
.file-Input-Area label {
cursor: default; }
.input-File {
cursor: pointer;
left: 0;
height: 100%;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 9; }
.input-File-Text {
cursor: pointer;
display: inline-block; }
/* Inputs not supported in all browsers */
.input-Color {
border: 1px solid #cccccc;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
margin-bottom: 8px;
padding: 0 4px;
height: 45px;
width: 50%; }
.input-Color:focus {
background: #f8f8f8;
border: 1px solid #50B6D5;
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25) inset;
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25) inset;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.25) inset; }
.input-Number {
font-size: 1em; }
.btn, .btn-Radio, .btn-Check, .btn-Small, .btn-Large, .btn-XLarge, .btn-Wide, .btn-Action, .btn-Action-2, .btn-Action-3, .btn-Neg,
.btn-Neg:hover, .btn-Disable, .btn-Square, .btn-Round {
background: #343434;
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
border-radius: 18px;
background-clip: padding-box;
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
color: #f8f8f8;
cursor: pointer;
display: inline-block;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 1em;
line-height: 1;
padding: 8px 20px;
text-align: center;
text-decoration: none !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
-moz-transition: all 0.25s ease-in-out 0s;
-ms-transition: all 0.25s ease-in-out 0s;
-o-transition: all 0.25s ease-in-out 0s;
-webkit-transition: all 0.25s ease-in-out 0s;
transition: all 0.25s ease-in-out 0s;
vertical-align: middle;
-webkit-appearance: none; }
.btn.btn-Pad, .btn-Pad.btn-Radio, .btn-Pad.btn-Check, .btn-Pad.btn-Small, .btn-Pad.btn-Large, .btn-Pad.btn-XLarge, .btn-Pad.btn-Wide, .btn-Pad.btn-Action, .btn-Pad.btn-Action-2, .btn-Pad.btn-Action-3, .btn-Pad.btn-Neg, .btn-Pad.btn-Disable, .btn-Pad.btn-Square, .btn-Pad.btn-Round {
padding: 8px 16px; }
.btn:hover, .btn:active, .btn-Radio:hover, .input-Radio.selected-Radio .btn-Radio, .btn-Check:hover, .input-Check.selected-Check .btn-Check, .btn-Small:hover, .btn-Large:hover, .btn-XLarge:hover, .btn-Wide:hover, .btn-Action:hover, .btn-Action-2:hover, .btn-Action-3:hover, .btn-Neg:hover, .btn-Disable:hover, .btn-Square:hover, .btn-Round:hover, .btn-Radio:active, .btn-Check:active, .btn-Small:active, .btn-Large:active, .btn-XLarge:active, .btn-Wide:active, .btn-Action:active, .btn-Action-2:active, .btn-Action-3:active, .btn-Neg:active, .btn-Disable:active, .btn-Square:active, .btn-Round:active {
background: #131313;
color: #f8f8f8; }
.btn:visited, .btn-Radio:visited, .btn-Check:visited, .btn-Small:visited, .btn-Large:visited, .btn-XLarge:visited, .btn-Wide:visited, .btn-Action:visited, .btn-Action-2:visited, .btn-Action-3:visited, .btn-Neg:visited, .btn-Disable:visited, .btn-Square:visited, .btn-Round:visited {
color: #f8f8f8; }
.btn-Small {
font-size: 0.875em;
padding: 4px 8px; }
.btn-Small.btn-Pad {
padding: 4px 12px; }
.btn-Large {
font-size: 2em;
padding: 12px; }
.btn-Large.btn-Pad {
padding: 12px 20px; }
.btn-XLarge {
font-size: 2.5em;
padding: 12px 16px; }
.btn-XLarge.btn-Pad {
padding: 16px 24px; }
.btn-Wide {
display: block; }
.btn-Action {
background: -webkit-linear-gradient(top, #e93250, #b11f36);
background: -moz-linear-gradient(top, #e93250, #b11f36);
background: -o-linear-gradient(top, #e93250, #b11f36);
background: linear-gradient(top, #e93250, #b11f36); }
.btn-Action:hover {
background: -webkit-linear-gradient(top, #d51c3a, #841526);
background: -moz-linear-gradient(top, #d51c3a, #841526);
background: -o-linear-gradient(top, #d51c3a, #841526);
background: linear-gradient(top, #d51c3a, #841526); }
.btn-Action-2 {
background: #daeea5; }
.btn-Action-2:hover {
background: #c0e265; }
.btn-Action-3 {
background: #f6f0e6; }
.btn-Action-3:hover {
background: #e2ceae; }
.btn-Neg,
.btn-Neg:hover {
background: #aaaaaa;
color: #f8f8f8; }
.btn-Disable, .btn-Disable:hover, .btn-Disable:visited {
background: #fafafa;
border: 1px solid #eee;
color: #343434;
cursor: default; }
.btn-Square {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
background-clip: padding-box; }
.btn-Round {
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
background-clip: padding-box; }
.nav ul,
.nav ol {
border: 1px solid #ccc;
padding: 4px; }
.nav li {
margin: 0; }
.nav a {
display: block;
padding: 4px 8px;
text-decoration: underline; }
.nav a:hover {
text-decoration: none; }
.h-Nav > li, .bread > li {
float: left; }
.c-Nav {
font-size: 0;
text-align: center; }
.c-Nav > li, .ah-Nav a {
display: inline-block;
font-size: 16px; }
.v-Nav {
/* really only needs styling applied to it, as vertical nav is default */ }
.ah-Nav {
font-size: 0; }
.av-Nav .drop-Start {
display: block; }
.drop-Start {
position: relative; }
.drop-Start:hover {
background: #eee; }
.drop-Start:hover .drop-Menu {
visibility: visible; }
.drop-Start a {
white-space: nowrap; }
.drop-Menu {
background: #eee;
border: 1px solid #ddd;
position: absolute;
visibility: hidden;
z-index: 5; }
.v-Nav .drop-Menu, .av-Nav .drop-Menu {
left: 100%;
top: 0; }
.h-Nav .drop-Menu, .bread .drop-Menu, .ah-Nav .drop-Menu {
left: 0;
top: 100%; }
.bread li:last-child:after {
content: none; }
.bread li:after {
content: ">";
display: inline-block; }
.bread a {
display: inline-block; }
.bread span {
display: inline-block;
padding: 4px 8px; }
.float-Left {
float: left; }
.float-Right {
float: right; }
.float-None {
float: none; }
.clear {
clear: both; }
.clearfix, .row, .c-Row, nav ul,
nav ol, .media, .media-Reverse, .media-No-Wrap-Reverse, .media-No-Wrap {
*zoom: 1; }
.clearfix:before, .row:before, .c-Row:before, nav ul:before,
nav ol:before, .media:before, .media-Reverse:before, .media-No-Wrap-Reverse:before, .media-No-Wrap:before, .clearfix:after, .row:after, .c-Row:after, nav ul:after,
nav ol:after, .media:after, .media-Reverse:after, .media-No-Wrap-Reverse:after, .media-No-Wrap:after {
content: "";
display: table; }
.clearfix:after, .row:after, .c-Row:after, nav ul:after,
nav ol:after, .media:after, .media-Reverse:after, .media-No-Wrap-Reverse:after, .media-No-Wrap:after {
clear: both; }
.overflow {
overflow: hidden; }
blockquote, h1, h2, h3, h4, h5, h6, li, p, small, code, kbd, pre, samp, dt, form, table {
margin-bottom: 12px; }
.d-Block, .show {
display: block; }
.d-None, .mobile-Show {
display: none; }
.hidden {
display: none !important;
visibility: hidden; }
.invis {
border: 0 !important;
height: 1px !important;
left: -999999px !important;
overflow: hidden !important;
position: absolute !important;
width: 1px !important; }
.pic, .pic-Rounded {
border: 1px solid white;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-clip: padding-box;
-moz-box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2);
box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2);
display: inline-block;
overflow: hidden;
width: 90px; }
.pic img, .pic-Rounded img {
display: block; }
.pic-Rounded {
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
background-clip: padding-box; }
/*
Code Example
--------------------------
*/
.media, .media-Reverse, .media-No-Wrap-Reverse, .media-No-Wrap {
margin-bottom: 16px;
position: relative;
z-index: 2; }
.media .media-Text > :last-child, .media-Reverse .media-Text > :last-child, .media-No-Wrap-Reverse .media-Text > :last-child, .media-No-Wrap .media-Text > :last-child {
margin-bottom: 0; }
.media .media-Object, .media-Reverse .media-Object, .media-No-Wrap-Reverse .media-Object, .media-No-Wrap .media-Object {
float: left;
margin: 0 16px 8px 0;
max-width: 30%; }
.media-Reverse .media-Object, .media-No-Wrap-Reverse .media-Object {
float: right;
margin: 0 0 8px 16px;
max-width: 30%; }
.media-No-Wrap {
padding-left: 100px; }
.media-No-Wrap .media-Text {
float: left;
width: 100%; }
.media-No-Wrap .media-Object {
margin-left: -100px;
margin-right: 0; }
.media-No-Wrap-Reverse {
padding-right: 100px; }
.media-No-Wrap-Reverse .media-Object {
margin-right: -100px;
margin-left: 0; }
/*
Code Example
--------------------------
Paragraph text to go along with media element.