/*	main.css
	cassandra-iphone.com, © 2009, Avallon Alliance Ltd.
	
	0 General & fix	
	1 Content, blocks
		1.1 Top navigation
			1.1.1 Sub menu
			1.1.2 Flash content
			1.1.3 Additional buttons
		1.2 Content
		1.3 Head & text blocks
		1.4 Text style
	2 Sub content
		2.1 Top 10
		2.2 Subscribe block
		2.3 Icon
	3 Main menu & all menu buttons
		3.1 Main menu buttons
		3.2 Sub menu buttons
		3.3 Additional buttons
	4 Feedback form
		4.1 Form
		4.2 Validation message style
	5 Hight Scores
		5.1 Head, buttons
		5.2 Table
	6 More Games
*/

/* 0 - General & fix */
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0px; padding: 0px; }

body {
	background-color: #0f1016;
	color: #b08f58;
	font: medium Tahoma, san-serif;
	padding-top: 5%;
}

a img {
	border: none;
}

a:focus {
	outline: none;
}

/* 1 Content, blocks */
#header {
	position: relative;
	display: block;
	width: 797px;
	height: 103px;
	margin: 0px auto 0px auto;
	background: url(../img/btn_head.jpg) no-repeat;
}

#header:hover {
	background-position: 0px -103px;
}

#header:active {
	background-position: 0px -206px;
}

	/* 1.1 Top navigation */
	#nav {
		position:relative;
		width: 800px;
		height: 489px;
		margin: 0px auto 0px auto;
	}
		/* 1.1.1 Sub menu */
		#sub_menu {
			position: relative;
			float: left;
			width: 74px;
			padding-top: 16px;
		}
		
		/* 1.1.2 Flash content */
		#flash_content {
			position: relative;
			float: left;
			width: 649px;
			height: 489px;
			background: url(../img/bg_cont.jpg) no-repeat;
		}
		
		body#home #flash_content {
			background:url(../img/bg_cont_home.jpg) no-repeat;
		}
		
		body#game #flash_content {
			padding: 4px 0px 0px 4px;
		}

		body#gallery #flash_content {
			background:url(../img/bg_gallery.jpg) no-repeat;
		}

		body#video #flash_content{
			background:url(../img/bg_video3.jpg) no-repeat;
		}
		
		.video {
			position:absolute;
			left:84px;
			top:66px;
		}
		
		.gallery {
			position:absolute;
			left: 55px;
			top: 85px;
		}
		
		/* 1.1.3 Additional buttons */
		#ad_butn {
			position: relative;
			float: left;
			width: 62px;
			height: 482px;
			top: -4px;
			left: 6px;
		}
	
		body#game #ad_butn {
			left: 2px;
		}
		
	/* 1.2 Content */
	#content {
		position: relative;
		width: 776px;
		min-height: 300px;
		_height: 300px;
		margin: 35px auto 35px auto;	
		background: #1c1f27;
		border-left: 3px solid #775e38;
		border-right: 3px solid #775e38;
	} 

	#top {
		position: absolute;
		width: 782px;
		height: 19px;
		top: -19px;
		left: -3px;
		background: url(../img/cont_top.gif) no-repeat;
	}

	#bot {
		position: absolute;
		width: 782px;
		height: 19px;
		bottom: -19px;
		left: -3px;
		background: url(../img/cont_bot.gif) no-repeat;
	}
	
	#box {
		position: relative;
		width: 100%;
	}
	
	#preloader {
		position: absolute;
		_position: relative;
		width: 64px;
		height: 64px;
		left: 356px;
		top: 116px;
	}
			
	/* 1.3 Head & text blocks */
	.head {
		position: absolute;
		width: 749px;
		top: 19px;
		margin: 0px 0px 25px 13px;
		padding: 5px 0px 5px 0px;
		text-align: center;
		background: url(../img/h1_tile.gif) repeat-y;
	}

	.head_top {
		position: absolute;
		width: 749px;
		height: 19px;
		top: -19px;
		left: 0px;
		background: url(../img/h1_top.gif) no-repeat;
	}

	.head_bot {
		position: absolute;
		width: 749px;
		height: 19px;
		bottom: -19px;
		left: 0px;
		background: url(../img/h1_bot.gif) no-repeat;
	}
	
	.h2_head {
		position: relative;
		width: 658px;
		margin: 20px 39px 30px 39px;
		text-align: center;
		background: url(../img/h2_tile.gif) repeat-y;
	}

	.h2_top {
		position: absolute;
		width: 658px;
		height: 17px;
		left: 0px;
		top: -17px;
		background: url(../img/h2_top.gif) no-repeat;
	}

	.h2_bot {
		position: absolute;
		width: 658px;
		height: 15px;
		left: 0px;
		bottom: -15px;
		background: url(../img/h2_bot.gif) no-repeat;
	}
	
	.main_content {
		position: relative;
		width: 736px;
		padding: 90px 20px 30px 20px; 
		*padding-bottom: 0px;
		text-align: justify;
	}
	
	.footer {
		position: relative;
		display: block;
		width: 800px;
		margin: 0px auto 0px auto;
		text-align: center;
		font-size: smaller;
	}
	
	.text_block {
		position: relative;
		width: 680px;
		margin: 40px 20px 40px 40px;		
	}
	
	.text_inner {
		position: relative;
		width: 656px;
		padding: 10px 10px 0px 10px;
		background: #2a3039;
		border-left: 2px solid #775e38;
		border-right: 2px solid #775e38;
	}
	
	.text_top {
		position: absolute;
		width: 680px;
		height: 20px;
		top: -20px;
		background: url(../img/select_box_top.gif) no-repeat;
	}
	
	.text_bot {
		position: absolute;
		width: 680px;
		height: 20px;
		bottom: -20px;
		background: url(../img/select_box_bot.gif) no-repeat;
	}
	
	/* 1.4 Text style */
	h1 {
		font-size: large;
		color:#a7864e;
	}

	.list {
		padding-left: 50px;
	}

	.list li {
		margin-bottom: 10px;
	}		
	
	#content a {
		color:#deb268; 
	}
	
	#warning {
		position: relative;
		width: 800px;
		margin: 0px auto 10px auto;
		display: block;
		text-align: center;
		color: #deb268;
		font: small Verdana, san-serif;
	}

