/* --------------------------------
   Color palette for this site: Frozen Butterfly
   http://www.colourlovers.com/palette/3249078/Frozen_Butterfly

   Lake Water: 9CE9E9; 156,233,233
   bright islander: 7DD1F6; 125,209,246
   blue ice: 5882BC; 88,130,188
   Deep Night Sky: 2F4769; 47,71,105
   Skin-Clad Screenplay: 1F2A38; 31,42,56
   --------------------------------
*/

/* -------------------------------- */
/* Page Wrappers                    */
/* -------------------------------- */

body {
    /*font-family: "Times New Roman", Times, serif;*/
    font-family: "Calibri", "Helvetica", "Arial", sans-serif;
    font-size: 16px !important;
    margin: 0px;
    padding: 0px;
    background: #2F4769;
    color: #1F2A38;
}

div.stylePageTemplateWrapperMain {
    width: 1024px;
    margin: 0 auto;
}

div.stylePageTemplateWrapperMainCenter {
    position: relative;
    float: left;
    top: 0px;
    left: 0px;
    background-color: white;
}

div.stylePageTemplateBody {
    position: relative;
    top: 200px;
    left: 0px;
    width: 1024px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: white;
}

div.stylePageTemplateBottomSpacing {
    height: 50px;
}

/* -------------------------------- */
/* Header                           */
/* -------------------------------- */

div.stylePageTemplateMainHeaderTopSpacer {
    position: absolute;
    float: left;
    background-color: white;
    top: 0px;
    left: 0px;
    width: 1024px;
    height: 10px;
}

div.stylePageTemplateMainHeaderTop {
    top: 10px;
}

div.stylePageTemplateMainHeaderHeight {
    height: 160px;
}

div.stylePageTemplateMainHeaderLeftSpacer {
    position: absolute;
    float: left;
    background-color: white;
    top: 0px;
    left: 0px;
    width: 15px;
}

div.stylePageTemplateMainHeaderLogo {
    position: absolute;
    float: left;
    background-color: white;
    left: 15px;
    width: 237px;
    text-align: center;
}

div.stylePageTemplateMainHeaderMiddleSpacer {
    position: absolute;
    float: left;
    background-color: white;
    left: 252px;
    width: 84px;
}

/* ----------------------------------- */
/* Greeting and Log Out Area           */
/* ----------------------------------- */

div.stylePageTemplateMainHeaderGreetingAndLogOut {
    position: absolute;
    float: left;
    background-color: white;
    left: 346px;
    width: 666px;
    height: 20px;
}

.stylePageTemplateLogOutButton {
    float: right;
    height: 25px;
    color: #1F2A38;
    background: #7DD1F6;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid white;
    cursor: pointer;
    margin-left: 12px;
}

.stylePageTemplateLogOutButton:hover {
    background: #9CE9E9;
}

.stylePageTemplateGreeting {
    float: right;
    text-align: right;
    width: 578px;
    margin-top: 3px;
}

/* ----------------------------------- */
/* Header Calendar and Event Reminders */
/* ----------------------------------- */

.stylePageTemplateCalendarEventPopupTitle {
    font-weight: bold;
    padding-right: 30px;
}


div.stylePageTemplateMainHeaderCalendarEntries {
    position: absolute;
    float: left;
    background-color: white;
    left: 100px;
    width: 578px;
}


.stylePageTemplateSunsetTime {
    text-align: center;
    font-style: italic;
    margin-top: 10px;
    width: 237px;
    cursor: pointer;
}

.stylePageTemplateSunsetNote {
    text-align: center;
    font-style: italic;
    font-size: small;
    width: 237px;
}

.stylePageTemplateCalendarLogo {
    position: absolute;
    left: 0px;
    height: 100px;
    width: 100px;
}

.stylePageTemplateReminderEvent {
    position: absolute;
    left: 0px;
    height: 20px;
    text-align: left;
    background-color: white;
}

.stylePageTemplateCalendarEventDetails {
    position: absolute;
    font-size: 1.0em !important;
    display: none;   /* Popup mode */
    width: 250px;   /* Popup mode */
    /* width: 0px; */   /* Slide left animate mode */
    background-color: #9CE9E9;
    margin-top: 3px;
    margin-left: 10px;
    padding: 3px 3px 3px 3px;
    z-index: 99;
}

.stylePageTemplateDetailsDismissButton {
    position: relative;
    float: right;
    width: 15px;
    height: 15px;
    background: url(../Images/Template/DismissIcon.png) no-repeat scroll 0 0 transparent;
    cursor: pointer;
}

/* The following two styles are used to display details for a calendar event. These styles are used in     */
/* TemplateHBpage and HBcalendar. These styles are necessary because the "p" style is defined universally  */
/* for those pages. These styles have short, non-standard names without Hungarian notation to cut down on  */
/* the amount of text present in ClsDates. DT stands for DeTails.                                          */

p.DT {
    margin: 0px 0px 6px 0px;
    padding-left: 0px;
}

p.DT_HangingIndent {
    margin: 0px 0px 0px 12px;
    padding-left: 12px;
    text-indent: -12px ;
}

.stylePageTemplateReminderEventSlot1 {
    top: 0px;
}

.stylePageTemplateReminderEventSlot2 {
    top: 20px;
}

.stylePageTemplateReminderEventSlot3 {
    top: 40px;
}

.stylePageTemplateReminderEventSlot4 { 
    top: 60px;
}

