/* Awesome Stylesheet */
/* Normalising */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; }

ol, ul { list-style: none; }

table { border-spacing: 0; }

fieldset, img { border: 0; }

caption, th { text-align: left; }

/* Basic Stuff */
abbr, acronym, .help { font-style: italic; cursor: help; }

a { outline: none; }

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix { zoom: 1; }

.clearer { clear: both; }

.floatleft { float: left; }

/* Application Layout */
body { background: white; font: 85%/1.5em "Lucida Grande", "Segoe UI", Arial, Verdana, sans-serif; min-width: 990px; }

/* tooltips */
.tt_bigbox { width: 300px; border: 3px solid transparent; text-align: center; font-size: 120%; background: #fbfbfb; }
.tt_bigbox .content { padding: 15px; }

.tt_shadowbox { width: 280px; padding: 10px; font-size: 95%; line-height: 1.6em; }
.tt_shadowbox .content { width: 250px; padding: 15px; background: white; border: 1px solid #dddddd; -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
.tt_shadowbox .content p { margin-bottom: 10px; }

/* Journal content */
#container { background: url(/images/footer_shadow.png) repeat-x bottom; width: 100%; padding: 0 0 40px 0; position: relative; }

.circle_nav { width: 54px; height: 54px; position: absolute; display: block; text-indent: -1000000px; z-index: 100; background-image: url(/images/timeline_nav_circle.png); cursor: pointer; }
.circle_nav span { display: block; height: 20px; width: 20px; margin: 17px; }

a.post_nav_left { left: 60px; bottom: 40px; }
a.post_nav_left span { background-image: url(/images/nav_arrow_left.png); }

a.post_nav_right { right: 60px; bottom: 40px; }
a.post_nav_right span { background-image: url(/images/nav_arrow_right.png); }

a.back_home { right: 60px; top: 40px; }
a.back_home span { background-image: url(/images/nav_home.png); }

a.scroll_down { right: 60px; top: 40px; }
a.scroll_down span { background-image: url(/images/nav_arrow_down.png); }

#disqus_thread { width: 600px; margin: 0 auto !important; border: 3px solid transparent; border-top: 0 solid transparent; }
#disqus_thread #dsq-content { padding: 40px; }

#disqus_comments { width: 520px; margin: 40px auto 0 auto; border: 3px solid transparent; position: relative; padding: 20px 40px; }
#disqus_comments a { float: right; z-index: 10; position: relative; }
#disqus_comments #showdisqus_comments { position: absolute; width: 100%; height: 100%; z-index: 100; top: 0; left: 0; display: block; }

/* Footer */
#footer { background: white; }
#footer .content { padding: 40px 60px; }
#footer .content h1.intro { font-size: 170%; font-weight: normal; line-height: 1.4em; width: 30%; float: left; }
#footer .content h1.intro em { font-style: normal; }
#footer .content h2.about { font-size: 130%; line-height: 1.3em; font-weight: normal; width: 30%; float: left; padding: 0 0 20px 0; }
#footer .content h3.interests { font-weight: normal; width: 30%; line-height: 1.4em; clear: left; }
#footer .content ul.about_facts { float: left; margin: 0 0 0 15%; }
#footer .content ul.about_facts li { position: relative; margin-bottom: 5px; }
#footer .content ul.about_facts strong { width: 6em; display: block; float: left; }
#footer .content ul.about_facts .location { width: 129px; height: 111px; background-image: url(/images/location.png); position: absolute; bottom: -25px; left: -140px; }

.legend { float: right; }
.legend li { position: relative; line-height: 2.8em; }
.legend .icon { top: 5px; }
.legend .post { font-size: 130%; }
.legend .post .icon { width: 40px; height: 40px; background-image: url(/images/icon_posts.png); left: -65px; position: absolute; }
.legend .post .icon:hover { cursor: help; }
.legend .post .rss_link { text-indent: -1000000px; width: 20px; height: 20px; background-image: url(/images/rss_logo.png); display: block; float: right; margin-top: 15px; }
.legend .tweet { font-size: 115%; }
.legend .tweet .icon { width: 30px; height: 30px; background-image: url(/images/icon_tweets.png); left: -60px; position: absolute; display: block; text-indent: -1000000px; }
.legend .spark .icon { width: 22px; height: 22px; background-image: url(/images/icon_sparks.png); left: -55px; position: absolute; }
.legend .spark .icon:hover { cursor: help; }

#timeline { clear: both; position: relative; }
#timeline .container { float: left; width: 86%; margin: 0 7%; height: 260px; position: relative; overflow: hidden; z-index: 5; }
#timeline .timeline_heading { text-transform: uppercase; font-family: Georgia, Times, serif; position: absolute; top: 80px; font-size: 120%; }
#timeline .previous_button { top: 140px; left: 0; }
#timeline .previous_button span { background-image: url(/images/nav_arrow_left.png); }
#timeline .previous_button_disabled, #timeline .next_button_disabled { cursor: auto; }
#timeline .previous_button_disabled span, #timeline .next_button_disabled span { background-color: #cccccc; }
#timeline .next_button { top: 140px; right: 0; }
#timeline .next_button span { background-image: url(/images/nav_arrow_right.png); }
#timeline ul { margin: 0; padding: 0; width: 1000000px; position: relative; top: 0; left: 0; height: 50px; padding: 100px 50px 110px; }
#timeline ul li.nc { text-indent: -1000000px; background: none; }
#timeline ul span.now { font-size: 50%; text-transform: uppercase; display: block; text-align: center; margin-top: 5px; }
#timeline ul li { font-family: Georgia, Times, serif; font-size: 200%; float: left; background: white; width: 50px; text-align: center; display: block; height: 100%; position: relative; }
#timeline ul li .youarehere { width: 120px; position: absolute; top: -90px; left: -30px; font-size: 50%; text-align: center; }
#timeline ul li a, #timeline ul li div.spark { text-indent: -1000000px; display: block; position: absolute; margin: 0 auto; }
#timeline ul li a.post { width: 40px; height: 40px; background-image: url(/images/icon_posts.png); top: -60px; left: 50%; margin-left: -20px; }
#timeline ul li a.tweet { width: 30px; height: 30px; background-image: url(/images/icon_tweets.png); top: 45px; left: 50%; margin-left: -15px; }
#timeline ul li div.spark { width: 22px; height: 22px; background-image: url(/images/icon_sparks.png); top: 90px; left: 50%; margin-left: -11px; }
#timeline hr { height: 1px; border: none; border-bottom: 1px solid; position: relative; top: 120px; }

#credits { float: right; border: 1px solid; padding: 20px; width: 30%; background: #fbfbfb; }
#credits h3 { text-transform: uppercase; font-family: Georgia, Times, serif; text-align: right; font-size: 110%; margin: 0 0 20px 0; font-weight: normal; }
#credits h3 strong { font-family: "Lucida Grande", "Segoe UI", "Trebuchet MS", Verdana, sans-serif; font-size: 130%; text-transform: none; font-weight: normal; margin: 0 20px 10px 0; float: left; }
#credits p { font-size: 90%; }