/* vw = viewport width with 1vw being 1% and vh = viewport height; alternative fixed sizes given first in case if incompatibility 
sizes used on development machine (1920px x 1080px and x150%) are as follows:-
font-size: 10pt=1.05vw;
font-size: 11pt=1.15vw;
font-size: 14pt=1.45vw;
font-size: 18pt=1.85vw;
font-size: 28pt=2.9vw;
-----------------------
font-size: 22px=1.72vw;

height sizes
56px = 56vh
*/

/* even if no content in the page ensure footer is near bottom of viewport */
html, body { height: 96%; }

div {font-size: 12pt; font-size: 1.2vw; font-family: "Book Antiqua", Garamond; color: #494429;}

/* ADJUST THE HEADER SIZE TO SUIT DISPLAY (mobiles done later) */
/* Height of the div containing the iframe provides the correct place for the next material to be rendered below the header */
/* Note that the default height for the iframe itself is always 150px */
/* Large screen displays */
/* @media only screen and (min-width: 1440px), only screen and (min-device-width: 1440px) */
@media only screen and (min-width: 1440px) 
{
div.header_o { display: block; height: 124px; }
}
/* Non-large screen displays */
/* @media only screen and (max-width: 1440px), only screen and (max-device-width: 1440px) */
@media only screen and (max-width: 1440px)
{
div.header_o { display: block; height: 100px; }
}
/* THE FOLLOWING IS FOR ALL NON-MOBILE SIZE SCREENS */
div.header_m { display: none; }

/* style for footers */
div.footer_o { display: block; height: 100px; height: 11.8vh; }
div.footer_m { display: none; }

/* style for fixed buttons */
div.fbuttons {font-size: 10pt; font-size: 1.05vw; text-align: center;  position: fixed; margin: 0px 0px 0px 6%; left: 0px; max-width: 8%; top: 86px; top: 14vh;}
div.fbuttons2 {font-size: 10pt; font-size: 1.05vw; text-align: center;  position: fixed; margin: 0px 0px 0px 6%; left: 0px; max-width: 8%; top: 96px; display: inline; }
div.fbuttons3 { display: none; }
div.fbuttons4 {font-size: 1.5em; text-align: center;  position: fixed; margin: 0px 0px 0px 6%; left: 0px; max-width: 8%; top: 96px; display: inline; }
p.fbutton2 { border: 2px solid #BCBCBC; padding: 6px; }

/* style for middle columns */
div.middle_index { width: 59%; border-left: 1px solid #BCBCBC; border-right: 1px solid #BCBCBC; margin: 0px 0px 0px 10px; padding: 0px}
div.middle_other { text-align: justify; width: 60%; border-left: 1px solid #BCBCBC; border-right: 1px solid #BCBCBC; margin: 36px 3% 0px 10px; padding: 0px 25px 0px 25px; }
div.middle_other1 { width: 65%; border-left: 1px solid #BCBCBC; border-right: 1px solid #BCBCBC;  margin: 4px 0px 0px 0px; padding: 2px 6px 2px 6px; }
div.middle_other1A { text-align: justify; width: 70%; border-left: 1px solid #BCBCBC; border-right: 1px solid #BCBCBC; margin: 36px 3% 0px 10px; padding: 0px 25px 0px 25px; }
div.middle_smsfdocs { max-width: 70%; position: relative; margin: 0px 0px 0px 15%; min-height: 430px; }
div.middle_other2 { width: 77%; border-left: 1px solid #BCBCBC; border-right: 1px solid #BCBCBC;  margin: 4px 0px 0px 0px; padding: 2px 6px 2px 6px; }
div.middlebox {width: 65%; outline: 4px solid Wheat; margin: 36px 3% 0px 10px; padding: 0px 25px 0px 25px;}
div.middlefillform {width: 77%; border-left: 1px solid #BCBCBC; border-right: 1px solid #BCBCBC; margin: 0; padding: 0;}
div.middlechoice {width: 70%; border-left: 1px solid #BCBCBC; border-right: 1px solid #BCBCBC; margin: 56px 3% 0px 10px; padding: 0px 25px 0px 25px; }
div.middlesitemap { width: 60%; border: 2px solid #BCBCBC; margin: 36px 3% 0px 10px; padding: 0px 25px 0px 25px; font-size: 1.15em;}
div.middlemax {width: 90%; border-left: 1px solid #BCBCBC; border-right: 1px solid #BCBCBC; margin: 56px 3% 0px 10px; padding: 0px 25px 0px 25px; }

/* styles used in various right hand columns (use % for max-width to avoid overlap when zoomed) */
div.r-index {font-size: 10pt; font-size: 1.05vw; text-align: justify;  position: absolute; top: -16px; margin-top: 0px; right: 0px; max-width: 37%; }

/* styles for right hand column */
div.r-art {font-size: 10pt; font-size: 1.05vw; text-align: justify;  position: absolute; top: -12px; margin-top: 0px; right: 2px; max-width: 27%; }
div.r-artS {font-size: 10pt; font-size: 1.05vw; text-align: justify;  position: absolute; top: 46px; margin-top: 0px; right: 2px; max-width: 27%; }
div.r-artL { font-size: 10pt; font-size: 1.05vw; position: absolute; margin-top: 0px; right: 2px; max-width: 20%; top: 46px; }
div.r-artF { font-size: 10pt; font-size: 1.05vw; position: absolute; margin-top: 0px; right: -6px; max-width: 20%; top: 46px; }

div.r-checkout {font-size: 10pt; font-size: 1.05vw; text-align: justify;  position: absolute; top: 60px; right: 0px; max-width: 200px; }
div.r-ocheckout {font-size: 10pt; font-size: 1.05vw; text-align: justify;  position: absolute; top: 30px; right: 0px; max-width: 200px; }

/* styles used in right hand column if sized by image (use % for max-width to avoid overlap when zoomed) */
div.n {font-size: 10pt; font-size: 1.05vw; text-align: justify;  position: absolute; right: 0px;  max-width: 24%; top: 44px; }
div.nS {font-size: 10pt; font-size: 1.05vw; text-align: justify;  position: absolute; right: 0px;  max-width: 28%; top: 20px; }

/* styles used bottom wide box */
div.z {font-size: 10pt; font-size: 1.05vw; text-align: justify;  position: relative;  width: 100%; }

/* styles used in tables */
div.ltcol { position:absolute; top:0; bottom:0; left:0; width: 14em; height: 1em; padding: 5px; text-align: right;}
div.rtcol { margin-left: 18em; padding: 5px; text-align: left; height: auto; min-height: 1em;  }
/* input.rtcol { width: 50%; float: right; padding: 5px; text-align: left; border:1; font-family: inherit; font-size: inherit;} */

/* styles used to blank out */
div.revision {font-size: 10pt; color: olive; }

/* styles used to inset things */
div.good_inset1 { margin: 10px 0 10px 60px; width: 100%; }

/* styles used for various sizes of container (container enables a page-wide box if required) */
div.container-index { max-width: 76%; position: relative; margin: 0px 0px 0px 15%; min-height: 380px; }
div.container-800 { max-width: 65%; position: relative; margin: auto; min-height: 380px; }
div.container-875 { max-width: 67.5%; position: relative; margin: auto; min-height: 380px; }
div.container-900 { max-width: 70%; position: relative; margin: auto; min-height: 380px; }
div.container-900S { max-width: 70%; position: relative; margin: auto; min-height: 380px; }
div.container-920 { max-width: 72%; position: relative; margin: auto; min-height: 380px; }
div.container-950 { max-width: 72%; position: relative; margin: auto; min-height: 380px; }
div.container-950S { max-width: 72%; position: relative; margin: auto; min-height: 380px; }
div.container-1000 { max-width: 74%; position: relative; margin: auto; min-height: 380px; }

div.concern { border: 2px outset black; width: auto; margin: 0px 6px 0px 6px;}

/* popups with fixed fonts but which need to change in size depending on screen */
div.popup25 {position: fixed; display: none; width: 25%; height: auto; margin: auto; top: 25%; left: 25%; right: 25%; border: goldenrod solid 4px; background-color: palegoldenrod; color: #1F497D; padding: 16px 20px 16px 20px; font-size: 11pt;  text-align:justify; z-index: 1000;}
div.popup55 { position: fixed; display: none; width: 55%; height: 65%; top: 17.5%; right: 22.5%; border: goldenrod solid 4px; background-color: palegoldenrod; z-index: 1000; }
div.popup55A { position: fixed; display: none; width: 55%; height: 65%; top: 17.5%; right: 22.5%; border: palegoldenrod solid 4px; background-color: cornsilk; z-index: 1000; }
div.popup55B { position: fixed; display: none; width: 55%; height: 65%; top: 17.5%; right: 22.5%; border: palegoldenrod solid 4px; background-color: beige; z-index: 1000; }
div.popup65 { position: fixed; display: none; width: 65%; height: 70%; top: 15%; right: 16%; border: palegoldenrod solid 4px; background-color: beige; z-index: 1000; }
div.moreA { position: absolute; display: none; width: 35%; height: auto; margin: auto; top: 25%; left: 25%; right: 25%; border: goldenrod solid 4px; background-color: palegoldenrod;  color: #1F497D; padding: 16px 20px 16px 20px; text-align:justify;  z-index: 1000;}
div.moreB {position: absolute; display: none; width: 46%; height: auto; margin: auto; top: 25%; left: 25%; right: 25%; border: goldenrod solid 4px; background-color: palegoldenrod; color: #1F497D; padding: 16px 20px 16px 20px; font-size: 11pt;  text-align:justify; z-index: 1000;}
div.moreC {position: absolute; display: none; width: 52%; height: auto; margin: auto; top: 25%; left: 24%; right: 24%; border: goldenrod solid 4px; background-color: palegoldenrod; color: #1F497D; padding: 16px 20px 16px 20px; font-size: 11pt;  text-align:justify; z-index: 1000;}
div.moreD {position: absolute; display: none; width: 65%; height: auto; margin: auto; top: 8%; left: 18%; right: 18%; border: goldenrod solid 4px; background-color: palegoldenrod; color: #1F497D; padding: 16px 20px 16px 20px; font-size: 11pt;  text-align:justify; z-index: 1000;}

table.static {font-size: 11pt; font-size: 1.15vw; font-family: "Book Antiqua", Garamond; color: #1C1C1C; padding: 0px; width: 100%; margin: 0px; border-collapse: collapse; }
table.insert {font-size: 11pt; font-family: "Book Antiqua", Garamond; color: black; border: 0px; text-align:justify; }
td.static { border: 1px solid #202020; padding: 12px; } 
td.static2 { border-bottom: 1px solid #C0C0C0; padding: 12px; } 
td.out6 {border: 2px dotted Wheat; color: DimGray;}
td.smsfsubject {color: #9BBB59; font-size: 28pt; font-size: 2.9vw; vertical-align: top; width: 56%;}
span.smsfdescription {font-family: Calibri, Arial; color: #9BBB59; font-size: 14pt; font-size: 1.45vw;}

td.cart { border: 0; padding: 0px; text-align: right; } 
p.cartcol { font-size: 10pt; color: #000000; }
p.rightlinks1 { padding: 0px 8px 0px 8px; }
p.rightlinks2 { border: 2px solid #BCBCBC; padding: 8px; }
p.navline { padding: 0 0 0 13px}

a:link { color: black; }9
a:visited { color: black; }

/* styles used for the mouseovers in the subject pages */
span.mo { width:100%; text-decoration: underline; margin: 0 0 4px 0; text-align: center; display: block; font-weight: bold; }
div.mos { position:relative; cursor:default; }
div.mos2 { position:relative; cursor:default; text-align: left; }
/* use far left instead of display:none to allow screen reader to see text */
div.mo { display:inline; position:absolute; left: -10000px; top: auto; right: 102%; 
	border: goldenrod solid 4px; background-color: palegoldenrod; color: #1F497D; padding: 16px 20px 16px 20px; 
	font-size: 11pt;  text-align:justify; }
/* use far left instead of display:none to allow screen reader to see text */
div.mo2 { display:inline; position:absolute; left: -10000px; top: auto; right: -288px; 
	border: goldenrod solid 4px; background-color: palegoldenrod; color: #1F497D; padding: 16px 20px 16px 20px; 
	font-size: 11pt;  text-align:justify; }
/* for mouseover image */	
div.mo3 { display:none; position:absolute; z-index: 10000; }
/* had to use display:none find anotehr way to allow screen reader to see text */
span.held { display: none; position:absolute; border: goldenrod solid 1px; background-color: palegoldenrod; color: #1F497D; padding: 6px; font-size: 10pt;  text-align:justify; }

img.sp { margin-left: auto; margin-right: auto; display: block; }

.testydiv { max-width: 950px; margin: 6px auto 0 auto; padding: 0px; height: 52px; display: block; }
.testydiv_m { display: none; }
.testytd { padding: 4px 4px 4px 4px;  display: block;  vertical-align: middle;  text-align: center;  }
.testimonials{ font-style: italic; border: 1px solid black; padding: 4px 4px 4px 4px;  display: block;  vertical-align: middle;  text-align: center;  }

/*-------------------------------------------------------------------------------------------------- */
/* @media only screen and (max-width: 900px), only screen and (max-device-width: 900px) */
@media only screen and (max-width: 900px)
{
/* style for headers */
div.header_o { display: none; }
div.header_m { display: block; height: 80px; }		/* height same as for iframe in the pages */

/* style for footers */
div.footer_o { display: none; }
div.footer_m { display: block; background-color: oldlace; margin: 0px; padding: 0px; }

/* for small screen restore original fonts and sizes which may have been altered by using vw or vh */
div {font-size: 12pt;}
table.static {font-size: 11pt; }
td.smsfsubject {font-size: 28pt; }
span.smsfdescription {font-size: 14pt; }

div.good_inset1 { margin: 10px 0 10px 0px; width: 100%; }

/* mouseovers in smsfdocs page */
div.mo { display:inline; position:absolute; left: -10000px; top: auto; right: 102%; 
	border: goldenrod solid 4px; background-color: palegoldenrod; color: #1F497D; padding: 16px 20px 16px 20px; 
	font-size: 11pt;  text-align:justify; zoom: 0.9; -moz-transform: scale(0.9);}

/* small screen style for fixed buttons */
div.fbuttons {font-size: 10pt; text-align: center;  position: relative; margin: 0px 0px 0px 6%; left: 0px; max-width: 90%; top: 0px; }
div.fbuttons2 { display: none; }
div.fbuttons3 {position: relative; margin: 0 auto 0 auto; padding: 0; width: auto; top: 0px; display: block; height: auto; }
div.fbutton3 { font-size: 12pt; border: 2px solid #BCBCBC; padding: 6px; margin: 10px 1% 14px 1%; text-align: center; vertical-align: middle; width: auto; display: inline-block; }
div.fbuttons4 { display: none; }

/* style for containers */
div.container-index { max-width: 100%; width: 100%; position: relative; margin: 0px; min-height: auto; }
div.container-800 { max-width: 100%; width: 100%; position: relative; margin: 0px; min-height: auto; }
div.container-900S { max-width: 100%; width: 100%; position: relative; margin: 0px; min-height: auto; }
div.container-950S { max-width: 100%; width: 100%; position: relative; margin: 0px; min-height: auto; }

/* style for middle columns */
div.middle_index { width: 100%; border: 0; margin: 12px 0px 0px 0px; padding: 0px;}
div.middle_other { text-align: justify; width: 100%; border: 0; margin: 12px 0px 0px 0px; padding: 0px; }
div.middle_other1 { width: 100%; border: 0; margin: 4px 0px 0px 0px; padding: 2px 6px 2px 6px; }
div.middle_other1A { width: 100%; border: 0; margin: 4px 0px 0px 0px; padding: 2px 6px 2px 6px; }
div.middle_smsfdocs { max-width: 100%; border: 0; position: relative; margin: 0px; }
div.middle_other2 { width: 100%; border: 0;  margin: 4px 0px 0px 0px; padding: 2px 6px 2px 6px; }
div.middlebox {width: 100%; margin: 0; padding: 0}
div.middlefillform {width: 100%; border-left: 1px solid #BCBCBC; border-right: 1px solid #BCBCBC; }
div.middlechoice {width: 100%; margin: 4px 0px 0px 0px; padding: 2px 6px 2px 6px; }
div.middlesitemap { width: 100%; border: 0; margin: 12px 0px 0px 0px; padding: 0; font-size: 1em;}

/* styles used in various right hand columns (small screen variations) */
div.r-index {font-size: 10pt; text-align: justify;  position: relative; top: 0px; margin-top: 0px; right: 0px; width: 100%; max-width: 100%; }
div.r-art {font-size: 10pt; text-align: justify;  position: relative; top: 0px; right: 0px; max-width: 100%; }
div.r-artS {font-size: 10pt; text-align: justify;  position: relative; top: 0px; margin-top: 0px; right: 0px; width: 100%; max-width: 100%; }
div.r-artF { font-size: 10pt; position: relative; margin-top: 0px; right: 0px; max-width: 100%; top: 0px; }
div.r-artL { font-size: 10pt; position: relative; right: 0px; max-width: 100%; top: 0px; }
div.r-checkout {font-size: 10pt; text-align: justify;  position: relative; top: 0px; margin-top: 0px; right: 0px; width: 100%; max-width: 100%; }
div.r-ocheckout {font-size: 10pt; text-align: justify;  position: relative; top: 0px; margin-top: 0px; right: 0px; width: 100%; max-width: 100%;}

/* styles used in right hand column if sized by image (poss use % for max-width to avoid overlap when zoomed, otherwise px to limit image size) */
div.n {font-size: 10pt; text-align: justify;  position: relative; width: 100%; max-width: 320px; top:0px; margin: 0 auto; }
div.nS {font-size: 10pt; text-align: justify;  position: relative; right: 0px;  width: 100%; max-width: 100%; top:10px;  }

div.popup25 { width: 65%; top: 10%; left: 10%; right: 10%; }
div.popup55 { width: 85%; height: 85%; top: 7.5%; right: 7.5%; }
div.popup55A { width: 85%; height: 85%; top: 7.5%; right: 7.5%; }
div.popup55B { width: 85%; height: 85%; top: 7.5%; right: 7.5%; }
div.popup65 { width: 85%; height: 85%; top: 7.5%; right: 7.5%; }
div.moreA {width: 65%; top: 5%; left: 15%; right: 15%; }
div.moreB {width: 76%; top: 5%; left: 10%; right: 10%; }
div.moreC {width: 80%; top: 4%; left: 8%; right: 8%; }
div.moreD {width: 85%; top: 0%; left: 6%; right: 7%; }

p.rightlinks1 { line-height: 2em; }
p.rightlinks2 { line-height: 2em; }
p.navline { padding: 0}

div.star_vis { visibility: hidden }

.testydiv { display: none; }
.testydiv_m { max-width: 950px; margin: 0 auto 0 auto; padding: 0; height: 130px; display: block; top: 0px; }
.testimonials{ font-style: italic; border: 1px solid black;  background-color: palegoldenrod; padding: 4px 4px 4px 4px;  display: block;  vertical-align: middle;  text-align: center;  }
}
/* other adjustments for large screens */
/* @media only screen and (min-width: 1440px), only screen and (min-device-width: 1440px) */
@media only screen and (min-width: 1440px)
{
div.popup55 { width: 38%; height: 52%; top: 24%; right: 31%; }
div.popup55A { width: 38%; height: 52%; top: 24%; right: 31%; }
div.popup55B { width: 38%; height: 52%; top: 24%; right: 31%; }
div.popup65 { width: 38%; height: 56%; top: 22%; right: 31%; }
}
/* styles used in php pages to create the more sidetab sitting on the side of a button */
button.morebtn 
{ 
width: 100%; 
padding: 6px; 
font-size:1em; 
margin-right: 14px; 
border: 2px solid olive; 
cursor: pointer; 
color: olive; 
height: 9em; 
z-index:4; 
}
div.moreptr 
{
cursor: pointer; 
z-index:1;
}
div.moretab 
{
border: 1px solid olive; 
border-bottom: 0px; 
z-index:3;	
height:17px;
width:34px;
position:absolute; 
right:-34px; 
top:20px;
padding: 2px 6px 2px 6px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
div.moretxt 
{
z-index:2;	
position:absolute; 
right: -14px; 
xright: 0px; 
top:14px; 
font-family: Arial, sans-serif;
font-size: 12px; 
font-weight: bold; 
line-height: 0.8em; 
text-align: center;
}
div.moretableft 
{
border: 1px solid olive; 
border-bottom: 0px; 
z-index:3;	
height:17px;
width:34px;
position:absolute; 
left:-20px; 
top:20px;
padding: 2px 6px 2px 6px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
div.moretxtleft 
{
z-index:2;	
position:absolute; 
left: 0px; 
top:14px; 
font-family: Arial, sans-serif;
font-size: 12px; 
font-weight: bold; 
line-height: 0.8em; 
text-align: center;
}