/*STYLESHEET CREATED FEB 2017 FOR HTML5 PAGES ONLY*/

.head
{
   color:black;background:silver;
}
.footer
{
    color:black;background:silver;
}

/*GENERAL - ALL TEXT*/
.blue{color:rgb(0,0,255)}

/*HEADINGS*/
h1{color:RGB(0,0,0);}
h1.head{font:'Bookman Old Style';font-weight:bold}
h1.title{color:black;font-size:30px;text-align:center;font-variant:small-caps}
h2.blue-para-hdg {color:rgb(0,0,255);text-align:center;}
h3.blue-para-hdg{color:rgb(0,0,255);text-align:center;}
h2.ex {color: rgb(255,0,0);}
h2.head{color:rgb(0, 0, 0);text-align:center;}
h3.teal{color:teal;}
/*small header text that is centred within page or container*/
h3.centre{text-align:center;}



/*IMAGES*/
img.rt{float:right;}
img.lt{float:left;
    height: 158px;
    width: 198px;
}
img.top{float:top;}
/*Logos to flank title area at top of each page*/
img.fourelmslogo-left{float:left;height:60px;width:80px}
img.fourelmslogo-right{float:right;height:60px;width:80px}
/*small telephone icon*/
img.phone{height:25px; width:25px}
/*small images that can fit to the left or right of paragraph text*/
img.portrait-small-lt{width:100%;} /*width is relative to the containing div element - place with div.portrait-small-lt*/
img.portrait-small-rt{width:100%} /*width relative to container - always place within div.portrait-small-rt*/

/*long thin images that fit to right or left of text: use with div.extraWide-small-[rt/lt] inline containers*/
img.extraWide-small-lt{width:100%;} /*width is relative to the containing div element - place with div.extraWide-small-lt*/
img.extraWide-small-rt{width:100%} /*width relative to container - always place within div.extraWide-small-rt*/

 /*alternative to positioning images in horizontal row with table, but table is easier*/
img.oneOfThreeInARow{position:relative;left:0px;width:30%;border:20px;border-style:solid;border-color:aquamarine;height:450px;}

/*DIV ELEMENTS FOR DUAL COLUMNS*/
/*container for both columns - in liquid format (i.e. scales to width of web page display on mobile device or PC)
    The first set of settings are where pictures are not too wide and only occupy 20% of the webpage width, with 
    remaining 80% (actually 78% as there is 2% padding surrounding the image) apportioned to the text.
*/
div.mainContainer{float:left;width:100%}
/*right hand usually wider container for text to right of image*/
div.textRtOfImgPortrait-small-lt{clear:right;float:right;width:78%;display:inline}
/*left hand usually narrower container for the small portrait image on the left. Padding keeps image away from touching text on right*/
div.portrait-small-lt{clear:left;float:left;width:20%;height:auto;display:inline;padding-right:1%;padding-top:1%;padding-bottom:1%}
/*Now similar for the image on the right of the page */
div.textLtOfImgPortrait-small-rt{clear:left;float:left;width:78%;display:inline}
div.portrait-small-rt{clear:right;float:right;width:20%;height:auto;display:inline;padding-left:1%;padding-top:1%;padding-bottom:1%}

/*div elements for splitting web page width between longer but still small pictures where image width is over twice the image height
    and the text which accompanies the images.
    In this case the web page width is split equally between image and text
*/
/*for text to the right of a picture on the left of page*/
div.textRtOfImgExtraWide-small-lt{clear:right;float:right;width:50%;display:inline}
/*for the short but wide strip picture*/
div.extraWide-small-lt{clear:left;float:left;width:48%;height:auto;display:inline;padding-right:1%;padding-top:1%;padding-bottom:1%}
/*for the text to the left of a picture positioned against right of page*/
div.textLtOfImgExtraWide-small-rt{clear:left;float:left;width:50%;display:inline}
/*for the image*/
div.extraWide-small-rt{clear:right;float:right;width:48%;height:auto;display:inline;padding-left:1%;padding-top:1%;padding-bottom:1%}

/*PARAGRAPHS*/
p.teal_medium{color:teal;font-size:16px;}
p.red{color:red;}
p.ornate{color:darkblue;font-size:16px;font-weight:bold;}
p.ornate:first-letter{color:#ff0000;font-size:x-large;}
/*in p.lt the clear:left is essential to prevent any elements being placed to left of the paragraph. When it falls below another p.lt which is offset
    to the left of an image, it can squeeze in below the image, overlap the upper p.lt in height dimension, and go no further left than the right border
     of the impinging lower part of the upper p.lt paragraph.  The clear:left prevents this and ensures the paragraph goes below the one above
    and takes up the full width of the web page.*/

p.lt{float:left;margin-right:20px;margin-bottom:auto;margin-top:inherit;margin-left:2%}
/*in p.rt the clear:right is essential in liquid formatting to prevent any elements being placed to right of the paragraph. 
    When it falls below another p.rt which is offset
    to the right of an image, it can squeeze in below the image, overlap the upper p.rt in height dimension, and go no further right than the left border
     of the impinging lower part of the upper p.rt paragraph.  The clear:right prevents this and ensures the paragraph is fitted below the one above
    and takes up the full width of the web page.*/
p.rt{float:right;margin-left:20px;margin-bottom:auto;margin-top:auto;margin-right:2%;clear:right}

/*paragraph with text centred within page or container*/
p.centre{text-align:center}

/*FONTS*/
.red{color:red;}
.teal_large{color:teal;font-size:18px;}
.black{color:black;font-size:18px;}

/*GENERAL POSITIONING*/
.leftOfPage{position:absolute;margin-left:0px;}

/*LINK BUTTONS*/
.but{color:black;font-size:16px;font:bold;background:lightgreen;}<!-- defines the style of the buttons-->

/*GENERAL TABLES*/				 
table,th,td {border:1px solid black}
th,td{text-align:center;}

/*SPECIAL TABLES*/
/*alt styles are for every other row in tables where the rows are to be easily distinguished (use table with many rows)*/
tr.alt td{color:#000000;background-color:#EAF2D3;}
tr.alt td.divide{background-color:white;}
tr.alt th{color:black;background-color:lightgreen;}
tr.alt th.divide{background-color:white;}
/*Next style is for table cells in rows that have been divided into two - for label/value pairs*/
td.divide{background-color:white;}

/*table style below was used for footer showing 1. Links at left to Four Elms home pages and 2. Drop down menu with links to bookkeeping calculators*/				
table.calc,th.calc,td.calc{text-align:left;border:0;}

/*table used to format header*/
table.head{ border:0; width:100%}
table.head td {width:75%}
				
table.nobackgr{background-color:white;width:100%}
table.nobackgrWithTwoColumns
{
    background-color:white;
    width:100%;
}
td.nobackgrWithTwoColumns{width:50%}