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

  general setup

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

body {
  margin: 0; /* removes default margin in screen.css */
  background: #FFF url(../images/public/bg_main.png) repeat-x fixed;
  color: #666;
}

a, a:visited { color: #66cccc; outline: none; }
a:hover { color: #66cccc; text-decoration: none; }
a:focus, a:active, input, select { outline: none; }


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

	background wrappers

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

#wrapper-clouds { background: url(../images/public/bg_wrapper-clouds.png) top center no-repeat fixed; }
#wrapper-content { background: url(../images/public/bg_wrapper-content.png) repeat-x; }
#wrapper-content-secondary { background: url(../images/public/bg_wrapper-content-secondary.png) repeat-x; }


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

	main container

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

.container {
  background: url(../images/public/bg_container-sub.png) top right no-repeat;
}

#s-home .container {
  background: url(../images/public/bg_container.png) top left no-repeat;
}


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

	utility bar - rss + twitter

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

#utility-bar { height: 42px; position: relative; /* for positioning login button below */ }

#utility-bar a {
  height: 38px;
  position: absolute;
  top: 0px;
  display: block;
  text-indent: -9999px;
}

a#rss {
  width: 38px;
  right: 110px;
  background: url(../images/public/btn_rss.png) 0 0 no-repeat;
}

a#twitter {
  width: 38px;
  right: 70px;
  background: url(../images/public/btn_twitter.png) 0 0 no-repeat;
}

a#rss:hover { background-position: 0 -38px; }
a#twitter:hover { background-position: 0 -38px; }


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

	header

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

#header {
  margin-top: 12px;
  height: 126px;
  background: url(../images/public/bg_header.png) 0 54px no-repeat; 
  position: relative; /* absolutely relative positioning for logo and nav */
}

#header h1  {
  width: 380px;
  height: 108px;
  position: absolute;
  left: 36px;
}

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

#header ul.tabs {
  margin: 0;
  position: absolute;
  top: 52px;
  left: 450px;
}

#header ul.tabs a {
  height: 54px;
  display: block;
  text-decoration: none;
  text-indent: -9999px;
  background: url(../images/public/bg_nav.png) no-repeat;
  border: none;
}

#header ul.tabs li#about a { width: 107px; }
#header ul.tabs li#serviceswp a { width: 192px; background-position: -107px 0; }
#header ul.tabs li#contacting-us a { width: 163px; background-position: -299px 0; }


#header ul.tabs li#about a:hover { background-position: 0 -54px; }
#header ul.tabs li#serviceswp a:hover { background-position: -107px -54px; }
#header ul.tabs li#contacting-us a:hover { background-position: -299px -54px; }



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

	homepage

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

/* SERVICES ---------------------------------------------------- */

#services {
  margin: 54px 0 0 40px;
  width: 880px;
  height: 450px;
  position: relative; /* for positioning all nested tab containers */
  background: url(../images/public/bg_services.png) left bottom no-repeat;
}

#services .content {
  padding-left: 40px;
  width: 480px;
  height: 319px;
  overflow: hidden;
  float: left;
}

#services .graphic {
  width: 360px;
  height: 319px;
  float: left;
}

#services h2 {
  margin: 90px 0 25px 0;
  width: 430px;
  text-indent: -9999px;
}

#services p {
  padding: 0 15px;
  font-size: 14px;
  letter-spacing: -.01em;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
}

#services-design,
#services-distro,
#services-online,
#services-brand,
#services-media { display: none; position: absolute; top: 0; }

#services #services-main h2 { height: 93px; background: url(../images/public/tr_services-main-h2.png) no-repeat; }
#services #services-design h2 { height: 93px; background: url(../images/public/tr_services-design-h2.png) no-repeat; }
#services #services-distro h2 { height: 93px; background: url(../images/public/tr_services-distro-h2.png) no-repeat; }
#services #services-online h2 { height: 93px; background: url(../images/public/tr_services-online-h2.png) no-repeat; }
#services #services-brand h2 { height: 93px; background: url(../images/public/tr_services-brand-h2.png) no-repeat; }
#services #services-media h2 { height: 93px; background: url(../images/public/tr_services-media-h2.png) no-repeat; }

