/* COLOR CHEAT SHEET */
/* Colors and names from http://www.visibone.com/colorlab/ */

/* Future scheme?--thanks to colorschemedesigner.com
 * 
 * 65A6D1  pale background
 * 0A67A3  medium background
 * 3E97D1  bright background
 * 03426A  dark foreground

/* Scheme--weak blues, greys
 * 
 * CCCCFF  pale weak blue
 * 9999CC  light weak blue
 * 666699  medium weak blue
 * 333366  dark weak blue
 * 000033  obscure weak blue
 *
 * CCCCCC  pale gray
 * 666666  dark gray
 * 333333  obscure gray
 */


/* GENERAL SETUP */

body {
  margin: 1em;
  padding: 0;
  font-family: verdana, "trebuchet MS", helvetica, sans-serif;
  color: black;
  background: white;
  font-size: 12px;
  max-width: 928px;
}
  
p {
  margin-top: 0; padding-top: 0;
}

h1, h2, h3, h4, h5, h6 {
//  font-family: Georgia, Times, serif;
  color: #333366;
  background-color: transparent;
  margin: 5px 0 0 0;
  letter-spacing: .04em;
}

h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
//  font-family: Georgia, Times, serif;
  font-size: 100%;
}

h1 {
  font-size:  24px;
}

h2 {
  font-size:  18px;
}

h3 {
  font-size:  16px;
}

h4 {
  font-size:  14px;
}

h5 {
  font-size:  12px;
}

h6 {
  font-size:  12px;
}

a {
  text-decoration:  none;
  font-weight:  bold;
}

#body a {
  border-bottom: solid 1px;
  border-color: #CCCCFF;  
}

a:link  {
  color: #333399;
  background-color: transparent;
}

a:visited {
  color: #666666;
  background-color: transparent;
}

a:active  {
  color: #000000;
  background-color: transparent;
}

a:hover {
  background-color: #CCCCFF;
  text-decoration: underline;
}

dt  {
  font-weight: bold;
}

ol, li, dl, dt, dd {
  line-height: 1.5em;
}
  
img {
  /* turns off gaps around images */
  border: 0
}


code, tt, pre {
  font: "andale mono", monaco, courier, "courier new", monospace;
  font-size: 1em;  /* necessary to make ie7 scale font properly */
  color: #06c;
  background: transparent;
}



/* ALL PAGES */

#header, #menu {
  border: solid 1px;
  border-color: #666666;
  padding: 0.8em;
  background-color: #EEEEEE;
}

#body {
  width: 100%;
}

#footer {
  clear: both;
  border-top: 1px solid;
  margin-bottom: 0;
  margin-top: 2em;
  padding-top: 0.5ex;
}

#footer .copyright p {
  margin: 0;
  font-size: 75%;
  text-align: center;
}

#footer .promo {
  font-style: italic;
}

#footer .mini-bio {
  display: none;
}

#footercomment .p {
	font-size: 300%;
	font-style: italic;
	border-top: 1px solid;
	background-color: #CCCCFF;
}

.banner {
	margin-bottom: 2em;
}

.banner img {
	width: 728px;
	height: 90px;
}

#body .banner a, #body .banner a:link, #body .banner a:visited, #body .banner a:active, #body .banner a:hover {
  border-bottom: none;
  text-decoration: none;
}

/* MENU, ARTICLES */

/* Menu structure borrowed from www.jeffreyzeldman.com.  Used with permission. */

#menu dd, #menu dt, .articles dd, .articles dt {
  margin-left: 0;
  padding-left: 0;
  line-height: 17px;
  margin-bottom: 4px;
  letter-spacing: .04em;
}

#menu dt, .articles dt  {
  font-size: 110%;
  font-variant: small-caps;
  letter-spacing: .2em;
  margin-top: 3ex;
  padding: .2em .4em;
  background: #666699;
  color: white;
}

#menu dt {
  white-space: nowrap;
}

#menu dd, .articles dd {
  padding-left: .4em;
}

#menu dd {
  white-space: nowrap;
}

#menu ul {
  margin-top: 0;
}

