/* 1000+ Eilučių CSS Kodas */

:root {
    --primary-color: #0045b7;
    --secondary-color: #f1f1f1;
    --background-color: #0a0a0a;
    --accent-color: #1c1c1c;
    --text-color: #000000;
    --link-hover-color: #ffcc00;
    --button-hover-color: #f6e89c;
    --border-color: #24211c;
    --highlight-color: #b98a19;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --wave-color: #e1dbbe;
}

/* Body Section */
body {
    background: var(--background-color) url(../img/nbg.png) no-repeat bottom;
    background-repeat: repeat-x;
    max-width: 480px;
    min-width: 350px;
    margin: 0 auto;
    padding: 0 1px;
    color: var(--text-color);
    font-size: 10pt;
    line-height: 1.25;
    font-family: Arial, sans-serif;
    word-wrap: break-word;
}

/* Responsive Fonts */
@media only screen and (min-width: 401px) {
    body {
        font-size: 11pt;
    }
}

@media screen and (min-width: 320px) and (max-width: 400px) {
    body {
        font-size: 10pt;
    }
}

@media screen and (max-width: 319px) {
    body {
        font-size: 9pt;
    }
}

/* Header */
.headbar {
    position: relative;
    background: url(../img/headbar_left.png) left no-repeat, url(../img/headbar_right.png) right no-repeat;
    height: 62px;
    top: 23px;
    min-width: 350px;
    z-index: 1;
    margin-top: -14px;
}

.headbar .center {
    background: url(../img/headbar_center.png) center repeat-x;
    height: 62px;
    margin-left: 55px;
    margin-right: 27px;
}

/* Paper Style */
.paper {
    background: var(--wave-color) url(../img/paper.jpg);
    box-shadow: inset 0 0 3px var(--shadow-color);
    color: var(--text-color);
    text-shadow: 0 1px 0 #faf2d7;
}

.paper .border {
    background: url(../img/border_left.png) left repeat-y, url(../img/border_right.png) right repeat-y;
    min-width: 350px;
}

.paper .border .padding {
    padding: 15px 24px;
}

/* Wave Effects */
.top_wave, .bottom_wave {
    background: url(../img/top_wave.png) repeat-x;
    height: 5px;
    margin-left: -15px;
    margin-right: -15px;
}

.light_paper {
    background: var(--wave-color) url(../img/light_paper.jpg);
    color: var(--text-color);
    text-shadow: 0 1px 0 #faf2d7;
    margin-left: -15px;
    margin-right: -15px;
}

/* Juosta (Bar) Styles */
.juosta, .juosta2 {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: var(--wave-color) url(../img/light_paper.jpg);
    text-shadow: 0px 1px 0px #faf2d7;
    padding: 5px;
    margin-left: -15px;
    margin-right: -15px;
}

.juosta2 {
    border-top: 1px solid var(--highlight-color);
    border-bottom: 1px solid var(--highlight-color);
    padding: 10px 10px 10px 15px;
}

/* Footer */
.footbar {
    position: relative;
    background: url(../img/footbar_left.png) left no-repeat, url(../img/footbar_right.png) right no-repeat;
    height: 29px;
    bottom: 12px;
    min-width: 350px;
}

.footbar .center {
    background: url(../img/footbar_center.png) center repeat-x;
    height: 29px;
    margin-left: 140px;
    margin-right: 99px;
}

/* Links */
a {
    color: var(--text-color);
    text-decoration: underline;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--link-hover-color);
    text-decoration: none;
}

/* Text Sizes */
.small {
    font-size: 9pt;
}

.small2 {
    font-size: 7pt;
}

.big {
    font-size: 13pt;
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.green {
    color: #00450d;
}

.red {
    color: #ff0000;
}

.pilka {
    color: #959090;
}

.geltona {
    color: #deab0f;
}

.black {
    color: black;
}

.float_left {
    float: left;
}

/* Spacing Dividers */
.razdel5, .razdel10, .razdel15, .razdel20 {
    height: 5px;
}

/* Level and Item Count */
.lygis {
    position: absolute;
    z-index: 6;
    margin-top: 65px;
    background-image: url(../img/lygis2.png);
    width: 27px;
    height: 20px;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    color: #fff9eb;
    text-align: center;
    padding-top: 3px;
    font-size: 13px;
    text-shadow: 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000, -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000;
}

.daiktu_kiekis {
    position: absolute;
    z-index: 6;
    width: 40px;
    height: 10px;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    color: #fff9eb;
    text-align: center;
    padding-top: 3px;
    font-size: 13px;
    text-shadow: 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000, -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000;
}

/* Strength and Health Bars */
.pliusas, .stiprumas, .stiprumas2, .stiprumas3 {
    position: relative;
    z-index: 5;
    margin: 0px auto;
    margin-top: -20px;
    background: url('/img/item2/daikto_retumas1.png');
    width: 30px;
    height: 7px;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    color: #fff9eb;
    text-align: center;
    padding-top: 3px;
    font-size: 13px;
    text-shadow: 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000, -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000;
}

/* HP and EXP Bars */
.hp, .hp2 {
    position: relative;
    z-index: 5;
    margin: 0px auto;
    margin-top: -9px;
    background-color: rgb(255, 255, 255, 1);
    width: 100px;
    height: 5px;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    color: #fff9eb;
    text-align: center;
    padding-top: 3px;
    font-size: 13px;
    text-shadow: 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000, -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000;
}

.exp, .exp2 {
    position: absolute;
    z-index: 4;
    margin-top: 71px;
    margin-left: 22px;
    background-color: silver;
    border: 1px solid black;
    width: 60px;
    height: 7px;
    border-radius: 6px;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    color: #fff9eb;
    text-align: center;
    padding-top: 3px;
    font-size: 13px;
    text-shadow: 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000, -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000;
}

input[type="text"], input[type="password"], input[type="file"], textarea, select {
    background: url(../img/light_paper.jpg);
    border: 1px solid #24211c;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.25);
    width: 80%;
    padding: 10px 5%;
    color: var(--text-color);
    border-radius: 3px;
    -webkit-appearance: none;
}

/* Additional Styling */
button, input[type="submit"], input[type="button"] {
    font-size: 8pt;
    font-family: Arial, sans-serif;
    background: url(../img/btn_blue_center.png) repeat-x;
    text-align: center;
    display: block;
    width: 70%;
    height: 42px;
    text-transform: uppercase;
    color: #ebdb84;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.75);
    margin: 0 auto;
    cursor: pointer;
    border: none;
    box-shadow: none;
}