/* DRR-info.css 15-04-01 - CSS for all DougRRogers.info html/php files*/

/*
My CSS philosophy:
   use quite a few class names, and put them in places where 
   they'll help understand the code..
*/

@import url('Normalize.css'); /* Normalize.css for default browser settings */

/* -----  DRR-info CSS Rules - Table of Contents  -------------
  ~All Pages
  ~index (home page)
  ~Space Sciences Career Page
  ~Businesses/Webpages Page
  ~Skills Page  
  ~Travel Page
  ~Thoughts Page
  ~Climate Change Page
  ~Personal Page
  ~General Purpose/Debugging
--------------------------------------------------------------  */

/* ======== ~All Pages ================= */
main {
  margin-top: 10px;
  margin-left: 3%;
}

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

a.goldlink:link { color: gold; }      /* This is modified on some pages */
a.goldlink:visited { color: orange; } /* This is modified on some pages */
a.goldlink:hover { text-decoration: underline; }
a.goldlink: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;
  align-content: space-between;
}


.horFlexBox {
  display: flex;
  flex-direction: row;
  /* border: 2px solid green; */
}

.horRLFlexBox {
  display: flex;
  flex-direction: row-reverse;
  /* border: 2px solid green; */
}

.horFlexBox-Even {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.horFlexBox-Center {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* border: 2px solid green; */
}

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

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

.closeOrExpandBox {
  font-family: arial;
  font-size: 12pt;
  font-weight: bold;
  background-color: lightGray;
  color: black;
  position: absolute;
  top: 0;
  height: 12px;
  width: 12px;
  margin-top: 5px;
  margin-right: 5px;
  cursor: pointer;
  border: 1px solid black;
  line-height: 12px;
}

.cEB-L {
  left: 5px;
}

.cEB-R {
  right: 0;
}

.whiteBorder{ border: 2px solid white; vertical-align: middle; }

/* --- Contact info box appearing in top right corner of all pages -----*/
/* --------- Scaling ----------------- */
#divContactInfo {   
  background: linear-gradient( to bottom right, green, DarkBlue );
  border: 2px solid gold;
  color: tan;
  height: 48px;
  position: fixed;
  right: 2px;
  top: 2px;
  width: 185px;
  z-index: 999;
  cursor: zoom-in;
}

#divContactInfo #imgContactPhoto {
  background: none;
  float: left;
  height: 90%;
  padding-left: 2px;
  padding-top: 2px;
}

#divContactInfo #divContactDetails {
  background: none;
  float: left;
  font-family: Arial;
  font-size: 50%; /* 2.0vh; */
  height: 100%;
  line-height: 110%;/* 2.2vh; */
  padding-left: 2px;
  /* width: 150px; */
}

#divContactInfo #imgContactDetailsLinkedInLogo {
  height: 12%;
}
/* -------------------------- */



/* ========= ~index (home page) ========== */
#homePage { /* the id of the body element */
  background-color: #3B6BBD;
  background: url('/ZZ_Imgs/DRRinfoMBike-bgnd.jpg');
  background-repeat: no-repeat;
  background-position: center bottom;
  height: 150%;
  /* 
  background-size: 100%;
  */
  
/*
*/
}

/*
#bg {
   background: url('/ZZ_Imgs/DRRinfoMBike-bgnd.jpg');
   background-repeat: no-repeat;
   background-size: 100%;
   background-position: 0 0;
   background-position: center top;
   position: absolute;
   left: 0;
   top: 0;
   height: 1200px;
*/
/*
   width: 1840px;
   height: 1200px;
   position: absolute;
   left: 0;
   bottom: 0;
}
*/



  #homePage .NameAndInfo {
    color: gold;
    font-family: Times;
    font-size: 40pt;
    position: fixed;
    top: 5%;
    width: 200px;
    /* margin-top: 30%;*/
    /* float: left;*/
    /* border: 2px solid green;*/
  }
  

/*
  #homePage navigation div{
    background: none;
    line-height: 60px;
    margin-left: 50%;
    margin-top: 10%;
    width: 300px;
  }
*/
  .navigation {
    line-height: 40px;
    margin-left: 25%;  /* pre 22-12-29: 50%; */
    /* margin-top: 50%; */
    padding-top: 10px; /* pre 22-12-29: 200px; */
    width: 650px;
    /* border: 2px solid yellow;  */
  }

  .navigation ul {
    color: red;
    font-family: 'Comic Sans MS';
    font-size: 18pt;
    list-style-type: none;
    text-decoration: none;
  }  


  
/* ========== ~Space Sciences Career Page =========== */
#career { 
  background-color: #15243B;
  background-image: url('/Career/YY_Imgs/CareerBgnd-1337h.jpg');  
  background-repeat: no-repeat;
  color: gold;   /* default color for most text (headlines are red) */
  font-family: Arial;
  font-size: 12pt; 
}

