/*
 ========================================================================
 
    @VERSION			: 1.2.0
    @CREATED			: 01 APR 2011
    @MODIFIED			: 12 DEC 2011
    @DESIGNER			: Candyce YL Tan
    
    @FILE				: ~/global/css/forms.css
	@TYPE				: Style Sheet
	@DESCRIPTION		: Form Elements Styles
	   
   ======================================================================== 
*/

/*
 DEFAULT FORMS LAYOUT GRID STYLES
----------------------------------------------------------------------------*/

dl.form {
	width: 99%;
	margin: 1em 0;
	font: 12.5px/14px Arial, Helvetica, sans-serif;
}

dl.form dt {
	float: left;
	margin-right: 10px;
	width:200px;
	padding: 5px;
	text-align:right;
	background-color: #eee;
}

/* RTL Support */
html[dir="rtl"] dl.form dt {
	float: right;
	text-align: right;
	margin-right: 10px;
	width:200px;
	padding: 5px;
	text-align: left;
	background-color: #eee;
}

dl.form dt.small {
	width: 150px;
}

dl.form dt.blank {
	background-color: #fff;
	color:#fff;
}

/* RTL Support */
html[dir="rtl"] dl.form dt.blank {
	background-color: #fff;
	color:#fff;
}

dl.form dt label {
	font-size: 100%;
	font-weight: bold;
	color: #000000;
}

dl.form dd {
	margin: 8px 0 10px 0;
	padding: 3px 0 5px;
}

/* RTL Support */
html[dir="rtl"] dl.form dd {
	margin: 3px 0 10px 0;
	padding: 5px 0;
	text-align:right;
}


/*
 DETAILS LAYOUT STYLES used in Oral Companion & Homework & eResults
----------------------------------------------------------------------------*/
dl.table-display {
	float: left;
	width: 600px;
	margin: 1em 0;
	padding: 0;
}

dl.table-display dt {
	clear: left;
	float: left;
	width: 130px;
	margin: 3px;
	padding: 5px;
	font-weight: bold;
	background: #eee;
}

dl.table-display dt.blank {
	background: #fff;
	clear: left;
	float: left;
	width: 130px;
	margin: 3px;
	padding: 5px;
	text-align:left;
}

dl.table-display dt.label {
	background: #fff;
	clear: left;
	float: left;
	width: 100px;
	margin: 3px;
	padding: 5px;
	text-align:right;
}

dl.table-display dt.label label,
dl.table-display dt.blank label {
	font: bold 13px Arial, Helvetica, sans-serif;
	
}


dl.table-display dt.steps {
	background: url(../images/wizard/steps.png) no-repeat 3px 3px;
	clear: left;
	float: left;
	width: 90px;
	height: 32px;
	margin: 3px;
	padding: 5px 5px 5px 25px;
	color:#FFF;
	font: bold 16px/30px Arial, Helvetica, sans-serif;
}

dl.table-display dd {
	float: left;
	width: 420px;
	margin: 3px;
	padding: 5px;
}

dl.table-display dd.button {
	float: left;
	width: 420px;
	margin: 3px;
	padding: 5px;
	text-align:left;
}

dl.table-display dd label {
	font-weight: bold;
	font: bold 12px/16px Arial, Helvetica, sans-serif;
}


/* -------------------------------------------------------------------- */
/* FIELDSET & LEGEND STYLES */
/* -------------------------------------------------------------------- */

fieldset {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	border: 1px solid #ddd;
	margin: 1em 0;
	padding: .5em 1em;
}

fieldset legend {
	color: #17b;
	font-size: 1.2em;
	margin-left: 1em;
	font-weight: bold;
}

fieldset legend.highlight {
	cursor:pointer;
	cursor:hand;
}

fieldset:first-child {
	margin-top: 0;
}

label {
	font-weight:normal;
	line-height: 17px;
	vertical-align: text-top;
	padding-right: 10px;
	text-align: left;
   /* display:inline-block; Cause conflict with class" MCQ" in quiz do. */
}

