@font-face {
    src: url('FROSTBITE-Narrow.ttf');
}
@font-face {
    src: url('Roboto-Light.ttf');
}
/*
@font-face {
    font-family: FontAwesome;
    src: url('/uk/co/bithatch/snake/ui/fontawesome-webfont.ttf');
}
*  
*/

* {
	-fx-background: #000000;
	-fx-accent: #ffffff;
	-fx-base: #000000;
	-fx-inner-background: #0f0f0f;
	-fx-default-background: #000000;
	-fx-transparent-background: #00000000;
	-fx-highlight-background: #20202040;
	-fx-focus-color: #ffffff;
	-fx-dark-text-color: #d3d3d3;
	-fx-mid-text-color: #ffffff;
	-fx-light-text-color: #a9a9a9;
	-fx-icon-color: -fx-dark-text-color;
    -fx-icon-size: 22;
}

/* Context menus */

.context-menu, .context-menu:focused {
	-fx-background-color: -fx-default-background;
	-fx-border-color: -fx-accent;
   
}

.menu-item {
	-fx-background-color: -fx-default-background;
}

.menu-item .label {
    -fx-text-fill: -fx-light-text-color;
}

.menu-item:focused {
	-fx-background-color: -fx-accent;	
}

.menu-item:focused .label {
   -fx-text-fill: -fx-default-background;
}

/* Generic spacing styles */

.gapRight {
    -fx-padding: 0.0 2.0em 0.0 0.0;
}

.gapLeft {
    -fx-padding: 0.0 0.0 0.0 2.0em;
}

.gapBottom {
    -fx-padding: 0.0 0.0 1.0em 0.0;
}

.gapTop {
    -fx-padding: 1.0em 0.0 0.0 0.0;
}

.regions {
    -fx-padding: 1.0em 1.0em 1.0em 1.0em;
    -fx-spacing: 1.0em;
    -fx-font-size: 10.0px;
}

.padded, .iconBar {
    -fx-padding: 4.0px;
}

.section, .tools {
    -fx-padding: 1.0em 1.0em 1.0em 1.0em;
}

.iconBar {
    -fx-spacing: 4.0px;
}

.row, .tools, .column {
    -fx-spacing: 1.0em;
}

.spaced {
    -fx-hgap: 1.0em;
    -fx-vgap: 1.0em;
}

.compactTools {
    -fx-padding: 0.25em;
    -fx-spacing: 0.25em;
}

/* Some components we hide the focus (such as ListView used for devices ) */



/* Logical text styles for anything that needs mild emphasis  */

.emphasis {
	-fx-font-weight: bold;
}

.small {
    -fx-font-size: 12.0px;
}

.title {
    -fx-font-size: 24.0px;
    -fx-text-fill: -fx-accent;
    -fx-font-family: 'FROSTBITE Narrow';
}

.subtitle {
    -fx-font-size: 18.0px;
    -fx-text-fill: -fx-accent;
    -fx-font-family: 'FROSTBITE Narrow';
}

.header {
	-fx-padding: 4px;
    -fx-font-size: 18.0px;
    -fx-background-color: -fx-accent;
    -fx-text-fill: -fx-default-background;
    -fx-font-family: 'FROSTBITE Narrow';
}

.titleBar {
    -fx-font-size: 32.0px;
    -fx-text-fill: -fx-accent;
    -fx-font-family: 'FROSTBITE Narrow';
}

.description {
	-fx-padding: 1.0em;
    -fx-font-size: 18.0px;
}

/* Various icon, image and icon button styles */
GeneratedIcon {
	-icon-border-color: -fx-accent;
	-icon-border-width: 2.5;
	-icon-text-color: -fx-accent;
	-icon-color: -fx-accent;
	-icon-shape: 'ROUND';
	-icon-opacity: 0; 
    -icon-text-font-family: 'Roboto Light';
    -icon-text-font-size: 12pt;
}

GeneratedIcon.filled {
    -icon-opacity: 1; 
    -icon-text-color: -fx-mid-text-color;
}

