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

body {
background: #fff;
font-size: 12pt;
font-family: Arial, Helvetica, sans-serif;
color: #000;
margin: 0;
padding: 0;
line-height: 1.5em;

background-attachment: fixed;
background-image: url(images/bg.jpg);
  -webkit-background-size: 100% 150%;
  -moz-background-size: 100% 150%;
  -ms-background-size: 100% 150%;
  -o-background-size: 100% 150%;
  background-size: 100% 150%;
}

.mask {
  height: 960px;
  -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;
}

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

a:hover {
color:#cc6600;
}

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

h1 { font-size: 18pt; }
h2 { font-size: 16pt; }
h3 { font-size: 14pt; }
h4 { font-size: 13pt; }
h5 { font-size: 12pt; }
h6 { font-size: 11pt; }

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

/*	Menu animation	*/

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

.topmenu {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 934px;
    height: 32px;
    background: #404040;
    padding: 0px 10px 4px 10px;
    border-style: solid; border-color: #404040; border-radius: 12px;
    z-index: 100;
}​

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

.topmenu li {
    font: bold 12pt sans-serif;
    float: left;
    z-index:200;
    padding: 2px 3px 2px 3px;
    position: relative;
    min-width: 104px;
    color: #ffffff;
    background: #404040;
    text-align: left;
    border-style: solid; border-color: #404040; border-radius: 12px;
    font-size: 16pt;
}

.topmenu li hover {
    z-index:100;
    background: #707070;
    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: 6px;
    z-index:90;
	display: inline;
	opacity: 1;
    visibility: hidden;
}

.topmenu li:hover > ul {
	top: 30px;
	opacity: 1;
    visibility: visible;
    background: #404040;
	transition: top 0.5s ease;	/* This smooths display of the first (dropdown1) menu */
}

.topmenu a {
    color: #ffffff;
    display: block;
    padding: 2px 6px;
    text-align: left;
    text-decoration: none;
    border-radius: 6px;
}

.topmenu a:hover {
    background: #707070;
}

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

/* "l" items are left-going on mobiles, must be identical on deskyops */

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

.dropdown1l {
    list-style: none;
    z-index:90;
	position: absolute;	/* absolute means relative to ancestor. Isn't that a bit silly? */
    left: 0px;			/* to align with top menu */
    padding: 0;
    margin: 0;
    width: 180px;
    min-width: 180px;
    display: none;
    border-style: outset; border-width: 4px;border-color: #404040; border-radius: 12px;
}

/*******************************/

.dropdown1 li {
    background: #404040;
    min-width: 140px;
}

.dropdown1l li {
    background: #404040;
    min-width: 140px;
}

/*******************************/

.dropdown1 li ul {
    background: none;
	float: left;
    text-align: left;
    opacity: 0;
    position: absolute;
    visibility: hidden;
    z-index: 90;
    background: #404040;
    border-style: outset; border-width: 8px;border-color: #404040; border-radius: 20px;
}


.dropdown1l li ul {
    background: none;
	float: left;
    text-align: left;
    opacity: 0;
    position: absolute;
    visibility: hidden;
    z-index: 90;
    background: #404040;
    border-style: outset; border-width: 8px;border-color: #404040; border-radius: 20px;
}

/*******************************/

.dropdown1 li > ul {
	top: 0px;
	left: 20px;
	display: inline;
	opacity: 0;
    visibility: hidden;
    border-style: outset; border-width: 4px;border-color: #404040; border-radius: 12px;
}

.dropdown1l li > ul {
	top: 0px;
	left: 20px;
	display: inline;
	opacity: 0;
    visibility: hidden;
    border-style: outset; border-width: 4px;border-color: #404040; border-radius: 12px;
}

/*******************************/

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

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

/*******************************/

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

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

/*******************************/

.dropdown1 li:hover > ul {
	opacity: 1;
    visibility: visible;
    background: #404040;
}

.dropdown1l li:hover > ul {
	opacity: 1;
    visibility: visible;
    background: #404040;
}

/*******************************/


/* These three affect properties of the first level of the dropdown menu */

.dropdown2 {
    list-style: none;
    z-index:300;
	position: absolute;
	min-width: 130px;
	top: 0px;
    padding: 0;
    margin: 0;
    display: block;
    background: #404040;
	padding-left:12px;
	text-indent:-12px;
    border-style: solid; border-color: #404040; border-radius: 12px;
}

/*	This is left-going on mobiles, identical on desktops */

.dropdown2l {
    list-style: none;
    z-index:300;
	position: absolute;
	min-width: 130px;
	top: 0px;
    padding: 0;
    margin: 0;
    display: block;
    background: #404040;
	padding-left:12px;
	text-indent:-12px;
    border-style: solid; border-color: #404040; border-radius: 12px;
}


.dropdown2 li {
    background: #404040;
	width: 150px;
}

.dropdown2l li {
    background: #404040;
	width: 150px;
}

.dropdown2 ul {
    background: #404040;
	width: 150px;
}

.dropdown2l ul {
    background: #404040;
	width: 150px;
}

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

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

.dropdown2 li:hover {
    background: #404040;
}

.dropdown2l li:hover {
    background: #404040;
}

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

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

/* 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 #404040;
    box-shadow: #a00020 0px 0px 16px;
    color: #000000;
    display: inline-block;
    font-size: 27pt;
    margin: auto;
    padding: 5px 10px;
    text-decoration: none;
    text-shadow: #000000 5px 5px 15px;
    transition: all 0.5s ease;
}

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

/*	Tabs	*/

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

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