/* Theme Name: Pixem Theme URI: http://www.quadcodes.com/ Version: 1.1.3 Description: Designed by QuadCodes. Author: QuadCodes Author URI: http://www.quadcodes.com Tags: light, dark Copyright: © 2012 QuadCodes. License: GNU General Public License v2.0 License URI: http://www.gnu.org/licenses/gpl-2.0.html */ /* Table of Contents ================================================== 1. BODY 2. TOP BAR & TOP CONTENT 3. HEADER 4. BASIC PAGE LAYOUT 5. FLOATING MENU 6. HOME PAGE DISPLAY SWITCHER 7. MISCELLANEOUS 8. TYPOGRAPHY 9. ORDERED / UNORDERED LISTS 9.1 PORTFOLIO FILTER 9.2 SERVICE 9.3 SOCIAL 9.4 STANDARD 9.5 TYPICLE 9.6 TAGS 9.7 SKILLS 9.8 ADDRESS 9.9 DRIBBBLE 9.10 FLICKR 9.11 TWITTER 10. TAG SLIDE 11. HOVERABLE 12. POST FORMAT 13. PORTFOLIO HOVERABLE 14. SOCIAL WIDGET 15. COMMENTS 16. COMMENTS FORM 17. TOGGLE 18. GALLERY HOVERABLE 19. WORDPRESS VERSION OVERRIDE/ADDITION CSS 20. MOBILE PORTRAIT [ DEVICE WIDTH : 320PX ] 21. MOBILE LANDSCAPE [ DEVICE WIDTH : 480PX ] 22. TABLET PORTRAIT [ DEVICE WIDTH : 768PX ] /* CSS Styles ================================================== */ @import url("css/device-catalyst.css"); /* ============= 1. BODY ============= */ body { background: url('./images/theme/white-bg.png'); text-shadow: 0px 2px 0px #fff; } #page-slice { background: url('./images/theme/bg_lines.png') no-repeat } /* ============= 2. TOP BAR & TOP CONTENT ============= */ #top-bar { margin-bottom: 0px } #bar-bg { width: 100%; background: #888; } #color-bar { width: 350px; height: 5px; background: #fff600; } #top-content { position: relative; background: #333; padding: 0 20px; } .top-content-inset { padding: 20px 0; margin-bottom: 0; display: none; } .top-content-inset p { text-shadow: none; color: #ddd; margin-bottom: 0px; } #top-trigger { background: #fff600; position: relative; float: right; right: -20px; font-size: 10px; padding: 1px 8px; color: #333; text-shadow: none; border-left: 1px #ddd dotted; border-right: 1px #ddd dotted; border-bottom: 1px #ddd dotted; cursor: pointer; } #location iframe { border: 3px #666 solid; width: 98%; height: 180px; margin: 15px 0 5px 0; display: block; } .top-contact-form, .post-contact-form { margin: 15px 0 5px 0; } .top-contact-form input.input-txt, .top-contact-form textarea { width: 85%; background: #eee; font-size: 11px; } .post-contact-form input.input-txt, .post-contact-form textarea { width: 97%; background: #f6f6f6; font-size: 11px; padding: 7px; } .top-contact-form .button, .post-contact-form .button { margin: 0 } .nano { font-size: 8px; text-transform: uppercase; } .nano a { color: #bbb; text-decoration: none; } img.resume { margin-top: 10px } /* ============= 3. HEADER ============= */ #main-header { padding: 30px 0 } #logo { padding: 20px 0 10px 0; } nav#menu h6 { float: right; margin-top: 27px; } /* ============= 4. BASIC PAGE LAYOUT ============= */ section#content { display: inline-block; padding: 0 0 30px 0; border-bottom: 4px #666 solid; } footer#primary-footer { padding: 30px 0 20px 0; border-bottom: 4px #666 solid; } footer#base-footer { padding: 5px 20px; background: #111; font-family: Courier; text-transform: uppercase; font-size: 11px; height: 20px\0/; /* IE8 Hack */ } aside#first { display: inline-block;} aside#second { } .widget { padding-bottom: 20px;} footer#primary-footer .widget { width: 220px; float: left; display: inline; margin-left: 10px; margin-right: 10px; } iframe { display: block } .footer-menu { float: left } #base-footer ul { font-size: 11px; margin: 0; padding: 0; } #base-footer li { border-right: 1px solid #ccc; display: inline; padding: 0 8px 0 5px; } #base-footer li:first-child { padding-left: 0 } #base-footer li:last-child { border: medium none; padding-right: 0; } .copyright a:hover, #base-footer a { color: #fff; text-decoration: none; text-shadow: none; } .copyright, .copyright a, #base-footer a:hover { color: #aaa; text-shadow: none; font-family: Courier; } #base-footer .copyright { float: right; margin: 0; } .post-box, .comment-box { padding: 2px; background: #fff; border: 1px #ddd solid; margin-bottom: 50px; position: relative; } .comment-box h6 { text-align: center; width: 100%; border-bottom: 1px #ddd solid; padding: 10px 0; } .drop-menu { width: 100%; padding: 5px; margin: 20px 0; display: none; } .page-navigation { position: relative; top: -10px; background: #fff; width: 96%; padding: 5px 10px; border-top: 1px #ccc dotted; border-bottom: 1px #ccc dotted; } .pagenavi { color: #000; float: left; font-size: 11px; font-weight: bold; text-align: right; width: 88%; text-transform: uppercase; } .pagenavi a, .pagenavi a:link, .pagenavi a:visited, .pagenavi a:active { border-right: 1px #ccc dotted; color: #777; font-weight: normal; padding: 0 10px 0 6px; text-decoration: none; } .pagenavi a:hover { color: #000 } .pagenavi span.pages { float: left } .pagenavi span.current { border-right: 1px #ccc dotted; color: #777; padding: 0 8px 0 6px; } .pagenavi span.extend { border-right: 1px #ccc dotted; padding: 0 8px 0 5px; } .nav-previous a { background: #eee url("./images/theme/sprite.png") no-repeat scroll 1px -322px; float: right; height: 20px; width: 20px; margin: 1px 3px 0 0; } .nav-next a { background: #eee url("./images/theme/sprite.png") no-repeat scroll 1px -340px; float: right; height: 20px; width: 20px; margin: 1px 0 0 0; } .nav-previous a:hover, .nav-next a:hover { background-color: #ccc } .inactive a { background-image: none } .inactive a:hover { background: #eee } #contactForm input.input-txt, #contactForm textarea.input-txt { width: 80%; background: #f2f2f2; font-size: 11px; padding: 7px; } #contactForm select.input-txt { width: 83%; background: #f2f2f2; font-size: 11px; padding: 7px; } #contactForm .button { margin: 0 } ol.forms { list-style:none } ol.forms label { display : none } #contactFormTop ol.forms { margin : 0; padding :0 } .feedbackwrap { position: relative; background-color: rgba(255, 255, 255, 0.6); background-color: white\9; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px #ddd solid; margin: 20px 0; } /* ============= 5. FLOATING MENU ============= */ #float-menu { display: none; position: fixed; top: 0; width: 918px; padding: 15px 20px; z-index: 99; background-color: rgba(255, 255, 255, 0.9); background-color: white\9; -webkit-box-shadow: 0 0 4px #ddd; -moz-box-shadow: 0 0 4px #ddd; box-shadow: 0 0 4px #ddd; } ul#float-navigation { margin: 0; padding: 0; position: relative; top: 5px; } ul#float-navigation li { float: left; list-style: none; } ul#float-navigation li a { text-decoration: none; font-size: 11px; padding: 0 10px; border-right: 1px #DDD solid; } ul#float-navigation li a:hover { color: #888 } ul#float-navigation li:last-child a { border-right: none } #scroll-top { text-decoration: none; padding: 0px 6px; float: right; position: relative; top: 4px; font-size: 10px; margin-bottom: 0 } /* ============= 6. HOME PAGE DISPLAY SWITCHER ============= */ #display { float: right; height: 29px; font-size: 10px; color: #888; position: relative; top: 2px; left: 3px; } #display-text { float: left } #display-list { width: 20px; height: 18px; background: url('./images/theme/display-selector.png') no-repeat 3px -18px; float: left; margin: 2px 2px 2px 3px; } #display-list.selected { background: white url('./images/theme/display-selector.png') no-repeat 3px 0px } #display-divide { width: 1px; height: 18px; background: url('./images/theme/display-selector.png') no-repeat -20px 0px; float: left; margin: 2px 1px 2px 3px; } #display-block { width: 20px; height: 18px; background: url('./images/theme/display-selector.png') no-repeat -23px -18px; float: left; margin: 2px 0px 2px 3px; } #display-block.selected { background: white url('./images/theme/display-selector.png') no-repeat -23px 0px } /* ============= 7. MISCELLANEOUS ============= */ .pf-sheet {} .wp-post-image { width: 100%; height:auto; } .blog-pf-link { margin: 25px 20px 20px 20px } .widget .blog-pf-link { margin: 0 0 20px 0 } .clinkable { height: 20px; background: #000; text-shadow: none; padding: 0px 8px; font-family: Courier; font-size: 12px; } .clinkable a { text-decoration: none; color: #fff; } td.linkmage { background: #000; padding-right: 8px; } img.linkmage { position: relative; top: 1px; } .absolute-text { height: 20px; overflow: hidden; border: 1px #ddd solid; font-family: Courier; font-size: 12px; padding: 0px 8px; background: #fff; } .project-thumb { width: 100% } .article-box { padding: 20px; background: #fdfdfd; border: 1px #ddd solid; position: relative; } .image-left { margin-right: 20px; float: left; } .pushup { position: relative; bottom: 3px; font-weight: bold; } .pushleft { margin-left: -25px } .pushdown { padding-bottom: 20px } article#main-article { margin: 15px 0 35px 0 } .about-contact { margin: 20px 0 } .magic-column { background: #ddd; border: 1px #ddd solid; width: 264px; height: 192px; float: left; display: block; margin: 10px; padding: 2px; background: #fff; } #tiny-widgets .two.columns { width: 130px; margin: 0 20px 0 0; } #tiny-widgets .two.columns.qr { margin: 0 } .qrcode { width: 40%; margin: 10px 0; } .qrcodes { width: 20%; margin: 10px 0; } #qrf { padding: 15px 0 0 0; margin: 5px 0 0 0; border-top: 1px #bbb dotted; } .qr-footer { border: 1px #ddd solid; margin-right: 10px; } img.client-logo { width: 100%; display: block; } .cl { text-align: center; margin: 15px 0 10px 0; } img.first { padding: 1px; background: #fff; border: 1px #ddd solid; width: 99%; margin: 0 0 10px 0; } article.project { margin: 0; padding: 0; } .error { display: block; margin: 0 0 20px 0; color: #FF0000; } .no-display-switch { height: 29px } iframe.video { width: 100%; height: 325px; } /* ============= 8. TYPOGRAPHY ============= */ body { font-family: Maven Pro } h1, h2, h3, h4, h5, h6 { font-family: Maven Pro; text-transform: uppercase; } p, .textwidget { font-family: Maven Pro; font-size: 11px; color: #666; } p.title, .widget h4 { font-family: Maven Pro; font-weight: bold; font-size: 12px; color: #000; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 4px #aaa solid; } .widget h4 { padding-top:0px;margin-top:0; line-height: 21px;} p.title-inside { font-family: Maven Pro; font-weight: bold; font-size: 12px; color: #000; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 0px #aaa solid; } .five h4 { font-family: Maven Pro; font-weight: bold; font-size: 12px; color: #eee; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px #555 dotted; text-shadow: none; } blockquote p { font-size: 11px; line-height: 18px; } p.project-text, .project-text p { padding: 20px 20px 0 20px } .content-text { padding: 20px 20px 0 20px;} p.qod-author, p.no-margin { margin: 0 } p.qod-author a { text-decoration: none } .heading { padding: 15px; border-top: 4px #666 solid; border-bottom: 4px #666 solid; margin: 29px 0 20px 0; color: #000; text-align: center; } .homeblock { margin: 0 0 20px 0 } .prevnext { padding: 15px; border-top: 1px #ccc dotted; border-bottom: 1px #ccc dotted; margin-bottom: 5px; position: relative; top: -15px; } p.qod-text { font-size: 18px; color: #000; } .post-para-top { border-bottom: 1px #ddd dotted; padding-bottom: 0px; } .post-para-bottom { border-top: 1px #ddd dotted; padding: 15px 0 0 0; margin: 20px 0 0 0; } .prevnext a { position: absolute; font-weight: bold; text-decoration: none; color: #666; } .prevnext p.left a { left: 10px; top: 4px; border:0; } .prevnext p.right a { right: 10px; top: 4px; border:0; } .prevnext p.left a:hover, .prevnext p.right a:hover { color: #000 } p a, .textwidget a { text-decoration: none; border-bottom: 1px #aaa dotted; } p a:hover, .textwidget a:hover { border-bottom: none } .quote-heading { text-transform: none; line-height: 28px; font-style: italic; background: url('./images/theme/quote-icon.png') no-repeat 0px 20px; font-size: 14px; color: #555; padding: 20px 40px; margin: 0 20px; font-family: arvo; font-weight: normal; } .link-heading { text-indent: 35px; background: url('./images/theme/pf-link-icon.png') no-repeat 0px 33px; font-size: 18px; color: #444; } .quote-heading div { width: 90%; margin: 0 auto; } .dropcap { font-size: 30px; margin: 0 3px 5px 0; text-transform: uppercase; } a#cancel-comment-reply-link { color:red } img.left { float: left; margin: 0 15px 15px 0; } hr { border-bottom: 1px #ccc dotted; border-top: 0; border-right: 0; border-left: 0; margin: 0 0 25px 0; padding-top: 15px; } pre { clear: both; overflow: auto; padding: 2px 10px; margin: 10px 20px 20px 20px; white-space: pre; border: 1px #ddd solid; } var, kbd, samp, code, pre, .input-sel { background: none repeat scroll 0 0 #f2f2f2; font: 12px/18px Consolas,"Andale Mono",Courier,"Courier New",monospace; } /* ============= 9. ORDERED / UNORDERED LISTS ============= */ ul { list-style: square } ul.bt { list-style: none } ul.bt li { margin: 10px; float: left; } /* ============= 9.1 PORTFOLIO FILTER ============= */ ul.filter { list-style: none; background: #e8e8e8 url('./images/theme/diag_bg.png'); padding: 3px 2px; margin: 25px auto -2px auto; border-top: 1px #bbb dotted; border-bottom: 1px #bbb dotted; width: 95%; } ul.filter li { margin: 2px 3px; padding: 1px 5px; font-size: 11px; background: #6caddf; float: left; color: #fff; font-family: Courier; text-transform: uppercase; text-shadow: 0px 0px 0px #fff; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } ul.filter li:hover { background: #888 } ul.filter li.filter-tab { background: #fff; color: #666; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; margin: 2px 7px; } ul.filter li a { color: #fff; text-decoration: none; } /* ============= 9.2 SERVICE ============= */ ul#service li { list-style: none; padding: 20px 0 0 0; margin: 0; border-bottom: 1px #ddd dotted; } ul#service li:last-child { border-bottom: none } ul#service img.left { width: 60px } /* ============= 9.3 SOCIAL ============= */ ul.social { list-style: none; font-size: 11px; margin: 5px 0 15px 0; padding: 0; } ul.social li { margin: 5px; float: left; } ul.social li:first-child { margin-left: 0 } ul.social li:hover { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); } /* ============= 9.4 STANDARD ============= */ ul.standard { list-style: disc; font-size: 11px; margin: 0 0 15px 10px; padding: 0; } ul.standard li { margin: 5px } /* ============= 9.5 TYPICLE ============= */ ul.typical li, ul.typical-shortcode li { margin: 0 0 0 15px; padding: 5px 2px; font-size: 11px; border-bottom: 1px #ddd dashed; list-style-image: url("./images/theme/link_marker.gif"); } ul.typical-shortcode li { border-bottom: 0px } ul.typical li a, ul.typical-shortcode li a { text-decoration: none; padding: 2px; } ul.typical li a:hover, ul.typical-shortcode li a:hover { background: yellow } /* ============= 9.6 TAGS ============= */ ul.textback { list-style: none } ul.textback li { margin: 2px; padding: 1px 5px; font-size: 11px; background: #6caddf; float: left; color: #fff; font-family: Courier; text-transform: uppercase; text-shadow: 0px 0px 0px #fff; text-decoration: none; } ul.textback li a:hover { background: #378fd3 } /* ============= 9.7 SKILLS ============= */ ul.skills { list-style: none; padding-top: 1px; } ul.skills li { margin: 5px 0; font-size: 11px; padding: 0; color: #fff; font-family: Courier; text-transform: uppercase; text-shadow: 0px 0px 0px #fff; } ul.skills li:hover { opacity : 0.8 } ul.skills li a { color: #fff; text-decoration: none; cursor: pointer; font-family: Courier; } /* ============= 9.8 ADDRESS ============= */ ul.contact li { margin: 0 0 0 23px; padding: 10px 2px; font-size: 11px; border-bottom: 0px #ddd dashed; } ul.contact li:last-child { margin: 0 0 -10px 23px } li.email { list-style-image: url('./images/theme/email-icn.png') } li.call { list-style-image: url('./images/theme/phone-icn.png') } li.address { list-style-image: url('./images/theme/address-icn.png') } /* ============= 9.9 DRIBBBLE ============= */ ul#shotsByPlayerId li { list-style: none; display: inline; margin: 0; } ul#shotsByPlayerId li img:hover { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); } ul#shotsByPlayerId li img { width: 40%; padding: 3px; border: 1px #ddd solid; margin: 0 2px; background: #fff; } /* ============= 9.10 FLICKR ============= */ ul#flickr li { list-style: none; display: inline; margin: 0; } ul#flickr li img:hover { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); } ul#flickr li img { padding: 3px; border: 1px #ddd solid; margin: 0 2px; background: #fff; } /* ============= 9.11 TWITTER ============= */ ul.tweet_list li { font-size: 11px; line-height: 20px; margin: 10px 0; list-style: none; text-shadow: none; background: #fff url('./images/theme/twitter-widget-bg.png') bottom right no-repeat; padding: 5px; border: 1px #ddd dotted; } ul.tweet_list li a { font-size: 10px; background: #555; color: #fff; padding: 2px 5px; text-decoration: none; -moz-box-shadow: inset 0 0 4px #000; -webkit-box-shadow: inset 0 0 4px #000; box-shadow: inner 0 0 4px #000; } ul.tweet_list li a.time { font-size: 10px; background: #fff600; color: #666; padding: 2px 5px; text-decoration: none; -moz-box-shadow: inset 0 0 3px #eee; -webkit-box-shadow: inset 0 0 3px #eee; box-shadow: inner 0 0 3px #eee; } /* ============= 10. TAG SLIDE ============= */ ul#tagslide li { list-style: none; clear: both; margin: 0 } ul#tagslide .tag { background: url('./images/theme/tag.png') no-repeat 0 0; color: #3f3f3f; display: block; float: left; height: 25px; line-height: 1; margin: 5px; padding: 0 5px 0 8px; position: relative; text-decoration: none; font: normal bold 12px/1.5 'Helvetica Neue', 'Arial', sans-serif; } ul#tagslide .tag:hover { cursor: pointer } ul#tagslide .tag:active { top: 1px } ul#tagslide .tag span { display: block; float: left; } ul#tagslide .tag_name { background: url('./images/theme/tag.png') no-repeat 100% -25px; height: 19px; padding: 2px 10px 4px 0; position: relative; text-shadow: 0 1px 1px #fff; z-index: 10; } ul#tagslide .tag_count { background: url('./images/theme/tag.png') no-repeat 100% -50px; color: #fff; height: 19px; padding: 2px 10px 4px 10px; position: absolute; right: 0; text-shadow: none; top: 1px; z-index: 5; } /* ============= 11. HOVERABLE ============= */ .view { width: 100%; overflow: hidden; position: relative; z-index: 9; } .view .mask, .view .content { width: 99%; height: 91px; margin: 3px; position: absolute; overflow: hidden; top: 0; left: 0; } .view img { display: block; position: relative; } .view .pf-heading { text-transform: uppercase; color: #fff; width: 1000px; overflow: hidden; position: absolute; font-size: 16px; margin: 0; text-shadow: none; } .view .pf-heading a { color: #fff; text-decoration: none; } .view .pf-heading a:hover { color: #ddd } .view a.info { display: inline-block; text-decoration: none; padding: 7px 14px; background: #000; color: #fff; text-transform: uppercase; -webkit-box-shadow: 0 0 1px #000; -moz-box-shadow: 0 0 1px #000; box-shadow: 0 0 1px #000; } .view a.info: hover { -webkit-box-shadow: 0 0 5px #000; -moz-box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000; } .view-eighth .mask { background-color: rgba(255, 246, 0, 0.8); background-color: yellow\9; top: -150px; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.4s ease-out 0.4s; -moz-transition: all 0.4s ease-out 0.4s; -o-transition: all 0.4s ease-out 0.4s; -ms-transition: all 0.4s ease-out 0.4s; transition: all 0.4s ease-out 0.4s; z-index: 99; } .view-eighth:hover .mask { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; top: 0px; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s; z-index: 99; } /* ============= 12. POST FORMAT ============= */ .hover-post-format { float: left; width: 100px; height: 50px; border-right: 1px #666 solid; } .hover-post-format span { font-family: Arial; font-size: 9px; text-shadow: none; color: #fff; position: relative; top: -7px; } .hover-post-format-text { font-family: Arial; font-size: 10px; text-shadow: none; color: #000; width: 100px; border-right: 1px #ccc solid; text-align: center; padding-top: 4px; float: left; margin-top: -4px; text-transform: uppercase; } .hover-post-meta { padding: 5px 0; text-shadow: none; } .hover-post-metas { float: left; font-family: Arial; font-size: 10px; padding-right: 4px; border-right: 1px #ccc solid; } a.likeThis { float: left; height: 18px; margin: 1px 5px; text-indent: 22px; text-decoration: none; text-transform: uppercase; color: #ff0000; background: url('./images/theme/sprite.png') 0px -72px no-repeat; } a.likeThis:hover { color: #000; background: url('./images/theme/sprite.png') 0px -54px no-repeat; } .hover-post-meta-comment { float: left; height: 18px; margin: 1px 5px; text-indent: 24px; text-decoration: none; text-transform: uppercase; background: url('./images/theme/sprite.png') 0px -90px no-repeat; } .hover-post-meta-comment:hover { color: #000; background: url('./images/theme/sprite.png') 0px -108px no-repeat; } .hover-post-meta-date { float: left; height: 18px; margin: 1px 5px; text-indent: 24px; text-decoration: none; text-transform: uppercase; background: url('./images/theme/sprite.png') 0px -126px no-repeat; } .hover-post-meta-date:hover { color: #000; background: url('./images/theme/sprite.png') 0px -144px no-repeat; } .hover-post-format-icon { float: left; width: 18px; height: 18px; position: relative; left: 42px; top: 19px; } .pf-gallery { background: url('./images/theme/sprite.png') 0px -162px } .pf-link { background: url('./images/theme/sprite.png') 0px -180px } .pf-image { background: url('./images/theme/sprite.png') 0px -198px } .pf-quote { background: url('./images/theme/sprite.png') 0px -216px } .pf-status { background: url('./images/theme/sprite.png') 0px -234px } .pf-video { background: url('./images/theme/sprite.png') 0px -252px } .pf-audio { background: url('./images/theme/sprite.png') 0px -270px } .pf-standard { background: url('./images/theme/sprite.png') 0px -288px } .hover-post-title { float: left; padding-left: 15px; } .hover-post-head { background: #222; padding: 10px 0 0 0; } .text-gradient { width: 40px; height: 60px; z-index: 99; position: absolute; right: 0px; background: url('./images/theme/gradient.png'); } .blog-meta { position: relative; background-color: yellow; border-bottom: 1px #ddd solid; } .project-meta { background-color: yellow } .standard { font-size: 11px; padding: 20px; } .last { border: 0 } /* ============= 13. PORTFOLIO HOVERABLE ============= */ .hover { width: 100%; height: 192px; overflow: hidden; position: relative; cursor: default; background: #fff url('../images/bgimg.jpg') no-repeat center center; } .hover .masky, .hover .content { width: 100%; height: 192px; position: absolute; overflow: hidden; top: 0; left: 0; } .hover img { display: block; position: relative; width: 100%; z-index: 999\0/; /* IE8 Hack */ } .hover-fifth .masky { background-image: url('./images/theme/transparency.png'); -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .hover-fifth a.masky-link { text-decoration: none } .hover .pf-heading { text-transform: uppercase; color: #fff; position: absolute; width: 1000px; overflow: hidden; font-size: 14px; margin: 0; text-shadow: none; } .hover-fifth p { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; color: #333; padding: 10px 15px; text-shadow: none; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .hover-fifth:hover .masky { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); z-index: 999\0/; /* IE8 Hack */ } .hover-fifth:hover p { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } .gallery-column { background: #ddd; border: 1px #ddd solid; width: 243px; height: 177px; float: left; display: block; margin: 10px; padding: 2px; background: #fff; } .gallery-mask { height: 177px } .gallery-column .masky { background-color: rgba(255, 255, 255, 1); background-color: white\9; height: 65px; } .gallery-column img { width: 100% } .hover-gallery-title { float: none } .gallery-heading { text-shadow: none; color: #fff; font-size: 12px; padding: 0 0 0 15px; } .hover-gallery-head { background: #222; padding: 0; position: absolute; width: 400px; overflow: hidden; height: 40px; border-bottom: 1px #333 dotted; } .gallery-column .text-gradient { height: 40px } p.gallery-text { margin: 42px 0 0 0; padding: 0 15px; } /* ============= 14. SOCIAL WIDGET ============= */ #fb_count { width: 92px; height: 37px; padding: 0 5px; margin: 0 11px 11px 0; float: left; border: 1px #fff solid; background: #fff url('./images/theme/fb-wgt-bg.png') no-repeat; font-size: 11px; text-indent: 32px; text-decoration: none; } #twitter_count { width: 92px; height: 37px; padding: 0 5px; margin: 0 0 11px 0; float: left; border: 1px #fff solid; background: #fff url('./images/theme/tw-wgt-bg.png') no-repeat; font-size: 11px; text-indent: 32px; text-decoration: none; } #dribbble_count { width: 92px; height: 37px; padding: 0 5px; margin: 0 11px 11px 0; float: left; border: 1px #fff solid; background: #fff url('./images/theme/drbl-wgt-bg.png') no-repeat; font-size: 11px; text-indent: 32px; text-decoration: none; } #fb_count:hover, #twitter_count:hover, #dribbble_count:hover { -moz-box-shadow: inset 0 0 5px #bbb; -webkit-box-shadow: inset 0 0 5px #bbb; box-shadow: inner 0 0 5px #bbb; } /* ============= 15. COMMENTS ============= */ #comments { position: relative; padding: 0 20px 0 0; background: #fbfbfb; border-bottom: 1px #ddd solid; } #comments h3 { color: #333; font-weight: normal; margin-bottom: 20px; } #comments .comment.thread-even { border-bottom: 1px dashed #dedede } #comments .comment.bypostauthor { } ol.commentlist li { } #comments .comment { border-top: 1px dashed #dedede; width: 100%; list-style-type: none; } #comments .comment.depth-1:first-child { border: none } #comments .comment.depth-1:last-child { border-bottom: none } #comments .comment .comment-container { position: relative; padding: 20px 0 0 0; } #comments .comment-head { margin: 0 0 15px 50px } #comments .comment-entry { margin: 0 0 0 50px } #comments .avatar { float: left; margin-right: 20px; } #comments .avatar img { margin: 0; vertical-align: middle; padding: 3px; border: 1px solid #c2c5ca; background: #fff; -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); } #comments .comment-head .name { margin: 0; font-weight: bold; font-size: 13px; } #comments .comment-head .date, #comments .comment-head .edit, #comments .comment-head .perma { color: #666; font-size: 11px; } #comments .comment-entry p { margin: 0 0 0 20px } #comments .reply { padding-top: 10px; position: absolute; right: 0; top: 5px; } #comments .reply a { font: 11px/18px sans-serif; text-transform: lowercase; } #comments .reply a:hover { } #comments ul.children { background: url("./images/theme/comment-child-arrow.png") no-repeat scroll 1.25em 2.5em transparent; margin: 10px 0 0; padding: 0 0 0 50px; } #comments ul.children li { border-top: 1px dashed #dedede } #comments .cancel-comment-reply { margin: 10px 0 } #comments .navigation { } #comments .navigation a { display: block; margin: 15px 0 0 0; text-decoration: none; } #comments .navigation a:hover { } #comments h3#pings { margin-top: 25px } #comments .pingbacks li.pingback { margin: 10px 0 } #comments .pingbacks li.pingback .reply { display: none } #comments .nocomments { font-size: 11px; font-weight: bold; text-align: center; position: relative; top: 9px; } .comment-header-border { background-color: #e9ebed; height: 1px; margin: 0 auto; display: block; width: 200px; } /* ============= 16. COMMENTS FORM ============= */ #respond { text-align: left; width: 100%; padding-bottom: 25px; } .respond-inset-wrapper { padding: 20px } #respond h3 { color: #333; font-weight: normal; font-size: 14px; padding-bottom: 7px; } #respond label { font-size: 11px; color: #777; } #commentform { margin: 10px 0 0 0 } #commentform label { position: relative; display: inline; vertical-align: top; display: inline-block; margin-top: 5px; } #commentform input.txt, #commentform textarea { border: none } #commentform input.txt { background: #f2f2f2; border: 1px #ddd solid; font-size: 11px; width: 50%; margin-right: 6px; } #commentform textarea { background: #f2f2f2; width: 98% !important; border: 1px #ddd solid; font-size: 11px; } #commentform input.txt:focus, #commentform textarea:focus { border-color: rgba(82, 168, 236, 0.40) !important; box-shadow: 0 0 3px rgba(82, 168, 236, 0.5); } #respond #commentform #submit { cursor: pointer; float: right; font-family: sans-serif; font-size: 12px; font-weight: bold; margin: 0; } /* ============= 17. TOGGLE ============= */ .shortcode-toggle { margin-bottom: 15px } .shortcode-toggle h4 { margin: 0 } .shortcode-toggle h4 a { display: block; font-size: 11px; font-weight: bold; padding: 1px 15px; text-decoration: none; text-shadow: none; color: #fff; background: #333 url('./images/theme/shortcode-toggle-close.png') no-repeat 99% center; } .shortcode-toggle.closed h4 a { background-image: url('./images/theme/shortcode-toggle-open.png') } .shortcode-toggle .toggle-content { padding: 10px 10px 1px 10px; background: #f2f2f2; -moz-box-shadow: inset 0 0 5px #ddd; -webkit-box-shadow: inset 0 0 5px #ddd; box-shadow: inner 0 0 5px #ddd; } .shortcode-toggle.closed .toggle-content { display: none } /* ============= 18. GALLERY HOVERABLE ============= */ .hoverable { position: relative } .hoverable .hoverable-over { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; margin: 0; padding: 0; background: url('./images/theme/zoom.png') no-repeat center center; z-index: 1; } .hoverable .hoverable-link { position: relative; z-index: 2; } .hoverable img { position: relative; z-index: 9; overflow: hidden; margin: 0; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); background: transparent !important; -webkit-transition: opacity 0.4s linear; -o-transition: opacity 0.4s linear; -moz-transition: opacity 0.4s linear; } .hoverable a:hover img { opacity: 0.1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: alpha(opacity=10); -webkit-transition: opacity 0.4s linear; -o-transition: opacity 0.4s linear; -moz-transition: opacity 0.4s linear; } .hoverable:hover { background: #fff url('./images/theme/transparency.png') } /* Define JPlayer height to overcome Height bug */ .jp-jplayer.jp-jplayer-video, .jp-jplayer.jp-jplayer-video img, .jp-jplayer.jp-jplayer-video video { height: 323px } /* ============= 19. WORDPRESS VERSION OVERRIDE/ADDITION CSS ============= */ #mainmenu li a {padding: 2px 5px; text-shadow: none;-moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } #mainmenu li.current_page_item a {background: yellow;} .ppt, .error { text-shadow: none } #page-title {display:none;visibility: hidden} #tech-tags {display:none;visibility: hidden} .client-image {width:99%;} .cd-case img {position: absolute;z-index: 1;width: 99%} img.audio-album-poster {width: 100%;z-index: 0} .page-numbers { border: 3px solid #ddd;padding: 2px 3px;-moz-border-radius:75px;-webkit-border-radius: 75px;} span.page-numbers {background: #fff;} a.page-numbers {background: #ccc;color:#fff ;text-shadow: none;text-decoration: none} a.page-numbers:hover {background: #aaa} .post-pagebar {text-align: center;margin: 0 0 20px 0} .projecta {background: rgba(255, 246, 0, 0.7)} .no-borders {border:0;margin-left:5px;} ul.filter li.active-tag { background: yellow;} ul.filter li.active-tag a {color:#666} .archive-hover {height: 100%;background: transparent} .exerpt-list {padding: 15px;} .archive-read {margin: 15px 0;text-shadow: none} .post-box, .post-box:before, .post-box:after, .article-box, .article-box:before, .article-box:after, .archive-block, .archive-block:before, .archive-block:after {background: #fff;border: 1px solid #ddd;} .post-box:before, .post-box:after, .article-box:before, .article-box:after, .archive-block:before, .archive-block:after {content: "";position: absolute;bottom: -3px;left: 2px;right: 2px;height: 1px;border-top: none;} .post-box:after, .article-box:after, .archive-block:after {left: 4px;right: 4px;bottom: -5px;box-shadow: 0 0 2px #ddd;} .archive-block { border: 1px #ddd solid;width: 247px;height: 280px;float: left;display: block;margin: 10px;padding: 0px;background: #fff;position: relative;} .archive-block:hover {background: #fafafa} select#cat, select#archive-dropdown {width:100%;padding: 3px 7px;background: #ffffec} .archive-filter {height:25px;border:0;} a img {text-decoration: none} .alignleft { float: left; height: auto; margin: 0px 20px 10px 0; padding: 2px; border: 1px #ddd solid} .alignright { float: right; height: auto; margin: 0px 0 10px 20px; padding: 2px; border: 1px #ddd solid} .aligncenter { text-align: center; margin-bottom:15px;} img.aligncenter { margin-left:auto; margin-right:auto; display:block; width: 100% } img.alignnone { width: 100% } .error { color:red; background: #ffeeee ;padding: 2px 5px; border: 1px red dotted; width: 81% } .info { color:green; background: #f7ffee ;padding: 2px 5px; border: 1px green dotted; } .entry .wp-caption { padding: 1px; text-align:center; background:#F8F8F8; border: solid 1px #ddd; } .entry .wp-caption img{ margin:0; padding:4px 0; background:none; border:0; } .entry .wp-caption-text { margin:0; padding:0; font:0.9em/1.5em sans-serif; text-align:center; } .entry .wp-caption.aligncenter { margin:0 auto 15px; } .sticky {} .gallery-caption {} #scrollto-mobile { position: relative;top: 10px;float: right;font-size: 11px;display: none } /* ============= 20. MOBILE PORTRAIT [ DEVICE WIDTH : 320PX ] ============= */ @media only screen and (max-width: 767px) { #logo img { max-width: 420px;} ul.timeline { display: none } .slides_container img { width: 414px } .heading { margin-top: 0px } .dribbble-shots { text-align: center } #flickr { text-align: center } .widget { padding: 0 20px } footer#primary-footer .widget { width: 240px } iframe.video { height: 166px } .post-box { margin-bottom: 30px } #color-bar { width: 300px } .drop-menu { display: block; margin: 30px 0; } aside#first, aside#second { background: #eee; padding: 20px 0; margin-bottom: 20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow: inset 0 0 5px #bbb; -webkit-box-shadow: inset 0 0 5px #bbb; box-shadow: inner 0 0 5px #bbb; } aside#second { float: left } #primary-footer { background: #ddd url('./images/theme/footer-bg-mobile.png'); -moz-box-shadow: inset 0 0 5px #bbb; -webkit-box-shadow: inset 0 0 5px #bbb; box-shadow: inner 0 0 5px #bbb; } .page-navigation { margin: 10px 0 20px 0; width: 92%; } .pagenavi { width: 82% } .footer-menu, #base-footer .copyright { display: block; float: none; text-align: center; text-transform: uppercase; } .magic-column { width: 273px; height: 199px; padding: 2px; background: #fff; display: block; } .magic-column .hover .masky, .magic-column .hover.hover-fifth { height: 199px } .hover { height: 199px } .hover .masky { height: 199px } .container .five.columns { width: 260px; margin-bottom: 25px; } #tiny-widgets .two.columns.resume { width: 100% } #tiny-widgets .two.columns.qr, #qrf{ display: none } .top-contact-form input.input-txt, .top-contact-form textarea { width: 97% } .post-contact-form input.input-txt, .post-contact-form textarea { width: 100% } #float-menu { visibility: hidden } .gallery-column { width: 232px; height: 169px; } .gallery-mask { height: 169px } .jp-jplayer.jp-jplayer-video, .jp-jplayer.jp-jplayer-video img, .jp-jplayer.jp-jplayer-video video { height: 233px } .mainmenu { display: none } .widget ul.textback { margin-bottom: 80px } #twitter_count { margin-right: 12px } iframe.video { width: 100%; height: 233px; } .archive-block { width: 232px; height: 300px; } .archive-hover {height: 100%;} .archive-filter {height:25px;} .hover-post-meta-comment { display:none; } #scrollto-mobile { display: block} } /* ============= 21. MOBILE LANDSCAPE [ DEVICE WIDTH : 480PX ] ============= */ @media only screen and (min-width: 480px) and (max-width: 767px) { #logo img { max-width: 420px;} .container .five.columns { width: 380px; margin-bottom: 25px; } .magic-column { width: 396px; height: 286px; padding: 2px; background: #fff; } .gallery-column { width: 352px; height: 256px; } .gallery-mask { height: 256px } .magic-column .hover .masky, .magic-column .hover.hover-fifth { height: 286px } .mainmenu { display: none } .widget ul.textback { margin-bottom: 80px } footer#primary-footer .widget { width: 360px } #twitter_count { margin-right: 12px } iframe.video { width: 100%; height: 242px; } .archive-block { width: 352px; height: 240px; } .archive-hover { height: 100%; } .archive-filter { height:25px; } #scrollto-mobile { display: block} } /* ============= 22. TABLET PORTRAIT [ DEVICE WIDTH : 768PX ] ============= */ @media only screen and (min-width: 768px) and (max-width: 959px) { .magic-column { width: 204px; height: 147px; padding: 2px; background: #fff; } .hover { height: 147px } .hover .masky { height: 147px } .container .five.columns { width: 216px } #tiny-widgets .two.columns.resume { width: 100% } #tiny-widgets .two.columns.qr, #qrf { display: none } footer#primary-footer .widget { width: 172px } #float-menu { width: 728px } .gallery-column { width: 183px; height: 133px; } .gallery-mask { height: 133px } .jp-jplayer.jp-jplayer-video, .jp-jplayer.jp-jplayer-video img, .jp-jplayer.jp-jplayer-video video { height: 256px } iframe.video { width: 100%; height: 252px; } .archive-block { width: 183px; height: 340px; } .archive-hover { height: 100%; } .archive-filter { height:25px; } }