/* 20.4.19 copied forward from sidebar example   */
/*  Start of sidebar css     */
/*
  DEMO STYLE
*/

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
  font-family: 'Poppins', sans-serif;
/*     background: #fafafa;       */
}




p {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1em;
  font-weight: 300;
  line-height: 1.7em;
  color: #999;       /*    medium light shade of gray */
}

a,
a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s;
}


.line {
  width: 100%;
  height: 1px;
  border-bottom: 1px dashed #ddd;
  margin: 40px 0;
}

/* ---------------------------------------------------
  SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
  display: flex;
  width: 100%;
}

#sidebar {
  width: 160px;		 /* was 250px    */
  position: fixed;
  top: 60px;		 /* was 0px    */
  left: 0;
  height: 100vh;
  z-index: 999;

/*   background: #7386D5;    */
/*     background-color:  #007bff;  Primary - blue want Light ivory  #F1F1F1; 	   */
/*     color: #fff;    white want #333333; darkslategray      */
  transition: all 0.3s;
}

#sidebar.active {
  margin-left: -160px; 		 /* was -250px    */
}

#sidebar .sidebar-header {
  padding: 0 20px;			 /*was 20px    */
/*     background: #6d7fcc;    */
/*  background-color: #007bff;  Primary - blue   want Light ivory #F1F1F1;   */

}

#sidebar ul.components {
  padding:  0;		 /* was 20px 0    */
  border-bottom: 1px solid #47748b;
}

#sidebar ul p {
/*   color: #fff;   white want black #000000 */
  padding: 0 10px;		 /* was 10px    */
}

#sidebar ul li a {
  padding: 0 10px;		 /* was 10px    */
  font-size: 1.1em;
  display: block;
}

#sidebar ul li a:hover {

color:rgba(255,0,255,0.9);

/*   color: #7386D5;       dark lavender    */
/*      background: #fff;  /*  white    */
background:rgba(255,0,255,0.2);

}


#sidebar ul li.active>a,
a[aria-expanded="true"] {
/*   color: #fff;            */
 /*   background: #6d7fcc;	   */
/* 	background-color: #007bff;   Primary - blue  want Light ivory #F1F1F1  */

}

a[data-toggle="collapse"] {
  position: relative;
}

.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

ul ul a {
  font-size: 0.9em !important;
  padding-left: 30px !important;      /* was 30px   */
 background: #6d7fcc;   /*      */
background-color: #007bff;  /*Primary - blue  want #F1F1F1; Light ivory   */

}

ul.CTAs {
  padding: 20px;		 /* was 20px    */
}

ul.CTAs a {
  text-align: center;
  font-size: 0.9em !important;
  display: block;
  border-radius: 5px;
  margin-bottom: 5px;
}



/* ---------------------------------------------------
  CONTENT STYLE
----------------------------------------------------- */

#content {
  width: calc(100% - 160px); 		 /* was -250px    */
/*    padding: 40px;	   */
  min-height: 100vh;
  transition: all 0.3s;
  position: absolute;
  top: 0;
  right: 0;
}

#content.active {
  width: 100%;
}

/* ---------------------------------------------------
  MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
  #sidebar {
      margin-left: -250px;
/*         margin-top: 120px;       */

  }
  #sidebar.active {
      margin-left: 0;
  }
  #content {
      width: 100%;
  }
  #content.active {
      width: calc(100% - 160px);
  }
  #sidebarCollapse span {
      display: none;
  }

}

/* end of sidebar   */

/*    */
/* slider delay from the html example   */
.slideanim {visibility:hidden;}
.slide {
 animation-name: slide;
 -webkit-animation-name: slide;
 animation-duration: 0.25s;           /* set seconds of delay   */
 -webkit-animation-duration: 0.25s;
 visibility: visible;
}

@keyframes slide {
 0% {
   opacity: 0;
   transform: translateY(70%);
 }
 100% {
   opacity: 1;
   transform: translateY(0%);
 }
}
@-webkit-keyframes slide {
 0% {
   opacity: 0;
   -webkit-transform: translateY(70%);
 }
 100% {
   opacity: 1;
   -webkit-transform: translateY(0%);
 }
}

/* end of slider from html example   */


/* Coolmenu   */

