/*******************************
   Page theme items
 ******************************
Theme common colors:
    rgb(0,104,55)       - darkest green, such as heading elements
    rgb(149, 206, 139)  - darker green, such as sub-nav-bar and active tab
    rgb(208,230,187)    - lighter green, such as display case background, inactive tabs
    rgb(235,245,227)    - lightest green, such as main page area background
    rgb(50, 50, 50)     - almost black, for links, non-paragraph text, and such
    rgb(90, 90, 90)     - lighter black, for visited links, struck-out text, etc.
    rgb(200,200,200)    - light gray, only for active links
    black               - main text
    blue                - links when hovered
    blueviolet          - links that are visited when hovered

Element Uses:
    h1                  - page main big underlined header
    h2 - h5             - normal context
    h6                  - footer-header, e.g., "go to link"

*/

/**************************************************************
   BASIC PAGE STRUCTURE
 *************************************************************/

html, body {
height: 100%; /* this height will help the footer stick to the bottom */
}

/***********************************
   Ad region at right side of page
   absolute position, doesn't have
   to come first in document!
 ***********************************/
#adregion {
position: absolute;
right: 0;
top: 0;
width: 140px;
background: white;
}

#adregion div {
padding: 0.5em;
}

#adregion noscript {
font-size: 4px;
text-decoration: blink;
}

/***********************************
   Web region is entire left side,
   and encompasses everything else.
 ***********************************/
#webregion {
margin-right: 140px;
background: rgb(235,245,227);
border-right: 3px groove black;
text-align: center; /* needed for IE */
/* help stretch to fill the whole window height */
position: relative;
top: 0;
min-height: 100%;
height: 100%; /* IE thinks this is min-height */
}

html>body #webregion {
height: auto; /* webstandards browsers need a proper height */
}

/***********************************
   The rest of our normal regions.
 ***********************************/
#contentregion {
width: 550pt;
margin: 0pt auto;
margin-top: 10px;
margin-bottom: 10px;
padding-bottom: 70px; /* height of bottom graphic. Ensures IE doesn't do stupid stuff */
position: relative; top:0; right:0; /* JSD TEMP */
}

#contentregion div { 
text-align: left; /* normal text align for divs inside the contentregion */
}

#headerregion {
min-width: 550pt;
}

#navregion {
min-width: 550pt;
}

#footerregion {
position: absolute;  /* help stretch to fill the whole window */
bottom: 0;
left: 0;
width: 100%;
height: 62px;
}


/**************************************************************
   RESETS
 *************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, cite, code,
del, dfn, em, font, img, ins, kbd, q, samp,
strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
}


:focus {
    outline: 0;
}

/*******************************
   All the normal tags
 ******************************/
html, body {
    line-height: 1;
    color: black;
    background: white;
    font-family: "Myriad Pro", Verdana, Arial, sans-serif;
}


h1, h2, h3, h4, h5 {
    color: rgb(0,104,55);
    font-family: Impact, "Myriad Pro", Verdana, Arial, Helvetica, sans-serif;
    text-align: left;
}

h1 { font-size: 24pt; text-align: center; text-decoration: underline; padding-bottom: 10pt;}
h2 { font-size: 20pt;}
h3 { font-size: 17pt; }
h4 { font-size: 15pt; }
h5 { font-size: 12pt; }
h6 { font-size: 11pt; color: inherit; font-family: inherit; text-align: right; padding-top: 15pt; }

p + h1, p + h2, p + h3, p + h4, p + h5 { padding-top: 15pt; }
h2 + h3, h3 + h4, h4 + h5 { padding-top: 5pt;}


/*******************************
   Paragraphs
 ******************************/
p {
    font-size: 12pt;
    text-align: justify;
    padding-top: 5pt;
}
p + p {
    text-indent: 1.5em;
}


/*******************************
   Lists
 ******************************/

li>ol, li>ul, li>dl { padding: 0 10pt 0 0; } /* different padding should the list be a list item */

