@charset "utf-8";
/*
Theme Name: Transmyt V3
Theme URI: http://wordpress.org/
Description: Official theme for Boston marketing agency, Transmyt Marketing.
Version: 1.5
Author: J. Tyarks for Transmyt Marketing
Author URI: http://transmyt.com/
*/
@import url(typography.css);@import url(extensions.css);@import url(colorbox.css);
html,body,div,span,img,center,input[type=text],input[type=image],textarea{background:transparent;border:0;outline:0;vertical-align:baseline;margin:0;padding:0}
html,body{height:100%;width:100%}
:focus{outline:0}
img{border:1px solid #d5d5d5;padding:3px}
.entry img{border:none;padding:0}
.entry img.alignright{padding: 0 0 15px 15px}
.entry .userPic img{border:1px solid #d5d5d5 !important;padding:3px !important}

/* LAYOUT
-------------------------------------------------------------- */	
body{background:#FFF url(media/images/bg/global-bg.png) 0 0 repeat-x}
body.home{background:#FFF url(media/images/bg/global-home-bg.png) 0 0 repeat-x}
.container{height:auto!important;height:100%;min-height:100%;width:975px;margin:0 auto -520px}
.masterSprite{background-color:transparent;background-image:url(media/images/sprite/global-sprite.png);background-repeat:no-repeat}

/*
* #header 
*
*/
#header{height:49px;width:975px}
#nav{height:47px;position:relative;width:784px;margin:0}
body.home .pageFeature{height:341px;width:975px}
.pageFeature{height:225px;width:975px}

/*
* #content 
*
*/

/*
* -----------------------------projectDetails ------------------------------ 
*
*/
		div#projectDetails .description { width:606px; margin:14px auto 0; }

		div#projectDetails .stripViewer .panelContainer .panel ul {
			text-align: left;
			margin: 0 15px 0 30px;
		}
		
		div#projectDetails .slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
			height:446px;
			margin:15px 0 1px;
			position:relative;
			width:696px; }

		div#projectDetails .stripViewer { /* This is the viewing window */
			clear:both;
			height:447px;
			margin:0 32px;
			overflow:hidden;
			position:relative;
			width:622px;
		}
		
		div#projectDetails .stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
			position: relative;
			left: 0; top: 0;
			width: 700px;
			list-style-type: none;
		}
		
		div#projectDetails .stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
			float:left;
			height:100%;
			position:relative;
			width:624px;
		}
		
		div#projectDetails .stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
			width:612px;
		}
		div#projectDetails .stripNavL, .stripNavR { /* The left and right arrows */
			position: absolute;
			top: 230px;
			text-indent: -9000em;
		}
		
		div#projectDetails .stripNavL a, .stripNavR a {
			display: block;
			height: 40px;
			width: 40px;
		}
		
		div#projectDetails .stripNavL {
			left: 0;
		}
		
		div#projectDetails .stripNavR {
			right: 0;
		}
		
		div#projectDetails .stripNavL {
			background: url("slider/images/left.png") no-repeat center;
		}
		
		div#projectDetails .stripNavR {
			background: url("slider/images/right.png") no-repeat center;
		}
		
		div#buttons { height:39px; margin:33px 0 15px; width:auto; }
				
		#content .fltRgt ul#portfolio.clrLft{width:275px;margin:0 auto;padding:0;}
		#content .fltRgt ul#portfolio{width:275px;margin:0 auto;padding:15px 10px;}
		#content .fltRgt ul#portfolioList{width:340px;margin:-5px auto 0;padding:0}
		#content .fltRgt ul#portfolio li{display:block;float:left;list-style:none;width:76px;margin:0 20px 20px 0}
		#content .fltRgt ul#portfolioList li{clear:both;border-bottom:1px solid #d5d5d5;list-style:none}
		#content .fltRgt ul#portfolio li.last{margin-right:0}
		#content .fltRgt ul#portfolioList li dl{display:block;height:16px;width:340px;margin:0;padding:8px 0}
		#content .fltRgt ul#portfolioList li dt{display:block;float:left}
		#content .fltRgt ul#portfolioList li dd{display:block;float:right}
		#content .fltRgt ul#portfolioList li.last{border-bottom:none}
		
		
		.last { float:left; margin-right:0; }
		
		#portfolioRowWebTop, #portfolioRowWebBottom, #portfolioRowEmailTop, #portfolioRowEmailBottom, #portfolioRowSocialTop, #portfolioRowSocialBottom, #portfolioRowCreativeTop, #portfolioRowCreativeBottom { margin-bottom:15px; width:930px; }
		.portfolioProjectRow {  margin-bottom:15px; width:930px; }

