body {
    background: linear-gradient(to right, lightskyblue, midnightblue);
    font-family: "Georgia";
    color: midnightblue;
    font-size: 15px;
}

.hidden {
    display: none;
}

.clearfix {
    clear: both;
}

.alignTop {
	vertical-align: top;
}

.buttonBase {
    border-radius: 15px;
    display: inline-block;
    font-weight: bold;
    margin: 5px;
    padding: 3px 10px;
    text-decoration: none;
}

.buttonOff {
    background: linear-gradient(to bottom, #bbbbbb, #666666);
    border: solid #000022 2px;
    color: #111111;
}

.buttonOn {
    background: linear-gradient(to bottom, steelblue, midnightblue);
    border: solid #000022 2px;
    color: #dddddd;
    cursor: pointer;
    text-shadow: 1px 1px 1px #777777;
}
.buttonOn:hover {
    background: linear-gradient(to bottom, skyblue, navy);
    color: #dddddd;
}
.buttonOn:visited {
    color: #dddddd;
}

.buttonConfirm {
    background: linear-gradient(to bottom, darkseagreen, darkgreen);
    border: solid #000022 2px;
    color: #dddddd;
    cursor: pointer;
    text-shadow: 1px 1px 1px #777777;
}
.buttonConfirm:hover {
    background: linear-gradient(to bottom, greenyellow, green);
    color: #dddddd;
}
.buttonConfirm:visited {
    color: #dddddd;
}

.borderedContainer {
    background-color: lightblue;
    border: 5px solid navy;
    border-radius: 25px;
    margin: 25px;
    overflow: auto;
    padding: 10px;
    position: absolute;
}

.centerContent {
    text-align: center;
}

textarea {
	height: 50%;
	width: 50%;
}

.niceInput {
    background-color: #bbbbbb;
    border-radius: 7px;
    margin: 1px;
    padding: 2px 7px;
}

.niceTitle {
    background: linear-gradient(to bottom, orange, darkorange);
    border: solid #221100 2px;
    color: #333333;
    display: inline-block;
    font-size: 25px;
    font-weight: bold;
    margin: 5px;
    padding: 3px 10px;
    text-align: center;
    text-shadow: 2px 2px 2px #555555;
}

.sideTabSelector {
    border: solid #000022 2px;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    height: 75px;
    margin: 5px;
    width: 75px;
}

.submitSpaced {
    letter-spacing: 1px;
}

.errorZone {
    border: 2px red dashed;
    color: red;
    font-weight: bold;
    padding: 3px;
}

.globalContainer {
    background: linear-gradient(to right, ivory, lightblue);
    border: 5px solid black;
    border-radius: 50px;
	display: flex;
	flex-direction: row;
	height: 97%;
	margin: 3px 25px 3px 0px;
    position: absolute;
	width: 97%;
    z-index: 1;
}

#mainLogo,
#titleLogo {
	margin-left: 25%;
}

#sideMenu {
    background: linear-gradient(to bottom, ivory, lightblue);
    border: 5px solid black;
    border-bottom-left-radius: 25px;
    border-top-left-radius: 25px;
    height: 98%;
    padding: 5px;
    position: fixed;
    right: -75px;
    text-align: center;
    top: 3px;
    width: 100px;
    z-index: 100;
}

.quickPopup {
    background-color: orange;
    border: 5px solid black;
    border-radius: 25px;
    color: black;
    padding: 5px;
    z-index: 10000;
}

#fatalErrorContainer {
    display: none;
    height: 300px;
    left: 100px;
    overflow: auto;
    position: fixed;
    top: 100px;
    width: 400px;
}

.mainSubContainer {
    background-color: lightblue;
    border: 5px solid darkblue;
    border-radius: 25px;
	margin: 25px;
    overflow: auto;
    padding: 10px;
    position: relative;
}

#mainLeft,
#mainRight {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 50%;
}

.mainSubLeft {
	flex-grow: 1;
	margin-right: 12px;
}

.mainSubRight {
	flex-grow: 1;
	height: 50%;
	margin-left: 12px;
}

#mainTopLeft img {
	width: 50%;
}

#mainTopLeft {
	flex-basis: 33%;
	flex-grow: 0;
}

#mainBottomLeft {
	flex-basis: 67%;
	flex-grow: 1;
	overflow: hidden;
}

#mainTopLeft,
#mainTopRight {
	margin-bottom: 7px;
}

#mainBottomLeft,
#mainBottomRight {
	margin-top: 7px;
}

#userName {
    font-weight: bold;
}

.outerWeatherInfo {
    opacity: 0.25;
    position: absolute;
    right: 0px;
    top: 0px;
}

.innerWeatherInfo {
    height: 71px;
    position: relative;
    width: 71px;
}

.innerWeatherInfo img {
    left: 0px;
    position: absolute;
    top: 0px;
    width: 71px;
}

.locationImageInfo {
    cursor: pointer;
    position: absolute;
}

.locationImageInfo img {
    width: 100px;
}

.chatWeatherTemperature {
    color: white;
    font-weight: bold;
    left: 25px;
    position: absolute;
    top: 25px;
}

.pcChatTitle .outerWeatherInfo,
.pcContainerTitle .outerWeatherInfo {
    opacity: 1;
    right: 25px;
}

.blinkBorderOff {
    border-color: black;
}

.blinkBorderOn {
    border-color: white;
}

.cellBorderBottom {
    border-bottom: 1px darkblue dashed;
}
.cellBorderLeft {
    border-left: 1px darkblue dashed;
}
.cellBorderRight {
    border-right: 1px darkblue dashed;
}
.cellBorderTop {
    border-top: 1px darkblue dashed;
}

.clickable {
	cursor: pointer;
}

.flexHidden {
    display: flex;
    position: absolute;
	visibility: hidden;
}