/*Content Areas*/
body {height: auto; margin: 0; background-color: rgb(32, 178, 217); font-family: Calibri,Arial,sans-serif; color: black; font-size: 20px;}

.TopBar {clear: none; padding: 7px; background-color: rgb(63, 63, 63); text-align: right; font-size: 20px; width: calc(100% - 14px)}

.TopBarLink {padding: 0 15px; color: white; text-decoration: none;}

.BannerSpace {height: 100%; width: 100%; background-color: white; text-align: left;}

#TopMenu {display: block; padding: 10px 10px 10px 30px; background-color: rgb(3, 145, 217);}

#LeftMenu {float: left; min-height: calc(100vh - 8.33vw - 7vh - 87px); width: 10%; min-width: 210px; background-color: rgb(32, 178, 217); text-align: left;}

#MainContentSpace {float: right; min-height: calc(100vh - 8.33vw - 7vh - 107px); width: 90%; max-width: calc(100% - 210px); padding-top: 20px; background-color: white;}

#SiteFooter {display: block; clear: both; width: 100%; height: 7vh; line-height: 7vh; background-color: rgb(3, 145, 217); color: white; font-weight: bold; text-align: center; vertical-align: central; font-size: medium;}

.PageError {align-content: center; text-align: center; color: red;}


/*Element Tags*/
h2 {font-size: 24px;}

h3 {width: calc(100% - 40px); margin: 0 20px 15px; text-align: center; font-size: 32px;}

table {width: calc(100% - 40px); margin: 20px;}
.TableCellCenter {text-align: center;}
.TableInputLabel {padding-right: 10px; text-align: right; font-weight: bold;}
.TableInputListLabel {padding-top: 20px; padding-right: 10px; text-align: right; vertical-align: top; font-weight: bold;}
.TableHeaderBold thead td {font-weight: bold;}

/*Input controls and buttons*/
input {font-family: Calibri,Arial,sans-serif; font-size: 20px;}
input[type="button"], input[type="submit"] {min-width: 100px; padding: 4px; border: solid; border-width: thin; border-radius: 5px; background-color: rgb(253, 130, 0); color: white; font-weight: bold;}
input[type="button"]:hover, input[type="submit"]:hover {background-color: rgb(200, 105, 0);}

.DropDowns {font-family: Calibri,Arial,sans-serif; font-size: 20px;}

.TopNavButtons:link {margin-left: 15px; margin-right: 35px; border-radius: 5px; color: white; text-decoration: none; font-size: 24px; font-weight: bold;}
.TopNavButtons:visited {color: white;}
.TopNavButtons:hover {background-color: rgb(32, 178, 217);}

.LeftNavButtons:link {display: flex; margin: 15px 10px 15px 20px; border-radius: 5px; align-items: center; color: white; text-decoration: none; font-size: 24px; font-weight: bold;}
.LeftNavButtons:visited {color: white;}
.LeftNavButtons:hover {background-color: rgb(3, 145, 217);}

.NavButtons {min-width: 100px;}
.NavButtons:link {margin-left: 40px; border: solid; border-width: thin; border-radius: 5px; padding: 4px 15px; background-color: rgb(253, 130, 0); color: white; text-decoration: none; font-weight: bold;}
.NavButtons:visited {color: white;}
.NavButtons:hover {background-color: rgb(200, 105, 0);}


/*Requests Table*/
.Requests {border: 1px solid grey; border-collapse: collapse;}
.Requests thead td {border: 1px solid grey; font-weight: bold; text-align: center;}
.Requests td {border: 1px solid grey;}


/*Calendar Common*/
.CalendarHeaderLeft {width: 25%}
.CalendarHeaderCenter {width: 50%; font-size: 32px; font-weight: bold; text-align: center;}
.CalendarHeaderRight {width: 25%; text-align: right;}

/*Monthly Calendar*/
.Calendar {background-color: white; white-space: nowrap;}
.Calendar thead td {padding: 4px; background-color: rgb(102, 102, 102); text-align: center; color: white; font-weight: bold;}
.Calendar td {border: 1px solid white;}

.CalendarDate {float: right; padding: 3px 5px 0 8px; font-weight: bold; font-size: 15px;}

.CalendarDay {height: 130px; padding: 0; line-height: 16px; background-color: rgb(242, 242, 242); vertical-align: top; font-size: 15px;}
.CalendarDay:hover {background-color: rgb(229, 229, 229);}

.CalendarEvent0 {display: block; padding: 1px 1px 4px; background-color: lightgrey;}

.CalendarEvent1 {display: block; padding: 1px 1px 4px; background-color: rgb(255, 55, 55);}
.CalendarEvent1 span {color: rgb(150, 0, 0); font-weight: bold;}

