/* Theme Name: @CHM Blog Description: News style theme for @CHM blog. Author: Computer History Museum Author URI: http://www.computerhistory.org/ Version: 2.0 2014-08-01 */ /* COMMON STYLES -------------------------------------------------------------- */ .block { display: block; } .inline-block { display: inline-block; } /* MAIN ELEMENTS -------------------------------------------------------------- */ #atchm-page { width: 960px; margin: 0px auto 20px; padding: 0; text-align: left; background: url(/_chm/img/blog/body-bg.png) repeat-y #ffffff !important; border: 1px solid #cccccc; -moz-box-shadow: 0 2px 4px #cacaca; -webkit-box-shadow: 0 2px 4px #cacaca; box-shadow: 0 2px 4px #cacaca; box-sizing: content-box; } #atchm-sidebar { display: block; float: right !important; overflow: hidden; width: 308px; padding: 24px; box-sizing: content-box; } #atchm-content { display: block; float: left !important; overflow: hidden; min-height: 450px; width: 554px; padding: 24px; box-sizing: content-box; } /* #atchm-sidebar *, #atchm-content * { box-sizing: content-box; } */ #atchm-content h2 { margin-top: 36px !important; } #atchm-sidebar .container { margin-bottom: 24px; padding: 24px; display: block; width: 100%; overflow: hidden; } #atchm-sidebar .tabs-container { margin-bottom: 24px; padding: 0px; display: block; width: 100%; overflow: hidden; } #atchm-sidebar .border { border: 1px solid #DDDDDD; border-radius: 4px; } #atchm-sidebar .background { background-color: #ffffff; } #atchm-sidebar-social .icon { margin-top: 12px; } #atchm-sidebar-social .counter { display: block; float: left; margin-left: 12px; color: #444444; font-family: Georgia,"Times New Roman",Times,serif; font-size: 1.8em; line-height: 1.8em; } #atchm-sidebar-social .description { display: block; float: left; margin-left: 12px; color: #888888; font-family: Georgia,"Times New Roman",Times,serif; font-size: .9em; line-height: 1em; margin-top: -6px; } #atchm-sidebar-categories li a { color: #555555; } #atchm-sidebar-categories li a:hover { color: #222222; text-decoration: none; } #atchm-sidebar-categories .counter { color: #990000; float: right; } #atchm-sidebar-categories .more { display: block; float: right; margin: 12px 0px; text-align: right; } #atchm-sidebar-archives li a { color: #555555; } #atchm-sidebar-archives li a:hover { color: #222222; text-decoration: none; } #atchm-sidebar-archives .counter { color: #990000; float: right; } #atchm-sidebar-archives .more { display: block; float: right; margin: 12px 0px; text-align: right; } #atchm-sidebar-bloggers a.name { color: #555555; } #atchm-sidebar-bloggers a.name:hover { color: #222222; text-decoration: none; } #atchm-sidebar-bloggers .name { display: block; margin-left: 12px; font: .85em; line-height: 1.2em; } #atchm-sidebar-bloggers .more { display: block; float: right; margin: 12px 0px; text-align: right; } #atchm-sidebar-tabs .chm-nav-tabs { margin-top: 0px !important; } #atchm-sidebar-tabs .chm-nav-tabs li a { margin: 0px !important; padding: 10px !important; } #atchm-sidebar-tabs .chm-tab-pane { border: 1px solid #cccccc; border-radius: 0px 0px 4px 4px; border-top: none; padding: 20px; background-color: #ffffff; } #atchm-sidebar-tabs .chm-tab-pane a { color: #222222; } #atchm-sidebar-tabs .chm-tab-pane a:hover { color: #000000; text-decoration: none; } #atchm-sidebar-tabs .chm-tab-pane .post { margin-bottom: 12px; border-bottom-color:#F2F2F2; border-bottom-style: solid; border-bottom-width: 1px; } #atchm-sidebar-tabs .chm-tab-pane .post:last-child { margin-bottom: 0px !important; border-bottom: none !important; } #atchm-sidebar-tabs .chm-tab-pane .tags { line-height: 1.3em; } #atchm-sidebar-tabs .chm-tab-pane .title { margin-bottom: 8px; font-size: .9em; line-height: 1.1em; } #atchm-sidebar-tabs .chm-tab-pane .light { font-size: .8em; color: #999999; } #atchm-sidebar-tabs .chm-tab-pane .date { font-size: .8em; line-height: .9em; color: #999999; } #atchm-sidebar-tabs .chm-tab-pane .count { font-size: .8em; line-height: .9em; color: #999999; text-align: right; } #atchm-sidebar-tabs .chm-tab-pane .info { display: block; margin-left: 12px; margin-bottom: 8px; line-height: 1em; } #atchm-sidebar-tabs .chm-tab-pane .excerpt { display: block; margin-left: 12px; margin-bottom: 12px; font-size: .8em; line-height: 1em; color: #999999; } #atchm-sidebar-tabs .chm-tab-pane .more { display: block; float: right; margin: 12px 0px; text-align: right; } #atchm-related-articles { padding: 36px 0px; margin-bottom: 0px; } #atchm-related-articles a { color: #333333; } #atchm-related-articles a:hover { color: #000000; text-decoration: none; } #atchm-related-articles .info { display: block; margin-left: 12px; margin-bottom: 12px; } #atchm-related-articles .article .title { margin-bottom: 8px; font-size: 1em; line-height: 1.15em; } #atchm-related-articles .article .date { font-size: .8em; line-height: .9em; color: #999999; } #atchm-about-author { padding: 36px 0px; } #atchm-about-author .info { display: block; margin-left: 24px; } #atchm-about-author .more { display: block; float: right; text-align: right; } #atchm-author-posts { padding: 36px 0px 0px; } #atchm-author-posts .post { padding: 24px 24px; } #atchm-author-posts .post:last-child { padding-bottom: 0px !important; border-bottom: none !important; } #atchm-author-posts .info { display: block; margin-left: 24px; } #atchm-author-posts .info a.title { color: #222222; } #atchm-author-posts .info a.title:hover { color: #000000; text-decoration: none; } #atchm-author-posts .info a.title h3 { margin-bottom: 3px !important; } #atchm-author-posts .atchm-meta { margin-bottom: 12px; } #atchm-author-posts .more { display: block; float: right; margin-top: 12px; text-align: right; } #atchm-category-posts { } #atchm-category-posts .post { padding: 24px 24px; } #atchm-category-posts .info { display: block; margin-left: 24px; } #atchm-category-posts .info a.title { color: #222222; } #atchm-category-posts .info a.title:hover { color: #000000; text-decoration: none; } #atchm-category-posts .info a.title h3 { margin-bottom: 3px !important; } #atchm-category-posts .atchm-meta { margin-bottom: 12px; } #atchm-categories-posts { } #atchm-categories-posts .atchm-category { padding: 24px 0px; } #atchm-categories-posts .post { padding: 6px 12px; } #atchm-categories-posts .post a.title { color: #222222; } #atchm-categories-posts .post a.title:hover { color: #000000; text-decoration: none; } #atchm-categories-posts .post a.title h3 { margin-bottom: 3px !important; } #atchm-categories-posts .atchm-meta { margin-bottom: 0px; } #atchm-categories-posts .atchm-category .more { display: block; float: right; margin-top: 12px; text-align: right; } #atchm-archives-posts { } #atchm-archives-posts .atchm-archive { padding: 24px 0px; } #atchm-archives-posts .post { padding: 6px 12px; } #atchm-archives-posts .post a.title { color: #222222; } #atchm-archives-posts .post a.title:hover { color: #000000; text-decoration: none; } #atchm-archives-posts .post a.title h3 { margin-bottom: 3px !important; } #atchm-archives-posts .atchm-meta { margin-bottom: 0px; } #atchm-archives-posts .atchm-archive .more { display: block; float: right; margin-top: 12px; text-align: right; } #atchm-archive-posts { } #atchm-archive-posts .post { padding: 24px 24px; } #atchm-archive-posts .info { display: block; margin-left: 24px; } #atchm-archive-posts .info a.title { color: #222222; } #atchm-archive-posts .info a.title:hover { color: #000000; text-decoration: none; } #atchm-archive-posts .info a.title h3 { margin-bottom: 3px !important; } #atchm-archive-posts .atchm-meta { margin-bottom: 12px; } #atchm-archive-posts .more { display: block; float: right; margin-top: 12px; text-align: right; } #atchm-bloggers-posts { } #atchm-bloggers-posts .atchm-blogger { padding: 24px 24px; } #atchm-bloggers-posts .info { display: block; margin-left: 24px; } #atchm-bloggers-posts .post { padding: 6px 12px; } #atchm-bloggers-posts .post a.title { color: #222222; } #atchm-bloggers-posts .post a.title:hover { color: #000000; text-decoration: none; } #atchm-bloggers-posts .post a.title h3 { margin-bottom: 3px !important; } #atchm-bloggers-posts .atchm-meta { margin-bottom: 0px; } #atchm-bloggers-posts .atchm-blogger .more { display: block; float: right; margin-top: 12px; text-align: right; } #atchm-search-results { } #atchm-search-results .post { padding: 24px 24px; } #atchm-search-results .info { display: block; margin-left: 24px; } #atchm-search-results .info a.title { color: #222222; } #atchm-search-results .info a.title:hover { color: #000000; text-decoration: none; } #atchm-search-results .info a.title h3 { margin-bottom: 3px !important; } #atchm-search-results .atchm-meta { margin-bottom: 12px; } #atchm-search-results .more { display: block; float: right; margin-top: 12px; text-align: right; } #atchm-tag-archive { } #atchm-tag-archive .post { padding: 24px 24px; } #atchm-tag-archive .info { display: block; margin-left: 24px; } #atchm-tag-archive .info a.title { color: #222222; } #atchm-tag-archive .info a.title:hover { color: #000000; text-decoration: none; } #atchm-tag-archive .info a.title h3 { margin-bottom: 3px !important; } #atchm-tag-archive .atchm-meta { margin-bottom: 12px; } #atchm-tag-archive .more { display: block; float: right; margin-top: 12px; text-align: right; } .atchm-container { clear: both; display: block; margin: 0px 0px 36px 0px; overflow: hidden; zoom: 1; } .atchm-meta { display: block; margin-bottom: 24px; overflow: hidden; color:#8F9194; font-size: .9em; } .atchm-meta a { color: #8F9194; } .atchm-meta a:hover { color: #555555; text-decoration: none; } .atchm-meta .home { display: block; float: right; } .atchm-meta .author { display: block; float: left; margin-right: 24px; } .atchm-meta .date { display: block; float: left; margin-right: 24px; } .atchm-meta .posted-date { display: block; float: left; margin-right: 24px; } .atchm-meta .posted-in { display: block; float: left; margin-right: 24px; } .atchm-meta .comments-count { display: block; float: left; margin-right: 24px; } .atchm-border-top { border-top: 1px solid #e2e2e2; } .atchm-border-bottom { border-bottom: 1px solid #e2e2e2; } /* clearfix hack ---------------------------------------------------------- */ .clearafter { content: "."; display: block; clear: both; visibility: hidden; line-height: 0px; height: 0px; } div.Player { margin: 20px 0px; } /* NATIVE WP IMG&CAPTIONS ---------------------------------------------------------- */ .wp-caption { display: block; box-sizing: content-box; background-color: #FFFFFF; border: 1px solid #DDDDDD; border-radius: 4px; height: auto; line-height: 1.42857; max-width: 100%; padding: 4px !important; transition: all 0.2s ease-in-out 0s; margin-bottom: 10px; overflow: hidden; } .wp-caption a.gallery_colorbox { display: block; padding: 0; margin: 0; } .wp-caption img.image-stylized { display: block; padding: 0; margin: 0; border: none; } .wp-caption p{ display: block; margin: 4px 0 8px; padding: 8px; border-top: 1px solid #DDDDDD; font-style: normal; color: #333333; font-size:11px; line-height:16px; } img.image-stylized { display: block; padding: 3px; border-top-right-radius: 3px; -moz-top-right-border-radius: 3px; -webkit-top-right-border-radius: 3px; -o-top-right-border-radius: 3px; border-top-left-radius: 3px; -moz-top-left-border-radius: 3px; -webkit-top-left-border-radius: 3px; -o-top-left-border-radius: 3px; -moz-box-shadow: 0 0 3px #cacaca; -webkit-box-shadow: 0 0 3px #cacaca; box-shadow: 0 0 3px #cacaca; border: 1px solid #e2e2e2; background-color: #ffffff; } .alignleft { float: left; margin: 6px 24px 12px 0; } .alignright { float: right; margin: 6px 0 12px 24px; } .aligncenter { margin: 10px auto; } span.to-upper-case { text-transform: uppercase; } /* IMAGE GALLERY IMG&CAPTIONS ---------------------------------------------------------- */ div.gallery { display: block; margin: 20px 0; clear: both; } dl.gallery-item { display: block; float: left; margin: 0px 8px 8px 0px; } dd.gallery-caption { display: none; } /* HOME PAGE ---------------------------------------------------------- */ #atchm-featured-categories {} #atchm-featured-categories .featured-articles { padding: 12px 12px; } #atchm-featured-categories .main-article figure { position: relative; } #atchm-featured-categories .main-article div.title { position: absolute; bottom: 21px; left: 5px; right: 5px; background-color: rgba(0, 0, 0, 0.5); display: block; font-size: 1.14em; line-height: 1.24em; padding: 12px 18px; z-index:100; } #atchm-featured-categories .main-article div.title a { color: #FFFFFF; } #atchm-featured-categories .article { margin: 0px 0px 12px 24px; } #atchm-featured-categories .article .info { margin: 0px 0px 0px 12px; } #atchm-featured-categories .article .info .title { margin-bottom: 6px; font-size: 1em; line-height: 1.1em; color: #333333; } #atchm-featured-categories .article .info .title:hover { color: #000000; font-weight: 400; text-decoration: none; } #atchm-featured-categories .article .info .date, #atchm-featured-categories .article .info .posted-date, #atchm-featured-categories .article .info .posted-in, #atchm-featured-categories .article .info .comments-count { display: block; float: left; margin-right: 24px; color:#8F9194; font-size: .9em; } #atchm-featured-categories .article .info .date a, #atchm-featured-categories .article .info .posted-date a, #atchm-featured-categories .article .info .posted-in a, #atchm-featured-categories .article .info .comments-count a { color:#8F9194; } #atchm-featured-categories .featured-articles .more { display: block; float: right; margin-top: 12px; text-align: right; } /* SINGLE ARTICLE - COMMENTS PAGINATION ---------------------------------------------------------- */ .easyPaginateNav { display: block; width: 100%; height: 20px; clear:both; margin:10px 0; text-align: center; } .easyPaginateNav a { display: inline-block; height: 18px; width: 20px; padding:2px 5px; margin:0 2px; color:#999999; background:#ffffff; border:1px solid #999999; text-decoration:none; line-height: 18px; } .easyPaginateNav a:hover, .easyPaginateNav a.current { background:#ffffff; color:#0099cc; border-color: #0099cc; } .easyPaginateNav a.disabled:hover { background:#ffffff; color:#0099cc; border-color: #0099cc; } .easyPaginateNav a.last { padding:2px 5px !important; } /* PAGINATION ---------------------------------------------------------- */ div#pagination { display: block; width: 100%; height: 24px; } div#pagination div.previous { display: block; float: left; height: 24px; line-height: 24px; padding: 0px 8px; } div#pagination div.next { display: block; float: right; height: 24px; line-height: 24px; padding: 0px 8px; } div.wp-pagination { display: block; margin-top: 24px; width: 100%px; height: 24px; text-align: center; } div.wp-pagination ol.wp-paginate { display: block; padding: 0px !important; width: 100%; height: 24px; text-align: center; } div.wp-pagination ol.wp-paginate li { display: inline-block; height: 24px; list-style: none outside none; width: 36px; margin: 0px 2px; } div.wp-pagination ol.wp-paginate li:first-child { display: none; } div.wp-pagination ol.wp-paginate li span.current { display: block; height: 24px; line-height: 24px; width: 36px; border: 1px solid #428bca; color: #428bca; } div.wp-pagination ol.wp-paginate li a.page, div.wp-pagination ol.wp-paginate li a.prev, div.wp-pagination ol.wp-paginate li a.next { display: block; height: 24px; line-height: 24px; width: 36px; border-radius: 3px; border: 1px solid #999999; cursor: pointer; color: #999999; } div.wp-pagination ol.wp-paginate li a.page:hover { border: 1px solid #428bca; cursor: pointer; color: #428bca; text-decoration: none; } /* HOME PAGE CAROUSEL ---------------------------------------------------------- */ .carousel-indicators li { background-color: rgba(255, 255, 255, 1.0); border: 1px solid #444444; border-radius: 12px; margin: 2px; width: 12px; height: 12px; } .carousel-indicators li.active { background-color: rgba(255, 255, 255, 1.0); border: 1px solid #555555; border-radius: 16px; margin: 2px 1px; margin-bottom: 0px; width: 16px; height: 16px; } .atchm-carousel-caption { background-color: rgba(0, 0, 0, 0.45); position: absolute; left: 0px; right: 0px; bottom: 0px; padding: 12px 7.5% 42px 7.5%; } .atchm-carousel-caption a { color: #ffffff; font-size: 1.24em; line-height: 1.48em; }