@CHARSET "UTF-8";
:root {
    /* BASICS: */
    --color_white: #ffffff;
    --color_white_80: #ffffff80;
    --color_white_d0: #ffffffd0;
    --color_green: #32cd32;
    --color_gray_40: #e0e0e040;
    --color_gray_80: #a0a0a080;
    --color_black_c0: #000000c0;
    --color_black_80: #00000080;
    --font_titi: "Titillium Web", sans-serif;
    --font_html_main: sans-serif;
    /* DESIGN TERMS: */
    --cl_light: var(--color_white);
    --cl_gray_light: var(--color_gray_40);
    /* UEX terms: */
    --color_btn_bg: #32aa32;
    --color_btn_bg_border: #32aa32;
    --color_btn_hover: #32cd32;
    --color_btn_hover_border: #32cd32;
    --color_btn_hover_50: #32cd3280;
    --color_btn_text: #FFFFFF;
    --cl_background: var(--cl_light);
    --cl_text_shadow: var(--cl_gray_light);
    --cl_button_text_shadow: var(--cl_gray_light);
    --cl_button_text_shadow_hover: var(--color_gray_80);
    --cl_gradient_darker: var(--color_white_d0);
    --cl_gradient_lighter: #ffffff;
    --cl_box_shadow: var(--color_gray_80);
    --cl_overlay: #ffffffd0;
    --cl_text_h1: var(--color_black_c0);
    --cl_text_h2: var(--color_black_c0);
    --cl_text_h3: var(--color_black_c0);
    --fnt_html: var(--font_html_main);
    --fnt_menu: var(--font_titi);
    --fnt_info: var(--font_titi);
    --shadow_btn_text: 1px 1px 0px var(--cl_button_text_shadow);
    --shadow_btn_text_hover: 1px 0px 0px var(--cl_button_text_shadow_hover);
    --cl_btn_text_hover: green;

    --cl_link_text_hover: #005000;
    /*values:*/
    --speed_transition: 0.12s;
}

/* BASICS: */

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    font-family: var(--fnt_html);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0
}

p.center {
    text-align: center;
}

div.center {
    text-align: center;
}

a.button {
    font-family: var(--fnt_menu);
    transition: all 0.1s;
    font-size: 20pt;
    border-radius: 8px;
    text-align: center;
    padding: 12px 16px;
    padding-bottom: 8px;
}

a.button:link, a.button:visited {
    background-color: var(--color_btn_bg);
    color: var(--color_btn_text);
    border: 2px solid var(--color_btn_bg_border);
    text-align: center;
    text-decoration: none;
    text-shadow: var(--shadow_btn_text);
    display: inline-block;
}

a.button:hover {
    background-color: var(--color_btn_hover);
    border-color: var(--color_btn_hover_border);
    text-shadow: var(--shadow_btn_text_hover);
    /*color: var(--cl_btn_text_hover);*/
}

a.button:active {
    /*background-color: white;*/
    border-color: white;
    text-shadow: 0px 0px 0px var(--cl_button_text_shadow_hover);
    /*color: var(--cl_btn_text_hover);*/
}

a {
    transition: all var(--speed_transition);
}

a:link, a:visited {
    color: #1010ff;
    text-decoration: none;
}

a:hover {
    color: var(--cl_link_text_hover);
    text-decoration: underline;
}

a:active {
    color: greenyellow;
    text-shadow: 0px 0px 4px var(--cl_text_shadow);
    text-decoration: underline;
}

a.separated {
    padding-left: 8px;
    padding-right: 8px;
}


h1 {
    font-family: var(--fnt_menu);
    font-size: 20pt;
    color: var(--cl_text_h1);
    position: relative;
    text-align: center;
    left: 10%;
    width: 80%;
    padding-top: 12px;
}

h2 {
    font-family: var(--fnt_menu);
    font-size: 32pt;
    font-weight: 800;
    color: var(--cl_text_h2);
    position: relative;
    text-align: center;
    left: 10%;
    width: 80%;
}

