/*

Copyright 2009 – 2010 Bransin Anderson. All Rights Reserved.
Cascading Style Sheets may not be reused without permission.

*/

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

div#canvas { position: relative; background: url(/images/v1/canvas.jpg) repeat-x left bottom; }
div#siteWrap { position: relative; width: 960px; background: url(/images/v1/sitewrap.jpg) no-repeat 0 0; }

/* HEADER
---------------------------------------------- */

#header { position: relative; width: 100%; height: 251px; margin-bottom: 30px; }
#header h1 { position: absolute; width: 100%; bottom: 85px; font-size: 54px; text-align: center; line-height: 1; font-family: "bodedo-1","bodedo-2", "Palatino", Georgia, "Times New Roman", Times, serif; }
#header h1 a:link,
#header h1 a:visited,
#header h1 a:active { color: #000; text-decoration: none; }

/* NAV */
#header ul, #header li { position: absolute; }
#header ul { overflow: hidden; width: 390px; height: 54px; bottom: 0; left: 0; }

#header li#ramble { left: 10px; }
#header li#myportfolio { left: 108px; }
#header li#about { right: 97px; }
#header li#contact { top: 0; right: 0; }

#header ul a { display: block; padding: 18px 20px 20px; -webkit-transition-property: background-color; -webkit-transition-duration: .4s; -webkit-transition-timing-function: linear; }
#header ul a:link,
#header ul a:visited { color: #000; text-decoration: none; text-shadow: #767F77 1px 3px 3px; -webkit-transition: color .2s linear; }
#header ul a:hover, #header ul a:active { position: relative; top: -1px; color: #FFF; background: rgba(0,0,0,.15); text-shadow: #000 1px 3px 3px; }
#header a.active:link, #header a.active:visited { position: relative; top: -1px; color: #FFF; text-shadow: #000 1px 3px 3px; }

/* COLUMNS
---------------------------------------------- */

div#col1 { float: right; margin-left: 10px; width: 390px; }
div#col2 { position: relative; float: left; width: 560px; margin-top: 53px; padding-bottom: 150px; min-height: 800px; }
body#portfolio div#col1 { position: absolute; top: 0; right: 0; z-index: 1; }
body#portfolio div#col2 { width: 100%; }

/* SLIDE SHOW
---------------------------------------------- */

#slides { position: relative; overflow: hidden; padding: 10px; background: url(/images/v1/c-hint-l-r.png) no-repeat top right; width: 540px; }
#slides img { width: 540px; height: 283px; display: block; }

/* FAMOUS HEADINGS
---------------------------------------------- */

#content h2,
div.excerpt h3,
#subContent h2,
#blurb h2,
#siteForm h3,
#comments h3,
#portfolioEntries h2,
#webDevEntry h2,
#siteForm h2,
#branding .punch { font-size: 24px; font-family: "skolar-1", "skolar-2", "Palatino", Georgia, "Times New Roman", Times, serif; font-weight: 700; margin-bottom: 10px; }
h2#loc { font-family: "skolar-1","skolar-2"; font-weight: 700; margin-bottom: 30px; font-size: 34px; text-align: center; }

/* CONTENT
---------------------------------------------- */

#content { padding: 40px 40px 20px; background: url(/images/v1/c-hint-l-r.png) no-repeat top right; }

/* ARTICLE
---------------------------------------------- */

