/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~CSS RESET*/
/*attempts to remove all browser-specific settings
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~GENERAL USE CLASSES*/
/*colors*/
.red{
	background-color: red;
}
.blue{
	background-color: blue;
}
.white{
	background-color: white;
}
.orange{
	background-color: orange;
}
.yellow{
	background-color: yellow;
}
.black{
	background-color: black;
}
.tan{
	background-color: tan;
}

.centerText{
	text-align: center;
}

.pointer{
	cursor: url("images/menu/defaultCursor.cur"),auto;
}
.flash_red{
		animation: flash_red 1s infinite;
		opacity: 1;
}
@keyframes flash_red {
  50% {background-color: red;color:white;}
}
.float_right{
	float: right;
}
.float_left{
	float: left;
}
.allBlack{
	background-color: black;
	color: black;
}
.transparentButton{
	background-color: inherit;
	border: 1px solid red;
	cursor: url("images/menu/defaultCursor.cur"),auto;
	margin: 1%;
}
.offTop{
	top: -500px;
}
.onTop{
	top: 0px;
}
/*when using this, be sure that there is no transition interfering.  You may want to set transition: visibilty 0s; at the end of the element's rules (transition is comma deliniated)*/
.visibilityHidden{
	visibility: hidden;
}
.padding1percent{
	padding: 1%;
}
.compassCursor{
	cursor: url("images/menu/compass.cur"),url("images/menu/defaultCursor.cur"),pointer;
}
.compassCursor:active{
	cursor: url("images/menu/compass_turned_half.cur"),url("images/menu/defaultCursor.cur"),pointer;
}
.dragonFlyCursor{
	cursor: url("images/menu/dragonfly.cur"),url("images/menu/defaultCursor.cur"),pointer;
}
.fishCursor{
	cursor: url("images/menu/fish.cur"),url("images/menu/defaultCursor.cur"),pointer;
}
.beachballCursor{
	cursor: url("images/menu/beachball.cur"),url("images/menu/defaultCursor.cur"),pointer;
}
.beachballCursor:active{
	cursor: url("images/menu/beachball_down.cur"),url("images/menu/defaultCursor.cur"),pointer;
}
.chestCursor{
	cursor: url("images/menu/chestShut.cur"),url("images/menu/defaultCursor.cur"),pointer;
}
.chestCursor:active{
	cursor: url("images/menu/chestOpened.cur"),url("images/menu/defaultCursor.cur"),pointer;
}

.umbrellaCursor{
	cursor: url("images/menu/umbrella.cur"),url("images/menu/defaultCursor.cur"),pointer;
}
.umbrellaCursor:active{
	cursor: url("images/menu/umbrella_spun.cur"),url("images/menu/defaultCursor.cur"),pointer;
}

.shovelCursor{
	cursor: url("images/menu/shovel.cur"),url("images/menu/defaultCursor.cur"),pointer;
}
.shovelCursor:active{
	cursor: url("images/menu/shovel_swung.cur"),url("images/menu/defaultCursor.cur"),pointer;
}


.goatCursor{
	cursor: url("images/menu/goat.cur"),url("images/menu/defaultCursor.cur"),pointer;
}
.houseKeyCursor{
	cursor: url("images/menu/houseKey.cur"),url("images/menu/defaultCursor.cur"),pointer;
}
.magnifierCursor{
	cursor: url("images/menu/magnifier.cur"),url("images/menu/defaultCursor.cur"),pointer;
}
.scopeCursor{
	cursor: url("images/menu/scope.cur"),url("images/menu/defaultCursor.cur"),pointer;
}

.mooseCursor{
	cursor: url("images/menu/moose.cur"),url("images/menu/defaultCursor.cur"),pointer;
}
.mushroomsCursor{
	cursor: url("images/menu/mushrooms.cur"),url("images/menu/defaultCursor.cur"),pointer;
}
.birdCursor{
	cursor: url("images/menu/bird.cur"),url("images/menu/defaultCursor.cur"),pointer;
}

.pickaxe{
	cursor: url("images/menu/pickaxe1.cur"),url("images/menu/defaultCursor.cur"),pointer;
}
.pickaxe:active{
	cursor: url("images/menu/pickaxe2.cur"),url("images/menu/defaultCursor.cur"),pointer;
}
.pickaxeSwung{
	cursor: url("images/menu/pickaxe2.cur"),url("images/menu/defaultCursor.cur"),pointer;
}
.padlockCursor{
	cursor: url("images/menu/padlock.cur"),url("images/menu/defaultCursor.cur"),pointer;
}
/*more experimental cursors*/
.annux{
	cursor: url("images/menu/annux.cur"),url("images/menu/defaultCursor.cur"),pointer;
}
.annix{
	cursor: url("images/menu/annix.cur"),url("images/menu/defaultCursor.cur"),pointer;
}
.annix:active{
	cursor: url("images/menu/annixCharged.cur"),url("images/menu/defaultCursor.cur"),pointer;
}
.suffix{
	cursor: url("images/menu/suffix.cur"),url("images/menu/defaultCursor.cur"),pointer;
}
.blackClaw{
	cursor: url("images/menu/blackClaw.cur"),url("images/menu/defaultCursor.cur"),pointer;
}
.ant{
	cursor: url("images/menu/ant.cur"),url("images/menu/defaultCursor.cur"),pointer;
}
.ant:active{
	cursor: url("images/menu/antBite.cur"),url("images/menu/defaultCursor.cur"),pointer;
}
.poke2{
	cursor: url("images/menu/poke2.cur"),url("images/menu/defaultCursor.cur"),pointer;
}

/*for chrome*/
.chromeTile{
    margin: -1px;
}
.lightPink{
	background-color: lightpink;
}

/*transform*/
.flipToken{
	transform: scale(-1,1);
}
.scale2{
	transform: scale(2,2);
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~GENERAL*/
body
{
	/*probably best not to put anything here */
	background-color: #8d9bf7;
	margin:0px;
	font-family:Perpetua, Modern No. 20, Lucida Sans Typewriter;
	/*transition: all 5s;
	*/
}
.bodyNight{
	background-color: #0015a1;
}
.bodyLogo{
	background-color: black;
}

.checkMonthLoading{
  	top:75%;
	right: 0%;

	position: fixed;
}
.checkYearLoading{
	top:60%;
	right: 0%;
	position: fixed;
}
#tosBox{
	display:inline-block;
	position:absolute;
	top:10px;
	background-color:white;
	padding:10%;
	margin-left: 5%;
	margin-right: 5%;	
	box-shadow: 21px 31px 11px #102611;
    border-right: 1px solid tan;
    border-bottom: 1px solid tan;
}
#inputIndicator{
  margin-top: 100px;
}

.strippedButton{
	border: 1px dotted transparent;
	background-color: transparent;
	cursor:  url("images/menu/defaultCursor.cur"),auto;
	transition: all 1s;
	border-radius: 55%;
	
}
.strippedButton:hover{
	border: 1px solid gray;
	border-radius: 55%;
}
.genericButton{
	cursor: inherit;
}


.defaultPopUp{
	font-size: 24px;
	top: 20%;
	left: 50%;
	transform: translateX(-70%);
	height: 300px;
	width: 40%;
	padding: 2%;
	border-radius: 3%;
  	position: fixed;
	background-color: black;
	color: blue;
	cursor: url("images/menu/defaultCursor.cur"),auto;
}
.defaultPopUpButton{
	font-size: 24px;
	border: 2px solid blue;
	background-color: black;
	color: blue;
	float: right;
	margin: 1%;
	cursor: url("images/menu/defaultCursor.cur"),auto;
  font-family: OCR A Extended;
}
.defaultPopUpButton:hover{
	border: 2px solid black;
	background-color: blue;
	color: black;
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~dev eval box*/

#evalBox{
  position: fixed;
	width: 400px;
	height: 400px;
	background-color: blue;
	top: 0px;
}
#evalInput{
	height: 380px;
	width: 300px;
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~logos*/