html[dir="rtl"] label {
	font-weight:normal;
	line-height: 17px;
	vertical-align: text-top;
	padding-right: 10px;
	text-align: right;
}



/* -------------------------------------------------------------------- */
/* RADIO BUTTON / CHECKBOX GROUP STYLES */
/* -------------------------------------------------------------------- */

table.formSelect td {padding: 0 5px 10px;}


/* -------------------------------------------------------------------- */
/* KU BUTTONS STYLES */
/* -------------------------------------------------------------------- */
.kUButtonsContainerBlue { background:#87b6d9; padding: 5px; height: 30px; margin: 0 0 25px 0; }

.kuButtons a, .kuButtons button {
    display: block;
	float: left;
	margin: 0 7px 0 0;
	background-color: #0096BA;
	text-decoration: none;
	cursor: pointer;
	font: bold 12px/130% "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
	padding: 5px 8px 5px 5px;
	border: 1px solid #dedede;
}

/* RTL Support */
html[dir="rtl"] .kuButtons a, .kuButtons button {
    display: block;
	float: right;
	margin: 0 7px 0 0;
	background-color: #f5f5f5;
	text-decoration: none;
	cursor: pointer;
	font: bold 12px/130% "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
	padding: 5px 8px 5px 5px;
	border: 1px solid #dedede;
}

.kuButtons button:hover, .kuButtons a:hover {
  background-color: #dff4ff;
  border: 1px solid #c2e1ef;
  color: #336699;
  text-decoration: none;
}

a.kuButton {
	line-height: 16px;
	background-image: url(../images/forms/btn_regular.png);
	background-repeat: repeat-x;
	text-decoration: none;
}

/* GROUP BUTTON POSITION */
a.left { margin: 0; }

a.middle {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    border-left: solid 1px #f3f3f3;
    border-left: solid 1px rgba(255, 255, 255, 0);
    margin: 0;
}

a.right,
.kuButtons-group a.right {
    border-left: solid 1px #f3f3f3;
    border-left: solid 1px rgba(255, 255, 255, 0);
    margin: 0 15px 0 0;
}

/* DEFAULT BUTTON */
input[type="reset"],
input[type="submit"],
input[type="button"],
button, 
.kuButtons a.default, a.default {
	background-position: 0 0;
	color: #666666;
	cursor: pointer;
	text-decoration: none;
}

.kuButtons a.default:hover, button.default:hover {
	background-position: 0 -40px;
	border: 1px solid #cccccc;
	background-color: #dddddd;
	color: #666666;
	cursor: pointer;
	text-decoration: none;
}

.kuButtons a.default:active, button.default:active {
	background-position: 0 -80px !important;
	border: 1px solid #cccccc;
	background-color: #dddddd;
	color: #666666;
	cursor: pointer;
	text-decoration: none;
}

.kuButtons a.default-selected,
.kuButtons a.default-selected:hover {
	background-position: 0 -40px;
	border: 1px solid #cccccc;
	background-color: #dddddd;
	color: #ff6600;
	text-decoration: none;
}

/* REGULAR BUTTON */
button.regular, .kuButtons a.regular, a.regular {
	background-position: 0 0;
	color: #336699;
	text-decoration: none;
}

.kuButtons a.regular:hover, button.regular:hover {
	background-position: 0 -120px;
	border: 1px solid #c2e1ef;
	background-color: #dff4ff;
	color: #336699;
	text-decoration: none;
}

.kuButtons a.regular:active, button.regular:active {
	background-position: 0 -160px !important;
	border: 1px solid #c2e1ef;
	background-color: #dff4ff;
	color: #336699;
	text-decoration: none;
}


/* POSITIVE BUTTON */
.kuButtons button.positive, .kuButtons a.positive, a.positive {
	background-position: 0 0;
	color: #529214;
	text-decoration: none;
}

.kuButtons a.positive:hover, button.positive:hover {
	background-position: 0 -200px;
	background-color: #E6EFC2;
	border: 1px solid #C6D880;
	color: #529214;
	text-decoration: none;
}

.kuButtons a.positive:active, button.positive:active {
	background-position: 0 -240px !important;
	background-color: #E6EFC2;
	border: 1px solid #C6D880;
	color: #529214;
	text-decoration: none;
}


/* NEGATIVE BUTTON */
.kuButtons button.negative, .kuButtons a.negative, a.negative {
	background-position: 0 0;
	color: #d12f19;
	text-decoration: none;
}

.kuButtons a.negative:hover, button.negative:hover {
	background-position: 0 -280px;
	background-color: #fbe3e4;
	border: 1px solid #fbc2c4;
	color: #d12f19;
	text-decoration: none;
}

.kuButtons a.negative:active, button.negative:active {
	background-position: 0 -320px !important;
	background-color: #fbe3e4;
	border: 1px solid #fbc2c4;
	color: #d12f19;
	text-decoration: none;
}


/* -------------------------------------------------------------------- */
/* ICONIC KU BUTTON STYLES */
/* -------------------------------------------------------------------- */

.kuButtons-iconic a {
    display: block;
	width: 18px;
	height: 18px;
	float: right;
	margin: 0 7px 0 0;
	background-color: #f5f5f5;
	text-decoration: none;
	color: #565656;
	cursor: pointer;
	font: bold 12px/130% "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
	padding: 5px 8px 5px 5px;
	border: 1px solid #dedede;
}

.kuButtons-iconic a:hover {
  background-color: #dff4ff;
  border: 1px solid #c2e1ef;
  color: #336699;
}

.kuButtons-iconic a.default {
	background-position: 0 0;
	color: #666666;
	text-decoration: none;
}

.kuButtons-iconic a.default:hover {
	background-position: 0 -40px;
	border: 1px solid #cccccc;
	background-color: #dddddd;
	color: #666666;
}

.kuButtons-iconic a.default:active {
	background-position: 0 -80px !important; 
	border: 1px solid #cccccc;
	background-color: #dddddd;
	color: #666666;
}

.kuButtons-iconic a.regular {
	background-position: 0 0;
	color: #336699;
	text-decoration: none;
}

.kuButtons-iconic a.regular:hover {
	background-position: 0 -120px;
	border: 1px solid #c2e1ef;
	background-color: #dff4ff;
	color: #336699;
	text-decoration: none;
}

.kuButtons-iconic a.regular:active {
	background-position: 0 -160px !important;
	border: 1px solid #c2e1ef;
	background-color: #dff4ff;
	color: #336699;
	text-decoration: none;
}

.kuButtons-iconic a.positive {
	background-position: 0 0;
	color: #529214;
	text-decoration: none;
}

.kuButtons-iconic a.positive:hover {
	background-position: 0 -200px;
	background-color: #E6EFC2;
	border: 1px solid #C6D880;
	color: #529214;
	text-decoration: none;
}

.kuButtons-iconic a.positive:active {
	background-position: 0 -240px !important;
	background-color: #E6EFC2;
	border: 1px solid #C6D880;
	color: #529214;
	text-decoration: none;
}

.kuButtons-iconic a.negative {
	background-position: 0 0;
	color: #d12f19;
	text-decoration: none;
}

.kuButtons-iconic a.negative:hover {
	background-position: 0 -280px;
	background-color: #fbe3e4;
	border: 1px solid #fbc2c4;
	color: #d12f19;
	text-decoration: none;
}

.kuButtons-iconic a.negative:active {
	background-position: 0 -320px !important;
	background-color: #fbe3e4;
	border: 1px solid #fbc2c4;
	color: #d12f19;
	text-decoration: none;
}

/* -------------------------------------------------------------------- */
/* GROUPED KU BUTTON STYLES (for dual buttons) */
/* -------------------------------------------------------------------- */

.kuButtons-group a {
    display: block;
	width: 18px;
	height: 18px;
	float: left;
	margin: 0;
	background-color: #f5f5f5;
	text-decoration: none;
	color: #565656;
	cursor: pointer;
	font: bold 12px/130% "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
	padding: 5px 8px 5px 5px;
	border: 1px solid #dedede;
}

.kuButtons-group a.default, a.default {
	background-position: 0 0;
	color: #666666;
}

.kuButtons-group a.default:hover {
	background-position: 0 -40px;
	border: 1px solid #cccccc;
	background-color: #dddddd;
	color: #666666;
}

.kuButtons-group a.default:active {
	background-position: 0 -80px; 
	border: 1px solid #cccccc;
	background-color: #dddddd;
	color: #666666;
}

.kuButtons-group a.disabled, a.disabled,
.kuButtons-group a.disabled:hover, 
.kuButtons-group a.disabled:active {
	background-image: none;
	background-color: #eee;
	color: #999;
	cursor:default;
}

.kuButtons-group a.disabled span.icoAct-back-group,
.kuButtons-group a.disabled span.icoAct-prev-group,
.kuButtons-group a.disabled span.icoAct-previous-group {
    background-image: url(../images/actions/ico_prev-group_16.png);
	background-position: 0 -20px;
}

.kuButtons-group a.disabled span.icoAct-next-group {
    background-image: url(../images/actions/ico_next-group_16.png);
	background-position: 0 -20px;
}


/* -------------------------------------------------------------------- */
/* FORMALIZED STYLES */
/* -------------------------------------------------------------------- */

/* `Widths
----------------------------------------------------------------------- */

.input_tiny {
  width: 50px;
}

.input_small {
  width: 100px;
}

.input_medium {
  width: 150px;
}

.input_large {
  width: 200px;
}

.input_xlarge {
  width: 250px;
}

.input_xxlarge {
  width: 300px;
}

.input_full {
  width: 100%;
}

.input_98p {
  width: 98%;
}

/*
  Added via JS to <textarea> and class="input_full".
  Applies only to IE7. Other browsers don't need it.
*/
.input_full_wrap {
  display: block;
  padding-right: 8px;
}

/* `UI Consistency
----------------------------------------------------------------------- */

::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input[type="search"]::-webkit-search-decoration {
  display: none;
}

input,
button,
select,
textarea {
  margin: 0 3px 0;
  vertical-align: middle;
}

button,
input[type="reset"],
input[type="submit"],
input[type="button"] {
  -webkit-appearance: none;
  
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  
  background-clip: padding-box;
  background: #ddd url(../images/forms/button.png) repeat-x;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #ddd));
  background: -moz-linear-gradient(top center, #fff 0%, #ddd 100%);
  
  border: 1px solid;
  border-color: #ddd #bbb #999;
  
  cursor: pointer;
  
  color: #333;
  font: bold 12px/1.2 Arial, sans-serif;
  outline: 0;
  overflow: visible;
  padding: 3px 10px 4px;
  margin-top: 3px;
  text-shadow: #fff 0 1px 1px;
  width: auto;

  /* IE7 */
  *padding-top: 2px;
  *padding-bottom: 0px;
}


button {
  /* IE7 */
  *padding-top: 1px;
  *padding-bottom: 1px;
}

textarea,
select,
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],ul.ul-action-bar
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
input[type="file"] {
  -webkit-appearance: none;
  
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;  
  background-color: #fff;
  background-image:url(../images/forms/field-shadow.jpg);
  background-repeat: repeat-x;
  
  border: 1px solid;
  border-color: #848484 #c1c1c1 #e1e1e1;
  
  color: #000;
  outline: 0;
  padding: 2px 3px;
  font-size: 13px;
  font-family: Arial, sans-serif;
  height: 1.8em;

  /* IE7 */
  *padding-top: 2px;
  *padding-bottom: 1px;
  *height: auto;
}

input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
  -webkit-appearance: none;
  
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;  
  background-color: #fff;
  background-image:url(../images/forms/field-shadow.jpg);
  background-repeat: repeat-x;
  
  border: 1px solid;
  border-color: #848484 #c1c1c1 #e1e1e1;
  
  color: #000;
  outline: 0;
  padding: 2px 3px;
  font-size: 13px;
  font-family: Arial, sans-serif;
  height: 1.8em;

  /* IE7 */
  *padding-top: 2px;
  *padding-bottom: 1px;
  *height: auto;
}

