/*
CSS document for Star Project game
Southampton Rape Crisis
Copyright Net Efficiency Ltd
Version 0.1
Nov 23, 2005
*/


body,html{
	background: #be309e;
	color:#000;
	margin:0;
	padding:0;
	font-family: Verdana,"Trebuchet MS",Arial,sans-serif;
}


#container {
	width: 800px;
	margin: 0 0 30px 0;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	background:#fff;
	font-size:small;
}
* html #container {
	width: 801px;
	font-size:x-small;
	w\idth: 800px;
	font-s\ize:small;
}


#toprow{
	display:block;
	float:left;
	width:800px;
	background: #fff url("lh_line.gif") 0px 0px repeat-y;

	margin: 0;

}

#innertop{
	display:block;
	float:left;
	width:800px;
	background: url("full_line.gif") 0px 4em no-repeat;
}



#lh_div{
	display:block;
	float:left;
	clear:none;
	width:180px;
	padding:0 10px 0 10px;
}
*html #lh_div{
	width:200px;
	w\idth:180px;
}

#lh_div #smstar{
	display:block;
	float:left;clear:none;
	width:27px;
	height:27px;
	margin:10px 0 0 0;
}
#lh_div a{
display:block;
float:right;
clear:right;
margin:2.5em 0 0 0;
font-size:1em;
color:#c7c7c7;
text-decoration:none;
}
#lh_div a:hover{color:#c7c7c7;text-decoration:underline;}

#lh_div #gamelogo{
float:right;
clear:both;
margin:10px 0 10px 0; 
}

#cen_div{
	display:block;
	float:left;
	clear:none;
	width:560px;
	margin:0;
	padding: 0 15px 0 25px;
}
* html #cen_div{
	width:600px;
	w\idth:560px;
}


#cen_div h1{font-size:3em;font-weight:normal;margin:0 0 .3em 0;padding:0;color:#f09;}
#cen_div h2{font-size:1em;font-weight:bold;margin:0;padding:0;color:#c09;}
#cen_div p.ques{background:url("question.gif") 0px 0px no-repeat;font-size:1.4em;font-weight:bold;margin:1em 0 1em 0;padding:0 0 0 50px;color:#000;width:80%;min-height:42px;}
* html #cen_div p.ques{height:42px;}

#cen_div #stage{float:left;clear:both;margin:15px 0 0 0;padding:0;}
#stage img, #stage a, #stage a img, #stage a:hover img{border:0;margin:0;padding:0;float:left;clear:none;display:block;}
#stage img.stepline{width:85px;height:24px;}
#stage a.stepbut, #stage img.stepbut{width:22px;height:24px;}
#stage #reset{margin-left:88px;}
#stage #continuebut{margin-left:27px;}
#botline{display:block;float:left;clear:both;width:800px;height:1px;font-size:0px;line-height:1px;background: url("full_line.gif") left bottom no-repeat;}


/* faces - used repeatedly through out */
#face1{display:block;width:220px;height:167px;margin:0;padding:0;border:0;}
#face2{display:block;width:220px;height:167px;margin:-167px 0 0 0;padding:0;border:0;}
#face3{display:block;width:220px;height:167px;margin:-167px 0 0 0;padding:0;border:0;}


/*  various main content areas  */
/* game table creation */
#c_tbl{display:block;float:left;clear:both;width:634px;margin: 1em 0 0 0;padding:0 83px 0 83px;}
* html #c_tbl{width:800px;w\idth:634px;}
#c_tbl h2{font-size:100%;color:#66f;margin:0;}
#c_tbl table{width:633px;margin:0;padding:0;background: url(fullfaces.gif) 0px 0px no-repeat;margin:1.3em 0 2em 0;}
#c_tbl table a.faces {display:block;width:65px;height:67px;}
#c_tbl table #holder{display:block;width:220px;height:167px;margin:0;padding:0 19px 0 19px;border:0;}
#c_tbl table #holder{width:258px;w\idth:220px;}


/*  game play area  */
#maincol{display:block;float:left;clear:both;width:800px;background:url("maincol_line.gif") 0px 0px repeat-y;margin:0;padding:0;}
#maincol h2{font-size:100%;color:#33a;margin:10px 0;padding:0 0 0 240px}


