/* ---------------------------------------------------------------------------------------------

  general setup

--------------------------------------------------------------------------------------------- */

body { 
  margin: 0; /* removes default margin in screen.css */
  background: #9c9c9c url(/images/bg_body-sub.jpg) repeat-x;
  color: #333;
}

body#s-home { background: #9c9c9c url(/images/bg_body-home.jpg) repeat-x; }

a { color: #333; outline: none; }
a:hover { color: #FFF; }

.light-gray   { color: #9c9c9c; }
.medium-gray  { color: #666; }
.dark-gray    { color: #333; }
.darkest-gray { color: #111; }
.yellow       { color: #f7e800; }


/* ---------------------------------------------------------------------------------------------

	container

--------------------------------------------------------------------------------------------- */

.container { margin: 0; }


/* ---------------------------------------------------------------------------------------------

	header

--------------------------------------------------------------------------------------------- */

#header { margin-bottom: 36px; }

#header h1  {
  margin: 18px 0 0 0;
  width: 310px;
  height: 90px;
}

#header h1 a {
  width: 310px;
  height: 90px;
  display: block;
  text-indent: -9999px;
  background: url(/images/tr_logo.png) no-repeat;
}

#header h1 a:hover { background-position: 0 -90px; }

ul.tabs {
  margin: 0 0 0 30px;
  width: 280px;
  height: 36px;
  list-style: none;
}

ul.tabs a {
  height: 36px;
  text-indent: -9999px;
  text-decoration: none;
  border: none;
  background: url(/images/sprite_nav.png) no-repeat;
}

ul.tabs #work a { width: 44px; }
ul.tabs #services a { width: 66px; background-position: -44px 0; }
ul.tabs #about a { width: 57px; background-position: -110px 0; }
ul.tabs #blog a { width: 44px; background-position: -167px 0; }
ul.tabs #contact a { width: 69px; background-position: -211px 0; }

ul.tabs #work a:hover, #s-work ul.tabs #work a { background-position: 0 -36px; }
ul.tabs #services a:hover, #s-services ul.tabs #services a { background-position: -44px -36px; }
ul.tabs #about a:hover, #s-about ul.tabs #about a { background-position: -110px -36px; }
ul.tabs #blog a:hover, #s-blog ul.tabs #blog a { background-position: -167px -36px; }
ul.tabs #contact a:hover, #s-contact ul.tabs #contact a { background-position: -211px -36px; }


/* ---------------------------------------------------------------------------------------------

	intro

--------------------------------------------------------------------------------------------- */

#intro { margin-bottom: 36px; background: url(/images/bg_intro.jpg) no-repeat; }

#intro h2 {
  margin: 0;
  width: 470px;
  height: 234px;
  float: left;
  position: relative;
  text-indent: -9999px;
  background: url(/images/tr_intro-h2.png);
}

#intro h2 a {
  width: 90px;
  height: 30px;
  display: block;
  position: absolute;
  top: 195px;
  left: 151px;
}

#intro h3 {
  margin: 0;
  width: 470px;
  height: 234px;
  float: right;
  position: relative;
  text-indent: -9999px;
  background: url(/images/tr_intro-h3.png);
}

#intro h3 a {
  width: 105px;
  height: 30px;
  display: block;
  position: absolute;
  top: 195px;
  left: 100px;
}


/* ---------------------------------------------------------------------------------------------

	content

--------------------------------------------------------------------------------------------- */

/* BANNER - GLOBAL ---------------------------------------------------- */
#content #banner {
  margin-bottom: 36px;
  padding-left: 30px;
  width: 920px;
  height: 198px;
}

#content #banner h2 { margin-bottom: 18px; font-size: 58px; letter-spacing: -.08em; color: #FFF; }
#content #banner h3 { font-size: 20px; letter-spacing: -.08em; color: #f7e800; }
#content #banner p { margin: 0; width: 440px; font: italic 16px Georgia, "Times New Roman", serif; color: #f7e800; }

