/*
Project lead: Jeff evans
Last edit by Jeff Evans
date: 07/16/2016
*/


/* Global CSS*/
*{
	margin: 0 auto;
}

input{
	text-align: center;
	background-image: none !important;
}

.damaged{box-shadow: 0px 0px 10px 10px red inset;}

/* Overlay container CSS */

	.overlayWindow{
		background-color: black;
		position: fixed;
	}

	#overlayContainer {
		width: 100%;
		height: 99%;
		position: absolute;
		border-color: rgba(0,0,0,0);
		background-color: rgba(0,0,0,0.47);
		z-index: 100;
		visibility: hidden;
	}

	.visible{
		visibility: visible !important;
	}

/* Throbber css */

	#throbberContainer{visibility: hidden;}

	#loadingThrobber {
		position: fixed;
		z-index: 100;
		top: 50%;
		left:50%;
		margin: -100px;
	}

/* Load window css */

	#loadContainer{visibility: hidden;}

	#loadWindow{
		padding: 25px;
		width: 300px;
		height: 80px;
		top: 50%;
		left:50%;
		margin: -46.5px -176px;
	}

	#loadWindow > *{
		position: absolute;
		margin: 0px 25px;
	}

	#loadButton{ height: 35px; left: 0px; width: 130px;}

	#loadWindow .cancelButton{ height: 35px; left: 0px; top: 70px; width: 130px;}

	#saveFile{ height: 31px; right: 0px; width: 150px;}
	#saveFile-button{ height: 21px; right: 0px; width: 119px;}

	#saveFileExternal {
	    height: 31px;
	    right: 0px;
	    width: 150px;
	    top: 70px;
	    filter: opacity(0%);
	    cursor: pointer;
	}

	#browseButtonFix{
		height: 31px;
		right: 0px;
		width: 146px;
		top: 70px;
	}

/* New district window css */

	#newDistrictContainer{visibility: hidden;}

	#newDistrictWindow{
		padding: 25px;
		width: 300px;
		height: 155px;
		top: 50%;
		left:50%;
		margin: -103.5px -176px;
	}

	#newDistrictWindow > *{
		position: absolute;
		margin: 0px 25px;
	}

	#newDistrictCity, #newDistrictCity-button{
		width: 300px;
		left: 0px;
	}

	#newDistrictCity-button{width: 269px;}

	#newDistrictTerrain, #newDistrictTerrain-button{
		width: 300px;
		margin-top: 25px;
		top: 60px;
		left: 0px;
	}

	#newDistrictTerrain-button{width: 269px;}

	#newDistrictWindow .applyButton{left: 0px;}
	#newDistrictWindow .cancelButton{right: 0px;}

	#newDistrictWindow .applyButton, #newDistrictWindow .cancelButton{
		height: 35px;
		top: 120px;
		width: 130px;
		margin-top: 25px;
	}

/* Edict window css */

	#edictContainer{visibility: hidden;}

	#edictWindow{
		padding: 25px;
		width: 300px;
		height: 155px;
		top: 50%;
		left:50%;
		margin: -103.5px -176px;
	}

	#edictWindow > *{
		position: absolute;
		margin: 0px 25px;
	}

	#edictName, #edictName-button{
		width: 300px;
		left: 0px;
	}

	#edictName-button{width: 269px}

	#edictLevel, #edictLevel-button{
		width: 300px;
		margin-top: 25px;
		top: 60px;
		left: 0px;
	}

	#edictLevel-button{width: 269px}

	#edictWindow .applyButton{left: 0px;}
	#edictWindow .cancelButton{right: 0px;}

	#edictWindow .applyButton, #edictWindow .cancelButton{
		height: 35px;
		top: 120px;
		width: 130px;
		margin-top: 25px;
	}

