/* CSSTidy 1.3: Mon, 05 May 2008 11:19:03 -0600 */
/* reset */
/*
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
ul,ol { list-style: none; }
fieldset,img { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }
*/
/* iX fruit flavors */
.bogus {
/* lime */
color:#006600; /* lime - dark */
color:#00cc00; /* lime - basic */
color:#00ff00; /* lime - neon */
color:#00ff66; /* lime - fade */
/* grape */
color:#660099; /* grape - dark */
color:#4a0081; /* grape - dark */
color:#9900cc; /* grape - basic */
color:#cc00ff; /* grape - neon */
color:#cc66ff; /* grape - fade */

/* various greys */ 
color:#303030;
color:#494949; /* gray - button text */
color:#e0e0e0; /* previous basic gray for navigation */
color:#444; /* previous basic gray */
color:#1d1d1d; /* gray - dark */
color:#3d3d3d; /* gray - basic */
color:#ababab; /* gray - neon */
color:#e5e5e5; /* gray - fade */
}

/* General styles */
/* type */
body {
font-family:"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font: 12px/18px "Lucida Grande", Arial, Verdana, sans-serif; background-color: #fff; color: #333; 
background-color:#fff;
color:#333;
color:#3d3d3d; /* gray - basic */
margin:0;
padding:0;
border:0;
/* This removes the border around the viewport in old versions of IE */
width:100%;
min-width:600px;
/* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
}

a {
color:#9900cc; /* grape - basic */
}

a:hover {
color:#fff;
background:#9900cc; /* grape - basic */

text-decoration:none;
}

h1,h2,h3 {
font-family:"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font: 12px/18px "Lucida Grande", Arial, Verdana, sans-serif; background-color: #fff; color: #333; 
margin:.8em 0 .2em;
padding:0;
}

p {
margin:.4em 0 .8em;
padding:0;
}

img {
/* position and z-index needed so span doesn't cover images that float through an h1, h2, h3 */
position: relative;
z-index: 900;
margin:10px 0 5px;
}

/* redefining for gradient experiment */
/* http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/ */
h1 {
font:bold 300%/100% "Lucida Grande";
font-family:"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
padding-top:20px;
position:relative;
color:#464646; /* the original gradient color */
color:#000;
}

h1 span {
background:url(/images/css-gradient-demo/images/gradient-glossy.png) repeat-x;
position:absolute;
display:block;
width:100%;
height:31px;
}

h2 {
font:bold 200%/100% "Lucida Grande";
position:relative;
color:#000;
z-index:1;
}

h2 span {
background:url(/images/css-gradient-demo/images/gradient-glossy.png) repeat-x;
position:absolute;
display:block;
width:100%;
height:1.2em;
z-index:2;
}

h3 {
font:bold 130%/100% "Lucida Grande";
position:relative;
color:#000;
}

h3 span {
background:url(/images/css-gradient-demo/images/gradient-glossy.png) repeat-x;
position:absolute;
display:block;
width:100%;
height:1.2em;
}

h4 {
font:bold 100%/100% "Lucida Grande";
position:relative;
color:#000;
}

h4 span {
background:url(/images/css-gradient-demo/images/gradient-glossy.png) repeat-x;
position:absolute;
display:block;
width:100%;
height:1.2em;
}


/* product sub menu */
#layoutdims {
clear:both;
background:#eee;
border-top:0 solid #000;
margin:0;
padding:6px 15px!important;
text-align:right;
}

/* column container */
.colmask {
position:relative;
/* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%;
/* width of whole page */
overflow:hidden;
/* This chops off any overhanging divs */
}

/* common column settings */
.colright,.colmid,.colleft {
float:left;
width:100%;
position:relative;
}

.col1,.col2,.col3 {
display:table-cell;
float:left;
position:relative;
padding:0 0 1em;
overflow:hidden;
}

.image {
    float: right;
    padding: 20px 20px 0px 20px;
}
.image .caption { 
    font-size: 80%; 
    padding-bottom: 20px;
    text-align: center; }
.movie {
    padding-top: 20px;
}
                                    
/* 1 column full page settings */
.fullpage {
background:#fff;
}
.fullpage .col1 {
margin:0 15px;
}