/* SIDEBAR - GLOBAL ---------------------------------------------------- */
#content .sidebar { 
  margin-left: 30px;
  padding-bottom: 18px; 
  width: 200px;
  display: inline; /* IE6 double-margin hack */
}

#content .sidebar h3 { 
  margin: 0 0 15px 0;
  font-size: 20px;
  line-height: 0;
  letter-spacing: -.08em;
  color: #FFF;
}

#content .sidebar h5 { font-size: 11px; letter-spacing: -.08em; text-transform: uppercase; }
#content .sidebar p { margin-right: 30px; font: italic 12px/14px Georgia, "Times New Roman", serif; color: #FFF; }
#content .sidebar ul { margin: 0; list-style: none; }
#content .sidebar li { margin: 0 0 6px 0; }

#content .sidebar a.more { 
  font-size: 18px;
  line-height: 0;
  letter-spacing: -.08em;
  text-decoration: none;
  border-bottom: 1px solid #717171;
}

#content .sidebar a.more:hover { border-color: #FFF; }

#content .sidebar a.selected { color: #FFF; border-color: #FFF; }

/* MAIN - GLOBAL ---------------------------------------------------- */
#content .main h5 { font-size: 12px; letter-spacing: -.08em; text-transform: uppercase; }
#content .main ul { margin: 0; list-style: none; }
#content .main li { margin: 0 0 6px 0; }

#content .main a.more { 
  font-size: 18px;
  line-height: 0;
  letter-spacing: -.08em;
  text-decoration: none;
  border-bottom: 1px solid #717171;
}

#content .main a.more:hover { border-color: #FFF; }

/* HOME ---------------------------------------------------- */
#s-home #content .sidebar { 
  height: 239px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #808080;
}

#s-home #content .sidebar a.more { position: absolute; bottom: 18px; border-bottom: 1px solid #808080; }
#s-home #content .sidebar a.more:hover { border-color: #FFF; }
#s-home #content .work-list,
#s-home #content .blog-list { margin-bottom: 36px; }
#s-home #content .work-entry { margin-bottom: 0; }

/* WORK - GLOBAL ---------------------------------------------------- */
#s-work #content #banner { background: url(/images/bg_banner-work.png); }

/* WORK - LIST PAGE ---------------------------------------------------- */
#content .work-entry { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #808080; }

#content .work-entry a {
  height: 239px;
  display: block;
  text-decoration: none;
  background: #adadad;
}

#content .work-entry img { display: block; /* removes mystery bottom padding */ }

#content .work-entry h4 {
  margin: 5px 0 1px 5px;
  padding: 2px 20px 7px 5px;
  display: inline-block;
  font-size: 18px;
  letter-spacing: -.08em;
  color: #111;
  background: #9c9c9c;
}

#content .work-entry p {
  margin: 0 5px 5px 5px;
  padding: 2px 20px 2px 5px;
  display: inline-block;
  font: italic 12px Georgia, "Times New Roman", serif;
  color: #111;
  background: #9c9c9c;
}

/* WORK - DETAIL PAGE ---------------------------------------------------- */
#s-work.detail #banner { margin-bottom: 0; }
#s-work.detail #banner h2.client-name { margin: 0 0 -8px 0; }
#s-work.detail #banner a { font: italic 14px Georgia, "Times New Roman", serif; color: #fff; }
#s-work.detail #banner h3.project-name { margin: 40px 0 5px 0; }
#s-work.detail #banner p.project-date { font: italic 14px Georgia, "Times New Roman", serif; color: #333; }

#s-work.detail .sidebar {
  margin: 0;
  padding: 0 0 0 30px;
  min-height: 306px;
  height: auto !important;
  height: 306px;
  background: #444;
  border: none;
}

#s-work.detail .sidebar h5 { margin: 30px 0 15px 0; color: #111; }
#s-work.detail .sidebar ul { margin: 0 30px 0 0; }
#s-work.detail .sidebar li { font: italic 12px Georgia, "Times New Roman", serif; color: #111; }

#s-work.detail .main { margin: 36px 0 0 0; padding-left: 10px; position: relative; }
#s-work.detail .main #project-images { margin-bottom: 36px; width: 710px; height: 270px; }

