/* Reset Styles */
* { padding: 0; margin: 0; }

hr { margin: 8px auto 8px auto !important;  }
.container { max-width: 970px }
button { padding: 2px 6px 3px; }
ul {
padding-left:0em; margin-left:1em;
}
.shorthr { width: 200px; height: 1px }
.imgborder
{
    box-sizing: content-box;
    padding: 10px;
    border-width:0;
}
img.logo { max-width: 90%; }
.left { float:left }
@media only screen and (min-width : 481px) {
    .mobileonly { display:none }
}
@media only screen and (max-width : 480px) {
    img.prodlogo { max-width: 90px; }
    .youtube-player { width: 310px; }
    .nomobile { display:none }
}
.top { vertical-align:45%}
.prodtext { }

canvas
{
touch-action:none;
}
table.grey th {
    text-align:center;
}
table.grey td, table.grey th {
    padding: 5px 10px 5px 10px;
    border-top:1px solid #CCCCCC;
    border-right:1px solid #CCCCCC;
}
table.grey {
    background:#FFFFFF none repeat scroll 0 0;
    border:1px solid #CCCCCC;
    border-collapse:collapse;
}
@media (max-width: 550px) {
    table.grey td, table.grey th {
        min-width: 100px;
        word-break: break-all;
    }
}
input { padding: 1px 6px; }
mark { background-color: #eeeeff; }
hr { margin-top: 0.5em; margin-bottom: 0.5em; }
img { border: none; }
blockquote {
display: block;
margin-left: 40px;
margin-right: 40px;
}
/* Fix for buggy add-this flash element which sometimes pushes the page content down */
#atff {display:none;}
/* ----------------------------------------------------------- */
/* Clearfix */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .clearfix {height: 1%;}
/* ----------------------------------------------------------- */
/* General */
body {
font: 16px "Helvetica Neue", Arial, Helvetica, sans-serif; color: #222;
}
#wrapper {
width: 803px;
margin: 0 auto;
padding-bottom: 5px;
}
.clear {
clear: both;
}

/* ----------------------------------------------------------- */
/* Headings */

