/*==================================================================================================== * F A N C Y B U T T O N S F A N C Y B U T T O N S * =====================================================================================================*/ .fancybutton { display: inline-block; vertical-align: middle; margin: 0.2em 0.2em; padding: 0; font: bold 13px "Helvetica Neue", Helvetica, Arial, clean, sans-serif !important; text-decoration: none !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.20); background: none; border: none; white-space: nowrap; cursor: pointer; user-select: none; -moz-user-select: none; /* Fix extra width padding in IE */ _width: 0; overflow: visible; } .fancybutton span { display: block; /* Prevents :active from working in IE--oh well! */ height: 24px; padding-right: 12px; background-repeat: no-repeat; background-position: right top; } .fancybutton span span { padding-right: 0; padding-left: 12px; line-height: 24px; background-position: left top; } .fancybutton span span span { padding-left: 21px; background-image: none; background-repeat: no-repeat; background-position: left center; /* IE6 still requires a PNG transparency fix */ /* _background-image: none; Or just hide icons from the undeserving IE6 */ /* _padding-left: 0; Or just hide icons from the undeserving IE6 */ } .fancybutton span span span.after { padding-left: 0px; padding-right: 21px; background-position: right center; /* IE6 still requires a PNG transparency fix */ /* _padding-right: 0; Or just hide icons from the undeserving IE6 */ } .fancybutton.fancyicononly span span span { padding-left: 16px; } .fancybutton.fancyicononly span span span.after { padding-left: 0px; padding-right: 16px; } .fancybutton[disabled], .fancybutton[disabled]:hover, .fancybutton[disabled]:focus, .fancybutton[disabled]:active, .fancybutton.disabled, .fancybutton.disabled:hover, .fancybutton.disabled:focus, .fancybutton.disabled:active { color: #333 !important; cursor: inherit; text-shadow: none; opacity: 0.33; } .fancybutton:hover span, .fancybutton:focus span { background-position: 100% -24px; } .fancybutton:hover span span, .fancybutton:focus span span { background-position: 0% -24px; } .fancybutton:active span { background-position: 100% -48px; } .fancybutton:active span span { background-position: 0% -48px; } .fancybutton[disabled] span, .fancybutton.disabled span { background-position: 100% -72px; } .fancybutton[disabled] span span, .fancybutton.disabled span span { background-position: 0% -72px; } .fancybutton:hover span span span, .fancybutton:focus span span span, .fancybutton:active span span span, .fancybutton[disabled] span span span, .fancybutton.disabled span span span { background-position: left center; } .fancybutton:hover span span span.after, .fancybutton:focus span span span.after, .fancybutton:active span span span.after, .fancybutton[disabled] span span span.after, .fancybutton.disabled span span span.after { background-position: right center; } .fancybutton img { margin-right: 5px; vertical-align: text-top; /* IE6 Hack */ _margin-top: 4px; _vertical-align: text-bottom; /* IE6 still requires a PNG transparency fix */ /* _display: none; Or just hide icons from the undeserving IE6 */ } .fancybutton img.after { margin-right: 0; margin-left: 5px; /* IE6 still requires a PNG transparency fix */ /* _margin-left: 0; Or just hide icons from the undeserving IE6 */ } .fancybutton.fancymedium { font-size: 15px !important; } .fancybutton.fancylarge { font-size: 18px !important; } /* * Button Skins * * .PNG background images with alpha transparency are also supplied if you'd rather use them instead of the * default .GIF images. (Just beware of IE6's lack of support.) * * Additional skins can be added below. The fancybuttons/images/skins/ButtonTemplate.psd can be used to create new skins. * Prefix the skin name with "fancy" to avoid any potential conflicts with other class names. */ /* Silver Button Skin (the default skin) */ .fancybutton, .fancybutton.fancysilver { color: #666 !important; } .fancybutton:link span, .fancybutton:visited span { color: #fff !important; } .fancybutton:hover, .fancybutton:focus, .fancybutton.fancysilver:hover, .fancybutton.fancysilver:focus { color: #333 !important; } .fancybutton span, .fancybutton.fancysilver span { background-image: url(fancybuttons/images/skins/silver/button_right.gif); } .fancybutton span span, .fancybutton.fancysilver span span { background-image: url(fancybuttons/images/skins/silver/button_left.gif); } /* Orange Button Skin */ .fancybutton.fancyorange, .fancybutton.fancyorange:hover, .fancybutton.fancyorange:focus { color: white !important; } .fancybutton.fancyorange[disabled], .fancybutton.fancyorange[disabled]:hover, .fancybutton.fancyorange[disabled]:active, .fancybutton.fancyorange[disabled]:focus, .fancybutton.fancyorange.disabled, .fancybutton.fancyorange.disabled:hover, .fancybutton.fancyorange.disabled:active, .fancybutton.fancyorange.disabled:focus { color: #333 !important; } .fancybutton.fancyorange span { background-image: url(fancybuttons/images/skins/orange/button_right.gif); } .fancybutton.fancyorange span span { background-image: url(fancybuttons/images/skins/orange/button_left.gif); } /* Yellow Button Skin */ .fancybutton.fancyyellow, .fancybutton.fancyyellow:hover, .fancybutton.fancyyellow:focus { color: #994800 !important; } .fancybutton.fancyyellow span { background-image: url(fancybuttons/images/skins/yellow/button_right.gif); } .fancybutton.fancyyellow span span { background-image: url(fancybuttons/images/skins/yellow/button_left.gif); } /* * Simple Skin Buttons */ .fancybutton.fancysimple { position: relative; padding: 5px 10px 5px; font: inherit; font-size: 13px !important; font-style: normal !important; font-weight: bold !important; color: #fff !important; line-height: 1; background-image: url(fancybuttons/images/skins/simple/awesome-overlay-sprite.png); background-repeat: repeat-x; background-position: 0 0; /* Special effects */ text-shadow: 0 -1px 1px rgba(0,0,0,0.25), -2px 0 1px rgba(0,0,0,0.25); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5); /* IE only stuff */ border-bottom: 1px solid transparent\9; _background-image: none; /* Cross browser inline block hack - http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */ display: -moz-inline-stack; display: inline-block; vertical-align: middle; *display: inline !important; position: relative; /* Force hasLayout in IE */ zoom: 1; /* Disable text selection (Firefox only)*/ -moz-user-select: none; } .fancybutton.fancysimple::selection { background: transparent; } .fancybutton.fancysimple:hover, .fancybutton.fancysimple:focus { background-position: 0 -50px; color: #fff !important; } .fancybutton.fancysimple:active { background-position: 0 -100px; -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.7); /* Unfortunately, Safari doesn't support inset yet */ -webkit-box-shadow: none; /* IE only stuff */ border-bottom: 0\9; border-top: 1px solid #666\9; } .fancybutton.fancysimple[disabled], .fancybutton.fancysimple.disabled { background-position: 0 -150px; color: #333 !important; text-shadow: none; } .fancybutton.fancysimple[disabled]:hover, .fancybutton.fancysimple[disabled]:focus, .fancybutton.fancysimple[disabled]:active, .fancybutton.fancysimple.disabled:hover, .fancybutton.fancysimple.disabled:focus, .fancybutton.fancysimple.disabled:active { -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5); } .fancybutton.fancysimple span { height: auto; padding-left: 24px; padding-right: 0; background-position: left center; background-repeat: no-repeat; /* IE6 still requires a PNG transparency fix */ /* _padding-left: 0; Or just hide icons from the undeserving IE6 */ } .fancybutton.fancysimple span.after { padding-left: 0; padding-right: 24px; background-position: right center; /* IE6 still requires a PNG transparency fix */ /* _padding-right: 0; Or just hide icons from the undeserving IE6 */ } .fancybutton.fancysimple.fancyicononly span { height: 16px; padding-left: 16px; } .fancybutton.fancysimple.fancyicononly span.after { padding-left: 0px; padding-right: 16px; } /* Simple button colors */ .fancybutton.fancysimple { /* Default */ background-color: #333; } .fancybutton.fancysimple.fancyblack { background-color: #333; } .fancybutton.fancysimple.fancyred { background-color: #a90118; } .fancybutton.fancysimple.fancyorange { background-color: #ff8a00; } .fancybutton.fancysimple.fancyyellow { background-color: #ffb515; } .fancybutton.fancysimple.fancygreen { background-color: #59a901; } .fancybutton.fancysimple.fancyblue { background-color: #015ea9; } .fancybutton.fancysimple.fancyteal { background-color: #2daebf; } .fancybutton.fancysimple.fancymagenta { background-color: #a9014b; } .fancybutton.fancysimple.fancypurple { background-color: #9d01a9; } /* Simple button sizes */ .fancybutton.fancysimple.fancysmall { padding: 4px 7px 5px; font-size: 10px !important; } .fancybutton.fancysimple.fancysmall:active { padding: 5px 7px 4px; } .fancybutton.fancysimple { /* default */ } .fancybutton.fancysimple:active { padding: 6px 10px 4px; } .fancybutton.fancysimple.fancymedium { /* default */ } .fancybutton.fancysimple.fancymedium:active { padding: 6px 10px 4px; } .fancybutton.fancysimple.fancylarge { padding: 8px 14px 8px; font-size: 14px !important; } .fancybutton.fancysimple.fancylarge:active { padding: 9px 14px 7px; } .fancybutton.fancysimple.fancyxl { padding: 8px 14px 8px; font-size: 16px !important; } .fancybutton.fancysimple.fancyxl:active { padding: 9px 14px 7px; } .fancybutton.fancysimple.fancyxxl { padding: 8px 14px 8px; font-size: 20px !important; } .fancybutton.fancysimple.fancyxxl:active { padding: 9px 14px 7px; } .fancybutton.fancysimple.fancyxxxl { padding: 8px 14px 8px; font-size: 26px !important; } .fancybutton.fancysimple.fancyxxxl:active { padding: 9px 14px 7px; } .fancybutton.fancysimple.fancysmall[disabled]:active, .fancybutton.fancysimple.fancysmall.disabled:active { padding: 4px 7px 5px; } .fancybutton.fancysimple[disabled]:active, .fancybutton.fancysimple.disabled:active { padding: 5px 10px 5px; } .fancybutton.fancysimple.fancymedium[disabled]:active, .fancybutton.fancysimple.fancymedium.disabled:active { padding: 6px 10px 4px; } .fancybutton.fancysimple.fancylarge[disabled]:active, .fancybutton.fancysimple.fancylarge.disabled:active { padding: 8px 14px 8px; } .fancybutton.fancysimple.fancyxl[disabled]:active, .fancybutton.fancysimple.fancyxl.disabled:active { padding: 8px 14px 8px; } .fancybutton.fancysimple.fancyxxl[disabled]:active, .fancybutton.fancysimple.fancyxxl.disabled:active { padding: 8px 14px 8px; } .fancybutton.fancysimple.fancyxxxl[disabled]:active, .fancybutton.fancysimple.fancyxxxl.disabled:active { padding: 8px 14px 8px; } /* Silk Icons - http://www.famfamfam.com/lab/icons/silk/ */ /* (Obviously not all Silk icons are defined here. Feel free to define any other icons that you may need.) */ .fancybutton span.ok { background-image: url(fancybuttons/images/icons/silk/tick.png) !important; } .fancybutton span.cancel { background-image: url(fancybuttons/images/icons/silk/cross.png) !important; } .fancybutton span.add { background-image: url(fancybuttons/images/icons/silk/add.png) !important; } .fancybutton span.delete { background-image: url(fancybuttons/images/icons/silk/delete.png) !important; } .fancybutton span.download { background-image: url(fancybuttons/images/icons/silk/arrow_down.png) !important; } .fancybutton span.download2 { background-image: url(fancybuttons/images/icons/silk/package_down.png) !important; } .fancybutton span.upload { background-image: url(fancybuttons/images/icons/silk/arrow_up.png) !important; } .fancybutton span.search { background-image: url(fancybuttons/images/icons/silk/magnifier.png) !important; } .fancybutton span.find { background-image: url(fancybuttons/images/icons/silk/find.png) !important; } .fancybutton span.first { background-image: url(fancybuttons/images/icons/silk/resultset_first.png) !important; } .fancybutton span.prev { background-image: url(fancybuttons/images/icons/silk/resultset_previous.png) !important; } .fancybutton span.next { background-image: url(fancybuttons/images/icons/silk/resultset_next.png) !important; } .fancybutton span.last { background-image: url(fancybuttons/images/icons/silk/resultset_last.png) !important; } .fancybutton span.play { background-image: url(fancybuttons/images/icons/silk/play.png) !important; } .fancybutton span.pause { background-image: url(fancybuttons/images/icons/silk/pause_blue.png) !important; } .fancybutton span.rewind { background-image: url(fancybuttons/images/icons/silk/rewind_blue.png) !important; } .fancybutton span.forward { background-image: url(fancybuttons/images/icons/silk/forward_blue.png) !important; } .fancybutton span.stop { background-image: url(fancybuttons/images/icons/silk/stop_blue.png) !important; } .fancybutton span.reload { background-image: url(fancybuttons/images/icons/silk/reload.png) !important; } .fancybutton span.sync { background-image: url(fancybuttons/images/icons/silk/arrow_refresh.png) !important; } .fancybutton span.save { background-image: url(fancybuttons/images/icons/silk/disk.png) !important; } .fancybutton span.email { background-image: url(fancybuttons/images/icons/silk/email.png) !important; } .fancybutton span.print { background-image: url(fancybuttons/images/icons/silk/printer.png) !important; } .fancybutton span.heart { background-image: url(fancybuttons/images/icons/silk/heart.png) !important; } .fancybutton span.like { background-image: url(fancybuttons/images/icons/silk/thumb_up.png) !important; } .fancybutton span.dislike { background-image: url(fancybuttons/images/icons/silk/thumb_down.png) !important; } .fancybutton span.accept { background-image: url(fancybuttons/images/icons/silk/accept.png) !important; } .fancybutton span.decline { background-image: url(fancybuttons/images/icons/silk/decline.png) !important; } .fancybutton span.help { background-image: url(fancybuttons/images/icons/silk/help.png) !important; } .fancybutton span.home { background-image: url(fancybuttons/images/icons/silk/house.png) !important; } .fancybutton span.info { background-image: url(fancybuttons/images/icons/silk/information.png) !important; } .fancybutton span.cut { background-image: url(fancybuttons/images/icons/silk/cut.png) !important; } .fancybutton span.copy { background-image: url(fancybuttons/images/icons/silk/page_white_copy.png) !important; } .fancybutton span.paste { background-image: url(fancybuttons/images/icons/silk/paste_plain.png) !important; } .fancybutton span.erase { background-image: url(fancybuttons/images/icons/silk/erase.png) !important; } .fancybutton span.undo { background-image: url(fancybuttons/images/icons/silk/arrow_undo.png) !important; } .fancybutton span.redo { background-image: url(fancybuttons/images/icons/silk/arrow_redo.png) !important; } .fancybutton span.edit { background-image: url(fancybuttons/images/icons/silk/pencil.png) !important; } .fancybutton span.calendar { background-image: url(fancybuttons/images/icons/silk/date.png) !important; } .fancybutton span.user { background-image: url(fancybuttons/images/icons/silk/user.png) !important; } .fancybutton span.settings { background-image: url(fancybuttons/images/icons/silk/cog.png) !important; } .fancybutton span.cart { background-image: url(fancybuttons/images/icons/silk/cart.png) !important; } .fancybutton span.wand { background-image: url(fancybuttons/images/icons/silk/wand.png) !important; } .fancybutton span.wrench { background-image: url(fancybuttons/images/icons/silk/wrench.png) !important; } .fancybutton span.accept { background-image: url(fancybuttons/images/icons/silk/accept.png) !important; } .fancybutton span.add { background-image: url(fancybuttons/images/icons/silk/add.png) !important; } .fancybutton span.arrow_down { background-image: url(fancybuttons/images/icons/silk/arrow_down.png) !important; } .fancybutton span.arrow_redo { background-image: url(fancybuttons/images/icons/silk/arrow_redo.png) !important; } .fancybutton span.arrow_refresh { background-image: url(fancybuttons/images/icons/silk/arrow_refresh.png) !important; } .fancybutton span.arrow_undo { background-image: url(fancybuttons/images/icons/silk/arrow_undo.png) !important; } .fancybutton span.arrow_up { background-image: url(fancybuttons/images/icons/silk/arrow_up.png) !important; } .fancybutton span.cart { background-image: url(fancybuttons/images/icons/silk/cart.png) !important; } .fancybutton span.cog { background-image: url(fancybuttons/images/icons/silk/cog.png) !important; } .fancybutton span.cross { background-image: url(fancybuttons/images/icons/silk/cross.png) !important; } .fancybutton span.cut { background-image: url(fancybuttons/images/icons/silk/cut.png) !important; } .fancybutton span.date { background-image: url(fancybuttons/images/icons/silk/date.png) !important; } .fancybutton span.decline { background-image: url(fancybuttons/images/icons/silk/decline.png) !important; } .fancybutton span.delete { background-image: url(fancybuttons/images/icons/silk/delete.png) !important; } .fancybutton span.disk { background-image: url(fancybuttons/images/icons/silk/disk.png) !important; } .fancybutton span.dot { background-image: url(fancybuttons/images/icons/silk/dot.png) !important; } .fancybutton span.email { background-image: url(fancybuttons/images/icons/silk/email.png) !important; } .fancybutton span.erase { background-image: url(fancybuttons/images/icons/silk/erase.png) !important; } .fancybutton span.find { background-image: url(fancybuttons/images/icons/silk/find.png) !important; } .fancybutton span.forward_blue { background-image: url(fancybuttons/images/icons/silk/forward_blue.png) !important; } .fancybutton span.heart { background-image: url(fancybuttons/images/icons/silk/heart.png) !important; } .fancybutton span.help { background-image: url(fancybuttons/images/icons/silk/help.png) !important; } .fancybutton span.house { background-image: url(fancybuttons/images/icons/silk/house.png) !important; } .fancybutton span.information { background-image: url(fancybuttons/images/icons/silk/information.png) !important; } .fancybutton span.magnifier { background-image: url(fancybuttons/images/icons/silk/magnifier.png) !important; } .fancybutton span.package_down { background-image: url(fancybuttons/images/icons/silk/package_down.png) !important; } .fancybutton span.page_white_copy { background-image: url(fancybuttons/images/icons/silk/page_white_copy.png) !important; } .fancybutton span.paste_plain { background-image: url(fancybuttons/images/icons/silk/paste_plain.png) !important; } .fancybutton span.pause_blue { background-image: url(fancybuttons/images/icons/silk/pause_blue.png) !important; } .fancybutton span.pencil { background-image: url(fancybuttons/images/icons/silk/pencil.png) !important; } .fancybutton span.play { background-image: url(fancybuttons/images/icons/silk/play.png) !important; } .fancybutton span.printer { background-image: url(fancybuttons/images/icons/silk/printer.png) !important; } .fancybutton span.reload { background-image: url(fancybuttons/images/icons/silk/reload.png) !important; } .fancybutton span.resultset_first { background-image: url(fancybuttons/images/icons/silk/resultset_first.png) !important; } .fancybutton span.resultset_last { background-image: url(fancybuttons/images/icons/silk/resultset_last.png) !important; } .fancybutton span.resultset_next { background-image: url(fancybuttons/images/icons/silk/resultset_next.png) !important; } .fancybutton span.resultset_previous { background-image: url(fancybuttons/images/icons/silk/resultset_previous.png) !important; } .fancybutton span.rewind_blue { background-image: url(fancybuttons/images/icons/silk/rewind_blue.png) !important; } .fancybutton span.stop_blue { background-image: url(fancybuttons/images/icons/silk/stop_blue.png) !important; } .fancybutton span.thumb_down { background-image: url(fancybuttons/images/icons/silk/thumb_down.png) !important; } .fancybutton span.thumb_up { background-image: url(fancybuttons/images/icons/silk/thumb_up.png) !important; } .fancybutton span.tick { background-image: url(fancybuttons/images/icons/silk/tick.png) !important; } .fancybutton span.user { background-image: url(fancybuttons/images/icons/silk/user.png) !important; } .fancybutton span.wand { background-image: url(fancybuttons/images/icons/silk/wand.png) !important; } .fancybutton span.settings { background-image: url(fancybuttons/images/icons/silk/settings.png) !important; }