.centeredLogo{
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15%;
}
.logoToTheSide{
	margin-left: 4%;
	margin-top: -5%;
	float: right;
	position: fixed;
	width: 5%;
	transition: all 2s;
	cursor: url("images/menu/defaultCursor.cur"),auto;
}
.logoToTheSide:hover{
	width: 5.3%;
}
/*
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~HEADER*/
/*
OBSOLETE!
#headerbox {
	
	background-color: #5c755e;
	margin:10px;
	height: 165px;
	border-radius: 5px;
	width:105%;
}

#header {
	/*position:fixed;*//*
	top:5px;
	background-color: grey;
	margin:15px;
	height: 155px;
	border-radius: 5px;
	width:1200px;
}

#logo{
	float:left;
	width: 150px;
	height: 150px;
	border: 3px solid black;
	background-image: url("dslogo.jpg");
}

*/
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=HEADER BUTTONS*/
/*
OBSOLETE!

div.sideInfoNarrow:hover {
	opacity: 0.8;
	background-color: black;
	width: 8px;
	transition: all 2s;
}


#tabbox {
	background-color:  #ad9161;
	height:50px;
	width: 900px;
	margin-right: auto;
	margin-left: auto;
}

#tabs {
	background: #baad8f;
	border: 5px solid;
		border-radius: 5px;
		border-color:#ad9161;
		border-left:#2d1b08;
		border-right:#2d1b08;
		border-bottom:#2d1b08;
	font: 700 13px Georgia;
	height: 30px;
	line-height: 28px;
	padding: 0 20px;
	text-align: center;
	margin-right: 10px;
	box-sizing: border-box;
	transition: border .3s ease-in-out;

	//padding: 0;
	list-style-type: none;
	display:inline;
	color: #2d1b08;
	text-decoration: none;
	float: left;

}
#tabbox button:hover {
	border: 10px solid;
		border-radius: 8px;
		border-color:#ad9161;
		border-left:#ad9161;
		border-right: #ad9161;
		border-bottom:#2d1b08;
	background-color: #bcb093;

}
*/
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~Tutorial (pointer)*/
#thePointer{
	position: fixed;
	background-color: transparent;
	height: 450px;
	width: 29px;
	background-repeat: no-repeat;
	transition: all 1s;
}
/*position will largely be set by javascript, but here's a defautl position*/
.pointerDefaultPos{
	top:50px;
	left: 50px;
}
#restartTutorialButton{
	margin-left: 1%;
}

/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~Link display*/

#linkDisplay{
	position: fixed;
	width: 1000px;
	height: 50px;
	transition: all 3s;
	left: 2%;
	font-family: garamond;
}
#linkDisplay:hover{
	background-color: ivory;
}
.linkDisplayMaximized{
	bottom: 10px;
}
.linkDisplayMinimized{
	bottom: -30px;
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~SCROLLERS
little boxes which when mouseovered move you in that direction
by using hover and having the elements flick back and forth, we can repeatedly trigger the onmouseover event and scroll without any timouts!
*/
.scroller{
	position: fixed;
	background-color: red;
	opacity: 0;
	transition: all 0.8s;
}
.scroller:hover{
	opacity: 0.1
}
#leftScroller{
	top: 0%;
	height: 100%;
	left:0%;
	width: 10%;
	cursor: url("images/menu/scrollLeft.cur"),auto;
}
#leftScroller:hover{
	width: 1%;
}
#rightScroller{
	top: 0%;
	height: 100%;
	right:0%;
	width: 10%;
	cursor: url("images/menu/scrollRight.cur"),auto;
}
#rightScroller:hover{
	width: 1%;
}
#upScroller{
	height: 8%;
	top:0%;
	width: 100%;
	cursor: url("images/menu/scrollUp.cur"),auto;
}
#upScroller:hover{
	height: 1%;
}
#downScroller{
	height: 8%;
	bottom:0%;
	cursor: url("images/menu/scrollDown.cur"),auto;
	width: 100%;
}
#downScroller:hover{
	height: 1%;
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~settings menu*/
#settingsMenu{
	background-color: white;
	position: fixed;
	border-radius: 15px;
	top:50%;
	margin-left: 13%;
	padding: 1%;
	background-color: black;
	color: blue;
	font-style: bold;
	font-size: 23px;
}

#settingsMenuButton{
	position: fixed;
	top: 0px;
	left: 20%;
	background-color: black;
	border: 1px solid white;
	border-top: none;
	color: white;
	opacity: 0.1;
}
#settingsMenuButton:hover{
	color: black;
	background-color: blue;
	opacity: 1;
}

#close_settings_button{
	border: 1px solid blue;
	background-color: black;
	float: right;
}
#close_settings_button:hover{
	color: black;
	background-color: blue;
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~LOAD AREA*/


#uploadSave{
	background-color: white;
	border-radius: 15px;
	background-color: black;
	color: blue;
	font-style: bold;
	font-size: 23px;
	border: 2px solid blue;
	padding-right: 0.6%;
	width: 44%;
}
.loadButton{
	color: blue;
	font-size: 23px;
	margin: 2px;
}
.loadButton:hover{
	color: black;
	background-color: blue;
	border: none;
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~POINTBOX*/

/*pointBox.style.position = "fixed";
			pointBox.style.top = "25%";
			pointBox.style.left = "25%";*/

#pointBox{
	width: 50%;
	font-size: 14px;
	background-color: white;
	position: fixed;
	border-radius: 15px;
	padding: 5px;	
	transition: all 2s;
	left:25%;
		border-top: 0px solid wheat;
	border-left: 0px solid wheat;
}
#pointB
#pointBoxTitle{
	text-align: center;
	font-size: 20px;
}
.offGrid{
	top:-100%;
}
.pointBox_thirdOpacity{
	top:25%;
	color: #973d9c;
	opacity: 0.3;
}
.pointBox_thirdOpacity:hover{
	opacity: 1;
	color: #973d9c;
	box-shadow: 1px 10px 11px #102611;
}
.pointBox_tutorialMode{
	top:60%;
	color: #973d9c;
	opacity: 1;
}
.pointBox_tutorialMode:hover{

	
	
}
.pointDetailBox{
	float: right;
	border: 2px solid gray;
	border-radius: 15px;
	padding: 10px;
}


#pointBox:hover{
	opacity: 1;
	color: #973d9c;
	border-top: 6px solid #c74fff;
	border-left: 6px solid #c74fff;
	
}
#pointsToBeMadeBox{
	margin-top: 2%;
	color: saddlebrown;
	text-align: center;
	font-size: 18px;
}
.objectiveCheckBox{
	transform: scale(1.5);
	margin: 5px;
	cursor: url("images/menu/defaultCursor.cur"),auto;
}

.objective_already_met{
	color: #ad82b0;
}
.rare_objective{
	color:#bf1ec9;
	font-style: bold;
	transition: all 1s;
}
.rare_objective:hover{
	font-size: 115%;
	color:#ea25f7;
}

#lifetimeObjectivesMet{
	float: right;
	padding-right: 4%;
}

#declareObjectivesButton{
	background-color: pink;
	color: purple;
	box-shadow: none;
	transition: all 2s,visibility 0s;
	border: 4px solid transparent;;
	border-top: 1px solid black;
	border-left: 1px solid black;
	margin-bottom: 1%;
	border-radius: 5px;
	padding: 2px 1px 1px 1px;
	cursor: url("images/menu/defaultCursor.cur"),auto;
}
#declareObjectivesButton:hover{
	background-color: purple;
	color: white;
		box-shadow: 3px 4px 4px black;
	border: 1px solid transparent;
  border-top: 4px solid black;
	border-left: 4px solid black;
}
.genericCheckbox{
	opacity: .5;
}
.genericCheckbox:hover{
	opacity: 0.8;
}
.genericCheckbox:checked{
	opacity: 1;
}
#additionalChallengeBox{
	
}
#declareObjectivesButton:active{
	/*do this to lower the text*/
	padding: 3px 1px 1px 1px;
}
#mayorDetailBox{
	float: right;
	width: 25%;
	background-color: whitesmoke;
}
.mayor_initial_portrait{
	width: 20px;
	height: 30px;
	float: right;
}
#declareObjectivesButton:active{
	/*do this to lower the text*/
	padding: 3px 1px 1px 1px;
}
#regenerateButton{
	float:right;
	background-color: grey;
	transition: all 1s;
	margin-right: 20px;
}
#regenerateButton:hover{
	float:right;
	background-color: red;
	color: white;
}
#loadArea{
	float: right;
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~/*NEIGHBOR CITY DISPLAY*/

#showNeighborCityDetailsButton{
	left: 10%;
	position: fixed;
	background-color: whitesmoke;
	opacity: .4;
	transition: all 1s;
}
#showNeighborCityDetailsButton:hover{
	opacity: 1;
}
#neighborCityBox{
	background-color: snow;
	border: none;
}
#neighborCityBoxN{
	position: fixed;
	left: 50%;
	top: 15%;
	color: initial;
	background-color: inherit;
}
#neighborCityBoxE{
	position: fixed;
	right: 10%;
	top: 25%;
	color: initial;
	background-color: inherit;
}
#neighborCityBoxS{
	position: fixed;
	left: 25%;
	top: 55%;
	color: initial;
	background-color: inherit;
}
#neighborCityBoxW{
	position: fixed;
	left: 10%;
	top: 25%;
	color: initial;
	background-color: inherit;
}

