@import url('color.css');

body {margin:0; cursor:default; background:white; overflow-y:scroll;}
.clr {clear:both;}
body, td, th {font-family:Verdana, Arial, sans-serif; font-size:75%;}
table {border-spacing:0; border-collapse:collapse;}
table, td {border:0; margin:0; padding:0; border-spacing:0;}
td {vertical-align:top;}
div {max-width:100%;}
img, iframe, .svg {max-width:100%; box-sizing:border-box;}
table {box-sizing:border-box;}
input, textarea, select {max-width:80vw; margin-right:2em;}
textarea, select, input[type="text"] {border:1px solid grey;}
nav, main, footer, header {display:block;}

table.table {margin-bottom:0.66em; border-collapse:separate; border-radius:3px;}
table.table td {text-align:right;}
table.table th {text-align:left;}

table#page .col1 {width:19%;}
table#page th.col1, table#page th.col2 {height:0;}
table#page {table-layout:fixed;}
table#page td {margin-bottom:0;}
td#head {height:10px; max-height:60px;}
td#head .logo {float:left; display:table-cell; height:auto;}
td#head .logo img {margin-top:10px; margin-left:1em; max-width:66vw;}
td#menu {padding-right:0.5em; overflow:hidden;}
td#menu #scroll {position:relative; top:0; left:0;}
td#menuhead {vertical-align:middle; text-align:right; padding-right:0.25ex;}
td#info {padding-bottom:1px; height:1em;}
td#info #location {float:left; cursor:hand; width:75%; overflow:visible;}
td#info #location a {text-decoration:none; color:gray; display:block;}
td#info #location a:hover {text-decoration:underline;}
td#info #time {float:right; font-size:90%; color:white; padding-right:30px; text-align:right;}
td#copyright {visibility:hidden; text-align:center; height:1em;}
td#copyright div {margin-bottom:1px; font-size:90%; text-align:center;}
td#copyright span {white-space:nowrap;}
td#copyright .stat {float:left; position:relative; bottom:1.6em; padding-left:0.3em; width:1px; overflow:visible;}
td#copyright .stat {color:#ffeeff; margin-left:0; margin-right:0.5em; font-size:90%; white-space:nowrap;}
div#content {position:relative; height:100%; padding-left:18px; box-sizing:border-box; overflow: hidden;}

#menu .group {break-inside:avoid;}
#menu img {margin:0;}
#menu p {margin:0; margin-bottom:0.15ex; white-space:nowrap;}
#menu p.i, #menu p.f, #menu p.h {margin-left:0.5em;}
#menu p.s {margin-top:0.75ex;}
#menu p.l, #menu p.m {margin-left:1em;}
#menu p.this {font-weight:bold;}
#menu p.x {font-style:italic;}
#menu p.x, #menu p.x a:link, #menu p.x a:visited {color:red;}

h1 {font-size:1.25em; margin-bottom:0.5em; margin-top:1em;}
h2 {font-size:1em; margin-bottom:0.66em; margin-top:1em;}
h3 {font-size:1em; margin-bottom:0.33em; margin-top:1em; text-decoration:underline; font-weight:normal;}
p, td, ul {margin:0px 0.2em 0.66em 0; line-height:125%;}
sup, span.sup {vertical-align: baseline; position:relative; font-size:85%; top:-0.9ex;}
sub, span.sub {vertical-align: baseline; font-size:85%;}