h3 {
    font-family: var(--fnt_menu);
    font-size: 24pt;
    font-weight: 600;
    color: var(--cl_text_h3);
    text-align: center;
    position: relative;
    left: 10%;
    width: 80%;
}

h4 {
    font-family: var(--fnt_menu);
    font-size: 20pt;
    font-weight: 600;
    color: var(--cl_text_h3);
    text-align: center;
    position: relative;
    left: 10%;
    width: 80%;
}

a {
    font-family: var(--fnt_menu);
}

p {
    font-family: var(--fnt_info);
    font-size: 16pt;
    color: #000033;
    position: relative;
    left: 10%;
    width: 80%;
}

/* ELEMENTS: */
/* HEADER: */
.headerBG {
    /*position: fixed;*/
    top: 0;
    left: 0%;
    width: 100%;
    height: 50px;
    align: "center";
    /* 	width: 70%; */
    /*box-shadow: 0px 2px 2px var(--cl_box_shadow);*/
    /* 	margin: 2px; */
    /*border-radius: 0px 0px 8px 8px;*/
    /*background: var(--cl_);*/
    /* 		url(/pix/web_graphics/free_website_graphics/background_patterns/101Emboss8.gif) */
    /* 		repeat; */
    /* 	border-collapse: collapse; */
    background: -moz-linear-gradient(top, var(--cl_gradient_lighter), var(--cl_gradient_darker));
    background: -webkit-linear-gradient(top, var(--cl_gradient_lighter), var(--cl_gradient_darker));
    background: -o-linear-gradient(top, var(--cl_gradient_lighter), var(--cl_gradient_darker));
    background: linear-gradient(var(--cl_gradient_lighter), var(--cl_gradient_darker));
    /* versions of IE use these */
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
    StartColorStr=var(--cl_gradient_lighter), EndColorStr=var(--cl_gradient_darker));
    width: 100%;
}

.footerBG {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 20px;
    font-size: 70%;
    /* box-shadow: 0px -4px 4px var(--cl_box_shadow); */
    /* 	margin: 2px; */
    border-radius: 8px 8px 0px 0px;

    background: var(--cl_overlay);
    /* 		url(/pix/web_graphics/free_website_graphics/background_patterns/101Emboss8.gif) */
    /* 		repeat; */
    /* 	border-collapse: collapse; */
    /*
    background: -moz-linear-gradient(top, var(--cl_gradient_darker), var(--cl_gradient_lighter));
    background: -webkit-linear-gradient(top, var(--cl_gradient_darker), var(--cl_gradient_lighter));
    background: -o-linear-gradient(top, var(--cl_gradient_darker), var(--cl_gradient_lighter));
    background: linear-gradient(var(--cl_gradient_darker), var(--cl_gradient_lighter));
    */
    /* versions of IE use these */
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
    StartColorStr=var(--cl_gradient_darker), EndColorStr=var(--cl_gradient_lighter));
}

.gradient {
    background: -moz-linear-gradient(top, var(--cl_gradient_lighter), #eee8);
    background: -webkit-linear-gradient(top, var(--cl_gradient_lighter), #eee8);
    background: -o-linear-gradient(top, var(--cl_gradient_lighter), #eee8);
    background: linear-gradient(top, var(--cl_gradient_lighter), #eee8);
    /* versions of IE use these */
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
    StartColorStr=var(--cl_gradient_lighter), EndColorStr=var(--cl_gradient_darker));

}

.headerBG td, .headerBG th, .footerBG td, footerBG th {
    /* 	border: 2px solid white; */
    /*font-size: 80%;*/
    font-family: var(--fnt_menu);
    font-size: 14px; /*page footer*/
    padding-right: 10px;
    padding-left: 10px;
    word-spacing: 2px;
    /* 	text-decoration-color: red; */
    /* 	color: yellow; */
}