/* -- BLOG.CSS by Harlan Lewis (http://harlanlewis.com) -- */


/* BLOG NAV */

.blog-page div.region .nav { clear: both; margin: 0; float: left; display: inline; text-shadow: 0 0 3px #fff; color: #4D403D; font-family: Helvetica Neue, Helvetica, Arial; font-size: 12px;}

.blog-page div.region .nav .primary { height: 41px; border: 1px solid #e6d8bf; border-right: 0; border-left: 0; padding: 0 20px; width: 920px; background: #E6E2D5;}

.blog-page div.region .first .primary { 
border-top: 0;
-moz-border-radius-topleft: 6px;
-webkit-border-top-left-radius: 6px;
-moz-border-radius-topright: 6px;
-webkit-border-top-right-radius: 6px; }


.blog-page div.region .last .primary { 
border-bottom: 0;
-moz-border-radius-bottomleft: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomright: 6px;
-webkit-border-bottom-right-radius: 6px; 
-webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.8);}

.blog-page div.region .nav ul,
.blog-page div.region .nav li,
.blog-page div.region .blog-filter dl,
.blog-page div.region .blog-filter dt,
.blog-page div.region .blog-filter dd { margin: 0; padding: 0; list-style: 0; float: left; display: inline; }

.blog-page div.region .nav li { padding-right: 30px; line-height: 41px; }

.blog-page div.region .nav li a { float: left; display: inline; font-weight: bold; }

.blog-page div.region .nav li.nav-subscribe a { background: url(../../blog/img/blog-nav-icons.png) left 14px no-repeat; padding-left: 17px; }

.blog-page div.region .nav li.nav-twitter a { background: url(../../blog/img/blog-nav-icons.png) left -173px no-repeat; padding-left: 17px; }

#blog-front .nav li.nav-frontpage a:link,
#blog-archive .nav li.nav-archive a:link { color: #4D403D; font-weight: bold; text-decoration: none; }

.blog-page div.region .nav form { float: right; display: inline; padding-top: 10px; }

.blog-page div.region .nav label { padding-right: 3px; font-weight: normal; color: #777; }

.blog-page div.region .nav .submit-button { width: 50px; margin-left: 10px }

.blog-page div.region .nav .text-input { width: 160px; }

.blog-page div.region .nav .blog-filter { clear: both; padding: 0 20px; float: left; display: inline; width: 926px; border-top: 1px solid #FAF8F2; border-bottom: 1px solid #e6d8bf; background: #FAF8F2; margin: 0 -3px; 
-moz-border-radius: 3px;
-webkit-border-radius: 3px; }


/* article view toggle */

#page-middle .view-toggle,
#page-middle .view-toggle li { float: left; display: inline; margin: 0; padding: 0; list-style: none; }

#page-middle .view-toggle { margin-top: 11px; margin-bottom: 11px; }

.view-toggle a { margin: 0; background: url(../../blog/img/button-toggle.png) -424px 0 no-repeat; height: 26px; padding: 0; text-indent: -9999px; width: 95px; overflow: hidden; float: left; display: inline;}

.view-toggle .view-titles a { background-position: 0 0; }
.view-toggle .view-titles a:hover { background-position: -212px 0; }
.view-toggle .view-articles a,
.view-toggle .view-articles a:hover { background-position: -95px 0; }

.view-toggle.titles-selected .view-titles a,
.view-toggle.titles-selected .view-titles a:hover { background-position: -424px 0; }
.view-toggle.titles-selected .view-articles a { background-position: -519px 0; }
.view-toggle.titles-selected .view-articles a:hover { background-position: -731px 0; }

#side-toggle { position: fixed; bottom: 200px; left: 50%; height: 1px; width: 1px; overflow: visible; }

#side-toggle .blog-filter { position: absolute; top: 0; left: -511px; }

#side-toggle .blog-filter ul { 
-moz-border-radius-topleft: 6px;
-webkit-border-top-left-radius: 6px;
-moz-border-radius-bottomleft: 6px;
-webkit-border-bottom-left-radius: 6px; }

#page-middle #side-toggle li { padding: 0; margin: 0; float: none; display: block; border-right: 1px solid #e6d8bf; }

#side-toggle a { background: url(../../blog/img/side-button-toggle.png) 0 0 no-repeat; text-shadow: none; width: 31px; height: 25px; float: none; display: block;}

#side-toggle .view-titles a { background-position: 0 0;
-moz-border-radius-topleft: 6px;
-webkit-border-top-left-radius: 6px; } 
#side-toggle .view-titles a:hover { background-position: -35px 0; }
#side-toggle .view-articles a { background-position: 0 -25px;
-moz-border-radius-bottomleft: 6px;
-webkit-border-bottom-left-radius: 6px; }
#side-toggle .view-articles a:hover { background-position: -35px -25px; }

