/* PA.css 17-05-09 - CSS for all PersonalArchivist.ca html/php files*/

/* -----  PersonalArchivist.ca CSS Rules - Table of Contents  -------------
  ~All Pages
  ~index (home page)

  ~General Purpose/Debugging
--------------------------------------------------------------  */

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

/* ---  Google fonts ------  example: family=Open+Sans  */
/* alternative: <link href='http://fonts.googleapis.com/css?family=Judson:400,400italic,700' rel='stylesheet' type='text/css'> */
@import url('https://fonts.googleapis.com/css?family=Fondamento');


/* ======== ~All Pages ================= */
a { text-decoration: none; } /* underlines are done with hover */

a.menuTitle:link { color: white; }      /* This is modified on some pages */
a.menuTitle:visited { color: white; } /* This is modified on some pages */
a.menuTitle:hover { text-decoration: underline; }
a.menuTitle:active { color: red; }

/* Standard defaults for h's */
 h1 {
    display: block;
    font-size: 2em;
    margin: 0.67em 0;
    font-weight: bold;
}

h2 {
    display: block;
    font-size: 1.5em;
    margin: 0.83em 0;
    font-weight: bold;
}

h3 {
    display: block;
    font-size: 1.17em;
    margin: 1em 0;
    font-weight: bold;
    /* color: gold; */
}

h4 {
    display: block;
    font-size: 1em;
    margin: 1.33em 0;
    font-weight: bold;
}

h5 {
    display: block;
    font-size: .83em;
    margin: 1.67em 0;
    font-weight: bold;
    /* color: aqua; */
}

h6 {
    display: block;
    font-size: .67em;
    margin: 2.33em 0;
    font-weight: bold;
}

.underline { text-decoration: underline; } /* for obvious links */

.firstLineOverhang { text-indent: -6%; }

.Empty-1000x600Pix { /* so bottom of shorter pages doesn't show up too soon */
  height: 600px;
  width: 1000px;
}

.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;
  /* border: 2px solid green; */
}

.vertFlexBox {
  display: flex;
  flex-direction: column;
}

.flexCenter {
  display: flex;
  flex-direction: row;
  align-items: center;
}


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

.topBanner {
  font-family: Fondamento;
  text-align: center;
  background-color: tan;
  height: 7em;
/*  border: 2px solid brown;  */
}

#langSel {
/*
  position: absolute;
  top: 1px;
  right: 10px;
*/
  width: 125px;
  border: 1px solid green;
  margin-top: -9px;  
}  

span.langID {
   cursor: pointer;
}  

span.mainTitle {
   font-size: 3em;
   font-style: italic;
   font-weight: bold;
}  

span.slogan {
   font-family: Arial;
   font-style: italic;
   font-size: 1.3em;
   padding-top: -3px;   
}  

span.smallTitleFont {
   font-family: Fondamento;
   font-size: 1.5em;
   padding-top: -3px;   
}  

.topMenu {
  display: flex;
  justify-content: space-around;
  background-color: brown;
/*  border: 2px solid green;  */
  
}

.menuItem {
  font-weight: bold;
  color: white;
}

.beforeAndAfterDiv {
  display: flex;
  justify-content: space-around;  
/*  border: 1px solid red;  */
}

.beforeOrAfterBox {
  text-align: center;
  width: 27em;
/*  border: 1px solid red;  */
}

.beforeOrAfterBox ul {
  text-align: left; 
}

#homePage { 
  background-color: beige;
  /*
  background-image: url('/ZZ_Imgs/DRRinfo-bgnd.jpg'); 
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100%;
  */
}

/*
    a:link - a normal, unvisited link
    a:visited - a link the user has visited
    a:hover - a link when the user mouses over it
    a:active - a link the moment it is clicked

  a:link { color: #FF0000; }
  a:visited { color: #00FF00; }
  a:hover { color: #FF00FF; }
  a:active { color: #0000FF; }

When setting style for some link states, there are order rules:
    a:hover MUST come after a:link and a:visited
    a:active MUST come after a:hover

The text-decoration mostly used to remove underlines from links:
    a:link { text-decoration: none; }
    a:visited { text-decoration: none; }
    a:hover { text-decoration: underline; }
    a:active { text-decoration: underline; }

The background-color property = background color for links:
    a:link { background-color: #B2FF99; }
    a:visited { background-color: #FFFF85; }
    a:hover { background-color: #FF704D; }
    a:active { background-color: #FF704D; }
*/

p.mainPara {
  margin: 10px 10%;
/*  border: 1px solid red; */
}

img.mainSampleImg {
  width: 30%; 
}  

.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;
}  


#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;} 
  
/*  GRADIENTS in different browsers
For Safari 5.1-6.0;For Opera 11.1-12.0; 
For Firefox 3.6-15; Standard syntax
  background: linear-gradient(direction, color-stop1, color-stop2, ...);
#grad {  
  background: -webkit-linear-gradient(red, blue); 
  background: -o-linear-gradient(right, green, DarkBlue); 
  background: -moz-linear-gradient(right, green, DarkBlue); 
  background: linear-gradient(right, green, DarkBlue); 
} 
*/