#services #services-main p { font-size: 18px; line-height: 1.3; }
/* 
#services #services-main .graphic,
#services #services-brand .graphic { position: relative; background: url(../images/public/pic_services-bg.png); }
#services #services-main .graphic img,
#services #services-brand .graphic img { position: absolute; top: 52px; left: 51px; }
*/

#services ul.tabs {
  clear:both;
  margin: 0;
  position: absolute;
  bottom: 58px;
}

#services ul.tabs a {
  height: 73px;
  display: block;
  text-decoration: none;
  text-indent: -9999px;
  background: url(../images/public/bg_services-nav.png) no-repeat;
  border: none;
}

#services ul.tabs li#serv-design a { width: 139px; }
#services ul.tabs li#serv-distro a { width: 138px; background-position: -139px 0; }
#services ul.tabs li#serv-online a { width: 118px; background-position: -277px 0; }
#services ul.tabs li#serv-brand a { width: 133px; background-position: -395px 0; }
#services ul.tabs li#serv-media a { width: 126px; background-position: -528px 0; }
#services ul.tabs li#serv-contact a { width: 226px; background-position: -654px 0; }

#services ul.tabs li#serv-design a:hover,
#services ul.tabs li#serv-design a.selected { background-position: 0 -73px; }
#services ul.tabs li#serv-distro a:hover,
#services ul.tabs li#serv-distro a.selected { background-position: -139px -73px; }
#services ul.tabs li#serv-online a:hover,
#services ul.tabs li#serv-online a.selected { background-position: -277px -73px; }
#services ul.tabs li#serv-brand a:hover,
#services ul.tabs li#serv-brand a.selected { background-position: -395px -73px; }
#services ul.tabs li#serv-media a:hover,
#services ul.tabs li#serv-media a.selected { background-position: -528px -73px; }
#services ul.tabs li#serv-contact a:hover,
#services ul.tabs li#serv-contact a.selected { background-position: -654px -73px; }

/* OFFERS -------------------------------------------------------------------------------------------- */

#offers-container {
	margin:0 0 20px 40px;
	float:left;
}

#offers-container h3 {
	padding:0 0 0 20px;
}

#offers-container h3 a {
	text-decoration:none;
	color:#009999;
}


#offer1 {
	width:260px;
	float:left;
	padding:40px 10px 0 0;
	height:280px;
	margin:0px 40px 0 0;
	background: url(../images/public/bg_offer.png) no-repeat;
}

#offer2 {
	width:260px;
	float:left;
	padding:40px 10px 0 0;
	height:280px;
	margin:0px 40px 0 0;
	background: url(../images/public/bg_offer.png) no-repeat;
}

#offer3 {
	width:260px;
	float:left;
	padding:40px 10px 0 0;
	height:280px;
	margin:0px 0px 0 0;
	background: url(../images/public/bg_offer.png) no-repeat;
}

ul.offer {
	list-style-type:none;
	line-height:1.5;
}




/* CONTENT SECONDARY, QUOTES, DYNSIDEBAR, TWITTER ---------------------------------------------------- */

#content-secondary {
  margin: 0 auto; padding-top: 36px; width: 950px;
}



#quotes .quote { margin: 12px 0; text-align: left; }

#quotes .quote h4 { 
  margin: 0 0 .5em 0;
  height: auto; 
  font-size: 16px; 
  font-weight: bold;
}

#quotes .quote h4 a { 
  color: #000;
  text-decoration:none;
}


#quotes .quote p {
  margin: 0 0 9px;
  padding-bottom: 9px;
  font-size: 14px;
  font-family: Georgia, serif;
  color: #404040;
  border-bottom: 1px solid #CCC;
}