#s-work.detail .main #project-images-nav {
  padding: 7px 0 0 11px;
  width: 699px;
  height: 43px;
  position: absolute;
  top: 220px;
  z-index: 100; /* so that we can sit on top of the jquery cycle z-index positioning */
  background: url(/images/trans_black-50.png);
}

#s-work.detail .main #project-images-nav a {
  width: 34px;
  height: 36px;
  float: left;
  display: block;
  text-indent: -9999px;
  background: url(/images/sprite_project-images-nav.png) no-repeat;
}

#s-work.detail .main #project-images-nav a#next { background-position: -34px 0; }
#s-work.detail .main #project-images-nav a#prev:hover { background-position: 0 -36px; }
#s-work.detail .main #project-images-nav a#next:hover { background-position: -34px -36px; }

#s-work.detail .main #project-description {
  -moz-column-count: 2;
	-moz-column-gap: 40px;
	-webkit-column-count: 2;
	-webkit-column-gap: 40px;
	column-count: 2;
	column-gap: 40px;
}

#s-work.detail .main #project-description p { line-height: 1.8em; }

#s-work.detail .main #project-quote {
  margin: 36px 0 36px -240px;
  width: 950px;
  min-height: 36px;
  height: auto !important;
  height: 36px;
  background: url(/images/bg_project-quote.png);
}

#s-work.detail .main #project-quote h5,
#s-work.detail .main #project-related h5 {
  margin: 0;
  padding: 8px 0 0 30px;
  width: 200px;
  float: left;
  font-size: 11px;
  color: #111;
}

#s-work.detail .main #project-quote p {
  margin: 0 40px 10px 40px;
  padding-top: 8px;
  width: 640px;
  float: right;
  font: italic 12px/1.8em Georgia, "Times New Roman", serif;
  color: #FFF;
  text-align: center;
}

#s-work.detail .main #project-quote span { color: #111; }

#s-work.detail .main #project-related { margin: 36px 0 0 -240px; width: 950px; background: url(/images/bg_project-related.png); }
#s-work.detail .main #project-related h5 { width: 210px; }
#s-work.detail .main #project-related .related-item { margin-top: 8px; height: 76px; }                                                       
#s-work.detail .main #project-related .related-item a { height: 67px; display: block; text-decoration: none; }
                                                       
#s-work.detail .main #project-related .related-item h4 {
  margin: 0 0 1px 0;
  padding: 2px 20px 7px 5px;
  display: inline-block;
  font-size: 18px;
  letter-spacing: -.08em;
  color: #111;
  background: #9c9c9c;
}

#s-work.detail .main #project-related .related-item p {
  margin: 0 0 0 0;
  padding: 2px 20px 2px 5px;
  display: inline-block;
  font: italic 12px Georgia, "Times New Roman", serif;
  color: #111;
  background: #9c9c9c;
}

/* SERVICES ---------------------------------------------------- */
#s-services #content #banner { background: url(/images/bg_banner-services.jpg); }
#s-services .service-entry { margin-bottom: 36px; padding-bottom: 18px; height: 211px; overflow: hidden; border-bottom: 1px solid #808080; }
#s-services .service-entry h5 { margin: 0 0 14px 0; }
#s-services .service-entry p { margin-right: 10px; font: 14px/24px Georgia, "Times New Roman", serif; }
#s-services .service-entry ul { margin: 0 10px 20px 0; }
#s-services .service-entry li { font: italic 12px Georgia, "Times New Roman", serif; color: #fff; }
#s-services .service-entry .service-related h5 { margin: 0 0 18px 0; color: #fff; }