/* 2 Column (left menu) settings */
.leftmenu {
background:#fff;
/* right column background colour */
}

.leftmenu .colleft {
right:75%;
/* right column width */
/* background:#f4f4f4;*/
background:#fff;
/* left column background colour */
}

.leftmenu .col1 {
width:73%;
/* right column content width */
left:100%;
/* 100% plus left column left padding */
}

.leftmenu .col2 {
width:21%;
width:19%;
/* left column content width (column width minus left and right padding) */
left:4%;
/* (right column left and right padding) plus (left column left padding) */
background:#fff;
}

/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
border:none;
margin:20px 0 0;
}

#footer p {
padding:10px;
margin:0;
}

/* End of general styles from template */
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/pro_dropline.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
.nav {
height:35px;
background:url(/menus/pro_line_0.gif) repeat-x;
position:relative;
font-family:"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font:bold 120%/100% "Lucida Grande";
width:100%;
z-index:500;
}

.nav .table {
display:table;
margin:0 auto;
}

.nav .select,.nav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}

.nav li {
margin:0;
padding:0;
height:auto;
float:left;
}

.nav .select a {
display:block;
height:35px;
float:left;
background:url(/menus/pro_line_0.gif);
padding:0 20px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#e5e5e5; /* gray - fade */
}

.nav .current a {
display:block;
height:35px;
float:left;
background:url(/menus/pro_line_2.gif);
padding:0 0 0 15px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#fff;
}

.nav .current a b {
display:block;
padding:0 20px 0 10px;
background:url(/menus/pro_line_2.gif) right top;
}

.nav .select a:hover,.nav .select li:hover a {
background:url(/menus/pro_line_1.gif);
padding:0 0 0 10px;
cursor:pointer;
color:#fff;
}

.nav .select a:hover b,.nav .select li:hover a b {
display:block;
float:left;
padding:0 20px 0 10px;
background:url(/menus/pro_line_1.gif) right top;
cursor:pointer;
}

.nav .select_sub {
display:none;
}

/* IE6 only */
.nav table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}

.nav .sub {
display:table;
margin:0 auto;
padding:0;
list-style:none;
}

.nav .sub_active .current_sub a,.nav .sub_active a:hover {
background:transparent;
color:#f00;
}

.nav .select :hover .select_sub,.nav .current .show {
display:block;
position:absolute;
width:100%;
top:35px;
background:url(/menus/back_0.gif);
padding:0;
z-index:100;
left:0;
text-align:center;
}

.nav .current .show {
z-index:10;
}

.nav .select :hover .sub li a,.nav .current .show .sub li a {
    /* horizontal sub-menu  */
display:block;
float:left;
background:transparent;
padding:0 10px;
margin:0;
white-space:nowrap;
border:0;
color:#494949; /* gray - button text */

}

.nav .current .sub li.sub_show a {
    /* not wired to anything right now ? */
color:#cc00ff; /* grape - neon */
cursor:default;
background:url(/menus/back_1.gif);
}

.nav .select :hover .sub li a:hover,.nav .current .sub li a:hover {
visibility:visible;
/* horizontal sub-menu hover color */
color:#cc00ff; /* grape - neon */
background:url(/menus/back_1.gif);
}

/* illumineX additions */
div.center {
text-align:center;
background:transparent;
margin:0 auto;
z-index:0;
}

/* container to center footer and header images, and separator */
div.centerglass {
text-align:center;
height:12px;
background:transparent;
width:70%;
margin:0 auto;
}

/* sidebar sidebox */
.sidebar {
font-family:"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size:11px;
width:210px;
float:right;
background:#fff;
border:0;
color:black;
}

div.sidebar h1,div.sidebar h2,div.sidebar h3,div.sidebar h4 {
color:#9900CC;
padding:1px 0;
}

div.sidebar h1 {
font:bold 330%/100% "Lucida Grande";
}

div.sidebar h2 {
font:bold 230%/100% "Lucida Grande";
}

div.sidebar h3 {
font:bold 130%/100% "Lucida Grande";
}

div.sidebar h4 {
font:bold 100%/100% "Lucida Grande";
}

.title_img {
margin:0 50px 20px 0;
}

.sidetop {
background:url(/images/box_top.gif) no-repeat;
height:8px;
padding:5px 10px 0;
}