#dynsidebar {
  float:left;
  padding-bottom: 100px;
  min-height: 486px;
  background: url(../images/public/bg_dynsidebar.png) 40px 0 no-repeat;
}

#dynsidebar ul {
  margin: 0 0 0 26px;
  list-style: none;
}

#dynsidebar li {
  margin: 20px 0 20px 0px;
}

#dynsidebar ul.twitter { 
  padding-top:5px;
  width: 260px;
  display: block;
  float:left;
  text-decoration: none;
  border: none;
  background: url(../images/public/bg_dynsidebar_twitter.png) top right no-repeat;
}

#dynsidebar h2.widgettitle { 
  margin:0 0 0 26px;
  height: auto; 
  font-size: 16px; 
  font-weight: bold;
  color: #000;
  text-decoration:none;
  width: 260px;
}


#dynsidebar h2.widgettitle a { 
  font-size: 16px; 
  font-weight: bold;
  color: #000;
  text-decoration:none;
  width: 260px;
}

li.twitter-item span {
  border-bottom: 0px; 
  color: #aaa;
}



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

	content

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

#content {
  position: relative; /* for positioning signup button below */
}

#content p.button a {
  width: 190px;
  height: 140px;
  position: absolute;
  top: 0px;
  right: 75px;
  display: block;
  text-indent: -9999px;
}

#content p.contact a { background: url(../images/public/btn_contact.png) no-repeat; }
#content p.questions a { background: url(../images/public/btn_questions.png) no-repeat; }

#content h2 {
  margin: 72px 0 27px 40px;
  height: 45px;
  text-indent: -9999px;
}



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

	content-sidebar

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

#content-sidebar {
  margin: 0 40px 100px 0;
  padding-top: 36px;
  width: 200px;
  float: left;
  display: inline; /* double margin hack */
  background: url(../images/public/bg_content-sidebar.png) no-repeat;
}

#content-sidebar ul {
  margin: 0;
  list-style: none;
}

#content-sidebar li a {
  padding: 10px 20px;
  display: block;
  font-size: 15px;
  font-weight: bold;
  color: #777;
  text-decoration: none;
  line-height: 1;
  border-top: 1px solid #FFF;
  border-bottom: 1px solid #eaeaea;
}

#content-sidebar li a:hover, #content-sidebar li a.selected { color: #444; background-color: #FFF; }

/* FEATURES, WHY, COMPANY, SECURITY ---------------------------------------------------- */
#s-features #content-sidebar,
#s-why #content-sidebar,
#s-company #content-sidebar,
#s-security #content-sidebar,
#s-support #content-sidebar {
  min-height: 400px;
  height: auto !important;
  height: 400px;  
}

/* ACCOUNT REGISTRATION ---------------------------------------------------- */
#s-signup.registration #content-sidebar {
  margin: 68px 40px 0 0;
  padding: 38px 10px 100px 20px;
  width: 210px;
  min-height: 300px;
  height: auto !important;
  height: 300px;
  float: left;
  background: url(../images/public/bg_content-sidebar-right.png) no-repeat;
}

#s-signup.registration #content-sidebar h4 { font-weight: bold; }

/* REPORT A PASSING ---------------------------------------------------- */
#s-report #content-sidebar {
  margin: 68px 40px 0 0;
  padding: 38px 10px 100px 20px;
  width: 210px;
  min-height: 300px;
  height: auto !important;
  height: 300px;
  float: left;
  background: url(../images/public/bg_content-sidebar-right.png) no-repeat;
}

#s-report #content-sidebar h4 { font-weight: bold; }


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

	content-main

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

#content-main {
  margin-right: 40px;
  padding-top: 36px;
  width: 630px;
  float: left;
}

#content-main h3 { 
  margin: 10px 0 34px 0;
  font-size: 24px;
}

#content-main h4 {
  height: auto;
  font-size: 18px;
  letter-spacing: -.01em;
}