/*
  #career a:link { color: gold; }
  #career a:visited { color: orange; }
  #career a:hover { text-decoration: underline; }
  #career a:active { color: red; }
*/

  #career h1 {
    color: red;
    font-size: 36pt;
    font-weight: bold;  
    margin-bottom: 5px;
    margin-top: 5px;
  }

  #career h2 {
    color: red; 
    font-size: 22pt; 
    margin-bottom: 5px;
    margin-top: 15px;
    padding-top: 10px;
  }

  #career h3 { 
    font-size: 14pt; 
    margin-bottom: 5px;
    margin-top: 5px;
  }

  #career .WhereWhenWhatText {
    font-size: 12pt;
    text-align: center;
    width: 500px;
  }
  
  #career table.missions {
    background: none;
    border-collapse: collapse; 
    border-spacing: 0;
    padding-left: 30px;
    /* border: 2px solid orange; */
  }

  #career table.software  td{
    padding: 10px;
    /* border: 2px solid orange; */
  }

#careerDetailsPopup {
  display: none;
  left: 20%;
  position: fixed;
  top: 50px;
  z-index: 10;
}

#detailsPopupIFrame {
  border: 2px solid red;
  border-radius: 10px;
  left: 10%;
  position: fixed;
  top: 55px;

/*  height: 70%; */ /* Responsive */
/*  width: 80%;  */ /* Responsive */

  height: 500px;  /* Fixed */
  width: 640px;   /* Fixed */
  }


/* ---- Career - Missions Details Popup ----- */

div.DetailsTitlePrevNext {
  display: flex;
  flex-direction: row;
  font-size: 20pt;
  font-weight: bold;
  justify-content: space-around;
  /* justify-content: space-between; */
  margin: 10px;
}

div.btnPrevNext {
  background: #4479BA;
  border: solid 1px #20538D;
  border-radius: 4px;
  color: #FFF;
  font-size: 14pt;
  font-weight: normal;
  height: 25px;
  margin: 0 20px;
  text-align: center;
  /* padding: 10px 15px; */
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  width: 70px;
}
div.btnPrevNext:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}

body.Career-MissionDetails-body {
  background-color: tan;
  height: 485px;
  width: 620px;
}

h1.Career-MissionDetails {
  color: black;
  font-family: Arial;
  font-size: 22pt;
  font-style: Italic;
  font-weight: bold;
  text-decoration: underline;
}

h2.myRoleTitle {
  color: black;
  font-family: Arial;
  font-size: 14pt;
  font-weight: bold;
  text-decoration: underline;
}

.missionDesc {
  display: flex;
  flex-direction: row;
  font-size: 10pt;
  margin-bottom: 10px;
}

.myRole {
  font-size: 10pt;
}

.Career-MissionDetails-body img {
  border: 2px solid DarkBlue;
}

img.missionImg {
  height: 160px;
  margin: 0 10px;
}

.missionDescText {
  display: inline-block;
}

img.roleImgVert {
  height: 175px;
  margin-bottom: 25px;
}

img.roleImgHor {
  margin: 5px;
  width: 135px;
}

.roleText {
  display: inline-block;
  width: 370px;  /* 50%; */
}

ul.roleList {
  font-family: Arial;
  /* padding: 0 5px 30px; */
  margin: 0 10px 0 0;
}


img.otherProjectsImg {
  height: 90px;
}

img.otherProjectsMiniSatImg {
  width: 80px;
}

.otherProjectsDescrip {
  width: 200px;
}

/* ------- Career - Facilities --------- */
/*
#facilities div{
  border: 2px solid red;
}  
*/

body#facilities {
  background-color: PapayaWhip;  /* DarkSalmon; */
  height: 485px;
  width: 620px;
  
  /* width: 90%; */
  margin: 0 auto;
}

#facilities img {
  border: 2px solid DarkBlue;
}

#facilities h1, #facilities h2, #facilities h3 {
  color: black;
  font-family: Arial;
  font-weight: bold;
  padding: 3px;
  margin: 0;
}

#facilities h1 {
  font-size: 18pt;
}

#facilities h2 {
  font-size: 14pt;
  font-style: Italic;
  text-decoration: underline;
}

#facilities h3 {
  font-size: 12pt;
  text-decoration: underline;
}


#facilities .descText {
  width: 75%;
  margin: 0 10px;
  /* font-size: 2.5vw; */

}

#facilities .content {
  /* height: 85vh; */ /* Repsonsive*/
  height: 420px;
  overflow: auto;
  /* border: 2px solid blue; */
}

#facilities .roleText {
  /* width: 100%; */  /* 50%; */
  margin: 0 auto;
}

#facilities  ul.roleList {
  width: 530px; /* 100%; */
  font-family: Arial;
  margin: 0 10px 0 0;
}

#facilities .myResp {
  margin: 0 auto;
}

#facilities  table {
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

#facilities table tr, #facilities table td {
  padding: 10px;
  border: 1px solid black;
}

img.facilitiesImg {
  height: 150px;
  max-width: 200px;
  margin: 5px;
}

body#infoDetails {
  background-color:  DarkSeaGreen; /* Gainsboro; */
  /*
  width: 90%;
  margin: 0 auto;
  */
}

/* ------- Career - Software --------- */
body.Career-SoftwareDetails-body {
  background-color: LightBlue;
}

h1.Career-SoftwareDetails {
  color: black;
  font-family: Arial;
  font-size: 24pt;
  font-style: Italic;
  font-weight: bold;
  text-decoration: underline;
}

h2.softwareSpecsTitle {
  color: black;
  font-family: Arial;
  font-size: 14pt;
  font-weight: bold;
  text-decoration: underline;
}

img.mainSWScreenShotImg {
  display: block;
  margin: 0 auto;
}