/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~/*TABS*/
#topTabBox{
	opacity: 0.3;
}
#topTabBox:hover{
	opacity: 1;
}
.topTab{
	height: 90px;
	width: 0px;
	position: fixed;
	top: -90px;
	transition: all 1s;
	border-bottom: : 10px solid black;
}
.topTab:hover{
	/*transform: scale(1,0.9)  translate(0,10%);*/
}
.topTabProminent{/*not used*/
	height: 90px;
	width: 200px;
	position: fixed;
	top: -80px;
	right: 30%;
	transition: all 1s;
}
.topTabProminent:hover{
	/*do nothing as we're already on that tab*/
}
.topTabSwitcher{
	border-radius: 10px 10px 0px 0px;
	position: absolute;
	top: 100%;
	background-color: white;
	padding: 4px;
	left: 35%;
	border: 1px solid black;
}
.topTabSwitcherProminent{/*sane as above but inherits its backgroundcolor*/
	border-radius: 10px 10px 0px 0px;
	position: absolute;
	top: 100%;
	border: 1px solid black;
	background-color: inherit;
	padding: 4px;
	left: 35%
}

.topTabSwitcher:hover{
	background-color: inherit;
	height: 16px;
	transform: translate(0,3px);
}

#squarimanderTab{
	right: 21%;
	background-color: #7daaff;
}
#newspaperTab{
	right: 27.8%;
	background-color: #fffb7d;
}
#campaignTab{
	right: 34%;
	background-color: #ff6969;
}
#budgetTab{
	right: 39%;
	background-color: #a1ffb2;
	cursor: url("images/menu/defaultCursor.cur"),auto;
}
#mapTab{
	right: 42%;
	background-color: #a19678;
}

/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~TOPBAR*/

#topBar{
	position: fixed;
  	background-color: black;
	height: 100px;
	right: 0px;
	border-radius: 0px 0px 0px 20px;
	transition: all 3s;
	
}
/*it shoots up quickly and comes back down slowly, allowing you to access what's below
NIXED*/
#topBar:hover{
	/*top:-200%;
	border-radius: 0px 0px 20px 20px;
	transition: all 1s;*/
}
#balanceDisplay{
	color: #69ff5e;
	position: relative;
	font-family: OCR A Extended;
	font-size: 40px;
	/*cursor: url("images/menu/defaultCursor.cur"),auto;*/
}
#balanceDisplayChange{
  color: #69ff5e;
	position: relative;
	font-family: OCR A Extended;
	font-size: 40px;
	/*cursor: url("images/menu/defaultCursor.cur"),auto;*/
	float:right;
}

/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~SIDEINFO*/
/*expanded*/
/*

		//total element
		var sideInfo = overwriteBox("sideInfo","map","","left","10%","","black");
		sideInfo.style.padding = "10px";
		sideInfo.style.top = "0%";
		sideInfo.style.left = "0";
		sideInfo.style.position = "fixed";
		//transition for when we minimize it
		sideInfo.style.transition = "all 2s";
		sideInfo.style.opacity = 0.8;

		var headerFont = "Candara";
		var numberFont = "OCR A Extended";
		sideInfo.style.fontFamily = headerFont;
*/
div.sideInfoWide {
	position: fixed;
	text-align: left;
	color: white;
	background-color: black;
	padding: 10px;
	border-radius: 0px 0px 20px 0px;
	top: 0%;
	left: 0px;
	width: 10%;
	/*height: 370px;*/
	opacity: .8;
	transition: all 2s;
	font-family: Candara;
}

/*
div.sideInfoWide:hover{
	opacity: 1;
	background-color: tan;
	border-right: 2px dotted black;
	border-radius: 0px;
}
*/
/*minimized*/
div.sideInfoNarrow {
	position: fixed;
	text-align: left;
	color: white;
	background-color: gray;
	padding: 10px;
	border-radius: 0px 0px 20px 0px;
	top: 0%;
	left: 0px;
	/*height: 370px;*/
	transition: all 2s;
	font-family: Candara;

	/*changing part*/
	width: 1px;
	opacity: 0.5;
}
div.sideInfoNarrow:hover {
	opacity: 0.8;
	background-color: gray;
	width: 8px;
	transition: all 2s;
}

div.yearlyBoxDisplayed {
	transition: all 2s;
	opacity: 1;
}

div.yearlyBoxMinimized {
	transition: all 2s;
	visibility: hidden;
	opacity: 0;
}
.numberInfo{
	font-family: OCR A Extended;
}
/*
sideInfoMinimizer.setAttribute("onclick","minimizeSideInfo();");
		sideInfoMinimizer.style.float = "right";
		sideInfoMinimizer.style.cursor = "pointer";
*/
#sideInfoMinimizer{
width:10%;
	height:100%;
	top:0%;
	
}
.sideInfoMinButtonMax {
	transition: all 2s;
	cursor: url("images/menu/defaultCursor.cur"),auto;
	position: fixed;
	margin-left: 1%;
	top: 45%;

}
.sideInfoMinButtonMin {
	transition: all 2.4s;
	position: fixed;
	top: 45%;
	cursor: url("images/menu/defaultCursor.cur"),auto;
	opacity: 0.5;
	margin-left: -9%;
}
div.sideInfoMinButtonMin:hover {
	transition: all 2s;
	float: left;
	cursor: url("images/menu/defaultCursor.cur"),auto;
	opacity: 1;

}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~MUSIC*/
#musicBox{
	position: absolute;
	top: 5%;
	left: 40%;
}
#playOrStopMusicButton{
	background-color: transparent;
	border: 2px solid yellow;
	margin-left: 0%;
}
#musicNameDisplay{
	color: lightgray;
	transition: all 4s;
}
#musicNameDisplay:hover{
	color: gold;
}

/*==============================================timeControls*/


#timeControls{
 
	border:1px solid black;
	width: 100px;
						/*height: 80px; */
	background-color: grey;
	display:inline-block;
	border-radius:3xp;
	margin:2px;
	box-shadow: inset 0 0 15px black;
	transition: box-shadow .3s ease-in-out;


}
#timeControls:hover {
	box-shadow: inset 0 0 10px black;
}

#playControls{
	position: fixed;
	width: 400px;
	/*height: 50px;*/
	opacity: 0.2;
	border-radius: 25px;
	left: 40%;
	top: 90%;
	background-color: grey;
	transition: all 1s;
}
#playControls:hover{
	opacity: 1;
}
#playButton{
	width: 70px;
	height: 25px;
	/*line-height: 25px;*/
	font: 700 12px Californian FB;
	border-radius: 15px;
	text-align: center;
	transition: color 3s;
	transition: background-color 1s;
	cursor: url("images/menu/defaultCursor.cur"),auto;
}
#playButton:hover{
	color: black;
	background-color: #f0dd60;
}
#playButton:active{
	/*do this to lower the text*/
	padding: 3px 0px 0px 0px;
}
.playButtonPaused{
  	background-color: red;
  	color:white
}
.playButtonPlaying{
	background-color: green;
 	color:black;
}
#playSpeedIndicatorBox{
	float: right;
	background-color: yellow;
	height: 20px;
	transition: all 0.5s;
	opacity: 1;
}
.normalSpeed{
	position: absolute;
	width: 20px;
  left:20%;
	top: 0%;
		background-color: white;
	
}
.doubleSpeed{
	position: absolute;
	width: 45px;
  left:20%;
	top: 0%;
	background-color: orange;
}
.quadrupleSpeed{
	position: absolute;
	width: 70px;
	left:20%;
	top: 0%;
	background-color: yellow;
}
.excessSpeed{
	position: absolute;
	width: 70px;
	left:20%;
	top: 0%;
	background-color: red;
}
#playSpeedOverlay{
	position: absolute;
	width: 90px;
}
#playSpeedSliderContainer{
	position: fixed;
	left: 45%;
	top: 93%;
	width: 90px;
	height: 20px;
	background-color: gray;
	border-radius: 0px 0px 15px 15px;
}
.playSpeedSlider{
	 -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 25px; /* Specified height */
    background: transparent; /* Grey background */
    outline: none; /* Remove outline */
}
.playSpeedSlider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 15px; /* Set a specific slider handle width */
    height: 15px; /* Slider handle height */
    background: black; /* Green background */
    cursor: url("images/menu/defaultCursor.cur"),auto; /* Cursor on hover */
	border: 1px solid white;
}

.playSpeedSlider::-moz-range-thumb {
    width: 15px; /* Set a specific slider handle width */
    height: 15px; /* Slider handle height */
    background: black; /* Green background */
    cursor: url("images/menu/defaultCursor.cur"),auto; /* Cursor on hover */
	border: 1px solid white;
}


#advanceOneDayButton{
	height: 30px;
	font: 700 13px Californian FB;
	float:right;
	padding: 0px 5px 10px 5px;
	border-radius: 15px;
	text-align: center;
  	color:black;
	transition: color 3s;
	transition: background-color 1s;
	font-size: 10px;
	cursor: url("images/menu/defaultCursor.cur"),auto;
}
#advanceOneDayButton:active{
	/*do this to lower the text*/
	padding: 3px 5px 10px 5px;
}
#dateDisplay{
	background-color: black;
	float: right;
	padding: 3px;
	text-align: center;
	opacity: 1;
	margin-right: 10px;
	border-radius: 5px;
	margin-top: 3px;
	/*color:#ebd3d3;*/
}
#monthDisplayBox{
	margin-left: 5px;
	margin-right: 5px;
}

