/* ------------------------------------------------------------
	Email Standards Project - 2007 - v1.0
	by Luke Stevens
	lukestevensdesign.com
------------------------------------------------------------ */
         
/* ------------------------------------------------------------
	General
------------------------------------------------------------ */

* {padding:0;margin:0;}
body {font-family:helvetica, arial, sans-serif;color:#545454;text-align:center;font-size:62.5%;background: url(/images/esp/page-bgnd-tile.png);}
html>body {font-size:10px;}

.to-left {float:left;}
.to-right {float:right;}

img {border:0;}                    

a {color:#333;font-weight:bold;outline:none;}
a:hover {text-decoration:none;}

.clear {clear:both;font-size:0px;line-height:0px;}
.clearfix:after {content: ".";clear: both;height: 0;visibility: hidden;display: block;}
.clearfix {display: inline-block; /* Fixes IE/Mac */ }

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/* ------------------------------------------------------------
	General type + lists
------------------------------------------------------------ */

p {font-size:1.3em;line-height:1.45em;margin-bottom:16px;}

blockquote {margin:0 25px;color:#666;}

h2 {font-size:2.8em;color:#00a4f0;margin-bottom:9px;margin-left:;font-family:"century gothic", helvetica, arial, sans-serif;}
h3 {font-size:1.8em;color:#00a4f0;}

h4, h5 {font-size:1.6em;}

ul {list-style-type:none;font-size:1.3em;line-height:1.5em;}
ul a {}

ol {padding-left:25px;padding-bottom:10px;margin-right:20px;}
ol li {font-size:1.3em;margin-bottom:20px;}
ol li p {font-size:1.0em;margin-bottom:5px;}

#content ul {margin:0 0 20px 38px;}
#content ul li {background: url(/images/esp/list-bullet-darkgrey.gif) 0px 7px no-repeat;padding-left:15px;margin-left:5px;color:#333;padding-bottom:3px;}
#content ul li a {font-weight:normal;}

.static-page h3, #blog-single-entry h3 {padding-top:9px;font-size:1.9em;margin-bottom:7px;}
.static-page h4, #blog-single-entry h4 {padding-top:5px;margin-bottom:7px;font-size:1.5em;}
.static-page h5, #blog-single-entry h5 {}

small {font-size:0.9em;}

p.edit-entry {margin-top:20px;margin-bottom:10px;}


/* ------------------------------------------------------------
	Layout
------------------------------------------------------------ */

#outerer {background: url(/images/esp/page-bgnd-top.png) repeat-x;min-width:875px;}
#outer {background: url(/images/esp/page-bgnd-bot-tile.png) left bottom repeat-x;min-width:875px;}
#wrapper {margin:0 auto;text-align:left;width:815px;padding:20px 30px;}

#header {margin-bottom:20px;}

	#logo {float:left;background: url(/images/esp/esp-logo.png) no-repeat;width:229px;height:140px;}
		#logo h1 {text-indent:-9999px;}
		#logo h1 a {display:block;width:229px;height:140px;}

	#nav {float:right;background: url(/images/esp/bgnd-white-35-tile.png);border-bottom:1px solid #cad5e4;border-top:1px solid #e4e4e4;padding:10px 7px 10px 10px;margin-top:2px;width:550px;font-family:"century gothic", helvetica, arial, sans-serif;}
		#nav ul#primary-nav li {text-indent:-9999px;}

		#nav a {display:block;margin-bottom:2px;line-height:1.2em;padding:1px 0 4px 0;height:15px;}
		#nav a.about {background:url(/images/esp/nav-primary.png) -0px 0px no-repeat;}
		#nav a.why {background:url(/images/esp/nav-primary.png) -0px -22px no-repeat;}
		#nav a.do {background:url(/images/esp/nav-primary.png) -0px -43px no-repeat;}
		#nav a.clients {background:url(/images/esp/nav-primary.png) -0px -64px no-repeat;}
		#nav a.blog {background:url(/images/esp/nav-primary.png) -0px -84px no-repeat;}
		
		#nav ul.about a.about, #nav a.about:hover  {background-color:#ecf8fe;}
		#nav ul.why a.why, #nav a.why:hover  {background-color:#eaf8fe;}
		#nav ul.what-you-can-do a.do, #nav a.do:hover  {background-color:#e8f6fe;}
		#nav ul.clients a.clients, #nav a.clients:hover  {background-color:#e6f4fe;}
		#nav ul.blog a.blog, #nav a.blog:hover  {background-color:#e4f3fe;}

		#nav a.active {background-color:#e6f4fe;}
		#nav a:hover {background-color:#e6f4fe;}
			
		ul#primary-nav {float:left;width:260px;}
		ul#primary-nav a {color:#f55b00;text-decoration:none;} 
		
		#secondary-nav-wrapper {float:right;width:273px;}
		ul.secondary-nav {width:260px;}
		#nav ul.secondary-nav li a {padding-left:6px;padding-right:4px;
								color:#9e9e9e;text-decoration:none;text-indent:-9999px;} 
		
		/* client secondary nav */ 
		#secondary-nav-wrapper ul.to-left {width:110px;margin-right:1px;}
		#secondary-nav-wrapper ul.to-right {width:159px;}
		
		#nav a.aol-webmail, #nav a.apple-mail, #nav a.dotmac, #nav a.entourage, #nav a.gmail, #nav a.lotus-notes-8, #nav a.microsoft-outlook-2007, #nav a.eudora,	#nav a.thunderbird, #nav a.windows-live-hotmail, #nav a.windows-live-mail, #nav a.windows-mail, #nav a.yahoo-mail-classic, #nav a.yahoo-mail
		{background-image: url(/images/esp/nav-secondary-clients.png);}

		#nav a.aol-webmail {background-position:0px 0px;}
		#nav a.apple-mail {background-position:0px -21px;}
		#nav a.dotmac {background-position:0px -43px;}
		#nav a.entourage {background-position:0px -64px;}
		#nav a.gmail {background-position:0px -85px;}
		#nav a.lotus-notes-8 {background-position:0px -106px;}
		#nav a.microsoft-outlook-2007 {background-position:0px -127px;}

		#nav a.eudora {background-position:-115px 0px;}
		#nav a.thunderbird {background-position:-115px -21px;}
		#nav a.windows-live-hotmail {background-position:-115px -43px;}
		#nav a.windows-live-mail {background-position:-115px -64px;}
		#nav a.windows-mail {background-position:-115px -85px;}
		#nav a.yahoo-mail-classic {background-position:-115px -106px;}
		#nav a.yahoo-mail {background-position:-115px -127px;}
		
		/* active section */
		#nav ul.aol-webmail a.aol-webmail, #nav ul.apple-mail a.apple-mail, #nav ul.dotmac a.dotmac, #nav ul.entourage a.entourage, #nav ul.gmail a.gmail, #nav ul.lotus-notes-8 a.lotus-notes-8, #nav ul.microsoft-outlook-2007 a.microsoft-outlook-2007, #nav ul.eudora a.eudora,	#nav ul.thunderbird a.thunderbird, #nav ul.windows-live-hotmail a.windows-live-hotmail, #nav ul.windows-mail a.windows-mail, #nav ul.windows-live-mail a.windows-live-mail, #nav ul.yahoo-mail-classic a.yahoo-mail-classic, #nav ul.yahoo-mail a.yahoo-mail 
		{background-image: url(/images/esp/nav-secondary-clients-active.png);}

#content-wrap {}

	#side-col {float:left;width:197px;padding:23px 14px 10px 14px;}
	.has-side-col #side-col {background:url(/images/esp/bgnd-white-40-tile.png);}
	
	#main-col {float:right;width:569px;}
		#content {padding:23px 20px 0 20px;padding-bottom:40px;background: url(/images/esp/bgnd-white-40-tile.png);}
	
		#footer {}


	
/* ------------------------------------------------------------
	Front page
------------------------------------------------------------ */

	body.front-page {}
	

	.front-page #main-col .lead {margin-bottom:10px;}
	.front-page #main-col .lead p {color:#666;font-size:1.8em;font-weight:bold;line-height:1.3em;}
	.front-page #main-col .lead p span.highlight {color:#333;}
	
	.front-page #main-col h3 {margin-bottom:3px;margin-top:35px;/*font-family:"century gothic", helvetica, arial, sans-serif;*/}
	.front-page #main-col h3 a.rss {font-size:0.7em;text-transform:uppercase;color:#00a4f0;
	padding:2px 18px 1px 6px;background:url(/images/esp/rss-icon-14x14.png) right center no-repeat;border-left:1px dotted;margin-left:3px;}

	.front-page #main-col p.lead-sub {margin-bottom:0px;font-size:1.4em;}

	.front-page #main-col h4 {font-size:1.5em;margin-top:15px;}
	.front-page #main-col h4 a {text-decoration:none;}
	.front-page #main-col h4 a:hover {text-decoration:underline; /*color:#f55b00;*/}

	.front-page .what-you-can-do {background: url(/images/esp/bgnd-blue-50-tile.png);padding:16px 15px;margin:30px -5px;}
	.front-page #main-col .what-you-can-do h3 {margin-top:0;margin-bottom:6px;}
	.front-page .what-you-can-do p {display:block;margin-bottom:5px;font-size:1.4em;color:#333;}

	.front-page #blog-latest p {margin-bottom:20px;color:#333;font-size:1.2em;}
	.front-page #blog-latest .details {margin:4px 0 3px;font-size:1.2em;color:#666;/*letter-spacing:-0.02em;*/padding:1px 0;}
	.front-page #blog-latest .details a {color:#666;font-weight:normal;}
	.front-page #blog-latest .details span {padding:0 1px;color:#808080;}
		
	
	/* fp side col */

	#side-col h3 {color:#00a4f0;font-size:1.8em;margin-bottom:4px;/*font-family:"century gothic", helvetica, arial, sans-serif;*/}
	
	#side-col ul.client-list {padding:0px 0px 5px 0px;}
	#side-col ul.client-list li {padding-left:70px;line-height:1.35em;margin-bottom:17px;}
	
	#side-col ul.client-list li.excellent {background:url(/images/esp/label-excellent.gif) 0 2px no-repeat;}
	#side-col ul.client-list li.poor {background:url(/images/esp/label-poor.gif) 0 2px no-repeat;}
	#side-col ul.client-list li.average {background:url(/images/esp/label-average.gif) 0 2px no-repeat;}

	#side-col ul.client-list li span {display:block;}
	#side-col ul.client-list li a {text-decoration:none;font-size:1.1em;}
	#side-col ul.client-list li a span {text-decoration:underline;font-size:0.85em;color:#666;}
	#side-col ul.client-list li a:hover, #side-col ul.client-list li a:hover span {color:#f05c00;text-decoration:none;}

	#side-col .note {font-size:1.2em;padding-left:2px;color:#959799;font-style:inherit;}		
	#side-col .note a {color:#959799;}	



/* ------------------------------------------------------------
	Client page
------------------------------------------------------------ */

	.client-status, .client-summary {margin:0 -5px;}
	.client-status {padding:4px 10px 3px 8px;margin-bottom:7px;float:left;position:relative;}
	.Improvement-Recommended, .Some-Improvement-Recommended {background: url(/images/esp/bgnd-orange-35-tile.png);}
	.Solid-Support {background: url(/images/esp/bgnd-green-35-tile.png);}
	.client-status p {margin:0;font-size:1.6em;font-weight:bold;}
	.client-status span.status {font-size:0.95em;padding-right:2px;}
	.client-status a {border-left:1px dotted #999;padding-left:7px;margin-left:3px;font-size:0.95em;}
	
	.client-summary {clear:both;background: url(/images/esp/bgnd-blue-50-tile.png);padding:7px 8px;margin-bottom:20px;}
	.client-summary p {margin-bottom:4px;}
	.client-summary span.last-updated {font-weight:bold;font-size:0.85em;padding:3px 7px;display:block;margin-top:10px;background: url(/images/esp/bgnd-white-35-tile.png);}
	
	h5.list-header {color:#f05c00;font-size:1.4em;text-transform:uppercase;padding-left:38px;background: url(/images/esp/list-icon-tick.png) 0 -1px no-repeat;height:21px;padding-top:2px;}
	
	h5.no-support {background: url(/images/esp/list-icon-cross.png) 0 -1px no-repeat;}
	h5.no-support-cosmetic {background: url(/images/esp/list-icon-bar.png) 0 -1px no-repeat;}
	
	.client-page #content h3 {background: url(/images/esp/bgnd-blue-50-tile.png);margin:40px -8px /*18px*/ -22px -8px;padding:3px 6px;font-size:2.2em;}
	
	.client-page #content {padding-top:20px;}	
	.client-page h4 {font-size:1.6em;text-transform:uppercase;margin-top:40px;margin-bottom:2px;}
		#recommendations-detail p.h4-sub {font-size:1.3em;font-style:italic;line-height:1.4em;margin-bottom:16px;}

	
		#recommendations-detail {}
			#recommendations-detail p {font-size:1.2em;line-height:1.7em;margin-bottom:20px;}
			#recommendations-detail p span.feature {font-size:1.13em;font-weight:bold;display:block;}
		
			.client-page span.sample {display:block;background:url(/images/esp/bgnd-blue-50-tile.png);padding:4px 5px;margin-top:6px;margin-bottom:30px;}
			.client-page span.sample a {display:block;padding-left:14px;background:url(/images/esp/icon-arrow-blue.gif) 0px 4px no-repeat;margin-left:2px;line-height:1.5em;padding-bottom:1px;}


	#call-to-action {background: url(/images/esp/bgnd-blue-50-tile.png);padding:14px 11px;margin:25px -10px 5px -10px;}
		#call-to-action h4 {margin:0 0 4px 0;font-size:1.6em;}
		#call-to-action p {margin:0;font-size:1.2em;line-height:1.5em;margin-bottom:2px;}
		#call-to-action .to-left {width:250px;}
		#call-to-action .to-right {width:241px;border-left:1px dotted #fff;padding-left:20px;}

	#version-history {border-top:1px solid #d8dce3;padding-top:6px;padding-bottom:15px;margin-top:40px;}
		#version-history h4 {/*color:#00a4f0;*/ padding:0;margin-top:10px;}

		#version-history dl {font-size:1.2em;}
		#version-history dt {font-weight:bold;position:relative;left:0;top:15px;width:80px;}
		#version-history dd {margin-left:85px;line-height:1.4em;/*background: url(/images/esp/list-bullet-darkgrey.gif) 4px 7px no-repeat;*/padding:0 0 7px 10px;border-left:1px dotted #999;margin-bottom:1px;}

		
	/* Client Screenshot */
	.client-screenshot {}

	.client-screenshot #side-col {display:none;}
	.client-screenshot #main-col {position:relative;width:811px;}
	.client-screenshot #content img {margin-left:-10px;}
	.client-screenshot #content h2 img {margin-left:0px;}
		
		
	/* client side col */		
	.client-page #side-col {padding-top:25px;padding-bottom:30px;}
	.client-page #side-col a img {margin-left:-2px;/*border:1px solid #cad5e4;*/}
	.client-page #side-col h3 {margin:0 0 4px 0;}
	.client-page #side-col p.h3-sub {margin:0 0 8px 0;font-size:1.2em;color:#666;}
	.client-page #side-col p.h3-sub a {color:#333;}	
	
	
	
	/* clients index page */
	.clients-index-list {padding:15px 20px;}
	#content .clients-index-list ul {margin:2px 0 5px 34px;}
	
	
	
/*------------------------------------------------------------
	Static pages
------------------------------------------------------------*/ 

	.static-page {}
	
	/* page static */
	.static-wide #side-col {display:none;}
	.static-wide #main-col {position:relative;width:811px;}

	.static-page span.feature {font-size:1.2em;font-weight:bold;display:block;margin-bottom:-12px;padding-top:10px;} 
	.static-page img {margin:3px;}
	
	.static-page h5.good, .static-page h5.bad {color:#f05c00;font-size:1.4em;text-transform:uppercase;padding-left:38px;height:21px;padding-top:2px;}
	.static-page h5.good {background: url(/images/esp/list-icon-tick.png) 0 -1px no-repeat;}
	.static-page h5.bad {background: url(/images/esp/list-icon-cross.png) 0 -1px no-repeat;}

	.static-page #main-col {overflow:hidden;}	

/* ------------------------------------------------------------
	Blog
------------------------------------------------------------ */

	#blog {}
		h2.blog-header {font-family:"century gothic", helvetica, arial, sans-serif;}
		h2.category-header {font-family:"century gothic", helvetica, arial, sans-serif;}
		
		.back-link {font-size:1.2em;padding-bottom:15px;}
		h3.date {padding-top:10px;}
		
		h4.blog-title {margin:15px 0 5px 0;}
		h4.blog-title a {}
		.blog-entry {margin-bottom:20px;}		
		.blog-entry p {margin-bottom:0;}		

		.blog-details {font-size:1.1em;margin-top:5px;line-height:1.5em;}		

		.blog-details .vdiv {padding:0 3px;}
		
		.blog-categories {display:none;}
		.blog-categories-vis {}
	
	/* single entry */
	#blog-single-entry {}
		#blog-single-entry .blog-details {font-weight:bold;font-size:1.2em;padding:3px 0 2px 7px;background:url(/images/esp/bgnd-blue-50-tile.png);margin:10px -7px 15px -7px;}
		#blog-single-entry h2 {font-family:"century gothic", helvetica, arial, sans-serif;}

	/* comments */
	.blog-comments {}
	
	h3.comments-header {padding-top:20px;}
	h3.trackbacks-header {padding-top:40px;}
	
		.blog-comment {margin:10px -7px;padding:10px;}
		.alt-bgnd {background:url(/images/esp/bgnd-white-35-tile.png);}

			.comment-details {font-size:1.2em;color:#999;padding-bottom:15px;}	
				a.comment-count {color:#696f79;}
				.commenter-name {display:inline;font-weight:bold;color:#333;}

				.comment-date {text-align:right;font-size:1.1em;color:#696f79;}

	/* comment form */
	#comment-form {background:url(/images/esp/bgnd-blue-50-tile.png);margin:50px -7px 10px -7px;padding:12px 10px;}
	
		h4.comment-header {margin-bottom:10px;}

		#comment-form p {position:relative;margin:6px 4px;}
		#comment-form label.overlabel-apply {position:absolute;top:1px;left:6px;font-size:0.9em;}
		#comment-form input {font-size:1.1em;color:#333;}
		#comment-form textarea {font-size:1.1em;color:#333;width:516px;}
		
		#comment-form p.checkbox {margin-left:5px;font-size:1.2em;background:url(/images/esp/bgnd-white-35-tile.png);padding:5px;}
		#comment-form p.captcha {margin-left:5px;font-size:1.2em;background:url(/images/esp/bgnd-white-35-tile.png);padding:5px;}

		#captcha-explanation {display:none;} /*visibility toggled with JS + link*/

		#comment-form p.checkbox input {margin-right:3px;}
		#comment-form p.checkbox label {}
		#comment-form p.submit {padding-top:5px;}
		
		
	/* side col */
	
		.blog #side-col {padding-bottom:20px;}

		.blog #side-col h3 {font-size:1.6em;margin-top:25px;margin-bottom:4px;}
		.blog #side-col p {font-size:1.2em;line-height:1.4em;/*color:#696f79;*/}
		/*.blog #side-col a {color:#53565c;}
		.blog #side-col a:hover {color:#333;text-decoration:none;}*/

		.blog #side-col ul {padding-top:2px;}
		.blog #side-col li {font-size:0.95em;}
		
		.blog #side-col ul {}
		.blog #side-col li {background: url(/images/esp/list-bullet-darkgrey.gif) 0px 6px no-repeat;padding-left:15px;margin-left:5px;color:#333;padding-bottom:6px;line-height:1.4em;}
		.blog #side-col ul a {}
		

		.blog #side-col .about {}
		.blog #side-col .about h3 {margin-top:0;}
		.blog #side-col .about .highlight {font-weight:bold;}

		.blog #side-col a.rss {padding:2px 0 1px 18px;background:url(/images/esp/rss-icon-14x14.png) 0 0 no-repeat;}
		
		.blog-archives h2 {margin-bottom:0px;margin-top:25px;}
		.blog-archives h2.first {margin-top:0px;}		
		.blog-archives h3 {margin-bottom:5px;}
		.blog-archives #content p {margin-bottom:0;}
		
		.blog-archives .year-wrap {border:1px solid;}
		

		
/* ------------------------------------------------------------
	Footer
------------------------------------------------------------ */

	#footer {width:569px;float:right;background:url(/images/esp/bgnd-white-45-tile.png);}

		#footer p {margin-bottom:2px;}

		#footer .to-left {width:155px;}
			#footer .to-left p {color:#f85200;text-align:right;font-weight:bold;font-size:1.5em;line-height:1.2em;}
			#footer .to-left a {color:#f85200;text-decoration:none;}
			#footer .to-left a:hover {text-decoration:underline;}
			#footer .to-left a.rss {text-transform:uppercase;font-size:0.75em;text-decoration:underline;}
			#footer .to-left a.rss:hover {text-decoration:none;}
	
		#footer .to-right {width:360px;}
			#footer .to-right p {font-size:1.5em;color:#00a4f0;line-height:1.2em;}
			#footer .to-right a {text-decoration:none;color:#00a4f0;}
			#footer .to-right a:hover {text-decoration:underline;}
			#footer .to-right .details, #footer .to-right .details a {font-weight:normal;color:#83b7ff;font-size:0.95em;}
			#footer .to-right .details a {text-decoration:underline;}
			#footer .to-right .details a:hover {text-decoration:none;}
		
		#footer-blog-latest, #footer-email-updates, #footer-nav, #copyright {border-top:5px solid #b1cfff;padding:10px 20px;}

		#footer-blog-latest {} 
		
		#footer-email-updates {}
			#footer-email-updates .to-left {margin-top:3px;}
			#footer #subscribe-form {}	
			#footer #subscribe-form .input-text {float:left;position:relative;}	
			#footer #subscribe-form input.text-input {width:230px;background-color:#f2f7ff;padding:5px 4px;font-size:1.4em;color:#333;border:1px solid #bec4cc;}
			#footer #subscribe-form .input-submit {float:right;}	

			#footer #subscribe-form label {font-size:1.3em;font-weight:bold;color:#939599;}
			#footer #subscribe-form label.overlabel-apply {position:absolute;top:6px;left:8px;z-index:99;}
		    /* For Safari/webkit */ 
		    html[xmlns*=""] body:last-child #footer #subscribe-form label.overlabel-apply {top:3px;}
			/* Mmm, hack-tastic! */
			
				

		#footer-nav {color:#acacac;padding:10px 0;text-align:center;}
			#footer-nav p {line-height:1.6em;}
			#footer-nav a {color:#f85200;text-decoration:none;}
			#footer-nav a.active,
				#footer .footer-home a.home,
				#footer .footer-about a.about,
				#footer .footer-why a.why,
				#footer .footer-what-you-can-do a.what,
				#footer .footer-clients a.clients,
				#footer .footer-blog a.blog	 {color:#939599;}
			
			#footer-nav a:hover {text-decoration:underline;}
			#footer-nav span {padding:0 4px;}
			#footer-nav p.row1 span	{padding:0 6px;}

		
		#copyright {text-align:right;padding-top:12px;color:#949494;padding:15px 0;}
		#copyright p {font-size:1.2em;float:right;font-weight:bold;}
		#copyright p span {padding-bottom:20px;/*border-bottom:5px solid #b1cfff;*/float:right;padding-right:2px;}