/* CSS Document */

/**
 * K&S Semantic Buttons
 * 1/30/13 by Ian Carr
 * from http://dabblet.com/gist/4670844
 * test these buttons here: /sandbox/button-test/test_landing_pages_buttons.php
 *
 * Note: when you use these button classes on an <a> tag, the <a> styling seems to ignore the text color these classes define, so you'll have to add a hack local style to each <a> instance: <a href="#" style="color:#fff;"...
 * OR do I just need to add 'a' subclasses in this file...
 */
/*  NOTE: do *not* use 'hsl()' values in the classes - they completely break IE, even IE 9

2/10/13 update by Rob:
-I discovered that the filter background overflows rounded corners in IE 9.  This is noticeable when you more the buttons more rounded.  If the buttons are full rectangle with 0 radius then this is not noticeable.
-the fix is we do not need filter anymore for IE
-we have html tags in outside pages and inside pages now have .ie9, .ie8 and .ie7 attached if we're running in those browsers
-e.g., this  is the first lines of any page 'inside' K&S:
	<!--[if IE 7]>    <html class="ie7"> <![endif]-->
	<!--[if IE 8]>    <html class="ie8"> <![endif]-->
	<!--[if IE 9]>    <html class="ie9"> <![endif]-->
	<!--[if !(IE)]><!--> <html> <!--<![endif]-->

-we then write .ie9 classing below for our production buttons where we use image:url(data:image/svg+xml; for IE 9
-we define the SVG using this web page: http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
-   for the each of the 3 button states, choose 'top left' and paste in start and end color values and copy out the SVG code
-at this point the only known bug is IE7 when we use these buttons on DIV elements they don't work - they go full width of the containing element.  But we will probably be only using <button> tags inside KS, and outside KS we'll only be using <a> tags, and lastly IE7 is <=2% visitors to keepandshare.com

 How to set colors for new button colors:   
Go to http://serennu.com/colour/colourcalculator.php and enter a #ffaa00 style hexa color code, then look at middle section for color variations.  Use the target color (such as ffaa00) as the 'medium dark' - so you want
one stop lower and 2 stops higher.

E.g., started with logo f9ae09 which gives hsl(41,95%,51%)
bright      70%
med bright  60%
med dark    50%
dark        45%

HSL Tools:
http://hslpicker.com   - enter Hexa and get HSL out or vice versa
http://serennu.com/colour/colourcalculator.php    icky but awesome section in middle that gives you lightness variations
http://www.workwithcolor.com/hsl-color-picker-01.htm    all of the conversions



Put the hsl values into your new button class
Use the "l" value to control brightness (lightness).  E.g., if your base color comes out around 50%, then pick values ~10 & 20% higher and 10% lower than it to get your 4 colors


 Colors are pretty easy - you'll just need to use a program that lets you use HSB color (photoshop or even css with the hsb(266,100,97) should work…).

Pick a color, then for the same H (hue) and S (Saturation) values, make four colors with the following Brightness values:

97
77
58
39

e.g., start with ff5c00
97 f75b00
77 c44800
58 943600
39 632400

If we call the 4 colors:

Bright
Med Bright
Med Dark
Dark

Then:
Normal state is Med Dark to Med Bright

Hover:
Dark to Med Dark

Click:
Bright to Med Bright

You'll want to make sure the darkest color is always on the bottom of the button.
That's it! You'll see that I use only 4 colors other than the text color for each button.
*/

/*
body {
	background: #8eb2d4;
	background: linear-gradient(45deg, #8eb2d4, #6e92a4);
	min-height: 100%;
}*/

.ksbutton {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	-webkit-border-radius: 8px;   /* orig 3 3  4, then 6, 6, 8, then 8, 8, 10 */
	-moz-border-radius: 8px;
	border-radius: 10px;
	/*  try no shadow for a non 3-d effect*/
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,1);
	-moz-box-shadow: 0 1px 1px rgba(0,0,0,1);
	box-shadow: 0 1px 1px rgba(0,0,0,1), inset 0 1px 1px rgba(255,255,255,.75); 
}
.ie8 .ksbutton { /* for < IE 9 have no corners since they will not work with the linear gradients */
  border-radius:0;
}
.kssmall, .kssmallclosex {
	font-family: Verdana, Arial, sans-serif;
	font-size: 11px;
	font-weight: normal;
	padding: .2em .8em .2em .8em;
	-webkit-border-radius: 3px;  -moz-border-radius: 3px; border-radius: 5px;
}
.kssmallclosex { /* use for 'X' close squarish buttons*/
	font-size:15px;
	padding: 0em .4em 0em .4em;
	height:18px;
	-webkit-border-radius: 2px;   
	-moz-border-radius: 2px;
	border-radius: 3px;
}

