/* Copyright 2011 Michael Harris, michaelharris.com */
 
 
/*--- Reset ---*/
 
a, abbr, blockquote, body, dd, div, dl, dt, h1, h2, h3, h4, h5, h6, html, img, li, object, ol, p, span, table, td, th, tr, ul { border: 0; font-family: inherit; font-size: 100%; font-weight: normal; margin: 0; outline: 0; padding: 0; text-decoration: none; text-transform: none; }
hr { visibility: hidden; }
 
 
/*--- Default Typography ---*/

body { font-family: "Lucida Grande", "Helvetica Neue", verdana, arial, sans-serif; font-size: 12pt; line-height: 18pt; color: rgb(55,55,55) }
body.light { color: rgb(255,255,255) }
p { margin-bottom: 14pt; }
ul { list-style: disc; list-style-position: inside; margin: -14pt 0 14pt 0; }

 
/*--- Masthead ---*/
 
#masthead { width: 1000px; height: 100px; margin: 50px auto 50px auto; }
#masthead a:hover { padding: 0; margin: 0; }
#masthead a#logo img { display: none; }
#masthead a#logo { display: block; width: 100px; height: 100px; padding: 0; margin: 0; background-image: url(/images/michael-harris.png); background-repeat: no-repeat; background-position: 0 0; opacity: 0.8; -webkit-transition: opacity 0.1s linear; }
body.light #masthead a#logo { background-image: url(/images/michael-harris_white.png); opacity: 0.9; -webkit-transition: opacity 0.1s linear; }
#masthead a#logo:hover { opacity: 0.6; -webkit-transition: opacity 0.1s linear; }
#masthead h1, #masthead h2 { text-indent: -9999px; margin-left: 125px; position:  absolute; top: 75px; }
#masthead h1 a, #masthead h2 a { width: 226px; height: 25px; background-image: url(/images/michael-harris.png); background-position: -100px 0; opacity: 0.9; -webkit-transition: opacity 0.1s linear; display: block; }
body.light #masthead h1 a, body.light #masthead h2 a { background-image: url(/images/michael-harris_white.png); }
#masthead h1 a:hover, #masthead h2 a:hover { display: block; opacity: 0.9; -webkit-transition: opacity 0.1s linear; }
#masthead #navigation, #masthead #navigation { margin-left: 115px; position:  absolute; top: 105px; }
#masthead #navigation, #masthead #navigation a { color: rgb(60,60,60); font-size: 13pt; font-weight: 500; text-transform: lowercase; padding: 5px; opacity: 0.8; -webkit-transition: opacity 0.1s linear; }
body.light #masthead #navigation, body.light #masthead #navigation a { color: rgb(255,255,255); }
#masthead #navigation a.current-location { color: rgb(20,20,20); opacity: 1; }
#masthead #navigation a:hover { opacity: 1; text-decoration: underline; -webkit-transition: text-decoration 0.1s linear, opacity 0.1s linear; }


/*--- Preview ---*/

#section-title { width: 1000px; margin: 50px auto 0 auto; }
#section-title h1 { font-size: 22pt; 
width: 1000px; margin: 0 auto 0 auto; padding-bottom: 10px; }

div.article-preview { clear: both; float: left; position: relative; width: 500px; height: 275px; padding: 40px 0 40px 0; border-top: solid rgb(45,72,135) 3px; }
div.article-preview h2 { width: 470px; font-size: 22pt; color: rgb(130,130,130); }
div.article-preview h2 a { font-size: 22pt; color: rgb(130,130,130) !important; }
div.article-preview p { width: 470px; margin: 17pt 0 0 0; color: rgb(75,75,75); }
div.article-preview a img { float: right; position: relative; width: 500px; height: 275px; padding: 40px 0 40px 0; border-top: solid rgb(200,200,200) 3px; margin: -43px -500px 0 0; opacity: 1; -webkit-transition: text-decoration 0.1s linear, opacity 0.1s linear; }
div.article-preview a:hover img { opacity: 0.8; -webkit-transition: text-decoration 0.1s linear, opacity 0.1s linear; }


