/* KP Wood - Main Stylesheet
   Converted from legacy xstyle.css, modernized for Hugo.
   Removed: IE hacks, jQuery slider styles, Google Analytics.
   Added: CSS custom properties, CSS-only slider, dropdown hover. */

:root {
  --color-red: #A60303;
  --color-dark: #494848;
  --color-text: #262626;
  --color-text-light: #3D3D3D;
  --color-text-muted: #999999;
  --color-gray: #444;
  --color-border: #e6e6e6;
  --color-bg: #bab9b9;
  --color-white: #fff;
  --color-nav-bg: #494848;
  --color-nav-hover: #000;
  --color-nav-border: #868686;
  --wrapper-width: 994px;
  --nav-width: 900px;
  --content-width: 906px;
}

/* === Reset === */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,
var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,
tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,
header,hgroup,menu,nav,section,summary,time,mark,audio,video {
  margin: 0; padding: 0; border: 0; outline: 0;
  font-size: 100%; vertical-align: baseline; background: transparent;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,img {
  display: block;
}

select,input,textarea,button { font: 99% sans-serif; }
pre,code,kbd,samp { font-family: monospace, sans-serif; }
html,body { height: 100%; }
html { overflow-y: scroll; }
body { line-height: 1; }
small { font-size: 85%; }
strong,th { font-weight: bold; }
blockquote,q { quotes: none; }
blockquote:before,blockquote:after,q:before,q:after { content: ''; }
del { text-decoration: line-through; }
button,input,select,textarea { margin: 0; }
:focus { outline: 0; }
label,input[type=button],input[type=submit],button { cursor: pointer; }
ul,li,a,ins { text-decoration: none; }
ul { list-style: none; }
ol { list-style-type: decimal; }
table { border-collapse: collapse; border-spacing: 0; }
textarea { overflow: auto; }
td,td img { vertical-align: top; }
::selection { background: #c3effd; color: #000; }
input,select { vertical-align: middle; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

.clearfix:after, .clearfix2:after {
  clear: both; content: "."; display: block;
  height: 0; line-height: 0; visibility: hidden;
}

a:link { -webkit-tap-highlight-color: #FF5E99; }
button { width: auto; overflow: visible; }

.ir {
  display: block; text-indent: -999em; overflow: hidden;
  background-repeat: no-repeat; text-align: left; direction: ltr;
}

table { border-collapse: collapse; width: 100%; margin-top: 15px; }
table,th,td { border: none; }
.left { float: left; }
.right { float: right; }

/* === Typography === */
h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; }

h1 {
  line-height: 1; padding: 0; width: 280px; text-align: right;
  margin-left: 29px; color: var(--color-red); letter-spacing: 2px;
  height: 15px; font-size: 12px; text-transform: uppercase;
  font-weight: bold; border-bottom: 1px solid var(--color-border);
}

h2 {
  color: var(--color-red); font-style: normal;
  font-weight: bold; font-size: 11px;
}

h3 {
  color: black; font-family: Arial; font-size: 12px;
  font-weight: bold; line-height: 15px; text-decoration: none;
  clear: left; margin-bottom: 20px; padding-top: 20px;
  border-bottom: 1px solid var(--color-border);
}

h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }

h5 {
  color: var(--color-red); font-weight: bold; font-size: 11px;
  margin-bottom: 1.25em; margin-top: 40px;
}

h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child {
  margin-top: 0;
}

blockquote {
  background: #f9f9f9; border-left: 10px solid #ccc;
  margin: 1.5em 10px; padding: 0.5em 10px;
}
blockquote p { display: inline; }

.heading_info {
  color: black; text-align: right; margin-top: 10px; width: 310px;
  font-family: Arial; font-size: 12px; font-weight: bold;
  letter-spacing: 2px; text-decoration: none;
}

/* === Body & Layout === */
body,select,input,textarea { color: var(--color-gray); font-family: Georgia, serif; }

body {
  font: 12px/1.4 Arial, Verdana, sans-serif;
  color: var(--color-text); background: var(--color-bg);
}

#langbar { position: relative; width: 90px; float: right; padding: 25px; }

.table { display: table; margin: 0 auto; position: relative; top: -20px; }

#rightcol ul, #content ul { margin: 0 1.5em 1.5em 1.5em; }

/* === Sub-navigation (small menu) === */
.small_menu li { float: left; display: block; }
.small_menu li a {
  font-size: 9px; font-weight: bold;
  text-decoration: none; color: #666;
}
ul.small_menu { margin: 0 auto; }
ul.small_menu li {
  background-image: url(/assets/images/small_menu.gif);
  background-repeat: no-repeat; background-position: 6px 7px;
  padding-left: 14px;
}
ul.small_menu li:first-child { background-image: none; }
.small_menu a:hover, .small_menu a.current { color: var(--color-red); }

/* === Content typography === */
.b_cont, p, .box2 {
  color: var(--color-text-light); font-size: 11px;
  font-weight: bold; line-height: 15px;
}
p { clear: both; }
em { color: var(--color-red); font-style: normal; }

.bigA {
  color: var(--color-dark); font-family: Arial; font-size: 26px;
  letter-spacing: 2px; font-weight: normal; line-height: normal;
  text-align: center; padding: 44px 120px;
}

.bigD {
  color: var(--color-dark); font-family: Arial; font-size: 14px;
  letter-spacing: 1px; font-weight: normal; line-height: normal;
  text-align: center; padding: 32px 120px 16px 120px;
}

.bigB {
  color: var(--color-red); font-family: Arial; font-size: 16px;
  font-weight: bold; letter-spacing: 2px; text-decoration: none;
}

.bigC {
  font-family: Arial; font-size: 12px; text-decoration: none;
  color: var(--color-red); font-weight: bold; letter-spacing: 2px;
}

.big_red { color: var(--color-red); font-weight: bold; font-size: 18px; line-height: 20px; }
.big_red span { color: var(--color-text-light); }

.top15 { padding-top: 15px; }

#footer .bigB { float: right; font-size: 14px; }

.center { width: 100%; text-align: center; }

.img_map {
  background: url("/assets/images/map.jpg") no-repeat;
  width: 100%; height: 130px; position: relative; margin: 0 auto;
}

.about_us { padding: 0 30px; }

/* === Box layouts === */
.box { position: relative; margin: 40px auto; text-align: left; width: 840px; }
.box_new { margin-left: 25px; }
.box_in { margin: 20px; }

.box2, .box4 { float: left; padding-left: 12px; }
.box2 { width: 350px; margin-bottom: 15px; margin-top: 15px; margin-right: 30px; }
.box2c { width: 360px; margin: 10px 40px 15px 0; padding: 0; float: left; }
.box2_in {
  margin: 15px 0; padding-left: 12px;
  background: url(/assets/images/arrow.gif) no-repeat;
}
.box3 { width: 283px; float: left; margin: 20px 0 5px 42.5px; height: 150px; }
.box4 { width: 130px; font-weight: bold; margin-bottom: 20px; margin-right: 10px; }
.box2_in ul ul { padding-left: 15px; }

/* === People box === */
.ppl-box {
  height: 260px; margin: 44px auto 34px auto; width: 796px;
  border: 1px solid black; position: relative;
}
.ppl-box #in {
  position: absolute; left: 425px; height: 200px;
  margin-top: -100px; top: 50%; width: 347px;
}
.ppl-box img { float: left; height: 260px; vertical-align: middle; }

/* === Downloads === */
.download_1 { text-align: center; padding: 20px 285px; }
.download_2 { text-align: center; padding: 20px 175px; }
.download_2 img, .download_1 img { padding: 10px 0; }

/* === News/Events === */
#news_events {
  color: var(--color-red); font-weight: bold; margin: 60px;
  width: 720px; margin-left: 135px;
}
#news_events p {
  padding: 10px 0; line-height: 15px; font-family: Tahoma, Arial;
  color: var(--color-text-light); font-size: 12px; font-weight: bold;
}

