/********************************************************************
 *  Astaria.net, Layout and Style CSS for main website.
 *  Aeschix@Astaria, 2009.
 *  CSS hackery has only been employed to enhance background tiles by
    allowing alpha channel png images. IE7 has a rendering bug which
	  chomps on Flash if a png is used anywhere on the same page, so as
	  a workaround, IE7 has a tiled, opaque gif instead.
 ********************************************************************/
/*** Layout Styles ***/
/* Header */
#header {
	position:relative;
	width:80%;
	min-width:504px;
	height:111px;
	margin: 10px auto 0 auto;
}
	#header .banner {
		height:89px;
	}
		#header .banner div {
			position:absolute;
			top:-1px;
			right:50%;
			margin-right:-253px;
			font-family:"Courier New", Courier, monospace;
			color:#FFFFFF;
		}

	/* Toolbar */
	.toolbar {
		height:22px;
	}
		/* MUD connection status */
		.status {
			float:left;
			margin-top:2px;
		}
	
		/* Google search */
		form#cse-search-box {
			float:right;
			width:50%;
			margin-top:2px;
			text-align:right !important;
		}
			form#cse-search-box input {
				padding:2px 0;
			}
			form#cse-search-box input.query {
				width:50%;
				margin:0;
				margin-right:-4px;
				padding-right:5px;
				padding-left:20px;
			}
			form#cse-search-box input.submit {
				margin:0;
				padding:0 5px;
				cursor:crosshair;
			}

