/* MAIN CSS */

@font-face {
	font-family: "AndaleMono";
	src: url("../font/AndaleMono.ttf") format("truetype");
}
@font-face {
	font-family: "JetBrainsMono";
	src: url("../font/JetBrainsMono.ttf") format("truetype");
}
@font-face {
	font-family: "Courier2";
	src: local('Courier'), local('Courier-Regular'), url("../font/Courier.ttf") format("truetype"), url("../font/Courier.woff") format("woff");
}
@font-face {
	font-family: "PTMono";
	src: url("../font/PTMono.ttc") format("truetype");
}

body { 
    font-family: "JetBrainsMono", "AndaleMono", 'Courier New', Courier, monospace, tahoma, verdana, arial; 
    font-size: 0.75em; 
    color: black; 
    padding-top: 3px; 
    cursor: default; 
    background-color: #315C53; 
    vertical-align: middle; 
    max-width: max-content; 
    margin: auto; 
}

#top { 
    border: 0px solid #50785C; 
    color: #C3C9C5; 
    font-family: "JetBrainsMono"; 
    width: 750px; 
    height: 16px; 
    position: relative; 
    margin: 0px auto; 
    text-align: center; 
    padding: 0px 0px 0px 0px; 
}
#top div.main_top { 
    padding: 0px 0px 0px 0px; 
    margin: 0px auto; 
}
#top div.left { 
    position: absolute; 
    float: left; 
    left: 0px; 
    top: 0px; 
    width: 145px; 
    text-align: left; 
}
#top div.right { 
    position: absolute; 
    float: right; 
    right: 0px; 
    top: -12px; 
    width: 600px; 
    text-align: right; 
}
#top p { 
    color: #C3C9C5; 
}
#top a:link { 
    color: #ffffff; 
    text-decoration: none; 
}
#top a:visited { 
    color: #f3f3f3; 
    font-style: italic; 
}
#top a:hover { 
    text-decoration: underline; 
}
#top a:active { 
    color: #9DCC00; 
}

#main { 
    /*border: 3px solid #ffffff; */
    background-color: #315C53;
    color: #C3C9C5; 
    font-family: "JetBrainsMono"; 
    width: 600px; 
    height: 500px; 
    display: inline-block; 
    margin: 0; 
    top: calc(50% - 3%);  
    left: 50%; 
    transform: translate(-50%, -50%); 
    position: absolute; 
    margin: 0px auto; 
    text-align: center; 
    padding: 0px 0px 0px 0px; 
}
#main div.main_top { 
    padding: 0px 0px 0px 0px; 
    margin: 0px auto; 
}
#main div.left { 
    position: absolute; 
    float: left; 
    left: 0px; 
    top: 0px; 
    width: 145px; 
    text-align: left; 
}
#main div.right { 
    position: absolute; 
    float: right; 
    right: 0px; 
    top: -12px; 
    width: 600px; 
    text-align: right; 
}
#main p { 
    color: #C3C9C5; 
}
#main a:link { 
    color: #ffffff; 
    text-decoration: none; 
}
#main a:visited { 
    color: #f3f3f3; 
    font-style: italic; 
}
#main a:hover { 
    text-decoration: underline; 
}
#main a:active { 
    color: #9DCC00; 
}

#header_title {  
    /*border: 3px solid #ffe345; */
    color: #ffffff; 
    opacity: 0.75;
    font-family: "JetBrainsMono"; 
    font-size: 2.5em; 
    width: 100%; 
    height: 70px; 
    display: inline-block; 
    margin: 0; 
    top: 0%; 
    left: 0%; 
    transform: translate(0%, 0%); 
    position: absolute; 
    margin: 0px auto; 
    text-align: center; 
    padding: 0px 0px 0px 0px; 
}
#header_title p { 
    color: #ffffff; 
    font-weight: bold; 
    margin: 0px; 
    padding: 0px; 
}
#header_title p.subtitle { 
    color: #C3C9C5; 
    font-weight: normal; 
    font-size: 0.8em; 
    margin: 0px; 
    padding: 0px; 
}

#content { 
    /*border: 3px solid #bc5eff; */
    color: #C3C9C5; 
    font-size: 1em;
    font-family: "JetBrainsMono"; 
    width: 100%; 
    height: calc(100% - 70px); 
    display: inline-block; 
    margin: 0; 
    top: 70px; 
    right: 0%; 
    transform: translate(0%, 0%); 
    position: absolute; 
    margin: 0px auto; 
    text-align: center; 
    padding: 0px 0px 0px 0px;
}

