/*
Design Professionalism - The designer's guide to taking back your profession
by Andy Rutledge
http://designprofessionalism.com/
May 2011
Design and Development by Andy Rutledge
http://andyrutledge.com/
Thanks to Richard Clark - http://richclarkdesign.com - for the html5 reset
This site uses Chaparral Pro Caption font served up by Typekit - http://typekit.com/
*/

/* RESET STYLES ------------------------------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{ margin:0;  padding:0;  border:0;  outline:0;  font-size:100%;  vertical-align:baseline;  background:transparent}
body{line-height:1; background:#eaeae8; text-align:center; font-family:"chaparral-pro-caption-1","chaparral-pro-caption-2",Times New Roman,Times,serif; color:#333}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block}
h1, h2, h3, h4, h5, h6{font-weight:normal; text-align:left}
h1, h2, h3, h4, blockquote{text-shadow:#fff 1px 1px 1px;}
p, ul, ol, dl{text-align:left}
ul, ol{ list-style:none}
blockquote, q{ quotes:none}
blockquote:before, blockquote:after, q:before, q:after{ content:'';  content:none}
del{ text-decoration:line-through}
abbr[title], dfn[title]{ border-bottom:1px dotted;  cursor:help}
acronym {cursor: help; border-bottom: 1px dotted #999;}
table{ border-collapse:collapse;  border-spacing:0}
input, select{ vertical-align:middle}
.clear{clear:both; display:block; height:8px}
img.author {
	margin: 0 auto;
	padding: 20px 0 10px;
}
/* MAIN PAGE HEADER STYLES ----------------------------------------------------- */
.main header{width:100%; background:#ccc; border-bottom:4px solid #ddd; text-align:center; padding:20px 0 0}
.main header h1{margin:0 auto; padding:0 0 8px; width:278px; height:83px; display:block; background:url(../images/logo_main.png) no-repeat center top; text-indent:-9000px}
.main header p{margin:0 auto; line-height:48px; font-size:14px; font-style:italic; color:#777; text-align:center; max-width:450px; border-top:1px solid #eaeae8}

/* MAIN PAGE CONTENT STYLES ------------------------------------------------------------- */
.mainBody{width:100%; margin:0 auto; text-align:center; clear:both; padding: 0 0 30px;}
.mainBody h2{font-size:38px; font-style:italic; color:#000; text-align:center; padding:50px 0 30px; letter-spacing:-.02em;}
.mainBody nav{margin:0 auto; padding: 24px 0; max-width:960px; background:url(../images/dot_bg.png) repeat-x top left;}
ol.frontNav{float:left;}
.frontNav li{float:left; width:130px; margin:0 15px; padding-top:20px; position:relative;}
.frontNav li a{text-decoration:none}
.frontNav li em{width:130px; display:block; text-align:center; font-style:normal; font-size:13px; letter-spacing:.02em; text-transform:uppercase; margin:0 0 15px}
.frontNav li a:link em, .frontNav li a:visited em{display:block; width:130px; color:#c30; font-weight:normal; text-decoration:none}
.frontNav li a:hover em{color:#000; text-decoration:none}
.frontNav li a:link span, .frontNav li a:visited span{color:#eaeae8; text-decoration:none; font-size:24px; text-align:center; border-bottom:none; background:#000; line-height:50px; height:48px; padding-top:2px; width:50px; display:block; margin:0 auto; -moz-border-radius:25px; border-radius:25px}
.frontNav li a:hover span{color:#eaeae8; text-decoration:none; cursor:pointer; background:#c30}
.frontNav li p{display:block; color:#666; width:130px; line-height:1.4em; font-size:13px; padding-top:15px}
.frontNav li:hover p{color:#000; text-shadow:#fff 1px 1px 1px}
.preface{margin:0 auto; clear:both; max-width:960px}
section.foreword{float:left; margin:0 15px 20px; padding-bottom: 30px; max-width:450px; background:url(../images/dot_bg.png) repeat-x bottom left;}
section.introduction{float:left; margin:0 15px 20px; padding-bottom: 30px; max-width:450px; background:url(../images/dot_bg.png) repeat-x bottom left;}
.preface h3{margin-top:30px; color:#000; font-size:24px}
.preface h3 a:link, .preface h3 a:visited{color:#000; text-decoration:none; background:url(../images/link_bg.png) repeat-x bottom}
.preface h3 a:hover{color:#666; text-decoration:none; border-bottom:none; background:none; cursor:pointer}
.preface h3 a:link span, .preface h3 a:visited span{font-size:18px; color:#666}
.preface p{font-size:16px; line-height:1.5em; padding:15px 0 0}
.preface p a:link, .preface p a:visited{color:#c30; text-decoration:none; background:url(../images/link_bg.png) repeat-x bottom}
.preface p a:hover{color:#000; text-decoration:none; border-bottom:none; background:none; cursor:pointer}

.buy{margin:0 auto; clear:both; max-width:960px}
.invite, .purchase{float:left; margin:0 15px 20px; padding: 20px 0 0; width:450px; display: block;}
.invite p {text-align: center; font-size: 30px; color: #666; line-height: 1.25em; margin-top: 30px;}
.purchase img {float: left; padding: 0 40px 0 0; margin-top: -15px;}
.purchase h4 {font-size: 18px; color: #000; text-transform: uppercase; display: inline; margin-left: -15px !important; clear: right;}
.purchase p {font-size: 16px; color: #000; padding: 15px 0; clear: right;}
.purchase p#formats {color: #666;}
.purchaes p span {color: #666;}
.purchase ul {font-size: 40px; color: #000; padding: 10px 0;}
.purchase li {float: left; display: block;}
.purchase li span {font-size: 16px; color: #666; display: block; clear: both;}
.purchase li.buyButton {margin: 5px 0 0 30px;}
.purchase li a:link, .purchase li a:visited {width: 130px; height: 44px; display: block; text-indent: -9000px; text-decoration: none; border: none; background: url(../images/btn_buy.png) no-repeat 0 0;}
.purchase li a:hover {text-decoration: none; border: none; background: url(../images/btn_buy.png) no-repeat 0 -44px}

/* INTERIOR PAGE HEADER STYLES ------------------------------------------------------------- */
header.inner{width:100%}
.top{width:100%; height:36px; background:#dbdbdb}
.top ul{margin:0 auto; width:480px; height:36px; text-align:center; font-size:14px}
.top li{float:left; width:210px; text-align:center; height:36px; margin:0 15px}
.top li a:link, .top li a:visited{color:#666; text-decoration:none; display:block; width:210px; height:36px; line-height:36px}
.top li a:hover{color:#000; text-decoration:underline; cursor:pointer}
img.logo{margin:0 auto; text-align:center; padding:50px 0 60px}
img.logo a{border:none}

/* INTERIOR PAGE MAIN NAV STYLES ------------------------------------------------------------- */
ol.mainNav{width:480px; font-size:24px; color:#eaeae8; margin:0 auto 30px; padding:0 0 5px; clear:both}
.mainNav li{float:left; text-align:center; width:50px; margin:0 15px; overflow:visible; position:relative; z-index:1}
.mainNav li:hover{z-index:500}
.mainNav li span{display:none}
.mainNav li:hover span{display:block; position:absolute; top:60px; left:-30px; width:110px; text-align:center; color:#333; text-transform:uppercase; font-weight:normal; letter-spacing:.06em; font-size:10px; background:#eaeae8}
.mainNav li a:link, .mainNav li a:visited{color:#eaeae8; text-decoration:none; border-bottom:none; background:#000; line-height:50px; height:48px; padding-top:2px; width:50px; display:block; -moz-border-radius:25px; border-radius:25px}
.mainNav li a:hover{color:#eaeae8; text-decoration:none; cursor:pointer; background:#666}

/* MAIN NAV YOU-ARE-HERE STYLES ------------------------------------------------------------- */
.chOne li.navOne a{color:#eaeae8; text-decoration:none; background:#c30; z-index:500}
.chTwo li.navTwo a{color:#eaeae8; text-decoration:none; background:#c30; z-index:500}
.chThree li.navThree a{color:#eaeae8; text-decoration:none; background:#c30; z-index:500}
.chFour li.navFour a{color:#eaeae8; text-decoration:none; background:#c30; z-index:500}
.chFive li.navFive a{color:#eaeae8; text-decoration:none; background:#c30; z-index:500}
.chSix li.navSix a{color:#eaeae8; text-decoration:none; background:#c30; z-index:500}

/* SUB NAV STYLES ------------------------------------------------------------- */
.subNav{clear:both; margin:0 auto; width:480px; padding:18px 0; background:url(../images/dot_bg.png) repeat-x top}
.subNav h1{color:#000; font-size:18px; text-align:center; line-height:1.1em; padding:5px 0 10px; text-transform:uppercase}
.subNav ol{float:left; width:210px; margin:0 15px}
.subNav li{font-size:14px; padding:6px 0; margin:0}
.subNav li span{padding-right:10px}
.subNav li a:link, .subNav li a:visited{color:#c30; text-decoration:none}
.subNav li a:hover{color:#000; text-decoration:underline; border-bottom:none; cursor:pointer}
.subOne li.snOne a{color:#333; text-decoration:none; border-bottom:none}
.subTwo li.snTwo a{color:#333; text-decoration:none; border-bottom:none}
.subThree li.snThree a{color:#333; text-decoration:none; border-bottom:none}
.subFour li.snFour a{color:#333; text-decoration:none; border-bottom:none}
.subFive li.snFive a{color:#333; text-decoration:none; border-bottom:none}
.subSix li.snSix a{color:#333; text-decoration:none; border-bottom:none}

/* CONTENT PAGE STYLES ------------------------------------------------------------- */
.innerBody{margin:0 auto; width:480px}
.reference .innerBody, .author .innerBody {
	padding-bottom: 40px;
}
.innerBody aside {clear: both; display: block; background: #fff url(../images/aside_bg.png) repeat-x top left; margin: 15px 0 30px; padding: 5px 5px 20px; border-right: 15px solid #fff; border-left: 15px solid #fff;}
.innerBody aside h5 {padding-left: 55px; font-weight: bold; height: 43px; display: block; line-height: 43px; background: url(../images/protip_bg.png) no-repeat left;}
.innerBody aside p {padding-bottom: 15px; margin: 0 !important;}
.innerBody aside p:last-child {background: url(../images/dot_bg.png) repeat-x bottom left;}
.innerBody h1{color:#000; font-size:24px; line-height:1.1em; margin:0 15px; padding:30px 0 16px; text-transform:uppercase; background:url(../images/dot_bg.png) repeat-x top}
.innerBody h2 span{color:#999;}
.innerBody h2{margin:15px 15px 0 15px; color:#000; font-size:22px; line-height:1.1em; padding:40px 0 16px; text-transform:uppercase; background:url(../images/dot_bg.png) repeat-x top}
.innerBody h3{margin:15px 15px 0 15px; color:#928263; font-size:22px; line-height:1.1em; padding:20px 0 10px; background:url(../images/dot_bg.png) repeat-x top}
.innerBody h4{margin:15px 15px 0 15px; color:#333; font-size:17px; line-height:1.3em; padding:20px 0 0; font-weight: bold;}
.innerBody h5{margin:15px 15px 0 15px; color:#000; font-size:16px; font-style: italic; line-height:1.3em; padding:20px 0 10px; background:url(../images/dot_bg.png) repeat-x top}
.innerBody h6 {font-weight: bold; color:#555; line-height:1.5em; font-size:15px; padding:10px 0 5px; margin-right:15px; margin-left:15px; text-shadow:#fff 1px 1px 1px;}
.innerBody ol {
	margin: 0 0 0 22px;
	list-style: decimal;
	list-style-position: outside;
	line-height:1.5em; 
	font-size:18px; padding:15px 0 20px; 
}
.innerBody ul {
	margin: 0 0 0 24px;
	list-style: disc;
	list-style-position: outside;
	line-height:1.5em; 
	font-size:18px; padding:15px 0 10px; 
}
.innerBody ol li {padding: 5px 0; margin-left: 18px;}
.innerBody ul li {padding: 5px 0; margin-left: 24px;}
.innerBody dl {line-height:1.5em; padding:10px 0 5px; margin: 0 15px;}
.innerBody dt {font-size: 18px; padding: 10px 0 0; font-weight: bold;}
.innerBody dd {font-size: 18px; padding: 5px 0 10px; text-align:justify;}
.innerBody p{color:#333; line-height:1.5em; font-size:18px; padding:0 0 5px; margin-right:15px; margin-left:15px; text-align:justify}
.innerBody p+p{text-indent:25px}
.innerBody p.stars {text-align: center;}
.innerBody p.noIndent {text-indent: 0; padding-top: 20px;}
.innerBody p a:link, .innerBody p a:visited, .innerBody li a:link, .innerBody li a:visited {color:#c30; text-decoration:none; background:url(../images/link_bg.png) repeat-x bottom}
.innerBody p a:hover, .innerBody li a:hover {color:#000; text-decoration:none; border-bottom:none; background:none; cursor:pointer}
.innerBody blockquote{margin:15px; margin-bottom: 30px; color:#777; font-size:20px; line-height:1.4em; text-align:left; font-style:italic; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
.innerBody blockquote p {text-align: left;}
.progress{clear:both; margin:20px auto 0; width:480px; padding:20px 0 30px; background:url(../images/dot_bg.png) repeat-x top}
.progress ul{clear:both; width:480px; font-size:14px; text-transform:uppercase}
.progress li.right{float:right; width:190px; margin:0 15px; text-align: left;}
.progress li.left{float:left; width:210px; margin:0 15px; text-align: right;}
.progress li.left a:link, .progress li.left a:visited{margin-top:15px; padding: 20px 15px 0 10px; display:block; width:190px; height:51px; line-height:1.2em; color:#fff; text-decoration:none; border:none; background:url(../images/progress_bg.png) no-repeat 0 0}
.progress li.left a:hover{background:url(../images/progress_bg.png) no-repeat 0 -71px; color:#fff; text-decoration:none; border:none}
.progress li.right a:link, .progress li.right a:visited{margin-top:15px; padding: 20px 10px 0 15px; display:block; width:190px; height:51px; line-height:1.2em; color:#fff; text-decoration:none; border:none; background:url(../images/progress_bg.png) no-repeat -240px 0}
.progress li.right a:hover{background:url(../images/progress_bg.png) no-repeat -240px -71px; color:#fff; text-decoration:none; border:none}

/* FOOTER STYLES ------------------------------------------------------------- */
footer{clear:both; width:100%; background:#333; padding:30px 0 40px}
.footBox{margin:0 auto; padding:30px 0 0; width:480px; border-top:1px solid #666}
.footBox h3 {width: 450px; margin: 0 auto;}
.footBox h3 a {width: 450px; height: 50px; display: block; margin: 0 auto 25px; background: url(../images/btn_buy_footer_bg.png) no-repeat center top; text-indent: -9000px; text-decoration: none; border: none;}
img.footerLogo{margin:0 auto}
img.footBuy {display: none;}
a img.footBuy {margin: 10px auto 25px; display: block;}
.footBox p{font-size:14px; color:#fff; padding:0; text-align:center}
.footBox img a {border: none;}
ul.intros{clear:both; margin:0 auto; width:480px; padding:10px 0 15px; display:block}
.intros li{width:450px; display:block; height:18px; line-height:18px; margin:0 15px; padding:5px 0; color:#eaeae8; background:url(../images/longdots_bg.png) repeat-x}
.intros li em{background:#333; font-style:normal; padding-right:3px}
.intros li span{background:#333; float:right; padding-left:3px}
.intros li a:link, .intros li a:visited{color:#eaeae8; text-decoration:none; background:url(../images/footer_link_bg.png) repeat-x left bottom}
.intros li a:hover{color:#999; text-decoration:none; background:none}
.intros li em a:link, .intros li em a:visited{background:none !important}
li.noDots{background:none !important}
section.chapters{clear:both; border-top:4px solid #3c3c3c; border-bottom:4px solid #3c3c3c; padding:20px 0 30px}
.chapters h5{font-size:16px; color:#999; text-transform:uppercase; text-align:center; padding:0 0 20px}
.chapters ol{float:left; width:210px; margin:0 15px; font-size:16px}
.chapters li{width:210px; height:38px; padding:4px 0}
.chapters li a:link, .chapters li a:visited{color:#fff; text-decoration:none; width:180px; padding-top:1px; padding-left:30px; height:37px; line-height:38px; display:block; background:url(../images/footer_chapters_bg.png) no-repeat 0 0; border:none}
.chapters li a:hover{color:#000; text-decoration:none; background:url(../images/footer_chapters_bg.png) no-repeat 0 -38px}
.chapters li a span{color:#999}
ul.copyright{clear:both; margin:0 auto; width:450px; padding:30px 0 0; font-size:14px; color:#eaeae8}
.copyright li{display:block; padding:4px 0}
.copyright li a:link, .copyright li a:visited{color:#eaeae8; text-decoration:none; background:url(../images/footer_link_bg.png) repeat-x left bottom}
.copyright li a:hover{color:#999; text-decoration:none; background:none}

/* @group Layouts for resolutions 

------------------------------------------------------------------------ */ 
/*layouts smaller than 480px, iPhone and mobiles*/
@media screen and (max-device-width:480px), screen and (max-width:480px){.main header p,.mainBody,mainBody nav,.preface,section.foreword,section.introduction,.footBox{width:320px}
.main header p{width:290px}
.mainBody h2{font-size:24px}
ol.frontNav{float:none}
.innerBody dt {font-size: 18px;}
.innerBody dd {font-size: 18px;}
.frontNav li{float:none; width:290px; padding-top:20px}
.frontNav li em{float:right; width:210px; display:inline; text-align:left; font-size:18px; margin:15px 0 15px 30px}
.frontNav li a:link em, .frontNav li a:visited em{display:block; width:210px}
.frontNav li a:link span, .frontNav li a:visited span{float:left; margin:0}
.frontNav li p{clear:both; width:290px; font-size:15px}

.buy{width:320px}
.invite, .purchase{width:290px;}
.purchase img {display: none; /*float: none; padding: 0; margin: 0 auto; clear: both;*/}
.purchase h4 {clear: both; display: block; text-align: center;}
.purchase p { display: block; clear: both; text-align: center;}
.purchase ul {display: block; width: 290px;}
.purchase li a {text-decoration: none; border: none; background: url(../images/btn_buy.png) no-repeat 0 0;}


 /* start interior page styles for small screen */
.top{width:100%; height:73px; background:#dbdbdb}
.top ul{margin:0 auto; width:320px; height:36px; text-align:center; font-size:16px}
.top li{float:none; width:290px; height:36px; border-top:1px solid #ccc}
.top li a:link, .top li a:visited{width:290px; height:36px; line-height:36px}
ol.mainNav{width:240px; font-size:24px; color:#eaeae8; margin:-30px auto 30px; padding:0 0 5px; clear:both}
.mainNav li{float:left; text-align:center; width:50px; margin:30px 15px 0; overflow:visible; position:relative; z-index:1}
.mainNav li.break1{clear:left}
.subNav{width:320px}
.subNav h4{font-size:24px}
.subNav ol{float:left; width:290px; margin:0 15px}
.subNav li{font-size:20px}
.innerBody{width:320px}
.innerBody aside p {text-align: left !important}
.innerBody h1{}
.innerBody h1 span{}
.innerBody h2{margin:15px 15px 0 15px}
.innerBody h3{margin:15px 15px 0 15px}
.innerBody h4{margin:15px 15px 0 15px;}
.innerBody h5{font-size:18px; margin:15px 15px 0 15px;}
.innerBody aside h5 {padding-left: 0; font-weight: bold; height: auto; display: block; line-height: 20px; background: none;}
.innerBody h6 {font-size:18px; margin-right:15px; margin-left:15px; }
.innerBody ol {font-size: 18px; margin: 0 0 0 30px;}
.innerBody ol li {margin-left: 15px;}
.innerBody ul {font-size: 18px; margin: 0 0 0 30px;}
.innerBody p{line-height:1.4em; font-size:18px; margin:0 15px; text-align: left;}
.innerBody p+p{text-indent:20px}
.innerBody blockquote{margin:25px 15px; color:#666; text-align: left;}
.progress{width:320px}
.progress ul{width:320px; font-size:16px}
.progress li.right{float:none; width:290px; margin:0 15px; text-align: center;}
.progress li.left{float:none; width:290px; margin:24px 15px 0; text-align: center;}
.progress li.left a:link, .progress li.left a:visited{margin-top:0; padding: 0; display:block; width:290px; overflow:visible; height:20px; line-height:20px; color:#c30; background:none}
.progress li.left a:hover{background:none; color:#000}
.progress li.right a:link, .progress li.right a:visited{margin-top:0; padding: 0; display:block; width:290px; overflow:visible; height:20px; line-height:20px; color:#c30; background:none}
.progress li.right a:hover{background:none; color:#000}
ul.intros{width:320px}
.intros li{width:290px}
.chapters h5{font-size:18px}
.chapters ol{float:left; width:290px; margin:0 15px; font-size:20px}
.chapters li{width:290px; height:38px; padding:4px 0}
.chapters li a:link, .chapters li a:visited{width:290px; background:url(../images/footer_chapters_mobile_bg.png) no-repeat 0 0}
.chapters li a:hover{background:url(../images/footer_chapters_mobile_bg.png) no-repeat 0 -38px}
.chapters li a span{color:#999}
ul.copyright{clear:both; margin:0 auto; width:290px; padding:30px 0 0; font-size:14px; color:#eaeae8}
.footBox h3 {width: 290px; margin: 0 auto;}
.footBox h3 a {width: 290px; height: 50px; display: block; margin: 0 auto 25px; background: url(../images/btn_buy_footer_bg.png) no-repeat center top; text-indent: -9000px; text-decoration: none; border: none;}
}
/*end layouts smaller than 480px, iPhone and mobiles*


/*layout for medium screens*/
@media screen and (max-device-width:960px), screen and (max-width:970px){.main header p,.mainBody,mainBody nav,.preface,section.foreword,section.introduction,.footBox{max-width:480px}
.invite p {font-size: 24px; margin-top: 0;}
}
/*end layout for medium screens*/


/* ------------------------------------------------------------- */
.clearfix{display:inline-block}
.clearfix:after{ content:"";  display:block;  height:0;  clear:both;  font-size:0;  visibility:hidden}
/* Hides from IE-mac \*/
* html .clearfix{height:1%}
.clearfix{display:block}
/* End hide from IE-mac */