.roundsquare{-webkit-border-radius: 0px;  -moz-border-radius: 0px; border-radius: 0px;}
.roundverysmall{-webkit-border-radius: 2px;  -moz-border-radius: 2px; border-radius: 3px;}
.roundsmall{-webkit-border-radius: 3px;  -moz-border-radius: 3px; border-radius: 5px;}
.roundmedium{-webkit-border-radius: 4px;  -moz-border-radius: 4px; border-radius: 6px;}
.roundlarge{-webkit-border-radius: 8px;  -moz-border-radius: 8px; border-radius: 10px;}

/*This will work for firefox only */
@-moz-document url-prefix() { 
.kssmall{
	font-size: 10px;
	height:17px;   /* fix problems with FF rendering button a little big and messy */
	padding: 0px 8px 3px 8px;
}
}

.ksmedium, .ksmediumclosex {
	font-family: Verdana, Arial, sans-serif;
	font-size: 14px;
	padding: .3em .6em .3em .6em;
}
.ksmediumclosex { /* use for 'X' close squarish buttons*/
	padding: .15em .3em .15em .3em;
	-webkit-border-radius: 2px;   /* orig 3 3  4, then 6, 6, 8, then 8, 8, 10 */
	-moz-border-radius: 2px;
	border-radius: 3px;
}

.kslarge, .kslargeclosex {
	font-family: Verdana, Arial, sans-serif;
	font-size: 18px;
	padding: .3em .6em .3em .6em;
}
.kslargemorepadding {
	padding: .5em .8em .5em .8em;
}
.kslargeclosex { /* use for 'X' close squarish buttons*/
	padding: .15em .3em .15em .3em;
	-webkit-border-radius: 2px;   /* orig 3 3  4, then 6, 6, 8, then 8, 8, 10 */
	-moz-border-radius: 2px;
	border-radius: 3px;
}

.ksverylarge {
	font-family: Verdana, Arial, sans-serif;
	font-size: 22px;
	padding: .3em .5em .3em .5em;
}

.kshuge {
	font-family: "Helvetica neau", arial, helvetica, verdana;
	font-size: 29px;
	font-weight: bold;
	padding: .3em .5em .3em .5em;
}

.ksbutton:hover {
	text-decoration: none;
}
.ksbutton:active {
	position: relative;
	top: 1px;
}


/* A K&S "default" Button
 * Using the Colors:
 * #bfbfb0
 * #98998d
 * #72736a
 * #4c4c46)
 *
 * Text is:
 * #262623
*/


