/* America.gov CSS: Blogs United States Department of State, IIP/W Description: General blog design 1 Global Blog Styles 1.1 Information Bubble 1.2 Notification Message 1.3 Star Rating 2 Header 2.1 Breadcrumbs and Tools 3 Welcome Message / Single Blog Header 3.1 Welcome Message: Home/Landing Page 4 Content Channels/Types 4.1 Featured Post 4.2 Blog Snapshot (used on the main landing page) 4.3 General List of Blog Posts (numberic) 4.4 Featured Quote 4.5 Tabbed Collection (such as for "most popular posts") 4.6 Classification (categories/tags) 4.7 Calendar 4.8 Author List 5 Single Blog View 5.1 About This Blog (sub-header) 5.2 List of Blog Posts 5.3 Post Tools (classification, rating, email, social bookmarks) 5.3.1 Social/Sharing Bubble 5.3.2 Email Form 5.3.3 Embeds 5.4 Comments (list and form) 5.4.1 Comment List 5.4.2 Comment Form 6 Unique Pages 6.1 Author Page 6.2 Archive Page(s) 7 Custom Blog Designs */ /* 1 Global Blog Styles --------------------------------------------------------------------------------------- */ #blogs .body { line-height: 16pt; margin-top: 0; padding-bottom: 16px; } #blogs h3 { font-family: Trebuchet MS, Verdana, Sans-Serif; font-size: 14pt; font-weight: bold; line-height: 18pt; } #menu ul li.active, #menu ul li.home.active:hover { background:transparent url(/i/menu_active.png) no-repeat scroll 50% bottom; } #log-view { font-size: 1px; height: 1px; line-height: 1px; visibility: hidden; } /* RSS Link */ #blogs a.rss { background: transparent url(/i/btn_rss.png) no-repeat right center; display: block; font-size: 8pt; font-weight: bold; padding-bottom: 1px; padding-right: 50px; } /* Read More Link */ #blogs .read-more { background: transparent url(/i/read-more.png) no-repeat right center; padding-right: 12px; } #blogs .read-more-small { background: transparent url(/i/arrow_right_small_blue.png) no-repeat right center; font-size: 8pt; padding-right: 12px; } /* - Blog Link Tag (such as in featured posts) - */ #blogs .blog-tag { background-image: url(/i/blogs/blog_default_tag.png); background-position: left top; background-repeat: no-repeat; display: block; float: left; font-size: 1px; height: 14px; line-height: 10px; margin-top: 4px; padding: 0 6px 2px 0; text-indent: -999em; width: 84px; } /* - Date and small text display - */ #blogs .date { color: gray; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; font-weight: normal; } #blogs .small { font-size: 8pt; } #blogs a.small { color: #037; } /* Image class formatting */ #blogs .image { border: 0; padding: 5px 0 0 0; } #blogs .alignleft { float: left; padding: 2px 5px 10px 0; } #blogs .alignright { float: right; padding: 2px 0 10px 5px; } /* - Jump to top divider and link - */ .to-top { border-top: 3px solid #666; background: #f0f0f0; overflow: hidden; padding: 3px; } .to-top a { background: transparent url(/i/top.png) no-repeat center center; display: block; float: right; height: 20px; margin-right: 2px; text-indent: -999em; width: 46px; } /* 1.1 Information Bubble ------------------------------------------------------------------------------------- */ .bubble { background: transparent url(/i/bubble_top.png) no-repeat -172px top; display: none; margin-left: -24px; margin-top: 18px; padding-top: 8px; position: absolute; width: 185px; z-index: 10; } .bubble-content { display: none; } .bubble .bubble-content { display: block; } .bubble .content { background: white url(/i/bubble_bottom.png) repeat-x left bottom; border: 1px solid #999; border-top: 0; margin: 0; overflow: hidden; white-space: normal; } .bubble .content li { border-bottom: 1px dashed #ccc; padding: 8px 10px 2px 10px; } .bubble .content li:last-child, .bubble .content li.last-child { border-bottom: 0; } .bubble .content li a { background-repeat: no-repeat; background-position: left center; display: block; margin-bottom: 6px; } .bubble .content li.whatsthis a { color: #666; padding-left: 0; } .bubble .close-bubble { background: transparent url(/i/buttons/btn_close.png) no-repeat center center; height: 22px; margin-left: 168px; margin-top: -8px; position: absolute; text-indent: -999em; width: 22px; } a.bubble-display { background: transparent url(/i/icons/open_sm.png) no-repeat left 3px; padding-left: 14px; } a.bubble-display.bubble-open { background-position: left -23px; } /* 1.2 Notification Message ------------------------------------------------------------------------------------- */ .message { background-repeat: no-repeat; background-position: left top; clear: both; color: white; height: 27px; font-size: 8pt; font-weight: bold; margin-bottom: 4px; padding-left: 28px; } .message span, .message a { color: white; display: block; background-repeat: no-repeat; background-position: right top; height: 19px; line-height: 18px; padding: 4px 4px 4px 0; } .message.success { background-color: #73c124; background-image: url(/i/bg_message_success_left.png); } .message.success span { background-image: url(/i/bg_message_success_right.png); } .message.warning { background-color: #f93; background-image: url(/i/bg_message_warning_left.png); } .message.warning span { background-image: url(/i/bg_message_warning_right.png); } .message.edit { background-color: #39c; background-image: url(/i/bg_message_edit_left.png); width: 120px; } .message.edit a { background-image: url(/i/bg_message_edit_right.png); } /* 1.3 Star Rating ------------------------------------------------------------------------------------- */ .star { background-position: top left; background-repeat: no-repeat; background-image: url(/i/star.png); display: block; float: left; height: 16px; margin-bottom: 6px; padding-right: 2px; text-indent: -999em; width: 16px; } .star.disabled, .star.active.disabled { background-position: left 0; } .star.active { background-position: left -48px; } .star.highlight, .star.disabled.highlight { background-position: left -32px; } .star.submitted { background-position: left -16px; } .hover-message { color: #999; padding-left: 10px; } /* 2 Header --------------------------------------------------------------------------------------- */ #blogs #blog-header.body { margin: 10px auto 0 auto; padding: 0; width: 964px; } #blogs #blog-header .blog-header-title { border-bottom: 3px solid #f0f0f0; overflow: hidden; padding: 16px 16px 10px; } #blogs #blog-header h1 { float: left; font-size: 10pt; line-height: 10px; margin: 0; width: 300px; } #blogs #blog-header h1 a { background: transparent url(/i/title.png) no-repeat top left; display: block; height: 14px; width: 246px; text-indent: -999em; } #blogs #blog-header .show-blog-list { float: right; font-size: 9pt; font-weight: bold; line-height: 14px; } #blogs .bubble.blog-list { background-position: -108px top; margin-left: -88px; width: 200px; } #blogs .bubble.blog-list .close-bubble { margin-left: 186px; } /* 2.1 Breadcrumbs and Tools ------------------------------------------------------------------------------------- */ .breadcrumbs { float: left; font-size: 7.5pt; height: 20px; overflow: hidden; width: 840px; } .breadcrumbs li { background: transparent url(/i/bg_breadcrumb.png) no-repeat right; color: #666; display: inline; font-weight: bold; margin-right: 4px; padding: 4px 12px 4px 0px; } .breadcrumbs li a { font-weight: normal; } .breadcrumbs li:last-child, .breadcrumbs li.last-child { background: transparent; } .breadcrumbs li:last-child a, .breadcrumbs li.last-child a { font-weight: bold; } .breadcrumbs li:last-child a:hover, .breadcrumbs li.last-child a:hover { text-decoration: none; } .tools { width: 100px; } /* 2.2 Flyout ------------------------------------------------------------------------------------- */ #blogs #blog-header .display-blogs { background: transparent url(/i/buttons/btn_display_blogs.png) no-repeat right top; display: block; float: right; font-weight: bold; margin-top: -3px; padding-right: 34px; } #blogs #blog-header .display-blogs:hover { text-decoration: none; } #blogs #blog-header .display-blogs.active { background-position: right bottom; } #blogs #flyout { border-bottom: 3px solid #f0f0f0; display: none; overflow: hidden; padding: 0 16px 16px; } #blogs #flyout .title { margin-bottom: 8px; } #blogs #flyout .column-left { float: left; margin: 16px 0 0; width: 299px; } #blogs #flyout .column-two { border-left: 1px solid #ccc; margin: 16px 0 0; padding-left: 16px; overflow: hidden; } /* Featured Post */ #blogs #flyout .featured-post { border: 0; margin-bottom: 32px; padding: 0 16px 0 0; } #blogs #flyout .featured-post h3, #blogs #flyout .featured-post .description { border-left: 0; margin-left: 0; padding-left: 0; } #blogs #flyout .featured-post h3 { font-size:11pt; line-height:16pt; } #blogs #flyout .featured-post h3 a { color: #037; } #blogs #flyout .featured-post .blog-tag { display: none; } #blogs #flyout .featured-post .description { font-size: 8pt; line-height: 14pt; } /* Blogs List */ #blogs #flyout .box.blogs-feature { border-bottom: 1px solid #e8e8e8; margin-bottom: 10px; padding-bottom: 10px; } #blogs #flyout .box.blogs-feature.last { border: 0; margin-bottom: 0; padding-bottom: 0; } #blogs #flyout .box.blogs-feature h4 { display: none; } #blogs #flyout .box.blogs-feature .box-body h5, #blogs #flyout .box.blogs-feature .box-body p { font-size: 10pt; line-height: 14pt; margin: 0; padding: 0; } #blogs #flyout .box.blogs-feature .box-body h5 a { text-decoration: none; } #blogs #flyout .box.blogs-feature .box-body h5 a:hover { text-decoration: underline; } #blogs #flyout .box.blogs-feature .box-body p { color: #666; font-size: 8pt; } /* 3 Welcome Message / Single Blog Header --------------------------------------------------------------------------------------- */ #blogs .welcome { background: gray; border-bottom: 1px solid black; color: white; height: 46px; margin-bottom: 16px; overflow: hidden; padding: 12px; } #blogs .welcome h2 { float: left; margin-bottom: 0; overflow: hidden; width: 300px; } #blogs .welcome h2 a { background-position: left top; background-repeat: no-repeat; display: block; height: 46px; text-indent: -999em; width: 138px; } #blogs .welcome p { display: none; } #blogs .welcome-more { background: gray; border-bottom: 1px solid black; color: white; height: 46px; margin-bottom: 16px; overflow: hidden; padding: 12px; } #blogs .welcome-more a.rss { color: white; margin-top: 28px; text-align: right; } /* 3.1 Welcome Message: Home/Landing Page ------------------------------------------------------------------------------------- */ #blogs .welcome.home p { display: block; float: left; margin-left: 16px; margin-bottom: 0; width: 436px; } #blogs .welcome.home p a { color: white; } #blogs .welcome.home p a.read-more { background-image: url(/i/read-more-white.png); } #blog-home .welcome { background: #69c; } #blog-home .welcome h2 { border-right: 1px solid white; width: 138px; } #blog-home .welcome h2 a { background-image: url(/i/blog_home_title.png); } #blog-home .welcome-more { background: #f5f5f5; } /* - Quotes (mostly for landing page) - */ #blogs .welcome-quote { background: #f5f5f5; height: 70px; padding: 0; width: 300px; } #blogs .welcome-quote p { background-position: center center; background-repeat: no-repeat; height: 70px; margin-bottom: 0; text-indent: -999em; width: 300px; } #blogs .welcome-quote p.jefferson-one { background-image: url(/i/quote-jefferson-one.png); } /* 4 Content Channels/Types --------------------------------------------------------------------------------------- */ #blogs .box, #blogs .box h4, #blogs .box h4 span, #blogs .box .box-body { background: transparent; border: 0; padding: 0; } #blogs .box { border-top: 1px solid #ccc; border-bottom: 3px solid #666; clear: none; } #blogs .box h4 { background-color: #f5f5f5; border-bottom: 1px dashed #ccc; margin-bottom: 12px; padding: 6px 0 0 12px; } #blogs .column-right .box { font-size: 11px; line-height: 18px; } #blogs .column-right .box .box-body { padding: 0 12px; } .box.generic li:last-child, .box.generic li.last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } /* 4.1 Featured Post ------------------------------------------------------------------------------------- */ .featured-post { border: 12px solid #f5f5f5; padding: 12px; margin-bottom: 32px; } .featured-post .featured-post-title { background: transparent url(/i/featured-post-title.png) no-repeat left top; float: left; height: 27px; margin: 0; text-indent: -999em; width: 100px; } .featured-post h3, .featured-post .description { border-left: 1px solid #ccc; margin-bottom: 0; margin-left: 126px; padding-bottom: 4px; padding-left: 16px; } .featured-post h3 { font-size: 13pt; } .featured-post h3 a { font-family: Trebuchet MS, Verdana, Sans-Serif; color: black; } .featured-post p { color: #333; display: inline; line-height: 20px; } .featured-post a.read-more { font-weight: bold; text-decoration: none; } /* 4.2 Blog Snapshot (used on the main landing page) ------------------------------------------------------------------------------------- */ #blogs .box.blogs-feature { border: 0; float: left; margin-right: 16px; width: 300px; } #blogs .box.blogs-feature.even { margin-right: 0; } #blogs .box.blogs-feature h4 { background: transparent url(/i/px_ccc.png) repeat-x left center; border: 0; height: 20px; padding: 0; text-indent: -999em; } #blogs .box.blogs-feature h4 span { background: white url(/i/blogs/blog_default_icon.png) no-repeat center center; margin: -17px auto 0 auto; width: 28px; } #blogs .box.blogs-feature .box-body h5 { font-family: Trebuchet MS, Verdana, Sans-Serif; font-size: 12pt; margin-left: 100px; } #blogs .box.blogs-feature .box-body h5 a { text-decoration: underline; } #blogs .box.blogs-feature p { color: #333; line-height: 20px; margin-left: 100px; } #blogs .box.blogs-feature li.list { clear: both; } #blogs .box.blogs-feature li ul { border-top: 1px dashed #ccc; font-size: 11px; line-height: 18px; padding-top: 12px; } #blogs .box.blogs-feature li ul li { background: transparent url(/i/arrow_gray.png) no-repeat left 6px; border-bottom: 1px solid #e8e8e8; margin-bottom: 10px; padding: 0 0 10px 16px; } #blogs .box.blogs-feature li ul li:last-child, #blogs .box.blogs-feature li ul li.last-child { border: 0; margin-bottom: 0; padding-bottom: 0; } /* Archived */ #blogs #archived-blogs { background-color:#F5F5F5; clear: both; border-top: 1px solid #ccc; overflow: hidden; padding: 16px 0 16px 16px; } #blogs #archived-blogs h3 { color: #333; margin-bottom: 6px; } #blogs #archived-blogs li { float: left; margin-right: 16px; width: 184px; } #blogs #archived-blogs li h5, #blogs #archived-blogs li h5 a { color: #666; font-family: Trebuchet MS,Verdana,Sans-Serif; font-size: 11pt; margin-bottom: 4px; } #blogs #archived-blogs li h5 a { text-decoration: underline; } #blogs #archived-blogs li p { color: #333; font-size: 8pt; line-height: 20px; } /* 4.3 General List of Blog Posts (numberic) ------------------------------------------------------------------------------------- */ #blogs .box.blogs-post-list .box-body { padding: 0; } #blogs .box.blogs-post-list ul li { border-bottom: 1px solid #e8e8e8; color: #666; list-style-position: inside; list-style-type: decimal; margin-bottom: 10px; margin-left: 0; padding: 0 0 10px 32px; text-indent: -20px; } #blogs .box.blogs-post-list ul li a strong { color: #666; } #blogs .box.blogs-post-list ul li a:hover strong { color: #900; } #blogs .box.blogs-post-list ul li:last-child, #blogs .box.blogs-post-list ul li.last-child { border: 0; padding-bottom: 2px; } /* - Non-Numeric Post List */ #blogs .box.blogs-post-list.non-numeric .box-body ul li { background: transparent url(/i/arrow_gray.png) no-repeat scroll 14px 6px; list-style: none; padding-left: 30px; text-indent: 0; } #blogs .box.blogs-post-list.non-numeric .box-body li a { font-weight: bold; } /* 4.4 Featured Quote ------------------------------------------------------------------------------------- */ #blogs .box.quote h4 { background: transparent; border-bottom-style: solid; margin-bottom: 0; padding-left: 0; text-align: center; } #blogs .box.quote .box-body { background: #f5f5f5 url(/i/blog_quote_bg.png) no-repeat center top; color: #333; padding: 0 12px 12px 12px; } #blogs .box.quote .box-body h5 { font-size: 11pt; line-height: 20px; margin-bottom: 4px; margin-top: 52px; } #blogs .box.quote .box-body p { color: #666; margin-bottom: 0; text-indent: 0; } #blogs .box.quote .box-body p a { color: #666; font-style: italic; } /* 4.5 Tabbed Collection (such as for "most popular posts") ------------------------------------------------------------------------------------- */ #blogs .box.tabbed-collection { margin-right: 0; } #blogs .box.tabbed-collection h4 { margin-bottom: 10px; } #blogs .box .collection-nav, #blogs .box.blogs-post-list .collection-nav { background: none; border-right: 0; margin-bottom: 10px; padding-top: 4px; text-align: left; } #blogs .box .collection-nav li, #blogs .box.blogs-post-list .collection-nav li { background: transparent; border-bottom: 0; display: block; float: left; margin: 0 10px 4px 0; padding: 0 0 4px 0; text-indent: 0; white-space: nowrap; } #blogs .box .collection-nav li:last-child, #blogs .box.blogs-post-list .collection-nav li:last-child { margin-right: 0; padding: 0 0 4px 0; } #blogs .box .collection-nav li a, #blogs .box.blogs-post-list .collection-nav li a { background-color: transparent; background-image: url(/i/buttons/btn_generic_left.png); background-repeat: no-repeat; background-position: left -34px; border: 0; font-size: 8pt; height: auto; letter-spacing: 0; padding: 0 0 0 3px; text-transform: none; } #blogs .box .collection-nav li a span, #blogs .box.blogs-post-list .collection-nav li a span { background-color: transparent; background-image: url(/i/buttons/btn_generic_right.png); background-repeat: repeat-x; background-position: right -34px; display: block; height: 18px; padding: 5px 12px 6px 10px; } #blogs .box .collection-nav li.active, #blogs .box.blogs-post-list .collection-nav li.active { background: transparent url(/i/arrow_down_gray.png) no-repeat center bottom; } #blogs .box .collection-nav li.active a, #blogs .box.blogs-post-list .collection-nav li.active a { background-position: left top; color: white; } #blogs .box .collection-nav li.active a span, #blogs .box.blogs-post-list .collection-nav li.active a span { background-position: right top; } /* - Most Popular Posts - */ #blogs .column-right .box.popular-posts .box-body { padding: 0; } /* 4.6 Classification (categories/tags) ------------------------------------------------------------------------------------- */ #blogs .column-right .categories .box-body { padding: 0; } #blogs .box .categories ul { margin-bottom: 12px; } #blogs .box .categories ul li { border: 0; margin-bottom: 6px; padding-bottom: 0; } #blogs .box .categories ul li.cat1 a { font-size: 13.5pt; font-weight: bold; } #blogs .box .categories ul li.cat2 a { font-size: 13pt; font-weight: bold; } #blogs .box .categories ul li.cat3 a { font-size: 12pt; font-weight: bold; } #blogs .box .categories ul li.cat4 a { font-size: 11pt; font-weight: bold; } #blogs .box .categories ul li.cat5 a { font-size: 10pt; font-weight: bold; } #blogs .box .categories ul li.cat6 a { font-weight: bold; } #blogs .box .collection-nav li.Categories a span, #blogs .box .collection-nav li.Tags a span { padding: 5px 45px 6px 45px; } #blogs .box .tags { margin-bottom: 14px; } #blogs .box .tags a.tags-style-1 { font-size: 8pt; color: #5579a7; font-weight: 300; } #blogs .box .tags a.tags-style-2 { font-size: 10pt; color: #3e669b; font-weight: 450; } #blogs .box .tags a.tags-style-3 { font-size: 12pt; color: #26528c; font-weight: 600; } #blogs .box .tags a.tags-style-4 { font-size: 14pt; color: #0f3f80; font-weight: 750; } #blogs .box .tags a.tags-style-5 { font-size: 16pt; color: #003366; font-weight: 900; } /* 4.7 Calendar ------------------------------------------------------------------------------------- */ #blogs .column-right .box.blogs-calendar .box-body { padding: 0; } #blogs .box.blogs-calendar .collection-nav a { color: #037; font-size: 7.5pt; font-weight: bold; } #blogs .box.blogs-calendar .collection-nav li.active a { color: black; font-size: 8.5pt; padding: 6px 16px; } #blogs .box.blogs-calendar .collection-nav li.active a:hover { text-decoration: none; } #blogs .box.blogs-calendar .collection-nav a.forward { background: transparent url(/i/arrow_right_small_blue.png) no-repeat right center; padding-right: 12px; } #blogs .box.blogs-calendar .collection-nav a.back { background: transparent url(/i/arrow_left_small_blue.png) no-repeat left center; padding-left: 12px; } #blogs .box.blogs-calendar table { margin-bottom: 12px; width: 300px; } #blogs .box.blogs-calendar td { border-bottom: 1px solid #e8e8e8; color: #666; margin: 2px; padding: 5px 4px 4px 4px; text-align: center; } #blogs .box.blogs-calendar td a, #blogs .box.blogs-calendar td span { padding: 4px 10px; } #blogs .box.blogs-calendar td a { background: #037; color: white; } #blogs .box.blogs-calendar td a:hover { background: black; text-decoration: none; } #blogs .box.blogs-calendar tr:last-child td, #blogs .box.blogs-calendar tr.last-child td { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } /* 4.8 Author List ------------------------------------------------------------------------------------- */ #blogs .box.blogs-author-list .author-photo { float: left; height: 60px; margin: 4px 10px 6px 0; width: 60px; } /* 5 Single Blog View --------------------------------------------------------------------------------------- */ .entry p a, .entry ul a { text-decoration: underline; } .entry blockquote, .post-content blockquote { background: transparent url(/i/bg_quote_top.png) no-repeat left top; padding: 17px 0 0 42px; } .entry blockquote p:last-child, .post-content blockquote p:last-child { background: transparent url(/i/bg_quote_bottom.png) no-repeat right bottom; margin-bottom: 16px; padding: 0 0 16px 0; } .entry blockquote cite, .post-content blockquote cite { color: gray; display: block; font-weight: bold; } .entry .media, .post-content .media, .entry object, .post-content object { margin-bottom: 16px; } .post-navigation { border-top: 1px solid #ccc; clear: both; margin-top: 16px; overflow: visible; padding-top: 16px; } .post-navigation .previous, .post-navigation .next { font-weight: bold; width: 288px; font-size: 8pt; line-height: 16px; } .post-navigation a { color: #999; display: block; height: 30px; overflow: hidden; } .post-navigation a:hover { color: #037; text-decoration: none; } .post-navigation .previous { float: left; padding-right: 12px; } .post-navigation .previous a { background: transparent url(/i/arrow_block_left.png) no-repeat left 3px; padding-left: 37px; } .post-navigation .previous a:hover { background-position: left -50px; } .post-navigation .next { float: right; padding-left: 12px; text-align: right; } .post-navigation .next a { background: transparent url(/i/arrow_block_right.png) no-repeat right 3px; padding-right: 37px; } .post-navigation .next a:hover { background-position: right -50px; } /* Small, for Pages */ .post-navigation-small { border-top: 0; font-size: 8pt; line-height: 16px; padding-top: 0; } .post-navigation-small a { background: transparent; color: gray; font-weight: bold; height: 17px; padding: 0; } .post-navigation-small a:hover { color: #036; text-decoration: none; } .post-navigation-small a span { cursor: pointer; display: block; font-size: 9pt; height: 17px; } .post-navigation-small .previous a span { background: transparent url(/i/arrow_block_left_sm.png) no-repeat left top; float: left; padding-left: 26px; } .post-navigation-small .previous a:hover span { background-position: left -34px; } .post-navigation-small .next a span { background: transparent url(/i/arrow_block_right_sm.png) no-repeat right top; float: right; padding-right: 26px; } .post-navigation-small .next a:hover span { background-position: right -34px; } /* 5.1 About This Blog (sub-header) ------------------------------------------------------------------------------------- */ #blog-about { border-bottom: 12px solid #f5f5f5; font-size: 8pt; margin-bottom: 16px; padding: 0 12px 12px 12px; } #blog-about p.about { background: transparent url(/i/title_about.png) no-repeat left top; float: left; height: 27px; margin: 0; text-indent: -999em; width: 100px; } #blog-about .description { border-left: 1px solid #ccc; line-height: 18px; margin-bottom: 0; margin-left: 138px; padding-bottom: 4px; padding-left: 16px; } #blog-about p { color: #333; line-height: 20px; } /* 5.2 List of Blog Posts ------------------------------------------------------------------------------------- */ #blogs #post-list { line-height: 15pt; } #blogs #post-list .post-single h4 { color: black; font-family: Trebuchet MS, Verdana, Sans-Serif; font-size: 12pt; font-weight: bold; letter-spacing: normal; margin-bottom: 16px; text-transform: none; } #blogs .post-single .post-content ul, #blogs .post-single .post-content ol { margin-bottom: 16px; } #blogs .post-single .post-content ul li, #blogs .post-single .post-content ol li { list-style-type: disc; margin-left: 30px; } #blogs .post-single .post-content ol li { list-style-type: decimal; } #blogs .post-content a { text-decoration: underline; } #blogs .post-content a:hover { text-decoration: none; } /* - Image Formatting - */ #blogs .post-content .image { background: #f5f5f5; border: 8px solid #f5f5f5; border-bottom: 0; float: none; padding: 0; margin-bottom: 0; } #blogs .post-content .image img { margin: 0; padding: 0; } #blogs .post-content .image caption { background: #f5f5f5; border: 8px solid #f5f5f5; border-top-width: 4px; font-size: 8pt; margin-bottom: 12px; text-align: left; } #blogs .post-content .image caption p { line-height: 14pt; margin-bottom: 0; } #blogs .post-content .image cite { color: #666; display: block; font-size: 7pt; text-align: right; } #blogs .post-content .image.left { float: left; } #blogs .post-content .image.right { float: right; } /* - Breakouts ("Guest Blogger", "Podcasts", etc) - */ #blogs #post-list .post-single .breakout { border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; font-family: Arial, Sans-Serif; margin-bottom: 16px; padding-top: 12px; } #blogs #post-list .post-single .breakout .breakout-display { overflow: hidden; padding-bottom: 12px; } #blogs #post-list .post-single .breakout .type { color: #666; float: left; margin-bottom: 0; padding: 4px 16px 0 0; text-align: right; width: 136px; } #blogs #post-list .post-single .breakout .title { border-left: 1px solid #ddd; float: left; padding: 4px 0 6px 16px; width: 340px; } #blogs #post-list .post-single .breakout .title h4 { margin-bottom: 0; } #blogs #post-list .post-single .breakout .title p { color: #666; margin-bottom: 0; } #blogs #post-list .post-single .breakout a.expand { background: #69c url(/i/arrow_down_white.png) no-repeat 74px 11px; color: white; float: right; font-weight: bold; margin-right: 12px; text-decoration: none; padding: 3px 22px 3px 7px; -moz-border-radius: 2px; -webkit-border-radius: 2px; } #blogs #post-list .post-single .breakout a.expand.active { background-image: url(/i/arrow_up_white.png); } #blogs #post-list .post-single .breakout div.expand { background: #f5f5f5; border-top: 1px solid #ddd; clear: both; display: none; padding: 0 12px 12px; } #blogs #post-list .post-single .breakout div.expand img { border: 0; float: left; margin-left: 48px; margin-top: 12px; padding: 0; } #blogs #post-list .post-single .breakout div.expand .biography { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; margin-left: 154px; margin-top: 10px; } /* - Post Functions ("read more", "add your own comment", etc) - */ #blogs #post-list .post-single .post-functions { border-top: 1px solid #e5e5e5; clear: both; color: #666; font-weight: bold; overflow: hidden; } #blogs #post-list .post-single .post-functions li { display: inline; padding: 8px 12px; } #blogs #post-list .post-single .post-functions li.continue-reading { float: left; padding-left: 0; } #blogs #post-list .post-single .post-functions li.comment-number, #blogs #post-list .post-single .post-functions li.comment-add-yours { float: right; } #blogs #post-list .post-single .post-functions li.comment-add-yours { padding-left: 0; } #blogs #post-list .post-single .post-functions li.comment-add-yours a { border-left: 1px solid #e5e5e5; color: #037; padding: 4px 12px; } #blogs #post-list .post-single .to-top { margin-bottom: 22px; } /* 5.3 Post Tools (classification, rating, email, social bookmarks) ------------------------------------------------------------------------------------- */ .post-tools { border-bottom: 1px solid #ccc; font-size: 8pt; margin-bottom: 16px; overflow: hidden; } .post-tools a { text-decoration: underline; } .post-tools a:hover { text-decoration: none; } .post-tools ul li { background-position: 2px 5px; background-repeat: no-repeat; padding-left: 24px; } .post-tools ul li p { margin-bottom: 0; } .post-tools ul.classification, .post-tools ul.participate, .post-tools ul.share { border-top: 1px dashed #ccc; float: left; line-height: 20px; margin-right: 16px; padding: 10px 6px 12px 0; width: 188px; } .post-tools ul.share { float: right; margin-right: 0; } .post-tools .classification p.title { font-weight: bold; } .post-tools ul.classification li.categories { background-image: url(/i/icons/category_sm.png); } .post-tools ul.classification li.tags { background-image: url(/i/icons/tag_sm.png); } .post-tools ul.participate li.rating { background-image: url(/i/icons/star_sm.png); } .post-tools ul.participate li.comments { background-image: url(/i/icons/comment_sm.png); } .post-tools ul.share li.email { background-image: url(/i/icons/email_sm.png); } .post-tools ul.share li.social { background-image: url(/i/icons/bookmark_sm.png); } .post-tools ul.participate li.rating { clear: both; overflow: hidden; } .post-tools ul.participate li.comments a { background: transparent url(/i/icons/jump.png) no-repeat right 7px; padding-right: 16px; } /* 5.3.1 Social/Sharing Bubble ----------------------------------------------------------------------------------- */ .social-sites { display: none; } .social-bubble .content .social-sites { display: block; } .social-bubble .content { padding-top: 2px; } .social-sites li a { padding-left: 24px; } .social-sites li.delicious a { background-image: url(http://www.america.gov/articles/images/sb/subdelicious.gif); } .social-sites li.digg a { background-image: url(http://www.america.gov/articles/images/sb/16x16-digg-guy.gif); } .social-sites li.facebook a { background-image: url(http://www.america.gov/articles/images/sb/facebook_share_icon.gif); } .social-sites li.reddit a { background-image: url(http://www.america.gov/articles/images/sb/reddit_blog_head.png); } .social-sites li.stumbleupon a { background-image: url(http://www.america.gov/articles/images/sb/icon_su.gif); } /* 5.3.2 Email Form ----------------------------------------------------------------------------------- */ .bubble.email-form { width: 226px; } .bubble.email-form .close-bubble { margin-left: 210px; } #email-form { font-size: 8pt; padding: 16px; overflow: hidden; } #email-form label { display: block; font-weight: bold; margin-bottom:4px; } #email-form label .small { font-weight: normal; } #email-form input, #email-form textarea, #email-form .form-content { border: 1px solid #ccc; font-size: 8pt; margin-bottom: 12px; padding: 4px; width: 182px; } #email-form .form-content { background-color: #f5f5f5; } #email-form textarea { font-family: Verdana, Arial, Sans-Serif; height: 66px; } #email-form .disabled { background-color: #f0f0f0; color: black; } #email-form .button.submit { background-image: url(/i/buttons/btn_send.png); margin: 0; width: 56px; } /* 5.3.3 Embeds ----------------------------------------------------------------------------------- */ #blogs .post-content .embed .notice { background: #f5f5f5; border-bottom: 1px solid #a8a8a8; font-size: 8pt; margin-top: -3px; padding: 6px 12px; text-align: right; } #blogs .post-content .embed .notice a.offsite { background: transparent url(/i/icons/new_window_sm.png) no-repeat center right; color: #333; padding-right: 20px; text-decoration: none; } /* 5.4 Comments (list and form) ------------------------------------------------------------------------------------- */ /* 5.4.1 Comment List ----------------------------------------------------------------------------------- */ #comment-list h3, #comment-form h3 { border-bottom: 1px solid #ccc; clear: both; font-size: 12pt; margin-bottom: 0; padding: 18px 12px 6px 12px; } #comment-list h3 { background: #f0f0f0 url(/i/bg_comment_list.png) no-repeat right top; margin-bottom: 12px; } #comment-form h3 { background: #f0f0f0 url(/i/bg_comment_form.png) no-repeat 200px top; } #comment-form h3 small { float: right; font-weight: normal; margin-top: -22px; } #comment-list .post-navigation-small { margin-bottom: 14px; overflow: hidden; } ol.commentlist li .comment-item { border: 1px solid #ccc; margin-bottom: 14px; padding-bottom: 14px; } ol.commentlist li .admin { border: 1px solid #c96; } ol.commentlist li .message { margin: 14px 14px 0; } ol.commentlist li .comment-info { background: #f0f0f0; line-height: 14pt; overflow: hidden; padding: 9px 14px 11px; } ol.commentlist li .comment-info p { margin-bottom: 0; } ol.commentlist li .comment-info .comment-author { float: left; font-weight: bold; width: 300px; } ol.commentlist li .comment-info .comment-author cite { font-style: normal; } ol.commentlist li .comment-info .comment-author .extrafield { font-size: 8pt; color: #666; } ol.commentlist li .comment-info .comment-meta { color: #333; float: right; font-size: 8pt; text-align: right; width: 200px; } ol.commentlist li .comment-info .comment-meta .comment-meta-permalink a { background: transparent url(/i/icons/link_sm.png) no-repeat left center; padding-left: 18px; text-decoration: none; } ol.commentlist li .comment-info .comment-meta .comment-meta-permalink a:hover { color: black; } ol.commentlist li .admin .comment-info { background: #fff3db; } ol.commentlist li .comment-text { padding: 14px 14px 0; } ol.commentlist li div.reply { margin-left: 14px; overflow: hidden; } ol.commentlist li div.reply a { background: #999; border: 2px solid #666; border-radius: 3px; color: #fff; display: block; float: left; font: bold 10px/1 helvetica,arial,sans-serif; padding: 5px 10px; text-decoration: none; text-transform: uppercase; -moz-border-radius: 3px; -webkit-border-radius: 3px; } ol.commentlist li div.reply a:hover { background: #c30; border: 2px solid #c00; } ol.commentlist li ul.children li.comment { background: transparent url(/i/comment_arrow.png) no-repeat left top; } ol.commentlist li ul.children li.depth-2 { padding-left: 24px; } ol.commentlist li ul.children li.depth-3 { padding-left: 24px; } ol.commentlist li ul.children li.depth-4 { padding-left: 24px; } ol.commentlist li ul.children li.depth-5 { padding-left: 24px; } ol.commentlist li.comment-preview { border-top: 1px solid #e8e8e8; } ol.commentlist li.comment-preview pre { font-family: Verdana, Arial, Helvetica, sans-serif; margin-bottom: 16px; white-space: -moz-pre-wrap; white-space: pre-wrap; } /* 5.4.2 Comment Form ----------------------------------------------------------------------------------- */ #comment-form form { margin-top: 16px; overflow: hidden; } #comment-form input, #comment-form textarea { background: #f5f5f5; border: 1px solid #ccc; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; padding: 4px; width: 290px; } #comment-form textarea { height: 234px; } #comment-form p.disclaimer { border-top: 1px solid #e5e5e5; color: #999; font-size: 8pt; font-style: italic; margin-top: 8px; padding-top: 16px; } #comment-form p.disclaimer a { color: #999; } #comment-form label { display: block; font-weight: bold; margin-bottom: 3px; } #comment-form label .required { color: #900; font-size: 7.5pt; } #comment-form .submit { clear: both; margin-bottom: 0; margin-right: 0; } #comment-form .btn-submit { background-image: url(/i/buttons/btn_submitcomment.png); border: 0; color: white; cursor: pointer; font-size: 0; height: 35px; line-height: 1px; margin: 0 8px 0 0; padding: 0; width: 129px; } #comment-form .preview { color: #999; display: block; padding-top: 5px; } #comment-form .column-middle { margin-right: 0; } /* 6 Unique Pages --------------------------------------------------------------------------------------- */ /* 6.1 Author Page ------------------------------------------------------------------------------------- */ #blogs .author-about { background: #fff url(/i/bg_author_top.png) no-repeat left 55px; padding: 0 12px; } #blogs .author-about .author-bio { border: 0; } #blogs .author-about .author-bio .image { border: 0; margin: -10px 9px 9px; padding: 0; } #blogs .author-about h3 { margin-bottom: 0; } #blogs .author-about a.rss { float: right; margin-top: -23px; } #blogs .author-about .small { color: #666; display: block; margin-bottom: 10px; } #blogs .author-about .author-bio .author-description { margin: 20px 0 0 125px; } /* 6.2 Archive Page(s) ------------------------------------------------------------------------------------- */ #blogs .archive-header { margin-bottom: 16px; } #blogs .archive-header h3 { margin-bottom: 4px; padding: 0 12px; } #blogs .archive-header p { color: #666; display: block; font-size: 8pt; line-height: 18px; margin-bottom: 12px; } #blogs .archive-header { background: transparent url(/i/bg_archive_header.png) no-repeat bottom center; margin-bottom: 16px; padding: 2px 0 26px; text-align: center; } #blogs .archive-header h4 { background: transparent url(/i/bg_archive_header_top.png) no-repeat top center; color: #666; font-family: "Trebuchet MS", Helvetica, Arial, sans-serif; font-size: 12pt; font-style: italic; font-weight: bold; letter-spacing: 0; padding: 38px 0 8px; text-transform: none; } /* 6.3 Archived Blog Header ------------------------------------------------------------------------------------- */ #archived-blog { color: white; background: #c30 url(/i/icons/alert_lg.png) no-repeat 16px center; border: 16px solid white; border-bottom: 0; padding: 16px 16px 16px 66px; margin: 0 auto; width: 850px; } #archived-blog h2 { margin-bottom: 2px; } #archived-blog p { margin-bottom: 0; } /* 7 Custom Blog Designs --------------------------------------------------------------------------------------- */ /* - Obama Today - */ #blog-obama .welcome { background: #01547c url(/i/blogs/blog_obama_bg.jpg) no-repeat right top; overflow: visible; } #blog-obama .welcome h2 a { background-image: url(/i/blogs/blog_obama_title.png); margin-left: 3px; margin-top: 5px; width: 240px; } #blog-obama .welcome .breakout { background: transparent url(/i/blogs/blog_obama_breakout.png) no-repeat right top; display: block; float: right; height: 85px; margin-top: -27px; margin-right: -12px; width: 76px; } #blog-obama .welcome-more { background: #5483a3 url(/i/blogs/blog_obama_more_bg.jpg) no-repeat left top; } #blogs .box.blogs-feature.obama h4 span { background-image: url(/i/blogs/blog_obama_icon.png); } #blogs .blog-tag.tag-obama { background-image: url(/i/blogs/blog_obama_tag.png); width: 89px; } /* - Democracy Roundtable - */ #blog-democracy .welcome { background: #6999ca url(/i/blogs/blog_democracy_bg.jpg) no-repeat right top; } #blog-democracy .welcome h2 a { background-image: url(/i/blogs/blog_democracy_title.png); width: 148px; } #blog-democracy .welcome-more { background: #6999ca; } #blogs .box.blogs-feature.democracy h4 span { background-image: url(/i/blogs/blog_democracy_icon.png); } #blogs .blog-tag.tag-democracy { background-image: url(/i/blogs/blog_democracy_tag.png); width: 140px; } /* - Free Press - */ #blog-freepress .welcome { background: #dad6cd url(/i/blogs/blog_freepress_bg.jpg) no-repeat right top; } #blog-freepress .welcome h2 a { background-image: url(/i/blogs/blog_freepress_title.png); width: 148px; } #blog-freepress .welcome-more { background: #dad6cd; } #blogs .box.blogs-feature.freepress h4 span { background-image: url(/i/blogs/blog_freepress_icon.png); } #blogs .blog-tag.tag-freepress { background-image: url(/i/blogs/blog_freepress_tag.png); width: 138px; } #blog-freepress .welcome-more a.rss { color: #039; } /* - Rumors, Myths, and Fabrications - */ #blog-rumors .welcome { background: #7d3100 url(/i/blogs/blog_rumors_bg.jpg) no-repeat right top; } #blog-rumors .welcome h2 a { background-image: url(/i/blogs/blog_rumors_title.png); width: 221px; } #blog-rumors .welcome-more { background: #7d3100; } #blogs .box.blogs-feature.rumors h4 span { background-image: url(/i/blogs/blog_rumors_icon.png); } #blogs .blog-tag.tag-rumors { background-image: url(/i/blogs/blog_rumors_tag.png); width: 54px; } /* - Talking Faith - */ #blog-religion .welcome { background: #87b1d0 url(/i/blogs/blog_religion_bg.jpg) no-repeat right top; } #blog-religion .welcome h2 a { background-image: url(/i/blogs/blog_religion_title.png); width: 221px; margin-top: 7px; } #blog-religion .welcome-more { background: #87b1d0; } #blogs .box.blogs-feature.religion h4 span { background-image: url(/i/blogs/blog_religion_icon.png); } #blogs .blog-tag.tag-religion { background-image: url(/i/blogs/blog_religion_tag.png); width: 84px; } /* - Science - */ #blog-science .welcome { background: #21b703 url(/i/blogs/blog_science_bg.png) no-repeat right top; } #blog-science .welcome h2 a { background-image: url(/i/blogs/blog_science_title.png); width: 250px; margin-top: 2px; } #blog-science .welcome-more { background: #21b703; } #blogs .box.blogs-feature.science h4 span { background-image: url(/i/blogs/blog_science_icon.png); } #blogs .blog-tag.tag-science { background-image: url(/i/blogs/blog_science_tag.png); width: 88px; } /* - Russian - */ #blog-ru .welcome { background: #fff url(/i/blogs/blog_ru_bg.png) no-repeat right top; } #blog-ru .welcome h2 { width: 600px; } #blog-ru .welcome h2 a { background-image: url(/i/blogs/blog_ru_title.png); width: 600px; margin-top: 2px; } #blog-ru .welcome-more { background: #fff; } #blog-ru .welcome-more a.rss { color: gray; } #blogs .box.blogs-feature.ru h4 span { background-image: url(/i/blogs/blog_ru_icon.png); } #blogs .blog-tag.tag-ru { background-image: url(/i/blogs/blog_ru_tag.png); width: 88px; } /* - By the People - */ #blog-bythepeople .welcome { background: #fc6 url(/i/blogs/blog_bythepeople_bg.jpg) no-repeat right top; } #blog-bythepeople .welcome h2 a { background-image: url(/i/blogs/blog_bythepeople_title.png); width: 250px; margin: 5px 0 0 6px; } #blog-bythepeople .welcome-more { background: #fc6 url(/i/blogs/blog_bythepeople_more_bg.jpg) no-repeat left top; } #blog-bythepeople .welcome-more a.rss { color: #000; } #blogs .box.blogs-feature.bythepeople h4 span { background-image: url(/i/blogs/blog_bythepeople_icon.png); } #blogs .blog-tag.tag-bythepeople { background-image: url(/i/blogs/blog_bythepeople_tag.png); width: 88px; } /* - New Enterprise - */ #blog-ip .welcome { background: #49707F url(/i/blogs/blog_ip_bg.png) no-repeat right top; } #blog-ip .welcome h2 a { background-image: url(/i/blogs/blog_ip_title.jpg); width: 250px; margin-top: 2px; } #blog-ip .welcome-more { background: #49707F; } #blogs .box.blogs-feature.ip h4 span { background-image: url(/i/blogs/blog_ip_icon.png); } #blogs .blog-tag.tag-ip { background-image: url(/i/blogs/blog_ip_tag.png); width: 88px; } /* - Adaptation - */ #blog-climate .welcome { background: #06B741 url(/i/blogs/blog_climate_bg.png) no-repeat right top; } #blog-climate .welcome h2 a { background-image: url(/i/blogs/blog_climate_title.jpg); width: 250px; margin-top: 2px; } #blog-climate .welcome-more { background: #06B741; } #blogs .box.blogs-feature.climate h4 span { background-image: url(/i/blogs/blog_climate_icon.png); } #blogs .blog-tag.tag-climate { background-image: url(/i/blogs/blog_climate_tag.png); width: 88px; } /* - Notable Americans - */ #blog-americans .welcome { background: #262957 url(/i/blogs/blog_americans_bg.jpg) no-repeat right top; } #blog-americans .welcome h2 a { background-image: url(/i/blogs/blog_americans_title.jpg); width: 250px; margin-top: 2px; } #blog-americans .welcome-more { background: #262957; } #blogs .box.blogs-feature.americans h4 span { background-image: url(/i/blogs/blog_americans_icon.png); } #blogs .blog-tag.tag-americans { background-image: url(/i/blogs/blog_americans_tag.png); width: 88px; } /* - Chinese - */ #blog-mgck .welcome { background: #fff url(/i/blogs/blog_mgck_bg.png) no-repeat right top; } #blog-mgck .welcome h2 { width: 600px; } #blog-mgck .welcome h2 a { background-image: url(/i/blogs/blog_mgck_title.png); width: 600px; margin-top: 2px; } #blog-mgck .welcome-more { background: #fff; } #blog-mgck .welcome-more a.rss { color: gray; } #blogs .box.blogs-feature.mgck h4 span { background-image: url(/i/blogs/blog_mgck_icon.png); } #blogs .blog-tag.tag-mgck { background-image: url(/i/blogs/blog_mgck_tag.png); width: 88px; }