/****************************************************************************************************************/
/**** nalcbranch25.com ... Mobile CSS ***************************************************************************/
/**** Copyright (c) 2026 ... Shields Web Services ***************************************************************/
/****************************************************************************************************************/

/**** BASICS ****************************************************************************************************/

html, body {
  width:100%;
  height:100% important!;
  margin:0;
  padding:0;
  background:url(../imgs/nalcBG.jpg) repeat;
  font-family:geneva, helvetica, arial, sans-serif;
  font-size:100%;
  box-sizing:border-box;
  overflow-x:hidden;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, section {display:block}
a {color:#00F; text-decoration:none}
a:hover {color:#F00}
a.creditEmail {color:#ADD8E6; text-decoration:none}
a.creditEmail:hover {color:#F00}
a.link {color:#00F; text-decoration:none}
a.link:hover {color:#F00}
a.PC {
  color:#FFF;
  text-decoration:none;
  font-family:geneva, helvetica, arial, sans-serif;
  font-size:0.80em;
}
a.PC:hover {color:#B1B1D5}
a.weather {color:#FFF}
.fluidWidth {width:100%}
hr {width:99%; height:2px; margin-bottom:3%; background:#23408F}
hr.pix {width:99%; height:2px; margin-bottom:.5em; background:#23408F}
hr.redBar {background:#FE0000; width:99%; height:0.40em; border:#FFF double; opacity:0.7}
h1.hideAway {display:none}
i {color:#00F; font-size:0.950em; font-style:oblique}
img.floatLeft {float:left; padding-bottom:20px; padding-right:25px}
img.spWidth {width:100%; position:relative; left:0}
img.vAlign {vertical-align:top}
.loggedIn {display:flex; justify-content:center; align-items:center; color:#00F; font-size:0.95em; font-style:oblique}
.rightAligned {float:right}
table.grid {display:none}
td {width:25%}
table.officers {width:100%}
table.officers td.name {text-align:left}
table.officers td.title {text-align:right}
table.weatherData {                     /*   mobile  */
  position:relative;
  width:100%;
  margin-left:auto;
  margin-right:auto;
}
td.townLink {                         /*   mobile  */
  height:45px;
  background:#23408F;
  color:#FFF;
  text-align:center;
}
ul.photoLinks {
  text-align:center;
  padding-left:0;
  margin-left:auto;
  margin-right:auto;
  list-style-type:none;
}
ul.leftAlignedList {text-align:left; list-style-type:none}


/**** CLASSES ***************************************************************************************************/

.bannerHead {
  color:#000; 
  font-size:150%; 
  font-family:geneva, helvetica, arial, sans-serif; 
  font-weight:bold; 
  font-style:oblique;
}
.bannerWelcome {
  color:#000; 
  font-size:125%; 
  font-family:"Gill Sans", helvetica, arial, sans-serif; 
  font-weight:bold; 
  font-style:oblique;
}
.black {color:#000}
.calEmoji {font-size:140%}
.cBlock3_index {
  width:16.875em;
  height:1.250em;
  padding:0.650em 0;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
/****
.cBlockFooter {font-family:geneva, helvetica, arial, sans-serif; font-size:1.00em; color:#FFF}
****/
.cellA {
  height:20px;
  background:#FE0000;
  padding-top:8px;
  padding-bottom:2px;
  border-bottom:2px solid #000;
  text-align:center;
  font-family:geneva, helvetica, arial, sans-serif;
  font-size:1.00em;
  color:#FFF;
}
.cellA:hover {background:#003470}
.cellB {
  height:20px;
  background:#FE0000;
  padding-top:8px;
  padding-bottom:2px;
  border-bottom:2px solid #000;
  text-align:center;
  font-family:geneva, helvetica, arial, sans-serif;
  font-size:1.00em;
  color:#FFF;
}
.cellB:hover {background:#003470}
.cellCal {
  order:1;
  width:100%;
  background:#FE0000;
  padding:3px 0 5px 0;
  border-bottom:2px solid #000;
}
.cellCal:hover {background:#FE0000}
.centerText {text-align:center; margin-left:auto; margin-right:auto}
.centerAsters {display:flex; justify-content:center}
.centerPC {width:100%; text-align:center; margin-left:auto; margin-right:auto}
.contact {font-family:geneva, helvetica, arial, sans-serif; font-size:0.850em; color:#000}
.contentCorral {width:90%; margin-left:auto; margin-right:auto}
.contentText {width:85%; text-align:justify; margin-left:auto; margin-right:auto}
.dateRight {width:100%; text-align:center; margin:0 auto}
.dateText {font-family:geneva, helvetica, arial, sans-serif; font-size:0.850em; color:#FFF}
.dBarbuzzi_2025 {display:flex; justify-content:center}
div.game {display:flex; flex-direction:row; justify-content:center; align-items:center}
.dkBlue {color:#23408F}
.drop {
  border:1px solid #000;
  -webkit-box-shadow:3px 3px 3px #585858;
  -moz-box-shadow:3px 3px 3px #585858;
  -ms-box-shadow:3px 3px 3px #585858;
  -o-box-shadow:3px 3px 3px #585858;
  box-shadow:3px 3px 3px #585858;
}
.finePrint {color:#000; font-family:geneva, helvetica, arial, sans-serif; font-size:0.800em}
.flexContainer {display:block; position:relative; top:-8px; width:100%}
/****
.flexTable {display:table; width:99.75%; padding:3px 0 3px 3px; background:#000}
****/
.floatRight {float:right}
.floatLeft {float:left}
.floatLeftLinks {float:left; text-align:left; list-style-type:none}
.full {width:100%; max-width:268px}
.gridPM {order:2}
.gridNews {order:3}
.gridWeather {order:4}
.gridVets {order:5}
.gridTrivia {order:6}
.headingBlock {width:80%; text-align:center; margin-left:auto; margin-right:auto}
.hRule75 {width:75%}
.idLeft {width:100%; text-align:center; margin:0 auto; padding-right:10%}
.indexEmoji {font-size:200%}
.invisible {display:none}
.justifyText {text-align:justify}
.leftText {text-align:left}
.marTop {margin-top:4px}
.marginTop {margin-top:10px}
.marginTopFive {margin-top:5px}
.myCount {
  display:inline-block;
  width:6.000em;
  text-align:center;
  font-family:geneva, helvetica, arial, sans-serif;
  font-size:0.975em;
  font-weight:bold;
  letter-spacing:3px;
  color:#003470;
  background:#B1B1D5;
  border:2px solid #003470;
  padding-top:2px;
}
.noBreak {white-space:nowrap}
.noDisplay {display:none}
.noJavaScript {
  width:90%;
  background:#FFF;
  color:#23408F;
  font-family:geneva, helvetica, arial, sans-serif;
  font-size:1.00em;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  padding:10px 0;
  margin-top:10px;
  border:3px solid #23408F;
}
.padBottom20 {padding-bottom:20px}
.padBottom20Img {padding:0}
.pageHeading {
  color:#23408F;
  /*text-align:center;
  margin-left:auto;
  margin-right:auto;*/
  font-family:geneva, helvetica, arial, sans-serif;
  font-size:1.20em;
  font-weight:700;
  text-shadow:1px 1px #000;
}
.pageBold5 {
  color:#003470;
  font-family:geneva, helvetica, arial, sans-serif;
  font-size:0.85em;
  font-weight:700;
}
.photoPix {display:inline-block; width:8.00em; padding:3px; text-align:center}
.photoPix2 {
  display:inline-block;
  width:210px;
  padding:5px 15px 5px 0;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.photoPix3 {
  display:inline-block;
  width:8.45em;
  padding:3px;
  text-align:center;
}
.photoPixLCPF {float:left; width:180px; margin:8px; padding:3px; text-align:center}
.photoPixHC {float:left; text-align:center; width:150px; margin-bottom:10px}
.pushCenter {text-align:center; margin-left:auto; margin-right:auto}
.row {display:flex; flex-direction:column; flex-wrap:nowrap}
.stewNew {
  color:#FF0000;
  font-family:"Monaco", monospace;
  font-size:1.10em;
  font-weight:bold;
}
.subHeadCenter {
  color:#FE0000;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  padding:10px 0;
  font-family:geneva, helvetica, arial, sans-serif;
  font-size:1.100em;
  text-shadow:1px 1px #000;
}
.tabs {margin-bottom:10px}
.text {display:inline-block}
.text_vAlign {vertical-align:middle}
.titleOverBar {
  position:relative;
  top:-1.325em;
  color:#23408F;
  background:transparent;
  font-family:geneva, helvetica, arial, sans-serif;
  font-size:3.30em;
  font-weight:700;
  text-shadow:2px 2px 3px #A9A9A9;
}
.titleBox {width:100%; height:1.50em; padding:1.5em 0; border:1px dashed green}
.triggerA {display:none}
.triviaPara70 {display:block; width:70%; margin-left:auto; margin-right:auto}
.typicalParagraph {color:#000; font-family:geneva, helvetica, arial, sans-serif; font-size:1.00em}
.typicalParagraph2 {
  position:relative;
  top:-50px;
  height:40px;
  color:#000;
  font-family:geneva, helvetica, arial, sans-serif;
  font-size:1.00em;
}
.white {color:#FFF}

/**** HTML 5 SEMANTICS (footer) *********************************************************************************/

footer {
  display:inline-block;
  width:100%;
  height:auto;
  background:#23408F;
  padding:2.00em 0 1.25em 0;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.towns {width:80%; margin-left:auto; margin-right:auto}
.towns1 {
  background:#23408F;
  width:100%;
  font-family:geneva, helvetica, arial, sans-serif;
  font-size:1.30em;
  color:#FFF;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  text-shadow:2px 2px #000;
}
.towns2 {
  background:#23408F;
  width:90%;
  font-family:geneva, helvetica, arial, sans-serif;
  font-size:0.90em;
  color:#FFF;
  text-align:justify;
  margin-left:auto;
  margin-right:auto;
  line-height:1.2;
}
.noBreak {white-space:nowrap}
.credits {
  width:100%;
  padding:1.00em 0;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  font-family:geneva, helvetica, arial, sans-serif;
  font-size:0.60em;
  color:#FFF;
}

/**** HTML 5 SEMANTICS (main, header) ***************************************************************************/

main {
  display:block;
  width:100%;
  height:auto;
  min-height:100%;
  padding:0;
  margin-left:auto;
  margin-right:auto;
  background:#FFF;
  border-left:2px solid #23408F;
  border-right:2px solid #23408F;
}
header {
  position:relative;
  width:100%;
  height:auto;
  background:#FFF;
  padding:0;
  margin-bottom:-4px;
}

/**** IDS *******************************************************************************************************/

#br25Officers {width:90%; text-align:center; margin-left:auto; margin-right:auto}
#contentCorral {width:100%; height:auto; text-align:center; margin-left:auto; margin-right:auto}
#credits1 {width:98%; text-align:center; margin:10px auto 0 auto}
#credits1-SP {display:none}
#credits2 {width:98%; text-align:center; margin:10px auto 0 auto}
#fadeGallery {
  position:relative;
  width:285px;
  height:188px;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  border:2px solid #003470;
  z-index:5000;
}
#indexCenter {
  width:100%;
  height:auto;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  background:#FFF;
  overflow:hidden;
}
#leftContent {width:100%; float:left; text-align:center; margin:0 auto 20px auto; background:#FFF}
#mainInsertPage {
  position:relative;
  top:0;
  left:0;
  background:#FFF;
  width:95%;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  margin-top:15px;
  padding-bottom:15px;
  border-left:1px solid #FFF;
  border-right:1px solid #FFF;
}
#mainInsertPage p {text-align:left}
#messageDiv{
  width:85%;
  background:#7DF9FF;
  color:#000;
  font-family:geneva, helvetica, arial, sans-serif;
  font-weight:600;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  padding:0.70em 1.00em;
  border:3px ridge #FE0000;
  z-index:5000;
}#myMap {width:75%; height:18em; margin:25px auto; border:3px black solid}
#pageCenter {padding-top:2.00em; text-align:justify; margin-left:auto; margin-right:auto}
#pageCenter p {text-align:justify}
#rightContent {
  width:100%;
  float:left;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:10px;
}
#sectionCenterPgs {
  width:92%;
  overflow:auto;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  padding:3% 4% 0 4%;
}
#slideShow {width:420px; height:279px; margin:0; padding:0}
#slideShow IMG {position:absolute; top:0; left:0; z-index:8; opacity:0.0}
#slideShow IMG.active {z-index:10; opacity:1.0}
#slideShow IMG.last-active {z-index:9}
#theMessage {width:80%; height:20%; text-align:center; margin:15% auto}
#whyNotCenterHC {width:750px; height:161px; text-align:center; margin-left:auto; margin-right:auto}
::-webkit-scrollbar {width:7px}
::-webkit-scrollbar-track {-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3)}
::-webkit-scrollbar-thumb {background-color:#B1B1D5; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5)}

/**** NAVIGATION ************************************************************************************************/

.homeIcon {display:none}
.trigger {color:#FFF; font-size:1.15em; text-shadow:1px 1px #000}
.mobileText {
  display:inline-block;
  padding-top:15px;
  color:#FFF;
  font-family:geneva, helvetica, arial, sans-serif;
  font-size:1.00em;
}
a.wideLink {padding-right:45%}
#menuBar {
  display:block;
  position:relative;
  top:-4px;
  width:100%;
  height:40px;
  margin:0 auto;
  padding:15px 0 0 25px;
  background:#23408F;
  text-align:left;
  border-bottom:2px ridge #FFF;
  margin-bottom:5px;
  z-index:1000;
}
nav {overflow-x:hidden}
nav ul#panel {
  display:none;  position:relative;
  top:-9px;
  width:100%;
  height:auto;
  margin:0 auto;
  padding:0;
  text-align:left;
  background:#23408F;
  border-bottom:solid 1px #c3c3c3;
}
nav ul#panel li {
  display:block;
  width:100%;
  height:30px;
  padding:0 0 15px 25px;
  border-bottom:2px ridge #FFF;
}
nav ul#panel li ul li {
  display:block;
  width:100%;
  height:25px;
  padding:10px 0 10px 25px;
  border-bottom:2px ridge #FFF;
}
/**** BRANCH 25 + sub-menu ****/
ul#subMenu1.show {
  display:block;
  position:relative;
  top:20px;
  left:-25px;
  width:100%;
  padding:0;
  list-style:none;
  background:#666;
  border-top:2px ridge #FFF;
}
ul#subMenu1.show a {
  color:#FFF;
  font-family:geneva, helvetica, arial, sans-serif;
  font-size:0.95em;
  font-weight:normal;
  text-decoration:none;
}
ul#subMenu1.hide {display:none !important}
nav ul#panel li.expandSub1 {
  display:block;
  width:105%;
  height:382px;  /** THIS IS GOOD **/
  padding:0 0 0 25px;
  border-bottom:2px ridge #FFF;
}
/**** NALC + sub-menu ****/
ul#subMenu2.show {
  display:block;
  position:relative;
  top:20px;
  left:-25px;
  width:100%;
  padding:0;
  list-style:none;
  background:#666;
  border-top:2px ridge #FFF;
}
ul#subMenu2.show a {
  color:#FFF;
  font-family:geneva, helvetica, arial, sans-serif;
  font-size:0.95em;
  font-weight:normal;
  text-decoration:none;
}
ul#subMenu2.hide {display:none !important}
nav ul#panel li.expandSub2 {
  display:block;
  width:105%;
  height:287px;  /** THIS IS GOOD **/
  padding:0 0 0 25px;
  border-bottom:2px ridge #FFF;
}
/**** POLITICS + sub-menu ****/
ul#subMenu3.show {
  display:block;
  position:relative;
  top:20px;
  left:-25px;
  width:100%;
  padding:0;
  list-style:none;
  background:#666;
  border-top:2px ridge #FFF;
}
ul#subMenu3.show a {
  color:#FFF;
  font-family:geneva, helvetica, arial, sans-serif;
  font-size:0.95em;
  font-weight:normal;
  text-decoration:none;
}
ul#subMenu3.hide {display:none !important}
nav ul#panel li.expandSub3 {
  display:block;
  width:105%;
  height:287px;   /** THIS IS GOOD **/
  padding:0 0 0 25px;
  border-bottom:2px ridge #FFF;
}
/**** LINKS + sub-menu ****/
ul#subMenu4.show {
  display:block;
  position:relative;
  top:20px;
  left:-25px;
  width:100%;
  padding:0;
  list-style:none;
  background:#666;
  border-top:2px ridge #FFF;
}
ul#subMenu4.show a {
  color:#FFF;
  font-family:geneva, helvetica, arial, sans-serif;
  font-size:0.95em;
  font-weight:normal;
  text-decoration:none;
}
ul#subMenu4.hide {display:none !important}
nav ul#panel li.expandSub4 {
  display:block;
  width:105%;
  height:425px;    /** THIS IS GOOD **/
  padding:0 0 0 25px;
  border-bottom:2px ridge #FFF;
}

/**** PAGES: BILL TRACKING **************************************************************************************/

#accordionPix {width:85%; text-align:left; margin-left:auto; margin-right:auto}
.contained {background:#FFF; padding:5px auto 5px auto}
.contained p {text-align:justify; color:#000}
.contained a {color:#00F}
.contained a:hover {color:#F00}

/**** PAGES: PHOTOS ********************************************************************************************/

#description {text-align:center; margin:2% auto}
.desc {font-family:geneva, helvetica, arial, sans-serif; font-size:1.2em; font-weight:600}
img.logo {vertical-align:middle}
#pixCont {
  display:block;
  width:98%;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:10%;
  overflow:auto;
}
/**
#photoMain {
  position:relative;
  top:65px;
  width:73%;
  height:auto;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
**/
#photoMain {
  position:relative;
  top:5px;
  width:90%;
  height:auto;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.photoPixPhotos {
  display:inline-block;
  width:125px;
  height:94px;
  border:2px solid blue;
  margin:2px;
  text-align:center;
}
#fBoxCredit {width:90%; text-align:center; margin-left:auto; margin-right:auto; margin-bottom:3%}
.fBoxText {font-family:geneva, helvetica, arial, sans-serif; font-size:.7em; color:black}
a.fBox {
  text-decoration:none;
  font-family:geneva, helvetica, arial, sans-serif;
  font-size:0.95em;
  color:#A0B8F4;
}
a.fBox:hover {
  text-decoration:none;
  font-family:geneva, helvetica, arial, sans-serif;
  font-size:0.95em;
  color:blue;
}

/**** PAGES: RETIREMENT ****************************************************************************************/

ul.retLinks {text-align:center; margin-left:auto; margin-right:auto; list-style-type:none}
table.retLinks {width:90%; margin-left:auto; margin-right:auto; font-size:.925em}
table.vetLinks {width:80%; margin-left:auto; margin-right:auto; font-size:.925em}
.rlLt {width:15%}
.rlRt {width:85%; text-align:left}
td.rlRtVets {width:85%; text-align:right}