@charset "utf-8";
@import "reset.css";

/* -------- (c) Kerri McHale 2009  -------- */
/* =============== COLOR KEY ===============
        CREAM	#FFF8E3 +++ 
        MOSS 	#CCCC9F +++ 
        BLUE 	#9FB4CC +++ 
        RED   	#DB4105 +++ 
        BROWN 	#3D3C37 +++ 
        TEXT  	#4D4D4D +++  
   ======================================= */


/* --- transparent PNG support for IE6 --- 
   --- uses twinhelix iepngfix ----------- */
#nav li,
#client-login a,
#active-page, 
.feature, 
a.logo img { behavior: url("/scripts/iepngfix.htc"); }


/*----------------------------------------  
  ============ GLOBAL STYLES =============
  ---------------------------------------- */
body {
	background: url(/i/common/bg-back.png) repeat-x #f5eeda;
	color: #4D4D4D;
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;	
	font-size: .875em; 
	line-height: 1.375em;
}
a, a:link   { color:#DB4105; text-decoration: none; }
a:hover     { text-decoration: underline; }
a.external  { background: url(/i/common/external.png) right 4px no-repeat; padding-right: 12px; }
p			{ margin: 0 0 .75em; }
strong		{ font-weight: bold; }
.left		{ float: left;  }
.right		{ float: right; }
.clear		{ clear: both; }
.totop		{ clear: both; 	float: right; }
.hidden	    { display: none; }

#main h1 {
	color: #3D3C37;
	font-size: 22px;
	font-weight: bold;
	line-height: 1em;
}
@media screen {
  .sIFR-active #main h1 {
    font-family: Verdana;
    height: 1.25em;
    font-size: 24px;
    visibility: hidden;
  }
}
#main h2 {
	color: #DB4105;
	font-size: 22px;
	font-weight: bold;
	margin-top: 2.25em;
}
@media screen {
  .sIFR-active #main h1 {
    font-family: Verdana;
    height: 1.25em;
    font-size: 24px;
    visibility: hidden;
  }
}
#main #content h2.halfmargin { margin-top: 1em; }

/* ========= SIFR Required Stuff ========= */
.sIFR-flash { visibility: visible !important; margin: 0; padding: 0; }
.sIFR-replaced, .sIFR-ignore { visibility: visible !important; }
.sIFR-alternate { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden; }
.sIFR-replaced div.sIFR-fixfocus { margin: 0; padding: 0; overflow: auto; letter-spacing: 0; float: none; }

/*----------------------------------------  
  =========== GLOBAL STRUCTURE ===========
  ---------------------------------------- */
#container {
	background: url(/i/common/bg-fold2.png) 180px top repeat-y;
	display: block;
	height: auto !important;
	height: 100%;
	margin: 0 auto;
	margin-bottom: -150px;
	position: relative;
	overflow: visible;
	width: 960px;
	min-height: 100%;
}
* html #container, * html .column { height: 100%; }
.column {
	display: inline;
	float: right;
	height: 100%;
	position: relative;
}
#head {
	background: url(/i/common/bg-header.png) 180px 0 no-repeat;
	display: block;
	height: 130px;
	width: 960px;
}
#head .logo { margin-left: 30px; position: absolute; }
#head h1 { 
	background: url(/i/common/name.png) 0 0 no-repeat;
	display: block;
	height: 50px;
	margin: 57px 0 0 230px; 
	position: absolute;
	text-indent: -999em;
	width: 400px;
}
#sidebar {	
	overflow: hidden;
	padding-top: 27px;
	width: 180px;  
}
#main {	
	margin: 0 180px -150px 0;
	overflow: visible;
	padding-bottom: 150px;	
	width: 600px; 
}
#content { margin: 0 50px 20px 50px; }
#foot {
	background: url(/i/common/grass.png) left top repeat-x;
	clear: both;
	display: block;
	height: 150px;
	margin-top: -150px;
	position: relative;
	width: 100%;
	z-index: 999;
}
.clearfooter {
	clear: both;
	display: block;
	height: 150px;
	width: 100%;
}

