@font-face { font-family: Helvetica; src: url('fonts/helvetica_regular.ttf'); } 
 @font-face { font-family: Helvetica; font-weight: bold; src: url('fonts/helvetica_bold.ttf');}
 @font-face { font-family: Helvetica; font-weight: medium; src: url('fonts/helvetica_medium.ttf');}

body
{
background-color: #FFFFFF;
color: #222222;
font-family: Helvetica;
margin: auto;
}

header
{
background-color: #AABBFF;
margin: auto;
padding: 10px 10px 32px 0px;
position: sticky;
top: 0;
width: 100%;
height: 50px;
color: #FFFFFF;
}

footer
{
background-color: #222222;
color: #FFFFFF;
margin: auto;
padding: 10px;
bottom: 0;
width: 100%;
text-align: center;
height: 150px;
position: sticky;
}

div
{
background-color: #DDDDDD;
margin: 25px;
padding: 15px 25px 15px 25px;
height: 70px;
transition: width 100ms, height 100ms, margin 100ms;
transition-timing-function: ease;
}

div:hover
{
background-color: #BBBBBB;
color: #444444;
margin: 30px 35px 30px 35px;
position: center;
height: 60px;
transition-timing-function: ease;
}

select
{
margin: 15px;
}



/* ---------- TEXT ---------- */

h1, /* h2, h3, h4, */ h5, h6
{
color: #222222;
font-family: Helvetica;
font-size: 32px;
text-align: left;
margin-left: 15px;
}


h2
{
color: #222222;
font-family: Helvetica;
font-size: 26px;
text-align: left;
margin-left: 15px;
}



h3
{
color: #222222;
font-family: Helvetica;
font-size: 20px;
text-align: left;
margin-left: 15px;
}



h4
{
color: #222222;
font-family: Helvetica;
font-size: 16px;
text-align: left;
margin-left: 15px;
}


p
{
color: #222222;
font-family: Helvetica;
font-size: 18px;
margin: 15px;
width: auto;
}

text
{
font-size: 32px;
}

a:link
{
color: #112255;
text-decoration: none;
}

a:visited
{
color: #00000000;
}

a:active
{
text-decoration: none;
}

a:hover
{
text-decoration: none;
color: #2244AA;
}

/*
a:link span
{
color: #000000;
text-decoration: underline;
}

a:visited span
{
color: #000000;
}

a:active span
{
text-decoration: underline;
}

a:hover span
{
text-decoration: underline;
color: #FFFFFF;
} 
*/

table
{
width: 100%;
}

tr
{

}

td
{
padding: 5px;
text-align: left;
}

img
{
height: 50px;
}


/* ---------- INPUT ---------- */	

input[type=text]
	{
		background-color: #FFFFFF;
		color: #222222;
		width: 95%;
		height: 50px;
		font-size: 35px;
		border-radius: 7px;
		margin-left: 15px;

	}
	
textarea
	{
		background-color: #FFFFFF;
		color: #222222;
		max-width: 1000px;
		margin: auto;
		height: 500px;
		font-size: 35px;
		border-radius: 7px;
	}
	
input[type=submit]
	{
		background-color: #AABBFF;
		color: #FFFFFF;
		padding: 16px 32px;
		margin: 15px 25px;
		font-size: 20px;
		font-weight: bold;
		border-radius: 7px;
	}
	
input[type=reset]
	{
		background-color: #AABBFF;
		color: #FFFFFF;
		padding: 16px 32px;
		margin: 15px 25px;
		font-size: 20px;
		font-weight: bold;
		border-radius: 7px;
	}
	
button
	{
		background-color: #AABBFF;
		color: #FFFFFF;
		padding: 16px 32px;
		margin: 15px 25px;
		font-size: 20px;
		font-weight: bold;
		border-radius: 7px;

	}
	

	
	
	
	
/* ---------- HEADER ---------- */	

#headerh
{
color: #FFFFFF;
}

#headerh a:link
{
color: #FFFFFF;
text-decoration: none;
}

#headerh a:visited
{
color: #FFFFFF;
text-decoration: none;
}

#headerh a:active
{
color: #FFFFFF;
text-decoration: none;
}

#headerh a:hover
{
color: #DDDDDD;
text-decoration: none;
}


/* ---------- FOOTER ---------- */

#footerh
{
text-align: center;
}

#footerh a:link
{
color: #FFFFFF;
text-decoration: none;
}

#footerh a:visited
{
color: #FFFFFF;
text-decoration: none;
}

#footerh a:active
{
color: #FFFFFF;
text-decoration: none;
}

#footerh a:hover
{
color: #BBBBBB;
text-decoration: none;
}



/* ---------- OTHER ---------- */

#tdtext
{
font-size: 28px;
}

#tdtext a:link
{
color: #000;
}

/*#tdtext a:hover
{
text-decoration: none;
}*/

#tdtext td
{
color: #000;
}

#dropdown
{
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
}

#type div
{
background-color: #DDDDDD;
margin: 25px;
padding: 15px 25px 15px 25px;
height: 70px;
transition: width 100ms, height 100ms, margin 100ms;
transition-timing-function: ease;}

#type div:hover
{
background-color: #BBBBBB;
color: #222;
margin: 30px 35px 30px 35px;
position: center;
height: 60px;
transition-timing-function: ease;
}

#result
{
text-align: center;
font-size: 56px;
}

#exp
{
font-size: 24px;
}

#typetd
{

}

#typeimg
{

}

.docdiv div
{
transition: none;
transition-timing-function: none;
}

.docdiv div:hover
{
background-color: #DDDDDD;
margin: 25px;
padding: 15px 25px 15px 25px;
height: 70px;
color: #222222;
position: center;
transition-timing-function: none;
}
















/* Dropdown Button */
/*.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
/*.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
/*.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
/*.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
/*.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
/*.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
/*.dropdown:hover .dropbtn {background-color: #3e8e41;}*/