.date{
	color:white;
	float: left; 
	border:1px solid #44442c;
	border-right:2px solid #44442c;
	border-right:2px solid #44442c;
}
.dateFaded{
	color:#ebd3d3;
	float: left; 
	border:2px solid #44442c;
}
/*==================cityNameDisplay*/
#cityNameDisplay{
	font-family: "Garamond";
	position: fixed;
	transition: all 5s;
	cursor:default;
	height: 1px;/*need 1px to avoid blocking tiles*/
}
.cityNameIntro{
	color: #ffbb00;
	bottom:50%;
	opacity: 1;
	width: 100%;
	font-size:50px;
	text-align: center;
}
.cityNameSet{
	color: tan;
	bottom:15%;
	opacity: 1;
	width: 100%;
	font-size:25px;
	text-align: center;
	transition: all 10s;
}
.cityNameSet:hover{/*similar to intro, but not in the middle*/
	color: #ffbb00;
	opacity: 1;
	bottom:30%;
	width: 100%;
	font-size:50px;
	text-align: center;
}
#theCityOfLabel{
	display: inline-block;
	color: black;
	font-size: 15px;
	font-family: "Times New Roman";
	font-style: italic;
	margin-right: 5px;
	transition: all 10s;
}
.theCityOfLabelSet{
	opacity: 0;
	transform: scale(0.1);
}
#theCityNameItself{
	display: inline-block;
}
/*==================objectiveTracker*/
#objectiveTracker{
	height: 20px;
	position: absolute;
	top: 7%;
	font-size: 15px;
	right: 10%;
	font-family: garamond;
	cursor: url("images/menu/defaultCursor.cur"),auto;
}
#objectiveTracker:hover{
	font-size: 15px;
	opacity: 1;
}
.objective_not_met{
	color: #fae6af;
	width: 340px;
		transition: all 2s;
}
.objective_not_met:hover{
	color:black;
	transform: scale(1.1);
		transition: all 2s;
}
.objective_met{
	color: #00ff2f;
		transition: all 2s;
}
.objective_met:hover{
	color: #00ff2f;
	transform: scale(1.1);
		transition: all 2s;
}
/*
************************
*/
/*==================playPauseButton*/


.timeButton
{

	margin-right: auto;
	margin-left: auto;
	background-color: grey;
	color:black;
	font: 700 13px Georgia;
	height: 25px;
	width: 20px;
	line-height: 25px;
	padding: 0 20px;
	text-align: center;
	margin: 0px;
	box-sizing: border-box;
	
	border:1px solid #44442c;
	
	transition: box-shadow 1s ease-in-out;
	transition: text-shadow 1s ease-in-out;
	/*must be in this order*/
	transition: color 3s ease-in;
	transition: background-color 1s ease-in;

	padding: 0;
	list-style-type: none;

	display:block;

	text-decoration: none;
	float: left;


}
#playPauseButton{
	background-color: red;
	width:40px;
	border-radius: 30%;
	box-shadow: inset 0 0 15px black;
}

#gameQuadrupleSpeedButton{
	width:40px;
}
.timeButton:hover {
	box-shadow: inset 0 0 56px black;
	font-size:95%;
	background-color: red;
	color:gold;
	text-shadow: 2px 2px 2px black;
	text-shadow: 2px 2px 8px grey;
	
}

/*clock*/
#clockBox p{
	font-size: 20px;
	font-family:  "SimSun";
	color:white;
	text-align: right;
	margin-right: 10px;
}

/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~SOLICITATIONS*/
/*the pup solicitorTray has three modes.  
First, showing the whole popup.  
Second, just showing the header.  
Third, hidden except for its minimizer.
The solicitor tray should typically be invisible, only visible if there is a solicitation.
*/
#solicitorTray{
	position: fixed;
	top: 100px;
	font-family: Corbel;
	right:0px;
}
#solicitation{
	position: fixed;
	width: 200px;
	height: 20px;
	right:55%;
	background-image: linear-gradient(white 20%,antiquewhite);
	border-radius: 50% 50% 0% 0%;
	transition: all 1s;
	text-align: center;
}
#minimizeSolicitationButton{
	background-color: transparent;
	color: yellow;
	border: none;
	position: absolute;
	left: 100%;
}
.solicitation_minimized{
  	right: 0px;
  	width: 200px;
	height: 200px;
  	left:0px;
	top:0px;
}
.solicitation_maximized{
	right:0%;
	text-align: left;
}
.solicitationPortrait{
	position: absolute;
	width: 200px;
	left:-20px;
	margin-top: 20px;
	border: 15px dashed saddlebrown;
	top: 0%;
}
.solicitationPortrait_minimized{
	position: absolute;
	width: 100px;
	left:20px;
	margin-top: 20px;
	border: 15px dashed saddlebrown;
	top: 0%;
}
.solicitation_link_to_dossier{
	background-color: tan;
	border: none;
	float: left;
	padding: 0px;
	border-radius: 50% 50% 0% 0%;
	text-align: center;
	font-size: 17px;
	width: 100%;
	position: absolute;
	left: 0%;
	cursor: url("images/menu/defaultCursor.cur"),auto;
}
/*
this one will be the same and inherit opacity from the solicitor tray, like the portrait.  
javascript will control the solicitationText's visibility.
*/
.speechBubble{
	width: 300px;
	margin-top: 10px;
	margin-left: 250px;
	padding: 10px;
	border-radius: 10px 10px 10px 0px;
	background-color: #f2eae6;
	top: 200px;
	right: 0px;
	font-family: Georgia;
	cursor: url("images/menu/defaultCursor.cur"),auto;
	text-align: left;
}
.speechBubble_minimized{
	width: 300px;
	margin-top: 10px;
	margin-left: 180px;
	padding: 10px;
	border-radius: 10px 10px 10px 0px;
	background-color: #f2eae6;
	top: 200px;
	right: 0px;
	font-family: Georgia;
	cursor: url("images/menu/defaultCursor.cur"),auto;
	text-align: left;
	
}
.solicitationText{ /*the default text*/
  transition: all 0.3s;
}
.solicitationGoAwayButton{
  background-color: black;
	color: grey;
	border:1px dashed black;
  position: absolute;
	right:-240px;
	opacity: 0.5;
	font-family: Bahnschrift;
	transition: all 1s;
}
.solicitationGoAwayButton:hover{
	color:black;
	background-color: #ff2200;
	border: 3px dashed black;
	opacity: 1;
}
.conversationButton{
	margin-top: 15px;
	margin-left: 250px;
	text-align: left;
	width: 300px;
	font-family: Georgia;
	transition: all 1s;
	color: darkslategray;
	border: 2px dashed transparent;
	padding: 10%;
	padding-top: 4%;
	padding-bottom: 4%;
	font-size: 15px;
	cursor: url("images/menu/defaultCursor.cur"),auto;
	text-align: center;
}
.conversationButton:hover{
	color: black;
	border: 6px solid gold;
	transform: scale(1.2,1.2);
	background-color: white;
	border-radius: 45% 45% 45%;
}
/*
for conversationButtonHolder
*/
.conversationButtonHolderHidden{
  opacity: 0;
	filter: blur(20px);
	transition: all 1s;
}
/*decided against this
.conversationButtonHolderHidden:hover{
	opacity: 1;
	color:black;
	filter:none;
	transition: all 1s;
}
*/
.conversationButtonHolderShown{
	color:black;
	transition: all 1s;
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~displayed notes*/

.displayedNotes{
  margin-left: 15%;
}

.citLedgerDisplayBox{
	padding: 1%;
	width: 40%;
	margin-left: 20%;
	background-color: tan;
	padding: 1%;
}
.citDisplayNotes{
	width: 70%;
	background-color: tan;
	margin: auto;
	padding: 1%;
	margin-top: 1%;
}

/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~messageBox*/
#messageBox{
	position: fixed;
	top: 150px;
	background-color: black;
	transition: all 1s;
}
.messageBoxMin{
		right: -130px;
}
.messageBoxMax{
	right: 30px;
}
.messageBoxPortrait{
	width: 30px;
	height: 30px;
}
.message{
	width: 100px;
	border: 2px solid saddlebrown;
}
.open_message_button{
	width: 70%;
	margin: auto;
	background-color: tan;
}
.open_message_button:hover{
  border: 2px solid transparent;
}
.disregard_message_button{
	background-color: tan;
	margin-left: 25%;
}
.disregard_message_button:hover{
  border: 2px solid transparent;
}
#Show_Or_Hide_Message_Button{
	float: right;
	background-color: black;
	border: 2px solid white;
	color: white;
}
.flash_button{
		animation: flash 1s infinite;
}
@keyframes flash {
  50% {background-color: lightgreen;}
}