/*----------------------------------------  
  ============ MAIN NAVIGATION ===========
  ---------------------------------------- */
#nav {
	background: url(/i/common/nav/pole.png) 5px 0 repeat-y;
	height: 100%;
	margin-left:360px;
	min-height: 100%;
	left: 50%;
	overflow: visible;
	padding-top: 20px;
	position: fixed;
}
#nav span 		{ position: absolute; left: -999em; }
#nav li 		{ background: url(/i/common/nav/nav-signs.png) no-repeat;	height: 70px; width: 120px; }
#nav li.home  	{ background-position: 0 -2px;   height: 65px; margin-top: 30px; }
#nav li.about 	{ background-position: 0 -75px;  height: 55px;	margin-top: -10px; }
#nav li.work 	{ background-position: 0 -140px; height: 62px;	margin-top: -5px; }
#nav li.contact { background-position: 0 -210px; margin-top: -8px; }
#nav li a 		{ display: block;	width: auto; }
#nav li.home a 	{ height: 40px; margin: 10px 20px 0 25px; }
#nav li.about a { height: 40px;	margin: 10px 15px 0 25px; }
#nav li.work a 	{ height: 42px; margin: 10px 20px 0 25px; }
#nav li.contact a { height: 50px; margin: 5px 5px 0 25px;}
#nav li.home:hover    { background-position: -120px -2px;   }
#nav li.about:hover   { background-position: -120px -75px;  }
#nav li.work:hover    { background-position: -120px -140px; }
#nav li.contact:hover { background-position: -120px -210px; }
#home li.home,  #about li.about,  #work li.work,  #contact li.contact { background: none; }
#home li.home a,  #about li.about a,  #work li.work a,  #contact li.contact a { cursor: default;  }
#active-page 	{ 
	background-position: 0 0;
	background-repeat: no-repeat;
	display: block; 
	left: 50%;
	position: fixed; 
	z-index: 100;
}
#home #active-page { 
	background-image: url(/i/home/sign-home.png);
	height: 75px;
	margin-left: 245px;
	top: 31px;
	width: 135px;
}
#about #active-page { 
	background-image: url(/i/about/sign-about.png);
	height: 65px;
	margin-left: 232px;
	top: 105px;
	width: 150px;
}
#work #active-page { 
	background-image: url(/i/work/sign-work.png);
	height: 66px;
	margin-left: 240px;
	top: 180px;
	width: 140px;
}
#contact #active-page { 
	background-image: url(/i/contact/sign-contact.png);
	height: 86px;
	margin-left: 198px;
	top: 245px;
	width: 183px;
}
/*------------ twitter bird -------------- */ 
#twitter_div {
	background: url(/i/common/twitter-bubble-top.png) right top no-repeat;
	left: 50%;
	margin-left:360px;
	margin-top: 180px;
	overflow: visible;
	position: fixed;
	width: 205px;
}
#twitter_div ul {
	background: url(/i/common/twitter-bg.png) right bottom no-repeat;
	padding-bottom: 76px;
	position: relative;
	z-index: 99;
}
#twitter_div li {
	background: url(/i/common/twitter-bubble-middle.png) right top repeat-y;
	color: #7C8C9B;
	font-size: .875em;
	line-height: 1.2em;
	margin-top: 10px;
	min-height: 45px;
	padding: 0 8px 0 34px;
}
#twitter_div li a { color: #DB4105; }
#twitter_div li em a { 
	color: #999; 
	display: block; 
	font-size: .625em; 
	font-style: italic;
	padding-right: 10px;
	text-align: right; 
}
}
#twitter-link { 
	display: block;
	font-size: .875em;  
	line-height: 2em;
	padding-right: 8px;
	text-align: right;
}
#twitter_sign {  
	background: url(/i/common/twitter-sign.png) 0 0 no-repeat;
	height: 57px;
	margin-left: 21px;
	margin-top: 5px;
	position: absolute;
	bottom: 0;
	width: 109px;
	padding: 1px;
	z-index: 0;
}
#twitter_sign a.external {
	background: none;
	display: block;
	font-size: 1.125em;
	line-height: 1em;
	margin-left: 7px;
	padding-top: 1.125em;
	text-align: center;
	text-shadow: 0 1px 0 #eecc96;
}  
#twitter_sign a.external:hover { text-decoration: none; }

