:root {
	/* backgrounds */
	--primary: rgb(30,33,40);
	--secondary: rgb(25,28,33);
	--third: #ddd;
	--border: rgb(19,20,23);

	/* text */
	--font-color: rgb(155,162,177);

	/* Links / anchors */
	--anchor:#629fb3;
	--anchor-hover:#24a9e7;

	/* buttons or alert boxes with different colors */
	--bg-danger: #3c0e0e;
	--color-danger: #9e5858;
	--border-danger: #350505;

	--bg-warning: #905c00;
	--color-warning: #39280a;
	--border-warning: #322001;

	--bg-info: #005d90;
	--color-info: #00263e;
	--border-info: #022530;

	--bg-success: #009039;
	--color-success: #003f0c;
	--border-success: #00380c;

	--bg-default: rgb(15,17,20);
	--color-default: #968452;
	--border-default: #000;
}

body {
	font-family: 'arial', sans-serif;
	color:var(--font-color);
}


body, ul { margin: 0; padding: 0; }
li { list-style: none; }
a { text-decoration: none;color:var(--anchor); }
a:hover {color:var(--anchor-hover);}
a:hover, button:hover, input[type="submit"]:hover { cursor: pointer; }
* {-webkit-transition-duration: 0.2s;-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;transition-duration: 0.2s;}
*:hover {-webkit-transition-duration: 0s;-moz-transition-duration: 0s;-o-transition-duration: 0s;transition-duration: 0s;}

nav .container > div > ul > li > ul {
	position: absolute;
	border: 2px solid;
	border-top:none !important;
	border-color: var(--border);
	width: 200px;
}

nav { border: 10px solid var(--primary); }
nav .container { padding-left: 10px; }
nav .container > div > ul > li,
.modIcon:hover > i:nth-child(2) { display: inline-block; }

nav .container > div > ul > li > a { padding: 20px; }
nav .container > div > ul > li:hover > ul,
nav .container > div > ul > li > a,
nav .container > div > ul > li > ul > li > a { display: block; }
nav .container > div > ul > li > ul > li > a { padding: 10px 20px; }
nav .container, .preventCollapse, .ellipsis { overflow: hidden; }

.topPane { margin-bottom: 10px; }
.leftPane {
	width: 70%;
	border: 4px;
}
.rightPane { width: 29%; }
.searchForm { width: 200px; }
.body { padding: 10px 0px; }
table { width: 100%; }
td { padding: 10px 5px; }
.header { color: #33a7d1; }
.feedContainer { margin:2rem 0; }
.pull-left { float:left; }
.pull-right { float:right; }
.well, .header { width: auto;}
.centralizeContent { text-align: center; }
.smedia { font-size: 2em; }

.banner {
	display: block;
    background: url("../img/header.png");
    height: 257px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-top: 30px;
	border: 3px solid var(--primary); 
	border-radius: 10px;
}

nav {
	border-radius: 10px;
}



.searchForm input {
    width: 100%;
    height: 25px;
    border: 1px solid var(--border);
    color: var(--font-color);
    font-size: 1em;
}

#countDownTimer {
	line-height: 2.3;
	padding: 0px 10px;
	color: #ff0000;
}

.modIcon > i:nth-child(2),
.modIcon:hover > i:nth-child(1),
/*.loginContainer, */
nav .container > div > ul > li > ul {
	display: none;
}

.loginForm {
    display: flex;
    flex-wrap: wrap;
}
.loginForm button:hover {
	background: #0000004d;
}
.loginForm button {
    width: 100%;
    margin-top: 10px;
    background: rgb(15,17,20);
    color: var(--font-color);
    height: 40px;
    border: 1px solid var(--border);
    font-size: 1em;
}

.loginForm input {
	width: 100%;
	height: 30px;
	border: none;
	color: #fff;
	font-size: 1em;
	border-bottom: 1px solid var(--border);
}


.main {
	width: 1220px;
	margin: 1rem auto;
	position: relative;
	z-index: 1;
	/* margin:auto; */
}

body {
	background: url("../img/umbreon_bg.png");
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-attachment: fixed;
}


.ellipsis {
	text-overflow: ellipsis;
	white-space: nowrap;
}



.alert-box {
	max-width: 500px;
	font-size: 14px;
	border-radius: 5px;
	border: 1px solid var(--third);
	margin: 0 auto;
	margin-bottom: 15px;
	text-align: center;
}