#menu a:link, #menu a:visited {
  font-weight : normal; 
}

#menu, .articles {
  vertical-align: top;
}

.articles {
  font-weight: bold;
}

.articles .summary {
  font-weight: normal;
}

#menu .details {
	white-space: normal;
	font-size: 75%;
}

#menu .details li {
	margin-left: -2em;
	list-style: circle
}

#menu .details .outdent {
	list-style: none;
	margin-left: -3.5em
}


/* HEADER */

#header h1 {
  letter-spacing: .04em;
}

#header p {
  margin: 0;
  padding: 0;
}

/* Centering logic inspired by Matthew James Taylor.
http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support# */
.centered-block {
	float:left;
	width:100%;
	overflow:hidden;
	position:relative;
}

.centered-block .centered {
	clear:left;
	float:left;
	list-style:none;
	margin:0;
	padding:0;
	position:relative;
	left:50%;
	text-align:center;
}

.centered-block .centered div {
	display:block;
	float:left;
	list-style:none;
	margin:0;
	padding:0;
	position:relative;
	right:50%;
}

.centered-block .pull-right {
	float: right;
	font-style: italic;
	width: 16em;
	font-size: 0.9em;
	text-align: center;
	padding-right: 1em;  /* make IE7 work */
}

/* INDEX */

p.index {
  line-height: 1em;
}

p.index a {
  font-weight: normal;
}

#body h2.index {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
  border-bottom: 1px dotted;
  margin-bottom: 1em;
}



/* STORIES */

#body {
  vertical-align: top;
}

#body h1, #body h2, #body h3, #body h4, #body h5, #body h6 {
  font-weight: normal;
}

#body h2 {
  margin-top: 1ex;
  padding-top: 4ex;
  border-top: 1px dotted;
}

#body h3 {
  margin-bottom: 0.5ex;
}

#body {
  padding: 3ex 3% 0 3%;
}

.story {
  text-align: left;
}

.story li {
  text-align: left;
}

.byline {
  display: none;
}

.date, .subheading, .print {
  font-variant: small-caps;
  font-weight: bold;
}

.permlink, .breadcrumbs {
  font-variant: small-caps;
}

.permlink {
  float: right;
  clear: right;
  text-align: right;
  margin-bottom: 0em;
}

.story p {
  line-height: 1.5em;
}

.date {
  font-size: 90%;
}

.subheading {
  font-size: 90%;
}

.print {
  float: right;
  border-style: outset;
  border-width: 1px;
  padding: .25em .5em .25em .5em;
  margin: 3em 0 0 1em;
  background-color: #EEEEFF;
  cursor: pointer;
}

.print:hover {
  background-color: #CCCCFF;
}

.print:active {
  border-style: inset;
  padding: .30em .45em .20em .55em;
}

.series, .translations {
  float: right;
  border-style: groove;
  border-width: 4px;
  padding: .25em .5em .25em .5em;
  margin: 0 0 .5em 1em;
  background-color: #EEEEEE;
  text-align: left;
  width: 20%;
}

.translations {
  font-size: 90%;
  width: 15%;
}

.translations dl {
  margin: 0;
}

.translations dt {
  letter-spacing: .1em;
  font-variant: small-caps;
  text-align: center;
  border-bottom: 1px solid #666699;
}

.translations dd {
  margin-left: 0;
}

/* STORY MARKUP */

pre.code {
  margin-left: 3em;
  margin-right: 3em;
  color: black;
  white-space: pre-wrap;
}

blockquote, .code {
  padding: 0.5em 0.5em 0.5em 1em;
  border-left: 1px solid #333366;
  background-color: #DDDDFF;
}

/* The previous rule prevents hover links from standing out.  We fix that here. */
blockquote a:hover {
  background-color: white;
}

blockquote .caption {
  margin-bottom: 0;
}

#body blockquote p {
  line-height: 1.3em;
}

blockquote.site-notice {
  color: #444444;
  background-color: pink;
  border: dashed 1px;
  padding: 1ex 1em 0 1em;
}

