/* LAYOUT */
body {
  background-color: #202020;
  color: #fff;
  font-family:Verdana,sans-serif;
  font-size:14px;
}

#header {
  margin: 2px auto 2px auto;
  width:980px;
	height:84px;
	overflow:hidden;
  text-align:right;
}

.center {
  text-align:center;
}

a {
  color:#fff;
}

#container {
  position:relative;
  margin: 10px auto;
  width:980px;
  padding: 0px;
  border:1px solid #fbb03b;
	z-index:10;
}

#topnav {
	position:absolute;
	top:14px;
	left:0px;
	width:100%;
	z-index:100;
}
.menu {
  margin:5px 0px 5px 20px;
  float:left;
}

#topnav a, #occupyPH a {
	text-decoration:none;
	font-weight:bold;
}
#topnav a:hover {
	text-decoration:underline;
}

#container_left {
  float:left; 
  width:240px; 
  height:380px;
  margin:10px;
  overflow:hidden;
  text-align:center;
}

#container_right {
  float:right;
  width:700px;
  height:520px;
  margin:10px;
}

#leftnfo {
}

#map_canvas {
  width:700px; 
  height:400px;
}

#legend {
  width:700px; 
  height:100px; 
  overflow:hidden;
}

#negbox {
  position:absolute; 
  bottom:-1px; 
  left:-1px; 
  width:250px; 
  height:130px; 
  border-top:1px solid #fbb03b;
  border-right:1px solid #fbb03b;
  border-bottom:0px;
  border-left:0px;
  background: #202020;
  overflow:hidden;
  margin:0px;
  text-align:center;
	z-index:100;
}

#date {
  padding:24px 5px 0px 5px;
  border-bottom:1px solid #fbb03b;
	font-size:10px;
}
#date div {
  margin: 0px 4px;
}

.lbx {
  padding:5px;
  border-bottom:1px solid #fbb03b;
}

#leg_all, #leg_nfo {
  font-size:9px;
  overflow:hidden;
	text-align:center;
	margin:4px 0px;
}
#leg_nfo {
	padding:1px;
}
#leg_all {
	background: url('img/rainbow700.png') repeat-y;
	color:black;
	border:1px solid black;
	cursor:pointer;
	overflow:hidden;
}

.legendentry {
  width:87px;
  height:16px;
  font-size:9px;
  overflow:hidden;
}
.legendcolor {
  float:left;
  width:20px;
  height:10px;
  margin-right:1px;
}

.legendbox {
	float:left; width:87px;
	cursor:pointer;
}