.windy5{
		animation: skew5 4s infinite;
}
@keyframes skew5 {
  50% {transform: skew(5deg);}
}
.windy10{
		animation: skew10 5s infinite;
}
@keyframes skew10 {
  50% {transform: skew(10deg) scale(1,0.9);}
}
.windy20{
		animation: skew20 4s infinite;
}
@keyframes skew20 {
	70%{transform: scale(1,0.7)}
}

/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~MAPCOMPUTER*/
	/*var computerTest = cImg("computerTest","map","",deUrlImg(computerInterface));
	//computerTest.style
	//CSS2Properties(9) { width → "400px", height → "400px", display → "block", position → "absolute", top → "200px", left → "200px", "background-color" → "transparent", "background-image" → "url(\"images/menu/computer!!.png\")", "background-repeat" → "no-repeat" }
	//computerScreen.style
	//CSS2Properties(13) { width → "180px", display → "block", "background-color" → "black", color → "royalblue", position → "absolute", top → "60px", left → "65px", height → "150px", "font-family" → "OCR A Extended", "border-top-left-radius" → "8px", … }
	*/


#mapComputer{
	width: 300px;
	height: 310px;
	display:block;
	position:fixed;
	left:300px;
	background-color: transparent;
	background-image: url("images/menu/computer.png");
	background-repeat: no-repeat;
	transition: all 2s;
	font-size: 10px;
	transform: scale(1.5);
	cursor: url("images/menu/defaultCursor.cur"),auto;
}
.mapComputerDisplayingInfo{
	

}
.hideMapComputer{
	top:-300px;
	opacity: 0.1;
}
#mapComputer:hover{
	top:80px;
	opacity: 1;
}
.showMapComputer{/*same as hover, just perminant*/
	top:80px;
	opacity: 1;
}
.showMapComputerLeft{/*same as above, but moved to the left*/
	top:80px;
	opacity: 1;
	margin-left: 800px;
}
.skootButton{
  width: 50px;
	height: 50px;
	position: absolute;
	top: 40%;
	background-color: transparent;
	border:none;
	color:tan;
	font-family: OCR A Extended;
	font-size: 45px;
	opacity: 0.1;
	transition: all 2s;
	
}
.skootButton:hover{
	opacity: 1;
}
#mapComputer:hover{
	opacity: 1;
}
#skootMapComputerLeftButton{
	right: 0%
}
#skootMapComputerRightButton{
  right: 80%;
}
#mapComputerOffScreen{/* basically the other one will display over this */
	width: 180px;
	height: 150px;
	display:block;
	position:absolute;
	background-color: black;
	color: black;
	top:60px;
	left:65px;
	font-family: OCR A Extended;
	border-radius: 8px;
}
#mapComputerScreen{
	width: 180px;
	transition: width 1s, color 5s;
	display:block;
	position:absolute;
	
	left:65px;
	font-family: Consolas;
	border-radius: 8px;
	transition: all 5s;
	overflow: hidden;
}
.mapComputerScreenOn{
	background-color: #262a40;
	height: 150px;
	width: 180px;
	top:60px;
	transition: all 5s;
	color: royalblue;
	line-height: 12px;
}
.mapComputerScreenOff{
	background-color: black;
	height: 0px;
	width: 0px;
	top:120px;
	border-radius: 0px;
	color: black;
	transition: height 3s;
	line-height: 9px;
}
#computerOnButton{
  	position: absolute;
	top:226px;
	left:65px;
	background-color: #4d4737;
	color:#7eff47;
	
}
.map_computer_switch_in_off_position{
	border: none;
	border-right: 4px solid gray;
}
.map_computer_switch_in_on_position{
	border: none;
	border-right: none;
	border-left: 4px solid gray;
}
/*invisible buttons that correspond to locations on the keyboard*/
#computerYesButton{
	position: absolute;
	top:256px;
	left:55px;
	height: 40px;
	width: 60px;
	background-color: transparent;
	border: none;
	font-size: 40px;
	opacity: 0;
	transition: all 10s;
}
#computerYesButton:hover{
	opacity: 1;
}
#computerNoButton{
	position: absolute;
	top:256px;
	left:245px;
	height: 40px;
	width: 60px;
	background-color: transparent;
	border: none;
	font-size: 40px;
  opacity: 0;
	transition: all 10s;
}
#computerNoButton:hover{
	opacity: 1;
}
/*==============================================floppies*/
#floppySpace{
	opacity: 1;
	transition: all 1s;
	/*it gets really tall and high in order to hide the floppies, no matter how many you have*/
	height: 1450px;
	width: 70px;
	margin-top: -1410px;
	margin-left: 150px;
	background-color: #5e5335;
	border-left: 3px solid brown;
	border-bottom: 3px solid brown;
	border-radius: 15px;
}
#floppySpace:hover{
	height: 150px;
	margin-top: 0px;
	width: 600px;
	opacity: 1;
	background-color: darkkhaki;
	border: 3px solid gold;
	margin-left: 250px;
}
/*floppy color shall be set in javascript!*/
.floppy_inserted{
	/*color is just for testing now*/
	position: absolute;
	top:234px;
	left:180px;
	background-color: green;
	width: 65px;
	height: 10px;
	transform: skew(20deg);
	font-size: 5px;
	color: transparent;
	transition: all .3s;
}
.floppy_label{
	background-color: white;
	color:black;
}
.floppy_popped_out{
	overflow: hidden;
	position: "relative";
	float:left;
	margin: 10px;
	width: 65px;
	height: 60px;
	font-size: 10px;
 	border-bottom: 4px solid white;
	font-size: 10px;
	padding: 2px;
	transition: all 0s;
}


/*==============================================floppy programs*/
#demandControlBox{
	height: 150px;
	width: 180px;
	top:60px;
	padding-left: 40px;
	transition: all 5s;
	color: royalblue;
	line-height: 12px;
}
.demandGraph{
	background-color: transparent;
}

/*==============================================computer catalogue*/
#computerCatalogue{
	width: 960px;
	height: 900px;
	background-color: transparent;
	background-repeat: no-repeat;
	position: absolute;
	top: 1100px;
	filter: blur(1px);
	transition: all 1s;
	transform: rotate(3deg);
}
/*gives a cool focus effect*/
#computerCatalogue:hover{
	filter: blur(0px);
}
.computerCatalogueMinimizeButton{
	top:20%;
	background-color: tan;
	border: none;
	position: absolute;
	top: 10%;
	right: 0;
}
#computerCatalogueminimized{
	width: 100px;
	background-color: tan;
	height: 100px;
	float: left;
}
#buyMapComputerButton{
	width: 150px;
	height: 60px;
	position: absolute;
	left: 280px;
	top: 560px;
	transition: all 2s;
}
.buyMapComputerButtonUnbought{
	color: transparent;
	border: none;
	cursor: url("images/menu/defaultCursor.cur"),auto;
	background-color: transparent;
	transition: all 2s;
	font-size: 50px;
	border-radius: 45px;
}
.buyMapComputerButtonUnbought:hover{
	color:red;
	border: 4px dashed red;
}
.buyMapComputerButtonBought{
	color:red;
	border: 4px dashed red;
	filter: blur(1px);
	cursor: url("images/menu/defaultCursor.cur"),auto;
	background-color: transparent;
	font-size: 50px;
	transition: all 2s;
}
#buyDemandOnDemandButton{
	width: 120px;
	height: 160px;
	position: absolute;
	left: 480px;
	top: 190px;
}
#buyBuildingInformatizerButton{
	width: 120px;
	height: 160px;
	position: absolute;
	left: 480px;
	top: 350px;
}
#buyQuickSenseButton{
	width: 120px;
	height: 160px;
	position: absolute;
	left: 600px;
	top: 190px;
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~employee Interface*/
.employeeInterface{
	float: left;
	background-color: navajowhite;
	border-radius: 0% 15% 0% 0%;
	font-size: 11px;
}
.showOrHideEmployeeInterfaceButton{
	border: none;
	background-color: navajowhite;
	font-size: 10px;
	border-radius: 60% 60% 0% 0%;
	border: 1px solid black;
	float: left;
  position: relative;
}
.employeeInterfaceClosed{
	height: 100px;
	width: 100px;
	background-color: navajowhite;
	float: left;
}
.employeeInterfaceOpen{
	height: 100px;
}
.individualEmployeeInterface{
	font-size: 16px;
	cursor: url("images/menu/defaultCursor.cur"),auto;
}
#assistantInterface{
	width: 100px;
	margin: 1%;
}

