/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #000;
}

body {
		font-family: "Open Sans", Helvetica, Arial, sans-serif;
		/* weights: normal 400, bold 700 */
    font-size: 12px;
    line-height: 16px;
		color: #000;
		background: #f2f2f2;
		text-align: center;
}

a { color: #2599cc; text-decoration: none; outline: none; border: none;  }
a:hover { color: #fb7000; text-decoration: none; }

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #000;
    margin: 14px 0 26px 0;
    padding: 0;
}
hr.dashed { border-top: 1px dashed #c8c8c8; }

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

/*img {
    vertical-align: middle;
}*/

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

#container { width: 1024px; margin: 0 auto 0 auto; text-align: left; background: #fff url(/images/uploads/bkgd_home.jpg) 0 0 no-repeat; }
.about #container { background: #fff url(/images/uploads/bkgd_about.jpg) 0 0 no-repeat; }
.work #container, .case-study #container { background: #fff url(/images/uploads/bkgd_work.jpg) 0 0 no-repeat; }
.clients #container { background: #fff url(/images/uploads/bkgd_clients.jpg) 0 0 no-repeat; }
.notes #container { background: #fff url(/images/uploads/bkgd_notes.jpg) 0 0 repeat; }
.contact #container { background: #fff url(/images/uploads/bkgd_contact.gif) 0 0 repeat; }
footer { width: 935px; padding: 35px 15px 30px 74px; margin: 0 0 0 0; height: 30px; }
#sectnav { width: 131px; float: left; display: inline; padding: 56px 0 0 0; margin: 0 0 0 0; position: relative; font-family: "Oswald"; }
#content { float: left; display: inline; position: relative; width: 530px; min-height:475px; padding: 56px 0 0 0; margin: 0 0 0 0; }
header { width: 960px; height: 118px; position: relative; background: #fff; }
#logo { position: absolute; top: 58px; left: 74px; }
#subtitle { position: absolute; top: 86px; left: 74px; width: 210px; height: 21px; background: url(/images/interface/sprite_subheads.gif) 0 0 no-repeat; }
.home #subtitle { display: none; }
.about #subtitle { }
.work #subtitle { background-position: 0 -21px; }
.case-study #subtitle { background-position: 0 -42px; }
.clients #subtitle { background-position: 0 -63px; }
.contact #subtitle { background-position: 0 -84px; }
.notes #subtitle { background-position: 0 -105; }

.about #sectnav, .clients #sectnav, .contact #sectnav { display: none; }

.work #content { float: none; display: block; width: 851px; border-top: 1px solid #000; margin: 100px 0 0 74px; padding: 16px 0 100px 35px; }

.contact #content { float: none; display: block; width: 1024px; height: 560px; }

.home #content { float: none; display: block; height: 600px; }
.about #content { float: none; display: block; width:885px; min-height:600px; }

#share-tools { position: absolute; top: 450px; right: 53px; }
.note-share { float: right; }


#sectnav ul { list-style: none; margin: 0; padding: 0; }
#sectnav li { list-style: none; margin: 0 0 5px 0; padding: 0; font-size: 10px; line-height: 14px; text-transform: uppercase; letter-spacing: .5px; }
#sectnav li a { color: #000; }
#sectnav li a:hover, #sectnav li.here a { color: #2599cc; }

#home-hello { position: absolute; top: 101px; left: 53px; }
#home-text { position: absolute; top: 520px; left: 0; width: 1000px; text-align: center; }

#nav { position: absolute; right: 135px; top: 72px; height: 28px; width: 280px; text-align: right; }
#nav li { margin: 0 0 0 21px; padding: 0; list-style: none; display: inline; font-size: 12px; line-height:12px; cursor: pointer; }
#nav li a { color: #666; display: inline-block; text-indent: 9999px; height: 28px; overflow:hidden; cursor: pointer; }
#nav li ul { display: none; }
#nav li:last-child { margin-right: 0; }
#nav-about { width: 32px; }
#nav-about a { width: 32px; background: url(/images/interface/nav_about.gif) 0 0 no-repeat; }
#nav-work { width: 30px; }
#nav-work a { width: 30px; background: url(/images/interface/nav_work.gif) 0 0 no-repeat; }
#nav-clients { width: 39px; }
#nav-clients a { width: 39px; background: url(/images/interface/nav_clients.gif) 0 0 no-repeat; }
#nav-notes { width: 32px; }
#nav-notes a { width: 32px; background: url(/images/interface/nav_notes.gif) 0 0 no-repeat; }
#nav-contact {width: 43px; }
#nav-contact a {  width: 43px; background: url(/images/interface/nav_contact.gif) 0 0 no-repeat; }
#nav li.here a, #nav li.parent-here a { background-position: 0 -28px; }
#nav li a:hover { background-position: 0 -28px; }
#social { position: absolute; top: 65px; right: 30px; }
#social img { margin: 0 0 0 9px; }

ul#list-archive { margin: 0 0 24px 0; list-style: none; padding: 0; }
ul#list-archive li { margin: 0 0 8px 0; padding: 0; list-style: none; font-size: 12px; line-height:12px; }
ul#list-archive li a { color: #666; }
ul#list-archive li ul { margin: 10px 0 0 11px; }

.black { color:#000000 !important;}
.blue { color:#5eafbe !important;}
.green { color:#d5df25 !important;}
.gray { color: #58595b !important; }
.lt-gray { color: #c8c8c8 !important; }

img.float-left { float: left; margin: 1px 14px 6px 0; }

a.pdf { padding: 0 0 0 24px; background: url(/images/interface/icon_pdf_16x16.png) 0 0 no-repeat; display: inline-block; margin: 0 0 4px 0; }

h1 { color: #58595b; font-size: 18px; line-height: 18px; margin: 0 0 14px 0; padding: 0; font-family: "Oswald"; font-weight: normal; letter-spacing: 1.5px; }
h2 	{ margin: 0; padding: 0; }
h3 { margin: 0 0 4px 0; padding: 0; }

#content p { margin: 0 0 16px 0; }
.case-study #content p { color: #58595b; }
#content ul { margin: 0 0 16px 0; }
#content li { padding: 0 0 0 12px; background: url(/images/interface/bul_text.gif) 0 7px no-repeat; list-style: none; }

#content .blog-text h2 { margin: 0 0 3px 0; }
#content p.entry-date { font-size: 10px; }
#content h1.post-title { margin-bottom: 6px; }

#about-content { position: absolute; top: 100px; left: 74px; width: 885px; height: 380px; text-indent: -9999px; overflow:hidden; background: url(/images/uploads/txt_about.png) 0 0 no-repeat; }

.border-top { border-top: 1px solid #000; }
.clients-left { width: 240px; margin: 0; float:left; display:inline; }
.clients-right { width: 665px; margin: 0; float:left; display:inline; position: relative; }
.clients #content { margin: 100px 0 0 74px; padding: 0; width: 905px; }
.three-col { width: 208px; float: left; display: inline; }
.three-col.indent { width: 235px; margin-top: 0; }
#content .three-col.indent p { margin-left: 27px; }
.clients-top .three-col:first-child { margin-left:27px; margin-top: 0; }
.clients .clients-left p { font-size: 10px; line-height: 18px; font-family: "Oswald"; letter-spacing: .5px; }
.clients .clients-left p a { color: #000; }
.clients .clients-left p a:hover { color: #2599cc; }
.clients .clients-right p { font-size: 15px; line-height: 21px; font-family: "Oswald"; }
#making-sense { position: absolute; top: 65px; left: 0; }
#looking-good { position: absolute; top: 254px; left: 492px; }
#doing-good { position: absolute; top: 461px; left: 254px; }

.grid-col { width: 200px; float: left; display: inline; }
.grid-item { width: 189px; margin: 0 0 8px 0; padding: 0; line-height: 0; cursor: pointer; position: relative; }
.grid-item .grid-text { background: transparent; position: absolute; top: 0; left: 0; width: 189px; height: 100%;  -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
.grid-item.hovered .grid-text { background: #5eafbe; }
.grid-item.green.hovered .grid-text { background: #d5df25; }
.grid-item .grid-text h2 { display: none; position: absolute; left: 13px; bottom: 11px; color:#fff; width: auto; height: auto; font-size: 16px; line-height: 16px; font-weight: normal; font-family: "Oswald";}
.grid-item .grid-text h2 a { color: #fff; }
.grid-item.hovered .grid-text h2 { display: block; }
.spacer-short { width: 190px; height: 128px; margin: 0 0 8px 0; padding: 0; border: none; }
.spacer-tall { width: 190px; height: 264px; margin: 0 0 8px 0; padding: 0; border: none; }

.case-study #main, .notes #main { width: 885px; margin: 100px 0 0 74px; padding: 23px 0 0 0; border-top: 1px solid #000; }
.case-study #main #content, .notes #main #content { margin: 0; padding: 0 0 0 34px; width: 688px; }
.case-study #main #sectnav, .notes #main #sectnav { margin: 0; padding: 0; }
.slideshow { width: 635px; height: 420px; overflow: hidden; border: none; margin: 0 0 10px 0; padding: 0; background:transparent; text-align: center; }
.slideshow div { width: 635px; }
.slideshow img { display: block; margin: 0 auto 0 auto; }
.case-study #content p { font-size: 14px; line-height: 24px; width: 637px; }
.slideshow .video-container { height: 420px; background: transparent; }

.cycle-prev, .cycle-next { display: block; width: 22px; height: 34px; position: absolute; top: 190px; }
.cycle-prev { background: url(/images/interface/cycle_prev.png) 0 0 no-repeat; left: 0; }
.cycle-next { background: url(/images/interface/cycle_next.png) 0 0 no-repeat; left: 685px; }
.cycle-pager {/* position: absolute; top: 425px; right: 53px;*/ text-align: right; margin: 0 50px 20px 0;}
.cycle-pager span { display: inline-block; width: 9px; height: 8px; margin: 0 0 0 7px; background: url(/images/interface/cyclenav_inactive.png) 0 0 no-repeat; text-indent: 9999px; overflow: hidden; cursor: pointer; }
.cycle-pager span.cycle-pager-active, .cycle-pager span:hover { background: url(/images/interface/cyclenav_active.png) 0 0 no-repeat; }

.contact #content { margin: 0; }
.contact .contact-img { }
.contact .contact-email { width: 743px; height: 72px; position: absolute; top: 440px; left: 116px; z-index:2; }
.contact .contact-email a { display: block; width: 743px; height: 72px; text-indent: -9999px; overflow: hidden; background: url(/images/uploads/txt_emailus.png) 0 0 no-repeat; }
.contact .contact-email a:hover {background-position: 0 -72px; }
.contact .contact-see { width: 318px; height: 56px; position: absolute; top: 230px; left: 345px; z-index:2; }
.contact .contact-see a { display: block; width: 318px; height: 56px; text-indent: -9999px; overflow: hidden; background: url(/images/uploads/txt_seeus.png) 0 0 no-repeat; }
.contact .contact-see a:hover {background-position: 0 -56px; }


.notes-item { width: 525px; background: #fff; border: 1px solid #c8c8c8; padding: 10px; margin: 0 0 10px 0; }
.notes-item img { margin: 0 0 10px 0; }
.notes-item h1, .notes-item h2 { color: #58595b; font-size: 18px; line-height: 18px; margin: 0 0 8px 0; padding: 0; text-transform: uppercase; }
.notes-item h1 a, .notes-item h2 a { color: #58595b; }
.notes-item h1 a:hover, .notes-item h2 a:hover { color: #5eafbe; }

#content p.read-more { margin-top: -12px; }


footer p { font-size: 10px; margin-bottom: 0; font-family: "Oswald"; font-size: 9.5px; text-transform: uppercase; color: #000; letter-spacing: .10em; }
footer a { color: #000; }
footer a:hover { color:#5eafbe; }
footer .footer-left{ float: left; display: inline; }
footer .footer-right { float: right; display: inline; margin-right: 30px; }
footer img { margin: 0 0 -11px 6px; }

#content .stButton { margin: 0; padding: 0; }
#content .stButton .chicklets { margin: 0; padding: 0 0 0 16px; }

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.clearing { clear: both; margin: 0; padding: 0; font-size: 1px; line-height: 1px; height: 1px; }


/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}