@import url(reset.css);

/*------------------------------------

CSS FILE CONTENTS

- 1. Default CSS
- 2. Main Layout
- 3. Navigation
	- 3.1 Primary Navigation
	- 3.2 Category Navigation
- 4. Content
	- 4.1 Logo
	- 4.2 Headers
	- 4.3 Paragraphs
	- 4.4 Lists
	- 4.5 Content links
	- 4.6 Image & Video styles
	- 4.7 Page specific
- 5. Footer
- 6. Decorative elements
- 7. IE6 Message

------------------------------------*/




/* ##############################################

1.	Default styles

################################################# */

body { background: url(/images/paper-bg.jpg) fixed; /* background: url(/images/paper-bg.jpg) fixed; background: url(/images/nm-grid.gif) top center repeat-y; background: url(/images/articles/future-of-web-typography/grid.gif) top left repeat-y;*/ font-size: 75%; font-family: "Goudy Old Style", "Goudy Bookletter 1911", Georgia, Times, serif; }
strong { font-weight: bold; }
em { font-style: italic; }

@font-face {
  font-family: "Goudy Bookletter 1911";
  src: url(/typography/GoudyBookletter2911.otf) format("opentype");
}

@font-face {
  font-family: "Jura";
  src: url(/typography/Jura.ttf) format("truetype");
}

@font-face {
  font-family: "Nevis";
  src: url(/typography/nevis.ttf) format("truetype");
}

/* Typeface credits
   ----------------
   
Jura and Nevis typefaces designed by Ed Merritt and made available for FREE download over at http://www.tenbytwenty.com/ */



/* ##############################################

2.	Main Layout

################################################# */

#page-wrap { background: url(/images/faint-grid.gif) top center repeat-y; /*background: url(/images/self-doodle-camera.png) 82% 101% no-repeat;*/ margin: 0 auto; max-width: 1200px; min-width: 926px; position: relative; }

header { margin: 0 0 46px; padding: 35px 0 54px; }

header, nav, section#main-content, footer { margin: 0 auto; position: relative; width: 926px; z-index: 30; }
#journal-entry article { margin: 0 136px 0 0; padding: 0 0 36px; position: relative; width: 572px; z-index: 500; }


/* ##############################################

3.	Navigation

################################################# */


/* 3.1 Primary Navigation */
#primary-nav { position: absolute; left: 476px; top: -134px; z-index: 1000; }
#primary-nav li { float: left; font-family: nevis, sans-serif; font-size: 18px; margin: 0 36px 0 0; }
#primary-nav li a { border-bottom: 1px dotted #FFF; color: rgba(0,155,192,0.8); display: block; padding: 0 0 5px; text-decoration: none; text-shadow: #FFF 1px 1px 1px; }
#primary-nav li a:hover { color: #C80970; border-bottom: 1px solid #C80970; }

/* 3.2 Category Navigation */
#categories { display: none; position: absolute; right: 0; top: 0; }
#categories a { color: #038AA3; font-variant: small-caps; }
#categories a:hover { color: #C80970; }
#categories li { font-size: 12px; line-height: 18px; }
#categories li li { font-size: 11px; }






/* ##############################################

4.	Content

################################################# */

/* 4.1 Logo */
#site-logo { position: relative; z-index: 2000; }