/*==============================================costTab*/
/*between settings and the general tabs*/
#costTabMinimizer{
	position: fixed;
	top:0px;
	padding:5px;
	opacity: 0.5;
	border-radius: 0px 0px 10px 10px;
	background-color: tan;
	left: 52%;
	/*left: 765px;*/
	transition: all 1s;
}
#costTabMinimizer:hover{
	opacity: 1;
}

/*old one*/
#costTab{
	position: fixed;
	background-color: seashell;
	color: black;
	top: 0%;
	margin-top: -47.5%;
	padding:10px;
	padding-top: 30px;
	padding-left: 15px;
	left: 49.3%;
	transition: all 2s;
	opacity: 0.3;
	cursor: url("images/menu/defaultCursor.cur"),auto;
}
#costTab:hover{
	color: aliceblue;
	top: 0px;
	opacity: 1;
	background-color: indigo;
	margin-top: 0%;
}
#costsDisplay{
	position: absolute;
	top: 90px;
	margin-left: 240px;
  color: white;
	width: 400px;
	transition: all 1.3s;
}
#costsDisplayHeader{
	background-color: #bbc1fa;
	color: black;
	border-radius: 0px 0px 10px 10px;
	border: 4px solid black;
	border-bottom: none;
}
.costsDisplayInitial{
	filter: blur(1000px);
}
.unlockedIndicator{
	border-radius: 100px;
	float: left;
	position: relative;
	top:50%;
	margin: 5px;
}
.tokenCostDisplay{
	padding: 5%;
	border-top: 3px solid black;
	border-right: 5px solid black;
	border-left: 5px solid black;
	background-color: #757896;
	color: white;
	transition: background-color 1s,color 0s;
	margin-top:-5%;
}
.tokenCostDisplay:hover{
	background-color: #bbc1fa;
	color: black;
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~mayorGenkiLevel*/
#mayorGenkiLevel{
	position: fixed;
	right: 0px;
	bottom: 10px;
	width: 90px;
	height: 118px;
}
#mayorTimeSettings{
	position: fixed;
	background-color: snow;
	border: 1px solid black;
	border-radius: 0% 3% 0% 0%;
	box-shadow: 21px 31px 11px #102611;
	padding: 1%;
	width: 300px;
	height: 350px;
	top: 20%;
	right: 50%;
}
#mayorTimeSliderContainer{
	background-color: snow;
	text-align: right;
}
.mayorTimeSlider{
	
}
#hideMayorTimeSettingsButton{
	float: right;
	height: 5%;
	font-size: 60%;
	background-color: transparent;
	border: 1px solid transparent;
	transition: all 1s;
	background-color: whitesmoke;
	
}
#hideMayorTimeSettingsButton:hover{
	border: 1px solid tan;
	background-color: whitesmoke;
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~GRID/MAP*/
/*==============================================testBox*/

#testBox{
	width:30px;
	height: 40px;
	background-color: green;
}

/*May want to make it bigger*/
/*THIS IS OBSOLETE
#gridbox iframe{

	margin-left: 140px;
	width: 100%;

}*/

.test {    

    border: 3px solid #73AD21;
}
/* can be used to adjust the location of the grid  */

.move{
	background-color: #22CC25;
/*	background-color: #cc7630;*/
	width:80%;
/*	margin-top:10px;*/
/*	margin-left:150px;*/
}



/*xxx*/
/*====================grid classes*/
#map{
	display:none;
  	border-top: 90px solid #8d9bf7;
	transition: all 10s;
	margin:30px;
	display: inline-block;
}
map.night{
	border-top: 90px solid #0015a1;
}
#map:hover{
}

#grid {
    display: table;
    width: 400px;
    background-color: #22CC25;
    width:80%;
    transition: all 5s;
	
    /*This mostly matches the labels to the cells*/
/*	background: url("map3.png");
	background-size:cover;

*/

/*	USE THIS WHEN YOU HAVE A REAL MAP (probably)
/*this makes the map stretch out to cover the grid*/
/*got this CSS randomly online*/
/*	no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
*/
}
/*this can be part of the intro*/
.gridInitial{
	filter: blur(100px);
}

#grid input[type=text]{
	border:none;
	color:grey;
	/*background: url("greenland.png");*/
	text-align: bottom;
	width:48px;
	height:48px;
	/*border: .5px dashed darkgrey; /*turn off for final game*/
	/*transition: all 10s;*/
	padding: 0px;

}
#grid input:focus {
	box-shadow: inset 0 0 15px yellow;
}
/*I'm not sure how to use this just yet!*/
.night{
	filter: brightness(50%) grayscale(80%);
}

.row { 
    display: table-row; 
}
.col { 
    display: table-cell;
}


/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~clickMenu*/
/*
what pops up when you click on a building
position is set by javascript
*/
#clickMenu{
	border-radius: 5px;
	opacity: 0.5;
	padding: 5px;
	transition: all 1s;
	filter: blur(1px) grayscale(80%);
}
#clickMenu:hover{
	opacity: 1;
	filter: blur(0px) grayscale(0%);
}
.clickMenuButton{
	border-radius: 0px 5px 5px 0px;
	border: none;
	margin: 5px;
}
/*
************************
*
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~inputMenu*/

#inputMenu{
	background-color: blue;	
	width: 100px;
	padding: .4%;
	border-right: 2px solid gray;
	border-bottom: 2px solid gray;
	border-radius: 10%;
	box-shadow: 2px 3px 11px #102611;
}
.inputButton{
	font-size: 20px;
	text-align: center;
	border-right: 2px solid black;
	border-bottom: 2px solid black;
	margin-right: 1%;
	cursor: url("images/menu/defaultCursor.cur"),auto;
}
.costImg{
	border: 3px solid transparent;
	border-radius: 30%;
	background-color: black;
	transition: box-shadow 1s;
}
.costImg:hover{
  border: 3px solid purple;
	box-shadow: 0px 0px 11px red;
}
#clearTileButton{
	width: 70%;
	background-color: white;
	text-align: center;
  	padding: none;
	border-spacing: 0;
  	text-align: center;
	cursor: url("images/menu/defaultCursor.cur"),auto;
	border-right: 2px solid black;
	border-bottom: 2px solid black;
}
#setLandCostInput{
	width: 60px;
}
#setLandCostButton{
	padding: 0px;
	padding-right: 1px;
	padding-left: 1px;
}
/*
************************
*
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~PARTY REPORTS*/

#politicalPartyNote{
	width: 400px;
  	margin: 10%;
  	padding: 10px;
  	background-color: navajowhite;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	color: darkslategray;
}


#partySatisfactionReport{
	padding: 15px;
	background-color: ivory;
	width: 20%;
	border: dashed 8px whitesmoke;
	float: right;
	margin-top: 100px;
	border-left: 1px solid grey;
}
#goodJobThings{
	color: limegreen;
}
#badJobThings{
	color: firebrick;
}

/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~PI CARD*/
#PICard{
	background-color: gainsboro;
	width: 300px;
	font-size: 13px;
	border-right:2px solid black;
	border-bottom: 1px solid black;
  float: right;
	transform: rotate(7deg);
	transition: all 3s;
	color: lightgray;
}
#PICard:hover{
	background-color: darkslateblue;
	color: white;
		border-right:2px solid black;
	border-bottom: 1px solid black;
}
#PICardTitle{
	text-align: center;
		font-size: 16px;
}
#PICardSlogan{
	text-align: center;
}
#PICardPhoneNumberButton{
	background-color: transparent;
	border: none;
	border-radius: 50%;
	padding: 2%;
	transition: all 3s;
	position: relative;
	right: 0%;

	color: transparent;
	cursor: url("images/menu/defaultCursor.cur"),auto;
}
#PICardPhoneNumberButton:hover{
	background-color: white;
	border: none;
	color: black;
}

.PICardFake{
	color: darkslateblue;
	position: sticky;
  text-align: center;
	font-size: 17px;
}
#PICardFakePhoneNumber{
	float: left;
	padding-left: 5%;
	width: 45%;
}


