/* global scope */
* { font-family: Trebuchet MS, Trebuchet, sans-serif; }

/* header and footer */
#header small { display: none; }
#header h1 { background-image: url('title.png'); background-color: transparent; background-position: bottom right; background-repeat: no-repeat; height: 150px; width: 100%; margin: 0em; padding: 0em; font-size: 0em; }
#header { background-image: url('header.jpg'); background-color: #ccc; background-position: center center; background-repeat: no-repeat; }

#footer:before { content: url('banner.jpg'); display: block; text-align: center; margin-bottom: 3em; margin-top: 1.5em; }
#footer a:hover { background-color: #eee; }
#footer a { color: #c96; text-decoration: none; }
#footer h4:after { content: '/'; color: #ccc; }
#footer h4 { font-family: Garamond, serif; font-size: large; font-weight: normal; color: #c96; display: inline;}
#footer p { display: inline; font-size: smaller; }
#footer { border-top: solid 1px #ccc; color: #999; } /* see the other rule below (.navigation) */

/* navigation links */
#seealso { display: none; }
#sitemap h4 { left: 5px; background-image: url('sitemap_tab.png');}
#related  h4 { left: 125px; background-image: url('related_tab.png'); }
#quicklinks  h4 { left: 45px; background-image: url('quicklinks_tab.png');}
#styleui  h4 { left: 85px; background-image: url('styleui_tab.png');}
#manager h4 { left: 5px; background-image: url('quicklinks_tab.png');}

#sitemap span:first-letter { color:#fff; font-size: 0em; }
#sitemap span:after { content: '\00A0/'; }
#sitemap span { display: list-item; }
.navigation li:hover, #sitemap span:hover { list-style-image: url('bullet_hover.png'); }
.navigation li, #sitemap span { list-style-type: circle; list-style-image: url('bullet.png'); color: #999; }

#related a { display: block; }
.navigation a:hover { text-decoration: underline; }
.navigation a { color: #000; text-decoration: none; }

.navigation:hover:after { content: ' '; display: block; width: 100%; height: 10px; background-image: url('nav_shadow.png'); background-repeat: repeat-x; }
.navigation:hover div, .navigation:hover ul { display: block; }
.navigation:hover h4 { background-position: -40px; }
.navigation:hover { z-index:2; }
.navigation div, .navigation ul { display: none; margin: 0em; padding: 1em 1em 1em 2em; border-style: solid; border-width: 1px; border-color: #999 #eee #fff #eee; background-image: url('nav_back.png'); }
.navigation h4 { position: relative; top: 0px; margin: -20px 0em 0em 0em; font-size: 0em; color: #eee; width: 40px; height: 20px; background-image: url('tab.png'); background-position: 0px; }
.navigation, #footer { z-index: 1; position: absolute; top: 200px; left: 50%; width: 14em; margin-left: 12em; padding: 0em; }

/* sections and section headers */
.section:hover h2 a { color: #c60; }
.section h2 a:hover { background-color: #eee; }
.section h2 a { color: inherit; text-decoration: none; }

.section h2:before { content:' '; padding-left: 25px; margin-right: 5px; background-image: url('calendar.png'); background-position: -30px 90%;background-repeat: no-repeat; }
.section h2 { font-weight: normal; padding: 2em 10px 0em 10px; margin: 0em; color: #930; border-bottom: solid 1px #ccc; text-transform: capitalize; }

/* entries and entry headers */
.entry h3 + form { clear: both; }
.entry h3 a:hover { background-color: #eee; }
.entry h3 a { font: inherit; text-decoration: none; color: #c60; }

.entry h3:after { content: '/'; color: #ccc; }
.entry h3 { font-family: Garamond, serif; font-size: xx-large; font-weight: normal; color: #c60; margin: 0em; padding: 0em 0em 0em .5em; float: left; position: relative; top: .15em; }
	
.entry > div a:visited:before { content: '('; color: #999; }
.entry > div a:visited:after { content: ')'; color: #999; }
.entry > div a:hover { background-color: #eee; }
.entry > div a { color: #930; text-decoration: none; }

.entry > div > p:first-child, .entry > div > *:first-child p:first-child { padding-top: 1em; text-indent: 0em; }
.entry > div > p { text-indent: 1em; }
.entry > div { padding: 0em 1.5em 0em 2em; }

.entry > ul a:hover, .comment > ul a:hover { color: #930; border-bottom: solid 1px #999;}
.entry > ul a, .comment ul a { color: inherit; text-decoration: none; border-bottom: solid 1px #ccc; }
.entry > ul li + li:before, .comment > ul li + li:before { content: '/ '; }
.entry > ul li, .comment > ul li { display: inline; }
.entry > ul, .comment > ul { padding: 0em 2em 0em 3.5em; text-indent: -2em; font-size: small; color: #ccc; text-align: justify;  }

.entry { padding-bottom: 1em; }

/* reactions / comments */
.reactions h4:before, .reactions h5:before { content:' '; padding-left: 25px; margin-right: 5px; background-image: url('reaction.png'); background-position: -30px 90%;background-repeat: no-repeat; }
.reactions h4, .reactions h5 { font-weight: normal; font-size: large;padding: 1em 10px 0em 10px; margin: 0em; color: #930; border-bottom: solid 1px #ccc; text-transform: capitalize; }

.comment > div > p:first-child:first-letter { font-family: Garamond, serif; font-size: x-large; color: #c60; text-transform: capitalize; }
.comment > div > p:first-child { text-indent: -1em; }
.comment > div > p { margin-bottom: .5em }
.comment > div { padding: 0em .5em 0em 2em; }

.comment > ul a:visited:before, .comment > ul a:visited:after { content: ''; }

.comment { padding-bottom: 0.5em; }

/* forms */
input[type="text"]:focus, textarea:focus { border: solid 1px #999; background-color: #eee }
input[type="text"]:hover, textarea:hover { border: solid 1px #999; }
input[type="text"] { border: solid 1px #ccc; padding: 2px; width: 20em; }
input[type="submit"] { font-weight: bold; }
input, select { font-size: smaller; }
textarea { border: solid 1px #ccc; padding: 5px; width: 95%; }
label + label { margin-top: .5em; }
fieldset:hover { border: solid 1px #999; }
fieldset { border: solid 1px #ccc; margin: 1em 1em 0em 1em; padding: 1em; clear: both; }

/* general */
blockquote p:first-child:before { content: '\201C'; color: #999; font-weight: bold; }
blockquote p:last-child:after { content: '\201D'; color: #999; font-weight: bold; }

.media img:hover { border: solid 1px #999; background-color: #eee; }
.media img { border: solid 1px #ccc; padding: 7px; }
.media { clear: both; width: 100%; }

#content { position: absolute; top: 150px; left: 50%; width: 35em; margin-left: -26em; padding: 1em; }

body { margin: 0em; padding: 0em; color: #000; }