* { margin: 0; padding: 0; }
body { color: #000; font: normal 11px/14px Helvetica, Arial, sans-serif; }
a { color: #000; text-decoration: none; }
a:hover { color: #000; text-decoration: underline; }
p { margin-bottom: 13px; font-size:14px;line-height:21px;}
li { list-style: none; }
h1 a, .purchase-button a, .footer p a.thought-merchants { display: block; text-indent: -9999px; background-color: transparent; background-position: 0 0; background-repeat: no-repeat; overflow: hidden; }
.nav:after, .feature:after, .highlight:after, .highlight ul:after, .mid-content:after, .sub:after, .footer:after, .detail-list:after {	content: ".";	display: block;	clear: both;	visibility: hidden;	line-height: 0;	height: 0;}


h1 a { background-image: url(../i/logo.png); height: 127px; width: 127px;}
h4 {font-size: 20px;line-height:21px;margin-bottom:21px;}


.content-wrapper, .header, .nav { width: 860px; margin: 0 auto;}
.header-wrapper { background: url(../i/wood-bg.png) repeat-x 0 0;}
.header { min-height: 158px;}
.header h1 { float: left; margin:18px 0 0 35px;}
.header h2 { float: left; margin-left:34px; margin-top:57px;}
.nav-wrapper { background: #000; border-top: #4e473e 1px solid; width: 100%;}
.nav li { float: left; }
.nav li a { height: 50px;}
.nav li:hover {background-image: url(../i/nav-hover.png); background-repeat: no-repeat;}
#menu-select.photos {background-image: url(../i/nav-hover.png); background-repeat: no-repeat; background-position: 15px bottom;}
#menu-select.home {background-image: url(../i/nav-hover.png); background-repeat: no-repeat; background-position: 57px bottom;}
#menu-select.tactics {background-image: url(../i/nav-hover.png); background-repeat: no-repeat; background-position: 12px bottom;}
.nav li.home:hover { background-position: 57px bottom;}
.nav li.tactics:hover { background-position: 12px bottom;}
.nav li.purchase:hover, .nav li.photos:hover { background-position: 15px bottom;}
.nav li.how-to-use:hover { background-position: 20px bottom;}
.nav li.wireframe-tips:hover { background-position: 35px bottom;}
.nav li.testimonials:hover { background-position: 30px bottom;}
.nav li.information:hover { background-position: 23px bottom;}

.content-wrapper { margin-top: 30px;}
.feature { width: 820px; margin: 0 20px; }
.feature img { float: left; margin-left:50px; margin-top:25px;}
.feature .feature-content { float: right; width: 400px; margin-bottom: 15px;}
.purchase-button a {width: 276px; height: 80px; background-image: url(../i/buy-now-sprite.png); float: left;}
.purchase-button a:hover {background-position: 0 -80px;}

#word-content p {margin: 0 21px 21px 21px;}
#word-content h4 {margin: 0 21px 21px 21px;}
#word-content .tactics-for-usability { width: 820px; border-bottom: 1px solid #a6a4a1;padding:10px;}

.highlight-left {background: url(../i/left-ornament.png) no-repeat 0 50%; width: 20px; float: left; height: 60px;}
.highlight-right {background: url(../i/right-ornament.png) no-repeat 0 50%; float: right; width: 20px; height: 60px;}

.highlight {  margin-bottom: 30px; }
.highlight ul { border: 1px solid #d3d3d2; background: #e1dfde; margin: 0 20px; height: 60px;}
.highlight li { float: left;}
li.ornament { background: url('../i/circle-icon.png') no-repeat 0 50%; width: 9px; height: 60px; margin: 0 17px;}

ul.click-to-buy:hover { cursor:pointer; background-color:#f4ec7a;}

.mid-content, .sub { width: 820px; margin: 0 20px; border-bottom: 1px solid #a6a4a1;}
.mid-content { margin-bottom: 20px; padding-bottom: 42px;}
span.arrow { background: url(../i/arrow-icon.png) no-repeat 0 50%; height:322px; width:38px; float: left;}
.node, .node-alt { float: left;  }
.node { margin-left: 115px; margin-right:41px;}
.node-alt { margin-left:33px;margin-top:-13px;}

.sub li { width: 400px; float: left; margin-bottom: 22px;}
.sub li.alt { margin-right: 20px;}

.sub h4 { margin-bottom: 18px;}

.footer { width: 820px; margin: 10px 20px 0; }
.footer, .footer a { color: #ccc8c8; font-size: 9px;}
.footer a:hover { color: #000; }
.footer-left  { float: left;}
.footer p { float: right; font-size:9px;line-height:14px;}
.footer p a.thought-merchants { background-image: url(../i/tm-sprite.png); height:12px; width:34px; float: right;}
.footer p a.thought-merchants:hover { background-position: 0 -12px;}

.hero {margin: 0 20px 20px;}
.detail .highlight {border-bottom: 1px solid #a6a4a1; margin-bottom: 20px; padding-bottom:20px; margin-top: 31px}

.detail-image {margin: 0 20px 20px 20px;}
.detail-list {width: 820px; padding: 0 20px; margin-bottom: 20px;}
.detail-content { width: 400px; float: right; }
	.alt .detail-content { float: left; }
.detail-content h3 {margin-top: 40px; float: left; width: 100%; margin-bottom: 17px;}
	.detail-content h3 span {background-position:0 0; margin-left: 20px;}
	.alt .detail-content h3 span {background-position:right 0; width: 380px; margin-left: 0;}
.detail-list img {border: 1px solid #555555; margin-left: 0; margin-right: 20px;}
	.detail-list .alt img { margin-left: 20px; margin-right: 0;}
.detail-content p { width: 100%; text-align: left;}
	.alt .detail-content p { width: 100%; text-align: right;}
h3 { background: url(../i/left-small-arrow.png) no-repeat 0 8px; }
.alt h3 { background: url(../i/right-small-arrow.png) no-repeat 100% 8px; }

/**** Titles ****/
.one-pad, .fifty-sheets, .seventy-pound-paper, .all-for-only, .bring-ideas-to-paper, .collaborative, .demonstrate-flow, .faster-iteration, .how-to-use a, .home a,
.improve-user-experience, .increased-UX-awareness, .information a, .make-work-easier, .make-your-idea-better, .paper-wireframes, .paypal, .purchase a, .photos a, .tactics a,
.quickly-visualize-your-idea, .testimonials a, .what-you-develop-for, .wireframe-tips a, .iphone-wireframe-prototyping-pad a, .what-you-develop-on, .tactics-for-usability
{ display: block; text-indent: -9999px; background-color: transparent; background-position: 0 0; background-repeat: no-repeat; overflow: hidden; }

.wireframe-tips a{background-image: url('../i/titles/wireframe-tips.png'); width: 98px; height: 50px; background-position: 0 50%; margin-right:59px;}
.what-you-develop-on{background-image: url('../i/titles/what-you-develop-on.png'); width: 227px; height: 33px; background-position: 50% 0; }
.what-you-develop-for{background-image: url('../i/titles/what-you-develop-for.png'); width: 239px; height: 33px; background-position: 50% 0; margin-top:-12px;}
.testimonials a{background-image: url('../i/titles/testimonials.png'); width: 83px; height: 50px; background-position: 0 50%; margin-right: 70px;}
.quickly-visualize-your-idea{background-image: url('../i/titles/quickly-visualize.png'); width: 297px; height: 39px; margin-bottom: 9px;}
.purchase a {background-image: url('../i/titles/purchase.png'); width: 62px; height: 50px; background-position: 0 50%; margin-right: 68px;}
.photos a {background-image: url('../i/titles/photos.png'); width: 62px; height: 50px; background-position: 0 50%; margin-right: 68px;}
.tactics a {background-image: url('../i/titles/tactics-menu.png'); width: 46px; height: 50px; background-position: 0 50%; margin-right: 68px;}
.paypal{background-image: url('../i/titles/paypal.png'); width: 98px; height: 80px; float: left; background-position: 0 50%; margin-left: 13px;}
.iphone-wireframe-prototyping-pad a{background-image: url('../i/titles/paperwireframes.png'); width: 482px; height: 42px}
.make-your-idea-better{background-image: url('../i/titles/make-your-idea-better.png'); width: 244px; height: 33px}
.make-work-easier{background-image: url('../i/titles/make-work-easier.png'); width: 190px; height: 33px}
.information a{background-image: url('../i/titles/information.png'); width: 78px; height: 50px; background-position: 0 50%;}
.increased-UX-awareness {background-image: url('../i/titles/increased-ux.png'); width: 267px; height: 33px}
.improve-user-experience {background-image: url('../i/titles/improve-user-experience.png'); width: 278px; height: 33px}
.how-to-use a {background-image: url('../i/titles/how-to-use.png'); width: 70px; height: 50px; background-position: 0 50%; margin-right: 62px;}
.home a {	background-image: url('../i/titles/home.png');	width: 33px; height: 50px; background-position: 0 50%; margin:0 73px 0 54px;}
.faster-iteration {background-image: url('../i/titles/faster-iteration.png'); width: 178px; height: 33px}
.demonstrate-flow{background-image: url('../i/titles/demonstrate-flow.png'); width: 202px; height: 33px}
.collaborative{ background-image: url('../i/titles/collaborative.png'); width: 157px; height: 33px}
.bring-ideas-to-paper{background-image: url('../i/titles/bring-ideas-to-paper.png'); width: 306px; height: 33px}
.all-for-only{background-image: url('../i/titles/all-for-895.png'); width: 199px; height: 60px; background-position: 0 50%;}
.seventy-pound-paper{background-image: url('../i/titles/70-pound-paper.png'); width: 284px; height: 60px;background-position: 0 center}
.fifty-sheets{background-image: url('../i/titles/50-sheets.png'); width: 108px; height: 60px;background-position: 0 center;}
.one-pad{background-image: url('../i/titles/1pad.png'); width: 54px; height: 60px;background-position: 0 center;	margin-left: 22px}
.tactics-for-usability{background-image: url('../i/titles/tactics.png'); height: 33px; background-position: left 0; margin:0 0 21px 21px;}