.softwareDesc {
 /* width: 95%;  */
  margin: 0 10px;
}

.softwareSpecsText {
  display: inline-block;
  margin: 0 10px;
  width: 370px;  /* 50%; */
  /* border: 1px solid yellow; */
}

ul.softwareSpecsList {
  font-family: Arial;
  padding: 0 30px;
  /* list-style-type: disc; */
  /* border: 2px solid green; */
}

#infoDetails  td {
  margin: auto;
  padding: 0 5px;
}


.InfoDescrip {
  font-family: Arial;
  font-size: 10pt;
  padding-left: 5px;
  width: 330px;
 }


/* ====== ~Businesses/Webpages Page ============ */
#business { 
  background-image: url('/Bsns/Bsns-Bgnd_Only_1280x918.jpg'); 
  background-repeat: no-repeat;
  background-size: 100%;
}

#business h1, #business h2, #business h3, #business h4, #business h5 {
  color: #010F7A;
  font-family: Times;
  font-weight: bold;
  text-decoration: none;
}
  
#business h1 {
  font-size: 34pt;
  margin: 5px 10px;
  padding-top: 3px;
  padding-bottom: 5px;
}

#business h2 {
  font-size: 22pt;
  margin: 5px;
  padding: 5px 5px 10px 5px;
}

#business h3 {
  font-size: 18pt;
  line-height: 25px;
  margin: 0;
  padding: 0 0 10px 5px;
}

table.bsns {
  border: 2px solid #010F7A;
  border-collapse: collapse;
  border-spacing: 5px;
  margin-left: 5%;  /* 10%; */
  width: 84%;  /* 74%; */
}

table.bsns tr{
  border-bottom: 2px solid #010F7A;
}

.bsns a:link {  /* l,v,hover,active */
  color: DarkBlue;
}
.bsns a:visited {
  color: Blue; /* DarkGreen; */
}

h3.websiteTitle {
  color: #010F7A;
  font-family: Times;
    display: block;
    font-size: 1.01em;
    margin: 1em 0;
    font-weight: bold;
    /* color: gold; */
}


h4.websiteTitle {
  color: #010F7A;
  font-family: Times;
    display: block;
    font-size: 1.3em;
    margin: 1.33em 0;
    font-weight: bold;
  /* border: 2px solid green; */
}


.nameImg {
  padding: 5px;
  text-align: center;
  width: 160px;
  /* height: 120px; */
  /* border: 2px solid red; */
}

.bsnsDesc {
  color: #010F7A;
  font-family: Times;
  font-size: 11pt;  /* 12pt; */
  padding: 2px;
  /* border: 2px solid green; */
}

.bsnsDesc p {
  margin: 8px 0 3px 0;
}

/* =============== ~Skills Page ================= */

#skills { 
  background-color: #001145;
  background-image: url('/Skills/YY_Imgs-Skills/Skills-Bgnd-circles_swirls.jpg'); 
  background-repeat: repeat;
  background-size: 100%;
  font-size: 100%;
}

#skills p, h1 {
  margin: 0; 
  padding: 0; 
}

#skills h1, #skills h2 {
  font-weight: bold;
  text-decoration: underline;
}

.skillsPanel{
  background-color: none;
  background-repeat: no-repeat;
  background-size: 100%;
}

.skillsTitleImage { 
  background-image: url('/Skills/YY_Imgs-Skills/Skills-Title-BlueWithCrane.png'); 
  height: 15%;
  left: 4%;
  position: fixed;
  top: 2%;
  width: 11%;
}

.softwarePanel {
  background-color: white;
  background-image: url('/Skills/YY_Imgs-Skills/SW-Bgnd-PageOfCode.png'); 
  font-family: 'Lucida Console';
  font-size: 1.2em;
  font-size: 1.2vw;
  font-weight: bold;
  height: 30%;
  left: 3%;
  position: fixed;
  top: 18%;
  width: 22%;
}

.softwarePanelText {
  margin-left: 5%;
/*  margin-top: 2%; */
}

.softwarePanelText h1 {
  font-size: 2em;
  font-size: 3vw;
  padding-bottom: .3%;
  padding-top: 1%;
}

.softwarePanelTitle {
  font-size: 1.5em;
  font-size: 2vw;
  padding-bottom: .1%;
  padding-top: .1%;
}

.CADPanel {
  background-image: url('/Skills/YY_Imgs-Skills/CAD-Bgnd-BVIT.png'); 
  font-family: 'Comic Sans MS',Impact;
  font-size: 1.4em;
  font-size: 1.4vw;
  height: 29%;
  left: 31%;
  position: fixed;
  top: 3%;
  width: 26%;
}

.CADPanelText {
  margin-left: 20%;
  margin-top: 10%;
  font-weight: bold;
}

.CADPanel h1{
  font-size: 1.2em;
  font-size: 2.2vw;
  line-height: 2.5vw;
}

.machiningPanel {
  background-image: url('/Skills/YY_Imgs-Skills/Skill-Machining-Blank.png'); 
  color: white;
  font-family: 'Arial';
  font-size: 1em;
  font-size: 1.1vw;
  height: 23%;
  left: 37%;
  position: fixed;
  text-shadow: 2px 2px darkslategray, 3px 3px black;
  top: 34%;
  width: 24%;
}

