html{
  height: 100%;
}

body{
  height: 100%;
  font-family: "Palatino","Palatino linotype","Book antiqua", "serif";
  background-color: #dffcfc; /*  #dffcfc; */
  font-size:14px;
  line-height:135%;
  padding: 0px;
  margin: 0px;
}

.left{text-align: left;}
.center{text-align: center;}
.right{text-align: right;}
.rm{font-style: normal; font-weight:normal;}
.nowrap{white-space: nowrap;}

a{
  text-decoration: none;
  color: blue;
}

a:hover{
  color: #cc361b; /*#ff1800;    */
}

#woodchip{
  background-image: url("img/IMG_2632-tr-resize-coloured.jpg");
  width:100%;
  height:100%;
  position: fixed;
  top:0;
  left:0;
  opacity:0.15;
}


#topbackground0{
  position: absolute;
  z-index:-1000;
  width:100%;
  top:0px;
  left:0px;
  height:15px;

  /* gradient background  */
  /* bottom color: 66ffff */      /* was e9f2f2, pale blue */
  /* top color: 03caca    */      /* was 9595fc, based in blue */

  /* IE10 Consumer Preview */
  background-image: -ms-linear-gradient(bottom, #66ffff 0%, #03caca 100%);

  /* Mozilla Firefox */
  background-image: -moz-linear-gradient(bottom, #66ffff 0%, #03caca 100%);

  /* Opera */
  background-image: -o-linear-gradient(bottom, #66ffff 0%, #03caca 100%);

  /* Webkit (Safari/Chrome 10) */
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #66ffff), color-stop(1, #03caca));

  /* Webkit (Chrome 11+) */
  background-image: -webkit-linear-gradient(bottom, #66ffff 0%, #03caca 100%);

  /* W3C Markup, IE10 Release Preview */
  background-image: linear-gradient(to top, #66ffff 0%, #03caca 100%);
}

#topbackground1{
  position: absolute;
  z-index:-999;
  width:100%;
  top:15px;
  left:0px;
  height:200px;

  /* gradient background  */
  /* bottom color: dffcfc */      /* was e9f2f2, pale blue */
  /* top color: 66ffff    */      /* was 9595fc, based in blue */

  /* IE10 Consumer Preview */
  background-image: -ms-linear-gradient(bottom, #dffcfc 0%, #66ffff 100%);

  /* Mozilla Firefox */
  background-image: -moz-linear-gradient(bottom, #dffcfc 0%, #66ffff 100%);

  /* Opera */
  background-image: -o-linear-gradient(bottom, #dffcfc 0%, #66ffff 100%);

  /* Webkit (Safari/Chrome 10) */
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #dffcfc), color-stop(1, #66ffff));

  /* Webkit (Chrome 11+) */
  background-image: -webkit-linear-gradient(bottom, #dffcfc 0%, #66ffff 100%);

  /* W3C Markup, IE10 Release Preview */
  background-image: linear-gradient(to top, #dffcfc 0%, #66ffff 100%);
}



#topbanner{
  position: relative;
  margin: 0px;
  text-align:right;
  padding:28px 10px 10px 0px;
  color: #00354d; /* #0e055d;     */
}

#splats{
}

#topbanner .l0{
  display: inline;
  font-weight: bold;
  font-family: Optima, "Palatino","Palatino linotype","Book antiqua", "serif";
  font-size:200%;
  letter-spacing:0.8px;
  border-bottom:3px solid;
  border-color: #f26906; /*#ff1800;*/ /*#f89800;*/ /*blue;   */
  padding:10px 10px 8px 34px;
  margin: 0px 14px 0px 0px;
  z-index:100;
}

#topbanner .l1{
  font-weight: normal;
  font-style:italic;
  font-family:serif;
  font-size:120%;
  padding:23px 12px 9px 0px;
  margin: 0px 14px 0px 0px;
  z-index:101;
}

#topbanner .bull{
  color:  #f26906; /*#ff1800;*/
  position: relative; top:2px;
}

h1{
  font-family: Optima, "Palatino","Palatino linotype","Book antiqua", "serif";
  font-weight: bold;
  font-size:160%;
  color: #00354d;
  padding:0px 0px 0px 20px;
  text-indent: -20px;
  margin:0px 0px 15px 0px;
  line-height:120%;
}


.h1nwlart1{
  font-size: 14px;
  padding:0px 0px 4px 0px;
  font-weight: normal;
  color:#444444;
  font-style: italic;
}
.h1nwlart2{
  padding:3px 0px 0px 0px;
  line-height:128%;
}


h2{
  font-family: Optima, "Palatino","Palatino linotype","Book antiqua", "serif";
  font-weight: bold;
  font-size:140%;
  color: #00354d;
  padding:0px 0px 0px 4px;
  margin:20px 0px 6px 0px;
  border-left:14px solid;
  border-color:#a0d6ed;
}

h3{
  font-family: Optima, "Palatino","Palatino linotype","Book antiqua", "serif";
  font-weight: bold;
  font-size:110%;
  color: #00354d;
  padding:6px 0px 0px 8px;
  margin:0px 0px 6px 0px;
  border-left:24px solid;
  border-color:#a0d6ed;
}
.h3l2{
  font-style: italic;
}

.noborder{border-left:0px; padding:6px 0px 0px 0px; font-style:italic;}

p+h2{margin-top:20px;}
p+h3{margin-top:10px;}
h2+h3{margin-top:10px;}



h4{
  font-family: Optima, "Palatino","Palatino linotype","Book antiqua", "serif";
  font-weight: bold;
  font-size:100%;
  color: #444444;
  padding:6px 0px 0px 0px;
  margin:0px 0px 6px 0px;
}


p+h4{margin-top:0px;}



.orangechange{
  opacity:0.7;
}
#menu{
  font-family: "gill sans", "gill sans MT","Scada","Calibri","trebuchet ms",  Tahoma, helvetica, sansserif;
  position: relative;
  float: left;
  z-index:10;
  left:0px;
  margin: 28px 0px 0px 0px;
  border-right:1px solid;
  border-color:  #7a6cf7;   
  color:#00354d;/* #0e0460;  */
}

#menu .m0{
  position: relative;
  border-right:2px solid;
  border-color: #00354d; /*#0e0460;    */
  margin:5px 0px 5px 0px;
  padding:2px 6px 2px 0px;
  text-align:right;
  width:120px;
}

#menu .m0:hover{
  border-color: #f26906; /*#ff1800;*//*#d96804;*/
}