/* === Utility classes === */
.last { margin-bottom: 2px !important; }
.lastR { margin-right: 0; }
.first { padding-top: 0 !important; }
.customers { margin-left: 25px; padding: 20px 0; }
.arrow { background: url(/assets/images/arrow.gif) no-repeat; margin-left: 20px; }
.noarrow { background-image: none !important; }
.sample { float: right; width: 100%; text-align: right; }
.sample a {
  color: var(--color-red); font-family: Arial; font-size: 9px;
  text-decoration: none; text-transform: uppercase;
}

/* === Links === */
a { color: var(--color-red); text-decoration: none; }
a:hover, a:active { outline: none; color: var(--color-text-light); }
a, a:active, a:visited { color: var(--color-red); }
a:hover { color: var(--color-red); }

/* === Content box with rounded corners === */
.b_cont {
  position: relative; margin: 0 auto;
  padding: 15px 25px 20px 25px;
}
.b_cont p { display: block; margin-top: 15px; }

.tlc { background: url(/assets/images/tlc.gif) 0% 0%; }
.trc { background: url(/assets/images/trc.gif) 100% 0%; }
.blc { background: url(/assets/images/blc.gif) 0% 100%; }
.brc { background: url(/assets/images/brc.gif) 100% 100%; }
.tlc,.trc,.blc,.brc { background-repeat: no-repeat; }
.tb { background: url(/assets/images/tb.gif) 0% 0%; }
.bb { background: url(/assets/images/bb.gif) 50% 100%; }
.rb { background: url(/assets/images/r.gif) 100% 0% repeat-y; }
.lb { background: url(/assets/images/l.gif) 0% 100% repeat-y; }
.tb,.bb { background-repeat: repeat-x; }