.machiningPanelText {
  margin-left: 12%;
  margin-top: 5%;
  width: 85%;
}

.machiningPanel h1 {
  color: white;
  font-size: 1em;
  font-size: 1.5vw;
  margin-left: -6%;
  text-shadow: 2px 2px darkslategray, 3px 3px black;
}

.businessPanel {
  background-color: white;
  background-image: url('/Skills/YY_Imgs-Skills/Bsns-Bgnd-PieChart.jpg'); 
  font-family: Times;
  font-size: 1em;
  font-size: .95vw;
  height: 21%;
  left: 30%;
  position: fixed;
  top: 58%;
  width: 26%;
}

.businessPanelText {
  margin-left: 5%;
  margin-top: 0.5%;
}

.businessPanel h1 {
  font-size: 2em;
  font-size: 1.8vw;
  margin-bottom: 0;
  padding-bottom: 0;
}

.teachingPanel {
  background-image: url('/Skills/YY_Imgs-Skills/Bgnd-Teaching-Blkbrd.jpg');
  background-size: cover;
  border: 4px groove brown; 
  /* border-style: groove;  */
  color: white;
  font-family: 'Comic Sans MS';
  font-style: italic;
  font-size: 1.4em;
  font-size: 1.3vw;
  font-weight: bold;
  height: 13%;
  left: 5%;
  position: fixed;
  top: 51%;
  width: 18%;
}

.teachingPanelText {
  margin-left: 6%;
  margin-top: 1%;
  width: 85%
}

.teachingPanel h1 {
  font-size: 1.8em;
  font-size: 1.8vw;
  padding-top: 1%;
} 



.artPanel {
  background-image: url('/Skills/YY_Imgs-Skills/Art-Bgnd-ChairAndShirt.png'); 
  color: red;
  font-family: 'Comic Sans MS';
  font-size: 1.1em;
  font-size: 1.1vw;
  font-weight: bold;
  height: 35%;
  left: 7%;
  line-height: 3vh;
  position: fixed;
  text-shadow: 1px 1px blue, 2px 2px blue;
  top: 68%;
  width: 18%;
}

.artPanelText {
  margin-left: 18%;
  margin-top: 5%;
  width: 75%
}

.artPanel h1 {
  font-size: 1.8em;
  font-size: 2.0vw;
  padding-top: 1.3%;
  text-shadow: 2px 2px blue, 3px 3px blue;
} 

.electronicsPanel {
  background-image: url('/Skills/YY_Imgs-Skills/Bgnd-Electronics-Oscope.jpg'); 
  color: GreenYellow;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 1em;
  font-size: 1.1vw;
  height: 66%;
  left: 68%;
  position: fixed;
  top: 11%;
  width: 29%;
}

.electronicsInnerPanel {
  height: 52%;
  padding-left: 11%;
  padding-top: 18%;
  width: 70%;
}

.electronicsPanel h1{
  font-size: 2em;
  font-size: 3.0vh;
}

.electronicsPanel h2 {
  font-size: 1.2em;
  font-size: 2.0vh;
  padding: 5px 0;
  margin: 0;
}

#skills ul {
  margin: 0; 
  padding: 0; 
}


.musicPanel {
  background-color: white;
  background-image: url('/Skills/YY_Imgs-Skills/Bgnd-Music-BlkBirdAnim.gif'); 
  color: FireBrick;
  font-family: 'Book Antiqua', Palatino, serif;
  font-size: 1.5em;
  font-size: 1.7vw;
  font-style: italic;
  font-weight: bold;
  height: 17%;
  left: 72%;
  line-height: 4.0vh;
  position: fixed;
  text-shadow: 2px 2px white, -2px -2px white, 2px -2px white, -2px 2px white;
  top: 79%;
  width: 22%;
}

.musicPanelText {
  margin-left: 10%;
  margin-top: 3%;
}

.musicPanel h1 {
  font-size: 2em;
  font-size: 1.9vw;
}

.otherSkillsPanel {
  background-color: #00A0F4;
  background-image: url('/Skills/YY_Imgs-Skills/Skills-Other-Bgnd-BrainGears.jpg'); 
  color: white;
  font-family: Arial;
  font-size: .8em;
  font-size: .8vw;
  height: 13%;
  left: 35%;
  position: fixed;
  top: 83%;
  width: 31%;
}

.otherSkillsText {
  margin-top: 1%;
  margin-left: 34%;
}

.otherSkillsPanel h1 {
  font-size: 1.2em;
  font-size: 1.3vw;
  line-height: 1.3vw;
}


/* ========== ~Travel Page ======================= */
body#travel {
  background-color: #E8C293;
  background-image: url('/Travel/YY_Imgs/Bgnd-Travel-MapWIcons+TravelPaths.jpg'); 
  background-position: x110px y160px;
  background-repeat: no-repeat;
  background-size: 100%;
}

.travelTitle {
  font-family: 'Times New Roman';
  font-size: 5vw;
  font-style: italic;
  font-weight: bold;
}

/* ------------------- countriesVisited --------------------- */