#s-services.mobile-web .main { background: url(/images/bg_mobile-web-main.jpg) top right no-repeat; }
#s-services.mobile-web .main p { font: 14px/21px Georgia, "Times New Roman", serif; }
#s-services.mobile-web .mobile-details { margin-bottom: 18px; }
#s-services.mobile-web .mobile-details li { font: italic 12px Georgia, "Times New Roman", serif; color: #111; }
#s-services.mobile-web .mobile-info h4 { margin: 18px 0 0 0; width: 150px; height: 54px; text-indent: -9999px; background: url(/images/tr_mobile-web-price.png) no-repeat; }
#s-services.mobile-web .mobile-specs { padding-top: 110px; }
#s-services.mobile-web .mobile-add-ons p em { font-size: 12px; color: #000; }
#s-services.mobile-web #get-started, #s-services.additional #get-started { margin: 36px 0 0 -240px; width: 950px; background: url(/images/bg_project-related.png); }
#s-services.mobile-web #get-started h5, #s-services.additional #get-started h5 { margin: 0; padding: 8px 0 0 30px; width: 210px; float: left; font-size: 11px; color: #111; }
#s-services.mobile-web #get-started .action, #s-services.additional #get-started .action { margin-top: 8px; height: 76px; }                                                       
#s-services.mobile-web #get-started .action a, #s-services.additional #get-started .action a { height: 67px; display: block; text-decoration: none; }                                                     
#s-services.mobile-web #get-started .action h4, #s-services.additional #get-started .action h4 { margin: 0 0 1px 0; padding: 2px 20px 7px 5px; display: inline-block; font-size: 18px; letter-spacing: -.08em; color: #111; background: #9c9c9c; }
#s-services.mobile-web #get-started .action p, #s-services.additional #get-started .action p { margin: 0 0 0 0; padding: 2px 20px 2px 5px; display: inline-block; font: italic 12px Georgia, "Times New Roman", serif; color: #111; background: #9c9c9c; }

#s-services.additional .main p { font: 14px/21px Georgia, "Times New Roman", serif; }
#s-services.additional .main ul { margin: 0 0 18px 0; padding: 0; }
#s-services.additional .main li { font: italic 12px Georgia, "Times New Roman", serif; color: #111; }
#s-services.additional .packages { margin-bottom: 18px; padding: 0; width: 710px; float: left; }
#s-services.seo .packages { padding: 0; margin: 0; width: 674px; }
#s-services.additional .packages h5 { margin-bottom: 10px; }
#s-services.additional .packages .package-entry { padding: 11px; margin: 0 10px 15px 0; width: 208px; height: 300px; float: left; background: #808080; }
#s-services.seo .packages .package-entry { padding: 18px; margin-bottom: 15px; width: 674px; height: auto; float: left; display: block; background: #808080; }
#s-services.additional .packages .package-entry p { color: #111; }
#s-services.additional .packages .custom-entry { padding: 11px 11px 0; margin-bottom: 15px; width: 688px; height: auto; float: left; background: #808080; }
#s-services.additional .packages div.last { margin-right: 0; }
#s-services.additional .packages ul li ul li { margin-top: 6px; }

/* ABOUT - GLOBAL ---------------------------------------------------- */
#s-about #content #banner { background: url(/images/bg_banner-about.jpg); }
#s-about .main h4 { margin: 0 0 -4px 0; font-size: 36px; letter-spacing: -.1em; color: #333; }
#s-about .main p { font: 14px/21px Georgia, "Times New Roman", serif; }
#s-about .main p.intro { font-size: 18px; font-style: italic; line-height: 22px; }
#s-about .main .col-2 p { font: italic 12px/18px Georgia, "Times New Roman", serif; color: #FFF; }

/* ABOUT - OVERVIEW ---------------------------------------------------- */
#s-about.overview .main blockquote { margin: 0; }
#s-about.overview .main blockquote p { padding: 0 20px; font: italic 18px/24px Georgia, "Times New Roman", serif; color: #000; border-left: 10px solid #000; }
#s-about.overview .main .col-2 { margin-top: 36px; }

