/* * Pixem V.1 * Copyright 2012, Mandar Shirke * www.quadcodes.com * DATE : 1/1/2012 */ /* 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. TABS 19.A INTRO PAGE BUTTONS 19.B BUTTONS 20. TABLE 21. GALLERY HOVERABLE 22. CONDITIONAL LAYOUT CSS FOR VARIOUS DEVICES /* CSS Styles ================================================== */ /* ============= 1. BODY ============= */ body { background: url('../img/theme/white-bg.png'); text-shadow: 0px 2px 0px #fff; } a.anigif { position:absolute; left:0; right:0; margin-left:auto; margin-right:auto; width:478px; height:294px; /*margin-top: -1em;*/ /*set to a negative number 1/2 of your height*/ /*margin-right: -300em; /*set to a negative number 1/2 of your width*/ background-image: url('../img/theme/intro_animation.gif'); } a.foliobtn {position:fixed; position:fixed; /*top: 10%;*/ /*left: 42%;*/ width:128px; height:28px; /*margin-top: -1em;*/ /*set to a negative number 1/2 of your height*/ margin-left: 2em; /*set to a negative number 1/2 of your width*/ background-image: url('../img/theme/ctaintro.png'); /*position:fixed; top: 23%; left: 45%; width:515px; height:404px; margin-top: -9em; /*set to a negative number 1/2 of your height*/ /*margin-left: -15em; /*set to a negative number 1/2 of your width*/ /*display: block; width: 515px; height: 404px; padding:0px; margin:19px 0 10px 200px;/* 42px;*/ /*background-image: url('../img/theme/eyeimage.png'); no-repeat center center fixed;*/ } #page-grey {background: url('../img/theme/bg_linesgrey.png'); height:550px; background-repeat:no-repeat; background-attachment:fixed; background-position:center; } #page-slice {background: url('../img/theme/bg_lines.png'); background-repeat:no-repeat; background-position:top center; background-attachment:fixed; } /* ============= 2. TOP BAR & TOP CONTENT ============= */ #top-bar { margin-bottom: 0px } #bar-bg { width: 100%; background: #888; } #color-bar { width: 350px; height: 5px; background: #56bcb6; } #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: #56bcb6; position: relative; float: right; right: -20px; font-size: 11px; 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: 15px 0 } #logo { padding: 15px 0 5px 0 } nav#menu h6 { float: right; margin-top: 27px; } /* ============= 4. BASIC PAGE LAYOUT ============= */ section#content { 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: #60201d; font-family: Courier; text-transform: uppercase; font-size: 9px; } aside#first { float: left } aside#second { float: right } .widget { padding-bottom: 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; font-family: Courier; text-shadow: none; } .copyrightB { background-attachment: fixed; margin:40px 0 0px 20px;/* 42px;*/ } .copyright { float: right; margin: 0; } .post-box, .comment-box { padding: 2px; background: #fff; border: 1px #ddd solid; margin-bottom: 50px; } .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("../img/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("../img/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 } #formquote input.input-txt, #formquote textarea.input-txt { width: 80%; background: #f2f2f2; font-size: 11px; padding: 7px; } #formquote select.input-txt { width: 83%; background: #f2f2f2; font-size: 11px; padding: 7px; } #formquote .button { margin: 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; } #float-menu img { float: left } #float-menu ul { float: right } ul#float-navigation { margin: 0; padding: 0; float: right; position: relative; top: 5px; } ul#float-navigation li { float: left; list-style: none; } ul#float-navigation li a { text-decoration: none; font-size: 12px; padding: 0 10px; border-right: 1px #56bcb6 solid; } ul#float-navigation li a:hover { color: #56bcb6 } ul#float-navigation li:last-child a { border-right: none } /* ============= 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('../img/theme/display-selector.png') no-repeat 3px -18px; float: left; margin: 2px 2px 2px 3px; } #display-list.selected { background: url('../img/theme/display-selector.png') no-repeat 3px 0px } #display-divide { width: 1px; height: 18px; background: url('../img/theme/display-selector.png') no-repeat -20px 0px; float: left; margin: 2px 1px 2px 3px; } #display-block { width: 20px; height: 18px; background: url('../img/theme/display-selector.png') no-repeat -23px -18px; float: left; margin: 2px 0px 2px 3px; } #display-block.selected { background: url('../img/theme/display-selector.png') no-repeat -23px 0px } /* ============= 7. MISCELLANEOUS ============= */ .blog-pf-link { margin: 25px 20px 20px 20px } .widget .blog-pf-link { margin: 0 0 20px 0 } .clinkable { height: 20px; background: #56bcb6; text-shadow: none; padding: 0px 8px; font-family: Courier; font-size: 12px; } .clinkable a { text-decoration: none; color: #fff; } td.linkmage { background: #56bcb6; 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; } .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; } #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 } { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; } h1, h2, h3, h4, h5, h6 { font-family: Maven Pro; text-transform: uppercase; } p { font-family: Maven Pro; font-size: 11px; color: #666; } p.title { font-family: Maven Pro; font-weight: bold; font-size: 12px; color: #000; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 4px #aaa solid; } 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; } #top-content p.title { 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 { 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; } .home { 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; } p.post-para-top { border-bottom: 1px #ddd dotted; padding-bottom: 15px; } p.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 a.left { left: 10px; top: 4px; } .prevnext a.right { right: 10px; top: 4px; } .prevnext a p:hover { color: #000 } p a { text-decoration: none; border-bottom: 1px #aaa dotted; } p a:hover { border-bottom: none } .quote-heading { text-transform: none; line-height: 28px; font-style: italic; background: url('../img/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('../img/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; } 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('../img/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: #3ae1d7; 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("../img/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: gold } /* ============= 9.6 TAGS ============= */ ul.textback { list-style: none } ul.textback li a { margin: 2px; padding: 1px 5px; font-size: 11px; background: #cc5d51; 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: #c19d58 } /* ============= 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; } /* ============= 9.8 ADDRESS ============= */ ul.contact li { margin: 0 0 0 29px; padding: 6px 2px; font-size: 11px; border-bottom: 0px #ddd dashed; } ul.contact li:last-child { margin: 0 0 -10px 29px } li.email { list-style-image: url('../img/theme/email-icn.png') } li.call { list-style-image: url('../img/theme/phone-icn.png') } li.address { list-style-image: url('../img/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('../js/jsocial/img/twitter-widget-bg.png') bottom right no-repeat; padding: 5px; border: 1px #ddd dotted; } ul.tweet_list li .tweet_time a { font-size: 10px; background: #56bcb6; 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; } ul.tweet_list li .tweet_text 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; } /* ============= 10 A. New TAG SLIDE ============= */ ul#tagslidenew li .a-btn { background:#56bcb6; background:-webkit-gradient(linear,left top,left bottom,color-stop(#3ae1d7,0),color-stop(#56bcb6,1)); background:-webkit-linear-gradient(top, #3ae1d7 0%, #56bcb6 100%); background:-moz-linear-gradient(top, #3ae1d7 0%, #56bcb6 100%); background:-o-linear-gradient(top, #3ae1d7 0%, #56bcb6 100%); background:linear-gradient(top, #3ae1d7 0%, #56bcb6 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 ); padding-left:18px; padding-right:75px; height:38px; display:inline-block; position:relative; border:1px solid #f8f8f9; -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:09px; float:left; clear:both; margin:10px 0px; overflow:hidden; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; } .a-btn-text { padding-top:10px; display:block; font-size:14px; white-space:nowrap; text-shadow:0px 1px 1px rgba(255,255,255,0.1); color:#f6f3ee; } .a-btn-slide-text { position:absolute; height:100%; top:0px; right:52px; width:0px; background:#bd5346; text-shadow:0px -1px 1px #363f49; color:#fff; font-size:14px; white-space:nowrap; text-transform:uppercase; text-align:left; text-indent:10px; overflow:hidden; line-height:38px; -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; -webkit-transition:width 0.3s linear; -moz-transition:width 0.3s linear; -o-transition:width 0.3s linear; transition:width 0.3s linear; } .a-btn-icon-right { position:absolute; right:0px; top:0px; height:100%; width:52px; border-left:1px solid #5d81ab; -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; } .a-btn-icon-right span { width:20px; height:38px; opacity:0.7; position:absolute; left:20%; top:50%; margin:-20px 0px 0px -20px; background:transparent url('../img/theme/arrow_right.png') no-repeat 50% 55%; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; } .a-btn:hover { padding-right:110px; -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); } .a-btn:hover .a-btn-text { text-shadow:0px 1px 1px #aaaaaa; color:#fff; } .a-btn:hover .a-btn-slide-text { width:30px; } .a-btn:hover .a-btn-icon-right span { opacity:1; } .a-btn:active { position:relative; top:1px; background:#bd5346; -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; border-color:#80a9da; } /* ============= 10 B. PROJECT TAG SLIDE BUTTONS ============= */ a.slideui { display: block; width: 154px; height: 24px; margin: 5px; background-image: url('../img/theme/ctaprosui.png'); } a.slideui:hover { background-position: center bottom; } a.slidemobile { display: block; width: 154px; height: 24px; margin: 5px; background-image: url('../img/theme/ctaprosmobile.png'); } a.slidemobile:hover { background-position: center bottom; } a.slideflash { display: block; width: 154px; height: 24px; margin: 5px; background-image: url('../img/theme/ctaprosflash.png'); } a.slideflash:hover { background-position: center bottom; } a.slidevideo { display: block; width: 154px; height: 24px; margin: 5px; background-image: url('../img/theme/ctaprosvideo.png'); } a.slidevideo:hover { background-position: center bottom; } a.slideillustration { display: block; width: 154px; height: 24px; margin: 5px; background-image: url('../img/theme/ctaprosillustration.png'); } a.slideillustration:hover { background-position: center bottom; } a.slidegraphic { display: block; width: 154px; height: 24px; margin: 5px; background-image: url('../img/theme/ctaprosgrpahic.png'); } a.slidegraphic:hover { background-position: center bottom; } /* ============= 10 C. TAG SLIDE ============= */ ul#tagslide li { list-style: none } .tag { background: url('../img/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; } .tag:hover { cursor: pointer } .tag:active { top: 1px } .tag span { display: block; float: left; } .tag_name { background: url('../img/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; } .tag_count { background: url('../img/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: 100%; 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(209, 102, 89, 0.8); background-color: teal\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; } .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; } .hover-post-meta-like { float: left; height: 18px; margin: 1px 5px; text-indent: 22px; text-decoration: none; background: url('../img/theme/sprite.png') 0px -54px no-repeat; } .hover-post-meta-like:hover { color: #cf6a60; background: url('../img/theme/sprite.png') 0px -72px no-repeat; } .hover-post-meta-comment { float: left; height: 18px; margin: 1px 5px; text-indent: 24px; text-decoration: none; background: url('../img/theme/sprite.png') 0px -90px no-repeat; } .hover-post-meta-comment:hover { color: #000; background: url('../img/theme/sprite.png') 0px -108px no-repeat; } .hover-post-meta-date { float: left; height: 18px; margin: 1px 5px; text-indent: 24px; text-decoration: none; background: url('../img/theme/sprite.png') 0px -126px no-repeat; } .hover-post-meta-date:hover { color: #000; background: url('../img/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('../img/theme/sprite.png') 0px -162px } .pf-link { background: url('../img/theme/sprite.png') 0px -180px } .pf-image { background: url('../img/theme/sprite.png') 0px -198px } .pf-quote { background: url('../img/theme/sprite.png') 0px -216px } .pf-status { background: url('../img/theme/sprite.png') 0px -234px } .pf-video { background: url('../img/theme/sprite.png') 0px -252px } .pf-audio { background: url('../img/theme/sprite.png') 0px -270px } .pf-standerd { background: url('../img/theme/sprite.png') 0px -288px } .hover-post-title { float: left; padding-left: 15px; } .hover-post-head { background: #3a2821; padding: 10px 0 0 0; } .text-gradient { width: 40px; height: 60px; z-index: 99; position: absolute; right: 0px; background: url('../img/theme/gradient.png'); } .blog-meta { position: relative; background-color: teal; border-bottom: 1px #ddd solid; } .project-meta { background-color: teal } .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%; } .hover-fifth .masky { background-image: url('../img/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: 300px; 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); } .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: #d06d60; 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('../img/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('../img/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('../img/theme/drbl-wgt-bg.png') no-repeat; font-size: 11px; text-indent: 32px; text-decoration: none; } #foursquare_count { width: 92px; height: 37px; padding: 0 5px; margin: 0 0 11px 0; float: left; border: 1px #fff solid; background: #fff url('../img/theme/frsq-wgt-bg.png') no-repeat; font-size: 11px; text-indent: 32px; text-decoration: none; } #fb_count:hover, #twitter_count:hover, #dribbble_count:hover, #foursquare_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("../img/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: 14px; font-weight: bold; } .comment-header-border { background-color: #e9ebed; height: 1px; margin: 0 auto; display: block; width: 200px; } /* ============= 16. COMMENTS FORM ============= */ #respond { text-align: center; 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('../img/theme/shortcode-toggle-close.png') no-repeat 99% center; } .shortcode-toggle.closed h4 a { background-image: url('../img/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. TABS ============= */ ul.tabs { display: block; margin: 0 0 15px 0; padding: 0; border-bottom: solid 3px #aaa; } ul.tabs li { display: block; width: auto; height: 30px; padding: 0; float: left; margin-bottom: 0; padding-bottom: 2px; border-right: 1px #ddd dotted; } ul.tabs li a { display: block; text-decoration: none; width: auto; height: 29px; padding: 0px 20px 3px 20px; line-height: 30px; margin: 0; background: #fff; color: #666; font-size: 11px; font-weight: bold; } ul.tabs li a.selected { border-bottom: 3px #d16659 solid; color: #000; } .tab-content { padding: 0px } /* ============= 19.A INTRO PAGE BUTTONS ============= */ a.foliobtn:hover { background-position: center bottom; } /* ============= 19.B BUTTONS ============= */ .awesome, .awesome:visited { background: #222 url('../img/theme/alert-overlay.png') repeat-x; display: inline-block; padding: 5px 10px 6px; color: #fff; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.3); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3); box-shadow: 0 1px 2px rgba(0,0,0,0.3); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; } .awesome:hover { background-color: #111; color: #fff; } .awesome:active { top: 1px } .small.awesome, .small.awesome:visited { font-size: 11px; padding: ; } .awesome, .awesome:visited, .medium.awesome, .medium.awesome:visited { font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); } .large.awesome, .large.awesome:visited { font-size: 14px; padding: 8px 14px 9px; } .green.awesome, .green.awesome:visited { background-color: #91bd09 } .green.awesome:hover { background-color: #749a02 } .blue.awesome, .blue.awesome:visited { background-color: #2daebf } .blue.awesome:hover { background-color: #007d9a } .red.awesome, .red.awesome:visited { background-color: #e33100 } .red.awesome:hover { background-color: #872300 } .magenta.awesome, .magenta.awesome:visited { background-color: #a9014b } .magenta.awesome:hover { background-color: #630030 } .gold.awesome, .gold.awesome:visited { background-color: #c19d58 } .gold.awesome:hover { background-color: #c19d58 } .teal.awesome, .teal.awesome:visited { background-color: #ffb515 } .teal.awesome:hover { background-color: #56bcb6 } .black.awesome, .black.awesome:visited { background-color: #333 } .black.awesome:hover { background-color: #000 } .grey.awesome, .grey.awesome:visited { background-color: #f2f2f2; color: #444; text-shadow: none; } .grey.awesome:hover { background-color: #ddd } .purple.awesome, .purple.awesome:visited { background-color: #371a93 } .purple.awesome:hover { background-color: #1a0168 } .brown.awesome, .brown.awesome:visited { background-color: #6b2c38 } .brown.awesome:hover { background-color: #460914 } table.table-standard { border: 1px #ddd solid; font-size: 11px; width: 100%; margin-bottom: 10px; } /* ============= 20 TABLE ============= */ table.table-standard tr.table-head { font-weight: bold; text-align: center; background: #f2f2f2; } table.table-standard td { border: 1px #ddd dotted; padding: 5px 10px; text-align: center; } /* ============= 21. GALLERY HOVERABLE ============= */ .hoverable { position: relative } .hoverable .hoverable-over { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; margin: 0; padding: 0; background: url('../img/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('../img/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 } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 767px) { 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 } 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; -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; } #primary-footer { background: #ddd url('../img/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, p.copyright { display: block; float: none; text-align: center; } .magic-column { width: 273px; height: 199px; padding: 2px; background: #fff; display: block; } .magic-column .hover .masky, .magic-column .hover.hover-fifth { height: 286px } .hover { height: 256px } .hover .masky { height: 256px } .container .five.columns { width: 260px; margin-bottom: 25px; } #tiny-widgets .two.columns.resume { width: 100% } #tiny-widgets .two.columns.qr { 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; } } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { .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 } #twitter_count { margin-right: 12px } iframe.video { width: 100%; height: 242px; } } /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 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 { display: none } #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; } }