body { font-family: Arial, Helvetica, sans-serif;
       color:black;  background-color: #ffffFF}

a:active  {color: red; text-decoration: underline; }
a:link    {color: #0000EE; text-decoration: underline; }
a:visited {color: #0000EE; text-decoration: underline; }

h1 { text-align: center; color: #004186; }

h2 { text-align: center; color: #004186; }

h3 { color: #004186; }

h4 { color: #004186; }

.greybox { background-color: #E7E3E7; color: black; }

.fixed_greybox {font-family: courier, monospace;
                 background-color: #E7E3E7; color: black; }

.bluebox { background-color: #C5E5FF; color: black; }

.fixed_bluebox {font-family: courier, monospace;
                 background-color: #C5E5FF; color: black; }
.graph {
position: absolute;
margin: 63px auto;
font-family: sans;
line-height: 10px;
font-size: 8px;
}
.mask1 {
position: absolute;
margin: 0px auto;
font-family: sans;
line-height: 10px;
font-size: 8px;
height:63px;
background:rgba(255, 255, 255, 1);
}

.mask1 h3{
font-size: 12px;
}
.mask1 p{
font-size: 12px;
margin: -3px 0 10px 0;
}
.mask2 {
position: absolute;
font-family: sans;
line-height: 10px;
font-size: 8px;
height:63px;
background:rgba(255, 255, 255, 1.0);
width: 770px;
margin: 313px auto;
height: 63px;
}
.infopeta {
position: absolute;
font-family: sans;
@line-height: 12px;
font-size: 12px;
height: 20px;
z-index: 4;
margin: -58px auto;
width: 100%;
}
.hilalmap{
font-family: sans;
font-size: 14px;
color: white;
@margin-bottom: -5px;
}
.map {
width: 780px;
height: 400px;
margin: 10px auto;
@background: url("world-map-equirectangular-projection-country-border-v2.png") no-repeat scroll 40px 5px transparent;
background: url("world-map-black-white-4.png") no-repeat scroll 30px 0px transparent;}

.block {float: left;
width: 10px;
margin: 0px;
height: 10px;
mix-blend-mode: multiply;
}

.block5 {float: left;
width: 5px;
margin: 0px;
height: 5px;
mix-blend-mode: multiply;
}

.red {background-color:rgba(255, 200, 200, 1);}
.orange {background-color:rgba(255, 200, 150, 1);}
.yellow {background-color:rgba(230, 255, 100, 1);}
.white3 {background-color:rgba(255, 255, 0, 1);}
.black {background-color:rgba(100, 100, 100, 1);color:#aaa}
.dark {background-color:rgba(200, 200, 238, 1);color:#000}
.white {border:1px dotted #ccc;background-color:rgba(255, 255, 255, 1);}
.white2 {background-color:rgba(255, 255, 255, 1);}
.blue {background-color:rgba(200, 255, 180, 1);}
.green {background-color:rgba(130, 255, 130, 1);}
.darkgreen {background-color:rgba(90, 150, 90, 1);}
.tick1 {float:left;width:30px;padding:0px;background-color:#fff;}
.steelblue{color:#66a;}

.note {font-size:12px;margin: 0px auto;
text-align: left;}
.legend {width:13px;line-height:13px;}

.wrap{margin:2px auto;text-align:center;}
#map {margin:0px auto;}
#rukyatdata {margin:0px auto;text-align:center;}
.bluebox td {border-bottom:1px solid steelblue;}
.fixed_bluebox td {border-bottom:1px solid steelblue;}
#mapheader {position:absolute;top:0px;width:100%;height:40px;font-size: 0.7em;z-index:100;}
#mapheader h2 {text-align: center;
color: #004186;
line-height: 18px;
margin: 2px;}

table.bluebox {
	font-family: verdana,arial,sans-serif;
	font-size:1em;
	color:#333333;
	border-width: 1px;
	border-color: #333;
	border-collapse: collapse;
}
table.bluebox th {
	border-width: 1px;
	padding: 8px;
	background-color: #fff;
}
table.bluebox td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #333;
	background-color: #ccc;
}
table.gridtable {
	font-family: verdana,arial,sans-serif;
	font-size:0.8em;
	color:#333333;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
}
table.gridtable th {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #dedefe;
}
table.gridtable td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #ffffff;
}
input.greenyellow {
background: greenyellow;
border: 1px solid #000;
padding: 2px;
font-size: 1.1em;
border-radius: 0.25em;
}