/* 4.2 Headers */
h1, h2, h3 { color: rgba(0,155,192,0.8); font-family: nevis, sans-serif; font-variant: small-caps; font-weight: normal; text-shadow: #FFF 2px 2px 1px; text-transform: uppercase; }
h3, #journal-entry h2 { font-size: 18px; margin: 0 0 18px 118px; text-shadow: #FFF 1px 1px 1px; width: 454px; }

h1 a, h2 a, h3 a { border-bottom: 1px dotted #FFF; color: rgba(0,155,192,0.8); text-decoration: none; }
h1 a:hover, h2 a:hover, h3 a:hover { border-bottom: 1px solid rgba(200,9,112,0.8); color: rgba(200,9,112,0.8); }


nav h4 { color: #009BC0; display: none; font-family: nevis, sans-serif; font-size: 18px; font-weight: normal; font-variant: small-caps; letter-spacing: -0.03em; line-height: 18px; text-transform: uppercase; }

/* 4.3 Paragraphs */
article p, section p { color: #42403D; font-size: 14px; letter-spacing: 0.01em; line-height: 18px; margin: 0 0 18px 118px; text-shadow: #FFF 1px 1px 2px; }
article p.read-more { text-align: right; }
article .entry-meta-data { font-size: 12px; font-style: italic; }
article .entry-meta-data span { font-style: normal; font-variant: small-caps; }

/* 4.4 Lists */
article ul, article ol { margin: 0 0 18px; }
article li { color: #42403D; font-size: 14px; line-height: 18px; margin: 0 0 0 118px; width: 454px; }

/* 4.5 Content links */
article p a, section p a { color: #038AA3; }
article p a:hover, section p a:hover { color: #C80970; }
article a:hover img {  }

/* 4.6 Image & Video */
article img { padding: 4px; }
article img.right { float: right; margin: 0 -118px 0 18px; }
article .five-col { background: url(/images/image-border-5-col.png) top left no-repeat; margin-left: -118px; width: 564px; }
article .four-col { background: url(/images/image-border-4-col.png) top left no-repeat; width: 446px; }
article .three-col { background: url(/images/image-border-3-col.png) top left no-repeat; width: 328px; }
article .image-caption { background: url(/images/border-thin-horiz.png) bottom left repeat-x; font-variant: small-caps; margin: -13px 0 18px; padding-bottom: 10px; width: 572px; }
article object { display: block; margin: 0 0 18px 118px; width: 454px; }

/* 4.7 Page specific */
#journal-entry h1 { font-size: 72px; margin: 0 0 37px 0; width: 572px; }
#journal-entry article p:nth-of-type(1) { color: #42403D; font-size: 20px; letter-spacing: 0.01em; line-height: 22px; margin: 0 0 22px 118px; text-shadow: #FFF 1px 1px 2px; width: 454px; }

#journal-entry #title-image { position: absolute; right: -500px; top: -200px; }





/* ##############################################

5.	Footer

################################################# */

footer { background: url(/images/border-thick-horiz.png) 0 0 repeat-x; clear: both; padding-top: 36px; }
footer a { color: #038AA3; }
footer a:hover { color: #C80970; }

#about-me { padding: 0 0 54px; position: relative; }
#about-me h3 { font-size: 18px; margin: 0 0 9px 118px; }
#about-me p { font-size: 14px; line-height: 18px; margin: 0 354px 0 118px; }
#about-me img { background: url(/images/profile-border.png) top left; left: -4px; padding: 4px; position: absolute; top: -4px; width: 100px; }

#copyright { bottom: 18px; color: #42403D; font-size: 10px; left: 603px; position: absolute; text-align: center; width: 305px; z-index: 1000; }





/* ##############################################

6.	Decorative elements

################################################# */

#cloud-group { background: url(/images/decoration/cloud-group.png) 160% 0 repeat-x; height: 620px; left: 0; position: absolute; top: 0; width: 100%; z-index: 3; }
#star-group { background: url(/images/decoration/star-group.png) 80% 0 repeat-x; height: 300px; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; }
/*
#star-group { background: url(/images/decoration/star-group.png) 0 -100% repeat-x; height: 620px; left: 0; position: absolute; top: 0; width: 100%; z-index: 3; }
*/


/* ##############################################

7.	IE6 message

################################################# */

#message { background: #000 url(/images/ie6-message-bg.gif) 18px center no-repeat; border: 10px solid #FFF; color: #FFF; padding: 18px 18px 18px 54px; position: absolute; right: 18px; top: 18px; width: 305px; z-index: 3000; }
#message p { line-height: 18px; }
#message a { color: #FFF; }