.button {
    border: 1px solid transparent;
}

.button:hover {
    border: 1px solid #9da4af;
}

img {
    border: 1px solid transparent;
    padding: 2px;
    margin: 1px;
}

img.button:hover {
    border: 1px solid black;
}



.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: inherit;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  
  vertical-align: top;
  
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

.material-icons.md-18 { font-size: 18px !important; }
.material-icons.md-24 { font-size: 24px !important; }
.material-icons.md-36 { font-size: 36px !important; }
.material-icons.md-48 { font-size: 48px !important; }

.uiLink.md-18 div, .uiButton.md-18, .window h1 .uiButton {
	font-size: 18px !important;
	width: 18px !important;
	height: 18px !important;
	line-height: 18px !important;
}
.uiLink.md-24 div, .uiButton.md-24, .popup-menu .uiButton {
	font-size: 24px !important;
	width: 24px !important;
	height: 24px !important;
	line-height: 24px !important;
}

.uiLink.md-36 div, .uiButton.md-36 {
	font-size: 36px !important;
	width: 36px !important;
	height: 36px !important;
	line-height: 36px !important;

}
.uiLink.md-48 div, .uiButton.md-48 {
	font-size: 48px !important;
	width: 48px !important;
	height: 48px !important;
	line-height: 48px !important;
}


.uiLink.md-18 {
	font-size: 16px;
	line-height: 18px !important;
}

.uiLink.md-24 {
	font-size: 20px;
	line-height: 24px !important;
}

.uiLink.md-36 {
	font-size: 28px;
	line-height: 36px !important;
}

.uiLink.md-48 {
	font-size: 36px;
	line-height: 48px !important;
}

/*
.uiButton.icon .material-icons {
	vertical-align: baseline;
}
*/

.uiButton.icon:hover {
	cursor: default !important;
	border-color: transparent !important;
	background-color: transparent !important;
}


.uiButton {
	cursor: pointer;
	display: inline-block !important;
	padding: 1px;
	margin: 0px 1px;
	font-size: inherit;
	width: 1em;
	height: 1em;
	border: 1px solid transparent;
	border-radius: 1px;
	
	-webkit-transition: border-color 0.25s ease-out;
	transition: border-color 0.25s ease-out;
	-webkit-transition: color 0.25s ease-out;
	transition: color 0.25s ease-out;
}

.uiButton.hidden {
	display: none !important;
}

.uiButton.inline {
	white-space: nowrap;
}

.uiButton.inline > i {
	vertical-align: top;
}

.uiButton:hover {
	border-color: #888;
/*	color: #080;	*/
}

.uiButton.selected:hover {
/*	color: #0b0 !important;	*/
}

.uiButton.selected {
	border-color: #aaa;
	background-color: #fff;
/*	color: #0b0;	*/
}

.uiButton.selected:hover, .uiButton.icon:hover {
	border-color: #000;
	color: #000;
}

.uiButton.disabled, .uiButton.disabled:hover {
	opacity: 0.5;
	cursor: default !important;
	color: #000;
}

.uiButton.disabled * {
	cursor: default !important;
}

.uiButton.flip-h .material-icons {
	-moz-transform: scale(-1, 1);
	-webkit-transform: scale(-1, 1);
	-o-transform: scale(-1, 1);
	-ms-transform: scale(-1, 1);
	transform: scale(-1, 1);
}

.uiButton.flip-v .material-icons {
	-moz-transform: scale(1, -1);
	-webkit-transform: scale(1, -1);
	-o-transform: scale(1, -1);
	-ms-transform: scale(1, -1);
	transform: scale(1, -1);
}

.uiButton.turn-45 .material-icons {
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.uiButton.turn-90 .material-icons {
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}

.uiButton.turn-180 .material-icons {
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

.uiButton.turn-270 .material-icons {
	-moz-transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
}


.uiLink {
	display: inline-block;
	margin: 0px 2px;
	padding: 1px 0.75ex 1px 1px;
	border-radius: 4px;
	cursor: pointer;
	/*border: 1px solid transparent;*/
	
}

.uiLink:hover {
	border-color: black;
	background-color: #444;
	color: white;
}

.uiLink .uiButton {
	/*font-size: inherit !important;*/
	vertical-align: text-top;
	-webkit-transition: color 0s ease-out;
	transition: color 0s ease-out;
}

.uiLink .uiButton:hover {
	color: inherit;
	cursor: pointer !important;
}



.uiBreak {
	display: inline-block;
	vertical-align: baseline;

	margin: 0.25ex 5px;
	height: 0.9em;
	
	width: 1px;
	background: gray;
	background: -webkit-linear-gradient(transparent, gray, transparent); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(transparent, gray, transparent); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(transparent, gray, transparent); /* For Firefox 3.6 to 15 */
    background: linear-gradient(transparent, gray, transparent); /* Standard syntax */
}




button {
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    padding: 0.4ex 1ex;
    background-color: white;
    border: 1px outset gray;
    min-width: 5em;
    margin: 0 .25ex;
}

button:disabled {
    opacity: 0.5;
}

button:hover {
    border: 1px outset gray;
    background-color: #eee;
}

button:active {
    border: 1px inset gray;
    background-color: #aaa;
}

button.black {
    cursor: pointer;
    background-color: #000;
    color: white;
}

button.black:hover {
    border: 1px outset gray;
    background-color: #555;
}

button.black:active {
    border: 1px inset gray;
    background-color: #aaa;
}

button.black:disabled:hover {
    background-color: #000;
    color: white;
}

button.black:disabled:active {
    background-color: #000;
    color: white;
}




button.menu {
	min-width: inherit;
	font-size: inherit;
	vertical-align: text-top;
	font-weight: normal;
	
	border-radius: 1px;
	border: 1px solid transparent;
	background-color: transparent;
	outline: none;
}

button.menu:hover {
	background-color: #eee;
	border-color: gray;
}

button.selected, button.selected:hover {
	background-color: transparent;
	border-color: lightgray;
}


