@charset "UTF-8";
/* CSS Document */
html,body { height: 100%; margin: 0px; padding: 0px; }


#canvas{
	background:url(../images/bg-1.jpg) no-repeat center top;;
	width:100%;
	height:100%;
	transition: background-image .8s ease-in-out;
   -moz-transition: background-image .8s ease-in-out;
   -webkit-transition: background-image .8s ease-in-out; 
   -o-transition: background-image .8s ease-in-out; 
   
}

p{
	font-family: Arial, Verdana;
  font-size: 14px;
  color:#ebebeb;
}

h1{
  font-family: Arial, Verdana;
  font-size: 42px;
  font-weight:bold;
  color:#ebebeb;
  line-height:0px;
}

button{
	border:none;
	background-color:#0066b3;
	font-family: Arial, Verdana;
    font-size: 14px;
    color:#ebebeb;
	padding:10px;
	padding-left:20px;
	padding-right:20px;
}

button:hover{
	background-color:#013c69;
	cursor:pointer;
}

.button2{
	border:none;
	background-color:#CCC;
	font-family: Arial, Verdana;
    font-size: 14px;
    color:#333;
	padding:10px;
	padding-left:20px;
	padding-right:20px;
}
.button2:hover{
	background-color:#ebebeb;
	cursor:pointer;
}

ol {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: circle;
}
ol li{
  position: relative;
  float: left;
  min-width:75px;
  max-width:90%;
  text-align:left;
  color:white;
  line-height:1.7em;
}


ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li {
  display: block; /* <-- not needed, it's a float */
  position: relative;
  float: right;
  border-right:thin solid #ccc;
  min-width:75px;
  text-align:center;
  color:white;
}
li ul { 
	display: none; 
}

ul li a { 
 	display: block;
 	text-decoration: none;
 	color: #ccc; /* <-- use shorthand */
 	margin-left: 1px;
 	white-space: nowrap;
 	font: 14px;
	font-family: Arial, Helvetica, sans-serif;
	outline: none;
 }

ul li a:hover { 
color: white; /* <-- use shorthand */
}

/* I changed the selector below, you don't need to class every anchor in the menu */

#menu a:hover:after {
  content: "";
  position: absolute;
  top: 15px; /* <-- change value to better position */
  left: 50%; /* centers the element's left edge */
  margin-left: -3px; /* <-- moves it back half it's own width */
  width: 0px; /* <-- don't need unit on 0 */
  height 0px; /* <-- don't need unit on 0 */
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid white; /* <-- change to bottom for up arrow */
}

#lowerBar{
height:100%;
width:100%;
}
#lowerBar:after {
  content: "";
  background: url(../images/world.png);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

input[type=text], textarea {
    width: 100%;
	padding: 5px 10px;
    margin: 2px 0;
    box-sizing: border-box;
	border: 1px solid #ccc;
    border-radius: 4px;
	font-size:12px;
	color:#333;
}