@import url(//fonts.googleapis.com/css?family=Roboto:400,500,400italic,500italic,700italic);
@font-face { font-family: "Veneer"; src: url("../fonts/veneer.eot"); src: url("../fonts/veneer.eot?#iefix") format("embedded-opentype"), url("../fonts/veneer.woff2") format("woff2"), url("../fonts/veneer.woff") format("woff"), url("../fonts/veneer.ttf") format("truetype"), url("../fonts/veneer.svg#veneerregular") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: "Veneer"; src: url("../fonts/veneeritalic.eot"); src: url("../fonts/veneeritalic.eot?#iefix") format("embedded-opentype"), url("../fonts/veneeritalic.woff2") format("woff2"), url("../fonts/veneeritalic.woff") format("woff"), url("../fonts/veneeritalic.ttf") format("truetype"), url("../fonts/veneeritalic.svg#veneeritalic") format("svg"); font-weight: normal; font-style: italic; }
@font-face { font-family: "VeneerTwo"; src: url("../fonts/veneertwo.eot"); src: url("../fonts/veneertwo.eot?#iefix") format("embedded-opentype"), url("../fonts/veneertwo.woff2") format("woff2"), url("../fonts/veneertwo.woff") format("woff"), url("../fonts/veneertwo.ttf") format("truetype"), url("../fonts/veneertwo.svg#veneer_tworegular") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: "VeneerTwo"; src: url("../fonts/veneertwoitalic.eot"); src: url("../fonts/veneertwoitalic.eot?#iefix") format("embedded-opentype"), url("../fonts/veneertwoitalic.woff2") format("woff2"), url("../fonts/veneertwoitalic.woff") format("woff"), url("../fonts/veneertwoitalic.ttf") format("truetype"), url("../fonts/veneertwoitalic.svg#veneer_twoitalic") format("svg"); font-weight: normal; font-style: italic; }
body { padding-top: 20px; }

.swatch { float: left; margin-right: 20px; margin-bottom: 20px; width: 70px; height: 70px; position: relative; border: 1px solid #eeeeee; }
.swatch:after { content: ''; position: absolute; bottom: -18px; left: 0; font-size: 11px; color: #777; }
.swatch--primary { background: #1b4fbc; }
.swatch--primary:after { content: "Primary"; }
.swatch--body-bg { background: #fff; }
.swatch--body-bg:after { content: "Body"; }
.swatch--text-color { background: #181818; }
.swatch--text-color:after { content: "Text"; }
.swatch--link-color { background: #1b4fbc; }
.swatch--link-color:after { content: "Link"; }
.swatch--link-color-hover { background: #1e3a76; }
.swatch--link-color-hover:after { content: "Link Hover"; }
.swatch--gray-darker { background: #222222; }
.swatch--gray-dark { background: #333333; }
.swatch--gray { background: #555555; }
.swatch--gray-light { background: #777777; }
.swatch--gray-lighter { background: #eeeeee; }

.link { color: #1b4fbc; margin-right: 15px; }

.link--hover { color: #1e3a76; }

.panel .page-header { margin-top: 5px; }
.panel .page-header h1 { margin-top: 5px; }

#buttons input, #buttons img { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; }

input[src] { outline: 3px solid yellow; }