/*------------ Client Login -------------- */ 
#client-login {
	left: 50%;
	margin-left: 442px;
	top: 10px;
	position: fixed;
	z-index: 200;
}
#client-login a { 
	background: url(/i/common/client-login.png) 0 0 no-repeat;
	display: block;
	height: 30px;
	text-indent: -999em;
	width: 121px;
}
#client-login a:hover { background-position: 0 -30px }

/*----------------------------------------  
  ================ FOOTER ================
  ---------------------------------------- */
#foot p {
	color: #FFF8E3;
	font-size: .875em;
	margin: auto;
	padding-top: 100px;
	text-align: center;
}

/*----------------------------------------  
  ================ SIDEBAR ===============
  ---------------------------------------- */
#sidebar h3 {
	border: solid #DB4105;
	border-width: 1px 0;
	color: #DB4105;
	font-size: .875em;
	font-weight: bold;
	padding-top: 2px;
	margin: 30px 5px 10px 0;
	text-align: center;
	text-transform: uppercase;
}
@media screen {
  .sIFR-active #sidebar h3 {
    font-family: Verdana;
    height: 1.25em;
    visibility: hidden;
  }
}
#sidebar h4 {
	color: #9FB4CC;
	font-size: .875em;
	font-weight: bold;
	margin: 5px 5px 2px 0;
}
#sidebar .feature {
	background: url(/i/common/featured-frame.png) 0 0 no-repeat;
	height: 100px;
	margin-left: -5px;
	width: 185px;
}
#sidebar .feature img { font-size: 9px; margin: 10px 0 0 10px; }
#sidebar p {
	color: #808080;
	font-size: .875em;
	line-height: 1.25em;
	margin-right: 5px;
}
#sidebar input {
	background: url(/i/common/form-field-bg.png) 0 0 repeat-x;
	border: 1px solid #fff;
	color: #8D8E7B;
	display: inline;
	float: left;
	font-size: 11px;
	height: 17px;
	margin: 5px 0;
	padding-left: 5px;
	vertical-align: bottom;
}
#sidebar input:focus  { border-color: #9FB4CC; } 
#sidebar input#mce-FNAME { margin-right: 5px; width: 74px; }
#sidebar input#mce-LNAME { width: 80px; }
#sidebar input#mce-EMAIL { width: 142px; }
#sidebar #mc-embedded-subscribe {
	background: url(/i/common/form-submit.png) 0 0 no-repeat;
	border: 0;
	cursor: pointer;
	float: left;
	height: 22px;
	margin: 2px 0 0 3px;
	text-indent: -999em;
	width: 22px;
}
#sidebar #mc-embedded-subscribe:hover, 
#sidebar #mc-embedded-subscribe:focus 	  { background-position: 0 -22px; }
#mc-embedded-subscribe-form label.error   { display: none;}
#mc-embedded-subscribe-form input.error   { border: 1px solid #DB4105; }
#mc-embedded-subscribe-form #errorsummary {	color: #DB4105;	font-weight: bold;}

