body { background: #ffffff;
       margin: 0px;
       font-size: 1em;
       color: #444444;
      }

#thepage { top: 0px;
            max-width: 1000px;
            width: 100%;
            height: auto;
            background-color: #ddeeff;
            font-size: 1em;
            font-family: verdana, Arial, sans-serif;
            margin-left: auto;
            margin-right: auto;
         }

#pageheader { position: relative;
              top: 0px;
              left: 0px;
              max-width: 1000px;
              width: 100%;
              height: 0px;
              background: #ffffff;
              padding-top: 18%;
              z-index: 201;
           }

.panel_start { position: absolute; top: 0px; left: 0px; width: 5.3%; height: 100%: background: #ffffff; cursor: pointer; z-index: 201; }
.panel_sanctuary { position: absolute; top: 0px; left: 5.3%; width: 6.3%; height: 100%: background: #ffffff; cursor: pointer; z-index: 201; }
.panel_mobile { position: absolute; top: 0px; left: 11.6%; width: 5.4%; height: 100%: background: #ffffff; cursor: pointer; z-index: 201; }
.panel_nowra { position: absolute; top: 0px; left: 17%; width: 5.6%; height: 100%: background: #ffffff; cursor: pointer; z-index: 201; }
.panel_ulladulla { position: absolute; top: 0px; left: 22.6%; width: 5.5%; height: 100%: background: #ffffff; cursor: pointer; z-index: 201; }
.panel_milton { position: absolute; top: 0px; left: 28.1%; width: 6.1%; height: 100%: background: #ffffff; cursor: pointer; z-index: 201; }
.panel_end { position: absolute; top: 0px; left: 34.2%; width: 1.8%; height: 100%: background: #ffffff; cursor: pointer; z-index: 201; }

.libraries { position: absolute; top: 0px; left: 36%; width: 64%; height: 72.7%; background: #ffffff; cursor: pointer; z-index: 201; }
.sanctuary { position: absolute; cursor: pointer; color: #6bd028; text-align: center; top: 72.7%; left: 36%; width: 19.6%; height: 23.7%; background: #ffffff; cursor: pointer; z-index: 201; }
.mobile { position: absolute; cursor: pointer; color: #e46400; text-align: center; top: 72.7%; left: 55.6%; width: 9.8%; height: 23.7%; background: #ffffff; cursor: pointer; z-index: 201; }
.nowra { position: absolute; cursor: pointer; color: #fc263e; text-align: center; top: 72.7%; left: 65.4%; width: 9.1%; height: 23.7%; background: #ffffff; cursor: pointer; z-index: 201; }
.ulladulla { position: absolute; cursor: pointer; color: #15c9fa; text-align: center; top: 72.7%; left: 74.5%; width: 11.7%; height: 23.7%; background: #ffffff; cursor: pointer; z-index: 201; }
.milton { position: absolute; cursor: pointer; color: #445060; text-align: center; top: 72.7%; left: 86.2%; width: 13.8%; height: 23.7%; background: #ffffff; cursor: pointer; z-index: 201; }

#mobnav { display: none; }

#hdlogin { position: absolute; 
        top: 0px;
        left: 950px;
        width: 50px;
        height: 30px;
        font-size:0.8em;
        color: #ffffff;
        background-color: #ffffff;
        z-index: 999;
     }
#hdlogin a { color: #ffffff; }

#navdiv { position: relative;
          top: 0px;
          left: 0px;
          max-width: 1000px;
          width: 100%;
          height: 30px;
          margin-left: auto;
          margin-right: auto;
          background-color: transparent;
          z-index:111;
          display: block; 
      }

#nav { max-width: 1000px; width: 100%; height: auto; background: transparent; margin-left: auto; margin-right: auto; padding: 0px; z-index:111; }
#nav a { height: 22px; text-align: center; text-transform: uppercase; font-family: arial, verdana, helvetica, sans-serif; font-weight: bold; font-size: 0.75em; display: block; margin: 0; padding: 8px 0px 0px 6px; }
#nav a { color: #000000; background: transparent; text-decoration: none; }
#nav a:hover { color: #ffffff; background: #758994; }

#nav ul { position:relative; list-style: none; margin: 0; padding: 0; top: 0px; left: 0px; width: 100%; }
#nav li { position:relative; float: left; width: 14.28%; background: #ffffff; }

#nav ul ul { position: absolute; list-style: none; margin: 0; padding: 0; top: 30px; left: 0px; width: 110%; }
#nav ul ul li { position:relative; float: none; background: #ffffff; border: 1px #999999 solid; border-top: 0px; width: 110%; }
#nav ul ul li a { text-align: left; }

#nav ul ul ul { position: absolute; list-style: none; margin: 0; padding: 0; top: 0px; left: 100%; width: 100%; }
#nav ul ul ul li { position:relative; float: none; background: #ffffff; width: 100%; border: 1px #999999 solid; border-top: 0px; width: 100%; }
#nav ul ul ul li a { text-align: left; }

div#nav ul ul, div#nav ul li:hover ul ul, div#nav ul ul ul, div#nav ul ul li:hover ul ul, div#nav ul ul ul ul, div#nav ul ul ul li:hover ul ul { display: none; }
div#nav ul li:hover ul, div#nav ul ul li:hover ul, div#nav ul ul li:hover ul, div#nav ul ul ul li:hover ul, div#nav ul ul ul ul li:hover ul { display: block; }

#contentpage { position: relative;
           top: 0px;
           left: 0px;
           width: 100%;
           height: 100%:
           background: #ffffff;
          /*display: inline-block;*/
         }

.padcontent { position: relative:
             top: 0px;
             left: 0px;
             width: 100%;
             max-width: 1000px;
             height: 10px;
             background-color: #ffffff;
           }

#events { position: relative; top: 0px; left: 0px; width: 100%; height:304px; padding-top: 4px; background: #ffffff; overflow: hidden; }
.slidetext { position: absolute; top: 209px; left: 0px; width: 100%; height: 100px; background: rgba(255,255,255,0.8); overflow: hidden; z-index: 101; }
.textslide { padding: 10px; padding-left: 20px; background: transparent; }

.slidehd { font-size: 1.3em; font-weight: bold; }
.slideword { font-size: 0.9em; }

.homeleft { position: absolute; top: 100px; left: 0px; width: 44px; height:34px; background: transparent url('/images/library/left.png') no-repeat; cursor: pointer; z-index: 11; }
.homeright { position: absolute; top: 100px; left: 96.5%; width: 35px; height:34px; background: transparent url('/images/library/right.png') no-repeat; cursor: pointer; z-index: 11; }

.services { position: relative; top: 0px; left: 0px; display: table; width: 100%; background: #ffffff; }

.servitem { top: 0px;
            left: 0px;
           width: 31%;
           max-height: 310px;
           background: transparent;
           padding-top: 4px;
           padding-left: 6px;
           padding-right: 6px;
           padding-bottom: 20px;
           border: #dddddd 1px solid;
           font-size: 0.8em;
           text-align: justify;
           display: table-cell;
         }

.servhd { font-family: 'Open Sans Condensed', verdana, arial, sans-serif; font-size: 1.6em; font-weight: bold; }

#pagecontent { position: relative;
               top: 0px;
               left: 0px;
               margin-left: auto;
               margin-right: auto;
               display: table;
               width: 100%;
               max-width: 1000px;
               height: 300px;
               background-color: #ffffff;
               border-top: 1px #dddddd solid;
             }

#leftpane { position: absolute:
            top: 0px;
            left: 0px;
            width: 72%;
            max-width: 720px;
            height: 300px;
            background-color: transparent;
            padding-top: 4px;
            vertical-align: top;
            text-align: justify;
            display: table-cell;
            font-size: 0.8em;
            font-family: verdana, Arial, sans-serif;
           }

#rightpane { position: absolute:
             top: 0px;
             left: 0px;
             width: 28%;
             max-width: 280px;
             height: 300px;
             background-color: transparent;
             padding-top: 4px;
             vertical-align: top;
             text-align: justify;
             display: table-cell;
             font-size: 0.8em;
             font-family: verdana, Arial, sans-serif;
            }

.lefttext { font-size: 1em;
            font-family: verdana, Arial, sans-serif;
            text-align: justify;
            background: transparent;
          }

.splash img { width: 100% !important; height: auto !important; max-height: 150px; }

.righttext { font-size: 1em;
             font-family: verdana, Arial, sans-serif;
             text-align: justify;
             padding-left: 10px;
            background: transparent;
           }

.padfooter { position: relative:
             top: 0px;
             left: 0px;
             width: 100%;
             height: 10px;
             background-color: #ffffff;
           }

#footer { position: relative;
          top: 0px;
          left: 0px;
          width: 100%;
          background: #f9f9f9;
          border-top: 1px #bbbbbb solid;
          border-bottom: 1px #333333 solid;
        }

.footnav { text-align: center;
           padding: 6px;
         }

.sectionicons { position: relative; width: 100%; height: auto; display: block; background: transparent; margin-top: 0px; margin-left: auto; margin-right: auto; padding: 0px; overflow: hidden; }
.sectionicons li { float: left; width: 220px; height: 220px; padding: 4px; margin: 4px; text-align: center; background: transparent; /*#efefef;*/  border: 1px #ffffff solid; list-style: none; position: relative; }
.sectionicons li:hover { background: #f9f9f9; border: 1px #bbbbbb solid; }
.sectionicons li img { width: 220px; height: 140px; }

.serviceicons { width: 100%; height: auto;; background: transparent; margin-top: 0px; margin-left: auto; margin-right: auto; padding: 0px; }
.serviceicons ul { width: 100%; list-style: none; margin: 0; padding: 0; }
.serviceicons li { width: 100%; height: 18px; padding: 0px; padding-left: 8px;  padding-bottom: 8px; margin: 0px; list-style: none; position: relative; }
.serviceicons li a { color: #555555; font-weight: bold; }
.serviceicons li a:hover { color: #ff0000; }

.corners { background: #fcfcfc;
           padding-top: 1%;
           padding-left: 3%;
           padding-right: 3%;
           padding-bottom: 2%;
           margin-bottom: 2%;
           text-align: justify;
           width: 93%;
           height: auto;
           border: #cccccc 1px solid;
           -moz-border-radius: 8px;
           -webkit-border-radius: 8px;
           border-radius: 8px;
           -khtml-border-radius: 8px;
           -moz-border-top-right-radius: 0px;
           -webkit-border-top-right-radius: 0px;
           border-top-right-radius: 0px;
           -khtml-border-top-right-radius: 0px;
         }

.smlfonticon { position: absolute;
             top: 160px;
             left: 64%;
             width: 40px;
             height: 32px;
             cursor: pointer;
             background: transparent url('/images/library/smlfont.gif') no-repeat;
             z-index: 111;
          }

.lrgfonticon { position: absolute;
             top: 160px;
             left: 68%;
             width: 40px;
             height: 32px;
             cursor: pointer;
             background: transparent url('/images/library/lgfont.gif') no-repeat;
             z-index: 111;
          }

.eventhome { display: block; width: 100%; height: auto; padding-top: 2px; padding-bottom: 6px; font-size: 0.9em; }
/* .eventhome:hover { background-color: #eeeeee; cursor: pointer; } */

.evitem { padding-top: 8px; border-bottom: 1px #757575 solid; }
.evitem:hover { background: #fdfdfd; }
.evitem table[style] { width: 100% !important; }

.evhd { color: #757575;
           font-family: arial, verdana, sans-serif;
           font-size: 1.3em;
           font-weight: bold;
           margin: 0px;
           padding: 0px;
         }
.evlibrary { color: #757575; font-weight: bold; }
.evdate { color: #757575; font-weight: bold; }
.evsocial { position: relative; text-align: right; left: 0px; width: 100%; padding-right: 8px; background: transparent; }
.smallev:hover { background: #eeeeee; cursor: pointer; }

.pageplus { display: none; font-size: 1.2em; }

.noStyleAccordion .ui-accordion-header, .noStyleAccordion .ui-accordion-content {
     padding: 0;
     background: none;
     border: none;
     outline: none;
}
.ui-state-focus { border: none; outline: none; }
.ui-accordion-header.ui-state-active { color: #ffffff; background-color: #576e7e; }

#accordion .ui-accordion-header { cursor: pointer; }
#accordion .ui-accordion-header a { padding-left: 0; }
#accordion .ui-accordion-content { padding: 6px; padding-left: 20px; border: 0px; font-size: 1em; }
#accordion .ui-accordion-content a { color: #0000ff; text-decoration: none; }
#accordion .ui-accordion-content a:visited { color: #0000ff; }
#accordion .ui-accordion-content a:hover { color: #ff0000; }

.thislist { width: 100%; }

h3 { background: #d9e4e6; font-weight: bold; font-size: 1.3em; padding: 2px; padding-left: 10px; margin: 2px; outline: none; }
h3:hover { color: #ffffff; background: #087cb5; }

.ui-accordion-header.ui-state-active:hover { color: #ffffff; background-color: #576e7e; }


h1 { color: #757575;
      font-family: Arial, verdana, arial, sans-serif;
      font-size: 1.8em;
      display: block;
      padding-left: 5px;
      border-bottom: 1px #bbbbbb solid;
      margin-bottom: 10px;
      padding: 0px;
      line-height: 1em;
   }

h2, .shd { color: #757575;
           font-family: arial, verdana, sans-serif;
           font-size: 1.3em;
           margin: 0px;
           padding: 0px;
           padding-top: 2px;
           line-height: 1.2em;
         }

h4 {color: #757575;
           font-family: , arial, verdana, sans-serif;
           font-size: 1.2em;
           font-weight: bold;
           margin: 0px;
           padding: 0px;
           line-height: 1em;
   }

a:link { color: #0000ff; text-decoration: none; }
a:visited { color: #0000ff; }
a:hover { color: #ff0000; }

a.footer {    color: #333333;
              background-color: transparent;
              font-size: 0.9em;
              font-family: arial, verdana, sans-serif;
              font-weight: bold;
            }
a.footer:visited { color: #000000; }
a.footer:hover { color: #f96819; } 

a.fakehref { color: #020202; font-weight: bold; font-size:88%; border: 1px #020202 solid; padding: 6px;
           -moz-border-radius: 8px;
           -webkit-border-radius: 8px;
           border-radius: 8px;
           -khtml-border-radius: 8px;
           }
a.fakehref:hover { color: #090909; }

@media screen and (max-width: 960px) {
   #hdlogin { display: none; }
}

@media screen and (max-width: 800px) {
   #thepage { min-height: 0px; }
   #nav a { font-size: 0.75em; }
   #contentpage { min-height: 0px; }

   .services { display: block; }
   .servitem { display: block; width: 100%; padding-bottom: 20px; }

   .smlfonticon, .lrgfonticon { display: none; }

   #pagecontent { min-height: 0px; }
   #leftpane { position: relative; display: inline; float: none; width: 100%; min-height: 0px; clear: both; }
   #rightpane { position: relative; display: inline; float: none; width: 100%; min-height: 0px; top: 20px; clear: both; }
   .lefttext { padding-left:4px; padding-right: 2px; }

   .corners { margin-right: 10px; }

   #footer { display: none; }
}

@media screen and (max-width: 640px) {
   #navdiv { display: none; height: auto; }

   .panel_start { display: none; }
   .panel_sanctuary { display: none; }
   .panel_mobile { display: none; }
   .panel_nowra { display: none; }
   .panel_ulladulla { display: none; }
   .panel_milton { display: none; }
   .panel_end { display: none; }

   .sanctuary { display: none; }
   .mobile { display: none; }
   .nowra { display: none; }
   .ulladulla { display: none; }
   .milton { display: none; }

   #nav { position:relative; background: #ffffff; }
   #nav ul { list-style: none; top: 0px; left: 0px; width: 100%; }
   #nav li { position:relative; float: none; width: 100%; border-bottom: 1px #999999 solid; }
   #nav a { display:block; padding-left: 10px; color:#000000; text-align: left; font-size: 0.75em; height:22px; }

   #nav ul ul { position: relative; top: 0px; left: 0px; width: 100%; }
   #nav ul ul li { float: none; background: #f9f9f9; width: 100%; border-bottom: 1px #999999 solid; }
   #nav ul ul li a { padding-left: 30px; }

   #nav ul ul ul { position: relative; top: 0px; left: 0px; width: 100%; }
   #nav ul ul ul li { float: none; background: #f0f0f0; width: 100%; border-bottom: 1px #999999 solid; }
   #nav ul ul ul li a { padding-left: 50px; }

   .pageplus { display: inline; font-size: 1.4em; }
   #leftpane { top: 20px; }

   .evitem img { display: none; }
   .evitem .evsocial img { display: inline; }

   #mobnav { position: absolute;
             top: 10px;
             left: 10%;
             width: 40px;
             height: 40px;
             background: #00ff00;
             cursor: pointer;
             display: block;
             z-index: 501;
           }

   #navdiv.shownavdiv { display: block; }

   h1 { font-size: 1.4em; }
   h2, h3 { font-size: 1em; }
}

@media screen and (max-width: 480px) {
   #accordion img { display: none; }
}

@media screen and (max-width: 320px) {
}

.btn-primary {
	display: block;
    width: 80%;
	background-color: #0074BE;
	color: #FFFFFF !important;
	box-shadow: 0 2px 2px 0 rgba(156, 39, 176, 0.14), 0 3px 1px -2px rgba(156, 39, 176, 0.2), 0 1px 5px 0 rgba(156, 39, 176, 0.12);
	border: none;
    border-radius: 3px;
    position: relative;
    padding: 12px 30px;
    margin: 10px 1px 30px 1px;
    font-size: 1.3em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    will-change: box-shadow, transform;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
	touch-action: manipulation;
    cursor: pointer;
	user-select: none;
    background-image: none;
}

@media screen and (max-width: 800px) {
	.btn-primary {
		width: 100%;
	}
}