/* Reset Styles */
* { padding: 0; margin: 0; }
hr { margin: 3px auto 3px auto !important; }
.center { text-align:center; margin-left: auto; margin-right:auto }
button { padding: 2px 6px 3px; }
ul {
padding-left:0em; margin-left:1em;
}
.shorthr { width: 200px; height: 1px }
canvas
{
touch-action:none;
}
table.grey td,th {
    padding: 5px;
    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;
}
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 {
background: url(images/headerbg.gif) repeat-x;
font: 11pt Arial, Helvetica, sans-serif;
}
#wrapper {
width: 803px;
margin: 0 auto;
padding-bottom: 5px;
}
.clear {
clear: both;
}

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

/* ----------------------------------------------------------- */
/* Links */
a, a:visited, a:hover {
text-decoration: none;
color: #4348ff;
}
a.but
{
color:white;
}
/* ----------------------------------------------------------- */
/* Header */
#header {
height: 90px;
margin: 0px 0px 0px 0px;
float: left;
width: 723px;
}
#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 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;
}
#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
{
width: 280px;
height: 45px;
font-size: 14px;
background: #f8f8f8;
border-radius: 10px;
border: 1px solid #bbbbbb;
padding: 6px;
}
.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 
{ 
margin-bottom: 10px;
font-size: 15pt;
text-decoration: none;
font-size: 14pt;
font-family: verdana,arial,helvetica,sans-serif;
font-weight: bold;
color: #135cae;
}
p.title, a.title, h2 
{ 
font-size: 12pt;
font-family: sans-serif;
font-weight: bold;
color: #000000;
padding-top: 0.3em;
padding-bottom: 0.3em;
}
.medium
{
font-family: "Arial", "Helvetica", sans-serif;
FONT-WEIGHT: normal;
FONT-SIZE: 12pt;
text-decoration: none;
padding-top: 0.3em;
padding-bottom: 0.3em;
}
.large
{
font-family: "Arial", "Helvetica", sans-serif;
FONT-WEIGHT: normal;
FONT-SIZE: 13pt;
text-decoration: none;
padding-top: 0.3em;
padding-bottom: 0.3em;
}
p.smalltitle, a.smalltitle, h3 
{ 
font-size: 10pt;
font-family: "Arial", "Helvetica", sans-serif;
padding-top: 0.3em;
padding-bottom: 0.3em;
}
p, ul, li
{
font-family: "Arial", "Helvetica", sans-serif;
FONT-WEIGHT: normal;
FONT-SIZE: 11pt;
padding-top: 0.3em;
padding-bottom: 0.3em;
}
p.small
{ 
font-family: "Arial", "Helvetica", sans-serif;
FONT-WEIGHT: normal;
FONT-SIZE: 9pt;
}
p.red
{
color: #ff0000;
}
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{
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;
}