/** * * '||''|. '|| * || || .... .... ... .... || ... ... ... ... .. * || || .|...|| '|. | .|...|| || .| '|. ||' || ||' '' * || || || '|.| || || || || || | || * .||...|' '|...' '| '|...' .||. '|..|' ||...' .||. * || * --------------- By Display:inline ------------- '''' ----------- * * Colors for the whole template * Using a separate stylesheet allows easy customizing and upgrading * * Content: * 1. Generic colors * 2. Generic backgrounds * 3. Specific gradients * 4. Inputs & progress * 5. Modal window * 6. Generic gradients - defaults * 7. Generic gradients - main * 8. Generic gradients - active * 9. Generic gradients - disabled * * Hey wait! Why are the generic gradient declared several times? * -> to is the best way to handle inheritance issues. For instance, if all generic gradients * where only declared once, * because the blue styles are declared after the green ones. */ /* Text styles */ .big-text { font-size: 18px; line-height: 24px; } .intro { font-style: italic; color: #afafaf; } /* Box styling */ .left-border { border-left: 2px solid; padding-left: 10px; } .right-border { border-right: 2px solid; padding-right: 10px; text-align: right; } .wrapped { display: block; border-width: 1px; border-style: solid; padding: 10px; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } .boxed { display: block; padding: 16px; } /********************************************************/ /* 4. Utility classes */ /********************************************************/ /* Align */ .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } /* Floating elements */ .float-left { float: left; } .float-right { float: right; } .clear-left { clear: left; } .clear-right { clear: right; } .clear-both { clear: both; } /* Padding */ .with-padding { padding: 20px !important; } .with-mid-padding { padding: 10px !important; } .with-small-padding { padding: 5px !important; } .no-padding { padding: 0 !important; } /* Margins */ .large-margin-top { margin-top: 30px !important; } .margin-top { margin-top: 16px !important; } .mid-margin-top { margin-top: 8px !important; } .small-margin-top { margin-top: 4px !important; } .no-margin-top { margin-top: 0 !important; } .large-margin-right { margin-right: 30px !important; } .margin-right { margin-right: 16px !important; } .mid-margin-right { margin-right: 8px !important; } .small-margin-right { margin-right: 4px !important; } .no-margin-right { margin-right: 0 !important; } .large-margin-left { margin-left: 30px !important; } .margin-left { margin-left: 16px !important; } .mid-margin-left { margin-left: 8px !important; } .small-margin-left { margin-left: 4px !important; } .no-margin-left { margin-left: 0 !important; } .large-margin-bottom { margin-bottom: 30px !important; } .margin-bottom { margin-bottom: 16px !important; } .mid-margin-bottom { margin-bottom: 8px !important; } .small-margin-bottom { margin-bottom: 4px !important; } .no-margin-bottom { margin-bottom: 0 !important; } /* Absolute positioning */ .relative { position: relative; } .absolute-left, .absolute-right { position: absolute; top: 50%; margin-top: -8px; } .absolute-left { left: 0; } .absolute-right { right: 0; } /* This class disables mouse events on compatible browsers, a polyfill is provded in setup.js for others */ .no-pointer-events { pointer-events: none; } /* This class is only active if the device does not handle touch */ .no-touch .show-on-parent-hover { pointer-events: none; filter: alpha(opacity=0); -khtml-opacity: 0; -moz-opacity: 0; opacity: 0; -webkit-transition: opacity 200ms; -moz-transition: opacity 200ms; -ms-transition: opacity 200ms; -o-transition: opacity 200ms; transition: opacity 200ms; } .no-touch :hover > .show-on-parent-hover { pointer-events: auto; filter: alpha(opacity=100); -khtml-opacity: 1; -moz-opacity: 1; opacity: 1; } /* Class used to determine which media queries are on */ #mediaquery-checker { width: 10px; height: 10px; position: absolute; top: 0; left: 0; } /********************************************************/ /* 5. Generic shadows */ /********************************************************/ .lite-box-shadow { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); } .box-shadow { -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .strong-box-shadow { -webkit-box-shadow: 0 1px 3px black; -moz-box-shadow: 0 1px 3px black; box-shadow: 0 1px 3px black; } .large-box-shadow { -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45); -moz-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45) } .lite-text-shadow { -webkit-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); -moz-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); } .text-shadow { -webkit-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); -moz-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .strong-text-shadow { -webkit-text-shadow: 0 1px 2px black; -moz-text-shadow: 0 1px 2px black; text-shadow: 0 1px 2px black; } .large-text-shadow { -webkit-text-shadow: 0 3px 8px rgba(0, 0, 0, 0.45); -moz-text-shadow: 0 3px 8px rgba(0, 0, 0, 0.45); text-shadow: 0 3px 8px rgba(0, 0, 0, 0.45) } /********************************************************/ /* 6. Generic bevel/emboss/gloss styles */ /********************************************************/ .top-bevel { -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); } .top-bevel-on-light { -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75); } .top-bevel-on-dark { -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); } .bottom-bevel { -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); } .bottom-bevel-on-light { -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); } .bottom-bevel-on-dark { -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5); } .bevel, .bevel-subs > li, .big-menu > li, li.big-menu, .calendar-menu > li, li.calendar-menu, .title-menu > li, li.title-menu { -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.25); } .no-boxshadow .big-menu > li { border-bottom: 1px solid #666666; } .bevel-on-light, .bevel-on-light-subs > li, .message-menu > li, li.message-menu { -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(0, 0, 0, 0.15); } .bevel-on-dark, .bevel-on-dark-subs > li, #menu header, #profile, #access { -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.5); } .emboss, .emboss-subs > li { -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.25); -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.25); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.25); } .emboss-on-dark, .emboss-on-dark-subs > li { -webkit-box-shadow: inset 0 1px 4px black; -moz-box-shadow: inset 0 1px 4px black; box-shadow: inset 0 1px 4px black; } .bright-text-bevel, .big-menu, .title-menu { -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); -moz-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .bright-text-bevel-on-dark, #menu header, #profile { -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); -moz-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); } .dark-text-bevel, .calendar-menu > li, li.calendar-menu, .message-menu > li, li.message-menu { -webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); -moz-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); } .dark-text-bevel-on-dark { -webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); -moz-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); } /********************************************************/ /* 7. Generic effects */ /********************************************************/ .with-border { border-width: 1px; border-style: solid; } .glow, #title-bar { position: relative; } .glow:before, #title-bar:before { display: block; content: ' '; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url(/../img/effects/glow.png) no-repeat center center; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; } /* Stripes */ .thin-stripes, .dark-thin-stripes, .stripes, .dark-stripes, .big-stripes, .dark-big-stripes { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; -webkit-border-radius: inherit; -moz-border-radius: inherit; border-radius: inherit; } .thin-stripes, .dark-thin-stripes { -webkit-background-size: 10px 10px; -moz-background-size: 10px 10px; background-size: 10px 10px; } .stripes, .dark-stripes { -webkit-background-size: 20px 20px; -moz-background-size: 20px 20px; background-size: 20px 20px; } .big-stripes, .dark-big-stripes { -webkit-background-size: 40px 40px; -moz-background-size: 40px 40px; background-size: 40px 40px; } .thin-stripes, .stripes, .big-stripes { background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.25, rgba(255, 255, 255, 0.1)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.75, rgba(255, 255, 255, 0.05)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent); background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent); } .dark-thin-stripes, .dark-stripes, .dark-big-stripes { background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.25, rgba(0, 0, 0, 0.05)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(0, 0, 0, 0.05)), color-stop(0.75, rgba(0, 0, 0, 0.05)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(135deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.05) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(135deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.05) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(135deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.05) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(135deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.05) 75%, transparent 75%, transparent); background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.05) 75%, transparent 75%, transparent); } /* Animated stripes */ .thin-stripes.animated, .dark-thin-stripes.animated { -webkit-animation: animate-thin-stripes 3s linear infinite; -moz-animation: animate-thin-stripes 3s linear infinite; -ms-animation: animate-thin-stripes 3s linear infinite; -o-animation: animate-thin-stripes 3s linear infinite; } .stripes.animated, .dark-stripes.animated { -webkit-animation: animate-stripes 4s linear infinite; -moz-animation: animate-stripes 4s linear infinite; -ms-animation: animate-stripes 4s linear infinite; -o-animation: animate-stripes 4s linear infinite; } .big-stripes.animated, .dark-big-stripes.animated { -webkit-animation: animate-big-stripes 5s linear infinite; -moz-animation: animate-big-stripes 5s linear infinite; -ms-animation: animate-big-stripes 5s linear infinite; -o-animation: animate-big-stripes 5s linear infinite; } @-webkit-keyframes animate-thin-stripes { from { background-position: 0 0; } to { background-position: -20px 0; } } @-moz-keyframes animate-thin-stripes { from { background-position: 0 0; } to { background-position: -20px 0; } } @-ms-keyframes animate-thin-stripes { from { background-position: 0 0; } to { background-position: -20px 0; } } @-o-keyframes animate-thin-stripes { from { background-position: 0 0; } to { background-position: -20px 0; } } @-webkit-keyframes animate-stripes { from { background-position: 0 0; } to { background-position: -40px 0; } } @-moz-keyframes animate-stripes { from { background-position: 0 0; } to { background-position: -40px 0; } } @-ms-keyframes animate-stripes { from { background-position: 0 0; } to { background-position: -40px 0; } } @-o-keyframes animate-stripes { from { background-position: 0 0; } to { background-position: -40px 0; } } @-webkit-keyframes animate-big-stripes { from { background-position: 0 0; } to { background-position: -80px 0; } } @-moz-keyframes animate-big-stripes { from { background-position: 0 0; } to { background-position: -80px 0; } } @-ms-keyframes animate-big-stripes { from { background-position: 0 0; } to { background-position: -80px 0; } } @-o-keyframes animate-big-stripes { from { background-position: 0 0; } to { background-position: -80px 0; } } /********************************************************/ /* 1. Generic colors */ /********************************************************/ .silver, .silver-color .color { color: #cccccc !important; } .icon-silver:before { color: #cccccc; } .black, .black-color .color { color: black !important; } .icon-black:before { color: black; } .anthracite, .anthracite-color .color { color: #4c4c4c !important; } .icon-anthracite:before { color: #4c4c4c; } .grey, .grey-color .color { color: #a5a5a5 !important; } .icon-grey:before { color: #a5a5a5; } .white, .white-color .color { color: white !important; } .icon-white:before { color: white; } .red, .red-color .color { color: #dd380d !important; } .icon-red:before { color: #dd380d; } .orange, .orange-color .color { color: #ffae00 !important; } .icon-orange:before { color: #ffae00; } .green, .green-color .color { color: #99c624 !important; } .icon-green:before { color: #99c624; } .blue, .blue-color .color { color: #0059a0 !important; } .icon-blue:before { color: #0059a0; } /********************************************************/ /* 2. Generic backgrounds */ /********************************************************/ .carbon { color: white; background: #3c4044 url(/assets/textures/grid-3caec199e554821fcbfffa161ed73566d1db5993afaf177e0fb1ff4ba3dcdf07.png); background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0))), #3c4044 url(/assets/textures/grid-3caec199e554821fcbfffa161ed73566d1db5993afaf177e0fb1ff4ba3dcdf07.png); background: -webkit-linear-gradient( top, rgba(0,0,0,0.4), rgba(0,0,0,0)), #3c4044 url(/assets/textures/grid-3caec199e554821fcbfffa161ed73566d1db5993afaf177e0fb1ff4ba3dcdf07.png); background: -moz-linear-gradient( top, rgba(0,0,0,0.4), rgba(0,0,0,0)), #3c4044 url(/assets/textures/grid-3caec199e554821fcbfffa161ed73566d1db5993afaf177e0fb1ff4ba3dcdf07.png); background: -ms-linear-gradient( top, rgba(0,0,0,0.4), rgba(0,0,0,0)), #3c4044 url(/assets/textures/grid-3caec199e554821fcbfffa161ed73566d1db5993afaf177e0fb1ff4ba3dcdf07.png); background: -o-linear-gradient( top, rgba(0,0,0,0.4), rgba(0,0,0,0)), #3c4044 url(/assets/textures/grid-3caec199e554821fcbfffa161ed73566d1db5993afaf177e0fb1ff4ba3dcdf07.png); background: linear-gradient( top, rgba(0,0,0,0.4), rgba(0,0,0,0)), #3c4044 url(/assets/textures/grid-3caec199e554821fcbfffa161ed73566d1db5993afaf177e0fb1ff4ba3dcdf07.png); } .linen { color: white; border-color: #929ba6; background: #a7b2be url(/assets/textures/fabric-2226999ff1b8922cd11a51b66a66f89f176ac4853f71663bb71000d8e1a8c379.png); background: url(/assets/textures/fabric-2226999ff1b8922cd11a51b66a66f89f176ac4853f71663bb71000d8e1a8c379.png), -webkit-gradient(linear, left top, left bottom, from(#5d656e), to(#a7b2be)) repeat-x, #a7b2be; background: url(/assets/textures/fabric-2226999ff1b8922cd11a51b66a66f89f176ac4853f71663bb71000d8e1a8c379.png), -webkit-linear-gradient(top, #5d656e, #a7b2be) repeat-x, #a7b2be; background: url(/assets/textures/fabric-2226999ff1b8922cd11a51b66a66f89f176ac4853f71663bb71000d8e1a8c379.png), -moz-linear-gradient(top, #5d656e, #a7b2be) repeat-x, #a7b2be; background: url(/assets/textures/fabric-2226999ff1b8922cd11a51b66a66f89f176ac4853f71663bb71000d8e1a8c379.png), -ms-linear-gradient(top, #5d656e, #a7b2be) repeat-x, #a7b2be; background: url(/assets/textures/fabric-2226999ff1b8922cd11a51b66a66f89f176ac4853f71663bb71000d8e1a8c379.png), -o-linear-gradient(top, #5d656e, #a7b2be) repeat-x, #a7b2be; background: url(/assets/textures/fabric-2226999ff1b8922cd11a51b66a66f89f176ac4853f71663bb71000d8e1a8c379.png), linear-gradient(top, #5d656e, #a7b2be) repeat-x, #a7b2be; } .scratch-metal { border-color: #999999; background: #aaaaaa url(/assets/textures/scratches-d675ebd57de0a7f74c2ed7345d8a69e96a2d1364c82d3a3594f6cfd818a19b00.png); background: url(/assets/textures/scratches-d675ebd57de0a7f74c2ed7345d8a69e96a2d1364c82d3a3594f6cfd818a19b00.png), -webkit-gradient(linear, left top, left bottom, from(#aaaaaa), to(#aaaaaa), color-stop(0.25, #f2f2f2), color-stop(0.38, #ffffff), color-stop(0.63, #c5c5c5), color-stop(0.87, #f7f7f7)); background: url(/assets/textures/scratches-d675ebd57de0a7f74c2ed7345d8a69e96a2d1364c82d3a3594f6cfd818a19b00.png), -webkit-linear-gradient(top, #aaaaaa, #f2f2f2 25%, #ffffff 38%, #c5c5c5 63%, #f7f7f7 87%, #aaaaaa); background: url(/assets/textures/scratches-d675ebd57de0a7f74c2ed7345d8a69e96a2d1364c82d3a3594f6cfd818a19b00.png), -moz-linear-gradient(top, #aaaaaa, #f2f2f2 25%, #ffffff 38%, #c5c5c5 63%, #f7f7f7 87%, #aaaaaa); background: url(/assets/textures/scratches-d675ebd57de0a7f74c2ed7345d8a69e96a2d1364c82d3a3594f6cfd818a19b00.png), -ms-linear-gradient(top, #aaaaaa, #f2f2f2 25%, #ffffff 38%, #c5c5c5 63%, #f7f7f7 87%, #aaaaaa); background: url(/assets/textures/scratches-d675ebd57de0a7f74c2ed7345d8a69e96a2d1364c82d3a3594f6cfd818a19b00.png), -o-linear-gradient(top, #aaaaaa, #f2f2f2 25%, #ffffff 38%, #c5c5c5 63%, #f7f7f7 87%, #aaaaaa); background: url(/assets/textures/scratches-d675ebd57de0a7f74c2ed7345d8a69e96a2d1364c82d3a3594f6cfd818a19b00.png), linear-gradient(top, #aaaaaa, #f2f2f2 25%, #ffffff 38%, #c5c5c5 63%, #f7f7f7 87%, #aaaaaa); } /********************************************************/ /* 3. Specific gradients */ /********************************************************/ .input-wrapper { background: #585d62 url(/../img/old-browsers/colors/bg_input-wrapper.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#6e7377), to(#585d62)); background: -webkit-linear-gradient(top, #6e7377, #585d62); background: -moz-linear-gradient(top, #6e7377, #585d62); background: -ms-linear-gradient(top, #6e7377, #585d62); background: -o-linear-gradient(top, #6e7377, #585d62); background: linear-gradient(top, #6e7377, #585d62); } .big-menu { color: white; background: #6ead12 url(/../img/old-browsers/colors/bg_big-menu.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#b1d322), to(#6ead12)); background: -webkit-linear-gradient(top, #b1d322, #6ead12); background: -moz-linear-gradient(top, #b1d322, #6ead12); background: -ms-linear-gradient(top, #b1d322, #6ead12); background: -o-linear-gradient(top, #b1d322, #6ead12); background: linear-gradient(top, #b1d322, #6ead12); } .translucid, .notification { color: #bdbdbd; background: #000 url(/../img/old-browsers/colors/bg_translucid.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255, 0))), rgba(0, 0, 0, 0.75); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)), rgba(0, 0, 0, 0.75); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)), rgba(0, 0, 0, 0.75); background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)), rgba(0, 0, 0, 0.75); background: -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)), rgba(0, 0, 0, 0.75); background: linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)), rgba(0, 0, 0, 0.75); border-color: black; } .field-drop, .row-drop > th, .row-drop > td, .cell-drop, .navigable > .back { background: #3c4044 url(/assets/textures/grid-3caec199e554821fcbfffa161ed73566d1db5993afaf177e0fb1ff4ba3dcdf07.png) !important; background: url(/assets/textures/grid-3caec199e554821fcbfffa161ed73566d1db5993afaf177e0fb1ff4ba3dcdf07.png), -webkit-gradient(linear, left top, left bottom, from(#6d7073), to(#3c4044)) !important; background: url(/assets/textures/grid-3caec199e554821fcbfffa161ed73566d1db5993afaf177e0fb1ff4ba3dcdf07.png), -webkit-linear-gradient(top, #6d7073, #3c4044) !important; background: url(/assets/textures/grid-3caec199e554821fcbfffa161ed73566d1db5993afaf177e0fb1ff4ba3dcdf07.png), -moz-linear-gradient(top, #6d7073, #3c4044) !important; background: url(/assets/textures/grid-3caec199e554821fcbfffa161ed73566d1db5993afaf177e0fb1ff4ba3dcdf07.png), -ms-linear-gradient(top, #6d7073, #3c4044) !important; background: url(/assets/textures/grid-3caec199e554821fcbfffa161ed73566d1db5993afaf177e0fb1ff4ba3dcdf07.png), -o-linear-gradient(top, #6d7073, #3c4044) !important; background: url(/assets/textures/grid-3caec199e554821fcbfffa161ed73566d1db5993afaf177e0fb1ff4ba3dcdf07.png), linear-gradient(top, #6d7073, #3c4044) !important; color: #afafaf; } .field-drop b, .field-drop strong, .row-drop b, .row-drop strong, .cell-drop b, .cell-drop strong { color: white; } /********************************************************/ /* 4. Inputs & progress */ /********************************************************/ a.button { text-decoration: none; } .input, .inputs, .slider, .checkbox, .radio { background: #e6e6e6 url(/../img/old-browsers/colors/bg_input.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(white), to(#e6e6e6)); background: -webkit-linear-gradient(top, white, #e6e6e6); background: -moz-linear-gradient(top, white, #e6e6e6); background: -ms-linear-gradient(top, white, #e6e6e6); background: -o-linear-gradient(top, white, #e6e6e6); background: linear-gradient(top, white, #e6e6e6); border-color: #cccccc; color: #666666; } .black-inputs .input, .input.black-input, .black-inputs .inputs, .inputs.black-input, .black-inputs .progress, .progress.black-input, .black-inputs .slider, .slider.black-input, .black-inputs .checkbox, .checkbox.black-input, .black-inputs .radio, .radio.black-input { background: #323232 url(/../img/old-browsers/colors/bg_black-inputs_input.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#4b4b4b), to(#323232)); background: -webkit-linear-gradient(top, #4b4b4b, #323232); background: -moz-linear-gradient(top, #4b4b4b, #323232); background: -ms-linear-gradient(top, #4b4b4b, #323232); background: -o-linear-gradient(top, #4b4b4b, #323232); background: linear-gradient(top, #4b4b4b, #323232); color: white; border-color: #777777; } .input:disabled { -webkit-text-fill-color: #999999; } .black-inputs .input:disabled, .input.black-input:disabled { -webkit-text-fill-color: #cccccc; } /********************************************************/ /* 5. Modal window */ /********************************************************/ .modal { background: #101010 url(/../img/old-browsers/colors/bg_modal.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#3d3d3d), to(#101010)); background: -webkit-linear-gradient(top, #3d3d3d, #101010); background: -moz-linear-gradient(top, #3d3d3d, #101010); background: -ms-linear-gradient(top, #3d3d3d, #101010); background: -o-linear-gradient(top, #3d3d3d, #101010); background: linear-gradient(top, #3d3d3d, #101010); color: white; border-color: #191919; } .modal-bar { background: url(/../img/old-browsers/colors/bg_modal-bar.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.15)), to(rgba(255, 255, 255, 0))); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 50%); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 50%); background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 50%); background: -o-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 50%); background: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 50%); } /********************************************************/ /* 6. Generic gradients - defaults */ /********************************************************/ /* Silver */ .button, .button:visited, .select-value, .select-arrow, .switch-button, .black-inputs .radio > .check-knob, .black-inputs.radio > .check-knob, .legend, .block-title, .details > summary, .accordion > dt, .table > thead > tr > th, .table > thead > tr > td, .table > tfoot > tr > th, .table > tfoot > tr > td, .agenda-header, .agenda-event, .tabs-back, .blocks-list > li { color: #666666; background: #d6dadf url(/../img/old-browsers/colors/bg_button.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#efeff4), to(#d6dadf)); background: -webkit-linear-gradient(top, #efeff4, #d6dadf); background: -moz-linear-gradient(top, #efeff4, #d6dadf); background: -ms-linear-gradient(top, #efeff4, #d6dadf); background: -o-linear-gradient(top, #efeff4, #d6dadf); background: linear-gradient(top, #efeff4, #d6dadf); border-color: #cccccc; } a.button:hover, button.button:hover, a.select-value:hover, .no-touch .select-arrow:hover, a.agenda-event:hover { color: #666666; background: #d7dbdf url(/../img/old-browsers/colors/bg_a_button_hover.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#d7dbdf)); background: -webkit-linear-gradient(top, #fefefe, #d7dbdf); background: -moz-linear-gradient(top, #fefefe, #d7dbdf); background: -ms-linear-gradient(top, #fefefe, #d7dbdf); background: -o-linear-gradient(top, #fefefe, #d7dbdf); background: linear-gradient(top, #fefefe, #d7dbdf); border-color: #cccccc; } .button.glossy, .glossy > .select-value, .glossy > .select-arrow { background: #dcdce0 url(/../img/old-browsers/colors/bg_button_glossy.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f7), to(#dcdce0), color-stop(0.5, #dededf), color-stop(0.5, #d1d1d2)); background: -webkit-linear-gradient(top, #f5f5f7, #dededf 50%, #d1d1d2 50%, #dcdce0); background: -moz-linear-gradient(top, #f5f5f7, #dededf 50%, #d1d1d2 50%, #dcdce0); background: -ms-linear-gradient(top, #f5f5f7, #dededf 50%, #d1d1d2 50%, #dcdce0); background: -o-linear-gradient(top, #f5f5f7, #dededf 50%, #d1d1d2 50%, #dcdce0); background: linear-gradient(top, #f5f5f7, #dededf 50%, #d1d1d2 50%, #dcdce0); } a.button.glossy:hover, button.button.glossy:hover, .glossy > a.select-value:hover, .glossy > .select-arrow:hover { background: #e8e8eb url(/../img/old-browsers/colors/bg_a_button_glossy_hover.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#fafafc), to(#e8e8eb), color-stop(0.5, #ededf0), color-stop(0.5, #e3e3e5)); background: -webkit-linear-gradient(top, #fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb); background: -moz-linear-gradient(top, #fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb); background: -ms-linear-gradient(top, #fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb); background: -o-linear-gradient(top, #fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb); background: linear-gradient(top, #fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb); } a.button:active, button.button:active, .button.active, .button.active:hover, a.button.glossy:active, button.button.glossy:active, .button.glossy.active { background: #dbdbdb url(/../img/old-browsers/colors/bg_a_button_active.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#bdbdbd), to(#dbdbdb)); background: -webkit-linear-gradient(top, #bdbdbd, #dbdbdb); background: -moz-linear-gradient(top, #bdbdbd, #dbdbdb); background: -ms-linear-gradient(top, #bdbdbd, #dbdbdb); background: -o-linear-gradient(top, #bdbdbd, #dbdbdb); background: linear-gradient(top, #bdbdbd, #dbdbdb); } /* Black */ #title-bar, #access { background: #000000 url(/../img/old-browsers/colors/bg_tr_highlight_glossy_th.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#5e5e5e), to(black), color-stop(0.04, #4f4f4f), color-stop(0.44, #262626), color-stop(0.5, #1c1c1c), color-stop(0.5, #050505)); background: -webkit-linear-gradient(top, #5e5e5e, #4f4f4f 4%, #262626 44%, #1c1c1c 50%, #050505 50%, black); background: -moz-linear-gradient(top, #5e5e5e, #4f4f4f 4%, #262626 44%, #1c1c1c 50%, #050505 50%, black); background: -ms-linear-gradient(top, #5e5e5e, #4f4f4f 4%, #262626 44%, #1c1c1c 50%, #050505 50%, black); background: -o-linear-gradient(top, #5e5e5e, #4f4f4f 4%, #262626 44%, #1c1c1c 50%, #050505 50%, black); background: linear-gradient(top, #5e5e5e, #4f4f4f 4%, #262626 44%, #1c1c1c 50%, #050505 50%, black); } /* Anthracite */ .black-inputs .switch-button, .black-input > .switch-button, .radio > .check-knob { color: white; background: #404040 url(/../img/old-browsers/colors/bg_black-inputs_switch-button.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#565656), to(#404040)); background: -webkit-linear-gradient(top, #565656, #404040); background: -moz-linear-gradient(top, #565656, #404040); background: -ms-linear-gradient(top, #565656, #404040); background: -o-linear-gradient(top, #565656, #404040); background: linear-gradient(top, #565656, #404040); border-color: #282e36; } /* White */ .calendar-menu > li, li.calendar-menu, .message-menu > li, li.message-menu, .message, .big-message, .table > thead > tr > .header:hover { color: #666666; background: #e4e7eb url(/../img/old-browsers/colors/bg_message.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#f7f7fa), to(#e4e7eb)); background: -webkit-linear-gradient(top, #f7f7fa, #e4e7eb); background: -moz-linear-gradient(top, #f7f7fa, #e4e7eb); background: -ms-linear-gradient(top, #f7f7fa, #e4e7eb); background: -o-linear-gradient(top, #f7f7fa, #e4e7eb); background: linear-gradient(top, #f7f7fa, #e4e7eb); border-color: #cccccc; } .message.glossy, .big-message.glossy { background: #e8e8eb url(/../img/old-browsers/colors/bg_message_glossy.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#fafafc), to(#e8e8eb), color-stop(0.5, #ededf0), color-stop(0.5, #e3e3e5)); background: -webkit-linear-gradient(top, #fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb); background: -moz-linear-gradient(top, #fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb); background: -ms-linear-gradient(top, #fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb); background: -o-linear-gradient(top, #fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb); background: linear-gradient(top, #fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb); } /* Red */ .count, .close, .extra-notifications, .more-notifications { color: white; background: #d52607 url(/../img/old-browsers/colors/bg_count.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#e24913), to(#d52607)); background: -webkit-linear-gradient(top, #e24913, #d52607); background: -moz-linear-gradient(top, #e24913, #d52607); background: -ms-linear-gradient(top, #e24913, #d52607); background: -o-linear-gradient(top, #e24913, #d52607); background: linear-gradient(top, #e24913, #d52607); border-color: #931a03; } a.count:hover, a.close:hover { color: white; background: #d12206 url(/../img/old-browsers/colors/bg_a_count_hover.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#eb671d), to(#d12206)); background: -webkit-linear-gradient(top, #eb671d, #d12206); background: -moz-linear-gradient(top, #eb671d, #d12206); background: -ms-linear-gradient(top, #eb671d, #d12206); background: -o-linear-gradient(top, #eb671d, #d12206); background: linear-gradient(top, #eb671d, #d12206); border-color: #931a03; } .count.glossy, .close.glossy { background: #d42622 url(/../img/old-browsers/colors/bg_count_glossy.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#fd8383), to(#d42622), color-stop(0.5, #c30909), color-stop(0.5, #a70606)); background: -webkit-linear-gradient(top, #fd8383, #c30909 50%, #a70606 50%, #d42622); background: -moz-linear-gradient(top, #fd8383, #c30909 50%, #a70606 50%, #d42622); background: -ms-linear-gradient(top, #fd8383, #c30909 50%, #a70606 50%, #d42622); background: -o-linear-gradient(top, #fd8383, #c30909 50%, #a70606 50%, #d42622); background: linear-gradient(top, #fd8383, #c30909 50%, #a70606 50%, #d42622); } a.count.glossy:hover, a.close.glossy:hover { background: #e94237 url(/../img/old-browsers/colors/bg_a_count_glossy_hover.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#fe9b96), to(#e94237), color-stop(0.5, #df1411), color-stop(0.5, #ce0d0c)); background: -webkit-linear-gradient(top, #fe9b96, #df1411 50%, #ce0d0c 50%, #e94237); background: -moz-linear-gradient(top, #fe9b96, #df1411 50%, #ce0d0c 50%, #e94237); background: -ms-linear-gradient(top, #fe9b96, #df1411 50%, #ce0d0c 50%, #e94237); background: -o-linear-gradient(top, #fe9b96, #df1411 50%, #ce0d0c 50%, #e94237); background: linear-gradient(top, #fe9b96, #df1411 50%, #ce0d0c 50%, #e94237); } a.count:active, a.count.active, a.count.glossy:active, a.close:active, a.close.active, a.close.glossy:active { background: #e4360a url(/../img/old-browsers/colors/bg_a_count_active.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#ce1d06), to(#e4360a)); background: -webkit-linear-gradient(top, #ce1d06, #e4360a); background: -moz-linear-gradient(top, #ce1d06, #e4360a); background: -ms-linear-gradient(top, #ce1d06, #e4360a); background: -o-linear-gradient(top, #ce1d06, #e4360a); background: linear-gradient(top, #ce1d06, #e4360a); } /* Green */ .ribbon-inner { color: white; background: #87ba17 url(/../img/old-browsers/colors/bg_ribbon-inner.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#a7cf34), to(#87ba17)); background: -webkit-linear-gradient(top, #a7cf34, #87ba17); background: -moz-linear-gradient(top, #a7cf34, #87ba17); background: -ms-linear-gradient(top, #a7cf34, #87ba17); background: -o-linear-gradient(top, #a7cf34, #87ba17); background: linear-gradient(top, #a7cf34, #87ba17); border-color: #6d960c; } /* Blue */ .tag { background: #0059a0; color: white; border-color: #004795; } .button-icon, .progress-bar, .slider-bar, .table-header, .table-footer { color: white; background: #00438d url(/../img/old-browsers/colors/bg_button-icon.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#006aac), to(#00438d)); background: -webkit-linear-gradient(top, #006aac, #00438d); background: -moz-linear-gradient(top, #006aac, #00438d); background: -ms-linear-gradient(top, #006aac, #00438d); background: -o-linear-gradient(top, #006aac, #00438d); background: linear-gradient(top, #006aac, #00438d); border-color: #004795; } .no-touch .drop-down > span:hover, .no-touch .drop-down > a:hover, .drop-down > .selected, :hover > .button-icon { color: white; background: #003d86 url(/../img/old-browsers/colors/bg_no-touch_drop-down_span_hover.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#0089c3), to(#003d86)); background: -webkit-linear-gradient(top, #0089c3, #003d86); background: -moz-linear-gradient(top, #0089c3, #003d86); background: -ms-linear-gradient(top, #0089c3, #003d86); background: -o-linear-gradient(top, #0089c3, #003d86); background: linear-gradient(top, #0089c3, #003d86); border-color: #004795; } .button-icon.glossy, .glossy > .button-icon, .progress-bar, .slider-bar { background: #0a5db8 url(/../img/old-browsers/colors/bg_button-icon_glossy.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#65b2dd), to(#0a5db8), color-stop(0.5, #045ab2), color-stop(0.5, #004995)); background: -webkit-linear-gradient(top, #65b2dd, #045ab2 50%, #004995 50%, #0a5db8); background: -moz-linear-gradient(top, #65b2dd, #045ab2 50%, #004995 50%, #0a5db8); background: -ms-linear-gradient(top, #65b2dd, #045ab2 50%, #004995 50%, #0a5db8); background: -o-linear-gradient(top, #65b2dd, #045ab2 50%, #004995 50%, #0a5db8); background: linear-gradient(top, #65b2dd, #045ab2 50%, #004995 50%, #0a5db8); } :hover > .button-icon.glossy, .glossy:hover > .button-icon { background: #056fc9 url(/../img/old-browsers/colors/bg_hover_button-icon_glossy.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#46bde5), to(#056fc9), color-stop(0.5, #026cc4), color-stop(0.5, #005cac)); background: -webkit-linear-gradient(top, #46bde5, #026cc4 50%, #005cac 50%, #056fc9); background: -moz-linear-gradient(top, #46bde5, #026cc4 50%, #005cac 50%, #056fc9); background: -ms-linear-gradient(top, #46bde5, #026cc4 50%, #005cac 50%, #056fc9); background: -o-linear-gradient(top, #46bde5, #026cc4 50%, #005cac 50%, #056fc9); background: linear-gradient(top, #46bde5, #026cc4 50%, #005cac 50%, #056fc9); } .button:active > .button-icon, .active > .button-icon { background: #005fb4 url(/../img/old-browsers/colors/bg_button_active_button-icon.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#003475), to(#005fb4)); background: -webkit-linear-gradient(top, #003475, #005fb4); background: -moz-linear-gradient(top, #003475, #005fb4); background: -ms-linear-gradient(top, #003475, #005fb4); background: -o-linear-gradient(top, #003475, #005fb4); background: linear-gradient(top, #003475, #005fb4); } /********************************************************/ /* 7. Generic gradients - main */ /********************************************************/ .silver-bg, .drop-down, .wrapped, .boxed { background: #e3e5ea; color: #666666; border-color: #cccccc; } a.silver-bg:hover { color: #666666; background: #e8e9ee; } .silver-gradient, .silver-gradient:visited, .silver-gradient > .select-value, .silver-gradient > .select-arrow { color: #666666; background: #d6dadf url(/../img/old-browsers/colors/bg_silver-gradient.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#efeff4), to(#d6dadf)); background: -webkit-linear-gradient(top, #efeff4, #d6dadf); background: -moz-linear-gradient(top, #efeff4, #d6dadf); background: -ms-linear-gradient(top, #efeff4, #d6dadf); background: -o-linear-gradient(top, #efeff4, #d6dadf); background: linear-gradient(top, #efeff4, #d6dadf); border-color: #cccccc; } a.silver-gradient:hover, button.silver-gradient:hover, :hover > .button-icon.silver-gradient, .silver-gradient > a.select-value:hover, .silver-gradient > .select-arrow:hover { color: #666666; background: #d7dbdf url(/../img/old-browsers/colors/bg_a_silver-gradient_hover.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#d7dbdf)); background: -webkit-linear-gradient(top, #fefefe, #d7dbdf); background: -moz-linear-gradient(top, #fefefe, #d7dbdf); background: -ms-linear-gradient(top, #fefefe, #d7dbdf); background: -o-linear-gradient(top, #fefefe, #d7dbdf); background: linear-gradient(top, #fefefe, #d7dbdf); border-color: #cccccc; } .silver-gradient.glossy, .glossy > .button-icon.silver-gradient, .button-icon.glossy.silver-gradient, .silver-gradient.glossy > .select-value, .silver-gradient.glossy > .select-arrow { background: #dcdce0 url(/../img/old-browsers/colors/bg_silver-gradient_glossy.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f7), to(#dcdce0), color-stop(0.5, #dededf), color-stop(0.5, #d1d1d2)); background: -webkit-linear-gradient(top, #f5f5f7, #dededf 50%, #d1d1d2 50%, #dcdce0); background: -moz-linear-gradient(top, #f5f5f7, #dededf 50%, #d1d1d2 50%, #dcdce0); background: -ms-linear-gradient(top, #f5f5f7, #dededf 50%, #d1d1d2 50%, #dcdce0); background: -o-linear-gradient(top, #f5f5f7, #dededf 50%, #d1d1d2 50%, #dcdce0); background: linear-gradient(top, #f5f5f7, #dededf 50%, #d1d1d2 50%, #dcdce0); } a.silver-gradient.glossy:hover, button.silver-gradient.glossy:hover, .glossy:hover > .button-icon.silver-gradient, :hover > .button-icon.glossy.silver-gradient, .silver-gradient.glossy > a.select-value:hover, .silver-gradient.glossy > .select-arrow:hover { background: #e8e8eb url(/../img/old-browsers/colors/bg_a_silver-gradient_glossy_hover.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#fafafc), to(#e8e8eb), color-stop(0.5, #ededf0), color-stop(0.5, #e3e3e5)); background: -webkit-linear-gradient(top, #fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb); background: -moz-linear-gradient(top, #fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb); background: -ms-linear-gradient(top, #fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb); background: -o-linear-gradient(top, #fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb); background: linear-gradient(top, #fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb); } a.silver-gradient:active, button.silver-gradient:active, .button.silver-gradient:active, .silver-gradient.active, :active > .button-icon.silver-gradient, .active > .button-icon.silver-gradient { background: #dbdbdb url(/../img/old-browsers/colors/bg_a_silver-gradient_active.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#bdbdbd), to(#dbdbdb)) !important; background: -webkit-linear-gradient(top, #bdbdbd, #dbdbdb) !important; background: -moz-linear-gradient(top, #bdbdbd, #dbdbdb) !important; background: -ms-linear-gradient(top, #bdbdbd, #dbdbdb) !important; background: -o-linear-gradient(top, #bdbdbd, #dbdbdb) !important; background: linear-gradient(top, #bdbdbd, #dbdbdb) !important; } .black-bg, .black-gradient > .drop-down { background: #101010; color: white; border-color: black; } a.black-bg:hover { color: white; background: #383838; } .black-gradient, .black-gradient:visited, .black-gradient > .select-value, .black-gradient > .select-arrow { color: white; background: #000000 url(/../img/old-browsers/colors/bg_black-gradient.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#000000)); background: -webkit-linear-gradient(top, #333333, #000000); background: -moz-linear-gradient(top, #333333, #000000); background: -ms-linear-gradient(top, #333333, #000000); background: -o-linear-gradient(top, #333333, #000000); background: linear-gradient(top, #333333, #000000); border-color: black; } a.black-gradient:hover, button.black-gradient:hover, :hover > .button-icon.black-gradient, .black-gradient > a.select-value:hover, .black-gradient > .select-arrow:hover { color: white; background: #1b1b1b url(/../img/old-browsers/colors/bg_a_black-gradient_hover.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#474747), to(#1b1b1b)); background: -webkit-linear-gradient(top, #474747, #1b1b1b); background: -moz-linear-gradient(top, #474747, #1b1b1b); background: -ms-linear-gradient(top, #474747, #1b1b1b); background: -o-linear-gradient(top, #474747, #1b1b1b); background: linear-gradient(top, #474747, #1b1b1b); border-color: black; } .black-gradient.glossy, .glossy > .button-icon.black-gradient, .button-icon.glossy.black-gradient, .black-gradient.glossy > .select-value, .black-gradient.glossy > .select-arrow { background: #000000 url(/../img/old-browsers/colors/bg_black-gradient_glossy.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#5e5e5e), to(black), color-stop(0.04, #4f4f4f), color-stop(0.44, #262626), color-stop(0.5, #1c1c1c), color-stop(0.5, #050505)); background: -webkit-linear-gradient(top, #5e5e5e, #4f4f4f 4%, #262626 44%, #1c1c1c 50%, #050505 50%, black); background: -moz-linear-gradient(top, #5e5e5e, #4f4f4f 4%, #262626 44%, #1c1c1c 50%, #050505 50%, black); background: -ms-linear-gradient(top, #5e5e5e, #4f4f4f 4%, #262626 44%, #1c1c1c 50%, #050505 50%, black); background: -o-linear-gradient(top, #5e5e5e, #4f4f4f 4%, #262626 44%, #1c1c1c 50%, #050505 50%, black); background: linear-gradient(top, #5e5e5e, #4f4f4f 4%, #262626 44%, #1c1c1c 50%, #050505 50%, black); } a.black-gradient.glossy:hover, button.black-gradient.glossy:hover, .glossy:hover > .button-icon.black-gradient, :hover > .button-icon.glossy.black-gradient, .black-gradient.glossy > a.select-value:hover, .black-gradient.glossy > .select-arrow:hover { background: #080808 url(/../img/old-browsers/colors/bg_a_black-gradient_glossy_hover.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#6b6b6b), to(#080808), color-stop(0.04, #5c5c5c), color-stop(0.44, #303030), color-stop(0.5, #262626), color-stop(0.5, #0d0d0d)); background: -webkit-linear-gradient(top, #6b6b6b, #5c5c5c 4%, #303030 44%, #262626 50%, #0d0d0d 50%, #080808); background: -moz-linear-gradient(top, #6b6b6b, #5c5c5c 4%, #303030 44%, #262626 50%, #0d0d0d 50%, #080808); background: -ms-linear-gradient(top, #6b6b6b, #5c5c5c 4%, #303030 44%, #262626 50%, #0d0d0d 50%, #080808); background: -o-linear-gradient(top, #6b6b6b, #5c5c5c 4%, #303030 44%, #262626 50%, #0d0d0d 50%, #080808); background: linear-gradient(top, #6b6b6b, #5c5c5c 4%, #303030 44%, #262626 50%, #0d0d0d 50%, #080808); } a.black-gradient:active, button.black-gradient:active, .button.black-gradient:active, .black-gradient.active, :active > .button-icon.black-gradient, .active > .button-icon.black-gradient { background: #262626 url(/../img/old-browsers/colors/bg_a_black-gradient_active.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(black), to(#262626)) !important; background: -webkit-linear-gradient(top, black, #262626) !important; background: -moz-linear-gradient(top, black, #262626) !important; background: -ms-linear-gradient(top, black, #262626) !important; background: -o-linear-gradient(top, black, #262626) !important; background: linear-gradient(top, black, #262626) !important; } .anthracite-bg, .anthracite-gradient > .drop-down { background: #4c4c4c; color: white; border-color: #282e36; } a.anthracite-bg:hover { color: white; background: #6a6a6a; } .anthracite-gradient, .anthracite-gradient:visited, .anthracite-gradient > .select-value, .anthracite-gradient > .select-arrow, .black-inputs .number-up, .black-input > .number-up, .black-inputs .number-down, .black-input > .number-down { color: white; background: #404040 url(/../img/old-browsers/colors/bg_anthracite-gradient.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#565656), to(#404040)); background: -webkit-linear-gradient(top, #565656, #404040); background: -moz-linear-gradient(top, #565656, #404040); background: -ms-linear-gradient(top, #565656, #404040); background: -o-linear-gradient(top, #565656, #404040); background: linear-gradient(top, #565656, #404040); border-color: #282e36; } a.anthracite-gradient:hover, button.anthracite-gradient:hover, :hover > .button-icon.anthracite-gradient, .no-touch .red-gradient > .drop-down > span:hover, .no-touch .red-gradient > .drop-down > a:hover, .red-gradient > .drop-down > .selected, .no-touch .orange-gradient > .drop-down > span:hover, .no-touch .orange-gradient > .drop-down > a:hover, .orange-gradient > .drop-down > .selected, .no-touch .green-gradient > .drop-down > span:hover, .no-touch .green-gradient > .drop-down > a:hover, .green-gradient > .drop-down > .selected, .no-touch .blue-gradient > .drop-down > span:hover, .no-touch .blue-gradient > .drop-down > a:hover, .blue-gradient > .drop-down > .selected, .anthracite-gradient > a.select-value:hover, .anthracite-gradient > .select-arrow:hover, .black-inputs .number-up:hover, .black-input > .number-up:hover, .black-inputs .number-down:hover, .black-input > .number-down:hover { color: white; background: #3a3a3a url(/../img/old-browsers/colors/bg_a_anthracite-gradient_hover.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#6d6d6d), to(#3a3a3a)); background: -webkit-linear-gradient(top, #6d6d6d, #3a3a3a); background: -moz-linear-gradient(top, #6d6d6d, #3a3a3a); background: -ms-linear-gradient(top, #6d6d6d, #3a3a3a); background: -o-linear-gradient(top, #6d6d6d, #3a3a3a); background: linear-gradient(top, #6d6d6d, #3a3a3a); border-color: #282e36; } .anthracite-gradient.glossy, .glossy > .button-icon.anthracite-gradient, .button-icon.glossy.anthracite-gradient, .anthracite-gradient.glossy > .select-value, .anthracite-gradient.glossy > .select-arrow { background: #505050 url(/../img/old-browsers/colors/bg_anthracite-gradient_glossy.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#7f7f7f), to(#505050), color-stop(0.5, #444444), color-stop(0.5, #292929)); background: -webkit-linear-gradient(top, #7f7f7f, #444444 50%, #292929 50%, #505050); background: -moz-linear-gradient(top, #7f7f7f, #444444 50%, #292929 50%, #505050); background: -ms-linear-gradient(top, #7f7f7f, #444444 50%, #292929 50%, #505050); background: -o-linear-gradient(top, #7f7f7f, #444444 50%, #292929 50%, #505050); background: linear-gradient(top, #7f7f7f, #444444 50%, #292929 50%, #505050); } a.anthracite-gradient.glossy:hover, button.anthracite-gradient.glossy:hover, .glossy:hover > .button-icon.anthracite-gradient, :hover > .button-icon.glossy.anthracite-gradient, .anthracite-gradient.glossy > a.select-value:hover, .anthracite-gradient.glossy > .select-arrow:hover { background: #656565 url(/../img/old-browsers/colors/bg_a_anthracite-gradient_glossy_hover.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#919191), to(#656565), color-stop(0.5, #5a5a5a), color-stop(0.5, #3e3e3e)); background: -webkit-linear-gradient(top, #919191, #5a5a5a 50%, #3e3e3e 50%, #656565); background: -moz-linear-gradient(top, #919191, #5a5a5a 50%, #3e3e3e 50%, #656565); background: -ms-linear-gradient(top, #919191, #5a5a5a 50%, #3e3e3e 50%, #656565); background: -o-linear-gradient(top, #919191, #5a5a5a 50%, #3e3e3e 50%, #656565); background: linear-gradient(top, #919191, #5a5a5a 50%, #3e3e3e 50%, #656565); } a.anthracite-gradient:active, button.anthracite-gradient:active, .button.anthracite-gradient:active, .anthracite-gradient.active, :active > .button-icon.anthracite-gradient, .active > .button-icon.anthracite-gradient, .black-inputs .number-up:active, .black-input > .number-up:active, .black-inputs .number-down:active, .black-input > .number-down:active { background: #474747 url(/../img/old-browsers/colors/bg_a_anthracite-gradient_active.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#262626), to(#474747)) !important; background: -webkit-linear-gradient(top, #262626, #474747) !important; background: -moz-linear-gradient(top, #262626, #474747) !important; background: -ms-linear-gradient(top, #262626, #474747) !important; background: -o-linear-gradient(top, #262626, #474747) !important; background: linear-gradient(top, #262626, #474747) !important; } .grey-bg, .grey-gradient > .drop-down { background: #a5a5a5; color: white; border-color: #666666; } a.grey-bg:hover { color: white; background: #b4b4b4; } .grey-gradient, .grey-gradient:visited, .grey-gradient > .select-value, .grey-gradient > .select-arrow, .title-menu > li, li.title-menu { color: white; background: #939393 url(/../img/old-browsers/colors/bg_grey-gradient.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#b3b3b3), to(#939393)); background: -webkit-linear-gradient(top, #b3b3b3, #939393); background: -moz-linear-gradient(top, #b3b3b3, #939393); background: -ms-linear-gradient(top, #b3b3b3, #939393); background: -o-linear-gradient(top, #b3b3b3, #939393); background: linear-gradient(top, #b3b3b3, #939393); border-color: #666666; } a.grey-gradient:hover, button.grey-gradient:hover, :hover > .button-icon.grey-gradient, .grey-gradient > a.select-value:hover, .grey-gradient > .select-arrow:hover { color: white; background: #8b8b8b url(/../img/old-browsers/colors/bg_a_grey-gradient_hover.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#d6d6d6), to(#8b8b8b)); background: -webkit-linear-gradient(top, #d6d6d6, #8b8b8b); background: -moz-linear-gradient(top, #d6d6d6, #8b8b8b); background: -ms-linear-gradient(top, #d6d6d6, #8b8b8b); background: -o-linear-gradient(top, #d6d6d6, #8b8b8b); background: linear-gradient(top, #d6d6d6, #8b8b8b); border-color: #666666; } .grey-gradient.glossy, .glossy > .button-icon.grey-gradient, .button-icon.glossy.grey-gradient, .grey-gradient.glossy > .select-value, .grey-gradient.glossy > .select-arrow { background: #9c9c9c url(/../img/old-browsers/colors/bg_grey-gradient_glossy.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#9c9c9c), color-stop(0.5, #909090), color-stop(0.5, #757575)); background: -webkit-linear-gradient(top, #cccccc, #909090 50%, #757575 50%, #9c9c9c); background: -moz-linear-gradient(top, #cccccc, #909090 50%, #757575 50%, #9c9c9c); background: -ms-linear-gradient(top, #cccccc, #909090 50%, #757575 50%, #9c9c9c); background: -o-linear-gradient(top, #cccccc, #909090 50%, #757575 50%, #9c9c9c); background: linear-gradient(top, #cccccc, #909090 50%, #757575 50%, #9c9c9c); } a.grey-gradient.glossy:hover, button.grey-gradient.glossy:hover, .glossy:hover > .button-icon.grey-gradient, :hover > .button-icon.glossy.grey-gradient, .grey-gradient.glossy > a.select-value:hover, .grey-gradient.glossy > .select-arrow:hover { background: #ababab url(/../img/old-browsers/colors/bg_a_grey-gradient_glossy_hover.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#d4d4d4), to(#ababab), color-stop(0.5, #a0a0a0), color-stop(0.5, #888888)); background: -webkit-linear-gradient(top, #d4d4d4, #a0a0a0 50%, #888888 50%, #ababab); background: -moz-linear-gradient(top, #d4d4d4, #a0a0a0 50%, #888888 50%, #ababab); background: -ms-linear-gradient(top, #d4d4d4, #a0a0a0 50%, #888888 50%, #ababab); background: -o-linear-gradient(top, #d4d4d4, #a0a0a0 50%, #888888 50%, #ababab); background: linear-gradient(top, #d4d4d4, #a0a0a0 50%, #888888 50%, #ababab); } a.grey-gradient:active, button.grey-gradient:active, .button.grey-gradient:active, .grey-gradient.active, :active > .button-icon.grey-gradient, .active > .button-icon.grey-gradient, .black-inputs .switch-off, .black-input > .switch-off { background: #b7b7b7 url(/../img/old-browsers/colors/bg_a_grey-gradient_active.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#7a7a7a), to(#b7b7b7)) !important; background: -webkit-linear-gradient(top, #7a7a7a, #b7b7b7) !important; background: -moz-linear-gradient(top, #7a7a7a, #b7b7b7) !important; background: -ms-linear-gradient(top, #7a7a7a, #b7b7b7) !important; background: -o-linear-gradient(top, #7a7a7a, #b7b7b7) !important; background: linear-gradient(top, #7a7a7a, #b7b7b7) !important; } .white-bg, .white-gradient > .drop-down { background: #f1f3f4; color: #666666; border-color: #cccccc; } a.white-bg:hover { color: #666666; background: #f3f5f6; } .white-gradient, .white-gradient:visited, .white-gradient > .select-value, .white-gradient > .select-arrow { color: #666666; background: #e4e7eb url(/../img/old-browsers/colors/bg_white-gradient.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#f7f7fa), to(#e4e7eb)); background: -webkit-linear-gradient(top, #f7f7fa, #e4e7eb); background: -moz-linear-gradient(top, #f7f7fa, #e4e7eb); background: -ms-linear-gradient(top, #f7f7fa, #e4e7eb); background: -o-linear-gradient(top, #f7f7fa, #e4e7eb); background: linear-gradient(top, #f7f7fa, #e4e7eb); border-color: #cccccc; } a.white-gradient:hover, button.white-gradient:hover, :hover > .button-icon.white-gradient, .white-gradient > a.select-value:hover, .white-gradient > .select-arrow:hover { color: #666666; background: #edf0f2 url(/../img/old-browsers/colors/bg_a_white-gradient_hover.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#edf0f2)); background: -webkit-linear-gradient(top, #fefefe, #edf0f2); background: -moz-linear-gradient(top, #fefefe, #edf0f2); background: -ms-linear-gradient(top, #fefefe, #edf0f2); background: -o-linear-gradient(top, #fefefe, #edf0f2); background: linear-gradient(top, #fefefe, #edf0f2); border-color: #cccccc; } .white-gradient.glossy, .glossy > .button-icon.white-gradient, .button-icon.glossy.white-gradient, .white-gradient.glossy > .select-value, .white-gradient.glossy > .select-arrow { background: #e8e8eb url(/../img/old-browsers/colors/bg_white-gradient_glossy.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#fafafc), to(#e8e8eb), color-stop(0.5, #ededf0), color-stop(0.5, #e3e3e5)); background: -webkit-linear-gradient(top, #fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb); background: -moz-linear-gradient(top, #fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb); background: -ms-linear-gradient(top, #fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb); background: -o-linear-gradient(top, #fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb); background: linear-gradient(top, #fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb); } a.white-gradient.glossy:hover, button.white-gradient.glossy:hover, .glossy:hover > .button-icon.white-gradient, :hover > .button-icon.glossy.white-gradient, .white-gradient.glossy > a.select-value:hover, .white-gradient.glossy > .select-arrow:hover { background: #f5f5f7 url(/../img/old-browsers/colors/bg_a_white-gradient_glossy_hover.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#fefeff), to(#f5f5f7), color-stop(0.5, #f5f5f7), color-stop(0.5, #efeff1)); background: -webkit-linear-gradient(top, #fefeff, #f5f5f7 50%, #efeff1 50%, #f5f5f7); background: -moz-linear-gradient(top, #fefeff, #f5f5f7 50%, #efeff1 50%, #f5f5f7); background: -ms-linear-gradient(top, #fefeff, #f5f5f7 50%, #efeff1 50%, #f5f5f7); background: -o-linear-gradient(top, #fefeff, #f5f5f7 50%, #efeff1 50%, #f5f5f7); background: linear-gradient(top, #fefeff, #f5f5f7 50%, #efeff1 50%, #f5f5f7); } a.white-gradient:active, button.white-gradient:active, .button.white-gradient:active, .white-gradient.active, :active > .button-icon.white-gradient, .active > .button-icon.white-gradient, .switch-off { background: #f0f0f0 url(/../img/old-browsers/colors/bg_a_white-gradient_active.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#f0f0f0)) !important; background: -webkit-linear-gradient(top, #e0e0e0, #f0f0f0) !important; background: -moz-linear-gradient(top, #e0e0e0, #f0f0f0) !important; background: -ms-linear-gradient(top, #e0e0e0, #f0f0f0) !important; background: -o-linear-gradient(top, #e0e0e0, #f0f0f0) !important; background: linear-gradient(top, #e0e0e0, #f0f0f0) !important; border-color: #cccccc; } .red-bg, .red-gradient > .drop-down { background: #dd380d; color: white; border-color: #931a03; } a.red-bg:hover { color: white; background: #e35a36; } .red-gradient, .red-gradient:visited, .red-gradient > .select-value, .red-gradient > .select-arrow { color: white; background: #d52607 url(/../img/old-browsers/colors/bg_red-gradient.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#e24913), to(#d52607)); background: -webkit-linear-gradient(top, #e24913, #d52607); background: -moz-linear-gradient(top, #e24913, #d52607); background: -ms-linear-gradient(top, #e24913, #d52607); background: -o-linear-gradient(top, #e24913, #d52607); background: linear-gradient(top, #e24913, #d52607); border-color: #931a03; } a.red-gradient:hover, button.red-gradient:hover, :hover > .button-icon.red-gradient, .red-gradient > a.select-value:hover, .red-gradient > .select-arrow:hover { color: white; background: #d12206 url(/../img/old-browsers/colors/bg_a_red-gradient_hover.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#eb671d), to(#d12206)); background: -webkit-linear-gradient(top, #eb671d, #d12206); background: -moz-linear-gradient(top, #eb671d, #d12206); background: -ms-linear-gradient(top, #eb671d, #d12206); background: -o-linear-gradient(top, #eb671d, #d12206); background: linear-gradient(top, #eb671d, #d12206); border-color: #931a03; } .red-gradient.glossy, .glossy > .button-icon.red-gradient, .button-icon.glossy.red-gradient, .red-gradient.glossy > .select-value, .red-gradient.glossy > .select-arrow { background: #d42622 url(/../img/old-browsers/colors/bg_red-gradient_glossy.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#fd8383), to(#d42622), color-stop(0.5, #c30909), color-stop(0.5, #a70606)); background: -webkit-linear-gradient(top, #fd8383, #c30909 50%, #a70606 50%, #d42622); background: -moz-linear-gradient(top, #fd8383, #c30909 50%, #a70606 50%, #d42622); background: -ms-linear-gradient(top, #fd8383, #c30909 50%, #a70606 50%, #d42622); background: -o-linear-gradient(top, #fd8383, #c30909 50%, #a70606 50%, #d42622); background: linear-gradient(top, #fd8383, #c30909 50%, #a70606 50%, #d42622); } a.red-gradient.glossy:hover, button.red-gradient.glossy:hover, .glossy:hover > .button-icon.red-gradient, :hover > .button-icon.glossy.red-gradient, .red-gradient.glossy > a.select-value:hover, .red-gradient.glossy > .select-arrow:hover { background: #e94237 url(/../img/old-browsers/colors/bg_a_red-gradient_glossy_hover.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#fe9b96), to(#e94237), color-stop(0.5, #df1411), color-stop(0.5, #ce0d0c)); background: -webkit-linear-gradient(top, #fe9b96, #df1411 50%, #ce0d0c 50%, #e94237); background: -moz-linear-gradient(top, #fe9b96, #df1411 50%, #ce0d0c 50%, #e94237); background: -ms-linear-gradient(top, #fe9b96, #df1411 50%, #ce0d0c 50%, #e94237); background: -o-linear-gradient(top, #fe9b96, #df1411 50%, #ce0d0c 50%, #e94237); background: linear-gradient(top, #fe9b96, #df1411 50%, #ce0d0c 50%, #e94237); } a.red-gradient:active, button.red-gradient:active, .button.red-gradient:active, .red-gradient.active, :active > .button-icon.red-gradient, .active > .button-icon.red-gradient { background: #e4360a url(/../img/old-browsers/colors/bg_a_red-gradient_active.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#ce1d06), to(#e4360a)) !important; background: -webkit-linear-gradient(top, #ce1d06, #e4360a) !important; background: -moz-linear-gradient(top, #ce1d06, #e4360a) !important; background: -ms-linear-gradient(top, #ce1d06, #e4360a) !important; background: -o-linear-gradient(top, #ce1d06, #e4360a) !important; background: linear-gradient(top, #ce1d06, #e4360a) !important; } .orange-bg, .orange-gradient > .drop-down { background: #ffae00; color: white; border-color: #cc9707; } a.orange-bg:hover { color: white; background: #ffbb2b; } .orange-gradient, .orange-gradient:visited, .orange-gradient > .select-value, .orange-gradient > .select-arrow { color: white; background: #ff9e00 url(/../img/old-browsers/colors/bg_orange-gradient.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#ffb900), to(#ff9e00)); background: -webkit-linear-gradient(top, #ffb900, #ff9e00); background: -moz-linear-gradient(top, #ffb900, #ff9e00); background: -ms-linear-gradient(top, #ffb900, #ff9e00); background: -o-linear-gradient(top, #ffb900, #ff9e00); background: linear-gradient(top, #ffb900, #ff9e00); border-color: #cc9707; } a.orange-gradient:hover, button.orange-gradient:hover, :hover > .button-icon.orange-gradient, .orange-gradient > a.select-value:hover, .orange-gradient > .select-arrow:hover { color: white; background: #ff9700 url(/../img/old-browsers/colors/bg_a_orange-gradient_hover.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#ffcd00), to(#ff9700)); background: -webkit-linear-gradient(top, #ffcd00, #ff9700); background: -moz-linear-gradient(top, #ffcd00, #ff9700); background: -ms-linear-gradient(top, #ffcd00, #ff9700); background: -o-linear-gradient(top, #ffcd00, #ff9700); background: linear-gradient(top, #ffcd00, #ff9700); border-color: #cc9707; } .orange-gradient.glossy, .glossy > .button-icon.orange-gradient, .button-icon.glossy.orange-gradient, .orange-gradient.glossy > .select-value, .orange-gradient.glossy > .select-arrow { background: #d38800 url(/../img/old-browsers/colors/bg_orange-gradient_glossy.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#ffd844), to(#d38800), color-stop(0.5, #ff9f01), color-stop(0.5, #da8d00), color-stop(0.8, #e59400)); background: -webkit-linear-gradient(top, #ffd844, #ff9f01 50%, #da8d00 50%, #e59400 80%, #d38800); background: -moz-linear-gradient(top, #ffd844, #ff9f01 50%, #da8d00 50%, #e59400 80%, #d38800); background: -ms-linear-gradient(top, #ffd844, #ff9f01 50%, #da8d00 50%, #e59400 80%, #d38800); background: -o-linear-gradient(top, #ffd844, #ff9f01 50%, #da8d00 50%, #e59400 80%, #d38800); background: linear-gradient(top, #ffd844, #ff9f01 50%, #da8d00 50%, #e59400 80%, #d38800); } a.orange-gradient.glossy:hover, button.orange-gradient.glossy:hover, .glossy:hover > .button-icon.orange-gradient, :hover > .button-icon.glossy.orange-gradient, .orange-gradient.glossy > a.select-value:hover, .orange-gradient.glossy > .select-arrow:hover { background: #e8a400 url(/../img/old-browsers/colors/bg_a_orange-gradient_glossy_hover.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#ffe326), to(#e8a400), color-stop(0.5, #ffb700), color-stop(0.5, #eca900), color-stop(0.8, #f1ae00)); background: -webkit-linear-gradient(top, #ffe326, #ffb700 50%, #eca900 50%, #f1ae00 80%, #e8a400); background: -moz-linear-gradient(top, #ffe326, #ffb700 50%, #eca900 50%, #f1ae00 80%, #e8a400); background: -ms-linear-gradient(top, #ffe326, #ffb700 50%, #eca900 50%, #f1ae00 80%, #e8a400); background: -o-linear-gradient(top, #ffe326, #ffb700 50%, #eca900 50%, #f1ae00 80%, #e8a400); background: linear-gradient(top, #ffe326, #ffb700 50%, #eca900 50%, #f1ae00 80%, #e8a400); } a.orange-gradient:active, button.orange-gradient:active, .button.orange-gradient:active, .orange-gradient.active, :active > .button-icon.orange-gradient, .active > .button-icon.orange-gradient { background: #ffbf00 url(/../img/old-browsers/colors/bg_a_orange-gradient_active.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#ff8a00), to(#ffbf00)) !important; background: -webkit-linear-gradient(top, #ff8a00, #ffbf00) !important; background: -moz-linear-gradient(top, #ff8a00, #ffbf00) !important; background: -ms-linear-gradient(top, #ff8a00, #ffbf00) !important; background: -o-linear-gradient(top, #ff8a00, #ffbf00) !important; background: linear-gradient(top, #ff8a00, #ffbf00) !important; } .green-bg, .green-gradient > .drop-down { background: #99c624; color: white; border-color: #6d960c; } a.green-bg:hover { color: white; background: #aad049; } .green-gradient, .green-gradient:visited, .green-gradient > .select-value, .green-gradient > .select-arrow { color: white; background: #87ba17 url(/../img/old-browsers/colors/bg_green-gradient.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#a7cf34), to(#87ba17)); background: -webkit-linear-gradient(top, #a7cf34, #87ba17); background: -moz-linear-gradient(top, #a7cf34, #87ba17); background: -ms-linear-gradient(top, #a7cf34, #87ba17); background: -o-linear-gradient(top, #a7cf34, #87ba17); background: linear-gradient(top, #a7cf34, #87ba17); border-color: #6d960c; } a.green-gradient:hover, button.green-gradient:hover, :hover > .button-icon.green-gradient, .green-gradient > a.select-value:hover, .green-gradient > .select-arrow:hover { color: white; background: #80b514 url(/../img/old-browsers/colors/bg_a_green-gradient_hover.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#bfdd4d), to(#80b514)); background: -webkit-linear-gradient(top, #bfdd4d, #80b514); background: -moz-linear-gradient(top, #bfdd4d, #80b514); background: -ms-linear-gradient(top, #bfdd4d, #80b514); background: -o-linear-gradient(top, #bfdd4d, #80b514); background: linear-gradient(top, #bfdd4d, #80b514); border-color: #6d960c; } .green-gradient.glossy, .glossy > .button-icon.green-gradient, .button-icon.glossy.green-gradient, .green-gradient.glossy > .select-value, .green-gradient.glossy > .select-arrow { background: #5eb80a url(/../img/old-browsers/colors/bg_green-gradient_glossy.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#b1dc64), to(#5eb80a), color-stop(0.5, #58b104), color-stop(0.5, #499400)); background: -webkit-linear-gradient(top, #b1dc64, #58b104 50%, #499400 50%, #5eb80a); background: -moz-linear-gradient(top, #b1dc64, #58b104 50%, #499400 50%, #5eb80a); background: -ms-linear-gradient(top, #b1dc64, #58b104 50%, #499400 50%, #5eb80a); background: -o-linear-gradient(top, #b1dc64, #58b104 50%, #499400 50%, #5eb80a); background: linear-gradient(top, #b1dc64, #58b104 50%, #499400 50%, #5eb80a); } a.green-gradient.glossy:hover, button.green-gradient.glossy:hover, .glossy:hover > .button-icon.green-gradient, :hover > .button-icon.glossy.green-gradient, .green-gradient.glossy > a.select-value:hover, .green-gradient.glossy > .select-arrow:hover { background: #6ac905 url(/../img/old-browsers/colors/bg_a_green-gradient_glossy_hover.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#b8e545), to(#6ac905), color-stop(0.5, #65c302), color-stop(0.5, #56ab00)); background: -webkit-linear-gradient(top, #b8e545, #65c302 50%, #56ab00 50%, #6ac905); background: -moz-linear-gradient(top, #b8e545, #65c302 50%, #56ab00 50%, #6ac905); background: -ms-linear-gradient(top, #b8e545, #65c302 50%, #56ab00 50%, #6ac905); background: -o-linear-gradient(top, #b8e545, #65c302 50%, #56ab00 50%, #6ac905); background: linear-gradient(top, #b8e545, #65c302 50%, #56ab00 50%, #6ac905); } a.green-gradient:active, button.green-gradient:active, .button.green-gradient:active, .green-gradient.active, :active > .button-icon.green-gradient, .active > .button-icon.green-gradient, .switch-on { background: #b0d222 url(/../img/old-browsers/colors/bg_a_green-gradient_active.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#6dad12), to(#b0d222)) !important; background: -webkit-linear-gradient(top, #6dad12, #b0d222) !important; background: -moz-linear-gradient(top, #6dad12, #b0d222) !important; background: -ms-linear-gradient(top, #6dad12, #b0d222) !important; background: -o-linear-gradient(top, #6dad12, #b0d222) !important; background: linear-gradient(top, #6dad12, #b0d222) !important; border-color: #6d960c; } .blue-bg, .blue-gradient > .drop-down { background: #0059a0; color: white; border-color: #004795; } a.blue-bg:hover { background: #2b75b0; color: white; } .blue-gradient, .blue-gradient:visited, .blue-gradient > .select-value, .blue-gradient > .select-arrow { color: white; background: #00438d url(/../img/old-browsers/colors/bg_blue-gradient.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#006aac), to(#00438d)); background: -webkit-linear-gradient(top, #006aac, #00438d); background: -moz-linear-gradient(top, #006aac, #00438d); background: -ms-linear-gradient(top, #006aac, #00438d); background: -o-linear-gradient(top, #006aac, #00438d); background: linear-gradient(top, #006aac, #00438d); border-color: #004795; } a.blue-gradient:hover, button.blue-gradient:hover, .blue-gradient > a.select-value:hover, .blue-gradient > .select-arrow:hover { color: white; background: #003d86 url(/../img/old-browsers/colors/bg_a_blue-gradient_hover.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#0089c3), to(#003d86)); background: -webkit-linear-gradient(top, #0089c3, #003d86); background: -moz-linear-gradient(top, #0089c3, #003d86); background: -ms-linear-gradient(top, #0089c3, #003d86); background: -o-linear-gradient(top, #0089c3, #003d86); background: linear-gradient(top, #0089c3, #003d86); border-color: #004795; } .blue-gradient.glossy, .blue-gradient.glossy > .select-value, .blue-gradient.glossy > .select-arrow { background: #0a5db8 url(/../img/old-browsers/colors/bg_blue-gradient_glossy.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#65b2dd), to(#0a5db8), color-stop(0.5, #045ab2), color-stop(0.5, #004995)); background: -webkit-linear-gradient(top, #65b2dd, #045ab2 50%, #004995 50%, #0a5db8); background: -moz-linear-gradient(top, #65b2dd, #045ab2 50%, #004995 50%, #0a5db8); background: -ms-linear-gradient(top, #65b2dd, #045ab2 50%, #004995 50%, #0a5db8); background: -o-linear-gradient(top, #65b2dd, #045ab2 50%, #004995 50%, #0a5db8); background: linear-gradient(top, #65b2dd, #045ab2 50%, #004995 50%, #0a5db8); } a.blue-gradient.glossy:hover, button.blue-gradient.glossy:hover, .blue-gradient.glossy > a.select-value:hover, .blue-gradient.glossy > .select-arrow:hover { background: #056fc9 url(/../img/old-browsers/colors/bg_a_blue-gradient_glossy_hover.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#46bde5), to(#056fc9), color-stop(0.5, #026cc4), color-stop(0.5, #005cac)); background: -webkit-linear-gradient(top, #46bde5, #026cc4 50%, #005cac 50%, #056fc9); background: -moz-linear-gradient(top, #46bde5, #026cc4 50%, #005cac 50%, #056fc9); background: -ms-linear-gradient(top, #46bde5, #026cc4 50%, #005cac 50%, #056fc9); background: -o-linear-gradient(top, #46bde5, #026cc4 50%, #005cac 50%, #056fc9); background: linear-gradient(top, #46bde5, #026cc4 50%, #005cac 50%, #056fc9); } a.blue-gradient:active, button.blue-gradient:active, .button.blue-gradient:active, .blue-gradient.active { background: #005fb4 url(/../img/old-browsers/colors/bg_a_blue-gradient_active.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#003475), to(#005fb4)) !important; background: -webkit-linear-gradient(top, #003475, #005fb4) !important; background: -moz-linear-gradient(top, #003475, #005fb4) !important; background: -ms-linear-gradient(top, #003475, #005fb4) !important; background: -o-linear-gradient(top, #003475, #005fb4) !important; background: linear-gradient(top, #003475, #005fb4) !important; } /********************************************************/ /* 8. Generic gradients - active */ /********************************************************/ .silver-active:active, .silver-active.active, .silver-active > .switch-on { background: #dbdbdb url(/../img/old-browsers/colors/bg_silver-active_active.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#bdbdbd), to(#dbdbdb)) !important; background: -webkit-linear-gradient(top, #bdbdbd, #dbdbdb) !important; background: -moz-linear-gradient(top, #bdbdbd, #dbdbdb) !important; background: -ms-linear-gradient(top, #bdbdbd, #dbdbdb) !important; background: -o-linear-gradient(top, #bdbdbd, #dbdbdb) !important; background: linear-gradient(top, #bdbdbd, #dbdbdb) !important; color: #666666 !important; border-color: #cccccc; } .black-active:active, .black-active.active, .black-active > .switch-on { background: #262626 url(/../img/old-browsers/colors/bg_black-active_active.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(black), to(#262626)) !important; background: -webkit-linear-gradient(top, black, #262626) !important; background: -moz-linear-gradient(top, black, #262626) !important; background: -ms-linear-gradient(top, black, #262626) !important; background: -o-linear-gradient(top, black, #262626) !important; background: linear-gradient(top, black, #262626) !important; color: white !important; border-color: black; } .anthracite-active:active, .anthracite-active.active, .anthracite-active > .switch-on { background: #474747 url(/../img/old-browsers/colors/bg_anthracite-active_active.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#262626), to(#474747)) !important; background: -webkit-linear-gradient(top, #262626, #474747) !important; background: -moz-linear-gradient(top, #262626, #474747) !important; background: -ms-linear-gradient(top, #262626, #474747) !important; background: -o-linear-gradient(top, #262626, #474747) !important; background: linear-gradient(top, #262626, #474747) !important; color: white !important; border-color: #282e36; } .grey-active:active, .grey-active.active, .grey-active > .switch-on { background: #b7b7b7 url(/../img/old-browsers/colors/bg_grey-active_active.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#7a7a7a), to(#b7b7b7)) !important; background: -webkit-linear-gradient(top, #7a7a7a, #b7b7b7) !important; background: -moz-linear-gradient(top, #7a7a7a, #b7b7b7) !important; background: -ms-linear-gradient(top, #7a7a7a, #b7b7b7) !important; background: -o-linear-gradient(top, #7a7a7a, #b7b7b7) !important; background: linear-gradient(top, #7a7a7a, #b7b7b7) !important; color: white !important; border-color: #666666; } .white-active:active, .white-active.active, .white-active > .switch-on { background: #f0f0f0 url(/../img/old-browsers/colors/bg_white-active_active.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#f0f0f0)) !important; background: -webkit-linear-gradient(top, #e0e0e0, #f0f0f0) !important; background: -moz-linear-gradient(top, #e0e0e0, #f0f0f0) !important; background: -ms-linear-gradient(top, #e0e0e0, #f0f0f0) !important; background: -o-linear-gradient(top, #e0e0e0, #f0f0f0) !important; background: linear-gradient(top, #e0e0e0, #f0f0f0) !important; color: #666666 !important; border-color: #cccccc; } .red-active:active, .red-active.active, .red-active > .switch-on { background: #e4360a url(/../img/old-browsers/colors/bg_red-active_active.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#ce1d06), to(#e4360a)) !important; background: -webkit-linear-gradient(top, #ce1d06, #e4360a) !important; background: -moz-linear-gradient(top, #ce1d06, #e4360a) !important; background: -ms-linear-gradient(top, #ce1d06, #e4360a) !important; background: -o-linear-gradient(top, #ce1d06, #e4360a) !important; background: linear-gradient(top, #ce1d06, #e4360a) !important; color: white !important; border-color: #931a03; } .orange-active:active, .orange-active.active, .orange-active > .switch-on { background: #ffbf00 url(/../img/old-browsers/colors/bg_orange-active_active.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#ff8a00), to(#ffbf00)) !important; background: -webkit-linear-gradient(top, #ff8a00, #ffbf00) !important; background: -moz-linear-gradient(top, #ff8a00, #ffbf00) !important; background: -ms-linear-gradient(top, #ff8a00, #ffbf00) !important; background: -o-linear-gradient(top, #ff8a00, #ffbf00) !important; background: linear-gradient(top, #ff8a00, #ffbf00) !important; color: white !important; border-color: #cc9707; } .green-active:active, .green-active.active, .green-active > .switch-on { background: #b0d222 url(/../img/old-browsers/colors/bg_green-active_active.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#6dad12), to(#b0d222)) !important; background: -webkit-linear-gradient(top, #6dad12, #b0d222) !important; background: -moz-linear-gradient(top, #6dad12, #b0d222) !important; background: -ms-linear-gradient(top, #6dad12, #b0d222) !important; background: -o-linear-gradient(top, #6dad12, #b0d222) !important; background: linear-gradient(top, #6dad12, #b0d222) !important; color: white !important; border-color: #6d960c; } .blue-active:active, .blue-active.active, .blue-active > .switch-on { background: #005fb4 url(/../img/old-browsers/colors/bg_blue-active_active.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#003475), to(#005fb4)) !important; background: -webkit-linear-gradient(top, #003475, #005fb4) !important; background: -moz-linear-gradient(top, #003475, #005fb4) !important; background: -ms-linear-gradient(top, #003475, #005fb4) !important; background: -o-linear-gradient(top, #003475, #005fb4) !important; background: linear-gradient(top, #003475, #005fb4) !important; color: white !important; border-color: #004795; } /********************************************************/ /* 9. Generic gradients - disabled */ /********************************************************/ /* Silver */ .button:disabled, .button.disabled, .disabled .button, .disabled .select-value, .disabled .select-arrow, .disabled .switch-button, .disabled .switch-off { color: #666666 !important; border-color: #d0d0d0 !important; background: #f8f8f8 url(/../img/old-browsers/colors/bg_button_disabled.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#f8f8f8)) !important; background: -webkit-linear-gradient(top, #fafafa, #f8f8f8) !important; background: -moz-linear-gradient(top, #fafafa, #f8f8f8) !important; background: -ms-linear-gradient(top, #fafafa, #f8f8f8) !important; background: -o-linear-gradient(top, #fafafa, #f8f8f8) !important; background: linear-gradient(top, #fafafa, #f8f8f8) !important; } /* Green */ .disabled .switch-on, .disabled .switch-on { color: white !important; border-color: #b2b9ab !important; background: #b3d36b url(/../img/old-browsers/colors/bg_disabled_switch-on.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#c7e17e), to(#b3d36b)) !important; background: -webkit-linear-gradient(top, #c7e17e, #b3d36b) !important; background: -moz-linear-gradient(top, #c7e17e, #b3d36b) !important; background: -ms-linear-gradient(top, #c7e17e, #b3d36b) !important; background: -o-linear-gradient(top, #c7e17e, #b3d36b) !important; background: linear-gradient(top, #c7e17e, #b3d36b) !important; } /* Blue */ :disabled > .button-icon, .disabled .button-icon { color: white !important; border-color: #858c94 !important; background: #84a4c8 url(/../img/old-browsers/colors/bg_disabled_button-icon.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#84b7d7), to(#84a4c8)) !important; background: -webkit-linear-gradient(top, #84b7d7, #84a4c8) !important; background: -moz-linear-gradient(top, #84b7d7, #84a4c8) !important; background: -ms-linear-gradient(top, #84b7d7, #84a4c8) !important; background: -o-linear-gradient(top, #84b7d7, #84a4c8) !important; background: linear-gradient(top, #84b7d7, #84a4c8) !important; } .silver-gradient:disabled, .silver-gradient.disabled, .disabled .button.silver-gradient, .silver-gradient.disabled > .select-value, .silver-gradient.disabled > .select-arrow, .disabled .silver-gradient > .select-value, .disabled .silver-gradient > .select-arrow { color: #666666 !important; border-color: #d0d0d0 !important; background: #f8f8f8 url(/../img/old-browsers/colors/bg_silver-gradient_disabled.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#f8f8f8)) !important; background: -webkit-linear-gradient(top, #fafafa, #f8f8f8) !important; background: -moz-linear-gradient(top, #fafafa, #f8f8f8) !important; background: -ms-linear-gradient(top, #fafafa, #f8f8f8) !important; background: -o-linear-gradient(top, #fafafa, #f8f8f8) !important; background: linear-gradient(top, #fafafa, #f8f8f8) !important; } .black-gradient:disabled, .black-gradient.disabled, .disabled .black-gradient, .black-gradient.disabled > .select-value, .black-gradient.disabled > .select-arrow, .disabled .black-gradient > .select-value, .disabled .black-gradient > .select-arrow { color: white !important; border-color: #595959 !important; background: #636363 url(/../img/old-browsers/colors/bg_black-gradient_disabled.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#636363)) !important; background: -webkit-linear-gradient(top, #757575, #636363) !important; background: -moz-linear-gradient(top, #757575, #636363) !important; background: -ms-linear-gradient(top, #757575, #636363) !important; background: -o-linear-gradient(top, #757575, #636363) !important; background: linear-gradient(top, #757575, #636363) !important; } .button.anthracite-gradient:disabled, .button.anthracite-gradient.disabled, .disabled .button.anthracite-gradient, .button.glossy.anthracite-gradient:disabled, .button.glossy.anthracite-gradient.disabled, .disabled .button.glossy.anthracite-gradient, .anthracite-gradient.disabled > .select-value, .anthracite-gradient.disabled > .select-arrow, .disabled .anthracite-gradient > .select-value, .disabled .anthracite-gradient > .select-arrow, .black-inputs .disabled .switch-off, .black-inputs.disabled .switch-off, .disabled .black-inputs .switch-off, .black-input.disabled > .switch-off, .disabled .black-input > .switch-off, .black-inputs .disabled .switch-button, .black-inputs.disabled .switch-button, .disabled .black-inputs .switch-button, .black-input.disabled > .switch-button, .disabled .black-input > .switch-button, .black-inputs .checkbox.disabled, .black-inputs .disabled .checkbox, .black-inputs.disabled .checkbox, .disabled .black-inputs .checkbox, .black-input.checkbox, .black-inputs .radio.disabled, .black-inputs .disabled .radio, .black-inputs.disabled .radio, .disabled .black-inputs .radio, .black-input.radio { color: white !important; border-color: #777777 !important; background: #848484 url(/../img/old-browsers/colors/bg_button_anthracite-gradient_disabled.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#9c9c9c), to(#848484)) !important; background: -webkit-linear-gradient(top, #9c9c9c, #848484) !important; background: -moz-linear-gradient(top, #9c9c9c, #848484) !important; background: -ms-linear-gradient(top, #9c9c9c, #848484) !important; background: -o-linear-gradient(top, #9c9c9c, #848484) !important; background: linear-gradient(top, #9c9c9c, #848484) !important; } .button.grey-gradient:disabled, .button.grey-gradient.disabled, .disabled .button.grey-gradient, .button.glossy.grey-gradient:disabled, .button.glossy.grey-gradient.disabled, .disabled .button.glossy.grey-gradient, .grey-gradient.disabled > .select-value, .grey-gradient.disabled > .select-arrow, .disabled .grey-gradient > .select-value, .disabled .grey-gradient > .select-arrow, .checkbox.disabled, .disabled .checkbox, .radio.disabled, .disabled .radio { color: white !important; border-color: #9c9c9c !important; background: #b9b9b9 url(/../img/old-browsers/colors/bg_button_grey-gradient_disabled.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#cdcdcd), to(#b9b9b9)) !important; background: -webkit-linear-gradient(top, #cdcdcd, #b9b9b9) !important; background: -moz-linear-gradient(top, #cdcdcd, #b9b9b9) !important; background: -ms-linear-gradient(top, #cdcdcd, #b9b9b9) !important; background: -o-linear-gradient(top, #cdcdcd, #b9b9b9) !important; background: linear-gradient(top, #cdcdcd, #b9b9b9) !important; } .button.white-gradient:disabled, .button.white-gradient.disabled, .disabled .button.white-gradient, .button.glossy.white-gradient:disabled, .button.glossy.white-gradient.disabled, .disabled .button.glossy.white-gradient, .white-gradient.disabled > .select-value, .white-gradient.disabled > .select-arrow, .disabled .white-gradient > .select-value, .disabled .white-gradient > .select-arrow { color: #666666 !important; border-color: #e0e0e0 !important; background: #fafafa url(/../img/old-browsers/colors/bg_button_white-gradient_disabled.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fafafa)) !important; background: -webkit-linear-gradient(top, #ffffff, #fafafa) !important; background: -moz-linear-gradient(top, #ffffff, #fafafa) !important; background: -ms-linear-gradient(top, #ffffff, #fafafa) !important; background: -o-linear-gradient(top, #ffffff, #fafafa) !important; background: linear-gradient(top, #ffffff, #fafafa) !important; } .button.red-gradient:disabled, .button.red-gradient.disabled, .disabled .button.red-gradient, .button.glossy.red-gradient:disabled, .button.glossy.red-gradient.disabled, .disabled .button.glossy.red-gradient, .red-gradient.disabled > .select-value, .red-gradient.disabled > .select-arrow, .disabled .red-gradient > .select-value, .disabled .red-gradient > .select-arrow { color: white !important; border-color: #a99e9c !important; background: #e98b7a url(/../img/old-browsers/colors/bg_button_red-gradient_disabled.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#f09e81), to(#e98b7a)) !important; background: -webkit-linear-gradient(top, #f09e81, #e98b7a) !important; background: -moz-linear-gradient(top, #f09e81, #e98b7a) !important; background: -ms-linear-gradient(top, #f09e81, #e98b7a) !important; background: -o-linear-gradient(top, #f09e81, #e98b7a) !important; background: linear-gradient(top, #f09e81, #e98b7a) !important; } .button.orange-gradient:disabled, .button.orange-gradient.disabled, .disabled .button.orange-gradient, .button.glossy.orange-gradient:disabled, .button.glossy.orange-gradient.disabled, .disabled .button.glossy.orange-gradient, .orange-gradient.disabled > .select-value, .orange-gradient.disabled > .select-arrow, .disabled .orange-gradient > .select-value, .disabled .orange-gradient > .select-arrow { color: white !important; border-color: #d0ccc3 !important; background: #ffc15d url(/../img/old-browsers/colors/bg_button_orange-gradient_disabled.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#ffd25d), to(#ffc15d)) !important; background: -webkit-linear-gradient(top, #ffd25d, #ffc15d) !important; background: -moz-linear-gradient(top, #ffd25d, #ffc15d) !important; background: -ms-linear-gradient(top, #ffd25d, #ffc15d) !important; background: -o-linear-gradient(top, #ffd25d, #ffc15d) !important; background: linear-gradient(top, #ffd25d, #ffc15d) !important; } .button.green-gradient:disabled, .button.green-gradient.disabled, .disabled .button.green-gradient, .button.glossy.green-gradient:disabled, .button.glossy.green-gradient.disabled, .disabled .button.glossy.green-gradient, .green-gradient.disabled > .select-value, .green-gradient.disabled > .select-arrow, .disabled .green-gradient > .select-value, .disabled .green-gradient > .select-arrow { color: white !important; border-color: #b2b9ab !important; background: #b3d36b url(/../img/old-browsers/colors/bg_button_green-gradient_disabled.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#c7e17e), to(#b3d36b)) !important; background: -webkit-linear-gradient(top, #c7e17e, #b3d36b) !important; background: -moz-linear-gradient(top, #c7e17e, #b3d36b) !important; background: -ms-linear-gradient(top, #c7e17e, #b3d36b) !important; background: -o-linear-gradient(top, #c7e17e, #b3d36b) !important; background: linear-gradient(top, #c7e17e, #b3d36b) !important; } .button.blue-gradient:disabled, .button.blue-gradient.disabled, .disabled .button.blue-gradient, .button.glossy.blue-gradient:disabled, .button.glossy.blue-gradient.disabled, .disabled .button.glossy.blue-gradient, .blue-gradient.disabled > .select-value, .blue-gradient.disabled > .select-arrow, .disabled .blue-gradient > .select-value, .disabled .blue-gradient > .select-arrow { color: white !important; border-color: #858c94 !important; background: #84a4c8 url(/../img/old-browsers/colors/bg_button_blue-gradient_disabled.png) repeat-x !important; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#84b7d7), to(#84a4c8)) !important; background: -webkit-linear-gradient(top, #84b7d7, #84a4c8) !important; background: -moz-linear-gradient(top, #84b7d7, #84a4c8) !important; background: -ms-linear-gradient(top, #84b7d7, #84a4c8) !important; background: -o-linear-gradient(top, #84b7d7, #84a4c8) !important; background: linear-gradient(top, #84b7d7, #84a4c8) !important; } /********************************************************/ /* 13. Icons */ /********************************************************/ @font-face { font-family: 'EntypoRegular'; src: url(/assets/Entypo/entypo-webfont-393446d702b9241f840e9512415c3e50a0951d43b67771b04cc9bfcc2b19bc0e.eot); src: url(/assets/Entypo/entypo-webfont-393446d702b9241f840e9512415c3e50a0951d43b67771b04cc9bfcc2b19bc0e.eot?#iefix) format('embedded-opentype'), url(/assets/Entypo/entypo-webfont-8a2cfcfe162fad3c0d4cbe7f36728c2ada1587e1dbf3cdbfd8088970b7e672d7.woff) format('woff'), url(/assets/Entypo/entypo-webfont-aeddbac53386ed02bf6993b0cf30c85ed5cd4641b56b99b17b2e9eea5997c230.ttf) format('truetype'), url(/assets/Entypo/entypo-webfont-d0ad93b561a153a75731f5063662a264a1ac4cddd4ad5f29e6fc01018473ca86.svg#EntypoRegular) format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"]:before, [class*=" icon-"]:before { display: inline-block; font-weight: normal; font-style: normal; font-family: 'EntypoRegular'; font-size: 2em; line-height: 1em; margin: -0.5em 0.115em -0.5em -0.077em; vertical-align: -0.077em; } .button.icon:before, .button > .icon:before, .button-icon.icon:before, .button-icon > .icon:before { font-size: 2.3em; margin-top: -0.65em; margin-bottom: -0.65em; vertical-align: -0.133em; } /* Sizes */ .icon-size2:before { font-size: 3.5em; margin-top: -1.25em; margin-bottom: -1.25em; vertical-align: -0.132em; } .icon-size3:before { font-size: 4.5em; margin-top: -1.75em; margin-bottom: -1.75em; vertical-align: -0.171em; } .icon-size4:before { font-size: 7em; margin-top: -3em; margin-bottom: -3em; vertical-align: middle; } .icon-size5:before { font-size: 10em; margin-top: -4.5em; margin-bottom: -4.5em; vertical-align: middle; } /* IE9 goes crazy with relative font-sizes */ .ie9 .icon-size2:before, .ie9 .icon-size3:before, .ie9 .icon-size4:before, .ie9 .icon-size5:before { font-size: 0.25em; } /* Empty icons */ [class^="icon-"]:empty:before, [class*=" icon-"]:empty:before { margin-right: -0.077em; margin-left: -0.077em; } /* IE7 */ .font-icon { font-weight: normal; font-style: normal; font-family: 'EntypoRegular'; font-size: 2em; margin: -0.5em 0.115em -0.5em -0.077em; vertical-align: middle; } .font-icon.empty { margin-right: -2px; margin-left: -2px; } /* Sizes */ .icon-size2 > .font-icon { font-size: 3.5em; margin-top: -1.25em; margin-bottom: -1.25em; vertical-align: -0.132em; } .icon-size3 > .font-icon { font-size: 4.5em; margin-top: -1.75em; margin-bottom: -1.75em; vertical-align: -0.171em; } .icon-size4 > .font-icon { font-size: 7em; margin-top: -3em; margin-bottom: -3em; vertical-align: middle; } .icon-size5 > .font-icon { font-size: 10em; margin-top: -4.5em; margin-bottom: -4.5em; vertical-align: middle; } /* IE8 */ [class^="icon-"].font-icon-empty:before, [class*=" icon-"].font-icon-empty:before { margin-right: -0.077em; margin-left: -0.077em; } .left-icon { padding-left: 20px; position: relative; min-height: 16px; } .wrapped.left-icon { padding-left: 30px; } .boxed.left-icon { padding-left: 36px; } .big-left-icon { padding-left: 38px; position: relative; min-height: 32px; } .wrapped.big-left-icon { padding-left: 48px; } .boxed.big-left-icon { padding-left: 54px; } .huge-left-icon { padding-left: 68px; position: relative; min-height: 64px; } .wrapped.huge-left-icon { padding-left: 78px; } .boxed.huge-left-icon { padding-left: 84px; } .left-icon:before, .big-left-icon:before, .huge-left-icon:before { position: absolute; display: block; margin: 0; } .left-icon:before { top: 0; left: -1px; font-size: 30px; line-height: 18px; } .wrapped.left-icon:before { top: 10px; left: 9px; } .boxed.left-icon:before { top: 16px; left: 15px; } .big-left-icon:before { top: -1px; left: -2px; font-size: 60px; line-height: 36px; } .wrapped.big-left-icon:before { top: 9px; left: 8px; } .boxed.big-left-icon:before { top: 15px; left: 14px; } .huge-left-icon:before { top: -3px; left: -5px; font-size: 120px; line-height: 72px; } .wrapped.huge-left-icon:before { top: 7px; left: 5px; } .boxed.huge-left-icon:before { top: 13px; left: 11px; } .icon-phone:before { content: '!'; } .icon-mobile:before { content: '"'; } .icon-tag:before { content: '#'; } .icon-directions:before { content: '$'; } .icon-mail:before { content: '%'; } .icon-pencil:before { content: '&'; } .icon-paperclip:before { content: '\''; } .icon-reply:before { content: '('; } .icon-replay-all:before { content: ')'; } .icon-forward:before { content: '*'; } .icon-user:before { content: '+'; } .icon-users:before { content: ','; } .icon-add-user:before { content: '-'; } .icon-card:before { content: '.'; } .icon-extract:before { content: '/'; } .icon-marker:before { content: '0'; } .icon-map:before { content: '1'; } .icon-compass:before { content: '2'; } .icon-arrow:before { content: '3'; } .icon-target:before { content: '4'; } .icon-path:before { content: '5'; } .icon-heart:before { content: '6'; } .icon-star:before { content: '7'; } .icon-like:before { content: '8'; } .icon-chat:before { content: '9'; } .icon-speech:before { content: ':'; } .icon-quote:before { content: ';'; } .icon-printer:before { content: '<'; } .icon-bell:before { content: '='; } .icon-link:before { content: '>'; } .icon-flag:before { content: '?'; } .icon-gear:before { content: '@'; } .icon-flashlight:before { content: 'A'; } .icon-cup:before { content: 'B'; } .icon-price-tag:before { content: 'C'; } .icon-camera:before { content: 'D'; } .icon-moon:before { content: 'E'; } .icon-palette:before { content: 'F'; } .icon-leaf:before { content: 'G'; } .icon-music-note:before { content: 'H'; } .icon-bag:before { content: 'I'; } .icon-plane:before { content: 'J'; } .icon-buoy:before { content: 'K'; } .icon-rain:before { content: 'L'; } .icon-eye:before { content: 'M'; } .icon-clock:before { content: 'N'; } .icon-mic:before { content: 'O'; } .icon-calendar:before { content: 'P'; } .icon-lightning:before { content: 'Q'; } .icon-hourglass:before { content: 'R'; } .icon-rss:before { content: 'S'; } .icon-wifi:before { content: 'T'; } .icon-lock:before { content: 'U'; } .icon-unlock:before { content: 'V'; } .icon-tick:before { content: 'W'; } .icon-cross:before { content: 'X'; } .icon-minus-round:before { content: 'Y'; } .icon-plus-round:before { content: 'Z'; } .icon-cross-round:before { content: '['; } .icon-minus:before { content: '\\'; } .icon-plus:before { content: ']'; } .icon-forbidden:before { content: '^'; } .icon-info:before { content: '_'; } .icon-info-round:before { content: '`'; } .icon-question:before { content: 'a'; } .icon-question-round:before { content: 'b'; } .icon-warning:before { content: 'c'; } .icon-redo:before { content: 'd'; } .icon-undo:before { content: 'e'; } .icon-swap:before { content: 'f'; } .icon-revert:before { content: 'g'; } .icon-refresh:before { content: 'h'; } .icon-list:before { content: 'i'; } .icon-list-add:before { content: 'j'; } .icon-thumbs:before { content: 'k'; } .icon-page-list:before { content: 'l'; } .icon-page:before { content: 'm'; } .icon-pages:before { content: 'n'; } .icon-marker:before { content: '0'; } .icon-pictures:before { content: 'p'; } .icon-movie:before { content: 'q'; } .icon-music:before { content: 'r'; } .icon-folder:before { content: 's'; } .icon-drawer:before { content: 't'; } .icon-trash:before { content: 'u'; } .icon-outbox:before { content: 'v'; } .icon-inbox:before { content: 'w'; } .icon-download:before { content: 'x'; } .icon-cloud:before { content: 'y'; } .icon-cloud-upload:before { content: 'z'; } .icon-play:before { content: '{'; } .icon-pause:before { content: '|'; } .icon-record:before { content: '~'; } .icon-forward:before { content: 'Ä'; } .icon-backward:before { content: 'Å'; } .icon-previous:before { content: 'Ç'; } .icon-next:before { content: 'É'; } .icon-expand:before { content: 'Ñ'; } .icon-reduce:before { content: 'Ö'; } .icon-volume:before { content: 'Ü'; } .icon-loud:before { content: 'á'; } .icon-mute:before { content: 'à'; } .icon-left-fat:before { content: 'â'; } .icon-down-fat:before { content: 'ä'; } .icon-up-fat:before { content: 'ã'; } .icon-right-fat:before { content: 'å'; } .icon-left:before { content: 'ç'; } .icon-down:before { content: 'é'; } .icon-up:before { content: 'è'; } .icon-right:before { content: 'ê'; } .icon-left-round:before { content: 'ë'; } .icon-down-round:before { content: 'í'; } .icon-up-round:before { content: 'ì'; } .icon-right-round:before { content: 'î'; } .icon-home:before { content: 'ï'; } .icon-ribbon:before { content: 'ñ'; } .icon-read:before { content: 'ó'; } .icon-new-tab:before { content: 'ò'; } .icon-search:before { content: 'ô'; } .icon-ellipsis:before { content: 'ö'; } .icon-bullet-list:before { content: '®'; } .icon-creative-commons:before { content: '©'; } /********************************************************/ /* 17. Buttons */ /********************************************************/ /* Set line-height so buttons fit */ .button-height { line-height: 34px; margin-top: -2px; margin-bottom: -2px; } .button-height.wrapped { padding: 8px 10px; margin-top: 0; } p.button-height, ul.button-height, ol.button-height { margin-bottom: 14px; } p.button-height:last-child, ul.button-height:last-child, ol.button-height:last-child { margin-bottom: -2px; } /* IE7 */ p.button-height.last-child, ul.button-height.last-child, ol.button-height.last-child { margin-bottom: -2px; } .button-height.absolute-left, .button-height.absolute-right { margin-top: -17px; margin-bottom: 0; } /* Disabled elements */ .disabled, .disabled span, .disabled .input, .disabled input, .disabled .label, .disabled label, .disabled .button, .disabled button, .disabled a, :disabled { cursor: not-allowed !important; } .button { display: inline-block; /*display: inline;*/ zoom: 1; vertical-align: baseline; /*vertical-align: middle;*/ position: relative; text-align: center; font-weight: bold; text-transform: none; padding: 0 11px; font-size: 13px; line-height: 28px; height: 28px; overflow: hidden; /*line-height: 26px;*/ /*height: 26px;*/ -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; min-width: 6px; border-width: 1px; border-style: solid; -webkit-background-clip: padding-box; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-appearance: none; background-position: center center !important; /* This is required for glossy gradients image fallbacck*/ } .button.round { -webkit-background-clip: padding-box; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .ie7 button.button { line-height: 24px; height: 28px; } .ie7 .button { margin-left: 4px; } .ie7 .button:first-child { margin-left: 0; } .button.full-width { width: 100%; margin: 0; height: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .no-boxsizing .button.full-width { width: 94%; } .button-height .button.float-left, .button-height .button.float-right { margin-top: 2px; } .button.absolute-left, .button.absolute-right { position: absolute; margin-top: -15px; } /* Buttons in inputs */ .input .button { margin-top: -1px; margin-bottom: -1px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .input .button:first-child { margin-left: -9px; } .ie7 .input .button:first-child { margin-left: 0; margin-right: 3px; } .input.large .button, .input .button:first-child { -webkit-border-bottom-left-radius: 3px; -webkit-border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-left-radius: 3px; border-top-left-radius: 3px; } .input .button:last-child { margin-right: -9px; } /* IE7 */ .input .button.last-child { margin-right: -9px; } .input.large .button, .input .button:last-child { -webkit-border-bottom-right-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; border-bottom-right-radius: 3px; border-top-right-radius: 3px; } /* Default shadows */ .button, .button-group > .button:first-child, .select-value, .legend { -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 1px rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 1px rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 1px rgba(0, 0, 0, 0.15); } .button-group > .button, .select-arrow { -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 1px 0 0 rgba(255, 255, 255, 0.75), 0 1px 1px rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 1px 0 0 rgba(255, 255, 255, 0.75), 0 1px 1px rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 1px 0 0 rgba(255, 255, 255, 0.75), 0 1px 1px rgba(0, 0, 0, 0.15); } .button, .select-value, .legend { -webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); -moz-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); } /* Grouped buttons */ .button-group { display: inline-block; zoom: 1; line-height: 30px; height: 30px; vertical-align: middle; padding-left: 1px; } .ie7 .button-group { display: inline; margin-left: 4px; } .ie7 .button-group:first-child { margin-left: 0; } p > .button-group { margin-top: -8px; margin-bottom: -6px; } .button-height .button-group { margin-top: -2px; margin-bottom: 2px; } .button-group.absolute-left, .button-group.absolute-right { margin-top: -15px; } .button-group > .button, .ie7 .button-group > .button { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; float: left; margin-left: -1px; } .button-group > .button:first-child { border-left-width: 1px; -webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 4px; border-bottom-bottom-radius: 4px; } .button-group > .button:last-child { -webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; border-top-right-radius: 4px; border-top-right-radius: 4px; } /* Custom tones shadows */ .button.black-gradient, .button-group > .black-gradient:first-child, .button.anthracite-gradient, .button-group > .anthracite-gradient:first-child, .button.grey-gradient, .button-group > .grey-gradient:first-child, .button.blue-gradient, .button-group > .blue-gradient:first-child, .button.red-gradient, .button-group > .red-gradient:first-child, .button.orange-gradient, .button-group > .orange-gradient:first-child, .button.green-gradient, .button-group > .green-gradient:first-child, .black-gradient > .select-value, .anthracite-gradient > .select-value, .blue-gradient > .select-value, .grey-gradient > .select-value, .red-gradient > .select-value, .orange-gradient > .select-value, .green-gradient > .select-value { -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.25); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.25); } .button.black-gradient, .button.anthracite-gradient, .button.grey-gradient, .button.blue-gradient, .black-gradient > .select-value, .anthracite-gradient > .select-value, .blue-gradient > .select-value, .grey-gradient > .select-value { -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); -moz-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); } .button.red-gradient, .button.orange-gradient, .button.green-gradient, .select.red-gradient > .select-value, .select.orange-gradient > .select-value, .select.green-gradient > .select-value { -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35); -moz-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35); } .button-group > .silver-gradient, .button-group > .white-gradient, .white-gradient > .select-arrow { -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 1px 0 0 rgba(255, 255, 255, 0.75), 0 1px 1px rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 1px 0 0 rgba(255, 255, 255, 0.75), 0 1px 1px rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 1px 0 0 rgba(255, 255, 255, 0.75), 0 1px 1px rgba(0, 0, 0, 0.15); } .button-group > .black-gradient, .button-group > .anthracite-gradient, .button-group > .grey-gradient, .button-group > .red-gradient, .button-group > .orange-gradient, .button-group > .green-gradient, .button-group > .blue-gradient, .black-gradient > .select-arrow, .anthracite-gradient > .select-arrow, .grey-gradient > .select-arrow, .red-gradient > .select-arrow, .orange-gradient > .select-arrow, .green-gradient > .select-arrow, .blue-gradient > .select-arrow { -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 1px 0 0 rgba(255, 255, 255, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 1px 0 0 rgba(255, 255, 255, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 1px 0 0 rgba(255, 255, 255, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25); } /* Active state */ .button:active, .button.active { border: 0; padding: 1px 12px; -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.75), 0 1px 1px rgba(255, 255, 255, 0.35) !important; -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.75), 0 1px 1px rgba(255, 255, 255, 0.35) !important; box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.75), 0 1px 1px rgba(255, 255, 255, 0.35) !important; } .button.silver-active:active, .button.silver-active.active, .button.white-active:active, .button.white-active.active { -webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); -moz-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); } .button.black-active:active, .button.black-active.active, .button.anthracite-active:active, .button.anthracite-active.active, .button.grey-active:active, .button.grey-active.active, .button.blue-active:active, .button.blue-active.active { -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); -moz-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); } .button.red-active:active, .button.red-active.active, .button.orange-active:active, .button.orange-active.active, .button.green-active:active, .button.green-active.active { -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35); -moz-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35); } /* Disabled state */ .button:disabled, .button.disabled, .disabled .button, .disabled .select-value, .disabled .select-arrow { -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; -webkit-text-shadow: none !important; -moz-text-shadow: none !important; text-shadow: none !important; } .button:disabled, .button.disabled, .disabled .button { border-width: 1px; border-style: solid; padding: 0 11px; } /* Icon section in a button */ .button > .button-icon { display: inline-block; vertical-align: baseline; position: relative; text-align: left; font-weight: bold; padding: 0 10px; line-height: inherit; /*line-height:expression(this.parentNode.currentStyle['line-height']);*/ height: inherit; /*height:expression(this.parentNode.currentStyle['height']-2);*/ min-width: 6px; border-width: 1px; border-style: solid; margin: -1px 9px -1px -12px; -webkit-background-clip: padding-box; -webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); -moz-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); background-position: center center !important; /* This is required for glossy gradients image fallbacck*/ } .ie7 .button > .button-icon { margin: -1px 9px -1px 0; } .button > .button-icon.right-side { margin: -1px -12px -1px 9px; -webkit-border-radius: 0; -webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; } .ie7 .button > .button-icon.right-side { margin: -1px 0 -1px 0; } :active > .button-icon, .active > .button-icon { -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.75); -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.75); box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.75); } :active > .button-icon.black-gradient, .active > .button-icon.black-gradient, :active > .button-icon.anthracite-gradient, .active > .button-icon.anthracite-gradient, :active > .button-icon.grey-gradient, .active > .button-icon.grey-gradient, :active > .button-icon.blue-gradient, .active > .button-icon.blue-gradient { -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); -moz-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); } :active > .button-icon.white-gradient, .active > .button-icon.white-gradient { -webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); -moz-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); } :active .button-icon.red-gradient, .active .button-icon.red-gradient, :active .button-icon.orange-gradient, .active .button-icon.orange-gradient, :active .button-icon.green-gradient, .active .button-icon.green-gradient { -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35); -moz-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35); } :disabled > .button-icon, .disabled .button-icon { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-text-shadow: none; -moz-text-shadow: none; text-shadow: none; } /* Tiny button */ .button.tiny, .tiny .button { padding: 0 5px; line-height: 16px; height: 16px; /*line-height: 14px;*/ /*height: 14px;*/ font-size: 11px; min-width: auto; font-weight: normal; -webkit-background-clip: padding-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .button.tiny.round, .tiny .button.round { padding: 0 5px; line-height: 16px; height: 16px; /*line-height: 14px;*/ /*height: 14px;*/ font-size: 11px; min-width: auto; font-weight: normal; -webkit-background-clip: padding-box; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } .ie7 button.button.tiny, .ie7 .tiny button.button { line-height: 12px; height: 16px; } p > .button.tiny, p.tiny > .button, .tiny p > .button { margin-top: -1px; margin-bottom: -1px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .button.tiny.absolute-left, .tiny .button.absolute-left, .button.tiny.absolute-right, .tiny .button.absolute-right { margin-top: -9px; } .input .button.tiny:first-child, .input.tiny .button:first-child { margin-left: -3px; } .input .button.tiny:last-child, .input.tiny .button:last-child { margin-right: -3px; } /* IE7 */ .input .button.tiny.last-child, .input.tiny .button.last-child { margin-right: -3px; } .button.tiny:active, .tiny .button:active, .button.tiny.active, .tiny .button.active { padding: 1px 6px; } .button.tiny:disabled, .button.tiny.disabled, .tiny .button:disabled, .tiny .button.disabled, .tiny.disabled .button, .disabled .tiny .button { padding: 0 5px; } .button-group.tiny, .tiny .button-group { line-height: 18px; height: 18px; margin-top: -2px; margin-bottom: 0; } .button-group.tiny.absolute-left, .tiny .button-group.absolute-left, .button-group.tiny.absolute-right, .tiny .button-group.absolute-right { margin-top: -9px; } /* Compact button */ .button.compact, .compact .button { padding: 0 8px; line-height: 22px; height: 22px; /*line-height: 20px;*/ /*height: 20px;*/ } .ie7 button.button.compact, .ie7 .compact button.button { line-height: 18px; height: 22px; } .button.compact.absolute-left, .compact .button.absolute-left, .button.compact.absolute-right, .compact .button.absolute-right { margin-top: -12px; } .input .button.compact { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .input .button.compact:first-child, .input.compact .button:first-child { margin-left: -6px; } .input .button.compact:last-child, .input.compact .button:last-child { margin-right: -6px; } /* IE7 */ .input .button.compact.last-child, .input.compact .button.last-child { margin-right: -6px; } .button.compact:active, .compact .button:active, .button.compact.active, .compact .button.active { padding: 1px 9px; } .button.compact:disabled, .button.compact.disabled, .compact .button:disabled, .compact .button.disabled, .compact.disabled .button, .disabled .compact .button { padding: 0 8px; } .button-group.compact, .compact .button-group { line-height: 24px; height: 24px; margin-top: -5px; margin-bottom: -3px; } .button-group.compact.absolute-left, .compact .button-group.absolute-left, .button-group.compact.absolute-right, .compact .button-group.absolute-right { margin-top: -12px; } .compact > .button-icon { margin: -1px 4px -1px -9px; padding: 0 6px; } .compact > .button-icon.right-side { margin: -1px -9px -1px 4px; } /* Big button */ .button.big, .big .button { padding: 0 12px; font-size: 14px; line-height: 32px; height: 32px; /*line-height: 30px;*/ /*height: 30px;*/ margin-top: 0; margin-bottom: 0; -webkit-background-clip: padding-box; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .button.big.round, .big .button.round { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; } .ie7 button.button.big, .ie7 .big button.button { line-height: 28px; height: 32px; } .button.big.absolute-left, .big .button.absolute-left, .button.big.absolute-right, .big .button.absolute-right { margin-top: -17px; } .button.big:active, .big .button:active, .button.big.active, .big .button.active, .button.big:first-child:active, .big .button:first-child:active, .button.big.active:first-child, .big .button.active:first-child { padding: 1px 13px; } .button.big:disabled, .button.big.disabled, .big .button:disabled, .big .button.disabled, .big.disabled .button, .disabled .big .button { padding: 0 12px; } .big > .button-icon { margin: -1px 8px -1px -13px; padding: 0 11px; } .big > .button-icon.right-side { margin: -1px -13px -1px 8px; } /* Huge button */ .button.huge, .huge .button { padding: 0 18px; font-size: 18px; line-height: 46px; height: 46px; /*line-height: 44px;*/ /*height: 44px;*/ min-width: 10px; margin-top: 0; margin-bottom: 0; -webkit-background-clip: padding-box; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .button.huge.round, .huge .button.round { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; } .ie7 button.button.huge, .ie7 .huge button.button { line-height: 42px; height: 46px; } .button.huge.absolute-left, .huge .button.absolute-left, .button.huge.absolute-right, .huge .button.absolute-right { margin-top: -24px; } .button.huge:active, .huge .button:active, .button.huge.active, .huge .button.active, .button.huge:first-child:active, .huge .button:first-child:active, .button.huge.active:first-child, .huge .button.active:first-child { padding: 1px 19px; } .button.huge:disabled, .button.huge.disabled, .huge .button:disabled, .huge .button.disabled, .huge.disabled .button, .disabled .huge .button { padding: 0 18px; } .huge > .button-icon { margin: -1px 15px -1px -19px; padding: 0 18px; } .huge > .button-icon.right-side { margin: -1px -19px -1px 15px; } /* Checkable included in a button label */ .js label.button > input[type="checkbox"], .js label.button > input[type="radio"] { display: none; } /********************************************************/ /* 19. Messages */ /********************************************************/ .message, .big-message { display: block; position: relative; border-width: 1px; border-style: solid; line-height: 16px; -webkit-background-clip: padding-box; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 white, 0 1px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 1px 0 white, 0 1px 5px rgba(0, 0, 0, 0.3); box-shadow: inset 0 1px 0 white, 0 1px 5px rgba(0, 0, 0, 0.3); } .message { padding: 6px 8px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: black; } .message .icon { margin-top: -3px; } .message.compact { padding: 3px 4px; font-size: 11px; line-height: 12px; } .big-message { padding: 16px 20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: rgba(0, 0, 0, 0.6); } .big-message strong { color: black; font-size: 18px; font-weight: normal; } .message.silver-gradient, .big-message.silver-gradient, .message.white-gradient, .big-message.white-gradient { -webkit-box-shadow: inset 0 1px 0 white, 0 1px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 1px 0 white, 0 1px 5px rgba(0, 0, 0, 0.3); box-shadow: inset 0 1px 0 white, 0 1px 5px rgba(0, 0, 0, 0.3); color: rgba(0, 0, 0, 0.6); } .message.black-gradient, .big-message.black-gradient, .message.anthracite-gradient, .big-message.anthracite-gradient, .message.grey-gradient, .big-message.grey-gradient, .message.red-gradient, .big-message.red-gradient, .message.orange-gradient, .big-message.orange-gradient, .message.green-gradient, .big-message.green-gradient, .message.blue-gradient, .big-message.blue-gradient { -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 5px rgba(0, 0, 0, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 5px rgba(0, 0, 0, 0.4); color: rgba(255, 255, 255, 0.95); } .message.black-gradient, .big-message.black-gradient strong, .message.anthracite-gradient, .big-message.anthracite-gradient strong, .message.grey-gradient, .big-message.grey-gradient strong, .message.red-gradient, .big-message.red-gradient strong, .message.orange-gradient, .big-message.orange-gradient strong, .message.green-gradient, .big-message.green-gradient strong, .message.blue-gradient, .big-message.blue-gradient strong { color: white; } .big-message.black-gradient, .big-message.anthracite-gradient, .big-message.grey-gradient, .big-message.red-gradient, .big-message.orange-gradient, .big-message.green-gradient, .big-message.blue-gradient { color: rgba(255, 255, 255, 0.65); } .message.simpler, .big-message.simpler { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .big-message-icon { float: left; margin: 0 17px 0 -3px; text-align: center; } .big-message-icon:before { display: block; font-weight: normal; font-style: normal; font-family: 'EntypoRegular'; font-size: 80px; line-height: 36px; margin: 0; } .big-message-icon.with-text { margin: -6px 20px -6px -6px; } .big-message-icon.with-text:before { font-size: 56px; line-height: 29px; } .big-message-icon.right-side { float: right; margin-left: 17px; margin-right: -6px; } .big-message-icon.with-text.right-side { margin-left: 20px; margin-right: -6px; } /********************************************************/ /* 12. Generic elements */ /********************************************************/ /* Count & close */ .count, .close { position: absolute; z-index: 88; top: 0; padding: 0 2px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 16px; font-weight: bold; height: 16px; min-width: 12px; text-align: center; -webkit-background-clip: padding-box; -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; border-width: 1px; border-style: solid; font-weight: bold; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.75); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.75); -webkit-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); -moz-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .count.simpler, .close.simpler { border-color: #808080; background: #808080; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-text-shadow: none; -moz-text-shadow: none; text-shadow: none; } .count { right: 6%; margin: -10px 0 0 0; } .close { cursor: pointer; } .count.right, .count.inset, .close { right: 0; margin: -10px -10px 0 0; } .count.left, .close.left { right: auto; left: 0; margin: -10px 0 0 -10px; } .count.inset, .close.inset { margin: 4px 4px 0 0; } .count.left.inset, .close.left.inset { margin: 4px 0 0 4px; } #access > li > .count, #access > li > a > .count { right: 50%; margin: 10px -25px 0 0; } #access > li > a > .count { -webkit-transition: all 200ms; -moz-transition: all 200ms; -ms-transition: all 200ms; -o-transition: all 200ms; transition: all 200ms; } #access > li > a:hover > .count { margin-top: 6px; } /* Blocks */ .block, details.details { border: 1px solid #bfbfbf; position: relative; -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; } .block-title, details.details > summary { display: block; position: relative; padding: 18px 19px; border-bottom-width: 1px; border-bottom-style: solid; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 1px rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 1px rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 1px rgba(0, 0, 0, 0.15); } .block-title { -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; } details.details > summary { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } details.details.open > summary, html.details details.details[open] > summary { -webkit-border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomleft: 0; -moz-border-radius-bottomright: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } h3.block-title { padding: 15px 19px; margin: 0; } .block-title > h3, details.details > summary > h3 { padding: 0; margin: -3px 0; } .block-title > .absolute-right { right: 17px; } /* Accordions */ .accordion { border: 1px solid #bfbfbf; position: relative; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .accordion > dt { display: block; position: relative; padding: 10px 11px; border-top-width: 1px; border-top-style: solid; border-bottom-width: 1px; border-bottom-style: solid; cursor: pointer; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 1px rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 1px rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 1px rgba(0, 0, 0, 0.15); } .accordion > dt:first-child { border-top-width: 0; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; } .accordion > dt.closed { margin-bottom: -1px; } .accordion > dt.closed:last-of-type { border-bottom-width: 0; margin-bottom: 0; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } /* Ribbon, from Chris Coyer CSS Tricks : http://css-tricks.com/snippets/css/corner-ribbon */ .ribbon { display: block; width: 85px; height: 88px; overflow: hidden; position: absolute; z-index: 88; top: -5px; right: -5px; } .no-csstransforms .ribbon { width: 70px; height: 46px; } .ribbon.tiny { width: 43px; height: 44px; top: -4px; right: -4px; } .no-csstransforms .ribbon.tiny { width: 40px; height: 23px; } .ribbon-inner { display: block; font-weight: bold; font-size: 15px; line-height: 15px; text-align: center; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); position: relative; padding: 7px 0; left: -7px; top: 17px; width: 120px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); -webkit-text-shadow: rgba(0, 0, 0, 0.25) 0 1px 1px; -moz-text-shadow: rgba(0, 0, 0, 0.25) 0 1px 1px; text-shadow: rgba(0, 0, 0, 0.25) 0 1px 1px; } .no-csstransforms .ribbon-inner { left: -25px; } .tiny > .ribbon-inner { font-size: 10px; line-height: 10px; padding: 3px 0; left: -2px; top: 7px; width: 60px; } .no-csstransforms .tiny > .ribbon-inner { left: -9px; } .ribbon-inner:before, .ribbon-inner:after { content: ''; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 3px solid; border-top-color: inherit; position: absolute; bottom: -3px; } .tiny > .ribbon-inner:before, .tiny > .ribbon-inner:after { border-left-width: 2px; border-right-width: 2px; border-top-width: 2px; bottom: -2px; } .ribbon-inner:before { left: 1px; } .ribbon-inner:after { right: 1px; } /* Meter bars */ .meter { display: inline-block; height: 11px; line-height: 11px; width: 4px; margin-left: -2px; /*margin-left: 2px;*/ /*vertical-align: middle;*/ background: #999999 url(/../img/old-browsers/style/bg_meter.png) repeat-x; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background: -webkit-gradient(linear, left top, left bottom, from(#808080), to(#999999)); background: -webkit-linear-gradient(top, #808080, #999999); background: -moz-linear-gradient(top, #808080, #999999); background: -ms-linear-gradient(top, #808080, #999999); background: -o-linear-gradient(top, #808080, #999999); background: linear-gradient(top, #808080, #999999); -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.25); -moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.25); } /* Information spot */ .info-spot { display: inline-block; width: 16px; height: 16px; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 16px; font-weight: normal; vertical-align: middle; /*vertical-align: baseline;*/ position: relative; margin: -1px 0 1px; -webkit-text-shadow: none; -moz-text-shadow: none; text-shadow: none; cursor: help; } .info-spot > [class^="icon-"], .info-spot > [class*=" icon-"] { position: absolute; font-size: 17px; top: 0; left: 0; } .info-spot:hover > [class^="icon-"], .info-spot:hover > [class*=" icon-"] { color: white; z-index: 99; } .info-bubble { display: none; position: absolute; z-index: 98; top: -5px; left: 15px; min-width: 100px; padding: 8px 11px; background: #4c4c4c; color: white; text-align: left; -webkit-border-radius: 5px; -webkit-border-top-left-radius: 0; -moz-border-radius: 0 5px 5px 5px; border-radius: 0 5px 5px 5px; } .info-spot:hover > .info-bubble { display: block; } .info-bubble:before { content: ''; display: block; position: absolute; top: 0; right: 100%; height: 26px; width: 21px; background-color: inherit; -webkit-border-top-left-radius: 13px; -webkit-border-bottom-left-radius: 13px; -moz-border-radius: 13px 0 0 13px; border-radius: 13px 0 0 13px; } /* IE7 */ .info-bubble-before { display: block; position: absolute; top: 0; right: 100%; height: 26px; width: 21px; /*background-color:expression(this.parentNode.currentStyle['background-color']);*/ } /* Flipped */ .on-top > .info-bubble { top: auto; bottom: -5px; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 0; -moz-border-radius: 5px 5px 5px 0; border-radius: 5px 5px 5px 0; } .on-top > .info-bubble:before { top: auto; bottom: 0; } /* IE7 */ .on-top > .info-bubble > .info-bubble-before { top: auto; bottom: 0; } .on-left > .info-bubble { left: auto; right: 15px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 0; -moz-border-radius: 5px 0 5px 5px; border-radius: 5px 0 5px 5px; } .on-left > .info-bubble:before { right: auto; left: 100%; -webkit-border-radius: 0; -webkit-border-top-right-radius: 13px; -webkit-border-bottom-right-radius: 13px; -moz-border-radius: 0 13px 13px 0; border-radius: 0 13px 13px 0; } /* IE7 */ .on-left > .info-bubble > .info-bubble-before { right: auto; left: 100%; } .on-top.on-left > .info-bubble { left: auto; right: 15px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 0; -moz-border-radius: 5px 5px 0 5px; border-radius: 5px 5px 0 5px; } /* IE7 */ .on-top.on-left > .info-bubble > .info-bubble-before { left: auto; right: 15px; } /* Touch screen do not handle hover correctly, the text is shown on an modal */ .js.touch .info-spot:hover > [class^="icon-"], .js.touch .info-spot:hover > [class*=" icon-"] { color: inherit; } .js.touch .info-spot:hover > .info-bubble { display: none; } #todo-tables table.table_liquid tr td, #todo-tables table.table_liquid tr th { letter-spacing: 0px; } table.table_liquid tr.bg-green td, table.table_liquid tr.bg-green th { background: #cfc; } table.table_liquid tr.bg-yellow td, table.table_liquid tr.bg-yellow th { background: #ffc; } table.table_liquid tr.bg-red td, table.table_liquid tr.bg-red th { background: #fcc; } table.table_liquid tr.bg-blue td, table.table_liquid tr.bg-blue th { background: #cdf; } table.table_liquid tr.bg-black td, table.table_liquid tr.bg-black th { background: #111; color: #fff; } table.table_liquid tr.bg-purple td, table.table_liquid tr.bg-purple th { background: #D19FE8; } table.table_liquid tr.bg-tan td, table.table_liquid tr.bg-tan th { background: #F5DEB3; } table.table_liquid tr.bg-pink td, table.table_liquid tr.bg-pink th { background: #FFD1DC; } table.table_liquid tr.bg-lightblue td, table.table_liquid tr.bg-lightblue th { background: #F0F8FF; } table.table_liquid tr.bg-beige td, table.table_liquid tr.bg-beige th { background: #F5F5DC; } table.table_liquid tr.bg-orange td, table.table_liquid tr.bg-orange th { background: #FFB347; } table.table_liquid tr.bg-magenta td, table.table_liquid tr.bg-magenta th { background: #F49AC2; } table.table_liquid tr.bg-lightgray td, table.table_liquid tr.bg-lightgray th { background: #CFCFC4; } table.table_liquid tr.bg-lightgreen td, table.table_liquid tr.bg-lightgreen th { background: #77DD77; } i.bg-green { color: #cfc; } i.bg-yellow { color: #ffc; } i.bg-red { color: #fcc; } i.bg-blue { color: #cdf; } i.bg-black { color: #111; } i.bg-purple { color: #D19FE8; } i.bg-tan { color: #F5DEB3; } i.bg-pink { color: #FFD1DC; } i.bg-lightblue { color: #F0F8FF; } i.bg-beige { color: #F5F5DC; } i.bg-orange { color: #FFB347; } i.bg-magenta { color: #F49AC2; } i.bg-lightgray { color: #CFCFC4; } i.bg-lightgreen { color: #77DD77; } dd input, dd select, dd textarea { font-size: 15px; margin: 2px; } table.invisible tr td { border: none; } .status-icon-in-tab { position:relative; top: 4px; left: 1px; text-shadow: 0px 0px 5px #000; } .bundled-icon-in-tab{ position:relative; left: 3px; text-shadow: 0px 0px 5px #000; } .schedule-payments { font-size: 11px; text-align: center; } .schedule-payments.not-paid { color: #222; } .schedule-paid.paid { background-color: #090; color: #9f9; width: auto; margin-top: -6px; } .status-icon .title { position: absolute; top: 20px; color: black; background: white; padding: 4px; left: 0; white-space: nowrap; z-index: 100; text-shadow: 0px 0px 0px #000; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Verdana, sans-serif; } a.comm_form { background:#fdecce; } a.comm_form.active { background:#fdecce; } a.customer_info { background:#fce6be; } a.customer_info.active { background:#fce6be; } .printable_table_button{ zoom: 2; }