.ksgray, a.ksgray, .ksdefault, a.ksdefault, .ksgray_inert {
/**/
text-shadow: 0 1px 1px #98998d;
/**/
color: #262623;

border: solid 1px #4c4c46;
background: #98998d;
background: -webkit-gradient(linear, left top, left bottom, from(#98998d), to(#72736a));
background: -moz-linear-gradient(top, #98998d, #98998d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#98998d', endColorstr='#72736a');
}
.ksgray:hover, a.ksgray:hover, .ksdefault:hover, a.ksdefault:hover {
background: #72736a;
background: -webkit-gradient(linear, left top, left bottom, from(#72736a), to(#4c4c46));
background: -moz-linear-gradient(top, #72736a, #4c4c46);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#72736a', endColorstr='#4c4c46');
}
.ksgray:active, a.ksgray:active, .ksdefault:active, a.ksdefault:active {
color: #262623;
background: -webkit-gradient(linear, left top, left bottom, from(#bfbfb0), to(#98998d));
background: -moz-linear-gradient(top, #bfbfb0, #98998d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfbfb0', endColorstr='#98998d');
}

.ie9 .ksgray, .ie9 a.ksgray, .ie9 .ksdefault, .ie9 a.ksdefault {
filter:none;
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5NDUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzk4OTk4RCIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzcyNzM2QSIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzk0NSkiIC8+Cjwvc3ZnPg==);}
.ie9 .ksgray:hover, .ie9 a.ksgray:hover, .ie9 .ksdefault:hover, .ie9 a.ksdefault:hover {
filter:none;
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc3NTgiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzcyNzM2QSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzRDNEM0NiIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc1OCkiIC8+Cjwvc3ZnPg==);}
.ie9 .ksgray:active, .ie9 a.ksgray:active,  .ie9 .ksdefault:active, .ie9 a.ksdefault:active {
filter:none;
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImcyMzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0JGQkZCMCIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzk4OTk4RCIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzIzMSkiIC8+Cjwvc3ZnPg==);}



.ksyellow, a.ksyellow, .ksyellow_inert {    /*use ksyellow_inert when you want a pure graphic effect with no rollover, see /htm/calendars/calendar_request.php for example */
text-shadow: 0 0px 0px rgba(0,0,0,1);
color: #000000;
border: solid 1px #E09B06; /* Dark (~45%) */ 
background: #FABD38; /* Med Bright (~60%) */      /* Next 3 lines: Med Bright to Med Dark (~60-50%) */
background: -webkit-gradient(linear, left top, left bottom, from(#FABD38), to(#F9AC06));
background: -moz-linear-gradient(top, #FABD38, #F9AC06);
/* ARGH IE SEEMS TO BARF ON HSL VALUES AND TURN OUT ALL THE WRONG COLORS */
/*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='hsl(41,95%,60%)', endColorstr='#F9AC06');*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FABD38', endColorstr='#F9AC06');
}
.ksyellow:hover, a:hover.ksyellow  { 
color:#ffffff;
background: #F9AC06; /* Med Dark (~%50) */      /* Next 3 lines: Med Dark to Dark (~50-45%) */
background: -webkit-gradient(linear, left top, left bottom, from(#F9AC06), to(#E09B06));
background: -moz-linear-gradient(top, #F9AC06,#E09B06);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F9AC06', endColorstr='#E09B06');
}
.ksyellow:active, a:active.ksyellow {    
color: #ffffff;    /* Next 3 lines: Bright to Med Bright (~70-60%) */
background: -webkit-gradient(linear, left top, left bottom, from(#FBCD6A), to(#FABD38));
background: -moz-linear-gradient(top, #FBCD6A, #FABD38);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FBCD6A', endColorstr='#FABD38');
}

.ie9 .ksyellow, .ie9 a.ksyellow {
filter:none;
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImcxODIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZBQkQzOCIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0Y5QUMwNiIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzE4MikiIC8+Cjwvc3ZnPg==);}
.ie9 .ksyellow:hover, .ie9 a.ksyellow:hover {
filter:none;
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc1NTciIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0Y5QUMwNiIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0UwOUIwNiIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzU1NykiIC8+Cjwvc3ZnPg==);}
.ie9 .ksyellow:active, .ie9 a.ksyellow:active {
filter:none;
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc1MDkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZCQ0Q2QSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0ZBQkQzOCIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzUwOSkiIC8+Cjwvc3ZnPg==);}




.ksgreen, a.ksgreen, .kssave, a.kssave, .ksgreen_inert {
text-shadow: 0 1px 1px rgba(0,0,0,1);
color: #ffffff;
border: solid 1px #324a14;
background: #659427;
background: -webkit-gradient(linear, left top, left bottom, from(#659427), to(#4b6f1d));
background: -moz-linear-gradient(top, #659427, #659427);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#659427', endColorstr='#4b6f1d');
}
.ksgreen:hover, a.ksgreen:hover, .kssave:hover, a.kssave:hover {
background: #4b6f1d;
background: -webkit-gradient(linear, left top, left bottom, from(#4b6f1d), to(#324a14));
background: -moz-linear-gradient(top, #4b6f1d, #324a14);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4b6f1d', endColorstr='#324a14');
}
.ksgreen:active, a.ksgreen:active,  .kssave:active, a.kssave:active {
color: #ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#7eba31), to(#659427));
background: -moz-linear-gradient(top, #7eba31, #659427);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7eba31', endColorstr='#659427');
}
.ie9 .ksgreen, .ie9 a.ksgreen, .ie9 .kssave, .ie9 a.kssave {
filter:none;
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc3NTgiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiM2NTk0MjciIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiM0QjZGMUQiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c3NTgpIiAvPgo8L3N2Zz4=);}
.ie9 .ksgreen:hover, .ie9 a.ksgreen:hover, .ie9 .kssave:hover, .ie9 a.kssave:hover {
filter:none;
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImczNDQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiM0QjZGMUQiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMzMjRBMTQiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2czNDQpIiAvPgo8L3N2Zz4=);}
.ie9 .ksgreen:active, .ie9 a.ksgreen:active,  .ie9 .kssave:active, .ie9 a.kssave:active {
filter:none;
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2ODAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiM3RUJBMzEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiM2NTk0MjciIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c2ODApIiAvPgo8L3N2Zz4=);}







.ksred, a.ksred, .ksred_inert {
text-shadow: 0 1px 1px rgba(0,0,0,1);
color: #ffffff;
border: solid 1px #660101;
background: #cc0000;
background: -webkit-gradient(linear, left top, left bottom, from(#cc0000), to(#990000));
background: -moz-linear-gradient(top, #cc0000, #cc0000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cc0000', endColorstr='#990000');
}
.ksred:hover, a.ksred:hover {
background: #990000;
background: -webkit-gradient(linear, left top, left bottom, from(#990000), to(#660101));
background: -moz-linear-gradient(top, #990000, #660101);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#990000', endColorstr='#660101');
}
.ksred:active, a.ksred:active {
color: #ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#cc0000));
background: -moz-linear-gradient(top, #ff0000, #cc0000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#cc0000');
}

.ie9 .ksred, .ie9 a.ksred {
filter:none;
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImczMTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0NDMDAwMCIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzk5MDAwMCIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzMxNikiIC8+Cjwvc3ZnPg==);}
.ie9 .ksred:hover, .ie9 a.ksred:hover {
filter:none;
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc3ODkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzk5MDAwMCIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzY2MDEwMSIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc4OSkiIC8+Cjwvc3ZnPg==);}
.ie9 .ksred:active, .ie9 a.ksred:active {
filter:none;
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc0MjgiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZGMDAwMCIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDMDAwMCIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzQyOCkiIC8+Cjwvc3ZnPg==);}


/* Using the Colors: ff5c00
 * #FDFDFD   brightness Bright      
 * #F0F0F0   brightness Med Bright   
 * #E3E3E3   brightness Med Dark   
 * #D6D6D6   brightness Dark        
 */
/* When to use cancel vs. canceldefault, and delete vs. deletedefault
See Ian's graphic design guidelines: https://www.keepandshare.com/doc3/18221/2013-02-28-k-s-graphical-design-guidelines
He says:
	Buttons that cancel or delete (when not default actions) should have 'dim' relative to the positive action buttons, e.g., grey or black text and not be bold.
	Buttons that are default actions that cancel or delete text should have red text (maybe bold)
To implement this, we have 4 classes:  .kscancel, .kscanceldefault, .ksdelete, .ksdeletedefault
If cancel or delete is just 1 option of multiple options for the user, then use .kscancel and .ksdelete
But if the cancel or delete button is the default expected behavior (e.g., a Delete confirm dialog), then use .kscanceldefault or .ksdeletedefault
This way we can apply red text to the default behaviors.
This way we can also choose to style cancel differently from delete in the future
*/
.kswhite, .kscancel, .kscanceldefault, .ksdelete, .ksdeletedefault, .ksstandard, .ksupdate, .ksupdatedefault, a.kswhite, a.kscancel, a.kscanceldefault, a.ksdelete, a.ksdeletedefault, a.ksupdate, a.ksupdatedefault, .kswhite_inert {   
text-shadow: 0 1px 1px #cbcbcb;
color: #323232;
border: solid 1px #E3E3E3; /* Dark  */ 
background: #F0F0F0; /* Med Bright */      /* Next 3 lines: Med Bright to Med Dark */
background: -webkit-gradient(linear, left top, left bottom, from(#F0F0F0), to(#E3E3E3));
background: -moz-linear-gradient(top, #F0F0F0, #E3E3E3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0F0F0', endColorstr='#E3E3E3');
}
.ksstandard{color:#252525;} /* font color black */
.kswhite:hover, .kscancel:hover, .kscanceldefault:hover, .ksdelete:hover, .ksdeletedefault:hover, .ksstandard:hover, .ksupdate:hover, .ksupdatedefault:hover, a.kswhite:hover, a.kscancel:hover, a.kscanceldefault:hover, a.ksdelete:hover, a.ksdeletedefault:hover, a.ksupdate:hover, a.ksupdatedefault:hover { 
background: #E3E3E3; /* Med Dark */      /* Next 3 lines: Med Dark to Dark  */
background: -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#D6D6D6));
background: -moz-linear-gradient(top, #E3E3E3, #D6D6D6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E3E3E3', endColorstr='#D6D6D6');
}
.kswhite:active, .kscancel:active, .kscanceldefault:active, .ksdelete:active, .ksdeletedefault:active, .ksstandard:active, .ksupdate:active, .ksupdatedefault:active, a.kswhite:active, a.kscancel:active, a.kscanceldefault:active, a.ksdelete:active, a.ksdeletedefault:active, a.ksupdate:active, a.ksupdatedefault:active {    
color: #555;    
background:#FDFDFD; /* Next 3 lines: Bright to Med Bright  */
background: -webkit-gradient(linear, left top, left bottom, from(#FDFDFD), to(#F0F0F0));
background: -moz-linear-gradient(top, #FDFDFD, #F0F0F0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FDFDFD', endColorstr='#F0F0F0');
}
/*.ksstandard:active{color:green;}*/
.kscancel, .ksdelete, a.kscancel, a.ksdelete {color:#666;}
.kscanceldefault, .ksdeletedefault, a.kscanceldefault, a.ksdeletedefault {color:#f00;}
.kscancel:active, .ksdelete:active, a.kscancel:active, a.ksdelete:active {color:black;}
.kscanceldefault:active, .ksdeletedefault:active, a.kscanceldefault:active, a.ksdeletedefault:active {color:black;}
.ksupdate, .ksupdatedefault, a.ksupdate, a.ksupdatedefault{color:green; } /* blue #184999*/ 
.ksupdate:active, .ksupdatedefault:active, a.ksupdate:active, a.ksupdatedefault:active {color:black;}

/* the IE 'filter' doesn't work with rounded corners in IE 9 (the filter overflows the rounded corners, you can only really notice this if you have a large radius). So we turn it off and use a SVG background image;
 What about IE8?  It doesn't do rounded corners, so it's moot! */
.ie9 .kswhite, .ie9 .ksstandard, .ie9 .kscancel, .ie9 .ksdelete, .ie9 .kscanceldefault, .ie9 .ksdeletedefault, .ie9 .ksupdate, .ie9 .ksupdatedefault, .ie9 a.kswhite, .ie9 a.kscancel, .ie9 a.kscanceldefault, .ie9 a.ksdelete, .ie9 a.ksdeletedefault, .ie9 a.ksupdate, .ie9 a.ksupdatedefault {   
filter:none;
image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NTciIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0YwRjBGMCIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0UzRTNFMyIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzY1NykiIC8+Cjwvc3ZnPg==);
}
.ie9 .kswhite:hover, .ie9 .ksstandard:hover, .ie9 .kscancel:hover, .ie9 .ksdelete:hover, .ie9 .kscanceldefault:hover, .ie9 .ksdeletedefault:hover, .ie9 .ksupdate:hover, .ie9 .ksupdatedefault:hover, .ie9 a.kswhite:hover,.ie9 a.kscancel:hover, .ie9 a.kscanceldefault:hover, .ie9 a.ksdelete:hover, .ie9 a.ksdeletedefault:hover, .ie9 a.ksupdate:hover, .ie9 a.ksupdatedefault:hover { 
filter:none;
image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImcxMjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0UzRTNFMyIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0Q2RDZENiIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzEyMSkiIC8+Cjwvc3ZnPg==);
}
.ie9 .kswhite:active, .ie9 .ksstandard:active, .ie9 .kscancel:active, .ie9 .ksdelete:active, .ie9 .kscanceldefault:active, .ie9 .ksdeletedefault:active, .ie9 .ksupdate:active, .ie9 .ksupdatedefault:active, .ie9  a.kswhite:active, .ie9 a.kscancel:active, .ie9 a.kscanceldefault:active, .ie9 a.ksdelete:active, .ie9 a.ksdeletedefault:active, .ie9 a.ksupdate:active, .ie9 a.ksupdatedefault:active {    
filter:none;
image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5MCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPgo8c3RvcCBzdG9wLWNvbG9yPSIjRkRGREZEIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjRjBGMEYwIiBvZmZzZXQ9IjEiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnOTApIiAvPgo8L3N2Zz4=);
}

.ksupdatedefault{ font-weight:bold; } /* used for primary save or create green button in edit panels/dialogs such as calendar & todo */





.kslight, a.kslight, .kslight_inert {
text-shadow: 0 1px 1px #cbcbcb;
color: #323232;
border: solid 1px #666666;
background: #cbcbcb;
background: -webkit-gradient(linear, left top, left bottom, from(#cbcbcb), to(#989898));
background: -moz-linear-gradient(top, #cbcbcb, #cbcbcb);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cbcbcb', endColorstr='#989898');
}
.kslight:hover, a.kslight:hover {
background: #989898;
background: -webkit-gradient(linear, left top, left bottom, from(#989898), to(#666666));
background: -moz-linear-gradient(top, #989898, #666666);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#989898', endColorstr='#666666');
}
.kslight:active, a.kslight:active {
color: #323232;
background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#cbcbcb));
background: -moz-linear-gradient(top, #fefefe, #cbcbcb);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe', endColorstr='#cbcbcb');
}


.ie9 .kslight, .ie9 a.kslight {
filter:none;
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc1MDMiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0NCQ0JDQiIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzk4OTg5OCIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzUwMykiIC8+Cjwvc3ZnPg==);}
.ie9 .kslight:hover, .ie9 a.kslight:hover {
filter:none;
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImczMDgiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzk4OTg5OCIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzY2NjY2NiIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzMwOCkiIC8+Cjwvc3ZnPg==);}
.ie9 .kslight:active, .ie9 a.kslight:active {
filter:none;
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5NjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZFRkVGRSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0NCQ0JDQiIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzk2MSkiIC8+Cjwvc3ZnPg==);}
 
/* A K&S "signup" Button
If we call the 4 colors:

Bright
Med Bright
Med Dark
Dark

Normal:  Med Bright to Med Dark
Hover:   Med Dark to Dark
Active:  Bright to Med Bright

 * Using the Colors: ff5c00
 * #ff9b40   brightness Bright      100 ff5e0d
 * #cc7c33   brightness Med Bright   80 cc4b0a
 * #995d26   brightness Med Dark     60 993808
 * #663e1a   brightness Dark         40 666018
 *
 body {
    background: hsl(320, 50%, 75%);
}
http://vormplus.be/blog/article/using-colors-in-css
HSL stands for Hue, Saturation and Lightness. **This is not the same as the HSB values you'll find in the Photoshop color picker**. HSB (often called HSV) is another color model and stands for Hue, Saturation and Brightness. Wikipedia has a good entry on HSL and HSV color models.
DO NOT USE PHOTO SHOP COLOR PICKER, HSB is NOT same as HSL

Google on "tool hsl to hexadecimal colors" for some good tools


started with logo f9ae09 which gives hsl(41,95%,51%)
bright      70%
med bright  60%
med dark    50%
dark        45%

 * Text is:
 * #ffffff
*/

/* #0F6EC7  blue of K&S logo gives hsl(209, 86%, 42%)     So L values will be 30, 42, 57, 72
   #F9AE09  orange of K&S logo
*/


/* A K&S "share" Button
 * Using the Colors:
 * #ff9b40 bright
 * #cc7c33 med bright
 * #995d26 med dark
 * #663e1a dark
 *
 * Text is:
 * #ffffff
*/

.ksbrown, a.ksbrown, .ksbrown_inert { 
text-shadow: 0 1px 1px rgba(0,0,0,1);
color: #ffffff;
border: solid 1px #663e1a; /* Dark */ 
background: #cc7c33; /* Med Bright */    /* Next 3 lines: Med Bright to Med Dark */
background: -webkit-gradient(linear, left top, left bottom, from(#cc7c33), to(#995d26));
background: -moz-linear-gradient(top, #cc7c33, #cc7c33);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cc7c33', endColorstr='#995d26');
}
.ksbrown:hover, a.ksbrown:hover {
background: #995d26; /* Med Dark */      /* Next 3 lines: Med Dark to Dark */
background: -webkit-gradient(linear, left top, left bottom, from(#995d26), to(#663e1a));
background: -moz-linear-gradient(top, #995d26, #663e1a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#995d26', endColorstr='#663e1a');
}
.ksbrown:active, a.ksbrown:active { 
color: #ffffff;    /* Next 3 lines: Bright to Med Bright */
background: -webkit-gradient(linear, left top, left bottom, from(#ff9b40), to(#cc7c33));
background: -moz-linear-gradient(top, #ff9b40, #cc7c33);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9b40', endColorstr='#cc7c33');
}


.ie9 .ksbrown, .ie9 a.ksbrown {
filter:none;
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5MDUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0NDN0MzMyIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzk5NUQyNiIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzkwNSkiIC8+Cjwvc3ZnPg==);}
.ie9 .ksbrown:hover, .ie9 a.ksbrown:hover {
filter:none;
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5ODIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzk5NUQyNiIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzY2M0UxQSIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzk4MikiIC8+Cjwvc3ZnPg==);}
.ie9 .ksbrown:active, .ie9 a.ksbrown:active {
filter:none;
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4NjUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZGOUI0MCIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDN0MzMyIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzg2NSkiIC8+Cjwvc3ZnPg==);}

/* A K&S "update" Button
 * Using the Colors:
 * #297aff
 * #2161cc
 * #184999
 * #113166)
 *
 * Text is:
 * #ffffff
a:link, a:visited { color: #0f6fc7; text-decoration:none; }  
a:hover {text-decoration: underline;}

*/

.ksblue, a.ksblue, .ksblue_inert {
text-shadow: 0 1px 1px rgba(0,0,0,1);
color: #ffffff;
border: solid 1px #113166;
background: #2161cc; /* Med Bright */    /* Next 3 lines: Med Bright to Med Dark */
background: -webkit-gradient(linear, left top, left bottom, from(#2161cc), to(#184999));
background: -moz-linear-gradient(top, #2161cc, #2161cc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2161cc', endColorstr='#184999');
}
.ksblue:hover, a.ksblue:hover {
background: #184999; /* Med Dark */      /* Next 3 lines: Med Dark to Dark */
background: -webkit-gradient(linear, left top, left bottom, from(#184999), to(#113166));
background: -moz-linear-gradient(top, #184999, #113166);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#184999', endColorstr='#113166');
}
.ksblue:active, a.ksblue:active {
color: #ffffff;   /* Next 3 lines: Bright to Med Bright */
background: -webkit-gradient(linear, left top, left bottom, from(#297aff), to(#2161cc));
background: -moz-linear-gradient(top, #297aff, #2161cc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#297aff', endColorstr='#2161cc');
}
/* 2/10/13 sigh.  IE9 does not support rounded corders PLUS filter.  The gradient overflows the rounded corners.  The solution is to create a SVG Gradient background, which they will clip to the rounded corners.
You can create the SVG here: http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
*/
.ie9 .ksblue, .ie9 a.ksblue {
filter:none;
/* SVG as background image (IE9/Chrome/Safari/Opera) */ 
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImcyNDMiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzIxNjFDQyIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzE4NDk5OSIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzI0MykiIC8+Cjwvc3ZnPg==);
}

.ie9 .ksblue:hover, .ie9 a.ksblue:hover {
filter:none;
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImczNyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMTg0OTk5IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjMTEzMTY2IiBvZmZzZXQ9IjEiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnMzcpIiAvPgo8L3N2Zz4=);
}

.ie9 .ksblue:active, .ie9 a.ksblue:active {
filter:none;
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2MzUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzI5N0FGRiIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzIxNjFDQyIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzYzNSkiIC8+Cjwvc3ZnPg==);
}






/* A K&S "black" Button
 * Using the Colors:
 * #333333
 * #292929
 * #1f1f1f
 * #141414)
 *
 * Text is:
 * #ffffff
*/

.ksblack, a.ksblack, .ksblack_inert {
/* 
text-shadow: 0 1px 1px rgba(0,0,0,1);
 */
/**/
text-shadow: 0 2px 1px #000000;
/**/
color: #cccccc;
border: solid 1px #141414;
background: #292929;
background: -webkit-gradient(linear, left top, left bottom, from(#292929), to(#1f1f1f));
background: -moz-linear-gradient(top, #292929, #292929);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#1f1f1f');
}
.ksblack:hover, a.ksblack:hover {
background: #1f1f1f;
background: -webkit-gradient(linear, left top, left bottom, from(#1f1f1f), to(#141414));
background: -moz-linear-gradient(top, #1f1f1f, #141414);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1f1f1f', endColorstr='#141414');
}
.ksblack:active, a.ksblack:active {
color: #ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#292929));
background: -moz-linear-gradient(top, #333333, #292929);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#292929');
}


.ie9 .ksblack, .ie9 a.ksblack {
filter:none;
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc3NDIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzI5MjkyOSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzFGMUYxRiIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MikiIC8+Cjwvc3ZnPg==);}
.ie9 .ksblack:hover, .ie9 a.ksblack:hover {
filter:none;
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5ODYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzFGMUYxRiIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzE0MTQxNCIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzk4NikiIC8+Cjwvc3ZnPg==);}
.ie9 .ksblack:active, .ie9 a.ksblack:active {
filter:none;
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImczMDMiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzMzMzMzMyIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzI5MjkyOSIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzMwMykiIC8+Cjwvc3ZnPg==);}

.ksgray_inert, .ksyellow_inert, .ksgreen_inert, .ksred_inert, .kswhite_inert, .kslight_inert, .ksbrown_inert, .ksblue_inert, .ksblack_inert{cursor: default;}

.ksfontblack{color:black}


.ksbright {
    color: #222;
    border: solid 1px #a8a8a8;
    background-color: #fefefe;
    /* Fallback */

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#FEFEFE));
    background-image: -webkit-linear-gradient(top, #FEFEFE, #FEFEFE);
    background-image: -moz-linear-gradient(top, #FEFEFE, #FEFEFE);
    background-image: -ms-linear-gradient(top, #FEFEFE, #FEFEFE);
    background-image: -o-linear-gradient(top, #FEFEFE, #FEFEFE);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FEFEFE', EndColorStr='#FEFEFE')";
}
.ie9 .ksbright {
    -ms-filter: none;
}
.ksbright:hover {
    background-color: #f4f4f4;
    /* Fallback */

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#eaeaea));
    background-image: -webkit-linear-gradient(top, #FEFEFE, #eaeaea);
    background-image: -moz-linear-gradient(top, #FEFEFE, #eaeaea);
    background-image: -ms-linear-gradient(top, #FEFEFE, #eaeaea);
    background-image: -o-linear-gradient(top, #FEFEFE, #eaeaea);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FEFEFE', EndColorStr='#eaeaea')";
}
.ie9 .ksbright:hover {
    -ms-filter: none;
}
.ksbright:active {
    background-color: #e0e0e0;
    /* Fallback */

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eaeaea), to(#d7d7d7));
    background-image: -webkit-linear-gradient(top, #eaeaea, #d7d7d7);
    background-image: -moz-linear-gradient(top, #eaeaea, #d7d7d7);
    background-image: -ms-linear-gradient(top, #eaeaea, #d7d7d7);
    background-image: -o-linear-gradient(top, #eaeaea, #d7d7d7);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#eaeaea', EndColorStr='#d7d7d7')";
}
.ie9 .ksbright:active {
    -ms-filter: none;
}
.ksbright.ksupdate {
    color: green;
    font-weight: bold;
}
.ksbright.kscancel {
    color: #666;
}