/* Theme Name: HyperMind Theme URI: http://www.onioneye.com Description: A Premium Portfolio Wordpress Theme. Author: 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.0.3 Designed & Handcrafted by OnionEye */ /* T A B L E O F C O N T E N T S ........................................................................................................................................ 1. General Layout Styles 2. Technical and Creative Typography 3. Text Selection 4. Grid 5. Common and Reusable Styles 6. Link Styles 7. Headlines and Titles 8. Images 9. Forms 10. Header Styles 11. Site Navigation 12. Portfolio Slider 13. Portfolio 14. Pages 15. Posts and Content Styles 16. Page Navi Styles 17. Comment Styles 18. Comment Form Styles 19. Sidebars and Asides 20. Footer Styles 21. Search Page 22. 404 Page 23. Shortcodes 24. Internet Explorer */ /* 1. G E N E R A L L A Y O U T S T Y L E S ........................................................................................................................................ */ body { background: #fefefe; } ol, ul { list-style: none inside none; margin: 0; } /* 2. T E C H N I C A L A N D C R E A T I V E T Y P O G R A P H Y ........................................................................................................................................ */ body, button, input, select, textarea { font: 300 14px/22px 'Merriweather', Georgia, "Times New Roman", Times, serif; color: #4f4640; } b, strong { font-weight: normal; color: #211304; } /* vertical rhythm */ #header { margin-bottom: 66px; } /* 3 * 22px = 66px */ #logo { padding: 44px 40px 44px 0; } /* 39px + 5px = 44px */ #menu { padding: 39px 0 39px 0; } .menu > li { padding: 5px 0; } .one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth { margin-bottom: 22px; } #wp-title-logo { font-size: 32px; line-height: 44px; } #drop-down-tab #tagline, #about-drop-down { padding: 44px 0 22px 0; } #sort-cat-btn, #active-category { display: inline-block; margin: 0 auto 22px; } #main-content { margin-bottom: 66px; } #footer .footer-main .footer-page { padding: 66px 0 44px 0; } #footer .footer-secondary { padding: 22px 0 0 0; } fieldset { margin: 0 0 22px 0; padding: 0; } #footer small { font-size: 84%; } p, h1, h2, h3, h4, h5, h6 { margin: 0 0 22px 0; } .project-title { font-size: 30px; line-height: 44px; } #project-wrapper { margin: 44px auto 66px; top: 22px; } #portfolio-item-meta { margin: 22px 0; } .item-description { margin-top: 22px; } .post { margin: 0 0 110px 0; } /* 22 * 5 = 110 */ .single-post .post { margin-bottom: 66px; } .main-meta { line-height: 60px; margin-bottom: 22px; } .post-content img, .page-content img { margin: 0 0 22px 0; } .post-content .read-btn { margin: 22px 0 0; } .secondary-meta { margin: 22px 0; } .page-navigation, .wp-prev-next { margin: -22px 0 1em; } .single-title, .page-title { margin-bottom: 22px; } .page-title { padding: 22px 0 22px 0; } .single-post .meta { padding: 11px 0; margin-bottom: 44px; } .next-prev-posts { margin: 66px 0 22px; padding: 11px 0; } #respond .help { margin: 0 0 22px 0; } #allowed_tags { margin: 22px 0 22px 0; } .form-status { margin: 22px 0 0 0 !important; } #respond { margin: 22px 20px 22px 20px; padding-bottom: 22px; } #respond form[method=post] { margin: 22px 0; } .nocomments { margin: 0 22px 1.1em; } #footer .contact-info-shortcode, #main-content .contact-info-shortcode { margin-bottom: 22px; } /* local font */ @font-face { font-family: 'HeroLight'; src: url('fonts/hero_light-webfont.eot'); src: url('fonts/hero_light-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/hero_light-webfont.woff') format('woff'), url('fonts/hero_light-webfont.ttf') format('truetype'), url('fonts/hero_light-webfont.svg#HeroLight') format('svg'); font-weight: normal; font-style: normal; } /* borders */ .secondary-meta, .sidebar .widgettitle { background: url('images/border.gif') repeat-x left bottom; } .sidebar .widgettitle { padding-bottom: 8px; } .single-post .meta, .next-prev-posts { background: url('images/border.gif') repeat-x left bottom, url('images/border.gif') repeat-x left top; } .no-multiplebgs .single-post .meta, .no-multiplebgs .next-prev-posts { border: 1px solid #e3e5e5; border-width: 1px 0; } /* 3. T E X T S E L E C T I O N ........................................................................................................................................ */ /* Highlighted Text */ ::selection { background: #b1e5ed; color: #fff; text-shadow: none; } /* Firefox */ ::-moz-selection { background: #b1e5ed; color: #fff; text-shadow: none; } /* 4. 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 } /* custom portfolio grid */ .container_12 .portfolio_grid_3 { width: 235px; display: inline; float: left; } /* 5. C O M M O N A N D R E U S A B L E S T Y L E S ........................................................................................................................................ */ /* >> 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; } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* floats */ .left { float: left; } .right { float: right; } /* text alignment */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } /* Break words that are too long to fit into its container */ .word-break { white-space: -moz-pre-wrap; /* Mozilla */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ } /* highlighting search term on search page */ mark, .search-term { background: #EBE16F; } /* alerts & notices */ .help, .info, .error, .success { margin: 10px; padding: 5px 18px; border: 1px solid #cecece; } .help { border-color: #e8e27a; background: #fffdd3; } .info { border-color: #92cae4; background: #d5edf8; } .error { border-color: #fbc2c4; background: #fbe3e4; } .success { border-color: #c6d880; background: #e6efc2; } /* 6. L I N K S T Y L E S ........................................................................................................................................ */ a, a:visited { color: #27b4c6; text-decoration: none; position: relative; } a:hover, a:focus { color: #999; outline: none; } a:active { bottom: -1px; } /* on click */ a:link { -webkit-tap-highlight-color : rgba(0,0,0,0); /* this highlights links on Iphones / iPads */ } .csstransitions a { -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } /* 7. H E A D L I N E S A N D T I T L E S ........................................................................................................................................ */ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: #443d39; font-weight: bold; font-family: 'Abel', Georgia, "Times New Roman", Times, serif; } h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a, .h6 a { text-decoration: none; } h1, .h1 { font-size: 22px; line-height: 22px; color: #6d6560; font-weight: bold;} h2, .h2 { font-size: 19px; line-height: 22px; font-weight: bold;} h3, .h3 { font-size: 17px; line-height: 22px; font-weight: bold;} h4, .h4 { font-size: 15px; line-height: 22px; } h5, .h5 { font-size: 14px; line-height: 22px; } h6, .h6 { font-size: 13px; line-height: 22px; } #tagline { text-align: center; text-transform: none; font-size: 18px; line-height: 24px; font-weight: 300; font-family: 'Merriweather', Georgia, "Times New Roman", Times, serif; color: #665950; } #tagline a { color: #6cc8d1; } #tagline a:hover { border-color: #fff; border-bottom: 1px solid #79cfd8; } /* 8. I M A G E S ........................................................................................................................................ */ .csstransitions img { -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } /* 9. 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, textarea { padding: 8px 10px; } input, textarea, select { outline: none; } 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% 'Merriweather', Georgia, "Times New Roman", Times, serif; font-weight: 300; } select { max-width: 250px; padding: 4px 4px 4px 0; background: rgba(255, 255, 255, 0.7); border: 1px solid #e3e5e5; } 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: 2px; -webkit-border-radius: 2px; border-radius: 2px; } /* buttons */ input[type="submit"], button, input[type="button"], #sort-cat-btn, .comment-reply-link, .read-more, .shortcode-button { cursor: pointer; border: 1px solid #DDD; border-radius: 2px; text-shadow: 0 1px 1px white; box-shadow: 0 1px 1px #fff; padding: 9px 13px; white-space: nowrap; background: #fff; background: rgba(255, 255, 255, 0.8); cursor: pointer; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } input[type="submit"]:hover, button:hover, input[type="button"]:hover, #sort-cat-btn:hover, .comment-reply-link:hover, .read-more:hover, .shortcode-button:hover { border-color: #bfbfbf; background: linear-gradient(top,white 0,#E0E0E0 100%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 3px #fff; } input[type="submit"]:active, button:active, input[type="button"]:active, #sort-cat-btn:active, #sort-cat-btn:focus, .comment-reply-link:active, .comment-reply-link:focus, .read-more:active, .read-more:focus, .shortcode-button:active, .shortcode-button:focus { border: 1px solid #AAA; border-bottom-color: #CCC; border-top-color: #999; box-shadow: inset 0 1px 2px #bfbfbf; background: linear-gradient(top,#E6E6E6 0,gainsboro 100%); } 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: 2px; -webkit-border-radius: 2px; border-radius: 2px; } 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 { border: 1px solid #e3e5e5; padding: 10px 8px; max-width: 450px; display: block; background: #fff; background: rgba(255, 255, 255, 0.95); } .csstransitions input:not([type=submit]):not([type=file]), .csstransitions textarea, .csstransitions select { -moz-transition: all .2s ease-in; -webkit-transition: all .2s ease-in; -o-transition: all .2s ease-in; -ms-transition: all .2s ease-in; transition: all .2s ease-in; } .borderradius input:not([type=submit]):not([type=file]), .borderradius textarea { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .boxshadow input:not([type=submit]):not([type=file]), .boxshadow textarea, .boxshadow select { -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.028); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.028); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.028); } .boxshadow input:not([type=submit]):not([type=file]):focus, .boxshadow textarea:focus, .boxshadow select:focus { -webkit-box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.028); -moz-box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.028); box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.028); } input[type="text"]:focus, input:not([type=submit]):not([type=file]):focus, textarea:focus, select:focus { border-color: #cecece; } /* 10. H E A D E R S T Y L E S ........................................................................................................................................ */ #header { background: #f6fafb; } /* top bar - logo and navigation */ .header-main { position: relative; z-index: 9999; min-height: 50px; background: #fff; border-bottom: 1px solid #edefee; } .boxshadow .header-main { -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.035); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.035); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.035); } .header-main { background: rgb(255,255,255); /* Old browsers */ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(254,254,255,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(254,254,255,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(254,254,255,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(254,254,255,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(254,254,255,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(254,254,255,1) 100%); /* W3C */ } .logo-nav { display: table; } #logo, #menu { display: table-cell; vertical-align: middle; } #menu > ul { float: right; } #logo a img { display: block; } #wp-title-logo { color: #444652; } .csstransitions #logo img { -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .opacity #logo img, .opacity #wp-title-logo { opacity: 0.8; } .opacity #logo a:hover img, .opacity #wp-title-logo:hover { opacity: 1; } /* secondary header bar - meta info */ .header-secondary { position: relative; z-index: 999; height: 50px; border-bottom: 1px solid #edefee; } .boxshadow .header-secondary { -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.025); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.025); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.025); } .header-secondary { background: rgb(246,250,251); /* Old browsers */ background: -moz-linear-gradient(top, rgba(246,250,251,1) 0%, rgba(248,250,251,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,250,251,1)), color-stop(100%,rgba(248,250,251,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(246,250,251,1) 0%,rgba(248,250,251,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(246,250,251,1) 0%,rgba(248,250,251,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(246,250,251,1) 0%,rgba(248,250,251,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(246,250,251,1) 0%,rgba(248,250,251,1) 100%); /* W3C */ } .header-secondary .meta-tabs, .header-secondary .contact-info { line-height: 50px; } .header-secondary .meta-tabs { float: left; } .header-secondary .contact-info { float: right; } /* about and search buttons */ .meta-tabs div { float: left; position: relative; z-index: 10; background: #fff; border: 1px solid #edefee; border-width: 0 1px 0 0; } .boxshadow .meta-tabs div:hover { -webkit-box-shadow: 0 0 1px 3px rgba(0, 0, 0, 0.025), inset 0 0 0 1px rgba(237, 239, 238, 0.5); -moz-box-shadow: 0 0 1px 3px rgba(0, 0, 0, 0.025), inset 0 0 0 1px rgba(237, 239, 238, 0.5); box-shadow: 0 0 1px 3px rgba(0, 0, 0, 0.025), inset 0 0 0 1px rgba(237, 239, 238, 0.5); } .meta-tabs div:hover { z-index: 9999; background: -moz-linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.9)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,0.9) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,0.9) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,0.9) 0%,rgba(255,255,255,0) 100%); /* IE10+ */ background: linear-gradient(top, rgba(255,255,255,0.9) 0%,rgba(255,255,255,0) 100%); /* W3C */ } .meta-tabs > div:first-child { border-width: 0 1px 0 1px; } .meta-tabs .about, .meta-tabs .search-portfolio { background: #f6fafb; border-color: #e3e5e5; width: 51px; height: 50px; cursor: pointer; } .meta-tabs .about:hover span, .meta-tabs .search-portfolio:hover span { opacity: 0.7; } .meta-tabs .about .about-icon { position: relative; display: block; background: url('images/main-icons.png') no-repeat 18px 18px; opacity: 0.4; } .meta-tabs .search-portfolio .search-icon { position: relative; display: block; background: url('images/main-icons.png') no-repeat 18px -23px; opacity: 0.4; } .meta-tabs .active-tab { background: #edece8; } .meta-tabs .active-tab.about:after { content: " "; display: block; position: absolute; left: 17px; bottom: -7px; width: 0; height: 0; border-top: 7px solid #edece8; border-left: 9px solid transparent; border-right: 9px solid transparent; } .meta-tabs .active-tab.about:hover:after { border-top-color: #edeff2; } .active-tab.about { border-right-color: #e2ded9; border-left-color: #e2ded9; } .meta-tabs .active-tab:hover .about-icon, .meta-tabs .active-tab:hover .search-icon { background-position: 18px -179px; } /* search form */ .meta-tabs .search-form { position: relative; float: left; overflow: hidden; width: 0; } .meta-tabs .main-search fieldset { margin: 0; } .meta-tabs .main-search input { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; display: block; position: relative; z-index: 999999; background: #fff; height: 50px; width: 250px; border-width: 0 1px 0 0; margin: 0 0 0 0; padding: 0 13px; } .meta-tabs .search-form input:focus { border-color: #e3e5e5; } .boxshadow .meta-tabs .search-form input { -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02); } .borderradius .meta-tabs .search-form input { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } /* email and phone */ .header-secondary .contact-info div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 50px; height: 50px; float: left; padding: 0 20px 0; border: 1px solid #e3e5e5; border-width: 0 1px 0 0; } .header-secondary .contact-info div:hover { background: #fcfcfc; } .header-secondary .contact-info div:hover span { opacity: 0.5; } .header-secondary .contact-info div:first-child { border-width: 0 1px 0 1px; } .phone-no .phone-icon, .email-address .mail-icon { opacity: 0.4; margin-right: 7px; position: relative; z-index: 99; float: left; width: 20px; height: 100%; background: url('images/main-icons.png') no-repeat; } .phone-no .phone-icon { background-position: 0 -60px; } .email-address .mail-icon { background-position: 0 -100px; } /* secondary header bar - transitions */ .csstransitions .meta-tabs div, .header-secondary .contact-info div, .header-secondary .contact-info span { -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -o-transition: background .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .meta-tabs .about .about-icon, .meta-tabs .search-portfolio .search-icon, #social-networking .network-icon { -moz-transition: opacity .3s ease-in-out; -webkit-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; -ms-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; } /* fixed social networking icons/links */ #social-networking { position: fixed; z-index: 99999; bottom: 200px; right: 0; } #social-networking ul { } #social-networking li { } #social-networking a { display: block; width: 40px; height: 40px; position: relative; color: #493F38; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8em; background: #eee; border: 1px solid #e0e0e0; border-width: 1px 0 0 1px; } #social-networking li:last-child a { border-width: 1px 0 1px 1px; } #social-networking .network { white-space: nowrap; display: block; position: absolute; left: 0; top: -1px; z-index: -1; height: 41px; opacity: 0; line-height: 43px; padding: 0 22px 0 13px; background-color: inherit; } #social-networking li:first-child .network, #social-networking li:last-child .network { height: 42px; line-height: 43px; } #social-networking .network-icon { display: block; width: 100%; height: 100%; background: url('images/social-networks.png') no-repeat 50% 50%; opacity: 0.4; } #social-networking a:hover .network-icon { opacity: 0.6; } #social-networking #twitter-link:hover { background-color: #bbf6f7; border-color: #bbf6f7; } #social-networking #facebook-link:hover { background-color: #9fd6f4; border-color: #9fd6f4; } #social-networking #googleplus-link:hover { background-color: #f4b4b2; border-color: #f4b4b2; } #social-networking #linkedin-link:hover { background-color: #e0dacc; border-color: #e0dacc; } #social-networking #flickr-link:hover { background-color: #f2bad6; border-color: #f2bad6; } #social-networking #vimeo-link:hover { background-color: #b9e9f7; border-color: #b9e9f7; } #social-networking #youtube-link:hover { background-color: #f7b9ba; border-color: #f7b9ba; } #social-networking #rss-link:hover { background-color: #fce0ba; border-color: #fce0ba; } #social-networking #twitter-link .network-icon { background-position: 13px 13px; } #social-networking #facebook-link .network-icon { background-position: 12px -25px; } #social-networking #googleplus-link .network-icon { background-position: 12px -68px; } #social-networking #linkedin-link .network-icon { background-position: 13px -108px; } #social-networking #flickr-link .network-icon { background-position: 12px -144px; } #social-networking #vimeo-link .network-icon { background-position: 12px -188px; } #social-networking #youtube-link .network-icon { background-position: 12px -228px; } #social-networking #rss-link .network-icon { background-position: 13px -268px; } /* drop down about/site information */ #drop-down-tab { position: relative; z-index: 99; background: #fff; border-bottom: 1px solid #edefee; } .closed-tab { display: none; } .boxshadow #drop-down-tab { -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.035); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.035); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.035); } #drop-down-tab .drop-down-content { position: relative; } #drop-down-tab #tab-close { position: absolute; right: 0; cursor: pointer; bottom: -9px; display: block; width: 36px; height: 16px; border: 1px solid transparent; } .csstransitions #drop-down-tab #tab-close { -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -o-transition: background .3s ease-in-out, border-color .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } #drop-down-tab #tab-close:hover { background: #f6fafb; border-color: #E3E5E5; } .boxshadow #drop-down-tab #tab-close:hover { -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), inset 0 0 0 1px rgba(237, 239, 238, 0.5); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), inset 0 0 0 1px rgba(237, 239, 238, 0.5); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), inset 0 0 0 1px rgba(237, 239, 238, 0.5); } #drop-down-tab #tab-close:after { content: " "; position: absolute; left: 9px; top: 7px; background: #999; display: block; width: 18px; height: 3px; } /* 11. S I T E N A V I G A T I O N ........................................................................................................................................ */ /* main navigation */ #menu { font: normal 16px 'Abel', Arial, Helvetica, sans-serif; height: 100%; } #menu .menu > li { float: left; position: relative; display: block; } #menu a { text-transform: uppercase; display: block; padding: 0 15px; border: 1px solid #edefee; border-width: 0 1px 0 0; } #header .menu > li > a { color: #5cc1ce; } #header .menu > li > a:hover { color: #938277; } #menu a:visited { color: #5cc1ce; } #menu > ul > li:first-child a { border-width: 0 1px 0 1px; } #menu a:hover, #menu .current-menu-item > a:hover { color: #938277; } /* top-level menu links */ /* Current menu item */ #menu .current-menu-item > a, #header #menu .menu .current-menu-item > a { color: #72635a; } #menu .current-menu-item > a:hover, #header #menu .menu .current-menu-item > a:hover { color: #938277; } /* dropdown */ #menu .sub-menu { display: none; text-align: left; min-width: 100%; position: absolute; margin: 20px 0 0 0; z-index: 9999; /* 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); } #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 { display: block; white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */ } #menu .sub-menu a:active { top: 0; /* don't nudge the element when clicked */ } /* Dropdown links */ #menu .sub-menu a { padding: 5px 15px 5px 15px; text-transform: none; border: 4px solid #fff; border-width: 0 4px; background: #fff; color: #999999; } #menu .sub-menu li { border: 1px solid #e9e9e9; border-bottom: none; } #menu li:hover ul li a:hover { /* Set styles for dropdown when items are hovered */ border-left: 4px solid #dce3e5; text-decoration: none; } .csstransitions #menu .sub-menu a { /* HOVER OFF */ -moz-transition: all .35s ease-in-out; -webkit-transition: all .35s ease-in-out; -o-transition: all .35s ease-in-out; -ms-transition: all .35s ease-in-out; transition: all .35s ease-in-out; } .csstransitions #menu li:hover ul li a:hover { /* HOVER ON */ -moz-transition: all .1s ease-in-out; -webkit-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; transition: all .1s ease-in-out; } #menu .sub-menu li:last-child { border: 1px solid #e9e9e9; } .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 { color: #423a35; } /* top-level menu links */ /* Current menu item in the sub menu */ #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: 25px; } /* note: the "parent" class is generated by a custom walker */ #menu .parent > a:after { content: " "; text-indent: -9999px; position: absolute; margin: 8px 0 0 8px; width: 15px; height: 10px; background: url('images/main-icons.png') no-repeat -4px -160px; opacity: 0.65; } #menu .parent > a:hover:after { opacity: 1; } /* 12. P O R T F O L I O S L I D E R ........................................................................................................................................ */ #slides { position: relative; margin: 0 auto; } .csstransitions #slides a { -moz-transition: none; -webkit-transition: none; -o-transition: none; -ms-transition: none; transition: none; } .slides-container { display: none; } /* Set to display none, prevents content flash */ /* slider pagination */ .pagination { text-align: center; position: absolute; bottom: 19px; left: 120px; z-index: 99; } .pagination li { display: inline; } .pagination li a { float: left; width: 12px; height: 12px; overflow: visible; margin-left: 5px; background: url('images/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 */ #slides .next, #slides .prev { position: absolute; width: 50px; height: 50px; bottom: 0; display: block; z-index: 99; background: #eee; margin: 0 15px 0 0; } #slides .prev { left: 0px; border-right: 1px solid #e0e0e0; } #slides .next { left: 51px; } #slides .next:active, #slides .prev:active { position: absolute; bottom: 0; } .prev .arrow-left, .next .arrow-right { width: 50px; height: 50px; display: block; opacity: 0.5; background: url('images/portfolio-nav.png') no-repeat left top; } .prev .arrow-left:hover, .next .arrow-right:hover { opacity: 0.92; } .prev .arrow-left { background-position: 18px -34px; } .next .arrow-right { background-position: 20px 16px; } .slide { position: relative; width: 940px; overflow: hidden; } .slide img { margin-bottom: 0; display: block; } .top-slider { margin-bottom: 60px; } /* 13. P O R T F O L I O ........................................................................................................................................ */ /* sort button and active category */ .sortable { text-align: center; } #sort-cat-btn, #active-category { display: inline-block; } #sort-cat-btn { padding: 6px 10px; } #sort-cat-btn:after { content: ""; display: inline-block; width: 0; height: 0; border-top: 4px solid #bfb7b1; border-left: 4px solid transparent; border-right: 4px solid transparent; margin: 0 0 0 4px; position: relative; top: -2px; } #sort-cat-btn:hover:after { border-top-color: #756f69; } #active-category { text-align: center; padding-left: 10px; } /* filterable categories */ #portfolio-categories { background: #fff url('images/ice-age.png'); display: none; width: 100%; height: 100%; z-index: 1000000000000000000; font-size: 15px; position: fixed; top: 0; left: 0; } #portfolio-categories .wrapper-1 { display: table; width: 100%; height: 100%; } #portfolio-categories .wrapper-2 { display: table-cell; vertical-align: middle; text-align: center; width: 100%; height: 100%; } #portfolio-categories h2 { font-size: 30px; margin: 22px 0 22px; color: #918E8C; } #portfolio-categories li { } #portfolio-categories ul a { background: #fff url('images/patterns/subtle-dots.png') repeat left top; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); width: 270px; margin: 0 auto 5px; line-height: 30px; text-decoration: none; display: block; border-radius: 2px; padding: 6px 5px; border: 1px solid #ccc; } #portfolio-categories ul a:hover { background: #eff1f4; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), inset 0 0 3px #fff; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } #portfolio-categories ul a:active { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18); } #portfolio-categories .categories-close { position: absolute; cursor: pointer; background: url('images/back-button.png') no-repeat left top; width: 64px; height: 34px; top: 0; left: 0; right: 0; margin-left: auto; margin-right: auto; } /* portfolio projects/thumbnails */ #filterable-gallery { margin-bottom: 20px; } .project { position: relative; } .project-link { position: relative; display: block; overflow: hidden; text-decoration: none; } .project-link img { display: block; } .project-link .project-content { width: 235px; height: 190px; position: absolute; overflow: hidden; top: 0; left: 0; } .project-link .project-overlay { background-color: #fff; background-color: rgba(255, 255, 255, 0.9); width: 400px; height: 400px; cursor: pointer; /* opera */ position: absolute; left: 0; top: 0; display: block; text-indent: -9999px; } .project-link .view-button { position: absolute; right: 0; bottom: 0; display: block; } .project-link .project-caption { font: normal 16px/22px 'Abel', Arial, Helvetica, Georgia, "Times New Roman", Times, serif; text-transform: uppercase; letter-spacing: 0.05em; position: relative; width: 221px; text-align: center; padding: 9px 7px 8px 7px; margin: 40px 0 0 0; color: #444041; } .project-link:hover { color: inherit; } /* item's visibility */ .hidden-item { display: none !important; } .displayed-item { display: block !important; } /* transitions and transforms on portfolio items */ .csstransitions.csstransforms .project-link .project-overlay { -webkit-transform: translate(215px, 170px) rotate(45deg); -moz-transform: translate(215px, 170px) rotate(45deg); -o-transform: translate(215px, 170px) rotate(45deg); -ms-transform: translate(215px, 170px) rotate(45deg); transform: translate(215px, 170px) rotate(45deg); } .csstransitions .project-link .view-button { -webkit-transform: translate(200px, 200px); -moz-transform: translateY(200px); -o-transform: translateY(200px); -ms-transform: translateY(200px); transform: translateY(200px); -moz-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .csstransitions .project-link .project-caption { -moz-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; transition: all .4s ease-in-out; -webkit-transform: translate(200px, -200px); -moz-transform: translate(200px, -200px); -o-transform: translate(200px, -200px); -ms-transform: translate(200px, -200px); transform: translate(200px, -200px); } .csstransitions .project-link:hover .view-button, .csstransitions .project-link:hover .project-caption { -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; transform: none; } .csstransitions .project-link, .csstransitions .project-link .project-overlay { -moz-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .csstransitions .project-link:hover .project-overlay { -webkit-transform: translate(-100px, -100px) rotate(45deg); -moz-transform: translate(-100px, -100px) rotate(45deg); -o-transform: translate(-100px, -100px) rotate(45deg); -ms-transform: translate(-100px, -100px) rotate(45deg); transform: translate(-100px, -100px) rotate(45deg); } .no-csstransitions.opacity .view-button, .no-csstransitions.opacity .project-caption, .no-csstransitions.opacity .project-link .project-overlay { opacity: 0; } /* project overlay */ #project-overlay { position: fixed; display: none; left: 0; top: 0; width: 100%; height: 100%; background-color: #fff ; background-color: rgba(255, 255, 255, .93); background-image: url('images/scan-lines.png'); z-index: 99999; } /* ajax project loader */ #loader { width: 50px; height: 50px; display: none; position: fixed; z-index: 9999999; right: 0; top: 0; background: #eee url('images/project-loader.gif') no-repeat 50% 50%; border: 1px solid #e0e0e0; border-right-width: 0; } /* project */ #project-wrapper { overflow: visible; left: 0; right: 0; position: absolute; z-index: 999999; } #single-item { text-align: left; position: relative; margin-bottom: 60px; } #single-item iframe, #single-item .single-img-loader { background: url('images/loading.gif') no-repeat 50% 50%; } #single-item .single-img-loader { position: absolute; left: 0; top: 0; z-index: -1; } #single-item .single-img-ajax { opacity: 0; } .project-title { color: #918e8c; } /* item categories, client, URL, and date of publishing */ .item-categories li, .item-metadata li { margin-bottom: 15px; display: inline; } #portfolio-item-meta .item-meta-title { font-family: 'Abel', Arial, Helvetica, sans-serif; text-transform: uppercase; font-size: 15px; color: #070300; letter-spacing: 0.05em; } #portfolio-item-meta .item-metadata:last-child { margin-bottom: 36px; } #portfolio-item-meta h2 { font-size: 20px; } /* item navigation (close, previous, and next buttons)*/ .post-nav { position: fixed; z-index: 999; top: 80px; right: 0; } .post-nav li { width: 50px; height: 50px; background: #eee; cursor: pointer; border: 1px solid #e0e0e0; border-width: 1px 0 0 1px; } .post-nav li.last-nav { border-width: 1px 0 1px 1px; height: 50px; } .post-nav a { position: relative; display: block; height: 50px; color: inherit; } .csstransitions .post-nav a, .csstransitions .post-nav span, .csstransitions .post-nav img { -moz-transition: none; -webkit-transition: none; -o-transition: left 0 ease-in, right 0 ease-in, opacity 0 ease-in; -ms-transition: none; transition: none; } .post-nav .prev-icon, .post-nav .next-icon, .post-nav .close-current-post { -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .post-nav .prev-icon, .post-nav .next-icon, .post-nav .close-current-post { height: 50px; display: block; opacity: 0.5; background: url('images/portfolio-nav.png') no-repeat left top; } .post-nav a:hover span:last-child, .post-nav .close-current-post:hover { opacity: 0.92; } .post-nav .close-current-post { text-indent: -9999px; background-position: 18px -82px; } .post-nav .prev-icon { background-position: 18px -34px; } .post-nav .next-icon { background-position: 20px 15px; } .post-nav .prev-pf-post-title, .post-nav .next-pf-post-title { white-space: nowrap; height: 51px; line-height: 51px; background-color: #eee; min-width: 50px; display: block; position: absolute; z-index: -1; left: 0; top: -1px; padding: 0 22px 0 13px; } .post-nav li.last-nav a span:first-child { height: 52px; line-height: 52px; } /* sliding preview images */ .post-nav .preview-imgs { width: auto; height: auto; background: none; cursor: auto; border: none; position: relative; } .post-nav .preview-imgs img { position: absolute; right: -185px; top: 0; } .boxshadow .post-nav .preview-imgs img { -webkit-box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.015); -moz-box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.015); box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.015); } /* 14. P A G E S ........................................................................................................................................ */ .two-cols-right-fixed #main-content .page-content, .two-cols-left-fixed #main-content .page-content, .sidebar { display: inline; } .two-cols-right-fixed #main-content .page-content { margin-right: 50px; width: 670px; } .two-cols-left-fixed #main-content .page-content { margin-left: 50px; width: 670px; } .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; } /* 15. P O S T S A N D C O N T E N T S T Y L E S ........................................................................................................................................ */ #blog-posts {} .post { border-top: 1px solid #e3e5e5; } /* date and title */ .main-meta { } .main-meta .post-time { margin: 0; float: left; font-family: 'HeroLight', Arial, Helvetica, Georgia, "Times New Roman", Times, serif; font-size: 15px; } .main-meta .post-time .day { text-align: center; float: left; margin: 0 10px 0 0; width: 60px; height: 60px; font-size: 30px; background: #f6fafb; border: 1px solid #e3e5e5; border-width: 0 1px 1px 1px; } .main-meta .post-title { float: right; margin: 0; padding: 17px 0 0 0; max-width: 750px; } .main-meta .post-title a { color: #5cc1ce; } .main-meta .post-title a:hover { color: #999; } .main-meta .narrow-post-title { max-width: 500px; } .featured-img-link img { display: block; margin: 0 0 22px 0; } /* read more button */ .post-content .read-btn { display: block; } .post-content .read-more { display: inline-block; padding: 7px 12px; color: #4f4640; } /* post footer meta */ .secondary-meta { font-size: 0.9em; letter-spacing: 0.05em; color: #999; } .secondary-meta .author-cats { float: left; margin-right: 20px; max-width: 480px; } .secondary-meta .no-of-comments { float: right; position: relative; padding-left: 25px; } .secondary-meta .no-of-comments:before { content: " "; position: absolute; left: 0; top: 5px; width: 18px; height: 14px; background: url('images/main-icons.png') no-repeat 0 -242px; } /* single-post */ .single-post .post { border-top: none; } .next-prev-posts a:first-child { margin-right: 24px; } /* post/page titles */ .post-title .plus-icon { width: 18px; height: 14px; float: left; position: relative; top: 4px; padding-right: 5px; background: url('images/main-icons.png') no-repeat 0 -276px; } .csstransitions .post-title:hover .plus-icon { left: 5px; } .csstransitions .plus-icon { -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .single-title {} .page-title { border-bottom: 1px solid black; } .archive-title { } /* want to style individual post classes? Booya! */ .post-id {} /* post by id (i.e. post-3) */ .post {} /* general post style */ .page {} /* general article on a page style */ .attachment {} /* general style on an attachment */ .sticky {} /* sticky post style */ .hentry {} /* hentry class */ .category-slug {} /* style by category (i.e. category-videos) */ .tag-slug {} /* style by tag (i.e. tag-news) */ /* post content */ .post-content {} .post-content ul, .post-content ol, .post-content table, .post-content dl, .page-content ul, .page-content ol, .page-content table, .page-content dl { margin: 1.5em 0; } .post-content ul, .post-content ol, .page-content ul, .page-content ol { list-style-position: outside; line-height: 1.5; margin-right: 2.2em; } .post-content li, .page-content li { margin-bottom: 0.75em; } .page-content ol ol, .page-content ul ul, .post-content ol ol, .post-content ul ul { margin-left: 28px; } /* indent the lists wrapped by other lists */ .post-content ul, .wp-page-content ul { list-style-type: square; } .post-content ol, .wp-page-content ol { list-style-type: decimal; } .post-content blockquote, .page-content blockquote { font-style: italic; line-height: 1.6em; margin: 1.5em 2.2em; } .post-content blockquote:before, .page-content blockquote:before { font-family: Georgia, serif; content: "“"; font-size: 2.75em; text-indent: -.8em; margin-top: .1em; float: left; opacity: .3; } /* this adds the quote before the blockquote */ .post-content dl, .page-content dl { margin: 1.75em 0 1.75em; } .post-content dt, .page-content dt { margin-top: 1.25em; font-weight:700; } .post-content dd, .page-content dd { font-style: italic; margin-top:0.5em; line-height:1.6em; } .post-content img, .page-content img { max-width: 100%; } .page-content table, .post-content table { border: 1px solid #e9e9e9; border-collapse: collapse; background: #fff; } .page-content tr:nth-of-type(odd), .post-content tr:nth-of-type(odd) { background-color: #eff3f4; } /* zebra style table */ .page-content th, .page-content td, .post-content th, .post-content td { border: 1px solid #e9e9e9; padding: 9px 22px; } .page-content th, .post-content th { text-transform: uppercase; color: #756b64; } .page-content caption, .post-content caption { font-size: 1.2em; font-weight: bold; } /* 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 */ } */ .post-content pre, .page-content 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 */ } .post-content pre, .page-content pre { font-size: .9em; line-height: 22px; border: 1px solid #e9e9e9; line-height: 20px; background: #fff url('images/pre-code-bg.png') repeat left top; overflow: auto; overflow-y: hidden; /* Hides vertical scroll created by IE */ } .post-content pre code, .page-content pre code { color: #443325; line-height: 1.6em; margin: 0 0 0 40px; padding: 18px 0; display: block; } .post-content video, .page-content video { margin: 1.5em 0; max-width: 100%; display: block; } .post-content object, .page-content object { display: block; margin: 1.5em 0; max-width: 100%; } /* 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; font-family: Georgia, "Times New Roman", Times, serif; } .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; } /* 16. P A G E N A V I S T Y L E S ........................................................................................................................................ */ /* page navigation */ .page-navigation, .wp-prev-next { } .bones_page_navi, .wp-prev-next ul { } .bones_page_navi li { float: left; margin-right: 4px; text-align: center; } .csstransitions li { -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .bones_page_navi li a { padding: 2px 9px 4px; min-width: 14px; border-top: 2px solid #eee; display: block; background: #eee; text-decoration: none; position: relative; } .bones_page_navi li a:hover { border-top: 2px solid #b5ada6; color: #35312e; } .bones_page_navi li.bpn-current { padding: 2px 9px 4px; min-width: 14px; color: #35312e; background: #eee; border-top: 2px solid #b5ada6; position: relative; } /* current page link */ .bones_page_navi li.bpn-current:hover {} .bones_page_navi li.bpn-prev-link { } /* previous link */ .bones_page_navi li.bpn-prev-link a { } .bones_page_navi li.bpn-prev-link a:hover { } .bones_page_navi li.bpn-next-link { } /* next page link */ .bones_page_navi li.bpn-next-link a { } .bones_page_navi li.bpn-next-link a:hover { } .bones_page_navi li.bpn-last-page-link {} /* last page link */ .bones_page_navi li.bpn-last-page-link a {} .bones_page_navi li.bpn-last-page-link a:hover { } .bones_page_navi li.bpn-first-page-link {} /* first page link */ .bones_page_navi li.bpn-first-page-link a {} .bones_page_navi li.bpn-first-page-link a:hover { } /* fallback previous & next links */ .wp-prev-next {} .wp-prev-next ul {} .wp-prev-next .prev-link { float: left; } .wp-prev-next .next-link { float: right; } /* 17. C O M M E N T S T Y L E S ........................................................................................................................................ */ #comments { margin: 0 24px 0.75em; }/* h3 comment title */ #comments span { font-weight: 700; color: #1a90db; } /* number of comments span */ .comment-nav {} .comment-nav ul {} .comment-nav ul li {} .commentlist { margin: 0 20px; } .commentlist li { position: relative; clear: both; list-style-type: none; margin-bottom: 1.5em; padding: 0.7335em 10px; } .commentlist li[class*=depth-] { padding-left: 20px; margin-top: 1.1em; } .commentlist li.depth-1 { margin-left: 0; margin-top: 0; } .commentlist li:not(.depth-1) { margin-right: -10px; margin-top: 0; padding-bottom: 0; } .commentlist li.depth-2 {} .commentlist li.depth-3 {} .commentlist li.depth-4 {} .commentlist li.depth-5 {} .commentlist li:last-child { margin-bottom: 0; } .commentlist li ul.children li {} .commentlist li ul.children li.alt {} .commentlist li ul.children li.byuser {} .commentlist li ul.children li.comment {} .commentlist li ul.children li.depth-1 {} /* change number for different depth */ .commentlist li ul.children li.bypostauthor {} .commentlist li ul.children li.comment-author-admin {} .commentlist li ul.children .alt {} .commentlist li ul.children .odd { border: 1px solid #EDEFEE; border-width: 1px 1px 1px 0; } .commentlist li ul.children .even { } .commentlist .alt {} .commentlist .odd { background: #faf6fb; border: 1px solid #EDEFEE; } .commentlist .even { background: #fefefe; } .commentlist .parent {} .commentlist .comment {} .commentlist .children { border-left: 2px solid #98dbe2; } .commentlist .pingback {} .commentlist .bypostauthor {} .commentlist .comment-author {} .commentlist .comment-author + .help { margin: 25px; margin-left: 55px; } .commentlist .comment-author-admin {} .commentlist .thread-alt {} .commentlist .thread-odd {} .commentlist .thread-even {} .commentlist .vcard { margin-left: 55px; } .commentlist .vcard cite.fn { font-weight: 700; font-style: normal; } .commentlist .vcard time { float: right; } .commentlist .vcard time a { color: #999; text-decoration: none; } .commentlist .vcard time a:hover { text-decoration: underline; } .commentlist .vcard img.photo {} .commentlist .vcard img.avatar { position: absolute; left: 20px; padding: 2px; border: 1px solid #EDEFEE; background: #fff; } .commentlist .vcard cite.fn a.url { color: #5cc1ce; } .commentlist .vcard cite.fn a.url:hover { color: #999; } .commentlist .comment-meta {} .commentlist .comment-meta a {} .commentlist .commentmetadata {} .commentlist .commentmetadata a {} .commentlist li .comment_content { margin-left: 55px; } .commentlist li .comment_content p { margin: 0.7335em 0 1.5em; font-size: 1em; line-height: 1.5em; } .commentlist li ul { margin: 0; } .commentlist .comment-reply-link { text-decoration: none; float: right; padding: 3px 5px; margin-bottom: 10px; font-size: 0.9em; color: #4f4640; } .commentlist a.comment-reply-link:hover { color: #4f4640; } /* 18. C O M M E N T F O R M S T Y L E S ........................................................................................................................................ */ .comments-logged-in-as {} #respond form[method=post] label, #respond form[method=post] .required { display: none; } #respond input[type=text], #respond input[type=email], #respond input[type=url], #respond textarea { padding: 8px 10px; } #respond input[type=text], #respond input[type=email], #respond input[type=url] { max-width: 400px; min-width: 250px; width: auto; } #respond textarea { width: 97.3%; height: 150px; } #submit {} /* form validation */ #respond input:invalid, #respond textarea:invalid { border-color: #fbc2c4; background: #fbe3e4; outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background-color: #f6e7eb; } #respond .help { width: 80%; } /* 19. S I D E B A R S A N D A S I D E S ........................................................................................................................................ */ .sidebar .widget:first-child { margin-top: 0; } .sidebar .widget:last-child { margin-bottom: 0; } .widget { padding: 0 0; margin: 2.2em 0; } .widget li { margin-bottom: 0.75em; } .widget li ul { margin-top: 0.75em; padding-left: 1em; /* indented children lists */ } .widgettitle { margin-bottom: 0.95em; } .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; } /* links widget */ .widget_links {} .widget_links ul {} .widget_links ul li {} .widget_links ul li a {} /* meta widget */ .widget_meta {} .widget_meta ul {} .widget_meta ul li {} .widget_meta ul li a {} /* pages widget */ .widget_pages {} .widget_pages ul {} .widget_pages ul li {} .widget_pages ul li a {} /* recent-posts widget */ .widget_recent_entries {} .widget_recent_entries ul {} .widget_recent_entries ul li {} .widget_recent_entries ul li a {} /* archives widget */ .widget_archive {} .widget_archive ul {} .widget_archive ul li {} .widget_archive ul li a {} .widget_archive select {} .widget_archive option {} /* tag-cloud widget */ .widget_links {} .widget_links li:after {} .widget_links li:before {} .widget_tag_cloud {} .widget_tag_cloud a {} .widget_tag_cloud a:after {} .widget_tag_cloud a:before {} /* calendar widget */ .widget_calendar {} #calendar_wrap {} #calendar_wrap th {} #calendar_wrap td {} #wp-calendar tr td {} #wp-calendar caption {} #wp-calendar a {} #wp-calendar #today {} #wp-calendar #prev {} #wp-calendar #next {} #wp-calendar #next a {} #wp-calendar #prev a {} /* category widget */ .widget_categories {} .widget_categories ul {} .widget_categories ul li {} .widget_categories ul ul.children {} .widget_categories a {} .widget_categories select{} .widget_categories select#cat {} .widget_categories select.postform {} .widget_categories option {} .widget_categories .level-0 {} .widget_categories .level-1 {} .widget_categories .level-2 {} .widget_categories .level-3 {} /* recent-comments widget */ .recentcomments {} #recentcomments {} #recentcomments li {} #recentcomments li a {} .widget_recent_comments {} /* search widget */ .widget_search .search-form .field { background: white url('images/search-icon.gif') no-repeat 7px center; padding-left: 29px; width: 82%; } .widget_search .search-form .field:focus { background: white url('images/search-icon-focus.gif') no-repeat 7px center; } .csstransitions .search-form input:not([type="submit"]):not([type="file"]) { -webkit-transition: border-color .2s ease-in, -webkit-box-shadow .2s ease-in, box-shadow .2s ease-in; -moz-transition: border-color .2s ease-in, -moz-box-shadow .2s ease-in, box-shadow .2s ease-in; -o-transition: border-color .2s ease-in, box-shadow .2s ease-in; -ms-transition: border-color .2s ease-in, box-shadow .2s ease-in; transition: border-color .2s ease-in, box-shadow .2s ease-in; } /* text widget */ .textwidget {} .widget_text {} .textwidget p {} /* menu widget */ .widget .menu > li { padding: 0; } /* flickr widget */ #footer .Simple_Flickr_Photos, .sidebar .Simple_Flickr_Photos { margin-bottom: 30px; } .Simple_Flickr_Photos a { border-bottom: none; } .Simple_Flickr_Photos a:hover { background: none; } .Simple_Flickr_Photos #flickr .flickr_badge_image { float: left; margin: 0 16px 10px 0; } .Simple_Flickr_Photos img { width: 54px; height: 54px; } #flickr .flickr_badge_image:nth-child(4n) { margin-right: 0; } #flickr img:hover { opacity: 0.5; } /* flickr widget in sidebars */ .sidebar .Simple_Flickr_Photos #flickr .flickr_badge_image { float: left; margin: 0 13px 10px 0; } .sidebar .Simple_Flickr_Photos img { width: 45px; height: 45px; } .sidebar #flickr .flickr_badge_image:nth-child(4n) { margin-right: 0; } /* twitter widget */ .tweets { } .read-more, .timesince { display: block; } .tweets li { padding: 0 0 0 25px; background: url('images/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; } .popular-posts .wpp-post-title { display: block; font-weight:bold; font-size: 11px; letter-spacing: 0.05em; } .popular-posts .wpp-thumbnail { float: left; margin: 2px 7px 0 0; padding: 6px 7px 6px 6px; background: url('images/border-img.png') repeat left top; } .popular-posts a:hover .wpp-thumbnail { background-color: #0a0a0a; } .popular-posts .post-stats { font-size: 0.92em; display: block; font-weight: normal; } .popular-posts .wpp-author { font-style: normal; } /* 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; } /* 20. F O O T E R S T Y L E S ........................................................................................................................................ */ #footer { background: #f6fafb; border-top: 1px solid #EDEFEE; } .boxshadow #footer, .boxshadow .footer-secondary { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.028); } /* copyright and back to top button */ #footer .footer-secondary { border-top: 1px solid #EDEFEE; background: #fff; } .footer-secondary .copyright { text-align: center; } .footer-secondary .copyright small { float: left; } .footer-secondary #back-to-top a { float: right; } /* footer widget areas */ .footer-widgets { position: fixed; z-index: 9999; left: 0; bottom: 0; width: 100%; border-top: 1px solid #ccc; } .boxshadow .footer-widgets { -webkit-box-shadow: 10px 10px 3px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.025); box-shadow: 0px 7px 8px 7px rgba(0, 0, 0, 0.2); } .footer-widgets { background: rgb(246,250,251); /* Old browsers */ background: -moz-linear-gradient(top, rgba(246,250,251,1) 0%, rgba(248,250,251,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,250,251,1)), color-stop(100%,rgba(248,250,251,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(246,250,251,1) 0%,rgba(248,250,251,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(246,250,251,1) 0%,rgba(248,250,251,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(246,250,251,1) 0%,rgba(248,250,251,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(246,250,251,1) 0%,rgba(248,250,251,1) 100%); /* W3C */ } .footer-widgets .footer-widget { vertical-align: middle; z-index: 9999; position: relative; width: 313px; margin: 0; padding: 0 17px 0 25px; border-left: 1px solid #ccc; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .footer-widgets .footer-widget:after { content: " "; position: absolute; height: 100%; width: 10px; padding-right: 15px; top: 0; right: 0; background: url('images/widget-arrows.png') no-repeat -84px 49%; } .footer-widgets .inactive-widget:hover:after { background-position: -124px 49%; } .footer-widgets .active-widget:after { background-position: 0 49%; } .footer-widgets .active-widget:hover:after { background-position: -42px 49%; } .footer-widgets .footer-widget:last-child { border-right: 1px solid #ccc; width: 314px; } .boxshadow .footer-widgets .footer-widget:hover { z-index: 999999; -webkit-box-shadow: 0 0 1px 3px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(237, 239, 238, 0.05); -moz-box-shadow: 0 0 1px 3px rgba(0, 0, 0, 0.025), inset 0 0 0 1px rgba(237, 239, 238, 0.5); box-shadow: 0 0 1px 3px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(237, 239, 238, 0.5); } .footer-widgets .footer-widget:hover { background-color: #fff; } .csstransitions .footer-widget { -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: background .2s ease-in-out, box-shadow .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } /* two widgets */ .footer-widgets .grid_6.footer-widget { width: 470px; } .footer-widgets .grid_6.footer-widget .widgettitle + * { width: 471px; } .footer-widgets .grid_6.omega.footer-widget .widgettitle + * { width: 470px; } /* one widget */ .footer-widgets .grid_12.footer-widget { width: 940px; } .footer-widgets .grid_12.footer-widget .widgettitle + * { width: 940px; } .footer-widgets .widget { margin: 0; padding: 12px 0; } .footer-widgets .widgettitle { margin: 0; border: none; padding-right: 22px; } .footer-widgets .widgettitle + * { cursor: auto; margin-bottom: 0; border: 1px solid #ccc; position: absolute; left: -1px; bottom: 44px; width: 314px; background: #f6fafb; padding: 22px 24px 0.75em 22px; display: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0 0 4px 1px rgba(0, 0, 0, .1); -moz-box-shadow: 0 0 4px 1px rgba(0, 0, 0, .1); box-shadow: 0 0 4px 1px rgba(0, 0, 0, .1); } /* 21. S E A R C H P A G E ........................................................................................................................................ */ .search #filterable-gallery { margin-bottom: 22px; } .search #post-not-found { text-align: center; } .search .not-found-title { text-align: center; } .search .portfolio-search, .search .blog-search form { margin: 0 auto; width: 400px; } /* 22. 4 0 4 P A G E .......................................................................................................................................... */ #not-found { text-align: center; } #not-found-heading { font-weight: bold; } #not-found-img { border: none; } #not-found-form input { width: 500px; margin: 0 auto; } /* 23. 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-information:before { content: " "; background: url('images/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; max-width: 450px; width: 87.7%; position: relative; padding: 16px 13px; } .form-status.error { background: #eae8e8; background: rgba(0, 0, 0, 0.02); } .form-status.success { background: #e1e8d7; background: rgba(0, 0, 0, 0.02); } .contact-form .status-icon { display: block; position: absolute; top: -10px; left: -5px; background: url('images/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: 7px; border: none; } /* loading gif at the end of the contact form */ .invalid-field { border-color: #edaaaa; } /* buttons */ .shortcode-button { color: #443D39; display: inline-block; margin: 0 5px 22px 5px; padding: 6px 10px; text-shadow: none; } .shortcode-button.white { color: #443D39; } .shortcode-button.yellow { background: #f9f6bb; border-color: #dbd9b3; color: #443D39; } .shortcode-button.yellow:hover { border-color: #c1bf9c; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(255, 255, 255, 0.5); } .shortcode-button.blue { background: #bbe8f7; border-color: #b1ced8; color: #443D39; } .shortcode-button.blue:hover { border-color: #a1bdc6; } .shortcode-button.green { background: #d2e599; border-color: #bc8; color: #443D39; } .shortcode-button.green:hover { border-color: #a3b277; } .shortcode-button.red { background: #f4b4b2; border-color: #d8a3a2; color: #443D39; } .shortcode-button.red:hover { border-color: #bc8e8d; } .shortcode-button.grey { background: #eee; border-color: #cecece; color: #443D39; } .shortcode-button.grey:hover { border-color: #bfbfbf; } .shortcode-button.orange { background: #fce0ba; border-color: #dbc2a2; color: #443D39; } .shortcode-button.orange:hover { border-color: #c4ad91; } .shortcode-button.purple { background: #f2bad6; border-color: #d8a4be; color: #443D39; } .shortcode-button.purple:hover { border-color: #bf8fa7; } .shortcode-button.brown { background: #d3b68f; border-color: #b59b79; color: #443D39; } .shortcode-button.brown:hover { border-color: #998066; } .shortcode-button.blue:hover, .shortcode-button.green:hover, .shortcode-button.red:hover, .shortcode-button.grey:hover, .shortcode-button.orange:hover, .shortcode-button.purple:hover, .shortcode-button.brown:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(255, 255, 255, 0.3); } .shortcode-button.yellow:active, .shortcode-button.yellow:focus, .shortcode-button.blue:active, .shortcode-button.blue:focus, .shortcode-button.green:active, .shortcode-button.green:focus, .shortcode-button.red:active, .shortcode-button.red:focus, .shortcode-button.grey:active, .shortcode-button.grey:focus, .shortcode-button.orange:active, .shortcode-button.orange:focus, .shortcode-button.purple:active, .shortcode-button.purple:focus, .shortcode-button.brown:active, .shortcode-button.brown:focus { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); } /* alerts */ .alert { padding: 12px 5% 12px 5%; text-align: center; margin: 0 0 22px 0; border: 1px solid; } .alert.yellow { border-color: #e8e27a; background: #fffdd3; } .alert.green { border-color: #b4eaa6; background: #e0ffd8; } .alert.red { border-color: #fbc2c4; background: #FFD7D8; } /* 24. I N T E R N E T E X P L O R E R ........................................................................................................................................ */ /* the word-break CSS property only works for elements that have layout */ .ie8 .item-metadata .project-url, .ie9 .item-metadata .project-url { display: block; } /* ie9 */ .ie9 .header-secondary { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6fafb', endColorstr='#f8fafb',GradientType=0 ); /* IE6-9 */ } .ie9 .meta-tabs div:hover { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */ } .ie9 .header-secondary .contact-info div { line-height: 50px; } .ie9 #menu .parent > a:after { margin-top: 7px; } /* ie8 */ .ie8 .post-nav .prev-icon, .ie8 .post-nav .next-icon, .ie8 .post-nav .close-current-post { background-color: #eee; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; } .ie8 .prev .arrow-left, .ie8 .next .arrow-right { background-color: #eee; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; } .ie8 .post-nav li.last-nav a span { height: 52px; line-height: 52px; } .ie8 .post-nav .last-nav .prev-icon, .ie8 .post-nav .last-nav .next-icon { height: 51px; } .ie8 .meta-tabs .about:hover span, .ie8 .meta-tabs .search-portfolio:hover span { background-color: #f6fafb; -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='f6fafb') progid:DXImageTransform.Microsoft.Alpha(opacity=70)"; } .ie8 .meta-tabs .about .about-icon, .ie8 .meta-tabs .search-portfolio .search-icon, .ie8 .phone-no .phone-icon, .ie8 .email-address .mail-icon { background-color: #f6fafb; -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='f6fafb') progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; } .ie8 .header-secondary .contact-info div:hover span { -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='f6fafb') progid:DXImageTransform.Microsoft.Alpha(opacity=70)"; } .ie8 #logo img, .ie8 #wp-title-logo { background: #fff; -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='ffffff') progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; } .ie8 #logo a:hover img, .ie8 #wp-title-logo:hover { background: #fff; -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='ffffff') progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; } .ie8 .meta-tabs .main-search input { line-height: 50px; } /* portfolio items */ .ie8 .project-caption { display: none; } .ie8 .view-button { background: #fff; -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='ffffff') progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; } .ie8 .project-overlay { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .ie8 #social-networking .network-icon { background-color: #eee; -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='eeeeee') progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; } .ie8 #social-networking a:hover .network-icon { -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='eeeeee') progid:DXImageTransform.Microsoft.Alpha(opacity=60)"; }