/* main menu styles */
#menu {
    display:inline-block;
    width:100%;
    margin:0px auto;
    padding:0;
  z-index: 3000;
    background:#154eb7;            /* background colour in menu bar */

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#menu li {
    margin:10px;
    float:left;
  z-index: 3000;
    position:relative;
    list-style:none;
}

#menu a {
    font-weight:bold;
    color:#e7e5e5;      /* text colour in menu bar */
    text-decoration:none;
    display:block;
    padding:8px 20px;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-shadow:0 2px 2px rgba(0,0,0, .7);
}

/* selected menu element */
#menu .current a, #menu li:hover > a {
    background:#ffffff;         /* colour of selected item in main menu */
    color:#000;
    border-top:0px solid #f8f8f8;

    box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
    text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}

/* sublevels */
#menu ul li.over a, #menu li.over li a {
    background:none;
    border:none;
    color:#000;         /* Text colour in submenu */
}
#menu ul li button { /* yyyyy */
  display:block;
  background:none;
    border:none;
    color:#000;         /* Text colour in submenu */
  font-family:"Times New Roman", Georgia, Serif;
  font-size: 19px;
  padding-left: 18px;
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: left;
}
/* zzzzzzzzzzzzzzzzzzzzzz */
#menu ul li:hover button {
    display:block;
  width:100%;
    background:none;
    border:none;
    color:#000;         /* Text colour in submenu */
  font-family:"Times New Roman", Georgia, Serif;
  font-size: 19px;
  padding-left: 18px;
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: left;
}
#menu ul li a:hover {
    background:#154eb7; /* colour of selected item in submenu */
    color:#fff;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}

#menu ul li button:hover {
    background:#154eb7; /* colour of selected item in subsubmenu */
    color:#fff;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}

#menu ul li.greyedout a:hover {
  background:#154eb7; /* colour of selected item in submenu */
  color:#fff;
  -webkit-opacity: 0.25;
  -moz-opacity: 0.25;
  opacity: 0.25;
  border-radius:10px; /*some css3*/
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}

#menu ul li:first-child > a {
    -moz-border-radius-topleft:10px; /*some css3*/
    -moz-border-radius-topright:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
}
#menu ul li:last-child > a {
    -moz-border-radius-bottomleft:10px; /*some css3*/
    -moz-border-radius-bottomright:10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
}

/* drop down */
#menu li.over > ul {
    opacity:1;
    visibility:visible;
}
#menu ul {             /* Submenu */
    opacity:0;
    visibility:hidden;
    padding:0;
    width:250px;
    position:absolute;
    border:1px solid #6495ed;                     /* Border of submenu */
    background: #ffffff; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#ffffff, #6495ed); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#ffffff, #6495ed); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#ffffff, #6495ed); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#ffffff, #6495ed); /* Standard syntax (must be last) */
  
    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);

    -moz-transition:opacity .25s linear, visibility .1s linear .1s;
    -webkit-transition:opacity .25s linear, visibility .1s linear .1s;
    -o-transition:opacity .25s linear, visibility .1s linear .1s;
    transition:opacity .25s linear, visibility .1s linear .1s;
}
#menu ul li {
    float:none;
    margin:0;
}
#menu ul a {
    font-weight:normal;
    text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
#menu ul.leftsubmenu ul {
    left:250px;
    top:0px;
}
#menu ul.rightsubmenu ul {
    right:250px;
    top:0px;
}

#menu li.over ul ul, #menu li.over ul ul ul
{
  display: none;
}

#menu li.over ul, #menu ul li.over ul, #menu ul ul li.over ul
{
  display: block;
}

#maincontainer {
  display: flex;
  justify-content: space-between;
}

#nav {
    line-height:30px;
    background-color:#dcdcdc;
    height:540px;
    width:220px;
    float:left;
    padding:0px;
    margin-right: 10px;
    margin-left: 1px;
    margin-top: -25px;
}

#nav li {
    list-style-type: none;
    margin-left: -2.5em;
}

#nav a {
    text-decoration: none;
    color: black;
}

#nav a:hover {
    color: #00cc00;
    margin-right: 0px;
    display:block;
}

#main {
  padding:10px;
  margin-left: 20px;
  margin-right: 20px;
  font-family:verdana;
  font-size: 18px;
}

#main h1 {
  text-align: center;
}

#main h2 {
  text-align: center;
}

#main h3 {
  text-align: center;
}

#print h3 {
  text-align: center;
}

.centerbutton {
    text-align: center;
}

input#submit {
background-color:#cc7a66;
border-radius:5px;
border:none;
padding:10px 25px;
color:#FFF;
text-shadow:1px 1px 1px #949494;
margin-left:120px
}