/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~MORTGAGE DOCS*/
#mortgageDocs{
	width: 20%;
	background-color: lemonchiffon;
  padding: 2%;
	float: left;
	border-right: 2px solid black;
	border-bottom: 3px solid black;
	border-top: 1px dashed gray;
	border-left: 1px solid tan;
}
#mortgageDocsPaymentInput{
	width: 15%;
	border: none;
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~BUY BONDS*/
#bondsForSaleBox{
	width: 130px;
	float: left;
	background-color: paleturquoise;
	margin: 4%;
	padding: 1%;
	font-size: 14px;
}
.buyBondButton{
	background-color: forestgreen;
	border: 2px solid transparent;
	border-left: 2px solid green;
	border-top: 2px solid green;
	transition: all 1s;
}
.mayorsBonds{
	float: left;
  background-color: palegreen;
	padding: 2%;
	text-align: center;
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~BILL NOTE*/
.stickyNote{
	background-color: tan;
	transform: rotate(7deg);
	width: 200px;
	border-bottom: 5px solid black;
	border-right: 1px solid black;
	font-style: italic;
	margin: 1%;
	padding: .3%;
	float: right;
}
.genericSticky{
	background-color: tan;
	width: 200px;
	border-bottom: 5px solid black;
	border-right: 1px solid black;
	font-style: italic;
	margin: 1%;
	padding: .3%;
	float: right;
}
#billStickyNote{
	float: left;
	margin:3%;
		transform: rotate(-17deg);
	height: 100px;
	width: 100px;
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~CIT DOSSIER CABINET*/
.cabinet{
	background-color: grey;
	width: 200px;
	height: 200px;
  margin-left: 1%;
}
.drawer{

}
.dossierDrawerClosed{
	background-color: lightgray;
	width: 190px;
	height: 190px;
	position: relative;
	transition:all 2s;
	top:3%;
	left: 2%;
}
.dossierDrawerOpen{
	background-color: lightgray;
	width: 190px;
	height: 190px;
	position: relative;
	transition:all 2s;
	top:23%;
	left: 32%;
}
.dossierLabel{
	background-color: bisque;
	position: relative;
	width: 50%;
	left: 25%;
	top: 10%;
	border: 2px solid gray;
	text-align: center;
}
.showDossiersButton{
	position: relative;
	top: 40%;
	left: 30%;
	padding-top: 10%;
	padding-bottom: 10%;
}

/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~INDIVI CIT DOSSIERS*/
#citDossierFile{
	background-color: tan;
	padding: 20px;
	width: 30%;
	float: right;
	margin-right: 45%;
}
.citDossierButton{
  border-radius: 30% 30% 0% 0%;
	transition: all 2s;
}
.citDossierButton:hover{
	padding-bottom:1%;
	background-color: white;
}
.citDossier{
	width: 100%;
	background-color: whitesmoke;
	top: 50%;
	left: 30%;
	
}
.dossierPortrait{
	width: 15%;
	float:left;
}
.dossierButton{
	border: 2px solid transparent;
	border-radius: 50%;
	transition: all .3s;
	color:grey;
}
.dossierButton:hover{
	border: 2px solid black;
}
.citDossierInput{
	border: none;
	border-bottom: 1px dashed black;
}
.demandSumText{
	padding-left: 7%;
}
.checkMarkForDemand{
	float: left;
	color: green;
	font-size: 24px;
	padding-left: 3%;
	padding-top: 4%;
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~PERSONAL BUDGET*/
/*====COLORS===
#dec1a1 = notecard color
#c99022 = cork color
#697569 = a grey
*/

#pledgeForm{
	transform: rotate(-1deg);
	padding: 10px;
	border-right: 3px solid black;
	border-bottom: 3px solid black;
}
#plegeForm:hover{
	border-left: 4px solid black;
}
#stockBox{
	border-radius: 5px;
		border-right: 3px solid black;
	border-bottom: 6px solid black;
}
.stockArrow{
	background-color: rosybrown;
	color: white;
	border: none;
	border-top: 1px solid white;
	border-left: 1px solid white;
	margin-left: 1%
}
#companyGraphDisplay{
	padding: 3%;
}
#stubFromATM{
	transform: rotate(-2deg);
	border-left: 2px solid black;
	border-bottom: 1px solid black;
}
.eBPill{
	box-shadow: 1px 3px 14px #102611;
	border-radius: 13px;
	border: 13px dotted springgreen;
	transform: scale(.6) rotate(25deg);
	font-size: 19px;
	background-color: lightcyan;
	transition: all 5s;
	float: left;
	cursor: url("images/menu/defaultCursor.cur"),auto;
}
.eBPill:hover{
	box-shadow: 1px 1px 44px #102611;
	transform: scale(0.8) rotate(-675deg);
}
#rentReport{
	background-color: white;
	width: 50%;
	float: left;
	padding-left: 2%;
	/*really weird things happen if you put padding elsewhere*/
}
.minimizedRentReport{
	float: left;
	background-color: white;
	padding: 1%;
}
#mayorsLedgerClosed{
	float: right;
	background-color: brown;
	width: 509px;
	height: 150px;
	border: 2px solid black;
	border-left: 1px dashed black;
	box-shadow: 4px 5px 11px #102611;
	margin: 1%;
	transform:  rotate(-3deg);
}
#rentReportmaximize{
	background-color: white;
	width: 300px;
	height: 30px;
	transform:  rotate(90deg);	
	box-shadow: 4px 1px 11px #102611;

}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=Header and some basics*/
#budget body{
	margin:0px;

									}
#budget {
	/*background: url("woodboard.jpeg");	*/
	background-color:#a1ffb2;
	/*font-size: 25px; */
	top:27px;
	position: absolute;
	width: 100%;
	height: 60px;
	/*font-family: garamond; */
	/*text-align: center;*/
	cursor: url("images/menu/magnifier.cur"),auto;
}
#campaign{
	/*background: url("woodboard.jpeg");	*/
	background-color:#ff6969;
	/*font-size: 25px; */
	top:27px;
	position: absolute;
	width: 100%;
	height: 60px;
	/*font-family: garamond; */
	/*text-align: center;*/
}
#newspaper{
	/*background: url("woodboard.jpeg");	*/
	background-color:#fffb7d;
	/*font-size: 25px; */
	top:27px;
	position: absolute;
	width: 100%;
	height: 60px;
	/*font-family: garamond; */
	/*text-align: center;*/
}
#squarimander{
	/*background: url("woodboard.jpeg");	*/
	background-color:#7daaff;
	/*font-size: 25px; */
	top:27px;
	position: absolute;
	width: 100%;
	height: 60px;
	/*font-family: garamond; */
	/*text-align: center;*/
}

#board {
	background-color:#c99022;
	margin-left:30px;
	border:30px solid darkred;
	width:2100px;
	height:1000px;
									}
#budgetlabel{
	float:left;	
									}
#budgetlabel h1{
	font-family: Freestyle Script, Times New Roman;
	margin-left: 50px;
	//margin:3px;
		
									}


.notecard{
	background-color:#dec1a1;
	//padding: 7px;
	padding-left:15px; padding-right: 15px;

	box-shadow: 2px 3px 1px #102611;
	text-shadow: 0 0 25px black;
	border: .1px solid black;
	/*border-right: 1px solid #697569;
	border-bottom: 1px solid #697569;
*/
									}

/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=Tax*/
#tax{
	width:250px;
	height:650px;	
	float: left;
	margin-top: 30px;
	margin-left: 50px;
									}
#taxBox{
  margin: 4%;
	float: right;
	background-color: lavender;
	padding: 1%;
}
.taxInput{
	width: 20%;
	float: right;
}
#residentalSection{
	background-color: lightgray;
	padding: 1%;
}
#businessTaxBox{
	background-color: aliceblue;
		padding: 1%;
}
#salesTaxBox{
	background-color: ivory;
		padding: 1%;
}
#gasTaxBox{
	background-color: bisque;
}
.declareRevertButton{
	border: 1px solid white;
}
.declareRevertButton:hover{
	border: 1px solid black;
}
									/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=Loan Box*/
#loanBox{
	float:left;
	width:600px;
	background-color: lightblue;
	margin: 20px 0px 20px 135px;
}

/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=Slider*/
.slidecontainer {
    width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 25px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: url("images/menu/defaultCursor.cur"),auto; /* Cursor on hover */
}

.slider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: url("images/menu/defaultCursor.cur"),auto; /* Cursor on hover */
}

/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~minimum wage*/
#minWageControl{
	margin: 20px;
	margin-top: 50px;
	padding: 4px;
	padding-right: 30px;
	float: left;
	background-color: #ff4d4d;
	font-family: times new roman;
	border-right: 3px solid black;
	border-bottom: 3px solid black;
	transform: rotate(-3deg);
}
#minWageInput{
	width: 30px;
}
#enactImmediatelyButton{
  margin-left: 15px;
	background-color: white;
	border: none;
	border-right: 3px solid gray;
	border-bottom: 3px solid gray;
}
#enactImmediatelyButton:hover{
	border-right: 2px solid gray;
	border-bottom: 2px solid gray;
	color: red;
}
#enactImmediatelyButton:active{
	border-right: 0px solid gray;
	border-bottom: 0px solid gray;
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~BUDGET*/

