a {
  color: #000;
}

html, body {
    margin-top: 20px;
    padding: 0px;
    font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;

}
/* The following line fixes the menu buttons at the top of the screen*/
.fixed {
  overflow: hidden;
  background: rgba(f,e,8,0.5);
  position:fixed; left: 0px; top: 0px; margin-top: 0px; width: 100%;
  z-index: 980;
}

/* Background Bottom number will raise the black background*/
.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 1000;
	opacity:0;
	slowish change to black
  -webkit-transition: opacity 500ms ease-in;
	-moz-transition: opacity 500ms ease-in;
	transition: opacity 500ms ease-in; 
	pointer-events: none;
}

.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}
/* margin is distance from top, background colour of written space */
.modalDialog > div {
	width: 90%;
	position: relative;
	margin: 2% auto;
	padding: 10px 10px 10px 10px;
	border-radius: 10px;
	background: #f5F08B; 

}

.close {
	background: #57a957;
	color: #ff0000;   /* ???*//*Text colour*/
	line-height: 41px;
	position: absolute;
	left:-10px;
	text-align: center;
	top: -8px;
	width: 41px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 2px 2px 4px #000;
	-webkit-box-shadow: 2px 2px 4px #000;
	box-shadow: 2px 2px 4px #000;
}

.close:hover { background: #f5F08B; 
color: #000000;
}
/*-------------*/

.button{
  display: inline-block;
  /*display: inline;*/
  /*width: 120px; /*added to allow text wrap */
  zoom: 1;
 /* 	z-index: 990;*/
  padding: 2px 8px 2px 8px;
  margin: 1px 6px 2px 6px;
  cursor: pointer;
  border: 1px solid #bbb;
  overflow: visible;
  font: bold 16px arial, helvetica, sans-serif;
  text-decoration: none;
  white-space: nowrap; /* or normal */
  background-color: #F5F08B;
  background-clip: padding-box; /* Fix bleeding */
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .3),
              0 2px 2px -1px rgba(0, 0, 0, .5),
              0 1px 0 rgba(255, 255, 255, .3) inset;
  text-shadow: 0 1px 0 rgba(255,255,255, .9);  
}

.button:hover{
  background-color: #fff;
}

.button:active{
  background: #e9e9e9;
  position: relative;
  top: 1px;
  text-shadow: none;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}

.button.small{
  padding: 4px 12px;
}


.button.large{
  padding: 12px 30px;
  text-transform: uppercase;
}

.button.large:active{
  top: 2px;
}

.button.color{
  color: #F7DF62;
  text-shadow: 0 2px 0 rgba(0,0,0,.2);
  /*background-image: linear-gradient(top, rgba(255,255,255,.3), 
             rgba(255,255,255,0)),
                    url(data:image/png;base64,iVBORw0KGg[...]QmCC);*/
}

.button.green{
  background-color: #57a957;
  border-color: #57a957;
}

.button.green:hover{
  background-color: #62c462;

}

.button.green:active{
  background: #57a957;
  
}


.button.red{
  background-color: #c43c35;
  border-color: #c43c35;
}

.button.red:hover{
  background-color: #ee5f5b;
}

.button.red:active{
  background: #c43c35;
}



button.yellow{
  background-color: #F7DF62;
  border-color: #F7DF62;
  color: #57a957;
  text-shadow: 0 2px 0 rgba(0,0,0,.2);
  
}

.button.yellow:hover{
  background-color: #F5F08B;
}

.button.blue:active{
  background: #269CE9;
}

.button[disabled], .button[disabled]:hover, .button[disabled]:active{
  border-color: #eaeaea;
  background: #fafafa;
  cursor: default;
  position: static;
  color: #999;
  /* Usually, !important should be avoided but here it's really needed :) */
  box-shadow: none !important;
  text-shadow: none !important;
}

.green[disabled], .green[disabled]:hover, .green[disabled]:active{
  border-color: #ffffff;
  background: #ffffff;
  color: #D2FFD2;
}

.red[disabled], .red[disabled]:hover, .red[disabled]:active{
  border-color: #C43C35;
  background: #C43C35;
  color: #FFD3D3;
}

.blue[disabled], .blue[disabled]:hover, .blue[disabled]:active{
  border-color: #269CE9;
  background: #269CE9;
  color: #93D5FF;
}