ol, ul { margin: 0 20pt 10pt 20pt;}
ol { list-style: outside decimal; }
ul { list-style: outside disc; }
li {
    text-align: justify;
    padding-top: 5pt;
    margin-left: 20pt; /* word-wrapping point */
}
dl { margin: 0 20pt 10pt 20pt; }
dt { 
    clear: both;
    font-style: normal;
    font-weight: normal;
    color: rgb(50,50,50);
    float: left; 
    padding-top: 5pt;
    margin-right: 0.5em;
}
dd { 
    padding-top: 5pt;
    padding-left: 20pt;
    text-align: justify;
}


/*******************************
   Quotations
 ******************************/
q:before {  content: open-quote; }
q:after {   content: close-quote; }
q { quotes: '“' '”' '‘' '’' } /* &#8220 &#8221 &#8216 &#8217 &#8249 › } */

blockquote {
    display: block;
    margin: 10pt 5% 10pt 5%;
    padding: 2pt;
    color: rgb(50,50,50);
    background-color: transparent;
    border-top: thin dotted rgb(50,50,50);
    border-bottom: thin dotted rgb(50,50,50);
    text-align: justify;
}

blockquote:before,
blockquote:after {
    content: "";
}
blockquote { quotes: "" ""; }

/*******************************
   Code and Preformatted
 ******************************/
/* pre  - block level, preformatted, no-wrap
   code - block level, preformatted, wrap, nice background
   samp - inline, nowrap, darkest-green
   kbd  - inline, nowrap, Courier, bold
   var  - inline, nowrap, darkest-green, bold
   tt   - inline, wrap,
*/
pre, code, samp, var, tt { font-family: "Lucida Console", Monaco, monospace; font-size: 10pt; text-align: left;}
kbd { font-family: "Courier New", Courier, monospace; font-size: 11pt; text-align: left;}
pre {
    display: block;
    white-space: pre;
	text-align: left;
}
code {
    display: block;
    white-space: pre;
    background-color: white;
    margin: 20pt;
    padding: 5pt;
    border: 2px ridge rgb(0,104,55);
	overflow: scroll;
	width: 100%;
}

html > body code { overflow: auto; width: auto;}
samp, kbd, var { white-space: nowrap; }
samp, var { color: rgb(0,104,55); }
kbd, var { font-weight: bold; }


/*******************************
   Links
 ******************************/
a,
a:visited,
a:active,
a:hover { text-decoration: underline; }

a { color: rgb(50,50,50); }
a:visited { color: rgb(90,90,90); }
a:active {color: rgb(200,200,200); }
a:hover { color: blue; }
a:visited:hover { color: blueviolet;}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a { color: inherit; font-family: inherit; }


/*******************************
   Minor Display Elements
 ******************************/
del { text-decoration: line-through; color: rgb(90,90,90);}
ins { text-decoration: underline; }
sub { vertical-align: sub; font-size: 75%; }
sup { vertical-align: super; font-size: 75%; }
strong { font-weight: bold; }
em, cite, dfn { font-style: italic; }
address { white-space: pre; text-align: left; }


/*******************************
   Tables - reset
 ******************************/
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: auto;
}
caption, th, td {
    text-align: center;
    vertical-align: top;
    font-weight: normal;
}
td { text-align: left;}


/*******************************
   Forms (generic)
 ******************************/
fieldset {
    padding: 10pt;
    margin: 10pt;
    border: 2px ridge rgb(0,104,55);
}

legend {
    font-size: inherit;
    font-style: italic;
    margin: 0 0 0 10pt;
    padding: 0 3px;
    color: inherit;
}

label, input, textarea {
    font-size: inherit;
    color: inherit;
    text-align: left;
}

/* override the cakephp default behavior */
form .error_message { background-color: transparent;}


/************************************
   Tables - give a basic appearance
 ***********************************/
table.basic {
    border: 2px ridge rgb(0,104,55);
    width: 100%;
}

table.basic caption {
    caption-side: bottom;
    font-size: 10pt;
    text-align: left;
    padding-top: 3px;
}

table.basic td,
table.basic th { padding: 2pt; }

