:root {
  --font-headline: Verdana;
  //--font-sans: system-ui, Ubuntu, Quicksand, Roboto, Arial, Helvetica, Tahoma, "Trebuchet MS", "Source Sans Pro", sans-serif;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-mono: "Ubuntu Mono","Courier New", Courier, monospace;
  --font-serif: "Source Serif Pro", Georgia, "Times New Roman", Garamond, Times, serif;
  --font-size: 1.0em;
  --box-radius: .2em;
  --main-padding: .8em;
  --line-height: 1.4em;
  --menu-line-height: 1.8em;
  --header-height: 2.8em;
  --mobile-width: 40em;
  --screen-max-width: 70em;
  --extra-light-body-color: #969fb6;
  --box-debug: 0px solid red;   /* set 0px when not needed debug */
  --box-shadow: 0 0.9px 2.2px rgba(0,0,0,0.02),
                0 2.2px 5.3px rgba(0,0,0,0.028),
                0 4.1px 10px rgba(0,0,0,0.035),
                0 7.4px 17.9px rgba(0,0,0,0.042),
                0 13.8px 33.4px rgba(0,0,0,0.05),0 33px 80px rgba(0,0,0,0.07);
  --box-shadow-small: 0 0.4px 1.1px rgba(0,0,0,0.02),
                0 1.1px 2.6px rgba(0,0,0,0.028),
                0 2.1px 5px rgba(0,0,0,0.035),
                0 3.7px 9.0px rgba(0,0,0,0.042),
                0 6.9px 16.7px rgba(0,0,0,0.05),
                0 16px 40px rgba(0,0,0,0.07);
  --box-shadow-bottom:  0.1rem 0.5rem 0.7rem -0.2rem #222;
  --box-shadow-top:  0 -0.5rem 0.7rem -0.5rem #222;
  --box-shadow-left:  -0.5rem 0 0.7rem -0.5rem #222;
  --box-shadow-right:  0.5rem 0 0.7rem -0.5rem #222;
}


BODY {  //font-family:  arial, helvetica , serif ; 
	font-family: var(--font-sans);
	font-size: var(--font-size);
	color: #1F1F1F;
	background : #5079CB url('http://awot.fi/icon/bg/awotbiz.jpg') no-repeat;
        border-radius: var(--box-radius);
	line-height: var(--line-height);
  	max-width: var(--screen-max-width);
     }

A {     
	
	//Verdana,Arial,Helvetica,sans-serif ;
	margin: 0em ;
        font-weight: normal; }
        A:link{color:#0F0F0F; }
        A:visited{color:#0F0F0F; }
	A:hover{color:#F6F6F6; background-color: none; 
		border-width: none ;
		border-style: none ; #groove ridge inset outset
	       }


.joku {
	margin-left: 0em ;
	margin-right: 0em ;
	margin-top: 0em ;
	margin-bottom: 0em ;
        border-color: #000000;
        border-top-color: #555555 ;
        border-right-color: #dddddd ;
	border-bottom-color: #dddddd ;
	border-left-color: #555555 ;
	}

H1 { font-size:2.0rem; color :#333333 ; font-style:italic ; }
H2 { font-size:1.8rem; color :#444444 ; font-style:italic ; }
H3 { font-size:1.6rem; color :#444444 ; font-style:italic ; }
H4 { font-size:1.4rem; color :#444444 ; font-style:italic ; }
H5 { font-size:1.2rem; color :#000000 ; font-style:bold ; }
P { font-size:var(--font-size); }
<!--.COL, .COLGROUP, .TABLE, .TBODY, .TD, .TR     {       
        color:  black;
        text-decoration:        none;
        border-color:   red;
	text-align: left;
	vertical-align:top ;
        border-style:   none;
        background:     #f8f8f8;
        }  
-->

.palkki { //font-family: sans-serif, arial, helvetica ; font-size: 1.2rem ;
        color: #F0F0F0; text-align:left ; vertical-align:top ;
	background-color: #aaaaaa ;
    }
.palkkiots { //font-family: sans-serif, arial, helvetica ; font-size: 1.2rem ;
        color: #0F0F0F; text-align:left ; vertical-align:top ;
	background-color: #999999 ;
    }
.ts1 { //font-family: arial, helvetica, sans-serif ; font-size: var(--font-size) ;
        color: #1F1F1F; text-align:left ; vertical-align:top ;
	background-color: #dcdcdc ;
    }
.tsfld { //font-family: arial, helvetica, sans-serif  ; font-size: var(--font-size) ;
        color: #1F1F1F; text-align:left ; vertical-align:top ;
	background-color: #f8f8f8 ;
    }
.ts2 { //font-family: arial, helvetica, sans-serif  ; font-size: var(--font-size) ;
        color: #1F1F1F; text-align:left ; vertical-align:top ;
	background-color: #f8f8f8 ;
    }
.ts3 { //font-family: arial, helvetica, sans-serif  ; font-size: var(--font-size) ;
        color: #1F1F1F; text-align:left ; vertical-align:top ;
	background-color: #cccccc ;
    }
.tsmenu { //font-family: arial, helvetica, sans-serif  ; font-size: var(--font-size) ;
        color: #1F1F1F; text-align:left ; vertical-align:top ;
	background-color: #aaaaaa ;
	}
        .tsmenu:link{color:#1F1F1F; text-decoration: underline;}
        .tsmenu:visited{color:#1F1F1F; text-decoration: underline;}
	.tsmenu:hover{color:#FFFFFF; background-color: none; 
		text-decoration: none;
		}
.tsmenu2 { //font-family: arial, helvetica, sans-serif  ; font-size: var(--font-size) ;
        color: #1F1F1F; text-align:left ; vertical-align:top ;
	background-color: #cccccc ;
	}
        .tsmenu:link{color:#1F1F1F; text-decoration: underline;}
        .tsmenu:visited{color:#1F1F1F; text-decoration: underline;}
	.tsmenu:hover{color:#FFFFFF; background-color: none; 
		text-decoration: none;
		}
.tsmenur { //font-family: arial, helvetica, sans-serif  ; font-size: var(--font-size) ;
        color: #1F1F1F; text-align:right ; vertical-align:top ;
	background-color: #aaaaaa ;
    }

.ts9 { //font-family: arial, helvetica, sans-serif  ; font-size: var(--font-size) ;
        color: #1F1F1F; text-align:left ; vertical-align:top ;
	background-color: #ffffff ;
    }