/*--- Title ---*/

#title { width: 1000px; margin: 50px auto 0 auto; }
#title h1 { font-size: 32pt; 
width: 1000px; margin: 0 auto 0 auto; padding-bottom: 10px; }
#title h1 { display: none; }


/*--- Content ---*/
 
#main.home { margin: -50px auto -50px auto; }
#main.home a img { opacity: 1; -webkit-transition: text-decoration 0.1s linear, opacity 0.1s linear; }
#main.home a:hover img { opacity: 0.8; -webkit-transition: text-decoration 0.1s linear, opacity 0.1s linear; }
#main { width: 1000px; margin: 0 auto 0 auto; padding: 50px 0 50px 0; }
#main a { text-decoration: none; color: rgb(160,40,4); text-decoration: none; }
#main a:hover { text-decoration: underline; }
.article { float: left; clear: none; width: 640px; margin: 0 0 50px 360px; }
#colophon { width: 320px; float: left; clear: none; position: absolute; margin-left: -1000px; }
#colophon p, #colophon p a { font-size: 10pt; line-height: 14pt; font-weight: 900; color: rgb(150,150,150); }
#colophon p a { color: rgb(240,160,0); text-decoration: none; }
#colophon p a:hover { color: rgb(240,160,0); text-decoration: underline; }


/*--- Footer ---*/

#footer { width: 1000px; margin: 50px auto 60px auto; background-image: url(/images/michael-harris.png); background-position: 0 -400px; background-repeat: repeat-x; clear: both;}
body.light #footer { background-image: url(/images/michael-harris_white.png); opacity: 0.9; }
#footer p, #footer #copyright { width: 700px; }
#footer p { margin-bottom: 3px; }
#footer p, #footer p a { font-size: 18pt; line-height: 20pt; font-weight: 200; color: rgb(0,0,0); opacity: 0.7; -webkit-transition: opacity 0.1s linear; padding-top: 15px; }
body.light #footer p, body.light #footer p a { color: rgb(255,255,255); opacity: 0.9; }
#footer p a:hover { opacity: 1; -webkit-transition: opacity 0.1s linear; }
#footer #copyright { opacity: 0.8; -webkit-transition: opacity 0.1s linear; }
body.light #footer #copyright { opacity: 0.9; }
#footer #copyright, #footer #copyright a  { font-size: 10pt; line-height: 16pt; font-weight: 200; color: rgb(0,0,0); }
body.light #footer #copyright, body.light #footer #copyright a  { color: rgb(255,255,255); }
#copyright a:hover  { text-decoration: underline; opacity: 0.8; -webkit-transition: text-decoration 0.1s linear, opacity 0.1s linear; }
ul#elsewhere a { text-indent: -9999px; display: block; height: 50px; width: 50px; background-image: url(/images/michael-harris.png); background-repeat: no-repeat; opacity: 0.6; -webkit-transition: text-decoration 0.1s linear, opacity 0.1s linear; }
body.light ul#elsewhere a { background-image: url(/images/michael-harris_white.png); opacity: 0.9; }
ul#elsewhere a.twitter { background-position: 0 -100px; }
ul#elsewhere a.feed { background-position: -100px -100px; }
ul#elsewhere a.facebook { background-position: -200px -100px; }
ul#elsewhere a.vimeo { background-position: -300px -100px; }
ul#elsewhere a.flickr { background-position: -400px -100px; }
ul#elsewhere a:hover { opacity: 0.9; -webkit-transition: opacity 0.1s linear; }
body.light ul#elsewhere a:hover { opacity: 1; -webkit-transition: opacity 0.1s linear; }
ul#elsewhere { list-style: none; display: inline; float: right; margin: 15px -10px 10px 10px; }
ul#elsewhere li { float: left; }


div.article-preview#in-flight { border-top: solid rgb(47,89,137) 3px; }
div.article-preview#prelude { border-top: solid rgb(240,160,0) 3px; }


/*--- End ---*/