#relcontain{
position:relative;
	width:980px;
	height:750px;
}

#background{
	position:absolute;

	background: url('fall_background.jpg') no-repeat center center;
}


#topbox{

	width:980px;
	height:350px;
	background: url('top_background.png');
}


#bottombox{

	width:980px;
	height:322px;

}

#unlockbox{
position:relative;
	width:980px;
	height:39px;
	background: url('unlock_background.jpg');
}

.viewport{
	padding-top:115px;
	padding-bottom:50px;
	padding-right:0px;
	padding-left:75px;
	float: left;
    left: 0px;
    position: relative;
    top: 0px;
	z-index:1000;
	width:120px;
	height:120px;
	}
	
	.viewportrel{
	padding-top:100px;
	padding-bottom:50px;
	padding-right:0px;
	padding-left:75px;
	float: left;
    left: 0px;
    position: relative;
    top: 0px;
	z-index:1000;
	width:150px;
	height:150px;
	}
	
			.viewportinv{
	padding-top:100px;
	padding-bottom:50px;
	padding-right:0px;
	padding-left:25px;
	float: left;
    left: 0px;
    position: relative;
    top: 0px;
	z-index:1000;
	width:85px;
	height:150px;
	}
	
	.viewportrel a img{
	height: 150px;
    left: 0px;
    position: relative;
    top: 0px;
    width: 150px;
	
}

.viewport a img{
	height: 120px;
    left: 0px;
    position: relative;
    top: 0px;
    width: 120px;
	
}

#bubble{
z-index:1000;
display: none;
position: absolute;
margin-top:120px;
margin-left:16px;
width:85px;
height:60px;
background: url('bubble.png') no-repeat center;
}

#bubblerel{
z-index:1000;
display: none;
position: absolute;
margin-top:140px;
margin-left:32px;
width:85px;
height:65px;
background: url('bubble.png') no-repeat center;
}


.bubbletext{
display:inline-block;
width:85px;
height:60px;
padding-top:10px;
  line-height: 48px;
  text-align: center;
  font-weight:bold;
font-family: "trebuchet ms";
font-size: 16px;
color: #442032;
text-shadow: #A9BD60 0px 1px 0px;
}

#released{
display:inline-block;
width:85px;
height:60px;
padding-top:27px;
  line-height: 10px;
  text-align: center;
  font-weight:bold;
font-family: "trebuchet ms";
font-size: 11px;
color: #442032;
text-shadow: #A9BD60 0px 1px 0px;
}



#box{
	padding-top:50px;
	padding-bottom:50px;
	padding-right:50px;
	padding-left:50px;
	float: left;
	height: 225px;
    left: 0px;
    position: relative;
    top: 0px;
    width: 225px;
	z-index:1000;
}

#boxbg1{
	height: 225px;
    width: 225px;
	background: url('top_circle_1.png') no-repeat center;
}

#boxbg2{
	height: 225px;
    width: 225px;
	background: url('top_circle_2.png') no-repeat center;
}

#boxbg3{
	height: 225px;
    width: 225px;
	background: url('top_circle_3.png') no-repeat center;
}

#box a img{
    top: 50%;
    margin-top: -108px;
    left: 50%;
    margin-left: -110px;
    position: absolute;
	opacity:0.6;
	filter:alpha(opacity=60); /* For IE8 and earlier */
	  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
}

#box a img:hover{
	opacity:1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}

#arrow{
   margin-top:166px;
}

#banner{
position:absolute;
left:150px;
top:275px;
z-index:0;
}

#topbox img{
left:290px;
top:158px;
position:absolute;
}


.infobox{
  font-weight:bold;
font-family: "trebuchet ms";
font-size: 14px;
}

#progressbartext{
	width:980px;
	position:relative;
  line-height: 35px;
  text-align: center;
  font-weight:bold;
font-family: "trebuchet ms";
font-size: 16px;
color: #442032;
text-shadow: #A9BD60 0px 1px 0px;
}

#unlocks{
width:980px;
position:absolute;
line-height: 35px;
text-align: center;
font-family: "trebuchet ms";
font-size: 16px;
color: #442032;
text-shadow: #A9BD60 0px 1px 0px;
padding-top:2px;
}

#howunlocks{
	background: url('fall_background.jpg');
width:980px;
position:relative;
line-height: 70px;
text-align: center;
font-family: "trebuchet ms";
font-size: 16px;
color: #cabae3;
text-shadow: #301b3e 0px 1px 0px;

}

#unlockstop{
	background: url('top_background.png');
}