.stylePageTemplateReminderEventSlot5 { 
    top: 80px;
}

.stylePageTemplateReminderEventSlot6 {
    top: 100px;
}

.stylePageTemplateReminderEventSlot7 {
    top: 120px;
}

/* -------------------------------- */
/* Search Area                      */
/* -------------------------------- */

.stylePageTemplateSearchValidators {
    position: relative;
    height: 20px;
    margin-left: 662px;
}

.stylePageTemplateValidators {
    color: red;
    position: absolute;
    top: 0px;
    left: 0px;
}

div.stylePageTemplateSearch {
    position: relative;
    text-align: left;
    height: 27px;
    margin-left: 642px;
    margin-right: 102px;
    margin-bottom: 8px;
    background: #7DD1F6;
    border-radius: 10px;
    z-index: 99;
}

.stylePageTemplateSearchBox {
    position: relative;
    float: left;
    width: 225px;
    margin-top: 3px;
    margin-left: 10px;
}

/* https://stackoverflow.com/questions/11086298/change-image-on-hover-using-aspimagebutton-and-css */
/*    background: url(../Images/Template/SearchIcon.png) no-repeat scroll 0 0;  */

.stylePageTemplateSearchButton {
    position: relative;
    margin-top: 3px;
    margin-left: 5px;
    margin-right: 10px;
    width: 20px;
    height: 20px;
    border: 0px;
    background-image: url(../Images/Template/SearchIcon.png);
    cursor: pointer;
}

.stylePageTemplateSearchButton:hover {
    background-image: url(../Images/Template/SearchIconHover.png);
}

/* -------------------------------- */
/* Navigation Bar                   */
/* -------------------------------- */

/* -------- For reference, see https://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu --------*/

nav {
    text-align: center;
    height: 35px;
}

nav ul ul {
    display: none;
}

nav ul li:hover > ul {
    display: block;
}

nav ul {
    position: relative;
    color: #1F2A38;
    background: #7DD1F6; 
    padding: 0 20px;
    border-radius: 10px;
    list-style: none;
    display: inline-table;
    margin: 0;
    z-index: 50;
}

nav ul:after {
    content: "";
    clear: both;
    display: block;
}

nav ul li {
    float: left;
}

nav ul li:hover {
    background: #9CE9E9;
}

nav ul li:hover a {
    color: #1F2A38;
}

nav ul li a {
    display: block;
    padding: 4px 25px;
    color: #1F2A38;
    text-decoration: none;
}

nav ul li a:visited {
    color: #1F2A38;
}

nav ul ul {
    position: absolute;
    background: #7DD1F6;
    border-radius: 0px;
    padding: 0;
    margin-left: 25px;
    top: 100%;
}

nav ul ul li {
    float: none; 
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    position: relative;
    /* text-align: left; */
}

nav ul ul li a {
    padding: 4px 10px 7px 10px;
    color: #1F2A38;
}

nav ul ul li a:hover {
    background: #9CE9E9;
}

nav ul ul ul {
    position: absolute;
    left: 100%;
    top: 0;
    width: 200px;
    margin-left: 0px;
}

nav ul ul ul ul {
    text-align: left;
    white-space: nowrap;
    width: auto;
}

ul.stylePageTemplateFlyLeft {
    position: absolute;
    left: -95%;
    top: 0;
    width: 200px;
    margin: 0px 0px 0px 0px;
}

/* -------------------------------- */
/* Hyperlinks                       */
/* -------------------------------- */

a.stylePageTemplateHyperlink {
    color: #5882BC;
}

a.stylePageTemplateHyperlink:visited {
    color: #5882BC;
}

a.stylePageTemplateHyperlink:hover {
    color: #7DD1F6;
}

a.stylePageTemplateHyperlink:active {
    color: #9CE9E9;
}

/* -------------------------------- */
/* [Back to Top] Button             */
/* -------------------------------- */

/*#mBtnBackToTop {
    position: fixed;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    background-color: #7DD1F6;
    text-indent: -9999px;
    display: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#mBtnBackToTop span {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -12px;
    height: 0;
    width: 0;
    border: 8px solid transparent;
    border-bottom-color: #ffffff;
}*/

#mBtnBackToTop {
    position: fixed;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
    width: 95px;
    height: 25px;
    background-color: #7DD1F6;
    /*text-indent: -9999px;*/
    display: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding-top: 25px;
    color: #1F2A38;
    text-align: center;
    text-decoration: none;
}

#mBtnBackToTop span {
    position: absolute;
    /*top: 50%;*/
    top: 30%;
    left: 50%;
    margin-left: -8px;
    margin-top: -12px;
    height: 0;
    width: 0;
    border: 8px solid transparent;
    border-bottom-color: #ffffff;
}

#mBtnBackToTop:hover {
    background-color: #9CE9E9;
    opacity: 1;
    filter: "alpha(opacity=100)";
    -ms-filter: "alpha(opacity=100)";
}

/* -------------------------------- */
/* Page Text -----------------------*/
/* -------------------------------- */

.stylePageTemplateBodyHeading {
    font-size: 1.5em;
    font-weight: bold;
    color: #5882BC;
}








.stylePageTemplateBodyHeadingSpacing {
    margin-top: 20px;
    height: 60px;
}

.stylePageTemplateTextHighlight {
    font-weight: bold;
    color:#5882BC;
}

.stylePageTemplateTextHighlightRed {
    color: red;
}