/* ----------------------------------------------------------- */
/* Links */
a, a:visited, a:hover {
text-decoration: none;
}
a.but
{
color:white;
}
/* ----------------------------------------------------------- */
/* Header */
#header {
height: 90px;
margin: 0px 0px 0px 0px;
float: left;
width: 723px;
}
h1:not(.normal) { text-align:center }
#header h1#logo {
width: 173px;
height: 85px;
float: left;
margin-bottom: 0px;
}
#header h1#logo a {
background: url(images/logo.jpg) no-repeat;
display: block;
text-indent: -9999px;
width: 522px;
height: 85px;
}
#header h1#logo a:hover {
background: url(images/logo.jpg) 0 -87px no-repeat;
display: block;
text-indent: -9999px;
width: 522px;
height: 85px;
}
#header #searchbox {
float: right;
border: 1px solid red;
margin-top: 10px;
font-style: italic;
}
/* ----------------------------------------------------------- */
/* Main Nav */
#mainnav {
height: 31px;
font: 14px "Helvetica Neue", Verdana, Arial, Helvetica, sans-serif;
float: left;
}
#mainnav ul li {
display: inline;
float: left;
list-style: none;
height: 31px;
text-align: center;
line-height: 31px;
margin-right: 2px;
}
.center { text-align:center; margin-left: auto; margin-right:auto }
#mainnav ul li a {
color: #0000ff;
text-decoration: none;
}
#mainnav ul li a:hover {
color: #fff;
}
/* Home */
#mainnav ul li#spacer {
width: 50px;
}
#mainnav ul li#smallspacer {
width: 18px;
}
#mainnav ul li#products {
width: 102px;
}
#mainnav ul li#products a {
background: url(images/products.jpg) no-repeat;
display: block;
height: 31px;
}
#mainnav ul li#products a:hover {
width: 102px;
background: url(images/products.jpg) 0 -31px no-repeat;
}
#mainnav ul li#productsactive a {
background: url(images/products.jpg) 0 -31px no-repeat;
display: block;
width: 102px;
color: #fff;
}
/* ----------------------------------------------------------- */
/* CSS Layouts */
#mainnav ul li#demo {
width: 65px;
}
#mainnav ul li#demo a {
background: url(images/demo.jpg) no-repeat;
display: block;
height: 31px;
}
#mainnav ul li#demo a:hover {
background: url(images/demo.jpg) 0 -31px no-repeat;
}
#mainnav ul li#demoactive a {
background: url(images/demo.jpg) 0 -31px no-repeat;
display: block;
width: 65px;
color: #fff;
}
/* ----------------------------------------------------------- */
/* Web Templates */
#mainnav ul li#support {
width: 102px;
}
#mainnav ul li#support a {
background: url(images/support.jpg) no-repeat;
display: block;
height: 31px;
}
#mainnav ul li#support a:hover {
background: url(images/support.jpg) 0 -31px no-repeat;
}
#mainnav ul li#supportactive a {
background: url(images/support.jpg) 0 -31px no-repeat;
display: block;
width: 102px;
color: #fff;
}
/* Code Snippets */
#mainnav ul li#contact {
width: 102px;
}
#mainnav ul li#contact a {
background: url(images/contact.jpg) no-repeat;
display: block;
height: 31px;
}
#mainnav ul li#contact a:hover {
background: url(images/contact.jpg) 0 -31px no-repeat;
}
#mainnav ul li#contactactive a {
background: url(images/contact.jpg) 0 -31px no-repeat;
display: block;
width: 102px;
color: #fff;
}
/* ----------------------------------------------------------- */
#submenu {
height: 21px;
padding: 0px 0px 0px 0px;
float: left;
}
#mainbody
{
width: 800px; margin: 1.5em auto 3em auto; z-index:-1
}
#mainbody2
{
margin: 1.5em auto 3em auto; z-index:-1
}
.butdiv
{
box-sizing: content-box;
width: 300px;
height: 45px;
font-size: 16px;
background: #f8f8f8;
border-radius: 10px;
border: 1px solid #bbbbbb;
padding: 10px;
}
.butdiv:hover
{
background: #fcfcfc;
}
.banner {padding: 1.0em; background: #f8f8f8 bottom right no-repeat; border: 1px solid #bbbbbb; margin-bottom: 1em; position: relative; border-radius: 0.75em; }
p.big, a.big, h1:not(.normal)
{ 
margin-bottom: 10px;
font-size: 28px !important;
text-decoration: none;
font-family: "Helvetica Neue", verdana,arial,helvetica,sans-serif;
font-weight: bold;
color: #135cae !important;
}
p.title, a.title, h2 
{ 
font-size: 20px;
font-family: "Helvetica Neue", sans-serif;
font-weight: bold;
color: #000000;
padding-top: 0.3em;
padding-bottom: 0.3em;
}
.medium, .jumbotron p.medium
{
font-family: "Helvetica Neue", "Arial", "Helvetica", sans-serif;
font-weight: normal;
font-size: 17px !important;
line-height: 1.3;
text-decoration: none;
padding-top: 0.3em;
padding-bottom: 0.3em;
}
.large
{
font-family: "Helvetica Neue", "Arial", "Helvetica", sans-serif;
font-weight: normal;
font-size: 17px;
text-decoration: none;
padding-top: 0.3em;
padding-bottom: 0.3em;
}
p.smalltitle, a.smalltitle, h3 
{ 
font-size: 17px;
font-family: "Helvetica Neue", "Arial", "Helvetica", sans-serif;
padding-top: 0.3em;
padding-bottom: 0.3em;
}
p, ul, li, .jumbotron p
{
font-family: "Helvetica Neue", "Arial", "Helvetica", sans-serif;
font-weight: normal;
font-size: 16px;
line-height: 1.3;
padding-top: 0.3em;
padding-bottom: 0.3em;
margin-bottom: auto;
}
p.small
{ 
font-family: "Helvetica Neue", "Arial", "Helvetica", sans-serif;
font-weight: normal;
font-size: 12px;
}
p.red
{
color: #ff0000;
}
.prodtitle { margin-top: 0px;padding-top:0px;font-size:18px }
p.notspaced, ul, li, body
{ 
padding: 0;
}
p.justify
{
text-align: justify;
}
.notspaced
{
padding: 0;
}
#simplebody
{
margin: 1em;
}
.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('/images/info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('/images/success.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('/images/warning.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('/images/error.png');
}
.tooltip {
display: inline;
position: relative;
overflow: visible;
}
.tooltip:after {
background: #111;
background: rgba(0,0,0,.8);
border-radius: .5em;
bottom: 1.35em;
color: #fff;
content: attr(title);
display: block;
left: 1em;
padding: .3em 1em;
position: absolute;
text-shadow: 0 1px 0 #000;
white-space: nowrap;
z-index: 98;
}
.tooltip:before {
border: solid;
border-color: #111 transparent;
border-color: rgba(0,0,0,.7) transparent;
border-width: .4em .4em 0 .4em;
bottom: 1em;
content: "";
display: block;
left: 2em;
position: absolute;
z-index: 99;
}
.but{
box-sizing: content-box;
width: 63px;
text-align: center;
white-space:nowrap;
border:1px solid #7d99ca; -webkit-border-radius: 8px; -moz-border-radius: 8px;border-radius: 8px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
background-color: #a5b8da; background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b8da), to(#7089b3));
background-image: -webkit-linear-gradient(top, #a5b8da, #7089b3);
background-image: -moz-linear-gradient(top, #a5b8da, #7089b3);
background-image: -ms-linear-gradient(top, #a5b8da, #7089b3);
background-image: -o-linear-gradient(top, #a5b8da, #7089b3);
background-image: linear-gradient(to bottom, #a5b8da, #7089b3);
}
.but:hover{
border:1px solid #5d7fbc;
background-color: #819bcb; background-image: -webkit-gradient(linear, left top, left bottom, from(#819bcb), to(#536f9d));
background-image: -webkit-linear-gradient(top, #819bcb, #536f9d);
background-image: -moz-linear-gradient(top, #819bcb, #536f9d);
background-image: -ms-linear-gradient(top, #819bcb, #536f9d);
background-image: -o-linear-gradient(top, #819bcb, #536f9d);
background-image: linear-gradient(to bottom, #819bcb, #536f9d);
}
canvas {
touch-action: none;
}
@media (max-width: 767px)
{
    .navbar-default .navbar-nav .open .dropdown-menu>li>a 
    {
            color: white;
    }
}
@media (min-width: 768px) and (max-width: 992px)
{
    nav > .container 
    {
            width: auto;
    }
}
.lessvpad { padding-top: 8px !important; padding-bottom: 4px !important}
.lesshpad { padding-left:4px !important; padding-right:4px !important }
.norightpad { padding-right:0px !important }
.noleftpad { padding-left:0px !important }
body { background-color:#f0f0f0}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { background-color: white}
.jumbotron { background-color:white}
/*nav { background-color: #1e5799 !important}*/
/*nav { background-color: #337ab7 !important}*/
nav { background-color: #3b8dd4 !important}
.navbar-default .navbar-toggle { background-color:white}
.navbar-nav > .dropdown, .navbar-nav > li  { font-size:18px !important}
.navbar-default .navbar-nav>li>a { color: white; }
.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover{color:#eee;background-color:transparent}

.comparison {
  max-width:940px;
  margin:0 auto;
  font:14px/1.4 "Helvetica Neue",Helvetica,Arial,sans-serif;
  text-align:center;
  padding:10px 0px;
}

.comparison table {
  width:100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  border-bottom:1px solid #CCC;
}

.comparison td, .comparison th {
  border-right:1px solid #CCC;
  empty-cells: show;
  padding:10px;
}

.compare-heading {
  font-size:18px;
  font-weight:bold !important;
  border-bottom:0 !important;
  padding-top:10px !important;
}

.comparison tbody tr:nth-child(odd) {
  display:none;
}

.comparison .compare-row {
  background:#F5F5F5;
}
.tickblue, .tickgreen {
    font-size: 16px;
}
@-moz-document url-prefix() {
    .tickblue, .tickgreen {
        font-size: 24px;
    }
}

.tickblue {
  color:#0078C1;
}

.tickgreen {
  color:#009E2C;
}

.comparison th { text-align: center }

.comparison th {
  font-weight:normal;
  padding:0;
  border-bottom:1px solid #CCC;
}

.comparison tr td:first-child {
  text-align:left;
  border-left:1px solid #CCC;
}
  
.comparison .qbse, .comparison .qbo, .comparison .tl {
  color:#FFF;
  padding:10px;
  font-size:15px;
  border-right:1px solid #CCC;
  border-bottom:0;
}

.comparison .tl2 {
  border-right:0;
}

.comparison .qbse {
  background:#0078C1;
  border-top-left-radius: 3px;
  border-left:0px;
}

.comparison .qbo {
  background:#009E2C;
  border-top-right-radius: 3px;
  border-right:0px;
}

.comparison .price-info {
  padding:5px 15px 15px 15px;
}

.comparison .price-was {
  color:#999;
  text-decoration: line-through;
}

.comparison .subtitle {
  color:#999;
}

.comparison .price-now, .comparison .price-now span {
  color:#ff5406;
}

.comparison .price-now span {
  font-size:32px;
}

.comparison .price-small {
    font-size: 18px !important;
    position: relative;
    top: -11px;
    left: 2px;
}

.comparison .price-buy {
  background:#ff5406;
  padding:10px 20px;
  font-size:12px;
  display:inline-block;
  color:#FFF;
  text-decoration:none;
  border-radius:3px;
  text-transform:uppercase;
  margin:5px 0 10px 0;
}

.comparison .price-try {
  font-size:12px;
}

.comparison .price-try a {
  color:#202020;
}

@media (max-width: 767px) {
  .comparison td:first-child, .comparison th:first-child {
    display: none;
  }
  .comparison tbody tr:nth-child(odd) {
    display:table-row;
    background:#F7F7F7;
  }
  .comparison .row {
    background:#FFF;
  }
  .comparison td, .comparison th {
    border:1px solid #CCC;
  }
  .price-info {
    border-top:0 !important;
  }
}

@media (max-width: 639px) {
  .comparison .price-buy {
    padding:5px 10px;
  }
  .comparison td, .comparison th {
    padding:10px 5px;
  }
  .comparison .hide-mobile {
    display:none;
  }
  .comparison .price-now span {
  font-size:16px;
  }

  .comparison .price-small {
      font-size: 16px !important;
      top: 0;
      left: 0;
  }
  .comparison .qbse, .comparison .qbo {
      font-size:12px;
      padding:10px 5px;
  }
  .comparison .price-buy {
      margin-top:10px;
  }
  .compare-heading {
      font-size:13px;
  }
}
/* https://stackoverflow.com/questions/42183672/how-to-implement-a-navbar-dropdown-hover-in-bootstrap-v4 */
/* expand dropdown on hover */
.dropdown:hover>.dropdown-menu {
  display: block;
}
.btn { font-size: 16px }