#social { 
	overflow: hidden;
	width: 100%; 
}
#social ul {
	float: left;
	left: 50%;
	margin-left: -5px;
	position: relative;
	width: auto;
}
#social li {
	float: left;
	margin: 5px;
	right: 50%;
	position: relative;
}
#social li a {
	background: url(/i/common/social-links.png) no-repeat;
	display: block;
	height: 24px;
	width: 24px;
}
#social  span 		  { text-indent: -999em; font-size: 0; }
#social li.in a 	  { background-position:      0 0; }
#social li.fb a 	  { background-position:  -24px 0; }
#social li.tw a 	  { background-position:  -48px 0; }
#social li.sk a 	  { background-position:  -72px 0; }
#social li.in a:hover { background-position:      0  -24px; }
#social li.fb a:hover { background-position:  -24px  -24px; }
#social li.tw a:hover { background-position:  -48px  -24px; }
#social li.sk a:hover { background-position:  -72px  -24px; }

/*----------------------------------------  
  ================ CONTENT ===============
  ---------------------------------------- */
.serviceslist {	float: left; margin: 1em 0 2em; width: 100%; }
.serviceslist li {
	background: url(/i/common/check-14.png) 0 3px no-repeat;
	display: block;
	font-size: .875em;
	font-weight: bold;
	float: left;
	margin: .125em 0 0 0;
	padding-left: 20px;
	text-transform: uppercase;
	width: 45%;
}

/*----------------------------------------  
  ================= HOME ================
  ---------------------------------------- */
#home #main .left { margin-right: 2em; }

/*----------------------------------------  
  ================= ABOUT ================
  ---------------------------------------- */
#about #content h2 { margin-top: 1.5em; }
.properties 	   { float: left; margin: 1em 0 2em; width: 100%; }
.properties li {
	color: #DB4105;
	display: block;
	font-size: .875em;
	float: left;
	margin: .125em 0 0 0;
	text-transform: uppercase;
	width: 26%;
}
.properties li a 	   { background: url(/i/about/bubble.png) 0 0 no-repeat; padding-left: 24px; }
.properties li a:hover { background-position: 0 -32px; }
li.thirds 			   { width: auto; }
.properties li p {
	color: #4D4D4D;
	margin: 10px; 
	text-transform: none;
}
.bstip { /* styles bs tooltip windows */
	background-color: #3D3C37;
	border: 8px solid #9FB4CC;
	width: 250px;
	-moz-border-radius: 0 20px;
	-webkit-border-radius: 0 20px;
	border-radius: 0 20px;
	z-index: 999;
}
.bstip p { color: #9FB4CC;	margin: 10px; }

/*----------------------------------------  
  ================= WORK ================
  ---------------------------------------- */

/* ============== Work Menu ============== */
#work-menu {
	background: url(/i/work/dirigible.png) right top no-repeat;
	float: left;
	padding-right: 112px;
	margin: 2em 0;
}
#work-menu li {
	display: inline;
	float: left;
	margin: 12px 10px 0 0;
}
#work-menu a {
	background: url(/i/work/flag.png) 0 0 no-repeat;
	color: #FFF8E3;
	display: block;
	font-size: 16px;
	font-weight: bold;
	height: 37px;
	line-height: 2.25em;
	text-align: center;
	text-decoration: none;
	width: 68px;
}
#work-menu a:hover { background-position: 0 -80px; color: #CCCC9F; }
body.web #work-menu li.web a,
body.print #work-menu li.print a, 
body.identity #work-menu li.identity a,
body.more #work-menu li.more a { background-position: 0 -40px; color: #3D3C37;  }

