/*
 * This is based on the original "style.css" file from the WebDesigner.
*/
body  {
    margin:0px; padding:0px; background-color:#333333;
    font-family:Arial, Helvetica, sans-serif;  font-size:12px; color:#333333;
}
body.iframe { /* RJR 31-Aug-11 */
    background-color:white;
}

.container {
    width:980px; background-color:#FFFFFF; margin-left:auto;
    margin-right:auto; position:relative;
}

.container.popup { /* RJR: 1-Sep-11; for popups, use 80% of the parent width */
    width:80%;
}

.popupdocument {
    width:500px;
}
.pagealign { /* RJR 5-Aug-11; was missing, added */
}
.clearside { clear:both;}

p {
    margin: 1em 0;
}

ol li { padding-bottom:5px; padding-top:5px;}
ul li { padding-bottom:5px; padding-top:5px;}
ul.ticks {   /* RJR Sep-11; this is mine - colors the bullet */
    list-style-image: url(../images/bullet-tick.gif);
    list-style-type: disc;
    color:#000000;
} 
ul.seealso { color:#a15514; }   /* RJR Aug-11; this is mine - colors the bullet */
/* RJR 9-Aug-11; added linklist class to prevent all links in lists from being styled this way */
ul.seealso li a,
ul.linklist li a {
    color:#a15514; text-decoration:none;
}
body.HoverSupport ul.seealso li a:hover,
body.HoverSupport ul.linklist li a:hover { /* RJR 18-Aug-11, added body.HoverSupport */
    color:#000000;
}

body.HoverSupport a:hover {     /* RJR 18-Aug-11, added body.HoverSupport */
    /*    color:#000000;*/
    text-decoration: none;
}

/* ***** HEADER CLASSES START ***** */
.header {
    background-image:url(../images/header.gif); background-repeat:repeat-x;
    background-position:top; background-image:url(../images/bg.jpg);
    background-repeat:repeat-x; background-position:bottom; background-color:#FFF;
}
.headerin {
    padding:0px;
    width:980px;
    margin-left:auto;
    margin-right:auto;
}

/*
 * RJR 9-Sep-11:
 *  the original main_image.gif contained our main heading text, but this is
 *  inflexible.
 *  Changes:
 *      1. Text removed from main_image.gif
 *      2. main_image.gif no longer an explicit image in the HTML, but now a
 *         background image to div#main_image (below)
 *      3. div#main_text is now the container for the main heading text 
*/
div#main_image {
    background-image:url(../images/main_image.gif); background-repeat:no-repeat;
    background-position:top left;
    height:137px;
    width:980px;
}

/*
 * RJR 9-Sep-11: the original main_image.gif contained our main heading text.
 * div#main_text is now the container for this text
*/
div#main_text {
    margin:0;
    padding:0 10px 0 20px;
}

div#main_text p.headline {
    margin:0;
    padding:40px 0 0 0;
    font-size:18px;
    font-weight:bold;
    color:#FFF;
}

div#main_text p.prodlist {
    margin:0;
    padding:10px 0 0 0;
    font-size:26px;
    font-weight:bold;
    color:#49fb49;
}
/* RJR */

.header1 {
    background-image:url(../images/bg1.jpg); background-repeat:repeat-x;
    background-position:top; background-color:#333; /* RJR 30-Sep-11; change bg-color from #FFF to prevent bleed through on iPad */
    height:137px; /* RJR 6-Aug-11; added height of bg1.jpg to fix IE7 */
    /*    border: 1px solid yellow;*/
}
.header1in { padding:0px; width:980px; margin-left:auto; margin-right:auto;}

.navigation1 { position:relative; z-index:11000;}
.navigation { width:602px; }    /* RJR 17-Oct-11, if you change this,
                                    you ALSO have to adjust the
                                    size of navbg.gif to match. Also, this
                                    width is really determined by the padding
                                    settings for "ul li a" below, together
                                    with the number of items in the menu. */