#content-main p {
  font-size: 14px;
}

#content-main p img { float: none; margin: 0 30px 1.5em 0; padding: 0; }

/* PRICING & SIGNUP ---------------------------------------------------- */
#s-signup #content-main {
  margin: 0 40px;
  width: 870px;
  float: none;
}

#s-signup #content-main h3.sifr { padding-left: 20px; }
#s-signup.registration #content-main h3.sifr { padding-left: 0; }

#s-signup .plan {
  margin-bottom: 36px;
  padding-bottom: 4px; /* accounts for difference in height due to .lifetime border-width */
  width: 238px;
  float: left;
  border: 1px solid #dbedfa;
}

#s-signup .plan h3 { margin: 0; height: 89px; text-indent: -9999px; }

#s-signup .plan ul {
  margin: 0 0 20px 0;
  padding: 10px 15px;
  list-style: none;
  font-size: 15px;
  font-weight: bold;
  color: #777;
}

#s-signup .plan li { border-bottom: 1px solid #CCC; }
#s-signup .plan li span.help { cursor: pointer; text-decoration: underline; }
#s-signup .plan li span.help:hover { text-decoration: none; }
#s-signup .plan strong { color: #4aac02; }
#s-signup .plan p { margin: 0; padding: 5px 15px 10px; }
#s-signup .plan a { margin: 0 12px 10px; width: 130px; height: 45px; display: block; }

#s-signup .lifetime { padding-bottom: 0; width: 230px; border: 5px solid #a7d4f2; }
#s-signup .lifetime h3 { height: 85px; background: url(../images/public/tr_plan-lifetime.png) no-repeat; }
#s-signup .lifetime ul { padding: 10px 12px; }
#s-signup .lifetime p { padding: 5px 12px 10px; }

#s-signup .annual { border-left-color: #FFF; }
#s-signup .annual h3 { background: url(../images/public/tr_plan-annual.png) no-repeat; }
#s-signup .free { border-left-color: #FFF; border-top-color: #FFF; border-bottom-color: #FFF; }
#s-signup .free h3 { background: url(../images/public/tr_plan-free.png) no-repeat; }

#s-signup #all-plans {
  padding: 18px;
  width: 114px;
  height: 234px;
  float: left;
  font-size: 11px;
}

#s-signup #all-plans h5 { margin-bottom: 0; }
#s-signup #all-plans ul { margin: 5px 12px 0; }

#s-signup #plan-faq {
  padding: 20px 20px 50px;
  width: 510px;
  background: url(../images/public/bg_plan-faq.png) no-repeat;
}

#s-signup #plan-faq h4 { margin: 0; font-size: 18px; }

/* ACCOUNT REGISTRATION & REPORT A PASSING ---------------------------------------------------- */
#s-signup.registration #content-main,
#s-report #content-main {
  margin: 0 40px;
  padding-left: 20px;
  width: 540px;
  float: left;
  display: inline; /* double margin hack */
}

#s-signup.registration #content-main p.credit-info { width: 175px; float: right; font-size: 12px; }
#s-signup.registration #content-main p.credit-info img { margin: 20px 0 0 0; }

/* FORMS ---------------------------------------------------- */
#content-main .input-module {
  margin-bottom: 18px;
  padding: 15px;
}

#content-main .box { background: #efefef; border: 1px solid #aaa; }
#content-main .no-box { margin-bottom: 0; background: none; border-top: 5px solid #333; }
#content-main .buttons { padding: 0px;}
#content-main a.admin { padding: 5px; color: #FF0000; }

#content-main .input-module .field { margin-bottom: 24px; }
#content-main .input-module .inline { margin-right: 15px; float: left; }
#content-main .input-module .last { margin-bottom: 10px; }

#content-main .input-module h4 {
  margin: 0 0 3px 0;
  height: 1.25em;
  font-size: 14px;
  font-weight: bold;
  color: #666;
}

