/* ===== Forum of Ukrainians in Germany: theme "Blue & Gold" ===== */
/* Palette: #0057B7 blue, #FFD700 gold, #0b2a4a navy, #eef3fa light bg, #DD0000 accent */

.code_td, .php_td, .q_td, .quote_td {FONT-SIZE: 13px; COLOR: #1d2b3a; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;}
.code_table, .php_table, .q_table, .quote_table {BORDER: #9db8de 1px solid; BORDER-LEFT: #0057B7 4px solid; FONT-SIZE: 13px; WIDTH: 95%; FONT-FAMILY: Verdana, Arial, Helvetica; BACKGROUND: #f7faff;}

BODY {
  FONT-SIZE: 14px; PADDING: 0; MARGIN: 8px;
  FONT: 13px Verdana,Arial,Helvetica,sans-serif; COLOR: #1d2b3a;
  BACKGROUND-COLOR: #eef3fa;
  BACKGROUND-IMAGE: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' fill='%23eef3fa'/%3E%3Cg fill='none' stroke='%230057B7' stroke-opacity='.08' stroke-width='1.5'%3E%3Cpath d='M0 30 Q30 10 60 30 T120 30'/%3E%3Cpath d='M0 90 Q30 70 60 90 T120 90'/%3E%3C/g%3E%3Cg fill='%23FFD700' fill-opacity='.35'%3E%3Ccircle cx='30' cy='60' r='2.5'/%3E%3Ccircle cx='90' cy='0' r='2.5'/%3E%3Ccircle cx='90' cy='120' r='2.5'/%3E%3C/g%3E%3Cpath d='M90 60 l2 5 5 .5 -4 3.5 1.5 5 -4.5 -3 -4.5 3 1.5 -5 -4 -3.5 5 -.5z' fill='%230057B7' fill-opacity='.12'/%3E%3C/svg%3E");
  BACKGROUND-REPEAT: repeat;
  SCROLLBAR-FACE-COLOR: #9db8de; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #7fa0d0;
  SCROLLBAR-3DLIGHT-COLOR: #c9d9ef; SCROLLBAR-ARROW-COLOR: #0b2a4a; SCROLLBAR-TRACK-COLOR: #eef3fa; SCROLLBAR-DARKSHADOW-COLOR: #5a82bd;
}
FONT {FONT: 14px Verdana,Arial,Helvetica,sans-serif}
TD {FONT: 14px Verdana,Arial,Helvetica,sans-serif}
P {FONT: 13px/1.5 Verdana,Arial,Helvetica,sans-serif}

.gensmall {FONT-SIZE: 12px}
TD.genmed {FONT-SIZE: 13px}
.genmed {FONT-SIZE: 13px}
.explaintitle {FONT-WEIGHT: bold; FONT-SIZE: 13px; COLOR: #0057B7}

A:link {COLOR: #0057B7; TEXT-DECORATION: none}
A:active {COLOR: #0057B7; TEXT-DECORATION: none}
A:visited {COLOR: #3a6fb5; TEXT-DECORATION: none}
A:hover {COLOR: #c98f00; TEXT-DECORATION: underline}

A.postlink {COLOR: #0057B7; TEXT-DECORATION: underline; TEXT-DECORATION-COLOR: #FFD700}

.topictitle {FONT-WEIGHT: bold; FONT-SIZE: 14px; FONT-FAMILY: Georgia,'Times New Roman',serif}
A.topictitle:visited {COLOR: #3a6fb5}
A.topictitle:hover {COLOR: #c98f00}

.name {FONT-WEIGHT: bold; FONT-SIZE: 13px; COLOR: #0b2a4a}
HR {BORDER: 0; BORDER-TOP: 2px solid #FFD700; HEIGHT: 0; OPACITY: .6}

TD.cat, TD.catHead, TD.catSides, TD.catLeft, TD.catRight, TD.catBottom {
  FONT-WEIGHT: bold; COLOR: #ffffff; TEXT-INDENT: 6px; LETTER-SPACING: 1px; HEIGHT: 32px;
  BACKGROUND: linear-gradient(to bottom,#1a73d1 0%,#0057B7 55%,#003d82 100%);
  BORDER-BOTTOM: 3px solid #FFD700;
}
TD.cat A, TD.catHead A, TD.catSides A, TD.catLeft A, TD.catRight A, TD.catBottom A,
TD.cat A:link, TD.catHead A:link, TD.cat A:visited, TD.catHead A:visited {COLOR: #FFD700}
TD.cat A:hover, TD.catHead A:hover {COLOR: #ffffff}

.row1 {BACKGROUND: #f8fbff}
.row2 {BACKGROUND: #e6eefa}
.row3 {BACKGROUND: #eef3fb}

.helpline {BACKGROUND: #e6eefa; FONT-SIZE: 13px; BORDER: 0}

TD.spacerow {BACKGROUND: #c9d9ef}
TD.rowpic {BACKGROUND: linear-gradient(to right,#FFD700 0,#FFD700 3px,#f0f5fc 3px) repeat-y;}
TH {
  PADDING: 0 10px; FONT-WEIGHT: bold; FONT-SIZE: 12px; TEXT-TRANSFORM: uppercase; LETTER-SPACING: .5px;
  BACKGROUND: linear-gradient(to bottom,#e3edfb,#c6d9f2); COLOR: #0b2a4a;
  WHITE-SPACE: nowrap; HEIGHT: 28px; TEXT-ALIGN: center; BORDER-BOTTOM: 2px solid #0057B7;
}

.bodyline {BORDER: #0b2a4a 1px solid; BORDER-TOP: #FFD700 4px solid; BACKGROUND: #fbfdff; BORDER-RADIUS: 8px; BOX-SHADOW: 0 4px 18px rgba(0,40,100,.18)}
.forumline {BORDER: #0057B7 2px solid; BACKGROUND: #ffffff; BORDER-RADIUS: 6px}
.maintitle {FONT: bold 22px/125% Georgia,'Times New Roman',serif; COLOR: #0057B7; TEXT-DECORATION: none}

H1 {FONT: bold 22px/125% Georgia,'Times New Roman',serif; COLOR: #0057B7; TEXT-DECORATION: none}
H2 {FONT: bold 18px/170% Georgia,'Times New Roman',serif; COLOR: #0b2a4a; TEXT-DECORATION: none}

.subtitle {FONT: bold 18px/170% Georgia,'Times New Roman',serif; COLOR: #0b2a4a; TEXT-DECORATION: none}

.nav {FONT-WEIGHT: bold; FONT-SIZE: 13px; COLOR: #0b2a4a}
.postbody {FONT-SIZE: 14px; LINE-HEIGHT: 140%; COLOR: #1d2b3a}
.postdetails {FONT-SIZE: 12px; COLOR: #5a6f8a}
.quote {BORDER: #9db8de 1px solid; BORDER-LEFT: #FFD700 5px solid; FONT-SIZE: 13px; BACKGROUND: #f4f8fe; COLOR: #2e4565; LINE-HEIGHT: 135%; PADDING: 4px 8px; FONT-STYLE: italic}
.code {BORDER: #9db8de 1px solid; BORDER-LEFT: #0057B7 5px solid; PADDING: 6px 8px; BACKGROUND: #0f2238; FONT: 12px "Courier New",Courier,monospace; COLOR: #9fe0a8}
.errorline {BORDER: #DD0000 1px solid; BACKGROUND: #ffe3e3; COLOR: #8a0000}

FORM {DISPLAY: inline}
INPUT {FONT: 12px Verdana,Arial,Helvetica,sans-serif}
SELECT {BACKGROUND: #ffffff; FONT: 12px Verdana,Arial,Helvetica,sans-serif; BORDER: 1px solid #7fa0d0; BORDER-RADIUS: 3px; COLOR: #0b2a4a}
INPUT.post, TEXTAREA.post {BORDER: #7fa0d0 1px solid; BORDER-BOTTOM: #0057B7 2px solid; PADDING: 3px 5px; BACKGROUND: #ffffff; FONT: 12px Verdana,Arial,Helvetica; COLOR: #1d2b3a; BORDER-RADIUS: 3px}
INPUT.post:focus, TEXTAREA.post:focus {BORDER-COLOR: #0057B7; BACKGROUND: #fffdf0; OUTLINE: 0; BOX-SHADOW: 0 0 0 2px rgba(255,215,0,.55)}
INPUT.button, INPUT.liteoption, .fakebut, INPUT.catbutton {BORDER: #0b2a4a 1px solid; FONT-SIZE: 13px; BACKGROUND: #fafafa; COLOR: #0b2a4a}
INPUT.mainoption {BORDER: #0b2a4a 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 13px; BACKGROUND: #FFD700; COLOR: #0b2a4a}

A.but {COLOR: #0b2a4a; TEXT-DECORATION: none}
A.but:hover {COLOR: #0057B7; TEXT-DECORATION: none}
A.but:visited {COLOR: #0b2a4a; TEXT-DECORATION: none}
.topbkg {BACKGROUND: linear-gradient(to bottom,#dbe8fa,#eef3fa) repeat-x}
.topnav {BORDER-TOP: #0057B7 1px solid; BORDER-BOTTOM: #0057B7 1px solid; FONT-SIZE: 13px; BACKGROUND: linear-gradient(to bottom,#ffffff,#e3edfb) repeat-x; COLOR: #0b2a4a; WHITE-SPACE: nowrap; HEIGHT: 24px}
.admin {FONT-WEIGHT: bold; FONT-SIZE: 13px; COLOR: #DD0000}
.mod {FONT-WEIGHT: bold; FONT-SIZE: 13px; COLOR: #007a3d}
A.admin, A.admin:visited {COLOR: #DD0000}
A.mod, A.mod:visited {COLOR: #007a3d}
A.admin:hover, A.mod:hover {COLOR: #c98f00}
IMG {BORDER: 0}
.copyright {FONT-SIZE: 12px; COLOR: #5a6f8a; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; LETTER-SPACING: 0}
A.copyright {COLOR: #0057B7; TEXT-DECORATION: none}
A.copyright:hover {COLOR: #c98f00; TEXT-DECORATION: underline}


/* WR-Forum Professional 2.2 styles */

/* 1) Modified styles: page buttons */
.pgbutt a {font-family: Verdana; text-decoration: none; border: 1px #0057B7 solid; background: #ffffff; color: #0057B7; padding: 2px 6px; margin: 5px 2px 0 0;
 -moz-border-radius: 4px; -khtml-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}
.pgbutt a:hover {background: #FFD700; color: #0b2a4a; border-color: #0b2a4a;}

input.button,input.liteoption,.fakebut {border: 1px solid #0b2a4a; background: linear-gradient(to bottom,#ffffff,#dbe8fa); color: #0b2a4a; font-size: 13px; font-weight: bold; border-radius: 4px; cursor: pointer;}
input.button:hover,input.liteoption:hover,.fakebut:hover {background: #FFD700;}

/* 2) QR-CODE */
#qr img{width:35px;height:35px;position: fixed;right: 10px;top: 10px;border: 2px solid #FFD700;padding: 1px;background-color: white;border-radius: 4px;}
#qr img:hover{width:200px;height:200px;z-index:100;padding: 2px;}

/* 3) Guest avatar (first letter of login) */
.guestavatar{width:120px;height:120px;text-align:center;background: linear-gradient(135deg,#0057B7 50%,#FFD700 50%);color: #ffffff;font-size: 50px;text-shadow: 0 2px 4px rgba(0,0,0,.5);
display: table-cell;border-radius: 20%;position: relative;vertical-align: middle;}

/* 4) Admin navigation menu */
#nav8, #nav8 ul, #nav8 li {margin: 0;padding: 0;border: 0;}
#nav8, #nav8 ul {background: #0b2a4a;}
#nav8 {border-spacing: 0 0;position: relative;z-index: 50;width: 100%;}
#nav8 ul {position: absolute;display: none;border-top: 2px solid #FFD700;}
#nav8 td:hover ul {display: block;}
#nav8 ul li {list-style: none;}
#nav8 .right {direction: rtl;}
#nav8 .right ul {right: 0;}
#nav8 .right li {direction: ltr;}
#nav8 a {display: block;padding: 8px 0;text-align: center;text-decoration: none;color: #ffffff;}
#nav8 ul a {padding: 8px 15px;text-align: left;}
#nav8 td:hover, #nav8 li:hover {background: #0057B7;}
#nav8 td:hover > a, #nav8 li:hover > a {color: #FFD700;}
#nav8 td {text-align: center;}

/* 5) Loading bar */
#cssbar-wrapper {width:300px; height:19px; position:absolute; left:50%;}
#cssbar-border {border:3px solid #0057B7; height:100%; width:100%; position:relative; left:-50%; top:-50%; padding:4px 3px; border-radius: 4px; background:#ffffff;}
#cssbar-whitespace {overflow:hidden; height:100%; width:100%; margin:0 auto; position:relative;}
#cssbar-line {background-color:#FFD700; position:absolute; height:100%; width:100%; animation:cssbar-slide 4s steps(40) infinite;
 -o-animation:cssbar-slide 4s steps(40) infinite; -ms-animation:cssbar-slide 4s steps(40) infinite;
 -webkit-animation:cssbar-slide 4s steps(40) infinite; -moz-animation:cssbar-slide 4s steps(40) infinite;}
@keyframes cssbar-slide {0% {left:-100%;} 100% {left:100%;}} @-o-keyframes cssbar-slide {0% {left:-100%;} 100% {left:100%;}}
@-ms-keyframes cssbar-slide {0% {left:-100%;} 100% {left:100%;}} @-webkit-keyframes cssbar-slide {0% {left:-100%;} 100% {left:100%;}}
@-moz-keyframes cssbar-slide {0% {left:-100%;} 100% {left:100%;}}