/* Theme Name: World Pneumonia Day Theme URI: http://worldpneumoniaday.org/ Description: The theme for worldpneumoniaday.org. Version: 2 Author: Pete Saia */ /* Site Name Author ----------------- Font Size Chart ----------------- (Px) (%) 10 77 11 85 12 93 13 100 14 108 15 116 16 123.1 17 131 18 138.5 19 146.5 20 153.9 21 161.6 22 167 23 174 24 182 25 189 26 197 ---------------- Color Scheme ---------------- #XXXXXX | Dark Blue | Links #XXXXXX | Dark Blue | Links */ /* ----------------------------- - Document Config - */ ::-moz-selection{ background: #000; color:#fff; text-shadow: none; } ::selection { background:#000; color:#fff; text-shadow: none; } .ie7 img { -ms-interpolation-mode: bicubic; } html { -webkit-font-smoothing: antialiased; overflow-y:scroll; } /* ----------------------------- - Element Reset - */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } article, aside, figure, footer, header, hgroup, nav, section { display:block; } blockquote, q { quotes:none; padding: 5px 25px; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; } table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; } button { width: auto; overflow: visible; } /* ----------------------------- - Global Typography - */ body { font:13px sans-serif; *font-size:small; *font:x-small; line-height:1.22; } table { font-size:inherit; font:100%; } a:hover, a:active { outline: none; } ul { list-style-type:disc; } ol { list-style-type:decimal; } ul, ol { list-style-position:inside; margin: 15px 0px 15px 25px; } td, td img { vertical-align:top; } sub { vertical-align: sub; font-size: smaller; } sup { vertical-align: super; font-size: smaller; } pre { padding: 15px; white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; } h1,h2,h3,h4,h5,h6 { font-weight: bold; text-rendering: optimizeLegibility; } small { font-size:85%; } strong, th { font-weight: bold; } pre, code, kbd, samp { font-family: monospace, sans-serif; } /* ----------------------------- - Forms Reset - */ input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; } label, input[type=button], input[type=submit], button { cursor: pointer; } select, input, textarea { font:99% sans-serif; } body, select, input, textarea { color:#444; } /* ----------------------------- - Utilities - */ .ir { display:block; text-indent:-999em; overflow:hidden; background-repeat: no-repeat; } .hidden { display:none; visibility:hidden; } .visuallyhidden { position:absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); } .invisible { visibility: hidden; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } .clearfix { display: block; } .clear { clear:both; display:block; } .center { display:block; clear:both; margin:auto; text-align:center; } .center.relative { position: relative; } .float_left { float:left; } .float_right { float:right; } .alignleft { float:left; margin:0 10px 10px 0; } /*inserted image*/ .alignright { float:right; margin:0 0 10px 10px; } /*inserted image*/ /* ----------------------------- - Grid - */ .yui3-g { letter-spacing: -0.31em; *letter-spacing: normal; word-spacing: -0.43em; } .yui3-u, .yui3-u-1, .yui3-u-1-2, .yui3-u-1-3, .yui3-u-2-3, .yui3-u-1-4, .yui3-u-3-4, .yui3-u-1-5, .yui3-u-2-5, .yui3-u-3-5, .yui3-u-4-5, .yui3-u-1-6, .yui3-u-5-6, .yui3-u-1-8, .yui3-u-3-8, .yui3-u-5-8, .yui3-u-7-8, .yui3-u-1-12, .yui3-u-5-12, .yui3-u-7-12, .yui3-u-11-12, .yui3-u-1-24, .yui3-u-5-24, .yui3-u-7-24, .yui3-u-11-24, .yui3-u-13-24, .yui3-u-17-24, .yui3-u-19-24, .yui3-u-23-24 { display: inline-block; zoom: 1; *display: inline; letter-spacing: normal; word-spacing: normal; vertical-align: top; } .yui3-u-1 { display:block; } .yui3-u-1-2 { width:50%; } .yui3-u-1-3 { width:33.33333%; } .yui3-u-2-3 { width:66.66666%; } .yui3-u-1-4 { width:25%; } .yui3-u-3-4 { width:75%; } .yui3-u-1-5 { width:20%; } .yui3-u-2-5 { width:40%; } .yui3-u-3-5 { width:60%; } .yui3-u-4-5 { width:80%; } .yui3-u-1-6 { width:16.656%; } .yui3-u-5-6 { width:83.33%; } .yui3-u-1-8 { width:12.5%; } .yui3-u-3-8 { width:37.5%; } .yui3-u-5-8 { width:62.5%; } .yui3-u-7-8 { width:87.5%; } .yui3-u-1-12 { width:8.3333%; } .yui3-u-5-12 { width:41.6666%; } .yui3-u-7-12 { width:58.3333%; } .yui3-u-11-12 { width:91.6666%; } .yui3-u-1-24 { width:4.1666%; } .yui3-u-5-24 { width:20.8333%; } .yui3-u-7-24 { width:29.1666%; } .yui3-u-11-24 { width:45.8333%; } .yui3-u-13-24 { width:54.1666%; } .yui3-u-17-24 { width:70.8333%; } .yui3-u-19-24 { width:79.1666%; } .yui3-u-23-24 { width:95.8333%; } /* ----------------------------- - Theme Typography - */ a { color:#e47d21; } .h1 { padding:10px; margin:0 0 10px; font-size:123.1%; background:url(assets/images/header-grad.png) repeat-x; color:#FFF; border-radius: 10px 10px 0px 0px; -moz-border-radius: 10px 10px 0px 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; text-shadow:0px 0px 2px #333333; -moz-text-shadow:0px 0px 2px #333333; -webkit-text-shadow:0px 0px 2px #333333; } .h2 { padding:5px 0; border-bottom:1px solid #41ace2; color:#41ace2; font-size:123.1%; margin:0 0 10px; } .h3 { padding:5px 0; color:#333; font-size:123.1%; border-bottom:1px solid #0079ac; margin:10px 0; } .droplink { clear:both; display:block; margin:5px 0 0; } .post-edit-link { clear:both; display:block; margin:10px 0 0; letter-spacing:1px; word-spacing:1px; } p { margin: 15px 0px; } .errors { margin:15px 0; color:red; font-weight:bold; } /* ----------------------------- - Content - */ body { background:url(assets/images/bg.gif) repeat; } #wpd { width:990px; margin:auto; background:#FFF; box-shadow:0px 0px 8px #111; -webkit-box-shadow:0px 0px 8px #111; -moz-box-shadow:0px 0px 8px #111; } .no-padding { } .basic-padding { padding:15px; } .block { clear:both; margin:0 0 15px; } .widget-container { clear:both; margin:0 0 25px; } .arrow-list { list-style:none; } .arrow-list a { font-weight:bold; text-decoration:none; } .arrow-list a::before { content: 'ยป '; } #header { position:relative; border-bottom:3px solid #0079ac; width: 100%; display: block; } #header .logo { float:left; margin:0 0 0 20px; padding:15px 0; } #header .search-area { float:right; width:204px; height:41px; background:url(assets/images/search-bg.gif); } #header .search-area fieldset { background:#FFF; margin:8px 8px 0; } #header .search-area .txt { width:145px; border:0; padding:2px; outline:none; } #header .navigation { position:absolute; right:20px; bottom:-3px; } #header .navigation ul { list-style:none; } #header .navigation li { float:left; width:132px; height:39px; margin:0 2px; text-align:center; } #header .navigation li a { display:block; font-size:123.1%; color:#FFF; font-weight:bold; text-decoration:none; padding:10px 0 0; width:132px; height:29px; background:url(assets/images/tab.gif) top left; } #header .navigation li.current_page_item a, #header .navigation li.current_page_parent a { background:url(assets/images/tab.gif) bottom left; } #subnav { width:182px; background:url(assets/images/sidebar-bg.png) bottom right; margin:0 0 20px; } #subnav ul { list-style:none; padding:10px 0 40px; } #subnav li { text-align:left; display:inline; } #subnav li a { display:block; margin:0 0 0 20px; padding:10px 3px; border-bottom:1px solid #3380a0; color:#FFF; text-decoration:none; } #subnav li.active a { background:url(assets/images/nav-active-arrow.gif) left center no-repeat; padding-left:20px; } #footer { margin:20px 0 0; } #footer .footer_logo { float:right; margin:0 8px 5px 0; } #footer .footer-content { padding:10px 20px; border-top:1px solid #cbcbcb; color:#999; clear:both; width: 950px; } #footer ul { list-style:none; } #footer li { display:inline; } #footer a { color:#41ace2; text-decoration:none; } #footer a:hover { color:#333; } .grad-box { position:relative; border:1px solid #d3d3d3; background:url(assets/images/sidebox-grad.gif) repeat-x top; } .grad-box .corner { position:absolute; bottom:-1px; right:-1px; width:16px; height:16px; background:url(assets/images/sidebox-corner.gif); } .grad-box .grad-box-padding { padding:10px; } .number-box { } .number-box .yui3-g { margin:0 0 10px; } .number-box .num { font-size:200%; color:#ee8622; font-weight:bold; text-align:center; } .number-box .copy { font-size:93%; } .number-box a { text-decoration: none; font-weight: bold; } /*Learn Page*/ #learn-stories .story-padding { padding:10px; } #learn-about .about-padding { padding:10px; } /*act page*/ .act-icons { padding:30px 0 30px 155px; } .act-icons a { margin:0 10px; float:left; position:relative; text-align:center; display:block; width:93px; height:93px; color:#b7b7b7; text-decoration:none; font-weight:bold; } .act-icons .icon_1 { background:url(assets/images/act/1.png) 0% 2px no-repeat; } .act-icons .icon_2 { background:url(assets/images/act/2.png) 0% 2px no-repeat; } .act-icons .icon_3 { background:url(assets/images/act/3.png) 0% 2px no-repeat; } .act-icons .icon_4 { background:url(assets/images/act/4.png) 0% 2px no-repeat; } .act-icons .icon_5 { background:url(assets/images/act/5.png) 0% 2px no-repeat; } .act-icons .icon_6 { background:url(assets/images/act/6.png) 0% 2px no-repeat; } .act-icons .icon_7 { background:url(assets/images/act/7.png) 0% 2px no-repeat; } .act-icons .icon_8 { background:url(assets/images/act/8.png) 0% 2px no-repeat; } .act-icons span { position:absolute; left:0; bottom:-20px; display:block; width:93px; white-space:nowrap; } .act-icons a.active { color:#e58325; background-position:0% -92px; } .act-bubble { padding:20px 50px 50px; } .act-bubble .bubble { display:none; padding:20px; background:#dedede; border-radius: 23px; -moz-border-radius: 23px; -webkit-border-radius: 23px; border:1px solid #c8c8c8; } /*news and media page*/ .articles { } .articles .meta { margin:0 0 10px; } .articles .meta i { display:block; } .articles h2 { font-size:108%; } .articles .block { padding:0 0 15px; margin:0 0 15px; border-bottom:1px dotted #CCC; } .prev, .next { font-weight:bold; } /*stories gallery*/ #gallery .gal-content { padding:5px; } #gallery .yui3-u-1-3 { text-align:center; } #story { padding:30px; background:url(assets/images/gallery-bg.jpg) repeat-x #000; color:#FFF; } #story .pagination { border-top:1px dotted #999; padding:4px 0; clear:both; margin:20px 0 0; } #story a { color:#FFF; } #story p { color:#FFF; margin:0 0 25px; } #story img { float:left; border:3px solid #FFF; margin:0 20px 20px 0; } #story h1 { font-size:180%; color:#FFF; margin:6px 0 25px; } #comment-area { } #comment-area #comments-title { padding: 8px 5px; background-color: #eaeaea; } #comment-area .commentlist { list-style:none; } #comment-area .commentlist li.comment { border-bottom:1px dotted #CCC; padding:5px 0; } #comment-area .the-comment { width: 100%; } #comment-area .comment-body { float: left; width: 400px; padding-left: 5px; } #comment-area .comment-body p { display:block; margin:0px; clear:both; } #comment-area .comment-meta { float: right; width: 200px; } #comment-area textarea { border:1px solid #CCC; width:500px; height:100px; margin:3px 0; } #respond { margin:40px 0 0; padding: 10px; background-color: #eaeaea; } #respond #reply-title { font-size: 16px; padding-bottom: 10px; } #respond #submit { border: none; background: url('../../../../wp-content/themes/wpd/assets/images/comment-submit.png') no-repeat center center; width: 122px; height: 33px; } #respond label { display: inline-block; width: 75px; float: left; } /*events page*/ #events { } #events .date { width:70px; height:56px; padding:10px 0 0; float:left; text-align:center; background:url(assets/images/date-bg.png) center no-repeat; } #events .date h5 { font-size:160%; font-weight:100; line-height:90%; color:#FFF; } #events .date h6 { font-size:250%; font-weight:bold; line-height:100%; color:#FFF; } #events .bd { width:680px; float:right; } #events .bd h2 { font-size:108%; } #event-widget { } #event-widget .date .padding { padding:4px 3px; text-align:center; background:#42afe3; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #event-widget .bd .padding { padding:0 0 0 7px; } #event-widget h5 { color:#FFF; font-weight:100; line-height:90%; } #event-widget h6 { color:#FFF; font-size:130%; line-height:90%; } /*homepage*/ #carousel-container { background: url('../../../../wp-content/themes/wpd/assets/images/carousel-bg.png') no-repeat top left; margin: 10px auto; width:947px; height:234px; position:relative; z-index:1; } #homepage-carousel { display: none; width: 100%; height: 100%; } #homepage-carousel .widget-container { width: 100%; height: 100%; } #homepage-carousel .carousel-item { width: 927px; height: 214px; padding: 10px; position: relative; } #homepage-carousel .carousel-half_img { float: right; margin: 0px 10px; } #homepage-carousel .carousel-full_img { margin: 0px auto; text-align: center; } #homepage-carousel .carousel-text { font-family: Arial, Helvetica, sans-serif; font-size: 30px; color: #fff; font-weight: bold; } #homepage-carousel .read-more { text-align: right; } #homepage-carousel .read-more a { font-size: 16px; text-decoration: none; color: #ccc; } #homepage-carousel .carousel-share { width: 184px; height: 68px; position: absolute; bottom: 0px; background: url('../../../../wp-content/themes/wpd/assets/images/carousel-share-bg.png') no-repeat top left; border-bottom: 2px solid #e47d21; } #homepage-carousel .carousel-share h3 { text-align: center; color: #fff; margin-top: 6px; } #homepage-carousel .carousel-share .icons { margin-top: 16px; text-align: center; } #homepage-carousel .carousel-share .icons > div, #homepage-carousel .carousel-share .icons > a img { margin: 0px 10px !important; } #carousel-container #nav { position: absolute; bottom: 5px; right: 20px; z-index: 999; } #carousel-container #nav a { display: block; width: 15px; height: 15px; margin: 0px 5px; float: left; background: url('../../../../wp-content/themes/wpd/assets/images/slide-off.png') no-repeat center center; } #carousel-container #nav a.activeSlide { background: url('../../../../wp-content/themes/wpd/assets/images/slide-on.png') no-repeat center center; } .slogan { background: #fff; color: #00b4ff; font-size: 29px; text-align: left; padding: 14px 0 14px 20px; position: absolute; top: -7px; margin: 0; } .home-center-half { float: left; } #blog h2.h1 { margin: 0px; padding: 8px; } #blog #blog-headline #blog-rss { position: relative; top: -30px; right: 10px; display: block; float: right; background: url('../../../../wp-content/themes/wpd/assets/images/rss-sm.png') no-repeat center center; width: 30px; height: 30px; } #blog .read-more a { font-weight: bold; text-decoration: none; float: right; padding: 5px 0px; } #home-blog-posts { background-color: #f3f3f3; } .twitter_widget { border: 1px solid #e5f7ff; } .twitter_widget #twitter-header { background-color: #e5f7ff; padding: 5px 10px; width: 279px; } .twitter_widget #twitter-header .twitter-icon { display: block; float: right; width: 20px; height: 20px; background: url('../../../../wp-content/themes/wpd/assets/images/icon-sml-twt.png') no-repeat center right; } .twitter_widget .h2 { color: #00b4ff; border: none; margin: 0px; float: left; } .twitter_widget ul { list-style: none; } .twitter_widget li.tweet { padding: 5px; } .twitter_widget li.tweet.even { background-color: #e5f7ff; } .twitter_widget li.tweet a.date { display: block; text-decoration: none; color: #666; } #events .event { clear: both; padding-top: 10px; } #events .event a { font-weight: bold; text-decoration: none; } /*about the coalition*/ #coalition_links { padding:20px 0; } #coalition_links a { display:block; float:left; width:30%; text-align:center; font-weight:bold; } .coalition_list { } .coalition_list li { float:left; width:48%; padding:4px 0; } .coalition_list a { } /*about pneumonia page*/ .navbar { text-align:center; margin:0 0 30px; background:#CCC; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; } .navbar a { display:block; font-weight:bold; text-decoration:none; padding:5px; color:#666; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; } .navbar a.active { background:#008fcb; color:#FFF; } #about-pneumonia { } #about-pneumonia .view { display:none; } #about-pneumonia h1 { margin:0 0 15px; font-size:116%; } #about-pneumonia h3 { margin:10px 0 3px; } #about-pneumonia ul { margin:0 0 0 15px; } .basic_form { } .basic_form label { display:block; float:left; width:25%; padding:5px; } .basic_form .row { padding:5px 0; } .basic_form .txt, .basic_form textarea { width:60%; padding:5px; font-size:110%; border:1px solid #ccc; } .basic_form textarea { height:100px; } .basic_form .submit { padding:10px 0 10px 27%; } .disclaimer { display:block; clear:both; margin:2px 0 0 180px; } .disclaimer_mobile { display:block; clear:both; margin:2px 0 0 255px; } #event-widget .h2 a { color:#41ace2; text-decoration:none; } /* Blog Index Page */ #blog-header { width: 100%; height: 247px; margin: 0px auto; background: #006b9b url('../../../../wp-content/themes/wpd/assets/images/blog-header.png') no-repeat center center; } #blog-header a { display: block; width: 100%; height: 100%; } .blog-main { width: 70%; float: left; } .blog-main .pagination { margin-left: 15px; width: 100%; text-align: center; } .blog-main .pagination .page-numbers { font-size: 15px; font-weight: bold; margin: 0px 10px; } .blog-main .pagination .next { margin: 0px; display: block; float: right; background: url('../../../../wp-content/themes/wpd/assets/images/blog-next.png') no-repeat center center; width: 126px; height: 30px; } .blog-main .pagination .prev { margin: 0px; display: block; float: left; background: url('../../../../wp-content/themes/wpd/assets/images/blog-prev.png') no-repeat center center; width: 126px; height: 30px; } .blog_post { padding: 30px 10px !important; } .blog_post.clearfix { width: 100%; } .blog_post .post_meta { width: 100%; border-bottom: 2px solid #00b4ff; position: relative; } .blog_post .post_meta h2, .blog_post .post_meta h2 a { color: #00b4ff; font-size: 20px; float: left; text-decoration: none; width: 325px; } .blog_post .post_meta .meta_right { width: 280px; position: absolute; right: 0px; bottom: 0px; } .blog_post .post_meta .post_date { margin-top:7px; margin-right: 15px; color: #666; float: left; } .blog_post .post_meta .share_icons { float: right; } .blog_post .post_meta .share_icons > * { margin: 0px 5px !important; } .blog_post .post_content { padding: 15px 0px; clear: both; width: 100%; } .blog_post .read_more { float:right; margin: 10px 0px; } .blog_post .read_more a { text-decoration: none; font-weight: bold; } .blog_post .post-media-container { float: right; max-width: 408px; margin-left: 10px; } .blog_post .post-media-container .post-media { max-width: 400px; overflow: hidden; padding: 3px; border:1px solid #ccc; } .blog_post .post-media-container .post-media .post-icon { max-width: 400px; } .blog_post .post-media-container .media-caption { text-align: right; } .blog_post .post-media-container .media-caption p { margin: 2px 0px; } .blog_post .post-media-container .media-caption .caption-title { font-weight: bold; } .blog-sidebar { width: 282px; float: right; position: relative; right: -13px; background: url('../../../../wp-content/themes/wpd/assets/images/blog-bg.png') no-repeat top right; height: 1240px; } .blog-sidebar #right-sidebar { padding: 30px 0px 0px 35px; } .blog-sidebar .widget-container { width: 228px; color: #5f5f5f; } .blog-sidebar .widget-container > h2 { background: url('../../../../wp-content/themes/wpd/assets/images/blog-widget-top.png') no-repeat top left; border: none; color: #fff; text-align: center; margin: 0px; } .blog-sidebar .widget-container > div { padding: 4px; padding-top: 10px; background-color: #fafafa; border: 1px solid #ccc; border-top: none; } .blog-sidebar div ul { list-style: none; } .blog-sidebar div ul li { padding: 5px 0px; } .blog-sidebar div ul li.even { background-color: #fff; } .blog-sidebar .subscribe_widget .widget_content, .blog-sidebar .archive_widget .widget_content { text-align: center; } .blog-sidebar .subscribe_widget .widget_content img { margin: 0px 15px; } .blog-sidebar .widget-container a { color: #000; text-decoration: none; } .blog-sidebar .widget-container a:hover { text-decoration: underline; } .blog-sidebar .widget-container .post-comments, .blog-sidebar .widget-container .cat-count { float: right; } ul.blog-pop-post-list, ul.blog-cat-list, ul.tweets { margin: 0px; } /* ----------------------------- - Print - */ @media print { * { background: transparent !important; color: #444 !important; text-shadow: none; } a, a:visited { color: #444 !important; text-decoration: underline; } a:after { content: " (" attr(href) ")"; } abbr:after { content: " (" attr(title) ")"; } .ir a:after { content: ""; } /* Don't show links for images */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } img { page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3{ page-break-after: avoid; } } /* ----------------------------- - Mobile - */ @media all and (orientation:portrait) { } @media all and (orientation:landscape) { } /* Grade-A Mobile Browsers */ @media screen and (max-device-width: 480px) { html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } }