/* Theme Name: FireFly 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 Styles 2. Grid 3. Technical and Creative Typography 4. Common and Reusable Styles 5. Link Styles 6. Headlines and Titles 7. Images 8. Forms 9. Widgets 10. Drop-Down Page Content Area 11. Header Styles 12. Site Navigation 13. Portfolio 14. Single Posts - Opened State 15. Portfolio Slider 16. Blog 17. Content Styles 18. Comment Styles 19. Comment Form Styles 20. Footer 21. Expandable Footer Widget Area 22. Search Page 23. 404 Page 24. Shortcodes 25. Internet Explorer 26. Media Queries */ /* 1. G E N E R A L S T Y L E S ........................................................................................................................................ */ body, html { background: #fdfdfd; overflow-x: hidden; } body:before { /* Top border */ content: " "; display: block; position: absolute; z-index: -1; width: 100%; left: 0; top: 0; height: 3px; background: #313236 url('images/background-noise.png'); } ol, ul { list-style: none inside none; margin: 0; } p:empty { display: none; } /* Remove empty paragraphs */ #content-type { display: none !important; } #powerTip { /* PowerTip jQuery plugin — Custom Tooltips */ cursor: default; background-color: #333; background-color: rgba(0, 0, 0, 0.8); border-radius: 2px; color: #FFF; display: none; padding: 4px 9px; position: absolute; white-space: nowrap; z-index: 2147483647; } /* Highlighted text */ ::selection { background: #191919; color: #fff; text-shadow: none; } ::-moz-selection { background: #191919; color: #fff; text-shadow: none; } /* Portfolio item — opened state */ .fixed { /* post wrapper class */ position: fixed !important; overflow-x: auto !important; overflow-y: scroll !important; -webkit-perspective: 1000 !important; bottom: 0; left: 0; right: 0; top: 0; } .scroll-disabled { /* body class */ overflow: hidden !important; } /* Overthrow CSS: Enable overflow: auto on elements with overthrow class when html element has overthrow class too */ .overthrow-enabled .overthrow { overflow: auto; -webkit-overflow-scrolling: touch; } /* Simple fluid media */ figure { position: relative; } figure img, figure object, figure embed, figure video { max-width: 100%; display: block; } /* required classes */ .sticky { } .bypostauthor { } /* 2. G R I D ........................................................................................................................................ */ .border-box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .wrapper { padding: 0 9px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .row-wrapper { max-width: 1900px; margin: 0 auto; } .row { margin: 0 3%; padding: 0 9px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* 3. 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 ........................................................................................................................................ */ html { -webkit-font-smoothing: antialiased; } /* maxvoltar.com/archive/-webkit-font-smoothing */ /* the magic number for vertical rhythm is 20 */ body, button, input, select, textarea { color: #2b2b2b; font: normal 13px/20px 'Open Sans', Arial, Helvetica, sans-serif; } b, strong { font-weight: 800; color: #191919; } fieldset, pre, .portfolio-item, .map-container, #page-content ul, #page-content ol, .secondary-content dt, .secondary-content dd, .secondary-content caption, .secondary-content img, .secondary-content table, .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, #footer .widget, .heading-with-border { margin-bottom: 20px; } .one_half *:last-child, .one_third *:last-child, .two_third *:last-child, .three_fourth *:last-child, .one_fourth *:last-child, .one_fifth *:last-child, .two_fifth *:last-child, .three_fifth *:last-child, .four_fifth *:last-child, .one_sixth *:last-child, .five_sixth *:last-child { margin-bottom: 0; } p, h1, h2, h3, h4, h5, h6 { margin: 0 0 20px 0; } /* zoomable baseline grid - type size presets */ .small { font-size: 12px; line-height: 20px; } .normal { font-size: 13px; line-height: 20px; } .medium { font-size: 20px; line-height: 20px; } .large { font-size: 24px; line-height: 40px; } .huge { font-size: 42px; line-height: 40px; } .massive { font-size: 68px; line-height: 80px; } .gigantic { font-size: 110px; line-height: 120px; } /* 4. C O M M O N A N D R E U S A B L E S T Y L E S ........................................................................................................................................ */ .hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; } /* heading styles with borders */ .heading-with-border { color: #cecece; padding-bottom: 1em; background: url('images/heading-border.png') repeat-x left bottom; } /* centering list items horizontally: http://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/ */ .table { display: table; /* Allow the centering to work */ margin: 0 auto; } /* 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 */ } .overflow-wrap { -ms-word-break: break-all; word-break: break-all; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens:auto; hyphens: auto; } /* highlighting search term on search page */ mark, .search-term { background: #EBE16F; } /* cursors */ .cursor-pointer { cursor: pointer; } .cursor-auto { cursor: auto; } /* 5. L I N K S T Y L E S ........................................................................................................................................ */ a, a:visited { color: #727171; text-decoration: none; position: relative; } .no-touch 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; } /* 6. 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: normal; text-transform: uppercase; font-family: 'Open Sans', Arial, Helvetica, sans-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: 40px; } h2, .h2 { font-size: 19px; } h3, .h3 { font-size: 17px; } h4, .h4 { font-size: 15px; } h5, .h5 { font-size: 14px; } h6, .h6 { font-size: 13px; } /* 7. I M A G E S ........................................................................................................................................ */ img { border: 0; -ms-interpolation-mode: bicubic; max-width: 100%; height: auto; } /* responsive images */ .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; } .image-link, .no-touch .image-link:hover { border: none !important; } /* remove the borders on images that are wrapped with anchors */ /* 8. F O R M S ........................................................................................................................................ */ fieldset { padding: 0; } input, textarea { padding: 8px 10px; border: none; } input, textarea, select { outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; /* webkit browsers add a 2px margin outside the chrome of form elements */ } input:not([type=submit]):not([type=file]), input[type="text"], select, textarea { width: 100%; } select, input, textarea, button { font: normal 13px 'Open Sans', Arial, Helvetica, sans-serif; } 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; text-transform: uppercase; } label, input[type=button], input[type=submit], button { cursor: pointer; } /* hand cursor on clickable input elements */ /* buttons */ input[type="submit"], button, input[type="button"] { font-family: 'Merriweather', serif; padding: 10px 12px 8px 12px; display: block; color: #313332; background: #FFD46E; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffd46e), color-stop(1, #ffe88a)); background-image: -moz-linear-gradient(center bottom, #ffd46e 0%, #ffe88a 100%); border-bottom: solid 1px #F5E383; -webkit-box-shadow: #BE9144 0 2px 0; -moz-box-shadow: #BE9144 0 2px 0; box-shadow: #BE9144 0 2px 0; text-shadow: #FFF0AC 0 1px 0; } .no-touch input[type="submit"]:hover, .no-touch button:hover, .no-touch input[type="button"]:hover { background: #FFFDA5; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fae67f), color-stop(1, #fdffba)); background-image: -moz-linear-gradient(center bottom, #fae67f 0%, #fdffba 100%); border-bottom: solid 1px #FFF9B6; -webkit-box-shadow: #DCB759 0 2px 0; -moz-box-shadow: #DCB759 0 2px 0; box-shadow: #DCB759 0 2px 0; color: #555; } input[type="submit"]:active, button:active, input[type="button"]:active { position: relative; top: 1px; -webkit-box-shadow: #DCB759 0 1px 0; -moz-box-shadow: #DCB759 0 1px 0; box-shadow: #DCB759 0 1px 0; } 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: 3px; -webkit-border-radius: 3px; border-radius: 3px; } 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-radius: 2px; box-shadow: inset 0 3px 12px 0 rgba(0, 0, 0, 0.12); border: 1px solid #efe8e9; padding: 10px 8px; max-width: 500px; display: block; background: #eaeaea; } .csstransitions input:not([type=submit]):not([type=file]), .csstransitions textarea, .csstransitions select { -webkit-transition: all .2s ease-in; -moz-transition: all .2s ease-in; -o-transition: all .2s ease-in; -ms-transition: all .2s ease-in; transition: all .2s ease-in; } input[type="text"]:focus, input:not([type=submit]):not([type=file]):focus, textarea:focus, select:focus { background: #fff; box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); -webkit-animation: input-shadow 0.2s ease-in-out; } select:focus { box-shadow: none; -webkit-animation: none; } @-webkit-keyframes input-shadow { 0% { box-shadow: none; } 100% { box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); } } /* 9. W I D G E T S ........................................................................................................................................ */ .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; } /* search widget */ .widget_search .search-form .field { width: 100%; } /* menu widget */ .widget .menu > li { padding: 0; } /* flickr widget */ #footer .Simple_Flickr_Photos { margin-bottom: 30px; } .Simple_Flickr_Photos a { border-bottom: none; display: block; } .no-touch .Simple_Flickr_Photos a:hover { background: none; } .Simple_Flickr_Photos #flickr .flickr_badge_image { float: left; margin: 0 7px 7px 0; } .Simple_Flickr_Photos img { display: block; width: 57px; height: 57px; border: 4px solid #848484; margin-bottom: 0; } .opacity .Simple_Flickr_Photos img { opacity: 0.5; } .no-touch.opacity #flickr img:hover { opacity: 1; } .no-touch #flickr img:hover { border: 4px solid #fff; } .no-touch.csstransforms #flickr img:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); box-shadow: 0 0 40px rgba(0, 0, 0, 0.8), 0 0 50px rgba(0, 0, 0, 0.6); } /* twitter widget */ .widget_twitter .read-more, .widget_twitter .timesince { display: inline-block; margin-top: 2px; } .widget_twitter .tweets .timesince { font-style: normal; } .widget_twitter .tweets li { font-style: italic; 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; text-transform: uppercase; 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; } /* 10. D R O P - D O W N P A G E C O N T E N T A R E A ........................................................................................................................................ */ .dropdown-wrapper { overflow: hidden; height: 0; position: relative; background: black url('images/broken-noise.png') repeat left top; } .dropdown-wrapper:before, .dropdown-wrapper:after { content: " "; display: block; position: absolute; width: 100%; height: 5px; background: url('images/filter-bg.png') repeat-x left top; } .dropdown-wrapper:before { top: 6px; z-index: 1; } .dropdown-wrapper:after { bottom: 2px; } .dropdown-wrapper .dropdown-content { opacity: 0; padding: 40px 0 80px; color: #A1A1A1; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.9); } /* secondary logo and the close button */ .dropdown-wrapper .dropdown-nav { padding-top: 20px; padding-bottom: 60px; } .dropdown-nav .table-wrapper { display: table; float: left; width: 100%; } #page-area-logo, .close-button { display: table-cell; vertical-align: middle; } #page-area-logo { } #page-area-logo a { display: inline-block; color: #CECECE; font: normal 400 26px/40px 'Merriweather', Georgia, "Times New Roman", Times, serif; /* 50px / 14px :: 66px / 50px */ text-shadow: 1px 1px #000, 0px 0px #ccc, 2px 3px 1px #000; } .no-touch #page-area-logo a:hover { color: white; text-shadow: 0 0 2px rgba(255, 255, 255, 0.5); } #page-area-logo a img { opacity: 0.5; display: block; } .no-touch #page-area-logo a:hover img { opacity: 1; text-shadow: none; } .close-button { font-size: 35px; text-shadow: 1px 2px 2px rgba(0, 0, 0, .8); } .close-button span { position: relative; float: right; width: 34px; height: 34px; background: url('images/close-button.png') left top; cursor: pointer; } .csstransitions .close-button span { -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; } .close-button span span { position: absolute; color: #fff; height: 0; overflow: hidden; background: url('images/close-button.png') 0 -54px; } .no-touch .close-button > span:hover span { height: 100%; } /* page-content */ .dropdown-content #page-content { max-width: 940px; margin-left: auto; margin-right: auto; } /* drop-down border and drop-down button/arrow */ .dropdown-border { position: relative; background: #313236 url('images/background-noise.png'); width: 100%; height: 3px; } .loading-indicator { position: absolute; left: 0; top: 0; height: 3px; width: 15%; margin-left: -15%; background: #fff; } /* 11. H E A D E R S T Y L E S ........................................................................................................................................ */ #header { margin-bottom: 30px; } #header.excluded-tagline { margin-bottom: 0; } /* main header area */ .header-main-wrapper { position: relative; border-bottom: 1px solid #E0E0E0; } #header.excluded-tagline .header-main-wrapper { border: none; } .header-main { display: table; width: 100%; padding: 50px 0 50px; } .contact-info, #logo, .header-buttons { display: table-cell; vertical-align: middle; width: 33.33333333333%; } /* if the content is divided in two columns, instead of three */ .header-two-cols #logo { text-align: left; } .header-two-cols .contact-info div { float: right; } .header-two-cols .contact-info div:first-child { margin-left: 15px; margin-right: 0; } /* email and phone */ .contact-info div { float: left; padding: 5px 11px; background: url('images/border-img.png') repeat left top; border-bottom: 1px solid #c0c0c0; } .contact-info div:first-child { margin-right: 15px; } .phone-no .phone-icon, .email-address .mail-icon { margin-right: 4px; position: relative; z-index: 99; float: left; width: 20px; height: 100%; background: url('images/main.png') no-repeat; } .phone-no .phone-icon { background-position: -449px -19px; } .email-address .mail-icon { background-position: -449px -61px; } /* logo */ #logo { text-align: center; } .csstransitions #logo { -webkit-transform: translate3d(0, 0, 0); /* Prevent flickering and create a smooth transition in Safari and Chrome */ } #logo a { display: inline-block; } #logo a img { display: block; margin: 0 auto; margin-top: 5px; } #wp-title-logo { color: #444652; font: normal 400 50px/60px 'Merriweather', Georgia, "Times New Roman", Times, serif; /* 50px / 14px :: 66px / 50px */ text-shadow: 1px 1px #fff, 0px 0px #0E0E0E, 2px 3px 1px #E3E3E3; } #logo a img, #wp-title-logo { position: relative; top: 0; } .no-touch.opacity #logo a:hover img, .no-touch.opacity #wp-title-logo:hover { top: 5px; opacity: 0.8; } /* social networking buttons */ .header-buttons div { float: left; width: 26px; height: 26px; cursor: pointer; } .csstransitions .header-buttons div { -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; } #social-networking { float: right; padding-top: 2px; } #social-networking li { float: left; } #social-networking a { display: block; overflow: hidden; width: 33px; height: 33px; padding: 0 2px 2px 0; position: relative; } #social-networking li:last-child a { padding-right: 0; } #social-networking a span { display: block; width: 33px; height: 33px; background: url('images/social-networks.png') no-repeat left top; } .csstransitions #social-networking a span { -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } #social-networking #twitter-link span { background-position: left top; } .no-touch #social-networking #twitter-link:hover span { background-position: -33px 0; } #social-networking #facebook-link span { background-position: 0 -33px; } .no-touch #social-networking #facebook-link:hover span { background-position: -33px -33px; } #social-networking #googleplus-link span { background-position: 0 -66px; } .no-touch #social-networking #googleplus-link:hover span { background-position: -33px -66px; } #social-networking #linkedin-link span { background-position: 0 -99px; } .no-touch #social-networking #linkedin-link:hover span { background-position: -33px -99px; } #social-networking #pinterest-link span { background-position: 0 -132px; } .no-touch #social-networking #pinterest-link:hover span { background-position: -33px -132px; } #social-networking #flickr-link span { background-position: 0 -165px; } .no-touch #social-networking #flickr-link:hover span { background-position: -33px -165px; } #social-networking #vimeo-link span { background-position: 0 -198px; } .no-touch #social-networking #vimeo-link:hover span { background-position: -33px -198px; } #social-networking #youtube-link span { background-position: 0 -231px; } .no-touch #social-networking #youtube-link:hover span { background-position: -33px -231px; } #social-networking #rss-link span { background-position: 0 -264px; } .no-touch #social-networking #rss-link:hover span { background-position: -33px -264px; } /* tagline area */ #tagline-wrapper { position: relative; background: #f4f4f4 url('images/bg.jpg') repeat left top; border-bottom: 1px solid #E0E0E0; box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.017), 0 -5px 20px 0 rgba(0, 0, 0, 0.015); } #tagline { padding-top: 70px; padding-bottom: 70px; text-transform: none; font: 300 30px/40px 'Merriweather', Georgia, "Times New Roman", Times, serif; text-align: center; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.9); } #tagline a { border-bottom: 1px solid #a8a8a8; } .no-touch #tagline a:hover { border-bottom-color: transparent; } /* 12. S I T E N A V I G A T I O N ........................................................................................................................................ */ #menu-disabler { /* div overlay on top of the main menu */ display: none; background: transparent; background: rgba(255, 255, 255, 0.4); width: 100%; height: 100%; position: absolute; left: 0; top: 0; } /* select menu for mobile devices */ #mobile-menu { display: none; width: 100% !important; margin: 20px 0; } /* navigation wrapper */ #main-menu { background: #fdfdfd; position: relative; box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.03); border-bottom: 1px solid #E0E0E0; } #main-menu:before, #main-menu:after { content: ""; display: block; position: absolute; left: 0; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.035); } #main-menu:before { top: 0; } #main-menu:after { bottom: -2px; background: rgba(255, 255, 255, 0.035); } /* main navigation */ #menu { height: 100%; } #menu .menu > li { float: left; display: block; position: relative; -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; } .no-touch #menu .menu > li:hover, #main-menu .menu .sub-menu { box-shadow: 0 0 30px rgba(0, 0, 0, 0.15); } /* current menu item (li element) */ .current-menu-item-ajax, .current-menu-item { } .no-touch .current-menu-item-ajax:hover, .no-touch .current-menu-item:hover { box-shadow: none !important; } .current-menu-item-ajax .menu-lines, .current-menu-item .menu-lines { width: 100% !important; opacity: 1 !important; } /* animated navigation lines */ .menu-lines { width: 0; height: 3px; left: 0; top: -3px; position: absolute; z-index: 999; background: #fff; } .sub-menu-lines { width: 0; height: 1px; left: 0; bottom: 0; position: absolute; background: #686868; } #menu .sub-menu li:last-child .sub-menu-lines { background: transparent; } /* all menu links */ #menu a { text-transform: uppercase; display: block; padding: 14px 20px 15px; } /* top-level menu links */ #header .menu > li > a { color: #444751; } .no-touch #header .menu > li > a:hover { color: #222222; } .no-touch #menu a:hover, .no-touch #menu .current-menu-item > a:hover { color: #423a35; } /* sub menu indicator generated by jQuery plugin "Superfish" */ #menu .parent > a { position: relative; padding-right: 35px; } /* note: the "parent" class is generated by a custom walker */ #menu .parent > a:after { content: " "; text-indent: -9999px; position: absolute; margin: 8px 0 0 11px; width: 15px; height: 10px; background: url('images/main.png') no-repeat -369px -90px; opacity: 0.65; } .no-touch #menu .parent > a:hover:after { opacity: 1; } /* dropdown */ .menu-section #menu .sub-menu { display: none; text-align: left; min-width: 100%; position: absolute; margin: 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 20px 0 rgba(0, 0, 0, .20); -moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .20); box-shadow: 0 0 20px 0 rgba(0, 0, 0, .20); } .menu-section #menu .sub-menu li { margin-left: 0; float: none; position: relative; /* Introducing a padding between the li and the a give the illusion spaced items */ } .menu-section #menu .sub-menu a { display: block; white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */ } .menu-section #menu .sub-menu a:active { top: 0; /* don't nudge the element when clicked */ } #menu .sub-menu a { background: #313234; background-color: rgba(59, 60, 61, .95); background-image: url('images/menu-overlay.png'); background-position: left top; color: #999999; position: relative; padding: 5px 9px; text-transform: none; border: 1px solid #262626; border-color: rgba(0, 0, 0, .2); border-bottom: none; font-size: 11px; } #menu .sub-menu a:active { bottom: 0; } .no-touch #menu li:hover ul li a:hover { /* Set styles for dropdown when items are hovered */ border: 1px solid transparent; border-bottom: none; color: #f2f2f2; background-color: #939393; background-color: rgba(124, 124, 124, .95); } .csstransitions #menu .sub-menu a { /* HOVER OFF */ -moz-transition: all .40s ease-in-out; -webkit-transition: all .40s ease-in-out; -o-transition: all .40s ease-in-out; -ms-transition: all .40s ease-in-out; transition: all .40s ease-in-out; } .no-touch.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 a { border: 1px solid #262626; border-color: rgba(0, 0, 0, .2); } .no-touch #menu .sub-menu li a:hover { border: 1px solid #262626; border-color: rgba(0, 0, 0, .2); } .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; } /* Current menu item in the sub menu */ #menu .sub-menu .current-menu-item > a, #menu .sub-menu .current-menu-item-ajax > a { color: #fff; } .no-touch #menu .sub-menu .current-menu-item > a:hover, .no-touch #menu .sub-menu .current-menu-item-ajax > a:hover { text-decoration: none; } /* 13. P O R T F O L I O ........................................................................................................................................ */ /* portfolio filter links */ .filter-wrapper { position: relative; margin-bottom: 30px; overflow-x: hidden; } #filter { float: left; position: relative; left: 50%; text-transform: uppercase; } #filter li { float: left; position: relative; right: 50%; margin: 5px 0 5px 13px; } #filter li:first-child .filter-title { background: rgba(255, 255, 255, 0.09) url('images/border-img.png') repeat 0 -1px; border-bottom: 1px solid #c0c0c0; padding-bottom: 4px; } #filter li:last-child { margin-right: 13px; } #filter a { display: block; overflow: hidden; } #filter span { color: #4f4f4f; padding: 5px 10px; float: left; } #filter .term-name { background: #e3e3e3; } #filter .term-count { background: #323234; color: grey; border-left: 1px solid transparent; } .term-name-overlay, .term-count-overlay, .term-name-hover, .term-count-hover { position: absolute; } .term-name-overlay, .term-name-hover { left: 0; top: 0; } .term-count-overlay, .term-count-hover { right: 0; top: 0; } #filter .term-name-hover { top: -30px; background: #272728; color: #b2b2b2; } #filter .term-count-hover { top: 30px; background: #f7ed33; color: #2d2d2d; } /* active category */ #filter .active a span { background: #323234; color: #a5a5a5; } #filter .active .term-count { border-left: 1px solid #454547; } #filter .active .term-name-overlay, #filter .active .term-name-overlay, #filter .active .term-count-overlay, #filter .active .term-name-hover, #filter .active .term-count-hover { display: none; } /* portfolio grid */ .portfolio-row { padding: 0; } #portfolio-gallery { margin-bottom: 40px; } .gallery-without-filter { margin-top: 30px; } .excluded-tagline + #main-content .gallery-without-filter { margin-top: 0; } /* portfolio thumbnails */ #portfolio-gallery .portfolio-item { float: left; width: 100%; margin-bottom: 20px; opacity: 0; } .csstransitions .post-link { -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; } .post-link { display: block; position: relative; overflow: hidden; border: 1px solid #d6d6d6; border-width: 1px 1px 0 1px; } .no-touch .project:hover .post-link, .no-touch .post .post-link:hover { border-color: #686868; -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; } .post-link .project-overlay, .post-link .project-ajax-loader { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 20; } .post-link .project-overlay { opacity: 0; background: url('images/search.png') no-repeat center center, url('images/project-overlay.png') repeat left top; } .post-link .project-ajax-loader { background: url('images/ajax-loader.gif') no-repeat center center, url('images/ajax-bg.png') repeat left top; visibility: hidden; } .post-link .preview-img { display: block; } .csstransitions .post-link .project-overlay, .csstransitions .post-link .preview-img { -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; } .no-touch .project:hover .preview-img, .no-touch .post-link:hover .preview-img { -moz-transform: scale(1.1) !important; -webkit-transform: scale(1.1) !important; -o-transform: scale(1.1) !important; -ms-transform: scale(1.1) !important; transform: scale(1.1) !important; } .no-touch .project:hover .project-overlay, .no-touch .post-link:hover .project-overlay { opacity: 1 !important; } /* thumbnail captions */ .project-caption { background: url('images/bg.jpg') repeat left top; text-align: center; font: normal 400 0.9em 'Open Sans', Arial, Helvetica, sans-serif; text-transform: uppercase; } .project .project-caption a { display: block; color: #444; border: 1px solid #d6d6d6; padding: 0.8em 1em; } /* Isotope filtering */ .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } .isotope, .isotope .isotope-item { /* change duration value to whatever you like */ -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope {-webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity; } /* disabling Isotope CSS3 transitions */ .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } /* 14. S I N G L E P O S T S - O P E N E D S T A T E ........................................................................................................................................ */ /* post overlays and loading indicators */ #post-overlay, #secondary-loader-wrapper { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 99999; background-color: rgba(0, 0, 0, 0.7); background-image: url('images/project-overlay.png'); background-repeat: repeat; background-position: left top; } #post-loader, #secondary-post-loader { display: none; z-index: 9999; left: 50%; top: 50%; width: 59px; margin-top: -30px; margin-left: -30px; height: 59px; position: fixed; background: #1f1f1f url('images/ajax-loader.gif') no-repeat center center; } #secondary-loader-wrapper { display: block; background: none; } #secondary-post-loader { display: none; } /* post */ #post-wrapper { overflow: visible; opacity: 0; left: 0; right: 0; position: absolute; z-index: 999999; } #post-wrapper.opened-state { opacity: 1; } .opened-state + #post-overlay { display: block; } .opened-state #single-post { margin-top: 100px; } #post-wrapper .post-elements { cursor: pointer; width: 100%; min-height: 100%; position: absolute; left: 0; top: 0; } .item-margin { padding-bottom: 80px; cursor: pointer; } #single-post { position: relative; max-width: 600px; clear: both; cursor: auto; background: #f4f4f4; border-radius: 2px; box-shadow: 0 0 50px rgba(0, 0, 0, 0.95); margin: 0 auto; text-align: left; } #single-post .single-img-wrapper { min-height: 50px; position: relative; } #single-post .single-img-loader, #single-post .video-embed { background: #E8E8E8 url('images/slider-loader.gif') no-repeat 50% 50%; } #single-post .single-img-loader { position: absolute; left: 0; top: 0; width: 100%; } #single-post .single-img-ajax { display: block; margin: 0 auto; } #single-post .transparency-controller { opacity: 0; filter:alpha(opacity=0); } /* blog post featured image */ #single-post .featured-image { text-align: center; } .featured-image img { display: block; } .project-title, .blog-post-title { color: #37393c; padding: 20px 25px; margin: 0; text-align: center; font-family: Merriweather, serif; text-transform: none; } /* item categories, client, URL, and date of publishing */ .oy-item-meta { text-align: center; padding: 16px 25px 16px; background: url('images/border-img.png') repeat 0 0; } .oy-item-meta .item-meta-title, .oy-item-meta .days-ago { color: #000; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.9em; } .oy-item-meta .item-categories, .oy-item-meta .item-metadata { padding: 2px 0; display: inline-block; } .oy-item-meta .bullet:last-child { display: none; } .oy-item-meta .project-url { display: block; background: #f4f4f4; padding: 0 5px 1px; } .no-touch .oy-item-meta .project-url:hover { background: #edd83d; color: #232323; } .oy-item-meta h2 { font-size: 20px; } .post-content { padding: 20px 25px 25px; } .post-content > *:last-child { margin-bottom: 0; } .post-content a { border-bottom: 1px solid #9b9b9b; } .no-touch .post-content a:hover { border-color: #b2b2b2; } /* item navigation (close, previous, and next buttons)*/ .post-nav, .post-share { float: right; margin: 20px 20px 0 0; position: relative; } .post-nav li, .post-share li { float: right; cursor: pointer; } .post-nav a { position: relative; display: block; color: inherit; } .csstransitions .post-nav a, .csstransitions .post-nav span { -moz-transition: none; -webkit-transition: none; -o-transition: background-position 0 ease-in; -ms-transition: none; transition: none; } .csstransitions .close-current-post span, .csstransitions .prev-post span, .csstransitions .next-post span { -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; } .post-nav .prev-post, .post-nav .next-post, .post-nav .share-item { padding-right: 4px; } .post-nav .prev-post, .post-nav .next-post, .post-nav .close-current-post { display: block; width: 37px; height: 37px; overflow: hidden; } .post-nav .close-current-post span, .post-nav .prev-post span, .post-nav .next-post span, .post-nav .share-item span { width: 37px; height: 37px; display: block; background: url('images/main.png') no-repeat left top; } .share-item span { width: auto; } .post-nav .close-current-post span { background-position: 0 -111px; } .no-touch .post-nav .close-current-post:hover span { background-position: 0 -74px; } .post-nav .prev-post span { background-position: 0 -37px; } .no-touch .post-nav .prev-post:hover span { background-position: -37px -37px; } .post-nav .next-post span { background-position: -37px 0; } .no-touch .post-nav .next-post:hover span { background-position: 0 0; } /* The share button */ .share-item .share-btn { display: block; z-index: 1000; position: relative; overflow: hidden; } .csstransitions .share-btn { -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; } .share-item .share-btn span { padding: 8px 11px; height: 37px; width: auto; background: grey; color: #4f4f4f; float: left; } .share-item .share-btn .share-text { background: #f4f4f4; color: grey; text-transform: uppercase; font-size: 0.95em; line-height: 37px; padding: 0 11px; } .share-item .share-btn .share-sign { width: 35px; padding: 8px 3px; text-align: center; } .share-item .share-btn .share-sign, .share-item .share-btn .share-sign-overlay { background: #fff url('images/main.png') no-repeat -359px 2px; } .share-item .share-btn .share-sign-hover { background: #fff url('images/main.png') no-repeat -396px 2px; } .share-item .share-btn.active-btn .share-sign, .share-item .share-btn.active-btn .share-sign-overlay { background: #fff url('images/main.png') no-repeat -358px -35px; } .share-item .share-btn.active-btn .share-sign-hover { background: #fff url('images/main.png') no-repeat -395px -35px; } .share-btn .share-text-overlay, .share-btn .share-sign-overlay, .share-btn .share-text-hover, .share-btn .share-sign-hover { position: absolute; } .share-btn .share-text-overlay, .share-btn .share-text-hover { left: 0; top: 0; } .share-btn .share-sign-overlay, .share-btn .share-sign-hover { right: 0; top: 0; } .share-item .share-btn .share-text-hover { top: -37px; background-color: black; color: #e0e0e0; } .share-item .share-btn .share-sign-hover, .share-item .share-btn.active-btn .share-sign-hover { top: 37px; background-color: #f7ed33; color: #2d2d2d; } /* social-sharing */ .post-share { margin-right: 0; } .post-share .twitter-share, .post-share .fb-share { width: auto; background: none; padding: 9px 0 20px; border: none; margin-top: -100px; } .post-share .twitter-share { margin-left: 10px; } /* opera fix for the facebook's button alignment with the twitter button */ x:-o-prefocus, .fb_iframe_widget iframe { top: -4px; } /* 15. P O R T F O L I O S L I D E R ........................................................................................................................................ */ /* Browser Resets for slider's elements */ .flex-container a, .flexslider a, .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus { outline: none; } .slides, .flex-control-nav, .flex-direction-nav { margin: 0; padding: 0; list-style: none; } /* FlexSlider Necessary Styles */ .flexslider { background: #E8E8E8 url('images/slider-loader.gif') no-repeat 50% 50%; margin: 0; padding: 0; height: 200px; } .flexslider .slides > li { display: none; } /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img { max-width: 100%; display: block; margin: 0 auto; cursor: pointer; } .flex-pauseplay span { text-transform: capitalize; } /* Clearfix for the .slides element */ .slides:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } html[xmlns] .slides { display: block; } * html .slides { height: 1%; } /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child { display: block; } /* FlexSlider Default Theme */ .flex-container { zoom: 1; position: relative; overflow: hidden; } /* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */ .flexslider { position: relative; zoom: 1; } .flexslider .slides { zoom: 1; } .flexslider .slides > li { position: relative; } /* Caption style */ .flex-caption { text-align: center; width: 100%; padding: 3% 20px; margin: 0; position: absolute; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.2); color: #f9f9f9; color: rgba(255, 255, 255, 0.76); } .no-touch .flexslider:hover .flex-caption, .no-touch .single-img-wrapper:hover .flex-caption { background: rgba(0, 0, 0, 0.5); color: rgba(255, 255, 255, 0.85); } .csstransitions .flex-caption { -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; } /* Direction Nav */ .flex-direction-nav a, .slide-position { opacity: 0.5; width: 50px; height: 50px; margin: -25px 0 0; display: block; position: absolute; z-index: 1; top: 50%; cursor: pointer; text-indent: -9999px; } .csstransitions .flex-direction-nav a, .csstransitions .slide-position { -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; } .flex-direction-nav a:active { bottom: 50px; } .flex-direction-nav .flex-prev { left: 0; background: url('images/main.png') no-repeat center center; background-position: -99px 0; } .flex-direction-nav .flex-next { right: 0; background: url('images/main.png') no-repeat center center; background-position: -99px -52px; } .no-touch .flexslider:hover .flex-next, .no-touch .flexslider:hover .flex-prev { opacity: 0.8; } .flex-direction-nav .disabled { opacity: .5!important; filter:alpha(opacity=50); cursor: default; } /* slide counter */ .slide-position { left: -50px; top: 0; margin: 0; cursor: default; opacity: 0; background: rgba(0, 0, 0, 0.8); text-indent: 0; color: #fff; text-align: center; line-height: 50px; } /* 16. B L O G ........................................................................................................................................ */ .blog-row { padding: 0; } #blog-posts { margin-bottom: 30px; } #blog-posts .blog-post { float: left; width: 100%; margin-bottom: 20px; opacity: 0; } .post-meta { background: url('images/bg.jpg') repeat left top; border: 1px solid #d6d6d6; padding: 8px 14px 20px; } .blog-post .post-title { border: 3px solid #3a3939; border-width: 0 0 3px 0; margin-bottom: 0; text-align: center; font: normal 400 0.9em 'Open Sans', Arial, Helvetica, sans-serif; text-transform: uppercase; } .blog-post .post-title a { display: block; color: #444; padding: 0.8em 1em; } .blog-post .post-title a:hover { color: #000; } .blog-post .post-excerpt { border-top: 2px solid #3a3939; margin-top: 1px; padding-top: 20px; } .blog-post time { float: left; } .blog-post time a, .blog-post .num-of-comments a { display: block; } .blog-post time span { float: left; width: 17px; height: 17px; background: url('images/main.png') repeat -489px -60px; margin: -1px 3px 0 0; } .blog-post .num-of-comments { float: right; } .blog-post .num-of-comments span { float: left; width: 17px; height: 17px; background: url('images/main.png') repeat -489px -20px; margin: 0 3px 0 0; } #load-more-btn { float: left; position: relative; left: 50%; text-transform: uppercase; margin-bottom: 50px; } #load-more-btn div { float: left; position: relative; overflow: hidden; right: 50%; margin: 5px 13px 5px 13px; } #load-more-btn span { height: 32px; padding: 0 11px; line-height: 32px; cursor: pointer; display: block; color: #4f4f4f; float: left; } #load-more-btn .load-more-text { background: #e3e3e3; line-height: 30px; } #load-more-btn .load-more-arrow { background: #323234; color: grey; line-height: 30px; width: 36px; text-align: center; } .load-more-text-overlay, .load-more-arrow-overlay, .load-more-text-hover, .load-more-arrow-hover { position: absolute; } .load-more-text-overlay, .load-more-text-hover { left: 0; top: 0; line-height: 30px; } .load-more-arrow-overlay, .load-more-arrow-hover { right: 0; top: 0; line-height: 30px; } #load-more-btn .load-more-text-hover { top: -32px; background: #272728; color: #b2b2b2; } #load-more-btn .load-more-arrow-hover { top: 32px; background: #f7ed33; color: #2d2d2d; } #load-more-btn .currently-loading { background-image: url('images/ajax-loader-2.gif'); background-repeat: no-repeat; background-position: 49% 53%; color: transparent; font-size: 0px; } #load-more-btn .load-more-arrow-overlay { background-image: url('images/ajax-loader.gif'); background-repeat: no-repeat; background-position: -1000px -1000px; } #load-more-btn .load-more-arrow-overlay.currently-loading { background-image: url('images/ajax-loader.gif'); background-repeat: no-repeat; background-position: 49% 53%; } /* 17. C O N T E N T S T Y L E S ........................................................................................................................................ */ /* post, page, and widget contents. Note: the "secondary-content" class selects both the page content area and the widget content area. */ .post-content ul, .post-content ol, .post-content table, .post-content dl, #page-content ul, #page-content ol, #page-content dl { margin: 1.5em 0; } .post-content ul, .post-content ol, #page-content ul, #page-content ol { 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, #page-content ul { list-style-type: square; } .post-content ol, #page-content ol { list-style-type: decimal; } .post-content blockquote, .secondary-content blockquote { font-style: italic; margin: 0; } .post-content blockquote:before, .secondary-content blockquote:before { /* quotes */ font-family: Georgia, serif; content: "“"; font-size: 2.75em; margin-left: -.7em; padding: 0 5px 0 0; margin-top: .1em; float: left; opacity: 0.8; } /* this adds the quote before the blockquote */ .post-content dl, .secondary-content dl { margin: 1.75em 0 1.75em; } .post-content dt, .secondary-content dt { margin-top: 1.25em; font-weight:700; } .post-content dd, .secondary-content dd { font-style: italic; margin-top:0.5em; line-height:1.6em; } .post-content img, .secondary-content img { max-width: 100%; } /* table */ table { color: #A1A1A1; } .secondary-content table, .post-content table { border: 1px solid #424141; border-collapse: collapse; background: #212121; text-shadow: none; } .secondary-content tr:nth-of-type(odd), .post-content tr:nth-of-type(odd) { background-color: #353535; } /* zebra style table */ .secondary-content th, .secondary-content td, .post-content th, .post-content td { border: 1px solid #424141; padding: 9px 22px; } .secondary-content th, .post-content th { text-transform: uppercase; font-weight: normal; } .secondary-content caption, .post-content caption { font-size: 1.2em; font-weight: bold; } .secondary-content b, .secondary-content strong { color: #A1A1A1; } /* 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, .secondary-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, .secondary-content pre { border-left: 6px solid #F5D995; text-shadow: none; border-top-left-radius: 2px; border-bottom-left-radius: 2px; 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, .secondary-content pre code { color: #443325; line-height: 1.6em; margin: 0 0 0 40px; padding: 18px 0; display: block; } .post-content video, .secondary-content video { margin: 1.5em 0; max-width: 100%; display: block; } .post-content object, .secondary-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; } 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; } .secondary-content img ~ img, .post-content img ~ img { margin-left: 20px; } .wp-caption { text-shadow: none; border: 1px solid #3d3d3d; text-align: center; background-color: #353535; border-radius: 1px; 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; color: #ccc; } .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; } /* page content */ #page-content h1, #page-content .h1, #page-content h2, #page-content .h2, #page-content h3, #page-content .h3, #page-content h4, #page-content .h4, #page-content h5, #page-content .h5, #page-content h6, #page-content .h6 { color: #f7f6f4; } #page-content a:not(.shortcode-button) { color: #fff; border-bottom: 1px solid #505050; } #page-content a:visited:not(.shortcode-button) { color: #fff; } .no-touch #page-content a:hover:not(.shortcode-button) { color: #fff; text-shadow: 0 0 2px rgba(255, 255, 255, 0.5); border-bottom: 1px solid #fff; } #page-content a:active:not(.shortcode-button) { color: #fff; } #page-content ul, #page-content ol { list-style-position: outside; } /* post content */ .post-content b, .post-content strong { font-weight: 700; } .post-content blockquote { padding-left: 20px; } .post-content input:not([type=submit]):not([type=file]), .post-content textarea, #main-content input:not([type=submit]):not([type=file]), #main-content textarea, #respond input:not([type=submit]):not([type=file]), #respond textarea { border: 1px solid #dbdbdb; box-shadow: none; background: #fff; } .post-content input[type="text"]:focus, .post-content input:not([type=submit]):not([type=file]):focus, .post-content textarea:focus, .post-content select:focus, #main-content input[type="text"]:focus, #main-content input:not([type=submit]):not([type=file]):focus, #main-content textarea:focus, #main-content select:focus, #respond input[type="text"]:focus, #respond input:not([type=submit]):not([type=file]):focus, #respond textarea:focus, #respond select:focus { background: #fff; box-shadow: none; -webkit-animation: none; } /* 18. C O M M E N T S T Y L E S ........................................................................................................................................ */ #comments { margin: 15px 25px 20px; text-transform: none; font-family: Merriweather, serif; } /* h3 comment title */ #comments span { font-weight: 600; } /* number of comments span */ .commentlist { margin: 0 25px 40px; } .commentlist li { position: relative; clear: both; list-style-type: none; } .commentlist li[class*=depth-] { margin-top: 1.1em; } .commentlist li.depth-1 { margin-left: 0; margin-top: 0; } .commentlist li:not(.depth-1) { margin-left: 30px; margin-top: 0; padding-bottom: 0; } .commentlist li:last-child { margin-bottom: 0; } .commentlist .comment-body { background: #fff; margin-bottom: 20px; padding: 15px 15px 0 10px; border: 1px solid #eee; border-width: 1px 1px 0 1px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.13); } .commentlist .comment-author + .help { margin: 0; margin-left: 70px; } .commentlist .vcard { margin-left: 70px; margin-bottom: 15px; } .commentlist .vcard cite.fn { display: inline-block; font-style: normal; margin-top: -4px; } .commentlist .vcard time { } .commentlist .vcard time a { color: #999; text-decoration: none; } .commentlist .vcard time a:hover { text-decoration: underline; } .commentlist .vcard .avatar { position: absolute; left: 20px; margin-top: 2px; padding: 2px; border: 1px solid #EDEFEE; background: #fff; } .commentlist .comment-meta { font-size: 12px; } .commentlist li .comment_content { margin-left: 70px; } .commentlist li .comment_content p { font-size: 1em; } .commentlist li ul { margin: 0; } .commentlist .comment-reply-link { text-decoration: none; } /* 19. C O M M E N T F O R M S T Y L E S ........................................................................................................................................ */ #respond { padding: 0 25px 20px; } .post-content + #respond { margin-top: 15px; } .comment-body + #respond { padding: 0; } #reply-title { text-transform: none; font-size: 15px; font-family: Merriweather, serif; } #reply-title #cancel-comment-reply-link { display: block; } #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 textarea { width: 100%; max-width: 600px; height: 180px; } #respond input[type=text], #respond input[type=email], #respond input[type=url] { max-width: 300px; } /* 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; } /* 20. F O O T E R ........................................................................................................................................ */ #footer { border-top: 1px solid #d4d4d4; color: #808080; background: url('images/bg.jpg') repeat left top; } #footer .copyright { text-align: center; padding: 60px 0 40px; } #footer .copyright a { color: #808080; border-bottom: 1px solid #a3a3a3; } .no-touch #footer .copyright a:hover { #color: #595959; border-bottom: 1px solid transparent; } #back-to-top-btn { display: block; opacity: 0; position: fixed; z-index: 1000; height: 32px; bottom: 35px; right: -300px; } .csstransitions #back-to-top-btn { -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; } #back-to-top-btn > div { position: relative; overflow: hidden; } #back-to-top-btn span { height: 32px; padding: 0 11px; line-height: 32px; background: grey; color: #4f4f4f; float: left; } #back-to-top-btn .top-text { background: #323234; color: grey; line-height: 30px; } #back-to-top-btn .top-arrow { background: #323234; color: grey; line-height: 28px; } .top-text-overlay, .top-arrow-overlay, .top-text-hover, .top-arrow-hover { position: absolute; } .top-text-overlay, .top-text-hover { left: 0; top: 0; line-height: 30px; } .top-arrow-overlay, .top-arrow-hover { right: 0; top: 0; line-height: 28px; } #back-to-top-btn .top-text-hover { top: -32px; background: #cecece; color: #4f4f4f; } #back-to-top-btn .top-arrow-hover { top: 32px; background: #f7ed33; color: #2d2d2d; } /* 21. E X P A N D A B L E F O O T E R W I D G E T A R E A ........................................................................................................................................ */ .widget-area-border { position: relative; background: #313236 url('images/background-noise.png'); width: 100%; height: 3px; } /* drop-down button/arrow */ #dropdown-trigger, #dropdown-trigger span { display: block; position: absolute; bottom: 0; left: 0; right: 0; margin-left: auto; margin-right: auto; } #dropdown-trigger { cursor: pointer; width: 54px; height: 29px; z-index: 999; } #dropdown-trigger span { background: url('images/main.png') no-repeat -174px -52px; width: 54px; height: 26px; } .no-touch #dropdown-trigger span:hover { background-position: -174px -78px; } .csstransitions #dropdown-trigger span { -moz-transition: bottom .2s ease-in-out; -webkit-transition: bottom .2s ease-in-out; -o-transition: bottom .2s ease-in-out; -ms-transition: bottom .2s ease-in-out; transition: bottom .2s ease-in-out; } .no-touch #dropdown-trigger.hover-transition-enabled:hover span { bottom: 3px; background-position: -174px -26px; } #dropdown-trigger.hover-transition-enabled span { background-position: -174px 0; } .footer-widgets-wrapper { overflow: hidden; height: 0; position: relative; background: black url('images/broken-noise.png') repeat left top; } .footer-widgets-wrapper:before, .footer-widgets-wrapper:after { content: " "; display: block; position: absolute; width: 100%; height: 5px; background: url('images/filter-bg.png') repeat-x left top; } .footer-widgets-wrapper:before { top: 6px; z-index: 1; } .footer-widgets-wrapper:after { bottom: 7px; } .footer-widgets-wrapper .footer-widgets-content { opacity: 0; padding: 40px 0 80px; color: #A1A1A1; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.9); } /* simple logo and the close button */ .footer-widgets-wrapper .dropdown-nav { padding-top: 20px; padding-bottom: 20px; } #widget-area-logo { float: left; } .secondary-logo a { display: inline-block; } #widget-area-logo a { color: #CECECE; font: normal 400 26px/40px 'Merriweather', Georgia, "Times New Roman", Times, serif; /* 50px / 14px :: 66px / 50px */ text-shadow: 1px 1px #000, 0px 0px #ccc, 2px 3px 1px #000; } .no-touch #widget-area-logo a:hover { color: white; text-shadow: 0 0 2px rgba(255, 255, 255, 0.5); } #widget-area-logo a img { opacity: 0.5; } .no-touch #widget-area-logo a:hover img { opacity: 1; text-shadow: none; } .close-button { font-size: 35px; text-shadow: 1px 2px 2px rgba(0, 0, 0, .8); } .close-button span { position: relative; float: right; width: 31px; height: 31px; background: url('images/main.png') -250px -9px; cursor: pointer; } .close-button span span { position: absolute; color: #fff; height: 0; overflow: hidden; background: url('images/main.png') -250px -64px; } .no-touch .close-button > span:hover span { height: 100%; } .csstransitions .close-button span { -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; } /* widgets */ .footer-widgets-content .widget-areas-wrapper .row { padding: 0; } .footer-widgets-content .widget-areas { max-width: 940px; margin-left: auto; margin-right: auto; } .footer-widgets-wrapper .widget-area.grid-1 { width: 100%; } .footer-widgets-wrapper .widget-area.grid-2 { width: 50%; float: left; } .footer-widgets-wrapper .widget-area.grid-3 { width: 33.33333333333333%; float: left; } .footer-widgets-wrapper .widget-area.grid-4 { width: 25%; float: left; } .widget-area .widgettitle { color: #cecece; padding-bottom: 0.75em; margin-bottom: 1.5em; background: url('images/heading-border.png') repeat-x left bottom; font-family: "Open Sans", Arial, Helvetica, sans-serif; } .widget-area h1, .widget-area h2, .widget-area h3, .widget-area h4, .widget-area h5, .widget-area h5, .widget-area h6 { text-shadow: 0 1px 0 rgba(0, 0, 0, .5); color: #fff; font-family: 'Merriweather', Georgia, "Times New Roman", Times, serif; } .widget-area a { color: #fff; } .widget-area a:visited { color: #fff; } .no-touch .widget-area a:hover { color: #fff; text-shadow: 0 0 2px rgba(255, 255, 255, 0.5); } .widget-area a:active { color: #fff; } /* widget links */ .widget-area .widget a { border-bottom: 1px solid #505050; } .no-touch .widget-area .widget a:hover { border-bottom: 1px solid #fff; } .widget-area .widgettitle a, .no-touch .widget-area .widgettitle a:hover { border-bottom: none; } /* 22. S E A R C H P A G E ........................................................................................................................................ */ .search #main-content .row-wrapper { margin-bottom: 30px; } .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; } /* 23. 4 0 4 P A G E ........................................................................................................................................ */ #not-found { text-align: center; margin-bottom: 30px; } #not-found-heading { font-weight: bold; } #not-found-img { border: none; } #not-found-form input { margin: 0 auto 20px; } /* 24. 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 form */ .form-status { display: none; border-radius: 3px; background: none; max-width: 500px; margin: 0; padding: 20px 0 0 40px; position: relative; border: none; } .form-status.success { color: #7b9b2f; } .form-status.error { color: #e44141; } .contact-form .status-icon { display: block; position: absolute; top: 15px; left: 0; background: url('images/main.png') no-repeat -310px -20px; width: 28px; height: 28px; } .contact-form .success .status-icon { background-position: -310px -56px; } .contact-form .loading-img { position: relative; left: 10px; top: 11px; border: none; margin-bottom: 0 !important; } /* loading gif at the end of the contact form */ /* 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: 38px; height: 37px; 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; } /* buttons */ .shortcode-button { color: #443D39; font-family: 'Merriweather', serif; display: inline-block; border-bottom: 1px solid #fff; border-radius: 3px; margin: 0 5px 22px 5px; padding: 10px 11px 8px 11px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); } .no-touch .shortcode-button:hover { color: #605955 !important; } .shortcode-button.white { background: #fff; color: #443D39; border-color: #fff; box-shadow: #a3a3a3 0 2px 0; } .no-touch .shortcode-button.white:hover { background: #fff; border-color: #fff; box-shadow: #cecece 0 2px 0; } .shortcode-button.yellow { background: #ffe787; border-color: #F5E383; color: #443D39; box-shadow: #BE9144 0 2px 0; } .no-touch .shortcode-button.yellow:hover { background: #ffebaa; border-color: #FFF9B6; box-shadow: #DCB759 0 2px 0; } .shortcode-button.blue { background: #8bd4ed; border-color: #85c0d3; color: #443D39; box-shadow: #3e89a3 0 2px 0; } .no-touch .shortcode-button.blue:hover { background: #a0dbef; border-color: #85c0d3; box-shadow: #519cb5 0 2px 0; } .shortcode-button.green { background: #b0cc5d; border-color: #c1d87d; color: #443D39; box-shadow: #81a515 0 2px 0; } .no-touch .shortcode-button.green:hover { background: #d0e590; border-color: #c1d87d; box-shadow: #93b237 0 2px 0; } .shortcode-button.red { background: #ed5850; border-color: #e0645e; color: #443D39; box-shadow: #a52721 0 2px 0; } .no-touch .shortcode-button.red:hover { background: #f27f79; border-color: #d88784; box-shadow: #b23b37 0 2px 0; } .shortcode-button.grey { background: #c1c1c1; border-color: #cecece; color: #443D39; box-shadow: #7c7c7c 0 2px 0; } .no-touch .shortcode-button.grey:hover { background: #fefefe; border-color: #fff; box-shadow: #a3a3a3 0 2px 0; } .shortcode-button.orange { background: #f2a359; border-color: #f4b173; color: #443D39; box-shadow: #b77326 0 2px 0; } .no-touch .shortcode-button.orange:hover { background: #f7bf8a; border-color: #f7bf8f; box-shadow: #cc8d4b 0 2px 0; } .shortcode-button.purple { background: #e580b8; border-color: #e58ebe; color: #443D39; box-shadow: #b54281 0 2px 0; } .no-touch .shortcode-button.purple:hover { background: #ea9dc7; border-color: #eaa4ca; box-shadow: #bf5b90 0 2px 0; } .shortcode-button.brown { background: #ea804f; border-color: #ef9870; color: #443D39; box-shadow: #c16134 0 2px 0; } .no-touch .shortcode-button.brown:hover { background: #ea9b79; border-color: #f2b093; box-shadow: #c67149 0 2px 0; } /* alerts */ .alert { font-family: 'Merriweather', serif; padding: 12px 5% 12px 5%; text-align: center; color: #443D39; border-radius: 2px; margin: 0 0 20px 0; border: 1px solid; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); } .alert.yellow { border-color: #F5E383; background: #ffe787; } .alert.green { border-color: #c1d87d; background: #b0cc5d; } .alert.red { border-color: #e0645e; background: #ed5850; } /* map */ .map-container { text-shadow: none; } .gmap img { max-width: none !important; } /* 25. I N T E R N E T E X P L O R E R ........................................................................................................................................ */ /* IE8 and IE9 */ .ie8 #post-wrapper .post-elements, .ie9 #post-wrapper .post-elements { cursor: auto !important; } /* IE8 */ .ie8 img { width: auto; } /* responsive images for ie 8 */ .ie8 * { opacity: inherit; filter: inherit; } .ie8 .footer-widgets-content a, .ie8 .dropdown-content a { position: static; } /* needed for the jquery fade animations to work properly */ .ie8 .current-menu-item-ajax .menu-lines, .current-menu-item .menu-lines { filter: alpha(opacity=100) !important; } .ie8 #tagline { color: #494949; } .ie8 #post-overlay, .ie8 #secondary-loader-wrapper { background-image: url('images/ajax-bg.png'); } /* projects and blog posts */ .ie8 .project .project-overlay, .ie8 .blog-post-link .project-overlay { filter: alpha(opacity=0); background: url('images/project-overlay.png') repeat left top; } .ie8 .project:hover .project-overlay, .ie8 .blog-post-link:hover .project-overlay { filter: alpha(opacity=70); } .ie8 .post-link .project-ajax-loader { background: url('images/ajax-bg.png') repeat left top; } .ie8 .post-link .project-overlay:after, .ie8 .post-link .project-ajax-loader:after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('images/ajax-loader.gif') no-repeat center center; } .ie8 .post-link .project-overlay:after { background-image: url('images/search.png'); filter: alpha(opacity=100) !important; } /* widget and the page area logos */ .ie8 #widget-area-logo a img, .ie8 #page-area-logo a img { filter: alpha(opacity=50); } .ie8 #widget-area-logo a:hover img, .ie8 #page-area-logo a:hover img { filter: alpha(opacity=100); } /* Flexslider */ .ie8 .slide-position, .ie8 .flex-caption { background: black; } .ie8 .flex-direction-nav a, .ie8 .slide-position, .ie8 .flex-caption { filter: alpha(opacity=40); } .ie8 .flexslider:hover .flex-next, .ie8 .flexslider:hover .flex-prev, .ie8 .flexslider:hover .flex-caption { filter: alpha(opacity=70); } @font-face { font-family: 'MerriweatherLight'; src: url('fonts/Merriweather-Light-webfont.eot'); font-weight: normal; font-style: normal; } .ie8 #tagline { font-family: 'MerriweatherLight', Georgia, "Times New Roman", Times, serif; } /* 26. M E D I A Q U E R I E S ........................................................................................................................................ */ /* Large screens, desktops, and laptops ................................................................ */ @media only screen and (max-width: 1680px) { #tagline { font-size: 26px; padding-top: 60px; padding-bottom: 60px; } } @media only screen and (max-width: 1300px) { #tagline { font-size: 25px; padding-top: 60px; padding-bottom: 60px; } } /* Tablets (portrait and landscape) ................................................................ */ /* iPad (portrait and landscape) */ @media only screen and (min-device-width : 768px) and (max-device-width: 1024px) { body { -webkit-text-size-adjust: none; } } @media only screen and (max-width: 960px) { /* 4. Header Styles ................................................................ */ .header-main { display: block; width: 100%; padding: 40px 0 40px; } .contact-info, #logo, .header-buttons { display: block; text-align: center; } .contact-info, #logo, .header-buttons { width: 100%; } #logo { margin-bottom: 20px; } .standalone-logo { margin-bottom: 0 !important; } .header-two-cols #logo { text-align: center; } #logo a img { margin-top: 20px; } .standalone-logo a img { margin-top: 5px !important; } .contact-info { margin-bottom: 20px; } .header-two-cols .contact-info { margin-bottom: 0; } .contact-info div, .header-two-cols .contact-info div { float: none; display: inline-block; } .contact-info div, .header-two-cols .contact-info div { margin-left: auto !important; margin-right: auto !important; } #social-networking { float: left; position: relative; left: 50%; } #social-networking li { float: left; position: relative; right: 50%; } .header-buttons { width: 100%; overflow: hidden; } /* display the select menu, while hiding the normal menu */ #mobile-menu { display: block; } .menu-section nav { display: none; } } /* Mobile (portrait and landscape) ................................................................ */ /* Smartphones (portrait and landscape) */ @media only screen and (min-device-width: 320px) and (max-width: 480px) { body { -webkit-text-size-adjust: none; } } @media only screen and (max-width: 767px) { .footer-widgets-wrapper .widget-area.grid-4 { width: 50%; float: left; } #wp-title-logo { font-size: 30px; line-height: 40px; } #tagline { font-size: 22px; padding-top: 40px; padding-bottom: 40px; } /* Responsive Tables */ table.responsive { margin-bottom: 0; } .pinned { position: absolute; left: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #494949;; border-left: 1px solid #494949;; } .pinned table { border-right: none; border-left: none; width: 100%; } .pinned table th, .pinned table td { white-space: nowrap; } .pinned td:last-child { border-bottom: 0; } div.table-wrap { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #494949; } div.table-wrap div.scrollable table { margin-left: 35%; } div.table-wrap div.scrollable { overflow: scroll; overflow-y: hidden; } table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; } table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; } } @media only screen and (max-width: 750px) { .footer-widgets-wrapper .widget-area.grid-4, .footer-widgets-wrapper .widget-area.grid-3, .footer-widgets-wrapper .widget-area.grid-2 { width: 100%; float: none; } .one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth { width: 100% !important; } } @media only screen and (min-width: 480px) and (max-width: 750px) { .row-wrapper { max-width: 400px; } .dropdown-nav.row-wrapper { max-width: 100%; } } @media only screen and (max-width: 600px) { .footer-widgets-wrapper .widget-area.grid-3 { float: none; width: 100%; } .item-margin { display: none; } #single-post { border-radius: 0; } } @media only screen and (min-width: 360px) and (max-width: 480px) { .row-wrapper { max-width: 360px; } .dropdown-nav.row-wrapper { max-width: 100%; } } @media only screen and (max-width: 480px) { #tagline { font-size: 20px; line-height: 32px; } .footer-widgets-wrapper .widget-area.grid-4, .footer-widgets-wrapper .widget-area.grid-2 { float: none; width: 100%; } } @media only screen and (max-width: 479px) { .share-item { display: none; } .post-share { clear: both; float: right; margin: 0 20px 0 0 !important; opacity: 1 !important; } .post-share .twitter-share, .post-share .fb-share { margin-top: 0; } .post-share .fb-share { float: right; } .post-share .twitter-share { float: left; } } @media only screen and (max-width: 400px) { .contact-info div { display: block; } .contact-info .phone-icon, .contact-info .mail-icon { float: left; display: inline-block; } } @media only screen and (max-width: 295px) { #tagline { font-size: 18px; line-height: 32px; } } /* Portfolio Grid - All Devices ................................................................ */ @media only screen and (max-width: 749px) { #portfolio-gallery .portfolio-item { width: 100%; } /* 1 column */ } @media only screen and (min-width: 750px) { #portfolio-gallery .portfolio-item { width: 33.33333333333333%; } /* 3 columns */ } @media only screen and (min-width: 1000px) { #portfolio-gallery .portfolio-item { width: 25%; } /* 4 columns */ } @media only screen and (min-width: 1220px) { #portfolio-gallery .portfolio-item { width: 20%; /* 100 / 5 */ } } @media only screen and (min-width: 1550px) { #portfolio-gallery .portfolio-item { width: 16.66666666666667%; /* 100 / 6 */ } } @media only screen and (min-width: 1850px) { #portfolio-gallery .portfolio-item { width: 14.28571428571429%; /* 100 / 7 */ } } /* Blog Grid - All Devices ................................................................ */ @media only screen and (max-width: 749px) { #blog-posts .blog-post { width: 100%; } /* 1 column */ } @media only screen and (min-width: 750px) { #blog-posts .blog-post { width: 50%; } /* 2 columns */ } @media only screen and (min-width: 950px) { #blog-posts .blog-post { width: 33.33333333333333%; } /* 3 columns */ } @media only screen and (min-width: 1200px) { #blog-posts .blog-post { width: 25%; } /* 4 columns */ } @media only screen and (min-width: 1520px) { #blog-posts .blog-post { width: 20%; /* 100 / 5 */ } } @media only screen and (min-width: 1700px) { #blog-posts .blog-post { width: 16.66666666666667%; /* 100 / 6 */ } }