.sidebot {
background:url(/images/box_bot.gif) no-repeat;
height:10px;
padding:0 10px 10px;
}

.sidebox ul {
list-style-type:none;
margin:0;
padding:0;
}

.sidebox ul.disc {
margin:0 15px;
list-style-type:disc;
}

.sidebox ol {
margin:0;
padding:0 20px;
}

.sidebox p.title {
font-size:14px;
color:#cc00ff; /* grape - neon */
margin-bottom:0;
padding-bottom:0;
padding-top:20px;
margin-left:10px;
margin-top:0;
}

/* padding rule is top right bottom left */
div.sidebox {
background:url(/images/box_middle.gif) repeat-y;
padding:0 15px;
}

div.sidebox p {
}

/* pullquote */
.pullquote {
color:black;
width:180px;
background:#fff;
filter:alpha(opacity=90);
opacity:.90;
float:right;
margin:10px 0;
padding:10px;
font-family:Arial, "Lucida Grande", Verdana, Geneva, Helvetica, sans-serif; /* Arial first for pullquote */
font-size:28px;
line-height:26px;
text-align:right;
}

div.pullquote b {
font-size:1.3em;
}

/* fancy quotes - use blockquote with class, containing paragraph with class */
blockquote.withquote {
clear:both;
background:url(/images/quote.gif) no-repeat;
background-position:top left;
/* background-color: #F0F0F0; */
width:70%;
padding:5px 10px;
text-align:justify;
}

p.withunquote {
background:url(/images/unquote.gif) no-repeat;
text-align:center;
background-position:bottom right;
padding-right:5px;
padding:5px 10px 5px 20px;
}

/*  glass side box - grape */
.glasscontainer {
width:240px;
float:right;
margin:10px;
position:relative;
z-index:700;
}

.glassside {
font-family:"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size:11px;
background:#fff;
border:0;
color:#000;
width:240px;
float:right;
}

.glasstop {
background:url(/images/vbar_grape_top.gif) no-repeat;
height:8px;
padding:0 10px;
}

div.glassbox {
background:url(/images/vbar_grape_middle.gif) repeat-y;
padding:0 15px 1px;
}

.glassbot {
background:url(/images/vbar_grape_bottom.gif) no-repeat;
height:10px;
padding:0 10px;
}

/* styles needed by glass side box */
div.glassbox p.title {
background:none;
font-size:14px;
color:#cc00ff; /* grape - neon */
margin:0;
}

/* glass bar horizontal separator */
.hbar {
/* container to center and size hbar */
width:70%;
text-align:center;
background:transparent;
margin:0 auto;
z-index:0;
}

.hbar_cap {
float:left;
margin:0 auto;
}

.hbar_mid {
float:left;
clear:none;
text-align:center;
height:12px;
width:90%;
padding:0;
margin:0 auto;
border:none;
background:transparent;
}

/* copyright for footer */
.copyrightnotice {
text-align:center;
width:80%;
height:100px;
color:#808080;

font-size:10px;
font-style:normal;
margin:0 auto;
padding:0;
white-space:pre;
}

.copyrightnotice:before {
/*
    To get the newline in the content to function, it seems one need include the white-space: pre bit.  This is not documented in the content property at W3.
    http://www.w3.org/TR/REC-CSS2/generate.html#propdef-content
    http://cheeaun.phoenity.com/weblog/2005/06/whitespace-and-generated-content.htm
    */
display:block;
text-align:center;
margin:0 auto;
padding:0;
content:"\a Copyright \A9  1998-2017, illumineX, inc.";
}

.copyrightnotice:after {
display:none;
text-align:center;
margin:0 auto;
}

/* Dynamic Drive Buttons */
a.squarebutton {
background:transparent url(/images/buttons/square-ice-left.gif) no-repeat top left;
display:block;
float:left;
font:bold 14px "Lucida Grande";
/* Change 12px as desired */
line-height:19px;
/* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height:23px;
/* Height of button background height */
padding-left:9px;
/* Width of left menu image */
text-decoration:none;
}

