/**
 * Colors used for Outer Banks Design Works
 *
 * @colordef #BB1677 (Magenta)
 * @colordef #FA962F (Orange)
 * @colordef #F7F7D4 (Cream)
 * @colordef #B1DC13 (Green)
 * @colordef #4FACE3 (Blue)
 * @colordef #9579B9 (Purple)
 *
 * @colordef #F7BFE0 (lt. magenta)
 * @colordef #49092E (dk. magenta)
 *
 * @colordef #F7CBA3 (lt. orange)
 * @colordef #C77725 (dk. orange)
 * @colordef #2F1C09 (darkest orange)
 *
 * @colordef #244E66 (midnite blue)
 * @colordef #3D85B0 (dk. blue)
 * @colordef #E9F5FC (lt. blue)
 *
 * @colordef #E3E3C2 (med. cream)
 * @colordef #7A7A69 (dk. cream)
 * @colordef #3D3D35 (darkest cream)
 *
 * @colordef #D8F377 (pale green)
 * @colordef #657A0C (dk. green)
 * @colordef #2A3206 (darkest green)
 */
/* =====================
   reset styles
   ===================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-weight: inherit;
 font-style: inherit;
 font-size: 100%;
 font-family: inherit;
 vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
 outline: 0;
}
ol, ul {
 list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
 border-collapse: separate;
 border-spacing: 0;
}
caption, th, td {
 text-align: left;
 font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: "";
}
blockquote, q {
 quotes: "" "";
}

a img { border: none; }

/* =====================
   base styles
   ===================== */