/* 2 Sub content */
.sub_content {
	position: relative;
	float: right;
	width: 307px;
	margin: 0px 0px 10px 20px;
	*margin-bottom: 0px;
	color: #9bacd7;
}
	/* 2.1 Top 10 */
	.caption {
		position: relative;
		width: 307px;
		height: 30px;
		font-size: 1em;
		font-weight: bold;
		line-height: 30px;
		background: url(../img/top10_top.gif) no-repeat;
		text-align: center;
	}
	
	.tfoot {
		position: relative;
		width: 307px;
		height: 30px;
		background: url(../img/top10_bot.gif) no-repeat;
	}
	
	.table_wrap {
		position: relative;
	}
	
	.top_table {
		width: 301px; 
		border-bottom: 2px solid #775e38;
		border-top: none;
		border-collapse: collapse; 
		background-color: #424b5a;
		color: #9bacd7; 
	}
	
	.table_inner {
		position: relative;
		width: 301px; 
		border-left: 3px solid #775e38;
		border-right: 3px solid #775e38;
	}

	.top_table th, td {
		padding: 3px 3px;
	}

	.top_table th {
		font-weight: bold;
		text-align: left;
		border-bottom: 3px solid #775e38;
		border-left: none; 
		background-color: #424b5a; 
	}

	.top_table td {
		background-color:#2a3039;
	}
			
	#num {
		color:#6f7b9a;
	}
	
	/* 2.2 Subscribe block */
	.subscribe {
		position: relative;
		margin-top: 20px;
	}
	
	#sub_form {
		position: relative;
		width: 301px;
		height: 196px;
		background: #2a3039;

		border-top: 2px solid #775e38;
		border-bottom: 2px solid #775e38;
		border-left: 3px solid #775e38;
		border-right: 3px solid #775e38;
	}

	#sub_form p {
		padding:5px 15px 0px 15px;
	}

	#sub_form form {
		position: relative;
		margin: auto;
		text-align: center;
	}

	#sub_form  #mail {
		position: relative;
		width: 150px;
		margin: 0px 0px 5px 5px;
		border: 2px solid #a7864e;
		text-align: center;
		font-weight: bold;
		background: #1c1f27;
		color: #a7864e;	 
	}

	#sub_form  #submit {
		position: absolute;
		width: 100px;
		left: 104px;
		_left: 30px;	
		height: 25px;
		top: 80px;
		border: 2px solid #a7864e;
		text-align: center;
		font-weight: bold;
		background: #a7864e;
		color: #1c1f27;
	}
	
	form.cmxform label.error, label.error {	
		position: relative;
		font-style: italic;
		display: block;
		width: 301px;
		margin-left: auto;
		margin-right: auto;	
	}
	
	.subscribe #message {
		position: relative;
		width: 301px;
		text-align: center;
	}
	
	#sub_loader {
		position: absolute;
		width: 32px;
		height: 32px;
		left: 134px;
		top: 80px;
		background: url(../img/load_sub.gif) no-repeat;
	}
	/* 2.3 Icon */
	.icon {
		position: relative;
		width: 260px;
		height: 50px;
		margin: 10px auto 10px auto; 
		*margin-bottom: 0px;
	}
	
	.fb, .twitter, .rss {
		position: absolute;
		width: 50px;
		height: 50px;
	}
	
	.fb {		
		right: 60px;		
		background: url(../img/fb.png) no-repeat;
	}
	
	.twitter {
		left: 60px;
		background: url(../img/twitter.png) no-repeat;
	}
	
	.rss {
		left:30px;
		background: url(../img/rss.png) no-repeat;
	}