/* DESIGN */
.fred { color: #fe3265; }
div.ename { font-size:200%; letter-spacing: -1px; font-weight:bold; }
div.efcst { font-size:100%; letter-spacing: -1px; font-weight:bold; margin:.5em 0 0 0;}
div.trend { line-height:120%; font-size:110%; text-align:left; letter-spacing: -1px; position:relative;}
div.trendicon {font-size:160%; position:absolute; top:4px;left:0px;}
.scroll {margin-left:20px; font-weight:bold;}

span.e_happy    {color:#ee3c00;}
span.e_weak     {color:#eeb300;}
span.e_confused {color:#3cee00;}
span.e_afraid   {color:#00ee3c;}
span.e_guilty   {color:#00eeb3;}
span.e_sad      {color:#00b3ee;}
span.e_strong   {color:#d100ee;}
span.e_angry    {color:#f70010;}


div.docstep {
	width:162px;
	margin:0px 4px;
	padding:0px 1px;
	float:left;
}
div.docstep ul {
	margin:0;
	padding:0 0 0 1.5em;
}

div.aboutdiv {
	overflow:auto;
	text-align:center;
}
div.abouttxt {
	text-align:justify;
	margin:0 1em;
}
div.aboutdiv h3 {
	text-align:left;
}
div.aboutlft {
	text-align:left;
}
div.aboutlft ul {
	padding:0;
	margin: 0 .25em;
}

div.aboutlft li {
	padding:0 0 0 0.75em;
	margin:0 0 .5em 0;
	list-style: none;
}

/* ################################################## */
table.rider {
  border:0px;
  border-spacing:0px;
}
table.rider th {
	text-align:center;
}
table.rider tr {
  margin:0;
  padding:0;
}
table.rider td {
  padding:.25em 1.5em;
  text-align:center;
}
table.rider td.left {
  text-align:left;
}

table.rider td + td {
  border-left:1px solid #aaa;
}

/* ################################################## */

#occupy {
	font-family:Arial;
  position:absolute;
	left:10%; top:10%;
	width:80%;
	min-width:800px;
	margin:80px 0 0 0;
	padding:0;
	z-index:5
}
#occontainer {
	background:#202020;
}
#occupyPH {
	/*position:absolute;*/
	top:94px;
	left:1em;
}

#occupyPH div {
	float:left;
	margin:0px 4px;
	padding:1px 4px;
}

#occupyPH div.current {
	border-bottom: 1px solid #8f2943;
	background:#f36;
	font-weight:bold;
	color:#202020;
}
#occupyPH div.link {
	border-bottom: 1px solid #8f2943;
	background:#f36;
}

#occupySA {
	font-family:Arial;
  position:absolute;
	left:0; top:0;
	width:100%;
	min-width:800px;
	margin:0;
	padding:0;
	z-index:5;
	cursor:none;
}

div.occupy > div {border:0;padding:0;margin:0;position:relative;}
div.occupy > div > img { border:0;padding:0;margin:0;z-index:-1000;position:relative;top:0;bottom:0;left:0;width:100%;display:block; }
div.occupy > div > div { border:0;padding:0;margin:0;position:absolute;top:0;bottom:0;left:0;width:100%;overflow:auto}
.clearer { clear:both; }

.occupy div.box {
 position:absolute;
 margin:0;
 top:15%;
 padding:0;
 height:80%;
 width:45%;
 z-index:10;
 overflow:hidden;
}

img.bga {
 position:absolute;
 left:0;
 top:0;
 height:100%;
 width:100%;
 z-index:15;
}

img.bgb{
 position:absolute;
 left:0;
 top:0;
 height:100%;
 width:100%;
 z-index:12;
}

#l_interlude, #r_interlude {
 position:absolute;
 z-index:20;
 text-align:center;
 font-size:16em;
 font-weight:lighter;
 top:12.5%;
 width:100%;
 text-shadow: #000000 0px 0px 3px;
}
#l_interlude {
 letter-spacing:-.05em;
}
#r_interlude {
 letter-spacing:-.12em;
 left:-.06em;
}
#l_interlude span.smallp, #r_interlude span.smallp {
	font-size:33%;
	font-weight:lighter;
}

div.occupyhead {
 position:absolute;
 top:1.1%;
 z-index:25;
 width:100%;
 text-align:center;
 font-size:2.75em;
 letter-spacing:.1em;
 font-weight:bold;
 font-style:italic;
 color:#202020;
 text-shadow: -1px 0 #eee, 0 1px #eee, 1px 0 #eee, 0 -1px #eee;
}

div.occupytxt {
 position:absolute;
 left:0;
 z-index:25;
 width:100%;
 text-align:center;
 font-size:3em;
 color:black;
 text-shadow: #000000 0px 0px 3px;
}

div.ocfooter {
 position:absolute;
 width:50%;
 left:6%;
 bottom:6%;
 font-size:1.6em;
}

div.oclogo {
 position:absolute;
 width:50%;
 right:2%;
 bottom:0;
}

img.oclogo {
	position:relative;
	display:block;
	width:100%;
}

.toptitle {
	position:absolute;
	left:3%;top:1%;width:94%;
	text-align:center;
	font-size:1.5em;
	font-style:italic;
	font-weight:bold;
	color:#eee;
}
div.id  {font-style:italic;}
div.idc {font-size:75%; line-height:180%; font-style:italic; font-weight:bold; color:#eee;}
div.emo {font-size:120%; font-weight:bold; color:#fff;}
span.val {color:#eee; font-size:240%; font-weight:bolder;}
span.smallp {color:#eee; font-weight:bolder;}