/*
	Style sheet for cygen-classic v2.1 + control (FINAL)
	Release date:	April 27th 2008.
*/
	body {
		background-color: #333;
		background-image: url(../images/mod_bg_hifi.gif);
	}
	
/*
	From here on down, we have the css layout items
	below these, i'll add the elements which go inside these
	in layout.
*/
	
	#container {
		width: 1000px;
		height: 600px;
		margin: auto;
		margin-top: 40px;
		background-color: black;
		border: 12px groove #003300;
	}
	
	#selection {
		margin: 0;
		padding: 0;
		width: 180px;
		height: 440px;
		overflow: auto;
		color: white;
	}
	
	#currentMap {
		margin: 0;
		padding: 0;
		width: 400px;
		height: 400px;
	}
	
	#currentName {
		margin: 0;
		padding: 0;
		height: 40px;
		color: white;
		text-align: center;
		font-size: 22px;
		background-color:#000;
		background-image: url(../images/title_bg.jpg);
	}
	
	#incycle {
		margin: 0;
		padding: 0;
		width: 1000px;
		height: 160px;
		overflow: auto;
	}
	
	#namesList {
		width: 420px;
		height: 440px;
	}
	
	#theList {
		overflow: auto;
		width: 230px;
		height: 400px;
		color: white;
		font-size: 12px;
		background-color: #000;
		background-image: url(../images/mapcycle.jpg);
	}
	
	#theCode {
		overflow: auto;
		width: 190px;
		height: 400px;
		color: white;
		font-size: 10px;
		background-color: #000;
		background-image: url(../images/code.jpg);

	}
	
	#buttonGenerate {
		width: 190px;
		height: 40px;
		color: white;
		cursor: pointer;
		text-align: center;
		background-color: #000;
	}
	
	#buttonEdit {
		width: 230px;
		height: 40px;
		color: white;
		text-align: center;
		background-color: #000;
		cursor: pointer;
	}
	
	#selection , #incycle, #theList, #theCode {
		SCROLLBAR-FACE-COLOR: #27260F;
		SCROLLBAR-ARROW-COLOR: #D9DAD6;
		SCROLLBAR-HIGHLIGHT-COLOR: #000000;
		SCROLLBAR-3DLIGHT-COLOR: #1C1E0F;
		SCROLLBAR-SHADOW-COLOR: #6B6D2E;
		SCROLLBAR-TRACK-COLOR: #0F1009;
		SCROLLBAR-DARKSHADOW-COLOR: #282B15;
	}
	
/*
	Adding styles for the items which belong inside the
	above styled containers.
*/
	
	#selection img {
		width: 160px;
		height: 160px;
		border: 1px solid #000000;
	}
	
	#selection img:hover {
		border: 1px solid white;
	}
	
	#selection ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	
	#selection ul li {
		margin: 0;
		padding: 0;
		cursor: pointer;
	}
	
	#currentMap img {
		margin: 0;
		padding: 0;
		width: 400px;
		height: 400px;
	}
	
	.incycleMap:hover {
		border: 1px solid #00FF00;
	}
	
	.incycleMap {
		width: 160px;
		height: 160px;
		float: left;
		border: 1px solid black;
	}
	
	#theList ol {
	margin-top: 40px;
	}
	
	#theCode p {
		margin-top: 40px;
		margin-left: 20px;
		color: white;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-weight: normal;
		font-size: 12px;
	}
	
	#currentName p {
	margin: 0;
	padding: 8px;
	}
	
	
/*
	The control is contained within 3 <div> tags.
	Add control style here.
*/
	
	.control_top {
		text-align: center;
	}
	
	.control_center {
	}
	
	.control_bottom {
		text-align: center;
	}