.balanceTracker{
	position: absolute;
	right:10px;
	padding: 1%;
	border: solid 2px black;
	background-color: cornsilk;
}
.balanceTrackerMinimizeButtons{
	background-color: tan;
	border: 2px dotted green;
	border-radius: 25%;
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~CAMPAIGN NOTES*/
#campaignStrategies{
	width: 600px;
	float: left;
	background-color: wheat;
	border-right: 2px solid black;
	border-bottom: 2px solid black;
}
#campaignQuickInfoBox{
	position: absolute;
	right:20%;
	width: 400px;
	background-color: seashell;
	border-radius: 5px;
	border: 2px solid black;	
	box-shadow: 1px 1px 10px black;
	text-align: left;
	padding: .3%;
	transition: all 3s;
}
#campaignQuickInfoBox:hover{
	right:40%;
}
.mayorAdDisplay{
	border: 3px solid black;
	width: 40%;
	text-align: center;
	color: white;
	background-color: black;
	box-shadow: inset -1px 1px 51px blue;
}
.opponentAdDisplay{
	border: 3px solid black;
	width: 40%;
	text-align: center;
	color: white;
	background-color: black;
	box-shadow: inset -1px 1px 51px red;
}
.adTitle{
	color: gold;
}
#currentNarrative{
	float: left;
	padding: 3%;
}
#daysLeft{
	float: right;
}
#campaignRunningAdsDisplay{
	float: left;
}
#campaignDonorsBox{
	background-color: mistyrose;
	border: 3px solid black;
	padding: 2px;
	margin: 5px;
}
#OpponentDirt{
	color: grey;
	background-color: transparent;
	border-top: 2px dotted transparent;
	border-left: 3px dotted transparent;
	border-right: 3px dotted transparent;
	border-bottom: 4px dotted transparent;
  float: right;
	padding: 2%;
	text-align: center;
	transition: all 1s;
}
#OpponentDirt:hover{
	color: black;
	background-color: antiquewhite;
	border-top: 2px dotted whitesmoke;
	border-left: 3px dotted whitesmoke;
	border-right: 3px dotted whitesmoke;
	border-bottom: 4px dotted whitesmoke;
	border-radius: 100%;
}
#dirtCheckboxBox{
  font-size: 14px;
}
#notElectionSeason{
	padding: 4%;
	background-color: blue;
	width: 80%;
	margin: 5%;
	text-align: center;
	color: white;
}
#televisionAdOptions{
	width: 100%;
}
#discardAdButton{
  float: right;	
	color: red;
	margin: 10px;
}
.campaignButton{
  border-right: 2px solid black;
	border-top: 2px solid black;
}
.surveyResultBox{
	border: 2px solid black;
}
#surveyOptions{
	width: 80%;
}
#surveyReachOptions{
	margin-bottom: 50px;
	float: right;
	width: 50%;
}
.surveyReachOptionsElement{
	text-align: center;
	background-color: #c6b9c9;
	float: left;
	border: 2px solid gray;
	border-top: none;
	border-left: none;
	padding: 1%;
	cursor: url("images/menu/defaultCursor.cur"),auto;
}
.surveyReachOptionsElement:hover{
	border: 2px solid transparent;
	border-right: 2px solid gray;
	border-bottom: none;
}
.beliefSurveyResults{
	background-color: tan;
	width: 80%;
	margin: auto;
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=narratives*/
#narrativeOptions{
}
#narrativeIssuesBox{
	position: relative;
	right: 0px;
	background-color: white;
	padding: 3%;
	border-radius: 10%;
	margin: 2%;
	border: 2px solid black;
	cursor: url("images/menu/defaultCursor.cur"),auto;
	float: right;
}
#causeAndEffectBox{
	text-align: center;
	float: left;
}
.causeEffectBox{
	background-color: white;
	width: 100px;
	height: 60px;
	border-radius: 15%;
	text-align: center;
  margin: 5%;
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=City History*/

#cityHistory{
	width: 200px;
	margin-left:300px;
	
	background-color:  #baad8f;
	font: 700 13px Courier New;

}


/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=City History*/

#saveGameBox{
	background-color:  #baad8f;
	font: 700 7px Courier New;
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=CitsView*/
.CitsViewPortrait{
	width: 100px;
	margin: 20px;
	border: 2px solid black;
}
.citsDisplay{
	float: left;
	margin: 10px;
	background-color: #7f8691;
	border: 2px solid black;
	padding: 10px;
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~NEWSPAPER*/
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=bulletin*/
#bulletin{
	width: 40%;
	background-color: tan;
}
/*
************************
*/
.thePaperItself{
	margin: 3%;
	box-shadow: 10px 10px 10px darkgrey;
	border-left: 1px dotted black;
	border-top: 1px dotted black;
	border-right: 3px solid darkgray;
	border-bottom: 3px solid darkgray;
}

/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=articles*/
.defaultArticle{
	width: 30%;
	margin-left: 1%;
	margin-bottom: 1%;
	display: inline-block;
}
.articleHeader{
	font-style: italic;
}
.articleText{
	font-size: 90%;
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=classifieds*/
#classifiedSection{
}
#classifiedJobBox{
}
.classifiedJobAd{
	width: 40%;
	padding: .2%;
	border: 1px solid black;
	cursor: url("images/menu/compass.cur"),auto;
	display: inline-block;
}
#classifiedRentalBox{
	
}
.classifiedRentalAd{
	padding: .2%;
	border: 1px solid black;
	cursor: url("images/menu/compass.cur"),auto;
	display: inline-block;
}
.classifiedHomesForSaleAd{
	padding: .5%;
	border: 1px dashed black;
	cursor: url("images/menu/compass.cur"),auto;
	display: inline-block;
}
.classifiedPlayerAd{
	padding: .5%;
	border: 1px solid red;
	cursor: url("images/menu/defaultCursor.cur"),auto;
	display: inline-block;
	color: red;
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~election*/
#electionDisplay{
	border-radius: 100px 0px 100px 100px;
	text-align: center;
	padding: 30px;
	background-color: white;
	width: 300px;
	animation: mymove 5s infinite;
	box-shadow: inset 0 0 5px black;
}
#electionTallyBox{
	border-radius: 30px;
	padding: 10px;
	animation: mymove 10s infinite;
}
@keyframes mymove {
  50% {background-color: yellow;box-shadow: inset 0 0 15px red;}
}
#votingGraph{
	margin: 20px;
}
#winnerBox{
	border: 2px solid green;
	margin: 15%;
	margin-left: 5%;
	padding: 10%;
	background-color: white;
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~won points*/

#wonPointsDisplay{
	position: fixed;
	color: purple;
	font-size: 500px;
	top:0%;
	width: 100%;
	text-align: center;
	font-family: garamond;
	transition: all 3s;
}
.wonPointsInitial{
	opacity: 0;
	filter: blur(40px);
}

#certificate{
    position: fixed;
    background-color: linen;
       background-image: repeating-linear-gradient(45deg,linen 0%, lightgreen 1%, linen 15%, lightgreen 8%);
    width: 400px;
    height: 400px;
    border: 10px double #0d0012;
    cursor: url("images/menu/defaultCursor.cur"),auto;
    transition: all 1s;
}
.certificateBig{
    top: 20%;
    right: 50%;
    left: 50%;
    margin-left: -210px;
}
.certificateSmall{
    top: -20%;
    left: -5%;
  transform: scale(0.2,0.2);
    opacity: 0.05;
}
.certificateSmall:hover{
    opacity: 1;
}
#pointsWon{
    color: purple;
    font-size: 400px;
    top:0%;
    width: 100%;
    text-align: center;
    font-family: book antiqua;
    opacity: 0.3;
    cursor: inherit;
}
.certificateText{
    position: absolute;
    top:0%;
    padding-left: 5%;
    padding-top: 5%;
	   padding-right: 10%;
    font-family: garamond;
    font-style: italic;
    font-size: 22px;
    color: #0d0012;
}
.logoAfterWin{
    margin-left: 330px;
    margin-top: -15%;
    position: absolute;
    width: 15%;
    cursor: url("images/menu/defaultCursor.cur"),auto;
}
#congrats{
	position: absolute;
	right: 40px;
  font-size: 35px;
	font-family: garamond;
	top:300px;
}

.certificate_borders{
	position: absolute;
	font-size: 10px;
	opacity: 0.1;
	color: black;
	word-break: break-all;
	transition: all 0.4s;
}
.certificate_borders:hover{
	position: absolute;
	color: black;
	opacity: 1;
}
#borders0{
	top: 0%;
	right: 0%;
}
#borders1{
	transform: rotate(90deg);
	right: -100px;
	top: 130px;
}
#borders2{
	top: 380px;
}
#borders3{
	transform: rotate(270deg);
	top: 240px;
	width: 200px;
	left: -70px;
}



#lostPoints{
    color: red;
}
/*
************************
*/
/*=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~close button*/
.defaultCloseButton{
	color: darkred;
	background-color: transparent;
	border: 1px dotted darkred;
	transition: all 1s;
	width:25px;
	height: 25px;
	padding: 0px;
}
.defaultCloseButton:hover{
	color: red;
	background-color: black;
	border: 1px dotted red;
}