/*
------------------------------------------------------------------------
Masport
------------------------------------------------------------------------
*/

body {
	margin: 0px;
	padding: 0px;

	background-color: #transparent;
	background-image:url(../images/background.jpg);
	background-repeat:repeat;

	font-family: "century gothic", "Avant Garde", Helvetica, Arial;
	font-size: 11px;
	color: #000000;
	overflow-y: scroll;
}

img { border: 0; 
}

.center{
text-align:center;
}

/*
------------------------------------------------------------------------
C O N T A I N E R S
------------------------------------------------------------------------
*/



.fade{
	background-color: transparent;
	background-image:url(../images/backfade.jpg);
	background-repeat:repeat;
	position: absolute;
	top: 0%;
	left: 0%;
	padding: 0px;
	width: 100%;
	height:764px;
	z-index:1;
}

.bottomspace {
	position: absolute;
	margin-top: 870px;
	margin-left: -250px;
	top: 0%;
	left: 50%;
	width: 500px;
	line-height:12px;
	font-size:10px;
	z-index:3;
}

.banner{
	background-color:transparent;
	position: absolute;
	margin-left: -500px;
	top: -100px;
	left: 50%;
	padding: 0px;
	width: 960px;
	height:384px;
	z-index:2;
}

.logo{
	background-color:transparent;
	position: absolute;
	margin-left: -390px;
	margin-top: 40px;
	top: 0%;
	left: 50%;
	padding: 0px;
	width: 220px;
	height:128px;
	z-index:3;
}

.nav{
	background-color: transparent;
	background-repeat:no-repeat;
	position: absolute;
	margin-left: -285px;
	top: 285px;
	left: 50%;
	padding: 0px;
	width: 570px;
	height:30px;
	z-index:2;
}

.navback{
	background-color: #333;
	position: absolute;
	margin-left: -390px;
	top: 285px;
	left: 50%;
	padding: 0px;
	width: 780px;
	height:30px;
	z-index:2;
	filter:alpha(opacity=5);
	-moz-opacity:0.05;
	-khtml-opacity: 0.05;
	opacity: 0.05;
}

.sidebarback {
	background-color: #333;
	position: absolute;
	margin-top: 340px;
	margin-left: 200px;
	top: 0%;
	left: 50%;
	width: 200px;
	height: 500px;
	z-index:2;
	filter:alpha(opacity=5);
	-moz-opacity:0.05;
	-khtml-opacity: 0.05;
	opacity: 0.05;
}

.sidebar {
	background-color:transparent;
	position: absolute;
	margin-top: 340px;
	margin-left: 210px;
	top: 0%;
	left: 50%;
	width: 180px;
	height: 480px;
	z-index:3;
}


/*
------------------------------------------------------------------------
C O N T A I N E R S
------------------------------------------------------------------------
*/

/* Home Page */
.home_container{
	position: absolute;
	margin-top: 380px;
	margin-left: -400px;
	text-align: center;
	top: 0%;
	left: 50%;
	padding: 0px;
	width: 800px;
	height: 400px;
	z-index:1;
	font-size: 14px;
}

/* Timeline */
.timeline_container{
	position: absolute;
	margin-top: 360px;
	margin-left: -450px;
	top: 0%;
	left: 50%;
	padding: 0px;
	width: 900px;
	height: 400px;
	z-index:1;
}

.table_space{
	position: absolute;
	margin-top: 550px;
	margin-left: -420px;
	top: 0%;
	left: 50%;
	padding: 0px;
	width: 840px;
	height: 400px;
	z-index:1;
	font-size: 14px;
	text-align: center;
}

.tabletime {
	width: 800px;
	border: none;
}

.tabletime td{
	padding: 5px;
	border-spacing: 0px;
}

.timeline_footer {
	background-color:transparent;
	position: absolute;
	margin-top: 500px;
	margin-left: -250px;
	top: 0%;
	left: 50%;
	width: 500px;
	line-height:12px;
	font-size:10px;
	z-index:3;
}


/* Events */

.events_container{
	position: absolute;
	margin-top: 340px;
	margin-left: -398px;
	top: 0%;
	left: 50%;
	padding: 0px;
	width: 550px;
	height: 400px;
	z-index:1;
}

.events_footer {
	background-color:transparent;
	position: absolute;
	margin-top: 1050px;
	margin-left: -250px;
	top: 0%;
	left: 50%;
	width: 500px;
	line-height:12px;
	font-size:10px;
	z-index:3;
}

/* Book */
.book_container{
	position: absolute;
	margin-top: 340px;
	margin-left: -398px;
	top: 0%;
	left: 50%;
	padding: 0px;
	width: 550px;
	height: 400px;
	z-index:1;
	font-size: 12px;
}

.book_footer {
	background-color:transparent;
	position: absolute;
	margin-top: 870px;
	margin-left: -250px;
	top: 0%;
	left: 50%;
	width: 500px;
	line-height:12px;
	font-size:10px;
	z-index:3;
}

/* Media */
.media_container{
	position: absolute;
	margin-top: 350px;
	margin-left: -398px;
	top: 0%;
	left: 50%;
	padding: 0px;
	width: 800px;
	height: 400px;
	z-index:1;
}