.CalendarEvent2 {display: block; padding: 1px 1px 4px; background-color: rgb(255, 153, 41);}
.CalendarEvent2 span {color: rgb(172, 90, 0); font-weight: bold;}

.CalendarEvent3 {display: block; padding: 1px 1px 4px; background-color: rgb(255, 255, 193);}
.CalendarEvent3 span {color: rgb(180, 176, 0); font-weight: bold;}

.CalendarEvent4 {display: block; padding: 1px 1px 4px; background-color: rgb(51, 202, 255);}
.CalendarEvent4 span {color: rgb(0, 133, 180); font-weight: bold;}


/*Weekly Calendar*/
.CalendarWeek {background-color: white; border-collapse: collapse; font-size: 16px; white-space: nowrap;}
.CalendarWeek thead td {padding: 4px; background-color: rgb(102, 102, 102); text-align: center; color: white; font-weight: bold;}
.CalendarWeek td {border: 1px solid grey;}

.CalendarWeekEvent0 {display: table-cell; padding: 1px 1px 4px; background-color: lightgrey;}

.CalendarWeekEvent1 {display: table-cell; border: 1px solid rgb(150, 0, 0); padding: 1px 1px 4px; background-color: rgb(255, 55, 55);}
.CalendarWeekEvent1 span {color: rgb(150, 0, 0); font-weight: bold;}

.CalendarWeekEvent2 {display: table-cell; border: 1px solid rgb(172, 90, 0); padding: 1px 1px 4px; background-color: rgb(255, 153, 41);}
.CalendarWeekEvent2 span{color: rgb(172, 90, 0); font-weight: bold;}

.CalendarWeekEvent3 {display: table-cell; border: 1px solid rgb(180, 176, 0); padding: 1px 1px 4px; background-color: rgb(255, 255, 193);}
.CalendarWeekEvent3 span {color: rgb(180, 176, 0);font-weight: bold;}

.CalendarWeekEvent4 {display: table-cell; border: 1px solid rgb(0, 133, 180); padding: 1px 1px 4px; background-color: rgb(51, 202, 255);}
.CalendarWeekEvent4 span {color: rgb(0, 133, 180); font-weight: bold;}


/*Forum*/
.ForumPageTitle {width: calc(100% - 40px); max-width: 1000px; margin: 0 20px 15px; text-align: center; font-size: 32px; font-weight: bold;}
.PageButtonArea {width: calc(100% - 40px); max-width: 1000px; margin: 30px 20px 15px; font-size: 14px;}
.PageButton:link {margin: 2px; border: 1px solid black; padding: 3px 7px; color: black; text-decoration: none;}
.PageButtons:visited {color: black;}
.PageButtons:hover {background-color: rgb(102, 102, 102);}
.PageButtonDisabled {margin: 2px; border: 1px solid lightgrey; padding: 3px 7px; color: lightgrey; text-decoration: none; pointer-events: none}

/*Thread List*/
.ThreadList {width: calc(100% - 72px); max-width: 1000px; margin: 20px; border: 1px solid grey; border-radius: 3px; padding: 0 15px; background-color:rgb(250,250,250);}
.ThreadNameLeft {font-size: 24px; font-weight: bold;}
.ThreadNameRight {font-size: 16px}
.ThreadStats {display: flex; padding-top: 5px; align-items: center; font-size: 18px;}
.ThreadNewPostTag {border: 1px solid red; border-radius: 3px; background-color: red; font-size: 16px; color: white; font-weight: bold;}

/*Post List*/
.PostList {width: calc(100% - 40px); max-width: 1000px; margin: 20px; font-size: 18px;}
.Post {display: block; border: 1px solid grey; border-radius: 3px;}
.PostHeader {display: block; height:35px; background-color:rgb(197,227,255); vertical-align: central; font-size:16px;}
.PostHeaderTextLeft {float: left; padding: 8px;}
.PostHeaderTextRight {float: right; padding: 8px;}
.PostContent {display: block}
.PostReplyTo {display: block; margin-left: 30px; border-left: 5px solid; border-color: rgb(197,227,255); padding: 4px 8px 1px; font-size: 16px;}
.PostBody {display: block; padding: 8px;}


/*Announcements*/
.AnnList {width: calc(100% - 40px); max-width: 1000px; border: 1px solid grey; border-radius: 3px; padding: 0 15px; background-color:rgb(252,252,252); font-size: 18px;}
.AnnName {display: flex; align-items: center;}
.AnnNameLeft {font-size: 24px; font-weight: bold;}
.AnnNameRight {font-size: 16px}
.AnnMessage {display: block; padding-top: 5px;}