body{	background:white;
	margin:20px;
	padding:0;
	height: 100%;
	text-align: center;
	font-family:Times New Roman;
	}

/* Content Areas */

#container{
	width: 1024px;
	top: 0px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;}
	

#header{margin-left: auto;
	margin-right: auto;
	top: 20px;
	width: 1024px;
	height: 520px;
	background-image:url(images/header-text.jpg);
	background-repeat: no-repeat;
	background-position: center;
	}

	
	
#content{margin-left: auto;
	margin-right: auto;
	height: 100%;
	width: 1024px;
	}

#board{width:620px;
	height: 750px;
	float: left;
	background-image: url(images/sprite.jpg);
	z-index: -10;
	background-repeat: no-repeat;}

#controller{width: 400px;
	height: 290px;
float: right;
text-align: left;
margin-top: 10px;}

#info-panel{width: 400px;
	height: 431px;
	float: right;
	background-image: url(images/info-panel.jpg);
	text-align: left;
	font-family: Trebuchet MS;
}
	
#footer{width: 1024px;
	height: 100px;
	clear:both;
	position: relative;
	top: 20px;
	margin-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
	background-color: black;}

#right-tab{position: fixed;
	top: 50px;
	right: 0px;;
	width: 60px;
background-color: black;
padding-bottom: 10px;
padding-top: 10px;}
	




#cell-content{
    width: 300px;
    margin: 50px;
    margin-top: 100px;
    display: block;
}

/*  Replaces  styles for  individual  content  divs  - visibility  and
    z-index are now controlled by javascript. */		
#cell-content div {
    position: absolute;
    top: 815px;
    width: 300px;
    margin-top: 100px;
}
		
		
/* Text attributes */

p {
    padding: 10px;
    font-size: 0.9em;
    color: black;
}

p.results{font-size: 1em;font-family: Trebuchet MS;
color: red;
text-align: center;}

i{font-size: 1.1em;
padding: 0px;
margin: 0px;}

h1{
font-size: 1.3em;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
line-height: 200%;}

a{font-weight: bold;
	color: #cc0000;
text-decoration: none;}

a:hover{text-decoration: underline;}

button.play{width: 138px;
	height:51px;
	margin-left: auto;
	margin-right: auto;
	border: none;
	background-image: url(images/button.jpg);
	background-position: 0px -51px;
	background-repeat:no-repeat;
	display: block}
	
button.play:hover{background-position: 0px 0px;}
	
button.face-button{background-image: url(images/face-button.jpg);
			height: 46px;
			width: 46px;
			border-color: black;}

button.flickr-button{background-image: url(images/flickr-button.jpg);
			height: 35px;
			width: 46px;
border-color: black;}	

button.last-button{background-image: url(images/last-button.jpg);
			height: 35px;
			width: 46px;
		border-color: black;}	
		
		
button.shop-button{background-image: url(images/shop-button.jpg);
			height: 46px;
			width: 46px;
		border-color: black;}			

button.twitter-button{background-image: url(images/twitter-button.jpg);
			height: 46px;
			width: 46px;
		border-color: black;}	
button.in-button{background-image: url(images/in-button.jpg);
			height: 46px;
			width: 46px;
		border-color: black;}	
		
span{display: none;}


/* Table Styles */

table{width:600px;
	height: 750px;
	border: none;
	padding: 0px;
	margin: 0px;}

td{width: 150px;
	height: 150px;
	padding: 0px;
	margin: 0px;
	border: none;}

td.bbg-wapr{
    background-image:url(images/bbg-wapr.jpg);
}
td.wbg-bapr{
    background-image:url(images/wbg-bapr.jpg);
}
td.bbg-wapl{
    background-image:url(images/bbg-wapl.jpg);
}
td.blank{
    background: white;
}
td.rbg-wapl{
    background-image:url(images/rbg-wapl.jpg);
}
td.wbg-bapd{
    background-image:url(images/wbg-bapd.jpg);
}
td.wbg-bapl{
    background-image:url(images/wbg-bapl.jpg);
}
td.gbg-wapr{
    background-image:url(images/gbg-wapr.jpg);
}