blockquote.pullquote {
  float: right;
  border-top: 3px double;
  border-bottom: 3px double;
  border-left: none;
  border-right: none;
  background-color: white;
  margin: 0 0 0.3em 1em;
  font-size: 1.4em;
  font-family: Georgia, Times, serif;
  width: 33%;
  text-align: left;  
}

.sig {
  text-align: right;
  margin-bottom: 0;
}

.sig:before {
  content: "--";
}

h3 {
  margin-top: 1.5em;
}

.postscript, .update, .aside, .footnote, .caption, .figure p, .figure-left p, .related, .sig {
  font-style: italic;
  font-size: 0.9em;
}

em, cite, dfn, strong, .language, .update, .articles .summary {
  font-style: italic;
}

.aside em, .footnote em, .update em, .articles .summary em { 
  font-size: 1em;
  font-weight: bold;
}

.aside cite, .footnote cite, .update cite, .sig cite, .articles .summary cite {
  font-size: 1em;
  font-style: normal;
}


strong {
  color: #333;
  background-color: #FFFF99;
}

pre em, pre strong {
  font-family: monospace;
  font-size: 1em;
}

#body .separator {
  text-align:center;
  line-height:1.5em;
}

.code {
  text-align: left;
  font-family: "andale mono", monaco, courier, "courier new", monospace;
}

.code em {
  background-color: #FFFF99;
  font-family: "andale mono", monaco, courier, "courier new", monospace;
  font-size: 100%;
  font-style: normal;
}

.code div.em {
  background-color: #FFFF99;
}

.code .comment {
  color: green;
  font-style: italic;
}

.code .function {
  color: red;
}

.book {  /* OBSOLETE: use <cite> */
  /* intended to be used thusly: u class="book" */
  text-decoration: none;
  font-style: italic;
}

.changed {
  border-left: solid 0.2em;
  margin-left: -1em;
  padding-left: 0.8em;
  border-color: black;
}


/* lists */

ol.instructions > li {   /* Parts */
	list-style-type: upper-roman;
	font-variant: small-caps;
	font-size: 110%;
	font-weight: bold;
	margin-left: -1em;
	margin-bottom: 1em;
}

ol.instructions > li > ol > li {  /* Instructions within parts */
	list-style-type: decimal;
	font-variant: normal;
	font-size: 90.9%;
	font-weight: normal;
	margin-bottom: 0.5em;	
}

ol.instructions > li > ol > li > ol > li {  /* Sections with chapters */
	list-style-type: none;
	font-weight: normal;
	margin-left: -3em;
}

ol.no-number {
  list-style-type: none;
}


/* tables */
table {
  margin-bottom: 1em;
}

table.register {
  font-variant: small-caps;
  font-weight: bold;
  font-size: 1.25em;
  border-style: outset;
  border-width: 2px;
  padding: .25em .5em .25em .5em;
  white-space: nowrap;
  background-color: #EEEEFF;
  margin: 0 0 1em 0;
}

table.left, table.list {
  border-style: dashed none dashed none;
  border-width: 1px;
  border-color: black;
}

table.left th {
  white-space: nowrap;
  font-variant: small-caps;
  text-align: right;
  font-weight: bold;
  padding-right: 1em;
  vertical-align: top;
}

table.left th:after {
  content: ":";
}

table.left td {
  vertical-align: top;
  text-align: left;
}

table.list th, table.register th {
  font-variant: small-caps;
  text-align: left;
  font-weight: bold;
  text-decoration: underline;
  padding-right: 1em;
}

table.list td, table.register td {
  text-align: left;
  padding-right: 1em;
  vertical-align: top;
}

table.designmap {
  border-collapse: collapse;
}

table.designmap th, table.designmap td {
  border: solid 1px;
  border-color: black;
  padding: 0 1em 0 1em;
}

table.designmap td {
  border: solid 1px;
  border-color: black;
  text-align: center;
}


/* figures */
.figure {
  float:right;
  clear:right;
  padding-left: 2em;
}

.figure-left {
  float:left;
  clear:left;
  padding-right: 2em;
}