div#clientList { margin-bottom:15px; }
div#clientList h3.clientHeaders { float:left; font-size:14px; font-weight:bold; width:187px; }
div#clientList ul li {border-bottom:1px solid #E5E5E5; float:left; padding:13px 0; width:187px; }

div#clientList ul li.projectCount { text-align:center;}

#projectDate { margin-right:0; text-align:right; width:100px; } 

div.clientColumns div.innerContent { clear:both; margin:10px 0; }

/*div.clientColumns div.innerContent ul li { border-bottom:1px solid #E5E5E5; margin-bottom:8px; padding:4px 0 13px; } */

/*
* -----------------------------projectDetails ------------------------------ 
*
*/



#content{ background-position:-657px -580px;margin:0 auto;padding:30px 0 10px;width:975px}

/* portlet */
#ourWork div.portfolioContainer { height:420px; width:420px; float:left; }
#ourWork div.description { height:420px; font-size:1.1em; line-height:1.2em; float:right; width:403px; }
div.featured { height:412px; margin-right:20px; width:412px; float:left; }


/*-------------------------------------------------*/
		.stripViewer .panelContainer .panel ul {
			text-align: left;
			margin: 0 15px 0 30px;
		}
		
		.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
			height:412px;
			margin: 15px 0;
			position: relative;
			width: 940px;
		}

		.stripViewer { /* This is the viewing window */
			position: relative;
			overflow: hidden; 
			margin: auto;
			width: 840px; /* Also specified in  .stripViewer .panelContainer .panel  below */
			height: 425px;
			clear: both;
		}
		
		.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
			position: relative;
			left: 0; top: 0;
			width: 940px;
			list-style-type: none;
			/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
		}
		
		.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			width: 840px; /* Also specified in  .stripViewer  above */
		}
		
		.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
			padding: 10px;
			width:830px;
			margin-top:-10px;
		}
		.stripNavL, .stripNavR { /* The left and right arrows */
			position: absolute;
			top: 230px;
			text-indent: -9000em;
		}
		
		.stripNavL a, .stripNavR a {
			display: block;
			height: 40px;
			width: 40px;
		}
		
		.stripNavL {
			left: 0;
		}
		
		.stripNavR {
			right: 0;
		}
		
		.stripNavL {
			background: url("slider/images/left.png") no-repeat center;
		}
		
		.stripNavR {
			background: url("slider/images/right.png") no-repeat center;
		}
		
		/*-------------------------------------------------*/


