/*
Theme Name: Blue Hive
Theme URI: http://thebluehive.com/
Description: Theme for the Blue Hive agency
Author: Jonathan Brain
Version: 1.0
License: Private
License URI: 
Tags: grey, blue, white, waterfall-layout, fixed-width, microformats, portfolio
*/

/* Reset CSS - thanks, Eric */
/* v1.0 | 20080212 */

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,
b, u, i, center,
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-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* my own reset */

input, textarea, button {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  }

/* end of reset */






/* Blue Hive */

body { background: #f3f4f6 url(images/body_bg.png) 50% 0 repeat-y; color: #1b2327; font-family: Arial, Helvetica, sans-serif; font-size: 0.75em; min-width: 1000px; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: 1.6em; }

p { line-height: 1.3em; padding: 0 0 18px 0; }
  
ul,
ol { padding: 0 0 18px 0; }
  
li,
dt,
dd,
label,
address { line-height: 1.6em; font-style: normal; }

a,
a:link,
a:visited,
a:active { color: #00a3dc; text-decoration: none; line-height: 1.6em; }
a:hover { color: #446172; }

.cleared { clear: both; }
.hidden { display: none; }
.invisible { visibility: hidden; }

input, 
textarea,
select { font-family: Arial, Helvetica, sans-serif; color: #333; }
input, textarea { border: 1px solid #dadfe1; }

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }

/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }
  
  
/* ====== main structures ====== */

/* home page */

#header-container { width: 100%; min-width: 1000px; height: 49px; background: #fff url(images/nav_rule.gif) 0 48px repeat-x; position: fixed; z-index: 100; }
#header-container #header { width: 900px; margin: 0 auto; height: 49px; position: relative; background: transparent url(images/rule.gif) 0 0 repeat-x; }

.section { clear: both; margin: 0 0 -48px 0; width: 100%; }
.section-inner { position: relative; top: 48px; padding: 0 0 48px 0; width: 100%; }
.section-content-container { position: relative; width: 100%; }
.section-content { margin: 0 auto; width: 900px; z-index: 50; }


/* work pages */

#project-header-container { width: 100%; min-width: 1000px; height: 160px; background: #fff url(images/nav_rule.gif) 0 48px repeat-x; position: fixed; z-index: 100; }
#project-header-container #header { width: 900px; margin: 0 auto; height: 160px; position: relative; background: transparent url(images/rule.gif) 0 0 repeat-x; }

#project-header-sub-container { width: 100%; min-width: 1000px; height: 81px; background: transparent url(images/nav_rule_shadow.png) 0 100% repeat-x; position: fixed; top: 160px; z-index: 100; }
#project-sub-header { width: 900px; margin: 0 auto; height: 81px; position: relative; }

.project-section { clear: both; margin: 0 0 -237px 0; width: 100%; }
.project-section-inner { position: relative; top: 237px; padding: 0 0 237px 0; width: 100%; }
.project-section-content-container { position: relative; width: 100%; }
.project-section-content { margin: 0 auto; width: 900px; z-index: 50; padding: 10px 0 10px 0; }


/* adapt main structures for touch screen devices */

.device-touch #header-container { position: relative; }

.device-touch .section { margin: 0 0 0 0; }
.device-touch .section-inner { top: -1px; padding: 0 0 0 0;}

.device-touch #project-header-container { position: relative; }
.device-touch #project-header-sub-container { position: relative; top: 0; }

.device-touch .project-section { margin: 0 0 0 0; }
.device-touch .project-section-inner { top: -4px; padding: 0 0 0 0; }


/* ====== header ====== */

#nav { position: absolute; top: 0; left: 0; margin: 5px 0 0 0; height: 43px; width: 900px; }
#nav li { display: block; float: left; padding: 17px 30px 0 31px; background: transparent url(images/nav_rule.gif) 0 0 repeat-y; height: 26px; }
#nav li:first-child { padding: 17px 30px 0 0; background: none; }
#nav a { display: block; float: left; font-size: 130%; color: #34434b; font-weight: bold; }
#nav a:hover,
#nav a.on { color: #66c8eb; }

#nav #nav-home { padding: 0; position: absolute; right: 0; top: 10px; background: none; }
#nav #nav-home a { background: transparent url(images/button_home.png) 100% -73px no-repeat; width: 24px; height: 27px; }
.device-hover #nav #nav-home a:hover { background: transparent url(images/button_home.png) 100% 0 no-repeat; width: auto; }
#nav #nav-home a span { display: none; font-weight: normal; color: #8fa0aa; /* color: #51c9ef; */ }
.device-hover #nav #nav-home a:hover span { display: block; padding: 7px 37px 0 0; }


/* ====== general ====== */

h2 { font-weight: bold; color: #446172; font-size: 200%; padding: 10px 0 10px 0; }


/* ====== mission ====== */

#mission .section-content-container { background: #fff; }
#mission h2 { display: none; }
#mission p { font-size: 200%; color: #8fa0aa; font-weight: bold; line-height: 1.1em; }
#mission .section-content { background: transparent url(images/rule.gif) 0 100% repeat-x; padding: 0 0 11px 0; position: relative; }

#logo { margin: 41px 0 16px 0; }


/* ====== work portfolio ====== */

#work .section-content-container { background: #1b2326 url(images/work_lower_bg.png) 50% 100% no-repeat;  }
#work h2 { color: #00a3dc; }
#work-portfolio { width: 915px; float: left; margin: 0 0 85px -15px; }
#work-portfolio li { display: block; float: left; margin: 0 0 15px 15px; }
#work-portfolio a { display: block; position: relative; overflow: hidden; line-height: 0; }
#work-portfolio a:hover .hexagon { background: transparent url(images/hexagon_small.png) 0 0 no-repeat; width: 35px; height: 40px; display: block; position: absolute; top: 20px; right: 20px; }
#work-portfolio div { position: absolute; bottom: 72px; left: 0; width: 94%; margin: 0 10px; }
#work-portfolio .work-title { font-size: 230%; background: #0194c8; color: #fff; padding: 0px 4px; font-weight: bold; line-height: 1.4em; }
#work-portfolio .work-subtitle { font-size: 170%; background: #171f22; color: #00a3dc; padding: 4px 4px; font-weight: bold; line-height: 1.4em; }


/* ====== about ====== */

#about .section-content-container { background: transparent url(images/about_bg.png) 50% 0 no-repeat; min-height: 606px; }
#about-movie { float: left; width: 590px; }
#about-copy { float: right; width: 290px; margin: 0 0 0 20px; background: transparent url(images/rule.gif) 0 0 repeat-x; padding: 28px 0 0 0; font-weight: bold; }
#about h3 { font-size: 210%; text-transform: uppercase; color: #66c8eb; font-weight: bold; line-height: 1.3em; margin-bottom: 0; }
#about p { font-size: 100%; padding: 20px 0 0 0; line-height: 1.6em; }

#about-lower { width: 900px; clear: both; padding: 0 0 57px 0; }
#about-lower-left { float: left; width: 290px; margin: 0 20px 0 0; padding: 33px 0 0 0; background: transparent url(images/rule.gif) 0 26px repeat-x; }
#about-lower-middle { float: left; width: 280px; margin: 0 0 0 0; padding: 33px 0 0 0;  }
#about-lower-right { float: right; width: 290px; margin: 0 0 0 0; padding: 33px 0 0 0; background: transparent url(images/rule.gif) 0 26px repeat-x; }

#about-lower p { font-size: 100%; padding: 20px 0 0 0; line-height: 1.6em; }

/* ====== people ====== */

#people .section-content-container { background: transparent url(images/people_bg.png) 50% 64px no-repeat; }
#people .section-content { position: relative; }
#people-list { width: 900px; float: left; margin: 17px 0 0 0; }
#people-list li { display: block; width: 900px; float: left; position: relative; margin: 0 0 18px 0; }
#people-list h3 { color: #66c8eb; font-size: 200%; font-weight: bold; margin: 0 0 -4px 0; }
#people-list .people-role { color: #66c8eb; font-size: 130%; font-weight: bold; padding: 0 0 9px 0; width: 290px; }
#people-list .people-left { float: left; width: 290px; }
#people-list .people-left p { line-height: 1.6em; }
#people-list .people-right { float: right; width: 290px; }
#people-list .people-right p { line-height: 1.6em; }
#people-list img { position: absolute; top: 24px; left: 273px; }
#people-rule { width: 900px; height: 5px; background: transparent url(images/rule.gif) 0 0 repeat-x; clear: both; margin: 0 0 36px 0; }
#people-overlay { display: none; }
#people .viewport { width: 900px; height: 400px; overflow: hidden; position: relative; }
#people .viewport ul { position: absolute; top: 0; left: 0; }
#people .viewport li { background: none; height: 363px; }
#people .viewport .people-left { /* height: 220px; */ overflow: hidden; }
#people .viewport .people-right { /* height: 220px; */ overflow: hidden; position: relative; }
#people .viewport .people-right div { position: absolute; top: 0; left: 0; }
#people .viewport #people-rule { position: absolute; top: 352px; left: 0; clear: none; margin: 0; }
#people .viewport #people-overlay { position: absolute; top: 181px; left: 376px; display: block; width: 105px; height: 121px; background: transparent url(images/people_overlay.png) 0 0 no-repeat; }
#people-show-next { position: absolute; top: 190px; right: -50px; background: transparent url(images/button_people_right.png) 0 0 no-repeat; width: 31px; height: 62px; }
#people-show-next:hover { background: transparent url(images/button_people_right.png) -35px 0 no-repeat; }
#people-show-next span { display: none; }
#people-show-prev { position: absolute; top: 190px; left: -50px; background: transparent url(images/button_people_left.png) -35px 0 no-repeat; width: 31px; height: 62px; }
#people-show-prev:hover { background: transparent url(images/button_people_left.png) 0 0 no-repeat; }
#people-show-prev span { display: none; }
#people .people-more { position: absolute; left: 609px; bottom: 53px; }
#people .people-more span { font-weight: bold; }
#people .people-more-up { display: inline-block; width: 11px; height: 6px; background: transparent url(images/button_more_up.png) 0 -1px no-repeat; margin: 0 0 0 10px; }
#people .people-more-up:hover { background: transparent url(images/button_more_up.png) 0 -8px no-repeat; }
#people .people-more-down { display: inline-block; width: 11px; height: 6px; background: transparent url(images/button_more_down.png) 0 -1px no-repeat; margin: 0 0 0 10px; }
#people .people-more-down:hover { background: transparent url(images/button_more_down.png) 0 -8px no-repeat; }


/* ====== follow ====== */

#follow h2 { padding: 10px 0 20px 0; }
#follow-buttons { float: left; display: display; margin: 0 0 51px 0; }
#follow-buttons li { width: 200px; margin: 0 0 0 33px; display: block; position: relative; float: left; }
#follow-buttons li:first-child { margin: 0 0 0 0; }
#follow-buttons p { width: 100%; margin: 0 0 43px 0; font-size: 110%; line-height: 1.5em; }
#follow-buttons .follow-button { display: block; position: absolute; bottom: 0; left: 0; background: #fff url(images/button_follow_left.png) 0 0 no-repeat; font-size: 140%; color: #34434a; font-weight: bold; }
#follow-buttons .follow-button span { display: block; background: transparent url(images/button_follow_right.png) 100% 0 no-repeat; padding: 5px 20px 4px 20px; }
#follow-buttons .follow-button:hover { background: #34434a url(images/button_follow_left_on.png) 0 0 no-repeat; color: #fff; }
#follow-buttons .follow-button:hover span { background: transparent url(images/button_follow_right_on.png) 100% 0 no-repeat; }
#follow-buttons h3 { width: 200px; height: 45px; }
#follow-buttons h3 span { display: none; }
#follow-buttons #icon-blog { background: transparent url(images/icon_blog.png) 0 0 no-repeat; font-size: 130%; font-weight: bold; padding: 2px 0 0 40px; height: 43px; }
#follow-buttons #icon-twitter { background: transparent url(images/icon_twitter.png) 0 0 no-repeat; }
#follow-buttons #icon-youtube { background: transparent url(images/icon_youtube.png) 0 0 no-repeat; }
#follow-buttons #icon-flickr { background: transparent url(images/icon_flickr.png) 0 0 no-repeat; }
#follow-buttons #follow-blog h4 { font-weight: bold; } 


/* ====== contact ====== */

#contact .section-inner { padding: 0; }
#contact .project-section-inner { padding: 0; }
#contact .section-content-container { background: #fff url(images/footer_bg.png) 50% 100% no-repeat; }
#contact .project-section-content-container { background: #fff url(images/footer_bg.png) 50% 100% no-repeat; }
#contact h2 { background: #fff url(images/rule.gif) 0 100% repeat-x; padding: 20px 0 15px 0; margin: 0 0 34px 0; width: 100%; }
#contact #contact-address { width: 200px; float: left; color: #777c82; position: relative; }
#contact #contact-email { width: 700px; float: left; }
#contact #contact-email li { width: 200px; margin: 0 0 18px 33px; float: left; display: block; }
#contact #contact-email li a { font-size: 110%; }
#contact h3 { color: #34434b; font-size: 140%; font-weight: bold; padding: 0 0 4px 0; }
#contact p { font-size: 110%; line-height: 1.5em; }
#contact #copyright { margin: 0 auto; width: 900px; z-index: 50; clear: both; padding: 27px 0 0 0; }
#contact #copyright p { font-size: 90%; color: #446172; padding: 0 0 10px 0; margin: 47px 0 0 0; }
#contact #copyright span { color: #a1b0b8; padding: 0 4px; }
#contact #button-to-top { display: block; background: transparent url(images/button_to_top.png) 0 0 no-repeat; width: 61px; height: 32px; margin: 0 0 0 21px; }
#contact #button-to-top:hover { background: transparent url(images/button_to_top.png) 0 -33px no-repeat; }
#contact #button-to-top span { display: none; }
#contact #map-pointer { position: absolute; top: 30px; right: 40px; width: 27px; height: 46px; background: transparent url(images/map_pointer.png) 0 0 no-repeat; }
#contact #map-pointer:hover { background: transparent url(images/map_pointer.png) -28px 0 no-repeat; }
#contact #map-pointer span { display: none; }


/* ====== project page ====== */

#project-title a { position: absolute; top: 82px; left: 0; }
#project-title a .work-title { font-weight: bold; color: #61c3e6; font-size: 250%; text-transform: uppercase; line-height: 1.2em; }
#project-title a .work-subtitle { font-weight: bold; font-size: 200%; line-height: 1.0em; color: #8fa0aa; }
#project-title a:hover .work-title { color: #61c3e6; }
#project-title a:hover .work-subtitle { color: #8fa0aa; }

#page-nav { position: absolute; bottom: 17px; right: 0; }
#page-nav a { display: block; font-size: 130%; color: #1b2327; font-weight: bold; padding: 0 12px 0 0; line-height: 1.3em; text-align: right; }
#page-nav #project-next { background: #fff url(images/button_project_next.png) 100% 5px no-repeat; }
#page-nav #project-next:hover { background: #fff url(images/button_project_next.png) 100% -24px no-repeat; }
#page-nav #project-prev { background: #fff url(images/button_project_prev.png) 100% 5px no-repeat; }
#page-nav #project-prev:hover { background: #fff url(images/button_project_prev.png) 100% -24px no-repeat; }
#page-nav a:hover { color: #00a3dc; }
#page-nav a .hover-on { display: none; }
#page-nav a .hover-off { display: block; }
#page-nav a .touch-only { display: none; }
#page-nav a:hover .hover-on { display: block; }
#page-nav a:hover .hover-off { display: none; }

.device-touch #page-nav a span { display: inline; color: #1b2327; }
.device-touch #page-nav a:hover span { display: inline; }
.device-touch #page-nav a .work-title { color: #00a3dc; }
.device-touch #page-nav a:hover span { display: inline; }

#sub-nav { position: absolute; top: 45px; left: 0; }
#sub-nav li { display: block; float: left; padding: 0 33px 0 33px; }
#sub-nav li:first-child { padding: 0 33px 0 0; }
#sub-nav a { font-size: 120%; font-weight: bold; color: #34434b; }
#sub-nav a:hover,
#sub-nav a.on { color: #66c8eb; }

#sub-nav-pointer { width: 23px; height: 15px; background: transparent url(images/sub_nav_pointer.png) 0 0 no-repeat; display: none; position: absolute; top: 77px; }

#sm-buttons { position: absolute; right: 0; top: 0; height: 25px; }
#sm-buttons a { display: block; height: 25px; float: right; margin: 0 0 0 10px; }
#sm-buttons a span { display: block; background: #f3f4f6 url(images/button_sm_right.png) 100% 0 no-repeat; color: #1b2327; padding: 3px 13px 0 0; height: 22px; font-size: 90%; font-weight: bold; cursor: pointer; }
#sm-buttons #sm-twitter { background: transparent url(images/button_twitter.png) 0 0 no-repeat; padding: 0 0 0 29px; }
#sm-buttons #sm-facebook { background: transparent url(images/button_facebook.png) 0 0 no-repeat; padding: 0 0 0 23px; }
#sm-buttons a:hover span { background: #8fa0aa url(images/button_sm_right.png) 100% -35px no-repeat; color: #fff; }
#sm-buttons #sm-twitter:hover { background: transparent url(images/button_twitter.png) 0 -35px no-repeat; }
#sm-buttons #sm-facebook:hover { background: transparent url(images/button_facebook.png) 0 -35px no-repeat; }

.project-copy { clear: both; width: 900px; position: relative; z-index: 1; }
.project-copy p { color: #34434b; font-size: 130%; font-weight: bold; line-height: 1.4em; position: relative; padding: 0 0 30px 0; }
.project-item { clear: both; width: 900px; position: relative; z-index: 1; margin: 10px 0 20px 0; background: #fff url(images/slideshow_bg.gif) 50% 50% no-repeat; }

.banner-list { clear: both; width: 900px; position: relative; z-index: 1; }
.banner-list ul { padding: 0; }
.banner-list li { padding: 18px 0 0 0; }
.banner-list li:first-child { padding: 0; }


/* ====== project introduction ====== */

#subsection_0 .project-section-content-container { background: transparent url(images/project_overview_bg.png) 50% -100px no-repeat; }
#subsection_0 .project-section-content { padding: 15px 0 5px 0; min-height: 168px; }
#subsection_0 .project-section-content p { color: #34434b; font-size: 130%; font-weight: bold; line-height: 1.4em; width: 100%; }


/* ====== 404 ====== */

#page-basic .section-content-container { background: transparent url(images/about_bg.png) 50% 0 no-repeat; min-height: 300px; }
#page-basic p { font-size: 130%; padding: 19px 0 0 0; }


/* ====== slideshow ====== */

.slideshow { width: 100%; overflow: hidden; position: relative; background: #fff url(images/slideshow_bg.gif) 50% 50% no-repeat; } 
.slideshow ul { float: left; width: 100%; position: relative; } 
.slideshow li { display: block; float: left; position: relative; margin: 0 0 18px 0; }
.slideshow li img { display: block; }
.slideshow .slideshow-viewport ul { position: absolute; top: 0; left: 0; }
.slideshow .slideshow-console { position: absolute; top: 90%; left: 0; width: 100%; text-align: center; }
.slideshow .slideshow-console a { display: inline-block; width: 14px; height: 16px; background: transparent url(images/slideshow_console.png) 0 0 no-repeat; margin: 4px; text-align: center; }
.slideshow .slideshow-console .on { background: transparent url(images/slideshow_console.png) -15px 0 no-repeat; }

.device-hover .slideshow .slideshow-console a:hover { background: transparent url(images/slideshow_console.png) -15px 0 no-repeat; }