GeneratedIcon.keyframe-button, GeneratedIcon.color-bar-icon {
	-icon-opacity: 1; 
	-icon-text-color: -fx-accent;
}

GeneratedIcon.cell {
	-icon-border-width: 2;
    -icon-text-font-size: 8pt;
}

GeneratedIcon.mapSequenceKey {
	-icon-shape: 'ROUNDED';
}

GeneratedIcon.mapSequenceButton {
	-icon-shape: 'ROUND';
}

Hyperlink FontIcon, Hyperlink:visited FontIcon {
    -fx-icon-color: -fx-accent;
}

Hyperlink:hover FontIcon, Hyperlink:pressed FontIcon {
    -fx-icon-color: -fx-dark-text-color;
}

.icon, 
.defaultIconButton, 
.iconButton, 
.smallIcon, 
.smallIconButton, 
.largeIconButton, 
.iconButton:visited, 
.defaultIconButton:visited, 
.smallIconButton:visited, 
.largeIconButton:visited {
	-fx-underline: false;
    -fx-border-width: 0.0;
    -fx-text-fill: -fx-dark-text-color;
}

.icon FontIcon, 
.defaultIconButton FontIcon, 
.iconButton FontIcon, 
.smallIcon FontIcon, 
.smallIconButton FontIcon, 
.largeIconButton FontIcon, 
.iconButton FontIcon, 
.iconButton:visited FontIcon, 
.defaultIconButton:visited FontIcon, 
.smallIconButton:visited FontIcon, 
.largeIconButton:visited FontIcon {
    -fx-icon-color: -fx-dark-text-color;
}

.ic-snake-outline-coloronButton:hover, 
.defaultIconButton:pressed, 
.defaultIconButton:hover,  
.iconButton:pressed, 
.iconButton:hover, 
.smallIconButton:pressed, 
.smallIconButton:hover, 
.largeIconButton:pressed, 
.largeIconButton:hover {
    -fx-text-fill: -fx-accent;
}

.iconButton:pressed FontIcon, 
.iconButton:hover:visited FontIcon,
.iconButton:hover FontIcon, 
.ic-snake-outline-coloronButton:hover FontIcon, 
.defaultIconButton:pressed FontIcon, 
.defaultIconButton:hover:visited FontIcon,
.defaultIconButton:hover FontIcon,  
.smallIconButton:pressed FontIcon, 
.smallIconButton:visited:hover FontIcon, 
.smallIconButton:hover FontIcon, 
.largeIconButton:pressed FontIcon, 
.largeIconButton:hover FontIcon {
    -fx-icon-color: -fx-accent;
}

.icon, .iconButton {
    -fx-font-size: 32.0px; /* DEPRECATED */
}

.icon FontIcon, .iconButton  FontIcon {
    -fx-icon-size: 32;
}

.smallIcon, .smallIconButton {
    -fx-font-size: 22.0px; /* DEPRECATED */
}

.smallIcon FontIcon, .smallIconButton FontIcon {
    -fx-icon-size: 22;
}

.largeIconButton, .largeIcon, .titleIcon {
    -fx-text-fill: -fx-accent;
    -fx-font-size: 72.0px; /* DEPRECATED */
}

.largeIconButton FontIcon, .largeIcon FontIcon, .titleIcon FontIcon {
    -fx-icon-color: -fx-accent;
    -fx-icon-size: 72;
}

.icon, .smallIcon {
    -fx-text-fill: -fx-accent;
}

.icon FontIcon , .smallIcon  FontIcon  {
    -fx-icon-color: -fx-accent;
}

.hugeIcon {
    -fx-text-fill: -fx-accent;
    -fx-font-size: 256.0px; /* Deprecated */
}

.hugeIcon FontIcon {
    -fx-icon-size: 256;
    -fx-icon-color: -fx-accent;
}

.mediumIcon {
    -fx-text-fill: -fx-accent;
    -fx-font-size: 48.0px; /* DEPRECATED */
}

.mediumIcon FontIcon {
    -fx-icon-color: -fx-accent;
    -fx-icon-size: 72;
}

