/* 
Colour Scheme

White header text: #FFFFFF
Blue button text (and button borders): #707A84
Beige button background: #EEF8C9
Brown ProductionMultiplier text: #847A70
Green ProductionMultiplier background: #D7F8C9

Main page background beneath image: #60707d

*/

html {
	overflow-y: scroll;
}

body {
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 16px;
	margin: 0px;
	min-width: fit-content;   /* Makes it so that text will never overspill its box */
	min-width: 1350px;
    height: 100%;
	color: #FFFFFF;
	background-color: #000000;
    background-image: url("images/theRingworld.jpg");
	background-attachment: fixed;
	background-size: 100% 100%;
    
}

#flavourTextButton {
    position: absolute;
    top: 0px;
    left: 20px;
    width: 20%;
    height: 96px;
    text-align: center;
    color: #FFFFFF;
    background-color: #D7B007;
    border-radius: 25px 25px 25px 25px;
	border: 4px solid;
	border-color: #000000;
}

#help {
    position: absolute;
    top: 0px;
    right: 20px;
    height: 26px;
    background-color: none;
}

#helpButtonPopup {
    position: absolute;
    top: 0px;
    right: 40px;
    width: 20%;
    height: 160px;
    text-align: center;
    color: #FFFFFF;
    background-color: #D7B007;
    border-radius: 25px 25px 25px 25px;
	border: 4px solid;
	border-color: #000000;
}


/* Smaller buttons */
#importsButton, #creditsButton, #exportsButton, #advanceButton {
    position: absolute;
    height: 48px;
    text-align: center;
    background-color: #D7B007;
    border-radius: 25px 25px 25px 25px;
	border: 4px solid;
	border-color: #000000;
    cursor: pointer;
    cursor: hand;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#importsButton {top: 32px; left: 40%; width: 20%;}
#creditsButton {top: 104px; left: 30%; width: 40%;} /* wider than the others */
#exportsButton {top: 616px; left: 30%; width: 40%;} /* wider than the others */
#advanceButton {top: 688px; left: 40%; width: 20%;}

/* Buildings Column */
#building01Button, #building02Button, #building03Button, #building04Button, #building05Button, #building06Button, #building07Button, #building08Button, #building09Button, #building10Button {
    position: absolute;
    width: 23%;
    height: 64px;
    text-align: center;
    background-color: #D7B007;
    border-radius: 25px 0px 0px 25px;
	border: 4px solid;
	border-color: #000000;
    cursor: pointer;
    cursor: hand;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#building01Button {top: 176px; left: 12%}
#building02Button {top: 176px; left: 53%}
#building03Button {top: 264px; left: 12%}
#building04Button {top: 264px; left: 53%}
#building05Button {top: 352px; left: 12%}
#building06Button {top: 352px; left: 53%}
#building07Button {top: 440px; left: 12%}
#building08Button {top: 440px; left: 53%}
#building09Button {top: 528px; left: 12%}
#building10Button {top: 528px; left: 53%}


/* Building ProductionMultipliers Column */
#building01ProductionMultiplierButton, #building02ProductionMultiplierButton, #building03ProductionMultiplierButton, #building04ProductionMultiplierButton, #building05ProductionMultiplierButton, #building06ProductionMultiplierButton, #building07ProductionMultiplierButton, #building08ProductionMultiplierButton, #building09ProductionMultiplierButton, #building10ProductionMultiplierButton {
    position: absolute;
    width: 12%;
    height: 64px;
    background-color: #D7B007;
    text-align: center;
    border-radius: 0px 25px 25px 0px;
	border: 4px solid;
	border-color: #000000;
    cursor: pointer;
    cursor: hand;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#building01ProductionMultiplierButton {top: 176px; left: 35%}
#building02ProductionMultiplierButton {top: 176px; left: 76%}
#building03ProductionMultiplierButton {top: 264px; left: 35%}
#building04ProductionMultiplierButton {top: 264px; left: 76%}
#building05ProductionMultiplierButton {top: 352px; left: 35%}
#building06ProductionMultiplierButton {top: 352px; left: 76%}
#building07ProductionMultiplierButton {top: 440px; left: 35%}
#building08ProductionMultiplierButton {top: 440px; left: 76%}
#building09ProductionMultiplierButton {top: 528px; left: 35%}
#building10ProductionMultiplierButton {top: 528px; left: 76%}


#exportSaveButton, #exportSaveConfirmButton, #deleteCookiesButton, #importSaveButton, #importSaveConfirmButton {
    position: absolute;
    width: 10%;
    height: 16px;
    color: #FFFFFF;
    background-color: #D7B007;
    text-align: center;
    font-weight: bold;
    border-radius: 25px 25px 25px 25px;
	border: 4px solid;
	border-color: #000000;
    cursor: pointer;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#exportSaveButton {top: 760px; left: 30%}
#deleteCookiesButton {top: 760px; left: 45%}
#importSaveButton {top: 760px; left: 60%}

#exportSaveButtonPopup, #importSaveButtonPopup {
    position: absolute;
    top: 484px;
    left: 30%;
    width: 40%;
    height: 252px;
    text-align: center;
    color: #FFFFFF;
    background-color: #D7B007;
    border-radius: 25px 25px 25px 25px;
	border: 4px solid;
	border-color: #000000;
}

#exportSaveConfirmButton {top: 706px; left: 45%}
#importSaveConfirmButton {top: 706px; left: 45%}

/* Positioning Boxes */
#endOfPage {
    position: absolute;
    top: 792px;
    height: 16px;
    width: 100%;    
}

.title {font-weight: bold; color: #FFFFFF}
.income {color: #FFFFFF}
.bonus {font-style: italic; color: #FFFFFF}
.cost {font-style: italic; color: #FFFFFF}
.total {font-style: italic; color: #FFFFFF}
.ProductionMultipliers {font-weight: bold; color: #FFFFFF}