/* CSS Document */

/* BODY */

html, body {
	height:100%;
	}

body {
margin:0;
padding:0;
}
	
body {
color:#FFFFFF;
background-color:#000000;
background-image:url(../img/bgd.jpg);
background-repeat:no-repeat;
background-position:top center;
text-align:center;
font:11px Arial, Helvetica, sans-serif;
letter-spacing:1px;
}

img {
border:0;
}

a:active, a:hover, a:visited
{
  outline: none;
}


/* STRUCTURE */

#wrap {
margin:0 auto;
width:1000px;
height:600px;
}

#content {
float:left;
width:1000px;
height:200px;
margin-top:25px;
}

#footer {
margin:20px auto 0 auto;
width:100%;
text-align:center;
text-transform:uppercase;
color:#333333;
}

.timeline {
float:left;
width:990px;
height:90px;
margin-left:10px;
text-align:center;
text-transform:uppercase;
letter-spacing:0px;
color:#666666;
font-size:9px;
}

/* TIMELINE FEATURES - START */

.birth {
float:left;
width:32px;
height:30px;
padding-top:26px;
}

.date-1948 {
float:left;
width:25px;
height:90px;
text-align:left;
}

.date-1948 a, .date-1948 a:visited, .date-1948 a:active{
background-image:url(../img/01-1948.gif);
background-position:-25px 0;
display:block;
background-repeat:no-repeat;
width:25px;
height:90px;
}

.date-1948 a:hover{
background-position:0 0;
}

.growth {
float:left;
width:49px;
height:30px;
padding-top:26px;
}

.date-1955 {
float:left;
width:25px;
height:30px;
padding-top:40px;
}

.school {
float:left;
width:77px;
height:30px;
padding-top:26px;
}

.date-1966 {
float:left;
width:25px;
height:30px;
padding-top:40px;
}

.sex {
float:left;
width:126px;
height:30px;
padding-top:26px;
}

.date-1984 {
float:left;
width:25px;
height:90px;
text-align:left;
}

.date-1984 a, .date-1984 a:visited, .date-1984 a:active{
background-image:url(../img/02-1984.gif);
background-position:-25px 0;
display:block;
width:25px;
height:90px;
}

.date-1984 a:hover{
background-position:0 0;
}

.war {
float:left;
width:112px;
height:30px;
padding-top:26px;
}

.date-2000 {
float:left;
width:25px;
height:30px;
padding-top:40px;
}

.power {
float:left;
width:77px;
height:30px;
padding-top:26px;
}

.date-2011 {
float:left;
width:25px;
height:90px;
text-align:left;
}

.date-2011 a, .date-2011 a:visited, .date-2011 a:active{
background-image:url(../img/03-2010.gif);
background-position:-25px 0;
display:block;
width:25px;
height:90px;
}

.date-2011 a:hover{
background-position:0 0;
}

.danger {
float:left;
width:84px;
height:30px;
padding-top:26px;
}

.date-2023 {
float:left;
width:25px;
height:30px;
padding-top:40px;
}

.wonder {
float:left;
width:63px;
height:30px;
padding-top:26px;
}

.date-2032 {
float:left;
width:25px;
height:30px;
padding-top:40px;
}

.senility {
float:left;
width:112px;
height:30px;
padding-top:26px;
}

.date-2048 {
float:left;
width:25px;
height:90px;
}

.date-2048 a, .date-2048 a:visited, .date-2048 a:active{
background-image:url(../img/04-2048.gif);
background-position: -25px 0;
display:block;
width:25px;
height:90px;
}

.date-2048 a:hover{
background-position:0 0;
}

.replay {
float:left;
width:33px;
height:30px;
padding-top:26px;
}

/* TIMELINE FEATURES - END */


li a.hidden {
display:none;
}

li a:hover.hidden {
display:none;
}

li a:visited.hidden {
display:none;
}

li a:active.hidden {
display:none;
}

/* TEXT */

.red {
color:#332800;
}

.red-large {
color:#332800;
font-size:14px;
}

/* MENUS */

ul{
    font:10px Arial, Helvetica, sans-serif;
	margin:0;
	padding:0;
}

li{
	width:200px;
    height:90px;
	float:left;
	color:#191919;
	overflow:hidden;

}

a{
	color:#CCCCCC;
	text-decoration:none;
}

p{
	padding:0;
	margin:0;
}

	.subtext{
		text-align:left;
	}
	
.subtext a, .subtext a:visited, .subtext a:active{
    width:185px;
	height:14px;
	background:url('../img/menu-drop.gif') bottom left no-repeat;
	display:block;
	padding-left:18px;
}

.subtext a:hover{
    width:200px;
	height:14px;
	background:none;
	background-color:#FFFFFF;
	color:#000000;
	display:block;
}