/* Main content */
#wrap {
	position:relative;
	z-index:+5;
	width:80%;
	margin:0 auto;
}

	/* Two-column layout */
	.two-column {
		position:relative;
		padding:10px 0 ;
		border-top:1px solid #000000;
		border-bottom:1px solid #000000;
		background: transparent url(../images/default/1x1_000000_pixel.gif) 22% 0 repeat-y;
	}
		/* Login box
		.login {
			position:absolute;
			z-index:10;
			display:block;
			left:10px;
			top:-19px;
			height:18px;
			width:75px;
			overflow:hidden;
			text-decoration:none;
			border-bottom:1px solid #FFFFFF;
			color:#FFFFFF;
		}
		.login:hover {
			overflow:visible;
			color:#C0C0C0;
		}
			.login form {
				display:block;
				width:220px;
				margin-top:3px;
				padding:5px 10px 10px 10px;
				border:1px solid #FFFFFF;
				border-top:1px solid #000000;
				background: url(../images/black_75_opacity.png) repeat top left;
				color:#FFFFFF;
			}
				.login form span,
				.login form a {
					float:left;
					width:80px;
					line-height:24px;
				}
				.login form a { margin-top:5px; }
				.login form input {
					float:right;
					width:120px;
					margin-bottom:2px;
					padding:2px 5px;
					border:1px solid #FFFFFF;
					background-color:#000000;
					color:#FFFFFF;
					font-family:"Courier New", Courier, monospace ;
				}
				.login form input#login-submit {
					border:none;
					width:132px;
					height:22px;
					margin-top:6px;
					padding:0;
					background: url(../images/login_submit_button.gif) 0 0 no-repeat;
				}	
		*/
		 
		/* Columns */
		.left-column,
		.right-column {
			float:left;
			display:inline /* <IE7 margin-doubling fix */
		}
		.left-column { width:22%; }
		.right-column { width:77%; }
				
		/* Navigation */
		ul.nav {
			margin:0 10px ;
			padding:0;
			list-style-type:none;
		}
			ul.nav li { margin-bottom:2px; }

				ul.nav li a:link,
				ul.nav li a:hover,
				ul.nav li a:visited {
					line-height:2.0em;
				}
				ul.nav li a {
					background-repeat:no-repeat;
				}
				ul.nav li a:hover {
					background-position:0 -25px;
				}
				ul.nav li a.home { background-image:url(../images/icons/icon_home.png); }		
				ul.nav li a.maps { background-image: url(../images/icons/icon_maps.png); }
				ul.nav li a.gallery { background-image: url(../images/icons/icon_gallery.png); }
				ul.nav li a.resources { background-image: url(../images/icons/icon_resources.png); }
				ul.nav li a:link,
				ul.nav li a:hover,
				ul.nav li a:visited {
					display:block;
					padding-left:28px;
				}
	
					/* Sub Navigation */
					ul.nav li ul.sub-nav {
						margin-top:0;
						margin-bottom:5px;
						padding-left:5px;
						list-style-type:none;
					}
					ul.nav li ul.sub-nav li {
						margin:0;
					}
						ul.nav li ul.sub-nav li a:link,
						ul.nav li ul.sub-nav li a:visited,
						ul.nav li ul.sub-nav li a:hover {
							display:block;
							padding:4px 6px;
						}

		/* Inline iconic navigation within the right content column */
		.content-nav {
			margin:30px 0;
			padding:10px 0;
		}
			.content-nav li {
				display:inline;
			}
				.content-nav li img { display:inline; padding:0 30px; }
		
		.left-column h3 {
			clear:both;
			margin:20px 0 0 0;
			padding:15px 10px 0 10px;
		}
				
		/* Updates log 
		ul.update-log {
			margin: 10px 10px 0 10px;
			padding:0;
			list-style-type:none;
		}
			ul.update-log ul { margin:0; padding:0; list-style-type:none; }
				ul.update-log ul li { margin-bottom:3px; }
					ul.update-log-entry { margin-bottom:8px; }	
						ul.update-log-entry li { display:block; margin:0;  }
					a.update-log-link {
						display:block;
						padding-top:4px;
					}
			ul.update-log li.more-updates {
				display:block ;
			}	
		*/
		 	
		/* Page Content */
		.content { padding:0 10px; }
			#flash_object_a,
			#flash_object_b,
			#flash_object_c,
			#flash_object_d,
			#flash_object_e,
			#flash_object_f {
				text-align:center;
			}
			.content ul,
			.content ol {
				margin-left:35px;
				list-style-type:circle;
			}
				.content ul li,
				.content ol li {
					padding:2px 5px;
				}
			
			/* Index triple box layout */
			.index-strip {
				margin:20px 0;
				padding:10px 0;
			}
				.index-strip h3 { margin:0; }
				.play,
				.vote,
				#frmDonate {
					float:left;
					width:26%;
					min-height:14em;
					margin-left:2%;
					padding:2%;
				}
				#frmDonate { width:27%; }

				/* Donations form */
				#frmDonate p {
					margin:20px 0 0 0;
				}
				#frmDonate input.donate_btn {
					display:block;
					height:26px;
					width:92px;
					margin: 20px auto 10px auto;
				}
			
				/* Voting buttons */
				a.vote_btn_a,
				a.vote_btn_b {
					float:left;
					width:48%;
					margin:1%;
				}
					a.vote_btn_a img,
					a.vote_btn_b img {
						display:block;
						clear:both;
						width:38px;
						height:39px;
						margin:40px auto 10px auto;
					}
			
			/* Map pages -- style appended to outer container DIV element, but inside wrapper DIV */
			/*
			.maps-background {
				background:transparent url(../images/maps-background.gif) bottom right no-repeat ;
			}
			*/
			ul#map-list {
				list-style-type:none;
				margin:0 0 0 10px;
				padding:0;
			}
				ul#map-list li {
					float:left;
					height:108px;
					width:46.5%;
					margin:10px 2% 10px 0;
					padding:5px;
				}
					ul#map-list li img {
						float:left;
						margin:4px 10px 4px 4px;
						padding:2px;
					}
					
			/* Softwares page */
			.a3client_download {
				margin:20px 20px 30px 20px;
				text-align:center;
			}
				.a3client_download img {
					display:block;
					margin:0 auto 10px auto;
				}
			
	/* Footer */
	.footer p {
		margin:0;
		padding:10px;
	}
		/* Google AdSense */
		#adsense {
			margin:10px auto;
		}
	
		/* Site skin chooser */
		.skin-chooser {
			width:500px;
			margin:4px auto;
			padding:0;
			text-align:left;
			list-style-type:none;
		}
			.skin-chooser li {
				float:left;
				width:45%;
				margin:0;
				padding:0;
				font-size:0.85em;
				text-align:right;
			}		
			.skin-chooser li.options {
				position:relative;
				width:50%;
				text-align:left;
			}
				.skin-chooser ul {
					position:absolute;
					bottom:1px;
					overflow:hidden;
					height:1.2em;
					margin:10px 0 0 0;
					padding:0;
				}
				.skin-chooser ul:hover {
					overflow:visible;
					height:auto;
				}
					.skin-chooser ul li {
						float:none;
						display:block;
						width:auto;
						padding:0 10px;
						font-size:1.0em !important;
						text-align:left;
					}
					.skin-chooser ul:hover li {
						
						padding:5px 10px 0 10px;
					}
					.skin-chooser ul:hover li.first {
						display:none;
					}
				.skin-chooser span.current {
					padding-left:10px;
					padding-right:13px;
					background-position:-10000px -10000px;
					background-repeat:no-repeat;
				}
		
/* Popup */
#popup #bd {
	padding:15px 0;
	text-align:center;
}