input#submit:hover{
background-color:#FF9980
}

#topcontainer {
  display: flex;
  justify-content: space-between;
}

#topleft {
  width: 600px;
  height: 120px;
  margin-top: 30px;
  margin-bottom: 30px;
}

#topcenterright {
  width: 400px;
}

#topcenter {
  width: 200px;
}

#topright {
  width: 200px;
  text-align: center;
  margin-top: 25px;
  padding-right: 28px;
  padding-left: 28px;
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.buttonlink {
  background-color: #cde5ef;
  background: linear-gradient(#ecf5f9, #cde5ef);
  color: #527881;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 5px;
  padding-bottom: 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  height: 18px;
  font-size: 12px;
  font-weight: bold;
  border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
}

.buttonlink:hover, .buttonlink:active {
  background-color: #84e5ef;
}

.login {
  position: relative;
  margin: 0 auto;
  padding: 5px 20px 5px;
  width: 150px;
}

.login p.loginsubmit {
  text-align: center;
}
 
.login-error {
  margin: 0px 0;
  font-size: 15px;
  color: red;
  text-align: center;
}
 
.login-help {
  margin: 0px 0;
  font-size: 14px;
  color: white;
  text-align: center;
  text-shadow: 0 1px #2a85a1;
}
 
.login-help a {
  color: #cce7fa;
  text-decoration: none;
}
 
.login-help a:hover {
  text-decoration: underline;
}
 
:-moz-placeholder {
  color: #c9c9c9 !important;
  font-size: 13px;
}
 
::-webkit-input-placeholder {
  color: #ccc;
  font-size: 13px;
}

.login:before {
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  z-index: -1;
  background: #dcdcdc;
  border-radius: 0px;
}
 
.login p {
  margin: 10px 0 0;
}
 
.login p:first-child {
  margin-top: 0;
}
 
.login input[type=text], .login input[type=password] {
  width: 118px;
}
 
.login p.remember_me {
  float: left;
  line-height: 31px;
}
 
.login p.remember_me label {
  font-size: 12px;
  color: #777;
  cursor: pointer;
}
 
.login p.remember_me input {
  position: relative;
  bottom: 1px;
  margin-right: 4px;
  vertical-align: middle;
}

.newlogin {
  position: relative;
  margin: 0 auto;
  padding: 5px 20px 5px;
  width: 350px;
}

.newlogin p.newloginsubmit {
  text-align: center;
}
 
.newlogin-error {
  margin: 0px 0;
  font-size: 15px;
  color: red;
  text-align: center;
}
 
.newlogin-help {
  margin: 0px 0;
  font-size: 14px;
  color: white;
  text-align: center;
  text-shadow: 0 1px #2a85a1;
}
 
.newlogin-help a {
  color: #cce7fa;
  text-decoration: none;
}
 
.newlogin-help a:hover {
  text-decoration: underline;
}
 
:-moz-placeholder {
  color: #c9c9c9 !important;
  font-size: 13px;
}
 
::-webkit-input-placeholder {
  color: #ccc;
  font-size: 13px;
}

.newlogin:before {
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  z-index: -1;
  background: #dcdcdc;
  border-radius: 0px;
}
 
.newlogin p {
  margin: 10px 0 0;
}
 
.newlogin p:first-child {
  margin-top: 0;
}
 
.newlogin input[type=text], .newlogin input[type=password] {
  width: 318px;
}
 
.newlogin p.remember_me {
  float: left;
  line-height: 31px;
}
 
.newlogin p.remember_me label {
  font-size: 12px;
  color: #777;
  cursor: pointer;
}
 
.newlogin p.remember_me input {
  position: relative;
  bottom: 1px;
  margin-right: 4px;
  vertical-align: middle;
}

input {
  font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif;
  font-size: 14px;
}
 
input[type=text], input[type=password] {
  margin: 5px;
  padding: 0 10px;
  width: 200px;
  height: 24px;
  color: #404040;
  background: white;
  border: 1px solid;
  border-color: #c4c4c4 #d1d1d1 #d4d4d4;
  border-radius: 2px;
  outline: 5px solid #eff4f7;
  -moz-outline-radius: 3px;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}
 
input[type=text]:focus, input[type=password]:focus {
  border-color: #7dc9e2;
  outline-color: #dceefc;
  outline-offset: 0;
}
 
input[type=submit] {
  padding: 0 12px;
  height: 20px;
  font-size: 12px;
  font-weight: bold;
  color: #527881;
  text-shadow: 0 1px #e3f1f1;
  background: #cde5ef;
  border: 1px solid;
  border-color: #b4ccce #b3c0c8 #9eb9c2;
  border-radius: 16px;
  outline: 0;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  background-image: -webkit-linear-gradient(top, #edf5f8, #cde5ef);
  background-image: -moz-linear-gradient(top, #edf5f8, #cde5ef);
  background-image: -o-linear-gradient(top, #edf5f8, #cde5ef);
  background-image: linear-gradient(to bottom, #edf5f8, #cde5ef);
  -webkit-box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
}

input[type=submit]:active {
  background: #cde5ef;
  border-color: #9eb9c2 #b3c0c8 #b4ccce;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
}

input[type=checkbox],
input[type=radio] {
border: 1px solid #c0c0c0;
margin: 0 0.1em 0 0;
padding: 0;
font-size: 16px;
line-height: 1em;
width: 1.25em;
height: 1.25em;
background: #fff;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ededed), to(#fbfbfb));
 
-webkit-appearance: none;
-webkit-box-shadow: 1px 1px 1px #fff;
-webkit-border-radius: 0.25em;
vertical-align: text-top;
display: inline-block;
 
}
 
input[type=radio] {
-webkit-border-radius: 2em; /* Make radios round */
}
 
input[type=checkbox]:checked::after {
content:'\2714';
display:block;
text-align: center;
font-size: 16px;
height: 16px;
line-height: 18px;
}
 
input[type=radio]:checked::after {
content:"b";
display:block;
height: 16px;
line-height: 15px;
font-size: 20px;
text-align: center;
}
 
select {
border: 1px solid #D0D0D0;
background: url(http://www.quilor.com/i/select.png) no-repeat right center, -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fbfbfb), to(#ededed));
background: -moz-linear-gradient(19% 75% 90deg,#ededed, #fbfbfb);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
color: #444;
}

#navcontainer
{
background: #f0e7d7;
background: #ffffff;
margin: 0 auto;
padding: 1em 0 0 0;
font-family: georgia, serif;
text-transform: lowercase;
}

/* to stretch the container div to contain floated list */
#navcontainer:after
{
content: ".";
display: block;
line-height: 1px;
font-size: 1px;
clear: both;
}

ul#navlist
{
list-style: none;
padding: 0;
margin: 0 auto;
width: 50%;
font-size: 0.8em;
}

ul#navlist li
{
display: block;
float: left;
width: 100%;
margin: 0;
padding: 0;
}

ul#navlist li a
{
display: block;
width: 100%;
padding: 0.5em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
color: black;
text-decoration: none;
background: #f7f2ea;
background: #dcdcdc;
}

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a
{
background: #f0e7d7;
color: #800000;
color: #00cc00;
}

ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: #800000;
color: #00cc00;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}

.faqheader {
  border-bottom:1px solid;
  border-top:1px solid;
  padding-top:20px;
}

.center {
  text-align: center;
}

#nav button {
  display:block;
  width:100%;
  border: 0px;
  padding: 5px;
  padding-left: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: left;
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  background: #dcdcdc;
  color: #555555;
}

#nav button:hover {
  background: #999999;
}

#nav #btn-selected {
  background: #009933;
}

#computation {
  font-family:verdana;
  font-size: 18px;
}

#computation h1 {
  text-align: center;
}

input.varinput {
  width: 130px;
}

input.oneinput {
  width: 400px;
}

input.twoinput {
  width: 200px;
}

input.threeinput {
  width: 130px;
}

input.fourinput {
  width: 95px;
}

input.eightinput {
  width: 15px;
}

#smalltable table, th, td {
  margin-left: auto;
  margin-right: auto;
  border: 1px solid black;
  border-collapse:collapse;
  padding:10px;
}

.truthtable {
  border-collapse:collapse;
  margin-top:15px;
}

.truthtable {
  text-align: center;
}

.invisibletable td {
  border: none;
  width: 30px;
  text-align: center;
}

alpha {
  text-align:center;
  margin:4px 0 0
}

.alphaLtr {
  background-color:rgba(235,245,255,.6);
  text-decoration:none;
  font:16px Arial;
  color:#69e;
  display:inline-block;
  padding:5px 8px;
  border:1px solid rgba(0,0,255,.1)
}

.alphaLtr:hover {
  background-color:#fff;
  color:#47d
}

#search {
  padding-top: 40px;
  padding-right: 200px;
}  

#main #lefttext {
  text-align: left;
  color: #ff0000;
}

.autocomplete {
  position: relative;
  display: inline-block;
}

.autocomplete input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}

.autocomplet input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}

.autocomple input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
  cursor: pointer;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}

#dict {
  width: 500px;
}