/* ABOUT - PEOPLE ---------------------------------------------------- */
#s-about.people .main span.title { font: italic 12px/18px Georgia, "Times New Roman", serif; color: #000; }
#s-about.people .main .people-entry a { display: block; text-decoration: none; }
#s-about.people .main .people-entry a img { display: block; /* removes mystery bottom padding */ }
#s-about.person .main img { margin-bottom: 17px; display: block; /* removes mystery bottom padding */ }
#s-about.person .main .col-1 p.quote { margin: 28px 0 18px; font-size: 18px; font-style: italic; line-height: 24px; }
#s-about.person .main .col-2 { margin-top: 68px; }
#s-about.person .main .col-2 h5 { margin: 18px 0 0 0; font-size: 11px; }

/* ABOUT - PROCESS ---------------------------------------------------- */
#s-about.process .main h4 { margin-bottom: 15px; }
#s-about.process .main h4 span { color: #FFF; }
#s-about.process .main .step { margin-bottom: 36px; }
#s-about.process .main .col-2 h6 { margin-bottom: 5px; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
#s-about.process .main .col-2 ul { margin: 0; }
#s-about.process .main .col-2 li { font: italic 12px Georgia, "Times New Roman", serif; color: #FFF; }

/* BLOG - GLOBAL ---------------------------------------------------- */
#s-blog #content #banner { background: url(/images/bg_banner-blog.jpg); }

#content .blog-entry {
  padding-bottom: 18px;
  height: 239px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #808080;
}

#content .blog-entry .date,
#content .blog-detail .date { margin: 0 0 20px 0; display: block; font: italic 12px Georgia, "Times New Roman", serif; }

#content .blog-entry h4.title,
#content .blog-detail h4.title {
  margin: 0;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: -.05em;
}

#content .blog-entry .comment-count,
#content .blog-detail .comment-count { margin: 0 0 20px 0; display: block; font: italic 12px Georgia, "Times New Roman", serif; }
#content .blog-entry .comment-count a,
#content .blog-detail .comment-count a { text-decoration: none; }
#content .blog-entry .body p { margin: 5px 0; padding-right: 5px; }
#content .blog-entry .footer { position: absolute; bottom: 18px; font: italic 12px Georgia, "Times New Roman", serif; }

#content .twitter .body p, 
#content .quote .body p { font: italic 20px/24px Georgia, "Times New Roman", serif; color: #444; }

/* BLOG - LIST ---------------------------------------------------- */
#s-blog.list .main .feature { height: 515px; }
#s-blog.list .main .feature h4.title { font-size: 22px; }
#s-blog.list .main .blog-entry { margin-bottom: 18px; }

/* BLOG - DETAIL ---------------------------------------------------- */
#s-blog.detail .main .blog-detail { }
#s-blog.detail .main .blog-detail h4.title { margin-top: -4px; font-size: 22px; }
#s-blog.detail .main .blog-detail img { margin-bottom: 18px; }
#s-blog.detail .main .blog-detail ul { margin: 0 0 18px 15px; list-style-type: square; }

#s-blog.detail .main .blog-author { }
#s-blog.detail .main .blog-author h5 { margin-bottom: 18px; }
#s-blog.detail .main .blog-author img.author-image { margin: 0 0 4px 0; border: 3px solid #f7e800; border-right-width: 125px; }
#s-blog.detail .main .blog-author p { margin-top: 0; }
#s-blog.detail .main .blog-author p.bio { font: italic 12px/18px Georgia, "Times New Roman", serif; }
#s-blog.detail .main .blog-author h5.info { margin-bottom: 0; font-size: 10px; }

#s-blog.detail .main .twitter-status { margin-top: 18px; padding-top: 18px; border-top: 10px solid #808080; }
#s-blog.detail .main .twitter-status p span { font: italic 12px/18px Georgia, "Times New Roman", serif; }

#s-blog.detail .main #comments { padding-top: 18px; border-top: 10px solid #808080; }
#s-blog.detail .main #comments .comment { margin-bottom: 18px; float: left; border-bottom: 1px solid #808080; }
#s-blog.detail .main #comments .comment-author { width: 150px; margin-right: 10px; float: left; }
#s-blog.detail .main #comments .comment-author p { margin: 0; font-weight: bold; }