.framed {
	border: solid 1px;
}


/* COMMENTS */

.comments {
	margin-top: 1em;
}

#js-kit-loader {
	display: none; 
}

.js-CreateCommentBg {
	width: 100%;
}

.js-CreateComment textarea { 
	width: 100%; 
	height: 20em;
}

/* BOOK */

.book_nav {
  font-style: italic;
}

.goal {
  font-style: italic;
}

.audience {
  clear: right;
  float: right;
  border-style: inset;
  border-width: 1px;
  padding: .25em 1em .25em 1em;
  margin: 0 0 .5em 1em;
  background-color: #EEEEEE;
  text-align: center;
  width: 20%;
}

.audience dt {
  font-size: 110%;
  letter-spacing: .1em;
  font-variant: small-caps;
  text-align: center;
  border-bottom: 1px solid #666699;
}

.audience dd {
  margin-left: 0;
}

.practice {
  clear: right;
  float: right;
  border-style: inset;
  border-width: 1px;
  padding: .25em 1em .25em 1em;
  margin: 1ex 0 0 1em;
  background-color: #EEEEEE;
  text-align: center;
  width: 7em;
}

.practice dt {
  font-size: 90%;
  letter-spacing: .1em;
  font-variant: small-caps;
  text-align: center;
  border-bottom: 1px solid #666699;
}

.practice dd {
  font-size: 75%;
  margin-left: 0;
}

.practice dd.separated {
  margin-top: 0.5ex;
  padding-top: 0.5ex;
  border-top: 1px dotted grey;
}

.faq {
  font-family: Georgia, Times, serif;
  font-style: italic;
  font-weight: bold;
}

blockquote.coach {
  clear: right;
  float: right;
  border-left: none;
  border-top: double;
  border-bottom: double;
  background-color: white;
  margin: 1ex 0 0 1em;
  font-size: 1.25em;
  font-family: Georgia, Times, serif;
  width: 30%;
  text-align: left;  
}

blockquote.notetip {
  background-color: #EEEEEE;
  border: solid 3px;
  margin: 0 2em 1em 2em;
}

.for {
  margin: 0 2em 1em 2em;
  color: #444444;
}

.for_who {
  font-variant: small-caps;
}

.for_body {
  background-color: pink;
  border: dashed 1px;
  padding: 1ex 1em 0 1em;
}

.link {
  font-size: .7em;
  border-bottom: dashed 1px;
}

blockquote.ninetynine_words {
	background-color: transparent;
	border: solid 1px;
	margin: 1em 2em 1em 2em;
	padding: 1em 1em 0em 1em;
}

blockquote.haiku {
	background-color: transparent;
	border: 0;
}


/* CUSTOM for book's table of contents */

ol.aoa-contents > li {   /* Parts */
	list-style-type: none;
	font-weight: bold;
	font-size: 110%;
	margin-left: -1em;
	margin-bottom: 1em;
}

ol.aoa-contents > li > ol > li {  /* Chapters within parts */
	font-weight: bold;
	font-size: 90%;
	margin-bottom: 0.5em;	
}

ol.aoa-contents > li > ol > li > ol > li {  /* Sections with chapters */
	list-style-type: none;
	font-weight: normal;
	margin-left: -2em;
}

/* CUSTOM for Let's Play TDD table of contents */

ol.tdd-contents > li {   /* Parts */
	clear: both;
	list-style-type: none;
	font-weight: bold;
	font-size: 110%;
	margin-left: -1em;
	margin-bottom: 1.5em;
}

ol.tdd-contents > li > div > img {  /* Thumbnail image */
	width: 150px;
	height: 150px;
    float: left;
    border: solid darkgrey 1px;
    margin-left: 1.5em;
    margin-top: 0.5ex;
    margin-bottom: 1.5em;
}

ol.tdd-contents > li > ol > li {  /* Chapters within parts */
	list-style-type: none;
	font-weight: normal;
	font-size: 90%;
	margin-left: 150px;
}

ol.tdd-contents > li.no-thumb > ol > li {
	margin-left: -2em;
}