a.squarebutton span {
background:transparent url(/images/buttons/square-ice-right.gif) no-repeat top right;
display:block;
/* top and bottom of this span, added to line-height in A above must equal line height of button (default is 23px)*/
padding:2px 9px 2px 0;
/*Set 9px below to match value of 'padding-left' value above*/
}

a:link.squarebutton {
}

a:visited.squarebutton {
color:aqua;
/*button text color*/
}

a:hover.squarebutton {
/* Hover state CSS */
background-position:bottom left;
}

a:hover.squarebutton span {
/* Hover state CSS */
background-position:bottom right;
color:black;
}

a:active.squarebutton {
color:#330033;
background-position:bottom left;
}

a:active.squarebutton span {
color:#330033;
background-position:bottom right;
}



.buttonwrapper {
/* Container you can use to surround a CSS button to clear float */
overflow:hidden;
/*See: http://www.quirksmode.org/css/clearing.html */
width:100%;
}

/* separate styling or iX Connect button ... need a smaller font */
a.ixcsquarebutton {
background:transparent url(/images/buttons/square-ice-left.gif) no-repeat top left;
display:block;
float:left;
font:bold 12px "Lucida Grande";
/* Change 12px as desired */
line-height:15px;
/* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height:23px;
/* Height of button background height */
padding-left:9px;
/* Width of left menu image */
text-decoration:none;
}

a.ixcsquarebutton span {
background:transparent url(/images/buttons/square-ice-right.gif) no-repeat top right;
display:block;
/* top and bottom of this span, added to line-height in A above must equal line height of button (default is 23px)*/
padding:4px 9px 4px 0;
/*Set 9px below to match value of 'padding-left' value above*/
}

a:link.ixcsquarebutton {
color:#494949; /* gray - button text */
}

a:visited.ixcsquarebutton {
color:#494949; /* gray - button text */
}

a:hover.ixcsquarebutton {
/* Hover state CSS */
background-position:bottom left;
color:black;
}

a:hover.ixcsquarebutton span {
/* Hover state CSS */
background-position:bottom right;
}

a:active.ixcsquarebutton {
color:#494949; /* gray - button text */
/*button text color*/
}

a:active.ixcsquarebutton span {
background-position:bottom left;
}


.ixconnect {
/* Container to surround a CSS button to clear float */
position:absolute;
top:28px;
left:20px;
overflow:hidden;
/*See: http://www.quirksmode.org/css/clearing.html */
}

.downloadbutton {
/* class to style download button */
font:bold 1em;
/* Change 12px as desired */
display:block;
float:right;
width:120px;
height:120px;
margin:0 0 10px 5px;
background-color:#fff;
padding:5px;
/*
    border-top: 1px solid #999;
    border-right: 2px solid #555;
    border-bottom: 2px solid #555;
    border-left: 1px solid #999;
*/
}

/* restyle .downloadbutton for the iX Cards button */
.ixcardsbutton {
    float:none;
    width:100%;
    padding:0;
    margin:0;
}

div.downloadbutton img {
margin:0;
/*
    background: none;
    border-top: 2px solid #555;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    border-left: 2px solid #555;
*/
}

div.downnloadbutton a {
margin-top:0;
background:none;
color:#808080;
text-decoration:none;
}

div.downloadbutton a:link,div.downloadbutton a:visited {
color:#808080;
background:none;
text-decoration:none;
}

div.downloadbutton a:hover {
color:#3d3d3d; /* gray - basic */
background:none;
text-decoration:none;

}

div.downloadbutton a:active {
}

div.downnloadbutton p {
margin-top:0;
background:none;
text-decoration:none;
}

/* link opacity for download button image */
a.linkopacity img {
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity:0.8;
-khtml-opacity:0.8;
}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
-khtml-opacity:1.0;
}

/* Dynamic Drive Accordian Vertical Menu */
.glossymenu {
margin:5px 0;
padding:0;
width:170px;
/*width of menu*/
border:1px solid #9A9A9A;
border-bottom-width:0;
}

.glossymenu a.menuitem {
background:black url(/images/ddrive/glossyback.gif) repeat-x bottom left;
font-weight:bold; 
font-variant-caps: small-caps;
font-size: 14px;
font-family:"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
color:white;
display:block;
position:relative;
/*To help in the anchoring of the ".statusicon" icon image*/
width:auto;
padding:4px 0;
padding-left:10px;
text-decoration:none;
}

