:root{
    --body-text:    #555555;
    --body-bg:      #fafafa;
    --body-header:  Black;
    --box-bg:       #e6e6e6;

    --bullet-red:   #E51400;
    --bullet-green: #2B7E2C;
    --bullet-blue:  #2066CE;
}

*               {padding: 0px; margin: 0px; }

html            {margin-top:1px; }
body            {margin:2px; margin-top:2px; background: var(--body-bg);}

h1              {margin-top:22px; margin-bottom:10px; font-family: Verdana;   font-size: 150%; font-weight: Bold; text-align: left; }
h2              {margin-top:12px; margin-bottom:-4px; margin-left:10; font-family: Verdana;   font-size: medium; font-weight: Bold; text-align: left; }
h3              {font-family: Verdana; margin:10px;   margin-top:15px; margin-bottom: 4px; font-size: 83%; font-weight: Bold; text-align: left; }

p               {font-family: 'Verdana', sans-serif; font-size: 1.1em; line-height: 1.7em; color: var(--body-text);
}

/* trick to make menu dropdown icon (svg) follow style colours etc */
[class^="icon-"] {display: inline-block; stroke-width: 0; stroke: currentColor; fill: currentColor; width: 16px; height: 12px;}

/* a pair of divs
    the outer for containing scrollable content, in place of an iframe
    the inner-level for displaying content in a centered column */
div.scroll      {overflow: auto;}
div.centered    {padding: 1px; height: auto; overflow: auto; max-width: 1330px; margin: 1px auto; }

img             {border: 0; }
table           {border: 0; }
td              {vertical-align: top; }

ul.coloured     {list-style-type: disc; margin:2px; margin-left:8px; margin-top: 10px; margin-bottom:22px;}
ul.bullets      {list-style-type: disc; margin:2px; margin-left:8px; margin-top: 0px; margin-bottom:12px;}
ul.bullets1     {list-style-type: disc; margin:2px; margin-left:26pt; margin-top: 0px; margin-bottom:12px;}
ul.bullets2     {list-style-type: disc; margin:2px; margin-left:46pt; margin-top: 0px; margin-bottom:12px;}
ul.bullets3     {list-style-type: disc; margin:2px; margin-left:66pt; margin-top: 0px; margin-bottom:12px;}

li              {margin:2px; margin-left: 36px; margin-top:0px; margin-bottom:0px;}

p.basic         {                   margin-right: 12px; margin-top: 6px; margin-bottom: 0px}
p.para1         {margin-left: 25pt; margin-right: 12px; margin-top: 6px; margin-bottom: 6px}
p.para2         {margin-left: 45pt; margin-right: 12px; margin-top: 6px; margin-bottom: 6px}
p.para3         {margin-left: 65pt; margin-right: 12px; margin-top: 6px; margin-bottom: 6px}

p.footnotes     {font-size: small; margin-top: 6; margin-bottom: 0px}
p.parahead      {font-size: 1.3em; margin-top: 10px; margin-bottom: 0px; font-weight: Bold; font-style: italic; color: var(--body-header)}

p.section1      {margin-left:10px; margin-top: 10px; margin-bottom: 0px; font-weight: Bold;  font-style: italic}
p.section2      {margin-left:25pt; margin-top: 10px; margin-bottom: 0px; font-style: italic}
p.section3      {margin-left:45pt; margin-top: 10px; margin-bottom: 0px; font-style: italic}
p.divider       {margin-top: -1px; margin-bottom: 0px; image-align: top; vertical-align: top; }
img.divider     {vertical-align: top; width: 100%; height: 7px; }

div.boxed       {
    margin-top: 5pt;
    margin-left: 25pt;
    margin-bottom: 5pt;
    max-width: 1248px;
    padding-top: 5px;
    padding-bottom: 5px;
    /*
    border: 3px solid;
    */
    border-radius: 15px;
    -moz-border-radius: 15px;    
    background: var(--box-bg);
    }

p.red           {font-weight: Bold; color: var(--bullet-red);   margin-left: 2px; margin-top: 1px; margin-bottom: 1px}
p.green         {font-weight: Bold; color: var(--bullet-green); margin-left: 2px; margin-top: 1px; margin-bottom: 1px}
p.blue          {font-weight: Bold; color: var(--bullet-blue);  margin-left: 2px; margin-top: 1px; margin-bottom: 1px}
p.bullet        {                                 margin-left: 2px; margin-top: 3px; margin-bottom: 2px}

p.indented      {margin-left: 20.0pt; margin-right: 12px; margin-top: 6px; margin-bottom: 6px}
p.indscreenshot {margin-left: 20.0pt; margin-top:10px; margin-bottom: 6px}
p.emphasis      {margin-left: 20.0pt; margin-right: 12px; margin-top:12px; margin-bottom:12px; font-size: 150%;}

p.freeshare     {text-align: center; margin-top: -5px; margin-bottom: -4px; ; width: 800px}
p.tinyspacer    {font-size: xx-small; margin-top: 0; margin-bottom: 0px}

/* Stuff for the other gallery tables */
/* previous margins: 5px */
/* previous width: 850px */
table.picframe  {border-spacing: 0px;  width: 830px; margin-left: 5px; margin-top: 5px; margin-bottom: 5px;}
table.picframe1 {border-spacing: 0px; margin-left: 25pt; margin-top: 5px; margin-bottom: 5px;}
table.picframe2 {border-spacing: 0px; margin-left: 45pt; margin-top: 5px; margin-bottom: 5px;}
table.picframe3 {border-spacing: 0px; margin-left: 65pt; margin-top: 5px; margin-bottom: 5px;}
table.welcome   {border-spacing: 0px;  margin-left: 0px;  margin-top: 0px;  margin-bottom: 0px;}
p.welcome       {margin-left: 0px; margin-right: 5px;}

/* used by most framed pictures and their captions */
p.pic           {margin-top: 5px; margin-left: 5px; margin-right: 5px; margin-bottom: 0px; align: center; vertical-align: center;}
p.caption       {margin-top: 0px; margin-left: 10px; margin-right: 10px; margin-bottom: 5px; vertical-align: top; font-size: Medium; font-weight: 500;
}

/* this one for use by picframe1/2/3 */
p.captionx      {margin-bottom: 3px; margin-top: 0px; margin-left: 5px; margin-right: 12px; vertical-align: top; }

/*
Make picture tables behave as single-column tables on mobile
*/
@media
only screen
and (max-width: 760px), (min-device-width: 768px)
and (max-device-width: 1024px)  {
    /* Force table to not be like tables anymore */
    table[class*="picframe"], td[class="piccell"], tr[class="picrow"] {
        display: block;
        width: 95%;
    }
}