.titleIcon {
    -fx-padding: 0.0 0.25em 0.0 0.0;
}

.titleImage {
	-fx-fit-height: 96.0px;
	-fx-fit-width: 96.0px;
    -fx-padding: 0.0 0.25em 0.0 0.0;
}

/* Logical information message level styles */
.popupMessages {
    -fx-font-size: 12pt;
}

.popupMessages Hyperlink, .popupMessages .icon {	
    -fx-text-fill: white;
}

.popupMessages .icon FontIcon {  
    -fx-icon-color: white;
}

.deemphasis, .deemphasis FontIcon {
    -fx-opacity: 0.4;
}

.danger {
    -fx-text-fill: red;
}

.danger FontIcon {
    -fx-icon-color: red;
}

.popupMessages .danger {
    -fx-text-fill: white;
    -fx-background-color: #aa0000;
}

.popupMessages .danger FontIcon {
    -fx-icon-color: white;
}

GeneratedIcon.danger {
    -icon-text-color: red;
    -icon-border-color: red;
}

GeneratedIcon.warning {
    -icon-text-color: orange;
    -icon-border-color: orange;
}

GeneratedIcon.info {
    -icon-text-color: blue;
    -icon-border-color: blue;
}

GeneratedIcon.success {
    -icon-text-color: green;
    -icon-border-color: green;
}

.warning {
    -fx-text-fill: orange;
}

.warning FontIcon {
    -fx-icon-color: orange;
}

.popupMessages .warning {
    -fx-text-fill: black;
    -fx-background-color: orange;
}

.popupMessages .warning FontIcon {
    -fx-icon-color: black;
}

.popupMessages .warning Label {
    -fx-text-fill: black;
}

.success {
    -fx-text-fill: green;
}

.success FontIcon {
    -fx-icon-color: green;
}

.popupMessages .success {
    -fx-text-fill: white;
    -fx-background-color: green;
}

.info {
    -fx-text-fill: #003bd0;
}

.info FontIcon {
    -fx-icon-color: #003bd0;
}

.popupMessages .info {
    -fx-text-fill: white;
    -fx-background-color: #003bd0;
}

.popupMessages .info FontIcon {
    -fx-icon-color: white;
}

/* Nav areas, i.e the bar at the top of the UI that contains back icon, filters and device image / title etc */

.nav {
    -fx-padding: 8.0px; 
	-fx-pref-height: 96.0px;
}

/* Status areas, a horizontal group of components, each conveying different status information such as
 * that used in the device overview
 */

.status {
	-fx-spacing: 1.0em;
}

.deviceOverview .title {
	-fx-font-size: 16.0px;
}

.statusImage {
}

/* Some components we want to explicitly add transparent backgrounds to  */

.control, .transparentBackground, .transparentBackground > .list-cell, .transparentBackground .viewport, 
.transparentBackground:focused, .transparentBackground:focused .viewport, .deviceOverview {
	-fx-background-color: transparent;
}

.list-view.transparentBackground .list-cell:focused {
    -fx-background-color: -fx-background, -fx-cell-focus-inner-border, -fx-background;
    -fx-background-insets: 0, 1, 2;
}

/* Matrix UI */

.keyboard {
    -fx-hgap: 4.0px;
    -fx-vgap: 4.0px;
}

