/******************************************** Mind Point Design - Core CSS *** ************************************ (Any styles in here will be very generic ones that are needed for basically every single site that we make such as clearfix hacks. Also will use this for any extremely specific styles needed by only the static core js library itself. An example of how this may come up will be when we get into Facebook Connect and need specific classes to use for containing profile photos but not specify border colors or anything that should be left up to what calls it even though it may end up combining with a generic border color class used in here anyway.) (Use for adding generic styles for site theming such as a class for adding a border-color or one for a background-color. Use generic names so we can add these into our site for better theming and just modify the hexes in here per site like with the jQuery UI theme css files basically. Goal is to let this be the interface for default theming in addition to other methods available so we can reduce the need to edit javascript or custom css files for modules to keep the framework files in tact and isolate styling changes here.) ********************************************/ /****************************************************************** Theming (change to skin site and add to elements when coding) ******************************************************************/ /* Cover Page */ .mpd-ui-cover { background-color: #A9D7EF; } /* Borders */ .mpd-ui-border, .mpd-ui-border-outer { border-color: #aaaaaa; } .mpd-ui-border-inner { border-color: #cccccc } .mpd-ui-border-image { border-color: #cccccc } /* Backgrounds */ .mpd-ui-background-default { background-color: #aaa; } .mpd-ui-background-light { background-color: #bbb; } .mpd-ui-background-medium { background-color: #ccc; } .mpd-ui-background-dark { background-color: #ddd; } /* Table Rows */ .mpd-ui-row-even { background-color: #ddd; } .mpd-ui-row-odd { background-color: #eee; } /* Forms and Validation */ .mpd-validation-error-message { display: none; margin-top: 2px; margin-right: 3px; border: 1px solid #EA3400; padding: 2px; font-size: 12px; text-align: left; background-color: #FFD9CE; } .mpd-form-input-focus { border: 1px solid #A1C8E1; background-color: #F5FAFD; } .mpd-form-input-idle { border: 1px solid #CCCCCC; } .mpd-form-input-error { border: 1px solid #EA3400; } /* Loading Images */ .mpd-ui-loading-large-screen { background: url('/web/20220419181930im_/https://www.bellasalonandspa.org/framework/images/loading-large-screen.gif') no-repeat top left; width: 100px; height: 100px; } .mpd-ui-loading-small-button { background: url('/web/20220419181930im_/https://www.bellasalonandspa.org/framework/images/loading-small-button.gif') no-repeat top left; width: 128px; height: 15px; } /****************************************************************** UI Components (css alternatives to jQuery UI components) ******************************************************************/ /* Standard Button (requires sites custom over-out image sprite) */ /* Markup: Button Text */ a.button { padding: 0 8px 0 0; display: inline-block; vertical-align: top; font-weight: normal; font-size: 12px; } .browserIE6 html a.button, .browserIE7 html a.button { display: inline; } a.button, a.button:link, a.button:visited { color: #415959; text-decoration: none; } a.button span { display: block; } a.button span.btn-wrap-out { padding-left: 8px; /* background: url('/web/20220419181930im_/https://www.bellasalonandspa.org/framework/images/standard-button-states.png') no-repeat 0 0; */ } a.button span.btn-wrap-in { margin-right: -8px; padding-right: 8px; /* background: url('/web/20220419181930im_/https://www.bellasalonandspa.org/framework/images/standard-button-states.png') no-repeat 100% 0; */ } a.button span.text { padding: 4px 0 5px; line-height: 14px; white-space: nowrap; } a.button:hover, a.button:focus, a.selected { color: #ffffff !important; text-decoration: none; } a.button:hover span { border: none; } a.button:hover span.btn-wrap-out, a.selected span.btn-wrap-out { background-position: 0 100%; } a.button:hover span.btn-wrap-in, a.selected span.btn-wrap-in { background-position: 100% 100%; } a.icon-button {} a.icon-link { text-decoration: none; } a.icon-button span.text, a.icon-link span.text { padding-left: 20px; background-repeat: no-repeat; background-position: 0 50%; } a.icon-link span.text { line-height: normal; } /****************************************************************** Clearfix (Container) ******************************************************************/ .mpd-container:after { clear: both; content: "."; display: block; height: 0px; visibility: hidden; } .mpd-container { display: inline-block; } * html .mpd-container { height: 1%; } /* Hide from IE Mac \*/ .mpd-container { display: block; } /* End hide from IE Mac */ /****************************************************************** Generic Container Divisions ******************************************************************/ .mpd-container {} .mpd-container .wide-container, .mpd-container .narrow-container, .mpd-container .half-container, .mpd-container .third-container, .mpd-container .quarter-container { margin-left: 2%; } .browserIE6 .mpd-container .wide-container, .browserIE6 .mpd-container .narrow-container, .browserIE6 .mpd-container .half-container, .browserIE6 .mpd-container .third-container, .browserIE7 .mpd-container .wide-container, .browserIE7 .mpd-container .narrow-container, .browserIE7 .mpd-container .half-container, .browserIE7 .mpd-container .third-container { margin-left: 1%; } .mpd-container .wide-container { float: left; width: 66%; } .mpd-container .narrow-container { float: left; width: 32%; } .mpd-container .half-container { float: left; width: 49%; } .mpd-container .third-container { float: left; width: 32%; } .mpd-container .quarter-container { float: left; width: 23.5%; } .browserIE6 .mpd-container .quarter-container, .browserIE7 .mpd-container .quarter-container { width: 23%; } .mpd-container .first-container { margin-left: 0 !important; } /****************************************************************** Tooltip ******************************************************************/ .mpd-ui-tooltip-hover { opacity: .8; filter: alpha(opacity=80); padding: 5px; } .mpd-ui-tooltip-hover .mpd-ui-tooltip-hover-inner { padding: 8px 8px; max-width: 200px; line-height: 1.5em; font: 11px 'Lucida Grande', sans-serif; font-weight: bold; -moz-border-radius: 4px; -khtml-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background-color: #000; color: white; text-align: left; } .mpd-ui-tooltip-arrow-up {background: url('/web/20220419181930im_/https://www.bellasalonandspa.org/framework/images/tooltip/tip-north.gif') no-repeat top center;} .mpd-ui-tooltip-arrow-down {background: url('/web/20220419181930im_/https://www.bellasalonandspa.org/framework/images/tooltip/tip-south.gif') no-repeat bottom center;} .mpd-ui-tooltip-arrow-left {background: url('/web/20220419181930im_/https://www.bellasalonandspa.org/framework/images/tooltip/tip-east.gif') no-repeat right center;} .mpd-ui-tooltip-arrow-right {background: url('/web/20220419181930im_/https://www.bellasalonandspa.org/framework/images/tooltip/tip-west.gif') no-repeat left center;} /* FILE ARCHIVED ON 18:19:30 Apr 19, 2022 AND RETRIEVED FROM THE INTERNET ARCHIVE ON 07:10:46 Nov 08, 2025. JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE. ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C. SECTION 108(a)(3)). */ /* playback timings (ms): captures_list: 0.606 exclusion.robots: 0.019 exclusion.robots.policy: 0.009 esindex: 0.013 cdx.remote: 6.262 LoadShardBlock: 69.169 (3) PetaboxLoader3.datanode: 114.684 (5) PetaboxLoader3.resolve: 64.674 (2) load_resource: 119.92 loaddict: 39.815 */