/* HM.css 19-10-13 - for HM (Handyman) page*/

/* NOTE: @imports should come before any style rules in the document */
@import url('Normalize.css'); /* Normalize.css for default browser settings */

/* ======== ~All Pages ================= */
.flex { display: flex; }
.flex-btw { display: flex;  justify-content: space-between; }
.flex-around { display: flex; justify-content: space-around; }
.flex-center { display: flex; justify-content: center; }
.vertFlexBox { display: flex; flex-direction: column; }
.flexCenter { display: flex; flex-direction: row;  align-items: center; }


/* ========= ~index (home page) ========== */
main {
/*
  margin: 0 auto;
  width: 60em;
*/
}

#HMhomePage { 
  background-color: beige;
}

.mainRepBox {
  margin: 0 auto;
  width: 800px;
}

.serviceGridBox {
  display: grid;
  grid-template-columns: 170px 300px;  
  grid-auto-rows: 110px;
}  

.taskTitleBox {
  width: 150px;
  height: 80px;
  font-weight: bold;
  padding: 15px 10px 10px 10px;  
}
  
.vertical-center {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
/*
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
*/
}

.repImg {
  margin: 5px;
  width: 80px;
  object-fit: contain;
  /* height: auto; */
}  



.services {
  display: flex;
  justify-content: space-around;
/*  border: 2px solid blue; */
}

.serviceBlock {
  width: 20em;
/*  border: 1px solid magenta; */
}

div.serviceHeading {
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  text-decoration: underline;
}  


#H-footer {
  background-color: tan;
  padding-top: 3px;
  height: 4.5em;
  font-size: .8em;
  margin-bottom: 3px;
 
}
    
/* ========== ~General Purpose/Debugging ======================= */
/* put these at the bottom so they override any other settings, 
final property addition to a class chain */
/* -- Debugging ----------------- */
.DB_r{border:2px solid red;}    .DB_g{border:2px solid green;}  
.DB_b{border:2px solid blue;}   .DB_v{border:2px solid violet;} 
.DB_y{border:2px solid yellow;} .DB_o{border:2px solid orange;}

/*-- Fonts ---------------------- */
.F1pt{font-size: 1pt;} .F4pt{font-size: 4pt;} .F5pt{font-size: 5pt;}
.F6pt{font-size: 6pt;} .F7pt{font-size: 7pt;} .F8pt{font-size: 8pt;}
.F9pt{font-size: 9pt;} .F10pt{font-size: 10pt;} .F12pt{font-size: 12pt;}
.F14pt{font-size: 14pt;}

.Arial{font-family: Arial;} .Times{font-family: Times;}
.bold{font-weight: bold;}  .noDecor{text-decoration: none;}
.italic{ font-style: italic;}

.black{color:black;}   .red{color:red;}   .blue{color:blue;}
.green{color:green;}   .lime{color:lime;} .brown{color:brown;}
.yellow{color:yellow;} .gold{color:gold;}

.whiteBG{background-color: white;}           .paleYellowBG{background-color: #FFFFCC;}   
.veryLightGrayBG{background-color: #EEEEEE;} .violetBG{background-color: violet;}
.blueBG{background-color: blue;}             .transparentBgnd{background: none;}

/*-- Alignment ---------------------- */
.txt_ar{text-align:right;}     .txt_al{text-align:left;} 
.txt_cent{text-align:center;}  .margCentered{margin: 0 auto;}
.inlineBlock { display: inline-block; }
.centeredBlock{display: block; margin-left: auto; margin-right: auto;}
.vertCenter{vertical-align: middle;}
.float-left{float:left;} .float-right{float:right;} fa.clearfloat{clear:both;}

/*--  Indent, Margins and Padding  --------------------*/
  .txtIndent5Pct {text-indent: 5%;}   .txtIndent10Pct {text-indent: 10%;}
  .txtIndent15Pct {text-indent: 15%;} .txtIndent20Pct {text-indent: 20%;}
  .txtIndent30Pct {text-indent: 30%;}

  .marg-l-2Pct{margin-left: 2%;}   .marg-l-5Pct{margin-left: 5%;}
  .marg-l-15Pct{margin-left: 15%;} .marg-l-10Pct{margin-left: 10%;}
  .marg-l-20Pct{margin-left: 20%;} .marg-l-30Pct{margin-left: 30%;}
  .marg-l-40Pct{margin-left: 40%;}
  .marg-l-5px{margin-left: 5px;}   .marg-r-5px{margin-right: 5px;}
  .marg-l-10px{margin-left: 10px;} .marg-r-10px{margin-right: 10px;}
  .marg-l-20px{margin-left: 20px;} .marg-r-20px{margin-right: 20px;}
  .marg-l-30px{margin-left: 30px;} .marg-r-30px{margin-right: 30px;}
  .marg-l-50px{margin-left: 50px;} .marg-r-50px{margin-right: 50px;}
  .marg-l-75px{margin-left: 75px;} .marg-r-75px{margin-right: 75px;}
  .marg-l-100px{margin-left: 100px;} .marg-r-100px{margin-right: 100px;}
  .topMargin2Pct{margin-top: 2%;}   .topMargin5Pct{margin-top: 5%;}
  .topMargin10Pct{margin-top: 10%;} .topMargin20Pct{margin-top: 20%;}
  .topMargin30Pct{margin-top: 30%;} .topMargin40Pct{margin-top: 40%;}
  .marg5px{margin:5px;} .marg15px{margin:15px;} .marg25px{margin:25px;}
  .topMargin0{margin-top: 0;}       .botMargin0{margin-bottom: 0;}

  .pad-l-5px{padding-left: 5px;}     .pad-r-5px{padding-right: 5px;}
  .pad-l-10px{padding-left: 10px;}   .pad-r-10px{padding-right: 10px;}
  .pad-l-20px{padding-left: 20px;}   .pad-r-20px{padding-right: 20px;}
  .pad-l-30px{padding-left: 30px;}   .pad-r-30px{padding-right: 30px;}
  .pad-l-50px{padding-left: 50px;}   .pad-r-50px{padding-right: 50px;}
  .pad-l-75px{padding-left: 75px;}   .pad-r-75px{padding-right: 75px;}
  .pad-l-100px{padding-left: 100px;} .pad-r-100px{padding-right: 100px;}
  .pad-l-130px{padding-left: 130px;} .pad-r-130px{padding-right: 130px;}
  .pad-t-5px {padding-top: 5px;}     .pad-b-5px {padding-bottom: 5px;}     
  .pad-t-10px{padding-top: 10px;}    .pad-b-10px{padding-bottom: 10px;}
  .pad-t-30px{padding-top: 30px;}    .pad-b-30px{padding-bottom: 30px;}   
  .pad-t-50px{padding-top: 50px;}    .pad-b-50px{padding-bottom: 50px;}
  .pad-t-100px{padding-top: 100px;}  .pad-b-100px{padding-bottom: 100px;} 
  .pad-5px{padding: 5px;}            .pad-10px{padding: 10px;}          
  .pad-20px{padding: 20px;}          .pad-30px{padding: 30px;}
  .topPad0{padding-top: 0;}          .botPad0{padding-bottom: 0;}

  /*--  Display  --------------------*/
  .notDisplayed{display: none;}  .hidden{visibility: hidden;}
/*--  Border ----------------------*/
  .NoBorder{border: 0;}
/*--  Cursors -----------------------*/
  .linkCur{cursor: pointer;} .moveCur{cursor: move;} .clickCur{cursor: pointer;}
/*--  List Styles -------------------*/
  .noMarker{list-style-type: none;}