.alert-default {
	background: var(--bg-default);
	color: var(--color-default);
	border-color: var(--border-default);
}
.alert-info {
	background: var(--bg-info);
	color: var(--color-info);
	border-color: var(--border-info);
}
.alert-success {
    background: var(--bg-success);
    color: var(--color-success);
    border-color: var(--border-success);
}
.alert-warning {
	background: var(--bg-warning);
	color: var(--color-warning);
	border-color: var(--border-warning);
}
.alert-danger {
	background: var(--bg-danger);
	color: var(--color-danger);
	border-color: var(--border-danger);
}
.alert-collapse {display:inline-block;}
.alert-size1 { font-size: 12px; }
.alert-size2 { font-size: 15px; }
.alert-size3 { font-size: 18px; }
.alert-size4 { font-size: 20px; }


nav .container > div > ul > li > ul > li > a:hover,
.searchForm input, #countDownTimer, .loginForm input,
nav, table, .header, .feedContainer {
	background: var(--primary);
}

.feedContainer {	
	border-radius: 10px;
}

footer {
	background: var(--primary);
	border-radius: 10px;
}

.loginForm .well {
	width: 100%;
}

nav .container,
nav .container > div > ul > li > ul,
.leftPane, .rightPane, .topPane,
tr:nth-child(2n+1) {
	background: var(--secondary);
}

footer, .feedContainer,
nav .container, .topPane {
	border-bottom: 2px solid var(--border)
}

table, .header, .well, .smedia a {
	padding: 10px;
}

.searchForm input,
.loginForm input,
.alert-box {
	padding: 5px;
}

/* Znote AAC */
/* adding button style to select */
select {
	background: rgb(15,17,20);
	color: var(--font-color);
	height: 40px;
	border: 1px solid var(--border);
	font-size: 1em;
}
input {
	background: rgb(15,17,20);
	color: var(--font-color);
	height: 40px;
	border: 1px solid var(--border);
	font-size: 1em;
}
#loginContainer li {
	text-align: right;
}

div .displayPoints {
	position: relative;
	padding: 5px 15px 5px 15px;
}

div .displayPoints a {
	border: 1px solid #33a7d1;
	width: calc(50% - 10px);
	margin-bottom: 16px;
	text-align: center;
	text-align: center;
}

ul.linkbuttons {
	margin-top: 8px;
	padding: 0 8px;
}
ul.linkbuttons li {
	display: inline-block;
	border: 1px solid #33a7d1;
	width: calc(50% - 10px);
	margin-bottom: 16px;
	text-align: center;
	float: left;
}
ul.linkbuttons li:nth-child(odd) {
	margin-right: 16px;
}
ul.linkbuttons li a {
	padding: 5px 0;
	display: inline-block;
	width: 100%;
	text-align: center;
}
ul.linkbuttons:after {
	content: '';
	display: block;
	clear: both;
}
.widget,
.widget .body,
.search_widget,
.search_widget .body {
	padding-bottom: 0;
}
.widget center {
	margin: auto;
}
.widget h3 {
	margin-bottom: 0;
}
.search_widget form {
	margin: auto;
}
.search_widget input {
	width: 100%;
	float: left;
}
.search_widget label {
	padding: 9px;
	float: left;
}
.search_widget form:after {
	display: block;
	content: '';
	clear: both;
}
div.relative {
	position: relative;
}
.search_widget #name_suggestion {
	position: absolute;
	width: 280px;
	left: -290px;
	display: none;
}
.search_widget #name_suggestion.show {
	display: block;
}
.search_widget .sname {
	text-align: right;
}
.search_widget .sname a {
	display: inline-block;
	background-color: black;
	padding: 10px 20px;
	border-bottom: 1px solid rgb(30,33,40);
}
.page_credits .feedContainer .pull-left.leftPane {
	box-sizing: border-box;
	padding-left: 8px;
	padding-right: 8px;
}

.page_characterprofile #characterProfileTable thead th:first-of-type {
	position: relative;
	width: 28%;
}
.page_characterprofile #characterProfileTable thead th:last-of-type {
	text-align: left;
	padding-left: 16px;
}
.page_characterprofile .outfit {
	position: absolute;
	top: 0;
	left: 0;
}
.page_characterprofile .flag {
	position: absolute;
	top: 16px;
	right: 16px;
}
.postHolder iframe {
	display: block;
	margin: auto;
}

