/* Theme Name: Big Stone Theme URI: Author: Raghavendra Author URI: http://RaghavendraNagaraja.com/ Description: The Big Stone theme is a simple, minimalist theme based on Underscores. Version: 1.0 License: GNU General Public License License URI: license.txt Tags: light, white, one-column, two-columns, left-sidebar, right-sidebar, fluid-layout, custom-background, custom-header, custom-menu, featured-images, flexible-header, microformats, post-formats, rtl-language-support, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. Thanks to the tutorials at "http://themeshaper.com/2012/10/22/the-themeshaper-wordpress-theme-tutorial-2nd-edition/", they have helped a lot in developing this theme. 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, hgroup, 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; } /* =Global ----------------------------------------------- */ /* Set a default font size, color, line-height, and font family for your body element and all input elements. These can get overridden later on in the stylesheet, but are useful as base styles. */ body, button, input, select, textarea { color: #3C372E; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; font-size: 1.6rem; line-height: 1.5; } body { background: #F6FFE0; } /* Headings */ h1,h2,h3,h4,h5,h6 { clear: both; margin: 0.6em 0; } h1 { font-size: 36px; font-size: 3.6rem; } h2 { font-size: 28px; font-size: 2.8rem; } h3 { font-size: 22px; font-size: 2.2rem; } h4 { font-size: 16px; font-size: 1.6rem; } h5 { font-size: 14px; font-size: 1.4rem; } h6 { font-size: 12px; font-size: 1.2rem; } /* style for hr element*/ /* Text elements */ p { margin-bottom: 1.5em; } ul, ol { margin: 0 0 1.5em 3em; } ul { list-style: disc; } ol { list-style: decimal; } ul ul, ol ol, ul ol, ol ul { 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{ display:block; background: #F6FFE0; padding: 15px 20px 15px 45px; margin: 0 0 20px; position: relative; /*Font*/ font-family: Georgia, serif; font-size: 16px; line-height: 1.2; color: #666; text-align: justify; /*Borders*/ border-left: 15px solid #10222B; border-right: 2px solid #10222B; /*Box Shadow - (Optional)*/ -moz-box-shadow: 2px 2px 15px #ccc; -webkit-box-shadow: 2px 2px 15px #ccc; box-shadow: 2px 2px 15px #ccc; } blockquote::before{ content: "\201C"; /*Unicode for Left Double Quote*/ /*Font*/ font-family: Georgia, serif; font-size: 60px; font-weight: bold; color: #999; /*Positioning*/ position: absolute; left: 10px; top:5px; } blockquote::after{ /*Reset to make sure*/ content: ""; } blockquote a{ text-decoration: none; background: #eee; cursor: pointer; padding: 0 3px; color: #10222b; } blockquote a:hover{ color: #666; } blockquote em{ font-style: italic; } address { margin: 0 0 1.5em; } pre { background: #DDE6CA; 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; } hr { } /* Form Elements */ 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 */ *overflow: visible; /* Corrects inner spacing displayed oddly in IE6/7 */ } /* Gives a basic visual design to form elements */ 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; -webkit-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); -moz-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); 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.4rem; line-height: 1; padding: 1.12em 1.5em 1em; text-shadow: 0 1px 0 rgba(255,255,255,.8); } button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { border-color: #ccc #bbb #aaa #bbb; -webkit-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); -moz-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); 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; -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 2px 5px rgba(0,0,0,0.15); -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 2px 5px rgba(0,0,0,0.15); 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 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */ 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], textarea { background: rgba( 255, 255, 255, 0.3 ); border: 1px solid #ccc; border-radius: 3px; padding: 6px; } input[type=text]:focus, input[type=email]:focus, textarea:focus { background: #fff; } 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%; } /* Links */ a, a:visited { color: #95AB63; text-decoration: none; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; } a:hover, a:focus, a:active { color: #33605a; } /* Alignment - WordPress uses these classes to align images and other elements inside the editor. */ .alignleft { display: inline; float: left; margin-right: 1.5em; margin-bottom: 1em; } .alignright { display: inline; float: right; margin-left: 1.5em; margin-bottom: 1em; } .aligncenter { clear: both; display: block; margin: 1.5em auto; } /* Text meant only for screen readers. It's hidden due to the clip property, but visible in the page source. Screen readers will read this text aloud, making it easier for users to locate structural sections in your theme. */ .assistive-text { clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); position: absolute !important; } /* If you want to give a common style to all of the titles in your theme, here's a place to do it (you can style them individually later) */ .site-title, .entry-title, .page-title, .widget-title, .comments-title, #reply-title { font-family: Georgia, 'Times New Roman', serif; } /* =Structure ----------------------------------------------- */ /* Use this section to set widths and margins, and to build a layout. For examples of layouts that you can copy and paste into this section, see: https://github.com/Automattic/_s/blob/master/layouts/ */ .site { /* The the outer-most container, wraps the entire site */ } .site-header { /* The container for the entire header area */ } #main, .main-navigation, .site-title, .site-description { margin: 0 auto; width: 100%; } #main { clear: both; overflow: hidden; } #primary { float: left; margin: 0 -27% 0 0; padding: 2em; width: 90%; } #content { margin: 0 27% 0 0; border-right: 1px dotted black; padding-right: 2em; padding-left: 1em; } #secondary, #tertiary { background: #E2F0D6; float: right; margin: 1em 1em 0; padding: 2em 2em 0; position: relative; width: 20%; } #tertiary { padding-top: 0; } .site-footer { clear: both; width: 100%; } /* =Site Header ----------------------------------------------- */ /* Style elements inside of the .site-header container */ .site-header hgroup { background: #BDD684; padding: 1.5em 2em; } .site-title a { color: #10222B; font-size: 45px; font-size: 4.5rem; font-style: italic; } .site-description { font-size: 20px; font-size: 2rem; color: #F6FFE0; } /* =Menu ----------------------------------------------- */ /* Style your navigation menu, which is inside .site-header. A basic drop-down menu structure is provided. */ .main-navigation { background: #10222B; background-size: 100%; clear: both; display: block; padding: 1.2em; } .main-navigation:after { clear: both; content: ""; display: block; } .main-navigation ul { background: #10222B; background-size: 100%; list-style: none; margin: 0; padding-left: 0; } .main-navigation li { float: left; margin: 0.5em 0; position: relative; } .main-navigation a { padding: 0 0.5em; border:1px solid #889095; color: #FFFFFF; display: block; font-size: 1.7rem; font-weight: bold; margin-right: 1em; text-decoration: none; text-transform: uppercase; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; box-shadow: 2px 2px 3px #666666; -webkit-box-shadow: 2px 2px 3px #666666; -moz-box-shadow: 2px 2px 3px #666666; } .main-navigation ul ul { border: 1px solid rgb(0, 0, 0); display: none; float: left; position: absolute; top: 1.2em; left: 0; z-index: 99999; } .main-navigation ul ul li:last-child { border: none; } .main-navigation ul ul a { color: #000000; } .main-navigation ul ul ul { left: 100%; top: 0; } .main-navigation ul ul a { padding: 0 1.5em; width: 200px } .main-navigation ul ul li { border-bottom: 1px solid black; margin: 0; } .main-navigation ul ul li a { border: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; } .main-navigation li:hover > a, .main-navigation li.current_page_item a, .main-navigation li.current-menu-item a, .main-navigation ul ul a:hover { color: #BDD684; } .main-navigation ul ul :hover, .main-navigation ul ul li:hover { background: #10222B; } .main-navigation ul ul :hover > a { } .main-navigation ul li:hover > ul { background: #F6FFE0; display: block; } /* Small menu */ .menu-toggle { color: #7c948a; cursor: pointer; font-size: 20px; font-weight: bold; text-align: center; } .main-small-navigation .menu { display: none; } /* =Content ----------------------------------------------- */ /* Styles for posts and pages */ .sticky { /* Style your sticky posts. This class is applied to the same element as .hentry below. */ } .hentry { /* The wrapper for individual posts */ margin: 0 0 1.5em; padding-bottom: 1.5em; } .entry-header { /* Container for the entry title, byline and post date */ } .entry-title, .page-title { color: #10222B; font-size: 28px; font-size: 2.8rem; font-weight: bold; margin: 0 0 0.2em; } .entry-title a { text-decoration: none; color: #10222B; } body.search .page-title, body.archive .page-title { } .entry-meta { /* Container for the entry metadata */ clear: both; } .entry-date { } .byline { display: none; } .single .byline, .group-blog .byline { display: inline; font-size: 10px; font-size: 1em; } .cat-links { /* Styles category links inside the entry meta */ } .tag-links { /* Styles links to tags inside the entry-meta */ } .sep { } .comments-link { /* Link to leave a comment */ } .edit-link { /* Link to Edit the post (only shows up for admins) */ } .entry-content, .entry-summary { /* Container for the post body/excerpt text */ margin: 1.5em 0 0; } /* Styling In-Post Tables */ .entry-content table, .comment-content table { border: 1px solid #000; border-left-width: 0; margin: 0 -0.083em 2.083em 0; text-align: left; width: 100%; } .entry-content tr th, .entry-content thead th, .comment-content tr th, .comment-content thead th { border-left: 1px solid #000; font-weight: bold; padding: 0.5em 1.25em; } .entry-content tr td, .comment-content tr td { border: 1px solid #000; border-width: 1px 0 0 1px; padding: 0.5em 1.25em; } .entry-content tr.odd td, .comment-content tr.odd td { background: #E2F0D6; } .page-links { clear: both; margin: 0 0 1.5em; } .post-item-divider { background-image: url("images/capture.png"); background-repeat:no-repeat; background-size: 100%; height: 50px; line-height:1px; width:100%; margin-bottom:20px; } /* =Aside Post Format ----------------------------------------------- */ /* Just put ".format-aside" before any of the above classes to create special formatting for Aside posts */ .format-aside .entry-content { border-left: 4px solid #000; padding-left: 1em; } /* =Media ----------------------------------------------- */ /* Styling for images and videos */ .site-header img, .entry-content img, .comment-content img, .widget img { max-width: 100%; /* Fluid images for posts, comments, and widgets */ } .site-header img, .entry-content img, .widget-img, img[class*="align"], img[class*="wp-image-"], .wp-caption img { height: auto; } .site-header img, .entry-content img, .widget img, img.size-full { max-width: 100%; width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */ } img.alignright { float: right; margin: 0 0 1em 1em; } img.alignleft { float: left; margin: 0 1em 1em 0; } img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignright { float: right; } .alignleft { float: left; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .entry-content img.wp-smiley, .comment-content img.wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } .wp-caption { max-width: 100%; } .wp-caption.aligncenter, .wp-caption.alignleft, .wp-caption.alignright, .wp-caption.alignnone { margin-bottom: 1.5em; } .wp-caption img { display: block; margin: 1.2% auto 0; max-width: 98%; } .wp-caption-text { text-align: center; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } #content .gallery { margin-bottom: 1.5em; } .gallery-caption { font-style: italic; } #content .gallery a img { border: none; height: auto; max-width: 90%; } #content .gallery dd { margin: 0; } /* Make sure embeds and iframes fit their containers */ embed, iframe, object { max-width: 100%; } /* =Navigation ----------------------------------------------- */ /* Older/Newer Post Navigation */ .site-content .site-navigation { font-size: 13px; font-size: 1.3rem; font-style: italic; margin: 0 0 1.5em; overflow: hidden; } .site-content .nav-previous { font-size: 14px; font-size: 1.4em; float: left; width: 50%; } .site-content .nav-next { font-size: 14px; font-size: 1.4em; float: right; text-align: right; width: 50%; } /* =Comments ----------------------------------------------- */ #comments { clear: both; } .bypostauthor { /* Gives post author comments their own style */ } .comments-title, #reply-title { font-size: 20px; font-size: 2rem; } .commentlist li { list-style: none; } .commentlist, .children { list-style: none; margin: 0; } .children { /* Nested comments */ margin: 0 0 0 6%; } .commentlist li.comment, .commentlist li.pingback { border-bottom: 1px solid rgba( 0, 0, 0, 0.2 ); padding-left: 2.5em; } .commentlist li:last-of-type { } .commentlist .children li { } .children article.comment, .children li.pingback { padding-top: 1.0em; } .comment .avatar { float: left; margin-right: 1.25em; } .comment-author { font-size: 14px; font-size: 1.4rem; } .comment-meta { font-size: 12px; font-size: 1.2rem; } .comment-content{ font-size: 13px; font-size: 1.3rem; margin: 1em 0 0 4.5em; } .comment .reply { font-size: 12px; font-size: 1.2rem; text-align: right; } /* Comment Form */ .comment-notes, #commentform .form-allowed-tags, p.nocomments, p.logged-in-as, #commentform label { font-size: 13px; font-size: 1.3rem; } .required { /* The little asterisk next to a required comment field */ color: #880000; } #commentform label { font-weight: bold; padding: 1em 0; } #commentform input[type="text"] { } #commentform #comment { /* The comment form textarea */ } #commentform .form-allowed-tags, #commentform .form-allowed-tags code { } p.nocomments { margin: 2em; } /* =Widgets ----------------------------------------------- */ .widget-area { } .widget { font-size: 12px; font-size: 1.2rem; line-height: 1.8; margin: 0 0 1.5em; } .widget-title { background: #10222B; text-align: center; color: #FFFFFF; font-size: 20px; font-size: 2rem; font-style: italic; } .widget ul { list-style: none; margin: 0; } .widget ul li, .widget ul li a { margin-bottom: 0.25em; text-decoration: none; color: #000000; font-size: 14px; font-size: 1.4rem; } /* Search widget */ #searchsubmit { border-radius: 4px; width: 100px; padding: 10px 0; font-size: 1.2em; border: none; margin-top: 5px; text-transform: uppercase; text-align: center; background-color: #BDD684; } .widget_search #s { width: 200px; padding: 10px 0; } /* Sub-Items in Menu & Categories Widgets. These classes are useful if you want to add special styling, such as indention, to sub-items in your menu and categories widgets. */ .widget-area .sub-menu, .widget-area .children { margin-left: 1.5em; } .widget-area .sub-menu li, .widget-area .children li { } /* Text Widgets */ .widget p, .textwidget { } .widget p a, .textwidget a { } /* Cloud Widgets */ .wp_widget_tag_cloud div, .widget_tag_cloud div { line-height: 1.5; padding: 0.231em 0; } /* RSS Widget */ .rsswidget img { margin: 0; vertical-align: text-top; } .rss-date { } .rssSummary { } /* Calendar Widget */ #wp-calendar { width: 100%; } #wp-calendar caption { font-style: italic; } #wp-calendar thead th { text-align: center; } #wp-calendar tbody, #wp-calendar tbody td { border: 1px solid #000; } #wp-calendar tbody { border-left-width: 0; } #wp-calendar tbody td { border-width: 1px 0 0 0; } #wp-calendar tbody td a { font-weight: bold; } #wp-calendar tbody td:hover { } #wp-calendar tfoot #next { text-align: right; } #wp-calendar #today { font-weight: bold; } #wp-calendar #prev, #wp-calendar #next { } #wp-calendar tbody .pad { } /* =Site Footer ----------------------------------------------- */ .site-footer { background-color: #1F1F1F; padding: 10px 0; border-top: 1px solid #3A3A3A; } .site-info { color: #F6FFE0; font-size: 13px; font-size: 1.3rem; padding: 1.5em 0; text-align: center; } /* =Responsive Structures ----------------------------------------------- */ @media only screen and (max-width: 768px) { #content, #primary, #secondary, #tertiary { /* Remove floats on all structural elements for smaller screens */ float: none; margin: 0; padding: 0; } #primary, #secondary, #tertiary { /* Make all structural elements full-width */ width: 100%; } }