/* Body
-------------------------------------------------------------- */

body {
font-size: 36pt;
font-family: Arial, Helvetica, sans-serif;
color: #000;
margin: 0;
padding: 0;

background-attachment: fixed;


}

.mask {
  height: 1200px;
  -webkit-mask-size: 100%;
  mask-size: 100%;
  mask-position: right;
  -webkit-mask-position: right;
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, transparent 100%);
}

/* Text elements
-------------------------------------------------------------- */

a {
text-decoration: none;
font-size: 36pt;
}

a:link a: visited {
color: #005a8c;/*#e87e17*/
text-decoration: none;
}

a:hover {
color:#cc6600;
}

td {
	font-size: 36pt;
}

/* Headings
-------------------------------------------------------------- */

h1 { font-size: 54pt; }
h2 { font-size: 48pt; }
h3 { font-size: 42pt; }
h4 { font-size: 36pt; }
h5 { font-size: 30pt; }
h6 { font-size: 24pt; }

/*------------------------------------------------*/

/*	Menu animation	*/

/* This affects top (row) menu entries */

.topmenu {
    list-style: none;
    padding: 0;
    margin: 0;
    top: 0px;
    width: 956px;
    height: 150px;
    background: #404040;
    position: absolute;
    border-style: solid; border-color: #404040; border-radius: 20px;
    z-index:100;
}​

.topmenu ul {
    height:24px;
    z-index:100;
    position: absolute;
    padding: 2px 4px;
    text-align: left;
    background: #404040;
}

/*	Setting z-index: 100 put the dropdown menu under rows below */

.topmenu li {
    font: bold 36pt sans-serif;
    float: left;
    padding: 2px 0px;
    position: relative;
    width: 160px;
    color: #ffffff;
    background: #404040;
    text-align: left;
    border-style: solid; border-color: #404040; border-radius: 20px;
}

.topmenu a:hover {
    z-index:100;
    background: #707070;
    transition: all 1s ease;	/* this makes the transition to "hover" of the main menu items smooth */
}

.topmenu li:hover {
    z-index:100;
    background: #404040;
    transition: all 1s ease;	/* this makes the transition to "hover" of the main menu items smooth */
}

/*	This displays the first child (dropdown1) menu, and smooths the associated display of the first (dropdown1) second (dropdown2) menus */

.topmenu li > ul {
	top: 24px;
	display: inline;
	opacity: 1;
    visibility: hidden;
    background: #404040;		/* this is the background of the dropdown menu items when the cursor is over */
    position: absolute;
    z-index: 120;
}

.topmenu li:hover > ul {
	top: 64px;
	opacity: 1;
    visibility: visible;
    background: #404040;		/* this is the background of the dropdown menu items when the cursor is over */
	transition: all 0.5s ease;	/* This smooths display of the first (dropdown1) menu */
    position: absolute;
}

.topmenu a {
    color: #ffffff;
    padding: 2px 10px;
    text-align: left;
    text-decoration: none;
    border-style: solid; border-color: #404040; border-radius: 20px;
}

/*	This affects the immediate (column) dropdown menu */

.dropdown1 {
    list-style: none;
    z-index:120;
	position: absolute;	/* absolute means relative to ancestor. Isn't that a bit silly? */
    left: -6px;			/* to align with top menu */
    width: 330px;
    padding: 0;
    margin: 0;
    display: none;
    border-style: outset; border-width: 8px;border-color: #404040; border-radius: 20px;
}

.dropdown1l {
    list-style: none;
    z-index:120;
	position: absolute;	/* absolute means relative to ancestor. Isn't that a bit silly? */
    right: -32px;
    width: 400px;
    padding: 0;
    margin: 0;
    display: none;
    border-style: outset; border-width: 8px;border-color: #404040; border-radius: 20px;
	padding-left:30px;
	text-indent:-30px;
}

.dropdown1 li {
    background: #404040;
    width: 310px;
    z-index:120;
}

.dropdown1l li {
    background: #404040;
    width: 310px;
    z-index:120;
}