.nav_left {
    background-image:url(../images/nav_left.gif); background-repeat:no-repeat;
    background-position:top left; width:7px; height:41px; float:left;
}
.nav_right {
    background-image:url(../images/nav_right.gif); background-repeat:no-repeat;
    background-position:top right; width:7px; height:41px;
}
.nav_center {
    background-image:url(../images/nav_center.gif); background-repeat:repeat-x;
    background-position:top; height:41px; color:#a15514; text-align:center;
    min-width:586px;    /* RJR 8-Sep-11: ensures the right width for .navigation when there are a small number of menu items */
    /* RJR 17-Oct-11: for FF, this needs to be a little smaller
    than 602-7-7 = 588 */
}
/*
.nav_center a {
    color:#a15514; font-size:12px; text-decoration:none; line-height:20px;
    padding-left:13px; padding-right:13px;
}
.nav_center a:hover { color:#000;}
*/
.nav_center a.active { font-weight:bold;}
.nav_center a img { padding-left:5px;}
.navigation2 {
    background-image:url(../images/navbg602.gif);  background-repeat:repeat-y;
    background-position:left;
}

.nav_center ul {
    font-size: 12px !important;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav_center ul li {
    display: block;
    position: relative;
    float: left; border-right:solid 1px #a15514;
}
.nav_center ul li.lastitem { border:none; }
/*
 * submenus are initially not displayed.
*/
.nav_center li ul { display: none; }
.nav_center ul li a {
    color:#a15514; font-size:12px !important; text-decoration:none; line-height:15px; 
    padding-left:14px; padding-right:14px; /* RJR 25-Jul-11; adj padding down
                                              (from 16px); allows FF text-only
                                              zoom to go up twice before the
                                              menu wraps */
    /* RJR 4-Aug-11;  added nowrap to allow the popup menu to widen based
    on the text width (see also min-width change below) */
    white-space:nowrap;
}

/*
 * RJR 18-Aug-11
 * Hover doesn't work very well with iPad and other touch devices.
 * To fix this, we replace the pure CSS menu processing with
 * jQuery processing.
 *
 * The hover classes have been altered to be prefixed with
 * 'body.HoverSupport', so jQuery can disable them.
 * They have also been duplicated and pefixed with 'body.TouchSupport'
 * and had ":hover" replaced with ".hover".
*/

/*
 * Whenever a menu anchor is hovered, turn it black.
*/
body.HoverSupport .nav_center ul li a:hover,
body.TouchSupport .nav_center ul li a.hover {
    color:#000;
}

/*
 * When you hover over a submenu's top link, display it.
*/
body.HoverSupport .nav_center li:hover ul,
body.TouchSupport .nav_center li.hover ul {
    display: block;
    position: absolute; background-color:#FFF;
    /* RJR 4-Aug-11; changed width to min-width, and added nowrap above
    to allow the popup menu to widen based on the text width */
    min-width:175px;
    text-align:left;
    z-index:8000;  /* RJR 8-Aug-11; using my own z-index scheme now. was 9999 */
    padding-top:14px;
}

/*
 * When you hover over a submenu's top link, this is how the submenu
 * items are styled.
*/
body.HoverSupport .nav_center li:hover li,
body.TouchSupport .nav_center li.hover li {
    float: none;
    font-size: 11px; border:none; margin:0px; padding:0px;
}
/*
 * RJR 4-Oct-11; added "ul" to the following to target
 * the anchors of the submenus. Previously it was targeting
 * all anchors, including the top menu, which caused them to move
 * around.
*/
body.HoverSupport .nav_center li:hover ul a,
body.TouchSupport .nav_center li.hover ul a {
    color:#a15514;
    display:block;
}

/*.nav_center li:hover li a:hover { color:#000}*/
/*
 * Style submenu anchors.
*/
.nav_center li ul li a {
    border-bottom:solid 1px #a15514;
    line-height:30px;
    font-weight:bold;
}
/*
 * Submenu anchors change color when you hover over them.
*/
body.HoverSupport .nav_center li ul li a:hover,
body.TouchSupport .nav_center li ul li a.hover {
    background-color:#a15514;
    color:#FFF;
}

/*
 * Active submenu anchors.  RJR 1-Mar-12
 */
body.HoverSupport .nav_center li ul li a.active,
body.TouchSupport .nav_center li ul li a.active {
    background-color:#a15514;
    color:#FFF;
}
/* RJR */

/* RJR 7-Sep-11 */
/*
 * Cascading menus support
*/
.nav_center li ul.subsubmenu { display: none; } /* RJR 7-Sep-11 */

body.HoverSupport .nav_center li ul li a.submenu,
body.TouchSupport .nav_center li ul li a.submenu {
}

body.HoverSupport .nav_center li ul li a.submenu:hover,
body.TouchSupport .nav_center li ul li a.submenu.hover {
    background-color:#FFF;
    color:#000;
}

/*
 * Active subsubmenu's.  RJR 1-Mar-12
 */
body.HoverSupport .nav_center li ul li a.submenu.active,
body.TouchSupport .nav_center li ul li a.submenu.active {
    background-color:#EEE;
    color:#000;
}

/* RJR 13-Oct-11: no longer used - replaced with background image (see below)
 * which is not only better coding, but resolves IE7 problems.
body.HoverSupport .nav_center li ul li a.submenu img,
body.TouchSupport .nav_center li ul li a.submenu img {
    display: inline-block;
    float:right;
    margin-top:10px;
}
*/

body.HoverSupport .nav_center li ul li a.submenu,
body.TouchSupport .nav_center li ul li a.submenu {
    background: url(../images/subsubmenu.gif) 95% center no-repeat;
}


body.HoverSupport .nav_center li:hover ul li ul.subsubmenu,
body.TouchSupport .nav_center li.hover ul li ul.subsubmenu,
/*
 * the two above are for a first level submenu (2nd level menu),
 * the two below are for a second level submenu (3rd level menu)
*/
body.HoverSupport .nav_center li:hover ul li ul.subsubmenu li ul.subsubmenu,
body.TouchSupport .nav_center li.hover ul li ul.subsubmenu li ul.subsubmenu {
    display:none;
}

/*
 * the first two are for a first level submenu (2nd level menu),
 * the second two are for a second level submenu (3rd level menu)
*/
body.HoverSupport .nav_center li:hover ul li:hover ul.subsubmenu,
body.TouchSupport .nav_center li.hover ul li.hover ul.subsubmenu,
body.HoverSupport .nav_center li:hover ul li:hover ul.subsubmenu li:hover ul.subsubmenu,
body.TouchSupport .nav_center li.hover ul li.hover ul.subsubmenu li.hover ul.subsubmenu {
    display:block;
    position:absolute;
    left:100%; top:5px;
    padding-top:0;
    border-left:1px solid #a15514;
}
/* RJR */
/* ***** HEADER CLASSES END ***** */

/* ***** FOOTER CLASSES START ***** */
.footer { text-align:left; border-top:dotted 1px #CCC; padding-top:10px;}
.footerin {
    padding:0px; padding-left:15px; padding-right:15px; padding-bottom:15px;
}

.footerleft { float:left; font-size:11px; color:#502a0a;}
.footerleft a { color:#a15514; text-decoration:none}
.footerleft span { color:#a15514;}
.footerright { float:right; font-size:11px; text-align:center; color:#a15514; }
.footerright a {
    color:#a15514; text-decoration:none; padding-right:5px; padding-left:5px;
}
.footerright img { padding-bottom:10px;}
body.HoverSupport .footerleft a:hover, body.HoverSupport footerright a:hover { text-decoration:underline;} /* RJR 16-Aug-11 */

/* ***** FOOTER CLASSES END ***** */

/* ***** MAIN CONTENT CLASSES START ***** */
.pagecontent {
    color:#333333;
    text-align:left;
    font-size:12px;
    min-height:400px; /* RJR 5-Aug-11; added min-height to handle short pages */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

}
.container {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.center {
    text-align:left;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.centerin {
    font-size:12px
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
h1.pagetitle {
    background-color:#eae8e8;
    margin:0px;
    font-size:17px;
    line-height:20px;
    padding-left:15px;
    padding-bottom:5px;
    padding-top:8px;
    color:#333333;
    height:28px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.content {
    padding-left:10px;
    padding-right:6px;
}
/* ***** MAIN CONTENT CLASSES END ***** */

/* ***** CONTENT CLASSES START ***** */
.homeblock1 { 
    background-image:url(../images/divider1.gif); background-repeat:no-repeat; 
    background-position:right top;
    width:318px;
    float:left;
    overflow:hidden;
}

.blockheading { 
    font-weight:bold; margin-top:25px; padding-left:10px;
    height:65px;    /* RJR 9-Sep-11: keeps things nicely aligned */
}
.blockheading img { float:left; margin-right:15px;}
.blockheading h2 {
    font-size:22px; font-weight:normal; color:#a15514;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    margin:0px; padding:0px; padding-top:5px; border:none; width:auto;
}
.blockheading h2 span { color:#333333;}
.download_btn {
    text-align:center; padding-top:45px; padding-bottom:35px;
    /*    border:1px solid red;*/
}

.featurebox {   /* RJR 6-Aug-11; added missing style */
    /*    border:1px solid blue;*/
    border-radius:12px;
    background-color:#eeeeee;
    width:313px;
}

div.imgonly {
    font-size:0;
}

.featurebox img { /* RJR 9-Aug-11; fixes whitespace/gap bug in IE */
    /*    display:block;*/  /* not needed if the img is wrapped in a div */
    border:none;
}
.featurebox_center {
   /* background-image:url(../images/featurebox_center.gif);
    background-repeat:repeat-y; background-position:left;*/
    padding-left:15px;
    padding-right:20px;position:relative;
    /* the following iPad hacks are now done in touchable.js */
    /*    margin-top:-1px;     RJR 19-Aug-11; fix for background bleed on iPad */
    /*    margin-bottom:-1px;  RJR 19-Aug-11; fix for background bleed on iPad */
    /*    border:1px solid red;*/
}
.featurebox_center h3 {
    font-size:18px; color:#a15514; margin:0px; padding:0px; font-weight:normal; 
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
    padding-bottom:15px; padding-top:10px;
}
.featurebox_center ul { margin:0px; padding:0px; padding-left:15px;}
.featurebox_center ul li { padding-bottom:10px;}    /* RJR 22-Feb-12; reduced from 15px */
.featurebox_features {  /* RJR 12-Oct-11; let's us line up the buybox's */
    height:25em;        /* use em units so Zoom Text Only can move the box */
    overflow:hidden;
}

.featurebox_buybox {
    background-color: #a15514;
    color: #FFF;
    margin-left: -15px;
    margin-right: -20px;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    padding-bottom: 15px;
    padding-top: 15px;
    /*height:140px;*/
}

.featurebox_buybox h2 {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 20px;
    padding: 0px;
    margin: 0px;
    color: #FFF;
    width: auto;
    border: none
}

.featurebox_buybox h2 span { color:#FFFF00;}
.featurebox_buybox img { padding-bottom:15px; padding-top:15px;}
.featurebox_buybox p {  /* RJR 12-Oct-11 */
    font-size:12px;
}
.featurebox .testimonials {
    position:relative;
    min-height: 300px;
}
.featurebox .testimonials p {
    margin:0px; padding:0px; padding-bottom:10px; padding-top:10px; 
    font-size:12px; line-height:18px;
}
.featurebox .testimonials a { color:#a15514; text-decoration:none;}
.featurebox .testimonials .moretestimonials { position:absolute; top:7px; left:150px;}

.brown_txt {color:#a15514;}

.homeblock2 { 
    background-image:url(../images/divider1.gif); background-repeat:no-repeat; 
    background-position:right top;
    width:318px;
    float:left;
    margin-left:5px;
}
.guarantee { position:absolute; top:0px; right:15px;}

.homeblock3 { width:318px; float:left; margin-left:5px; }
/* ***** CONTENT CLASSES END ***** */

.search1 {
    position:relative;
    top:10px;
    width:980px;
    margin-left:auto;
    margin-right:auto;
    z-index:7000; /* RJR 8-Aug-11; using my own z-index scheme now, was 9998 */
}
.search { 
    position:absolute;
    top:-4px;
    right:-4px;
    background-image:url(../images/searchbg.gif);
    background-repeat:no-repeat;
    background-position:top left;
    width:177px;
    height:24px;
    border:none;
    padding:5px;
    padding-top:3px;
    z-index:7000; /* RJR 4-Aug-11; was 999, but 998 ensures the dropdown menus stay in front */
}
.search1 .PlusOne { /* RJR 21-Feb-12; placement next to the search box */
    position:absolute; top:-4px; right:200px;
    width:70px;
}
.search input[type="text"] { 
    border:none; width:140px; font-size:11px; color:#999;
    background-color:transparent;
    outline:none;               /* RJR 19-Aug-11; needed for chrome */
}
.search input[type="submit"] {
    border:none; width:20px; margin-left:5px; background-color:transparent;
    background-image:none;
}

.nextpreviouslinks {
    position:relative; padding-top:10px; padding-bottom:10px; 
    border-bottom:dotted 1px #CCC; border-top:dotted 1px #CCC; width:960px;
    margin-top:30px;    /* RJR 9-Sep-11: increased from 10px */
}
.nextpreviouslinks a { color:#a15514; text-decoration:none; font-size:12px; }
body.HoverSupport .nextpreviouslinks a:hover { color:#000000;}
.previouslink {
    float:left; width:335px; text-align:left;
    background-image:url(../images/prev_arrow.gif); background-repeat:no-repeat; 
    background-position:left; padding-left:15px;
}
.nextlink { 
    float:right; width:335px; text-align:right; 
    background-image:url(../images/next_arrow.gif); background-repeat:no-repeat;
    background-position:right; padding-right:15px;
}
.uplink { 
    float:left; width:240px; text-align:left; margin-left:6px;
    text-align:center
}
/* RJR: 2-Aug-11 */
.emptylink {
    background: none;
}
/* RJR */

h1 {color:#a15514; font-size:24px;}
h2 {
    color:#a15514; font-size:18px; font-weight:normal; 
    border-bottom:dotted 1px #a15514; padding-top:5px; 
    padding-bottom:5px; width:960px;    /* width related to container width and margins */
}

.container.popup h2 {
    width:98%;         /* width close to container */
}

h3 {
    color:#a15514; font-size:16px; font-weight:normal;
}

/*
 * add a span to a heading to get it underlined
*/
h3 span {
    border-bottom:dotted 1px #a15514; padding-top:5px; 
    padding-bottom:5px;
}
h4 {color:#a15514; font-size:14px;}
h5 {color:#a15514; font-size:12px;}
h6 {color:#a15514; font-size:10px;}

.code {
    color:#666666; border:solid 1px #CCCCCC; display:block; width:660px;
    padding:10px; padding-left:25px; background-color:#F6F6F6; 
    background-image:url(../images/codebg.gif); background-repeat:repeat-y;
    background-position:left;
    overflow-x:auto;
}

pre.code, p.code {
    font-size:12px;
    font-family: "Liberation Mono", "Courier New", "Courier", "Lucida Console", monospace;
}

p.code {
    width:70%;
}

.playscript pre {
    width:400px;
}

li .code { 
    color:#666666; border:solid 1px #CCCCCC; display:block; max-width:850px; 
    padding:10px; padding-left:25px; background-color:#F6F6F6; 
    background-image:url(../images/codebg.gif); background-repeat:repeat-y;
    background-position:left;
}

/* RJR: 2-Aug-11 */
.configtype {
    border:solid 1px #CCCCCC; display:block; width:880px;
    margin-left:auto; margin-right:auto;
    padding:5px;
}
.boxed {
    border:solid 1px #CCCCCC; display:block; width:880px;
    margin-left:auto; margin-right:auto;
    padding:5px;
}

/* RJR */

.datatable1 { border:solid 1px #CCC;}
.datatable1 th {
    padding:10px; font-size:14px; border-bottom:dotted 1px #CCC; 
    text-align:left; white-space:nowrap; /*width: 25%;*/
}
.datatable1 td { padding:10px; font-size:13px; border-bottom:dotted 1px #CCC; }

/* RJR 27-Jul-11: additional styles */

.datatable1 th.last { border-bottom:none; }
.datatable1 td.last { border-bottom:none; }

div.screenshot {
}

div.screenshot img {
    border: 2px solid #A15514;
}

div.screenshot p {
    text-align: center;
    font-style: italic;
    font-size: smaller;
    text-indent: 0;
}
/* RJR */

/* RJR 27-Jul-11: style for formmail settings list */
div.listblockcontainer {
    margin-left:auto;
    margin-right:auto;
    width:880px;
}

div.listblock1 {
    width: 290px;
    float:left;
    overflow:hidden;
}

div.listblock2 {
    width: 290px;
    float:left;
    margin-left:5px;
    overflow:hidden;
}

div.listblock3 {
    width: 290px;
    float:left;
    margin-left:5px;
    overflow:hidden; 
}

/*
 * For indented content.  indentedlist simply allows
 * you to specify different anchor text formatting.
*/
div.indented, div.indentedlist {
    margin-left:20px;
}

div.indented table {
    width:96%;
}

div.listblock1 a,
div.listblock2 a,
div.listblock3 a,
div.indentedlist a { color:#a15514; text-decoration:none; }

div.listblock1 a:hover,
div.listblock2 a:hover,
div.listblock3 a:hover,
div.indentedlist a:hover { text-decoration:underline; }

div.listblock1 a:visited,
div.listblock2 a:visited,
div.listblock3 a:visited,
div.indentedlist a:visited { color:#000000; }
/*div.indentedlist a:visited:hover { color:#a15514; }*/

/*
 * Use leftcontent and rightadvert for pages that
 * are to display a vertical Google Ad on the right hand side.
*/
div.leftcontent {
    float:left;
    margin-left:20px;
    margin-right:20px;
    width:740px;
}

div.leftcontent h2 {
    width:740px;
}

div.rightadvert {
    float:right;
    margin-right:20px;
}

/*
 * This is for my FormMail document page
*/
ul li h5 { padding:0 0 5px 0; margin:0 ; font-size:14px;
           font-style: italic; color:#000000; font-weight:normal; }

/*
 * "opensnew" provides a special image and a popup
 * "opens in new window message", using
 * Pure CSS tooltips
 * (pp 81-83 "CSS Mastery")
*/
/*
 * In the original implementation,
 * there's a problem with the background image overwriting the
 * text on some browsers (or text overwriting the image).
 * So, we've creaed an onwrapper class that holds the image, and
 * becomes the container for the actual <a>.
*/
span.onwrapper {
    display:inline-block;
    background-image:url(../images/open-nw.gif);
    background-position:center right;
    background-repeat:no-repeat;
}

a.opensnew {
    display:inline-block;   /* inline-block fixes a bug in Chrome et. al. where
                               the backgrond images overwrites the text in
                               some cases */
    position: relative;
    /*    background-image:url(../images/open-nw.gif);
        background-position:center right;
        background-repeat:no-repeat;*/
    margin-right:21px;
}

a.opensnewimg {
    display:block;
    margin-left:auto;
    margin-right:auto;
}

body.HoverSupport a.opensnew:hover {
    font-style:normal;
    text-decoration: none;
}

a.opensnew span {
    display: none;
    font-style: normal;
    text-decoration: none;
    background-color:white;
}

body.HoverSupport a.opensnew:hover span {
    display: block;
    position: absolute;
    font-style: normal;
    text-decoration: none;
    bottom: -1.5em;
    left: 50%;
    padding: 0.2em 0.6em;
    border:1px solid #A15514;
    background-color:white;
    color:#000;
    white-space:nowrap;
    z-index:10000;
}

/*
 * the background image technique works on "all" browsers and prevents the underline
 * from showing under the image in Firefox; so, we don't use after any more
*/
/*a.opensnew:after {
    content: url(../images/open-nw.gif);
    text-decoration:none;
}*/

/*
 * Hacks for IE 
*/
a.opensnew:hover {
    font-size: 100%;        /* forgotten what this was for, but it means
                               the z-index must be set too */
    z-index:1;              /* in IE, without this, links under the popup
                               span will be seen overwriting the popup text */
}
/* end hacks */

/*
 * For pages with with note boxes on the right, use
 * leftofnote div's then an clearing div.
*/

.notebox {
    background:none; width:318px; float:right;
    margin-top:10px;    /* primarily to stop a top box from hitting the page title in IE7, but looks OK anyway in other browsers */
    margin-left:20px;
    margin-bottom:20px;
    /*    border:1px solid blue;*/
    /*    overflow:hidden;*/
}

.notebox img {  /* fixes whitespace/gap bug in IE */
    /*    display:block;*/  /* not needed if the img is wrapped in a div */
}

.notebox_center {
    background-image:url(../images/featurebox_center.gif);
    background-repeat:repeat-y; background-position:left; padding-left:15px;
    padding-right:20px;position:relative;
    /* the following iPad hacks are now done in touchable.js */
    /*    margin-top:-1px;     RJR 19-Aug-11; fix for background bleed on iPad */
    /*    margin-bottom:-1px;  RJR 19-Aug-11; fix for background bleed on iPad */
    /*    border:1px solid red;*/
    /*    overflow:hidden;     fixes space before the next block, but a better
                                solution is the zero bottom margin on paras */

}

div.notebox_top,div.notebox_bottom {    /* only for images */
    font-size:0;
}

/*
 * separate two adjacent noteboxes
*/
div.notebox_bottom + div.notebox_top {
    margin-top:10px;
}

.notebox_center h2 {
    font-size:18px; color:#a15514; margin:0px; padding:0px; font-weight:normal; 
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
    padding-bottom:5px; padding-top:10px;
    width:inherit;
    border:none;
}

.notebox_center h3 {
    font-size:18px; color:#a15514; margin:0px; padding:0px; font-weight:normal; 
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
    padding-bottom:5px; padding-top:10px;
    width:inherit;
    border:none;

}
.notebox_center h4 {
    font-size:16px; color:#a15514; margin:0px; padding:0px; font-weight:normal; 
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
    padding-bottom:5px; padding-top:10px;
    width:inherit;
    border:none;
}

.notebox_center h2:first-child,
.notebox_center h3:first-child,
.notebox_center h4:first-child {
    padding-top:0;
}

.notebox_center p, .notebox_center ul, .notebox_center ol {
    margin-top:1em;
    margin-bottom:0;    /* anything other than 0 creates a white gap
                           after the last paragraph, before the bottom image */
}

.notebox_center h2 + p, .notebox_center h2 + ul, .notebox_center h2 + ol,
.notebox_center h3 + p, .notebox_center h3 + ul, .notebox_center h3 + ol {
    margin-top:0;
}

/*
 * the popup note can get clipped if the anchor text is too close to the sides,
 * so we adjust when using in a notebox
*/
body.HoverSupport .notebox a.opensnew:hover span {
    top: 1em;
    bottom:auto;
    left: 0px;
    white-space:normal;
    width:8em;
}

.leftofnote {
    width:610px;
    margin-right:10px;
    margin-left:inherit;
    /*    border:1px solid red;*/
}

.leftofnote h2 {
    width:620px;
}

.leftofnote .code {
    width:570px;
}

/*
 * A heading just after a clear doesn't need a top margin.
*/
div.clearside + h2 {
    margin-top:0;
}

/*
 * mainly for IE, but a good idea in any case
*/
a img {
    border:none;
    text-decoration:none;
}

a img.left {
    margin-right:5px;
}

a img.right {
    margin-left:5px;
}

a.close {
    display:block;
    text-align:center;
    font-style:italic;
    margin:20px 0;
}

#FlyingWizard {
    float:right;
    margin-top:1em;
}

div.debug {
    color:red;
    font-weight:bold;
}

dt {
    width:100px;
    margin-left:10px;
    margin-right:10px;
    float:left;
}

dd {
    line-height:1.5em;
}

li dl { /* zap the lower margin/padding if the dl is within an li */
    margin-bottom:0;
    padding-bottom:0;
}

#ButtonPage dl {
    margin-left:50px;
}

#ButtonPage dt {
    width:200px;
}

div#LinksPage {
}

#LinksPage dl {
    display: block;
    width:auto;
    margin-left: 50px;
}
#LinksPage dt  {
    width:auto;
    margin-left: 0;
    float:none;
}

#LinksPage dd {
    /*    line-height:3em;*/
    margin-left:40px;
    margin-bottom:10px;
}

tr.playscript, th.playscript, td.playscript {
    border: none;
    vertical-align: top;
}

td.playscriptleft {
    padding-right:15px;
}
    
p.playscript {
    padding-top:0;
    padding-bottom:0;
}
p.playscriptleft {
    padding-top:0;
    padding-bottom:0;
    white-space: nowrap;
}
table.playscript {
    border: none;
}

.Hide {
    display:none;
}

#Examples textarea.code {
    margin-bottom:10px;
}

/*
 * clearing fix from http://www.positioniseverything.net/easyclearing.html
 * for non-float containers of floated elements
*/
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

table.contact {
    margin:0;
    width:90%;
    border:none;
}
table.contact tr, table.contact td {
    height:2em;
}
table.contact td {
    width:50%;
}
table.contact td p {
    margin:0;
    padding:0;
    line-height:1em;
}
table.contact tr, table.contact td {
    padding:0;
    border:none;
}

img.photo {
    display:block;
    float:right;
    border:1px solid black;
    margin:10px 10px;
}
/* RJR */

/* RJR 29-Sep-11: multiple changes to get testimonial styling more automated */
/* RJR 10-Oct-11: moved from tectiteproductstyle.css */
.testimonial {
    margin:10px 0 0 0; padding:20px 15px 0px;
    min-height:100px; 
}
.testimonial .testimonialin {
    margin:0px; padding:0px;
}
.testimonial .testimonialin p {
    margin:0 0 10px 0; padding:0; font-size:12px; font-family:georgia, arial; line-height:14px;
}
.testimonial .testimonialin .testimonial_regards {
} 
.testimonial .testimonialin .testimonial_regards .testimonial_regards_img {
    display:none;
} 
.testimonial .testimonialin .testimonial_regards .testimonial_regards_text {
} 
/*
 * adjust when in a notebox
*/
.notebox .testimonial {
    padding-top:0;
}

form input.radio {
    display:inline-block;
    float: left;
    margin-right:20px;
}

form input.radio + label {
    display:inline-block;
    width:85%;      /* this for when it's inside leftofnote */
}

p.error {
    background-color:white;
    color:red;
    font-weight:bold;
}

p.deprec {
    background-color:white;
    color:blue;
    font-weight:bold;
    font-size:120%;
    text-align: center;
    border: 1px solid red;
    margin:1em auto;
    padding:1em;
    width:60%;
}


/*
 * Social media buttons popouts.
*/
.btntslidebox {  
    background: url(../images/tab_left_vertical.png) no-repeat scroll right top transparent !important;
    display: none;   /* RJR 29-2-12; no display, but JS code displays it */
    float: left;   
    height: auto;  
    padding: 0 40px 0 5px;   
    width: 65px;   
    z-index: 99999;  
    position:fixed;  
    left:-70px; 
    top:50%;}
.btntslidebox div{    border:none;    position:relative;    display:block;}
.btntslidebox img.disable {
    display:block;
    float:right;
    margin-right:-33px;
    margin-top:3px;
    height:10px;
}
.btntslidebox img.disable:hover {
    border:1px solid gray;
}
#floatingbuttons{   
    background: #fff; 
    border-radius: 5px 5px 5px 5px; 
    border: 1px solid #CCCCCC;  
    float:left;   
    padding:0 0 3px 0; 
    bottom:15%;  
    z-index:399;
}
#floatingbuttons .floatbutton{    float:left;    clear:both;    margin:5px 4px 0 4px;}

@media (max-width: 600px) {

    .container {
        width:100%;
    }

    .popupdocument {
        width:80%;
    }

    .headerin {
        width:100%;
    }

    .header1in {
        width:100%;
    }

    .navigation1 {
        display:none;
    }

    .navigation { width:55%; }    /* RJR 17-Oct-11, if you change this,
                                    you ALSO have to adjust the
                                    size of navbg.gif to match. Also, this
                                    width is really determined by the padding
                                    settings for "ul li a" below, together
                                    with the number of items in the menu. */
    .nav_center {
        min-width:53%;    /* RJR 8-Sep-11: ensures the right width for .navigation when there are a small number of menu items */
        /* RJR 17-Oct-11: for FF, this needs to be a little smaller
        than 602-7-7 = 588 */
    }

    .search1 {
        display:none;
        width:100%;
    }

    /*
     * RJR 9-Sep-11:
     *  the original main_image.gif contained our main heading text, but this is
     *  inflexible.
     *  Changes:
     *      1. Text removed from main_image.gif
     *      2. main_image.gif no longer an explicit image in the HTML, but now a
     *         background image to div#main_image (below)
     *      3. div#main_text is now the container for the main heading text
    */
    div#main_image {
        width:100%;
    }


    .homeblock1, .homeblock2, .homeblock3 {
        width:98%;
        background-image:none;
        margin-left:0;
    }

    div#main_text p.headline {
        padding:4px 0 0 0;
        text-align:center;
    }

    div#main_text p.prodlist {
        padding:6px 0 0 0;
        font-size:20px;
        text-align:center;
    }

    .featurebox {   /* RJR 6-Aug-11; added missing style */
        /*    border:1px solid blue;*/
        width:100%;
    }

    #cot_tl_fixed {
        display:none;
    }
}