body {
 background: #fff url('/img/main/body-tile-bg_inner.png') repeat-x 0 0;
 color: #3D3D35;
 line-height: 1.5em;
 margin-top: 0;
 font-family:  helvetica, arial, sans-serif;
 font-size: 75%;
 text-align: center;
}
body#start {
 background: #fff url('/img/main/body-tile-bg.png') repeat-x 0 0;
}
a, a:link { color: #3D85B0; }
a:visited { color: #777; }
a:focus { outline: 1px #BB1677 dotted; }
a:hover { color: #C77725; }
a:active { color: #B1DC13; }
/*external links*/
a[rel^="external"] {
  background: transparent url('/img/icons/10px/ico-external-link.gif') no-repeat 100% 50%;
  padding-right: 14px;
}
em { background: #D8F377; color: #2A3206; font-style: normal; }
ul, ol, dl { position: relative;  }
ul { 
 list-style-type: none; 
 margin-left: 0; 
 padding-left: 0; 
}
abbr, acronym { 
 background: transparent url('/img/accents/underline-dotted.gif') repeat-x 0 100%;
 border-style: none; 
 cursor: help;
}
abbr:hover, acronym:hover { 
 background: transparent url('/img/accents/underline-dotted_magenta.gif') repeat-x 0 100%; 
}

/* =====================
   typography
   ===================== */
h1,h2,h3,h4,h5,h6 { 
  color: #3D85B0; 
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
  font-weight: 200;
}
h2 { 
 font-size: 3em; 
 line-height: 1; 
 margin-bottom: 0.5em; 
}
h3 { 
 font-size: 2em; 
 margin-bottom: 0.75em; 
 }
h4 { 
 color: #C77725;
 font-size: 1.5em; 
 line-height: 1; 
 margin-bottom: 1em; 
}
h5 { 
 color: #3D3D35;
 font-size: 1.2em; 
 line-height: 1.25; 
 margin-bottom: 1.25em; 
}
h6 { 
 font-size: 1em; 
 font-weight: bold; 
 margin-bottom: 1.5em; 
}

p { 
 margin: 0 0 1.5em 0; 
 }
p.last { 
 margin-bottom: 0; 
}
p img { 
 float: left; 
 margin: 1.5em 12px 1.5em 0; 
 padding: 0; 
}
p img.top { 
 margin-top: 0; 
}
/*img { 
 margin: 0 0 1.5em 0; 
}*/

ul, ol { 
 margin: 0 1.5em 1.5em 1.5em; 
}
ol { list-style-type: decimal; }
ul {
 margin-left: 0;
}
ul li {
 background: transparent url('/img/icons/10px/ico-bullet-arrow-grey.gif') no-repeat 0 .3em;
 padding-left: 14px;
}
ul li ul {
 margin: 0 0 0 1.5em;
}
dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dd { margin-left: 1.5em;}

del { 
 color:#777; 
}

blockquote { 
 margin: 1.5em; 
 color: #777; 
 font-style: italic; 
}
strong { 
 font-weight: bold; 
}
em,dfn { 
 font-style: italic; 
 /*background: #ffc;*/
}
dfn { 
 font-weight: bold; 
}
pre,code { 
 margin: 1.5em 0; 
 white-space: pre; 
}
pre,code,tt { 
 font: 1em 'andale mono', 'monotype.com', 'lucida console', monospace; 
 line-height: 1.5; 
} 
tt { 
 display: block; 
 margin: 1.5em 0; 
 line-height: 1.5; 
}

table { 
 margin-bottom: 1.4em; 
}
th { 
 border-bottom: 2px solid #ccc; 
 font-weight: bold; 
}
td { 
 border-bottom: 1px solid #ddd; 
}
th,td  { 
 padding: 4px 10px 4px 0; 
}
tfoot  { 
 font-style: italic; 
}
caption { 
 background: #ffc; 
}

/* =====================
   custom classes/overrides
   ===================== */
.alt {
 background: none;
 color: #C77725;
 font-family: 'cochin', palatino, 'palatino linotype', georgia, 'times new roman', serif;
 font-style: oblique;
 text-transform: capitalize;
}
/*boxes and notice dialogs*/
.box {
 background: #F7F7D4;
 border: 1px #E3E3C2 solid;
 border-radius: 12px;
 	-moz-border-radius: 12px;
 	-webkit-border-radius: 12px;
 margin: 0 0 1.5em 0;
 padding: 1.5em;
}
.box-error {
 background: #F7BFE0 url('/img/icons/72px/ico-error.png') no-repeat 12px 50%;
 border: 1px #BB1677 solid;
 border-radius: 12px;
 	-moz-border-radius: 12px;
 	-webkit-border-radius: 12px;
 color: #49092E;
 margin: 0 0 1.5em 0;
 padding: 1.5em 1.5em 1.5em 96px;
}
.box-warn {
 background: #F7CBA3 url('/img/icons/72px/ico-warn.png') no-repeat 12px 50%;
 border: 1px #FA962F solid;
 border-radius: 12px;
 	-moz-border-radius: 12px;
 	-webkit-border-radius: 12px;
 color: #2F1C09;
 margin: 0 0 1.5em 0;
 padding: 1.5em 1.5em 1.5em 96px;
}
.box-share {
 background: #D8F377;
 border: 1px #B1DC13 solid;
 border-radius: 12px;
 	-moz-border-radius: 12px;
 	-webkit-border-radius: 12px;
 color: #2A3206;
 margin: 0 0 1.5em 0;
 padding: 1.5em;
}
.box-success {
 background: #D8F377 url('/img/icons/72px/ico-success.png') no-repeat 12px 50%;
 border: 1px #B1DC13 solid;
 border-radius: 12px;
 	-moz-border-radius: 12px;
 	-webkit-border-radius: 12px;
 color: #2A3206;
 margin: 0 0 1.5em 0;
 padding: 1.5em 1.5em 1.5em 96px;
}
.box p,
.box-error p,
.box-warn p,
.box-success p {
 margin-bottom: 0;
}
.callout {
 float: left;
 margin: 0;
 padding: 0;
 width: 285px;
}
.clear {
 clear: both;
}
.current_page_item a {
 color: #7A7A69;
 font-weight: bold;
 text-decoration: none;
}
.job-title {
 margin-top: -1em;
 margin-bottom: 1.5em;
}
.job-title em {
 background: none;
 color: #C77725;
 font-style: normal;
 font-weight: normal;
}
.large { 
 font-size: 1.5em;
 line-height: 1.2em; 
 margin-bottom: 1.2em;
}
.link-linkedin {
 background: transparent url('/img/icons/16px/ico-linkedin.gif') no-repeat 0 50%;
 padding: 0.75em 0 0.75em 21px;
}
.link-rails {
 background: transparent url('/img/icons/16px/ico-rails.gif') no-repeat 0 50%;
 padding: 0.75em 0 0.75em 21px;
}
.link-twitter {
 background: transparent url('/img/icons/16px/ico-twitter.gif') no-repeat 0 50%;
 padding: 0.75em 0 0.75em 21px;
}
.link-info-lg {
 background: transparent url('/img/icons/32px/ico-info.png') no-repeat 0 50%;
 font-size: 1.5em; 
 line-height: 1; 
 margin-bottom: 1em;
 padding-top: .75em;
 padding-bottom: .75em;
 padding-left: 38px;
}
.link-top-page {
 background: transparent url('/img/icons/10px/ico-top-page.gif') no-repeat 0 50%;
 color: #657A0C !important;
 padding-left: 12px;
}
.new-project {
 display: block;
 float: left;
 margin-right: 12px;
 height: 72px;
 position: relative;
 width: 96px;
}
.new-project span {
 background: transparent url('/img/accents/new-project-badge.png') no-repeat 0 0;
 height: 100%;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;
}
.no-float {
 float: none;
}
/*project styles*/
.project-details {
 clear: both;
 margin: 1.5em 0 0 0;
}
.project-details dt {
 float: left;
 margin-right: 5px;
}
.project-details dt.project-url {
 float: none;
}
.project-details dd {
 margin-left: 0;
}
.project-thumbnails {
 background: transparent;
 float: left;
 margin: 0 12px 1.5em 0;
 width: 204px;
}
.project-thumbnails p {
 margin: 0;
}
.project-thumbnails .project-thumb {
 display: block;
 float: left;
 margin-right: 12px;
}
/*.project-thumbnails .project-thumb:hover {
 outline-color: #C77725;
}*/
.project-thumbnails .project-thumb.last {
 margin-right: 0;
}
.project-thumbnails p img {
 margin: 0;
}
.quiet { color: #7A7A69; }
.separate {
 background: transparent url('/img/accents/horiz-line_solid.gif') repeat-x 0 100%;
 margin-bottom: 3em;
 padding-bottom: 3em;
}
ul.separate {
 margin-bottom: 1.5em;
 padding-bottom: 1.5em;
}
.share {
 display: inline;
}
.share:after {
 content: '.';
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}
.share li {
 background: none;
 float: left;
 margin: 0 12px 0 0;
 padding: 0;
}
.share li img {
 float: none;
 margin: -0.4em 0 0 0;
 padding: 0;
 vertical-align: top;
}
.sitemap-list {
 font-weight: 900;
}
small, 
#header h1, 
.small { 
 font-size: .8em; 
 margin-bottom: 1.875em; 
 line-height: 1.875em; 
}
.subtle {
 color: #F7CBA3;
}

.hide { display: none; }
.highlight { background:#ff0; }
.added { color:#060; }
.removed   { color:#900; }

.top { margin-top:0; padding-top:0; }
.bottom { margin-bottom:0; padding-bottom:0; }

#skip-nav {
 display: none;/*NEED TO FIX THIS!!!*/
}

/*vcard*/
.vcard {
 margin-bottom: 1.5em;
}
.vcard p {
 margin-bottom: 0;
}

/* =====================
   wrapper
   ===================== */
#wrapper {
 background: #fff url('/img/main/header-bg_inner.png') no-repeat 0 0;
 margin: 0 auto;
 padding: 0;
 position: relative;
 text-align: left;
 width: 960px;
}
body#start #wrapper {
 background: #fff url('/img/main/header-bg_home.png') no-repeat 0 0;
}

/* =====================
   header
   ===================== */
#header {
 /*background: #F7F7D4;*/
 padding: 0 27px;
 height: 7.5em;
 width: 916px;
}
#header img {
 display: none;
}
#header h1 {
 height: 72px;
 left: 27px;
 position: absolute;
 top: 18px;
 width: 214px;
}
#header h1 a {
 display: block;
 height: 72px;
 margin: 0;
 padding: 0;
 position: relative;
 width: 214px;
}
#header h1 a span {
 background: transparent url('/img/main/header-bg_inner.png') no-repeat -27px -18px;
 cursor: pointer;
 height: 100%;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;
}
body#start #header h1 a span {
 background: transparent url('/img/main/header-bg_home.png') no-repeat -27px -18px;
}

/* =====================
   nav
   ===================== */
#nav {
 float: right;
 height: 6em;
 margin: -6em 27px 0 0;
 /*left: 0;
 position: absolute;*/
 /*right: 27px;*/
 /*top: 18px;*/
 width: 744px;
 z-index: 2000;
}
#nav ul#main-menu {
 float: right;
 font-size: 1.5em;
 margin: 0;
 padding: 0;
 position: relative;
}
#nav ul#main-menu li {
 background: transparent url('/img/nav/nav-seplines.gif') no-repeat right 50%;
 float: left;
 margin: 0 0 0 12px;
 padding: 0 12px 0 0;
}
#nav ul#main-menu li#tab-how {
 background: none;
 padding-right: 0;
}
#nav ul#main-menu li a,
#nav ul#main-menu li a:link,
#nav ul#main-menu li a:visited {
 color: #3D85B0;
 text-decoration: none;
 text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.72);
}
#nav ul#main-menu li a:focus,
#nav ul#main-menu li a:active {
 color: #3D3D35;
}
#nav ul#main-menu li a:hover {
 background: transparent url('/img/nav/nav-bg-highlight.gif') no-repeat 50% 50%;
 color: #C77725;
 text-decoration: underline;
 text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.48);
}
body#start #nav ul#main-menu li#tab-home a,
body#who #nav ul#main-menu li#tab-who a,
body#what #nav ul#main-menu li#tab-what a,
body#how #nav ul#main-menu li#tab-how a {
 color: #7A7A69;
 text-decoration: none;
}

