/* DEFAULT STYLES */

/************************************************************
** defaults
**
** these settings ensure that all browsers start with the
** same default layout
**
************************************************************/

body
{
  margin-top      : 20px ;
  margin-bottom   : 20px ;
  margin-left     : 20px ;
  margin-right    : 20px ;
  padding-top     : 0 ;
  padding-right   : 0 ;
  padding-bottom  : 0 ;
  padding-left    : 0 ;
  background-color: #FFFFFF    ;
  color           : #333399    ;
}

h1, h2, h3, h4, h5, h6,
div, span, p, ol, ul, li,
form, table, th, td,
img, code, samp
{
  margin-top    : 0 ;
  margin-right  : 0 ;
  margin-bottom : 0 ;
  margin-left   : 0 ;
  padding-top   : 0 ;
  padding-right : 0 ;
  padding-bottom: 0 ;
  padding-left  : 0 ;
  text-align    : left    ;  /* reconsider */
  vertical-align: bottom  ;  /* reconsider */
}

/************************************************************
** font families
************************************************************/

* { font-family : sans-serif ; }

pre   { font-family : monospace ; }
pre * { font-family : monospace ; }

*.code_inline   { font-family : monospace ; }
*.code_inline * { font-family : monospace ; }
*.samp_inline   { font-family : monospace ; }
*.samp_inline * { font-family : monospace ; }

*.nav_3 *.control_button { font-family : monospace ; }

*.font_family_monospace   { font-family : monospace ; }
*.font_family_monospace * { font-family : monospace ; }

/* delete after 2009-02-01

div, span, p, ol, ul, li,
table, th, td,
code, samp, sup
{ font-family: sans-serif ; }

h1, h2, h3, h4, h5, h6,
*.h1, *.h2, *.h3, *.h4, *.h5, *.h6
{ font-family     : sans-serif ; }

code ,
*.code_inline,
a:link.code_inline ,
a:visited.code_inline ,
a:hover.code_inline
{
  font-family     : monospace ;
}

*.code       { font-family : monospace ; }  obsolete
*.code_block { font-family : monospace ; }  use this class to make block level elements look like the inline "code" element does

samp ,
*.samp_inline ,
a:link.samp_inline ,
a:visited.samp_inline ,
a:hover.samp_inline      { font-family : monospace ; }

*.samp       { font-family : monospace ; }  obsolete
*.samp_block { font-family : monospace ; }  use this class to make block level elements look like the inline "samp" element does

*.pre { font-family: monospace ; }

pre span { font-family: monospace ; }

*.font_family_monospace { font-family   : monospace ; }

*.nav_3 *.control_button { font-family: monospace ; }


*.font-family-monospace { font-family: monospace ; }  obsolete - do not use in new code
*/

/************************************************************
** font sizes
************************************************************/

*                              { font-size : small ; }

h1, *.h1                       { font-size : xx-large ; }
h2, *.h2                       { font-size : x-large  ; }
h3, *.h3                       { font-size : large    ; }
h4, *.h4                       { font-size : medium   ; }
h5, *.h5                       { font-size : small    ; }
h6, *.h6                       { font-size : x-small  ; }

*.body_center *       { font-size : medium   ; }
*.body_center h1      { font-size : xx-large ; }
*.body_center h2      { font-size : x-large  ; }
*.body_center h3      { font-size : large    ; }
*.body_center h4      { font-size : medium   ; }
*.body_center h5      { font-size : small    ; }
*.body_center h6      { font-size : x-small  ; }
*.body_center table * { font-size : small    ; }

*.body_center pre                     { font-size : 9pt ; }
*.body_center pre *                   { font-size : 9pt ; }
*.body_center pre.font_size_smaller   { font-size : 7pt ; }
*.body_center pre.font_size_smaller * { font-size : 7pt ; }
*.body_center pre.font_size_larger    { font-size : 11pt ; }
*.body_center pre.font_size_larger *  { font-size : 11pt ; }

*.body_center pre.font_smaller   { font-size : 7pt ; } /* obsolete - do not use in new code */
*.body_center pre.font_smaller * { font-size : 7pt ; } /* obsolete - do not use in new code */
*.body_center pre.font_larger    { font-size :11pt ; } /* obsolete - do not use in new code */
*.body_center pre.font_larger  * { font-size :11pt ; } /* obsolete - do not use in new code */

*.body_center *.font_1   { font-size : xx-large ; }
*.body_center *.font_1 * { font-size : xx-large ; }
*.body_center *.font_2   { font-size : x-large  ; }
*.body_center *.font_2 * { font-size : x-large  ; }
*.body_center *.font_3   { font-size : large    ; }
*.body_center *.font_3 * { font-size : large    ; }
*.body_center *.font_4   { font-size : medium   ; }
*.body_center *.font_4 * { font-size : medium   ; }
*.body_center *.font_5   { font-size : small    ; }
*.body_center *.font_5 * { font-size : small    ; }
*.body_center *.font_6   { font-size : x-small  ; }
*.body_center *.font_6 * { font-size : x-small  ; }


*.font_smaller                    { font-size : smaller ; } /* obsolete - do not use in new code */
*.body_center *.font_smaller      { font-size : smaller ; } /* obsolete - do not use in new code */
*.font_larger                     { font-size : larger  ; } /* obsolete - do not use in new code */
*.body_center *.font_larger       { font-size : larger  ; } /* obsolete - do not use in new code */

*.font_size_smaller               { font-size : smaller ; }
*.body_center *.font_size_smaller { font-size : smaller ; }

*.font_size_larger                { font-size : larger  ; }
*.body_center *.font_size_larger  { font-size : larger  ; }

