<style>

h1 {
  font-family: Arial;   
}


h2 {
  font-family: Arial; color: blue; 
}

h3 {
  font-family: Arial;
}

body {
  color: black; text-align: left; font-family: Arial;
}

p {
  color: black; text-align: left; font-family: Arial;
}
p.caption {
  text-align: center; font-family: Arial; font-weight: bold; font-size: 11pt; 
}

div.image-caption {
	background-color: #4472C4; color: white; text-align: center; padding-bottom: 6px;
}

div.image-caption-project {
	background-color: #4472C4; color: white; text-align: center; padding-bottom: 6px;
	padding-top: 8px; margin-top: 5px; 
}

table.list {
  border-collapse: collapse;
  width: 790 ;
}

td.list {
  padding: 5px;
}
th.list {
  background-color: #4472C4;  text-align: center;
  color: white;
  padding: 5px;
  font-size: 12pt;
}

ul {
  display: inline;
  margin: 0; padding: 0;
}
ul li {display: inline;  }
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
  position: absolute;
  width: 200px;
  display: none; 

}
ul li ul li { 
  background: #123456; 
  display: block; 
}
ul li ul li a {display:block !important;} 
ul li ul li:hover {background: #666;}

li {
  margin-left: 16px;  margin-top: 6px;
}

bodytext {
  line-height: 1.5;  color: black;
}

.b5 {border-bottom-style: solid;}

table.desktop_menu {
  border-color: #0000FF;
}
tr.desktop_menu {
}
td.desktop_menu {
  background-color: cyan;
  color: white !important;
}

.td_desktop_menu {
    background: blue;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}
.td_desktop_menu:hover {
  background: darkorange; /* #FFDD00; */
  cursor: pointer;
}

.desktop_menu:link, .desktop_menu:visited {
    color: white;
    text-decoration: none;
    font-family:Verdana; font-weight: bold; font-size: smaller;
}
.desktop_menu:hover {
    // background: #FFDD00;
}


.sub_menu:link, .sub_menu:visited {
    background: #eee;
    color: black;
    text-decoration: none;
    font-family:Verdana; font-weight: bold; font-size: smaller;
    padding: 3px 10px 3px 10px;
}
.sub_menu:hover {
    background: #FFDD00;
    color: #880000;
}
.sub_menu_selected {
    background: #000088;
    color: #FFFFFF;
    font-family:Verdana; font-weight: bold; font-size: smaller;
    padding: 3px 10px 3px 10px;
}


<!-- styles for mobile menu -->

.container_mobile_menu a {
  background-color: #FFFFFF;
  display: inline-block;
  cursor: pointer;
}

.container_mobile_menu a:hover {
  background-color: #FFFFFF;
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  background-color:#0000FF;
  width: 35px;
  height: 8px;
  margin: 4px 0;
  transition: 0.1s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-10px, 10px);
  transform: rotate(-45deg) translate(-8px, 8px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-10px, -10px);
  transform: rotate(45deg) translate(-9px, -9px);
}

.menu_level_1 {
  display: none; 
}

.menu_level_1 a {
  background-color: #BBCCDD;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  font-size: 17px; font-family: Arial; font-weight: bold;
  display: block;
}

.menu_level_1 a:hover {
  background-color: #ddd;
  color: black;
}


.menu_level_2 {
  display: none;
}

.menu_level_2 a {
  background-color: #CCDDEE;
  padding: 12px 35px;
  text-decoration: none;
  font-size: 17px; font-style: italic; font-weight: normal;
  display: block;
  color: black;
}

.menu_level_2 a:hover {
  background-color: #ddd;
  color: black;
}



@media screen and (max-width: 900px) { /*** MOBILE VIEW  ***/

/**** DATA RECORD VIEW. FOR FUTURE USAGE ONLY ****/
  table.mv1, tbody.mv1, th.mv1, td.mv1 { display: block; border: none; }
  thead.mv1 { display: none; }

  /* tr:nth-child(odd) { background: #ccc; } --> alternative color for odd/even records */
    
  td.mv1 {
    border: none; border-bottom: 1px solid #eee;
    padding-left: 100px;
  }

  td.mv1:before {
    position: absolute; left: 5px;
    width: 90px;
  }

  /*  Label the data. You could also use a data-* attribute and content for this. */
  td.mv1:nth-of-type(1):before { content: "First MV1"; }
  td.mv1:nth-of-type(2):before { content: "Last MV1"; }
  td.mv1:nth-of-type(3):before { content: "Job MV1"; }

/**************** table.mv2 is used for image array with image caption ********************/
  table.mv2, tbody.mv2, th.mv2, td.mv2 { display: block; border: none; }
  thead.mv2 { display: none; }

  /* tr:nth-child(odd) { background: #ccc; } --> alternative color for odd/even records */
    
  td.mv2 {
    border: none;  /* border-bottom: 1px solid #eee;  */
    padding-left: 5px;
    color: blue;
    padding-top: 30px;
  }

  td.mv2:before {  /*  PLACE-HOLDER ONLY   */
    position: absolute; left: 5px;
    width: 190px;
    color: green;
  }

  /* PLACE-HOLDER ONLY. Label the data. You could also use a data-* attribute and content for this. */
  td.mv2:nth-of-type(1):before { content: ""; }
  td.mv2:nth-of-type(2):before { content: ""; }
  td.mv2:nth-of-type(3):before { content: ""; }

table.list {
  border-collapse: collapse;
  width: 99% ;
}

/************************************/

  .mobile-content {
    display: block;
  }
  .desktop-content {
    display: none;
  }
}

@media screen and (min-width: 901px) {   /***** DESKTOP VIEW ****/
  div.image-caption-project { 	font-size: 20pt; }

  table.mv2 { table-layout: fixed ;}

  td.mv2 {
    padding-top: 20px;
    vertical-align: bottom;
  }

  .mobile-content {
    display: none;
  }
  .desktop-content {
    display: block;
  }
}   /***** DESKTOP VIEW ****/


/* the mini style block below is just for up and down arrows */
ec {
  border: solid black;
  border-width: 0 4px 4px 0;
  display: inline-block;
  padding: 3px;
  transition: 0.5s;
  border-color: green;
}
.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
.down {
  transform: rotate(45deg) translate(-3px,-3px);
  -webkit-transform: rotate(45deg) translate(-3px,-3px);
}


</style>

/* -- styles for desktop menu, #0000FF = blue; #4CAF50 = green */
