/**************************************************

HEADERFOOTER.COM
General Screen Styles

Site Design & Concept by Evan Sharp
http://evansharp.com/

**************************************************/


/* GLOBAL STYLES
---------------------------------------------- */
* {margin: 0;}
body {font-family: "helvetica neue", arial, sans-serif; font-size: 10px; color: #444750; border-top: 7px solid #000;}
h1 {margin: 0 0 0 145px; letter-spacing: -3.5px; font-size: 72px; color: #e8e8e8;}
ul, ol, dl {margin: 0; padding: 0; list-style: none;}
p {line-height: 1.35em; font-size: 1.3em;}
a {color: #3c6; text-decoration: none;}
a:hover {color: #000;}
img {border: none;}

.container {position: relative; width: 980px; margin: 0 auto;}
.container .logo {position: absolute; top: 0; left: 0; width: 48px; padding: 18px 14px 10px; background-color: #fff; border: solid #f0f0f0; border-width: 0 1px 1px;}
.container .logo a {display: block;}
.container .logo a img {width: 100%;}

.noMarginRight {margin-right: 0 !important;}


/* CONTACT WIDGET
---------------------------------------------- */
.contact {position: absolute; z-index: 3; top: 0; left: 0; width: 100%; color: #f5f5f5; border-bottom: 7px solid #444750;}
.contact-content {display: none; height: 464px;}
.contact-background {position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.96; background-color: #fff;}
.contact-background .container {display: none;}
.contact iframe {margin-top: 20px;}
.contact-link {position: absolute; z-index: 3; top: 7px; right: -94px; display: block; padding: 3px 7px 5px; font-size: 12px; font-weight: bold; color: #fff; text-transform: uppercase; background-color: #444750;}
.contact-link:hover {color: #fff; text-decoration: underline;}


/* BUTTONS
---------------------------------------------- */
h1 #infrequentUpdates {position: absolute; top: 18px; right: 0;}
#infrequentUpdates {position: relative; top: 2px; display: inline-block; width: 149px; height: 21px; text-indent: -9999px; background: url(../images/infrequentUpdatesButton.gif) top center no-repeat;}
#infrequentUpdates:hover {background-position: center;}
#infrequentUpdates:active {background-position: bottom center; outline: none;}

#downloadResume {display: block; width: 237px; height: 158px; margin: 8px 0 6px; text-indent: -9999px; background: url(../images/about-us/resumeButton.png) top center no-repeat;}
#downloadResume:hover {background-position: center;}
#downloadResume:active {background-position: bottom center;}


/* HEADER
---------------------------------------------- */
#header {height: 52px; background-color: #fff; border-bottom: 1px solid #e4e4e4;}
#header img {float: left; width: 210px; padding: 13px 0 0 11px;}
#header ul {margin-left: 285px; border-left: 1px solid #e4e4e4;}
#header ul li {display: inline;}
#header ul a {float: left; width: 114px; height: 34px; padding: 18px 0 0; text-align: center; font-size: 14px; font-weight: bold; color: #B1B2BA; background-color: #fff; border-right: 1px solid #e4e4e4;}
#header ul a:hover {color: #444; background-color: #f0f0f0;}
#header ul a:active {color: #000; background-color: #ccc;}
#header ul .active a,
#header ul .active a:hover,
#header ul .active a:active {color: #444750; background-color: #fff;}


/* FOOTER
---------------------------------------------- */
#footer {height: 52px; margin: 58px 0 78px; background-color: #fff; border: solid #e4e4e4; border-width: 1px 0;}
#footer img {float: left; width: 210px; padding: 13px 0 0 11px;}
#footer ul {margin-left: 285px; border-left: 1px solid #e4e4e4;}
#footer ul li {display: inline;}
#footer ul li a {float: left; width: 114px; height: 34px; padding: 18px 0 0; text-align: center; font-size: 14px; font-weight: bold; color: #B1B2BA; background-color: #fff; border-right: 1px solid #e4e4e4;}
#footer ul li a:hover {color: #444; background-color: #f0f0f0;}
#footer ul li a:active {color: #000; background-color: #ccc;}
#footer ul li.active a,
#footer ul li.active a:hover,
#footer ul li.active a:active {color: #444750; background-color: #fff;}


/* HOMEPAGE
---------------------------------------------- */
.homepage {background-color: #f3f3f3;}
.homepage h1 {padding-top: 120px;}
.homepage p {clear: both; display: block; margin: 0 0 46px 144px; font-size: 20px; color: #a7a7a7;}
.homepage .contact-link {right: 0;}

.homepage ul {float: left; width: 139px; margin: 0 0 18px -1px; border: solid #fff; border-width: 0 1px;}
.homepage ul li {display: inline; line-height: 1.65em;}
.homepage ul li:first-child a {margin-top: 3px;}

.homepage ul li a {display: block; margin: 7px 6px; font-size: 14px; border: 1px solid #e4e4e4; overflow: hidden; outline: none;}
.homepage ul li a em {display: block; padding: 6px 9px 0; font-size: 11px; font-style: normal; color: #222; background-color: #fcfcfc;}
.homepage ul li a span {display: block; padding: 0 9px 5px; font-size: 10px; text-transform: uppercase; color: #c5c5c5; background-color: #fcfcfc; border-bottom: 1px solid #f0f0f0;}
.homepage ul li a img {display: block; width: 110px; height: 110px; background-color: #fff; border: 8px solid #fff;}

.homepage ul li a:hover {border-color: #bbb;}
.homepage ul li a:hover em {color: #000; background-color: #f0f0f0;}
.homepage ul li a:hover span {color: #999; background-color: #f0f0f0; border-bottom-color: #ddd;}
.homepage ul li a:hover img {border-color: #f0f0f0;}

.homepage ul li a:active {border-color: #000;}
.homepage ul li a:active em {color: #fff; background-color: #000;}
.homepage ul li a:active span {color: #ddd; background-color: #000; border-bottom-color: #000;}
.homepage ul li a:active img {border-color: #000;}

.homepage ul li h2 a {display: block; height: 58px; padding: 10px 7px 0; line-height: 25px; font-size: 16px; font-weight: bold; color: #555; border: 1px solid transparent;}
.homepage ul li h2 a em {background-color: transparent;}
.homepage ul li h2 a:hover {color: #2e2e2e; background-color: #e3e3e3; border-color: transparent;}
.homepage ul li h2 a:active {color: #fff; background-color: #221922; border-color: transparent;}


/* PROJECT PAGES
---------------------------------------------- */
.projects h1 {margin: 54px 0 12px; padding: 0 0 3px 9px; letter-spacing: -2.5px; font-size: 48px; color: #444750; border-bottom: 8px solid #ebebeb;}
.projects .project {clear: both; display: block; padding: 62px 6px 58px; /*border-bottom: 8px solid #b1b2ba;*/}
.projects .project a:hover {text-decoration: underline;}

.projects .project .visualContent {float: right; width: 678px;}

.projects .project .project-picture {float: right; width: 672px; padding: 3px; background-color: #fff; border: 5px solid #ebebeb;}
.projects .project .project-picture.clickable {border: 5px solid #ebebeb}
.projects .project .project-picture:hover {cursor: default;}
.projects .project .project-picture img {display: block;}

.projects .project .subPictures {float: right; width: 688px; margin: 5px 0 0;}
.projects .project .subPictures a {float: left; width: 151px; margin: 0 6px 5px 0; padding: 3px; background-color: #fff; border: 5px solid #ebebeb;}
.projects .project .subPictures a img {display: block; width: 151px; height: 92px;}

.projects .container .project .clickable:hover,
.projects .project .subPictures a:hover {border-color: #ccc; cursor: pointer;}

.projects .project .sidebar {width: 267px;}
.projects .project .sidebar h2 {font-size: 21px; letter-spacing: -0.01em; margin-bottom: 10px; padding: 0 5px 13px; border-bottom: 3px solid #e7e7e7;}
.projects .project .sidebar h2 + h3 {padding-top: 6px;}
.projects .project .sidebar h3 {margin-bottom: 0; padding: 17px 5px 5px;}
.projects .project .sidebar h3 + p {padding-top: 0;}
.projects .project .sidebar dl {font-size: 12px; margin-top: 13px; padding: 18px 5px 16px; border-top: 3px solid #e7e7e7;}
.projects .project .sidebar dl dt {float: left; width: 99px; font-weight: bold;}
.projects .project .sidebar dl dd {margin-left: 99px;}
.projects .project .sidebar dl dd:after {content:  " "; display: block; padding-bottom: 9px;}
.projects .project .sidebar p {padding: 5px; font-size: 1.2em;}
.projects .project .sidebar .borderTop {padding: 18px 5px 5px; border-top: 3px solid #e7e7e7;}
.projects .project .sidebar ol,
.projects .project .sidebar ul {padding: 5px; font-size: 1.2em;}
.projects .project .sidebar li {margin-left: 21px; padding: 0 0 5px;}
.projects .project .sidebar ol li {list-style: decimal;}
.projects .project .sidebar ul li {list-style: disc;}

#buttons {background: url(../images/buttons/white-texture.jpg) top center no-repeat;border: 0;}
#buttons li {float: left;}
#buttons li a {display: block; background-repeat: no-repeat; background-position: top center; outline: none;}
#buttons li a:hover {background-position: center;}
#buttons li a:active {background-position: bottom center;}
#buttons li.twoStates a {background-position: bottom center;}
#buttons li.twoStates a:hover {background-position: bottom center;}
#buttons li.twoStates a:active {background-position: top center;}


/* CLEARFIXES
---------------------------------------------- */
.container:after,
.projects .project:after,
#header ul:after {content: " "; display: block; clear: both; visibility: hidden;}
*+html .container,
*+html .projects .project,
*+html .projects .project .sidebar dl dd,
*+html #header ul {display: inline-block;}



/**************************************************

Thickbox
JQuery Plugin Styles

Plugin by Cody Lindley
http://jquery.com/demo/thickbox/

Style Changes by HeaderFooter Design
http://headerfooter.com/

**************************************************/

#TB_window {font-size: 1.1em; color: #000;}
#TB_secondLine {display: block; padding-top: 1px; font-size: 1em; color: #999;}
#TB_overlay {position: fixed; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; margin: 0;}
.TB_overlayMacFFBGHack {background: url(../js/macFFBgHack.png) repeat;}
.TB_overlayBG {opacity: 0.75; filter: alpha(opacity=75); background: #fff;}
#TB_window {position: fixed; z-index: 3; top: 50%; left: 50%; display: none; padding: 0; text-align: left; background: #fff; -moz-box-shadow: 0 0 13px #888; -webkit-box-shadow: 0 0 13px #888;}
#TB_window img#TB_Image {display: block; margin: 15px 0 0 15px; border: 1px solid #e7e7e7;}
#TB_window div {float: none; width: auto; margin: 0;}
#TB_caption {float: left !important; height: 25px; margin: 0; padding: 7px 30px 10px 60px;}
#TB_window #TB_closeWindow {position: relative; top: 5px; right: -12px; float: right; height: 25px; padding: 11px 25px 10px 0;}
#TB_window #TB_closeAjaxWindow {float: right; margin-bottom: 1px; padding: 7px 10px 5px 0; text-align: right;}
#TB_window #TB_closeWindowButton {position: relative; top: -5px; float: right; width: 19px; height: 19px; margin-left: 5px; text-indent: -9999px; background: url(../images/thickbox/close.gif) top center no-repeat;}
#TB_window #TB_closeWindowButton:hover {background-position: center;}
#TB_window #TB_closeWindowButton:active {background-position: bottom center;}
#TB_window #TB_closeWindowButton span {display: none;}
#TB_window #TB_orESC {display: block; position: absolute; bottom: 6px; right: 15px;}
#TB_ajaxWindowTitle {float: left; margin-bottom: 1px; padding: 7px 0 5px 10px;}
#TB_title {height: 27px; background-color: #e8e8e8;}
#TB_ajaxContent {clear: both; padding: 2px 15px 15px; text-align: left; line-height: 1.4em; overflow: auto;}
#TB_ajaxContent.TB_modal {padding:15px;}
#TB_ajaxContent p {padding:5px 0px 5px 0px;}
#TB_load {position: fixed; z-index: 103; top: 50%; left: 50%; display: none; width: 208px; height: 13px; margin: -6px 0 0 -104px !important; padding: 0 !important; border: 0 !important;}
#TB_HideSelect {position: fixed; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); background-color: #fff; border: none;}
#TB_iframeContent {margin-top: 1px; margin-bottom: -1px; _margin-bottom: 1px; clear: both; border: none;}
#TB_next a {position: absolute; bottom: 23px; left: 34px; width: 19px; height: 19px; margin: 0 0 0 2px; text-indent: -9999px; background: url(../images/thickbox/right.gif) top center no-repeat;}
#TB_next a:hover {background-position: center;}
#TB_next a:active {background-position: bottom center;}
#TB_next a strong {display: none;}
#TB_prev a {position: absolute; bottom: 23px; left: 15px; width: 19px; height: 19px; text-indent: -9999px; background: url(../images/thickbox/left.gif) top center no-repeat;}
#TB_prev a:hover {background-position: center;}
#TB_prev a:active {background-position: bottom center;}
#TB_prev a strong {display: none;}
#TB_of {position: absolute; bottom: 6px; left: 15px;}

/* IE6 Travesties of Injustice
-------------------------------------------------*/
* html #TB_window {position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');}
* html #TB_load {position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');}
* html #TB_HideSelect {position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');}
* html #TB_overlay {position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');}