/* 3 Menu & menu buttons */
#main_menu {
	position: relative;
	width: 800px;
	height: 168px;
	list-style-type: none;
	margin: 6px auto 0 auto;
}

#main_menu p {
	visibility: hidden;
}

#main_menu a {
	position: absolute;
	top: 0px;
}

#lbl {
	position: absolute;
	width: 151px;
	height: 73px;
	left: 325px;
	top: 0px;
	background: url(../img/L_get_game.png) no-repeat;
}

	/* 3.1 Main menu buttons */
	#btn_home:hover, #btn_scores:hover, #btn_news:hover, #btn_faq:hover {
		background-position: 0px -100px;
	}

	#btn_home:active, #btn_scores:active, #btn_news:active, #btn_faq:active {
		background-position: 0px -200px;
	}

	#btn_story:hover, #btn_more:hover {
		background-position: 0px -106px;
	}

	#btn_story:active, #btn_more:active {
		background-position: 0px -212px;
	}
	
	#btn_home {
		width: 120px;
		height: 100px;
		left: 0px;
		background: url(../img/btn_home.jpg) no-repeat
	}

	#btn_story {
		width: 106px;
		height: 106px;
		left: 120px;
		margin-top: -6px;
		background: url(../img/btn_story.jpg) no-repeat
	}

	#btn_scores {
		width: 99px;
		height: 100px;
		left: 226px;
		background: url('../img/btn_scores.jpg') no-repeat
	}

	#btn_appstore {
		width: 151px;
		height: 89px;
		left: 325px;
		margin-top: 73px;
		background: url(../img/btn_appstore.jpg) no-repeat;
	}

	#btn_appstore:hover {
		background-position: 0px -89px;
	}

	#btn_appstore:active {
		background-position: 0px -178px;
	}

	#btn_news {
		width: 99px;
		height: 100px;
		left: 476px; 
		background: url(../img/btn_news.jpg) no-repeat;
	}

	#btn_more {
		width: 109px;
		height: 106px;
		left: 575px;
		margin-top: -6px;
		background: url(../img/btn_more.jpg) no-repeat;
	}

	#btn_faq {
		width: 116px;
		height: 100px;
		left: 684px;
		background: url(../img/btn_faq.jpg) no-repeat;
	}

	#btn_feedback {
		width: 101px;
		height: 52px;
		right: 16px;
		margin-top: 99px;
		background: url(../img/btn_feed.jpg) no-repeat;
	}

	#btn_feedback:hover {
		background-position: 0px -52px;
	}

	#btn_feedback:active {
		background-position: 0px -104px;
	}
	/* ***** */
	
	/* 3.2 Sub menu buttons */
	#btn_game, #btn_video, #btn_gallery, .game_on, .video_on, .gallery_on {
		position: absolute;
		width: 74px;
		height: 141px;
	}

	#btn_game:hover, #btn_video:hover, #btn_gallery:hover {
		background-position: -74px 0px;
	}

	#btn_game:active , #btn_video:active , #btn_gallery:active {
		background-position: -148px 0px;
	}
	

	#btn_game {
		background: url(../img/btn_game.jpg) no-repeat;
	}
	
	.game_on {
		background: url(../img/btn_game.jpg) no-repeat;
		background-position: -222px 0px;
	}
		
	#btn_video {
		margin-top: 150px;
		background: url(../img/btn_video.jpg) no-repeat;
	}

	.video_on {
		margin-top:150px;
		background: url(../img/btn_video.jpg) no-repeat;
		background-position: -222px 0px;
	}
			
	#btn_gallery {
		margin-top: 302px;
		background: url(../img/btn_gallery.jpg) no-repeat;
	}

	.gallery_on {
		margin-top: 302px;
		background: url(../img/btn_gallery.jpg) no-repeat;
		background-position: -222px 0px;
	}
	/* ***** */
	
	/* 3.2 Additional buttons */

	
	#ghtml, #gscr, #gtrailer {
		position: absolute;
		width: 62px;
		height: 431px;
	}

	#ghtml:hover, #gscr:hover, #gtrailer:hover {
		background-position: -62px 0;
	}

	#ghtml:active, #gscr:active, #gtrailer:active {
		background-position: -124px 0;
	}

	#ghtml {
		background: url(../img/btn_add_game.jpg) no-repeat;
	}
		
	#gscr {
		background: url(../img/btn_add_scr.jpg) no-repeat;
	}

	#gtrailer {
		background: url(../img/btn_add_video.jpg) no-repeat;
	}