/* Role window css */

	#roleContainer{
		visibility: hidden;
	}

	#roleWindow{
		z-index: 100;
		padding: 25px 0px;
		width: 400px;
		height: 162px;
		top: 50%;
		left:50%;
		margin: -42.5px -226px;
	}

	#roleWindowClose{
		position: absolute;
		padding: 0px;
		height: 18px;
		width: 18px;
		top: 0px;
		right: 0px;
		margin: 25px;
	}

	#roleWindow > :not(#roleSelector-button):not(#roleWindowClose){
		margin: 0px 24px;
		height: 35px;
	}
	#roleWindow #roleSelector-button{width: 169px; height: 24px; margin: 0px 25px;}
	#roleWindow #name{width: 144px;left: 0px}
	#roleWindow #modifier{width: 144px;right: 0px}

	#roleWindow > input{
		margin-top: 25px !important;
	}

	#roleWindowApply{
		position: absolute;
		right: 40px;
		height: 37px;
	}

	#elsContainer{
		margin-top: 25px !important;
		width: 88%;
	}

	#elsContainer label, #elsContainer input{
		height: 21px;
		width: 70px;
	}

#elsContainer :nth-child(3){margin: 0 18px;}

/* App container css */

	#appContainer{
		margin-top: 5px;
		width: 1010px;
		padding: 5px;
	}

/* Header css */

	#headerContainer{
		padding: .2em;
		width: 1000px;
		margin-bottom: 10px;
		height: 95px;
		position: relative;
	}

	#menuIcon, #menuIconContainer{
		height: 25px;
		width: 25px;
	}

	#mainMenuContainer{
		visibility: hidden;
		top: 45px;
		left: 10px;
		z-index: 100;
		margin: 0 !important;
	}
	#mainMenu ul, #mainMenuContainer{width: 200px;}

	#menuIconContainer{
		padding: 5px;
		position: absolute;
		top: 0px;
		left: 0px;
		cursor: pointer;
	}

	#kingdomNameContainer{
		min-width: 75px;
		max-width: 200px;
		margin: 5px auto !important;
		position: static !important;
	}
		
	#kingdomName{
		padding: 5px;
		height: 25px;
	}

	#depositContainer{
		width: 260px;
		left: 75px;
		top: 0px;
	}

	#goldAmount{
		cursor: text;
		width: 100px;
		padding: 5px 1em;
		height: 25px;
	}

	#depositGold{
		position: absolute;
		cursor: pointer;
		margin-left: 5px;
	}

	#depositGold, #advanceMonth{height:37px; padding:7.5px 1em !important;}

	#monthContainer{
		top: 0px;
		right: 0px;
	}

	#monthAmount{
		height: 19px;
		margin: 5px 22px 5px .4em;
	}

	#buildPointsContainer{
		left: 150px;
	}

	.headerElement{
		position: absolute;
		margin:8px;
	}

	#dashContainer {
			position: absolute;
			left: 0px;
	}

	.dashItem {
		position: static !important;
		float: left;
		margin: 0px 26.8px !important;
	}

	.dashValue{
		text-align: center;
		position: static !important;
		width: 100%;
		padding: 0 !important;
		margin: 0 !important;
}