#logo { 
    /*border: 3px solid #2facff; */
    background-image: url(../img/nadimediaiconw.png); 
    background-size: 120%; 
    opacity: 0.75;
    background-repeat: no-repeat; 
    background-position: center; 
    position: absolute; 
    width: 50%; 
    height: 100%; 
}

#menu { 
    /*border: 3px solid #34ff71; */
    color: #C3C9C5; 
    font-size: 1.2em;
    font-family: "JetBrainsMono"; 
    width: 50%; 
    height: auto; 
    display: inline-block; 
    margin: 0; 
    top: 50%; 
    right: 0%; 
    transform: translate(0%, -50%); 
    position: absolute; 
    margin: 0px auto; 
    text-align: center; 
    padding: 0px 0px 0px 0px; 
    background-image: none;
    background-color: none;
    transition: 1s; 
}
#menu p { 
    color: #C3C9C5; 
    width: 100%;
    border: 2px solid #50785C;
    border-radius: 15px;
    padding: 10px 3px 10px 3px;
    box-sizing: border-box;
}
#menu a { 
    color: #C3C9C5; 
    width: 100%;
    border: 2px solid #50785C;
    border-radius: 15px;
    padding: 10px 3px 10px 3px;
    box-sizing: border-box;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    transition: 0.5s;
    /*animation: backgroundIMG 2s ease-in-out 2s;*/
    /*animation-fill-mode: forwards;*/
    background-size: 0%;
    background-image: linear-gradient(to right, #5e8168,#5c8f6d,#5e8168);
    background-repeat: no-repeat;
    background-position: center;
}
/*@keyframes backgroundIMG {
  100% { background-image: linear-gradient(to right, #50785C,#6a9b7b,#50785C); }
}*/
/*#menu a:before { 
    content: "";
    background-size: 100%;
    background-image: linear-gradient(to right, #50785C,#6a9b7b,#50785C);
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    opacity: 0.5;
 }*/
#menu a:link { 
    color: #C3C9C5; 
    text-decoration: none; 
}
#menu a:visited { 
    color: #C3C9C5; 
    /*font-style: italic; */
}
#menu a:hover { 
    color: #ffffff;
    text-decoration: none; 
    background-image: linear-gradient(to right, #5e8168,#5c8f6d,#5e8168);
    background-size: 100%;
    /*background-color: #6a9b7b;*/
    transition: 0.2s;
    /*animation: backgroundIMG 2s ease-in-out 2s;*/
    /*animation-fill-mode: forwards;*/
}
#menu a:active { 
    color: #9DCC00; 
}
#menu.back { 
    position: absolute; 
    width: 170px; 
    height: auto; 
    top: 10px; 
    left: 0px; 
    transform: translate( calc(-100% - 20px), 0%);
    padding: 0px 3px 0px 3px;
}
#menu.half { 
    width: 50%;
    left: 0px;
}
.half-left {
    width: 48.5% !important;  
    float: left;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}
.half-right {
    width: 48.5% !important;  
    float: right;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

#social {
    position: relative;
    top: 10px;
    border: none;
}
#social a {
    color: #C3C9C5; 
    width: 100%;
    border: none;
    border-radius: 0px;
    padding: 6px 6px 6px 6px;
    box-sizing: content-box;
    display: inline;
    margin-top: 10px;
    margin-bottom: 10px;
    transition: 0.5s;
    font-size: 1.8em;
    background-image: none;
}
#social a:hover { 
    color: #ffffff;
    text-decoration: none; 
    background-image: none;
    /*background-size: 100%;*/
    /*background-color: #6a9b7b;*/
    transition: 0.2s;
    /*animation: backgroundIMG 2s ease-in-out 2s;*/
    /*animation-fill-mode: forwards;*/
}
#social a:active { 
    color: #9DCC00; 
}
.hovertext {
    position: relative;
    /*border-bottom: 1px dotted black;*/
    transform: translate(-50%, 0%);
    text-align: center;
}
.hovertext:before {
    content: attr(data-hover);
    visibility: hidden;
    opacity: 0;
    width: max-content;
    /*background-color: #315C53;*/
    color: #50785C;
    text-align: center;
    /*border: 2px solid #50785C;*/
    border-radius: 5px;
    /*padding: 3px 5px;*/
    padding: 3px 9px;
    transition: opacity 1s ease-in-out;
  
    position: absolute;
    z-index: 1;
    left: 0;
    top: 110%;
}
.hovertext:hover:before {
    opacity: 1;
    visibility: visible;
}