.dropdown1 li ul {
    background: none;
	float: left;
    text-align: left;
    opacity: 0;
    position: absolute;
    visibility: hidden;
    background: #404040;
    z-index:120;
}

.dropdown1l li ul {
    background: none;
	float: left;
    text-align: left;
    opacity: 0;
    position: absolute;
    visibility: hidden;
    background: #404040;
    z-index:120;
}

.dropdown1 li > ul {
	top: 0px;
	left: 220px;
	display: inline;
	opacity: 0;
    visibility: hidden;
    z-index:120;
}

.dropdown1l li > ul {
	top: 0px;
	left: -240px;
	display: inline;
	opacity: 0;
    visibility: hidden;
    z-index:120;
}

.dropdown1 li:hover > ul {
	opacity: 1;
	top: 0px;
	left: 310px;
    visibility: visible;
    background: #404040;
	transition: all 0.5s ease;	/* This smooths display of the second (dropdown2) menu */
    z-index:120;
    border-style: outset; border-width: 8px;border-color: #404040; border-radius: 20px;
}

.dropdown1l li:hover > ul {
	opacity: 1;
	top: 0px;
	left: -490px;
    border-style: solid; border-color: #404040; border-radius: 20px;
    visibility: visible;
    background: #404040;
	transition: all 0.5s ease;	/* This smooths display of the first (dropdown1) menu */
    z-index:120;
    border-style: outset; border-width: 8px;border-color: #404040; border-radius: 20px;
}

.dropdown1 li a:hover {
    background: #707070;
}

.dropdown1l li a:hover {
    background: #707070;
}

.dropdown2 {
    list-style: none;
    z-index:300;
	position: absolute;
	width: 410px;
	top: 0px;
	left: 230px;
    padding: 0;
    margin: 0;
    display: block;
    background: #404040;
	padding-left:30px;
	text-indent:-30px;
    border-style: outset; border-width: 8px;border-color: #404040; border-radius: 20px;
}

.dropdown2 li {
    z-index:300;
    background: #404040;
	width:400px;
}

.dropdown2 a:hover li:hover {
    background: #707070;
}

/*	This is the left-going variant */

.dropdown2l {
    list-style: none;
    z-index:300;
	position: absolute;
	width: 460px;
	top: 0px;
	left: -330px;
    padding: 0;
    margin: 0;
    display: block;
    background: #404040;
    border-style: outset; border-width: 8px;border-color: #404040; border-radius: 20px;
}

.dropdown2l li {
    z-index:300;
    background: #404040;
	width: 420px;
	padding-left:30px;
	text-indent:-30px;
}

.dropdown2l a:hover li:hover {
    background: #707070;
}

#menu_content {
margin-left: auto;
margin-right: auto;
width: 960px;
}

#content {
position: relative;
top: 154px;
margin-left: auto;
margin-right: auto;
width: 934px;
padding: 10px;
background-color: white;
border-style: solid; border-color: #404040; border-radius: 20px;
}

/* Submit button */

input[type=submit] {
    background:#ffd800; 
    border:0 none;
    cursor:pointer;
    background-image: linear-gradient(90deg, #a0d0ff, #3070ff);
    border-radius: 10px;
    border: 2px solid #4a5032;
    box-shadow: #a00020 0px 0px 16px;
    color: #000000;
    display: inline-block;
    font-size: 60pt;
    margin: auto;
    padding: 5px 10px;
    text-decoration: none;
    text-shadow: #000000 5px 5px 15px;
    transition: all 0.5s ease;
}

/* button */

input[type=button] {
    background:#ffd800; 
    border:0 none;
    cursor:pointer;
    background-image: linear-gradient(90deg, #a0d0ff, #3070ff);
    border-radius: 10px;
    border: 2px solid #4a5032;
    box-shadow: #a00020 0px 0px 16px;
    color: #000000;
    display: inline-block;
    font-size: 60pt;
    margin: auto;
    padding: 5px 10px;
    text-decoration: none;
    text-shadow: #000000 5px 5px 15px;
    transition: all 0.5s ease;
}


.table {display:block;}
.row { display:block;}
.cell {display:inline-block;}