#content-main .input-module .field input {
  padding: 3px;
  width: 424px;
  font: bold 18px"Helvetica Neue", Helvetica, Arial, sans-serif;
  border: 2px solid #CCC;
}

#content-main .input-module .field input[type="checkbox"] { width: auto; } /* for safari */
#content-main .input-module .field p { margin: 0; font-size: 12px; }
#content-main .input-module .field p.agree { margin-top: 10px; padding-top: 10px; border-top: 3px solid #CCC; }
#content-main .input-module .field input:focus { background-color: #efefef; border-color: #BBB; }
#content-main .input-module .field .inline { margin-right: 15px; float: left; }
#content-main .input-module .field input.inline { margin-bottom: 5px; width: 250px; }
#content-main .input-module .field input.no-label { margin-bottom: 5px; }
#content-main .input-module .field label { display: block; color: #666; }
#content-main .input-module .field select { font-size: 14px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
#content-main .input-module .medium input { width: 300px; }
#content-main .input-module .short input { width: 200px; }
#content-main .buttons input { }

#content-main .input-module .field input.LV_invalid_field { border-color: red; } 
#content-main .input-module .field span.LV_validation_message { display: block; font-weight: bold; color: red; }

#content-main .input-module .field input#checkbox-terms, #content-main .input-module .field input#checkbox-disclaimer { width: 20px; }

/* COMPANY PAGES ---------------------------------------------------- */
#s-company .block { margin-bottom: 36px; }

#s-company .block h3 { margin-bottom: 0; }

#s-company .block ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

#s-company .block ul li {
  padding: 10px 0;
  border-bottom: 1px solid #dbedfa;
}

#s-company .block ul li h4 { margin: 0; }

#s-company .kit { border-color: #FFF; }
#s-company .kit p { font-size: 12px; }

/* SUPPORT ---------------------------------------------------- */
#s-support #content-main ol { margin-left: 10px; }

#s-support #content-main.legal h4 { margin-bottom: 0; }
#s-support #content-main.legal p { font-size: 12px; }
#s-support #content-main.legal ul.alpha { list-style-type: upper-alpha; }

#content-main.accordion h4 { margin: 0; padding-top: 18px; cursor: pointer; }
#content-main.accordion h4.selected { color: #66cccc; }
#content-main.accordion p { margin: 0; padding-top: 18px; }

#content-main.accordion-help h4 { margin: 10px 0; color: #66cccc; }
#content-main.accordion-help h5 { margin: 0 0 0 10px; padding-top: 5px; cursor: pointer; }
#content-main.accordion-help h5.selected { color: #66cccc; }
#content-main.accordion-help p { margin: 0 0 0 10px; padding-top: 5px; }
#content-main.accordion-help ul li { margin: 0 0 0 10px; }
#content-main.accordion-help ol li { margin: 0 0 0 20px; }


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

	footer

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

#wrapper-footer { margin-top: 0px; background: url(../images/public/bg_wrapper-content-secondary.png) repeat-x; }

#footer { margin: 0 auto; padding: 34px 0 54px 20px; width: 950px; }

#footer ul { margin: 0; list-style: none; border-top: 1px solid #d4d4d4; }

#footer li a {
  padding: 1px 18px 1px 2px;
  display: block;
  text-decoration: none;
  border-bottom: 1px solid #d4d4d4;
  color: #444;
}

#footer li a:hover { color: #000; }

#footer p { margin: 0; padding: 0; font-size: 10px; font-weight: bold; text-align: center; }

#footer p.logo a {
  width: 210px;
  height: 80px;
  display: block;
  text-indent: -9999px;
  background: url(../images/public/tr_logo-footer.png) no-repeat;
  position: relative;
}

#footer p img { margin: 15px 0 5px; padding: 0; }

#footer p {
  width: 210px;
  color: #aaa;
}

#footer p a {
  color: #aaa;
  text-decoration: none;
}