/* ============== Projects =============== */
.project {
	border-top: 3px solid #CCCC9F;
	clear: both;
	float: left;
	margin: 1em 0 4em;
}
.project .slider 	{ 
	background: url(/i/work/work-frame-lg.png) 0 0 no-repeat; 
	height: 313px;
	margin: 10px 0 0 0; 
	overflow: hidden;
	width: 488px;
}
body.identity .project .slider 	{ background-image: url(/i/work/work-frame-sm.png); height: 210px ; }
.project .slider ul { 
	float: left;  
	overflow: hidden;
	width: 488px;
	height: 313px;
}
body.identity .project .slider ul { height: 210px; }
.project .slider li { 
	overflow: hidden; 	/*required for easyslider*/ 
	float: left;
	width: 488px;
	height: 313px;
}
body.identity .project .slider li { height: 210px; }
.project .slider img { margin: 13px 10px 10px; }
.project dl { float: left; width: 494px; }
.project dt {
	background-color: #CCCC9F;
	display: block;
	clear: left;
	color: #DB4105;
	float: left;
	font-size: .875em;
	font-style: italic;
	height: 1.5em;
	line-height: 1.5em;
	margin-top: .5em;
	padding: 0 .375em;
	width: auto;
}
.project dd {
	border-top: 1px solid #CCCC9F;
	display: block;
	float: left;
	font-size: .875em;
	line-height: 1.5em;
	margin: -1.5em 0 0 0;
	text-indent: 7em;
	width: 100%;
}
.project .prev a, .project .next a {
	display: block;
	height: 54px;
	width: 22px;
	margin-bottom: -40px;
}

.project .prev a {
	background: url(/i/work/prev_next.png) 2px 0 no-repeat;
	float: left;
	left: -18px;
	text-indent: -999em;
	position: relative;
	top: -170px;
}
.project .prev a:hover { background-position: 0 0; }

.project .next a {
	background: url(/i/work/prev_next.png) -23px 0 no-repeat;
	float: right;
	text-indent: -999em;
	position: relative;
	right: -7px;
	top: -170px;
}
.project .next a:hover { background-position: -19px 0; }

/*----------------------------------------  
  ================ CONTACT ===============
  ---------------------------------------- */
#contact h1         { margin-bottom: .875em; }
#contact h2         { margin-top: .875em; }
#contact #content p { margin-right: 50px; }
.contactinfo 		{ 
	display: inline; 
	float: left; 
	margin: 50px 0 0;
	overflow: visible; 
	width: 170px; 
}
.contactinfo li {
	background: url(/i/contact/contact-icons2.png) no-repeat;
	font-size: .875em;
	height: 36px;
	line-height: 1.25em;
	margin: 1.5em 0 0;
	padding-left: 44px;
}
.contactinfo  strong  { 
	display: block;
	font-weight: bold;
	text-transform: uppercase;
}
.contactinfo .addss	{ background-position: 0 3px; margin-bottom: 2em; }
.contactinfo .phone	{ background-position: 0 -97px; }
.contactinfo .fax 	{ background-position: 0 -199px; }
.contactinfo .email { background-position: 0 -297px; }
.contactinfo .vcard { background-position: 0 -397px; }
.contactinfo .skype { background-position: 0 -497px; }