.countriesVisited {
  background-color: none;
  background-image: url('/Travel/YY_Imgs/CountriesVisitedScroll.png'); 
  background-repeat: no-repeat;
  background-size: 100%;
  font-family: Arial;
  font-size: 1.4em;
  font-size: 2.3vh;
  position: absolute;
  top: 31vw;
  left: 8vw;
  width: 12%;
  height: 15vw;
}

  .countriesVisited h1{
    font-size: 1.4em;
    font-size: 0.95vw;
    font-weight: bold;
    margin-top: 8%;
    text-indent: 8%;
    text-decoration: underline;
  }

  div.countriesList {
    font-size: 0.4em;
    font-size: 0.8vw;
    height: 60%;
    left: 17%;
    overflow: auto;
    position: absolute;
    top: 25%;
    width: 75%;
    margin-left: 0;
    padding-left: 0;
  }

  ul.countriesUList {
    font-size: 0.4em;
    font-size: 0.8vw;
    list-style: none;
    margin-left: 0;
    padding-left: 0;
  }

/* ---------------------  Travel Popup ------------------- */

#travelPopup {
  background-color: none;
  background-image: url('/Travel/YY_Imgs/Travel-HangingParchment_1200x900.png'); 
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: none;
  height: 85%;
  left: 10%;
  position: fixed;
  top: 10%;
  width: 80%;
  z-index: 10;
  overflow: hidden;
  /* border: 2px solid yellow; */
}

#travelPopupIFrame {
  height: 95%;
  width: 75%;
  margin-left: 10%;
  border: none;
  overflow: hidden;
  /* border: 2px solid magenta; */
}

.travelPopupBody {
  font-family: "Comic Sans MS";
  font-size: 2.5vw;
  height: 98vh;
  overflow: hidden;
  /* border: 2px solid red; */
}

.travelPopupBody div.DetailsTitlePrevNext {
  display: flex;
  flex-direction: row;
  font-size: 20pt;
  font-weight: bold;
  justify-content: space-around;
  /* justify-content: space-between; */
  margin: 10px 0 1px 0;
}

.travelPopupBody  div.btnPrevNext {
  background: GoldenRod;
  border: solid 1px #20538D;
  border-radius: 4px;
  color: #FFF;
  font-size: 12pt;
  font-weight: normal;
  height: 25px;
  margin: 0 20px;
  text-align: center;
  /* padding: 10px 15px; */
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  width: 120px;
}

.travelPopupBody  div.btnPrevNext:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}
/* -------------------------- */

.imgCountSelection {
  font-size: 2vw;
  background-color: Sienna;
  color: white;
  padding: 0 5px;
  margin: 0;
  border: 1px solid black;
  /* border: 2px solid magenta; */
}

#travelPopupContent {
  height: 80%;  /* 77%; */
  width: 96%;
  margin-left: 2%;
  overflow: hidden;
  text-align: center;
  /* border: 2px solid blue; */
}

.travelTitleAndIntro {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  line-height: 3vw;
  background-color: Sienna;
  color: white;
  padding: 0 5px;
  border-radius: 4px;
  /* border: 2px solid magenta; */
}

  .travelPopupTitle{
    font-size: 2.7vw;
    font-style: italic;
    font-weight: bold;
    text-decoration: underline;
  }

  .travelPopupSubjectIntro {
    font-size: 2vw;
  }

/* ----------- Main Image ---------------- */  
#travelPopupImg {
  display: flex;
  flex-direction: row;
  justify-content: space-between;  
  font-size: 2vw;
  overflow: hidden;
  white-space: pre-line; /* normal; */
  height: 70%;
  /* border: 2px solid green; */
}

.imgAndCaption {
  height: 100%;
  /* height: 50vw; */
  /* width: 50vw; */
}

#slideshowImg {
  max-width: 70vw; /*400px; 80%;*/
  max-height: 85%;
}

span#imgCaption {
  font-size: 2vw;
  font-family: 'Comic Sans MS';
  line-height: 2vw;
  margin: 0;
  padding: 0;
}

div.ssArrowAndSSBtn {
  height: 100%;
/*  border: 1ps solid blue; */
}

img.slideshowArrow {
  width: 20px;
  padding: 0 20px;
  height: 85%;
/*  border: 1px solid green; */
}

img.slideshowArrow:hover {
  background-color: bisque;
}

div.slideshowBtnArea {
  height: 15%;
  bottom: 0;
/*  border: 1px solid red; */
}

#startStopSlideshow {
  background-color: gray;
  border: 1px solid black;
  border-radius: 3px;
  cursor: pointer;
}  

.contentNavBtns {
  /* position: absolute; */
  /* bottom: 0; */
  /* border: 2px solid gray; */
  border-radius: 4px;
  margin-top: 3px;
}

/* ------  Filmstrip -------------- */
div.filmStrip {
  height: 75px;
  width: 90%;
  margin-top: 3px;
  margin-bottom: 5px;
  margin-left: 5%;
  overflow-x: auto;
  overflow-y: hidden;
  /* border: 2px solid blue; */
}

div.fsImgAndCaption {
  display: inline-block;
  text-align: left;
  /* height: 50px; */
  /* width: 40px; */
  /* border: 1px solid magenta; */
}

div#travelSlideshowFilmstrip {
  display: flex;
  /* justify-content: center; */
  /* margin: 0 auto; */
  /* width: 1000px; */
  /* border: 1px solid orange; */
}

.stripImg {
  border: 1px solid black;
  height: 50px;
}

