/* OtterYoung.com Page Styles
   Created by Otter Young (http://www.otteryoung.com)
   June, 2009 (Revised March, 2010)

   Table of Contents:  	Basics
						Grid
						General Layout
						Typography
						Forms
						Additional Type Modifications

   Notes: ...

*/

/* BASICS */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;}
body {line-height:1.5; text-align: justify; margin-bottom: 1.5em; -webkit-text-size-adjust:none;}
a img {border:none;}

/* GRID */
.container {width:840px;margin:0 auto;}
.column, div.span-5, div.span-8, div.span-16 {float:left;margin-right:20px;}
.last, div.last {margin-right:0;}
.span-5 {width:190px;}
.span-8 {width:305px;}
.span-16 {width:630px;}
.prepend-1 {padding-left:20px;}
.prepend-2 {padding-left:40px;}
.comments {border-color: #cccccc; border-width: 1px; border-style: solid; background-color: #ffffff; padding: 25px 30px 10px 30px; align: center; margin-top: -10px; margin-bottom: 20px;}
div.border {padding-right:4px;margin-right:5px;border-right:1px solid #eee;}
div.colborder {padding-right:24px;margin-right:25px;border-right:1px solid #eee;}
.pull-1 {margin-left:-40px;}
.pull-2 {margin-left:-80px;}
.pull-1, .pull-2 {float:left;position:relative;}
.push-1 {margin:0 -40px 1.5em 40px;}
.push-2 {margin:0 -80px 1.5em 80px;}
.push-1, .push-2 {float:right;position:relative;}
.box {padding:1.5em;margin-bottom:1.5em;background:#E5ECF9;}
.footer-content {position: absolute;bottom: 0px;}
hr {background:#777777;color:#ffffff;clear:both;float:none;width:100%;height:.1em;margin:0 0 1.45em;border:none;}
hr.min {background:#777777;color:#ffffff;clear:both;float:none;width:100%;height:.1em;margin:-0.8em 0 1.45em;border:none;}
hr.dotted {background:#ffffff;color:#ffffff; border: 1px dotted #a3a3a3; border-style: none none dotted; }
hr.foot {background:#777777;color:#ffffff;clear:both;float:none;width:100%;height:.1em;margin:1.5em 0 .5em;border:none;}
hr.space {background:#ffffff;color:#ffffff;}
hr.break {background:#ffffff;color:#ffffff;margin:0 0 0em;}
hr.section {background:#cccccc;color:#ffffff;}
hr.light {background:#dddddd;color:#ffffff;}
hr.exsp {background:#ffffff;color:#ffffff;margin:0 0 2.75em;border:none;}


/* GENERAL LAYOUT */
body {font-size:75%;color:#393738;background:#FFFFFF;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;}
h1, h2, h3, h4, h5, h6 {font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;font-weight:normal;color:#000000;}
h1 {font-size:18px;font-weight:normal;margin-bottom:0em; font-family: 'News Gothic MT', sans-serif;}
h2 {font-size:14px;font-weight:600;font-style: normal;font-family: "News Gothic MT", sans-serif; margin-bottom:2px; margin-top: 0px;color:#333;}
h3 {font-size:12px;font-weight: normal; font-family: "Helvetica", sans-serif; color: #777;}
h4 {font-size:12px;font-weight: normal; font-family: "Helvetica", sans-serif;}
h5 {font-size:1em;}
h6 {font-size:1em;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
p {margin:0 0 1.7em;}

a:focus, a:hover {color:#444444;text-decoration:none;}
a:active {color: #444444;}
a {color:#3b6ea5;text-decoration:none;}

a.grey:link {color: #777777; text-decoration: none;}
a.grey:active {color: #777777; text-decoration: none;}
a.grey:visited {color: #777777; text-decoration: none;}
a.grey:hover {color: #55A153; text-decoration: underline;}

a.footer:link {color: #777777; text-decoration: none;}
a.footer:active {color: #777777; text-decoration: none;}
a.footer:visited {color: #777777; text-decoration: none;}
a.footer:hover {color: #55A153; text-decoration: underline;}

img {border-color:#FFFFFF;}
img.header-nosp {margin-top: 0em; margin-bottom: 0em;}
img.border {border: 1px solid #21211c;}

blockquote {margin:1.5em;color:#222222;font-style:italic;}
blockquote-2 {text-align: center; color:#555555; border-style: solid; border-width: thin;}
strong {font-weight:bold;}
em, dfn {font-style:italic;}
dfn {font-weight:bold;}
sup, sub {line-height:0;}
abbr, acronym {border-bottom:1px dotted #222222;}
address {margin:0 0 1.5em;font-style:italic;}
del {color:#777777;}
pre {margin:1.5em 0;white-space:pre;}
pre, code, tt {font:1em 'andale mono', 'lucida console', monospace; line-height:1.5; color: #777777;}

li ul, li ol {margin:0 1.5em; text-align: center;}
ul, ol {margin:0 1.5em 0 1.5em;}
ul {list-style-type:disc;}
ol {list-style-type:decimal;}
dl {margin:0 0 1.5em 0;}
dl dt {font-weight:normal;}
dd {margin-left:1em; color: #555555; margin-bottom: 1.3em;}

ul.alternate {list-style: square; margin: 0px 0px 10px 20px;}
li.alternate-ind {list-style: circle; margin: 0px 0px 0px 20px;}

table {margin-bottom:0em;}
th {font-weight:bold;}
thead th {background:#c3d9ff;}
th, td, caption {padding:0px 0px 0px 0px;}
tr.even td {background:#e5ecf9;}
tfoot {font-style:italic;}
.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
.caption {font-size:.8em;margin-bottom:3.875em;line-height:0em;color:#555555;}
.tablecaption {font-size:.8em;margin-bottom:1.875em;line-height:0em;color:#555555;}
.price {font-size:.8em;margin-bottom:2.875em;line-height:.875em;color:#777777;}
.highlight {background:#ff0;}
.quiet {color:#999999; font-weight:normal;}
.added {background:#060;color:#fff;}
.removed {background:#900;color:#fff;}
.first {margin-left:0;padding-left:0;}
.last {margin-right:0;padding-right:0;}
.top {margin-top:0;padding-top:0;}
.bottom {margin-bottom:0;padding-bottom:0;}


/* FORMS */
label {font-weight:bold;}
fieldset {padding:1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}
legend {font-weight:bold;font-size:1.2em;}
input.text, input.title, textarea, select {margin:0em 0;border:1px solid #bbb;}
input.text:focus, input.title:focus, textarea:focus, select:focus {border:1px solid #666;}
input.text, input.title {width:300px;padding:5px;}
input.title {font-size:1.5em;}
input.name, input.email {width:125px;padding:5px;border:1px solid #bbb;}  /* Settings for email and name fields of contact form */
textarea {width:495px;height:130px;padding:5px; resize: none;}
.error, .notice, .success {padding:.8em;margin-bottom:1em;border:2px solid #ddd;}
.error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
.notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
.success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
.error a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}


/* ADDITIONAL TYPOGRAPHY MODIFICATIONS: PARAGRAPH INDENTATION */

/* For indented paragraphs */
p + p { text-indent:0em; margin-top:-1.2em; }
form p + p  { text-indent: 0; } /* Don't want the above modification in forms. */

/* Paragraph with a very small indent. */
p.ind1, .ind1 p {	text-indent: 1em; }

/* Paragraph with a small indent. */
p.ind, .ind p {	text-indent: 2em; }

/* Paragraph with a double indent. */
p.ind2, ind2 p { text-indent: 4em; }


/* ADDITIONAL TYPOGRAPHY MODIFICATIONS: PARAGRAPH SPACING */

/* Paragraph with an extra space at the top. */
p.exspt, .exspt p { margin-top: 1.5em; }

/* Paragraph with extra space at the bottom. */
p.exsp, .exsp p { margin-bottom: 1.5em; }

/* Paragraph with extra space at the bottom. */
p.exsp2, .exsp2 p { margin-bottom: 2.5em; }

/* Paragraph with half space at the bottom. */
p.fin, .fin p { margin-top: .75em; }

/* Paragraph with no space at the bottom. */
p.nosp, .nosp p { margin-bottom: 1.2em;}

/* Precise spacing for intro paragraphs on each page. */
p.intro, .intro p {margin-top: 0px;}


/* ADDITIONAL TYPOGRAPHY MODIFICATIONS: ORNAMENTAL STYLES */
 
/* For great looking type, use the alt type code: <span class="alt">great looking type</span>  (This is best used on prepositions and ampersands.) */  
.alt { 
  color: #666; 
  font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif; 
  font-style: italic;
  font-weight: normal;
}

.lit { 
  color: #444444; 
  font-family: "Times New Roman", Times, serif;
  font-style: normal;
  font-weight: normal;
  font-size:13px;
  margin-bottom:12.0pt;
  text-align: left;
}

.lit-lead { 
  color: #444444; 
  font-family: "Times New Roman", Times, serif;
  font-style: normal;
  font-weight: bold;
  font-size:24.0pt
  margin-bottom:9.0pt;
}

.comic-sans {
  color: #444444; 
  font-family:"Comic Sans MS";
  font-style: normal;
  font-weight: normal;
  font-size:9.0pt;
  margin-bottom: 12.0pt;
  text-align: left;
}


/* For name of author after a quote */
p.author, .author p {text-indent: 2em; color:#777; margin-top:-1.7em; font-size:.8em; }

/* For great looking quote marks in titles, replace "asdf" with:
   <span class="dquo">&#8220;</span>asdf&#8221;
   (That is, when the title starts with a quote mark). 
   (You may have to change this value depending on your font size). */  
.dquo { margin-left: -.5em; } 


/* Reduced-size type with incremental leading
   - This could be used for side notes. For smaller type, you don't necessarily want to 
     follow the 1.5x vertical rhythm -- the line-height is too much. 
   - Using this class, it reduces your font size and line-height so that for 
     every four lines of normal sized type, there is five lines of the sidenote. eg:
*/
p.incr, .incr p {
	font-size: 10px;
	line-height: 1.44em;  
	margin-bottom: 1.5em;
	color:#222222;
}

/* Surround uppercase words and abbreviations with this class. */
.caps { 
  font-variant: small-caps; 
  letter-spacing: 1px; 
  text-transform: lowercase; 
  font-size:1em;
  line-height:1%;
  font-weight:normal;
  padding:0 2px;
}