/* =====================
   article
   ===================== */
#article {
 background: transparent url('/img/main/article-bg_inner.png') no-repeat 0 73px;
 float: left;
 margin: 0 0 1.5em 0;
 padding: 0 27px;
 width: 568px;
}
body#start #article {
 background: transparent url('/img/main/article-bg_home.png') no-repeat 0 100%;
 padding: 0 27px 3em 27px;
 width: 916px;
}
#article div#big-note {
 float: left;
 height: 27em;
 position: relative;
 width: 432px;
}
#article div#big-note a {
 display: block;
 font-size: 1.5em;
 height: 119px;
 left: 12px;
 padding: 36px 0;
 position: absolute;
 text-align: center;
 top: 30px;
 width: 313px;
}
#article div#big-note a span {
 background: #B1DC13;
 border: 2px #fff solid;
 border-radius: 18px;
 	-moz-border-radius: 18px; /* Mozilla browsers */
    -webkit-border-radius: 18px; /* Safari/Webkit browsers */
 color: #244E66;
 padding: 0.833em;
}
#article div#big-note a:hover span {
 background: #244E66;
 color: #B1DC13;
}
#article h2#pg-heading {
 font-size: 4em;
 font-weight: 100;
 letter-spacing: -.0415em;
 line-height: .90;
 margin: 0.375em 0 0.5em 0;
 text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.72);
}
#article h2#pg-heading span {
 display: block;
}
#article p#intro-blurb {
 color: #7A7A69;
 font-size: 1.5em;
 font-weight: 300;
 line-height: 1.2em; 
 margin-bottom: 1.2em; 
}
/* callouts: home page */
body#start #article .callout h2 {
 letter-spacing: -.0415em;
 margin-bottom: .4em;
}
body#start #article .callout h2 a {
 color: #3D85B0;
 text-decoration: none;
}
body#start #article .callout h2 a:hover {
 color: #4FACE3;
 text-decoration: none;
}
body#start #article .callout h2 small {
 display: block;
 font-size: .45em;
 letter-spacing: 0;
 margin: -.36em 0 0 0;
 padding: 0;
}
body#start #article div#callout-web {
 background: transparent;
 clear: both;
 margin-right: 39px;
 padding-bottom: 1.5em;
}
body#start #article div#callout-print {
 background: transparent;
 margin-right: 39px;
 padding-bottom: 1.5em;
 width: 258px !important;
}
body#start #article div#callout-brand {
 background: transparent;
 padding-bottom: 1.5em;
}
body#start #article div#callout-web p.excerpt,
body#start #article div#callout-print p.excerpt,
body#start #article div#callout-brand p.excerpt {
 float: left;
 margin-right: 12px;
 margin-bottom: 1.5em;
 width: 177px;
}
body#start #article div#callout-print p.excerpt {
 width: 150px;
}
#article .callout-icon {
 display: block;
 float: left;
 height: 96px;
 margin-bottom: 1.5em;
 text-decoration: none;
 width: 96px;
}
body#what #article .callout-icon {
 margin-right: 12px;
}
#article #callout-icon-web {
 background: transparent url('/img/accents/icon-sprite_web.png') no-repeat 0 0;
}
#article #callout-icon-print {
 background: transparent url('/img/accents/icon-sprite_print.png') no-repeat 0 0;
}
#article #callout-icon-brand {
 background: transparent url('/img/accents/icon-sprite_brand.png') no-repeat 0 0;
}
#article #callout-icon-web:hover,
#article #callout-icon-print:hover,
#article #callout-icon-brand:hover {
 background-position: 0 -110px;
}
#article h3 a {
 text-decoration: none;
}
#article h3 a:hover {
 color: #4FACE3;
 text-decoration: none;
}
#article em.subtle {
 background: none;
 color: #7A7A69;
}
/*sub-menu styles*/
#article ul.sub-menu {
 height: 1.5em;
 list-style-type: none;
 margin: 0 0 3em 0;
 padding: 0;
}
#article .box ul.sub-menu {
 margin-bottom: 0;
}
#article ul.sub-menu li {
 background: transparent url('/img/nav/nav-seplines.gif') no-repeat right 50%;
 float: left;
 margin: 0 10px 0 0;
 padding: 0 10px 0 0;
}
#article ul.sub-menu li.last {
 background: none;
}