/* 4 Feedback form */
#fb_cont {
	position: relative; 
	width: 520px; 
	top: 25px; 
	margin: auto; 
	margin-bottom: 36px;
	background: url(../img/feed_tile.gif) repeat-y; 
	text-align: center;
	font-size: 16px;
}

#fb_top {
	position: absolute; 
	width: 520px; 
	height: 17px; 
	top: -17px;  
	left: 0px;
	background: url(../img/feed_top.gif) no-repeat;
}

#fb_bot {
	position: absolute; 
	_position: relative; 
	width: 520px; 
	height: 17px; 
	bottom: -17px; 
	left: 0px;
	background: url(../img/feed_bot.gif) no-repeat;
}

#fb_h1 {
	font-size:20px;
}

	/* 4.1 Form */
	#fb {
		position: relative; 
		width: 300px; 
		min-height: 340px;
		margin: 0 auto; 
		text-align: center; 
		margin-bottom: 36px;
	}

	#fb input {
		width: 280px; 
		height: 25px; 
		padding-top: 2px;
		margin-bottom: 10px;
		
		border: 2px solid #a7864e; 
		background: #1c1f27; 
		text-align: center;
		color: #a7864e; 
		font-weight: bold;
		clear: left;
	}

	#fb #submit {
		background: #a7864e;
		color: #1c1f27; 
		padding-bottom: 2px;
	}

	#fb textarea {
		width: 280px; 
		height: 200px; 
		border: 2px solid #a7864e; 
		background: #1c1f27; 
		text-align: center;
		color: #a7864e; 
		font-weight: bold;
		overflow: auto;
	}

	/* 4.2 Validation message style */
	.formError {
		position:absolute;
		top:300px; left:300px;
		padding-bottom:13px;
		display:block;
		z-index:5000;
	}

	.formError .formErrorContent {
		width:100%; 
		background:#deb268;
		color:#1c1f27;
		width:150px;
		font-family:tahoma;
		font-size:11px;
		border:2px solid #1c1f27;

		padding:4px 10px 4px 10px;
		border-radius: 6px;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
	}
			
	.formError .formErrorArrow{
		position:absolute;
		bottom:0;left:20px;
		width:15px; height:15px;

		z-index:5001;
	}
			
	.formError .formErrorArrowBottom{top:0;margin:-6px;}
			
	.formError .formErrorArrow div{
		border-left:2px solid #1c1f27;
		border-right:2px solid #1c1f27;

		font-size:0px; height:1px; background:#deb268;margin:0 auto;line-height:0px; font-size:0px; display:block;
	}


	.formError .formErrorArrow .line10{width:15px;border:none;} 
	.formError .formErrorArrow .line9{width:13px;border:none;} 
	.formError .formErrorArrow .line8{width:11px;} 
	.formError .formErrorArrow .line7{width:9px;} 
	.formError .formErrorArrow .line6{width:7px;} 
	.formError .formErrorArrow .line5{width:5px;} 
	.formError .formErrorArrow .line4{width:3px;} 
	.formError .formErrorArrow .line3{width:1px;
		border-left:2px solid #1c1f27;
		border-right:2px solid #1c1f27;
		border-bottom:0px solid #1c1f27;} 
	.formError .formErrorArrow .line2{width:3px;border:none;background:#1c1f27;}
	.formError .formErrorArrow .line1{width:1px;border:none;background:#1c1f27;}

/* 5 Hight Scores */
	/* 5.1 Head, buttons */
	#head_s {
		position: absolute;
		width: 749px;
		height: 42px;
		z-index: 20;
		top: 114px;
		left: 16px;
		right: 16px;		
		text-align:center;
		background:url('../img/h1_tile.gif') repeat-y;
	}
	
	#scores_day, #scores_month, #scores_all {
		position: absolute;
		width: 199px;
		height: 44px;
	}
	
	#scores_day:hover, #scores_month:hover, #scores_all:hover {
		background-position: 0px -44px;
	}

	#scores_day:active, #scores_month:active, #scores_all:active {
		background-position: 0px -88px;
	}
	
	#scores_day {
		left: 20px;		
		background: url(../img/btn_today.jpg) no-repeat;
	}

	#scores_month {
		left: 275px;
		background: url(../img/btn_month.jpg) no-repeat;
	}
	
	#scores_all {
		right: 20px;
		background: url(../img/btn_all_time.jpg) no-repeat;
	}
	
	/* 5.2 Table */
	#scores_caption {
		position: relative;
		width: 520px;
		height: 30px;
		font-size: 1em;
		font-weight: bold;
		line-height: 30px;
		background: url(../img/score_top.gif) no-repeat;
		border-bottom: 2px solid #775e38;
		text-align: center;
		color: #a7864e;	 
	}

	.scores_foot {
		position: relative;
		width: 520px;
		height: 30px;
		background: url(../img/score_bot.gif) no-repeat;
	}

	#tab {
		position: relative; 
		width: 520px;
		top: 100px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 100px;
	}

	#load {
		position:absolute;
		z-index: 30;
		width: 48px;
		height: 48px;
		top: 216px;
		left: 360px;
		background: url(../img/load.gif) no-repeat;
	}

	#scores_table {
		width: 514px; 
		border-top: none;
		border-bottom: 2px solid #775e38;
		border-collapse: collapse; 
		background-color: #2a3039;
		color: #927749;
	}

	.in_s {
		position: relative;
		width: 514px; 
		border-left: 3px solid #775e38;
		border-right: 3px solid #775e38;
	}
	
	th {
		font-weight: bold;
		text-align:left;
		border-bottom:3px solid #775e38;
		border-left:none; 
		background-color:#424b5a; 
	}

/* 6 More Games */
.more_game_box {
	position: relative;
	width: 423px;
	height: 280px;
	margin: 20px 0px 30px 160px;
}

.more_game_head {
	position: absolute;
	width: 423px;
	height: 28px;
	left: 0;
	display: block;
	line-height: 28px;
	vertical-align: middle;
	text-align: center;
	font-weight: bold;
	background: url(../img/more_game_h.jpg) no-repeat;
}

.more_game {
	position: absolute;
	width: 425px;
	height: 252px;
	top: 38px;	
}