/* f12.css 
 * email=dev@coreopen.org 
 * goal=Grid using HTML5 elements/tags
 * from fof/a/ BOB
 * updatedAt=20221119
 */

html {
	clear: both;
	margin: 0;
}

body {
	background-color: #cccccc;
	clear;
	font-size:100%;
	margin: 0;
	padding: 0px;
}

header {
        /* background-color: #879fab; */
        /* background-color: #993333; */
        /*background-color: #4cbb17; */
        background-color: #228B22;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: 65px;
        width: 100%;
        /* 2022Q3 ; clear here some height space from uiw-container
         * line-height:0;
         */
}

span {
	/* white-space: pre; */
}

/* TODO:(hopley) get cleaner about the tags ... */

.uig-logo {
        color: aliceblue;
        grid-column: 1 / 3;
        padding: 6px;
}

.logo {
        color: aliceblue;
        grid-column: 1 / 3;
        padding: 6px;
}


#headermenu {
        color: aliceblue;
        grid-column: 3/-1;
        justify-self: end;
        margin-right: 4px;
}

#headermenu a {
        color: aliceblue;
}


/* dh - adding in headermenu */
.headermenu {
	float: right;
        justify-self: end;
	grid-column: 3/-1;
        margin-right: 2em;
}

#headermenu-btn {
	cursor: pointer;
	margin-top: 9px;
}

#headermenu-contents {
  background-color: aliceblue;
  border: solid 1px #c3c3c3;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  font-size: 0.8em;
  right: 0;
  display: none;
  padding: 5px;
  position:absolute;
  text-align: left;
  z-index : 100;
  overflow-x: hidden; /* Disable horizontal scroll */
  /*    transition: 0.5s; */
  /* 0.5 second transition effect to slide in the sidenav */
  visibility: visible;
}

#headermenu-contents a {
        color: black;
        display: block;
        padding: 16px;
}

#headermenu-contents a:hover {
   background-color: #f1f1f1
}

/* 20221004 */
#articlemenu-btn {
	cursor: pointer;
	margin-left: 9px;
}

#articlemenu-contents {
  background-color: aliceblue;
  border: solid 1px #c3c3c3;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  font-size: 0.8rem;
  display: none;
  padding: 5px;
  position: absolute;
  left: 0.25rem;
  top: 0.25rem;
  text-align: left;
  z-index : 75;
  overflow-x: hidden; /* Disable horizontal scroll */
  /* transition: 0.5s; */
  /* 0.5 second transition effect to slide in the sidenav */
  visibility: visible;
   width: fit-content;
}

#articlemenu-contents a {
        color: black;
        display: block;
        padding: 16px;
}

#articlemenu-contents a:hover {
   background-color: #f1f1f1
}

#mainmenu {
}

/* 20221206 ; set no bullets on mainmenu-contents <ul></li> */
#mainmenu-contents > ul {
	list-style-type: none; /* Remove bullets */
	padding: 0; /* Remove padding */
	margin: 0; /* Remove margins */
	text-decoration : none;
	/* background-color: #e6e6fa; */
}

/* 20221105 */
#mainmenu-btn {
  /* font-size: 0.8rem; */
	cursor: pointer;
  height: 0.8rem;
  margin-left: 9px;
}

/*
 * #mainmenu-btn:hover {
 * 	background-color: #a6a6a6;
 * }
 */

#mainmenu-contents {
  background-color: aliceblue;
  border: solid 1px #c3c3c3;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  font-size: 0.8rem;
  display: none;
  padding: 5px;
  /* position: relative; */
  position: fixed;
  left: 0.25rem;
  top: 0.25rem;
  text-align: left;
  z-index : 75;
  overflow-x: hidden; 
  /* transition: 0.5s; */
  /* 0.5 second transition effect to slide in the sidenav */
  visibility: visible;
  width: fit-content;
}

#mainmenu-contents a {
        color: black;
        display: block;
        padding: 16px;
}

#mainmenu-contents a:hover {
   background-color: #f1f1f1
}

#mainmenu-x {
	cursor: pointer;
	text-align: right;
}

.uig-topmenu {
        color: aliceblue;
        grid-column: 3/-1;
        justify-self: end;
        margin-right: 4px;
}

.uig-topmenu a {
        color: aliceblue;
}


nav {
	/*
        background-color: black;
        color: aliceblue;
        grid-column: 1 / 2;
        height: 100vh;
        justify-align: start;
        font-size: calc(0.5em + 1vmin);
        padding: 4px;
        bottom: -120px;
	*/
        z-index: 1;
	visibility: visible;
	margin-top: 9px;
/*      font-size: .75vw; */
}