span.fsImgNum {
  position: relative;
  /* bottom: -10px; */
  /* right: 2px; */
  top: -4vw;
  color: black;
  background-color: white;
  font-size: 7pt;
  line-height: 6pt;
  /* font-weight: bold; */
}


/*  --------------------------------------- */

.travelPopupBody  div.btnDisplayTypeSel {
  background: tan;
  border: solid 1px #20538D;
  border-radius: 4px;
  color: #FFF;
  font-size: 11pt;
  font-weight: normal;
  height: 20px;
  margin: 0 20px;
  text-align: center;
  /* vertical-align: top; */
  /* padding: 10px 15px; */
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  width: 120px;
}

.travelPopupBody  div.btnDisplayTypeSel:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}

.qtyItem {
  /* font-weight: bold; */
  cursor: pointer;
}

img.tripMap {
  height: 95%;
  max-width: 100%;
  /* object-fit: contain; */
  /* object-fit: scale-down; */
}

.legendSelect {
  cursor: pointer;
}

.timelineListItem {
  color: black;
}

#imgCountTracker {
  color: yellow;
}

.blogListItem {
  color: black;
}

div.contentNavBtns {
  display: flex;
  flex-direction: row;
  justify-content: space-around;  
}

.miniPhotoPanel {
  position: absolute;
  width: 7.4vw; /* 95px; 95/1280*/
  height: 5.6vw;  /* 72px; 72/1280 */
  background-color: none;
  background-image: url('/Travel/YY_Imgs/Travel-HangingParchment_265x203.png'); 
  background-repeat: no-repeat;
  background-size: 100%;
}

.miniPanelImg {
  position: absolute;
  left: 0.85vw;
  top: 1vw;
  width: 5vw;
  height: 4vw;
}

.ppAK02 {
  left: 25vw; 
  top: 17vw;
}

.ppAV90{
  left: 15vw; 
  top: 8vw;
}

.ppWT22{
  left: 6vw;
  top: 17vw;
}

.ppAM10_1 { /* Tibet */
  left: 72vw;
  top: 12vw; 
}

.ppAM10_2 { /* Nepal */
  left: 64.1vw;
  top: 13vw;
}

.ppJD82 {
  left: 38.7vw;
  top: 5vw;
}
  
.ppME00 {
  left: 52vw;
  top: 7vw;
}

.ppPa89 {
  left: 13.5vw;
  top: 24vw;
}

.ppBn05 {
  left: 23vw;
  top: 11vw;
}

.ppSL15 {
  left: 78vw;
  top: 23vw;
}

.ppSA09 {
  left: 56.6vw;
  top: 38.7vw;
}

.ppWB84_1 { /* Oujda */
  left: 36vw;
  top: 15vw;
}

.ppWB84_2 { /* PakBus */
  left: 59vw;
  top: 21vw;
}

.ppWB84_3 { /* Thai Temple */
  left: 66.4vw;
  top: 29.3vw;
}

.photosPanel {
  background-color: none;
  background-image: url('/Travel/YY_Imgs/Travel-HangingParchment_1200x900.png'); 
  background-repeat: no-repeat;
  background-size: 100%;
  left: 20%; /*    */
  top: 20%;  /*     */
  width: 60%; /*   */
  height: 60%; /*   */
}

.legendScroll {
  background-color: none;
  background-image: url('/Travel/YY_Imgs/Travel-LegendScroll.png'); 
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 30vw; /* 180px  180/1280   */
  top: 43vw;  /*  510px   510/754   */
  width: 45vw; /* 895px   895/1280  */
  height: 13vw; /*  245px   245/754 */
  /* border: 2px solid green; */
}

.legendContents {
  position: absolute;
  left: 15%;
  top: 18%;
  width: 80%;
  height: 60%;
  /* border: 2px solid yellow; */
}

.legendTable {
  font-family: 'Times New Roman', Times, Serif;
  font-size: .9vw;
  font-style: italic;
  font-weight: bold;
  border-spacing: 3px;
  border-collapse: separate;  
}

.legendTable  td{
  padding: 1px 5px 1px 0;
}

.lgndClrBox {
  padding: 0 4px;
  border: 1px solid black;
}