#side-toggle .titles-selected .view-titles a { background-position: -70px 0; }
#side-toggle .titles-selected .view-titles a:hover { background-position: -105px 0; }
#side-toggle .titles-selected .view-articles a { background-position: -70px -25px; }
#side-toggle .titles-selected .view-articles a:hover { background-position: -105px -25px; }


/* date filtering */

.archive-filter { float: right; display: inline; width: 650px; padding: 5px 20px 5px 0; font-family: Helvetica Neue, Helvetica, Arial; margin: 0;}

#page-middle .archive-filter h4 { float: left; display: inline; padding: 0 10px 0 0; font-size: 12px; line-height: 40px; color: #777; font-family: Helvetica Neue, Helvetica, Arial; font-weight: normal; }


.filters { float: left; display: inline; width: 500px; }

.archive-filter ul,
.archive-filter li { float: left; display: inline; margin: 0 !important; padding: 0 !important; list-style: none; font-size: 12px; }

.archive-filter ul { clear: left; }

.archive-filter li.selected { background: #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px; }

.archive-filter a { text-decoration: none; font-weight: normal; line-height:22px !important; float: left; display: inline; padding: 0 5px; height: 20px; color: #555; }

.archive-filter a:link,
.archive-filter a:visited { color: #0c75ce; }
.archive-filter a:hover { color: #ff4800; } 
.archive-filter a:active { color: #ff9900; }
.archive-filter a:focus { color: #ff4800; }

.archive-filter li.selected a { color: #ff4800; }






/* BLOG ARTICLES */


/* article default styling */

#article-container { padding: 20px 0; position: relative; clear: both; border-top: 1px solid #FAF8F2; }

.article { border-bottom: 1px solid #e6d8bf; }

.article,
.article-head { position: relative; }

.blog-page h3 a:link { color: #ff4800; text-decoration: none; }
.blog-page h3 a:visited {  }
.blog-page h3 a:hover { text-decoration: underline; }
.blog-page h3 a:active { }
.blog-page h3 a:focus {  }

.article strong { font-weight: bold; }

.article em { font-style: italic; }

.article hr { color: #d6c8b0; background: #d6c8b0; margin: 0 0 1.5em 0; height: 1px; width: 100%; border: none; }

.article dt { font-size: 1.2em; border-bottom: 3px solid #d6c8b0; margin: .5em 0 1em 0; padding: 0 0 .5em 0; }

.article dd { display: block; padding:0 0 1em 0; margin: 0 10px 1em 10px; border-bottom: 1px solid #e6d8bf; }

/* article columns */

.article .cols { clear: both; margin-bottom: 1.5em; padding-top: 1.5em; } 

.article .c1 { clear: both; }

.article .c1,
.article .c2 { float: left; display: inline; clear: none; width: 285px; padding-right: 40px; }

.article .c2 { padding-right: 0; }



#blog-archive .article-meta .author-link,
#blog-front .article-meta .author-link { display: none; }






/* ARTICLES VISIBLE */

.articles-visible { background: url(../../blog/img/blog-article-sidebar.png) 0 0 repeat-y; }

.articles-visible .article { clear: both; padding: 0 80px 30px 270px; float: left; display: inline; margin-bottom: 40px; }

.articles-visible .article h3 { font-size: 40px; line-height: 70px; font-family: 'Aller'; padding: 0; position: relative; }

.articles-visible .article h3 span { font-size: .4em; display: block; line-height: 1em; position: absolute; left: 0; top: -1.3em; color: #0d5174; font-family: Helvetica Neue, Helvetica, Arial; font-weight: bold; text-transform: uppercase;}

/* article meta */

.articles-visible .article .article-meta { position: absolute; left: -250px; top: 20px; width: 190px;  }

.articles-visible .article .article-meta .date { width: 100%; position: relative; }

.articles-visible .article .article-meta .date div { position: absolute;  margin: 0; padding: 0; font-family: Helvetica Neue, Helvetica, Arial; font-size: 14px; line-height: 20px; line-height: 1; color: #999; text-transform: uppercase; font-weight: bold; width: 40px; height: 20px; right: 0; text-align: right; text-shadow: 0 0 3px #fff; }

.articles-visible .article .article-meta .date .day { width: 60px; height: 48px; right: 42px; font-size: 48px; text-align: right; line-height: 48px; top: -4px; color: #666; }
.articles-visible .article .article-meta .date .month { top: 0; }
.articles-visible .article .article-meta .date .year { top: 20px; }

/* article nav */

.articles-visible .article .article-meta ul { position: absolute; top: 50px; right: 0; text-align: right; list-style: none; padding: 0; }
.articles-visible .article .article-meta ul li { margin: 0; padding: 0; }

/* article summary */

.articles-visible .article-summary { color: #4a352d; font-weight: normal; font-size: 18px; line-height: 1.6em; margin: 0; }

.articles-visible .article-summary p { padding: 0 0 22px; }

.articles-visible .article .keep-reading { display: none; }

.articles-visible .article-foot { float: left; display: inline; clear: both; }

.articles-visible .article-foot ul { height: 40px; line-height: 40px; clear: both; float: left; margin: 0; display: inline; padding: 0; width: 610px; }

.articles-visible .article-foot li { margin: 0; padding: 0; list-style: none; float: left; display: inline; width: 33%; text-align: left; }

/* article content */

.articles-visible .article-body {  padding-top: 22px; text-shadow: none; }

.articles-visible .article .aside { float: left; display: inline; width: 190px; font-style: normal; padding: .4em 0 0 20px; margin: 0 0 0 -270px; color: #666; font-family: Helvetica Neue, Helvetica, Arial; font-size: 12px; line-height: 1.6em; text-align: right; }

div.region .articles-visible .article .aside h5 { color: #ff4800; font-size: 14px; }

.articles-visible .article .aside-right { float: right; margin: 0 -90px 1.5em 20px; padding: 1.5em 20px 0 20px; text-align: left; width: 290px; background: #fff; 
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-box-shadow: rgba(0,0,0,0.3) 0px 1px 3px;
}


/* SHORT ARTICLES */

.articles-visible .article-short h3 { font-size: 16px; margin: 0; padding: 0; line-height: 24px; }

.articles-visible .article-short .article-summary { font-size: 14px; line-height: 1.6em; margin: 0; padding: 0; }

/* article-link */

.articles-visible .article-link .article-meta { top: 10px; }

.article-link .quote { font-style: normal; padding: 10px 0 0 40px; margin: 10px -35px 22px 0; font-size: 14px; background: url(../img/quote-left.png) 14px 5px no-repeat; }

.article-link blockquote { padding: 0; font-style: italic; font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;}

.article-link blockquote p { padding-bottom: 10px; }

.article-link .link-attributes { padding: .5em 0 0 0; font-style: italic; }





/* TITLES VISIBLE */

.titles-visible .article { padding: 20px 80px 10px 80px; margin-bottom: 10px; }

.titles-visible .article h3 { font-size: 16px; line-height: 30px; padding: 0 0 0 190px; }

.titles-visible .article-meta .date div { display: inline; }

.titles-visible .article-meta { position: absolute; left: 0; top: 0; line-height: 30px; color: #666; width: 150px; text-align: right;}

.titles-visible .article-summary,
.titles-visible .keep-reading { padding-left: 190px; }

.titles-visible .article-short { }

.titles-visible .article-link .quote { padding-top: 5px; margin-left: -15px; background-position: 14px 0; margin-right: 0; }

.titles-visible .article-meta ul,
.titles-visible .article-body,
.titles-visible .article-foot { display: none; }


/* externals */

#external { clear: both; background: #000; text-shadow: none; color: #fff; width: 880px; float: left; display: inline; padding: 40px; color: #ccc; }

#external { display: none; }

#external h3 { color: #fff; border-bottom: 1px solid #333; padding-bottom: 14px; margin-bottom: 14px; }

#external #flickr { width: 494px; float: left; display: inline; }

#external #flickr ul { padding: 0; margin: 0; list-style: none; }

#external #flickr li { float: left; display: inline; clear: none; width: 146px; margin: 5px 14px 5px 0; }

#external #flickr a { float: left; display: inline; clear: none; width: 140px; border: 2px solid #181818; padding: 1px; margin: 0; height: 90px; overflow: hidden; }

#external #flickr img { width: 140px; height: auto; }

#external #twitter { width: 360px; float: right; display: inline; }

#external #twitter ul,
#external #twitter li { list-style: none; margin: 0; padding: 0; }

#external #twitter li { padding: 14px 0;border-bottom: 1px solid #111; }

#external #twitter li .date { display: block; font-size: 11px; font-family: Helvetica Neue, Helvetica, Arial; text-transform: uppercase; text-decoration: none; line-height: 1; text-align: right; }