#menu  .m1wrap{
  position: absolute;
  visibility: hidden;
  left: 126px;
  top:0px;
  text-align: left;
  white-space:nowrap;
  padding:2px 6px 2px 10px;
  margin:0px;
  background-color: #dffcfc;
  border-top:1px solid;
  border-right:1px solid;
  border-bottom:1px solid;
  border-color: #f26906; /*#ff1800;*/ */#d96804;*/
}

#menu .m0:hover .m1wrap{
  visibility: visible;
  opacity: 0.95;
}

#menu .m1, #menu .m1nosub{
  padding:3px 4px 3px 10px;
  text-indent: -10px;
  position: relative;
}

#menu .m1 .bull{
}

#menu .m1:hover .bull{
  color:#d96804;
}

#menu  .m2wrap{
  position: absolute;
  visibility: hidden;
  text-align: left;
  white-space:nowrap;
  padding:0px 0px 0px 20px;
  opacity:0.9;
}

#menu .m1:hover .m2wrap{
  visibility: visible;
  position: relative;
  opacity: 0.9;
}



#menu a{
  text-decoration: none;
  color: inherit;
}

#menu a:hover{
  color:  #f26906; /*#ff1800;*//*#d96804;*/
}

.PolMenuDivider{
  font-style:italic;
  padding:6px 0px 0px 0px;
  position: relative;
  left:-2px;
}

#menu .PolMenuDivider{
  left:-10px;
}

/* mobile menu */

.mobile-menu .m0{
  position: relative;
  border-right:2px solid;
  border-color: #00354d; /*#0e0460;    */
  margin:5px 0px 5px 0px;
  padding:2px 6px 2px 0px;
  text-align:right;
  width:120px;
}

.mobile-menu .m0:hover{
  border-color: #f26906; /*#ff1800;*//*#d96804;*/
}

.mobile-menu  .m1wrap{
  position: absolute;
  visibility: hidden;
  left: 126px;
  top:0px;
  text-align: left;
  white-space:nowrap;
  padding:2px 6px 2px 10px;
  margin:0px;
  background-color: #dffcfc;
  border-top:1px solid;
  border-right:1px solid;
  border-bottom:1px solid;
  border-color: #f26906; /*#ff1800;*/ */#d96804;*/
}