table.basic thead,
table.basic tfoot { background: rgb(149, 206, 139);}

table.basic td {
    border: 1px solid rgb(149, 206, 139);
    background: rgb(208,230,187);
}


/**************************************************************
   UTILITY MARKUP
 *************************************************************

/*******************************
   Generic Width Settings
 ******************************/
.width50percent { width: 49%; }
.width66percent { width: 66%; }
.width75percent { width: 75%; }
.width100percent { width: 100%; }

/*******************************************************************
   our newDisplayCase -- highlights products in a nice box.
   use: (1) multi-products horizontally, product stuff stacks vert.
        (2) single product, stuff stacks horizontally.
 *******************************************************************/
div.newDisplayCase h2 {
   font-size: 34pt;
}
div.newDisplayCaseProduct {
   float: left;
   display: block;
   position: relative; /* so our absolute positioner below has a reference */
   top: 0;
   left: 0;
}
div.newDisplayCaseProduct img { 
   margin: 10pt 5% 10pt 5%;
   padding: 1px; /* space for a:hover-like border */
   width: 80%;
}
/* simulate link behavior on supported browsers. Use the 1px
   padding instead of border to prevent resizing on the screeen */
div.newDisplayCaseProduct a img:hover { background-color: blue;}
/* samller p when vertical stacking */
div.newDisplayCaseProduct p {
   font-size: 10pt;
   margin-right: 10%;
}
/* larger p size when horizontal stacking */
div.newDisplayCaseProduct div p {
   font-size: 14pt;
   margin-right: 10%;
}
/* headline space when horizontal stacking */
div.newDisplayCaseProduct div h3 {
   margin-top: 15pt;
   margin-bottom: 10pt;
}
/* position the footer-header */
div.newDisplayCaseProduct div h6 { 
    position: absolute;
    bottom: 0;
    right: 20pt;
}
/* Provide horizontal stacking.
   Don't forget to specify a width class */
div.newDisplayCaseProduct div {
    float: left;
}
div.newDisplayCase br { clear: both;}


/*******************************
   Article
 ******************************/
.article {
    border: 8px double rgb(149, 206, 139);
    margin: 15pt 0;
    padding: 15pt;
    text-align: justify;
}


/*******************************
   Title Box
 ******************************/
.titlebox {
    border: 4px solid rgb(149, 206, 139);
    background: rgb(208,230,187) ;
    margin: 15pt 0;
    padding: 15pt;
    text-align: justify;
}
.titlebox h2 { text-align: center; font-size: 16pt; }

/*******************************
   Note Box
 ******************************/
.note {
    border: 4px solid black;
    background: lightyellow;
    margin: 15pt 15pt;
    padding: 15pt;
    text-align: justify;
}
p + p.note { text-indent: 0; }


/**************************************************************
   CONTEXT-SPECIFIC MARKUP
 *************************************************************

/*******************************
   Forms (Contacts)
 ******************************/
fieldset#contactForm { 
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    height: 100%;
}

fieldset#contactForm div { float: left; width: 46%; margin: 1%; }      /* provide our columns */
fieldset#contactForm div.right { float: right; }
fieldset#contactForm div.left { padding-right: 1%;}

fieldset#contactForm div div { float: none; clear: both; width: 100%; margin: 0 0 2ex 0; }  /* group our lines */

fieldset#contactForm label,
fieldset#contactForm input,
fieldset#contactForm textarea { width: 100%; }
fieldset#contactForm textarea { height: 15ex; }

fieldset#contactForm input, fieldset#contactForm textarea {
    color: rgb(0,104,55); 
    background-color: rgb(208,230,187);
    border: 1px solid rgb(149, 206, 139);
    font-family: "Myriad Pro", Verdana, Arial, sans-serif;
}
fieldset#contactForm input:focus, fieldset#contactForm textarea:focus {
    border: 1px solid rgb(0,104,55);
    color: black;
}
fieldset#contactForm div div.submit {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
fieldset#contactForm input.submit {
    text-align: center;
    font-weight: bold;
    font-size: 10pt;
    color: black;
    background-color: rgb(149, 206, 139);
    border: 1px outset rgb(0,104,55);
    width: 10em;    
}
fieldset#contactForm .error_message { font-size: 9pt; }