td.search_box h1 ,
td.search_box td ,
td.search_box input ,
td.search_box label ,
td.search_box font             { font-size : 8pt ; }

*.nav_3 *.control_button       { font-size : larger ; }

table.nav_4                    { font-size : x-large ; }
table.nav_4 *                  { font-size : large ; }

*.external_buttons li          { font-size : small ; }
*.external_buttons a           { font-size : small ; }
*.external_buttons span        { font-size : small ; }

*.linking div ,
*.linking p ,
*.linking li                   { font-size : small ; }

td.topic_annotation *          { font-size : smaller ; }

*.tutorial_list a              { font-size : medium ; }


/* delete these after 2009-02-01

div, span, p, ol, ul, li,
table, th, td                   { font-size  : medium ; }

div.nav_1 , div.nav_1 *        { font-size : small ; }

*.nav_3 ,
*.nav_3 * ,
*.nav_3 a:link ,
*.nav_3 a:visited ,
*.nav_3 a:hover ,
*.nav_3 *.current a:link ,
*.nav_3 *.current a:visited ,
*.nav_3 *.current a:link       { font-size  : small   ; }

div.nav_3a h3                  { font-size : small   ; }

*.nav_3a ,
*.nav_3a * ,
*.nav_3a a:link ,
*.nav_3a a:visited ,
*.nav_3a a:hover ,
*.nav_3a *.current a:link ,
*.nav_3a *.current a:visited ,
*.nav_3a *.current a:link      { font-size : small   ; }

td.body_right ,
td.body_right *                { font-size : small ; }

div.ad_label_left ,
span.ad_label_left             { font-size : small   ; }

div.ad_label_center ,
span.ad_label_center           { font-size : small   ; }

*.ad_2 div.ad_label_left ,
*.ad_2 span.ad_label_left      { font-size : small ; }

code ,
*.code_inline,
a:link.code_inline ,
a:visited.code_inline ,
a:hover.code_inline            { font-size : 9pt ; }
*/


/* *.code                         { font-size : 9pt ; } */ /* obsolete */
/* *.code_block                   { font-size : 9pt ; }  */ /* use this class to make block level elements look like the inline "code" element does */
/* *.code_block *                 { font-size : 9pt ; }  */ /* use this class to make block level elements look like the inline "code" element does */


/* samp                           { font-size : 9pt ; }  */ /* obsolete */

/* *.samp_inline ,                                       */
/* a:link.samp_inline ,                                  */
/* a:visited.samp_inline ,                               */
/* a:hover.samp_inline            { font-size : 9pt ;}   */

/* *.samp                         { font-size : 9pt ; }  */ /* obsolete */
/* *.samp_block                   { font-size : 9pt ; }  */ /* use this class to make block level elements look like the inline "samp" element does */
/* *.samp_block *                 { font-size : 9pt ; }  */ /* use this class to make block level elements look like the inline "samp" element does */




/************************************************************
** WIP: styles below this line will be re-arrange by
** property in the future
************************************************************/


h1, h2, h3, h4, h5, h6,
*.h1, *.h2, *.h3, *.h4, *.h5, *.h6
{
  background-color: #FFFFFF    ;
  color           : #993366    ;
}

h1, h2, h3, h4, h5,
*.h1, *.h2, *.h3, *.h4, *.h5
{
  font-weight: bold ;
}

h6, *.h6
{
  font-weight: normal ;
}

h1, h2, h3, h4, h5, h6
{
  margin-bottom   : 20px       ;
}

h1
{
  text-align : center ;
}

h2, h3, h4, h5, h6
{
  text-align : left   ;
}


p, ol, ul, table

{
  margin-bottom: 20px ;
}