h2#rambleTitle, div.article h3 { font-family: "skolar-1","skolar-2"; }
h2#rambleTitle { font-size: 34px; }
div.article h2 { font-weight: bold; margin-bottom: 12px; line-height: 1.8; }
div.article h2, div.article span.date { display: block; text-align: center; }
div.article h2 a, div.article h2 span { padding-bottom: 3px; border-bottom: #A5B1A6 solid 1px; }
div.article span.date { color: #838383; line-height: 1; margin-bottom: 40px; font-variant: small-caps; font-size: 15px; }
div.article h2 a:link, div.article h2 a:visited { text-decoration: none; }
div.article h2 a:hover, div.article h2 a:active { border-bottom: #000 solid 1px; }
div.article h3 { font-size: 20px; margin-bottom: 20px; }
#content div.article p { margin-bottom: 20px; text-indent: 20px; }
div.article blockquote, div.article small { font-size: 12px; }
div.article blockquote p { border-top: 1px solid #A5B1A6; border-bottom: 1px solid #A5B1A6; padding: 10px 0 12px; color: #6a6a6a; }

div.article ul, div.article ol { list-style-position: outside; padding-left: 20px; }
div.article ul { list-style: disc; }
div.article ol { list-style: decimal; }
div.article > ul, div.article > ol { padding-bottom: 20px; }
div.article ul ul { list-style: circle; }
div.article li { margin-bottom: 10px; }
div.img { margin-bottom: 40px; }
div.img img { display: block; }

#content div.codeblock { font-family: Courier, monospace; font-size: 13px; }
div.article div.codeblock { word-wrap: break-word; margin-bottom: 20px; padding: 20px; border-color: #A5B1A6 #B6C1B7; border-style: solid; border-width: 1px; background: rgba(16,47,18,.05); }

#articleNav { padding: 0 0 0 10px; }
#articleNav ul { border-bottom: #303330 solid 3px; overflow: hidden; padding: 0; list-style: none; }
#articleNav ul, #articleNav li { margin: 0; }
#articleNav li#prev { float: left; }
#articleNav li#next { float: right; }
#articleNav a { display: block; border-top: #FFF solid 1px; font-variant: small-caps; font-size: 15px; padding: 20px 40px; -webkit-transition-property: background-color; -webkit-transition-duration: .4s; -webkit-transition-timing-function: linear; }
#articleNav a:link, #articleNav a:visited { text-decoration: none; }
#articleNav a:hover, #articleNav a:active { border-top: #6B7C6A solid 1px; background: #9AA69B url(/images/v1/footer.jpg) repeat -420px -12px; background: rgba(16,47,18,.38) url(/images/v1/footer.jpg) repeat -420px -12px; color: #FFF; text-shadow: #000 1px 3px 3px; }

/* ARTICLE EXCERPT
---------------------------------------------- */

div.excerpt { margin-bottom: 40px; }
div.excerpt div.meta span.date { text-align: left; margin-bottom: 10px; }
div.article h3 a { padding-bottom: 3px; border-bottom: #A5B1A6 solid 1px; }
div.excerpt h3 a:link, div.excerpt h3 a:visited, div.excerpt h3 a:active { text-decoration: none; }

/* RAMBLE ARTICLE
---------------------------------------------- */

#rambleArchive { position: relative; padding: 40px 30px 40px 40px; background: url(/images/v1/c-hint-l-r.png) no-repeat top right; }
#rambleArchive h2 { font-size: 24px; font-family: "skolar-1","skolar-2"; font-weight: 700; margin-bottom: 10px; }
#rambleArchive h4 { font-variant: small-caps; font-size: 15px; }
#rambleArchive h4 a:link, #rambleArchive h4 a:visited, #rambleArchive h4 a:active { text-decoration: none; }

#archiveMonth h4, #archiveCategory h4 { font-weight: bold; }
#archiveMonth, #archiveCategory { width: 240px; float: left; }
#archiveMonth li, #archiveCategory li { border-bottom: #A5B1A6 solid 1px; }
#archiveMonth a, #archiveCategory a { padding: 4px 0 4px 10px; display: block; -webkit-transition-property: background-color; -webkit-transition-duration: .4s; -webkit-transition-timing-function: linear; }
#archiveMonth a:link, #archiveMonth a:visited,
#archiveCategory a:link, #archiveCategory a:visited { text-decoration: none; }
#archiveMonth a:hover, #archiveMonth a:active, #archiveCategory a:hover, #archiveCategory a:active { background: #9AA69B; background: rgba(16,47,18,.15); color: #000; }

/* ADD COMMENT
---------------------------------------------- */

#siteForm { padding: 40px 0 30px 40px; background: url(/images/v1/c-hint-l-r.png) no-repeat top right; }
#siteForm p { margin-bottom: 17px; }
#siteForm em { padding-left: 20px; color: #838383; }
#siteForm input[type="text"] { width: 50%; }
#siteForm textarea { width: 472px; height: 60px; }
p#captcha { overflow: hidden; }
p#captcha input { float: left; margin-right: 20px; }

/* COMMENTS
---------------------------------------------- */

#comments { padding: 60px 0 0 10px; }
#comments h3 { padding-left: 30px; }
#comments li { position: relative; padding: 10px 0; min-height: 82px; border-bottom: #C9D4CA solid 1px; }
#comments li.first { border-top: #C9D4CA double 3px; }
#comments li.last { border-bottom: none; }
#comments li.odd { border-bottom-color: #89938A; }
#comments span.vcard { position: absolute; left: 30px; top: 10px; width: 130px; }
#comments span.fn { font-size: 15px; color: #000; font-weight: bold; display: block; margin-bottom: 15px; }
#comments abbr.date { display: block; }
#comments img { position: absolute; top: 10px; right: 0; border: #CCCCCC solid 1px; }
#comments blockquote { padding: 0 70px 0 190px; }
#comments blockquote p { margin-bottom: 10px; }
p#disabledComments { padding: 40px; }

/* PAGE
---------------------------------------------- */

#page { padding-bottom: 40px; }
#page p { margin-bottom: 20px; text-indent: 20px; }
#page ul, #page ol { list-style-position: outside; padding-left: 20px; }
#page ul { list-style: disc; }
#page ol { list-style: decimal; }
#page > ul, div.article > ol { padding-bottom: 20px; }
#page ul ul { list-style: circle; }
#page li { margin-bottom: 10px; }

/* BLURB
---------------------------------------------- */

#blurb { min-height: 272px; margin-bottom: 40px; }
#blurb h2 { font-size: 24px; }
#blurb img { float: left; margin-right: 20px; }
#blurb ul { font-size: 22px; font-family: "skolar-1", "skolar-2", serif; margin-bottom: 20px; }
#blurb p.view { text-align: right; }

/* SUB CONTENT
---------------------------------------------- */

div.sub { padding: 20px; background: url(/images/v1/c-hint-s-r.png) no-repeat top right;  }

/* OTHER PLACES
---------------------------------------------- */

#otherPlaces li { border-bottom: #A5B1A6 solid 1px; }
#otherPlaces a { padding: 4px 0 4px 10px; display: block; -webkit-transition-property: background-color; -webkit-transition-duration: .4s; -webkit-transition-timing-function: linear; }
#otherPlaces a:link, #otherPlaces a:visited { text-decoration: none; }
#otherPlaces a:hover, #otherPlaces a:active { background: #9AA69B; background: rgba(16,47,18,.15); color: #000; }

/* TWEET
---------------------------------------------- */

#tweet p { font-family: "skolar-1", "skolar-2", serif; font-size: 24px; }
#tweet em { font-size: 14px; color: #838383; }

/* NETFLIX
---------------------------------------------- */

#netflix li a { display: block; background: url(/images/v1/Movie_16x16.png) no-repeat 12px 6px; padding: 4px 0 4px 50px; -webkit-transition-property: background-color; -webkit-transition-duration: .4s; -webkit-transition-timing-function: linear; }
#netflix li a:hover { background-color: #9AA69B; background-color: rgba(16,47,18,.15); color: #000; }

/* RECENT WEB DEVELOPMENT
---------------------------------------------- */

div.ritem { margin-bottom: 40px; }
div.ritem img { -moz-box-shadow:0 3px 6px rgba(0, 0, 0, 0.1); -webkit-box-shadow:0 3px 6px rgba(0, 0, 0, 0.1); background: #FFF; display: block; padding: 5px; margin-bottom: 10px; border: #CCCCCC solid 1px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
div.ritem a:hover img { border-color: #999; }
div.ritem h4 { font-variant: small-caps; font-size: 15px; margin-bottom: 3px; text-indent: 4px; }
div.ritem h4 a:link, div.ritem h4 a:visited, div.ritem h4 a:active { text-decoration: none; }

/* COMPOSITION
---------------------------------------------- */

div.composition { position: relative; width: 100%; min-height: 121px; margin-bottom: 40px; }
div.composition img { position: absolute; top: 0; left: 0; -moz-box-shadow:0 3px 6px rgba(0, 0, 0, 0.1); -webkit-box-shadow:0 3px 6px rgba(0, 0, 0, 0.1); background: #FFF; display: block; padding: 5px; margin-bottom: 10px; border: #CCCCCC solid 1px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
div.composition h4, ul.controls, div.progressBar { margin-left: 140px; }
div.composition h4 { margin-bottom: 10px; font-variant: small-caps; font-size: 15px; }

/* RECORDING
---------------------------------------------- */

div.recording { position: relative; width: 100%; min-height: 121px; margin-bottom: 40px; }
div.recording img { position: absolute; top: 0; left: 0; -moz-box-shadow:0 3px 6px rgba(0, 0, 0, 0.1); -webkit-box-shadow:0 3px 6px rgba(0, 0, 0, 0.1); background: #FFF; display: block; padding: 5px; margin-bottom: 10px; border: #CCCCCC solid 1px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
div.recording h4 { margin-left: 140px; }
div.recording h4 { margin-bottom: 10px; text-transform: uppercase; }
div.recording p { position: absolute; top: 0; right: 0; color: #838383; text-transform: uppercase; font-size: 11px; top: 8px; line-height: 1; }

/* SOUND CONTROLS
---------------------------------------------- */

ul.controls { position: relative; height: 16px; margin-bottom: 10px; }
li.play, li.pause, li.stop, div.time, div.loadBar, div.playBar { position: absolute; }
li.play, li.pause, li.stop { padding-left: 20px; cursor: pointer; line-height: 1; display: block; background: url(/images/v1/controls.gif) no-repeat; height: 16px; }
li.play { background-position: 0 0; top: 0; left: 0; }
li.pause { background-position: 0 -16px; top: 0; left: 0; }
li.stop { background-position: 0 -32px; top: 0; left: 5em; }
div.time { bottom: 0; right: 0; display: block; visibility: visible; }

div.progressBar { position: relative; border: #6A7B69 solid 1px; height: 10px; cursor: pointer; }
div.loadBar, div.playBar { top: 0; left: 0; height: 100%; }
div.loadBar { background: #EDEDED; }
div.playBar { background: #484c48 url(/images/v1/playbar.gif) no-repeat 0 0; }

/* GOOD STUFF
---------------------------------------------- */

#goodStuff h4 { font-variant: small-caps; font-size: 15px; text-indent: 4px; margin-bottom: 3px; }
#goodStuff h4 a { padding-left: 24px; background: url(/images/v1/Link_16x16.png) no-repeat 0 0; }
#goodStuff h4 a:link, #goodStuff h4 a:visited, #goodStuff h4 a:hover, #goodStuff h4 a:active { text-decoration: none; }
#goodStuff li { padding-bottom: 10px; margin-bottom: 10px; border-bottom: #A5B1A6 solid 1px; }
#goodStuff li.last { margin-bottom: 0; border-bottom: none; }
#goodStuff span { padding-top: 10px; display: block; text-align: right; font-variant: small-caps; font-size: 15px; color: #838383; }

/* PORTFOLIO
---------------------------------------------- */

#portfolioEntries { border-top: 1px solid #A5B1A6; border-bottom: 1px solid #A5B1A6; margin-left: 10px; padding: 40px 0; }
#portfolioEntries h2 { text-align: center; width: 550px; font-size: 34px; margin-bottom: 40px; }
#portfolioEntries h3 { padding: 0 0 0 30px; font-family: "skolar-1", "skolar-2", serif; font-size: 24px; }
#portfolioEntries img { -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); background: #FFF; display: block; padding: 5px; border: #CCCCCC solid 1px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }

ul#webDev, div#compositions { margin-bottom: 60px; padding-bottom: 80px; border-bottom: #303330 solid 3px; }
ul#webDev li { position: relative; margin-bottom: 40px; }
ul#webDev li.last { margin-bottom: 0; }
ul#webDev em { position: absolute; display: block; padding: 8px; left: 6px; bottom: 6px; width: 923px; background: #000; background: rgba(0,0,0,.75); color: #FFF; }

#portfolioEntries div.composition h4, #portfolioEntries div.recording h4  { font-size: 24px; text-transform: none; font-family: "skolar-1", "skolar-2", serif; margin-bottom: 0; }
#compositions div.last { margin-bottom: 0; }
#portfolioEntries ul.controls { height: 32px; }
#portfolioEntries li.play,
#portfolioEntries li.pause,
#portfolioEntries li.stop { line-height: 2; font-size: 16px; background: url(/images/v1/controls2.gif) no-repeat 0 0; height: 32px; padding-left: 36px; }
#portfolioEntries li.play { background-position: 0 0; }
#portfolioEntries li.pause { background-position: 0 -32px; }
#portfolioEntries li.stop { background-position: 0 -64px; left: 7em; }
#portfolioEntries div.progressBar { height: 30px; }
#portfolioEntries div.playBar { background: #484C48 url(/images/v1/playbar2.gif) no-repeat 0 0; }
#portfolioEntries div.time { font-size: 16px; bottom: 55px; }

#bjaDrumkit { position: relative; background: url(/images/v1/bjadrumkit.jpg) no-repeat 0 0; width: 940px; height: 426px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; color: #FFF; text-shadow: #000000 0 2px 1px; margin-bottom: 48px; }
#bjaDrumkit h2, #bjaDrumkit p.photoCredit, #bjaDownload li { position: absolute; }
#bjaDrumkit h2 { color: #FFF; top: 30px; left: 30px; font-size: 38px; font-family: "bodedo-1","bodedo-2"; width: auto; }
#bjaDrumkit a:link, #bjaDrumkit a:visited { color: #FFF; }
#bjaDrumkit a:active, #bjaDrumkit a:hover { color: #FFF; }
#bjaDrumkit p.photoCredit { bottom: 10px; left: 10px; color: #FFF; font-style: italic; }
#bjaDownload { font-size: 22px; font-family: "skolar-1","skolar-2"; font-weight: 700; }
#bjaDownload li { top: 110px; width: 140px; text-align: center; }
#bjaDownload li a { display: block; }
li#logic { left: 160px; }
li#hydrogen { left: 400px; }
ul#specs { position: absolute; bottom: 40px; left: 30px; list-style: disc; }
ul#specs li { margin-bottom: 6px; }

/* WEB DEV ENTRY
---------------------------------------------- */

#webDevEntry { position: relative; border-top: 1px solid #A5B1A6; border-bottom: 1px solid #A5B1A6; margin-left: 10px; padding: 40px 0; display: block; }
#webDevEntry h2 { text-align: center; width: 550px; font-size: 30px; margin-bottom: 40px; font-size: 34px; }
#webDevEntry div#frame { -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); background: #FFF; display: block; padding: 5px; border: #CCCCCC solid 1px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; width: 538px; }
div#frame img { display: block; }
div#frame div.loading { background: #FFF url(/images/v1/ajax-loader.gif) no-repeat center center; height: 800px; }

#webService { float: right; width: 360px; }
#webService h3, #viewProject { font-family: "skolar-1", "skolar-2", serif; font-size: 24px; }
#webService h3 { margin-bottom: 10px; }
#webService p { margin-bottom: 20px; }
#webService ul { list-style: disc; }
#webService ol { list-style: decimal; }
#webService ul, #webService ol { padding-left: 20px; padding-bottom: 20px; }
#webService li { margin-bottom: 10px; }

#aboutProject { border-bottom: #A5B1A6 solid 1px; padding-bottom: 10px; margin-bottom: 30px; }
#aboutProject h4 { text-transform: uppercase; margin-bottom: 8px; }
#services { padding-bottom: 10px; }
#viewProject { text-align: center; }
#viewProject a { display: block; border-top: #A5B1A6 solid 1px; text-transform: uppercase; padding: 20px 40px; -webkit-transition-property: background-color; -webkit-transition-duration: .4s; -webkit-transition-timing-function: linear; }
#viewProject a:link, #viewProject a:visited { text-decoration: none; }
#viewProject a:hover, #viewProject a:active { background: #9AA69B url(/images/v1/footer.jpg) repeat -420px -12px; border-top-color: #6B7C6A; background: rgba(16,47,18,.38) url(/images/v1/footer.jpg) repeat -420px -12px; color: #FFF; text-shadow: #000 1px 3px 3px; }

ul#webNav { position: absolute; top: 0; right: 0; }
ul#webNav li { float: left; }
ul#webNav a { display: block; text-transform: uppercase; padding: 20px 40px; -webkit-transition-property: background-color; -webkit-transition-duration: .4s; -webkit-transition-timing-function: linear; }
ul#webNav a:link, ul#webNav a:visited { text-decoration: none; }
ul#webNav a:hover, ul#webNav a:active { background: #9AA69B url(/images/v1/footer.jpg) repeat -420px -12px; border-bottom: #6B7C6A solid 1px; background: rgba(16,47,18,.38) url(/images/v1/footer.jpg) repeat -420px -12px; color: #FFF; text-shadow: #000 1px 3px 3px; }

/* FOOTER
---------------------------------------------- */

#footer { position: relative; padding: 30px 0; background: #A6B1A6 url(/images/v1/footer.jpg) repeat-x 0 0; border-top: #949E94 solid 1px; width: 100%; }
#footer a:link, #footer a:visited { color: #000; text-decoration: none; }
#footer a:hover, #footer a:active { border-bottom: #FFF solid 1px; }
#footer ul { position: relative; z-index: 10; float: left; margin-left: 170px; }
#footer li { display: inline; padding: 0 20px; }
#fnotes { float: right; margin-right: 49px; text-align: right; }

#extraStyle1 { position: absolute; z-index: 1; bottom: -70px; left: 42px; background: url(/images/v1/hatchet.png) no-repeat 0 0; width: 480px; height: 271px; }