@charset "utf-8";
/* CSS Document */

.webpage {
	background-color: rgb(245,245,245);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.webpageContent {
	width: 90%;
	margin: 20px 5% 50px 5%;
}
#kanbanDataL {
	float: left;
	width: 50%;
}
#kanbanDataR {
	text-align: right;
	float: right;
	width: 50%;
}
#kanbanDataR a {
	margin-left: 10px;
	white-space: nowrap;
}

#kanbanTitle {
	font-size: 2em;
	line-height: 100%;
	margin: 5px 0;
}
#updated {
	color: rgb(150, 150, 150);
	padding-left: 5px;
	line-height: 200%;
}
#metadata, .emElem {
	color: rgb(250, 250, 250);
	background-color: rgb(50, 50, 50);
	border-radius: 5px;
	padding: 2px 5px;
}
.metadataItem {
	color: springgreen;
}
.emElem {
	padding: 10px 15px;
}

/* kanban table */

#kanbanTable {
	border-spacing: 0;
	width: 100%;
	border: 1px solid rgb(100, 100, 100);
}
#kanbanTable tr {
	border: 1px solid rgba(100, 100, 100, 0.5);
}
#kanbanTable #tableHeader td {
	background-color: rgb(20, 20, 20);
	border-bottom: 1px solid rgb(50, 50, 50);
	border-right: 1px solid rgb(100, 100, 100);
	border-left: 1px solid rgb(100, 100, 100);
	box-shadow: 2px 2px 4px rgb(100,100,100);
	text-align: center;
	top: 0px;
	position: sticky;
}
#kanbanTable td {
	padding: 10px 15px;
	width: 25%;
	text-align: right;
	font-size: 0.9em;
	border-bottom: 1px solid rgba(50,50,50,0.5);
}

/* task category styles */

.statusClass {
	border-right: 8px solid rgba(50, 50, 50, 0.8);
	border-left: 1px solid rgba(150, 150, 150, 0.2);
}
.pendingStatus {
	background-color: rgba(100,100,100,0.5);
}
.view, .controller, .model, .infra, .refactor, .test, .feature, .issue {
	color: rgb(50,50,50);
}
.view {
	background-color: rgb(164, 255, 205);
}
.controller {
	background-color: rgb(255, 227, 172);
}
.model {
	background-color: springgreen;
}
.infra {
	background-color: yellow;
}
.refactor {
	background-color: aqua;
}
.test {
	background-color: rgb(255, 219, 225);
}
.feature {
	background-color: rgb(243, 202, 255);
}
.issue {
	background-color: rgb(255, 170, 170);
}
.dev {
	background-color: rgb(219, 224, 255);
	color: rgb(0,0,0);
}
.integration {
	background-color: rgb(220,220,220);
	color: rgb(0,0,0);
}

.cd {
	line-height: 250%;
	font-size: 0.8em;
	padding: 4px;
	background-color: rgba(50,50,50,0.75);
	color: rgb(250,250,250);
	border-radius: 4px;
	border: 1px solid rgb(50,50,50)
}

body {
	width: 100%;
    margin: 0;
	font-family: calibri, helvetica, arial;
	top: 0;
	left: 0;
	background-color: rgb(50,50,50);
	color: rgb(255,255,255);
}

#content {
	text-align: center;
	width: 80%;
	margin: 50px auto 0 auto;
}
#content a {
	text-decoration: none;
	transition: 0.3s;
}
#content a:hover {
	text-decoration: underline;
}

#sample_urls {
	margin-top: 50px;
	list-style: none;
	font-size: 1.2em;
}
#sample_urls p {
	line-height: 150%;
	padding: 20px 0;
	text-align: center;
}
.devLink {
	border-bottom: 1px solid rgb(80,80,80);
	border-top: 1px solid rgb(80,80,80);
	padding: 20px 0px;
	margin: 0px 25%;
	width: 50%;
}

/* --------------------------------- */
/* --------- navbar styles --------- */
/* --------------------------------- */

#nav {
    height: 70px;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: rgb(20,20,20);
	color: rgb(230,230,230);
    border-bottom: 1px solid rgb(80,80,80);
}
#navbar li {
    text-decoration: none;
    justify-content: center;
    display: flex;
    align-items: center;
}
.navborder {
    border-left: 1px solid rgb(150,150,150);
    border-right: 1px solid rgb(150,150,150);
}
#navbar #logo {
    font-size: 2em;
	text-decoration: none;
    height: 100%;
    width: 15%;
    float: left;
	cursor: pointer;
	color: rgb(240,240,240);
}
#navbar .navi {
    text-align: center;
    height: 100%;
    width: 15%;
    float: right;
	cursor: pointer;
	transition: background-color 0.3s;
}
.navi:hover {
	background-color: rgb(80,80,80);
}
.navi a {
	text-decoration: none;
	color: rgb(210,210,210);
}

/* --------------------------------- */
/* -------- generic styles --------- */
/* --------------------------------- */

.emphasis {
	color: yellow;
	background-color: rgb(85,85,85);
	padding: 3px 5px;
	border-radius: 5px;
}
.emphasis-lite {
	color: pink;
	background-color: rgb(75,75,75);
	padding: 5px 8px;
	border-radius: 5px;
}
.fs2 {
	font-size: 2em;
}
.no-decoration {
	text-decoration: none;
}

/* --------------------------------- */
/* ------------ footer ------------- */
/* --------------------------------- */

.footer {
	width: 100%;
    margin-top: 100px;
    background-color: rgba(0,0,0,0.95);
    color: white;
    border-top: 2px solid rgba(200,200,200,0.3);
}
.footer table {
    margin: 0 10%;
    width: 80%;
    padding: 30px 0 60px 0;
    border-spacing: 0px 15px;
}
.footer tr {
    padding: 5px 0;
	margin: 5px 0;
}
.footer td {
    text-align: left;
    width: 20%;
    border-left: 2px solid rgba(100,100,100,0.5);
    padding: 5px 10px 5px 10px;
}
.footer a {
	color: rgb(200,200,200);
	transition: 200ms;
	text-decoration: none;
}
.footer a:hover {
	color: yellow;
	padding-left: 5px;
}
.footer p {
	font-size: 1.4em;
	color: springgreen;
	margin-top: 20px;
	margin-left: 70px;
}
.footer .footer-title {
	padding-top: 20px;
	border: 0px;
	color: springgreen;
	font-size: 1.2em;
}
.toggle_td {
	color: rgb(200,200,200);
	transition: 0.3s;
	cursor: pointer;
}
.toggle_td:hover {
	color: springgreen;
	padding-left: 5px;
}
.toggle_td_text {
	color: yellow;
	background-color: rgb(65,65,65);
	padding: 3px 5px;
	border-radius: 5px;
}

/* --------------------------------- */
/* ----------- devnotes ------------ */
/* --------------------------------- */

#dn_content {
	width: 80%;
	margin: 50px auto 0 auto;
}
#dn_title {
	text-align: left;
	font-size: 1.5em;
	padding-bottom: 10px;
	border-bottom: 1px solid rgb(180,180,180);
}
#dn_title, #dn_description {
	margin-block: 0;
}
#dn_items li {
	line-height: 150%;
	margin: 20px 0;
	border-top: 1px solid rgb(210,210,210);
}

/* --------------------------------- */
/* ------------ mobile ------------- */
/* --------------------------------- */

@media only screen and (max-width: 1100px) {
	#navbar #logo {
		width: 40%;
	}
	
	#navbar .navi {
		width: 18%;
		padding: 0 2%;
	}
}