.glossymenu a.menuitem:visited,.glossymenu .menuitem:active {
color:white;
}

.glossymenu a.menuitem .statusicon {
/*CSS for icon image that gets dynamically added to headers*/
position:absolute;
top:5px;
right:5px;
border:none;
}

.glossymenu a.menuitem:hover {
background-image:url(/images/ddrive/glossyback2.gif);
}

.glossymenu div.submenu {
/*DIV that contains each sub menu*/
background:white;
}

.glossymenu div.submenu ul {
/*UL of each sub menu*/
list-style-type:none;
margin:0;
padding:0;
}

.glossymenu div.submenu ul li {
border-bottom:1px solid blue;
}

.glossymenu div.submenu ul li a {
display:block;
font:normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color:black;
text-decoration:none;
padding:2px 0;
padding-left:10px;
}

.glossymenu div.submenu ul li a:hover {
background:#DFDCCB;
color:white;
}

/* Vertical CSS Navigation */
#navcontainer {
width:auto;
border-right:0 solid #000;
padding:0 0 1em;
margin-bottom:1em;
font-family:"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
background-color:transparent;
color:#3d3d3d; /* gray - basic */
}

#navcontainer ul {
list-style:none;
margin:0;
padding:0;
border:none;
}

#navcontainer li {
border-bottom:1px solid #90bade;
margin:0;
}

#navcontainer li a {
display:block;
padding:5px 5px 5px .5em;
border-left:10px solid #461B7E;
border-right:10px solid #571B7e;
background-color:#e0e0e0;
color:#000;
text-decoration:none;
width:100%;
}

html>body #navcontainer li a {
width:auto;
}

#navcontainer li a:hover {
border-left:10px solid #9900ff;
border-right:10px solid #660099;
background-color:#660099;
color:#fff;
}

#active li {
}
/* Vertical CSS Navigation -- restyled for glass buttons */
#sqnavcontainer {
width:auto;
border-right:0 solid #000;
padding:0 0 1em;
margin-bottom:1em;
font-family:"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
background-color:transparent;
color:#e0e0e0;
}

#sqnavcontainer ul {
list-style:none;
margin:0;
padding:0;
border:none;
}

#sqnavcontainer ul li {
clear:both;
margin:0;
padding:0;
}

#sqnavcontainer ul li a {
display:block;
color:#484848;
text-decoration:none;
}

#sqnavcontainer ul li:active {
display:block;
text-decoration:none;
}

html>body #sqnavcontainer li a {
width:80%;
}

#sqnavcontainer li a:hover {
color:#fff;
}

#sqnavcontainer #sqnavlist #active a {
/* this set the style of the active link on the vertical navigation */
background-position:bottom left;
color:black;
}
#sqnavcontainer #sqnavlist #active a span {
background-position:bottom right;
}
/* special content box */
.special {
width:70%;
font-family:"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font:120%/130% "Lucida Grande", Arial, Verdana, sans-serif;
color:#000;
background:#f0f0f0;
border:1px dotted #000;
margin:10px 10px;
padding:10px 0px 10px 20px;
}

.special p {
margin:5px 20px 5px 10px;
padding:0px 20px 5px 10px;
}

/* special glass content box */
.specialglass {
width:80%;
font-family:"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font:120%/130% "Lucida Grande", Arial, Verdana, sans-serif;
color:#000;
background:none;
border:none;
margin:10px 10px;
padding:10px 20px 10px 20px;
}

.specialglass p {
margin:5px 25px 5px 10px;
padding:0px 35px 5px 10px;
}

/* added from old illumineX site for FAQ 
*/

.question { color: #1d1d1d; font-weight: bold }
.quotes { font-style: italic }

/*
The following are needed to prevent any linked images from getting ugly default borders
in Mozilla-based and IE-based browsers
*/
a img,img[usemap] {
margin:0;
padding:0;
border:0 none transparent!important;
background:#fff;
}

/*
This inserts a north-east pointing ascii arrow after any link which points off-site.
*/
/*
a[href^="http://"]:not([href*="new.illumineX.com"])::after {
    font-size: 6px; 
    content: "\2197";
}
*/