<!--
/*-----------------------------------------------------------------------
  Cascading Style Sheet for "Personal Pension Fiasco" Front Page.

  (C) Ian C McInnes, 2017                                                 
------------------------------------------------------------------------*/

/* create a container, whose width is that of the main image, to center */
/* content in the window                                                */
body
{ 
  background:url('Static/Background.jpg');
  margin:0 auto;
  width:700px;
  color:SaddleBrown;
  text-align:justify;
}

/* everything after the heading banner is shifted upwards */
#content { position:relative; top:-70px; }
/* centered text underneath the banner */
p.poref { font:24px Georgia, serif; text-align:center; }
/* text sizes */
.intro { font:24px Georgia, serif; }
.main { font:22px Georgia, serif; }
.subsidiary { font:20px Georgia, serif; }
.note { font:bold 16px Georgia, serif; }
.footnote { font:italic 18px Georgia, serif; }
.warning { font:20px Georgia, serif; color:Red; }
.email { color:Blue; }
.compact { position:relative; top:-12px; }

/* up, left and right arrows to move to home, previous or next page */
a.upl { float:left; }
a.upr { float:right; }
/* normal icon */
a.upl, a.upr { background:transparent url('Icons/ArrowU.png') center top no-repeat; }
/* hover icon */
a.upl:hover, a.upr:hover { filter: brightness(135%); } 
/* common icon specifications */
a.upl, a.upr
{
  display:block;
  width:46px;
  height:60px;
}

/* Icons for Learn More button... */
a.more
{
  background-color:DarkBlue;
  color:WhiteSmoke;
  font-weight:bold;
  font-size:22px;
  text-decoration:none;
  text-align:center;
  display:block;
  margin:0 auto 1em auto;
  position:relative;
  width:130px;
  height:30px;
  border:0.5rem outset RoyalBlue;
  border-radius:12px;
  padding:0;
}
a.more:hover { filter:brightness(125%);  }
a.more:active { border-style:inset; }

-->