/*
  Separate rule for Firefox.
  Separate rule for IE, too.
  Cannot stack with WebKit's.
*/
::-webkit-input-placeholder {
  color: #888;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #888;
}

input.placeholder_text,
textarea.placeholder_text {
  color: #888;
}

button:focus,
button:active,
input:focus,
input:active,
select:focus,
select:active,
textarea:focus,
textarea:active {
  -moz-box-shadow: #06f 0 0 7px;
  -webkit-box-shadow: #06f 0 0 7px;
  box-shadow: #06f 0 0 7px;

  /* for Opera */
  z-index: 1;
}

input[type="file"]:focus,
input[type="file"]:active,
input[type="radio"]:focus,
input[type="radio"]:active,
input[type="checkbox"]:focus,
input[type="checkbox"]:active {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

select[disabled],
textarea[disabled],
input[type="date"][disabled],
input[type="datetime"][disabled],
input[type="datetime-local"][disabled],
input[type="email"][disabled],
input[type="month"][disabled],
input[type="number"][disabled],
input[type="password"][disabled],
input[type="search"][disabled],
input[type="tel"][disabled],
input[type="text"][disabled],
input[type="time"][disabled],
input[type="url"][disabled],
input[type="week"][disabled] {
  background-color: #eee;
  background-image:none;
}

button[disabled],
input[disabled],
select[disabled],
select[disabled] option,
select[disabled] optgroup,
textarea[disabled],
textarea[readonly] {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: #888;
  cursor: default;
  background-image:none;
}

textarea,
select[size],
select[multiple] {
  height: auto;
  background-image:url(../images/forms/field-shadow.jpg);
  background-repeat: repeat-x;
}


.txtSearchFloat {
    float:left;
}

/* RTL Support */
html[dir="rtl"] .txtSearchFloat {
    float:right;
}

/* Tweaks for Safari + Chrome. */
@media (-webkit-min-device-pixel-ratio: 0) {
  select {
    background-image: url(../images/forms/select_arrow.gif);
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 20px;
  }

  select[size],
  select[multiple] {
    background-image: none;
    padding: 0;
  }
}

textarea {
  /*min-height: 150px;
  min-width: 550px;*/
  overflow: auto;
  resize: vertical;
}

optgroup {
  color: #000;
  font-style: normal;
  font-weight: normal;
}

/* `IE6
----------------------------------------------------------------------- */

/*
  Everything below this line is for IE6.
  Delete it if you don't support it! :)

  Classes are added dynamically via JS,
  because IE6 doesn't support attribute
  selectors: .ie6_button, .ie6_input, etc.

  Note: These style rules are somewhat
  duplicated because IE6 bombs out when
  it sees attribute selectors. Example:

  .ie6_button {
    This works in IE6.
  }

  .ie6_button,
  input[type=submit] {
    This doesn't work.
  }
*/

.ie6_button,
* html button {
  background: #ddd url(../images/forms/button.png) repeat-x;
  border: 1px solid;
  border-color: #ddd #bbb #999;
  cursor: pointer;
  color: #333;
  font: bold 12px/1.2 Arial, sans-serif;
  padding: 2px 10px 0px;
  overflow: visible;
  width: auto;
}

* html button {
  padding-top: 1px;
  padding-bottom: 1px;
}

.ie6_input,
* html textarea,
* html select {
  background: #fff;
  border: 1px solid;
  border-color: #848484 #c1c1c1 #e1e1e1;
  color: #000;
  padding: 2px 3px 1px;
  font-size: 13px;
  font-family: Arial, sans-serif;
  vertical-align: top;
  background-image:url(../images/forms/field-shadow.jpg);
  background-repeat: repeat-x;
}

* html select {
  margin-top: 1px;
}

.placeholder_text,
.ie6_input_disabled,
.ie6_button_disabled {
  color: #888;
}

.ie6_input_disabled {
  background: #eee;
}






/* -------------------------------------------------------------------- */
/* RADIO BUTTONS & CHECKBOXES */
/* -------------------------------------------------------------------- */
.kuHide { opacity: 0; filter:alpha(opacity=0); }

.kuCheckbox, .kuRadio, .kuThemeSelect {
	display:inline-block;
	width: 15px; height:15px; line-height:15px;
	zoom: 1; 
	*display:inline; 
	_height:30px;
}

.kuCheckbox { background: transparent url('../images/forms/checkbox.png') 0 0 no-repeat; }
.kuRadio { background: transparent url('../images/forms/radio.png') 0 0 no-repeat; }

.kuChecked { background-position: 0 -21px; }
.kuSelected { background-position: 0 -21px; }

.kuCheckbox label, .kuRadio label, .formSelect label  {
    font-size: 100%;
	color: #000000;
	margin: 0 15px 0 5px;
	font-weight: bold;
}

table.formSelect td {padding-bottom: 10px;}














/* -------------------------------------------------------------------- */
/* ACTION BUTTONS */
/* -------------------------------------------------------------------- */

ul.ul-action-bar {
  list-style: none;
  margin-left: 0;
  height: 26px;
  padding: 0;
  float: none;
}

ul.ul-action-bar li {
  float: left;
  height: 100%;
  margin-left: 2px;
}

html[dir="rtl"] ul.ul-action-bar li {
  float: right;
  height: 100%;
  margin-left: 2px;
}

ul.ul-action-bar li a {
  display: block;
  line-height: 12px;
  padding-right: 3px;
  padding-bottom: 6px;
  padding-top: 6px;
  border: 1px solid #64D1D1; /*#95D1D1;*/
  text-decoration: none;
  float: left;
}

/* RTL Support */
html[dir="rtl"] ul.ul-action-bar li a {
  display: block;
  line-height: 12px;
  padding-right: 3px;
  padding-bottom: 6px;
  padding-top: 6px;
  border: 1px solid #64D1D1; /*#95D1D1;*/
  text-decoration: none;
  float: right;
}

ul.ul-action-bar li a:hover, ul.ul-action-bar li a.selected {
  text-decoration: none;
  border-color: #00BDD1; /*#B1EDED;*/
  background-color: #6DEDED; /*#CDFFFF;*/
}

ul.ul-action-bar li a.icon_16 {
  padding-left: 20px;
  background-repeat: no-repeat;
  background-position: 2px 50%;
}



.button-row {
	margin: 15px auto 0; text-align:center; width:150px;
}

.action { text-align:center; padding: 10px; margin:0 auto; }


/* -------------------------------------------------------------------- */
/* NICE BUTTONS */
/* -------------------------------------------------------------------- */
/* Reference: http://www.bloggerswatch.com/internet/css-trick-submit-button-should-look-same-everywhere/
   Usage: <a href="#" id="btnSave" class="regular filesave icon_niceButton" runat="server" 
          title="Click to save your quiz state" onserverclick="btnSave_Click">Save</a>
   -------------------------------------------------------------------- */

.icon_niceButton {
  line-height: 16px;
  background-repeat: no-repeat;
  background-position: 2px 50%;
}

.nicebuttons a, .nicebuttons button {
    display: block;
	float: left;
	margin: 0 7px 0 0;
	background-color: #f5f5f5;
	text-decoration: none;
	color: #565656;
	cursor: pointer;
	font: bold 12px/130% "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
	padding: 7px 10px 6px 20px;
	border: 1px solid #dedede;
}

.nicebuttons button {
	width: auto;
	overflow: visible;
	padding: 4px 10px 3px 20px;
}

.nicebuttons button[type] {
	line-height: 17px; /* Safari */
	padding: 6px 10px 5px 20px;
}

*:first-child + html button[type] {
	padding: 4px 10px 3px 20px;
}

.nicebuttons button img, .nicebuttons a img {
  margin: 0 3px -3px 0 !important;
  padding: 0;
  border: none;
  width: 16px;
  height: 16px;
}

.nicebuttons button:hover, .nicebuttons a:hover {
  text-decoration: none;
}


/* STANDARD */
.nicebuttons button:hover, .nicebuttons a:hover {
  background-color: #dff4ff;
  border: 1px solid #c2e1ef;
  color: #336699;
}

.nicebuttons a:active {
  background-color: #6299c5;
  border: 1px solid #6299c5;
  color: #fff;
}


/* POSITIVE */
.nicebuttons button.positive, .nicebuttons a.positive {
  color: #529214;
}

.nicebuttons a.positive:hover, button.positive:hover {
  background-color: #E6EFC2;
  border: 1px solid #C6D880;
  color: #529214;
}

.nicebuttons a.positive:active {
  background-color: #529214;
  border: 1px solid #529214;
  color: #fff;
}


/* NEGATIVE */
.nicebuttons a.negative, .nicebuttons button.negative {
  color: #d12f19;
}

.nicebuttons a.negative:hover, .nicebuttons button.negative:hover {
  background-color: #fbe3e4;
  border: 1px solid #fbc2c4;
  color: #d12f19;
}

.nicebuttons a.negative:active {
  background-color: #d12f19;
  border: 1px solid #d12f19;
  color: #fff;
}


/* REGULAR */
button.regular, .buttons a.regular, a.regular {
  color: #336699;
}

.nicebuttons a.regular:hover, button.regular:hover {
  background-color: #dff4ff;
  border: 1px solid #c2e1ef;
  color: #336699;
}

.nicebuttons a.regular:active {
  background-color: #6299c5;
  border: 1px solid #6299c5;
  color: #fff;
}


/* GRAY */
button.gray, .buttons a.gray, a.gray {
	background-image: url(/include/global/img/actions/sprite.png);
	background-repeat: repeat-x;
	background-position: 0 0;
	border: solid 1px #ccc;
	color:#666;
}

.nicebuttons a.gray:hover, button.gray:hover {
  	background-image: url(/include/global/img/actions/sprite.png);
	background-repeat: repeat-x;
	background-position: 0 -6px;
    border: solid 1px #ccc;
    cursor: pointer;
    color:#333;
}



/* -------------------------------------------------------------------- */
/* NORMAL BUTTONS */
/* -------------------------------------------------------------------- */

.btn-green
{
    background: url(/Include/global/img/bg/mt_green.gif) repeat-x;
    border: solid 1px #ccc;
    padding:5px 10px 5px 10px;
    color:white;
    font-weight:bold;
}

.btn-gray {
    background: url(/include/global/img/actions/sprite.png) repeat-x;
    border: solid 1px #ccc;
    padding:5px 10px 5px 10px;
    color:#666;
    font-size:x-small;
    font-weight:bold;
    text-decoration: none;
    float: left;
}


/* RTL Support */
html[dir="rtl"] .btn-gray {
    background: url(/include/global/img/actions/sprite.png) repeat-x;
    border: solid 1px #ccc;
    padding:5px 10px 5px 10px;
    color:#666;
    font-size:x-small;
    font-weight:bold;
    text-decoration: none;
    float: right;
}

.btn-gray:hover
{
    background: url(/include/global/img/actions/sprite.png) 0 -6px;
    cursor: pointer;
    color:#333;
}