/* uig.css 
 * email=dev@coreopen.org 
 * goal=Grid using HTML5 elements/tags
 */

html {
	clear: both;
	margin: 0;
}

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


/* 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 {
	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
}


.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{
        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: 5px;
  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 a {
        color: black;
        display: block;
        padding: 16px;
}

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

article {
	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;
}

tr {
}

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