nav a {
	color: aliceblue;
}

nav ul li a::before {
    content: "";
}
	
nav ul li a {
        color: aliceblue;
        text-decoration: none;
}

nav img {
	margin-left: 9px;
	margin-top: 9px;
}



#nav-contents {
  background-color: aliceblue;
  border: solid 1px #c3c3c3;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  font-size: 0.8em;
  display: none;
  padding: 0px;
  position:absolute; 
  top: 65px;
  left: 0px;
  text-align: left;
  z-index : 100;
  overflow-x: hidden; /* Disable horizontal scroll */
  /* transition: 0.5s; */ 
  /* 0.5 second transition effect to slide in the sidenav */
  visibility: visible;
}

#nav-contents ul {
	list-style-type: none; /* Remove bullets */
}

#nav-contents a {
        color: black;
        display: block;
        padding: 0.5rem;
}

#nav-contents a:hover {
   background-color: #f1f1f1
}

main {
	/* background-color: #879fab; // teal-ish ... */
	/* background-color: #cccccc; // gray-ish ... */
	background-color: #cccccc;
        display: grid;
        /* grid-template-columns: repeat(auto-fill (12,1fr)); */
        grid-template-columns: repeat(12,1fr);
        width: 100%;
        /* 20220716 , look to cleanse space to main/article
         height: 100vh;
         */
        /* height: 100%; */
	/*  padding: 12px; */
	padding: 1.2rem;
}

article {
	display: grid;
	grid-column: 1/-1;
	padding: 1rem;
}

section {
	display: grid;
	grid-column: 1/-1;
}

/* dh - anu = A-link No Underline */
.anu { text-decoration : none; }

.anu a:hover {
    text-decoration: underline;
}

/*dh loginform style */

#loginform {
	/* center in grid */
	display: grid;
	justify-content: center;
}

#loginBtn {
	display: grid;
	justify-content: right;
}

.loginForm__label {
  text-align : left;
}

.center {
	display: grid;
	justify-content: center;
}

.right {
	display: grid;
	justify-content: right;
}

/* 20220919 ; table details into .css */

table {
        width: 95%;
}

table caption {
        color: white;
        background-color: #79b561;
        margin-top: 1em;
        padding: 3px;
        width: 98%;
}

table th {
        color: white;
        text-align: left;
        padding: 1px;
        background-color: #B6B6B6;
	height: 10px;
}

table td {
        text-align: left;
        padding: 2px;
}

tbody > tr:hover {
  background-color: lightyellow;
}

tr:nth-child(even) {
    background-color: #eee;
	font-size: 0.8em;
	height: 1rem;
}

tr {
	font-size: 0.8em;
	height: 1rem;
}

/* 20220919 include css for erow-down */

.erow {
	padding: 0.5rem;
}


.erow-down {
        display: none;
        background-color: #f6f6f6;
}

.erow-down-menu {
        position: top;
        float: left;
}

.erow-down-menu-contents {
	background-color: aliceblue;
	border: solid 1px #c3c3c3;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	font-size: 0.5em;
	display: none;
	padding: 5px;
	position:absolute;
	text-align: left;
	z-index : 100;
	overflow-x: hidden; /* Disable horizontal scroll */
}

.erow-down-menu-contents > ul > li > a {
        color: #000;
}

.flash {
	background-color: tan;
}

/* 20221119 */
.rrow-log {
        visibility: hidden;
}

.rrowlog {
	cursor: pointer;
}

.thhref {
	width: 1.5rem;
}

button {
	margin: 0.8rem;
}

ul.no-bullets {
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margins */
}

/* change the color of fontawesome icons */

.svg-inline--fa {
  /* color: #2759AE; in ~blue */
	color: #4d4d4d; /* black/grey */
}

#admbar {
	display: inline;
}

#admactions {
	display: inline;
	visibility: hidden;
}

/* 20221224 */
input[type=button],
input[type=submit] {
        background-color: #b4c3cb;
        color: #4d4d4d;
	margin: 0.6rem 0.6rem;
	padding: 0.2rem 0.4rem;
        text-decoration: none;
        cursor: pointer;
}


/*202301; dh A-link No Underline */
a { text-decoration : none; }

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

.longtext {
 /* overflow:hidden; 
 white-space:nowrap;
 */
 height: 100rem;
 max-height: 350px;
 overflow-x: scroll;
 overflow-y: scroll;
 -webkit-overflow-scrolling: touch;
 text-overflow: ellipsis;
 width: 80%; 
}