#s-blog.detail .main #comments .comment-body { 
  margin: 0 0 18px 0;
  padding: 0 80px 0 30px;
  width: 199px;  
  min-height: 70px;
  height: auto !important;
  height: 70px;
  float: right;
  position: relative; 
  border-left: 1px solid #808080;
}

#s-blog.detail .main #comments .comment-body img { position: absolute; right: 0; top: 0 }
#s-blog.detail .main #comments form { padding-top: 18px; width: 470px; float: left; border-top: 10px solid #808080; }

/* CONTACT ---------------------------------------------------- */
#s-contact #content #banner { background: url(/images/bg_banner-contact.jpg); }
#s-contact #content .col-1 h4 { margin: 0 0 15px 0; font-size: 12px; letter-spacing: -.08em; text-transform: uppercase; }

#s-contact #content .col-2 h4 { 
  margin: 10px 0 20px 0;
  font-size: 20px;
  line-height: 0;
  letter-spacing: -.08em;
  text-align: right;
  text-transform: uppercase;
}

#s-contact #content .col-2 h4 a { color: #FFF; display: block; text-decoration: none; border-bottom: 1px solid #808080; }
#s-contact #content .col-2 h4 a span { color: #333; }

/* FORMS ---------------------------------------------------- */
.main form {  }
.main div.field { margin-bottom: 9px; width: 470px; float: left; }
.main div.field label { padding-top: 7px; width: 65px; float: left; }
.main div.field input { margin-right: 15px; padding: 5px; width: 200px; float: left; border: 1px solid #FFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
.main div.field span { padding-top: 9px; display: block; font: italic 11px Georgia, "Times New Roman", serif; }
.main div.field textarea { margin: 0; padding: 5px; width: 458px; height: 190px; border: 1px solid #FFF; font: 14px Arial; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
.main div.field select { margin-right: 15px; padding: 4px 5px; width: 212px; float: left; border: 1px solid #FFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
.main div.utility { margin: 0 0 18px 0; padding: 10px; width: 450px; float: left; background: #adadad; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
.main div.utility input { width: auto; }
.main div.submit input { padding: 5px 10px; float: none; font-size: 11px; font-weight: bold; text-transform: uppercase; border: 2px solid #FFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
.main div.block label { padding-top: 7px; width: auto; float: none; }
.main form.rfp div.field label { width: 85px; }
.main span.captcha-hints { font-weight: normal; }
.win.ff2 p.field select, .win.ff3 p.field select { width: 274px; }  /* targeting FF2 & FF3 for Windows */

/* ERROR ---------------------------------------------------- */
#s-error #content #banner { background: url(/images/bg_banner-error.png); }
#s-error .main h4 { margin: 0 0 15px 0; font-size: 12px; letter-spacing: -.08em; text-transform: uppercase; }
#s-error .main ul { margin: 0 10px 36px 0; }
#s-error .main li { font: italic 12px Georgia, "Times New Roman", serif; color: #000; }


/* ---------------------------------------------------------------------------------------------

	footer

--------------------------------------------------------------------------------------------- */

#footer { margin-top: 72px; padding: 18px 0; background: #FFF; }

#footer .branding { 
  margin-left: 30px;
  padding: 0; 
  width: 200px;
  height: 250px;
  display: inline; /* IE6 double-margin hack */
  position: relative;
/*  background: #f7e800;*/
}

#footer .branding h3 { 
  margin: 5px 0 0 0;
  width: 161px;
  height: 25px;
  text-indent: -9999px;
  background: #FFF url(/images/tr_logo-small.png) no-repeat;
}

#footer .branding p {
  margin: 0;
  position: absolute;
  left: 5px;
  bottom: 10px;
  font: italic 10px Georgia, "Times New Roman", serif; color: #000;
  color: #000;
}

#footer .address { }

#footer h5 {
  margin-bottom: 18px;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: -.08em;
  border-bottom: 5px solid #f7e800;
}

#footer p { line-height: 16px; }
#footer p strong { font: italic 13px Georgia, "Times New Roman", serif; color: #000; }

#footer a:hover { color: #000; background: #f7e800; }