/* * 3L was made for YOU to help you create awesome websites * and fill the Internet with excessive amount of Love! ♥ * * Keep up your good work! * * Yours faithfully, * Mateusz ★ Kocz -> http://radiatingstar.com * * 3L: -> http://mateuszkocz.github.com/3l * * Watch 3L on Github: -> https://github.com/mateuszkocz/3l * * Submit a bug issue: -> https://github.com/mateuszkocz/3l/issues?state=open * * * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0 * * Version: 1.3.3 (2012.08.28) * */ /* * To compile all of the code you need to use a compiler * that supports JavaScript code and guarder mixins. * WinLess meets those requirements. You can find it on winless.org * * If you're on a Mac and your compiler meets the requirements, * please, let me know via Twitter or GitHub! * */ /* ACTIVATE SUPPORTING CLASSES */ /* Uncomment ones you want to use or put them in html or body elements in your style sheet. */ /* For the explanation what those classes do, read further. */ /* * SEO & HTML Debugging * * A useful supporting class that will help a bit with your SEO * and usability of your website. * * Creating a website is a serious business, but sometimes you may * forget about some important details. This class will help you. * It will let you know when you haven't put an alt attribute on image * or kept that attribute empty, when you haven't typed a URL in anchor or when * anchor link has rel=nofollow attribute. It will also show you an alert * message if you don't have a tag and description or left them empty*. * * If any of the errors described above happens, according element will * get a red outline border drawing your attention and asking for some love * or you will get a message with the same purpose. * * *** * The <title> reminder can alert you even if you have a <title> tag. * *** This happens if you have a <link> tag (usually used for style sheets) * *** before <title> in your HTML. Just change the order of <link> and * *** <title> and you're cool. * * How to: * Place the .seo-helper class in html element. That's it! * * *** Example: html {.seo-helper} * * That way every element on your page will be affected * by this rule. You can also place it in any other container * class element in your code (body, div.wrapper, article and so on) * if you don't want for some reasons to check for bugs on whole page * but in single area. * * Caution! Do not forget to delete this class before finishing your * project, unless you want to keep it in continuous project (like blog) * and debug every new content on your site. But then you might consider * restyling this class to be a bit more eye-pleasing. * * This may not work in every browser, but since you are a web * developer/designer you're probably already using a bleeding * edge nightly alpha back-door version of browser, so no problem! * It's probably the only class you don't need to care about how * your visitors will see it! * * *** Aside - How it works: * *** Section only for people who don't know yet what attribute * *** selectors and negation pseudo-class are. * *** * *** Using negation pseudo-class is like saying "target every element x * *** that doesn't have attribute y" or "target every element exept (but 'not') z". * *** You can read more about that here ->www.w3.org/TR/selectors/#negation. * *** * *** Attribute selectors are rules that target elements that have * *** some specified attributes (rel, alt, href etc.) and/or specified * *** value of this attributes. Read more on this topic here * *** ->www.w3.org/TR/selectors/#selectors. * * For a further explanation and a demo, refer to: * -> http://radiatingstar.com/how-to-improve-seo-with-css * * Why img:not([alt]), img[alt=""] and img[alt^=" "]? * First targets images that don't have an alt attribute, second targets * ones that have this attribute but it's left empty (probably left by * automatic completion of html editor), third is just in case - it * might have been left by html editor or manually "to do it later" (clearly * a space at the beginning of an alt can't be anything good). * * Why a[href=""]? * If you write an anchor text and leave href to copyPaste URL later, * it will reminding you about that. * * Why a[rel="nofollow"]? * For some reasons links on your site may have this attribute and this * may generate a huge SEO problem. Better fix it ASAP. (On the other hand * nofollow links might be useful in some situations. See here: * -> http://en.wikipedia.org/wiki/Nofollow#Control_internal_PageRank_flow) * * Why div:empty, span:empty, li:empty, p:empty, td:empty, th:empty? * It'll just check if you have some redundancy (empty elements) in you code. * */ /* * Helper classes from HTML5 Boilerplate * * Classes below help you create a better user experience for both users * of browsers and screen readers. Oh, and there's also a clearfix! * * All the classes comes from HTML5 Boilerplate (-> html5boilerplate.com). Here though, * they're changed so that they can be easily used in The LESS Way. * They're called "non-semantic" in H5B, but here they become semantic if used well. * (Actually they can't be used in any way than good in 3L.) * (Actually II they can be semantic in H5B as well, but it's a bit pain to do that.) * * Usage: * Just put them in your classes, id's or elements. * * Example: * .YOUR-AWESOME-CLASS-NAME { * // some rules * .clearfix; * } * */ /* * Box-sizing * * Change the basic box-model to the one you want. * * Basic box-model defines the width and height of an object only as a size of * object's content area. In order to know exactly how big is the object you need * to add its padding and borders. This may result in many unwanted behaviours. * That's why you can define how you want the browser to calculate the width/height: * with or without padding, with or without borders. * * To use this feature just put a value you want: * -- content-box ("content" works too) - it's default value from basic model. * -- padding-box (also "padding") - width and height declarations will include paddings. * -- border-box (and "border") - border and padding included. * * Usage: * 1. .box-sizing(content-box), .box-sizing(content) and .content-box-sizing* for box-sizing: content-box. * 2. .box-sizing(padding-box), .box-sizing(padding) and .padding-box-sizing* for box-sizing: padding-box. * 3. .box-sizing(border-box), .box-sizing(padding) and .border.box-sizing* for box-sizing: border-box. * * * Beware not to use those properties without -sizing suffix thus suffixless classes are for background-clip (see this class below). * * Resources: * -- http://paulirish.com/2012/box-sizing-border-box-ftw/ * * Browsers support: IE8+ and every other. * Notable lack of support: IE7- * */ /* * Background-clip * * Clips the object's background to the desired box according to the box-model. * * To use this class simply put into an object a .background-clip(box) class, * where box means the desired box (see below). You can also use a shorter class * .bg-clip or class that corresponds to the clipping you want to get (.content-clip, * .padding-clip, .border-clip). * * Arguments that comes into (box) are: * -- content-box or content for content clip, * -- padding-box or padding for padding clip, * -- border-box or border for border clip. * *** You can use values either with or without "-box" suffix. * * Browsers support: IE9+ and every other. * Notable lack of support: IE8- * */ /* * Box-shadow * Create a shadow behind or inside the element. * * Usage: * In .box-shadow() brackets put arguments for every single shadow. Separate * each shadows' arguments with comma. You can put up to five shadows * by default but feel free to add a class with as many as you want. * Just check how it is done. * * You can use a default box-shadow which will create a shadow with * 0px x and 1px y offsets, 3px of blur and in black colour with 25% transparency. * Just place a .box-shadow class without any arguments. * * Box-shadow property takes following arguments: * * 1. inset [optional]. * 2. x-offset [required]. * 3. y-offset [required]. * 4. blur [optional]. * 5. spread [optional]. * 6. color [optional/required]. * * Resources: * -- developer.mozilla.org/en/CSS/box-shadow * * Browsers support: IE9, Fx3.5, Chrome, Opera, Safari, Opera Mobile, Android Browser * Notable lack of support: IE8-, Opera Mini * * Example: * Two box-shadows: one is 1px offset, black, second one is green with 30% opacity, inset, * with 5px offsets, 3px of blur and 1px spread. * .box-shadow(1px 1px black, inset 5px 5px 3px 1px fade(green,30%)) // fade(colour,XX%) is a LESS native function * // that adds alpha channel to colour. Instead of fade() * // you can also use rgba or hsla colours declaration. * */ /* * Border-radius * Round the element's corners. * * Usage: * Border-radius property takes one to four arguments with px, em and % * values and round the element's corners accordingly. You can make * ellipticaly roundeded corners putting two sets of values separated with * comma using .elliptical-border-radius class. In order to round a single * corner use .round-corner class. This class takes two sets of arguments. * First one is a declaration of corner you want to round (top-left, top-right, * bottom-right, bottom-left), second one (separated from the first with comma), * is a set of values in px, em or % that round choosen corner. Second * declaration can have one (for circle rounding) or two values (for * elliptical rounding). * * For further explanation of the border-radius property, refer to the * resources section above. * * Resources: * -- developer.mozilla.org/en/CSS/border-radius * * Browsers support: IE9, Fx3.5, Chrome, Opera, Safari, Opera Mobile, Android Browser * Notable lack of support: IE8-, Opera Mini * * Example: * 1. Round every corner of the element with 10px radius. * .border-radius(10px) * 2. Round top-left and bottom-right corners by 10px, top-right * and bottom-left corners by 20px. * .border-radius(10px 20px) * 3 Exemplary use of the .elliptical-border-radius class. * .elliptical-border-radius(10px 20px 30px, 40px 50px 60px 70px) * 4. Round top-right corner by 10px and 20px (elliptical). * .round-corner(top-right, 10px 20px) * .border-top-right-radius(10px 20px) // Alternate method. * 5. Round similar corners. * .border-top-radius(20px 10px); // top-left + top-right (elliptical) * .border-left-radius(5px); // top-left + bottom-left * */ /* * Opacity * Make an object transparent. * * Opacity takes values between 0.0 (invisible) to 1.0 (default - full * visibility) but 3L lets you also use percentages and values from >1 to 100. * * If you want an element with transparency 1, .5 or 0, use these classes: * .not-transparent., .half-transparent, .transparent. * * Browsers support: full (IE6+) * Caution! According to -> caniuse.com/#search=opacity, transparency doesn't * work well with PNG images that are itself transparent (use alpha channel) in IE8-. * * Aside: * Do we need the ability to set opacity in numbers from 1 to 100 * and in percentages? I think we do, because: * 1. You need to use integer numbers in filter property for IE, * so there is a possibility that someone will type this kind * of value, instead of [0,1]. * 2. LESS has a fade() function that uses percentages to makes * colours (semi)transparent, so using percentages here will * result in more consistent code (same unit in similar situation). * 3. Percentages are more intuitive when it comes to transparency and * opacity since graphic editors like Photoshop and GIMP use them. * */ /* * Gradient * Create a beautiful gradient without images. * * Pick a type of a gradient you want to have and put colours in * brackets. You can put either two or three colours. In the first case * the default colour for old browsers will be the same as the first colour provided. * In the second case you can set that colour as a third argument. * * The default class - .gradient - is the same as .vertical-gradient. * * You can choose from four types of gradients: * 1. Vertical - colour will change from top to bottom. * 2. Horizontal - change is from left to right. * 3. Diagonal - from top-left to bottom-right. * 4. Radial - from the centre of an element to its borders. * * Gradients tend to be tricky. There's no support for this property * in older IE, but "filter" comes to the rescue. It can generate * only horizontal and vertical gradients, though. Also IE9 has some * strange behaviour -> css3wizardry.com/2010/10/29/css-gradients-for-ie9/. * To provide the best experience for your visitors you should use * gradient generator (refer to resources above) with "IE9 Support" option checked. * * Resources: * -- gradient generator with broad browsers support and some advanced options: * -> www.colorzilla.com/gradient-editor/ * -- gradient is a powerful tool - you can generate shapes as a background! * -> lea.verou.me/css3patterns/ * * Browsers support: almost full * Notable lack of support: Opera mini * Caution! IE6 - IE8 use filter property that can generate only vertical and * horizontal gradients. For the best experience in IE9 use gradient generator * mentioned above in the resources. * */ /* * Background-size * Scale (or not) your background image. * * This property takes following values: * -- auto [default] - it does nothing when used alone; when used with a value * it makes sure that image will keep its aspect ratio while being stretched * to the required size. (See: examples 3. and 4.) * -- contain - scale image to the first border it meets; * it may leave some area uncovered but keeps image's aspect ratio, * -- cover - scale image to the second border it meets; * cover all area but part of an image may not be shown. The image keeps its aspect ratio. * -- px, em, % - scale image according to declared value; * you can declare one value (x-size) or two values for each size. * Using (100%, 100%) stretch the image to cover full area but may not * keep its aspect ratio. When you use percentages keep in mind that XX% * means XX% of the element size, not XX% of the background image. * * Consider adding background-repeat property to avoid unwanted repetition of background. * * Browsers support: IE9+, Fx3.6+, Chrome, Safari, Opera, Opera Mini, Opera Mobile, Android Browser * Notable lack of support: IE8- * * Examples: * 1. .background-size(contain); * 2. .background-size(cover); * 3. .background-size(70%); // = (70% auto). Image is scaled to take 70% of width * // of the element and it keeps its own aspect ratio. * 4. .background-size(auto, 70%) // Image is scaled to take 70% of element's * // height and keeps aspect ratio. * 5. background-size(70px 7em); // Size of the background image is now 70px (width) x 7em (height). * 6. background-size(70px,7em); // Same as above. Comma is fine too. * */ /* * User-select * controls the selection model and granularity of an element. * * This property takes following values: * -- none - none of the element's content can be selected. * -- text [default] - the element's contents follow a standard text content selection model. * -- toggle - the element's contents follow a standard toggling content model. * -- element - one element at a time may be selected. * -- elements - one or more elements at a time may be selected. * -- all - Only the entire contents as a whole can be selected. * * Browsers support: IE10+, Fx0.6+, Chrome, Safari * Notable lack of support: IE9-, Opera * */ /* * Columns layout * * Divide a block of text into columns as seen in newspapers. * * Basic usage: * Use .columns() class providing in brackets arguments for columns. * Non of those arguments are required, but unless you provide one, columns * layout won't work. Available arguments: * -- integer - declare a column-count. Unless declared, their width will * equal to division of the block's width minus column-gaps and declared integer. * Default value is "auto" which means that width of columns will be determined * by column-width value. * -- width - declare every column width in px, em and % (of containing block). * Default value is "auto" - column width will be equal to division of the * block's width and declared column-count * * Usage of supporting classes: * You can declare the gaps between columns by .column-gap() class that takes * width type argument. Default value is "normal" and equals to 1em. * * Declare a vertical rule between columns using .column-rule(). It's the same * type of declaration as in borders, that is width, style and colour. By default * there is no rule. * * Browsers support: IE10+, Fx, Chrome, Safari, Opera, Opera Mobile, Android Browser * Notable lack of support: IE9-, Opera Mini * * Example: * 1. .column(2, 20px) // Two columns with 20px width. * 2. .column(5) // Five columns layout. * 3. element { * .column(100px); // A 100px width columns * .column-gap(10px); // with 10px gap between * .column-rule(1px solid black); // and 1px thick, solid, black vertical rule. * } * */ /* * Transform * 2D and 3D transformation of an object. * * You can use classes dedicated to specifics transformation, but if you plan * to use multiple transformation on an object, use general classes .transform * or .transform3d instead. Otherwise the latter transform will override the former. * If you want to use some of the 3D transformations, use .transform3d class. It * has a 3D specific property transform-style included. You can put both 3D and 2D * transformations in .transform3D. * * Transforms don't affect an object's place in a document and its environment * so there's no risk of crashing a layout. * * Transformations characteristics: * -- Rotate takes one argument and rotate object clockwise by specified angle (in deg). * -- Scale takes one or two arguments (x,y). If y is not specified it is assumed that x = y. * Arguments in interval (0,1) shrink the object. Arguments >1 makes it bigger. * -- Skew takes one or two arguments (x,y). If y is not specified it is assumed that y = 0 (no y-skew). * Arguments must be in deg. * -- Translate takes one or two arguments (w,y). If y is not specified it is assumed y = 0 (no y-translate). * Arguments are in px or em. Translate moves the object by specified value. * * Sometimes you might want to control the point that is the relative base of transformations. * For that reason use .transform-origin class. That class takes one or two values. * First value defines horizontal position of that point, second refers to vertical position. * In case you provide only the first value, the second is set to 50%. Default value is (50% 50%). * You can use three types of values: * -- pixels that place origin point in position according to the top-left corner of an element * to its bottom-right corner. Negative values allowed - in that case position goes to the left * and top from the top-left corner, * -- percentages that are relative to object's width and height. As in px, the original position * is top-left corner (0% 0%), and goes to bottom-right (100% 100%). Negative values does the * same as in px. * -- keywords: left / center / right for x-axis and top / center / bottom for y-axis. * * For 3D transformations you can set a perspective using .perspective() class and putting * value in brackets . * * Browsers support: IE9+, Fx3,5+, Chrome, Safari, Opera, Opera Mobile, Android Browser * Notable lack of support: IE8-*, Opera Mini * * You can use some of the transformation in older IE through filter property. * To generate that property refer to -> css3please.com. * You can also emulate scale property with zoom property. * * Examples: * 1. .scale(2,.5) // Stretch an object two times and shrink in height by half. * 2. .rotate(180deg) // Rotate an object by 180deg. * 3. .transform(.scale(2,.5),rotate(180deg)) // Does the combined transformation from examples above. * 4. .transform-origin(20% top) // Place the transformation origin at the top, 20% of the object's * // width to the right from the top-left corner. */ /* * Transition * Animate a change between different object states. * * You can use this class to animate change of up to 5 different properties. * If you need more that that (wow!) it's easy to add more of these classes. * * Transition takes 4 values: * -- transition-property - choose a property you want to animate (margin, colour etc.). * Default value is "all" which will animate every change that might happen. It's a good * idea to explicitly write this value if you want to animate everything, though. We can't * be sure if in the future default state won't change to "none", which will break the whole transition. * -- transition-duration - specifies how long transition animation will have to take * until animation is finished. Put values in s (seconds) or ms (milliseconds). * Required value, since default state is 0s (no animation occurs). * -- transition-timing-function - this value describe an acceleration function. It can * really affect overall experience, so it's good idea to pay attention to that. * Timing function takes 4 number values of keywords: linear, ease, ease-in, * ease-in-out, ease-out. For further explanation refer to ->developer.mozilla.org/en/CSS/timing-function * Default value is "ease". * -- transition-delay - in seconds or millisecond describes how long transition will wait * until it occurs after a triggering requirement was met. Default value is 0 - instant animation. * * In case you want to put a transformation property into transition effect, use * the .transition-transform class. This class is prepared to automatically add * many browsers prefixes required in that case. It is also a bit future friendly, * but all at all using transitions on transform is very risky. * -> http://radiatingstar.com/transition-with-transform-cant-be-future-proof * * Usage: * For .transition class, put in brackets at least a time value. If you want to animate more than one * property or animate everything with different functions, put up to 5 declarations separated with * commas. If one of the property you want to animate is "transform" _and_ you want to animate every * other properties (or at least not with the same functions), use .transition-transform. As a first * value put a time duration for transform property. Do not write this property though. It's auto-added * for the first set of values. Add other properties after commas. Refer to the example 3. * * Browsers support: IE10+, Fx4+, Chrome, Opera, Safari, Opera Mobile, Android Browser * Notable lack of support: IE9-, Fx3.6-, Opera Mini * *** Transition provides only a visual effects between states. It's perfectly * *** safe to use. Users with older browser just won't see a phase of changing. * * Examples: * 1. .transition (all 1s); // Animate all properties for 1 second. * 2. .transition (background-color 5s, margin 1s linear 5s) // Animate change of background-color for 5s * // and after 5s animate margin change for 1s. * 3. .transition-transform (2s linear, padding 3s) // Animate change of transform property (no "transform" declared!) * // and padding property. */ /* * Animations * * Create an awesome animation! * * This class takes from two to five properties: * -- animation-name [required] - declare your @keyframes animation name. See below * for an easy way to make @keyframes! * -- animation-duration [required] - declare how long will it take for an animation * to reach end. Value in seconds (s) or milliseconds (ms). * -- timing-function - it's the same property as in transition. Refer to * that topic for further explanation. * -- iteration-count - how many times an animation will repeat. It takes integer * or "infinite" keyword (for infinite repetition). Default value is 1. * -- direction - indicates whether the animation should play in reverse on * alternate cycles. Refer to ->developer.mozilla.org/en/CSS/animation-direction * for better explanation. To declare a direction use normal [default value], * alternate, reverse or alternate-reverse keyword. * * Resources: * -- developer.mozilla.org/en/CSS/animation * * Creating @keyframes: * Write in your .less file: * *** @import 'animationX.less'; * where X stands for a number between 1 and 5. Then create a class * *** .animationX () {} * and in {} write declarations you normally write in @keyframes. * Then just put an .animation(animationX [other animation properties]) class in your element. * That's all! * * Example: * .toBeAnimated { * // Animation with every possible value declared. // * .animation(animation1 5s linear 3s infinite alternate); * } * // Importing prefixed @keyframes for animation1. * @import 'animation1'; * * // Declaring @keyframes for animation. Only once! * .animation1() { * from {margin-top: 3px;} * to {margin-top: 333px;} * } * */ /* normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */ /* ============================================================================= Normalize.css is intended to be used as an alternative to CSS resets. It is suggested that you read through the normalize.css file and customise it to meet the design requirements of a project rather including it as a "black box". @see http://nicolasgallagher.com/about-normalize-css/ Also: @see http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/ @see http://snook.ca/archives/html_and_css/no_css_reset/ ========================================================================== */ /* ============================================================================= HTML5 display definitions ========================================================================== */ /* * Corrects block display not defined in IE6/7/8/9 & FF3 */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, 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 ========================================================================== */ /* Instead of relying on the fonts that are available on a user's computer, you can use web fonts which, like images, are resources downloaded to the user's browser. Because of the bandwidth and rendering resources required, web fonts should be used with care. Numerous resources for web fonts can be found on Google. Here are a few websites where you can find Open Source fonts to download: - http://www.fontsquirrel.com/fontface - http://www.theleagueofmoveabletype.com In order to use these fonts, you will need to convert them into formats suitable for web fonts. We recommend the free-to-use Font Squirrel's Font-Face Generator: http://www.fontsquirrel.com/fontface/generator The following is an example @font-face declaration. This font can then be used in any ruleset using a property like this: font-family: Example, serif; Since we're using Sass, you'll need to declare your font faces here, then you can add them to the font variables in the _base.scss partial. */ /* @font-face { font-family: 'Example'; src: url('../fonts/example.eot'); src: url('../fonts/example.eot?iefix') format('eot'), url('../fonts/example.woff') format('woff'), url('../fonts/example.ttf') format('truetype'), url('../fonts/example.svg#webfontOkOndcij') format('svg'); font-weight: normal; font-style: normal; } */ /* * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units * http://clagnut.com/blog/348/#c790 * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ html { /* * To use a 14px font size on the page, delete the 16px and 12px declarations. * To use a 12px font size on the page, delete the 16px and 14px declarations. */ /* Use a 12px base font size */ /* font-size: 75%; 16px x 75% = 12px */ /* Use a 14px base font size */ font-size: 100%; /* 16px x .875 = 14px */ /* Use a 16px base font size */ /* font-size: 100%; 1 */ /* Webkit font smoothing*/ -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ /* Establish a vertical rhythm. */ line-height: 1.5em; } /* * Instead of relying on the fonts that are available on a user's computer, you * can use web fonts which, like images, are resources downloaded to the user's * browser. Because of the bandwidth and rendering resources required, web fonts * should be used with care. * * Numerous resources for web fonts can be found on Google. Here are a few * websites where you can find Open Source fonts to download: * - http://www.fontsquirrel.com/fontface * - http://www.theleagueofmoveabletype.com * * In order to use these fonts, you will need to convert them into formats * suitable for web fonts. We recommend the free-to-use Font Squirrel's * Font-Face Generator: * http://www.fontsquirrel.com/fontface/generator * * The following is an example @font-face declaration. This font can then be * used in any ruleset using a property like this: font-family: Example, serif; @font-face { font-family: 'Example'; src: url('../fonts/example.eot'); src: url('../fonts/example.eot?iefix') format('eot'), url('../fonts/example.woff') format('woff'), url('../fonts/example.ttf') format('truetype'), url('../fonts/example.svg#webfontOkOndcij') format('svg'); font-weight: normal; font-style: normal; } */ /* * Addresses font-family inconsistency between 'textarea' and other form elements. */ html, button, input, select, textarea { /* The following font family declarations are based on the Microsoft core web * fonts which are common fonts available on most computer systems. The DejaVu * and Nimbus Sans fonts are commonly available on Linux systems where the MS * fonts are less common. Tahoma and Helvetica are also widely available. * * A user's web browser will look at the comma-separated list and will * attempt to use each font in turn until it finds one that is available * on the user's computer. The final "generic" font (sans-serif, serif or * monospace) hints at what type of font to use if the web browser doesn't * find any of the fonts in the list. font-family: "Times New Roman", Times, Georgia, "DejaVu Serif", serif; font-family: Times, "Times New Roman", Georgia, "DejaVu Serif", serif; font-family: Georgia, "Times New Roman", "DejaVu Serif", serif; font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif; font-family: Tahoma, Verdana, "DejaVu Sans", sans-serif; font-family: Helvetica, Arial, "Nimbus Sans L", sans-serif; font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif; font-family: "Courier New", "DejaVu Sans Mono", monospace; */ font-family: Arial, Helvetica, Verdana, Sans-Serif; } body { width: 100%; margin: 0; padding: 0; } /* ============================================================================= Links ========================================================================== */ /* * Improves readability when focused and also mouse hovered in all browsers * people.opera.com/patrickl/experiments/keyboard/test */ a:focus, a:hover, a:active { outline: 0 none; } /* ============================================================================= Typography ========================================================================== */ h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.17em; } h4 { font-size: 1em; } h5 { font-size: 0.83em; } h6 { font-size: 0.75em; } /* Thematic break */ hr { height: 1px; border: 1px solid #666; padding-bottom: -1px; margin: 1.5em 0; } /* * Addresses styling not present in IE7/8/9, S5, Chrome */ abbr[title] { border-bottom: 1px dotted; cursor: help; white-space: nowrap; } /* * Addresses style set to 'bolder' in FF3+, S4/5, Chrome */ b, strong { font-weight: bold; } blockquote { /* Sets 1 unit of vertical rhythm on the top and bottom margin. */ margin: 1.5em 30px; } /* * Addresses styling not present in S5, Chrome */ dfn { font-style: italic; } /* * Addresses styling not present in IE6/7/8/9 */ mark { background: #ffd75c; color: #000; } /* * Addresses margins set differently in IE6/7 */ p, pre { /* Sets 1 unit of vertical rhythm on the top and bottom margin. */ margin: 1.5em 0; } /* align checkboxes, radios, text inputs with their label */ input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; } /* * Corrects font family set oddly in IE6, S4/5, Chrome * en.wikipedia.org/wiki/User:Davidgothberg/Test59 */ pre, code, kbd, samp, tt, var { font-family: "Courier New", "DejaVu Sans Mono", monospace, sans-serif; _font-family: 'courier new', monospace; font-size: 1em; line-height: 1.5em; } /* * Improves readability of pre-formatted text in all browsers */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } /* * 1. Addresses CSS quotes not supported in IE6/7 * 2. Addresses quote property not supported in S4 */ /* 1 */ q { quotes: none; } /* 2 */ q:before, q:after { content: ''; content: none; } /* @todo Determine how big element affects vertical rhythm. */ 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, .item-list ul { /* Sets 1 unit of vertical rhythm on the top and bottom margin. */ margin: 0 0 1.5em 0; } .item-list ul li { /* Drupal override */ margin: 0; } dd { margin: 0 0 0 30px; /* LTR */ } ul ul, ul ol, ol ul, ol ol, .item-list ul ul, .item-list ul ol, .item-list ol ul, .item-list ol ol { margin: 0; /* Turn off margins on nested lists. */ } /* * Addresses paddings set differently in IE6/7 */ menu, ol { padding: 0 0 0 30px; /* LTR */ } ul, .item-list ul { padding: 0 0 0 10px; /* LTR */ list-style: none; } /* * 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 */ /* vertical-align: bottom; */ /* Suppress the space beneath the baseline */ /* Responsive images */ /* @todo Add responsive embedded video. */ max-width: 100%; height: auto; } /* * Corrects overflow displayed oddly in IE9 */ svg:not(:root) { overflow: hidden; } /* bicubic resizing for non-native sized IMG: code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ .ie7 img { -ms-interpolation-mode: bicubic; } /* ============================================================================= 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 { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.5em 0.625em 1em; } /* * 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 */ /* LTR */ } /* * 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 */ } /* * 1. Improves usability and consistency of cursor style between image-type 'input' and others * 2. Corrects inability to style clickable 'input' types in iOS * 3. Removes inner spacing in IE7 without affecting normal text inputs * Known issue: inner spacing remains in IE6 */ button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; /* 1 */ -webkit-appearance: button; /* 2 */ *overflow: visible; /* 3 */ } /* * 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"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; 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 */ -webkit-box-sizing: content-box; /* 2 */ -moz-box-sizing: content-box; box-sizing: content-box; } /* * Removes inner padding and search cancel button in S5, Chrome on OS X */ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } /* * Removes inner padding and border in FF3+ * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */ 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; /* width: 100%; */ /* Prevent cramped-looking tables */ /* Add vertical rhythm margins. */ margin-top: 1.5em; margin-bottom: 1.5em; border: 1px solid #969696; } caption { background: #2d2d2d; padding: 5px; color: #fff; font-weight: bold; } /* * Drupal provides table styling which is only useful for its admin section * forms, so we override this default CSS. (We set it back in forms.css.) */ th { /* text-align: left; LTR */ padding: 0; border-bottom: none; } tr th, thead th { color: #fff; font-weight: normal; background-color: #4f4f4f; border-right: 1px solid #969696; padding: 10px; } tr td { border-top: 1px solid #969696; border-right: 1px solid #969696; padding: 10px; } tr.odd td { background: #f2f7fc; } tbody { border-top: none; } /* ============================================================================= Reset specific only for default browser values ========================================================================== */ p, ul, ol { margin-top: 0; } h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 0 0 0.5em 0; padding: 0; line-height: normal; } /* ============================================================================= Common classes useful on html ========================================================================== */ .to-left { float: left; } .to-right { float: right; } .uppercase { text-transform: uppercase; } .relative { position: relative; } #comments-list ul #respond { margin: 0; } #comments-list #respond { margin: 0 0 18px 0; } #content .wp-caption { background: #f1f1f1; line-height: 18px; margin-bottom: 20px; padding: 4px; text-align: center; } #content .wp-caption p.wp-caption-text { color: #888; font-size: 12px; margin: 5px; } #content .wp-caption img { margin: 5px 5px 0; } #content .wp-smiley { margin: 0; } #content .attachment img { max-width: 900px; display: block; margin: 0 auto; } #content .gallery { margin: 0 auto 18px; } #content .gallery img { border: 2px solid #cfcfcf; border: 10px solid #f1f1f1; } #content .gallery br + br { display: none; } #content .gallery .gallery-item { float: left; margin-top: 0; text-align: center; width: 33%; } #content .gallery dl { margin: 0; } #content .gallery .gallery-caption { color: #888; font-size: 12px; margin: 0 0 12px; } #content ol { margin-left: 20px; } #content ol li { list-style-type: decimal; margin-bottom: 5px; } input[type=submit] { color: #333; } .comment-meta { font-size: 12px; margin: 0 0 18px 0; } .children #respond { margin: 0 48px 0 0; } .comment-meta a:active, .comment-meta a:hover { text-decoration: underline; } .navigation a:active, .navigation a:hover { color: #ff4b33; } .navigation a:link, .navigation a:visited { color: #888; text-decoration: none; } .reply a:hover, a.comment-edit-link:hover { text-decoration: underline; } h3#comments-title { padding: 24px 0; } #comments { clear: both; } #comments .pingback { border-bottom: 1px solid #e7e7e7; margin-bottom: 18px; padding-bottom: 18px; } #comments .pingback .url { font-size: 13px; font-style: italic; } #comments .pingback p { color: #888; display: block; font-size: 12px; line-height: 18px; margin: 0; } #comments .navigation { padding: 0 0 18px 0; } #comments .comment-body blockquote p:last-child { margin-bottom: 24px; } #comments .comment-body p:last-child { margin-bottom: 6px; } #content ul, #content-home ul, #sidebar li { margin-left: 20px; margin-bottom: 5px; } .nav-previous { float: left; width: 50%; } .navigation { color: #888; font-size: 12px; line-height: 18px; } .widget_tag_cloud .tagcloud { margin-bottom: 20px; } .form-allowed-tags { line-height: 1em; } #respond { border-top: 1px solid #e7e7e7; margin: 24px 0; overflow: hidden; position: relative; } #respond label { color: #888; font-size: 12px; } #respond .required { color: #ff4b33; font-weight: bold; } #respond .form-allowed-tags { color: #888; font-size: 12px; line-height: 18px; } #respond .form-allowed-tags code { font-size: 11px; } #respond p { margin: 0; } #respond textarea { width: 98%; } #respond .comment-notes { margin-bottom: 1em; } #respond .form-submit { margin: 12px 0; } #respond .form-submit input { font-size: 14px; width: auto; } #respond input { margin: 0 0 9px; width: 98%; } #nav-above { margin: 0 0 18px 0; display: none; } .comment-meta a:link, .comment-meta a:visited { color: #888; text-decoration: none; } img.alignleft, img.alignright, img.aligncenter { margin-bottom: 12px; } #content img.alignleft, #content img.alignright, #content img.aligncenter { margin-bottom: 12px; } .aligncenter, img.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } #cancel-comment-reply-link { font-size: 12px; font-weight: normal; line-height: 18px; } h3#reply-title { margin: 18px 0; } #content .aligncenter, #content img.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } #content .alignleft, #content img.alignleft { display: inline; float: left; margin-right: 24px; margin-top: 4px; } .hentry { margin-bottom: 20px; } .reply a, a.comment-edit-link { color: #888; } .commentlist { list-style: none; margin: 0; } .commentlist .children { list-style: none; margin: 0; } .commentlist .children li { border: none; margin: 0; } .commentlist li.comment { border-bottom: 1px solid #e7e7e7; line-height: 24px; margin: 0 0 24px 0; padding: 0 0 0 56px; position: relative; } .commentlist li.comment + li.pingback { margin-top: -6px; } .commentlist li:last-child { border-bottom: none; margin-bottom: 0; } .commentlist .avatar { position: absolute; top: 4px; left: 0; } .commentlist ol { list-style: decimal; } .alignleft, img.alignleft { display: inline; float: left; margin-right: 24px; margin-top: 4px; } .comment-author cite { color: #000; font-style: normal; font-weight: bold; } .comment-author .says { font-style: italic; } #comments .comment-body ul, #comments .comment-body ol { margin-bottom: 18px; } h3#comments-title, h3#reply-title { color: #000; font-size: 20px; margin-bottom: 0; } .paged #nav-above, .single #nav-above { display: block; } .nav-next { float: right; text-align: right; width: 50%; } .alignright, img.alignright { display: inline; float: right; margin-left: 24px; margin-top: 4px; } #content .alignright, #content img.alignright { display: inline; float: right; margin-left: 24px; margin-top: 4px; } .nopassword, .nocomments { display: none; } .reply { font-size: 12px; padding: 0 0 24px 0; } /* Theme Name: inQbation/es, for WordPress Theme URL: http://www.inqbation.com Author: inQbation Version: 2.0 */ body { background-color: #f4f4f4; font-size: 0.875em; } .row { position: relative; } a { text-decoration: none; color: #205e7b; } a:hover { color: #5c7908; } /* ----------------------------------------- Templates ----------------------------------------- */ #full-screen { background: red; } /* ----------------------------------------- GUI Elements ----------------------------------------- */ .icon { background: transparent url(images/elements.png) no-repeat 0 0; display: inline-block; margin-right: 10px; } .twitter-icon, .facebook-icon, .linkedin-icon, .pinterest-icon, .facebook-like-icon, .google-plus-icon { width: 24px; height: 24px; text-indent: -999px; overflow: hidden; } .comments-closed, .comments-link { background-position: -400px 0; text-indent: -999px; overflow: hidden; width: 20px; height: 18px; cursor: pointer; } .comments-closed:hover, .comments-link:hover { background-position: -400px -50px; } .twitter-icon { background-position: -350px 0; } .twitter-icon:hover { background-position: 0 0; } .facebook-icon { background-position: -350px -50px; } .facebook-icon:hover { background-position: 0 -50px; } .linkedin-icon { background-position: -350px -100px; } .linkedin-icon:hover { background-position: 0 -100px; } .pinterest-icon { background-position: -350px -150px; } .pinterest-icon:hover { background-position: 0 -150px; } .google-plus-icon { background-position: -350px -200px; } .google-plus-icon:hover { background-position: 0 -200px; } .icon-phone { background-position: -100px -50px; width: 22px; height: 18px; } .icon-email { background-position: -100px -100px; width: 21px; height: 16px; } .icon-location { background-position: -100px 0; width: 20px; height: 25px; } .icon-facebook-like { background-position: -99px -147px; width: 20px; height: 20px; } .icon.icon-facebook-like { margin-right: 8px; } .linked-in-profile { border-bottom: 1px solid #DBDBDB; float: left; margin-bottom: 20px; padding-bottom: 20px; width: 100%; } .linked-in-profile span { float: left; margin-right: 5px; background-position: 0 -100px; } .linked-in-profile span:hover { background-position: 0 -100px; } .linked-in-profile a { float: left; } .project-manager { background: transparent url(images/project-manager-cartoon.png) no-repeat 0 0; width: 439px; height: 571px; position: absolute; top: -10px; right: -10px; z-index: 10; } /*.ribbons{ background: transparent url(images/ribbons.png) no-repeat 0 0; width: 1002px; height: 478px; position: absolute; bottom: 0; left: -199px; z-index: 5; }*/ /* Table */ table { border: 0 none; font-size: 13px; width: 100%; margin: 0 0 0.5em 0; } table tbody { border-left: 4px solid #ffffff; border-right: 4px solid #ffffff; border-top: 0 none; border-bottom: 4px solid #ffffff; } table tr td { border-left: 1px solid #cecece; border-right: 0 none; border-top: 0 none; border-bottom: 0 none; line-height: normal; vertical-align: top; padding: 10px; } table tr td:first-child { border-left: 0 none; } table tr:nth-child(odd), table tr:nth-child(odd) td { background-color: #ffffff; } table tr:nth-child(even), table tr:nth-child(even) td { background-color: #f7f7f7; } table tr th, table thead th { background: #88a33a; color: #ffffff; font-weight: bold; font-size: 14px; border-left: 1px solid #cecece; border-right: 0 none; border-top: 0 none; border-bottom: 0 none; padding: 9px; } table tr th:first-child, table thead th:first-child { border-left: 0 none; } /* ----------------------------------------- Header ----------------------------------------- */ .site-title { position: relative; height: 80px; } .site-title h1, .site-title span { margin: 0px; padding: 0px; font-size: 1em; } .site-title h1 a, .site-title span a { height: 75px; width: 240px; display: inline-block; } .site-title h1 a img, .site-title span a img { display: inline-block; } .site-title h2.subheader, .site-title span.subheader { margin: 0px; padding: 0px; position: absolute; font-size: 11px; letter-spacing: normal; font-family: Arial, Helvetica, Verdana, Sans-Serif; color: #666666; min-width: 200px; line-height: 1.2em; top: 52px; left: 103px; } #header { background-color: #ffffff; height: 80px; } #header hgroup { height: 80px; } #header #header-cotainer-right { padding-top: 20px; position: relative; } /* language link */ .language-english a { width: 24px; height: 24px; background-image: url("images/sprite.png"); background-repeat: no-repeat; background-position: -140px -350px; text-indent: -9999px; margin-left: 1%; margin-right: 0px; float: right; margin-top: 7px; } .language-english a:hover { background-position: -210px -350px; } #background_texture { background: #003b53 url(images/background-texture.jpg) no-repeat fixed center top; height: 55px; width: 100%; color: #ffffff; } #background_texture .container_24 { position: relative; } #share-icons-internal { color: #ffffff; } #share-icons-internal .title-follow { float: left; } #share-icons-internal ul { margin: 15px 0 0 0; padding: 0; float: right; position: relative; } #share-icons-internal ul li { display: inline-block; line-height: 24px; margin-left: 5px; vertical-align: top; } #share-icons-internal .twitter-icon, #share-icons-internal .facebook-icon, #share-icons-internal .linkedin-icon, #share-icons-internal .pinterest-icon, #share-icons-internal .google-plus-icon, #share-icons-internal .english { background: transparent url(images/elements.png) no-repeat 0 0; height: 24px; margin-left: 1%; margin-right: 0; text-indent: -9999px; width: 24px; display: block; } #share-icons-internal .twitter-icon { background-position: -50px 0; } #share-icons-internal .twitter-icon:hover { background-position: 0 0; } #share-icons-internal .facebook-icon { background-position: -50px -50px; } #share-icons-internal .facebook-icon:hover { background-position: 0 -50px; } #share-icons-internal .linkedin-icon { background-position: -50px -100px; } #share-icons-internal .linkedin-icon:hover { background-position: 0 -100px; } #share-icons-internal .pinterest-icon { background-position: -50px -150px; } #share-icons-internal .pinterest-icon:hover { background-position: 0 -150px; } #share-icons-internal .google-plus-icon { background-position: -50px -200px; } #share-icons-internal .google-plus-icon:hover { background-position: 0 -200px; } #share-icons-internal .english { background-position: -50px -250px; } #share-icons-internal .english:hover { background-position: 0 -250px; } /* ----------------------------------------- Navigation ----------------------------------------- */ .header_menu { float: right; } #nav { position: relative; } #menu, #menu ul { margin: 0; padding: 0; list-style: none; } #menu:before, #menu:after { content: ""; display: table; } #menu:after { clear: both; } #menu { zoom: 1; } #menu li { float: left; position: relative; } #menu a { float: left; padding: 5px 8px; color: #333333; } #menu li:hover > a { color: #ffffff; background: #88a33a; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #menu li:hover li:hover > a { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } *html #menu li a:hover { color: #205e7b; } #menu ul { margin: 20px 0 0 0; top: 34px; left: 0; z-index: 100; border: 1px solid #cecece; display: none; position: absolute; } #menu li:hover > ul { margin: 0; display: block; } #menu ul ul { top: -1px; left: 100%; margin: 0 0 0 20px; } #menu ul li { float: none; display: block; border: 0; _line-height: 0; border-top: 1px solid #cecece; } #menu ul li:first-child { border: none; } #menu ul a { background: url("images/white-transparent.png") repeat scroll left top transparent; padding: 10px; width: 200px; display: block; float: none; text-transform: none; } #menu ul a:hover { background: #88a33a; color: #ffffff; } #menu ul li:first-child > a:after { content: ''; position: absolute; left: 10px; top: -10px; border: 0 none; width: 22px; height: 10px; } #menu ul ul li:first-child a:after { left: -10px; top: 39%; margin-top: -6px; border: 0 none; width: 10px; height: 22px; } #menu ul li:first-child a:hover:after { border-bottom-color: #88a33a; } #menu ul ul li:first-child a:hover:after { border-right-color: #88a33a; border-bottom-color: transparent; } #menu .current_page_item > a, #menu .current-menu-parent > a, #menu .current_page_parent > a, #menu .current-page-ancestor > a, #menu .current_page_ancestor > a { color: #ffffff; font-weight: 600; background: #205e7b; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #menu .current_page_item:hover > a, #menu .current-menu-parent:hover > a, #menu .current_page_parent:hover > a, #menu .current-page-ancestor:hover > a, #menu .current_page_ancestor:hover > a { color: #ffffff; } #menu li:hover ul .current_page_item > a, #menu li:hover ul .current-menu-parent > a, #menu li:hover ul .current_page_parent > a, #menu li:hover ul .current-page-ancestor > a { background: #88a33a; font-weight: 600; color: #ffffff; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #menu li:hover ul .current_page_item > a:hover, #menu li:hover ul .current-menu-parent > a:hover, #menu li:hover ul .current_page_parent > a:hover, #menu li:hover ul .current-page-ancestor > a:hover { background: #88a33a; color: #ffffff; } #sidebar-left { margin-top: -28px; } #sidebar-left .sidebar-header-left { font-family: "Open Sans", "Helvetica", Arial, sans-serif; font-size: 1.643em; font-weight: 300; border-bottom: 2px solid #cecece; padding: 25px 10px; color: #7c7c7c; background: transparent url(images/sidebar-left-title.png) repeat-x left bottom; } #sidebar-left ul { margin: 0; padding: 0; background: #ffffff; } #sidebar-left ul li { list-style: none; margin: 0; padding: 0; } #sidebar-left ul li a { background: #fefefe url(images/bullet-gray.png) no-repeat 10px 18px; display: block; color: #555555; padding: 10px 10px 10px 23px; border-bottom: 1px solid #cecece; } #sidebar-left ul li a:hover { background: #88a33a url(images/bullet-white.png) no-repeat 10px 18px; color: #ffffff; } #sidebar-left ul li.current_page_item a, #sidebar-left ul li.current_page_parent a, #sidebar-left ul li.current_page_ancestor a { background: #88a33a url(images/bullet-white.png) no-repeat 10px 18px; color: #ffffff; } #sidebar-left ul li.current_page_item ul li a, #sidebar-left ul li.current_page_parent ul li a, #sidebar-left ul li.current_page_ancestor ul li a { background: #f9f9f9; color: #555555; padding: 5px 10px 5px 23px; font-size: 0.929em; } #sidebar-left ul li.current_page_item ul li a:hover, #sidebar-left ul li.current_page_parent ul li a:hover, #sidebar-left ul li.current_page_ancestor ul li a:hover { color: #5c7908; } #sidebar-left ul li.current_page_ancestor ul li.current_page_item a, #sidebar-left ul li.current_page_ancestor ul li.current_page_parent a { font-weight: 600; color: #5c7908; background: #f9f9f9; } #sidebar-left ul li.current_page_ancestor ul li.current_page_item ul li a, #sidebar-left ul li.current_page_ancestor ul li.current_page_ancestor ul li a { font-weight: normal; background: #ffffff url(images/bullet-green.gif) no-repeat 25px 13px; padding-left: 36px; color: #555555; } #sidebar-left ul li.current_page_ancestor ul li.current_page_item ul li a:hover, #sidebar-left ul li.current_page_ancestor ul li.current_page_ancestor ul li a:hover { color: #5c7908; } #sidebar-left ul li.current_page_ancestor ul li.current_page_ancestor ul li.current_page_item a { background: #ffffff url(images/bullet-green.gif) no-repeat 25px 13px; padding-left: 36px; color: #555555; font-weight: 600; } #sidebar-left ul.menu li.current_page_item ul, #sidebar-left ul.menu li.current_page_parent ul, #sidebar-left ul.menu li.current_page_ancestor ul, #sidebar-left ul.menu li.current_page_ancestor ul li.current_page_parent ul, #sidebar-left ul.menu li.current_page_parent ul.children li.current_page_item ul { display: block; } #sidebar-left ul.menu ul.children, #sidebar-left ul.menu li.current_page_item ul ul, #sidebar-left ul.menu li.current_page_ancestor ul ul { display: none; } /* ----------------------------------------- Breadcrumbs ----------------------------------------- */ #breadcrumbs { font-size: 0.929em; padding: 15px 0px 10px 0px; } #breadcrumbs a { background: transparent url(images/separator-breadcrumb.png) no-repeat right 10px; padding-right: 15px; margin-right: 10px; float: left; } /* ----------------------------------------- Slider ----------------------------------------- */ #main-slider #slider .slide-info { top: auto; right: 70px; bottom: 0px; background-color: #ffffff; filter: alpha(opacity= 100 ); -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); filter: alpha(opacity=100); -moz-opacity: 0.9; -khtml-opacity: 0.9; -webkit-opacity: 0.9; opacity: 0.9; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); filter: alpha(opacity=90); } #main-slider #slider .slide-info h2.title-slide, #main-slider #slider .slide-info h2 { color: #195e7d; letter-spacing: -0.05em; font-weight: 400; font-size: 2.500em; /* 35px */ line-height: 1.2em; margin-bottom: 5px; } #main-slider #slider .slide-info h3.subtitle-slide, #main-slider #slider .slide-info h3 { color: #88a33a; letter-spacing: -0.05em; font-weight: 400; font-size: 1.786em; /* 25px */ line-height: 1.2em; } #main-slider #slider .slide-info a.view { background-color: #205e7b; color: #ffffff; padding: 7px 10px; } #main-slider #slider .slide-info a.view:hover { background-color: #88a33a; } /* ----------------------------------------- Logos clients home page ----------------------------------------- */ h3.title-clients { font-weight: 400; color: #333333; font-size: 1.857em; letter-spacing: -1px; margin-bottom: 0px; padding: 12px 0px; border-bottom: dotted 1px #cecece; } h3.title-clients span { color: #88a33a; font-weight: 700; } .full-width { width: 100%; background-color: #ffffff; } #logos-clients { display: block; position: relative; } #logos-clients .slides li { text-align: center; } #logos-clients img { opacity: 0.6; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } #logos-clients img:hover { opacity: 1; } #logos-clients .flex-control-paging li a { height: 15px; width: 15px; background-color: #333333; } #logos-clients .flex-control-paging li a.flex-active { cursor: pointer; height: 15px; width: 15px; background-color: #88a33a; } /* ----------------------------------------- Boxes home page ----------------------------------------- */ .full-width-box { margin-top: 50px; padding-top: 40px; padding-bottom: 10px; width: 100%; background-color: #15506a; } .full-width-box #home-boxs { color: #ffffff; } .full-width-box #home-boxs #our-philosophy, .full-width-box #home-boxs #from-blog { border-right: solid 1px #195e7d; } .full-width-box #home-boxs #from-blog .date { float: left; width: 45px; height: 70px; margin-right: 7px; padding: 7px; border-right: solid 1px #195e7d; font-size: 1.286em; /*18px*/ text-align: center; } .full-width-box #home-boxs #from-blog .date span { font-size: 2.000em; /*28px*/ display: block; } .full-width-box #home-boxs #from-blog h3 { display: inline; } .full-width-box #home-boxs h2 { font-size: 2.000em; /*28px*/ color: #ffffff; padding-top: 70px; text-align: center; font-weight: 400; } .full-width-box #home-boxs h3 a { color: #88a33a; font-weight: 400; } .full-width-box #home-boxs a.link-green { padding: 5px 9px; background-color: #5c7908; color: #ffffff; } .full-width-box #home-boxs a.link-green:hover { color: #5c7908; background-color: #ffffff; } /* ----------------------------------------- Content ----------------------------------------- */ #content { /* Paginator */ } #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { font-weight: 400; } #content ul li { background: transparent url(images/separator-breadcrumb.png) no-repeat 0 14px; padding: 5px 0 5px 10px; list-style: none; } #content .follow-buttons-post { float: left; padding-top: 6px; } #content .follow-buttons-post ul { margin: 0; padding: 0; } #content .follow-buttons-post ul li { background: none; float: left; padding: 0; } #content .follow-buttons-post ul li a { margin-left: 10px; margin-right: 0; } #content .content-blog .post { margin-bottom: 20px; } #content .content-blog .post .entry-summary { margin-bottom: 20px; } #content .content-blog .post .entry-summary p { margin-bottom: 0; } #content .content-blog .post .follow-buttons-post { margin-bottom: 20px; } #content .content-blog .post .post-listing { clear: both; } #content .content-blog .post .post-listing a { display: block; padding: 5px 0 5px 15px; background: url("images/separator-breadcrumb.png") no-repeat scroll left 13px transparent; border-bottom: 1px dotted #cecece; } #content .content-blog .post .entry-utility span { border-right: 1px solid #A0A5A9; display: block; margin-right: 10px; margin-top: 10px; padding-right: 10px; float: left; } #content .content-blog .post h3 { font-size: 1.429em; } #content .content-blog .post h2 { border-bottom: 1px dotted #cecece; font-weight: 600; font-size: 1.429em; } #content .content-blog .post h2 a { color: #003b53; } #content .content-blog .post h2 a:hover { color: #5c7908; } #content .content-blog .post .entry-meta, #content .content-blog .post .entry-image, #content .content-blog .post .entry-title, #content .content-blog .post .entry-content, #content .content-blog .post .entry-meta, #content .content-blog .post .entry-image, #content .content-blog .post .entry-title, #content .content-blog .post .entry-content, #content .content-blog .post .read-more { margin-bottom: 8px; } #content.single .entry-meta { margin-bottom: 20px; } #content.single .entry-utility { clear: both; margin-bottom: 20px; } #content .pagination { text-align: center; } #content .pagination li { display: inline-block; background: none; vertical-align: text-top; margin: 0; padding: 0; } #content .pagination li a, #content .pagination li .pagination { display: inline-block; background: #ffffff; padding: 3px 10px; text-align: center; margin: 0 2px; border-bottom: 2px solid #dcdddf; } #content .pagination li a:hover, #content .pagination li .pagination:hover { border-color: #88a33a; } #content .pagination li .current { border-color: #88a33a; } #content .pagination li .current:hover { border-color: #88a33a; } #content .pagination li .prev, #content .pagination li .next { background: #ffffff url(images/elements.png) no-repeat; border-color: #205e7b; color: #ffffff; padding: 3px 15px; overflow: hidden; text-indent: -999px; } #content .pagination li .prev:hover, #content .pagination li .next:hover { border-color: #205e7b; color: #ffffff; } #content .pagination li .prev { background-position: -188px 10px; } #content .pagination li .next { background-position: -237px 10px; } #content .pagination li .dots { padding: 0; background: none; border: 0 none; } /* ----------------------------------------- Images ----------------------------------------- */ .widget img { max-width: 97.5%; /* Fluid images for posts, comments, and widgets */ } img[class*="align"], img[class*="wp-image-"] { height: auto; /* Make sure images with WordPress-added height and width >attributes are scaled correctly */ } img.size-full { max-width: 97.5%; width: auto; /* Prevent stretching of full-size images with height and >>width attributes in IE8 */ } .wp-caption { max-width: 100%; } /* ----------------------------------------- Posts ----------------------------------------- */ .author-box h5 { margin-top: 0px; } .author-box .author_gravatar { margin-right: 10px; } .author-box p { font-size: 14px; font-size: 1.4rem; } article .th { margin-bottom: 10px; margin-bottom: 1rem; } .alignleft { float: left; } .alignright { float: right; } /* ----------------------------------------- Typography ----------------------------------------- */ body, h1, h2, h3, h4, h5, h6 { font-family: "Open Sans", "Helvetica", Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { font-weight: 300; padding: 0; margin: 0 0 20px 0; letter-spacing: -1px; } h1 { color: #003b53; font-size: 2.500em; letter-spacing: -1px; } h2 { color: #333333; font-size: 2.000em; } h3 { color: #5c7908; font-size: 1.643em; } h4 { color: #7c7c7c; font-size: 1.357em; } h5 { color: #333333; font-size: 1.214em; } h6 { color: #5c7908; font-size: 1.071em; } .site-title .subheader { margin-bottom: 0; } /* ----------------------------------------- Forms ----------------------------------------- */ input[type="submit"], button { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; background: url("../images/buttons.gif") repeat-x scroll 0 0 #205e7b; padding: 7px 25px; color: #ffffff; cursor: pointer; font-family: "Open Sans", "Helvetica", Arial, sans-serif; font-size: 14px; font-weight: 600; border: 0 none; line-height: normal; text-align: center; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } input[type="submit"]:hover, button:hover { color: #ffffff; background-position: 0 bottom; background-color: #5c7908; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } fieldset { border-bottom: 1px dotted #67788D; } /* Input Fields */ input[type="text"], textarea, input[type="password"], input[type="search"], input[type="email"] { border-top: 1px solid #c3c3c3; border-bottom: 1px solid #e1e1e1; border-left: 1px solid #c3c3c3; border-right: 1px solid #e1e1e1; padding: 10px; } select { border: 1px solid #cecece; padding: 4px; } .form-item label { margin-bottom: 5px; } /* Zoom button */ input#searchsubmit { background: url("images/elements.png") no-repeat scroll -140px 6px #205e7b; padding: 7px 25px; color: #ffffff; cursor: pointer; font-family: "Open Sans", "Helvetica", Arial, sans-serif; font-size: 14px; font-weight: 600; border: 0 none; line-height: normal; text-align: center; height: 39px; vertical-align: top; margin-left: -3px; } input#searchsubmit:hover { color: #ffffff; background-color: #5c7908; } /* ----------------------------------------- Pagination ----------------------------------------- */ /* ----------------------------------------- Aside ----------------------------------------- */ #sidebar-right { float: right; margin-bottom: 20px; /* Tag cloud */ } #sidebar-right .sidebar-widget { background-color: #fefefe; padding: 20px; margin-bottom: 20px; border-bottom: 2px solid #cecece; } #sidebar-right ul { margin: 0; padding: 0; } #sidebar-right ul li { display: block; padding-top: 5px; padding-bottom: 5px; border-top: 1px dotted #cecece; } #sidebar-right ul li:first-child { border: 0 none; } #sidebar-right h2 { font-weight: 600; font-size: 1.429em; letter-spacing: -1px; color: #003b53; margin-bottom: 10px; } #sidebar-right .tagcloud { text-align: center; } /* Search widget */ .sidebar-widget .search-form, .sidebar-widget .widget_search { position: relative; } .sidebar-widget #s { width: 100%; padding-right: 57px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .sidebar-widget #searchsubmit { position: absolute; top: 0; right: 0; text-indent: -999px; } label.screen-reader-text { display: none; } /* ----------------------------------------- Footer ----------------------------------------- */ #footer { margin-top: 45px; } #footer #footer-content { position: relative; } #footer .menu { margin: 0; padding: 0; text-align: center; } #footer .menu li { padding: 0; margin: 0; list-style: none; display: inline-block; } #footer .menu li.current_page_item a { background: none repeat scroll 0 0 padding-box #205e7b; border-radius: 2px 2px 2px 2px; color: #FFFFFF; font-weight: 600; } #footer .menu li.current_page_item a:hover { color: #ffffff; } #footer .menu li a { padding: 5px 10px; color: #333333; } #footer .menu li a:hover { color: #205e7b; } #footer .menu ul { display: none; } .footer-top { background-color: #ffffff; padding-top: 30px; } .footer-top .container_24 { position: relative; } .character { background: transparent url(images/character-small.png) no-repeat 0 0; height: 241px; position: absolute; right: 0px; bottom: -59px; width: 228px; } .character .character-box { position: relative; } .character .facebook-like { position: absolute; right: 7px; top: 72px; } .footer-bottom { background: #f4f4f4 url(images/footer-background.gif) repeat-x center top; padding: 20px 0 50px 0; position: relative; z-index: 2; } .footer-widget .icon-location { display: inline; float: left; margin-bottom: 70px; } .footer-widget p { margin-bottom: 10px; } .footer-widget h2 { font-weight: 700; color: #003b53; font-size: 1.714em; letter-spacing: -1px; padding: 0; line-height: normal; } #copyright { text-align: center; padding-top: 20px; color: #848484; font-size: 0.929em; } /* ----------------------------------------- Blog Slider ----------------------------------------- */ .entry-meta { font-size: 0.929em; color: #666666; } #blog-slider .entry-meta { margin-bottom: 10px; } #blog-slider h2 { margin-bottom: 10px; } #blog-slider .read-more { margin-bottom: 10px; } #blog-slider .slider-image img { margin: 0 auto; display: block; } #blog-slider .pagination { margin-bottom: 40px; padding: 0; } #blog-slider .pagination li.current a { border-bottom-color: #88a33a; } #blog-slider .entry-summary .entry-content p { margin-bottom: 0; } #blog-slider .slides_container { background: #ffffff; border-bottom: 2px solid #cecece; margin-bottom: 10px; display: none; padding: 20px 0; } #blog-slider .slides_container div.slide { height: 270px; display: block; background: #ffffff; } #blog-slider .slides_container .slides_control { width: 100% !important; height: auto; } .slider-content .entry-utility, #main-content .post .entry-utility, #blog-aside-content .post .entry-utility, #main-category .post-by-category .entry-utility { display: inline; float: left; } .slider-content .entry-utility .comments-link, #main-content .post .entry-utility .comments-link, #blog-aside-content .post .entry-utility .comments-link, #main-category .post-by-category .entry-utility .comments-link { border-right: 1px solid #A0A5A9; display: block; padding-right: 10px; margin-top: 10px; margin-right: 10px; } .slider-content .follow-buttons-post { margin-bottom: 0px; margin-top: 0px; } #main-category .post-by-category .entry-meta, #main-category .post-by-category .entry-image, #main-category .post-by-category .entry-title, #main-category .post-by-category .entry-content { margin-bottom: 8px; } #blog-aside-content { padding: 20px 0px; } .post-by-category { padding-bottom: 30px; margin-bottom: 36px; float: left; } .widget-container .tagcloud { margin-bottom: 20px; text-align: center; } /* ----------------------------------------- Contact section ----------------------------------------- */ #background-map { height: 486px; background: transparent url(images/inQbation-location.png) no-repeat 0 0; position: relative; } #background-map .contact-content { background-color: #111111; filter: alpha(opacity= 100 ); -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); filter: alpha(opacity=100); -moz-opacity: 0.9; -khtml-opacity: 0.9; -webkit-opacity: 0.9; opacity: 0.9; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); filter: alpha(opacity=90); position: absolute; right: 0px; top: 20%; } #background-map .contact-content .contact-information { color: #ffffff; padding: 30px 40px; } #background-map .contact-content .contact-information p { border-top: dotted 1px #666666; margin-bottom: 15px; padding-top: 15px; } #background-map .contact-content .contact-information p:first-child { border-top: none 0px; } #background-map .contact-content .contact-information strong { font-size: 1.500em; /* 21px */ } /* ----------------------------------------- Custom Body Classes ----------------------------------------- */ body.error404 { background: #ffffff url(images/error-page-background.jpg) repeat-x left top; } body.error404 .logo { margin-bottom: 110px; } body.error404 .error404 { position: relative; } body.error404 .post { height: 572px; } body.error404 #content { padding-top: 20px; } body.error404 #content h2.error { background: transparent url(images/404.png) no-repeat 0 0; text-indent: -999px; overflow: hidden; height: 121px; clear: both; } body.error404 #content h3 { font-weight: 600; font-size: 2.857em; color: #5c7908; margin: 0; } body.error404 #content #searchform { margin-bottom: 20px; } body.error404 #content p { font-size: 1.214em; } body.error404 #header, body.error404 #background_texture { display: none; } /* ----------------------------------------- Content custom styles * Only use this group to create custom style inside of the content ----------------------------------------- */ #content .classic-menu ul { margin: 0; padding: 0; } #content .classic-menu ul li { background: none; padding: 0; display: inline-block; } #content .classic-menu ul li:first-child a { border: 0 none; } #content .classic-menu ul li a { display: inline-block; padding: 2px 10px; border-left: 1px solid #cecece; } #entry-author-info { float: left; } #wpcf7-f12420-p12418-o1 .text-field { float: left; width: 295px; } #wpcf7-f12420-p12418-o1 .text-field input[type="text"] { width: 250px; } #wpcf7-f12420-p12418-o1 .text-field > p { font-weight: bold; } #wpcf7-f12420-p12418-o1 .checkboxes .wpcf7-list-item { float: left; width: 295px; padding: 5px 0; margin: 0px; } #wpcf7-f12420-p12418-o1 .checkboxes .wpcf7-list-item label { display: block; } #wpcf7-f12420-p12418-o1 .checkboxes .wpcf7-list-item label input { float: left; margin-top: 6px; } .facebook-like iframe { z-index: 20; } /* ----------------------------------------- Blog sidebar ----------------------------------------- */ #content { /*p{ clear: both; }*/ } #content .tabberlive.style1 { background: transparent; padding: 0; } #content .tabberlive.style1 ul.tabbernav { margin: 0px 0px 5px 0px !important; padding: 0px !important; overflow: auto; border-bottom: 1px solid #cecece; width: 100%; text-align: center; } #content .tabberlive.style1 ul.tabbernav li { background: none; padding: 0px; margin: 0px; border: 0 none; display: inline-block; } #content .tabberlive.style1 ul.tabbernav li a { display: block; background-color: #f2f2f2; font-family: "Open Sans", "Helvetica", Arial, sans-serif; border-left: 1px solid #cecece; border-right: 1px solid #cecece; border-top: 1px solid #cecece; border-bottom: 0 none; font-weight: normal; font-size: 11px; margin: 0 2px; } #content .tabberlive.style1 ul.tabbernav li a:hover { color: #ffffff; background: #88a33a; } #content .tabberlive.style1 ul.tabbernav li.tabberactive a { background-color: #205e7b; } #content .tabbertab { margin: 0px ; padding: 0px; border: 0 none; } .cit-building a { background: url(images/cit-building.png) no-repeat 0 0; position: absolute; bottom: 0; right: 0; width: 197px; height: 145px; text-indent: -999px; overflow: hidden; } .gsa-button { display: block; width: 130px; height: 42px; background: #ffffff url(images/gsa-button.png) no-repeat 0 0; text-indent: -999px; overflow: hidden; margin-top: -7px; margin-right: 20px; } /* CONTACT MODAL WINDOW ========================================================================== */ .overlay { background: url("images/background-overlay-dc-wordpress-experts.png") repeat scroll 0 0 transparent; height: 100%; position: fixed; top: 0; width: 100%; z-index: 9998; display: none; } #contact-modal-window { background: url("images/modal-window-background-web-project-management.png") no-repeat scroll 0 0 transparent; height: 0px; /*522px;*/ left: 50%; margin-left: -475px; margin-top: -260px; position: absolute; /*top: 50%;*/ top: 50%; width: 950px; z-index: 9999; display: none; } #contact-modal-window #title-contact { font-family: 'Oswald', Arial, Helvetica, sans-serif; font-size: 30px; letter-spacing: -1px; margin-bottom: 15px; color: #255c77; } #contact-modal-window .subtitle { font-family: 'Shanti', Arial, Helvetica, sans-serif; font-size: 24px; font-weight: normal; letter-spacing: -1px; margin-bottom: 15px; } #contact-modal-window a { color: #255c77; text-decoration: none; } #contact-modal-window a:hover { text-decoration: underline; } #contact-modal-window p { color: #000000; margin-bottom: 15px; line-height: 17px; } #contact-modal-window .to-left { float: left; font-size: 12px; width: 50%; text-align: left; } #contact-modal-window .to-left p { /*margin-bottom: 0px;*/ color: #292929; } #contact-modal-window .to-right { float: right; width: 50%; text-align: right; } #contact-modal-window .to-right #email { border-bottom: 1px dashed #dbdbdb; color: #255c77; font-size: 14px; padding-bottom: 6px; display: block; } #contact-modal-window .to-right #phone { display: block; font-size: 28px; font-weight: bold; letter-spacing: -1px; color: #255c77; } #contact-modal-window #title-contact { position: absolute; right: 50px; top: 25px; width: 419px; opacity: 0; /*display:none\9;*/ } #contact-modal-window #content-contact { top: 76px; position: absolute; right: 50px; /*18px;*/ width: 419px; opacity: 0; /*display:none\9;*/ } #contact-modal-window #google-map { bottom: 40px; position: absolute; right: 50px; /*18px;*/ border: 1px solid #bbbbbb; opacity: 0; /*display:none\9;*/ background: url("images/inqbation-location-google-map-washington-dc-web-developers.jpg") no-repeat left top; width: 421px; height: 207px; } #contact-modal-window .contact-background { bottom: 28px; left: 4px; position: absolute; opacity: 0; /*display:none\9;*/ width: 594px; height: 457px; background: url("images/cit-bulding-background-dc-wordpress-expert.png") no-repeat left top; } .relative { position: relative; } #contact-modal-window .relative { height: 522px; } #contact-modal-window .close-button { background: transparent url("images/inqbation-labs-close-icon.png") no-repeat scroll right top; height: 19px; position: absolute; right: 0; top: -33px; font-family: 'Oswald', Arial, Helvetica, sans-serif; width: auto; padding-right: 25px; color: #fff; text-transform: uppercase; } #contact-modal-window .close-button:hover { cursor: pointer; text-decoration: none; } body.new-background { background-color: #f4f4f4; background-image: none; } /* contact button */ #contact-button .press { background-image: url("images/contac-us-button-washington-dc-wordpress-expert.png"); background-repeat: no-repeat; float: left; height: 83px; overflow: hidden; text-indent: -999px; width: 137px; } #contact-button .active:hover { cursor: pointer; } #contact-button .active { background-position: 0 0; } #contact-button .press { background-position: 0 61px; } #contact-button .inner { margin-left: 10px; background-image: url("images/contac-us-button-washington-dc-wordpress-expert.png"); background-repeat: no-repeat; float: left; height: 83px; overflow: hidden; text-indent: -999px; width: 137px; margin-top: 7px; } .invisible-footer { position: fixed; bottom: 0px; width: 100%; } /* Navigation client page */ #header-image:hover a { opacity: 1; top: 40%; } #header-image .alignleft a { left: 0px; background-position: 0 -50px; } #header-image .alignright a { right: 0; } #header-image a { position: absolute; display: block; overflow: hidden; width: 50px; height: 50px; background-color: #003b53; background-image: url("images/arrows.png"); background-position: 0 0; background-repeat: no-repeat; text-indent: -9999px; z-index: 60; top: 45%; -webkit-transition: all .25s linear; -moz-transition: all .25s linear; -o-transition: all .25s linear; -ms-transition: all .25s linear; transition: all .25s linear; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0.2; } #header-image a:hover { background-color: #88a33a; } /** * @file * Print styling * * We provide some sane print styling for Drupal using Zen's layout method. */ @media print { a:link, a:visited { /* underline all links */ text-decoration: underline !important; } #site-name a:link, #site-name a:visited { /* Don't underline header */ text-decoration: none !important; } #content { /* Un-float the content */ float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } #content a[href]:after { /* Add visible URL after links. */ content: " (" attr(href) ")"; font-weight: normal; font-size: 16px; } #content a[href^="javascript:"]:after, #content a[href^="#"]:after { /* Only display useful links. */ content: ""; } #content abbr[title]:after { /* Add visible title after abbreviations. */ content: " (" attr(title) ")"; } body, #page, #main, #content { /* Turn off any background colors or images */ color: #000; background-color: transparent !important; background-image: none !important; } #skip-link, #toolbar, #navigation, .region-sidebar-first, .region-sidebar-second, #footer, .breadcrumb, .tabs, .action-links, .links, .book-navigation, .forum-topic-navigation, .pager, .feed-icons { /* Hide sidebars and nav elements */ visibility: hidden; display: none; } } /* End @media print */ @-moz-document url-prefix() { /* add styles only for firefox here... */ } @media screen and (-webkit-min-device-pixel-ratio: 0) { /* add styles only for Safari/Chrome here... */ input#searchsubmit { height: 38px; } } html.ie9 { /* add styles only for IE 9 here... */ } html.ie9 input#searchsubmit { height: 38px; } html.all-ie { /* add styles for all IE versions here... */ } html.mac { /* add styles only for MAC Safari here... */ } #menu-trigger { display: none; } @media only screen and (max-width: 720px) { .content-inside { margin: 0 2%; } #header .site-title h2.subheader, #header .site-title span.subheader { left: 47%; top: 52px; } .language-english { position: absolute; top: 0; right: 10px; } #share-icons-internal ul { float: none; text-align: center; } #header { height: 120px; } #header .site-title { text-align: center; } #header .site-title .subheader { text-align: left; } #header #header-cotainer-right { padding: 0; } #media-icons { display: inline-block; float: right; } #media-icons ul.media-icons { margin-top: 10px; } #slider .slider-main .content-slide { width: 70%; float: left; position: relative; bottom: 0px; padding-right: 120px; min-height: 170px; margin: 0px; } #slider .slider-main a.callbacks_nav { width: 50px; height: 50px; } #slider .slider-main a.callbacks_nav.prev { right: 0px; bottom: 120px; background-position: -9px -82px; } #slider .slider-main a.callbacks_nav.next { right: 0px; bottom: 170px; background-position: -9px -9px; } article.content { padding-top: 110px; height: auto; } article#about { background: none; background-color: #205e7b; } article#about .inqbation-team { position: static; } article#about .content-info { padding: 20px 10px 0px 20px; } article#contact .content-info { margin-top: 45px; } div.insert { display: none; } .contact-box { width: 100%; } #go-home { display: none; } #menu-wrap { position: relative; } #menu-wrap * { box-sizing: border-box; } #menu-trigger { display: block; /* Show it now */ height: 40px; line-height: 40px; cursor: pointer; padding: 0 0 0 35px; color: #333333; font-weight: 700; /* Multiple backgrounds here, the first is base64 encoded */ background: transparent url(images/menu-trigger-icon.png) no-repeat 6px 7px; } #menu-trigger:hover { color: #205e7b; } #menu { margin: 0; padding: 10px; position: absolute; top: 40px; left: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; z-index: 100; display: none; box-shadow: none; background: url("images/white-transparent.png") repeat scroll left top transparent; border: 1px solid #cecece; } #menu:after { content: ''; position: absolute; left: 43px; top: -10px; width: 22px; height: 10px; background: transparent url(images/menu-tab.png) no-repeat 0 0; } #menu ul { position: static; visibility: visible; display: block; margin: 0; padding-bottom: 10px; background: none; box-shadow: none; border: 0 none; } #menu ul ul { margin: 0px 0 10px 0 !important; box-shadow: none; padding: 0; } #menu li { position: static; display: block; float: none; border: 0; margin: 0; border-top: 1px dotted #cecece; padding: 0; box-shadow: none; } #menu li:first-child { border: none; } #menu ul li { margin: 0 0 0 22px; padding: 0 0 0 13px; box-shadow: none; border: none; background: url("images/separator-breadcrumb.png") no-repeat scroll 0 10px transparent; font-family: Arial, Helvetica, Verdana, Sans-Serif; font-size: 13px; } #menu ul ul li { margin: 0; } #menu a { display: block; float: none; padding: 5px 0 5px 23px; color: #333333; background: url("images/bullet-gray.png") no-repeat scroll 10px 13px transparent; } #menu a:hover, #menu li:hover > a { color: #ffffff; background: url("images/bullet-white.png") no-repeat scroll 10px 13px #88a33a; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #menu ul li:hover > a { background: none; color: #205e7b; } #menu ul a { padding: 0; width: auto; background: none; } #menu ul a:hover { background: none; color: #205e7b; } #menu ul li:first-child a:after, #menu ul ul li:first-child a:after { border: 0; } #menu li ul .current_page_item > a, #menu li ul .current-menu-parent > a, #menu li ul .current-menu-ancestor > a { background: none; color: #205e7b; } #menu .current_page_item > a, #menu .current-menu-parent > a, #menu .current_page_parent > a, #menu .current-page-ancestor > a, #menu .current_page_ancestor > a { color: #ffffff; font-weight: 600; background: url("images/bullet-white.png") no-repeat scroll 10px 13px #205e7b; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #menu li:hover ul .current_page_item > a, #menu li:hover ul .current-menu-parent > a, #menu li:hover ul .current-menu-ancestor > a { background: #f9f9f9; font-weight: 600; color: #205e7b; } #menu li:hover ul .current_page_item > a:hover, #menu li:hover ul .current-menu-parent > a:hover, #menu li:hover ul .current-menu-ancestor > a:hover { background: #f9f9f9; color: #205e7b; } #footer { padding: 0; } #footer h2 { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dotted #cecece; width: 53%; } #footer .grid_6 { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dotted #cecece; width: 53%; } #footer .grid_6:last-child { border: 0 none; } #footer .footer-top { padding-left: 20px; padding-right: 20px; padding-top: 18px; } #footer .icon-location { margin-bottom: 70px; } #footer #copyright { float: none; text-align: center; } #footer .menu { display: none; } #footer .menu li { float: none; } #footer .character { right: 0; bottom: -58px; } aside.custom-left-menu-sidebar { display: none; } #blog-slider .slides_container .slider-image { margin-bottom: 10px; } #blog-slider .slides_container div.slide { height: 540px; width: 90%; padding: 0 5%; } #blog-slider .slider-content .innera { padding: 10px; } #content .follow-buttons-post ul li a { margin-left: 5px; } #content #blog-content .follow-buttons-post ul li:first-child { display: none; } /* ----------------------------------------- Logos clients home page ----------------------------------------- */ h3.title-clients { text-align: center; } #logos-clients img { opacity: 1; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; -webkit-transition: none 0.2s linear; -moz-transition: none 0.2s linear; -o-transition: none 0.2s linear; -ms-transition: none 0.2s linear; transition: none 0.2s linear; } #logos-clients img:hover { opacity: 1; } /* ----------------------------------------- Contact section ----------------------------------------- */ #background-map { height: 700px; background: transparent url(images/inQbation-location.png) no-repeat -120px bottom; } #background-map .contact-content { position: static; top: 0px; } body.error404 .project-manager { display: none; } body.error404 .classic-menu { text-align: center; } body.error404 .logo { margin-bottom: 10px; } body.error404 .logo .site-title { width: 240px; margin: 0 auto; } body.error404 .post { text-align: center; } body.error404 #content h2.error { background-position: center top; } } /* custom size for the footer */ @media only screen and (max-width: 490px) { #background_texture { height: 110px; } #share-icons-internal ul li:first-child { display: block; margin-bottom: 15px; } #share-icons-internal ul li:first-child a { margin: 0 auto; } #footer .cit-building a { bottom: -151px; } #footer h2 { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dotted #cecece; width: 100%; } #footer .grid_6 { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dotted #cecece; width: 100%; } #footer .footer-top { padding-bottom: 141px; } #footer .character { right: 0; bottom: -252px; } #blog-slider .slides_container div.slide { height: 600px; } #content .follow-buttons-post ul li a { margin-left: 5px; } body.archive .follow-buttons-post ul li:first-child { display: none; } } @media only screen and (max-width: 320px) { .site-title h2.subheader, .site-title span.subheader { display: none; } } @media all and (min-width: 720px) and (max-width: 960px) { div.insert { display: none; } #header .site-title h2.subheader, #header .site-title span.subheader { left: 103px; top: 52px; } article#about { background: none; background-color: #205e7b; } #menu-wrap { position: relative; } #menu-trigger { display: block; /* Show it now */ float: right; height: 40px; margin-right: 20px; line-height: 40px; cursor: pointer; padding: 0 0 0 35px; border-right: 1px solid #cecece; color: #333333; font-weight: 700; /* Multiple backgrounds here, the first is base64 encoded */ background: transparent url(images/menu-trigger-icon.png) no-repeat 6px 7px; width: 13.7%; } #menu-trigger:hover { color: #205e7b; } #menu { margin: 0; padding: 10px; position: absolute; top: 40px; right: 31px; width: 100%; z-index: 100; display: none; box-shadow: none; background: url("images/white-transparent.png") repeat scroll left top transparent; border: 1px solid #cecece; } #menu:after { content: ''; position: absolute; right: 18px; top: -10px; width: 22px; height: 10px; background: transparent url(images/menu-tab.png) no-repeat 0 0; } #menu ul { position: static; visibility: visible; display: block; margin: 0; padding-bottom: 10px; background: none; box-shadow: none; border: 0 none; } #menu ul ul { margin: 0px 0 10px 0 !important; box-shadow: none; padding: 0; } #menu li { position: static; display: block; float: none; border: 0; margin: 0; border-top: 1px dotted #cecece; padding: 0; box-shadow: none; } #menu li:first-child { border: none; } #menu ul li { margin: 0 0 0 22px; padding: 0 0 0 13px; box-shadow: none; border: none; background: url("images/separator-breadcrumb.png") no-repeat scroll 0 10px transparent; font-family: Arial, Helvetica, Verdana, Sans-Serif; font-size: 13px; } #menu ul ul li { margin: 0; } #menu a { display: block; float: none; padding: 5px 0 5px 23px; color: #333333; background: url("images/bullet-gray.png") no-repeat scroll 10px 13px transparent; } #menu a:hover, #menu li:hover > a { color: #ffffff; background: url("images/bullet-white.png") no-repeat scroll 10px 13px #88a33a; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #menu ul li:hover > a { background: none; color: #205e7b; } #menu ul a { padding: 0; width: auto; background: none; } #menu ul a:hover { background: none; color: #205e7b; } #menu ul li:first-child a:after, #menu ul ul li:first-child a:after { border: 0; } #menu li ul .current_page_item > a, #menu li ul .current-menu-parent > a, #menu li ul .current-menu-ancestor > a { background: none; color: #205e7b; } #menu .current_page_item > a, #menu .current-menu-parent > a, #menu .current_page_parent > a, #menu .current-page-ancestor > a, #menu .current_page_ancestor > a { color: #ffffff; font-weight: 600; background: url("images/bullet-white.png") no-repeat scroll 10px 13px #205e7b; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #menu li:hover ul .current_page_item > a, #menu li:hover ul .current-menu-parent > a, #menu li:hover ul .current-menu-ancestor > a { background: none; font-weight: 600; color: #205e7b; } #menu li:hover ul .current_page_item > a:hover, #menu li:hover ul .current-menu-parent > a:hover, #menu li:hover ul .current-menu-ancestor > a:hover { background: #f9f9f9; color: #205e7b; } #footer .menu { margin-bottom: 20px; } #footer .menu li { float: none; display: inline-block; } #footer .footer-top { padding-top: 15px; } #footer .footer-top .footer-widget h2 { width: 65%; border-bottom: 1px dotted #cecece; padding-bottom: 10px; margin-bottom: 15px; } #footer .footer-top .footer-widget .grid_6 { width: 35%; } #footer-menu, #copyright { width: 100%; text-align: center; } #blog-slider .slides_container div.slide { height: 307px; } #content .follow-buttons-post { margin-bottom: 20px; } #content .follow-buttons-post ul li a { margin-left: 5px; } body.archive #blog-content .follow-buttons-post ul li:first-child, body.blog #blog-content .follow-buttons-post ul li:first-child, body.archive #blog-content .follow-buttons-post ul li span, body.blog #blog-content .follow-buttons-post ul li span { display: none; } /* ----------------------------------------- Logos clients home page ----------------------------------------- */ #logos-clients img { opacity: 1; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; -webkit-transition: none 0.2s linear; -moz-transition: none 0.2s linear; -o-transition: none 0.2s linear; -ms-transition: none 0.2s linear; transition: none 0.2s linear; } #logos-clients img:hover { opacity: 1; } body.error404 .post-inside { padding-left: 0; } .cit-building a { top: 10px; } #content .tabberlive.style1 ul.tabbernav { border: 0 none; } #content .tabberlive.style1 ul.tabbernav li { display: block; text-align: center; } #content .tabberlive.style1 ul.tabbernav li a { margin-bottom: 4px; border: 1px solid #cecece; } } @media (min-width: 960px) { body.error404 .post-inside { padding-left: 120px; } } @media (min-width: 1200px) { body.error404 .post-inside { padding-left: 240px; } #content .tabberlive.style1 ul.tabbernav li a { font-size: 14px; padding: 8px; } } /* Custom helper classes */ .display-block{ display:block!important; } .display-hidden{ display:hidden!important; } .text-center{ text-align: center!important; } .text-left{ text-align: left!important; } .text-right{ text-align: right!important; } /* Custom classes */ .submenu{ width:96%; background-color: #fff; position:relative; padding:10px 2%; } .submenu h1{ font-size:20px; margin:0; } .submenu h1 i{ padding:6px 0 3px 0; } .submenu:hover{ cursor:pointer; } .submenu:hover > h1{ color:#88a33a; } .submenu:hover > i{ color:#88a33a; } .submenu-links{ width:100%; display:none; height:0; overflow:hidden; border-top:1px solid #003b53; border-bottom:1px solid #003b53; margin:10px 0; padding:5px 0; } .submenu-links .sidebar-header-left{ } .submenu-links ul{ margin-left:0!important; margin-bottom:0!important; } .submenu-links li{ padding:3px 0 3px 8px!important; } /* Added styles for secondary navigation */ @media only screen and (max-width: 720px) { .block-sm{ display:block!important; } .block-bg{ display:none!important; } } @media only screen and (min-width: 720px) { .block-sm{ display:none!important; } .block-big{ display:block!important; } } @media only screen and (max-width: 490px){ #footer .footer-top{ padding-bottom:0; padding-top:0; } }