.media_footer {
	background-color:transparent;
	position: absolute;
	margin-top: 5700px;
	margin-left: -250px;
	top: 0%;
	left: 50%;
	width: 500px;
	line-height:12px;
	font-size:10px;
	z-index:3;
}

/* Contact */
.contact_container{
	position: absolute;
	margin-top: 350px;
	margin-left: -398px;
	top: 0%;
	left: 50%;
	padding: 0px;
	width: 800px;
	height: 400px;
	z-index:1;
}

.contact_footer {
	background-color:transparent;
	position: absolute;
	margin-top: 680px;
	margin-left: -250px;
	top: 0%;
	left: 50%;
	width: 500px;
	line-height:12px;
	font-size:10px;
	z-index:3;
}

.tabletext {
 	font-size: 12px;
	font-family: Century Gothic, Arial, Helvetica, sans-serif;
	background-color: white; 
	border: 1px solid #ccc; 
}

.contact_tableback {
	background-color: #333;
	position:absolute;
	top: 0%;
	left: 50%;
	margin-top: 475px;
	margin-left: -370px;
	width: 760px;
	height: 180px;
	z-index:1;
	filter:alpha(opacity=5);
	-moz-opacity:0.05;
	-khtml-opacity: 0.05;
	opacity: 0.05;
}

.contact_table {
	background-color: transparent;
	position:absolute;
	top: 0%;
	left: 50%;
	margin-top: 490px;
	margin-left: -365px;
	width: 730px;
	height: 150px;
	z-index:2;
}

/*
------------------------------------------------------------------------
N A V I G A T I O N
------------------------------------------------------------------------
*/

#navstyle{
	height: 30px;
}

#navstyle ul{
	border: 0;
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}

#navstyle ul li{
	display: block;
	float: left;
	text-align: center;
	padding: 0;
	margin: 0;
}

#navstyle ul li a span{
	display:none;
}


#navstyle ul li a{
	width:95px;
	height:30px;
	margin:0px;
	padding:0px;
	display:block;}

#navstyle a.home{
	background: url(../images/menu/menu.png) 0px 0px;
}

#navstyle a.home:hover{
	background: url(../images/menu/menu.png) 0px -30px;
}

#navstyle a.homepage{
	background: url(../images/menu/menu.png) 0px -30px;
}

#navstyle a.timeline{
	background: url(../images/menu/menu.png) 0px -60px;
}

#navstyle a.timeline:hover{
	background: url(../images/menu/menu.png) 0px -90px;
}

#navstyle a.timelinepage{
	background: url(../images/menu/menu.png) 0px -90px;
}

#navstyle a.stories{
	background: url(../images/menu/menu.png) 0px -120px;
}

#navstyle a.stories:hover{
	background: url(../images/menu/menu.png) 0px -150px;
}

#navstyle a.storiespage{
	background: url(../images/menu/menu.png) 0px -150px;
}

#navstyle a.gallery{
	background: url(../images/menu/menu.png) 0px -180px;
}

#navstyle a.gallery:hover{
	background: url(../images/menu/menu.png) 0px -210px;
}

#navstyle a.gallerypage{
	background: url(../images/menu/menu.png) 0px -210px;
}

#navstyle a.events{
	background: url(../images/menu/menu.png) 0px -240px;
}

#navstyle a.events:hover{
	background: url(../images/menu/menu.png) 0px -270px;
}

#navstyle a.eventspage{
	background: url(../images/menu/menu.png) 0px -270px;
}

#navstyle a.thebook{
	background: url(../images/menu/menu.png) 0px -300px;
}

#navstyle a.thebook:hover{
	background: url(../images/menu/menu.png) 0px -330px;
}

#navstyle a.thebookpage{
	background: url(../images/menu/menu.png) 0px -330px;
}

#navstyle a.media{
	background: url(../images/menu/menu.png) 0px -360px;
}

#navstyle a.media:hover{
	background: url(../images/menu/menu.png) 0px -390px;
}

#navstyle a.mediapage{
	background: url(../images/menu/menu.png) 0px -390px;
}

#navstyle a.contact{
	background: url(../images/menu/menu.png) 0px -420px;
}

#navstyle a.contact:hover{
	background: url(../images/menu/menu.png) 0px -450px;
}

#navstyle a.contactpage{
	background: url(../images/menu/menu.png) 0px -450px;
}

/*
------------------------------------------------------------------------
S T Y L I N G   T E X T
------------------------------------------------------------------------
*/

.span_9 {font-size: 10px;}

h2 {
font-family: Century Gothic, Arial, Helvetica, sans-serif;
text-decoration:underline;
font-size:18px;
font-weight:700;
}

h3 {
font-family: Century Gothic, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:700;
}

.hrline{
height:1px;
width:100%
color:#ccc;
background-color:#ccc;
}

a {color:#333333;
text-decoration:none;}
a:hover {text-decoration: underline;}

.eventsheader {
color: #ffffff;
font-size:12px;
font-weight:700;
}