.mobile-menu .m0:hover .m1wrap{
  visibility: visible;
  opacity: 0.95;
}

.mobile-menu .m1, .mobile-menu .m1nosub{
  padding:3px 4px 3px 10px;
  text-indent: -10px;
  position: relative;
}

.mobile-menu .m1 .bull{
}

.mobile-menu .m1:hover .bull{
  color:#d96804;
}

.mobile-menu  .m2wrap{
  position: absolute;
  visibility: hidden;
  text-align: left;
  white-space:nowrap;
  padding:0px 0px 0px 20px;
  opacity:0.9;
}

.mobile-menu .m1:hover .m2wrap{
  visibility: visible;
  position: relative;
  opacity: 0.9;
}



.mobile-menu a{
  text-decoration: none;
  color: inherit;
}

.mobile-menu a:hover{
  color:  #f26906; /*#ff1800;*//*#d96804;*/
}

.mobile-menu .PolMenuDivider{
  left:-10px;
}

#contentouterwrapper{
  padding:10px 0px 0px 0px;
  position: relative;
}

#contentwrapper{
  background-image:url("img/blue30.png");
  margin: 0px auto 0px auto;
  padding:12px 6px 12px 12px;
  position: relative;
  overflow: hidden;
  max-width:84ex;
  border-radius:20px;
}

#content{
}

#rightblock{
  width: 130px;
  float: right;
  margin:0px 5px 0px 5px;
  overflow:hidden; /* lower splat is too wide, with almost-empty space */
}

#rimg{  /* absolutely position so that this does not move when the images above are changed (om iPad the image was moving up when one of the ones above was removed, and down when it came back) */
  position: absolute;
  right: 20px;
  top:470px;
}
.rimgwrap{
  margin:10px 0px 0px 0px;
  width:120px;
  font-size: 75%;
}
.caption{
  font-family: "gill sans", "gill sans MT","Scada","Calibri","trebuchet ms",  Tahoma, helvetica, sansserif;
  color:#555555;
  font-style:italic;
  line-height:120%;
}

p{
  padding:0px 0px 4px 0px;
  margin:0px;
  text-indent: 0px;
  text-align: justify;
}

p+p, blockquote+p{
  text-indent: 20px;
}

p.noindent{
  text-indent: 0px;
}

li{
  text-align: justify;
  padding-bottom:6px;
}

li+li{padding:8px 0px 0px 0px;}

li.close{
  text-align: justify;
  padding-bottom:0px;
}

li.close+li.close{padding:0px 0px 0px 0px;}

li.medium{
  text-align: justify;
  padding-bottom:4px;
}
li.medium+li.medium{padding:0px 0px 0px 0px;}

.noindent{text-indent: 0px;}

blockquote{
  font-family: "gill sans", "gill sans MT","Scada","Calibri","trebuchet ms",  Tahoma, helvetica, sansserif;
  text-align: justify;
  padding:4px 40px 4px 40px;
  margin:0px;
  color:#333333;
}

.divider{
  width:200px;
  margin:14px auto 14px auto;
  border-top:2px solid;
  border-color:#7a6cf7;
}


.flleft .divider{
  width:90px;
  margin:3px 0 3px 0;
  border-top:1px solid;
  border-color:#7a6cf7;
}


/* art pages */

.art{width:160px; float: none; margin:6px; display: inline-block;}
.artdouble{width:338px; float: none; margin:0px 0px 0px 6px; display: inline-block;}
.artwrap{width:160px; float: none; margin:6px 6px 6px 0px; display: inline-block;}
.artdouble .artnote{text-align:justify; padding:4px 8px 0px 0px;}
.artr{width:160px; float: right; margin:6px; display: inline-block;}
.art2{width:326px; float: none; margin:6px; display: inline-block;}
.art2fl{width:326px; float: left; margin:6px;}
.artnote{
  text-align:right;
  color:#333333;
  font-family: "gill sans", "gill sans MT","Scada","Calibri","trebuchet ms",  Tahoma, helvetica, sansserif;
}

.art .caption, .artr .caption{size:70%; text-align: right;}