.clr82 { background-color: #FAD300; }
.clr84 { background-color: #00B19E; }
.clr89 { background-color: #FF5050; }
.clr90 { background-color: #89D011; }
.clr00 { background-color: #9554D2; }
.clr02 { background-color: #0071CD; }
.clr05 { background-color: #BDE3FF; }
.clr09 { background-color: #FF70D2; }
.clr10 { background-color: #AB2227; }
.clr15 { background-color: #1F4229; }
.clr22 { background-color: #FF6A00; }

.bdr82 { border: 2px solid #FAD300; }
.bdr84 { border: 2px solid #00B19E; }
.bdr89 { border: 2px solid #FF5050; }
.bdr90 { border: 2px solid #89D011; }
.bdr00 { border: 2px solid #9554D2; }
.bdr02 { border: 2px solid #0071CD; }
.bdr05 { border: 2px solid #BDE3FF; }
.bdr09 { border: 2px solid #FF70D2; }
.bdr10 { border: 2px solid #AB2227; }
.bdr15 { border: 2px solid #1F4229; }
.bdr22 { border: 2px solid #FF6A00; }

/* ========= ~Thoughts Page ======================= */
body#thoughts  {
  background-color: #E8C293;
  background-image: url('/Thoughts/YY_Imgs/Thoughts-Bgnd-Corkboard_Blank.jpg'); 
  background-repeat: repeat;
  background-size: 100%;
  font-size: 100%;
  font-family: "Comic Sans MS";
}

#thoughtsPopup {
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.8);
  display: none;
  height: 80%;
  left: 10%;
  position: fixed;
  top: 10%;
  width: 80%;
  z-index: 10;
}

#thoughtsPopupIFrame {
  height: 100%;
  width: 100%;
}

.thoughtsTitleAndIntro {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  line-height: 3vw;
  /* border: 2px solid magenta; */
}

  .thoughtsPopupTitle{
    font-size: 3vw;
    font-style: italic;
    font-weight: bold;
    text-decoration: underline;
  }

  .thoughtsPopupSubjectIntro {
    font-size: 2vw;
  }

.thoughtsPopupBody {
  font-family: "Comic Sans MS";
  font-size: 2.5vw;
  height: 98vh;
  /* border: 2px solid green; */
}

#contentsOuterBox {
  border: 1px solid black;
  margin: -5px 20% 2px 20%;
  /* height: 20%; */
  overflow: auto;
}

  #contentsLabel {
    margin-left: 10px;
    cursor:  pointer;
    font-size: 1.8vw;
    font-weight: bold;
  /* border: 2px solid yellow; */
  }

  #contentsBox {
    font-size: 1.3vw;
    margin: 0 10px;
    overflow: auto;
    height: 12vh;
  }

    #contentsBox a {
      color: black;
    }

    #contentsBox a:hover{
      text-decoration: underline;
    }

    #contentsBox ul {
      margin-left: 10px;
      padding-left: 10px;
      margin-top: 0;
      white-space: nowrap;
      overflow: hidden;      
      text-overflow: ellipsis;
      /* border: 2px solid red; */
    }



#thoughtsPopupContent {
  height: 64%;  /* 77%; */
  width: 95%;
  margin-left: 20px;
  overflow: auto;
  /* border: 2px solid blue; */
}

#thoughtsPopupText {
  font-size: 1.5vw;
  overflow: auto;
  white-space: pre-line; /* normal; */
  height: 100%;
}

#thoughts .panel{
  background-repeat: no-repeat;
  background-size: 100%;
  font-size: 1em;
  font-size: 1.4vw;
  position: fixed;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8);
}

#thoughts .thoughtsPanelText {
  height: 70%;
  margin-left: 7%;
  margin-top: 2%;
  overflow: auto;
  width: 92%;
}

#thoughts h1 {
  /* font-weight: bold; */
  font-size: 1em;
  font-size: 2vw;
  font-style: italic;
  margin-top: 5%;
  text-decoration: underline;
  text-align: center;
}

#thoughts ul {
  margin-left: 10px;
  padding-left: 10px;
}

.quotesPanel ul {
  margin-left: 0;
  padding-left: 0;
}

.quotesPanel li {
  list-style-type: none; 
  margin-bottom: 10px;  
}


/*
#thoughts ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
  margin-top: 0%;
  padding-top: 0;
}
*/
/*
ul.disc { 
  list-style-type: disc; 
  padding: 10px;
  margin: 10px;
}
*/

#thoughts .ideasPanel {
  background-color: #FAEEF0;
  background-image: url('/Thoughts/YY_Imgs/PostIt-Pink.png'); 
  color: Navy;
  height: 38%;
  left: 2%;
  top: 7%;
  width: 27%;
}

#thoughts .blogPanel {
  background-color: #F9FAFC;
  background-image: url('/Thoughts/YY_Imgs/PostIt-White.png'); 
  height: 35%;
  left: 33%;
  top: 3%;
  width: 30%;
}

#thoughts .projectsPanel {
  background-color: #DDF0F4;
  background-image: url('/Thoughts/YY_Imgs/PostIt-Blue.png'); 
  color: DarkRed;  
  height: 30%;
  left: 70%;
  top: 17%;
  width: 25%;
}

#thoughts .quotesPanel {
  background-color: #EEF6EB;
  background-image: url('/Thoughts/YY_Imgs/PostIt-Green.png'); 
  height: 35%;
  left: 3%;
  top: 54%;
  width: 28%;
}

#thoughts .correspondencePanel {
  background-color: #FDB06A;
  background-image: url('/Thoughts/YY_Imgs/PostIt-Orange.png');
  color: DarkBlue;  
  height: 35%;
  left: 36%;
  top: 42%;
  width: 30%;
}

#thoughts .CCPanel {
  background-color: #8cffcb;
  background-image: url('/Thoughts/YY_Imgs/PostIt-CCGreen.png');
  color: Blue;  
  height: 10%;
  left: 34%;
  top: 82%;
  width: 30%;
}

#thoughts .inventionsPanel {
  background-color: #F0F1E3;
  background-image: url('/Thoughts/YY_Imgs/PostIt-Yellow.png'); 
  height: 35%;
  left: 70%;
  top: 55%;
  width: 22%;
}

.corresp a:link {  /* l,v,hover,active */
  color: DarkBlue;
}
.corresp a:visited {
  color: DarkGreen;
}


/* ========== ~Climate Change Page ======================= */

#CCBody {
  background-image: url('../CC/Imgs/CloudsBG.gif');  
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  position: absolute;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;  
}