/* =====================
   ancillary
   ===================== */
#ancillary {
 float: left;
 padding: 7.5em 27px 3em 27px;
 width: 258px;
}
#ancillary div#recent-kudos {
 margin-bottom: 3em;
}
#ancillary div#recent-kudos blockquote {
 color: #3D3D35;
 font-style: normal;
 margin: 0;
}
#ancillary div#recent-kudos blockquote p {
 margin-bottom: 1.5em;
}
#ancillary div#recent-kudos blockquote p.kudos-client {
 color: #244E66;
 font-weight: bold;
 margin-bottom: 0;
}

/* =====================
   aside
   ===================== */
#aside {
 background: transparent url('/img/main/aside-bg_home.png') no-repeat 0 0;
 clear: both;
 height: 126px;
 margin-bottom: 1.5em;
 padding: 0 27px 1.5em 27px;
 width: 916px;
}
#aside h2#ad-mailworks,
#aside h2#ad-special {
 font-size: .8em; 
 margin-top: 18px;
 margin-bottom: 1.875em;
 line-height: 1.875em;
}
#aside h2#ad-mailworks {
 float: left;
 height: 90px;
 margin-right: 39px;
 width: 528px;
}
#aside h2#ad-special {
 float: left;
 height: 90px;
 width: 339px;
}
#aside h2#ad-mailworks a,
#aside h2#ad-special a {
 display: block;
 height: 90px;
 position: relative;
 width: 528px;
}
#aside h2#ad-special a {
 width: 339px;
}
#aside h2#ad-mailworks a span,
#aside h2#ad-special a span {
 background: transparent url('/img/main/aside-bg_home.png') no-repeat -27px -18px;
 height: 100%;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;
}
#aside h2#ad-special a span {
 background: transparent url('/img/main/aside-bg_home.png') no-repeat -594px -18px;
}

/* =====================
   footer
   ===================== */
#footer {
 background: transparent url('/img/main/footer-bg.png') no-repeat 0 0;
 clear: both;
 margin: 1.5em 0 0 0;
 padding: 0 27px;
 width: 916px;
}
#footer h2 { 
 font-size: 2em; 
 margin-bottom: 0.75em; 
}
#footer div#recent-work {
 background: transparent;
 clear: both;
 margin-right: 39px;
 padding-bottom: 1.5em;
}
#footer div#recent-work p,
#footer div#recent-work p img {
 margin-bottom: 3em;
}
#footer div#recent-work p.separate {
 background: none;
}
#footer div#recent-work a.company {
 display: block;
}
#footer div#recent-thoughts {
 background: transparent;
 margin-right: 39px;
 padding-bottom: 1.5em;
 width: 258px !important;
}
#footer div#recommended {
 background: transparent;
 padding-bottom: 1.5em;
}
#footer p#copyright {
 background: transparent url('/img/main/footer-banner-bg.png') no-repeat -27px 100%;
 clear: both;
 height: 36px;
 padding: 108px 0 0 0;
}