/* Theme Name: Bold Headline Theme URI: http://www.bluelimemedia.com/themes/bold-headline/ Author: Christine Rondeau Author URI: http://bluelimemedia.com/ Description: Description Version: 1.0.2 Tags: white, green, one-column, custom-background, custom-menu, custom-colors, featured-images, editor-style, rtl-language-support, threaded-comments, sticky-post This theme, like WordPress, is licensed under the GPL and was created using Underscores.me. To create your very own theme or learn more please visit Underscores License: GNU General Public License v2.0 License URI: http://www.gnu.org/licenses/gpl-2.0.html More information: http://codex.wordpress.org/Theme_Review#Licensing Resetting and rebuilding styles have been helped along thanks to the fine work of Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/ and Blueprint http://www.blueprintcss.org/ */ /* =Reset -------------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } html { font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */ overflow-y: scroll; /* Keeps page centred in all browsers regardless of content height */ -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */ -ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ } body { background: #fff; } article, aside, details, figcaption, figure, footer, header, nav, section { display: block; } ol, ul { list-style: none; } table { /* tables still need 'cellspacing="0"' in the markup */ border-collapse: separate; border-spacing: 0; } caption, th, td { font-weight: normal; text-align: left; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } a:focus { outline: thin dotted; } a:hover, a:active { /* Improves readability when focused and also mouse hovered in all browsers people.opera.com/patrickl/experiments/keyboard/test */ outline: 0; } a img { border: 0; } a { text-decoration: none; } /* =Global ----------------------------------------------- */ body, button, input, select, textarea { color: #404040; font-family: sans-serif; font-size: 16px; font-size: 1.6rem; line-height: 1.5; max-width: 100%; } /* Headings */ h1,h2,h3,h4,h5,h6 { clear: both; } hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } /* Text elements */ p { margin-bottom: 1.5em; } ul, ol { margin: 0 0 1.5em 3em; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } dt { font-weight: bold; } dd { margin: 0 1.5em 1.5em; } b, strong { font-weight: bold; } dfn, cite, em, i { font-style: italic; } blockquote { border-left: 2px solid #57ad68; font-style: italic; padding: 0 1.5em; } address { margin: 0 0 1.5em; } pre { background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; font-size: 1.5rem; line-height: 1.6; margin-bottom: 1.6em; padding: 1.6em; overflow: auto; max-width: 100%; } code, kbd, tt, var { font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { background: #fff9c0; text-decoration: none; } sup, sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; } sup { bottom: 1ex; } sub { top: .5ex; } small { font-size: 75%; } big { font-size: 125%; } figure { margin: 0; } table { margin: 0 0 1.5em; width: 100%; } th { font-weight: bold; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } button, input, select, textarea { font-size: 100%; /* Corrects font size not being inherited in all browsers */ margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */ vertical-align: baseline; /* Improves appearance and consistency in all browsers */ *vertical-align: middle; /* Improves appearance and consistency in all browsers */ } button, input { line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */ } button, html input[type="button"], input[type="reset"], input[type="submit"] { border: 1px solid #ccc; border-color: #ccc #ccc #bbb #ccc; border-radius: 3px; background: #e6e6e6; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 15px 17px rgba(255, 255, 255, 0.5), inset 0 -5px 12px rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, .8); cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */ -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */ font-size: 12px; font-size: 1.2rem; line-height: 1; padding: .6em 1em .4em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); } button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { border-color: #ccc #bbb #aaa #bbb; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 15px 17px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02); } button:focus, html input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, button:active, html input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { border-color: #aaa #bbb #bbb #bbb; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15); } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* Addresses box sizing set to content-box in IE8/9 */ padding: 0; /* Addresses excess padding in IE8/9 */ } input[type="search"] { -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */ -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */ -moz-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */ -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */ border: 0; padding: 0; } input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; -webkit-appearance: none; } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { color: #111; } input[type="text"], input[type="email"], input[type="password"], input[type="search"] { padding: 3px; } textarea { overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */ padding-left: 3px; vertical-align: top; /* Improves readability and alignment in all browsers */ width: 98%; } /* Alignment */ .alignleft { display: inline; float: left; margin-right: 1.5em; } .alignright { display: inline; float: right; margin-left: 1.5em; } .thumb { border-radius: 100px; } .aligncenter { clear: both; display: block; margin: 1em auto; } /* Text meant only for screen readers */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; } .screen-reader-text:hover, .screen-reader-text:active, .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar */ } /* let's clear some floats */ .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /* =Typography ----------------------------------------------- */ body { font-family: 'Lato', sans-serif; } h1, h2, h3, h4, h5, h6, blockquote { font-family: 'Playfair Display', sans-serif; } h1.menu-toggle { font-family: 'Lato', sans-serif; } h1.site-title a { text-align: center; color: #404040; text-transform: uppercase; display: block; } /* =Icons ----------------------------------------------- */ @font-face { font-family: 'Genericons'; src: url('font/genericons-regular-webfont.eot'); src: url('font/genericons-regular-webfont.eot?#iefix') format('embedded-opentype'), url('font/genericons-regular-webfont.woff') format('woff'), url('font/genericons-regular-webfont.ttf') format('truetype'), url('font/genericons-regular-webfont.svg#genericonsregular') format('svg'); font-weight: normal; font-style: normal; } .genericon { -webkit-font-smoothing: antialiased; display: inline-block; vertical-align: text-bottom; } /** * IE7 and IE6 hacks */ .genericon { *overflow: auto; *zoom: 1; *display: inline; } .cat-links a:first-child:before, .tags-links a:first-child:before, .comments-link a:before, .edit-link a:before { font: normal 16px/1 Genericons; padding: 2px 10px 0 0; } .cat-links a:first-child:before { content: "\f301"; } .tags-links a:first-child:before { content: "\f302"; } .comments-link a:before { content: '\f300'; } .edit-link a:before { content: '\f411'; } /* =Links ----------------------------------------------- */ a, a:link, a:visited { color: #57ad68; -webkit-transition: color .6s ease; -moz-transition: color .6s ease; -o-transition: color .6s ease; transition: color .6s ease; text-decoration: none; } a:hover { color: #e2a872; } .entry-meta a { color: #404040; -webkit-transition: color .6s ease; -moz-transition: color .6s ease; -o-transition: color .6s ease; transition: color .6s ease; text-decoration: none; white-space: nowrap; } .entry-meta a:hover { color: #e2a872; } /* =Layout ----------------------------------------------- */ body { background: #fff; } .site-header, .site-main, .site-footer { max-width: 960px; margin: 0 auto; } .site-header { margin-top: 3.125em; } .site-footer { padding: 1em 0; } #primary, #secondary { margin: 1.5em; width: 93.75%; /* 900 / 960 */ word-wrap: break-word;/* Let's break super long words like Supercalifragilisticexpialidocious! */ -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .error404 #primary, .search-no-results #primary { padding-bottom: 3em; } .entry-summary { float: right; width: 64.5833333%; /* 620 / 900 */ padding-left: 2.22222222%; /* 20 / 900 */ } .entry-meta { float: left; padding-top: 1.5em; width: 24.444444%; /* 220 / 900 */ } .entry-content { /* Used on pages only */ padding: 0 6.666666667%; /* 600 / 900 */ } /* =Headers These are the headlines that are Big and use FitText ----------------------------------------------------- */ .site-header h1, .site-header h2, .page-title, .error404 h1.entry-title { text-align: center; } h1, h2, h3, h4, h5, h6 { font-size: 22px; font-size: 2.2rem; line-height: 1.25em; margin: 0.25em 0 ; } /* =Menu ----------------------------------------------- */ .navigation-main { background: #404040; display: block; padding: 0.25em 0; width: 100%; } .navigation-main ul { list-style: none; margin: 0 auto; max-width: 960px; padding-left: 0; text-align: center; } .navigation-main li { display: inline-block; position: relative; } .navigation-main a { color: #fbfbfb; display: block; font-size: 14px; font-size: 1.4rem; padding: .5em; text-decoration: none; text-transform: uppercase; } .navigation-main ul ul { background: #404040; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); display: none; float: left; margin: 0; position: absolute; top: 2em; text-align: left; left: 0; z-index: 99999; } .navigation-main ul ul ul { left: 100%; top: 0; margin: 0; } .navigation-main ul ul a { width: 200px; } .navigation-main li:hover > a { color: #c8c8c8; } .navigation-main ul li:hover > ul { display: block; } .navigation-main li > a:after { content: ' \25BE'; } .navigation-main li > a:hover:after { content: ' \25BE'; } .navigation-main ul.children li > a:after, .navigation-main ul.sub-menu li > a:after { content: ' \25B8'; } .navigation-main li > a:only-child:after, .navigation-main ul.children li > a:only-child:after, .navigation-main ul.sub-menu li > a:only-child:after { content: ''; } /* Small menu */ .menu-toggle { display: none; cursor: pointer; } .main-small-navigation ul { display: none; } @media screen and (max-width: 600px) { .menu-toggle, .main-small-navigation ul.nav-menu.toggled-on { display: block; } .navigation-main ul { display: none; } } /* =Content ----------------------------------------------- */ .sticky { } #primary { border-bottom: 1px solid #ddd; } .search-no-results #primary { border-top: 1px solid #ddd; } .hentry { border-top: 1px solid #ddd; display: inline-block; margin: 1em 0 2em; width: 100%; } .byline { display: none; } .single .byline, .group-blog .byline { display: inline; } .page-links { clear: both; margin: 0 0 1.5em; } .entry-meta { font-size: 14px; font-size: 1.4rem; } .entry-meta p { font-style: italic; } .cat-links, .tags-links, .comments-link { display: block; margin: 0.625em 0; } /* =Media ----------------------------------------------- */ .entry-content img.wp-smiley, .comment-content img.wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } .wp-caption { border: 1px solid #ccc; margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin: 1.2% auto 0; max-width: 98%; } .wp-caption-text { font-size: 13px; font-size: 1.3rem; padding: 0.5em; text-align: center; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } .site-content .gallery { margin-bottom: 1.5em; } .gallery-caption { } .site-content .gallery a img { border: none; height: auto; max-width: 90%; } .site-content .gallery dd { margin: 0; } .site-content .gallery-columns-4 .gallery-item { } .site-content .gallery-columns-4 .gallery-item img { } /* Make sure embeds and iframes fit their containers */ embed, iframe, object { max-width: 100%; } /* =Navigation ----------------------------------------------- */ .site-content [class*="navigation"] { padding: 1.5em 0; overflow: hidden; width: 100%; } [class*="navigation"] .nav-previous { float: left; width: 50%; } [class*="navigation"] .nav-next { float: right; text-align: right; width: 50%; } /* =Comments ----------------------------------------------- */ .comment-content a { word-wrap: break-word; } .bypostauthor { } /* Comments ----------------------------------------------- */ h2.comments-title { margin: 1em 0; } h2.comments-title, h3#reply-title { font-size: 18px; font-size: 1.8rem; } #comments { clear: left; } .bypostauthor { } #comments footer { float: left; width: 24.4444444%; /* 220 / 900 */ } #comments footer p { margin: 0; padding: 0.25em 0; } .comment-content { float: right; width: 66.666667%; /* 600 / 900 */ } .reply { clear: left; } .avatar { border-radius: 100px; margin: 0 auto 0 auto; } .comment-meta a { color: #404040; } .comment-list { padding: 1em 0; } ol.comment-list, ol.comment-list li { list-style: none; margin: 0; padding: 0; } ol.comment-list li { border-top: 1px solid #ddd; margin: 0; padding: 15px 10px; } ol.comment-list ul li, ol.comment-list ol li { border: none; } ol.comment-list ul li{ list-style: disc; margin: 5px 0; padding: 5px; border: none; } ol.comment-list ol li { list-style: decimal; margin: 0; padding: 5px 0; } ol.comment-list ul.children { margin: 0 0 0 25px; padding: 0; } ol.comment-list ul.children li { border-top: 1px solid #ddd; } ol.comment-list li p { padding: 6px 0; } ol.comment-list li blockquote p { font-size: 18px; font-size: 1.8rem; line-height:1.5em; } ol.comment-list li.pingback { background: #eee; border-left: 5px solid #ddd; padding: 5px 10px; margin: 0; } li.pingback .edit-link { margin-top: 5px; display: block; } #commentform { padding: 1em 0; } #commentform input[type="text"] { display: block; } .form-allowed-tags { display: none; } /* =Widgets ----------------------------------------------- */ #secondary h3 { font-size: 22px; font-size: 2.2rem; line-height: 1.5; margin-bottom: 0.625em; } #secondary .widget-area { float:left; margin: 1.25em 0; width: 32%; } #secondary .middle { margin: 1.25em 2%; } #secondary .widget-area ul { list-style: none; margin: 0; margin-bottom: 1em; padding: 0; } #secondary .widget-area ul ul { list-style-type: disc; margin: 0 2%; padding: 0 5%; } /* =Footer ----------------------------------------------- */ .site-footer { color: #ddd; font-size: 14px; font-size: 1.4rem; text-align: center; } .site-footer a { color: #ddd; } .site-footer a:hover { color: #ddd; text-decoration: underline; } /* Make sure select elements fit in widgets */ .widget select { max-width: 100%; } /* Search widget */ .widget_search .submit { display: none; } /* =Responsive (Mobile) Design -------------------------------------------------------------- */ @media screen and (max-width: 960px) { .site-header, .site-main, .site-footer { margin: 0 auto; width: 90%; } } @media screen and (max-width: 600px) { h1.menu-toggle { background: #404040; color: #ddd; display: block; line-height: 2; margin: 0 auto; text-align: center; text-transform: uppercase; } .main-small-navigation { display: block; } .main-small-navigation { background: #404040; padding: 0.25em 0; margin-bottom: 1em; } .main-small-navigation ul { clear: both; list-style: none; margin: 0; text-align: center; text-transform: none; } .main-small-navigation .sub-menu { border: none; display: block; } .main-small-navigation li { } .main-small-navigation a { color: #ddd; border-top: 1px solid #ddd; display: block; font-size: 14px; font-size: 1.4rem; padding: 2% 5%; } .main-small-navigation a:hover { color: #fff; } .menu-item-parent > a:after, .sub-menu .menu-item-parent > a:after { content: ''; } } @media screen and (max-width: 480px) { #primary, .entry-summary { float: left; width: 100%; padding-left: 0; } #primary { margin: 1em auto; } .entry-meta { float: left; padding-top: 1.5em; width: 100%; } #secondary .widget-area { width: 100%; } #secondary .middle { margin: 1.25em 0; } }