#footer_wuff { 
    /*border: 3px solid #b834ff; */
    padding: 1px 5px 0px 0%; 
    color: #577d64; 
    position: absolute; 
    left: 50%; 
    bottom: 2%; 
    transform: translate(-50%, 0%); 
    text-align: left; 
    font-family: "AndaleMono"; 
    z-index: -1;
    transition: 0.2s;
    opacity: 0;
}
#footer_wuff:hover { 
    opacity: 1;
}

#page { 
    /*border: 3px solid #ffffff; */
    background-color: #315C53;
    color: #C3C9C5; 
    font-family: "JetBrainsMono"; 
    width: 600px; 
    height: 500px; 
    display: inline-block; 
    margin: 0; 
    top: calc(50% - 3%);  
    left: 50%; 
    transform: translate(-50%, -50%); 
    position: absolute; 
    margin: 0px auto; 
    text-align: center; 
    padding: 0px 0px 0px 0px; 
}

#title { 
    /*border: 3px solid #ffffff; */
    color: #ffffff; 
    font-family: "JetBrainsMono"; 
    font-size: 1.5em;
    width: calc(100% - 250px); 
    height: 21px; 
    display: inline-block; 
    margin: 0; 
    top: 20px;  
    right: 20px; 
    position: absolute; 
    margin: 0px auto; 
    text-align: center; 
    vertical-align: middle;
    padding: 9px 0px 9px 0px; 
    border: 2px solid #50785C;
    border-radius: 15px;
    background-image: linear-gradient(to right, #5e8168,#5c8f6d,#5e8168);
}

#text { 
    /*border: 3px solid #ffffff; */
    color: #dbe2de; 
    font-size: 1.1em;
    font-family: "JetBrainsMono"; 
    width: 100%; 
    height: auto; 
    display: inline-block; 
    margin: 0; 
    top: 80px;  
    left: 0px; 
    position: absolute; 
    margin: 0px auto; 
    box-align: left;
    text-align: left; 
    padding: 10px 10px 10px 10px; 
}
#text p { 
    text-align: left;
}
#text a { 
    color: #C3C9C5; 
}
#text a:link { 
    color: #ffffff; 
    text-decoration: none; 
}
#text a:visited { 
    color: #f3f3f3; 
    font-style: italic; 
}
#text a:hover { 
    text-decoration: underline; 
}
#text a:active { 
    color: #9DCC00; 
}

hr {
    /*background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC) repeat-x 0 0;*/
    /*border: 0 none;*/
    color: #cccccc;
    /*height: 4px;*/
    padding: 0;
    opacity: 0.2;
}

table {
    padding: 0;
    border-collapse: collapse; 
    border-radius: 15px;
}
table thead th {
    background-color: #3d6352;
}
table tr {
    border-top: 1px solid #50785C;
    background-color: #315C53;
    margin: 0;
    padding: 0; 
}
table tr:nth-child(2n) {
    background-color: #316057; 
}
table tr th {
    font-weight: bold;
    border: 1px solid #6a8877;
    margin: 0;
    padding: 6px 13px; 
}
/*table th td {
    border-radius: 15px;
}*/
table tr td {
    border: 1px solid #6a8877;
    margin: 0;
    padding: 6px 13px; 
}
table tr th :first-child, table tr td :first-child {
    margin-top: 0; 
}
table tr th :last-child, table tr td :last-child {
    margin-bottom: 0; 
}