#formarea    { float: left; }
#contactform {
	background: url(/i/contact/form-background.jpg) 0 0 no-repeat;
	height: 360px;
	width: 330px;
}
textarea {
	background: transparent url(/i/contact/text-background.jpg) 0 0 no-repeat;
	border: 0;
	color: #DB4105;
	height: 116px;
	font-family: Courier, "Courier New", monospace;
	font-size: 14px;
	line-height: 1.125em;
	margin: 94px 0 0 22px;
	padding: 12px;
	width: 246px;
}
#contactform input { 
	background: transparent url(/i/contact/line.jpg) left bottom no-repeat; 
	border: 0;
	color: #DB4105;
	height: 16px;
	line-height: 14px;
	font-size: 14px;
	font-family: Courier, "Courier New", monospace;
}
#contactform input#phone, #contactform input#email {
	margin: 0 0 0 145px;
	padding-left: 8px;
	width: 150px;
}
#contactform input#name {
	float: left;
	margin: 42px 0 0 20px;
	padding-left: 8px;
	width: 200px;
}
#contactform input.submit {
	background: transparent url(/i/contact/send-button.png) 0 0 no-repeat; 
	cursor: pointer;
	height: 63px;
	float: left;
	margin: 5px 0 0 15px;
	width: 63px;
}
#contactform input.error,
#contactform textarea.error { border: solid 1px #DB4105; }
#contactform input.submit:hover { margin: 8px 0 0 16px; }
#contacterrorsummary   { position: absolute; margin-top: 10px; width: 370px; }
#contacterrorsummary p {
	background-color: #9FB4CC;
	border: solid 2px #DB4105;
	color: #DB4105;
	display: block;
	height: 50px;
	padding: .5em 1em 1em;
	-moz-border-radius: 0 10px;
	-webkit-border-radius: 0 10px;
	border-radius: 0 10px;
}
.form_success {
	background-color: #3D3C37;
	background-color: rgba(61,60,55,.85);
	border: 8px solid #9FB4CC;
	color: #DB4105;
	left: 50%
	margin-left: -157px;
	position: absolute;
	top: 20em;
	width: 315px;
	-moz-border-radius: 0 20px;
	-webkit-border-radius: 0 20px;
	border-radius: 0 20px;
}
.form_success p { 
	color: #fff; 
	font-size: 1.25em; 
	line-height: 1.5em;
	margin: 20px 10px 20px 20px;
}
.form_success a.close { 
	background: url(/i/contact/close.png) 0 0 no-repeat;
	display: block; 
	height: 24px;
	float: right;
	font-size: 1.25em;
	padding-left: 30px;
	margin: 0 20px 20px 0;
}
/*#contactform label.error {
	background: url(/i/contact/error.png) 0 0 no-repeat;
	display: block;
	color: #fff;Color
	float: right;
	height: 21px;
	margin: -21px 0;
	padding-left: 20px;
	position: relative;
	right: -70px;
	width: 89px;
	z-index: 500;
}
#contactform label.error[for="message"] { margin: -140px 0; }
#contactform label.error[for="name"]    { margin: -50px 0; right: 0; }*/
#contactform label.error { display: none !important; }

/*----------------------------------------  
  ========== CLIENT LOGIN PAGE ===========
  ---------------------------------------- */
body#clients #head,
body#clients #container { background: none; }
body#clients #main 		{ padding-left: 150px; width: 800px; }
body#clients h1 		{ margin-left: 195px; }
body#clients #main h1 	{ margin-left: 0; }
body#clients #main h2 	{ margin-top: 15px; } 
body#clients #main p	{ margin-top: .5em; }
.client-box {
	display: inline;
	float: left;
	margin: 20px 20px 10px;
	padding-bottom: 20px;
	width: 260px;
}
#client-box-1 {
	border-right: solid 1px #CCCC9F;
	margin-left: 0;
	padding-right: 20px;
}
#clients fieldset {	width: 250px; }
#clients form ul  { margin-top: 20px; }
#clients form li  { float: left; margin: 0 0 15px; width: 250px; }
#clients li label {
	float: left;
	font-size: .875em;
	padding: 3px;
	width: 65px;
}
#clients li input {
	border: solid 1px #CCCC9F;
	float: left;
	padding: 3px;
	width: 150px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;

}
#clients li input:focus { border-color: #9FB4CC; }

#clients input.button {
	background: 0 0 no-repeat;
	border: 0;
	cursor: pointer;
	display: block;
	height: 40px;
	margin: 20px auto;
	text-indent: -999em;
}
#clients input#basecamp-button { background-image: url(../i/clients/basecamp-button.png); width: 226px; }
#clients input#email-button    { background-image: url(../i/clients/campaign-button.png); width: 205px; }
#clients label.remember-me	   { display: block; font-size: .875em; font-style: italic; text-align: center; }
#clients input#remember_me	   { font-size: .875em; border: solid 1px #CCCC9F; margin-right: .5em; }
#clients form a				   { display: block; font-size: .75em; text-align: center; text-decoration: underline; }

#clients .message {
	background-color: #CCCC9F;
	border: double 3px #9FB4CC;
	color: #DB4105;
	height: 30px;
	font-size: 1.5em;
	font-style: italic;
	font-weight: bold;
	line-height: 1.5em;
	margin: 10px 0 0;
	text-align: center;
	top: 50px;
	width: 600px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}