.key {
	-fx-font-size: 10.0px;
	-fx-pref-width: 36.0px;
	-fx-pref-height: 36.0px;
    -fx-background-color: linear-gradient(#222222, #111111);
    -fx-background-radius: 4.0;
    -fx-background-insets: 0.0; 
    -fx-text-fill: white;
}

.single-row-matrix .key {
	-fx-font-size: 12.0px;
	-fx-pref-width: 56.0px;
	-fx-pref-height: 56.0px;
}

.key Label {
	-fx-effect: dropshadow( one-pass-box , white , 4.0 , 0.0 , 0.0 , 0.0 );
}

.key:hover {
    -fx-background-color: linear-gradient(#444444, #222222);
}

.key:armed {
    -fx-background-color: linear-gradient(#888888, #777777);
}
.key:selected {
    -fx-background-color: linear-gradient(#dddddd, #cccccc);
}
	
.key2 {
    -fx-background-color: -fx-text-base-color, -fx-text-base-color, -fx-accent, -fx-body-color;
    -fx-background-insets: 0.0 0.0 -1.0 0.0, 0.0, 1.0, 2.0;
    -fx-background-radius: 3.0px, 3.0px, 2.0px, 1.0px;
    -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; 
    -fx-text-fill: -fx-text-base-color;
    -fx-alignment: CENTER;
    -fx-content-display: LEFT;
}

/* Overview UI */

.devices .list-cell {
    -fx-background-color: transparent;
    -fx-padding: 0.25em; /* 3 */
    -fx-text-fill: -fx-text-inner-color;
    -fx-opacity: 1.0;
}

.devices .list-cell:filled:selected:focused, .devices .list-cell:filled:selected {
    -fx-background-color: #00FF0040;
    -fx-text-fill: -fx-text-inner-color;
}

/* Options UI */
#trayOptions {
	-fx-pref-width: 340.0px;	
}

.options .tools {
	-fx-pref-width: 400px;
}

/* Controls */
.control {
    -fx-background-color: -fx-highlight-background;
    -fx-border-color: -fx-accent;
    -fx-padding: 0;
}

.layoutControl {
    -fx-background-color: -fx-transparent-background;
}

.controls-nolayout {
	-fx-column-halignment: left;	
	-fx-row-valignment: top;
}

.controls-nolayout .control {
	-fx-pref-width: 256px;
}

.controls-layout {
}

.controls-layout .control {
	-fx-pref-width: 256px;
}

/* Additional generic component styles */
Hyperlink, Hyperlink:visited {
    -fx-text-fill: -fx-accent;
	-fx-underline: false;
}

TextFlow {
    -fx-text-fill: #a9a9a9;
}

Hyperlink:hover {
    -fx-text-fill: -fx-dark-text-color;
	-fx-underline: true;
}

TextField, TextArea {
    -fx-background-color: -fx-default-background;
    -fx-border-color: -fx-inner-background;
}

Spinner .text-field {
    -fx-background-color: -fx-default-background;
}

TextArea .content {
    -fx-background-color: -fx-default-background;
}

TextField:focused, TextArea:focused {
	-fx-border-color: -fx-accent;
}

.tooltip {
    -fx-background: rgba(30.0,30.0,30.0);
    -fx-text-fill: white;
    -fx-background-color: rgba(30.0,30.0,30.0,0.8);
    -fx-background-radius: 6.0px;
    -fx-background-insets: 0.0;
    -fx-padding: 0.667em 0.75em 0.667em 0.75em; /* 10px */
    -fx-effect: dropshadow( three-pass-box , rgba(0.0,0.0,0.0,0.5) , 10.0, 0.0 , 0.0 , 3.0 );
    -fx-font-size: 12.0px;
}


Label, CheckBox {
    -fx-font-family: 'Roboto Light';	
}

LayoutEditor {
	-snake-line-color: -fx-accent;
}

LayoutEditor .layout {
}

LayoutEditor .layout-label {
    -fx-font-size: 24.0px;
    -fx-text-fill: -fx-accent;
    -fx-font-family: 'FROSTBITE Narrow';
}

.tab .tab-label { 
    -fx-alignment: CENTER;
    -fx-text-fill: -fx-accent;
    -fx-font-size: 18px;
    -fx-font-family: 'FROSTBITE Narrow';
}

.selectable-area {
	-snake-outline-color: -fx-accent; 
}

LEDGraphic, AreaGraphic, KeyGraphic, AccessoryGraphic {
	/*-snake-outline-color: -fx-transparent-background;*/
	-snake-outline-color: -fx-accent;
}

LEDGraphic:selected, AreaGraphic:selected, KeyGraphic:selected {
	-snake-outline-color: -fx-accent;
}

ToggleSwitch:selected .thumb-area {
    -fx-background-color: -fx-accent;
}
