/************************************/
/*** Variables                    ***/
/************************************/

:root {
	
/* Fonts */	
	--global-font-family:		'Ubuntu', sans-serif;			/* Used for most GUI elements. */
	--global-font-size: 			20px;		
	--global-line-height:		150%;									/* Best value depends on the font. */

	--title-font-family:			'Ubuntu Condensed', serif;		/* Used for titles and h2 headings. */
	--title-font-size:			120%;									/* The relative size of titles and h2 headings. */	
	--title-line-height:			inherit;								/* Best value depends on the font. */

/* Global colors and backgrounds */
	--global-backgnd:				white;
	--panel-backgnd:				url('img/background.png') repeat;
	
	--global-color:				black;								/* Used for all GUI elements. */
	--inactive-color:				#595959;								/* Used for inactive tabs. */
	--inactive-backgnd:			#DCDCDC;
	--input-backgnd:				white;								/* Used for <input> and <textarea> elements. */
	--text-highlight-backgnd:	#FFFCBA;								/* The background for highlighted text. */
	--input-highlight-outline:	red;
	--help-backgnd:				#FFFEEA;								/* Background for help pop-ups */

	--title-color:					white;								/* For window and section titlebars. */
	--title-backgnd:				linear-gradient(to bottom, #4A698A, #22384F);

	--global-border-color:		gray;									/* Borders around widgets, inputs, windows and submenus. */
	--error-border-color: 		red;									/* A border color to indicate wrong input. */
	--global-line-color: 		#B5B5B5;								/* Used for separator lines, less contrasting than borders. */
 
	--selected-color:				white;								/* For selected list entries. */
	--selected-backgnd:			linear-gradient(to bottom, #4A698A, #22384F);

/* Special color classes */
	--red-color: 					#C70606;								/* Used for error message icons */	
	--green-color: 				#42902F;								/* Used for normal message icons. */
	--blue-color: 					#2065BF;								/* Used for question and help icons. */
	--gray-color: 					#585858;	

/* Widgets (buttons, <select>, checkbox overlays; the border radius is also applied to <input> and <textarea> elements) */	
	--widget-color:				inherit;
	--widget-backgnd:				linear-gradient(to bottom, #E6E6E5, #D1D1CF);
	--widget-disabled-color:	gray;									/* Text in disabled buttons and other widgets. */
	--widget-disabled-backgnd: lightgray;
	--widget-hover-backgnd:		linear-gradient(to bottom, #FAFAF9, #E6E6E3);
	--widget-active-backgnd:	linear-gradient(to bottom, #B8B8B8, #C5C5C5);
	--widget-border-radius:		4px;
	--widget-shadow: 				1px 1px 1px rgba(128, 128, 128, 0.7);

/* Modal windows and submenus */
	--window-backgnd: 			#EEEEEE;
	--window-border-radius:		8px;
	--window-shadow:		 		4px 4px 10px rgba(0, 0, 0, 0.6);

/* Times */
	--wait-after-correct-guess: 2s;
	--wait-after-wrong-guess: 1.5s;
}



/************************************/
/*** Fonts                        ***/
/************************************/

@font-face {
    font-family: 'Ubuntu';
    src: url('./fonts/ubuntu-b-webfont.woff2') format('woff2'),
         url('./fonts/ubuntu-b-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'Ubuntu';
    src: url('./fonts/ubuntu-bi-webfont.woff2') format('woff2'),
         url('./fonts/ubuntu-bi-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;

}

@font-face {
    font-family: 'Ubuntu';
    src: url('./fonts/ubuntu-r-webfont.woff2') format('woff2'),
         url('./fonts/ubuntu-r-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Ubuntu';
    src: url('./fonts/ubuntu-ri-webfont.woff2') format('woff2'),
         url('./fonts/ubuntu-ri-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}