.topDownloadButton {
	text-align: center;
	width: 100px;
	height: 20px;
	display: block;
	padding: 5px 15px 5px 15px;
	border: 1px solid #1e6179;
	transition: 0.4s;        
	text-decoration: none;
	color: #2e8cad;
	font-family: Verdana;
}

.topDownloadButton:hover {
	border-color: #629fb3;
	color: #629fb3;
}
.pokelat-news-card {
    background: rgba(21, 25, 31, 0.96);
    border: 1px solid #243746;
    border-radius: 8px;
    margin: 0 0 18px 0;
    padding: 16px 18px;
    box-shadow: 0 0 12px rgba(0,0,0,0.35);
}

.pokelat-news-header {
    background: #202832;
    border-left: 4px solid #33a7d1;
    padding: 8px 10px;
    margin-bottom: 12px;
    font-size: 13px;
}

.pokelat-news-date {
    color: #f5c85c;
    margin-right: 12px;
}

.pokelat-news-author {
    color: #9fb6c5;
}

.pokelat-news-title {
    color: #33a7d1;
    font-size: 20px;
    margin: 8px 0 12px 0;
}

.pokelat-news-body {
    color: #c9d6df;
    line-height: 1.5;
    font-size: 14px;
}

.pokelat-readmore {
    display: inline-block;
    margin-top: 12px;
    padding: 6px 14px;
    border: 1px solid #33a7d1;
    border-radius: 4px;
    color: #33a7d1;
    text-decoration: none;
}

.pokelat-readmore:hover {
    background: #33a7d1;
    color: #10151b;
}

.pokelat-news-pages {
 clear: both;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin: 15px auto 5px auto;
        text-align: center;
}

.pokelat-news-pages a,
.pokelat-page-current {
        display: inline-block;
        padding: 8px 14px;
        border: 1px solid #00aaff;
        color: #00c8ff;
        text-decoration: none;
        border-radius: 4px;
        background: rgba(0,0,0,.25);
        line-height: 1;
}
.pokelat-page-current {
        background: #00aaff;
        color: #061018;
}
}
.pokelat-news-image {
        float: right;
        width: 220px;
        height: 130px;
        object-fit: cover;
        object-position: center;
        margin: 5px 0 15px 20px;
        border-radius: 6px;
        display: block;
}
.pokelat-news-archive-link {
        clear: both;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px auto;

}

.pokelat-news-archive-link a {
        display: inline-block;
        padding: 8px 18px;
        border: 1px solid #00aaff;
        color: #00c8ff;
        text-decoration: none;
        border-radius: 4px;
        background: rgba(0,0,0,.25);
}

.pokelat-news-archive-link a:hover {
        background: rgba(0,170,255,.15);
}
/* Imagen pequeña en la lista de noticias */
.pokelat-news-card .pokelat-news-image {
        float: right !important;
        width: 220px !important;
        height: 130px !important;
        max-width: 220px !important;
        max-height: 130px !important;
        object-fit: cover;
        object-position: center;
        margin: 5px 0 15px 20px;
        border-radius: 6px;
        display: block;
}

/* Imagen grande solo dentro de noticia completa */
.pokelat-news-banner {
        clear: both;
        text-align: center;
        margin: 15px 0 20px 0;
}

.pokelat-news-banner img {
        width: 100%;
        max-width: 700px;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 0 15px rgba(0,0,0,.35);
}
.pokelat-news-archive-subtitle {
        text-align: center;
        color: #cfd8dc;
        font-size: 14px;
        margin: -5px auto 15px auto;
        max-width: 650px;
        line-height: 1.5;
}

.pokelat-news-back-home {
        clear: both;
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 10px auto 20px auto;
}

.pokelat-news-back-home a {
        display: inline-block;
        padding: 8px 18px;
        border: 1px solid #00aaff;
        color: #00c8ff;
        text-decoration: none;
        border-radius: 4px;
        background: rgba(0,0,0,.25);
}

.pokelat-news-back-home a:hover {
        background: rgba(0,170,255,.15);
}
.pokelat-top-logo {
        float: left;
        margin-left: 10px;
        margin-top: -10px;
}

.pokelat-top-logo a {
        display: flex;
        align-items: center;
        text-decoration: none;
}

.pokelat-top-logo img {
        height: 75px;
        width: auto;
        display: block;
}

.pokelat-top-logo span {
        color: #ffffff;
        font-size: 24px;
        font-weight: bold;
        letter-spacing: 1px;
        text-shadow: 0 2px 4px rgba(0,0,0,.8);
}