/* Global Table css*/
	table{
		width: 100%;
		border-spacing: 0;
		background: #404040;
	}

	th, td{
		text-align: center;
		height: 25px;
		/*border: 2px solid black;*/
	}

	#scrollTable tr:nth-child(odd) {
		background-color: #8F8F8F;
	}

	.scrollPadding{width:16px !important;}

	.tableHeader, .tableFooter{background-color: rgb(200, 100, 0);}

	#tableContainer{
		width: 1000px;
		min-height: 700px;
		overflow: hidden;
		position: absolute;
		visibility: hidden;
	}

	#scrollTable{
		max-height: 573px;
		overflow-y: scroll;
	}


	/* Tabel specific css*/
	/* Main table*/
		#main1 .tableHeaderTop th, #main1 .cornerStoneTop{
			border-bottom: 2px solid black;
			width: 16.4%;
		}
		#main1 .tableHeaderSide th, #main1 .cornerStoneTop, #main1 .cornerStoneBottom{
			border-right: 2px solid black;
			width: 16%;
		}
		#main1 .tableHeaderBottom th, #main1 .cornerStoneBottom{
			border-top: 2px solid black;
			width: 16.4%;
		}

		#main1.cornerStoneTop, #main1 .cornerStoneBottom{width: 16.4% !important;}
		#mainTable td{width: 16%;}

	/* City tables*/
		.cityTable .tableHeaderTop th, .cityTable .cornerStoneTop{
			border-bottom: 2px solid black;
			width: 11.05%;
		}
		.cityTable .tableHeaderSide th, .cityTable .cornerStoneTop, .cityTable .cornerStoneBottom{
			border-right: 2px solid black;
			width: 10%;
		}
		.cityTable .tableHeaderBottom th, .cityTable .cornerStoneBottom{
			border-top: 2px solid black;
			width: 11.05%;
		}

		.cityTable .cornerStoneTop, .cityTable .cornerStoneBottom{width: 9.8% !important;}
		#capitalTable td{width: 11%;}

		.districtIDColumn{width: 15px !important;}

/* District dispaly */

	#districtContainer{
		visibility: hidden;
		padding: .2em;
		position: absolute;
		width: 1000px;
		overflow: hidden;
		height: 700px;
	}

	#districtDisplay{
		position: absolute;
		right: 700px;
		top: 3px;
		right: 700px;
	}

	#districtDisplaying {
		padding: 10px;
		width: 280px;
		position: absolute;
		margin: 25px 10px;
		text-align: center;
	}

	#districtNavContainer{
		position: absolute;
		margin: 25px 10px;
		top: 90px;
	}
	#districtNavContainer div{margin: 10px 0px;}
	#districtCitySelect {width: 225px}
	#districtCitySelect-button {width: 194px}
	#districtDistrictSelect {width: 75px}
	#districtDistrictSelect-button {width: 44px}


	#districtBuildMenu{
		width: 300px;
		position: absolute;
		z-index: 100;
		display: none;
		top: 200px;
		margin: 25px 10px;
	}

#districtOptionMenu{
		width: 300px;
		position: absolute;
		z-index: 100;
		display: none;
		top: 200px;
		margin: 25px 10px;
	}

	.square{
		height: 200px;
		width: 200px;
		background-color: black;
		position: absolute;
		margin: 25px;
	}

	.block{
		height: 60px;
		width: 100px;
		background-color: black;
		position: absolute;
		border: 2px solid white;
		padding-top: 40px;
		text-align: center;
	}

	#square1_1{top: 0px; left: 0px;}
	#square1_2{top: 0px; left: 225px;}
	#square1_3{top: 0px; left: 450px;}
	#square2_1{top: 225px; left: 0px;}
	#square2_2{top: 225px; left: 225px;}
	#square2_3{top: 225px; left: 450px;}
	#square3_1{top: 450px; left: 0px;}
	#square3_2{top: 450px; left: 225px;}
	#square3_3{top: 450px; left: 450px;}

	.blockTL{top: 0px; left: 0px;}
	.blockTR{top: 0px; left: 100px;}
	.blockBL{top: 100px; left: 0px;}
	.blockBR{top: 100px; left: 100px;}

	#smallMenu ul{
		height: 425px;
		width: 150px;
		overflow-y: scroll;
		overflow-x: hidden;
	}

/* Other css not in a catagory yet.*/

	.windowButton {
		position: absolute;
		height: 20px;
		width: 20px !important;
	}

	#testingFucntions{
		margin-top: 25px;
	}

	#mainContentContainer{
		height: 710px;
	}

/*Over write JQuery UI CSS*/
	.ui-widget{
		font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
		font-size: .9em;
	}