@import url('css/reset.css');
@import url('css/defaults.css');
/**
 * tableOfContents

 *  typographySetup
 *  layout
 *  sidebars
 *  mainContent

 *  questionsAndAnswers
 *    imagesAndButtons
 *  utility

 **
 * Color Scheme

 * 3A2301 Dark Brown  : copy
 * 945B00 Light Brown 
 * C8A837 Dark Yellow : pagination
*/
/*////////////////////////////////////////////// typographySetup */
/*
:18px vertical rhythm at a 12px base font size

  key
  --------------------
  font size (in EMs) = desired pixel font size divided by the parent elements font size in pixels (12px on the body)
  line height        = desired pixel line height divided by the pixel font size, note line height is unitless (no em suffix) 
  18px (in EMs)      = 18px divided by the font size

  pixel
  font
  size   font size           line height       18px
  ----   -----------------   ---------------   ----------------
  36px   3em      = 36 /12   1.5    = 54 /36   .5em     = 18/36
  24px   2em      = 24 /12   1.5    = 36 /24   .75em    = 18/24
  21px   1.75em   = 21 /12   1.7143 = 36 /21   .8571em  = 18/21
  18px   1.5em    = 18 /12   2      = 36 /18   1em      = 18/18
  16px   1.3333em = 16 /12   2.25   = 36 /16   1.125em  = 18/16
  14px   1.1667em = 14 /12   2.5714 = 36 /14   1.2857em = 18/14

  12px   1em      = 12 /12   1.5    = 18 /12   1.5em    = 18/12

  10px   .8333em  = 10 /12   1.8    = 18 /10   1.8em    = 18/10
   9px   .75em    =  9 /12   2      = 18 /9    2em      = 18/ 9


:5:4 ratio 
  : vertical rhythm incremental 5:4 ratio for the question copy
  : so every 5 lines of question copy lines up to 4 lines of body copy
  : for more info see Mark Boulton's post
    http://www.markboulton.co.uk/journal/comments/incremental-leading

18px * 4 = 72px (get 4 lines of body copy)
72px / 5 = 14.4px (find the value of 1 line of question copy in the 5:4 ratio)
14.4px / 11px = 1.6em (get the em value for the pixel height)
         ^ 11px is the font-size for the question
*/

/*////////////////////////////////////////////// layout */
#wrapper {
	width: 880px;
	margin: 0 auto 36px;
}

#sidebar {
	margin: 0 580px 0 0;
	padding: 0 20px;
}

#main-content {
	display: inline;
	float: right;
	width: 560px;
	margin-left: 20px;
}

/*////////////////////////////////////////////// sidebars */
h1 { margin: 0 -6px 35px; /* -6px to copensate for 260px sidebar width */ }
h1 a { display: block; }


a#visit-pet-project {
	display: block;
	margin: 0 -1px 1.5em; /* -1px to copensate for 260px sidebar width */
	padding: 2px 0 1px;
}


/*////////////////////////////////////////////// mainContent */
#main-content h2 {
	line-height: 29px;
	border-top: 1px dotted #99835B;
	height: 99px;
	padding: .9167em 0 0; /* 11px /12 */
	margin-bottom:1.5em;
}

#main-content h3 {
	font-size: 1.1667em; /* 14px */
	line-height: 1.2857; /* 18px /14 */
	padding: 0 0 .9286em; /* 13px /14 */
}

/*////////////////////////////////////////////// questionsAndAnswers */
/* the questions and answers follow the 5:4 ratio incramental vertical rhythm : see notes above */
.question {
	border-top: 1px dotted #99835B;
	padding: 1.1167em 0 1.2em; /* 13.4 /12 and 14.4px /12 */
}

.answer {
	border-bottom: 1px dotted #99835B;
	padding-bottom: 1.2182em; /* (14.4 - 1px border) /11 */
	margin-bottom: 3.9273em; /* 14.4 x3 /11 */
}

.question p { /* vertical rhythm 5:4 ratio */
	margin: 0 143px 0 42px;
	padding-bottom: 0;
}

.answer p { /* vertical rhythm 5:4 ratio */
	margin: 0 0 0 42px;
	padding-bottom: 1.6364em; /* 18px /11 */
}

.question.answered p { margin-right: 0; }

span.helpful { display: block; color: #945B00; } /* vertical rhythm 5:4 ratio */

span.helpful em {
	font-style: normal;
	color: #3A2301;
}

.answer span.helpful {
	display: block;
	padding-top: 1.6364em; /* 18px /11 */
}


/*////////////////////////////////////////////// questionsAndAnswers imagesAndButtons */
.question strong,
.answer strong,
a.btn-expand,
a.btn-helpful,
a.btn-back {
	display: block;
	float: left;
	text-indent: -9999px;
}

.question strong {
	background: url(images/img_q.gif) no-repeat 0 -1px;
	width: 33px;
	height: 29px;
	margin: .3333em 9px .25em 0; /* 4px /12 and 3px /12 */
}

.answer strong {
	background: url(images/img_a.gif) no-repeat 0 -1px;
	width: 34px;
	height: 26px;
	margin: .3333em 8px .5em 0; /* 4px /12 and 6px /12 */
}

a.btn-expand {
	float: right;
	background: url(images/btn_expand.gif) no-repeat left top;
	width: 123px;
	height: 34px;
}

a.btn-helpful {
	background: url(images/btn_questionHelpful.gif) no-repeat left top;
	width: 261px;
	height: 33px;
	margin: 2px 0 1px;
}

a.btn-back {
	float: right;
	background: url(images/btn_back.gif) no-repeat left top;
	width: 121px;
	height: 33px;
	margin: 2px 0 1px;
}


/*////////////////////////////////////////////// utility */
p#pagination { /* vertical rhythm 5:4 ratio */
	border-top: 1px dotted #99835B;
	padding-top: 1.6364em; /* 18px /11 */
}

#pagination a,
#pagination a:link,
#pagination a:visited,
#pagination a:active {
	display: block;
	float: left;
	color: #3A2301;
	text-decoration: none;
	padding: 2px 6px;
}

#pagination a:hover {
	background: #C8A837;
}

#pagination a.here {
	background: #C8A837;
}

#pagination span {
	display: block;
	float: left;
	padding: 2px 1px;
}

.question p,
.answer p,
span.helpful,
p#joint-venture,
#pagination {
	font-size: .9167em; /* 11px /12 */
	line-height: 1.3091; /* see 5:4 ratio notes above */
}