/* === Wrapper === */
#wrapper {
  width: var(--wrapper-width); margin: 0 auto;
  background-color: var(--color-white);
}

/* === Header === */
#header img { margin: 0 1px; }
#header .img-small { margin-bottom: 73px; display: block; width: 992px; }

/* === Columns === */
#rightcol { float: right; width: 660px; }
#leftcol { float: left; width: 270px; text-align: right; }
#content { width: var(--content-width); padding: 0 44px 2px 44px; }

/* === Navigation === */
#nav {
  width: var(--nav-width); background-color: var(--color-nav-bg);
  height: 20px; margin: 0 auto; padding-left: 94px;
  border-bottom: 1px solid var(--color-white);
  z-index: 9999; position: relative;
}
#nav li { list-style: none; float: left; width: 150px; }
#nav li a {
  display: block; padding: 2px 8px 0px; color: var(--color-white);
  text-align: center; line-height: 18px;
}
#nav li a:hover { background-color: var(--color-nav-hover); color: var(--color-white); }
#nav li ul a { text-align: left; }
#nav li ul {
  display: none; width: 150px;
  background-color: var(--color-nav-bg);
}
#nav li:hover > ul {
  display: block; position: absolute;
  margin: 0; padding-top: 0px;
}
#nav li:hover > li, #nav li li {
  float: none;
  border-left: 1px solid var(--color-white);
  border-right: 1px solid var(--color-white);
  border-top: 1px solid var(--color-nav-border);
}
#nav li:hover li a {
  background-color: var(--color-nav-bg);
  border-bottom: 1px solid var(--color-white);
  color: var(--color-white);
}
#nav li li a:hover { background-color: var(--color-nav-hover); }
#nav a { font-size: 10px; text-transform: uppercase; }

/* === Boxes layout === */
#boxes { width: var(--wrapper-width); }
#first { margin-left: 30px; }

/* === Footer === */
#footer {
  width: var(--content-width); height: 50px; clear: both;
  color: var(--color-text-muted); font-size: 9px;
  margin: 0 17px; border-top: 1px solid var(--color-border);
  padding: 0 27px;
}

/* === CSS-only Slider === */
.slider {
  position: relative; width: 992px; height: 300px;
  overflow: hidden; border-left: 1px solid white;
}
.slider img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  animation: slider-fade 20s infinite;
}
.slider img:nth-child(1) { animation-delay: 0s; }
.slider img:nth-child(2) { animation-delay: 4s; }
.slider img:nth-child(3) { animation-delay: 8s; }
.slider img:nth-child(4) { animation-delay: 12s; }
.slider img:nth-child(5) { animation-delay: 16s; }

@keyframes slider-fade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  20%  { opacity: 1; }
  25%  { opacity: 0; }
  100% { opacity: 0; }
}

/* === Print styles === */
@media print {
  * { background: transparent !important; color: var(--color-gray) !important; text-shadow: none !important; }
  a, a:visited { color: var(--color-gray) !important; text-decoration: underline; }
  a:after { content: " (" attr(href) ")"; }
  abbr:after { content: " (" attr(title) ")"; }
  .ir a:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}