/* prizes section */
#prizes{display:block;float:left;clear:both;background: url("explosion.gif") 225px 4px no-repeat;width:550px;margin:0 0 0 0;padding:0 0 0.5px 225px;text-align:center;}
* html #prizes{width:775px;w\idth:550px;}
#prizes img.prize{display:inline;width:100px;height:100px;margin:20px 15px 30px 15px;padding:0;border:0;}


/*  game question section  */
#answers{display:block;float:left;clear:none;background: url("game_bgnd.gif") 1px 0px no-repeat;width:800px;margin:-1px 0 0 0;padding:0;text-align:center;}
#answers #tblwrap{float:left;clear:both;width:733px;margin:0;padding:25px 0 25px 51px;}
#answers #tblwrap{width:784px;w\idth:733px;}
#answers table#ans{width:733px;margin:0;padding:0;font-size:95%;line-height:1.5em;}
#answers table#ans td.questarea{height:165px;text-align:center;}
#answers table#ans a{color:#fff;text-decoration:none;font-weight:bold;}
#answers table#ans a span.blk{color:#000;line-height:1.1em;}
#answers table#ans a#visitimg2, #answers table#ans a#visitimg2 img{border:0;}
#visitimg2 {display:none;}

/*  gallery area  */
#gallerycol, #gallerycol2{display:block;float:left;clear:both;width:780px;background:#ed2f85;margin:0;padding:0 10px 10px 10px;}
* html #gallerycol, * html #gallerycol2{width:800px;w\idth:780px;}

.player{float:left;clear:none;width:340px;height:168px;display:block;margin:20px 0 0 0;padding:15px 25px 15px 25px;border:0;background: url("gallery.gif") 10px 0px no-repeat;}
* html .player{width:390px;height:198px;he\ight:168px;w\idth:340px;}

/* center for the form to enter galler*/
#gallerycol2 .player{float:none;margin-left:auto;margin-right:auto;background: url("gallery2.gif") 10px 0px no-repeat;height:auto;}

.player .info{display:block;width:107px;margin:0;padding:0;float:left;clear:none;}
.info h2{font-size:200%;height:43px;margin:5px 0 0 0;padding:0 11px 0 0;border:0;font-weight:bold;color:#66f;text-transform:uppercase;text-align:center;}
.info img{display:inline;float:left;clear:none;width:45px;height:45px;margin:10px 8px 0 0px;padding:0;border:0;}

.player .chars{display:block;width:220px;height:168px;float:right;margin:5px 0 10px 0;padding:0;}
.chars img{display:block;width:220px;height:167px;margin:-167px 0 0 0;padding:0;border:0;}
.chars img.face1{margin:0;}

.player #username{clear:both;background:#fff;position:relative;width:270px;margin:0 auto;padding:17px 10px;font-weight:bold;}
* html #username{width:290px;w\idth:270px;}
#username p{text-align:center;margin:0;color:#55f;/*vertical-align:center;*/}

#username #topline{position:absolute;top:0;left:0;width:290px;height:17px;background: url("top.gif") 0px 0px no-repeat;}
#username #botline{position:absolute;bottom:0;left:0;width:290px;height:17px;background: url("bot.gif") 0px 0px no-repeat;}

#username #nameinput{text-transform: uppercase;margin:2px 1em 0 0;padding:0;background:#ddf;border:1px solid #77f;color:#55f;width:112px;font-weight:bold;text-align:center;vertical-align:top;}
#username #userbutton{width:112px;height:23px;border:0;margin:0;padding:0;}

.more {padding: 0 25px;margin:10px 0 0 0;float:left;clear:both;}
.more a{color:#ccc;text-decoration:none;text-transform:upperclass;margin:4px 0 0 0;padding:1px 2px;font-size:1em;line-height:1em;}
.more a:hover{color:#ccc;text-decoration:underline;text-transform:upperclass;}
.more img {border:0;}


/* ######### required / typo3 styles ######## */
.alttext{display: none;}
/*  Netscape float bug  */
.clearing {height:3px;line-height: 1px;clear: both;font-size: 0px;}


#visitimg{position:absolute;top:16px;left:603px;display:block;width:182px;height:54px;z-index:5;border:0;margin:0;padding:0;}
#visitimg img,#visitimg:hover img,#visitimg:link img,#visitimg:active img,#visitimg:visited img{border:0;}
#visitimg {display:none;}

.notes{position:absolute;top:20px;right:20px;z-index:10;font-size:130%;color:#000;font-weight:bold;padding:5px 8px;background:yellow;border:2px solid #000;}
