/* Velon: completari peste all.css (designul clasic) pentru ce are site-ul in
   plus: limbi, meniul contului, captcha, subsol fara sigle straine si paginile
   site-ului (forum, suport, cont...) imbracate in pergamentul din coloana. */

/* ---- antet ---- */
.vl #userBox .header-box-nav-login { position: absolute; margin: 0; padding: 0; list-style: none; }
.vl .header-box-nav-login li { list-style: none; }
.vl-langs { position: absolute; right: 10px; top: 6px; z-index: 5; display: flex; align-items: center; height: 24px; }
.vl-langs a { display: flex; align-items: center; justify-content: center; width: 26px; height: 20px; margin-left: 4px; padding: 0; box-sizing: border-box; border: 1px solid #5a2a0a; background: rgba(0, 0, 0, .55); color: #fef6aa; font-size: 10px; font-weight: bold; line-height: 1; text-decoration: none; }
.vl-langs a img { display: block; width: 18px; height: 12px; margin: 0; }
.vl-langs a.on, .vl-langs a:hover { border-color: #f2e69f; }

/* ---- coloana din dreapta ---- */
.vl .modul-box h3.vl-sub { margin-top: 0; }
.vl-menu { margin: 8px 0 10px 14px; padding: 0; width: 133px; }
.vl-menu li { background: url(main/img/bullet.gif) no-repeat 0 2px; list-style: none; padding: 0 0 6px 18px; }
.vl-menu li a { color: #58220e; font-size: 11px; font-weight: bold; text-decoration: none; }
.vl-menu li a:hover { color: #8d0404; text-decoration: underline; }
.vl-captcha { margin: 4px 0 0 -7px; transform: scale(.88); transform-origin: 0 0; max-height: 126px; overflow: hidden; }
.vl-empty { color: #58220e; font-size: 11px; margin: 8px 12px 12px; text-align: center; }
.vl .form-score ul li div { min-height: 14px; }
.vl .form-score ul li div.empire0 { background: none; }
.vl .download-btn, .vl .itemshop-btn { margin: 8px auto 14px; padding: 0; }

/* ---- subsol ---- */
.vl-footlogo { height: 35px; margin: 71px 0 0 0; text-align: center; }
.vl-footlogo a { display: inline-block; line-height: 0; }
.vl-footlogo img { display: inline-block; height: 34px; width: auto; filter: drop-shadow(0 2px 2px #000); }
.vl-footlogo a:hover img { filter: drop-shadow(0 2px 2px #000) brightness(1.15); }
#footer ul li.first { width: 500px; }

/* ---- continutul paginilor: pergament ---- */
.vpage {
	--bg: transparent; --bg-nav: transparent;
	--panel: rgba(255, 246, 214, .45); --panel-2: rgba(255, 246, 214, .3); --panel-hi: rgba(255, 240, 200, .7);
	--gold: #8d0404; --gold-bright: #b31b00; --gold-deep: #5a1a00; --gold-border: #b99a6a;
	--border-faint: rgba(90, 40, 0, .22); --border-soft: rgba(90, 40, 0, .12);
	--metal: #8a5a1c; --metal-bright: #b37a2a; --ivory: #fef6aa;
	--text: #160400; --heading: #7b1300; --muted: #5d3a1a; --muted-dim: #7a5a3a;
	--red: #8d0404; --shadow: rgba(60, 25, 0, .25);
	--font-ui: Arial, Helvetica, sans-serif; --font-display: Arial, Helvetica, sans-serif;
	color: #160400; font: 11px/14px Arial, Helvetica, sans-serif;
	margin-right: 14px; min-height: 260px;
}
.vpage *, .vpage *::before, .vpage *::after { box-sizing: border-box; }
.vpage a { color: #8d0404; }
.vpage a:hover { color: #b31b00; }
.vpage img { max-width: 100%; }
.vpage h1, .vpage h2, .vpage h3, .vpage h4 { color: #7b1300; font-family: Arial, Helvetica, sans-serif; margin: 10px 0 6px; }
.vpage h1 { font-size: 16px; } .vpage h3 { font-size: 13px; } .vpage h4 { font-size: 12px; }
.vpage p { font-size: 11px; line-height: 14px; }
.vpage ul li { background: none; padding: 0; }

/* titlul paginii = bara cu ornament a coloanei (h2 din design) */
.vpage .section-title, .vpage .page-hd {
	background: url(main/img/heading-3.jpg) no-repeat; color: #7b1300; font: bold 14px/17px Arial, Helvetica, sans-serif;
	letter-spacing: 0; text-transform: none; margin: 11px -14px 10px -5px; padding: 7px 0 7px 33px; border: 0; text-align: left;
}
.vpage .section-title::before, .vpage .section-title::after, .vpage .page-hd::before, .vpage .page-hd::after { display: none; }

/* butoane: rosu-inchis cu text auriu, ca butoanele desenate din design */
.vpage .btn, .vpage button.btn, .vpage input[type=submit], .vpage .btn-read {
	background: linear-gradient(#a1261a, #6d1206 55%, #520c02); border: 1px solid #3a0a00; border-radius: 3px;
	box-shadow: inset 0 1px 0 rgba(255, 220, 150, .35), 0 1px 2px rgba(0, 0, 0, .35);
	color: #f2e69f; cursor: pointer; display: inline-block; float: none; font: bold 11px/14px Arial, Helvetica, sans-serif;
	height: auto; letter-spacing: 0; margin: 4px 0; padding: 4px 14px; text-align: center; text-decoration: none; text-shadow: 0 1px 1px #000;
	text-transform: none; width: auto;
}
.vpage .btn:hover, .vpage input[type=submit]:hover, .vpage .btn-read:hover { color: #fff; text-decoration: underline; background: linear-gradient(#b8311f, #7d1608 55%, #5e0e02); }
.vpage .btn-gold, .vpage .btn-primary { background: linear-gradient(#c43a1c, #8a1806 55%, #5e0e02); }
.vpage .btn-block { display: block; width: 100%; }
.vpage .btn-sm { padding: 2px 10px; font-size: 10px; }
.vpage .btn-lg { padding: 7px 20px; font-size: 13px; }
.vpage .btn[disabled], .vpage .btn.off { opacity: .55; cursor: default; }

/* campuri */
.vpage input[type=text], .vpage input[type=password], .vpage input[type=email], .vpage input[type=number], .vpage input[type=search],
.vpage input[type=date], .vpage input[type=url], .vpage select, .vpage textarea, .vpage .form-control {
	background: #fff8e1; border: 1px solid #997c47; border-radius: 0; box-shadow: inset 1px 1px 2px rgba(80, 40, 0, .25);
	color: #2a0d00; font: 12px/16px Arial, Helvetica, sans-serif; height: auto; max-width: 100%; padding: 4px 6px; width: 100%;
}
.vpage input:focus, .vpage select:focus, .vpage textarea:focus { border-color: #8d0404; outline: none; }
.vpage label { color: #4a1e00; font-weight: bold; font-size: 11px; }

/* tabele */
.vpage table { border-collapse: collapse; width: 100%; font-size: 11px; }
.vpage table th { background: #6d1206; color: #f2e69f; font-weight: bold; padding: 5px 6px; text-align: left; border: 1px solid #4a0c02; }
.vpage table td { border-bottom: 1px solid rgba(90, 40, 0, .2); padding: 5px 6px; color: #160400; }
.vpage table tr:nth-child(even) td { background: rgba(255, 240, 200, .35); }
.vpage .thead-inverse th { background: #6d1206; }

/* mesaje */
.vpage .alert { background: rgba(255, 246, 214, .7); border: 1px solid #b99a6a; border-left: 4px solid #8a5a1c; border-radius: 0; color: #2a0d00; font-size: 11px; margin: 6px 0 10px; padding: 7px 10px; }
.vpage .alert-danger, .vpage .reg-alert.bad { border-left-color: #a00; background: #f6d9c8; }
.vpage .alert-success { border-left-color: #3d6b12; background: #e6edc6; }
.vpage .alert-info { border-left-color: #7b1300; }
.vpage .alert .close { color: #7b1300; float: right; background: none; border: 0; cursor: pointer; font-size: 14px; }

/* taburi */
.vpage .tabs { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 8px; border-bottom: 2px solid #7b1300; }
.vpage .tabs a { background: #d9c08a; border: 1px solid #997c47; border-bottom: 0; color: #4a1e00; font-weight: bold; font-size: 10px; padding: 4px 8px; text-decoration: none; text-transform: uppercase; }
.vpage .tabs a.active, .vpage .tabs a:hover { background: #7b1300; color: #f2e69f; }

/* stiri */
.vpage .article { background: none; border: 0; box-shadow: none; margin: 0 0 14px; padding: 0 0 10px; border-bottom: 1px dashed rgba(90, 40, 0, .35); }
.vpage .article-head { background: none; border: 0; padding: 0; display: block; }
.vpage .article-head .mark, .vpage .article-head .badge, .vpage .article-head .when { display: none; }
.vpage .article-head .ttl { display: none; }
.vpage .article-body { padding: 0; background: none; border: 0; }
.vpage .article-body .head-center { text-align: left; padding: 0; margin: 0; }
.vpage .article-body .head-center h3 { color: #7b1300; font-size: 13px; margin: 4px 0 2px; }
.vpage .article-body .head-center .stamp { color: #7a5a3a; font-size: 10px; font-weight: bold; margin: 0 0 6px; }
.vpage .article-body .head-center::before, .vpage .article-body .head-center::after { display: none; }
.vpage .article .content { color: #160400; font-size: 11px; line-height: 14px; }
.vpage .clip-more { background: linear-gradient(rgba(233, 214, 170, 0), #e3cf9f 70%); }

/* panouri vechi -> casete de pergament */
.vpage .panel, .vpage .forum-panel, .vpage .sup-card, .vpage .acc-item, .vpage .jumbotron {
	background: rgba(255, 246, 214, .45); border: 1px solid #b99a6a; border-radius: 0; box-shadow: none; color: #160400;
}
.vpage .panel-head { background: #7b1300; color: #f2e69f; font: bold 12px/16px Arial, Helvetica, sans-serif; letter-spacing: 0; padding: 5px 10px; text-transform: none; border: 0; }
.vpage .panel-head::before, .vpage .panel-head::after, .vpage .flourish::before, .vpage .flourish::after { display: none; }
.vpage .row { display: flex; flex-wrap: wrap; margin: 0 -5px; }
.vpage .row > [class*=col-] { padding: 0 5px; }
.vpage .col-sm-4 { width: 33.33%; } .vpage .col-sm-8 { width: 66.66%; } .vpage .col-sm-6 { width: 50%; } .vpage .col-sm-12 { width: 100%; }

/* prima pagina: caseta de start */
.vl-start { overflow: hidden; padding: 2px 0 6px; }
.vl-start .btn { float: left; margin: 2px 6px 4px 0; }

/* contul: casete si taburi */
.vpage a, .vpage .acc-tab { text-decoration: none; }
.vpage .acc-card, .vpage .acc-panel { background: rgba(255, 246, 214, .5); border: 1px solid #b99a6a; border-radius: 0; box-shadow: none; }
.vpage .acc-card-head { color: #7b1300; border-bottom: 1px solid rgba(90, 40, 0, .2); }
.vpage .acc-stat { background: linear-gradient(#f6e7bf, #e2cc94); border: 1px solid #b99a6a; border-radius: 0; box-shadow: inset 0 1px 0 #fff6d8; }
.vpage .acc-stat b { color: #8d0404; font-size: 16px; line-height: 20px; word-break: normal; }
.vpage .acc-stat span { color: #5d3a1a; }
.vpage .acc-tab { border-radius: 0; color: #4a1e00; }
.vpage .acc-tab.active { background: #7b1300; border-color: #4a0c02; color: #f2e69f; }
.vpage .acc-head h1, .vpage .acc-head h2 { font-size: 16px; }

/* Discord in meniul din stanga: scris albastru, ca pe butoanele clasice */
.vl .main-nav li a.vl-discord { color: #6d7dff; text-shadow: 0 1px 1px #000; }
.vl .main-nav li a.vl-discord:hover { color: #9aa6ff; }

/* sigla Velon pe placuta din antet (imagine 2x, afisata 200x66) */
.vl .logo { background: url(main/img/velon-logo.png) no-repeat 0 0; background-size: 200px 66px; left: 365px; top: 0; width: 200px; height: 66px; }
.vl #regSteps { color: #f2e69f; font-weight: bold; }
.vl #regSteps a { display: inline; }
.vl #regBtn a#toReg { color: #fff; }
.vl .header-wrapper { background-image: url(main/img/header-bg-velon.jpg); }

/* inregistrarea (designul clasic #register): mesaje, note, captcha */
.vl-msg { margin: 6px 0 10px; padding: 7px 10px; border: 1px solid #b99a6a; border-left: 4px solid #8a5a1c; background: rgba(255, 246, 214, .75); color: #2a0d00; font-size: 11px; line-height: 14px; }
.vl-msg.bad { border-left-color: #a00; background: #f6d9c8; }
.vl-msg.ok { border-left-color: #3d6b12; background: #e6edc6; }
.vl-msg.warn { border-left-color: #b8860b; background: #fbeec3; }
.vl-msg a { color: #8d0404; font-weight: bold; }
.vl-note { color: #5d3a1a; font-size: 10px; line-height: 13px; margin: 3px 0 0; }
.vl-hint { color: #7a5a3a; font-weight: normal; font-size: 10px; }
.vl-captcha-reg { margin: 10px 0 6px; }
.vl-captcha-reg .cap-img { display: inline-block; vertical-align: middle; border: 1px solid #997c47; }
.vl-captcha-reg #cap-reload { display: inline-block; margin: 0 6px; font-size: 16px; text-decoration: none; }

/* ---- prima pagina: Joaca si pe telefon ---- */
.vl-mobile-in { display: flex; align-items: center; padding: 6px 14px 14px 0; }
.vl-phone { flex: none; position: relative; width: 210px; height: 112px; margin-right: 16px; padding: 7px 9px; border-radius: 16px;
	background: linear-gradient(#2b2b2b, #0e0e0e); box-shadow: 0 6px 14px rgba(0, 0, 0, .45), inset 0 0 0 2px #555; }
.vl-phone::before { content: ""; position: absolute; left: 3px; top: 50%; width: 3px; height: 26px; margin-top: -13px; border-radius: 2px; background: #333; }
.vl-phone-screen { display: block; width: 100%; height: 100%; border-radius: 6px; background-size: cover; background-position: 40% 50%; }
.vl-mobile-txt p { margin: 0 0 10px; font-size: 11px; line-height: 15px; }
.vl-store { display: inline-flex; align-items: center; margin: 0 6px 6px 0; padding: 4px 12px 4px 8px; border-radius: 6px; background: #120a06; border: 1px solid #5a3a1a;
	color: #fef6aa; text-decoration: none; }
.vl-store i { font-size: 22px; margin-right: 8px; }
.vl-store span { font: bold 12px/13px Arial, sans-serif; }
.vl-store small { display: block; font-size: 9px; font-weight: normal; color: #c9ad7a; }
.vl-store:hover { border-color: #f2d27a; color: #fff; }

/* ---- pagina de descarcare: calculator / telefon ---- */
.vpage .vl-dl-h { margin: 14px 0 8px; font-size: 13px; }
.vpage .vl-phones { display: flex; flex-wrap: wrap; margin: 0 -5px 10px; }
.vpage .vl-phone-card { flex: 1 1 160px; margin: 5px; padding: 12px; text-align: center; border: 1px solid #b99a6a; background: rgba(255, 246, 214, .55); }
.vpage .vl-phone-card i { display: block; font-size: 30px; color: #7b1300; margin-bottom: 6px; }
.vpage .vl-phone-card b { display: block; margin-bottom: 8px; }
.vpage .vl-soon { display: inline-block; padding: 3px 10px; border: 1px dashed #997c47; color: #6b4722; font-weight: bold; }

/* ---- cerintele de sistem (stilul vechi venea din aet-rodnia.css, care nu se mai incarca) ---- */
.vpage .sysreq { margin-top: 16px; }
.vpage .sysreq-title { margin: 0 0 8px; font-size: 13px; }
.vpage .sysreq-grid { display: flex; flex-wrap: wrap; margin: 0 -5px; }
.vpage .sysreq-item { flex: 1 1 200px; display: flex; align-items: flex-start; margin: 5px; padding: 10px; border: 1px solid #b99a6a; background: rgba(255, 246, 214, .55); }
.vpage .sysreq-item .sr-ico { flex: none; width: 34px; height: 34px; margin-right: 10px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #7b1300; color: #f2e69f; font-size: 15px; }
.vpage .sysreq-item b { display: block; color: #7b1300; font-size: 12px; margin-bottom: 2px; }
.vpage .sysreq-item span:not(.sr-ico) { display: block; color: #2a0d00; font-size: 11px; }
.vpage .sysreq-item small { display: block; color: #a00; font-size: 10px; margin-top: 3px; }

/* ---- butonul de meniu (doar pe telefon) ---- */
.vl-burger { display: none; }

/* ===== telefon si tableta: aceeasi haina, pe o singura coloana =====
   Designul clasic e desenat pe 930px fix; sub 960px casetele isi pierd
   imaginile de fundal de latime fixa si devin pergament simplu, iar meniul
   din stanga se deschide din butonul de sus. */
@media (max-width: 960px) {
	html, body { min-width: 0 !important; }
	body.vl { background: #120503; }
	.vl #page { overflow: visible; }
	.vl .header-wrapper { height: 210px; background: url(main/img/header-bg-velon.jpg) no-repeat 50% 0; background-size: auto 210px; }
	.vl #header { width: 100%; height: 210px; }
	.vl .logo { left: 50%; margin-left: -100px; }
	.vl .vl-langs { right: 6px; top: 70px; }
	.vl .header-box { margin: 108px auto 0; width: 94%; max-width: 533px; }
	.vl #regBtn { width: 100%; background-size: 100% 200%; height: 80px; }
	.vl #header .reg-hover { background-position: 0 100%; }
	.vl #regBtn a#toReg { width: auto; font-size: 18px; padding-left: 90px; height: 60px; line-height: 60px; }
	.vl #regSteps span { margin: 0 4px; font-size: 11px; }
	.vl #userBox { margin: 100px auto 0; width: 94%; max-width: 535px; padding: 8px 10px 0; background: rgba(60, 5, 0, .85); border: 1px solid #3a0a00; border-radius: 6px; height: auto; }
	.vl .welcome-text-left, .vl .welcome-text-right { float: none; width: auto; padding: 0; text-align: center; font-size: 13px; }
	.vl .header-box-nav-container { width: auto; height: auto; background: none; margin: 4px 0 8px; padding: 0; }
	.vl #userBox .header-box-nav-login { position: static; display: flex; flex-wrap: wrap; justify-content: center; }
	.vl .nav-box-btn { float: none; margin: 3px; }
	.vl .vl-burger { display: block; position: fixed; left: 10px; top: 10px; z-index: 60; padding: 8px 12px; border-radius: 6px; border: 1px solid #3a0a00;
		background: linear-gradient(#a1261a, #5e0e02); color: #f2d27a; font: bold 14px Arial, sans-serif; cursor: pointer; box-shadow: 0 3px 8px rgba(0, 0, 0, .5); }
	.vl .container-wrapper { float: none; padding: 0 0 20px; background: none; }
	.vl .container { width: auto; padding: 0 8px; }
	.vl .col-1, .vl .col-2, .vl .col-3 { float: none; display: block; width: auto; margin: 10px 0 0; }
	.vl .col-1 { display: none; }
	.vl.vl-navopen .col-1 { display: block; position: fixed; left: 0; top: 0; bottom: 0; z-index: 55; width: 240px; margin: 0; padding: 54px 8px 10px; overflow-y: auto;
		background: #1a0904; box-shadow: 4px 0 20px rgba(0, 0, 0, .7); }
	.vl .boxes-top, .vl .boxes-bottom, .vl .boxes-middle { display: none; }
	.vl .modul-box, .vl .modul-box-2 { width: auto; margin-bottom: 10px; background: #e9d6aa; border: 1px solid #8a5a1c; border-radius: 6px; }
	.vl .modul-box .modul-box-bg, .vl .modul-box-2 .modul-box-bg { background: none; }
	.vl .modul-box .modul-box-bg-bottom { background: none; min-height: 0; padding-bottom: 8px; }
	.vl .main-nav { margin: 8px 0 0; }
	.vl .main-nav li a, .vl .modul-box h3 { width: auto; background-size: 100% 100%; }
	.vl .form-login, .vl .vl-menu { width: auto; margin: 8px 12px; }
	.vl .form-login .input { width: 100%; background: #fff8e1; border: 1px solid #997c47; }
	.vl .form-login .input input { width: 96%; }
	.vl .btn-login { width: 100% !important; background-size: 100% 100% !important; }
	.vl .agbok, .vl .password { width: auto; }
	.vl .form-score { margin: 5px 10px; }
	.vl .download-btn, .vl .itemshop-btn { margin: 8px auto 12px; }
	.vl .two-boxes { width: auto; background: #e9d6aa; border: 1px solid #8a5a1c; border-radius: 6px; }
	.vl .two-boxes .two-boxes-top, .vl .two-boxes .two-boxes-bottom { background: none; }
	.vl .box, .vl .box-right { float: none; display: block; width: auto; margin: 0 10px; }
	.vl .box h2, .vl .content h2 { background-size: 100% 100%; }
	.vl .content { width: auto; background: #ecd9ad; border: 1px solid #8a5a1c; border-radius: 6px; }
	.vl .content .content-bg, .vl .content .content-bg-bottom { background: none; width: auto; }
	.vl .content .content-bg-bottom { padding: 0 10px 10px; }
	.vl .shadow { display: none; }
	.vl .vpage { margin-right: 0; }
	.vl .vpage table { display: block; overflow-x: auto; }
	.vl .vl-mobile-in { flex-direction: column; text-align: center; padding-right: 0; }
	.vl .vl-phone { margin: 0 auto 12px; }
	.vl #highscore .content-bg-bottom, .vl #guildHighscore .content-bg-bottom { width: auto; padding: 0 6px 10px; }
	.vl #highscore table, .vl #guildHighscore table { width: 100%; }
	.vl .ranks-dropdowns-box { width: auto; height: auto; background: #e2cb94; padding: 6px; }
	.vl .ranks-select-box, .vl .ranks-select-box-btn { float: none; width: auto; margin: 4px 0; }
	.vl .ranks-dropdowns-box select, .vl .ranks-input, .vl .ranks-input input { width: 100%; }
	.vl .inner-form-border, .vl .inner-form-box { width: auto; background: none; }
	.vl #registerForm, .vl #registerForm div { width: auto; }
	.vl #register .inner-form-box input[type=text], .vl #register .inner-form-box input[type=password] { width: 100%; }
	.vl #progressTracker { width: auto; }
	.vl .footer-wrapper { height: auto; margin: 0; background: #0c0302; padding: 10px 0 18px; }
	.vl #footer { width: auto; }
	.vl .vl-footlogo { margin: 6px 0; }
	.vl #pegi { float: none; margin: 6px auto; }
	.vl #footer ul { float: none; width: auto; height: auto; margin: 6px 8px 0; padding: 6px; background: none; }
	.vl #footer ul li.first { width: auto; }
}