/* 
        Style the Ribbon Bar.
*/

/**
 * This style creates the gradient effect across the entire "Ribbon Strip"
 * background. This is an HBox in FX application. You will find the HBox 
 * container in the HomeTab.java and InsertTab.java classes.
 */
#container {
    -fx-background-color: linear-gradient(to bottom, #ffffff00, #eaedf1);
}

.ribbon-tabpane {
	-fx-background-color: transparent;
	-fx-ribbon-color-base: #006400ff;
}
.ribbon-tabpane > .tab-content-area {
	-fx-control-inner-background: transparent;
}
.ribbon-tabpane > .tab-header-area {
	-fx-padding: 2px 0px 0px 0px;
}
.ribbon-tabpane > .tab-header-area > .tab-header-background {
	-fx-background-color: radial-gradient(center 50% 100%, radius 100%, #FFFFFFe5 10%, #FFFFFF00);
	-fx-background-insets: 0px 0px 2px 1px;
	-fx-border-color:
		#AEB1B1ff,
		linear-gradient(from 0% 0% to 100% 0%, #6B7B84ff 0%, #B6BABFff 5%, #B6BABFff 95%, #6B7B84ff 100%),
		linear-gradient(from 0% 0% to 100% 0%, #B9BBBCff 0%, #F7F7F7ff 10%, #F7F7F7ff 90%, #B9BBBCff 100%);
	-fx-border-width:
		0px 0px 1px 0px,
		0px 0px 1px 0px,
		0px 0px 1px 0px;
	-fx-border-insets:
		0px 0px 0px 0px,
		0px 1px 0px 1px,
		0px 0px 1px 0px;
	-fx-effect: null;
}
.ribbon-tabpane > .tab-header-area > .headers-region {
	-fx-min-height: 24px;
	-fx-pref-height: 24px;
	-fx-max-height: 24px;
}
.ribbon-tabpane > .tab-header-area > .headers-region > .tab {
	-fx-padding: -1px 11px -1px 11px;
}
.ribbon-tabpane > .tab-header-area > .headers-region > .tab > .tab-container > .focus-indicator {
	-fx-border-width: 0px;
}
.ribbon-tabpane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {
	-fx-font-size: 11px;
}


   /*
.ribbon {
    -fx-border-color: #b6babf;
    -fx-border-style: solid;
    -fx-border-width: 1px 0 1px 0;
}

.tab-pane .headers-region {
    -fx-effect: null;
}

.tab-pane *.tab-header-background {
    -fx-background-color: #eaedf1;
}          */


/**
 * This style creates the gradient effect and rounded borders for each content
 * area in Ribbon Strip. This is a VBox in FX application. You will find this 
 * style in all classes like Clipboard.java, Font.java, InsertTab.java and 
 * Tables.java.
 */
.ribbon-component-group {
    -fx-background-color: linear-gradient(#ffffff00, #eaedf1);
    -fx-border-color:  #8b9097;
    -fx-border-width: 0 1 0 0;
    -fx-border-style: solid phase 1;

    -fx-padding: 4 8 0 8;
    -fx-alignment: center;
}

.ribbon-component-group-gridpane{
    -fx-hgap: 0px;
    -fx-vgap: 1px;
    -fx-alignment: bottom-center;
}

.font-awesome-big-button {
    -fx-font-size: 24px;
}

.font-awesome-small-button {
    -fx-font-size: 14px;
}

.ribbon-component-group-label{
    -fx-padding: 5 0 0 0;
    -fx-text-fill: #5B626C;

}


.ribbon-button {
	-fx-background-color: transparent;
	-fx-min-width: 50;
	-fx-max-width: 70;
}
.ribbon-button-textcontainer{
	-fx-alignment: center;
	}

.ribbon-button:hover {
	-fx-background-color:
		linear-gradient(from 0% 0% to 0% 100%, #F1CA58ff, #F6D74Aff),
		#FFFFFFeb,
		linear-gradient(from 0% 0% to 0% 100%, #FDEEB3ff, #FDE388ff 15%, #FCE68Dff 87%, #FDFAE0ff 100%);
	-fx-background-insets:
		0px,
		1px,
		2px;
	-fx-background-radius:
		3px,
		3px,
		3px;
}
.ribbon-button:pressed {
	-fx-background-color:
		linear-gradient(from 0% 0% to 0% 100%, #C2762Bff, #C29E47ff),
		linear-gradient(from 0% 0% to 0% 100%, #F6C867ff, #FAD77Aff),
		#FFE48Aff;
	-fx-background-insets:
		0px,
		1px,
		2px;
	-fx-background-radius:
		3px,
		3px,
		3px;
}

.ribbon-button:selected {
	-fx-background-color:
	linear-gradient(from 0% 0% to 0% 100%, derive(#C2762Bff,10%), derive(#C29E47ff,10%)),
	linear-gradient(from 0% 0% to 0% 100%, derive(#F6C867ff,10%), derive(#FAD77Aff, 10%)),
	#FFE48Aff;
	-fx-background-insets:
	0px,
	1px,
	2px;
	-fx-background-radius:
	3px,
	3px,
	3px;
}


.ribbon-button-text {
	-fx-font-size: 11px;
	-fx-text-alignment: center;
}

.ribbon-button-graphic .glyph-font {
    -fx-font-size: 24pt !important;
}

/**
 * To create the effect of having multiple toggle buttons grouped together, I 
 * adjusted the background insets and radius. Basically I am ajusting the 
 * TOP, RIGHT, BOTTOM, LEFT of each layer. So each layer is separated by a
 * comma and CSS statement is terminated by ending semi colon. The bottom layer
 * is first and each subsequent layer is stacked on top.
 */

 /**
  * Middle Toggle Button
  */
.middleToggleButton {
    -fx-background-insets: 0 0 0 1, 1 0 1 0, 2 0 2 0;
    -fx-background-radius: 0 0 0 0, 0 0 0 0, 0 0 0 0;
}

 /**
  * Left side Toggle Button
  */
.leftToggleButton {
    -fx-background-insets: 0 0 0 1, 1 0 1 1, 2 0 2 2;
    -fx-background-radius: 0 0 0 5, 4 0 0 4, 3 0 0 3;
}

 /**
  * Right side Toggle Button
  */
.rightToggleButton {
    -fx-background-insets: 0 1 0 0, 1 1 1 0, 2 2 2 0 ;
    -fx-background-radius: 0 5 0 0, 0 4 4 0, 0 3 3 0;  
}


.split-ribbon-button .arrow {
	-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
	-fx-background-insets: 1 0 -1 0, 0;
	-fx-padding: 0.25em; /* 3 */
	-fx-shape: "M 0,0 H 0,7 L 3.5,3.5 Z";
}

 /**
  * I added some padding to make the ChoiceBoxes a little taller.
  */
#fontFamilyChoiceBox {
    -fx-padding: 3 5 3 5;
}

#fontSizeChoiceBox {
    -fx-padding: 3 5 3 5;
}


.context-menu {
	-fx-background-color: white;
}
