html, body { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; background: #fff; }

body { *font-size: 1em; font-family: 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif; font-weight: 400; font-style: normal; font-size: 16px; line-height: 20px; position: relative; width: auto; padding: 0 10px 10px 10px; color: #111111; }

/* chrome webfont bug fix - temporary */
body { -webkit-animation-duration: 0.1s; -webkit-animation-name: fontfix; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -webkit-animation-delay: 0.2s; }

@-webkit-keyframes fontfix { from { opacity: 1; }
  to { opacity: 1; } }
h1, h2, h3, h4, h5, h6, .headline, h2.headline { font-family: 'Gotham A', 'Gotham B', Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; text-transform: uppercase; color: #111111; }

h2.headline { font-size: 20px; }

.light-bg { background: #ffffff; }

.mild-bg { background: #eeeeee; }

.dark-bg { background: #dddddd; }

.btn { text-transform: uppercase; color: #F40000; min-width: 110px; background: #f9f9f9; display: inline-block; text-align: center; border-bottom: 10px solid #bbb; padding: 2px 15px 0 15px; font-size: 12px; line-height: 17px; margin-bottom: 10px; font-family: 'Gotham SSm A','Gotham SSm B',Helvetica,Arial,sans-serif; font-weight: bold; border: none; border-bottom: 10px solid #bbb; }
.btn:hover { background: #fff; border-bottom: 10px solid #F40000; color: #F40000; border: none; border-bottom: 10px solid #f40000; }

p { font-size: 12px; line-height: 17px; }

header.corp, header.corp .logoMobileWrap a img.logo { background: #000; }

header, header.header-small { border-top: 10px solid #fff; }

a { font-family: 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif; font-weight: 400; font-style: normal; color: #F40000; opacity: 1; }
a:hover { color: #111111; }

.section-guide-intro { text-align: center; padding: 30px 0 20px 0; background: #eee; margin-top: 10px; }

.guide-headline { color: #F40000; text-transform: lowercase; line-height: 1em; }

.guide-subtitle { color: #111; line-height: 1.1em; }

.guide-note { font-size: 12px; padding-top: 1em; }

.section-guide { padding: 30px 0; }

.section-guide-trim { padding: 30px 0 0 0; }

.guide-item-x5 { float: left; width: 20%; text-align: center; }

.ie7 .guide-item-x5, .ie8 .guide-item-x5 { width: 19.5%; }

.guide-item-x3-wrap { width: 100%; float: left; height: auto; }

.guide-item-x3 { float: left; width: 33.333333333%; text-align: center; }

.ie7 .guide-item-x3, .ie8 .guide-item-x3 { width: 33%; }

.guide-item-narrow { margin: 0 auto; width: 80%; clear: both; text-align: center; }

.guide-item-300 { margin: 0 auto; width: 280px; text-align: center; }

.guide-dd-show { margin-top: 10px; }

.guide-color-swatch { width: 80%; padding-bottom: 80%; margin: 0 auto; }

.guide-demo { text-align: center; width: 100%; max-width: 728px; margin: 0 auto; }

.left * { text-align: left; }

.guide-item-code { margin: 0 auto; clear: both; text-align: center; }

code, pre { padding: 0 3px 2px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: #111; }

code { white-space: nowrap; width: 280px; display: block; margin: 0 auto; padding: 20px 0 0 0; text-align: left; }

pre { display: block; padding: 9.5px; margin: 10px 0 5px 0; font-size: 13px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre; white-space: pre-wrap; background-color: #f5f5f5; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.15); }

pre code { padding: 0; color: inherit; white-space: pre; white-space: pre-wrap; background-color: transparent; border: 0; }

.pre-scrollable { max-height: 100px; overflow-y: scroll; }

table.datatable { margin: 0 auto 10px auto; }

/* 0px 
===========================  */
@media only screen and (min-width: 0px) { .guide-headline { font-size: 2.8em; margin-top: 0.5em; }
  .guide-subtitle { font-size: 18px; width: 80%; margin: 0.5em auto 1em auto; }
  .guide-item-x5, .guide-item-x3 { width: 100%; }
  .guide-item-narrow { width: 90%; } }
/* ================================ */
/* Mobile Landscape 480px 
===========================  */
@media only screen and (min-width: 480px) { .guide-headline { font-size: 4em; margin-top: 0.5em; }
  .guide-subtitle { font-size: 22px; width: 60%; margin: 0.5em auto 1em auto; }
  .guide-item-x5 { width: 20%; }
  .guide-item-x3 { float: left; width: 33.333333333%; text-align: center; }
  .guide-item h4 { font-size: 0.8em; } }
/* ================================ */
/* Tablet Portrait 480px 
===========================  */
@media only screen and (min-width: 768px) { .guide-item-x5 h4 { font-size: 15px; } }
/* ================================ */