a:link    { color: #333399 ; background-color: #FFFFFF ; }
a:visited { color: #7979C4 ; background-color: #FFFFFF ; }
a:hover   { color: #333399 ; background-color: #FFFFFF ; }

*.internal                               { color: #333399 ; background-color: #FFFFFF ; }
a:link.internal   , *.internal a:link    { color: #333399 ; background-color: #FFFFFF ; }
a:visited.internal, *.internal a:visited { color: #7979C4 ; background-color: #FFFFFF ; }
a:hover.internal  , *.internal a:hover   { color: #333399 ; background-color: #FFFFFF ; }

*.external                               { color: #339933 ; background-color: #FFFFFF ; }
a:link.external   , *.external a:link    { color: #339933 ; background-color: #FFFFFF ; }
a:visited.external, *.external a:visited { color: #59B259 ; background-color: #FFFFFF ; }
a:hover.external  , *.external a:hover   { color: #339933 ; background-color: #FFFFFF ; }

*.data_table th a:link.external    { color: #339933 ; background-color: #CCD9E5 ; }
*.data_table th a:visited.external { color: #59B259 ; background-color: #CCD9E5 ; }
*.data_table th a:hover.external   { color: #339933 ; background-color: #CCD9E5 ; }

*.oracle                                 { color: #FF0000 ; background-color: #FFFFFF ; }
a:link.oracle     , *.oracle a:link      { color: #FF0000 ; background-color: #FFFFFF ; }
a:visited.oracle  , *.oracle a:visited   { color: #FF4040 ; background-color: #FFFFFF ; }
a:hover.oracle    , *.oracle a:hover     { color: #FF0000 ; background-color: #FFFFFF ; }


li
{
  margin-left: 1.5em ;
}

td, th
{
  vertical-align: top ;
}

img
{
  border-width: 0px  ;
  border-style: none ;
}

code ,
*.code_inline,
a:link.code_inline ,
a:visited.code_inline ,
a:hover.code_inline
{
  background-color: #EBF0F5   ;
  color           : #336699   ;
  white-space     : nowrap    ;
}

*.code ,     /* obsolete */
*.code_block /* use this class to make block level elements look like the inline "code" element does */
{
  margin-bottom   : 20px      ;
  border-width    : 1px       ;
  border-style    : dashed    ;
  border-color    : #336699   ;
  padding-top     : 1em       ;
  padding-bottom  : 1em       ;
  padding-left    : 1em       ;
  padding-right   : 1em       ;
  background-color: #EBF0F5   ;
  color           : #336699   ;
  white-space     : pre       ;
}

*.code a:link ,
*.code a:visited ,
*.code a:hover ,
*.code_block a:link ,
*.code_block a:visited ,
*.code_block a:hover
{
  background-color: #EBF0F5 ;
}


samp ,
*.samp_inline ,
a:link.samp_inline ,
a:visited.samp_inline ,
a:hover.samp_inline
{
  background-color: #EBF0F5   ;
  color           : #336699   ;
  white-space     : nowrap    ;
}

*.samp,      /* obsolete */
*.samp_block /* use this class to make block level elements look like the inline "samp" element does */
{
  margin-bottom   : 20px      ;
  border-style    : none      ;
  padding-top     : 1em       ;
  padding-bottom  : 1em       ;
  padding-left    : 1em       ;
  padding-right   : 1em       ;
  background-color: #EBF0F5   ;
  color           : #336699   ;
  white-space     : pre       ;
}

*.samp a:link ,
*.samp a:visited ,
*.samp a:hover ,
*.samp_block a:link ,
*.samp_block a:visited ,
*.samp_block a:hover
{
  background-color: #EBF0F5 ;
}

*.pre
{
  white-space: pre       ;
}



/************************************************************
** classes
************************************************************/

/****************************************
** general use
****************************************/
*.hr
{
  border-top-style    : solid     ;
  border-bottom-style : solid     ;
  border-top-width    : 1px       ;
  border-top-color    : #CCD9E5   ;
  border-bottom-width : 2px       ;
  border-bottom-color : #EBF0F5   ;
  border-left-style   : none      ;
  border-right-style  : none      ;
}

*.bold       { font-weight    : bold      ; }
*.italic     { font-style     : italic    ; }
*.underlined { text-decoration: underline ; }

*.text-align-center     { text-align : center    ; } /* obsolete - do not use in new code */
*.white-space-nowrap    { white-space: nowrap    ; } /* obsolete - do not use in new code */

*.text_align_center     { text-align    : center    ; }

*.vertical_align_middle { vertical-align: middle ; }

*.white_space_nowrap    { white-space   : nowrap    ; }

*.text
{
  margin-bottom: 20px  ;
}

*.indented_neg_3 { margin-left: -3em  ; }
*.indented_neg_2 { margin-left: -2em  ; }
*.indented_neg_1 { margin-left: -1em  ; }
*.indented_0     { margin-left: 0em   ; }
*.indented_1     { margin-left: 1em   ; }
*.indented_2     { margin-left: 2em   ; }
*.indented_3     { margin-left: 3em   ; }
*.indented_4     { margin-left: 4em   ; }
*.indented_5     { margin-left: 5em   ; }
*.indented_6     { margin-left: 6em   ; }
*.indented_7     { margin-left: 7em   ; }
*.indented_8     { margin-left: 8em   ; }
*.indented_9     { margin-left: 9em   ; }
*.indented_10    { margin-left: 10em  ; }

td.indented_0    { padding-left: 0em  ; }
td.indented_1    { padding-left: 1em  ; }
td.indented_2    { padding-left: 2em  ; }
td.indented_3    { padding-left: 3em  ; }
td.indented_4    { padding-left: 4em  ; }
td.indented_5    { padding-left: 5em  ; }
td.indented_6    { padding-left: 6em  ; }
td.indented_7    { padding-left: 7em  ; }
td.indented_8    { padding-left: 8em  ; }
td.indented_9    { padding-left: 9em  ; }
td.indented_10   { padding-left: 10em ; }

li.list_indent_0:first-line  { margin-left: 0em  ; }
li.list_indent_0             { margin-left: 1em  ; }
li.list_indent_1:first-line  { margin-left: 1em  ; }
li.list_indent_1             { margin-left: 2em  ; }
li.list_indent_2:first-line  { margin-left: 2em  ; }
li.list_indent_2             { margin-left: 3em  ; }
li.list_indent_3:first-line  { margin-left: 3em  ; }
li.list_indent_3             { margin-left: 4em  ; }
li.list_indent_4:first-line  { margin-left: 4em  ; }
li.list_indent_4             { margin-left: 5em  ; }
li.list_indent_5:first-line  { margin-left: 5em  ; }
li.list_indent_5             { margin-left: 6em  ; }
li.list_indent_6:first-line  { margin-left: 6em  ; }
li.list_indent_6             { margin-left: 7em  ; }
li.list_indent_7:first-line  { margin-left: 7em  ; }
li.list_indent_7             { margin-left: 8em  ; }
li.list_indent_8:first-line  { margin-left: 8em  ; }
li.list_indent_8             { margin-left: 9em  ; }
li.list_indent_9:first-line  { margin-left: 9em  ; }
li.list_indent_9             { margin-left: 10em ; }
li.list_indent_10:first-line { margin-left: 10em ; }
li.list_indent_10            { margin-left: 11em ; }



p.line_spacing_1     { line-height: normal ; }
p.line_spacing_1_5   { line-height: 1.5em  ; }
p.line_spacing_2     { line-height: 2em    ; }

ul.line_spacing_1   li { margin-bottom: 0em   ; }
ul.line_spacing_1_5 li { margin-bottom: 0.5em ; }
ul.line_spacing_2   li { margin-bottom: 1em   ; }

ol.line_spacing_1   li { margin-bottom: 0em   ; }
ol.line_spacing_1_5 li { margin-bottom: 0.5em ; }
ol.line_spacing_2   li { margin-bottom: 1em   ; }

dl.line_spacing_1   dt { margin-bottom: 0em   ; }
dl.line_spacing_1_5 dt { margin-bottom: 0.5em ; }
dl.line_spacing_2   dt { margin-bottom: 1em   ; }

dl.line_spacing_1   dd { margin-bottom: 0em   ; }
dl.line_spacing_1_5 dd { margin-bottom: 0.5em ; }
dl.line_spacing_2   dd { margin-bottom: 1em   ; }

table.line_spacing_1   td { padding-bottom: 0em   ; }
table.line_spacing_1_5 td { padding-bottom: 0.5em ; }
table.line_spacing_2   td { padding-bottom: 1em   ; }

table.line_spacing_1   th { padding-bottom: 0em   ; }
table.line_spacing_1_5 th { padding-bottom: 0.5em ; }
table.line_spacing_2   th { padding-bottom: 1em   ; }

ol.list-style-none , /* obsolete - do not use in new code */
ul.list-style-none   /* obsolete - do not use in new code */
{
  list-style-type: none ;
}

ol.list_style_none ,
ul.list_style_none
{
  list-style-type: none ;
}

*.list_style_none li
{
  margin-left: 0em ;
}


ul.inline_list ,
ol.inline_list
{
  display: inline;
}

*.inline_list li
{
  margin-left    : 0px    ;
  margin-right   : 10px   ;
  list-style-type: none   ;
  display        : inline ;
}

/****************************************
** for layout tables
****************************************/

table.layout_table,
table.layout_table table
{
  margin-bottom    : 20px     ;
  border-collapse  : collapse ;
  border-style     : none     ;
}

table.layout_table caption
{ margin-bottom    : 2px      ; /* not recognized in IE6 standards mode */
  border-style     : none     ;
  padding          : 2px      ;
  text-align       : left     ;
  vertical-align   : bottom   ;
  font-weight      : bold     ;
}

table.layout_table tfoot
{ border-style     : none     ;
  padding          : 2px      ;
  vertical-align   : top      ;
  font-weight      : bold     ;
}

table.layout_table th
{ border-style     : none     ;
  padding          : 2px      ;
  text-align       : left     ;
  vertical-align   : top      ;
  font-weight      : bold     ;
}

table.layout_table td
{ border-style     : none     ;
  padding          : 2px      ;
  text-align       : left     ;
  vertical-align   : top      ;
}

table.layout_table li
{ margin-left       : 1.5em   ; }

table.layout_table tfoot *
{ padding-top: 1em ; }

table.layout_table tr.odd_row td
{
  background-color: #EBF0F5 ;
  color           : #333399 ;

}

table.layout_table button,
table.layout_table *.button
{
  border-bottom    : 1px solid #336699 ;
  font-weight      : bold              ;
  text-decoration  : none              ;
}

table.vertical_align_middle td ,
table.vertical_align_middle th
{ vertical-align: middle ; }


/****************************************
** for layout tables
****************************************/

table.layout_table_2,
table.layout_table_2 table
{
  margin-bottom    : 0px      ;
  border-collapse  : collapse ;
  border-style     : none     ;
}

table.layout_table_2 th ,
table.layout_table_2 td
{ border-style: none ; }

table.layout_table_2 tr.odd_row td
{
  background-color: #EBF0F5 ;
  color           : #333399 ;
}


/****************************************
** for data tables
****************************************/

table.data_table,
table.data_table table
{ margin-bottom    : 20px     ;
  border-collapse  : collapse ;
  border-width     : 1px      ;
  border-style     : solid    ;
  border-color     : #CCD9E5  ;
  background-color : #FFFFFF  ;
  color            : #333399  ;
}

table.data_table caption
{ /* margin-bottom    : 2px      ; not recognized in IE6 standards mode; using border-bottom instead */
  border-width     : 1px      ;
  border-style     : solid    ;
  border-color     : #CCD9E5  ;
  border-bottom    : 1.5em solid #FFFFFF ;
  padding-left     : 0.5em    ;
  padding-right    : 0.5em    ;
  padding-top      : 2px      ;
  padding-bottom   : 2px      ;
  background-color : #CCD9E5  ;
  color            : #336699  ;
  text-align       : center   ;
  vertical-align   : bottom   ;
  font-weight      : bold     ;
}

table.data_table tfoot
{ border-width     : 1px      ;
  border-style     : solid    ;
  border-color     : #CCD9E5  ;
  padding          : 2px      ;
  background-color : #EBF0F5  ;
  color            : #336699  ;
  vertical-align   : top      ;
  font-weight      : bold     ;
}

table.data_table th
{ border-width     : 1px      ;
  border-style     : solid    ;
  border-color     : #FFFFFF  ;  /* Opera and Firefox uses this for the extreme left and right border color in a row
                                    while IE uses the table border color */
  padding-left     : 0.5em    ;
  padding-right    : 0.5em    ;
  padding-top      : 2px      ;
  padding-bottom   : 2px      ;
  background-color : #CCD9E5  ;
  color            : #336699  ;
  text-align       : left     ;
  vertical-align   : top      ;
  font-weight      : bold     ;
}

table.data_table td
{ border-width     : 1px      ;
  border-style     : solid    ;
  border-color     : #CCD9E5  ;
  padding-left     : 0.5em    ;
  padding-right    : 0.5em    ;
  padding-top      : 2px      ;
  padding-bottom   : 2px      ;
  background-color : #FFFFFF  ;
  color            : #333399  ;
  text-align       : left     ;
  vertical-align   : top      ;
}

table.data_table li
{ margin-left       : 1.5em   ;
}

table.data_table tr.odd_row td
{
  background-color: #EBF0F5 ;
  color           : #333399 ;
}

table.data_table button ,
table.data_table *.button
{
  border-bottom    : 1px solid #336699 ;
  background-color : #FFFFFF           ;
  color            : #333399           ;
  font-weight      : bold              ;
  text-decoration  : none              ;
}


/****************************************
** for code tables
****************************************/

table.code_table,
table.code_table table
{
  margin-top       : 0px      ;
  margin-left      : 0px      ;
  margin-bottom    : 20px     ;
  border-collapse  : separate ;
  border-style     : none     ;
  border-spacing   : 10px     ; /* not recognized in IE6,7 use cellspacing */
}

table.code_table caption
{ border-style     : none     ;
  text-align       : left     ;
  vertical-align   : bottom   ;
  font-weight      : bold     ;
}

table.code_table tfoot
{ border-style     : none     ;
  vertical-align   : top      ;
  font-weight      : bold     ;
}

table.code_table th
{
  border-style     : none     ;
  text-align       : center   ;
  vertical-align   : top      ;
  font-weight      : bold     ;
}


table.code_table td.code
{ border-width     : 1px      ;
  border-style     : dashed   ;
  border-color     : #336699  ;
}



/****************************************
** for page titles
**
** note: logo.png is 70px high
**
****************************************/

/* with search box */

table.page_title
{
  width            : 100%    ;
  height           : 110px   ;
  margin-bottom    : 15px    ;
}

table.page_title td.logo
{
  width            : 80%    ;
  border-right     : 15px solid #FFFFFF ;
  padding-top      : 20px   ;              /* == td.search_box border-top + padding-top = 7+13 = 20px */
  padding-bottom   : 20px   ;
  padding-left     : 20px   ;
  padding-right    : 20px   ;
  background-color : #336699 ;
  color            : #FFFFFF ;
}

table.page_title td.search_box
{

  border           : 7px solid #336699 ;
  padding-top      : 13px    ;
  padding-bottom   : 5px     ;            /* use 10px for MSN search box */
  padding-left     : 10px    ;
  padding-right    : 10px    ;
  background-color : #FFFFFF ;
  color            : #000000 ;
  vertical-align   : bottom  ;
}

td.search_box h1
{
  color           : #993366 ;
  background-color: #FFFFFF ;
  font-weight     : bold ;
}

td.search_box td ,
td.search_box label ,
td.search_box font
{
  color           : #333399 ;
  background-color: #FFFFFF ;
}

td.search_box h1
{
  margin-bottom : 10px ;
}

td.search_box h1
{
  text-align : left ;
}


table.page_title td.search_box table
{
  margin-bottom: 0px ;
}

table.page_title input
{
  color: #000000 ;
}

/* without search box */

div.page_title
{
  width            : 100%    ;
  margin-bottom    : 15px    ;
  padding-top      : 20px    ;
  padding-bottom   : 20px    ;
  padding-left     : 0em     ; /* should be 20px, but Firefox calculates total width wrong; HTML spacer used instead */
  background-color : #336699 ;
  color            : #FFFFFF ;
}


/****************************************
** for navigation elements
****************************************/

/******************************
** nav_1
*******************************/

div.nav_1 { margin-bottom : 20px ; }

div.nav_1
{
  clear           : left    ;
  padding-top     : 0.2em   ;
  padding-right   : 0.5em   ;
  padding-bottom  : 0.2em   ;
  padding-left    : 20px    ;
  background-color: #336699 ;
  color           : #FFFFFF ;
}

div.nav_1 a
{
  padding-right : 1em ;
}

*.nav_1 a:link              { color: #FFFFFF ; background-color: #336699 ; text-decoration: none      ; }
*.nav_1 a:visited           { color: #FFFFFF ; background-color: #336699 ; text-decoration: none      ; }
*.nav_1 a:hover             { color: #FFFFFF ; background-color: #336699 ; text-decoration: underline ; }
*.nav_1 *.current a:link    { color: #FFFFFF ; background-color: #336699 ; text-decoration: none      ; font-weight: bold ; }
*.nav_1 *.current a:visited { color: #FFFFFF ; background-color: #336699 ; text-decoration: none      ; font-weight: bold ; }
*.nav_1 *.current a:hover   { color: #FFFFFF ; background-color: #336699 ; text-decoration: underline ; font-weight: bold ; }


/*
div.nav_1
{
  margin-bottom   : 20px    ;
  border-width    : 1px     ;
  border-style    : solid   ;
  border-color    : #336699 ;
  padding-top     : 0.2em   ;
  padding-right   : 0.5em   ;
  padding-bottom  : 0.2em   ;
  padding-left    : 20px    ;
  background-color: #CCD9E5 ;
  color           : #336699 ;
}

*.nav_1 a:link              { color: #336699 ; background-color: #CCD9E5 ; text-decoration: none      ; }
*.nav_1 a:visited           { color: #336699 ; background-color: #CCD9E5 ; text-decoration: none      ; }
*.nav_1 a:hover             { color: #336699 ; background-color: #CCD9E5 ; text-decoration: underline ; }
*.nav_1 *.current a:link    { color: #336699 ; background-color: #CCD9E5 ; text-decoration: none      ; font-weight: bold ; }
*.nav_1 *.current a:visited { color: #336699 ; background-color: #CCD9E5 ; text-decoration: none      ; font-weight: bold ; }
*.nav_1 *.current a:link    { color: #336699 ; background-color: #CCD9E5 ; text-decoration: none      ; font-weight: bold ; }
*/

/******************************
** nav_2
*******************************/
/*
div.nav_2
{
  margin-bottom   : 20px    ;
  border-width    : 1px     ;
  border-style    : solid   ;
  border-color    : #336699 ;
  padding-top     : 0.2em   ;
  padding-right   : 0.5em   ;
  padding-bottom  : 0.2em   ;
  padding-left    : 20px    ;
  background-color: #CCD9E5 ;
  color           : #336699 ;
}

*.nav_2 a:link              { color: #336699 ; background-color: #CCD9E5 ; text-decoration: none      ; }
*.nav_2 a:visited           { color: #336699 ; background-color: #CCD9E5 ; text-decoration: none      ; }
*.nav_2 a:hover             { color: #336699 ; background-color: #CCD9E5 ; text-decoration: underline ; }
*.nav_2 *.current a:link    { color: #336699 ; background-color: #CCD9E5 ; text-decoration: none      ; font-weight: bold ; }
*.nav_2 *.current a:visited { color: #336699 ; background-color: #CCD9E5 ; text-decoration: none      ; font-weight: bold ; }
*.nav_2 *.current a:link    { color: #336699 ; background-color: #CCD9E5 ; text-decoration: none      ; font-weight: bold ; }
*/


/******************************
** nav_3
*******************************/

table.nav_3
{
  table-layout    : fixed   ;
  width           : 180px   ;
  margin-bottom   : 0px     ;
  border-width    : 1px     ;
  border-style    : solid   ;
  border-color    : #336699 ;
}

*.nav_3 ,
*.nav_3 * ,
*.nav_3 a:link ,
*.nav_3 a:visited ,
*.nav_3 a:hover ,
*.nav_3 *.current a:link ,
*.nav_3 *.current a:visited ,
*.nav_3 *.current a:link
{
  background-color: #CCD9E5 ;
  color           : #336699 ;
}


table.nav_3 *.current
{
  font-weight: bold ;
}

table.nav_3 th
{
  border-bottom   : 1px solid #336699 ;
  padding-left    : 0.25em ;
  padding-right   : 0.25em ;
  padding-top     : 0.25em ;
  padding-bottom  : 0.25em ;
  text-align      : left   ;
  vertical-align  : middle ;
  font-weight     : normal ;
}

table.nav_3 td
{
  padding-left    : 0.25em ;
  padding-right   : 0.25em  ;
  padding-top     : 0.25em ;
  padding-bottom  : 0.25em ;
  text-align      : left   ;
  vertical-align  : middle ;
}

table.nav_3 td.nav_3_expand_control
{
  padding-left    : 0.5em ;
  padding-right   : 0em  ;
  padding-top     : 0.25em ;
  padding-bottom  : 0.25em ;
  text-align      : right  ;
  vertical-align  : middle ;
}

table.nav_3_last
{
  table-layout    : fixed ;
  border-top-style: none  ;
}

table.nav_3_last td.nav_3_last_left
{ border-right    : 1px solid #336699 ;
  padding-left    : 0.25em ;
  padding-right   : 0.25em ;
  padding-top     : 0.25em ;
  padding-bottom  : 0.25em ;
  text-align      : left   ;
  vertical-align  : middle ;
}

table.nav_3_last td.nav_3_last_right
{
  text-align    : right ;
}

*.nav_3 a:link              { text-decoration: none      ; }
*.nav_3 a:visited           { text-decoration: none      ; }
*.nav_3 a:hover             { text-decoration: underline ; }
*.nav_3 *.current a:link    { text-decoration: none      ; font-weight: bold ; }
*.nav_3 *.current a:visited { text-decoration: none      ; font-weight: bold ; }
*.nav_3 *.current a:link    { text-decoration: none      ; font-weight: bold ; }



/******************************
** nav_3a
*******************************/

div.nav_3a
{
  width           : 180px   ;
  margin-top      : 20px    ;
  margin-bottom   : 0px     ;
  border-width    : 1px     ;
  border-style    : solid   ;
  border-color    : #336699 ;
  padding-top     : 10px    ;
  padding-bottom  : 10px    ;
  padding-left    : 0em     ;
  padding-right   : 0em     ;
}

*.nav_3a ,
*.nav_3a * ,
*.nav_3a a:link ,
*.nav_3a a:visited ,
*.nav_3a a:hover ,
*.nav_3a *.current a:link ,
*.nav_3a *.current a:visited ,
*.nav_3a *.current a:link
{
  background-color: #EBF0F5 ;
  color           : #336699 ;
}

div.nav_3a h3 { padding-left: 15px ; padding-right: 15px ; }
div.nav_3a ul { padding-left: 15px ; padding-right: 15px ; }

div.nav_3a h3
{
  background-color: #EBF0F5 ;
  color           : #336699 ;
  font-weight     : bold    ;
  margin-bottom   : 1em     ;
}

*.nav_3a a:link              { text-decoration: none      ; }
*.nav_3a a:visited           { text-decoration: none      ; }
*.nav_3a a:hover             { text-decoration: underline ; }
*.nav_3a *.current a:link    { text-decoration: none      ; font-weight: bold ; }
*.nav_3a *.current a:visited { text-decoration: none      ; font-weight: bold ; }
*.nav_3a *.current a:link    { text-decoration: none      ; font-weight: bold ; }


table.nav_4
{
  width : 100% ;
  margin-bottom : 40px ;
  font-weight : bold ;
  color            : #993366 ;
  background-color : #FFFFFF ;
}

table.nav_4 *
{
  font-weight : bold ;
  color            : #993366 ;
  background-color : #FFFFFF ;
}

td.nav_4_right ,
td.nav_4_right *
{
  text-align : right ;
}

*.nav_4_left_arrow 
{ width: 1em ; }

*.nav_4_right_arrow
{ width: 1em ; }

*.nav_4 a:link    { color: #993366 ; background-color: #FFFFFF ; text-decoration: underline ; }
*.nav_4 a:visited { color: #B25986 ; background-color: #FFFFFF ; text-decoration: underline ; }
*.nav_4 a:hover   { color: #993366 ; background-color: #FFFFFF ; text-decoration: underline ; }


div.linking
{
  margin-bottom   : 20px    ;
  border-width    : 1px     ;
  border-style    : solid   ;
  border-color    : #993366 ;
  padding-top     : 20px    ;
  padding-right   : 20px    ;
  padding-left    : 20px    ;
}

*.nav_4_titles *
{
  background-color: #FFFFFF ;
  color           : #993366 ;
}


ul.link_tree
{
  list-style-type: none ;
}

ul.link_tree li
{
  margin-bottom: 0.5em ;
}


/****************************************

layout table for main body of web pages

Notes:

  o unlike the other settings in this file, spacing between block level elements
    inside body_left is controlled by a combination of margin-top and margin-bottom,
    not just margin-bottom

****************************************/

table.body
{
  width: 100% ;
}

td.body_left
{
  width           : 180px   ; /* note the Google ad will limit the actual width to a minimum of 160px */
  padding-top     : 0em     ;
  padding-bottom  : 0em     ;
  padding-left    : 0em     ;
  padding-right   : 0em     ;
  color           : #333399 ;
  background-color: #FFFFFF ;
}

*.body_left p
{
  margin-top   : 20px ;
  margin-bottom: 0px ;
}


td.body_center
{
  padding-left: 20px ;
}

td.body_right
{
/*  width: 120px ;*/
  padding-left: 20px ;
}

/****************************************
** for external buttons
****************************************/

div.external_buttons
{
  margin-bottom: 20px ;
}

div.external_buttons td
{
  padding-right: 40px ;
  vertical-align: bottom ;
}

div.external_buttons ul
{
  list-style-type: none ;
}

div.external_buttons li
{
  margin-bottom: 5px    ;
  margin-left  : 0em    ;
  white-space  : nowrap ;
}

a:link.external_buttons   , *.external_buttons a:link    { color: #339933 ; background-color: #FFFFFF ; }
a:visited.external_buttons, *.external_buttons a:visited { color: #59B259 ; background-color: #FFFFFF ; }
a:hover.external_buttons  , *.external_buttons a:hover   { color: #339933 ; background-color: #FFFFFF ; }


/****************************************
** for ads
****************************************/

div.ad_label_left ,
span.ad_label_left
{
  text-align : left    ;
  color      : #000000 ;
  font-weight: normal  ;
}

div.ad_label_center ,
span.ad_label_center
{
  text-align : center  ;
  color      : #000000 ;
  font-weight: normal  ;
}

div.ad_label_left ,
div.ad_label_center
{
  margin-top : 20px    ;
}

div.ad_margin
{
  margin-top    : 20px ;
  margin-bottom : 100px ;
}

div.ad_referral_margin
{
  margin-top    : 0px   ;
  margin-bottom : 100px ;
}

/*
div.ad_margin_left_top
{
  margin-top : 20px ;
}

div.ad_margin_left_bottom
{
  margin-top : 100px ;
}
*/

div.ad_link_unit
{
  margin-bottom : 20px   ;
}

div.ad_page_footer
{
  margin-bottom : 20px ;
  text-align    : center ;
}


*.ad_header_bold
{
  background-color : #CCD9E5  ;
  color            : #000000  ;
  font-weight      : bold     ;
}

*.ad_header
{
  background-color : #CCD9E5  ;
  color            : #000000  ;
}

*.ad_link_bold
{
  color           : #333399   ;
  background-color: #FFFFFF   ;
  text-decoration : underline ;
  font-weight     : bold      ;
}

*.ad_link
{
  color           : #333399   ;
  background-color: #FFFFFF   ;
  text-decoration : underline ;
}


div.ad_2_text
{
  width           : 100px   ;
  margin-bottom   : 20px    ;
  border-width    : 1px     ;
  border-style    : solid   ;
  border-color    : #336699 ;
  padding         : 10px    ;
  background-color: #FFFFFF ;
  color           : #336699 ;
  text-align      : left    ;
}


div.ad_2_image
{
  width        : 120px   ;
  margin-bottom: 20px    ;
  border-style : none    ;
  padding      : 0px     ;
}


*.ad_2_header ,
*.ad_2_header a
{
  color           : #000000 ;
  background-color: #FFFFFF ;
}

*.ad_2_title
{
  margin-bottom : 2em    ;
  text-align    : center ;
}

*.ad_2_text a
{
  color           : #336699   ;
  background-color: #FFFFFF   ;
  text-decoration : underline ;
  font-weight     : bold      ;
}

*.ad_2_text a.external
{
  color           : #339933   ;
  background-color: #FFFFFF   ;
  text-decoration : underline ;
  font-weight     : bold      ;
}

*.ad_2 div.ad_label_left ,
*.ad_2 span.ad_label_left
{
  text-align : left    ;
  color      : #000000 ;
  font-weight: normal  ;
}


/****************************************
** warning text
****************************************/

*.warning, *.warning *
{
  color           : #993366 ;
  background-color: #FFFFFF ;
}

*.warning a:link    { color: #993366 ; background-color: #FFFFFF ; text-decoration: underline ; }
*.warning a:visited { color: #B25986 ; background-color: #FFFFFF ; text-decoration: underline ; }
*.warning a:hover   { color: #993366 ; background-color: #FFFFFF ; text-decoration: underline ; }

td.body_right p.warning { width: 100px ; }

/****************************************
** for topics
****************************************/

div.topic ,
table.topic
{
  margin-right  : 0em ;
  margin-left   : 0em ;
  margin-bottom : 40px ;
}

table.topic
{
  table-layout    : fixed ;
}

col.topic_left
{
  width: 70% ;
}

table.topic td
{
  padding-right : 1em ;
}

table.topic div,
table.topic p
{
  margin-bottom : 20px ;
}

td.topic_annotation
{
  border-left     : 1px solid #336699 ;
  padding-top     : 0       ;
  padding-right   : 0       ;
  padding-bottom  : 0       ;
  padding-left    : 0.6em   ;
  background-color: #FFFFFF ;
  color           : #000000 ;
}

td.topic_annotation *
{
  background-color: #FFFFFF ;
  color           : #000000 ;
}

/****************************************
** for Tag tables
** (most settings copied from layout_table_2)
****************************************/

table.tags,
table.tags table
{
  table-layout     : fixed    ;
  width            : 90%      ;
  margin-left      : 2em      ;
  margin-bottom    : 0px      ;
  border-collapse  : collapse ;
  border-style     : none     ;
}

table.tags th ,
table.tags td
{ border-style: none ; }



/****************************************
** for Tutorial Lists
****************************************/
*.tutorial_list a:link    { color: #993366 ; background-color: #FFFFFF }
*.tutorial_list a:visited { color: #993366 ; background-color: #FFFFFF }
*.tutorial_list a:hover   { color: #993366 ; background-color: #FFFFFF }

*.tutorial_list a:link    { text-decoration: none      ;  }
*.tutorial_list a:visited { text-decoration: none      ;  }
*.tutorial_list a:hover   { text-decoration: underline ;  }

*.tutorial_list a         { font-weight: bold ; }

*.tutorial_list ul        { margin-left: 2em; }

/****************************************
** for artwork
****************************************/
div.artwork
{
  color           : #000000 ;
  background-color: white   ;
}

div.statcounter
{
  display: inline ;
}


/****************************************
** for page footer blocks
****************************************/
div.page_footer_start
{
  clear        : left ;
}

table.notes
{
  width         : 100%   ;
  margin-bottom : 40px   ;
}


div.page_footer_block
{
  width         : 100%   ;
  margin-bottom : 20px   ;
  text-align    : center ;
}

div.page_footer_block ,
div.page_footer_block p
{
  width         : 100%   ;
  margin-bottom : 10px   ;
  text-align    : center ;
}


/****************************************
** High Priority Styles
**
** - typically used to slightly modify styles defined above
** - e.g. class="data_table cells_centered"
****************************************/

table.cells_centered th ,
table.cells_centered td
{
  text-align       : center ;
  vertical-align   : middle ;
}

table.cells_text_align_left th ,
table.cells_text_align_left td
{ text-align : left ; }

table.cells_text_align_center th ,
table.cells_text_align_center td
{ text-align : center ; }

table.cells_text_align_right th ,
table.cells_text_align_right td
{ text-align : right ; }

table.cells_vertical_align_left th ,
table.cells_vertical_align_left td
{ vertical-align : left ; }

table.cells_vertical_align_middle th ,
table.cells_vertical_align_middle td
{ vertical-align : middle ; }

table.cells_vertical_align_right th ,
table.cells_vertical_align_right td
{ vertical-align : right ; }



/* Notes:

Colour Palette:

                 Dark   Light  Lighter
                 ------ ------ -------
  Shading Blues: 336699 CCD9E5 EBF0F5
  Text Blues   : 333399 7979C4
  Text Reds    : 993366 B25986
  Text Greens  : 339933 59B259


For Text colors, lighter shades were chosen using http://web.forret.com/tools/rgb_gradient.asp.
The "Gradient: From/To" scale with n=2 was used.

*/


/****************************************
** Styles for Topic 12401
****************************************/

div.orange_wire{ background-color:orange; color:white ; }
div.green_wire { background-color:green ; color:white ; }
div.blue_wire  { background-color:blue  ; color:white ; }
div.brown_wire { background-color:brown ; color:white ; }
div.white_wire { background-color:white ; color:black ; border: 1px solid black ;}
div.black_wire { background-color:black ; color:white ; }
div.red_wire   { background-color:red   ; color:white ; }
div.yellow_wire{ background-color:yellow; color:white ; }

div.white_blue_wire  { border: 1px solid blue  ; background-color:white; color:blue  ; }
div.white_green_wire { border: 1px solid green ; background-color:white; color:green ; }
div.white_orange_wire{ border: 1px solid orange; background-color:white; color:orange; }
div.white_brown_wire { border: 1px solid brown ; background-color:white; color:brown ; }

div.orange_wire       ,
div.green_wire        ,
div.blue_wire         ,
div.brown_wire        ,
div.white_wire        ,
div.black_wire        ,
div.red_wire          ,
div.yellow_wire       ,
div.white_blue_wire   ,
div.white_green_wire  ,
div.white_orange_wire ,
div.white_brown_wire
{
  width        : 3.5em  ;
  height       : 1.25em ;
  margin-top   : 0.5em  ;
  margin-bottom: 0.5em  ;
  font-weight  : bold   ;
  text-align   : center ;
}

*.TIA-570-B { color: #993366 }


/* from http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=1&postId=5341 */

sup, sub
{ height : 0 ;
	line-height : 1 ;
  vertical-align : baseline;
  _vertical-align : bottom;
  position : relative;
}
sup {	bottom : 0.5ex ; }
sub {	top    : 0.5ex ; }