/* Theme Name: Littleways Theme URI: http://littleways.org Description: Based on Equilibrium, A Premium Portfolio Wordpress Theme. Author: Truemedia, Onioneye Author URI: http://www.onioneye.com/ License: GNU General Public License version 3.0 License URI: http://www.gnu.org/licenses/gpl-3.0.html Version: 1.5.3 */ /* 0. Google Fonts */ @import url(http://fonts.googleapis.com/css?family=Glass+Antiqua|Rochester); /* 1. R E S E T D E F A U L T S ........................................................................................................................................ */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 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, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; } :focus { outline: none; } ol, ul { list-style: none inside none; } blockquote, q { quotes: none; } blockquote: before, blockquote: after, q: before, q: after { content: " "; content: none; } ins { background-color: #eff3f4; text-shadow: none; color: #465458; text-decoration: none; } mark { background-color: #dbebef; text-shadow: none; color: #465458; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } /*- tables still need 'cellspacing="0"' in the markup ----------*/ caption, th, td { text-align: left; font-weight: normal; } input, textarea, button { border: none; } input, select { vertical-align: middle; } /* 2. G R I D ........................................................................................................................................ */ body { min-width: 960px; } .container_12 { margin-left: auto; margin-right: auto; width: 960px; } .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { display: inline; float: left; margin-left: 10px; margin-right: 10px; } .push_1, .pull_1, .push_2, .pull_2, .push_3, .pull_3, .push_4, .pull_4, .push_5, .pull_5, .push_6, .pull_6, .push_7, .pull_7, .push_8, .pull_8, .push_9, .pull_9, .push_10, .pull_10, .push_11, .pull_11 { position: relative; } .alpha { margin-left: 0 } .omega { margin-right: 0 } .container_12 .grid_1 { width: 60px } .container_12 .grid_2 { width:140px } .container_12 .grid_3 { width:220px } .container_12 .grid_4 { width:300px } .container_12 .grid_5 { width:380px } .container_12 .grid_6 { width:460px } .container_12 .grid_7 { width:540px } .container_12 .grid_8 { width:620px } .container_12 .grid_9 { width:700px } .container_12 .grid_10 { width:780px } .container_12 .grid_11 { width:860px } .container_12 .grid_12 { width:940px } .container_12 .prefix_1 { padding-left:80px } .container_12 .prefix_2 { padding-left:160px } .container_12 .prefix_3 { padding-left:240px } .container_12 .prefix_4 { padding-left:320px } .container_12 .prefix_5 { padding-left:400px } .container_12 .prefix_6 { padding-left:480px } .container_12 .prefix_7 { padding-left:560px } .container_12 .prefix_8 { padding-left:640px } .container_12 .prefix_9 { padding-left:720px } .container_12 .prefix_10 { padding-left:800px } .container_12 .prefix_11 { padding-left:880px } .container_12 .suffix_1 { padding-right:80px } .container_12 .suffix_2 { padding-right:160px } .container_12 .suffix_3 { padding-right:240px } .container_12 .suffix_4 { padding-right:320px } .container_12 .suffix_5 { padding-right:400px } .container_12 .suffix_6 { padding-right:480px } .container_12 .suffix_7 { padding-right:560px } .container_12 .suffix_8 { padding-right:640px } .container_12 .suffix_9 { padding-right:720px } .container_12 .suffix_10 { padding-right:800px } .container_12 .suffix_11 { padding-right:880px } .container_12 .push_1 { left:80px } .container_12 .push_2 { left:160px } .container_12 .push_3 { left:240px } .container_12 .push_4 { left:320px } .container_12 .push_5 { left:400px } .container_12 .push_6 { left:480px } .container_12 .push_7 { left:560px } .container_12 .push_8 { left:640px } .container_12 .push_9 { left:720px } .container_12 .push_10 { left:800px } .container_12 .push_11 { left:880px } .container_12 .pull_1 { left:-80px } .container_12 .pull_2 { left:-160px } .container_12 .pull_3 { left:-240px } .container_12 .pull_4 { left:-320px } .container_12 .pull_5 { left:-400px } .container_12 .pull_6 { left:-480px } .container_12 .pull_7 { left:-560px } .container_12 .pull_8 { left:-640px } .container_12 .pull_9 { left:-720px } .container_12 .pull_10 { left:-800px } .container_12 .pull_11 { left:-880px } /* 3. B A S E S T Y L E S ....................................................................................................................................... */ html { overflow-y: scroll; /* always force a scrollbar in non-IE */ } body { overflow-y: hidden; margin-top: 7px; padding-bottom: 30px; } body:before { content: " "; display: block; position: absolute; z-index: 100; width: 100%; left: 0; top: 0; height: 7px; background: #444652; } /* top border */ #main-wrapper { padding: 30px 50px 50px 30px; } .boxshadow #main-wrapper { -webkit-box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.15); } #main-wrapper { background: #fff; background: rgba(255, 255, 255, 0.85); margin-bottom: 40px; } .borderradius #main-wrapper { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } #secondary-wrapper { padding: 0; /*padding: 40px 0 20px;*/ } /* self-clearing floats */ .mod:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clear { clear: both; } /* text highlight/selection */ ::-moz-selection{ color: #fff; background: #87c9dd; text-shadow: none; } ::selection { color: #fff; background: #87c9dd; text-shadow: none; } /* * Non-semantic helper classes */ .ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; } /* for image replacement */ .hidden { display: none; visibility: hidden; } /* Hide for both screenreaders and browsers: css-discuss.incutio.com/wiki/Screenreader_Visibility */ /* Hide only visually, but have it available for screenreaders: www.webaim.org/techniques/css/invisiblecontent/ */ .visuallyhidden { position:absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } .invisible { visibility: hidden; } /* Hide visually and from screenreaders, but maintain layout */ /* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix - only with a different class name to make it more semantic */ .group:before, .group:after { content: "\0020"; display: block; height: 0; visibility: hidden; } .group:after { clear: both; } /* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ .group { zoom: 1; } /* 4. T Y P O G R A P H Y ........................................................................................................................................ */ body, input, button, textarea { font: 18px/22px 'Glass Antiqua', Garamond, Georgia, serif, cursive; color: #5e534e; } p, h1, h2, h3, h4, h5, h6, fieldset, pre, #main ul, #main ol, #main dt, #main dd, #main table, #main caption, #main img, .page-content ul, .page-content ol, .page-content dt, .page-content dd, .page-content table, .page-content caption, .page-content img, .sidebar .widget, #footer .widget, .slider, .post-content ul, .post-content ol, .post-content dt, .post-content dd, .post-content table, .post-content caption, .post-content img, .one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth, .contact-info-shortcode, #social-networking { margin-bottom: 20px; } #main .comment-list li { padding-top: 20px; } .share-this { padding-top: 8px; padding-bottom: 8px; margin-bottom: 8px; } .footer-meta img, .footer-meta p { margin-bottom: 0; } #header, #main-headline, .slider, .section-title, #filter, #related-posts > h2, #single-item, #search-results .page-name { margin-bottom: 30px; } .project-title { padding-bottom: 30px; margin-bottom: 40px; } #footer .widget, .sidebar .widget, #search-results .blog-post, .post, .comments_navigation { margin-bottom: 40px; } #content { margin-bottom: 60px; } .item-categories { padding-bottom: 16px; } h1,h2,h3 { font-family: 'Glass Antiqua', Garamond, Georgia, serif, cursive; } h1 { font-size: 42px; line-height: 48px; } h2 { font-size: 26px; line-height: 28px; } h3 { font-size: 24px; line-height: 28px; } h4 { font-size: 22px; line-height: 28px; } h5 { font-size: 20px; line-height: 28px; } h6 { font-size: 20px; line-height: 28px; } html { -webkit-font-smoothing: antialiased; } /* maxvoltar.com/archive/-webkit-font-smoothing */ table { font-size: inherit; font: 100%; } p { font-size: 1em; } blockquote { font-size: 1.1em; font-style: italic; padding-left: 28px; background: url('images/layout/quote-mark.png') no-repeat left top; } input { font-size: .9em; } small { font-size: 85%; } strong, th { font-weight: bold; } sub { font-size: smaller; } sup { font-size: smaller; } pre, code, kbd, samp { font-family: monospace, sans-serif; } /* normalize monospace sizing */ /* local fonts - custom ampersand */ @font-face { font-family: 'GoudyBookletter1911Regular'; src: url('fonts/goudybookletter1911/goudybookletter1911-openamp.eot'); src: url('fonts/goudybookletter1911/goudybookletter1911-openamp.eot?#iefix') format('eot'), url('fonts/goudybookletter1911/goudybookletter1911-openamp.woff') format('woff'), url('fonts/goudybookletter1911/goudybookletter1911-openamp.ttf') format('truetype'), url('fonts/goudybookletter1911/goudybookletter1911-openamp.svg#webfont0ZQvEa4G') format('svg'); font-weight: normal; font-style: normal; } /* non-semantic typography helper classes */ .caps { letter-spacing: 0.1em; font-variant: small-caps; text-transform: lowercase; } abbr { letter-spacing: 0.1em; font-variant: small-caps; text-transform: lowercase; } /* letter space abbrevations at 10% of the type size to enhance readability */ .amp { font-size: 1.2em; font-family: 'GoudyBookletter1911Regular', Baskerville, "Goudy Old Style", Palatino, "Book Antiqua", Georgia, serif; font-style: italic; font-weight: normal; } .with-slider-or-intro, .latest-articles, .footer-widgets, .footer-meta, #related-posts { border-top: 1px solid #e5e5e5; } #header, .project-title, .widget_archive li, .widget_categories li, .widget_nav_menu li, .widget_links li, .widget_pages li, .widget_recent_entries li, .widget_recent_comments li, .widget_rss li, .widget_meta li { border-bottom: 1px solid #e5e5e5; } #main .comment-list li { border-width: 1px 0 0 0; border-style: solid; border-color: #e5e5e5; } /*.single-post .share-this { border-width: 1px 0; border-style: solid; border-color: #e5e5e5; } */ input:not([type=submit]):not([type=file]), textarea { border: 1px solid #cccccc; } /* 5. H E A D I N G S ....................................................................................................................................... */ h1, h2, h3, h4, h5, h6 { font-family: 'Glass Antiqua', Georgia, "Times New Roman", Times, serif; color: #4f4640; } h1, h2, h3, h4, h5, h6 { font-weight: normal; text-rendering: optimizeLegibility; } /* www.aestheticallyloyal.com/public/optimize-legibility/ */ #main-headline { color: #444751; letter-spacing: normal; line-height: 40px; font: normal 22px 'Rochester', Georgia, "Times New Roman", Times, serif; } /* main headline at the top of the landing page */ .section-title a { float: right; } .project-link + h3 a { display: block; } #footer .widgettitle { } /* 6. L I N K S ....................................................................................................................................... */ a { text-decoration: none; } a:link { color: #55448D; } a:visited { color: #55448D; } a:hover { color: #4695AD; } a:active { color: #4695AD; position: relative; top: 1px; } a:hover, a:active { outline: none; } /* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */ h1 a, h2 a, h3 a, h4 a, h5 a { font-style: normal; } .csstransitions a, .csstransitions a img, .csstransitions input[type="submit"], .csstransitions button { -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: color .2s ease-in-out, opacity .2s ease-in-out, border-color .3s ease-in-out; transition: all .2s ease-in-out; } /* 7. L I S T S ....................................................................................................................................... */ #main ol, .page-content ol { list-style-type: decimal; } #main ul, .page-content ul { list-style-type: circle; } #main ol ol, .page-content ol ol, #main ul ul, .page-content ul ul { margin-left: 28px; } /* indent the lists wrapped by other lists */ .portfolio-gallery ul, .portfolio-gallery { list-style: none; } /* 8. F O R M S ........................................................................................................................................ */ /* colors for form validity */ input:valid, textarea:valid { } input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; } .no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } input[type="text"], select, textarea { margin: 0; width: 90%; } /* webkit browsers add a 2px margin outside the chrome of form elements */ select, input, textarea, button { font: 99% sans-serif; color: #444; } input[type="text"], textarea { padding: 7px; } select { max-width: 250px; padding: 4px 4px 4px 0; background: rgba(255, 255, 255, 0.7); border: 1px solid #CCCCCC; } button, input, textarea { font-family: inherit; font-size: 1em; } label { display: inline-block; margin-bottom: 5px; } label, input[type=button], input[type=submit], button { cursor: pointer; } /* hand cursor on clickable input elements */ .borderradius input[type="text"], .borderradius textarea, .borderradius .form-status, .borderradius select { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .boxshadow input[type="text"]:focus, .boxshadow textarea:focus { -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); } /* buttons */ input[type="submit"], button, input[type="button"] { padding: 5px 10px; background: #798089; color: #fff; color: rgba(255, 255, 255, 0.8); } input[type="submit"]:hover, button:hover, input[type="button"]:hover { background: #5f6875; color: #fff; color: rgba(255, 255, 255, 0.8); } input[type="submit"] { display: inline; vertical-align: top; } /* CSS3 submit buttons (with the help of modernizer classes - start */ .borderradius input[type="submit"], .borderradius button, input[type="button"] { -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } input[type="submit"]:active, button:active, input[type="button"]:active { position: relative; top: 1px; } /* CSS3 submit buttons - end */ /* align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */ input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; } /* style the text inputs only */ input:not([type=submit]):not([type=file]), textarea { padding: 7px; max-width: 450px; display: block; background: #fefefe; background: rgba(255, 255, 255, 0.3); color: #444; } .csstransitions input:not([type=submit]):not([type=file]), .csstransitions textarea { -moz-transition: all .2s ease-in; -webkit-transition: all .2s ease-in; -o-transition: all .2s ease-in; transition: all .2s ease-in; } .borderradius input:not([type=submit]):not([type=file]), .borderradius textarea { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } /* text inputs on focus */ input:not([type=submit]):not([type=file]):focus, textarea:focus { background: rgba(255, 255, 255, 0.5); } .csstransforms input:not([type=submit]):not([type=file]):focus, .csstransforms textarea:focus { -ms-transform: scale(1.02, 1.02); -webkit-transform: scale(1.02, 1.02); -o-transform: scale(1.02, 1.02); -moz-transform: scale(1.02, 1.02); transform: scale(1.02, 1.02); } /* 9. I M A G E S ........................................................................................................................................ */ img, a img { font-style: italic; } .csstransitions img { -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } /* wordpress built-in image-related classes */ img.alignright, .wp-caption.alignright { float: right; margin: 0 0 1em 1em; } img.alignleft, .wp-caption.alignleft { float: left; margin: 0 1em 1em 0; } img.aligncenter, .wp-caption.aligncenter { display: block; margin-left: auto; margin-right: auto; } img.aligncenter { margin-top: 20px; } a img.alignright { float: right; margin: 0 0 1em 1em; } a img.alignleft { float: left; margin: 0 1em 1em 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto; } #main img ~ img, #portfolio-item-meta img ~ img { margin-left: 20px; } .wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; font-style: italic; margin-bottom: 20px; } .wp-caption img, .wp-caption img a { margin: 0 !important; padding: 0; border: 0 none; } .wp-caption .wp-caption-text { padding: 0 4px 5px; margin: 0; } .wp-smiley { max-height: 13px; margin: 0 !important; } .gallery { margin: auto; float: left; width: 100%; list-style-type: none !important; } .gallery-image { border: 1px solid #efefef; margin-left: 0; } .gallery-icon a { display: block; } .gallery-caption { padding: 0 4px 5px; font-style: italic; margin-bottom: 0 !important; display: block; } .gallery-item { float: left; text-align: center; margin-left: 0; } .gallery-item { width: auto; float: left; margin: 10px 0 0 0; } .gallery-item img { margin: 0 !important; padding: 0; } .gallery-item a { float: left; border: none; margin: 0; padding: 0; } /* 10. O T H E R E L E M E N T S ........................................................................................................................................ */ td, td img { vertical-align: top; } td { padding: 2px 4px; } /* Set sub, sup without affecting line-height: gist.github.com/413930 */ sub, sup { font-size: 75%; line-height: 0; position: relative; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* pre { white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ } */ pre { overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */ white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera */ width: 99%; word-wrap: break-word; /* IE */ } pre { font-size: .9em; border: 1px solid #e9e9e9; line-height: 20px; background: #fff url('images/layout/pre-code-bg.png') repeat left top; overflow: auto; overflow-y: hidden; /* Hides vertical scroll created by IE */ } pre code { font-family: Consolas, "Courier New", Courier, monospace; margin: 0 0 0 40px; padding: 18px 0; display: block; } dt { font-size: 1.5em; font-weight: bold; } dd { display: list-item; list-style: square inside none; } #main table, .page-content table, .post-content table { border: 1px solid #e9e9e9; border-collapse: collapse; background: #fff; } #main tr:nth-of-type(odd), .page-content tr:nth-of-type(odd), .post-content tr:nth-of-type(odd) { background-color: #eff3f4; } /* zebra style table */ #main th, #main td, .page-content th, .page-content td, .post-content th, .post-content td { border: 1px solid #e9e9e9; padding: 9px 22px; } #main th, .page-content th, .post-content th { font-variant: small-caps; text-transform: lowercase; } #main caption, .page-content caption, .post-content caption { font-size: 1.2em; font-weight: bold; font-family: "PT Sans Narrow", sans-serif; } /* 11. S L I D E R S ....................................................................................................................................... */ #slides { position: relative; margin: 0 auto; } .csstransitions #slides a { -moz-transition: none; -webkit-transition: none; -o-transition: none; transition: none; } .slides-container { display: none; } /* Set to display none, prevents content flash */ #content .slider { background: url(images/shadow-slider.png) bottom center no-repeat; padding-bottom:20px; margin-bottom:10px; } /* slider pagination */ .pagination { text-align: center; position: absolute; bottom: 20px; left: 20px; z-index: 99; } .pagination li { display: inline; } .pagination li a { display: inline-block; width: 12px; height: 12px; overflow: visible; margin-left: 5px; background: url('images/layout/pagination.png') no-repeat 0 1px; } .pagination li.current a { background-position: 0 -15px; } .pagination li a:hover { background-position: 0 -15px; } .next, .prev, .pagination li a { text-indent: -9999px; /* hide the link text from the user */ } /* next-previous links */ .opacity #next-prev-links { opacity: 0; } #slides #next-prev-links img { display: block; } #slides .next, #slides .prev { position: absolute; width: 41px; height: 41px; display: block; z-index: 99; top: 48%; margin: -10px 15px 0; } #slides .prev { left: 15px; } #slides .next { right: 15px; } #slides .next:active, #slides .prev:active { position: absolute; top: 48.3%; } .slide { position: relative; width: 940px; overflow: hidden; } .slide img { margin-bottom: 0; } /* portfolio slider */ #single-item { width: 680px; padding-left: 20px; } #single-item .slide { width: 680px; height: 100px; } #single-item .slider-img { display: block; } #single-item figure { display: block; } /* Latest articles slider */ #latest-articles-slider { width: 940px; height: 210px; position: relative; } #latest-articles-slider > div { width: 620px; height: 210px; position: relative; float: left; } #latest-articles-slider .slides_container { overflow: hidden; display: none; width: 620px; position: relative; } .slides_container .latest-article { width: 620px; height: 210px; display:block; } .latest-articles-pagination { position: relative; left: 10px; } .latest-articles-pagination li { float: left; position: relative; width: 95px; margin-left: 7px; } .latest-articles-pagination li:first-child { margin-left: 0; } .latest-articles-pagination li:nth-child(4n + 4) { margin-left: 0; } .latest-articles-pagination li img { border: 1px solid transparent; } .latest-articles-pagination li.current img { border: 1px solid #b7b7b7; } /* 12. L I G H T B O X A N D M O D A L W I N D O W ....................................................................................................................................... */ /* remove the borders and text shadows in pretty photo lightbox */ .pp_pic_holder { text-shadow: none; } /* stop the previous and active links from flickering, when clicked */ .pp_arrow_previous:active, .pp_arrow_next:active { position: static; top: 0; } /* modal window */ #lean_overlay { position: fixed; z-index: 100; top: 0px; left: 0px; height: 100%; width: 100%; display: none; background: #fff url('images/layout/modal-bg.png'); } #modalContactForm { display: none; left: 51%; background: #fff; padding: 36px 20px 20px 40px; } #close-reveal-modal { font-size: 22px; line-height: .5; position: absolute; top: 8px; right: 11px; color: #aaa; font-weight: bold; cursor: pointer; } #close-reveal-modal:hover { color: #7c7c7c; } .borderradius #modalContactForm { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .boxshadow #modalContactForm { -webkit-box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.2); } /* 13. H E A D E R ........................................................................................................................................ */ #main-header { width:100%; height:232px; background:url(images/littleways-bg1.jpg) top left repeat-x; } #main-logo { /*width:1368px; margin:0 auto; background:url(images/littleways-bg.jpg) top center no-repeat; padding:0 119px;*/ text-align:center; } #header { display: table; } #logo, #toplogo, #menu { display: table-cell; vertical-align: middle; padding: 0 0 30px 0; } #logo { float:right; } #wp-title-logo { color: #444652; font: normal 400 37px 'Rochester', Georgia, "Times New Roman", Times, serif; } .csstransitions #logo { -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .opacity #logo, .opacity #wp-title-logo { opacity: 0.75; } .opacity #logo:hover, .opacity #wp-title-logo:hover { opacity: 1; } #cart-link { float:right; text-align: right; } #secondary-wrapper p { font: normal 13px Arial, Helvetica, "Nobile", sans-serif; } #social-networking { list-style: none; } #social-networking li { float: right; } #social-networking a img { border: none; display: block; padding-left: 6px; } .opacity #social-networking a img { opacity: .3; } .opacity #social-networking a:hover img { opacity: .7; } /* 14. M A I N N A V I G A T I O N ....................................................................................................................................... */ #menu { display: table-cell; vertical-align: middle; } #menu li { float: left; position: relative; display: block; } #menu .menu > li { margin-right: 10px; } #menu .menu > li:after { position: absolute; content: " "; width: 100%; height: 100%; } /* position the pseudo element right beneath a top-level li element, so we can use the mentioned pseudo element as a way to introduce some extra space between the sub-menu and the currently hovered top-level link */ .borderradius #menu .menu > li { -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; } #menu a { display: block; line-height: 20px; text-transform: uppercase; font-size: 16px; border: 1px solid transparent; padding: 3px 7px; } .csstransitions #menu a { -moz-transition: all .1s ease-in-out; -webkit-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; } /* DROPDOWN */ #menu .sub-menu { position: absolute; margin: 10px 0 0 0; z-index: 9999; left: -9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */ } .boxshadow #menu .sub-menu { -webkit-box-shadow: 0 0 4px 1px rgba(0, 0, 0, .05); -moz-box-shadow: 0 0 4px 1px rgba(0, 0, 0, .05); box-shadow: 0 0 4px 1px rgba(0, 0, 0, .05); } .opacity #menu .sub-menu { opacity: 0; /* Set initial state to transparent */ } #menu .sub-menu li { margin-left: 0; float: none; /* Introducing a padding between the li and the a give the illusion spaced items */ } #menu .sub-menu a { white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */ } .csstransitions #menu li ul { -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; } #menu li:hover ul { /* Display the dropdown on hover */ left: 0; /* Bring back on-screen when needed */ } .opacity #menu li:hover ul { opacity: 1; /* Fade to opaque */ } #menu li:hover ul li a:hover { /* Set styles for dropdown when items are hovered */ background: #56575e; background: rgba(78, 79, 86, .8); border: 1px solid transparent; border-bottom: none; color: #fff; } /* Dropdown links */ #menu .sub-menu a { padding: 4px 9px; text-transform: none; border: 1px solid transparent; background: #ededed; line-height: 20px; /* reset to normal line height */ font-size: 16px; border: 1px solid #e0e0e0; border-bottom: none; background: #fff; color: #777777; } #menu .sub-menu li:last-child a { border-bottom: 1px solid #e0e0e0; } .borderradius #menu .sub-menu li:first-child a { -webkit-border-top-right-radius: 1px; -webkit-border-top-left-radius: 1px; -moz-border-radius-topright: 1px; -moz-border-radius-topleft: 1px; border-top-right-radius: 1px; border-top-left-radius: 1px; } .borderradius #menu .sub-menu li:last-child a { -webkit-border-bottom-right-radius: 1px; -webkit-border-bottom-left-radius: 1px; -moz-border-radius-bottomright: 1px; -moz-border-radius-bottomleft: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; } #menu a:hover, #menu .current-menu-item > a:hover, #menu .selectedLava > a { color: #f0f0f0; } /* top-level menu links */ /* Current menu item */ #menu .current-menu-item > a { color: #f0f0f0; } #menu .sub-menu .current-menu-item > a { color: #4f4640; } #menu .sub-menu .current-menu-item > a:hover { text-decoration: none; } /* sub menu indicator generated by jQuery plugin called superfish */ #menu .parent > a { position: relative; padding-right: 17px; } /* note: the "parent" class is generated by a custom walker */ #menu .parent > a:after { content: " "; text-indent: -9999px; position: absolute; margin: 8px 0 0 5px; width: 6px; height: 4px; background: url('images/layout/menu-arrow.png') no-repeat left top; } .boxshadow #menu .backLava, .boxshadow #menu .selectedLava { -webkit-box-shadow: inset 0 0 4px 1px rgba(0, 0, 0, .05); -moz-box-shadow: inset 0 0 4px 1px rgba(0, 0, 0, .05); box-shadow: inset 0 0 4px 1px rgba(0, 0, 0, .05); } #menu .backLava { background-color: #D0336A; background-color: rgba(208, 51, 106, .6); } #menu .selectedLava { background-color: #D0336A; background-color: rgba(208, 51, 106, .6); } /* 15. P A G E S / E C O M M E R C E ........................................................................................................................................ */ .two-cols-right-fixed #content .page-content, .two-cols-left-fixed #content .page-content, .sidebar { display: inline; } .two-cols-right-fixed #content .page-content { margin-right: 30px; width: 690px; } .two-cols-left-fixed #content .page-content { margin-left: 30px; width: 690px; } .two-cols-right-fixed .sidebar { width: 220px; } .two-cols-left-fixed .sidebar { width: 220px; } /* sidebar positioning */ .two-cols-left-fixed .sidebar { float: left; } .two-cols-left-fixed .page-content { float: right; } .two-cols-right-fixed .page-content { float: left; } .two-cols-right-fixed .sidebar { float: right; } .page-content table.cart img, #content .page-content table.cart img { width:auto; margin-top: 15px; } .reset_variations { display:block; } .price { font-size:1.35em; } #content .checkout .form-row label { display:inline; } #customer_details, .cart, .cart_totals, .shipping-calculator-form, #order_review, .shop_table, .order_details, .customer_details, .col2-set.addresses { font-family: Arial, Helvetica, sans-serif; font-size: 13px; } ul#shipping_method input, #shipping_method label { display:inline; float:none; } ul#shipping_method span.amount { display: block; margin-left: 24px; } #content .cart_totals { width: 55%; } #content .cart_totals table { width: 100%; } #payment input { display: inline; } .related.products { width:48%; } .customer_details dt { font-size: 12px; } #calc_shipping_country, #calc_shipping_state, #shipping_country, #billing_country { width: 162px; } .cart th, .cart-totals th { font-size: 110%; } .cart .actions, .place-order { font: 18px/22px 'Glass Antiqua', Garamond, Georgia, serif, cursive; } input.minus:active { position:inherit; top:auto; } .variation dt, .variation dd { font-size: 12px; } .product_list_widget a { font-size: 15px; line-height: 17px; } #content ul.cart_list li img, #content ul.product_list_widget li img { width: auto; } /* 16. H O M E T E M P L A T E ........................................................................................................................................ */ .no-slider-and-intro { margin-bottom: 30px; } .with-slider-or-intro, .latest-articles { margin-bottom: 30px; padding-top: 30px; } .latest-articles { /*margin-top: -20px; */ } .four-items-per-row.latest-projects .latest-project a span, .four-items-per-row .project-link span { top: 175px; left: 75px; } .three-items-per-row.latest-projects .latest-project a span, .three-items-per-row .project-link span { top: 210px; left: 116px; } .two-items-per-row.latest-projects .latest-project a span, .two-items-per-row .project-link span { top: 330px; left: 194px; } .latest-article-title { line-height: 1; } .latest-article-content .read-more { margin-top: 17px; } /* 17. B L O G ........................................................................................................................................ */ .post time { text-transform: lowercase; font-variant: small-caps; } .post-meta li { margin: 0 0 3px 0; } .post-meta.column-width li { max-width: 215px; } /* reduce the width of the post meta box if the sidebar is disabled */ #blog-posts .post-meta { list-style: none; margin: 0; } /*.post-content > p:first-line { text-transform: lowercase; font-variant: small-caps; letter-spacing: .1em; font-size: 1.056em; }*/ .post-content .read-more, .blog-post .read-more { margin-top: 10px; } .post-title + p { margin-bottom: 10px; } /* style the read more link in the search results */ h2 .post-title { position: relative; line-height: 1; color: #47413e; } .post-thumb { margin: 0 0 3px 0; } #blog-posts .post-thumb a img { display: block; margin-bottom: 0; } /*.share-this { clear: both; margin-top: 30px; position: relative; } .share-this:before { content: " "; position: absolute; top: 2px; left: 0; width: 100%; height: 1px; text-shadow: none; } #content .share-this {float: right; width: 100px; clear: none; position: absolute; top: 343px; margin-left: 620px; }*/ /* position the elements on the page properly, depending on the position of the sidebar */ .post .post-content-position { position: relative; left: 20px; width: 520px; } .full-width-post { position: relative; left: 10px; } .twitter-share-button { display: inline-block; text-indent: -9999px; } .blog-pagination a { margin-right: 13px; text-transform: uppercase; } .page-link-title { margin-right: 16px; } .share-this div, .share-this .share { float: left; } /*.share-this .share { display: inline-block; padding-right: 20px; } /*.single-post .share-this { padding: 20px 0; }*/ /* WordPress built-in class for handling sticky posts */ .sticky { } /* 18. P O R T F O L I O ........................................................................................................................................ */ #filter li { display: inline; } #filter a, #filter li:first-child { margin-right: 13px; text-transform: uppercase; } #filter .active a { border-bottom: 1px solid; position: relative; } #filter .active a:after { position: absolute; content: ' '; left: 0; bottom: -3px; width: 100%; height: 1px; border-bottom: 1px solid; } .project-link { position: relative; display: block; overflow: hidden; } .latest-projects .latest-project a span, .portfolio-item .project-link span, #related-posts .project-link span { opacity: 0; display: block; background: url('images/layout/view-details.png') no-repeat; width: 68px; height: 68px; position: absolute; z-index: 100; text-indent: -9999px; } /* make sure the columns are properly aligned, when the projects are filtered on the portfolio page, by clearing the floats on items that contain a class of "alpha". * Do the same for the "Related Projects" section in the single item view, and the "Latest Project" section on the home page. */ .portfolio-item.alpha, .related-post.alpha, .latest-project.alpha { clear: both; } .portfolio-item { overflow: hidden; } .item-heading h2 { margin-bottom: 7px; } /* S I N G L E */ .project-title a { font-size: 0.75em; } .item-categories li { float: left; margin-top: -2px; margin-bottom: 10px; } .item-categories li:first-child { margin: 0 10px 0 0; } .item-term { display: block; padding: 3px 5px 2px; background: #f3f3f3; background: rgba(0, 0, 0, .05); margin-right: 7px; } .borderradius .item-term { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } #single-item { text-align: right; } #related-posts { margin-bottom: 30px; padding-top: 30px; } /* 19. W I D G E T S ........................................................................................................................................ */ .widget li { margin: 0 0 15px 0; } .widget_archive li a, .widget_categories li a, .widget_nav_menu li a, .widget_links li a, .widget_pages li a, .widget_recent_entries li a, .widget_recent_comments li a, .widget_rss li a, .widget_meta li a { display: block; } /* Insert a right arrow on the right-hand side of each of the widget's links, when they're hovered over */ .widget_archive li a:after, .widget_categories li a:after, .widget_nav_menu li a:after, .widget_links li a:after, .widget_pages li a:after, .widget_recent_entries li a:after, .widget_recent_comments li a:after, .widget_rss li a:after, .widget_meta li a:after { content: '\2192'; float: right; visibility: hidden; font-size: 1.29em; position: relative; bottom: 2px; } .widget_archive li a:hover:after, .widget_categories li a:hover:after, .widget_nav_menu li a:hover:after, .widget_links li a:hover:after, .widget_pages li a:hover:after, .widget_recent_entries li a:hover:after, .widget_recent_comments li a:hover:after, .widget_rss li a:hover:after, .widget_meta li a:hover:after { visibility: visible; } .widget_nav_menu .sub-menu { margin-top: 15px; } .widget_nav_menu .sub-menu li { margin-left: 2em; } #footer .widget_nav_menu .sub-menu li:last-child { margin-bottom: 15px; } /* flickr widget */ #flickr a { border-bottom: none; } #flickr a:hover { background: none; } #flickr div { display: inline; } #flickr img { width: 42px; height: 42px; padding: 0 13px 10px 0; } .csstransforms #flickr img:hover { -ms-transform: scale(1.20, 1.20); -webkit-transform: scale(1.20, 1.20); -o-transform: scale(1.20, 1.20); -moz-transform: scale(1.20, 1.20); transform: scale(1.20, 1.20); } /* twitter widget */ .tweets { font-style: italic; } .read-more, .timesince { display: block; } .tweets li { padding: 0 0 0 25px; background: url('images/layout/twitter-feed-icon.png') no-repeat 0 6px; /* wrap long URLs, strings of text, and other content */ white-space: pre; /* CSS 2.0 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3.0 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: -moz-pre-wrap; /* Mozilla */ word-wrap: break-word; } /* popular posts widget */ .widget.popular-posts ul { clear: both; } .widget.popular-posts ul:before, .widget.popular-posts ul:after { content: "\0020"; display: block; height: 0; visibility: hidden; } .widget.popular-posts ul:after { clear: both; } .popular-posts ul li { position: relative; clear: both; } /* title styles */ .wpp-post-title { } /* thumbnail styles */ .wpp-thumbnail { float: left; margin-right: 7px; margin-bottom: 7px; } .wppnothumb, .wppgen { } /* excerpt styles */ .wpp-excerpt {} /* Stats tag styles */ .post-stats { font-size: 0.9em; display: block; } .wpp-comments {} .wpp-views {} .wpp-author { } .wpp-date {} /* WP-PostRatings styles */ .wpp-rating {} /* calendar widget */ #wp-calendar thead { border-bottom: 1px solid; } #wp-calendar th, #wp-calendar tbody td { text-align: center; padding: 3px 6px; } #wp-calendar tfoot td { padding-top: 3px; } #wp-calendar caption { font-size: 1.3em; font-weight: bold; text-align: center; margin-bottom: 15px; } /* categories widget */ .widget .children { /* indented lists */ padding-left: 1em; } /* 20. S H O R T C O D E S ........................................................................................................................................ */ /* Fluid Column Shortcodes */ .one_half { width: 48%; } .one_third { width: 30.66%; } .two_third { width: 65.33%; } .one_fourth { width: 22%; } .three_fourth { width: 74%; } .one_fifth { width: 16.8%; } .two_fifth { width: 37.6%; } .three_fifth { width: 58.4%; } .four_fifth { width: 67.2%; } .one_sixth { width: 13.33%; } .five_sixth { width: 82.67%; } .one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth { position:relative; margin-right:4%; float:left; } .last { margin-right: 0 !important; clear:right; } .clearboth {clear: both; display: block; font-size: 0; height: 0; line-height: 0; width: 100%; } /* contact info */ .contact-info-shortcode { list-style: none !important; } .contact-info-shortcode li { padding-left: 45px; min-height: 33px; padding-top: 4px; position: relative; margin: 0 0 15px 0; } .contact-info:before { content: " "; background: url('images/layout/contact-info-icons.png') no-repeat top left; width: 33px; height: 33px; display: block; position: absolute; top: 0; left: 0; } .street-address, .city-zip, .state { display: block; } .location:before { background-position: -39px 0; } .telephone:before { background-position: -78px 0; } .my-mail:before { background-position: top left; } /* contact form */ .success { color: #7b9b2f; } .error { color: #e44141; } .form-status { display: none; background: #eae8e8; background: rgba(0, 0, 0, 0.06); max-width: 400px; padding: 16px 10px; position: relative; margin-top: 35px; } .contact-form .status-icon { display: block; position: absolute; top: -10px; left: -5px; background: url('images/layout/info-icons.png') no-repeat left top; width: 28px; height: 28px; } .contact-form .success .status-icon { background-position: -33px 0; } .contact-form .loading-img { position: relative; left: 10px; top: 4px; border: none; } /* loading gif at the end of the contact form */ .invalid-field { border-color: #edaaaa; } /* 21. C O M M E N T S ........................................................................................................................................ */ #main .comment-list { list-style: none; } #number-of-comments { margin-top: 40px; } .comment { margin: 0 0 30px 0; } .comment-author { position: relative; } .avatar { float: left; margin: 0 10px 0 0; } .author-link, .author-meta { line-height: 1; } .author-link { margin-bottom: 10px; } .author-meta { margin: 2px } #main .children { /* indented comments */ padding-left: 4em; list-style: none; } #cancel-comment-reply-link { margin-left: 13px; } .form-allowed-tags { max-width: 450px; } /* comments navigation */ .comments_navigation { text-transform: uppercase; font-size: 1.2em; } .comments_navigation .page-numbers { padding-right: 10px; } /* wordpress built-in class for highlighting the author comments */ .bypostauthor > article { background: url('images/layout/post-author.png') no-repeat right top; } /* 22. 4 0 4 P A G E .......................................................................................................................................... */ #not-found { text-align: center; } #not-found-heading { font-size: 150px; font-weight: bold; } #not-found-img { border: none; } #not-found-form input { width: 500px; margin: 0 auto; } /* 23. F O O T E R ........................................................................................................................................ */ #footer .footer-widgets li:last-child { margin-bottom: 0; } .footer-widgets { margin-bottom: 30px; padding-top: 30px; } .footer-meta { padding: 30px 0 30px; } #back-top { float: right; text-transform: uppercase; letter-spacing: 0.1em; } /* link that takes the user back to the top of the page */ #back-top span { position: relative; top: -3px; } #footer-logo { text-align: center; } .opacity #footer-logo img { opacity: .3; } .opacity #footer-logo a:hover img { opacity: .7; } /* 24. I N T E R N E T E X P L O R E R .......................................................................................................................................... */ .ie button, .ie input[type="submit"] { width: auto; overflow: visible; } /* make buttons play nicely in ie */ .ie textarea { overflow: auto; } /* remove textarea scrollbars */ .ie .post-time { font-size: 0.95em; } /* IE 9 */ .ie9 #slides .next, .ie9 #slides .prev { opacity: 0; } .ie9 #menu li:hover ul, .ie9 .menu > li:hover:after ul { opacity: 1; /* Fade the sub-menu to opaque */ } /* IE 8 */ .ie8 #main .comment-list { list-style: none; } .ie8 #slides .next, .ie8 #slides .prev { visibility: hidden; } .ie8 .latest-projects a span, .ie8 .portfolio-item .project-link span, .ie8 #related-posts .project-link span { filter: alpha(opacity=0); } .ie8 .latest-projects a span, .ie8 .portfolio-item .project-link span, .ie8 #related-posts .project-link span { background: url('images/layout/view-details.jpg') no-repeat; } .ie8 #social-networking a img, .ie8 #footer-logo img { background: #fff; -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='ffffff') progid:DXImageTransform.Microsoft.Alpha(opacity=30)"; } .ie8 #social-networking a:hover img, .ie8 #footer-logo a:hover img { background: #fff; -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='ffffff') progid:DXImageTransform.Microsoft.Alpha(opacity=70)"; }