.portlet{background-color:#FFF;margin-bottom:12px}

#content .column.fltLft .portlet{background-color:transparent}

.portletHeader{border-bottom:1px solid #E5E5E5;height:26px; margin-bottom:15px; }

#ourWork.clrLft .portletHeader{background-color:#F2F2F2; border-top:1px solid #E5E5E5; margin-bottom:15px; padding-left:15px; padding-top:12px;}

.fltLft .portletHeader span.fltLft,.fltRgt .portletHeader span.fltLft{width:220px}

#content div.fltLft div.portlet div.fltLft,.blog #content div.fltLft div.portlet div.fltRgt{width:315px}

#content div.fltLft div.portlet #ourWork.clrLft div.fltLft {border:1px solid #D5D5D5 !important; padding-bottom:5px; margin-right:15px; width:171px; }

#content div.fltLft div.portlet #ourWork div.fltLft:hover {border:1px solid #77a51e !important;}

.home #content div.fltLft div.portlet #portfolio div.fltLft{ margin-right: 0; }

#content div.fltLft div.portlet div.fltRgt{width:340px}

.column.fltRgt .portletTitle{width:272px;margin:-10px 0 12px -10px;padding:10px}
		
/* left column */
#content .column.fltLft{width:675px}
.blog #content .column.fltLft,.single #content .column.fltLft{width:645px}
#content .fltLft .secDivider{background-color:#e0e0e0;height:2px;font-size:0;width:inherit;margin:15px 0}
.blog #content .fltLft .secDivider{margin:20px 0}
#content .fltLft .divider,.footerContent .divider{background-color:#e5e5e5;height:1px;font-size:0;width:inherit;margin:12px 0}
.footerContent .divider{background-color:#5e5e5e}
.column.fltLft input[type=text],textarea{background-color:#e0e0e0;border:none;width:296px;padding:5px 2px}
.column.fltLft input[type=text]{height:20px}
		
/* right column */
#content .column.fltRgt{width:292px}
#content .column.fltRgt .portlet{border:1px solid #e5e5e5;padding:10px;width:272px;}
#content .column.fltRgt .portletHeader{margin-left:-10px;padding:0 10px;width:272px;z-index:1000;}
.column.fltRgt input[type=text],textarea{background-color:#e0e0e0;border:none;padding:5px 2px;width:263px;}
.transmytConnect form{height:27px;margin:10px auto 23px}
.transmytConnect #MERGE0{background-color:#FFFFFF!important;height:17px;width:158px!important}
.column.fltRgt input[type=text]{height:15px}
#emailSignUp input[type=text]{width:184px}

.column.fltRgt input#projectSearch { background-color:#FFF; border:1px solid #c4c4c4; height:14px; margin-left:-82px; width:210px;}
.column.fltRgt #searchProjects{ height:14px; }
				
/*
* #footer 
*
*/
.push,#footer{height:520px}
#footer{background:#77A51E url(media/images/bg/footer-bg.png) 0 0 repeat-x;padding-top:41px;width:100%}
#footer .footerContent.masterSprite{background-position:0 -608px;height:459px;width:972px;margin:0 auto;padding:10px 0}
#footer div.footerContent div.fltLft{height:375px;width:440px;padding:0 15px}
#footer div.footerContent div.fltLft div.title{height:45px;margin:8px 0}
#footer div.footerContent div.fltRgt{height:385px;width:458px;margin:-10px auto 35px}
.legalAndContact{background-color:transparent;height:18px;text-align:right;margin:0 auto;padding:15px 0}
.legalAndContact p.gothic{width:605px;margin:0;padding:16px 0 0 367px}
.legalAndContact span.viewSiteMap{width:605px;padding:0 0 0 60px}

/* Misc classes
-------------------------------------------------------------- */	
.home .main.portlet p .btn a{margin-top:28px;}	
.colHeader,.colHeader .fltLft,.colHeader .fltRgt{height:22px;padding:0 5px 8px 0}
.colHeader .fltLft{width:65%}
.colHeader .fltRgt{padding-left:15px;text-align:right}
div.quote{background-position:-689px -330px;padding-left:30px}
.blog .entry img.alignleft{margin-right:15px}
.blog .entry img.alignright{margin-left:15px}
.column.fltRgt
span.fltRgt.move{margin-top:-6px}
.column.fltRgt
span.fltRgt.move img{border:none;padding:2px 0 3px 3px}
.rightCol
h3.fltLft.gothic{padding-top:2px}
.fltLft,.alignleft{float:left}
.fltRgt,.alignright{float:right}
.clr{clear:both}
div.clr hr{font-size:0}
hr,.hidden{display:none}
.top{margin-top:0;padding-top:0}
.bottom{border:none;margin-bottom:0;padding-bottom:0}
.group.first,.iframe.first{margin-right:10px}
#ourWork.portlet div.clrLft{text-align:center;margin:0 auto 10px}
img#recentWork{padding:5px; background-color:#FFF;}
iframe#FB_SERVER_IFRAME{height:95px;width:458px}
.tweet{margin-left:7px;width:445px}
#content div.column.fltLft div.portlet div.clr div#postsLft div.post,#content div.column.fltLft div.portlet div.clr div#postsRgt div.post{display:block;height:auto!important;height:96px;min-height:96px;margin:20px auto}
#content div.column.fltLft div.portlet div.clr div#postsLft div.post div.fltLft,#content div.column.fltLft div.portlet div.clr div#postsRgt div.post div.fltLft{width:90px}
#content div.column.fltLft div.portlet div.clr div#postsLft div.post div.fltRgt,#content div.column.fltLft div.portlet div.clr div#postsRgt div.post div.fltRgt{width:222px}
div.clr.firstPost div.intro.large{background-position:-695px -322px;margin-left:85px;width:530px;padding:0 0 0 22px}
div.clr.firstPost div.intro.large span.closeQuote{background-position:-674px -342px;float:left;width:14px;margin:-48px 0 0 330px}
ul#blogPosts{height:auto !important;height:580px;margin:0 0 20px -20px;min-height:580px;width:685px}
ul#blogPosts li{display:block;float:left;height:auto !important;height:96px; margin-left:20px; min-height:96px; width:315px}
ul#blogPosts li dl{border-bottom:2px solid #e0e0e0;margin:0;height:auto !important;height:96px;min-height:96px;padding:20px 0;width:315px}
ul#blogPosts li dt{width:90px}
ul#blogPosts li dd{width:222px}
.transmytConnectWrapper{background-color:#FFFFFF;border:1px solid #E5E5E5;margin-bottom:12px;padding:10px;width:272px}
.transmytConnect{background:url(media/images/bg/subscribe-bg.png) repeat-x;margin:0 auto;padding:10px;width:252px}