#CCContent {
  position: relative;
  width: 100%;
  height: 600px;
}  


#CCPopup {
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.8);
  padding-top: 2px;
  padding-bottom: 10px;      /* new 23-01-12 */
  display: none;
  height: 80%;
  left: 10%;
  position: fixed;
  top: 10%;
  width: 80%;
  z-index: 10;
  background-color: white;
}

#CCpu_contents {
  height: 95%;
  margin: 3px;
  font-size: 0.8rem;
  overflow-y: auto;
  padding: 3px;
  /* overflow-x: hidden; */
}

div.CCItemCloud {
  background-size: 100% 100%; /* contain; */
  background-repeat: no-repeat;
  position: absolute;
  font: bold 1.2rem Arial, sans-serif;
  /* font-size: calc(15px + 0.390625vw); */
  color: black;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;       /* new 23-01-12 */
}

div.CCItemCloud a {
  text-decoration: none;
  color: inherit;
}



#cloud_1 {  /* About Me */
  background-image: url('../CC/Imgs/CirrusListLineBG1.png');
  height: 50px;
  width: 200px;
  left: 40%;
  top: 5%; /* 20px; */
}  

#cloud_2 { /* 6 Pillars */
  background-image: url('../CC/Imgs/CirrusListLineBG2.png');  
  height: 40px;
  width: 300px;
  left: 10%;
  top: 18%;
}  

#cloud_3 { /* My thoughts */
  background-image: url('../CC/Imgs/CirrusListLineBG3.png');  
  height: 50px;
  width: 400px;
  left: 45%;
  top: 25%;
}  

#cloud_4 { /* Species survive seasons */
  background-image: url('../CC/Imgs/CirrusListLineBG9.png');  
  height: 50px;
  width: 30%;
  left: 5%;
  top: 35%;
}

#cloud_5 { /* Earth's temp */
  background-image: url('../CC/Imgs/CirrusListLineBG8.png');  
  height: 50px;
  width: 30%;
  left: 35%;
  top: 50%;
}  

#cloud_6 { /* Human CO2 */
  background-image: url('../CC/Imgs/CirrusListLineBG6.png');  
  height: 50px;
  width: 30%;
  left: 50%;
  top: 38%;
}  

#cloud_7 { /* Life at equator */
  background-image: url('../CC/Imgs/CirrusListLineBG7.png');  
  height: 50px;
  width: 30%;
  left: 10%;
  top: 63%;
}  

#cloud_8 { /* Sir David */
  background-image: url('../CC/Imgs/CirrusListLineBG5.png');  
  height: 50px;
  width: 30%;
  left: 46%;
  top: 67%;
}  

#cloud_9 { /* NY Times loses mind */
  background-image: url('../CC/Imgs/CirrusListLineBG4.png');  
  height: 50px;
  width: 30%;
  left: 31%;
  top: 80%;
}  




/*

#CCBody {
  background-image: url('Imgs/CloudsBG.gif');  
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;  
}  


#cloud_1 {
  background-image: url('Imgs/CirrusListLineBG1.png');  
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  height: 10%;
  width: 30%;
  left: 5%;
  top: 15%;
}  

#cloud_2 {
  background-image: url('Imgs/CirrusListLineBG2.png');  
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  height: 10%;
  width: 30%;
  left: 35%;
  top: 20%;
}  

#cloud_3 {
  background-image: url('Imgs/CirrusListLineBG3.png');  
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  height: 10%;
  width: 30%;
  left: 60%;
  top: 30%;
}  

#cloud_4 {
  background-image: url('Imgs/CirrusListLineBG4.png');  
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  height: 10%;
  width: 30%;
  left: 10%;
  top: 40%;
}  

#cloud_5 {
  background-image: url('Imgs/CirrusListLineBG5.png');  
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  height: 10%;
  width: 30%;
  left: 35%;
  top: 50%;
}  

#cloud_6 {
  background-image: url('Imgs/CirrusListLineBG6.png');  
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  height: 10%;
  width: 30%;
  left: 70%;
  top: 60%;
}  

#cloud_7 {
  background-image: url('Imgs/CirrusListLineBG7.png');  
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  height: 10%;
  width: 30%;
  left: 20%;
  top: 70%;
}  

#cloud_8 {
  background-image: url('Imgs/CirrusListLineBG8.png');  
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  height: 10%;
  width: 30%;
  left: 40%;
  top: 80%;
}  

#cloud_9 {
  background-image: url('Imgs/CirrusListLineBG9.png');  
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  height: 10%;
  width: 30%;
  left: 60%;
  top: 90%;
}  

*/

a.inheritColor{
  color: inherit;  
}

.art_gallery_div{
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  border: blue 2px solid;
  padding: 20px;
}
.art_thumb_div{
  /*width: 300px;*/
  height: 300px;
  padding: 20px;
}

.art_thm_img{
  /*width: 290px;*/
  height: 290px;
  border-radius: 6px;
  box-shadow: 0px 2px 2px black; 
}

/* ========== ~Personal Page ======================= */
.I-body { background-image: url('/Personal/PersonalBgnd.jpg'); }



/*
    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; }
*/    
    
/* ========== ~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;}
.DB_m{border:2px solid maganta;} .DB_t{border:2px solid tan;}

/*-- 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); 
} 
*/