@charset "UTF-8";
/* CSS Document */

html,body{
margin:0;
padding:0;
background:#000000;
}


h1{
color:#333;
font-size:16px;
font-family:Eurostile, "Gill Sans Light", "Gill Sans";
letter-spacing:2px;
}



h2{
border-style:dashed;
border-color:#CCCCCC;
color:#333;
font-size:14px;
font-family:Eurostile, "Gill Sans Light", "Gill Sans";
letter-spacing:2px;

}


h3{
color:#A6A6A6;
font-size:14px;
font-family:Eurostile, "Gill Sans Light", "Gill Sans";
letter-spacing:2px;
}


h4{
color:#999;
border-bottom-style:solid;
border-bottom-width:thin;
border-bottom-color:#999999;
font-size:14px;
font-family:Eurostile, "Gill Sans Light", "Gill Sans";
letter-spacing:2px;
min-width:650px;
width:650px;
}



a{
text-decoration:none;
font-size:12px;
color:#FF0000;

}

a:hover{
background-color:#ccc;
}


a:visited{
color:#FF9700;

}

p{
color:#999999;
font-family:Eurostile, Gill Sans Light, Gill Sans;
font-size:13px;
letter-spacing:2px;
font-weight:lighter;
}

img{
border:none;
}

#index img{
border:#000000;
}

.total{
width:900px;
border:1px;
border-color:#CCCCCC;
}


.header{
margin:30px;
height:70px;
}


#output{
background-color:#FFFFFF;
border:1px solid #999999;
color:#000;
text-align:center;
font-family:Eurostile, "Gill Sans Light", "Gill Sans";

}

#output td{ 
border:1px solid black;

}

#input{
font-family:Eurostile, "Gill Sans Light", "Gill Sans";
font-size:10px;
padding:0 0 0 200px;
}

.table_header_color{
background-color:#000;
color:#999999;
}

#main{
float:left;
width:600px;
padding:30px;
font-family:Eurostile, "Gill Sans Light", "Gill Sans";
font-size:10px;
}

#bio{
min-width:400px;
width:400px;
}

.bigcontainer{
position:absolute;
left:250px;
top:150px;
}

#contain{
position:absolute;
left:0px;
top:50px;
/*margin:0 0 0 300px;*/
width:450px;
border-style:solid;
border:1px;
border:#00FF66;
/*padding:0px 0px 0px 0px;*/
padding:0 5px 0 0;
}

#index{
position:absolute;
left:475px;
top:50px;
width:200px;
font-family:Eurostile, "Gill Sans Light", "Gill Sans";
font-size:10px;
padding:0px 0px 0px 0px;
text-decoration:none;
}

#bigphoto{
position:absolute;
left:0;
top:154px;
}

.show{
position:absolute;
left:0;
width:700px;
top:110px;
}

.photo{
text-align:right;
margin-bottom:10px;
}

.photo img{
width:110px;
}

.photo a:active, .photo a:link, .photo a:visited{
opacity:0.5;
filter:alpha(opacity=50);
}

.photo a:hover{
opacity:1;
filter:alpha(opacity=100);
}

.darkgrey{
height:100px;
overflow:hidden;
}

.brightgrey{
height:100px;
overflow:hidden;
background:#990033;
}


#side{
position:absolute;
left:0px;
top:150px;
border:dashed;
border:#009966;
width:250px;
margin:0 0 10px 0px;
}

.footer{
position:absolute;
left:20px;
bottom:50px;
margin:30px;
margin:10px;
padding:10px;
}

ul{
list-style-type:square;
color:#999999;
font-family:Eurostile, Gill Sans Light, Gill Sans;
font-size:12px;
letter-spacing:2px;
font-weight:lighter;
}

#side ul {
	clear:both;
	list-style-type:none;
	list-style: none;  /*this is done to avoid the submenu to be visible from the begining*/
	width: 200px;
	/*border-bottom: 1px solid #ccc; this is to close the menu abajo*/
	}


/*menu and submenus copied from website*/

/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
#side ul.mainboxActive
{
	z-index: 1000;
}
/* Menu item containers, position children relative to this container and are same fixed width as parent */
#side ul.mainbox li
{
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: 30em;
	background-color: #000;
	background-image: none;
	border:thin;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
#side.subbox1
{
	margin: -5% 0 0 95%;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: absolute;
	z-index: 1020;
	cursor: default;
	width: 8.2em;
	left: -1000em;
	top: 0;
	border:thin;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
#side ul.mainBoxActive ul.mainBoxSubmenuVisibility
{
	left: 0;
}
/* Menu item containers are same fixed width as parent */
#side ul.mainBox ul li
{
	width: 8.2em;
}


/*to remove the indents and bullets from the unordered list and define the width of our menu items.*/



/*Next, we need to position our list items. Fortunately, these will stack vertically by default, which is what we require. However, we must set the position as relative, because we will need to position the sub-menus absolutely within them.*/




/*Next step is the sub-menus. We want each sub-menu to appear to the right of its parent menu item when that item is hovered over.*/

#side li ul {
	left: 250px;
	top: 0;
	display: none; /*this is done to avoid the submenu to be visible from the begining*/
	}
	
	/*we have the framework in place, but it’s still looking a bit plain. Let’s style those links.*/

#side ul li a {
	display: block;     /*It is important to set display to “block,” each link to take up all the available space of its containing list item*/
	text-decoration: none;
	color: #000;
	background: #000;
	padding: none;
	border: none;
	border-bottom: 0;
	}

/*there is a way around IE’s bugs:*/

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* the height: 1% rule that has also been added. Unfortunately (again!) the float fix uncovers another IE bug, which requires a height value to make the links display as block-level elements.*/


/*We need to make those sub-menus appear when we hover over the menu items. 
so that darn IE/Win has to ruin everything and not do as it’s told. IE/Win only allows the :hover pseudo-class to be applied to a link — so the li:hover that makes the sub-menus appear means nothing to IE.*/

 li:hover ul, li.over ul { 
	display: block; }

/*A tiny jot of JavaScript is required to kick IE back into action (line wraps marked » — Ed.):*/

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace»
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;


/*we also need to associate the JavaScript with our main ul, which becomes:*/

<ul id="nav">


.frameShort{
border-style:solid;
border-color:#CCCCCC;
width:600;
left:20px;
padding:30px 20px 30px 20px
}


.madmen{
border-style:double;
float:left;
top:30px;
margin:20px;
width:500px;
letter-spacing:2px;
padding:0 50px 0 50px;

}

.introfinal{
border-style:double;
float:left;
top:30px;
margin:20px;
width:700px;
letter-spacing:2px;
padding:50px;

}


#september{
float:left;
width:600px;
padding:30px;
font-family:Eurostile, "Gill Sans Light", "Gill Sans";
font-size:14px;
}