/****************************************************************** Theme Name: Simple Theme URI: http://www.twomediaxthemes.com/simple Description:Ultra Responsive, Fast, Visual Shortcode Manager, next generation ready Author:2mediax Author URI:http://www.2mediax.com Version:1.0 ***************************************************************/ /* ========================================================================== HTML5 display definitions ========================================================================== */ /* * Corrects `block` display not defined in IE6/7/8/9 & FF3. */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } /* * Corrects `inline-block` display not defined in IE6/7/8/9 & FF3. */ audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } /* * Prevents modern browsers from displaying `audio` without controls. * Remove excess height in iOS5 devices. */ audio:not([controls]) { display: none; height: 0; } /* * Addresses styling for `hidden` attribute not present in IE7/8/9, FF3, S4. * Known issue: no IE6 support. */ [hidden] { display: none; } /* ========================================================================== Base ========================================================================== */ /* * 1. Corrects text resizing oddly in IE6/7 when body `font-size` is set using * `em` units. * 2. Prevents iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-size: 100%; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ } /* * Addresses `font-family` inconsistency between `textarea` and other form * elements. */ html, button, input, select, textarea { font-family: sans-serif; } /* * Addresses margins handled incorrectly in IE6/7. */ body { margin: 0; } /* ========================================================================== Links ========================================================================== */ /* * Addresses `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /* * Improves readability when focused and also mouse hovered in all browsers. * people.opera.com/patrickl/experiments/keyboard/test */ a:active, a:hover { outline: 0; } /* ========================================================================== Typography ========================================================================== */ /* * Addresses font sizes and margins set differently in IE6/7. * Addresses font sizes within `section` and `article` in FF4+, Chrome, S5. */ h1 { font-size: 2em; margin: 0.67em 0; } h2 { font-size: 1.5em; margin: 0.83em 0; } h3 { font-size: 1.0em; margin: 1em 0; } h4 { font-size: 1em; margin: 1.33em 0; } h5 { font-size: 0.83em; margin: 1.67em 0; } h6 { font-size: 0.75em; margin: 1.67em 0; font-weight: normal; } /* * Addresses styling not present in IE7/8/9, S5, Chrome. */ abbr[title] { border-bottom: 1px dotted; } /* * Addresses style set to `bolder` in FF3+, S4/5, Chrome. */ b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } /* * Addresses styling not present in S5, Chrome. */ dfn { font-style: italic; } /* * Addresses styling not present in IE6/7/8/9. */ mark { background: #ff0; color: #000; } /* * Addresses margins set differently in IE6/7. */ /* * Corrects font family set oddly in IE6, S4/5, Chrome. * en.wikipedia.org/wiki/User:Davidgothberg/Test59 */ kbd, code, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1.2em; } pre { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 0.9em; background: #f6f6f6; border: 1px solid #efefef; padding: 2px 5px; display: inline-block; } /* * Improves readability of pre-formatted text in all browsers. */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } /* * Addresses CSS quotes not supported in IE6/7. */ q { quotes: none; } /* * Addresses `quotes` property not supported in S4. */ q:before, q:after { content: ''; content: none; } small { font-size: 75%; } /* * Prevents `sub` and `sup` affecting `line-height` in all browsers. * gist.github.com/413930 */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== Lists ========================================================================== */ /* * Addresses margins set differently in IE6/7. */ dl, menu, ol, ul { margin: 0 0; } dd { margin: 0 0 0 40px; } /* * Addresses paddings set differently in IE6/7. */ menu, ol, ul { padding: 0 0 0 40px; } /* * Corrects list images handled incorrectly in IE7. */ nav ul, nav ol { list-style: none; list-style-image: none; } /* ========================================================================== Embedded content ========================================================================== */ /* * 1. Removes border when inside `a` element in IE6/7/8/9, FF3. * 2. Improves image quality when scaled in IE7. * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ img { border: 0; /* 1 */ -ms-interpolation-mode: bicubic; /* 2 */ max-width: 100%; } /* * Corrects overflow displayed oddly in IE9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /* * Addresses margin not present in IE6/7/8/9, S5, O11. */ figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */ /* * Corrects margin displayed oddly in IE6/7. */ form { margin: 0; } /* * Define consistent border, margin, and padding. */ fieldset { margin: 0; padding: 0; border-style: none; } /* * 1. Corrects color not being inherited in IE6/7/8/9. * 2. Corrects text not wrapping in FF3. * 3. Corrects alignment displayed oddly in IE6/7. */ legend { border: 0; /* 1 */ padding: 0; white-space: normal; /* 2 */ *margin-left: -7px; /* 3 */ } /* * 1. Corrects font size not being inherited in all browsers. * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome. * 3. Improves appearance and consistency in all browsers. */ button, input, select, textarea { font-size: 100%; /* 1 */ margin: 0; /* 2 */ vertical-align: baseline; /* 3 */ *vertical-align: middle; /* 3 */ } /* * Addresses FF3/4 setting `line-height` on `input` using `!important` in the * UA stylesheet. */ button, input { line-height: normal; } /* * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Corrects inability to style clickable `input` types in iOS. * 3. Improves usability and consistency of cursor style between image-type * `input` and others. * 4. Removes inner spacing in IE7 without affecting normal text inputs. * Known issue: inner spacing remains in IE6. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ *overflow: visible; /* 4 */ } /* * Re-set default cursor for disabled elements. */ button[disabled], input[disabled] { cursor: default; } /* * 1. Addresses box sizing set to content-box in IE8/9. * 2. Removes excess padding in IE8/9. * 3. Removes excess padding in IE7. * Known issue: excess padding remains in IE6. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ *height: 13px; /* 3 */ *width: 13px; /* 3 */ } /* * 1. Addresses `appearance` set to `searchfield` in S5, Chrome. * 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz` * to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /* * Removes inner padding and search cancel button in S5, Chrome on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* * Removes inner padding and border in FF3+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* * 1. Removes default vertical scrollbar in IE6/7/8/9. * 2. Improves readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== Tables ========================================================================== */ /* * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } /****************************************************************** CUSTOMIZED RESET VALUES I added these extra styles as a more personalized reset. Feel free to remove them if you like or add your own. If you want to update the normalize styles, make sure to edit from this point up. ******************************************************************/ ul, ol { padding: 0; list-style-type: none; } dd { margin: 0; } .sidebar ul, .sidebar ol, .commentlist { list-style: none; } /* proper formatting (http://blog.fontdeck.com/post/9037028497/hyphens) */ p { -webkit-hyphens: auto; -moz-hyphens: auto; -epub-hyphens: auto; hyphens: auto; } b, strong, .strong { font-weight: bold; } dfn, em, .em { font-style: italic; } small, .small { font-size: 75%; } /****************************************************************** Site Name: Author: Stylesheet: Mixins & Constants Stylesheet This is where you can take advantage of Sass' great features: Mixins & Constants. I won't go in-depth on how they work exactly, there are a few articles below that will help do that. What I will tell you is that this will help speed up simple changes like changing a color or adding CSS3 techniques like box shadow and border-radius. A WORD OF WARNING: It's very easy to overdo it here. Be careful and remember less is more. ******************************************************************/ /********************* CLEARFIXIN' *********************/ /* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix { zoom: 1; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } /********************* TOOLS *********************/ /* http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ */ .image-replacement { text-indent: 100%; white-space: nowrap; overflow: hidden; } /********************* COLORS Need help w/ choosing your colors? Try this site out: http://0to255.com/ *********************/ /********************* TYPOGRAPHY *********************/ /* To embed your own fonts, use this syntax and place your fonts inside the library/fonts folder. For more information on embedding fonts, go to: http://www.fontsquirrel.com/ Be sure to remove the comment brackets. */ /* @font-face { font-family: 'Font Name'; src: url('library/fonts/font-name.eot'); src: url('library/fonts/font-name.eot?#iefix') format('embedded-opentype'), url('library/fonts/font-name.woff') format('woff'), url('library/fonts/font-name.ttf') format('truetype'), url('library/fonts/font-name.svg#font-name') format('svg'); font-weight: normal; font-style: normal; } */ /* use the best ampersand http://simplebits.com/notebook/2008/08/14/ampersands-2/ */ span.amp { font-family: Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif !important; font-style: italic; } /* text alignment */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } /* alerts & notices */ .alert { padding: 0px; } .help { border-color: #e8dc59; background: #ebe16f; } .info { border-color: #1f80b9; /*background: $alert-blue;*/ } .error { border-color: #f8cdce; background: #fbe3e4; } .success { border-color: #deeaae; background: #e6efc2; } /********************* BORDER RADIUS *********************/ /* NOTE: For older browser support (and some mobile), don't use the shorthand to define *different* corners. USAGE: @include rounded(4px); */ /* Instead of having a seperate mixin for the different borders, we're using the mixin from 320 & Up to make things easier to use. USAGE: @include border-radius(4px,4px,0,0); */ /********************* TRANSITION *********************/ /* @include transition(all,2s,ease-out); */ /********************* BOX SHADOWS *********************/ /* @include box-shadow(5px, 5px, 10px, #000); */ /********************* CSS3 GRADIENTS Be careful with these since they can really slow down your CSS. Don't overdo it. *********************/ /* @include css-gradient(#dfdfdf,#f8f8f8); */ /********************* BOX SIZING *********************/ /* @include box-sizing(border-box); */ /* NOTE: value of "padding-box" is only supported in Gecko. So probably best not to use it. I mean, were you going to anyway? */ /****************************************************************** Site Name: Author: Stylesheet: Base Mobile Stylesheet This is called at the top of the main stylsheet and will be used across all viewports. ******************************************************************/ /********************* GENERAL STYLES *********************/ body { line-height: 22px; } #wrapper { margin: 0 auto; width: 100%; } .boxed #wrapper { margin: 20px 0; } .inner-wrapper { margin: 0 auto; width: 100%; background: #ffffff; } /********************* LAYOUT & GRID STYLES *********************/ #navigation, .header-links-wrapper, .footer-links-wrapper { display: none; } .wrap { width: 90%; margin: 0 auto; min-width: 272px; max-width: 1280px; } /* layout & column defaults */ .onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol { width: 99.999999993%; position: relative; float: left; margin-left: 0; } .margin_bottom { margin-bottom: 2.562430939%; } .first { margin-left: 0; } .last { float: left; } .select-menu { display: block; margin: 0 auto; } .navcombo { display: none; } .navcombo .nav { /* end .menu ul li */ } .navcombo .nav > li > a { line-height: normal; height: auto; color: #fff; font-weight: bold; padding: 20px 0 20px 20px; } .navcombo .nav li { float: none; margin: 0; width: 100%; /* plan your menus and drop-downs wisely. */ } .navcombo .nav li a { text-decoration: none; color: #fff; width: 94%; padding: 2% 2% 2% 4%; /* you can use hover styles here even though this size has the possibility of being a mobile device. */ } .navcombo .nav li ul, .navcombo .nav li ul.children { width: 100%; margin: 0; text-align: left; position: relative; z-index: 999; /* highlight sub-menu current page */ } .navcombo .nav li ul .sub, .navcombo .nav li ul.children .sub { font-size: 0.9em; font-style: italic; color: #fff; } .navcombo .nav li ul li, .navcombo .nav li ul.children li { background: #313941; /* if you need to go deeper... I wouldn't try!!. */ } .navcombo .nav li ul li a, .navcombo .nav li ul.children li a { transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; border-bottom: 1px solid #363f48; color: #ffffff; } .navcombo .nav li ul li a:hover, .navcombo .nav li ul li a:focus, .navcombo .nav li ul.children li a:hover, .navcombo .nav li ul.children li a:focus { background: #363f48; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; } .navcombo .nav li ul li a:hover, .navcombo .nav li ul li a:focus, .navcombo .nav li ul.children li a:hover, .navcombo .nav li ul.children li a:focus { text-decoration: none; } .navcombo .nav li ul li:last-child a, .navcombo .nav li ul.children li:last-child a { border-bottom: 0; } .navcombo .nav li ul li ul, .navcombo .nav li ul li ul.children, .navcombo .nav li ul.children li ul, .navcombo .nav li ul.children li ul.children { /*margin: -43px 0 0 182px;*/ } .navcombo .nav li ul li ul li, .navcombo .nav li ul li ul.children li, .navcombo .nav li ul.children li ul li, .navcombo .nav li ul.children li ul.children li { padding: 0; } .navcombo .nav li ul li ul li a, .navcombo .nav li ul li ul.children li a, .navcombo .nav li ul.children li ul li a, .navcombo .nav li ul.children li ul.children li a { padding: 15px 15px; width: 100%; color: #333; margin-left: -2px; } .navcombo .nav li ul li ul li a:hover, .navcombo .nav li ul li ul li a:focus, .navcombo .nav li ul li ul.children li a:hover, .navcombo .nav li ul li ul.children li a:focus, .navcombo .nav li ul.children li ul li a:hover, .navcombo .nav li ul.children li ul li a:focus, .navcombo .nav li ul.children li ul.children li a:hover, .navcombo .nav li ul.children li ul.children li a:focus { text-decoration: none; } .navcombo .nav li ul li ul li:first-child .tip, .navcombo .nav li ul li ul.children li:first-child .tip, .navcombo .nav li ul.children li ul li:first-child .tip, .navcombo .nav li ul.children li ul.children li:first-child .tip { display: none; } .navcombo .nav li ul li ul li:last-child a, .navcombo .nav li ul li ul.children li:last-child a, .navcombo .nav li ul.children li ul li:last-child a, .navcombo .nav li ul.children li ul.children li:last-child a { border-bottom: 0; } .navcombo .nav .menu-header-search { display: none; } #wrapper-header-box { display: none; } .search-header { display: block; } .search-page { margin: 20px 0; } .search-loop-sep { margin: 10px 0 14px 0; } #mobnav { display: block; position: absolute; float: right; right: 5%; top: 30px; } #mobnav .btn-responsive-menu { padding: 5px; cursor: pointer; margin: 0; background-color: #333; -webkit-transition: 0.3s all 0s; -moz-transition: 0.3s all 0s; -o-transition: 0.3s all 0s; -ms-transition: 0.3s all 0s; transition: 0.3s all 0s; } #mobnav .btn-responsive-menu:hover, #mobnav .btn-responsive-menu:focus { background-color: #1abc9c; } #mobnav .btn-responsive-menu .span-bar { display: block; width: 18px; height: 2px; margin: 5px; background-color: #fff; } /********************* LINK STYLES *********************/ a, a:visited { color: #333; /* on hover */ /* on click */ /* mobile tap color */ } a:hover, a:focus, a:visited:hover, a:visited:focus { color: #999; } a:active, a:visited:active { color: #999; } a:link, a:visited:link { /* this highlights links on iPhones/iPads. so it basically works like the :hover selector for mobile devices. */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /****************************************************************** H1, H2, H3, H4, H5 STYLES ******************************************************************/ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { text-rendering: optimizelegibility; /* if you're going to use webfonts, be sure to check your weights http://css-tricks.com/watch-your-font-weight/ */ /* removing text decoration from all headline links */ } h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a { text-decoration: none; } h1, .h1 { font-size: 30px; line-height: 1em; font-weight: 100; } h2, .h2 { font-size: 18px; line-height: 1.333em; margin-bottom: 0.375em; } h3, .h3 { font-size: 15px; margin: 0.8em 0; font-weight: 100; } h4, .h4 { font-size: 15px; margin: 0.8em 0; font-weight: 100; } h5, .h5 { font-size: 11px; } h6, .h6 { font-size: 10px; } /********************* LIST STYLES *********************/ .list-disc li { list-style: disc; list-style-position: inside; padding-left: 20px; } .list-square li { list-style-type: square; list-style-position: inside; padding-left: 20px; } .list-roman li { list-style-type: upper-roman; list-style-position: inside; padding-left: 0px; } .list-alpha li { list-style-type: lower-alpha; list-style-position: inside; padding-left: 0px; } .list-number li { list-style: decimal; list-style-position: inside; padding-left: 0px; } .list-number-zero li { list-style: decimal-leading-zero; list-style-position: inside; padding-left: 0px; } .list-red-x li { list-style: none !important; padding-left: 20px !important; position: relative; } .list-red-x li:before { position: absolute; font-family: FontAwesome; content: "\f057"; top: 1px; left: 0px; color: #ff000f; } .list-x li { list-style: none; padding-left: 20px; position: relative; } .list-x li:before { position: absolute; font-family: FontAwesome; content: "\f00d"; top: 1px; left: 0px; } .list-ok li { list-style: none; position: relative; padding-left: 20px; } .list-ok li:before { position: absolute; font-family: FontAwesome; content: "\f00c"; top: 1px; left: 0px; } /* ========================================================================== Tables ========================================================================== */ /* * Remove most spacing between table cells. */ .table-style { border-collapse: collapse; border-spacing: 0; } .table-style .color { background-color: #f6f6f6; } .table-style tr, .table-style td { border: 1px solid #ccc; padding: 10px; } /********************* HEADER SYTLES *********************/ .header { width: 100%; background: #fff; } #logo { width: 100%; margin: 0 auto; text-align: left; } #logo > a > img { margin-top: 0px; } .select-menu { width: 100%; font-family: inherit; height: 40px; } .header-two .header, .header-three .header { width: 100%; height: auto !important; } .header-two .nav .menu-header-search, .header-three .nav .menu-header-search { background-position-y: 20px; } .header-two #logo, .header-three #logo { width: 100% !important; margin: 0 auto; text-align: left; } .header-two #logo > a > img, .header-three #logo > a > img { margin: 0px 0 0 0 !important; } #searchform, .searchform { margin: 15px auto; background: #f6f6f6; position: relative; border-color: #e1e1e1; border-width: 1px; border-style: solid; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } #searchform label, .searchform label { display: none; } #searchform input, .searchform input { padding: 0; border: none; background: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-appearance: none; } #searchform input.s, .searchform input.s { padding: 15px; font-size: 13px; width: 85%; margin: 0; border: 0; background: none; color: #cbcbcb; font-family: inherit; } #searchform .search-submit, .searchform .search-submit { position: absolute; top: 15px; right: 10px; border: 0; margin: 0; padding: 0; max-width: 16px; } /********************* POSTS & CONTENT STYLES *********************/ article img { max-width: 100%; height: auto; /* border: 2px solid white; box-shadow: 0px 0px 1px #333; -webkit-box-shadow: 0px 0px 1px #333; -moz-box-shadow: 0px 0px 1px #333; */ } #content { background: #fff; } .single-page .box-content, .post .box-content, .project .box-content { margin-top: 20px; } .share-button-left-icon span, .share-button-left-icon iframe, .share-button-left-icon div, .share-button-left-icon a { vertical-align: middle !important; z-index: 999; } .socials { float: left; } a.socials { width: 42px; height: 42px; float: left; } a.socials-small { width: 42px; height: 42px; } a.socials, a.socials-small { display: inline-block; margin-right: 0; text-align: left; text-indent: -9999px; } a.socials:hover, a.socials-small:hover { background-position: left top !important; } /*socials sprite */ a.email-small { background: url("images/social/email.png") no-repeat scroll 0 -42px transparent; } a.aim-small { background: url("images/social/aim.png") no-repeat scroll 0 -42px transparent; } a.apple-small { background: url("images/social/apple.png") no-repeat scroll 0 -42px transparent; } a.behance-small { background: url("images/social/behance.png") no-repeat scroll 0 -42px transparent; } a.blogger-small { background: url("images/social/blogger.png") no-repeat scroll 0 -42px transparent; } a.delicious-small { background: url("images/social/delicious.png") no-repeat scroll 0 -42px transparent; } a.deviantart-small { background: url("images/social/deviantart.png") no-repeat scroll 0 -42px transparent; } a.digg-small { background: url("images/social/digg.png") no-repeat scroll 0 -42px transparent; } a.dribbble-small { background: url("images/social/dribbble.png") no-repeat scroll 0 -42px transparent; } a.ember-small { background: url("images/social/ember.png") no-repeat scroll 0 -42px transparent; } a.facebook-small { background: url("images/social/facebook.png") no-repeat scroll 0 -42px transparent; } a.flickr-small { background: url("images/social/flickr.png") no-repeat scroll 0 -42px transparent; } a.ebay-small { background: url("images/social/ebay.png") no-repeat scroll 0 -42px transparent; } a.google-small { background: url("images/social/google.png") no-repeat scroll 0 -42px transparent; } a.googleplus-small { background: url("images/social/googleplus.png") no-repeat scroll 0 -42px transparent; } a.gowalla-small { background: url("images/social/gowalla.png") no-repeat scroll 0 -42px transparent; } a.grooveshark-small { background: url("images/social/grooveshark.png") no-repeat scroll 0 -42px transparent; } a.amazon-small { background: url("images/social/amazon.png") no-repeat scroll 0 -42px transparent; } a.lastfm-small { background: url("images/social/lastfm.png") no-repeat scroll 0 -42px transparent; } a.linkedin-small { background: url("images/social/linkedin.png") no-repeat scroll 0 -42px transparent; } a.metacafe-small { background: url("images/social/metacafe.png") no-repeat scroll 0 -42px transparent; } a.mixx-small { background: url("images/social/mixx.png") no-repeat scroll 0 -42px transparent; } a.netvibes-small { background: url("images/social/netvibes.png") no-repeat scroll 0 -42px transparent; } a.paypal-small { background: url("images/social/paypal.png") no-repeat scroll 0 -42px transparent; } a.picasa-small { background: url("images/social/picasa.png") no-repeat scroll 0 -42px transparent; } a.pinterest-small { background: url("images/social/pinterest.png") no-repeat scroll 0 -42px transparent; } a.plurk-small { background: url("images/social/plurk.png") no-repeat scroll 0 -42px transparent; } a.reddit-small { background: url("images/social/reddit.png") no-repeat scroll 0 -42px transparent; } a.rss-small { background: url("images/social/rss.png") no-repeat scroll 0 -42px transparent; } a.skype-small { background: url("images/social/skype.png") no-repeat scroll 0 -42px transparent; } a.stumbleupon-small { background: url("images/social/stumbleupon.png") no-repeat scroll 0 -42px transparent; } a.bing-small { background: url("images/social/bing.png") no-repeat scroll 0 -42px transparent; } a.tumblr-small { background: url("images/social/tumblr.png") no-repeat scroll 0 -42px transparent; } a.twitter-small { background: url("images/social/twitter.png") no-repeat scroll 0 -42px transparent; } a.vimeo-small { background: url("images/social/vimeo.png") no-repeat scroll 0 -42px transparent; } a.wordpress-small { background: url("images/social/wordpress.png") no-repeat scroll 0 -42px transparent; } a.yahoo-small { background: url("images/social/yahoo.png") no-repeat scroll 0 -42px transparent; } a.yelp-small { background: url("images/social/yelp.png") no-repeat scroll 0 -42px transparent; } a.youtube-small { background: url("images/social/youtube.png") no-repeat scroll 0 -42px transparent; } .socials_container .socials a.socials-small { margin-right: 2px; } #main a.socials-small { background-color: #333; margin-right: 0px; } .responsive { text-align: center; float: none; } .tipsy { padding: 5px; font-size: 10px; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat; background-image: url(images/tipsy.gif); } .tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; } .tipsy-inner { -moz-border-radius: 3px; -webkit-border-radius: 3px; } .tipsy-north { background-position: top center; } .tipsy-south { background-position: bottom center; margin-bottom: 3px; } .tipsy-east { background-position: right center; } .tipsy-west { background-position: left center; } /* post meta */ .meta { color: #999; } /* post content */ #inner-content p, .post-content p, .homepage-content p { color: #333; margin: 0 0 10px 0; } #inner-content dd, .post-content dd, .homepage-content dd { margin-left: 0; font-size: 0.9em; color: #787878; margin-bottom: 1.5em; } #inner-content .alignleft, #inner-content img.alignleft, .post-content .alignleft, .post-content img.alignleft, .homepage-content .alignleft, .homepage-content img.alignleft { margin-right: 1.5em; display: inline; float: left; } #inner-content .alignright, #inner-content img.alignright, .post-content .alignright, .post-content img.alignright, .homepage-content .alignright, .homepage-content img.alignright { margin-left: 1.5em; display: inline; float: right; } #inner-content .aligncenter, #inner-content img.aligncenter, .post-content .aligncenter, .post-content img.aligncenter, .homepage-content .aligncenter, .homepage-content img.aligncenter { margin-right: auto; margin-left: auto; display: block; clear: both; } #inner-content video, #inner-content object, .post-content video, .post-content object, .homepage-content video, .homepage-content object { max-width: 100%; height: auto; } #inner-content .socials, .post-content .socials, .homepage-content .socials { float: left; width: 42px; height: 42px; margin-top: 0px; padding: 0 4px 0 0; } /* end .post-content */ .wp-caption { background: #eee; padding: 5px; /* images inside wp-caption */ } .wp-caption img { margin-bottom: 0; width: 100%; } .wp-caption p.wp-caption-text { font-size: 0.85em; margin: 4px 0 7px; text-align: center; } /* end .wp-caption */ /* image gallery styles */ .gallery dl img { border: none !important; padding: 0 5px 5px 0; } /* end .gallery */ .gallery-item { margin-right: 5px; } /* gallery caption styles */ /* PORTFOLIO */ .portfolio_description { float: left; width: 100%; } .portfolio_description h4 { text-align: justify; } .portfolio_meta, .portfolio_details { margin-top: 18px; } .portfolio_meta .project_url, .portfolio_details .project_url { float: left; margin: 5px 0 30px 0; width: 100%; } .portfolio_meta h4.single-title, .portfolio_details h4.single-title { margin-top: 0; } .portfolio_meta .postpretitle, .portfolio_details .postpretitle { margin-top: 0; } .portfolio_meta .project_details, .portfolio_details .project_details { float: left; width: 100%; } .portfolio_meta .project_details li, .portfolio_details .project_details li { min-height: 40px; line-height: 40px; border-bottom: 1px solid #eee; } .portfolio_meta .project_details li .type, .portfolio_details .project_details li .type { float: left; min-width: 100px; opacity: 0.7; color: #333; } .portfolio_meta .project_details li .text, .portfolio_details .project_details li .text { float: left; opacity: 0.7; } /* FLEX SLIDER*/ .flexslider { width: 100%; float: left; } .flexslider .description { height: 1px; } .flexslider .flex-thumbs { margin: 3px; } .flexslider .flex-thumbs li { width: 100px !important; } /* Page & Post Titles -------------------------------------------------------------- */ .postpretitle { width: 50px; height: 4px; background-color: #333; position: relative; margin-top: 5px; float: left; } .page-title { float: left; text-align: left; width: 100%; color: #333; } .single-title { float: left; text-align: left; width: 100%; color: #333; } h1.single-title, h1.page-title { margin-top: 10px; } .page-title-loop { float: left; text-align: left; color: #333; border-bottom: solid 1px #CCC; margin: 0 0 0 0; } .page-title-loop h1 { margin: 0; } .page-title a, .page-title a:visited, .page-title a:link { text-decoration: none !important; } .page-title a:focus, .page-title a:active, .page-title a:hover { text-decoration: none !important; } .twomediax-spacer { padding: 0 0 20px 0; } .div-excerpt { float: left; margin: 10px 0 20px 0; } .div-excerpt p { margin: 0px; padding: 0px; } .entry-meta { padding-top: 10px; color: #B4B4B4 !important; } /****************************************************************** PAGE NAVI STYLES ******************************************************************/ .article-header { margin-top: 20px; float: left; width: 100%; } .page-navigation, .wp-prev-next { margin: 1.1em 0 2.2em; } /* fallback previous & next links */ .wp-prev-next .prev-link { float: left; } .wp-prev-next .next-link { float: right; } /* end .wp-prev-next */ .wrapper-bread-blog { color: #333; } .breadcrumb-menu { margin-bottom: 20px; margin-top: 0px; min-height: 120px; line-height: 100px; } .breadcrumb-menu .breadcrumb-item { color: #333; } .breadcrumb-menu .breadcrumb-item .sep { font-size: 11px; margin: 10px 0 0 0; } .breadcrumb-menu .breadcrumb-item li { float: left; margin-right: 10px; } .wrapper-bread-pages, .wrapper-bread-search, .wrapper-bread-archives, .wrapper-bread-portfolio, .wrapper-bread-blog { color: #333; background-color: #efefef; line-height: 135px; } .breadcrumb-item-blog p, .breadcrumb-item-pages p { margin: 0px; } .breadcrumb-menu-footer { color: #f6f6f6; background-color: #121212; line-height: 135px; } /* tags */ .tags .button { margin-right: 5px; padding: 5px; line-height: 13px; } /* pagination */ .pagination { text-align: center; float: left; width: 100%; } .pagination ul { float: right; } .pagination ul li { margin-right: 5px; float: left; } .pagination ul .current { margin-right: 5px; line-height: 2.4em; text-decoration: none; background-color: #333; text-align: center; color: white !important; display: inline-block; height: 30px; width: 30px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .pagination ul li a, .pagination ul li { line-height: 2.4em; text-decoration: none; background-color: #333; text-align: center; color: white !important; display: inline-block; height: 30px; width: 30px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .pagination ul li a:hover { background-color: #333; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; } .pagination ul .next, .pagination ul .prev, .pagination ul .first, .pagination ul .last, .pagination ul .next a, .pagination ul .prev a, .pagination ul .first a, .pagination ul .last a { color: transparent !important; background: #333; position: relative; content: ""; } .pagination ul .prev a:before { position: absolute; font-family: FontAwesome; color: #fff; font-weight: 100; content: "\f104"; left: 40%; } .pagination ul .next a:before { position: absolute; font-family: FontAwesome; color: #fff; font-weight: 100; content: "\f105"; left: 40%; } .pagination ul .first a:before { position: absolute; font-family: FontAwesome; color: #fff; font-weight: 100; content: "\f100"; left: 40%; } .pagination ul .last a:before { position: absolute; font-family: FontAwesome; color: #fff; font-weight: 100; content: "\f101"; left: 40%; } .article-footer { border-top: 1px solid #efefef; border-bottom: 1px solid #efefef; padding-bottom: 10px; } /****************************************************************** COMMENT STYLES ******************************************************************/ #respond input { padding: 10px; } #respond .comment-form-author label, #respond .comment-form-url label, #respond .comment-form-comment label { margin-right: 10px; } #respond .comment-form-email label { margin-right: 13px; } /* h3 comment title */ #comments { /* number of comments span */ } .commentlist { /* general comment classes */ /* vcard */ /* end .commentlist .vcard */ /* comment meta */ /* comment content */ /* end .commentlist .comment_content */ /* comment reply link */ /* end .commentlist .comment-reply-link */ } .commentlist li { position: relative; clear: both; overflow: hidden; list-style-type: none; margin-bottom: 1.5em; padding: 0.7335em 10px; /* end .commentlist li ul.children */ } .commentlist li:last-child { margin-bottom: 0; } .commentlist li ul.children { margin: 0; /* variations */ /* change number for different depth */ } .commentlist li[class*=depth-] { margin-top: 1.1em; } .commentlist li.depth-1 { margin-left: 0; margin-top: 0; } .commentlist li:not(.depth-1) { margin-right: -10px; margin-left: -10px; margin-top: 0; padding-bottom: 0; } .commentlist .odd { background: #eee; } .commentlist .even { background: #fefefe; } .commentlist .vcard { margin-left: 50px; } .commentlist .vcard cite.fn { font-weight: 700; font-style: normal; } .commentlist .vcard time { float: right; } .commentlist .vcard time a { color: #999; text-decoration: none; } .commentlist .vcard time a:hover { text-decoration: underline; } .commentlist .vcard img.avatar { position: absolute; left: 10px; padding: 2px; border: 1px solid #cecece; background: #fff; } .commentlist .comment_content { margin-left: 50px; } .commentlist .comment_content p { margin: 0.7335em 0 1.5em; font-size: 1em; line-height: 1.5em; } .commentlist .comment-reply-link { text-decoration: none; float: right; padding: 3px 10px !important; color: white !important; margin-bottom: 10px; font-weight: 100; font-size: 0.9em; } .commentlist .comment-reply-link:hover, .commentlist .comment-reply-link:focus { color: #fff; } /* end .commentlist */ /****************************************************************** COMMENT FORM STYLES ******************************************************************/ #respond { margin: 1.5em 0px; padding-bottom: 1em; float: left; } #respond #reply-title { font-weight: bold; } #respond form { margin: 0.75em 0; } #respond form li { list-style-type: none; clear: both; margin-bottom: 0.7335em; } #respond form li label, #respond form li small { display: none; } #respond form input[type=text], #respond form input[type=email], #respond form input[type=url], #respond form textarea { padding: 3px 6px; background-color: #fff; border: 1px solid #efefef; line-height: 1.5em; font-family: inherit; /* form validation */ } #respond form input[type=text]:focus, #respond form input[type=email]:focus, #respond form input[type=url]:focus, #respond form textarea:focus { background: #fff; } #respond form input[type=text]:invalid, #respond form input[type=email]:invalid, #respond form input[type=url]:invalid, #respond form textarea:invalid { outline: none; border-color: #fbc2c4; background-color: #f6e7eb; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; box-shadow: none; } #respond form input[type=text], #respond form input[type=email], #respond form input[type=url] { max-width: 400px; min-width: 250px; } #respond form textarea { resize: none; width: 97.3%; height: 150px; } /* comment submit button */ /* comment form title */ #comment-form-title { margin: 0 0 1.1em; } /* cancel comment reply link */ /* logged in comments */ /* allowed tags */ #allowed_tags, .form-allowed-tags { margin: 1.5em 10px 0.7335em 0; font-size: 11px !important; } /* no comments */ .nocomments { margin: 0 20px 1.1em; } /********************* SIDEBARS & ASIDES *********************/ .widgettitle { font-style: italic; margin-bottom: 0.75em; } .widgetpretitle { width: 50px; height: 1px; background-color: #333333; position: relative; margin-top: -5px; float: left; } /* links widget */ .widget_links ul li a { text-decoration: none; } /* meta widget */ .widget_meta ul li a { text-decoration: none; } /* pages widget */ .widget_pages ul li a { text-decoration: none; } /* recent-posts widget */ .widget_recent_entries ul li { border-top: 1px dashed #efefef; line-height: 3em; margin-bottom: 0; } .widget_recent_entries ul li a { text-decoration: none; } /* archives widget */ .widget_archive ul li { border-top: 1px dashed #efefef; line-height: 3em; margin-bottom: 0; } .widget_archive ul li a { text-decoration: none; } /* pages widget */ .widget_pages ul li { border-top: 1px dashed #efefef; line-height: 3em; margin-bottom: 0; } /* widget_nav_menu */ .widget_nav_menu ul li { border-top: 1px dashed #efefef; line-height: 3em; margin-bottom: 0; } .widget_nav_menu ul li a { text-decoration: none; } /* tag-cloud widget */ /* calendar widget */ /* category widget */ .widget_categories ul li { border-top: 1px dashed #efefef; line-height: 3em; margin-bottom: 0; } .widget_categories a { text-decoration: none; } /* recent-comments widget */ #recentcomments li { border-top: 1px dashed #efefef; line-height: 3em; margin-bottom: 0; } #recentcomments li a { text-decoration: none; } /* jQuery Post - Widget Sidebar ssp SCROLLER -------------------------------------------------------------- */ .sidebar_scroll { position: relative; margin: 0 0 0 0px; padding: 0 0px 0 0px; } .sidebar_scroll .dragger_container { position: relative; width: 5px; background: url("images/content-scroller.png") center center repeat-y; float: right; margin: 30px 0px 30px 0px; cursor: pointer; -moz-border-radius: 4px; -khtml-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; cursor: s-resize; } .sidebar_scroll a:link { background: none; padding-left: 0px !important; } .sidebar_scroll a:visited { background: none; padding-left: 0px !important; } .sidebar_scroll .customScrollBox { position: relative; height: 100%; overflow: hidden; } .sidebar_scroll .customScrollBox .container { position: relative; width: 95%; top: 0px; float: left; } .sidebar_scroll .customScrollBox .content { clear: both; } .sidebar_scroll .dragger { position: absolute; width: 5px; height: 30px; background: #666; text-align: left; line-height: 30px; color: #666; overflow: hidden; cursor: pointer; -moz-border-radius: 4px; -khtml-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } .sidebar_scroll .dragger_pressed { position: absolute; width: 5px; margin-left: 0px; height: 30px; background: #222; text-align: center; line-height: 30px; color: #666; overflow: hidden; -moz-border-radius: 4px; -khtml-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; cursor: s-resize; } .sidebar_scroll .scrollUpBtn, .sidebar_scroll .scrollDownBtn { position: absolute; display: inline-block; width: 14px; height: 20px; margin-right: -4px; text-decoration: none; right: 0; filter: alpha(opacity=20); -moz-opacity: 0.20; -khtml-opacity: 0.20; opacity: 0.20; } .sidebar_scroll .scrollUpBtn { top: 0px; background: url("images/mcs_btnUp.png") center center no-repeat !important; } .sidebar_scroll .scrollDownBtn { bottom: 0px; background: url("images/mcs_btnDown.png") center center no-repeat !important; } .sidebar_scroll .scrollUpBtn:hover, .sidebar_scroll .scrollDownBtn:hover { filter: alpha(opacity=60); -moz-opacity: 0.60; -khtml-opacity: 0.60; opacity: 0.60; } /* jQuery Post - Widget Sidebar ssp -------------------------------------------------------------- */ .ssp { width: 100%; display: inline-table; text-align: left; margin: 2px 0 10px 1px; border-radius: 0.2em 0.2em 0.2em 0.2em; box-shadow: 0px 0px 4px #ccc; } .ssp h3, .ssp h4, .ssp h5, .ssp p, .ssp ul { margin: 0 !important; line-height: normal; text-align: left; } .ssp:hover { box-shadow: 0px 0px 4px #396781; } .ssp .ssp_post_title { color: #333; text-align: left; overflow: hidden; padding: 5px; position: relative; background: #f6f6f6; border-radius: 0.2em 0.2em 0em 0em; } .ssp .ssp_post_data { vertical-align: top; float: left; text-align: left; margin: 5px 5px 0px 5px; } .ssp .ssp_post_data .ssp_post_image { float: left; } .ssp .ssp_post_data .ssp_post_excerpt { overflow: hidden; margin: 0 0 10px 0; } .ssp .ssp_post_data .excerpt { width: auto; overflow: hidden; color: #999; margin: 0 0 10px 0; } .ssp .ssp_post_data .excerpt p { padding-left: 10px; } .ssp .ssp_post_info { margin: 5px 5px 0 5px; } .ssp .ssp_post_info .comments { float: left; width: auto; color: #999; background: url("images/icons.png") no-repeat 0px -3px; padding: 0 0 0px 20px; } .ssp .ssp_post_info .date { float: left; width: auto; color: #999; background: url("images/icons.png") no-repeat 0px -28px; padding: 0px 0 0 20px; } .ssp .sep-line { float: left; width: 100%; height: 5px; background: url("images/dot-line-separation-sidebar.png") repeat-x center center; } .ssp .ssp_post_info .separation { float: left; width: 10px; height: 12px; background: url("images/icons.png") no-repeat 4px -52px; padding: 0 5px 0 5px; } .ssp .ssp_post_info ul { list-style: none !important; } .ssp .ssp_post_info li { margin-top: 0.50em; margin-bottom: 0.50em; } .ssp a:link, .ssp a:visited, .ssp a:hover { background: none !important; text-decoration: none !important; padding: 0 !important; } .ssp p, .ssp .comments, .ssp .date { font-size: 11px !important; font-weight: 100; } .isotope-item { z-index: 2; /*margin:7px;*/ } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } /* change duration value to whatever you like */ .isotope, .isotope .isotope-item { -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; } */ .isotope .isotope-item { -webkit-transition-property: right, top, -webkit-transform, opacity; -moz-transition-property: right, top, -moz-transform, opacity; -ms-transition-property: right, top, -ms-transform, opacity; -o-transition-property: right, top, -o-transform, opacity; transition-property: right, top, transform, opacity; } .progress-bar-show-border { border-bottom: 1px solid #efefef; border-top: 1px solid #efefef; } .progress-bar { padding: 3px 0; } .progress-bar div, .progress-bar span { background-color: #333; } .progress-bar div:before, .progress-bar span:before { border-top: 4px solid #333; } .progress-bar div { border-radius: 2px 2px 2px 2px; height: 10px; position: relative; width: 0; } .progress-bar div span { border-radius: 2px 2px 2px 2px; color: #FFFFFF; font-size: 12px; font-style: italic; height: 17px; line-height: 17px; position: absolute; right: -16px; text-align: center; top: -26px; width: 32px; } .progress-bar div span:before { border-left: 4px solid transparent; border-right: 4px solid transparent; bottom: -4px; content: ""; height: 0; left: 50%; margin-left: -4px; position: absolute; width: 0; } .progress-bar-title > div { height: 30px; color: #FFFFFF; padding: 9px 0 0 5px; } /* Layout helpers needed for jQuery.ui.tabs ----------------------------------*/ .ui-helper-hidden { display: none; } .ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); } .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 11px; list-style: none; } .ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; } .ui-helper-clearfix:after { clear: both; } .ui-helper-clearfix { zoom: 1; } .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter: Alpha(Opacity=0); } /* Tabs defaults...should not be modified ----------------------------------*/ .ui-tabs { font-weight: 100; position: relative; padding: .2em; zoom: 1; float: left; width: 100%; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ .ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 5px !important; white-space: nowrap; } .ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; } .ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; } .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ .ui-tabs .ui-tabs-panel { display: inline-block; border-width: 0; padding: 10px; background: none; } .ui-tabs .ui-tabs-hide { display: none !important; } /* overrides for ui-tab styles... here you can modify anything */ .ui-tabs { padding: 0px; background: none; border-width: 0px; /********************* LIST STYLES *********************/ } .ui-tabs .ui-tabs { margin-top: 0.5em; } .ui-tabs .ui-corner-all { /* -moz-border-radius-topleft: 6px; -webkit-border-top-left-radius: 6px; -moz-border-radius-topright: 6px; -webkit-border-top-right-radius: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; */ } .ui-tabs .ui-tabs-nav { padding-left: 0px; background: transparent; border-width: 0px 0px 1px 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; } .ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; } .ui-tabs .ui-tabs-nav li { float: none; margin: 1px 0.2em 1px 0; } .ui-tabs .ui-tabs-nav li a { float: none; } .ui-tabs .ui-state-default, .ui-tabs .ui-widget-content .ui-state-default { border: 1px solid #efefef; background-color: #fff; font-weight: bold; color: white; outline: none; } .ui-tabs .ui-state-default span, .ui-tabs .ui-widget-content .ui-state-default span { color: #333; } .ui-tabs .ui-tabs-selected, .ui-tabs .ui-state-active, .ui-tabs .ui-widget-content .ui-state-active { border: 1px solid #efefef !important; background-color: #f6f6f6 !important; font-weight: bold; outline: none; } .ui-tabs .ui-tabs-selected span, .ui-tabs .ui-state-active span, .ui-tabs .ui-widget-content .ui-state-active span { color: #333; } .ui-tabs .ui-corner-top { /* -moz-border-radius-topleft: 6px; -webkit-border-top-left-radius: 6px; -moz-border-radius-topright: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; */ } .ui-tabs .ui-tabs-panel { border: 1px solid #efefef; background: #f6f6f6; } .ui-tabs .ui-tabs-panel p { margin: 5px !important; } .ui-tabs .ui-corner-bottom { /* -moz-border-radius-bottomleft: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-bottomright: 6px; -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; */ } .ui-tabs .list-disc { list-style: disc; list-style-position: inside; padding-left: 20px; } .ui-tabs .list-square { list-style-type: square; list-style-position: inside; padding-left: 20px; } .ui-tabs .list-roman { list-style-type: upper-roman; list-style-position: inside; padding-left: 0px; } .ui-tabs .list-alpha { list-style-type: lower-alpha; list-style-position: inside; padding-left: 0px; } .ui-tabs .list-number { list-style: decimal; list-style-position: inside; padding-left: 0px; } .ui-tabs .list-number-zero { list-style: decimal-leading-zero; list-style-position: inside; padding-left: 0px; } .ui-tabs .list-red-x li { list-style: none !important; padding-left: 20px !important; position: relative; } .ui-tabs .list-red-x li:before { position: absolute; font-family: FontAwesome; content: "\f057"; top: 1px; left: 0px; color: #ff000f; } .ui-tabs .list-x li { list-style: none; padding-left: 20px; position: relative; } .ui-tabs .list-x li:before { position: absolute; font-family: FontAwesome; content: "\f00d"; top: 1px; left: 0px; } .ui-tabs .list-ok li { list-style: none; position: relative; padding-left: 20px; } .ui-tabs .list-ok li:before { position: absolute; font-family: FontAwesome; content: "\f00c"; top: 1px; left: 0px; } /* =Sliding Carousel ----------------------------------------------- */ .twomediax-carousel-wrapper { /* Carousel Navigation */ } .twomediax-carousel-wrapper .section-title { clear: both; display: block; } .twomediax-carousel-wrapper .twomediax-carousel > ul { left: 0; width: 100%; } .twomediax-carousel-wrapper .twomediax-carousel > li, .twomediax-carousel-wrapper .twomediax-carousel .carousel-items-wrapper > article { float: left; list-style: none; overflow: hidden; position: relative; } .twomediax-carousel-wrapper .twomediax-carousel .post-thumb { position: relative; background: transparent; margin-bottom: 7px; } .twomediax-carousel-wrapper .twomediax-carousel .post h3, .twomediax-carousel-wrapper .twomediax-carousel .post p { margin-bottom: 5px; text-align: left; } .twomediax-carousel-wrapper .twomediax-carousel .portfolio .categories { text-align: center; } .twomediax-carousel-wrapper .twomediax-carousel .gallery p { text-align: center; } .twomediax-carousel-wrapper .twomediax-carousel span.post-format { width: 30px; height: 30px; background-position: -285px -6px; display: none; } .twomediax-carousel-wrapper .twomediax-carousel span.post-format:hover { width: 30px; height: 30px; background-position: -285px -46px; } .twomediax-carousel-wrapper .headline { margin-top: 3px; } .twomediax-carousel-wrapper .jcarousel-container { margin: 0 0 0 0; max-width: 100%; } .twomediax-carousel-wrapper .jcarousel-container article.post { padding-top: 0px; } .twomediax-carousel-wrapper .jcarousel-clip { overflow: hidden; width: 100%; } .twomediax-carousel-wrapper .jcarousel-item { margin: 0 2px 0px 2px; } .twomediax-carousel-wrapper .jcarousel-next, .twomediax-carousel-wrapper .jcarousel-prev { background: #0081c7 url(images/nav-arrows.png) no-repeat 0 0; cursor: pointer; height: 21px; width: 21px; position: absolute; right: 23px; top: -25px; margin-left: 2px; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; } .twomediax-carousel-wrapper .jcarousel-next { background-position: -21px 0px; right: 0px; } .twomediax-carousel-wrapper .jcarousel-next:hover, .twomediax-carousel-wrapper .jcarousel-next:focus, .twomediax-carousel-wrapper .jcarousel-next:active, .twomediax-carousel-wrapper .jcarousel-prev:hover, .twomediax-carousel-wrapper .jcarousel-prev:focus, .twomediax-carousel-wrapper .jcarousel-prev:active { background-color: #1e2224; } .twomediax-carousel-wrapper .jcarousel-next:hover, .twomediax-carousel-wrapper .jcarousel-next:focus, .twomediax-carousel-wrapper .jcarousel-next:active { background-position: -21px -21px; } .twomediax-carousel-wrapper .jcarousel-prev:hover, .twomediax-carousel-wrapper .jcarousel-prev:focus, .twomediax-carousel-wrapper .jcarousel-prev:active { background-position: 0 -21px; } .twomediax-carousel-wrapper .jcarousel-next-disabled, .twomediax-carousel-wrapper .jcarousel-next-disabled:hover, .twomediax-carousel-wrapper .jcarousel-next-disabled:focus, .twomediax-carousel-wrapper .jcarousel-next-disabled:active, .twomediax-carousel-wrapper .jcarousel-prev-disabled, .twomediax-carousel-wrapper .jcarousel-prev-disabled:hover, .twomediax-carousel-wrapper .jcarousel-prev-disabled:focus, .twomediax-carousel-wrapper .jcarousel-prev-disabled:active { background-color: #EAECEF !important; cursor: auto !important; background-position: 0 0; } .twomediax-carousel-wrapper .jcarousel-next-disabled, .twomediax-carousel-wrapper .jcarousel-next-disabled:hover, .twomediax-carousel-wrapper .jcarousel-next-disabled:focus, .twomediax-carousel-wrapper .jcarousel-next-disabled:active { background-position: -21px -21px; } /********************* POSTS & CONTENT STYLES *********************/ /* Blog Columns styles -------------------------------------------------------------- */ .entry_info { display: none; width: 0; height: 0; /*width:40px; height:40px; position:absolute; padding:10px 0 0 10px; top:0; .entry_date{ font-size:13px; background-color:rgba(237, 237, 237, 0.5); text-align:center; color:#333; font-weight:bold; text-transform:uppercase; .day{color:#333; font-weight:100; line-height:2em; display:inline-block; width:39px;} .year{display:none; width:0px; height:0px;} }*/ } .page-status .item-status .date, .page-status .item-status .categories, .page-status .item-status .comments, .page-status .item-status .tags, .page-status .item-status .author { position: relative; } .page-status .item-status { font-weight: 100; } .page-status .item-status .date:before { position: absolute; font-family: FontAwesome; content: "\f073"; top: 0px; left: 0px; font-size: 14px; font-style: normal; } .page-status .item-status .categories:before { position: absolute; font-family: FontAwesome; content: "\f0e8"; top: 0px; left: 0px; font-size: 14px; font-style: normal; } .page-status .item-status .comments:before { position: absolute; font-family: FontAwesome; content: "\f086"; top: 0px; left: 0px; font-size: 14px; font-style: normal; } .page-status .item-status .tags:before { position: absolute; font-family: FontAwesome; content: "\f02c"; top: 0px; left: 0px; font-size: 14px; font-style: normal; } .page-status .item-status .author:before { position: absolute; font-family: FontAwesome; content: "\f007"; top: 0px; left: 0px; font-size: 14px; font-style: normal; } .page-status .item-status ul { float: left; width: 100%; text-align: left; } .page-status .item-status ul > li { float: left; color: #999; font-style: italic; padding-left: 5px; } .page-status { margin-bottom: 10px; float: left; width: 100%; } .page-status h5 { margin: 0px; } .page-status .item-status .author { padding-left: 20px; margin-right: 20px; } .page-status .item-status .tags { padding-left: 20px; margin-right: 20px; } .page-status .item-status .comments { padding-left: 22px; margin-right: 20px; } .page-status .item-status .categories { padding-left: 20px; margin-right: 20px; } .page-status .item-status .date { padding-left: 20px; margin-right: 20px; } .mask { padding: 0 10px 20px 10px; opacity: 1; position: relative; height: 100%; background-color: #f6f6f6; overflow: hidden; } .mask .icons-container { width: 100%; float: left; margin: 10px auto 0 auto; text-align: center; } .mask .icon { width: 20px; height: 20px; margin: 5px; } .mask .icon img { height: 24px; width: 24px; opacity: 0.3; } .mask .icon img:hover { opacity: 1; } .mask .page-title h3 { margin-top: 0; } .mask .page-excerpt { width: 100%; height: auto; float: left; text-align: center; margin-bottom: 0; } .mask .page-excerpt h4 { margin-top: 5px; } .mask .page-title h3, .mask .portfolio_details { padding: 0 10px; } .mask .project_url { display: none; width: 0px; height: 0px; } .mask .icon-first { left: -50px; } .mask .icon-second { right: -50px; } .mask .icon-third { top: -50px; } .mask-color { background-color: #efefef; -webkit-transition: background-color 0.3s ease-in-out 0s; -moz-transition: background-color 0.3s ease-in-out 0s; -o-transition: background-color 0.3s ease-in-out 0s; -ms-transition: background-color 0.3s ease-in-out 0s; transition: background-color 0.3s ease-in-out 0s; } .mask-color:focus, .mask-color:hover { opacity: 1; } .mask-color:blur { opacity: 1; } .columns { float: left; width: 100%; } .columns .page-title, .columns .page-title-no-thumbnail { width: 100%; margin-left: 0; text-align: center; } .columns .page-title h3, .columns .page-title-no-thumbnail h3 { text-transform: none; font-weight: bold; font-size: 15px; margin-bottom: 0px; } .columns .page-title h3 > a, .columns .page-title-no-thumbnail h3 > a { color: #333; } .columns .page-excerpt { width: 100%; margin-left: 0; text-align: center; } .columns .page-excerpt h3 { text-transform: none; font-weight: bold; font-size: 15px; margin-bottom: 0px; } .columns .page-excerpt h3 > a { color: #333; } .columns .container { /* float:left; width:100%; */ } .columns .article-footer { display: none; } .one-column .container { margin-bottom: 40px; } .one-column .portfolio_details .single-title { margin-bottom: 0; } .one-column .single-title { margin-bottom: 0; } .one-column .single-title > a { color: #333; } .one-column .single-title > a:hover { color: #999; } .one-column .box-image { overflow: hidden; } .one-column .box-icons { float: left; } .one-column .icons-container { width: 40px; height: 40px; background-color: rgba(237, 237, 237, 0.5); margin-right: 10px; } .one-column .icons-container .icon img { opacity: 0.5; } .one-column .page-excerpt { float: left; text-align: left; margin-bottom: 0px; } .one-column .entry_info { float: left; width: 40px; height: 40px; position: relative; padding: 10px 10px 0 0; } .one-column .entry_info .entry_date { font-size: 13px; background-color: rgba(237, 237, 237, 0.5); text-align: center; color: #333; font-weight: bold; text-transform: uppercase; } .one-column .entry_info .entry_date .day { color: #333; font-weight: 100; line-height: 0.1em; } .one-column .entry_info .entry_date .month { line-height: 1.4em; } .one-column .entry_info .entry_date .year { display: none; width: 0px; height: 0px; } .two-columns .mask, .three-columns .mask { padding-bottom: 10px; } .cat-links .post-categories .tag-links ul { float: left; list-style: none; margin: 0px; } .cat-links .post-categories li { float: left; border-right: solid 1px #CCC; padding-right: 5px; margin: 0 5px 5px 0px; } .cat-links .post-categories li:last-child { border-right: none; } .post_info ul li { float: left; border-right: solid 1px #CCC; padding-right: 5px; margin: 0 5px 5px 0px; } .tag-links ul li { float: left; border-right: solid 1px #CCC; padding-right: 5px; margin: 0 5px 5px 0px; } .tag-links ul li:last-child { border-right: none; } .cat-links .post-categories li a, .tag-links ul li a { text-decoration: none !important; } .tagcloud { width: 100%; display: inline-block; } .tagcloud ul { list-style: none; padding-left: 10px; float: right; width: auto; } .tagcloud a { padding: 5px; color: white !important; text-decoration: none; font-size: 12px !important; line-height: 2.7em; background-color: #333; height: 30px; width: 30px; margin: auto; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .tagcloud a:hover { color: white !important; background-color: #333; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; } .tagcloud li { float: left; padding: 0 20px 0 0px; margin: 10px 0 10px 0px; text-align: left; } .tagcloud li a { text-decoration: none; } .tagcloud li .current { color: white !important; } .footer .tagcloud a { color: white !important; } .columns .tagcloud { width: auto; display: inline-block; margin: 10px 20px 0px 0; background: #f6f6f6; border: 1px solid #efefef; padding: 5px; } .columns .tagcloud ul { list-style: none; padding-left: 10px; float: right; width: auto; height: auto; } .columns .tagcloud a { padding: 5px; text-decoration: none; font-size: 11px !important; line-height: 2.7em; color: #333333 !important; } .columns .tagcloud a:link { background: none !important; color: #333333 !important; } .columns .tagcloud a:visited { background: none !important; color: #333333 !important; } .columns .tagcloud a:hover, .columns .tagcloud a:focus { background: none !important; color: #999999 !important; } .columns .tagcloud a:active { background: none !important; color: #999999 !important; } .columns .tagcloud li { float: left; padding: 0; margin: 0px; text-align: left; } .columns .tagcloud li a { text-decoration: none; } .columns .tagcloud li .current { color: #333333 !important; } .columns .tagcloud .title { padding-top: 3px; font-weight: bold; float: left; } .image_placeholder { line-height: 0; } .attachment-twomediax-thumb-600 , .attachment-twomediax-thumb-300 , .attachment-twomediax-thumb-150 , .wp-post-image , .post-thumb img { width: 100%; height: auto; } .attachment-twomediax-thumb-600 > div, .attachment-twomediax-thumb-300 > div, .attachment-twomediax-thumb-150 > div, .wp-post-image > div, .post-thumb img > div { top: 30%; } .attachment-twomediax-thumb-600 > div .title, .attachment-twomediax-thumb-300 > div .title, .attachment-twomediax-thumb-150 > div .title, .wp-post-image > div .title, .post-thumb img > div .title { display: none; } .twomediax-carousel-wrapper > li , .twomediax-carousel-wrapper .jcarousel-item { width: 160px; } .ssp_post_image img { width: 160px !important; height: 90px !important; } .easy-nav { visibility: hidden; height: 0px; } .ourclients_container .ourclients { width: 160px !important; height: auto; margin-right:18px; } .ourclients_container .ourclients img { opacity: 1; filter: grayscale(0); -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -ms-filter: grayscale(0); -o-filter: grayscale(0); } .ourclients_container .ourclients img:hover { opacity: 0.5; filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); -webkit-transition: -webkit-filter 0.3s ease-in-out 0s; -moz-transition: -moz-filter 0.3s ease-in-out 0s; -o-transition: -o-filter 0.3s ease-in-out 0s; -ms-transition: -ms-filter 0.3s ease-in-out 0s; transition: filter 0.3s ease-in-out 0s; } .ourclients_container .jcarousel-next, .ourclients_container .jcarousel-prev { top: -25px !important; } .ourclients_container .flex-direction-nav a { top: 60%; } .insetshadow { -moz-box-shadow: inset 0 0 5px -1px #000; -webkit-box-shadow: inset 0 0 5px -1px black; box-shadow: inset 0 0 5px -1px black; } /* MENU ITEMS */ .sidebar-left .widget_nav_menu li { border-left: 2px solid #efefef; padding-left: 20px; margin-bottom: 2px !important; } .sidebar-left .widget_nav_menu .current-menu-item { border-left: 2px solid #333; font-weight: bold !important; background-color: #f6f6f6; } .sidebar-right .widget_nav_menu li { border-right: 2px solid #efefef; border-left: none; padding-left: 20px; margin-bottom: 2px !important; } .sidebar-right .widget_nav_menu .current-menu-item { border-right: 2px solid #333; font-weight: bold !important; background-color: #f6f6f6; } blockquote:before { position: absolute; font-family: FontAwesome; content: "\f10e"; top: -3px; left: 25px; font-size: 20px; } blockquote { position: relative; margin: 20px 0 20px 20px; padding: 0px 10px 0px 60px; clear: both; font-style: italic; line-height: 1.5; font-family: inherit; } blockquote p { font-size: 16px !important; } .testimonials { float: left; } .testimonials .flexslider { margin: 20px 0 0 1px; border: none; float: left; width: auto; } .testimonials .testimonial_container blockquote:before { content: none; } .testimonials .testimonial_container blockquote { margin: 0px 1px 10px 0px; background-color: #f6f6f6; padding: 10px; position: relative; font-size: 13px; font-family: inherit; } .testimonials .testimonial_container blockquote .arrowbubble { position: absolute; bottom: -16px; left: 58px; background: url(images/arrowbubble.png) no-repeat 0px 0px; width: 18px; height: 16px; display: block; } .testimonials .testimonial_container .person_image_avatar { width: 50px !important; float: left; } .testimonials .testimonial_container .person_image_avatar img { width: 50px !important; height: auto !important; } .testimonials .testimonial_container .testimonial_info { padding-left: 25px; } /* FLICKR */ .flickr_thumbs { margin-bottom: 20px; float: left; } .flickr_thumbs li { float: left; margin: 0 5px 5px 0; width: 50px; height: 50px; } /* TWITTER */ .rotatingtweets { width: 100%; float: left; } .rotatingtweets .flexslider { width: auto; float: none; margin: 2px 0 0 0; } .rotatingtweets p { margin: 10px 0; } .rotatingtweets .rtw_main { line-height: 32px; min-height: 40px; font-size: 30px; text-align: center; } .rotatingtweets .rtw_main .rotatingtweet { position: relative; width: 100%; height: auto; min-height: 40px; } /* KNOB */ .knob_container .knob { font-family: inherit !important; font-weight: normal !important; opacity: 0.5 !important; } /* ACCORDION */ .ui-accordion { margin-top: 0.5em; padding: 0px; background: none; border-width: 0px; /********************* LIST STYLES *********************/ } .ui-accordion li { font-size: 13px; } .ui-accordion .accordion_container { padding: 10px; border: 1px solid #efefef; background: #fff; line-height: 1.7; } .ui-accordion .accordion_title { font-size: 11px; font-weight: bold; color: #333; } .ui-accordion .ui-state-default { font-weight: bold; background: #efefef url(images/trigger_down.png) no-repeat 95% 13px; } .ui-accordion .ui-state-active { font-weight: bold; background: white url(images/trigger_right.png) no-repeat 95% 13px; } .ui-accordion .ui-accordion-header { padding: 10px; margin: 0 0 2px 0; border: 1px solid #efefef; } .ui-accordion .list-disc { list-style: disc; list-style-position: inside; padding-left: 20px; } .ui-accordion .list-square { list-style-type: square; list-style-position: inside; padding-left: 20px; } .ui-accordion .list-roman { list-style-type: upper-roman; list-style-position: inside; padding-left: 0px; } .ui-accordion .list-alpha { list-style-type: lower-alpha; list-style-position: inside; padding-left: 0px; } .ui-accordion .list-number { list-style: decimal; list-style-position: inside; padding-left: 0px; } .ui-accordion .list-number-zero { list-style: decimal-leading-zero; list-style-position: inside; padding-left: 0px; } .ui-accordion .list-red-x li { list-style: none !important; padding-left: 20px !important; position: relative; } .ui-accordion .list-red-x li:before { position: absolute; font-family: FontAwesome; content: "\f057"; top: 1px; left: 0px; color: #ff000f; } .ui-accordion .list-x li { list-style: none; padding-left: 20px; position: relative; } .ui-accordion .list-x li:before { position: absolute; font-family: FontAwesome; content: "\f00d"; top: 1px; left: 0px; } .ui-accordion .list-ok li { list-style: none; position: relative; padding-left: 20px; } .ui-accordion .list-ok li:before { position: absolute; font-family: FontAwesome; content: "\f00c"; top: 1px; left: 0px; } /* jQuery Toggle */ .toggle { float: left; width: 100%; /*color settings*/ /********************* LIST STYLES *********************/ } .toggle h2.trigger { padding: 10px; margin: 0 0 2px 0; font-size: 11px; font-weight: bold; } .toggle h2.trigger span { text-decoration: none; display: block; background: url(images/trigger_right.png); background-repeat: no-repeat; background-position: 99% 4px; padding-left: 0px; cursor: pointer; } .toggle h2.active span { background: url(images/trigger_down.png) no-repeat 99% 6px !important; color: #333; } .toggle h2.trigger:hover { background: #fff; } .toggle .toggle_container { margin: 0 0 4px 0; padding: 10px; overflow: hidden; clear: both; background: #fff; border: 1px solid #efefef; } .toggle .toggle_container .block { padding: 0px; } .toggle .toggle_container .block p { padding: 5px 0; margin: 5px 0; } .toggle h2.trigger { background: #f6f6f6; border: 1px solid #efefef; } .toggle h2.trigger span { color: #333; } .toggle h2.trigger a:hover { color: #454545; } .toggle h2.active { background: #f6f6f6 !important; } .toggle .list-disc { list-style: disc; list-style-position: inside; padding-left: 20px; } .toggle .list-square { list-style-type: square; list-style-position: inside; padding-left: 20px; } .toggle .list-roman { list-style-type: upper-roman; list-style-position: inside; padding-left: 0px; } .toggle .list-alpha { list-style-type: lower-alpha; list-style-position: inside; padding-left: 0px; } .toggle .list-number { list-style: decimal; list-style-position: inside; padding-left: 0px; } .toggle .list-number-zero { list-style: decimal-leading-zero; list-style-position: inside; padding-left: 0px; } .toggle .list-red-x li { list-style: none !important; padding-left: 20px !important; position: relative; } .toggle .list-red-x li:before { position: absolute; font-family: FontAwesome; content: "\f057"; top: 1px; left: 0px; color: #ff000f; } .toggle .list-x li { list-style: none; padding-left: 20px; position: relative; } .toggle .list-x li:before { position: absolute; font-family: FontAwesome; content: "\f00d"; top: 1px; left: 0px; } .toggle .list-ok li { list-style: none; position: relative; padding-left: 20px; } .toggle .list-ok li:before { position: absolute; font-family: FontAwesome; content: "\f00c"; top: 1px; left: 0px; } /* Price Table */ #pricing-full { margin: 10px 0 20px 0; } #pricing-full ul { margin: 0; } #pricing-full .column-box { overflow: hidden; float: left; min-height: 20px; width: 100%; padding: 10px; background-color: #F7F5F5; } #pricing-full .column { margin-left: 1px; float: left; background-color: #fff; text-align: center; min-width: 100%; } #pricing-full .column-big { margin-left: 1px; float: left; background-color: #fff; text-align: center; min-width: 100%; } #pricing-full .spacer { margin: 15px 0; } #pricing-full .small { font-size: 16px; } #pricing-full .grey { background-color: #F8F8F8; } #pricing-full .color { color: #333; } #pricing-full .b-color { background-color: #efefef; color: #fff; } #pricing-full .o-color { background-color: rgba(100, 100, 100, 0.1); } #pricing-full .title { font-size: 18px; font-weight: 100; padding: 15px 0; border-bottom: solid 1px #efefef; } #pricing-full .price { line-height: 1; font-size: 40px; font-style: italic; font-weight: 100; padding: 15px 0; background-color: #F8F8F8; border-bottom: solid 1px #efefef; font-family: Georgia, "Times New Roman", Times, serif; } #pricing-full .description { font-style: italic; font-weight: 100; padding: 15px 0; border-bottom: solid 1px #efefef; } #pricing-full .data { font-weight: 100; padding: 15px 0; border-bottom: solid 1px #efefef; } /* Contact Form */ #content #box-form .twomediax-button-container { float: right; margin: 5px 0; } #content #box-form input.email:required, #content #box-form input.author:required { background: white url(images/x.svg) no-repeat; background-position: 98%; } #content #box-form input.email:valid, #content #box-form input.author:valid { background: white url(images/ok.svg) no-repeat; background-position: 98%; } #content #box-form .email, #content #box-form .author { height: 30px; width: 250px; border: solid 1px #efefef; font-family: inherit; padding: 5px; } #content #box-form .form-big { height: 100px; width: 99%; max-width: 99%; border: solid 1px #efefef; font-family: inherit; padding: 5px; background-color: #fff; } #content #box-form .align-button { text-align: right; width: 100%; margin-top: 20px; } #content #box-form .form-contact-error { color: #333; } #content #box-form .button { margin-top: 10px; } #content .contact-info { width: 100%; float: left; margin-bottom: 40px; } #content .contact-info h4 { margin: 0 0 5px 0; } #content .contact-info .company-title { font-weight: bold; } #content .contact-spacer { /* background-repeat: repeat; float: left; background-position: left top; height: 1px; margin:30px 0; background-color: #efefef;*/ width: 0px; height: 0px; visibility: none; } /********************* FOOTER/STICKYBAR STYLES *********************/ #inner-stickybar { border-bottom: 3px solid #333; background-color: #363f48; } .stickybar { width: 100%; margin: 0 auto; position: relative; z-index: 99999; } .stickybar .close_stickybar { position: absolute; bottom: -20px; right: 20px; width: 20px; height: 20px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background-color: #363f48; } .stickybar .close_stickybar:before { content: ''; width: 20px; height: 20px; display: block; position: absolute; top: 0; font-family: FontAwesome; content: "\f067"; font-weight: 100; color: #fff; padding-left: 6px; font-size: 10px; } .stickybar .active:before { content: ''; width: 20px; height: 20px; display: block; position: absolute; top: 0; font-family: FontAwesome; content: "\f068"; font-weight: 100; color: #fff; padding-left: 6px; font-size: 10px; } #inner-footer { padding: 10px 0; } .footer-breadcrumb-menu { border-bottom: 2px solid #fff; } .footer, .stickybar { color: #f6f6f6; } .footer .inner-wrapper, .stickybar .inner-wrapper { background-color: #333; } .footer p, .stickybar p { color: #f6f6f6; } .footer .widget_recent_entries ul li, .stickybar .widget_recent_entries ul li { border-top: 1px dashed rgba(255, 255, 255, 0.35); } .footer .widget_archive ul li, .stickybar .widget_archive ul li { border-top: 1px dashed rgba(255, 255, 255, 0.35); } .footer .widget_categories ul li, .stickybar .widget_categories ul li { border-top: 1px dashed rgba(255, 255, 255, 0.35); } .footer #recentcomments li, .stickybar #recentcomments li { border-top: 1px dashed rgba(255, 255, 255, 0.35); } .footer .testimonials .testimonial_container blockquote, .stickybar .testimonials .testimonial_container blockquote { background-color: #3c3c3c !important; } .footer .testimonials .testimonial_container blockquote .arrowbubble, .stickybar .testimonials .testimonial_container blockquote .arrowbubble { background: url(images/arrowbubble_footer.png) no-repeat 0px 0px !important; } .inner-footer { padding: 20px 0 20px 0 !important; } /********************* FOOTER STYLES *********************/ .footer a, .footer a:visited { color: #efefef; } .footer .widget_wysija_cont .wysija-input { background-color: rgba(125, 125, 125, 0.2); } .footer .footer-contact-bar-wrapper { background-color: #151313 ; min-height: 46px; } .footer .footer-contact-bar-wrapper .footer-contact-bar { height: auto; color: #f6f6f6; font-size: 13px; padding: 0; } .footer .footer-contact-bar-wrapper .company-title { display: none; height: 0px; } .footer .footer-contact-bar-wrapper .address { float: left; margin-top: 10px; text-align: center; width: 100%; } .footer .footer-contact-bar-wrapper .numbers { float: left; margin-top: 10px; text-align: center; width: 100%; } .footer .footer-contact-bar-wrapper .contact-card-links { float: left; text-align: center; margin-top: 10px; width: 100%; } .footer .footer-contact-bar-wrapper .contact-spacer { display: none; height: 0px; } .footer .logo { width: 100%; text-align: center; margin-top: 5px; } .footer .contact-info { float: left; width: 100%; } .footer a { text-decoration: none; } .footer #footer-bottom-bar { color: #333; background-color: #fff; } .footer #footer-bottom-bar #site-info { height: auto; } .footer #footer-bottom-bar #site-info .info { float: left; width: auto; text-align: left; } .footer #footer-bottom-bar #site-info .info a { color: #333; } .footer #footer-bottom-bar #site-info h5 { margin: 1.0em 0; } .quicklink { display: inline-block; height: 40px; width: 40px; background: url(images/detail-icon.png) no-repeat 0px 0px; } .quicklink_active { display: inline-block; height: 40px; width: 40px; background: url(images/detail-icon.png) no-repeat 0px -40px !important; } .quicklink_container { line-height: 1.5em; position: relative; width: 100%; height: auto; } .banner-box .tm-custom-button, .banner-box2 .tm-custom-button { width: 80%; float: none; padding-left: 0px; padding-right: 0px; } .footer .socials_container { text-align: left !important; } /* WPML */ #wpml_flags { float: right; } .header-shop #wpml_flags { padding-top: 10px; } #wpml_flags ul li { float: left; margin-right: 5px; } .flags { float: left; margin: 0px 0 0 10px; } .flags > li > a { opacity: 0.5; padding: 0 5px; padding-top: 14px !important; } .flags > li > a:hover, .flags > li > a:focus { text-decoration: none; border-bottom: none !important; opacity: 1; } /*NEWSLETTER*/ .smalldescription { color: #666; width: 100%; float: left; } .smallnote { color: #999; width: 100%; font-size: 11px; float: left; margin: 20px 0 0 0; } .emailinput input { padding: 5px; border: none !important; font-family: inherit; color: #999; font-weight: 100; max-width: 180px; } .emailinput .twomediax-button { background-color: white !important; } .emailinput .twomediax-button-container { border: solid 1px #dadada; background-color: white !important; } .emailinput .twomediax-button-container:hover { opacity: 1; } .emailinput .twomediax-button-container .twomediax-button { padding: 10px; } .emailinput .twomediax-button-container .twomediax-button-icon a { text-decoration: none; } .success { border: solid 1px #cccccc !important; background-color: white !important; padding: 5px !important; color: #333333 !important; text-align: center !important; width: 95%; float: left; } .error { border: solid 1px #e10000 !important; background-color: white !important; padding: 5px !important; margin-top: 20px; color: #e10000 !important; text-align: center !important; width: 95%; float: left; } /*WYSIJA*/ .widget_wysija_cont { font-family: inherit; } .widget_wysija_cont .wysija-input { padding: 10px; font-family: inherit; color: #999; border: none; font-weight: 100; width: 70%; background-color: #efefef; } .widget_wysija_cont .wysija-submit { margin-top: 0px; } .widget_wysija_cont .formError .formErrorContent { border: none; font-family: inherit; padding: 0px 10px; } .widget_wysija_cont .updated, .widget_wysija_cont .login .message { border: #efefef; font-family: inherit; background-color: #f6f6f6 !important; } /*Transition FX's*/ .scale-fx { transition: all 0.2s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; } .scale-fx:hover, .scale-fx:focus { -webkit-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; } .opacity-fx { transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; } .opacity-fx:hover, .opacity-fx:focus { opacity: 0.5; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; } /*Flex Slider Control*/ .flex-control-nav li { margin: 0 3px !important; } .flex-control-paging li a { width: 12px !important; height: 4px !important; box-shadow: none !important; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; -o-border-radius: 0 !important; border-radius: 0 !important; } .flex-control-paging li a.flex-active { background-color: #333333 !important; } /*Showbiz Custom CSS*/ .showbiz ul li { padding-left: 0; } .showbiz .detailholder del { font-size: 18px; font-weight: bold; color: #999; } .showbiz .detailholder ins { color: #333; font-weight: bold; font-size: 25px; text-decoration: none; } .ph-wrapper { margin-bottom: 20px; } /* * jQuery FlexSlider v2.0 * http://www.woothemes.com/flexslider/ * * Copyright 2012 WooThemes * Free to use under the GPLv2 license. * http://www.gnu.org/licenses/gpl-2.0.html * * Contributing author: Tyler Smith (@mbmufffin) */ /* Browser Resets */ .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus { outline: none; } .slides, .flex-control-nav, .flex-direction-nav { margin: 0px; padding: 0; list-style: none; } /* FlexSlider Necessary Styles *********************************/ .flexslider { margin: 0; padding: 0; } .flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img { width: 100%; height: auto; cursor: pointer; display: block; } .flexslider .slides img:hover { border-color: #efefef; } .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 *********************************/ .flexslider { margin: 5px 0 0 0; position: relative; zoom: 1; /* -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); */ } .flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; } .loading .flex-viewport { max-height: 300px; } .flexslider .slides { zoom: 1; } .carousel li { margin-right: 5px; } /* Direction Nav */ .flex-direction-nav { *height: 0; } .flex-direction-nav a { background-color: #333; height: 30px; width: 30px; margin: auto; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; margin: -20px 0 0; display: none; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px; opacity: 1; -webkit-transition: all .3s ease; } .flex-direction-nav .flex-next { background-position: 100% 0; right: -15px; } .flex-direction-nav .flex-prev { left: -15px; } .flex-direction-nav .flex-prev { background-image: url(images/plus-icon.png); } .flex-direction-nav .flex-next { background-image: url(images/minus-icon.png); } .flexslider:hover .flex-next { opacity: 0.8; display: block; } .flexslider:hover .flex-prev { opacity: 0.8; display: block; } .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; } .flex-direction-nav .flex-disabled { opacity: 0 !important; filter: alpha(opacity=0); cursor: default; } /* Control Nav */ /*.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}*/ .flex-control-nav { width: 100%; position: relative; margin-top: 20px; margin-bottom: 10px; text-align: center; } .flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1; *display: inline; } .flex-control-paging li a { width: 11px; height: 11px; display: block; background: #666; background: rgba(0, 0, 0, 0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); } .flex-control-paging li a:hover { background: #333; background: rgba(0, 0, 0, 0.7); } .flex-control-paging li a.flex-active { background: #000; background: rgba(0, 0, 0, 0.9); cursor: default; } .flex-control-thumbs { margin: 5px 0 0; position: static; overflow: hidden; } .flex-control-thumbs li { width: 25%; float: left; margin: 0; } .flex-control-thumbs img { width: 100%; display: block; opacity: 1; cursor: pointer; } .flex-control-thumbs img:hover { opacity: 1; } .flex-control-thumbs .flex-active { opacity: 1; cursor: default; } @media screen and (max-width: 860px) { .flex-direction-nav .flex-prev { opacity: 1; left: 0; } .flex-direction-nav .flex-next { opacity: 1; right: 0; } } /* @mixin rounded($radius: 4px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } @mixin css-gradient($from: #dfdfdf, $to: #f8f8f8) { background-color: $to; background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to)); background-image: -webkit-linear-gradient(top, $from, $to); background-image: -moz-linear-gradient(top, $from, $to); background-image: -o-linear-gradient(top, $from, $to); background-image: linear-gradient(to bottom, $from, $to); } */ /****************************************************************************/ .blue-button, .blue-button:visited { border: 1px solid #196896; border-top-color: #1e7ab0; border-left-color: #1e7ab0; padding: 10px; color: white !important; display: inline-block; font-size: 12px; font-weight: bold; text-decoration: none; text-shadow: 0 1px rgba(0, 0, 0, 0.75); cursor: pointer; /*line-height: 21px;*/ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #1f80b9; background-image: -webkit-gradient(linear, left top, left bottom, from(#238fcf), to(#1f80b9)); background-image: -webkit-linear-gradient(top, #238fcf, #1f80b9); background-image: -moz-linear-gradient(top, #238fcf, #1f80b9); background-image: -o-linear-gradient(top, #238fcf, #1f80b9); background-image: linear-gradient(to bottom, #238fcf, #1f80b9); } .blue-button:hover, .blue-button:focus, .blue-button:visited:hover, .blue-button:visited:focus { color: #fff; border: 1px solid #196896; border-top-color: #145378; border-left-color: #145378; background-color: #1c71a3; background-image: -webkit-gradient(linear, left top, left bottom, from(#1f80b9), to(#1c71a3)); background-image: -webkit-linear-gradient(top, #1f80b9, #1c71a3); background-image: -moz-linear-gradient(top, #1f80b9, #1c71a3); background-image: -o-linear-gradient(top, #1f80b9, #1c71a3); background-image: linear-gradient(to bottom, #1f80b9, #1c71a3); } .blue-button:active, .blue-button:visited:active { background-color: #238fcf; background-image: -webkit-gradient(linear, left top, left bottom, from(#1f80b9), to(#238fcf)); background-image: -webkit-linear-gradient(top, #1f80b9, #238fcf); background-image: -moz-linear-gradient(top, #1f80b9, #238fcf); background-image: -o-linear-gradient(top, #1f80b9, #238fcf); background-image: linear-gradient(to bottom, #1f80b9, #238fcf); } /****************************************************************************/ .bluenavy-button, .bluenavy-button:visited { border: 1px solid #112d3d; border-top-color: #183f55; border-left-color: #183f55; padding: 10px; color: white !important; display: inline-block; font-size: 12px; font-weight: bold; text-decoration: none; text-shadow: 0 1px rgba(0, 0, 0, 0.75); cursor: pointer; /*line-height: 21px;*/ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #1a445d; background-image: -webkit-gradient(linear, left top, left bottom, from(#205371), to(#1a445d)); background-image: -webkit-linear-gradient(top, #205371, #1a445d); background-image: -moz-linear-gradient(top, #205371, #1a445d); background-image: -o-linear-gradient(top, #205371, #1a445d); background-image: linear-gradient(to bottom, #205371, #1a445d); } .bluenavy-button:hover, .bluenavy-button:focus, .bluenavy-button:visited:hover, .bluenavy-button:visited:focus { color: #fff; border: 1px solid #112d3d; border-top-color: #091922; border-left-color: #091922; background-color: #153649; background-image: -webkit-gradient(linear, left top, left bottom, from(#1a445d), to(#153649)); background-image: -webkit-linear-gradient(top, #1a445d, #153649); background-image: -moz-linear-gradient(top, #1a445d, #153649); background-image: -o-linear-gradient(top, #1a445d, #153649); background-image: linear-gradient(to bottom, #1a445d, #153649); } .bluenavy-button:active, .bluenavy-button:visited:active { background-color: #205371; background-image: -webkit-gradient(linear, left top, left bottom, from(#1a445d), to(#205371)); background-image: -webkit-linear-gradient(top, #1a445d, #205371); background-image: -moz-linear-gradient(top, #1a445d, #205371); background-image: -o-linear-gradient(top, #1a445d, #205371); background-image: linear-gradient(to bottom, #1a445d, #205371); } /****************************************************************************/ .aquamarine-button, .aquamarine-button:visited { border: 1px solid #10806a; border-top-color: #149b80; border-left-color: #149b80; padding: 10px; color: white !important; display: inline-block; font-size: 12px; font-weight: bold; text-decoration: none; text-shadow: 0 1px rgba(0, 0, 0, 0.75); cursor: pointer; /*line-height: 21px;*/ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #15a487; background-image: -webkit-gradient(linear, left top, left bottom, from(#18bb9a), to(#15a487)); background-image: -webkit-linear-gradient(top, #18bb9a, #15a487); background-image: -moz-linear-gradient(top, #18bb9a, #15a487); background-image: -o-linear-gradient(top, #18bb9a, #15a487); background-image: linear-gradient(to bottom, #18bb9a, #15a487); } .aquamarine-button:hover, .aquamarine-button:focus, .aquamarine-button:visited:hover, .aquamarine-button:visited:focus { color: #fff; border: 1px solid #10806a; border-top-color: #0c6150; border-left-color: #0c6150; background-color: #128e75; background-image: -webkit-gradient(linear, left top, left bottom, from(#15a487), to(#128e75)); background-image: -webkit-linear-gradient(top, #15a487, #128e75); background-image: -moz-linear-gradient(top, #15a487, #128e75); background-image: -o-linear-gradient(top, #15a487, #128e75); background-image: linear-gradient(to bottom, #15a487, #128e75); } .aquamarine-button:active, .aquamarine-button:visited:active { background-color: #18bb9a; background-image: -webkit-gradient(linear, left top, left bottom, from(#15a487), to(#18bb9a)); background-image: -webkit-linear-gradient(top, #15a487, #18bb9a); background-image: -moz-linear-gradient(top, #15a487, #18bb9a); background-image: -o-linear-gradient(top, #15a487, #18bb9a); background-image: linear-gradient(to bottom, #15a487, #18bb9a); } /***************************************************************************/ .black-button, .black-button:visited { border: 1px solid #121212; border-top-color: #212121; border-left-color: #212121; padding: 10px; color: white !important; display: inline-block; font-size: 12px; font-weight: bold; text-decoration: none; text-shadow: 0 1px rgba(0, 0, 0, 0.75); cursor: pointer; /*line-height: 21px;*/ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #262626; background-image: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#262626)); background-image: -webkit-linear-gradient(top, #333333, #262626); background-image: -moz-linear-gradient(top, #333333, #262626); background-image: -o-linear-gradient(top, #333333, #262626); background-image: linear-gradient(to bottom, #333333, #262626); } .black-button:hover, .black-button:focus, .black-button:visited:hover, .black-button:visited:focus { color: #fff; border: 1px solid #121212; border-top-color: black; border-left-color: black; background-color: #1a1a1a; background-image: -webkit-gradient(linear, left top, left bottom, from(#262626), to(#1a1a1a)); background-image: -webkit-linear-gradient(top, #262626, #1a1a1a); background-image: -moz-linear-gradient(top, #262626, #1a1a1a); background-image: -o-linear-gradient(top, #262626, #1a1a1a); background-image: linear-gradient(to bottom, #262626, #1a1a1a); } .black-button:active, .black-button:visited:active { background-color: #333333; background-image: -webkit-gradient(linear, left top, left bottom, from(#262626), to(#333333)); background-image: -webkit-linear-gradient(top, #262626, #333333); background-image: -moz-linear-gradient(top, #262626, #333333); background-image: -o-linear-gradient(top, #262626, #333333); background-image: linear-gradient(to bottom, #262626, #333333); } /***************************************************************************/ .brown-button, .brown-button:visited { border: 1px solid #4a381d; border-top-color: #604826; border-left-color: #604826; padding: 10px; color: white !important; display: inline-block; font-size: 12px; font-weight: bold; text-decoration: none; text-shadow: 0 1px rgba(0, 0, 0, 0.75); cursor: pointer; /*line-height: 21px;*/ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #684d29; background-image: -webkit-gradient(linear, left top, left bottom, from(#7a5b30), to(#684d29)); background-image: -webkit-linear-gradient(top, #7a5b30, #684d29); background-image: -moz-linear-gradient(top, #7a5b30, #684d29); background-image: -o-linear-gradient(top, #7a5b30, #684d29); background-image: linear-gradient(to bottom, #7a5b30, #684d29); } .brown-button:hover, .brown-button:focus, .brown-button:visited:hover, .brown-button:visited:focus { color: #fff; border: 1px solid #4a381d; border-top-color: #312413; border-left-color: #312413; background-color: #554022; background-image: -webkit-gradient(linear, left top, left bottom, from(#684d29), to(#554022)); background-image: -webkit-linear-gradient(top, #684d29, #554022); background-image: -moz-linear-gradient(top, #684d29, #554022); background-image: -o-linear-gradient(top, #684d29, #554022); background-image: linear-gradient(to bottom, #684d29, #554022); } .brown-button:active, .brown-button:visited:active { background-color: #7a5b30; background-image: -webkit-gradient(linear, left top, left bottom, from(#684d29), to(#7a5b30)); background-image: -webkit-linear-gradient(top, #684d29, #7a5b30); background-image: -moz-linear-gradient(top, #684d29, #7a5b30); background-image: -o-linear-gradient(top, #684d29, #7a5b30); background-image: linear-gradient(to bottom, #684d29, #7a5b30); } /***************************************************************************/ .green-button, .green-button:visited { border: 1px solid #537928; border-top-color: #63902f; border-left-color: #63902f; padding: 10px; color: white !important; display: inline-block; font-size: 12px; font-weight: bold; text-decoration: none; text-shadow: 0 1px rgba(0, 0, 0, 0.75); cursor: pointer; /*line-height: 21px;*/ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #689832; background-image: -webkit-gradient(linear, left top, left bottom, from(#75ab38), to(#689832)); background-image: -webkit-linear-gradient(top, #75ab38, #689832); background-image: -moz-linear-gradient(top, #75ab38, #689832); background-image: -o-linear-gradient(top, #75ab38, #689832); background-image: linear-gradient(to bottom, #75ab38, #689832); } .green-button:hover, .green-button:focus, .green-button:visited:hover, .green-button:visited:focus { color: #fff; border: 1px solid #537928; border-top-color: #405e1f; border-left-color: #405e1f; background-color: #5b852b; background-image: -webkit-gradient(linear, left top, left bottom, from(#689832), to(#5b852b)); background-image: -webkit-linear-gradient(top, #689832, #5b852b); background-image: -moz-linear-gradient(top, #689832, #5b852b); background-image: -o-linear-gradient(top, #689832, #5b852b); background-image: linear-gradient(to bottom, #689832, #5b852b); } .green-button:active, .green-button:visited:active { background-color: #75ab38; background-image: -webkit-gradient(linear, left top, left bottom, from(#689832), to(#75ab38)); background-image: -webkit-linear-gradient(top, #689832, #75ab38); background-image: -moz-linear-gradient(top, #689832, #75ab38); background-image: -o-linear-gradient(top, #689832, #75ab38); background-image: linear-gradient(to bottom, #689832, #75ab38); } /***************************************************************************/ .grey-button, .grey-button:visited { border: 1px solid #9a9a9a; border-top-color: darkgrey; border-left-color: darkgrey; padding: 10px; color: white !important; display: inline-block; font-size: 12px; font-weight: bold; text-decoration: none; text-shadow: 0 1px rgba(0, 0, 0, 0.75); cursor: pointer; /*line-height: 21px;*/ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #aeaeae; background-image: -webkit-gradient(linear, left top, left bottom, from(#bbbbbb), to(#aeaeae)); background-image: -webkit-linear-gradient(top, #bbbbbb, #aeaeae); background-image: -moz-linear-gradient(top, #bbbbbb, #aeaeae); background-image: -o-linear-gradient(top, #bbbbbb, #aeaeae); background-image: linear-gradient(to bottom, #bbbbbb, #aeaeae); } .grey-button:hover, .grey-button:focus, .grey-button:visited:hover, .grey-button:visited:focus { color: #fff; border: 1px solid #9a9a9a; border-top-color: #888888; border-left-color: #888888; background-color: #a2a2a2; background-image: -webkit-gradient(linear, left top, left bottom, from(#aeaeae), to(#a2a2a2)); background-image: -webkit-linear-gradient(top, #aeaeae, #a2a2a2); background-image: -moz-linear-gradient(top, #aeaeae, #a2a2a2); background-image: -o-linear-gradient(top, #aeaeae, #a2a2a2); background-image: linear-gradient(to bottom, #aeaeae, #a2a2a2); } .grey-button:active, .grey-button:visited:active { background-color: #bbbbbb; background-image: -webkit-gradient(linear, left top, left bottom, from(#aeaeae), to(#bbbbbb)); background-image: -webkit-linear-gradient(top, #aeaeae, #bbbbbb); background-image: -moz-linear-gradient(top, #aeaeae, #bbbbbb); background-image: -o-linear-gradient(top, #aeaeae, #bbbbbb); background-image: linear-gradient(to bottom, #aeaeae, #bbbbbb); } /***************************************************************************/ .orange-button, .orange-button:visited { border: 1px solid #e92605; border-top-color: #fa3412; border-left-color: #fa3412; padding: 10px; color: white !important; display: inline-block; font-size: 12px; font-weight: bold; text-decoration: none; text-shadow: 0 1px rgba(0, 0, 0, 0.75); cursor: pointer; /*line-height: 21px;*/ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #fb3d1c; background-image: -webkit-gradient(linear, left top, left bottom, from(#fb5235), to(#fb3d1c)); background-image: -webkit-linear-gradient(top, #fb5235, #fb3d1c); background-image: -moz-linear-gradient(top, #fb5235, #fb3d1c); background-image: -o-linear-gradient(top, #fb5235, #fb3d1c); background-image: linear-gradient(to bottom, #fb5235, #fb3d1c); } .orange-button:hover, .orange-button:focus, .orange-button:visited:hover, .orange-button:visited:focus { color: #fff; border: 1px solid #e92605; border-top-color: #c62004; border-left-color: #c62004; background-color: #f82905; background-image: -webkit-gradient(linear, left top, left bottom, from(#fb3d1c), to(#f82905)); background-image: -webkit-linear-gradient(top, #fb3d1c, #f82905); background-image: -moz-linear-gradient(top, #fb3d1c, #f82905); background-image: -o-linear-gradient(top, #fb3d1c, #f82905); background-image: linear-gradient(to bottom, #fb3d1c, #f82905); } .orange-button:active, .orange-button:visited:active { background-color: #fb5235; background-image: -webkit-gradient(linear, left top, left bottom, from(#fb3d1c), to(#fb5235)); background-image: -webkit-linear-gradient(top, #fb3d1c, #fb5235); background-image: -moz-linear-gradient(top, #fb3d1c, #fb5235); background-image: -o-linear-gradient(top, #fb3d1c, #fb5235); background-image: linear-gradient(to bottom, #fb3d1c, #fb5235); } /***************************************************************************/ .pink-button, .pink-button:visited { border: 1px solid #82217c; border-top-color: #9a2794; border-left-color: #9a2794; padding: 10px; color: white !important; display: inline-block; font-size: 12px; font-weight: bold; text-decoration: none; text-shadow: 0 1px rgba(0, 0, 0, 0.75); cursor: pointer; /*line-height: 21px;*/ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #a3299c; background-image: -webkit-gradient(linear, left top, left bottom, from(#b72eaf), to(#a3299c)); background-image: -webkit-linear-gradient(top, #b72eaf, #a3299c); background-image: -moz-linear-gradient(top, #b72eaf, #a3299c); background-image: -o-linear-gradient(top, #b72eaf, #a3299c); background-image: linear-gradient(to bottom, #b72eaf, #a3299c); } .pink-button:hover, .pink-button:focus, .pink-button:visited:hover, .pink-button:visited:focus { color: #fff; border: 1px solid #82217c; border-top-color: #651a61; border-left-color: #651a61; background-color: #8e2488; background-image: -webkit-gradient(linear, left top, left bottom, from(#a3299c), to(#8e2488)); background-image: -webkit-linear-gradient(top, #a3299c, #8e2488); background-image: -moz-linear-gradient(top, #a3299c, #8e2488); background-image: -o-linear-gradient(top, #a3299c, #8e2488); background-image: linear-gradient(to bottom, #a3299c, #8e2488); } .pink-button:active, .pink-button:visited:active { background-color: #b72eaf; background-image: -webkit-gradient(linear, left top, left bottom, from(#a3299c), to(#b72eaf)); background-image: -webkit-linear-gradient(top, #a3299c, #b72eaf); background-image: -moz-linear-gradient(top, #a3299c, #b72eaf); background-image: -o-linear-gradient(top, #a3299c, #b72eaf); background-image: linear-gradient(to bottom, #a3299c, #b72eaf); } /***************************************************************************/ .red-button, .red-button:visited { border: 1px solid #6d0000; border-top-color: darkred; border-left-color: darkred; padding: 10px; color: white !important; display: inline-block; font-size: 12px; font-weight: bold; text-decoration: none; text-shadow: 0 1px rgba(0, 0, 0, 0.75); cursor: pointer; /*line-height: 21px;*/ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #960000; background-image: -webkit-gradient(linear, left top, left bottom, from(#af0000), to(#960000)); background-image: -webkit-linear-gradient(top, #af0000, #960000); background-image: -moz-linear-gradient(top, #af0000, #960000); background-image: -o-linear-gradient(top, #af0000, #960000); background-image: linear-gradient(to bottom, #af0000, #960000); } .red-button:hover, .red-button:focus, .red-button:visited:hover, .red-button:visited:focus { color: #fff; border: 1px solid #6d0000; border-top-color: #490000; border-left-color: #490000; background-color: #7c0000; background-image: -webkit-gradient(linear, left top, left bottom, from(#960000), to(#7c0000)); background-image: -webkit-linear-gradient(top, #960000, #7c0000); background-image: -moz-linear-gradient(top, #960000, #7c0000); background-image: -o-linear-gradient(top, #960000, #7c0000); background-image: linear-gradient(to bottom, #960000, #7c0000); } .red-button:active, .red-button:visited:active { background-color: #af0000; background-image: -webkit-gradient(linear, left top, left bottom, from(#960000), to(#af0000)); background-image: -webkit-linear-gradient(top, #960000, #af0000); background-image: -moz-linear-gradient(top, #960000, #af0000); background-image: -o-linear-gradient(top, #960000, #af0000); background-image: linear-gradient(to bottom, #960000, #af0000); } /***************************************************************************/ .violet-button, .violet-button:visited { border: 1px solid #512d7e; border-top-color: #603595; border-left-color: #603595; padding: 10px; color: white !important; display: inline-block; font-size: 12px; font-weight: bold; text-decoration: none; text-shadow: 0 1px rgba(0, 0, 0, 0.75); cursor: pointer; /*line-height: 21px;*/ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #65379c; background-image: -webkit-gradient(linear, left top, left bottom, from(#713eaf), to(#65379c)); background-image: -webkit-linear-gradient(top, #713eaf, #65379c); background-image: -moz-linear-gradient(top, #713eaf, #65379c); background-image: -o-linear-gradient(top, #713eaf, #65379c); background-image: linear-gradient(to bottom, #713eaf, #65379c); } .violet-button:hover, .violet-button:focus, .violet-button:visited:hover, .violet-button:visited:focus { color: #fff; border: 1px solid #512d7e; border-top-color: #402364; border-left-color: #402364; background-color: #593189; background-image: -webkit-gradient(linear, left top, left bottom, from(#65379c), to(#593189)); background-image: -webkit-linear-gradient(top, #65379c, #593189); background-image: -moz-linear-gradient(top, #65379c, #593189); background-image: -o-linear-gradient(top, #65379c, #593189); background-image: linear-gradient(to bottom, #65379c, #593189); } .violet-button:active, .violet-button:visited:active { background-color: #713eaf; background-image: -webkit-gradient(linear, left top, left bottom, from(#65379c), to(#713eaf)); background-image: -webkit-linear-gradient(top, #65379c, #713eaf); background-image: -moz-linear-gradient(top, #65379c, #713eaf); background-image: -o-linear-gradient(top, #65379c, #713eaf); background-image: linear-gradient(to bottom, #65379c, #713eaf); } /***************************************************************************/ .yellow-button, .yellow-button:visited { border: 1px solid #a99e22; border-top-color: #c3b627; border-left-color: #c3b627; padding: 10px; color: white !important; display: inline-block; font-size: 12px; font-weight: bold; text-decoration: none; text-shadow: 0 1px rgba(0, 0, 0, 0.75); cursor: pointer; /*line-height: 21px;*/ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #cbbe28; background-image: -webkit-gradient(linear, left top, left bottom, from(#d7ca36), to(#cbbe28)); background-image: -webkit-linear-gradient(top, #d7ca36, #cbbe28); background-image: -moz-linear-gradient(top, #d7ca36, #cbbe28); background-image: -o-linear-gradient(top, #d7ca36, #cbbe28); background-image: linear-gradient(to bottom, #d7ca36, #cbbe28); } .yellow-button:hover, .yellow-button:focus, .yellow-button:visited:hover, .yellow-button:visited:focus { color: #fff; border: 1px solid #a99e22; border-top-color: #8b821c; border-left-color: #8b821c; background-color: #b6aa24; background-image: -webkit-gradient(linear, left top, left bottom, from(#cbbe28), to(#b6aa24)); background-image: -webkit-linear-gradient(top, #cbbe28, #b6aa24); background-image: -moz-linear-gradient(top, #cbbe28, #b6aa24); background-image: -o-linear-gradient(top, #cbbe28, #b6aa24); background-image: linear-gradient(to bottom, #cbbe28, #b6aa24); } .yellow-button:active, .yellow-button:visited:active { background-color: #d7ca36; background-image: -webkit-gradient(linear, left top, left bottom, from(#cbbe28), to(#d7ca36)); background-image: -webkit-linear-gradient(top, #cbbe28, #d7ca36); background-image: -moz-linear-gradient(top, #cbbe28, #d7ca36); background-image: -o-linear-gradient(top, #cbbe28, #d7ca36); background-image: linear-gradient(to bottom, #cbbe28, #d7ca36); } @media only screen and (min-width: 480px) { /****************************************************************** Site Name: Author: Stylesheet: 481px and Up Stylesheet This stylesheet is loaded for larger devices. It's set to 481px because at 480px it would load on a landscaped iPhone. This isn't ideal because then you would be loading all those extra styles on that same mobile connection. A word of warning. This size COULD be a larger mobile device, so you still want to keep it pretty light and simply expand upon your base.scss styles. ******************************************************************/ .wrap { width: 80%; } .searchform { margin: 20px 0; } .select-menu { display: block; margin: 0 auto; font-family: inherit; height: 40px; } #navigation, .header-links-wrapper, .footer-links-wrapper { display: none; } #mobnav { display: block; right: 10%; } .ph-wrapper { margin-bottom: 20px; } } @media only screen and (min-width: 768px) { /****************************************************************** Site Name: Author: Stylesheet: Tablet & Small Desktop Stylesheet Here's where you can start getting into the good stuff. This size will work on iPads, other tablets, and desktops. So you can start working with more styles, background images, and other resources. You'll also notice the grid starts to come into play. Have fun! ******************************************************************/ .wrap { width: 90%; } .article-footer { display: block; } .select-menu { display: block; margin: 0 auto; font-style: inherit; } .searchform { margin: 20px 0; } /*.navcombo{display:block;}*/ #mobnav { display: block; right: 5%; } #navigation, .header-links-wrapper, .footer-links-wrapper { display: none; } .two-columns .isotope-item , .two-columns-bis .isotope-item { z-index: 2; /* margin:6px; width:48%; */ height: auto; } .three-columns .isotope-item , .three-columns-bis .isotope-item { z-index: 2; /* margin:6px; width:31.491712705%; */ height: auto; } .four-columns .isotope-item { z-index: 2; /* margin:7px; width:23%; */ height: auto; } .ui-tabs .ui-tabs-nav li { float: left; margin: 0 .2em -1px 0; padding: 0; } .ui-tabs .ui-tabs-nav li a { float: left; } .ph-wrapper { margin-bottom: 20px; } } @media only screen and (min-width: 960px) { /****************************************************************** Site Name: Author: Stylesheet: Desktop Stylsheet This is the desktop size. It's larger than an iPad so it will only be seen on the Desktop. ******************************************************************/ /********************* GENERAL STYLES *********************/ .wrap { width: 90%; } /********************* LAYOUT & GRID STYLES *********************/ /* This is a combination of the 1140 grid and Twitter Boostrap. I liked 1140 but Boostrap's grid was way more detailed so I merged them together, let's see how this works out. If you want to use 1140, the original values are commented out on each line. */ .onecol { width: 5.801104972%; } /* 4.85%; } /* grid_1 */ .twocol { width: 14.364640883%; } /* 13.45%; } /* grid_2 */ .threecol { width: 22.928176794%; } /* 22.05%; } /* grid_3 */ .fourcol { width: 31.491712705%; } /* 30.75%; } /* grid_4 */ .fivecol { width: 40.055248616%; } /* 39.45%; } /* grid_5 */ .sixcol { width: 48.618784527%; } /* 48%; } /* grid_6 */ .sevencol { width: 57.182320438000005%; } /* 56.75%; } /* grid_7 */ .eightcol { width: 65.74585634900001%; } /* 65.4%; } /* grid_8 */ .ninecol { width: 74.30939226%; } /* 74.05%; } /* grid_9 */ .tencol { width: 82.87292817100001%; } /* 82.7%; } /* grid_10 */ .elevencol { width: 91.436464082%; } /* 91.35%; } /* grid_11 */ .twelvecol { width: 99.999999993%; } /* 100%; } /* grid_12 */ /* layout & column defaults */ .onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol { position: relative; float: left; margin-right: 0; margin-left: 2.562430939%; } .first { margin-left: 0; } .last { float: right; } /********************* HEADER SYTLES *********************/ #wrapper-header-box { display: block; } .header { position: relative; z-index: 99; min-height: 53px; top: 0; } .search-header { display: none; } /* Logo */ #logo { float: left; height: 53px; width: auto; display: block; } #logo > a > img { margin: 0; height: auto; } /********************* NAVIGATION STYLES *********************/ nav { margin-top: 0px; } /*hide the smartphone navigation*/ .select-menu { display: none; } /*show normal menu navigation*/ #mobnav, .navcombo { display: none !important; } #navigation, .header-links-wrapper, .footer-links-wrapper { display: block; } .header-shop .header { z-index: 99 !important; } #navigation .menu, .nav { border: 0; float: right; margin-left: 10px; margin-right: 0px; width: auto; bottom: 0px; text-align: center; /* end current highlighters */ /* end .menu ul li */ /* highlight current page */ /* end current highlighters */ } #navigation .menu ul, .nav ul { list-style: none; line-height: 1; z-index: 99; padding: 0; } #navigation .menu a, .nav a { display: block; z-index: 100; padding: 0 10px; color: #999; } #navigation .menu .menu-header-search, .nav .menu-header-search { min-width: 30px; height: 80px; background: url("images/ico-search.png") no-repeat 15px 33px; } #navigation .menu .menu-header-search > a:hover, #navigation .menu .menu-header-search > a:focus, .nav .menu-header-search > a:hover, .nav .menu-header-search > a:focus { text-decoration: none; border: none; background-color: transparent; } #navigation .menu .menu-header-search .tm-search-tooltip, .nav .menu-header-search .tm-search-tooltip { opacity: 0; display: none; border: 1px solid #f6f6f6; padding: 15px; height: 0px; background: #fff; position: absolute; z-index: 999999; width: 300px; margin: 22px 0px 0 -275px; } #navigation .menu .menu-header-search .searchform, .nav .menu-header-search .searchform { border-radius: 0px; padding: 0; margin: 0; height: 45px; background: url(images/header-search.png) no-repeat 257px 0; } #navigation .menu .menu-header-search .searchform input.s, .nav .menu-header-search .searchform input.s { height: 45px; padding: 0px; width: 250px; margin-left: 10px; float: left; } #navigation .menu .menu-header-search .searchform input.search-submit, .nav .menu-header-search .searchform input.search-submit { top: 15px; } #navigation .menu .menu-header-search .tm-arrow-wrap, .nav .menu-header-search .tm-arrow-wrap { width: 0; height: 0; margin-left: 130px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #f6f6f6; bottom: 77px; position: absolute; } #navigation .menu > li, .nav > li { min-width: 60px; } #navigation .menu > li > a, .nav > li > a { height: 80px; height: auto; } #navigation .menu > li > a:hover, #navigation .menu > li > a:focus, .nav > li > a:hover, .nav > li > a:focus { text-decoration: underline; color: #999; text-decoration: none; } #navigation .menu > li > a .sub, .nav > li > a .sub { font-size: 0.9em; font-style: italic; color: #999; } #navigation .menu li, .nav li { float: left; margin: 0 2px 0 0; padding: 0; /* plan your menus and drop-downs wisely. */ /* showing sub-menus */ } #navigation .menu li a, .nav li a { padding-top: 28px; padding-bottom: 30px; color: #666; text-decoration: none; /* you can use hover styles here even though this size has the possibility of being a mobile device. */ } #navigation .menu li ul, #navigation .menu li ul.children, .nav li ul, .nav li ul.children { display: none; width: 180px; margin: 0; text-align: left; padding: 0; position: absolute; z-index: 999; background-color: #313941; /* highlight sub-menu current page */ } #navigation .menu li ul .sub, #navigation .menu li ul.children .sub, .nav li ul .sub, .nav li ul.children .sub { font-size: 0.9em; font-style: italic; color: #fff; } #navigation .menu li ul li, #navigation .menu li ul.children li, .nav li ul li, .nav li ul.children li { padding: 0; /* if you need to go deeper... I wouldn't try!!. */ /* showing sub-menus */ } #navigation .menu li ul li a, #navigation .menu li ul.children li a, .nav li ul li a, .nav li ul.children li a { transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; border-bottom: 1px solid #363f48; padding: 15px 15px; width: 150px; color: #ffffff; } #navigation .menu li ul li a:hover, #navigation .menu li ul li a:focus, #navigation .menu li ul.children li a:hover, #navigation .menu li ul.children li a:focus, .nav li ul li a:hover, .nav li ul li a:focus, .nav li ul.children li a:hover, .nav li ul.children li a:focus { background-color: #363f48; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; } #navigation .menu li ul li a:hover, #navigation .menu li ul li a:focus, #navigation .menu li ul.children li a:hover, #navigation .menu li ul.children li a:focus, .nav li ul li a:hover, .nav li ul li a:focus, .nav li ul.children li a:hover, .nav li ul.children li a:focus { text-decoration: none; } #navigation .menu li ul li:last-child a, #navigation .menu li ul.children li:last-child a, .nav li ul li:last-child a, .nav li ul.children li:last-child a { border-bottom: 0; } #navigation .menu li ul li ul, #navigation .menu li ul li ul.children, #navigation .menu li ul.children li ul, #navigation .menu li ul.children li ul.children, .nav li ul li ul, .nav li ul li ul.children, .nav li ul.children li ul, .nav li ul.children li ul.children { display: none; margin: -43px 0 0 182px; } #navigation .menu li ul li ul li, #navigation .menu li ul li ul.children li, #navigation .menu li ul.children li ul li, #navigation .menu li ul.children li ul.children li, .nav li ul li ul li, .nav li ul li ul.children li, .nav li ul.children li ul li, .nav li ul.children li ul.children li { padding: 0; } #navigation .menu li ul li ul li a, #navigation .menu li ul li ul.children li a, #navigation .menu li ul.children li ul li a, #navigation .menu li ul.children li ul.children li a, .nav li ul li ul li a, .nav li ul li ul.children li a, .nav li ul.children li ul li a, .nav li ul.children li ul.children li a { padding: 15px 15px; width: 150px; color: #333; margin-left: -2px; } #navigation .menu li ul li ul li a:hover, #navigation .menu li ul li ul li a:focus, #navigation .menu li ul li ul.children li a:hover, #navigation .menu li ul li ul.children li a:focus, #navigation .menu li ul.children li ul li a:hover, #navigation .menu li ul.children li ul li a:focus, #navigation .menu li ul.children li ul.children li a:hover, #navigation .menu li ul.children li ul.children li a:focus, .nav li ul li ul li a:hover, .nav li ul li ul li a:focus, .nav li ul li ul.children li a:hover, .nav li ul li ul.children li a:focus, .nav li ul.children li ul li a:hover, .nav li ul.children li ul li a:focus, .nav li ul.children li ul.children li a:hover, .nav li ul.children li ul.children li a:focus { text-decoration: none; } #navigation .menu li ul li ul li:first-child .tip, #navigation .menu li ul li ul.children li:first-child .tip, #navigation .menu li ul.children li ul li:first-child .tip, #navigation .menu li ul.children li ul.children li:first-child .tip, .nav li ul li ul li:first-child .tip, .nav li ul li ul.children li:first-child .tip, .nav li ul.children li ul li:first-child .tip, .nav li ul.children li ul.children li:first-child .tip { display: none; } #navigation .menu li ul li ul li:last-child a, #navigation .menu li ul li ul.children li:last-child a, #navigation .menu li ul.children li ul li:last-child a, #navigation .menu li ul.children li ul.children li:last-child a, .nav li ul li ul li:last-child a, .nav li ul li ul.children li:last-child a, .nav li ul.children li ul li:last-child a, .nav li ul.children li ul.children li:last-child a { border-bottom: 0; } #navigation .menu li ul li:hover ul, #navigation .menu li ul.children li:hover ul, .nav li ul li:hover ul, .nav li ul.children li:hover ul { display: block; } #navigation .menu li:hover ul, .nav li:hover ul { display: block; } /* end .nav */ /* General for headers */ .header-two #navigation, .header-three #navigation { display: inline-block; float: left; text-align: center; width: 100%; margin: 0 auto; line-height: 0px; } .header-two .nav { border: 0; float: none; width: auto; text-align: center; display: inline-block; margin: 0 auto; } .header-two #menu-top-menu { float: left; width: auto; line-height: 1.5em; } .header-three .nav { border: 0; float: none; width: auto; text-align: center; display: inline-block; margin: 0 auto; line-height: 0px; height: auto; } .header-three #menu-top-menu { float: right; width: auto; line-height: 1.5em; } .header-three .header { height: auto !important; min-height: 50px; } .header-three .menu-header-search { height: auto; } .header-two #logo, .header-three #logo { text-align: center; } .fix-me { /*header-one*/ } .fix-me .header-one .header, .fix-me .header-shop .header { z-index: 99999 !important; background-color: #fefefe; position: fixed; height: 44px; min-height: auto; top: 0; left: 0; display: inline-table; border-bottom: 1px solid #ddd; box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.33); -moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.33); -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.33); } .fix-me .header-one .header:focus, .fix-me .header-one .header:hover, .fix-me .header-shop .header:focus, .fix-me .header-shop .header:hover { background-color: #fffff; } .fix-me .header-one #logo, .fix-me .header-one #logo img, .fix-me .header-shop #logo, .fix-me .header-shop #logo img { max-height: 44px; width: auto; } .fix-me .header-one #logo > a > img, .fix-me .header-one #logo img > a > img, .fix-me .header-shop #logo > a > img, .fix-me .header-shop #logo img > a > img { margin: 10% 0; } .fix-me .header-one .nav > li > a, .fix-me .header-shop .nav > li > a { max-height: 44px; } .fix-me .header-one .nav .menu-header-search, .fix-me .header-shop .nav .menu-header-search { height: 44px; line-height: 44px; background-position: 15px 30px; } .fix-me .header-one .stickybar, .fix-me .header-shop .stickybar { z-index: 0; } /*fix-me*/ /* HEADER TOP MENU */ .header-links-wrapper { background-color: #f6f6f6; } nav .header-nav .menu-header-search { display: none; width: 0px !important; height: 0px !important; } nav .header-nav > li { height: 40px; } nav .header-nav > li > a { padding-top: 10px; height: auto; border-bottom: none; font-size: 11px; color: #333; font-weight: 500; } nav .header-nav > li > a:hover, nav .header-nav > li > a:focus { text-decoration: none; border-bottom: none; color: #999; background: transparent; } nav .header-nav li a { padding-bottom: 7px; } nav .header-nav ul.sub-menu, nav .header-nav ul.children { width: 110px; margin: 1px 0 0 0; background: #fff; text-align: left; padding: 0; position: absolute; z-index: 99999; border-top: 1px solid #efefef; border-left: 1px solid #efefef; border-right: 1px solid #efefef; } nav .header-nav ul.sub-menu .sub, nav .header-nav ul.children .sub { font-size: 0.9em; font-style: italic; color: #fff; } nav .header-nav ul.sub-menu li, nav .header-nav ul.children li { padding: 0; width: 110px; } nav .header-nav ul.sub-menu li a, nav .header-nav ul.children li a { padding: 10px 10px 10px 15px; font-size: 12px; width: auto; color: #333; border-bottom: 1px solid #efefef; } nav .header-nav ul.sub-menu li ul.sub-menu, nav .header-nav ul.sub-menu li ul.children, nav .header-nav ul.children li ul.sub-menu, nav .header-nav ul.children li ul.children { width: 110px; margin: -34px 0 0 110px; } nav .header-nav ul.sub-menu li ul.sub-menu li, nav .header-nav ul.sub-menu li ul.children li, nav .header-nav ul.children li ul.sub-menu li, nav .header-nav ul.children li ul.children li { padding: 0; width: 110px; } nav .header-nav ul.sub-menu li ul.sub-menu li a, nav .header-nav ul.sub-menu li ul.children li a, nav .header-nav ul.children li ul.sub-menu li a, nav .header-nav ul.children li ul.children li a { padding: 10px 10px 10px 15px; font-size: 12px; width: auto; color: #333; border-bottom: 1px solid #efefef; } /* FOOTER 2ND MENU */ .header-links-wrapper { background-color: #f6f6f6; width: 100%; } nav .footer-nav .menu-header-search { display: none; width: 0px !important; height: 0px !important; } nav .footer-nav li { min-width: 50px; } nav .footer-nav li a { padding: 10px 0 0 20px; border-bottom: none; height: auto; font-size: 11px; color: #999; font-weight: 500; } nav .footer-nav li a:hover, nav .footer-nav li a:focus { text-decoration: none; border-bottom: none; color: #000; background: transparent; } /* Price Table */ #pricing-full .column-box { width: auto; } #pricing-full .column { min-width: 178px; } #pricing-full .column-big { min-width: 250px; } /* Post navigation -------------------------------------------------------------- */ .navigation { float: left; overflow: hidden; padding-top: 10px; padding-bottom: 20px; width: 600px; } .nav-previous { float: left; margin: 0px !important; } .nav-next { float: right; text-align: right; margin: 0px !important; } #nav-above { display: none; } .paged #nav-above, .single #nav-above { display: block; } .easy-nav { width: auto; } .box-image { line-height: 0px; } .two-columns .isotope-item , .two-columns-bis .isotope-item { z-index: 2; /* margin:6px; width:48%; */ height: auto; } .three-columns .isotope-item , .three-columns-bis .isotope-item { z-index: 2; /* margin:6px; width:31.491712705%; */ height: auto; } .eightcol .three-columns .isotope-item , .eightcol .three-columns-bis .isotope-item { z-index: 2; /* margin:6px; width:31%; */ height: auto; } .four-columns .isotope-item { z-index: 2; /* margin:6px; width:22.9%; */ height: auto; } .eightcol .four-columns .isotope-item { z-index: 2; /* margin:6px; width:22%; */ height: auto; } .easy-nav { visibility: visible !important; width: 100% !important; } .easy-nav ul { margin: 0; } .easy-nav li { float: right; margin-left: 10px; } .easy-nav li a img { background-color: #333; height: 30px; width: 30px; margin: auto; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .easy-nav li a img:hover { background-color: #333; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; } /********************* SIDEBARS & ASIDES *********************/ .sidebar { margin-top: 15px; } .widgettitle { margin-bottom: 0.75em; } .widget, .dc-social { padding: 0 10px 30px 0; } .widget ul li, .dc-social ul li { /* deep nesting */ } .widget ul li ul, .dc-social ul li ul { margin-top: 0.75em; padding-left: 1em; } .dc-social ul li { margin-bottom: 0; } /* SEARCH FORM */ #searchform, .searchform { width: 100%; } /* text widget */ /********************* SCROLL TOP *********************/ #scrollTop { position: fixed; bottom: 20px; right: 20px; text-decoration: none; -webkit-transition: .2s all linear; -moz-transition: .2s all linear; -o-transition: .2s all linear; -ms-transition: .2s all linear; transition: .2s all linear; cursor: pointer; z-index: 999; text-indent: none; display: block; height: 50px; width: 50px; background-attachment: scroll; background-repeat: no-repeat; background-position: 0 0; background-color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0); font-size: 0px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } #scrollTop:before { position: absolute; font-family: FontAwesome; content: "\f148"; top: 1px; font-weight: 100; left: 0px; color: #fff; line-height: 3.2em; padding-left: 21px; font-size: 16px; } .banner-box .tm-custom-button, .banner-box2 .tm-custom-button { width: auto; } .socials_container { float: left; width: auto; text-align: right; } /********************* FOOTER *********************/ .footer .logo { width: auto; float: right; text-align: right; margin-top: 5px; } .footer .contact-info { float: left; width: auto !important; } .footer .footer-contact-bar-wrapper .footer-contact-bar { height: auto; width: 90%; color: #f6f6f6; font-size: 13px; padding: 0; } .footer .footer-contact-bar-wrapper .address { float: left !important; width: auto !important; margin-top: 2% !important; } .footer .footer-contact-bar-wrapper .numbers { position: relative; float: left; margin-top: 2% !important; width: auto !important; padding-left: 25px; margin-left: 30px; } .footer .footer-contact-bar-wrapper .numbers:before { position: absolute; font-family: FontAwesome; top: 2px; left: 5px; content: "\f095"; } .footer .footer-contact-bar-wrapper .contact-card-links { position: relative; float: left; width: auto !important; padding-left: 25px; margin-left: 30px; margin-top: 2% !important; } .footer .footer-contact-bar-wrapper .contact-card-links:before { position: absolute; font-family: FontAwesome; top: 0; left: 5px; content: "\f0e0"; } .ph-wrapper { margin-bottom: 0; } } @media only screen and (min-width: 1030px) { /****************************************************************** Site Name: Author: Stylesheet: Desktop Stylsheet This is the desktop size. It's larger than an iPad so it will only be seen on the Desktop. ******************************************************************/ .search-header { display: none; } } @media only screen and (min-width: 1240px) { /****************************************************************** Site Name: Author: Stylesheet: Super Large Monitor Stylesheet You can add some advanced styles here if you like. This kicks in on larger screens. ******************************************************************/ /********************* LAYOUT & GRID STYLES *********************/ .search-header { /*display:inline;*/ } .search-header .searchform { background: #edf1f5; display: block; line-height: 26px; z-index: 100; padding: 0 10px; color: #000; font-size: 14px; font-weight: 700; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; float: left; width: auto; margin-top: 13px; } .search-header .searchform input.s { padding: 6px; outline: none; } .emailinput input { max-width: 230px; } } @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important; } a, a:visited { color: #444 !important; text-decoration: underline; } a:after, a:visited:after { content: " (" attr(href) ")"; } a abbr[title]:after, a:visited abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100%; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } .sidebar, .page-navigation, .wp-prev-next, .respond-form, nav { display: none; } } @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 320px), only screen and (-o-min-device-pixel-ratio: 2 / 1) and (min-width: 320px), only screen and (min-device-pixel-ratio: 2) and (min-width: 320px), only screen and (min-resolution: 192dpi) and (min-width: 320px), only screen and (min-resolution: 2dppx) and (min-width: 320px) { /* Small screen, retina, stuff to override above media query */ /****************************************************************** Site Name: Author: Stylesheet: Retina Screens & Devices Stylesheet ******************************************************************/ /* jQuery Toggle */ h2.active span { background: url(images/trigger_down@2x.png) no-repeat 99% 50% !important; background-size: 14px 4px !important; } h2.trigger span { background: url(images/trigger_right@2x.png) no-repeat 99% 50% !important; background-size: 15px 15px; } /* SEARCH BAR */ .menu-header-search { background: url(images/ico-search@2x.png); background-size: 16px 16px; } /*SOCIALS */ a.email-small { background: url("images/social/email@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.aim-small { background: url("images/social/aim@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.apple-small { background: url("images/social/apple@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.behance-small { background: url("images/social/behance@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.blogger-small { background: url("images/social/blogger@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.delicious-small { background: url("images/social/delicious@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.deviantart-small { background: url("images/social/deviantart@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.digg-small { background: url("images/social/digg@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.dribbble-small { background: url("images/social/dribbble@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.ember-small { background: url("images/social/ember@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.facebook-small { background: url("images/social/facebook@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.flickr-small { background: url("images/social/flickr@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.ebay-small { background: url("images/social/ebay@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.google-small { background: url("images/social/google@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.googleplus-small { background: url("images/social/googleplus@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.gowalla-small { background: url("images/social/gowalla@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.grooveshark-small { background: url("images/social/grooveshark@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.amazon-small { background: url("images/social/amazon@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.lastfm-small { background: url("images/social/lastfm@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.linkedin-small { background: url("images/social/linkedin@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.metacafe-small { background: url("images/social/metacafe@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.mixx-small { background: url("images/social/mixx@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.netvibes-small { background: url("images/social/netvibes@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.paypal-small { background: url("images/social/paypal@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.picasa-small { background: url("images/social/picasa@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.pinterest-small { background: url("images/social/pinterest@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.plurk-small { background: url("images/social/plurk@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.reddit-small { background: url("images/social/reddit@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.rss-small { background: url("images/social/rss@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.skype-small { background: url("images/social/skype@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.stumbleupon-small { background: url("images/social/stumbleupon@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.bing-small { background: url("images/social/bing@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.tumblr-small { background: url("images/social/tumblr@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.twitter-small { background: url("images/social/twitter@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.vimeo-small { background: url("images/social/vimeo@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.wordpress-small { background: url("images/social/wordpress@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.yahoo-small { background: url("images/social/yahoo@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.yelp-small { background: url("images/social/yelp@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } a.youtube-small { background: url("images/social/youtube@2x.png") no-repeat scroll 0 -42px transparent; background-size: 42px 84px; } /* WOOCOMMERCE */ .woocommerce-ordering select { background: url("images/down-arrow_hover@2x.png") no-repeat center right; } .woocommerce-ordering select:hover { background: url("images/down-arrow@2x.png") no-repeat center right; } .tm-woocommerce-orientation a.tm-grid-view { background: #333333 url("images/col-icon@2x.png") no-repeat; } .tm-woocommerce-orientation a.tm-list-view { background: #333333 url("images/list-icon@2x.png") no-repeat; } .woocommerce-pagination ul .next { background: #333333 url(images/minus-icon@2x.png) center center; } .woocommerce-pagination ul .prev { background: #333333 url(images/plus-icon@2x.png) center center; } }