.art .medium, .art .size, .artr .medium, .artr .size{color:#888888;}
.art .medium:before, .artr .medium:before{content: "Medium: ";}
.art .size:before, .artr .size:before{content: "Size: ";}

.art a, .artdouble a{color:#7e93ff;}
.art a:hover, .artdouble a:hover{
  color: #f26906; /*#ff1800;*/
}


.acrhd{
  font-family: "gill sans", "gill sans MT","Scada","Calibri","trebuchet ms",  Tahoma, helvetica, sansserif;
  font-weight: bold;
  padding:8px 0px 4px 0px;
  color:#555555;
}

/* for designsite page */

.w200{width:200px;}
.w250{width:250px;}
.w300{width:300px;}

.flleftnoborder{
  float:left;
  margin:6px 10px 10px 0px;
  font-family: "gill sans", "gill sans MT","Scada","Calibri","trebuchet ms",  Tahoma, helvetica, sansserif;
}

.flleft{
  float:left;
  margin:6px 10px 10px 0px;
  font-family: "gill sans", "gill sans MT","Scada","Calibri","trebuchet ms",  Tahoma, helvetica, sansserif;
  border:1px solid;
  border-color:#888888;
  padding: 4px;
}
.flleft .title{font-weight: bold; color:#555555; padding:0px 0px 4px 0px;}
.flleft .caption{padding:2px 0px 8px 0px; font-style:italic; font-size:85%; line-height:110%;}
.flleft p{padding:2px 0px 2px 0px; font-size:85%; line-height:110%;}
.flleft .sp10{padding:0px 10px 0px 0px;}
.flleft img{padding:0px;}

.flleft div+img{padding-top:10px;}

.imgcentre{
  margin:0px auto 10px auto;
}

.centre{
  text-align: center;
}
.event{
  margin:4px 0px 10px 0px;
  padding:0px 0px 6px 0px;
  text-align: justify;
  border:1px solid;
  border-color: #619fbb;
}

.event .hd{
  padding:6px;
  background-color:#fdcd89; /*#ffc46e; */
}
.event .dates{
  font-family: "gill sans", "gill sans MT","Scada","Calibri","trebuchet ms",  Tahoma, helvetica, sansserif;
  font-size:90%;
}

.event .title{
  font-weight: bold;
  color:color: #00354d;
}

.event .venue{}

.event .evflleft{
  float: left;
  margin:0px 10px 10px 0px;
}

.event .evflleft .caption{
  padding:0px 0px 0px 6px;
  font-size:85%;
}


.event .description{padding:6px 6px 0px 6px;}

.event .further{padding:2px 6px 0px 6px;}

.event .booking{padding:2px 6px 0px 6px;}

.event .cost{padding:2px 6px 0px 6px;}

.event .venue:before{
  content: "Venue: ";
  font-family: "gill sans", "gill sans MT","Scada","Calibri","trebuchet ms",  Tahoma, helvetica, sansserif;
  font-size:90%;
}

.event .booking:before{
  content: "Booking: ";
  font-family: "gill sans", "gill sans MT","Scada","Calibri","trebuchet ms",  Tahoma, helvetica, sansserif;
  font-size:90%;
}

.event .cost:before{
  content: "Cost: ";
  font-family: "gill sans", "gill sans MT","Scada","Calibri","trebuchet ms",  Tahoma, helvetica, sansserif;
  font-size:90%;
}

/* flag for things to come back to */
.XXXnote{
  background-color:orange;
  padding:4px;
  font-weight: bold;
}



/* compositions */
.comphd{
  font-family: font-family: Optima, "Palatino","Palatino linotype","Book antiqua", "serif";
  font-weight: bold;
}

.comp+.comphd{
  padding-top:8px;
}

.comp{
  padding:0px 0px 4px 12px;
  text-indent: -12px;
}

.ctitle{
  font-style:italic;
}


/* politics stuff */
.nwldate{
  font-family: "gill sans", "gill sans MT","Scada","Calibri","trebuchet ms",  Tahoma, helvetica, sansserif;
  font-size:12px;
  color:#555555;
  padding:0px 0px 4px 0px;
}
.ldv{
  font-size:90%;
}
.pb6{padding-bottom: 6px;}


.nwl_captioned_image_l{
  padding:4px;
  margin:0px 10px 10px 0px;
  float: left;
  text-align: left;
  border:1px solid;
  border-color:#888888;
}

.nwl_captioned_image_r{
  padding:4px;
  margin:0px 0px 10px 10px;
  float: right;
  text-align: right;
  border:1px solid;
  border-color:#888888;
}

.nwl_image_l{
  padding:0px;
  margin:0px 10px 10px 0px;
  float: left;
  text-align: left;
}

.nwl_image_r{
  padding:0px;
  margin:0px 0px 10px 10px;
  float: right;
  text-align: right;
}



.m1wrap .nwlmenudate{position: absolute; visibility: hidden;}
.nwlmenudate{
  display: inline;
  font-family: "gill sans", "gill sans MT","Scada","Calibri","trebuchet ms",  Tahoma, helvetica, sansserif;
  font-size:85%;
  color:#555555;
  white-space:nowrap;
}

.nwlmenudate:before{content: " (";}
.nwlmenudate:after{content: ")";}


.nwlmenuwrap{padding:3px 0px 0px 60px;}
.nwlmenuwrap .m2{
  padding:0px 0px 1px 30px;
  text-indent:-30px;
}



/* mobile screen */
@media only screen and (max-width:610px){       /* over-rides for mobile   */
                                                /* also set in pageend.htm */

  /* mobile */
  #menu{
    visibility: hidden;
    position: absolute;
  }

  .mobile-menu .m1{white-space:wrap;}

  .mobile-menu .m1wrap{background-color:inherit;}

  .mobile-menu  a:hover{
    color: #2d05f8;/*  #f26906;*/
  }


  .mobile-menu  .m0:hover{
    border-color: #2d05f8;/*  #f26906;*/
  }

  .mobile-menu   .m1wrap{
    border-color: #2d05f8;/*  #f26906;*/
  }

  .mobile-menu  .m1:hover .bull{
    color:#2d05f8;
  }

}


/* menu for mobile */
.mobile-nav-button {
  background-color:#66ffff;
  padding:4px;
  border-radius:3px;
  opacity:0.9;
  width: 35px;
  position: absolute;
  margin:10px;
  left: 0;
  top: 0;
  z-index: 9999;
  cursor: pointer;
  width: 35px;
  height: 30px;
}

.mobile-nav-button .mobile-nav-button__line {
  width: 100%;
  height: 4px;
  background: #f26906;
  position: relative;
  transition: 1s ease;
}

.mobile-nav-button .mobile-nav-button__line:nth-of-type(2) { margin: 0.5rem 0; }

.mobile-nav-button .mobile-nav-button__line--1 {
  transform: rotate(45deg);
  top: 16px;
  left:-1px;
  position: absolute;
}

.mobile-nav-button .mobile-nav-button__line--2 { display: none; }

.mobile-nav-button .mobile-nav-button__line--3 {
  transform: rotate(135deg);
  top: 16px;
  left:-1px;
  position: absolute;
}

.mobile-menu {
  display: block;

  width: 100%;
  right: -100%;
  height: 100vh;
  background: #008ba1;
  opacity:0;
  position: absolute;
  z-index: 9998;
  transition: 0.6s ease;
  top: 0;
}

.mobile-menu ul {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
}

.mobile-menu ul li { list-style: none; }

.mobile-menu ul li a {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: block;
  text-align: center;
  text-decoration: none;
  color: #0e0e0e;
  font-size: 16px;
  font-weight: bold;
  overflow: hidden;
  position: relative;
}

.mobile-menu ul li a:after {
  content: '';
  background: #0e0e0e;
  width: 100%;
  height: 100%;
  position: absolute;
  right: -100%;
  top: 0;
  z-index: -1;
  transition: 0.4s ease;
}

.mobile-menu ul li a:hover { color: #fff; }

.mobile-menu ul li a:hover:after { right: 0; }

.mobile-menu img {
  position: absolute;
  width: 150px;
  display: block;
  left: 50%;
  top: 3rem;
  transform: translatex(-50%);
  padding: 0;
  text-align: center;
}

.mobile-menu--open {
  left:0;  /*right: 0; */
  opacity: 0.95;
}

/* new */

.writing{
  padding:0px 0px 12px 20px;
  text-indent: -20px;
  text-align:justify;
}

.writingnote{
  font-size:85%;
  text-align: justify;
  padding:0px 0px 10px 0px;
  font-style:italic;
  max-width: calc(60ex + 50px);
  padding:0px 50px 10px 0px;
  margin:0px 0px 40px 0px;
  border-bottom:1px solid;
  border-color: #7a6cf7;              
}