#list_wolf table {
    padding: 0;
    border-collapse: collapse; 
    border-radius: 15px;
}
#list_wolf thead th {
    background-color: #3d6352;
}
#list_wolf tr:nth-child(2n) {
    background-color: #316057; 
}
/*#list_wolf table th td {
    border-radius: 15px;
}*/
/*#list_wolf table tr td {
    border: 1px solid #6a8877;
    margin: 0;
    padding: 6px 13px; 
}*/
#list_wolf tr {
    border: 0px solid #6a8877;
    margin: 0;
    padding: 6px 13px; 
    /*border-radius: 15px;*/
}
#list_wolf td {
    margin: 0;
    padding: 6px 13px; 
    /*border-radius: 15px;*/
    width: 50%;  
    border: 2px; 
    /*border-top-left-radius: 15px; */
    /*border-bottom-left-radius: 15px; */
    padding: 10px;
}
#list_wolf tr th :first-child, table tr :first-child {
    margin-top: 0; 
}
#list_wolf tr th :last-child, table tr :last-child {
    margin-bottom: 0; 
}
#list_wolf .border-radius-left{
    /*border-top-left-radius: 15px;*/
    /*border-bottom-left-radius: 15px;*/
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
#list_wolf .border-radius-right{
    /*border-top-right-radius: 15px;*/
    /*border-bottom-right-radius: 15px;*/
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

#photo_wolf {
    width: 100%; 
    border-radius: 15px; 
    border: 1px solid #6a8877;
    display: block; 
    margin-left: auto; 
    margin-right: auto;
    box-shadow: 1px 1px 10px rgba(68, 68, 68, 0.6);
}

#photo_full {
    width: 100%;
    border-radius: 15px; 
    border: 1px solid #6a8877;
    display: block; 
    margin-left: auto; 
    margin-right: auto;
    box-shadow: 1px 1px 10px rgba(68, 68, 68, 0.6);
}

#photo_full_noborder {
    width: 100%;
    border-radius: 15px; 
    display: block; 
    margin-left: auto; 
    margin-right: auto;
}

#page_select {
	font-size: 0.9em;
	font-weight: normal;
	text-align: center !important;
	text-decoration: none;
	/*color: #a3a9a5; /* for inactive link - no prev/next page */
	/*color: #C3C9C5;*/
}
#page_select a {
	color: #C3C9C5;
	/*color: #50785C; color: #5e8168; color: #5c8f6d;*/
	/*color: #5c8f6d;*/
	text-decoration: none;
}
#page_select a:link:hover {
	text-decoration: none;
	color: #9DCC00;
	text-shadow: 1px 1px 10px rgba(68, 68, 68, 0.6);
	transition: 0.2s;
}
#page_select a:link:active { 
    color: #afafaf;
}
#page_select a:link { 
    color: #C3C9C5;
}
#page_select a:visited { 
    color: #C3C9C5; 
}

#page_select .page_inactive {
	/*color: #a3a9a5;*/
	color: #5c8f6d;
	text-decoration: line-through;
}
#page_select .page_inactive:hover {
	/*color: #a3a9a5;*/
	color: #5c8f6d;
	text-decoration: line-through;
}
#page_select .page_inactive:active {
	/*color: #a3a9a5;*/
	color: #5c8f6d;
	text-decoration: line-through;
}
#page_select .page_inactive a {
	/*color: #a3a9a5;*/
	color: #5c8f6d;
	text-decoration: line-through;
}
#page_select .page_inactive a:hover {
	/*color: #a3a9a5;*/
	color: #5c8f6d;
	text-decoration: line-through;
}
#page_select .page_inactive a:active {
	/*color: #a3a9a5;*/
	color: #5c8f6d;
	text-decoration: line-through;
}
#page_select .page_number {
	font-weight: bold;
	text-decoration: none;
	color: #C3C9C5;
}
#page_select .page_number:hover {
	color: #C3C9C5;
	text-decoration: none;
}
#page_select .page_number a:hover {
	color: #C3C9C5;
	text-decoration: none;
}

#footer_link {
	font-size: 1.1em;
	font-weight: bold;
	text-align: center !important;
}
#footer_link a:hover {
	text-decoration: none;
	color: #9DCC00;
    text-shadow: 1px 1px 10px rgba(68, 68, 68, 0.6);
	transition: 0.2s;
}
#footer_link a:active { 
    color: #afafaf; 
}

pre {
    font-family: "JetBrainsMono";
    font-weight: normal;
    letter-spacing: normal;
    line-height: normal;
}

#tiresult {
    font-family: "Courier";
	/*font-family: "JetBrainsMono";*/
	/*font-family: "AndaleMono";*/
    font-weight: bold;
    letter-spacing: normal;
    line-height: normal;
    text-align: center; 
    font-size: 5px; 
	line-height: 1.2;
    text-rendering: geometricPrecision;
    /*background-color: #000000;*/ 
    /*font-weight: bold;*/
    /*padding: 5px 4px; --fs: 9px;*/
}