a {text-decoration:underline;}
a.menu img {margin:0;}
a.menu, .sideblock a, #menu a, .submenu a {text-decoration:none;}
a:link {color:#0000A0;}
a:visited {color:#800080;}
a:hover, #menu a:hover, .submenu a:hover {text-decoration:underline;}
a.own {padding-right:14px; background:url('/images/icons/link-own.png') no-repeat right center; display:inline;}
a.ext {padding-right:14px; background:url('/images/icons/link-leave.png') no-repeat right 67%; display:inline !important; width:auto !important;}
a.top {padding-right:14px; background:url('/images/icons/link-int.png') no-repeat right 67%; display:inline !important; width:auto !important;}

table {border-spacing:0; border-collapse:collapse;}
table, td {border:0; margin:0; padding:0; border-spacing:0;}
td {vertical-align:top;}
td#menu_time {vertical-align:bottom;}
div#menu {visibility:visible;}

table.menu {margin-bottom:1.5em;}
div.menu {overflow:hidden;}
div.menu, td.menu, td.menubutton {white-space:nowrap;}
td.disabled {background-color:lightgrey;}
hr {height:2px; border:none;}

.menubutton {padding-bottom:1.25em; margin-bottom:1.25em; white-space:nowrap;}
.menubutton a {vertical-align:middle; width:100%; display:inline-block;}
input.menubutton {width:10em; max-width:30vw;}
div.pagemenu {margin-bottom:1.25em;}

.sitelist, td.menubutton, div.menubutton, input.menubutton {padding:3px; text-align:center; vertical-align:middle; border-width:1px; border-style:solid; border-radius:4px; margin:1em; display:inline-block;}
td.sitelist, td.menubutton, div.menubutton {width:14em; max-width:40vw;}
.sitelist a:hover, .menubutton a:hover {text-decoration:none; font-weight:bold;}
.whitebreamcom {background-color:#CC99FF; border:1px solid #AA77DD;}
.whitebreamcom:hover {background-color:#AA77DD; border:1px solid #9966CC;}
.whitebreamcom a {color:#550055 !important;}
.whitebreamnl {background-color:#FFDD77; border:1px solid #DDBB55;}
.whitebreamnl:hover {background-color:#DDBB55; border:1px solid #CCAA44;}
.whitebreamnl a {color:#444400 !important;}
.carpcnl {background-color:#66CCFF; border:1px solid #44AADD;}
.carpcnl:hover {background-color:#44AADD; border:1px solid #3399CC;}
.carpcnl a {color:#000088 !important;}

img, .svg {border-style:none;}
p img, p .svg, p iframe {margin:1em;}
img.flag {margin:0 0.25em !important; display: inline !important;}
.download img, .menu img {margin:0 0.25em;}
div#descr {margin:0 1em; min-height:2em;}

ul {padding:0; margin:0 2em 0.66em 0; list-style-type:none;}
ul > ul {padding:0; margin:0; margin-left:1em; margin-right:2em; list-style-type:none;}
ul > li {margin-bottom:0.2ex; position:relative; padding-left:1em;}
ul > li:before {content:"\2022"; position:absolute; left:0;}

table.project {width:auto; min-width:70%;}
table.project td {padding-bottom:1em;}
table.project td.b {width:18em; max-width:30vw; font-weight:bold; display:inline-block;}

div.social {float:right; margin-right:43px; margin-top:13px; margin-bottom:6px; position:relative;}

table.pricing {table-layout:fixed; border-collapse:separate !important; margin-bottom:1em; max-width:800px; border-radius:3px;}
table.pricing, table.pricing td, table.pricing th {border-width:1px; border-style:solid;}
table.pricing th {text-align:left;}
table.pricing td, table.pricing th {padding:3px;}
table.pricing td {padding-top:5px; padding-bottom:5px; background-color:rgba(255,255,255,0.5);}
table.pricing td.paypal {padding-top:0; padding-bottom:0;}
table.pricing input {margin:0;}
table.pricing .col_sku {width:110px;}
table.pricing .col_desc {width:350px;}
table.pricing .col_stat, table.pricing .col_action {width:100px;}
table.pricing .col_price {width:130px; text-align:right;}

table.download p {margin-bottom:0;}
table.download td {padding:3px; padding-left:0.5em; padding-right:0.5em;}
table.download .icon {width:40px;;}
table.download .icon img{min-width:min-content; margin:0 !important;}
table.download .link {width:460px;}
table.download .info {width:100px; white-space:nowrap; padding-right:0}

div.paypal {float:right; padding-top:3px; margin-right:2.5em;}
div.paypal form, td.paypal form, td.paypal a img {margin-top:2px; margin-bottom:0;}

#PPMiniCart form {width:330px !important;}
#PPMiniCart li a {width:210 !important;}
#PPMiniCart li .quantity {right:88px !important;}
#PPMiniCart li .remove {right:70px !important;}
#PPMiniCart p input {padding:0 !important; background-image:url('/images/icons/paypal_checkout.png') !important; cursor:hand;}
#PPMiniCart p input {margin:0 !important; text-decoration:none; border:none !important;}
#PPMiniCart p input {font-size:0; width:87px; height:23px;}
#PPMiniCart p {cursor:hand;}
#PPMiniCart li:before {content:"";}

div.newsitem {margin-bottom:1em; display:inline-block; width:200px; max-width:40vw; text-align:left; zoom:1; *display:inline; vertical-align: middle;}
div.newsitem td {padding:5px; text-align:center; border-radius:2px; margin-top:0.5em;}
div.newsitem span {text-align:left; font-size:75%;}
div.newsitem span {margin:4px; margin-bottom:0px; position:relative; display:inline-block;}
div.newsitem table {width:100%; border-width:2px; border-style:solid; border-collapse:separate; border-radius:3px;}
div.newsitem div {cursor:inherit;}
input.text {background:#FFEEFF; border:none; color:#220044; margin:0;}

form input {cursor:auto;}
form td.first {width:12em; max-width:20vw;}
form .w {width:28em; max-width:70vw;}
input[type="image"] {cursor:hand;}

#search .gsc-input input {font-size:1em; padding-left:0.25em; margin-left:0.5em; margin-right:0; border-radius:3px;}
#search .gsc-input input[type="submit"] {font-size:1em; padding:0; margin:0; background:transparent; border:none;}
#search .gsc-input input[type="text"] {max-width:80%;}

div.project {width:170px; display:inline-block; zoom:1; *display:inline; vertical-align:top; text-align:center; margin:1em; max-width:40vw;}
div.project .img {margin:10px; width:150px; height:100px; display:flex; align-items:center; justify-content:center;}
div.project img {margin:0; max-width:100%; max-height:100%;}
div.project .desc {text-align:center; width:150px; margin:0.5em;}

div.main {float:left; width:75%; margin-right:15px; overflow:visible;}
div.main img, div.main .svg {overflow:visible;}
div.sub {max-width:550px; width:expression(this.parentNode.offsetWidth > 550? "550px":"auto");}
div.sidebar {float:right; width:324px; display:inline-block; position:relative; left:0; padding:1em; text-align:center;} /* Links and adsense */
div.skype_box {position:absolute; top:0; right:0; padding:26px 64px 10px 26px;}
div.footnote {font-size:80%; margin-top:1ex; margin-bottom:1ex;}

.wrap {margin-top:12px; position:relative;}
.submenu {margin-top:0.75em; margin-bottom:1em; clear:both;}
.submenu div {margin-bottom:0; display:inline-block;}
.submenu .n2 {width:12em; max-width:30vw;}
.submenu .n3 {width:11em; max-width:23vw;}
.submenu .n4 {width:10em; max-width:30vw;}
.submenu .n5 {width:9em; max-width:23vw;}
.submenu .n6 {width:8em; max-width:23vw;}
.submenu .n7 {width:7em; max-width:23vw;}

div.clickhide {position:absolute; right:0; bottom:0; font-size:66%; color:gray;}

span.code {padding:0px 4px 0px 4px; border:1px solid gray; display:inline-block;}
span.code {font-family:Lucida, Courier, terminal; font-weight:bold; color:darkblue;}
span[title] {border-bottom:1px dotted #000;}

div.frame {width:100%; text-align:center; clear:both;}
div.frame div {display:inline-block; text-align:left;}

div.sideblock {width:250px; max-width:40vw; display:inline-block; zoom:1; *display:inline; vertical-align:middle; text-align:center; margin:0 auto; margin:1em;}
div.sideblock img {display:inline; margin:0.5em; max-width:40vw;}
div.sideblock a:hover {text-decoration:none;}
div.sideblock a:link, div.sideblock a:visited {color:black;}

td.sel_legacy div table table {border-collapse:separate; table-layout:auto;}
td.sel_legacy font {font-size:100%; line-height:125%;}

div.warning {padding:0.5em; background:yellow; margin:0;}
div.columns {columns:3; column-gap:0;}
div.columns div {padding:0.5em; break-inside:avoid;}
div.columns div div {position:relative; width:100%; border-width:2px; border-style:solid; border-radius:6px; margin-top:0.5em; box-sizing:border-box; white-space:nowrap; padding-bottom:0.25ex;}
legend {position:absolute; top:-1.5ex; font-weight:bold; font-size:1em; background-image:radial-gradient(rgba(255,255,255,1),rgba(255,255,255,0.25));}

div#content_wrapped table {table-layout:fixed;}
div#content_wrapped table div {white-space: normal;}

div.footermobile {padding:1ex 0; column-count:2; margin-top:1ex; width:100%; box-sizing: border-box;}
div.footermobile #addthis {float:initial; margin:0; position:initial;}
td#copyright {visibility:initial;}
table.copyright {margin-left: auto; margin-right: auto;}

noscript {color:red; text-weight:bold; text-align:center;}
noembed {color:red; text-weight:bold; display:block;}

.obsolete:after {content:""; display:block; width:418px; height:332px; max-width:50%; position:fixed; bottom:1%; right:1%; pointer-events:none; background:url(/images/icons/obsolete.png) no-repeat bottom; background-size:contain;}

.construction:after {content:""; display:block; width:150px; height:134px; max-width:30%; position:fixed; bottom:1%; right:1%; pointer-events:none; background:url(/images/icons/construction.png) no-repeat bottom; background-size:contain;}

@media print
{
  th#col1, td#menuhead, td#menu {width:0%; display:none;}
  th#col2 {width:100%;}
  #PPMiniCart {display:none;}
}

@media only screen and (max-width:600px)
{
  div#content {height:auto; padding-left:3px; padding-right:3px;}
  .main div {float:none !important; max-width:100%; margin:auto !important;}
  .main img, .main .svg {float:none; display:table; margin:1ex auto;}
  .main .svg {min-width:100%; max-width:200%; overflow:scroll; width:auto !important;}
  .main img[style*="float:right;"] {float:none !important; display:table; margin:1ex auto !important;}
  .main div.project {margin-bottom:2ex !important;}
  table.download {width:auto;}
  table.download .link {width:auto;}
  table.download .info {width:25%;}
  div.columns {columns:2;}
  div.submenu {text-align:center;}
  // Some legacy crap...
  div.wrap table td[width="20%"] {display:none;}
  div#content_wrapped td[width="550"], div#content_wrapped td[width="550"] table {width:auto !important;}
  div#content_wrapped td[width="20"] {display:none !important;}
  div#content_wrapped td[width="150"] {display:none !important;}
}
