/* -------------------------------------------------------------- 
  
   typography.css
   * The default typography of the framework.
   * Source:
   * - Web typography: http://webtypography.net/toc/
   * - 8 ways for improving typography: http://www.smashingmagazine.com/2009/04/03/8-simple-ways-to-improve-typography-in-your-designs/
   * - Font stack: http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
   * - Blueprint CSS Framework
   * - Smashing Book
   * Note:
   * - font-size: 10px
   * - line-height (leading): 18px
   * - heading's leading: 48px:
   
-------------------------------------------------------------- */

/* Default font-size, font-family
-------------------------------------------------------------- */
body { 
	font-size: 13px;
	font-family: "lucida grande", tahoma, verdana, arial, sans-serif, serif;
	line-height: 18px;
/* 	word-spacing: 0.05em; */
}

input, button, option, textarea, label, legend { font-family: "lucida grande", tahoma, verdana, arial, sans-serif, serif; font-size: 13px; line-height: 18px; }

/* Heading */
h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 0; }

h1 { font-size: 39px; line-height: 54px; }
h2 { font-size: 32.5px; line-height: 54px; }
h3 { font-size: 26px; line-height: 36px; }
h4 { font-size: 20px; height: auto; line-height: 36px; } 
h5, h6 { font-size: 13px; line-height: 18px; } /* (It's rarely to use these heading tags.) */

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { text-decoration: none; }

/* Body text */
/* paragraphy, list, blockquote */
ul, ol, p, blockquote { font-size: 13px; line-height: 18px; margin-bottom: 18px; }
ul, ol { margin-left: 36px; }
ul { list-style: square; }
ol { list-style: decimal; }

/* Improving blockquote */
/* --- Normal blockquote (without the class "quote") --- */
blockquote { border-left: 2px solid #ddd; color: #000; font-style: normal; padding: 0 36px; margin-bottom: 18px; }
blockquote p { margin-bottom: 18px; text-align: justify; }
blockquote p.last, blockquote p:last-child,
blockquote ol.last, blockquote ol:last-child,
blockquote ul.last, blockquote ul:last-child { margin-bottom: 0 }
blockquote p + p { text-indent: 0; }

/* --- Special blockquote (with the class "quote") --- */
blockquote.quote { background: none; border: 0; margin: 0 24px 18px; }
blockquote.quote p.content { font-size: 16px; line-height: 24px; margin-bottom: 18px; }
blockquote.quote p.content:before { color: #f00; content: "“"; font-family: Garamond, "Hoefler Text", Times New Roman, Times, serif; float: left; font-size: 48px; left: -30px; margin-right: -30px; position: relative; top: 5px; width: 24px; }
blockquote.quote p.author { color: #999; font-size: 13px; font-weight: bold; line-height: 18px; margin-bottom: 0; text-align: right; text-transform: uppercase; }
blockquote.quote p.author a { color: #999; text-decoration: none; }
blockquote.quote p.author a:hover { color: #000; }

/*
blockquote { color: #000; font-style: normal; padding-left: 40px; margin: 2em 40px; }
blockquote p { font-size: 1.5em; line-height: 24px; margin-bottom: 24px; text-align: justify; }
blockquote p.last { margin-bottom: 0; }
blockquote p + p { text-indent: 0; }
blockquote p.author { color: #999; font-size: 1em; font-weight: bold; line-height: 2em; margin-bottom: 0; text-align: right; text-transform: uppercase; }
blockquote p.author a { color: #999; text-decoration: none; }
blockquote p.author a:hover { text-decoration: underline; }
blockquote p span.quote-open { color: #999; font-family: Garamond, "Hoefler Text", Times New Roman, Times, serif; float: left; font-size: 2em; left: -30px; margin-right: -30px; position: relative;  width: 24px; }
*/

ul li p, 
ol li p,
ul li ol, 
ul li ul, 
ol li ol, 
ol li ul,
p blockquote,
pre p, p code,
blockquote pre,
blockquote code,
ol li pre,
ol li code,
ul li pre,
ul li code,
ol li label,
ul li label,
p abbr, p acronym { font-size: 13px; } /* acronym has been removed on HTML5 */
p a { font-size: 13px; }

ul li ol, 
ul li ul, 
ol li ol, 
ol li ul { margin: 0 36px; }

ul, ol {  }

ul.paragraph li, 
ol.paragraph li, 
ul li p, 
ol li p { margin-bottom: 18px; }

p { text-indent: 0; }
/* p:first-line { font-variant: small-caps; font-size: 16px; letter-spacing: 2px; line-height: 24px; text-transform: lowercase; }*/
/* p + p { text-indent: 2em; } */

strong { font-weight: bold; }
em, dfn { font-style: italic; }
dfn { font-weight: bold; }
sup, sub { line-height: 0; }

abbr, 
acronym { border-bottom: 1px dotted #000; letter-spacing: 0.1em; text-transform: uppercase; } /* acronym has been removed on HTML5 */
address { font-style: italic; }
address p {  }
del { color: #777; }

pre, code { background: #000; color: #fff; margin: 18px 0; white-space: pre; word-wrap: break-word; white-space: pre-wrap; } /* white-space: pre; word-wrap: break-word are for IE hack | white-space: pre-wrap is for Firefox */
pre.normal, code.normal { white-space: normal; }
pre, code, tt { font: 13px 'andale mono', 'lucida console', monospace; line-height: 18px; }
blockquote pre { margin-bottom: 0; }

.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
.copyrights p { margin-bottom: 0; }

/* Table
   Special Treatment for Table 
-------------------------------------------------------------- */
table.table { width: 100%; }
table { border-top: 1px solid #999; border-left: 1px solid #999; padding: 0; margin: 0; margin-bottom: 18px; }
th { font-size: 20px; font-weight: bold; line-height: 36x; text-align: center; text-transform: uppercase; }
td { font-size: 13px; line-height: 18px; text-align: left; }
th, td { border-bottom: 1px solid #999; border-right: 1px solid #999; padding: 5px; }

/* Please don't apply the treatments above for my fancy box :") */
div#fancy_title table { border: 0; width: auto; }
div#fancy_title table th, div#fancy_title table td { border: 0; }

/* Figure */
figure { margin-bottom: 18px; text-align: center; }
figure img, figure a img, figure iframe.vimeo, figure object embed { border: 5px solid #ddd; }
figure a:hover img { border: 5px solid #aaa; }

figure figcaption { color: #777; font-size: 13px; line-height: 18px; }