.cool a{font:bold 11px Verdana;padding:2px;padding-left:4px;display:block;width:100%;color:black;text-decoration:none;border-bottom:1px solid black;}
.cool a:hover{background-color:black;color:white;}
.cool h3 {padding:2px;padding-left:4px;display:block;width:100%;color:black;text-decoration:none;border-bottom:1px solid black;text-align:center;}

.cool a[href $='.pdf']{padding-left:32px;background:transparent url(images/pdf.gif) no-repeat center left;}
.cool a[href $='.pdf']:hover{padding-left:32px;background:black url(images/pdf.gif) no-repeat center left;}



/* End of Coolmenu   */

/* Panel    */
.panel {
   border: 1px solid 	#17a2b8;/* #f4511e   */
   border-radius:0 !important;
   transition: box-shadow 0.5s;
 }
 .panel:hover {
   box-shadow: 5px 0px 40px rgba(0,0,0, .2);
 }
 .panel-footer .btn:hover {
   border: 1px solid #17a2b8;	 /* #f4511e   */
   background-color: #fff !important;
   color: #17a2b8;	 /* #f4511e   */
 }
 .panel-heading {
   color: #fff !important;
   /*  background-color: #f4511e ;	   */
   background-color:#17a2b8 !important;	 /* Info - light blue   */
 padding: 25px;
   border-bottom: 1px solid transparent;
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
 }
 .panel-footer {
   background-color: white !important;
 }
 .panel-footer h3 {
   font-size: 32px;
 }
 .panel-footer h4 {
   color: #aaa;
   font-size: 14px;
 }
 .panel-footer .btn {
   margin: 15px 0;
  /*   background-color: #f4511e;	   */
 background-color:#17a2b8;	 /* Info - light blue     */
   color: #fff;
 }
/* End of Panel    */




.flex-container {
display: flex;
flex-direction: row;
justify-content: center;

flex-wrap: wrap;

 height: 100%;

/*
  justify-content: flex-start;
  align-items: center;
align-items: baseline;
   align-content: center;*/
}

/*  */
/*      */
/* flex-container used in the footer and multiple sections    */
.flex-container > div {
margin: 10px;
}

html {
scroll-behavior: smooth;
}

/* my Button    */

