body {background:url(body-bg.gif) top left repeat-x; padding:25px 0; margin:0; font-size:90%; font-family:verdana,sans-serif;}
a, a:link {color:#00f; text-decoration:none;}
a:hover, a:active {color:#f00; text-decoration:underline;}
p {line-height:2.5ex; margin:1.4ex 0;}
img {border: none;}
h1 {color:#000; font-size:4.25em; margin:0; padding:0; line-height:75%;}
.articles h1 {color: #fff; font-family:arial; font-weight:normal;}
h2, h3, h4 {font-family:tahoma,"trebuchet ms",helvetica,arial,sans-serif; font-weight:bold; color:#383838; margin:2ex 0 0.5ex;}
h2 {font-size:1.3em; letter-spacing:-.005em;}
.articles blockquote {background:#f4f7e0 url(blockquote-bg.gif) top left repeat-y; border-bottom:2px solid #ddd; margin:1ex 0; color:#353730; font-style:italic; padding:1.5ex 3em;}
q {line-height: 130%;}
.page-header blockquote {margin-right: 240px; font-family: Georgia, Times New Roman, serif; background: #444; color: #eee; border-bottom:2px solid #666;}
.articles .main-content cite {display:block; text-align:right; font-family:georgia,serif; letter-spacing:.01em; color:#888; font-style:italic; margin-top:.5ex;}
.wrapper {width:66em; min-width: 955px; margin:0 auto; overflow:hidden;}
.clearer {clear:both;}

div.nav {position:relative; height:7ex;}
a#home-link {position:absolute; left:0; bottom:10px; display:block; width:206px; height:40px; text-indent:-999px; background:url(scratchmedia-logo.jpg) top left no-repeat;}
.primary-nav {font-family:"lucida sans",arial,sans-serif; font-size:1.2em; position:absolute; right:0; bottom:0; margin:0; padding:0;}
.primary-nav li {display:inline; margin:0;}
.primary-nav li a {color:#3b3b3b; background:#f1f4e4; padding:1ex 1em; line-height:3.5ex; width:100%;}
.primary-nav li a:hover, ul.primary-nav li a:active {background:#fff3c8;}
body.about .primary-nav li.about a,
body.portfolio .primary-nav li.portfolio a,
body.contact .primary-nav li.contact a,
body.articles .primary-nav li.articles a
	{background:#484848; color:#fff;}
/* body.about .nav-border, body.portfolio .nav-border, body.contact .nav-border {height: 10px; background: #484848;} */

.breadcrumb {margin-bottom: 1.5ex; color: #666;}

.main-content { padding-top: 2ex;}
.articles .main-content {width:73%; margin:0; padding:0; float:left;}
.articles .sub-content {width:24%; margin:0; padding:0; float:right; clear:none;}

.sub-nav {margin:0; padding:0; font-family:"trebuchet ms",arial; font-size:1.1em; list-style:none;}
.sub-nav li {padding-left:25px; margin:0; height:1%;}
.sub-nav a {color:#f3f3f3; padding:.4ex 0 .4ex 30px; background-image:url(sidenav-articles.png); background-repeat:no-repeat; display:block; margin:0;}
.sub-nav a, .sub-nav a:hover {color:#f3f3f3;}

.sub-nav .ia a {background-position:0;}
.sub-nav .basics a {background-position:-400px 50%;}
.sub-nav .process a {background-position:-800px 50%;}
.sub-nav .business a {background-position:-1200px 50%;}
.sub-nav .goal-oriented-design a {background-position:-1600px 50%;}
.sub-nav .graphics a {background-position:-2000px 50%;}
.sub-nav .accessibility a {background-position:-2400px 50%;}
.sub-nav .js a {background-position:-2800px 50%;}
.sub-nav .blog a {background-position:-3200px 50%;}
.sub-nav .usability a {background-position:-3600px 50%;}
.sub-nav .copywriting a {background-position:-4000px 50%;}
.sub-nav .resources a {background-position:-4400px 50%;}
.sub-nav .production a {background-position:-4800px; 50%}

body.graphics .sub-nav li.graphics,
body.ia .sub-nav li.ia,
body.basics .sub-nav li.basics,
body.process .sub-nav li.process,
body.business .sub-nav li.business,
body.goal-oriented-design .sub-nav li.goal-oriented-design,
body.accessibility .sub-nav li.accessibility,
body.js .sub-nav li.js,
body.blog .sub-nav li.blog,
body.usability .sub-nav li.usability,
body.copywriting .sub-nav li.copywriting,
body.resources .sub-nav li.resources,
body.production .sub-nav li.production
{background:url(sidenav-on-arrow.png) no-repeat 0 50%;}

.intro {color:#333; clear:left; font-size: 1.4em;}
.articles .intro {color: #ddd; font-size: 1em;}
.page-header {background:#101010 url(page-header-bg.gif) top left repeat-x; padding:3ex 0 2ex 0;}
.wrapper .intro {}
.page-header .main-content a {color:#fff; background:#333;}
.page-header .main-content a:hover, .page-header p a:active {color:#000; background:#ffb; text-decoration:none;}
.page-header h2, .page-header h3 {color:#eee;}

.panels { margin-top: 2ex; overflow: hidden;}
.panel h2 {font-size:1.5em; font-weight:normal; margin: 0.2ex 0 0.5ex;}
.panel h2 span {display:block; font-size:2.3em; letter-spacing:-.03em;}
.panel p a {background:#FFE49C; color:#333;}
.panel img {float:left; margin-right:1em;}
.panel li img {float: none; margin: 0;}

.panel {border:5px solid #FFFFFF;padding:5px;width:90%; -webkit-border-radius:5px; -moz-border-radius:5px; float:left; height:100%; position: relative; overflow: visible;}
.panel, .panel div {}
.panel .panel-inner {border-bottom:1px solid #FFFFFF;overflow:hidden;padding:1em 1.5em; height: 96.5%; display: block;}
a.panel-inner {color: #333;}
a.panel-inner:hover {text-decoration: none;}
.hovering .panel {background:#FF761A url(panel-orange.jpg) repeat-x left top;border:5px solid #FFEFCE;}
.hovering .panel-inner {background:#FFFFFF url(panel-bg.png) repeat-x scroll center bottom;border-bottom:1px solid #999999;}
.panel h3 {margin-top:0;}
.hovering .panel h3 a {color:#FF3300;}
.hovering .panel h3 a:hover, .hovering .panel h3 a:active {text-decoration:none;}

.panel1 {margin-right:1%; width:53%;}
.panel2 {width:40%;}
.panel1 img {position: absolute; left: 70px; bottom: -90px;}
.panel2 img {position: absolute; right: 70px; bottom: -90px;}
.panel1 .panel-inner, .panel2 .panel-inner, .panel3 .panel-inner {padding-bottom: 0;background:#FFFFFF url(panel-bg.png) repeat-x scroll center bottom;border-bottom:1px solid #999999;}
.panel1, .panel2, .panel3 {height: 52ex; margin-bottom: 70px; background:#cbcbcb url(panel-bg-grey.png) repeat-x left top;border:5px solid #f6f6f6;}
.panel3 {height: auto; width: auto;}

.snippet {background:#dae6ef url(snippet-bg.gif) 50% 0 repeat-y; color:#383d41; margin:2ex 1em;}
.snippet .top {background:url(snippet-top-bg.gif) top left repeat-x; height:25px;}
.snippet .bottom {background:url(snippet-bottom-bg.gif) bottom left repeat-x; height:26px; clear:both;}
.snippet p {margin-left:3em; margin-right:3em;}
.snippet img {margin:1ex 1em;}

.more-content {background:#262626 url(more-bg.gif) top left no-repeat; margin:3ex 0; padding:.3ex 10% 2ex 100px; color:#fff;}
.more-content h2 {color:#ffa940;}
.more-content dt {font-weight:bold; margin:0 0 .2ex; padding:0;}
.more-content dd {font-size:.9em; margin:0 0 1.8ex .9em; padding:0; display:block;}
.more-content dt a:visited {background:url(more-link-visited.gif) 5px 50% no-repeat; margin-left:.25em; padding-left:30px; color:#adadad; min-height:21px;}
.more-content dd a:visited {margin-left:30px; display:block; color:#adadad;}

.recommended-resources {background:#262626 url(recommended-bg.gif) -5px 0 no-repeat; padding:23px 10% 2ex 85px;}
.recommended-resources h2 {color:#80ff73;}
.recommended-resources ul {list-style:none; margin:0; padding:0; font-size:.9em; color:#bebebe;}
.recommended-resources li {margin:1ex;}
.recommended-resources li a {color:#bebebe;}
.recommended-resources li a strong {color:#fff;}

.more-content a, .recommended-resources a {color:#fff;}

.content1 {width:50%; margin-right:5%; padding:0; float:left;}
.content2 {width:45%; margin:0; padding:0; float:left;}
.content2 ul {clear:both;}
.content2 ul li, .intro li {margin:1ex 0; padding:0;}
dt {margin-top:1ex;}
dd {margin-bottom:1ex;}

ul.mini-ads li {width:150px; height:150px; float:left; margin:0 0 27px; padding:0;}
ul.mini-ads .save-the-pixel {margin-right:27px;}

.article-sections, .quote-intro, .company-address {margin:4ex 0;}
.search-bar {margin-bottom:4ex;}

.article-sections {line-height:180%;}
.article-sections ul, .article-sections ul li {display:inline; margin:0 .3em; padding:0;}
.article-sections a {padding:.5ex .5em; background:#ffe49c; color:#333;}

.twocol .quote {background:#eee url(sm-images/quotemark.gif) top left no-repeat; padding:16px 24px; clear:left;}
.twocol blockquote {font-style:italic; font-size:.9em;}
.twocol cite {font-size:.8em; font-weight:bold; text-align:right; display:block; padding-top:.45em; color:#444;}

.articles .quote {background:url(quote-tail.gif) bottom left no-repeat; padding:0 0 18px;}
.articles .quote q, .articles .quote cite {background:#ffe49c; display:block; color:#333;}
.articles .quote a {color:#333;}
.articles .quote a:hover {background:#ffe47c;}
.articles .quote q {-moz-border-radius-topleft:15px; -webkit-border-top-left-radius:15px; -moz-border-radius-topright:15px; -webkit-border-top-right-radius:15px; padding:22px; padding-bottom:10px; font-size:1.1em; font-style:italic;}
.articles .quote cite {-moz-border-radius-bottomright:15px; -webkit-border-bottom-right-radius:15px; font-style:normal; font-size:.75em; font-weight:bold; padding:0 0 22px 22px;}

.search-hint, .quote-intro {font-weight:bold; font-size:.7em; color:#4f4f4f; margin: 4ex 0 .5ex 12px;}
.search-bar {background:#d0ffb0; -moz-border-radius:12px; -webkit-border-radius:12px; padding:12px;}
/*
.search-bar form {margin:0; padding:0; display:inline;}
.search-bar input {width:13em; border:0 none;}
.search-bar button {width:1em; background:url(search-go-arrow.gif) 0 50% no-repeat; border:0 none; text-indent:-999px; margin-left:5px;}
*/

.company-address dt, .company-address dd {margin:0; padding:0;}
.company-address dd {padding-left:15px;}
.company-address {padding-left:15px; font-size:.9em; letter-spacing:.015em;}
.company-address .contactdetails {padding:2ex 0; }
.contactdetails .locality {text-transform:uppercase; font-weight:bold;}

.final-foot {text-align:center; color:#666; margin-top:5ex; line-height:160%; font-size:.9em;}
.final-foot strong {color:#444;}

body.articles .intro {background-position: top right; background-repeat: no-repeat; min-height:280px;}
body.basics .intro {background-image:url(header-basics.png);}
body.process .intro {background-image:url(header-process.png);}
body.graphics .intro {background-image:url(header-design.png);}
body.business .intro {background-image:url(header-business.png);}
body.goal-oriented-design .intro {background-image:url(header-goal.png);}
body.ia .intro {background-image:url(header-arch.png);}
body.accessibility .intro {background-image:url(header-access.png);}
body.usability .intro {background-image:url(header-usability.png);}
body.copywriting .intro {background-image:url(header-copy.png);}
body.production .intro {background-image:url(header-code.png);}
body.js .intro {background-image:url(header-js.png);}
body.resources .intro {background-image:url(header-resources.png);}
body.tutorials .intro {background-image:url(header-share.png);}
body.blog .intro {background-image:url(header-blog.png);}

.articles .intro p, .articles .intro h2, .articles .intro li, .articles .intro dt, .articles .intro dd {margin-right:240px;}

.screenshot {background:#e3e3e3; border:2px solid #ddd; margin:1ex 0; padding:10px;}
.screenshot img {border-bottom:2px solid #ddd;}

/* Old styles carried over */
.code .indent {margin:0 0 0 1.5em;}
.code {font-family:"courier new",courier,fixed;	font-size:1.1em; margin-bottom:.8em; color:#620;}
.text-alongside, .alongside-all .screenshot img, .alongside-all .snippet img {
	float:left;
	margin-right:15px;
}
.clear-all {clear:both;}

/* 2x columns */
body.twocol .panel {font-size:.85em;}
body.twocol .panels .hoverme {width:48%; margin:1%; float:left;}

.contact-cta {background: #FFE49C; padding: 10px 15px; font-size: 1.2em; border-bottom: 8ex; display: block; margin-bottom: 8ex;}
.contact-cta span {display: block;}
.contact-cta span.guarantee {font-size: 0.8em; font-style: italic; color: #666}
.contact-cta:hover {text-decoration: none;}

.newsletter {border: 6px solid #FFE49C; padding: 0 10px; font-size: 0.8em; margin-top: 1em; -moz-border-radius: 15px; -webkit-border-radius: 15px;}


/* download page styles from old site */

table.ebooklist {width: 100%; margin: 30px 0 0 0; padding: 0;}
table.ebooklist th {background: #FC7000;color: #fff;line-height: 2em;font-weight: bold;padding-left: 10px;}
table.ebooklist tr, table.ebooklist td, table.ebooklist form {margin: 0;padding: 0;}
table.ebooklist td {padding: 5px 10px;}
table.ebooklist td.title {font-weight: bold;padding-left: 10px;}

table.ebooklist td.buynow {text-align: center;}
.ebook-box {border:1px solid #ddd;padding:0px 25px 10px 25px;margin-top:30px;margin-right:34px;background-color:#f0f0f0;}
.promo-box {border: 9px solid #6666b3;position: relative;margin-right: 34px;background: #e8e8e8 url(promo-box-bg.gif) repeat-x; margin-top: 2ex;}
img.stp-cover {float: left;padding: 0;position: relative;}
img.free-chapter-star {position: absolute;top: -42px;right: -34px;}
*html img.free-chapter-star {top: -33px;right: 21px;}
.promo-text {margin: 0 30px 0 230px;}
.promo-text h3 {border: none;margin: 30px 80px 0 0;}
.promo-text h3 a {color: #000;font-weight: bold;}
.promo-text strong a {color: #000;}
.promo-text p {line-height: 1.4em;padding-top: 10px;}
.promo-text p.price strong {font-size: 1.2em;}
.promo-text img {padding-left: 15px;vertical-align: middle;}
.buy-now {position: absolute;top: 255px;left: 35px;}
*html .buy-now {top: 265px;left: -150px;}
.buy-now p {font-size: 0.8em;text-align: center;}

/* end download page styles */

.body-intro-links {font-size:.75em; color:#333;}
.body-intro-links a {color:#333;}
.body-intro-links div {text-align:center;}
.body-intro-links a:hover {color:#333; text-decoration:underline;}
.by {background:#ddd; margin:0; float:left; padding:1ex 2%; width:56%;}
.pdfs {float:right; background:#f8fda1; margin:0; padding:1ex 2%; width:36%;}
body.downloads .body-intro-links {display:none;}

/* Scratchmedia promo footer, 28 September 2009 */
.sm-promo {background:#f7d294 url(love-heart.png) top left no-repeat; font-size:.8em; padding:10px 10px 10px 50px; margin:15px 10px 15px 0;}
.sm-promo p {margin:.7ex 0;}

/* STP multivariate ad 28/09/09 */
.stp-mv {position:relative; background:#fff5eb; border:5px solid #ffce9c; -webkit-border-radius:15px; -moz-border-radius:15px; font-family:calibri,helvetica,arial; padding:5px 5px 5px 15px;}
.stp-mv .benefit {font-size:2.15em; letter-spacing:-.05em; color:#333; line-height:95%; padding-top:8px;}
.stp-mv .cta {font-size:1.5em; font-weight:bold; color:#c33; line-height:100%; margin:10px 0 12px;}
.stp-mv .more {margin:5px 0; text-align:center; font-size:.87em;}
.stp-mv .more-lg {margin:5px 0; text-align:center; font-size:1.3em;}
.stp-mv .button {margin:5px 0; text-align:center;}
.stp-mv img.img-pro-tips {float:right;}
.stp-mv img.img-bh {float:right; margin-top:6px;}
.stp-mv img.img-stp {float:right; margin-top:6px; margin-left:5px;}

.panel-inner {overflow: hidden;}
.gallerytext {float: left; width: 280px; margin-right: 20px;}
.galleryview {float: right;}
.panel3 {height: 450px; margin-top: 1.5em;}
.panel-overlay {padding-bottom: 5px;}
.panel-overlay h2 {color: #fff;}

div.articles-callout {float: right; width: 335px; background: url(free-articles-bg2.png) repeat-y left; margin: 0 0 15px 20px;}
.articles-callout-inner {background: url(free-articles-bg.png) no-repeat left top; padding: 30px 20px 0 40px;}
.articles-callout h2 {margin: 0; font-weight: normal; padding-left: 60px; font-size: 1.2em;}
.articles-callout h2 a {color: #7193bc;}
.articles-callout p {margin: 1.5em 0; font-size: 0.7em; color: #666;}

.linktext {color: #0000ff;}

.quote a {background: #ffe49c; display: block; -moz-border-radius: 15px 15px 15px 0; -webkit-border-radius: 15px; -webkit-border-bottom-left-radius: 0;}
.wp-list-testimonials blockquote {background: none; border: none; margin: 0; padding: 22px;}
.quote blockquote p {margin-top: 0;}
.articles .quote cite {padding: 0; background: none;}

dd p {margin: 0;}

/* ------- NEW HOME PAGE STYLES -------- */

#imageContainer {
	float: left;
	position: relative;
	width: 485px;
	border: none;
	margin: 15px 0 30px 0;
	border: 2px solid #dbdbdb;
	background: url(../cmsimages/panelbg.gif) bottom repeat-x;
	padding: 0;
}

#imageContainer {
	height: 262px;
}

div#imageContainer:hover {
	border: 2px solid orange;
}

#imageContainer img {
	display: none;
	position: absolute;
	top:10px; left:10px;
    width: 465px;
}

div#panel {
	clear: both;
	border: 2px solid #dbdbdb;
	padding: 30px 20px 20px;
	background: url(cmsimages/panelbg.gif) bottom repeat-x;
}

div#panel:hover {
	border: 2px solid orange;
}

ul.panellist {
	list-style-type: none;
	margin-bottom: 20px;
}

ul.panellist li {
	line-height: 1.3em;
	margin-bottom: 1em;
	background: url(../cmsimages/panellistitem.png);
	background-repeat: no-repeat;
	background-position: 0px;
	min-height: 25px;
	padding-left: 40px;
	padding-top: 6px;
}