/* @override http://icon.hammer.dev/css/liquidvisual-components.css */ @charset "utf-8"; /* @group Info LIQUIDVISUAL - Components 2.0 Last Updated: 16.12.13 /* -------------------------------------------------- *//* @end */ /* @group | Developer Mode - Foundation Grid Highlights /* /* Usage: /* ------------------------------------------------------------ */ .developer .row:nth-child(odd) { background-color: #6AE1CC !important; } .developer .row:nth-child(even), .developer > .row:nth-child(odd) { background-color: #61CFBC !important; } .developer .columns { background-color: #46B0FB !important; } .developer hr { border-bottom: 1px solid yellow !important; } /* -------------------------------------------------- *//* @end */ /* @group | Highlight Elements - Developer /* ------------------------------------------------------------ */ body .fill-1 { background-color: #E94144; } body .fill-2 { background-color: #46B0FB; } body .fill-3 { background-color: #6AE1CC; } body .fill-4 { background-color: #FECB6D; } body .fill-5 { background-color: #E7E7E7; } body .fill-6 { background-color: #61CFBC; } /* -------------------------------------------------- *//* @end */ /* @group | CSS3 Effects with PIE /* /* PIE (css3pie.com) will render CSS3 in IE7+ /* If not working, make root relative once live. /* ------------------------------------------------------------ */ .lv-pie { behavior: url(../scripts/vendor/pie.htc); /* Comment out to exclude IE */ position: relative; /* ie7 */ } /* -------------------------------------------------- *//* @end */ /* @group | Helpers /* ------------------------------------------------------------ */ .left { float: left; } .right { float: right; } img.left { margin: 1.250em 1.250em 0.625em 0; } img.right { margin: 1.250em 0 0.625em 1.250em; } .ir { text-indent: -99999px; overflow: hidden; } .hide { display: none; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } /* ======================================== /* Text Alignment /* ======================================== */ .text-left, .text-left-large { text-align: left; } .text-right, .text-right-large { text-align: right; } .text-center { text-align: center; } .text-justify { text-align: justify; } @media only screen and (max-width: 767px) { .text-left, .text-right, .text-center, .text-justify { float: none; } .text-left-large, .text-right-large { text-align: center; } } /* -------------------------------------------------- *//* @end */ /* @group | Inline List /* ------------------------------------------------------------ */ .lv-inline-list { margin-left: 0; /* incase */ clear: both; margin-left: -0.313em; } .lv-inline-list li { float: left; display: inline-block; } .lv-inline-list.text-left, .lv-inline-list.text-left-large, .lv-inline-list.text-right, .lv-inline-list.text-right-large, .lv-inline-list.text-center { width: 100%; } .lv-inline-list.text-left li, .lv-inline-list.text-left-large li, .lv-inline-list.text-right li, .lv-inline-list.text-right-large li, .lv-inline-list.text-center li { float: none; } .lv-inline-list li a { display: inline-block; /*padding: 0.313em 0.313em;*/ padding: 0 0.313em; /*line-height: 2.1;*/ } @media only screen and (min-width: 768px) { .lv-inline-list { display: inline-block; } } /* -------------------------------------------------- *//* @end */ /* @group | Unselectable Elements /* ------------------------------------------------------------ */ .lv-unselectable, .lv-unselectable * { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; user-select: none; } /* -------------------------------------------------- *//* @end */ /* @group | Vertical Spacing /* /* Only use in the absence of framework /* ------------------------------------------------------------ */ .lv-push-0 { margin: 0; } .lv-push-5 { margin-bottom: 0.313em; display: block; } .lv-push-10 { margin-bottom: 0.625em; display: block; } .lv-push-20 { margin-bottom: 1.250em; display: block; } .lv-push-30 { margin-bottom: 1.875em; display: block; } .lv-push-40 { margin-bottom: 2.500em; display: block; } .lv-push-50 { margin-bottom: 3.125em; display: block; } /* -------------------------------------------------- *//* @end */ /* @group | Inner Block Spacing /* /* Create inner divs for equal spacing inside /* parent elements. /* ------------------------------------------------------------ */ .lv-inner-5, .lv-inner-10, .lv-inner-20, .lv-inner-30, .lv-inner-40, .lv-inner-50 { display: inline-block; } .lv-inner-5 { margin: 0.313em; } .lv-inner-10 { margin: 0.625em; } .lv-inner-20 { margin: 1.250em; } .lv-inner-30 { margin: 1.875em; } .lv-inner-40 { margin: 2.500em; } .lv-inner-50 { margin: 3.125em; } /* -------------------------------------------------- *//* @end */ /* @group | Box Shadows /* ------------------------------------------------------------ */ .lv-shadow { box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.5); } .lv-shadow-bottom { box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.2); } .lv-full-shadow { box-shadow: 0 0 .625em rgba(0, 0, 0, 0.5); } .lv-full-sharp-shadow { box-shadow: 0 0 5px rgba(0,0,0,0.2); } .lv-weak-shadow { box-shadow: 0 3px 5px -4px rgba(0, 0, 0, 0.26); } .lv-deep-shadow { box-shadow: 0 10px 13px #DCE0E0; } .lv-sharp-shadow { box-shadow: 0 2px 5px -3px #313131; } .lv-inset-shadow { box-shadow: inset 0 3px 5px -3px rgba(0, 0, 0, 0.5); } /* -------------------------------------------------- *//* @end */ /* @group | Text Shadow /* ------------------------------------------------------------ */ .lv-text-shadow { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } /* -------------------------------------------------- *//* @end */ /* @group | Prevent Flicker on Webkit /* ------------------------------------------------------------ */ .no-flicker { -webkit-transition: translate3d(0,0,0); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; -webkit-transform-style: preserve-3d; } /* -------------------------------------------------- *//* @end */ /* @group | Grayscale /* ------------------------------------------------------------ */ .lv-grayscale { cursor: pointer; filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */ -webkit-filter: grayscale(100%); filter: grayscale(100%); filter: gray; /* IE6-9 need to be last */ } img.grayscale.disabled, .lv-grayscale:hover { filter: url("data:image/svg+xml;utf8,#grayscale"); -webkit-filter: grayscale(0%); filter: grayscale(0%); filter: none; /* IE6-9 need to be last */ } /* -------------------------------------------------- *//* @end */ /* @group | Drop Cap /* /* Mimick print where first character in the sentence /* is pronounced and colored. /* ------------------------------------------------------------ */ .lv-drop-cap:first-letter { float: left; color: #E02D39; /* linkColor */ font-size: 100px; line-height: 80px; margin-right: 10px; } /* -------------------------------------------------- *//* @end */ /* @group | Text Columns /* ------------------------------------------------------------ */ .lv-text-columns-2 { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; -moz-column-gap: 2em; -webkit-column-gap: 2em; column-gap: 2em; } .lv-text-columns-3 { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; -moz-column-gap: 2em; -webkit-column-gap: 2em; column-gap: 2em; } /* -------------------------------------------------- *//* @end */ /* @group | Fullscreen BG /* /* Usage:

/* ------------------------------------------------------------ */ .lv-fullscreen-bg { position: fixed; top: 0; left: 0; width: 100%; height: auto; min-height: 100%; min-width: 1024px; z-index: -1; } /* -------------------------------------------------- *//* @end */ /* @group | Alertbar /* ------------------------------------------------------------ */ .lv-alert { position: fixed; top: 0; left: 0; z-index: 2147483647; overflow: hidden; margin: 0; width: 100%; background: #DB2D39; color: white; opacity: 0.95; text-align: center; font-size: 0.9em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.5; *top: -2px; *left: -2px; } .lv-alert > p { position: relative; padding: 15px 70px; margin-bottom: 0; font-weight: 500; } .lv-alert a { color: #F7DDA0; text-decoration: none; } .lv-alert.success { background: #50CA00; } .lv-alert .close-btn:hover, .lv-alert .close-btn:active { background: #C82834; box-shadow: inset 0 4px 5px -3px rgba(0,0,0,0.5); } .lv-alert.success .close-btn:hover { background: #45AF26; } .lv-alert .close-btn { position: absolute; top: 0; right: 0; padding: 0 20px 0 20px; height: 100%; font-weight: bold; font-size: 2em; cursor: pointer; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; *padding: 5px 20px 0 20px; padding: 3px 20px 0 20px \9; /* ie9 */ }