.btn-vgw1{color:#fff;background-color:rgba(255,0,255,0.7);border-color:rgba(255,0,255,0.7)}
/*   button and border same colour  */
.btn-vgw1:hover{color:#fff;background-color:rgba(255,0,255,0.8);border-color:rgba(255,0,255,0.9)}
/*  button darker border darker still  */
.btn-vgw1.focus,.btn-info:focus{box-shadow:0 0 0 .2rem rgba(255,0,255,0.5)}
/*  similar with opacity */
/*  .btn-vgw1.disabled,.btn-info:disabled{color:#fff;background-color:255,0,255,0.7;border-color:255,0,255,0.7}
same as button and border above  */
.btn-vgw1:not(:disabled):not(.disabled).active,.btn-info:not(:disabled):not(.disabled):active,.show>.btn-info.dropdown-toggle{color:#fff;background-color:#117a8b;border-color:#10707f}
.btn-vgw1:not(:disabled):not(.disabled).active:focus,.btn-info:not(:disabled):not(.disabled):active:focus,.show>.btn-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(58,176,195,.5)}
/*  these two not restyled  */
/*  btn-outline-info not used */

/* mouse over link */
a:hover {
  color: red;
}
/* unvisited link */
a:link {
  color: blue;
  text-decoration:underline;
}


/* 4.10.19 carried forward vgws to vgwalls */
a[href $='.pdf']{padding-left:32px;background:transparent url(images/pdf.gif) no-repeat center left;}
a[href $='.pdf']:hover{padding-left:32px;background:url(images/pdf.gif) no-repeat center left;background-color:#00445c;}
a[href*="hmrc"]{padding-left:43px;background:transparent url(images/hmrc.gif) no-repeat center left;}
a[href*="hmrc"]:hover{padding-left:43px;background:url(images/hmrc.gif) no-repeat center left;background-color:#00445c;}
a[href*="gov"]{padding-left:63px;background:transparent url(images/gov-uk.gif) no-repeat center left;}
a[href*="gov"]:hover{padding-left:63px;background:url(images/gov-uk.gif) no-repeat center left;background-color:#00445c;}
td.gov:hover{background-color:#00445c;color:#fff;}
.gov{}
a[href*="bis"]{padding-left:38px;background:transparent url(images/bis.gif) no-repeat center left;}
a[href*="bis"]:hover{padding-left:38px;background:url(images/bis.gif) no-repeat center left;background-color:#00445c;}
a[href*="sra.org"]{padding-left:39px;background:transparent url(images/sra.gif) no-repeat center left;}
a[href $='sra.org']:hover{padding-left:39px;background:url(images/sra.gif) no-repeat center left;background-color:#00445c;}
a[href $='.doc']{padding-left:53px;background:transparent url(images/msword.gif) no-repeat center left;}
a[href $='.doc']:hover{padding-left:53px;background:url(images/msword.gif) no-repeat center left;background-color:#00445c;}
a[href*="legislation"]{padding-left:62px;background:transparent url(images/legislation.gif) no-repeat center left;}
a[href*="legislation"]:hover{padding-left:62px;background:transparent url(images/legislation.gif) no-repeat center left;}
a[href*="hmrclegislation"]:hover{padding-left:62px;background:url(images/legislation.gif) no-repeat center left;background-color:#00445c;}
/*
a[href $='index']{padding-left:0px;text-decoration: none; background:transparent  url(images/xxx.gif) no-repeat  right;}
a[href $='index']:hover{padding-left:0px; text-decoration: none; background:url(images/xxx.gif) no-repeat right;background-color:#00445c;}
*/

.nireland{padding-left:36px; background:transparent url(images/nireland.jpg) no-repeat center left;
}
.nireland{color: #00b300}

a[href $='index']::after{content: ' \21D1 \0074\006f\0070 ';}
a[href $='index']{text-decoration: none;}


/* 19.10.19 these seem to work as direct css but not from this file */
#sidebar   a[href $='.pdf']{padding-left:32px;background:transparent url(images/pdf.gif) no-repeat center left;}
#sidebar    a[href $='.pdf']:hover{padding-left:32px;background:url(images/pdf.gif) no-repeat center left;background-color:#00445c;}

#content  a[href $='.pdf']{padding-left:32px;background:transparent url(images/pdf.gif) no-repeat center left;}
#content   a[href $='.pdf']:hover{padding-left:32px;background:url(images/pdf.gif) no-repeat center left;background-color:#00445c;}


/* ------------------- 17.3.16 New Tax tables 4.10.19 carried forward vgws to vgwalls ------------------- */
#content div.block{overflow:hidden;border:1px;border-style:solid;border-color:#ffffff #ffffff #699 #699;background-color:#ffffff;}
 /* h1{margin:0;}     */

#content div p a{text-decoration:underline;}
#content div.block p{width:30%;display:block;float:left;text-align:left;background-color:#ffffff;border:1px;border-style:solid;border-color:#ffffff #699 #ffffff #ffffff;}
#content p.tax{text-align:right;padding-right:10px;}
#stickyheader div.block p{width:30%;display:block;float:left;text-align:left;background-color:#006699;color:#ffffff;border-style:solid;border-color:#ffffff #699 #ffffff #ffffff;margin-left:-1px;font-size:110%;}
#header{z-index:4;}
#stickyheader{z-index:3;}
#otherheader{z-index:3;}
#block{z-index:3;}
#coolmenu{z-index:4;}
#footer{z-index:4;}
#content div.block .tax{width:80px;}
#otherheader div.block .tax{background-color:#006699;color:#ffffff;float:left;}
#otherheader div.block p{background-color:#006699;color:#ffffff;float:left;}
#content #otherheader p{font-size:110%;}
@media all and (max-width:1024px){#otherheader div.block .tax{font-size:110%;}
#otherheader div.block p{font-size:110%;}
#coolmenu{z-index:4;}
#footer{z-index:6;}
#taxguidance{z-index:5;}
#header{z-index:10}
}
@media all and (max-width:480px){#otherheader div.block p{max-height:60px;}
}
#stickyheader div.block .tax{float:left;width:80px;border-style:solid;border-color:#ffffff #699 #ffffff #ffffff;}
#content div.block .taxcalc{margin-left:1.5em;margin-bottom:5px;color:#781351;background:#ffa20f;border:2px outset #d7b9c9;float:right;width:120px;}
#content div.block .taxcalc a{display:block;margin-left:-10px;}
#content div.block .taxnote{margin-left:4px;float:left;width:98.5%;border-color:#ffffff #ffffff #ffffff #ffffff;}
#content div.block .input{margin-left:4px;float:left;width:80px;white-space:nowrap;}
#stickyheader p{background-color:#fff;}
#content{float:left;}
@media all and (min-width:480px){#content div.block p{width:50%;}
#stickyheader div.block p{width:50%;z-index:2;}
}
@media all and (min-width:1024px){#content div.block p{width:60%;}
#content div.block .tax{width:120px;}
#stickyheader{max-width:1000px;margin:0 auto;position:relative;z-index:2;}
#stickyheader div.block p{width:60%;}
#stickyheader div.block .tax{width:120px;}
#content div.block .taxcalc{width:105px;}
}
#stickyheader{width:100%;background-color:#ffffff;padding-top:4em;background-image:url("images/vgwcowide.gif");background-repeat:no-repeat;}
#content div.otherheader p{background-color:#006699;color:#ffffff;width:auto;border:1px solid #ffffff;padding:10px;font-size:110%}
#content div.otherheader h2{background-color:#006699;color:#ffffff;width:auto;border:1px solid #ffffff;padding:10px;font-size:110%}
#content div.otherheader p:hover{background:#daffda;cursor:pointer;border:1px solid black;color:black;}
#content div.otherheader h2:hover{background:#daffda;cursor:pointer;border:1px solid black;color:black;}

 /* 17.3.16 -------------------- end of new tax tables layout---------- 23.8.17 .other header is important I am not clear where #otherheader is used
 in fact used once for national minimum wage ----------- */


 /* ------------------- 4.10.19 carried forward vgws to vgwalls ------------------- */
 .nodecp{list-style:none;}
 .nodec{list-style:none;/**/font-weight:bold;}
 .nodec1{list-style:none;/**/font-weight:bold;margin-left:5em;}
 .nodec2{list-style:none;/**/font-weight:bold;margin-left:10em;}
 .nodec4{list-style:none;/**/font-weight:bold;margin-left:20em;}


.skype{float:right;margin-right:30px; background:url(../images/skype.png) no-repeat}

.contact-map {background:url(../images/contact-map.jpg) no-repeat}
#contact-map {height: 120px; cursor: pointer; background:url(../images/contact-map.jpg) no-repeat}
#contact-sm {height: 120px; cursor: pointer; background:url(../images/contact-sm.jpg) no-repeat}



/*company services tariff*/
.pright{font-family:arial;color:#0000ff;padding-left:10px;padding-right:40px;text-align:right; margin:0 auto;}

/*general bullet points*/
li.indent{margin-left:5em;padding-right:20px;}
li.indent2{margin-left:10em;}
li.indent4{margin-left:20em;}

@media all and (max-width:400px){
li.indent{margin-left:2.5em;padding-right:20px;}
li.indent2{margin-left:5em;}
li.indent4{margin-left: 7.5em;}
}

ul{margin:0 auto;}
.keep-close{margin:0 auto;}


  h1{padding-bottom:3px;}   /*  */


/*for online accounting  */
  div.softimg{float:right;margin-top:3px;}
  @media all and (min-width:1024px){div.softimg{margin-right:400px;}
  }


.background-accountancy {background-image: linear-gradient(#ccffff,#ffccff);}    /*light blue to light purple  */
.background-tax {background-image: linear-gradient(#ccffff,#ffcccc);}  /*light blue to light pink  */
.background-companies {background-image: linear-gradient(#ffe6f0,#eee6ff);}  /*and index and base pages light pink to light purple  */
.background-bookkeeping {background-image: linear-gradient(#ccff99,#ffff99);}   /*light green to light yellow  */
.background-payroll {background-image: linear-gradient(#ccff99,#ffcccc);}   /*light green to light purple  */


/* 16.4.19 h2vgw etc copied forward for footer*/
.h2vgw    {margin:0 auto;font-size:100%;color:#006699;padding-left:10px;font-weight:bold;}
.h2vgw {font-size:150%;color:#006699;}
 /* font-family:arial;*/


    .video-container{margin-right:auto;margin-left:auto}
    @media (min-width:310px){.video-container{min-width:310px}
    }
    @media (min-width:350px){.video-container{min-width:345px}
    }
    @media (min-width:370px){.video-container{min-width:365px}
    }
    @media (min-width:400px){.video-container{min-width:390px}
    }
    @media (min-width:576px){.video-container{min-width:570px}
    }
    @media (min-width:768px){.video-container{min-width:760px}
    }
    @media (min-width:992px){.video-container{max-width:960px}
    }
  @media (min-width:1200px){.video-container{max-width: 1140px}
    }    /*   */


 /* 1.5.2020 new accordian
Generally ok but only works in Chrome if it is in the actual page

 */
   /*
 .accordion {
   background-color: #eee;
   color: #444;
   cursor: pointer;
   padding: 18px;
   width: 100%;
   border: none;
   text-align: left;
   outline: none;
   font-size: 15px;
   transition: 0.4s;
 }

 .active, .accordion:hover {
   background-color: #ccc;
 }

 .accordion:after {
   content: '\002B';
   color: #777;
   font-weight: bold;
   float: right;
   margin-left: 5px;
 }

 .active:after {
   content: "\2212";
 }

 .panel {
   padding: 0 18px;
   background-color: white;
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.2s ease-out;
 }
1.5.2020 end of new accordian */


/*1.5.2020 restyled top nav for covid button     */
@media (min-width:1200px){.container{max-width:1500px}
}


.nicebox {
border-radius: 25px;
width: 200px;
height: 150px;
padding: 10px; /* */
margin: 20px;  /*   */
box-sizing: border-box;
overflow: hidden;  /* */
text-overflow: ellipsis;
word-wrap: break-word;
}

.nicebox-flex {
border-radius: 25px;
width: 200px;
/* height: 150px;*/
padding: 10px;
margin: 20px;  /*   */
box-sizing: border-box;
overflow: hidden;  /* */
text-overflow: ellipsis;
word-wrap: break-word;
}


.nicebox-blue{background-color: #869CA9;} /*   Light blue */
.nicebox-lime{background-color:#C1D13A;}  /* Lime green */
.nicebox-brown-2{background-color:#CEB072;}  /* Medium brown */
.nicebox-brown-3{background-color:#D07744;}  /* Darker brown */
.nicebox-brown-1{background-color:#DACA98;}  /* Light brown */
.nicebox-green{background-color:#9EC16D;}  /* Mid green */

.center-nicebox {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.nicebox-p{
color:white;
font-weight:bold;
text-align:center;
font-size:150%;
}


 /* end of nice box*/

 /* nice box with flexible height */
 .expenses {
 border-radius: 25px;
 width: 300px;
 /* height: 150px;  */
 /* padding: 10px; */
 margin: 20px;  /*   */
 box-sizing: border-box;
 overflow: hidden;  /* */
 text-overflow: ellipsis;
 word-wrap: break-word;
 }

p .expenses {margin-left: 10px;}

.expenses-heading {
   color: #fff !important;
   /*  background-color: #f4511e ;	   */
   background-color:#17a2b8 !important;	 /* Info - light blue   */
padding: 25px;
 width: 100%;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
text-align: center;
}



.expenses-turquiose{background-color: #55b8bf;} /*   mediumturquoise */
.expenses-violet{background-color: #d280a8;}  /* palevioletred */
.expenses-khaki{background-color:#edd598;}  /* khaki */
.expenses-plum{background-color:#d7aced;}  /* plum */
.expenses-blue{background-color:#7bbeea;}  /* skyblue */
.expenses-lavender-gray{background-color:#c2cad0;} /* lavender gray */
.expenses-candy-pink{background-color:#e7717d;}  /* candy pink*/
.expenses-green-yellow{background-color:#afd275;}  /* green-yellow*/










 .newspaper {
   column-count: 3;
   column-gap: 40px;
   column-rule-style: solid;
 word-break: break-all;
 }


@media (max-width: 768px) {
  .newspaper {column-count: 2;}
}

@media (max-width: 414px) {
  .newspaper {column-count: 1;}
}


/* 3.5.2020 table styling */
#customers, #customers2,#customers3,#customers4,#customers5,#customers6 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}

 /*  @media (min-width:1200px){#customers6.fifty{max-width: 50%}  */
/* 9.12.2020 need to decide how to apply this.  Also needs to be applied to all the other styling */

#customers td, #customers th, #customers2 td,  #customers2 th, #customers3 td,  #customers3 th, #customers4 td,  #customers4 th, #customers5 td, #customers5 th, #customers6 td, #customers6 th{
border: 1px solid #ddd;
padding: 8px;
}

#customers tr:nth-child(even), #customers2 tr:nth-child(even), #customers3 tr:nth-child(even), #customers4 tr:nth-child(even), #customers5 tr:nth-child(even),  #customers6 tr:nth-child(even){background-color: #f2f2f2; }

#customers tr:hover, #customers2 tr:hover, #customers3 tr:hover, #customers4 tr:hover, #customers5 tr:hover,  #customers6 tr:hover{background-color: #ddd;}

#customers th, #customers2 th, #customers3 th, #customers4 th,  #customers5 th,  #customers6 th{
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}

/*    table header sticky with html thead tbody wrappers  */
th.topper {
  position: sticky;  top: 100px; /* Don't forget this, required for the stickiness; allow for the fixed header and variations for narrow screen*/
}

/**/

@media (min-width: 750px) {
.figures:before{content: "Sales/­Outputs figures Purchases/­Inputs figures";}
}

/* end of table styling */
/* 9.12.2020 brought forward for vat registration styling */
.emphatic-h2-grey {font-family:arial;font-size:120%;background:#999999;color:#ffffff;padding-left:5px; font-weight: bold;}
.emphatic-h2-red {font-family:arial;font-size:120%;background:#b81a31;color:#ffffff;padding-left:5px; font-weight: bold;}
.emphatic-h2-blue {font-family:arial;font-size:120%;background:#006699;color:#ffffff;padding-left:5px; font-weight: bold;  z-index: 1;}
.emphatic-h2-green {font-family:arial;font-size:120%;background:#008467;color:#ffffff;padding-left:5px; font-weight: bold;}

.topper {position: sticky;  top: 100px;} /* Don't forget this, required for the stickiness; allow for the fixed header and variations for narrow screen*/

@media (max-width:450px){.topper {position: sticky;  top: 125px;}   }   /**/

/* avoid header extension on narrow screens     */
@media (max-width:420px){
.display-4{font-size:20px;font-weight:300;line-height:1.2;  }
img[src$="acca-logo.gif"] {width: 30px}
#accountancy {width: 260px}
h2, h3 {font-size:20px;}
}
/*
h4{align: center;}
#accountancy,  #taxreturns,  #companies,   #bookkeepingvat,   #payrollcis,  #online,   #taxtables,  #solicitorssar,   #audit, h4, p, .cool {width: 200px;}
img{width: 200px;}
*/

@media screen and (max-width: 400px){
.g-recaptcha {
    transform:scale(0.77);
    transform-origin:0 0;}
}



/* book */

/*#book-feature
html      {
      width: 100%;
      height: 100%;
      font-family: Times;
      font-size: 16px;
      overflow: hidden;
    }
*/
/**/#book-feature{

    cursor: pointer;
/*   width: 50%;
height: 50%;

     width: 100%;
      height: 100%;



}

  body   {
      The entire body is clickable area. Let the visitor know that.
*/
      background: #012717; /* Old browsers */
      background: -moz-radial-gradient(center, ellipse cover,  #012717 0%, #143 100%); /* FF3.6+ */
      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#012717), color-stop(100%,#143)); /* Chrome,Safari4+ */
      background: -webkit-radial-gradient(center, ellipse cover,  #012717 0%,#143 100%); /* Chrome10+,Safari5.1+ */
      background: -o-radial-gradient(center, ellipse cover,  #012717 0%,#143 100%); /* Opera 12+ */
      background: -ms-radial-gradient(center, ellipse cover,  #012717 0%,#143 100%); /* IE10+ */
      background: radial-gradient(ellipse at center,  #012717 0%,#143 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#012717', endColorstr='#143',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

      /* Set the perspective transform for the page so that our book looks 3D.
10.3.21 original 800px; 1200px avoids trouble with narrow screens
*/
      -webkit-perspective: 800px;
      -moz-perspective: 800px;
      -ms-perspective: 800px;
      -o-perspective: 800px;
      perspective: 1200px;

      /* Use 3D for body, the book itself and the page containers. */
    -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }

    #myBook {
      left: 600px;
      top: 50px;

/*
      -webkit-transform: rotate3d(-1.8, -1.0, 0.6, 20deg);
      -moz-transform: rotate3d(-1.8, -1.0, 0.6, 20deg);
      -ms-transform: rotate3d(-1.8, -1.0, 0.6, 20deg);
      -o-transform: rotate3d(-1.8, -1.0, 0.6, 20deg);
*/

/* was 20deg which angles the whole book    */
      transform: rotate3d(-1.8, -1.0, 0.6, 0deg);

      text-align: center;
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      transform-style: preserve-3d;
      position: absolute;
    }

    #myBook .book > div:first-child {


/*
      -webkit-transform: rotateY(-150deg);
      -moz-transform: rotateY(-150deg);
      -ms-transform: rotateY(-150deg);
      -o-transform: rotateY(-150deg);
*/
      transform: rotateY(-150deg);
    }

    .book, .book > div {
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      transform-style: preserve-3d;
      position: absolute;
    }

    .book > div {
      -webkit-transition: 1s ease-in-out;
      -moz-transition: 1s ease-in-out;
      -ms-transition: 1s ease-in-out;
      -o-transition: 1s ease-in-out;
      transition: 1s ease-in-out;
    }

    /* Front of a page */
    .book > div > div:first-child {
background: #ffffff; /* Old browsers */
    /*  */
/*background: -moz-linear-gradient(-45deg,  #ffffff 0%, #e5e5e5 100%); FF3.6+ */
/* background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); Chrome,Safari4+ */
/* background: -webkit-linear-gradient(-45deg,  #ffffff 0%,#e5e5e5 100%); Chrome10+,Safari5.1+ */
/*background: -o-linear-gradient(-45deg,  #ffffff 0%,#e5e5e5 100%);  Opera 11.10+ */
/* background: -ms-linear-gradient(-45deg,  #ffffff 0%,#e5e5e5 100%); IE10+ */

background: linear-gradient(135deg,  #ffffff 0%,#e5e5e5 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
      width: 400px;
      height: 600px;
      position: absolute;
      overflow: hidden;
      -webkit-transform: translate3d(0px, 0px, 0.02px);
      -moz-transform: translate3d(0px, 0px, 0.02px);
      -ms-transform: translate3d(0px, 0px, 0.02px);
      -o-transform: translate3d(0px, 0px, 0.02px);
      transform: translate3d(0px, 0px, 0.02px);
      padding: 30px;
      padding-left: 40px;
      padding-bottom: 80px;
      border-left: 2px solid #000;
    }

    /* Back of a page */
    .book > div > div:last-child {
      background-color: white;
      background: #ffffff; /* Old browsers */
/*      background: -moz-linear-gradient(-45deg,  #ffffff 0%, #e5e5e5 100%);  FF3.6+ */
/*      background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));  Chrome,Safari4+ */
/*       background: -webkit-linear-gradient(-45deg,  #ffffff 0%,#e5e5e5 100%); Chrome10+,Safari5.1+ */
/*       background: -o-linear-gradient(-45deg,  #ffffff 0%,#e5e5e5 100%); Opera 11.10+ */
 /*       background: -ms-linear-gradient(-45deg,  #ffffff 0%,#e5e5e5 100%);IE10+ */
      background: linear-gradient(135deg,  #ffffff 0%,#e5e5e5 100%); /* W3C */

      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
      width: 400px;
      height: 600px;
      position: absolute;
/*
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
*/
      transform: rotateY(180deg);

      overflow: hidden;
      padding: 30px;
      padding-right: 40px;
      padding-bottom: 80px;
      border-right: 2px solid #000;
    }

    /* covers */
    .book > div:first-child > div:first-child, .book > div:last-child > div:last-child {
      background: #ffffff; /* Old browsers */
  /*    background: -moz-linear-gradient(-45deg,  #8C9CCC 0%, #080f40 100%);  FF3.6+ */
  /*     background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#8C9CCC), color-stop(100%,#080f40)); Chrome,Safari4+ */
  /*     background: -webkit-linear-gradient(-45deg,  #8C9CCC 0%,#080f40 100%); Chrome10+,Safari5.1+ */
  /*    background: -o-linear-gradient(-45deg,  #8C9CCC 0%,#080f40 100%);  Opera 11.10+ */
  /*    background: -ms-linear-gradient(-45deg,  #8C9CCC 0%,#080f40 100%);  IE10+ */
      background: linear-gradient(135deg,  #8C9CCC 0%,#080f40 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8C9CCC', endColorstr='#080f40',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
      color: #000;
      border: 2px solid #000;
      margin-left: -1px;
      margin-top: -1px;
    }

    h1 {
      margin-top: 200px;
      font-family: Cochin, sans-serif;
    }

    .book-pages p {
      text-align: left;
    }