/*******************************************************************
   Screenshots settings
 *******************************************************************/
#contentregion div.screenshots {
    clear: both; 
    padding: 15pt;
}

#contentregion div.screenshots img {
    padding-right: 10px;
}

/*******************************************************************
   Site Map and/or getfiles AJAX effect
 *******************************************************************/
body#sitemapembedded, body#getfiles {
    height: 100%;
    background-color: rgb(235,245,227);
    font-size: 75%;
}

body#getfiles {
    background-color: black;
    padding: 15pt;
}
body#getfiles p {
    color: rgb(0,104,55);
}

/*******************************************************************
   404page
 *******************************************************************/
body#file404 .filename { padding: 20pt; display: block;}
body#file404 .filename samp { font-size: 16pt; }
body#file404 #contentregion { background: url(/css/img/404.jpg) no-repeat bottom center;}


/*******************************************************************
   product downloads
 *******************************************************************/
div.productdownload {
   position: relative;
   text-align: center;
   margin: 0 auto 15pt auto;
   width: 450pt;
   padding: 10pt;
   border: 2px ridge rgb(0,104,55); 
}

div.productdownload img {
   float: left;
   width: 75pt;
   margin: 0; 
   border: 2px ridge rgb(0,104,55); 
}

div.productdownload dl {
   display: block;
   float: right;
   width: 355pt;
   padding: 0;
   margin: 0;
}

div.productdownload dt {
   color: rgb(50,50,50);
   margin: 0 5pt 0 0;
   padding: 0 0 5pt 0;
   width: 6.5em;
   text-align: right;
}
div.productdownload dd {
   margin: 0 0 0 7em;
   padding: 0 0 5pt 0;
}


div.productdownload dd.description { font-size: 12pt; }

div.productdownload dd.actions a { 
   background-color: rgb(149, 206, 139);
    border: 1px outset rgb(0,104,55);
    font-size: 10pt;
    text-align: center;
    padding: 3pt 8pt;
    text-decoration: none;
    color: black;
    font-style: bold;
}
div.productdownload dd.actions a:hover {
   color: black;
   text-decoration: none;
}

div.productdownload br { clear: both; }


/*******************************************************************
   printing pages
 *******************************************************************/

body#printing dt { font-style: italic; font-weight: bold;}

/* for stepping through instructions */
body#printing div.stepcontainer {  margin: 15pt auto; }

body#printing div.stepcontainer img { display: block; margin: 0 auto; width: 100%; }

body#printing div.stepcontainer div {
   float: left;
   width: 400px;
   text-align: center;
   margin: 10pt 10pt 10pt 0;
}

body#printing div.stepcontainer br { clear: both; }

body#printing .stepcontainer table {
   width: 75%;
   border: 2px ridge rgb(0,104,55);
   border-collapse: collapse;
   margin: 0 auto;
}
body#printing .stepcontainer table thead td { background-color: rgb(208,230,187); text-align: center; }
body#printing .stepcontainer table td { border: 2px ridge rgb(0,104,55); padding: 5pt; }
body#printing .stepcontainer code { height: 30em; }


/*******************************************************************
   CakePHP ORIGINAL
 *******************************************************************/
#cakeSqlLog td {
        text-align: left;
        padding: 4px 8px;
        background: #fff;
        border-bottom: 2px solid #ccc;
    }

/* notices and errors */

#flashMessage, .error, .error_message {
        color:#900;
        font-size: 16px;
        background-color: #fff;
        margin: 8px 0px;
        font-weight: bold;
    }
    
.error_message {
        clear: both;
    }

.error em {
        font-size: 18px;
        color: #003d4c;
    }

.notice {
        color: #656565;
        font-size: 14px;
        background-color: #f4f4f4;
        padding: 0.5em;
        margin: 1em 0;
        display:block;
    }

.tip {
        color: #656565;
        background-color: #ddd;
    }