/* CSS Document */

*,
html{
margin:0;
padding:0;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
outline: 0;
}

/* START Clearfix */

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

html[xmlns] .clearfix {
	display: block;
}

* html .clearfix {
	height: 1%;
}

/* END Clearfix */

body{
background-color:#fff;
font-family: 'ff-scala-sans-pro', sans-serif;
font-size: 16px;
color:#333;
max-width: 950px;
margin-left: auto;
margin-right: auto;
}

@media screen and (min-device-width: 1400px) {
/* On screens with more pixels, use a bigger font size - because the pixels
   are likely to be smaller, and so the font needs to be bigger to be easily read.
   Ideally we would also take into account the pixel density (resolution, dpi).
 */
  body {
    font-size: 21px;
    max-width: 1250px;
  }
}

/* variarion for admin page */
body#admin {
/* unrestricted width */
max-width: 100vw;
/* make digits display in a more regular way (better in tables) */
font-variant-numeric: tabular-nums lining-nums;
}

input, button, textarea, select {
/* ensure these elements use parent-element's font-family and size.
  (they dont inherit these by default) */
font-family: inherit; 
font-size: inherit;
}

input, textarea {
/* add a bit of space around input fields */
padding: 0.1em 0.1em;
/* make digits display in a more regular way */
font-variant-numeric: tabular-nums lining-nums;
}

#container{
position:relative;
width:100%;
}

/*#container:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}*/

/*
#banner-image{
position:relative;
top:5px;
height:400px;
/*width:100%;* /
background: transparent url('/grafix/front-page-banner/shepherds-cottage.jpg') 0 0 no-repeat;
margin-bottom:20px;
}

#banner-image p{
position:absolute;
top:1em;
left:1em;
font-family: "ff-scala", Serif;
font-weight:normal;
width:500px;
font-size:120%;
color:#222;
line-height:80%;
max-width: 95%;
}
*/

/*
#content div.issuebanner1 {
  margin: 0 -2em 0 -2em;
  background-color: #57a8bd /*bright blue* /;
}

#content div.issuebanner1 img {
  padding-left: 1.3em;
  margin: 0;
  float: none;
  width: calc(100% - 2.5em);
}
*/

#content div.issuebanner {
  padding: 1.25em 0.5em 1.25em 2em;
  margin: 0 -2em 0 -2em;
  background-image: url("blue-57a8bd.jpg");
  background-repeat: repeat;
}

#content div.issuebanner img {
  margin: 0;
  float: none;
}

#content div.issuebanner img.cover {
  width: 28%;
  margin-right: 0.5em; /* allow space for drop-shadow */
}

#content div.issuebanner img.teaser {
  width: calc(72% - 0.75em);
  margin-bottom: -1.51em;
}

div.issuebanner .drop-shadow {
  box-shadow: 0.05em 0.8em .75em 0 #444444;
}

#content{
margin:0.5em 2em 1em 2em;
min-height:500px;
}

.padcenter {
padding: 15px;
text-align: center;
}

sup.ordinal{
font-size: 0.7em;
}

.normalcase{
text-transform:none !important;
}

#content h1{
font-size:1.8em;
font-weight:normal;
color: #006895 /*dark blue*/;
margin-bottom:0.2em;
margin-top:0.8em;
}

#content > h1:first-child,
#content > div.article > h1:first-child {
/* Make space for Share This Page buttons */
margin-right: 10rem;
}


#content h1 span#issuedetails{
display:inline-block;
text-transform:none;
background-color:#8b8;
font-size:0.5em;
font-weight:normal;
color:#fff;
margin:0 10px 0 20px;
/*width:200px;*/
height:38px !important;
padding:10px 15px;
float:right;
}



#content h1.dotover{
margin:5px 0 1em 0;
border-top:1px dotted #333;
padding-top:10px;
}

#issueblurb{
/*padding-left:340px;*/
}

#frontpage h1,
#featurearticles h1 {
  color: #cb1719 /*red*/;
  font-weight: bold;
  font-size: 1.4em;
}

#frontpagetwitter,
#frontpagecottage {
clear:right;
float:right;
margin-left:30px;
}

#frontpagecottage {
width:300px;
/*border: 2px #ddd solid;
border-radius: 10px;*/
}

#frontpagecottage div {
/*padding: 0.3em;*/
}

#frontpagecottage div img {
width:100%;
}

div#topsharer {
position: absolute;
right:50px;
top:0.15em;

}

div#topsharer span {
font-weight:bold;
font-size:0.9em;
color: #006895 /*dark blue*/;
}

#content h2{
font-size:1.4em;
font-weight:normal;
color: #006895 /*dark blue*/;
margin-top:1.2em;
margin-bottom:0.25em;
}

/*
#content h2.frontpage{
background-color:#4c6443;
font-size:2em;
text-transform:uppercase;
font-weight:normal;
color:#fff;
margin-bottom:0.8em;
width:100%;
height:46px;
padding:12px 0 0 20px;
overflow:hidden;
display:table;
}
*/

#content h2.dotover{
clear:both;
margin:25px 0 1em 0;
border-top:1px dotted #ccc;
padding-top:10px;
}

#content h2#subtitle{
font-weight:lighter;
}

#content h2#subtitle,
#content h1 + h2 {
margin-top:0.3em;
}

#content h3{
font-size:1em;
font-weight:bold;
color: #006895 /*dark blue*/;
margin-bottom:0.5em;
margin-top:1em;
}

#content h4{
font-size:1em;
font-weight:bold;
margin-bottom:0.5em;
}

#content h5{
font-size:0.9em;
font-weight:normal;
color:#666;
margin:0 0 1em 0;
}

#content h6{
font-size:0.9em;
font-style: italic;
border-top:1px solid #ddd;
padding:5px 0 0 0;
font-weight:normal;
text-align:right;
}

#content h6.quotee{
border-top:0;
border-bottom:1px solid #ddd;
margin:-15px 0 20px 0;
clear:left;
text-align:left;
}

#content p{
line-height:1.4em;
margin-top: 0.5em;
margin-bottom:0.5em;
}

#content h1 + p,
#content h1 + div + p,
#content h1 + img + p {
  /* allow room for Share This Page buttons on pages without a h2 heading */
margin-top: 1em;
}

#content p.left85{
margin-left:85px;
}

#content div.pressphotos{
clear:left;
border-top:1px solid #ccc;
padding:1em 0;
}

#content div.pressphotos p{
margin-left:120px;
font-size:0.9em;
margin-bottom:0.5em;
}

#content div.pressphotos img{
margin-bottom:1em;
}

#content p.blockquote{
font-weight:normal;
margin:0 50px 1em 50px;
font-style:italic;
line-height:1.2em;
}

#content img,
#content .fl-left {
float:left; /* NB - if the <img> is within an <a>, this causes the dotted background-image to be obscured */
margin:0 1.5em 1em 0;
border:0;
}

#content .fl-right{
float:right;
clear:right;
margin:0 0 1em 2em;
}

#content img.issue_teaser {
clear:left;
width:100%;
margin-bottom:2em;
}

/* Link: Simple or emphasised */
#container a:link,
#container a:visited {
color:#333; /* same colour as body text */
text-decoration:none;
/* Create a bottom border with dots that are 2px by 2px, spaced 3px apart, and colored #333.
   Note, we dont use the border-bottom property because this only allows a dotted line to have
   dots which are 1px by 1px, and 1px apart. */
background-image: linear-gradient(to right, #333 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 6px 2px;
background-repeat: repeat-x;
}

#container a:hover {
/* Create a bottom border that's a solid line 2px high, replacing the dotted underline.
   Note, we dont use the border-bottom property because this doesnt line up exactly
   with the dotted underline. */
background-image: linear-gradient(#333, #333);
background-position: bottom;
background-size: 2px 2px;
background-repeat: repeat-x;
}

#content #frontpage h1 a,
#content #featurearticles h1 a {
  color: #cb1719 /*red*/;
  background-image: linear-gradient(to right, #cb1719 /*red*/ 33%, rgba(255,255,255,0) 0%);
}

#content #frontpage h1 a:hover,
#content #featurearticles h1 a:hover {
  background-image: linear-gradient(#cb1719 /*red*/, #cb1719 /*red*/);
}

/* Emphasised link (contained by a paragraph), displayed in-line */
p.link{
display:inline-block;
padding-left:15px;
background:transparent url('/grafix/link-arrow.png') 0 4px no-repeat;
}

/* Emphasised link (contained by a paragraph), displayed in a new paragraph */
p.linkunder{
clear:left;
display:block;
padding-left:15px;
background:transparent url('/grafix/link-arrow.png') 0 4px no-repeat;
}

/* Buttons */
/* Button classes: 
    button : any kind of button
    button1 : primary button
    button2 : secondary button
    button3 : tertiary button
*/

#container a.button,
#container form input.button[type="submit"],
#container button {
cursor: pointer;
background-image: none; /* no dotted line at the bottom */
white-space: nowrap;
}

#container a.rightbutton { /*a button displayed on the right*/
margin-left: 1em;
float: right;
}

/* Primary Button */
#container a.button1,
#container form input.button1,
#container button.button1 {
color:#fff;
background-color: #e64e0f /*orange*/;
text-decoration:none;
text-transform:uppercase;
font-weight: bold;
border: none;
margin-top: 1em;
margin-bottom: 1em;
padding: 0.5em 1em;
}

#container a.button1,
#container a.button2,
#container a.button3 {
/* This gives better spacing if button is used in running text. */
line-height: 2em;
}

#container a.button1.rightbutton,
#container a.button2.rightbutton,
#container a.button3.rightbutton {
/* Dont do the change of line-height for buttons on the right, because
   this causes the button itself to get bigger (!?) */
line-height: inherit;
}

#container a.button1:hover,
#container form input.button1[type="submit"]:hover,
#container button.button1:hover {
background-color: #cb1719 /*red*/;
}

/* Secondary Button */
#container a.button2,
#container form input.button2,
#container button.button2 {
color:#fff;
background-color: #006895 /*dark blue*/;
text-decoration:none;
font-style: normal;
border: none;
margin-top: 0.25em;
margin-bottom: 0.25em;
padding: 0.25em 0.75em;
}

#container a.button2:hover,
#container form input.button2[type="submit"]:hover,
#container button.button2:hover {
color: #006895 /*dark blue*/;
background-color: #c8e5e8 /*light blue*/;
}

/* Tertiary Button */
#container a.button3,
#container form input.button3,
#container button.button3 {
color:#333; /* standard text colour */
background-color:#fff;
text-decoration:none;
font-style: normal;
font-weight: normal;
border: 1px solid #333;
padding: 0.25em 0.75em;
}

#container a.button3:hover,
#container form input.button3[type="submit"]:hover,
#container button.button3:hover {
color: #006895 /*dark blue*/;
border: 2px solid #006895 /*dark blue*/;
padding: calc(0.25em - 1px) calc(0.75em - 1px);
font-weight: normal;
}

/* Apply some simple styling to Admin buttons, rather than using the button1/2/3 classes */
#content form input[type="submit"],
#content form input[type="reset"],
#content div.formwrap tr td input[type="submit"] {
cursor: pointer;
}
#content form input[type="submit"]:hover,
#content form input[type="reset"]:hover,
#content div.formwrap tr td input[type="submit"]:hover {
font-weight: bold;
}

#container a.floatbuttonright {
   position: fixed; 
   right: 0; 
   top: 65%;
   white-space: normal; 
   width: 4em !important; /* override at element level to suit text */
   height: auto;
   line-height: 1em;
   padding: 0.5em 0.2em;
   text-align: center;
   font-weight: bold;
   font-size: 110%;
   border-radius: 0.3em 0 0 0.3em;
   z-index:10;
}


#content #featurearticles,
#content #morethanamag {
  clear: both;
}

#content div.boxes {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin-left: -0.5em;
  margin-right: -0.5em;
}

#content div.boxes > div.featuredarticle {
font-size:90%;
margin: 0.5em 0.5em 1em 0.5em;
min-width: 250px;
width: 25%;
max-width: 400px;
flex: 1 1 auto;
}

#content div.boxes > div.featuredarticle > a {
  /* no dotted underline */
  background-image: none;
}

#content div.boxes > div.featuredarticle img {
margin:0;
width: 100%;
float: none;
}

#content div.boxes > div.alsoin {
font-size:90%;
margin:0 1em 1em 0;
width:46%;
-webkit-border-radius: 0px 0px 20px 0px;
-moz-border-radius: 0px 0px 20px 0px;
border-radius: 0px 0px 20px 0px;
background-color:#fff;
border:1px solid #999;
-webkit-box-shadow: #aaa 4px 4px 4px;
-moz-box-shadow: #aaa 4px 4px 4px;
box-shadow: #aaa 4px 4px 4px;
}

#content div.alsoin img,
#content div.action img{
margin:0px 0.5em 0.5em 0;
float: left;
}

div.eventblocks {
margin: 1.5em -1em 0 -1em;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}

div.eventblock {
margin: 1em 1em 0 1em;
width: 250px;
}

div.eventblock.one {
/* Resurgence Community */
/* Move it up to align better with other logos */
position: relative;
top: -40px;
margin-bottom: -40px;
}
#content div.eventblock.one img {
margin-bottom: 0;
}

#content div.eventblock img {
margin-right: 0;
}

/*
#content div.alsoin h3{
margin:0 0 0 100px;
background-color:#4c6443;
color:#fff;
padding:2px 0 3px 25px;
}

#content div.action h3{
margin:0 0 0 100px;
background-color:#600;
color:#fff;
padding:2px 0 3px 25px;
}

#content div.alsoin p,
#content div.action p{
margin:10px 5px 0 120px;
}
*/

#content div.boxes > div.featuredarticle h3 {
  font-family: "ff-scala", Serif;
  font-size: 1.2em;
  color: #333;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

#content div.boxes > div h3 {
  margin-top: 0.5em;
}

#content div.boxes > div p {
  margin: 0 1em;
}

#content div.boxes > div.featuredarticle p {
  margin: 0;
}

#content ul,
#content ol{
line-height:1.3em;
margin:0 0 1em 1.5em;
}

#content ul{
list-style:circle;
}

/* If a <ul> appears next to a floated image, then the normal alignment
of the circle symbol goes wrong, and the symbol gets lost in the image.
To solve this, add class "adjacent" to the <ul>, and this will add the 
circle symbol so that it is part of the text. Its a bit of a hack, but
better than loosing the circle entirely or having to do a custom margin.
*/
#content ul.adjacent {
list-style: none;
}
#content ul.adjacent li:before {
content: "⚬"; /* circle symbol */
}

#content li{
margin-bottom:0.5em;
}

#content cite{
font-style: italic;
font-size:1em;
}

#content p.author cite{
font-style: normal;
}

#content em{
font-weight:bold;
font-style:normal;
}

#joinbanner{
width:1000px;
background-color:#ca6;
padding-left:150px;
margin:0 0 10px 0;
border:red solid 1px;
}

div.pullquote{
float:left;
width:300px;
border:7px solid #008f8c /*teal*/ /* was #51a196 */;
border-left:0;
border-right:0;
margin:5px 20px 1em 0;
padding: 0.5em 0 0 0;
/*background:#fff url(/grafix/pullquote-close.png) 100% 70% no-repeat;*/
}

div.pullquote.right{
float:right;
margin:5px 0 1em 20px;
}

div.pullquote p.quote,
div.pullquote p{
/*font-size:1.1em;*/
font-weight:normal;
color: #006895 /*dark blue*/;
text-align:center;
padding: 0 1em 0 1em;
margin:0;
/*background:transparent url(/grafix/pullquote-open.png) 0 5% no-repeat;*/
}

div.pullquote cite{
color: #006895 /*dark blue*/;
display: block;
text-align:center;
margin-bottom: 1em;
}

div.pullquote.right cite{
/* Ignore the ".right" */
/* float:right; */
}

@media only screen and (max-width: 1200px) {
div.pullquote{
/*display:none;*/
clear:both;
}

}

p.closeup{
margin-top:-1em;
}

#content ul.linklist{
list-style-image: url(/grafix/link-arrow.png)
}


#header{
/*position:absolute;
top:40px;
left:0;
width:100%;
background:transparent url(/grafix/resurgence+ecologist_logo_2020-350.jpg) 44px 10px no-repeat;
*/
height:113px;
}

#header img#logo {
padding: 10px 0 0 2em;
position: relative;
left: -2px;  /* Adjust logo left by 2px to allow for the serifs */
width: 95%;
height: auto;
max-width: 350px;
max-height: 88px;
}

#headad{
float:right;
}

#strapline{
font-weight:bold;
font-size:1.1em;
text-align:center;
}

ul#newtop{
background-color: #c8e5e8 /*light blue*/;
height:1.9em;
padding: 0;
display:block;
white-space:nowrap;
width:100%;
overflow:hidden;
}

ul#newtop li:first-child {
padding-left: 2em;
}

ul#newtop li{
display:inline-block;
margin:0 0.8em 0 0;
line-height:2em;
}

ul#newtop li a:link,
ul#newtop li a:visited{
color: #57a8bd /*bright blue*/;
text-decoration:none;
}

ul#newtop li a:hover{
color: #006895 /*dark blue*/;
}

ul#newtop img#topbasket {
position:relative;
top:0.2em;
width: 1.4em;
height: 1.1em;
}


#header p{
float:right;
margin:10px 20px 0 0;
}

#header p#loggedin{
margin-top:11px;
font-size:0.8em;
}

#header p#loggedin span.realname{
font-weight:bold;
}

#header p#loggedin a:link,
#header p#loggedin a:visited{
color:#090;
font-weight:bold;
font-size:1em;
}

#header p#loggedin a:hover{
color:#900;
font-weight:bold;
font-size:1em;
}

#frontpagechunkleft{
float:left;
width:45%;
}

#frontpagechunkright{
float:right;
width:45%;
}

#frontpagechunkleft h2,
#frontpagechunkright h2{
background-color:#a55;
color:#fff;
padding:1px 0 1px 5px;
}

div.feature a:link,
div.feature a:visited{
color:#fff;
text-decoration:none;
}

div.feature a:hover{
color:#ff0;
text-decoration:none;
}

/*
body#editor #leftcol h2,
#leftcol div.feature.editor{
background-color:#333333;
}

body#admin #leftcol h2,
#leftcol div.feature.admin{
background-color:#333333;
}

body#magazine #leftcol h2,
#leftcol div.feature.magazine{
background-color:#4c6443;
}

body#takepart #leftcol h2,
#leftcol div.feature.takepart{
background-color:#a35557;
}

body#satishkumar #leftcol h2,
#leftcol div.feature.satishkumar{
background-color:#978364;
}

body#membership #leftcol h2,
#leftcol div.feature.membership{
background-color:#cfa767;
}

body#myresurg #leftcol h2,
#leftcol div.feature.membership{
background-color:#242b48;
}

body#shop #leftcol h2,
#leftcol div.feature.shop{
background-color:#774b4d;
}

body#education #leftcol h2,
#leftcol div.feature.education{
background-color:#4f464b;
}

#leftcol h2.myresurg{
background:#242b48 url(/grafix/my-resurgence.png) no-repeat 0 0;
text-align:center;
height:24px;
padding:6px 0 0 0;
}

#leftcol h2.myresurgoff{
background:#6f758f url(/grafix/my-resurgence-off.png) no-repeat 0 0;
text-align:center;
height:24px;
padding:6px 0 0 0;
}

#leftcol h2.myresurg a:link,
#leftcol h2.myresurg a:visited,
#leftcol h2.myresurgoff a:link,
#leftcol h2.myresurgoff a:visited{
font-weight:bold;
color:#fff;
text-decoration:none;
}

#leftcol h2.myresurg a:hover{
font-weight:bold;
color:#242b48;
text-decoration:none;
}
*/

#submenu,
#adminmenu,
#subsectmenu{
list-style:none;
}

h2.subsect{
margin-top:1em;
background-color:#777 !important;
color:#fff !important;
}


#submenu li,
#adminmenu li,
#subsectmenu li{
border-top:1px solid #fff;
height:26px;
}

#submenu a:link,
#submenu a:visited,
#adminmenu a:link,
#adminmenu a:visited,
#subsectmenu li a:link,
#subsectmenu li a:visited{
height:22px;
text-decoration:none;
display:block;
padding:4px 0 0 20px;
color:#44383e;
font-size:0.9em;
}

#adminmenuhead{
margin-top:1em;
background-color:#333 !important;
color:#fff;
}

#adminmenu a:link,
#adminmenu a:visited,
#subsectmenu a:link,
#subsectmenu a:visited{
background-color:#BBBBBB;
}

#adminmenu a:hover,
#adminmenu a.urhere,
#subsectmenu a:hover,
#subsectmenu a.urhere{
background-color:#777777;
color:#fff;
}

#admin #submenu a:link,
#admin #submenu a:visited,
#admin #subsectmenu a:link,
#admin #subsectmenu a:visited{
background-color:#BBBBBB;
}

#admin #submenu a:hover,
#admin #submenu a.urhere,
#admin #subsectmenu a:hover,
#admin #subsectmenu a.urhere{
background-color:#777777;
color:#fff;
}

#magazine #submenu a:link,
#magazine #submenu a:visited{
background-color:#c9d1c7;
}

#magazine #submenu a:hover,
#magazine #submenu a.urhere{
background-color:#82937b;
color:#fff;
}

#takepart #submenu a:link,
#takepart #submenu a:visited{
background-color:#e3cccb;
}

#takepart #submenu a:hover,
#takepart #submenu a.urhere{
background-color:#bf8688;
color:#fff;
}

#satishkumar #submenu a:link,
#satishkumar #submenu a:visited{
background-color:#e0d9cf;
}

#satishkumar #submenu a:hover,
#satishkumar #submenu a.urhere{
background-color:#b7a792;
color:#fff;
}

#membership #submenu a:link,
#membership #submenu a:visited{
background-color:#f0e5d1;
}

#membership #submenu a:hover,
#membership #submenu a.urhere{
background-color:#dcbf91;
color:#fff;
}

#myresurg #submenu a:link,
#myresurg #submenu a:visited{
background-color:#a4bbc3;
}

#myresurg #submenu a:hover,
#myresurg #submenu a.urhere{
background-color:#7789a5;
color:#fff;
}

#shop #submenu a:link,
#shop #submenu a:visited{
background-color:#d6c9ca;
}

#shop #submenu a:hover,
#shop #submenu a.urhere{
background-color:#a08182;
color:#fff;
}

#education #submenu a:link,
#education #submenu a:visited{
background-color:#c9c5c6;
}

#education #submenu a:hover,
#education #submenu a.urhere{
background-color:#817a7e;
color:#fff;
}

#relatedpageshead{
border-top:10px solid #fff;
background-color:#777 !important;
}

#relatedpages{
list-style:none;
}

#relatedpages li{
border-top:1px solid #fff;
height:26px;
}

#relatedpages a:link,
#relatedpages a:visited{
height:22px;
height:26px;/*xxxx*/
text-decoration:none;
display:block;
padding:4px 0 0 20px;
color:#666;
font-size:0.9em;
background-color:#eee;
}

#relatedpages a:hover{
background-color:#aaa;
color:#fff;
}

/*
#leftcol div.feature{
width:170px;
color:#fff;
margin-bottom:10px;
padding-bottom:5px;
text-align:center;
}

#leftcol div.feature h3{
text-transform:uppercase;
font-size:1.1em;
padding:5px 5px 0 5px;
}

#leftcol div.feature p{
padding:3px 5px 0 5px;
font-size:0.8em;
}

#leftcol div.feature.magazine{
background:#4c6443 url(/grafix/curve-boxes/maga-box-bgd.png) left bottom no-repeat;
}

#leftcol div.feature.magazine h3{
background:#4c6443 url(/grafix/curve-boxes/maga-hdr-bgd.png) left top no-repeat;
}

#leftcol div.feature.takepart{
background:#a35557 url(/grafix/curve-boxes/take-box-bgd.png) left bottom no-repeat;
}

#leftcol div.feature.takepart h3{
background:#a35557 url(/grafix/curve-boxes/take-hdr-bgd.png) left top no-repeat;
}

#leftcol div.feature.satishkumar{
background:#978364 url(/grafix/curve-boxes/sati-box-bgd.png) left bottom no-repeat;
}

#leftcol div.feature.satishkumar h3{
background:#978364 url(/grafix/curve-boxes/sati-hdr-bgd.png) left top no-repeat;
}

#leftcol div.feature.membership{
background:#774b4d url(/grafix/curve-boxes/memb-box-bgd.png) left bottom no-repeat;
}

#leftcol div.feature.membership h3{
background:#774b4d url(/grafix/curve-boxes/memb-hdr-bgd.png) left top no-repeat;
}

#leftcol div.feature.shop{
background:#774b4d url(/grafix/curve-boxes/shop-box-bgd.png) left bottom no-repeat;
}

#leftcol div.feature.shop h3{
background:#774b4d url(/grafix/curve-boxes/shop-hdr-bgd.png) left top no-repeat;
}

#leftcol div.feature.education{
background:#4f464b url(/grafix/curve-boxes/educ-box-bgd.png) left bottom no-repeat;
}

#leftcol div.feature.education h3{
background:#4f464b url(/grafix/curve-boxes/educ-hdr-bgd.png) left top no-repeat;
}

#leftcol div.feature a:link,
#leftcol div.feature a:visited{
display:block;
color:#fff;
}

#leftcol div.feature a:hover{
display:block;
color:#ddd;
}

#leftcol #aboutres{
text-align:center;
width:160px;
margin-top:20px;
padding:5px 5px 65px 5px;
background:#eed0c5 url(/grafix/beige-acorn.jpg) left bottom no-repeat;
}

#leftcol #aboutres h2{
color:#333;
font-weight:bold;
text-transform:none;
padding:0;
}

#leftcol #aboutres p{
font-size:0.8em;
line-height:1.3em;
}

#leftcol #aboutres a:link,
#leftcol #aboutres a:visited{
color:#666;
text-decoration:none;
border-bottom:1px dotted #555;
}

#leftcol #aboutres a:hover{
color:#666;
text-decoration:none;
border-bottom:1px solid #555;
}
*/

.drop-shadow {
  box-shadow: 0.1em 0.1em 0.8em 0 #bbb;
}


#footer{
clear:left;
position:relative;
}

#footer p{
margin: 0;
}

div#footcontent {
margin:1em 2em;
}

div#footblocks {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin: 0 -0.4em; /* Use a negative left/right margin to offset the  left/right margin of each child item, so that the left- and right-most items in each row effectively have zero left/right margin.  */
}

div.footblock{
margin: 1em 0.4em; /* the left/right margin here must match that of the parent div */
width: 250px;
}

div.footblock.two{
width:225px;
}

div.footblock.four{
width:250px;
}

#container a.nodecor {
  /* no dotted underline */
  background-image: none;
}

div.footblock ul{
list-style:none;
margin-top: 0.3em;
}

div.footblock ul li{
margin:0 0 5px 0;
}

#footnote{
border-top:1px solid #ccc;
}

#footnote p{
font-size:0.9em;
font-style:italic;
}

#footbottom p#footerstrap{
margin-top:1em;
margin-bottom:1em;
/*font-style: italic;*/
}

#footbanner{
/*clear:both;
background-color:#ca6;
font-weight:normal;
color:#fff;
margin-bottom:0.8em;
margin:1em 0 0.8em 0;
width:100%;
height:55px;
padding:0;*/
}

#joinbar{
background-color: #008f8c /*teal*/;
text-align: center;
color:#fff;
font-size: 1.2em;
margin-bottom:0.2em; /*Needed to stop events bird graphic overlap on small screens*/
}

#joinbar img{
margin:0 0 0 2em;
}

#joinbar p {
padding: 0.4em 1em;
}

#joinbar a:link,
#joinbar a:visited {
color:#fff;
background-image: linear-gradient(to right, #fff 33%, rgba(255,255,255,0) 0%);
white-space: nowrap;
}

#joinbar a:hover{
background-image: linear-gradient(#fff, #fff);
}

p#join{
text-transform:uppercase;
color:#fff;
font-weight:bold;
font-size:2em;
text-transform:uppercase;
float:left;
text-align:right;
margin:0 20px 0 200px;
padding:0;
}

p#join span{
font-size:1em !important;
}

#getamembership{
background-color:#ca6;
height:55px;
width:100%;
padding:0;
}

#getamembership img{
position:relative;
margin:0;
}

#footpartners{
background-color:#ace;
font-weight:normal;
/*margin-left:-200px;*/
width:100%;
height:100px;
text-align:center;
}

#footpartners img{
margin-right:50px;
}

#footpartners img.one{
margin-left:200px;
}

#footbottom{
background-color: #004762 /*very dark blue*/;
font-weight:normal;
color:#fff;
height:auto;
padding:5px 0;
/*font-size:0.9em;*/
}

#footbottom p{
margin:0.5em 2em 0.5em 2em;
}

#footbottom a:link,
#footbottom a:visited{
color:#fff;
text-decoration:none;
border-bottom:1px dotted #fff;
}

#footbottom a:hover{
color:#fff;
text-decoration:none;
border-bottom:1px solid #fff;
}

div#articledata {
float:right;
clear:right;
width:190px;
margin:0 0 1em 1.5em;
}

#articledata #issue{
padding: 0.25em;
margin-bottom: 0;
text-align:right;
}

#issue em{
font-weight:normal;
font-style:normal;
}

#issue h6{
 width:190px;
}

#section,
#articledata #section{
padding: 0.35em 0.25em 0.25em 0.25em;
margin:0 0 0.25em 0;
text-align:right;
border-bottom: 1px solid #444;
border-top: 1px solid #444;
}

#section em{
font-weight:normal;
font-style:normal;
}

#magazine #section {
/*background-color:#82937b;*/
}

#satishkumar #section {
background-color:#978364;
}

#articledata #titl{
padding: 0.25em;
margin-bottom: 0;
font-size:1em;
text-align:right;
}

#magazine #titl{
/*background-color:#c9d1c7;
color:#000;*/
}

#satishkumar #titl{
color:#FFF;
background-color:#b7a792;
}

#articledata #author {
padding: 0.25em;
margin:0 0 0.25em 0;
border-top: none;
}

#articledata img {
margin-bottom: 0.3em;
}

#magazine #author{
/*background-color:#e4e8e3;*/
}

#satishkumar #author{
background-color:#e0d9cf;
}

#content p.picturecredit {
font-size: 75%;
line-height: 120%;
margin-bottom: 1em;
}


#header form#searchsite{
display:inline-block;
margin:0 !important;
padding:0 !important;
}

#header form#searchsite label,
form#searchsite input{
display:inline-block;
margin:0;
padding:0;
position:relative;
top:1px;
}

#header form#searchsite input{
border:0;
padding:1px;
}

form#searchsite2{
margin:0;
padding:0;
}

form#searchsite2 label,
form#searchsite2 input{
margin:0;
padding:0;
}

form#searchsite2 label{

}

div.formrow{
padding:2px 0 0 0;
/*height: 2em; removed 14/12/20 DB */
}

#header input#keywords{
float:right;
width:128px;
color:#666;
font-size:0.9em;
padding:2px;
background-color:#eee;
border:1px solid #333;
}

#header input.button,
#header label{
float:right;
margin:0 0 0 5px;
}

#header label{
color:#999;
font-size:0.9em;
font-weight:bold;
margin:3px 5px 0 0;
}

#header a:link,
#header a:visited{
text-decoration:none;
color:#7D5657;
font-size:0.9em;
font-weight:bold;
}

#header a:hover{
color: #000;
}

a.addone:link,
a.addone:visited{
display:block;
width:180px;
padding:2px 5px;
background-color:#d94;
color:#fff;
font-weight:bold;
text-decoration:none;
text-align:center;
margin-bottom:10px;
border:1px solid #e77;
}

a.addone:hover{
background-color:#e77;
color:#fff;
}

#rightcol p.shopdata{
font-size:0.9em;
text-align:right;
width:184px;
color:#999;
padding:2px 3px;
border:1px solid #999;
}

p#ref{
width:184px;
font-size:0.9em;
text-transform:uppercase;
text-align:right;
background-color:#eee;
padding:2px 3px;
color:#666;
margin-bottom:3px;
border:1px solid #999;
}

p#price{
width:184px;
font-size:0.9em;
text-transform:uppercase;
text-align:right;
font-weight:bold;
background-color:#eee;
padding:2px 3px;
color:#666;
border:1px solid #999;
border-bottom:0;
margin:0;
}

p#vatpp{
width:184px;
font-size:0.8em;
text-align:right;
font-weight:normal;
background-color:#eee;
padding:2px 3px;
color:#666;
margin:0 0 3px 0;
border:1px solid #999;
border-top:0;
}

#rightcol p.buyit a:link,
#rightcol p.buyit a:visited,
#content p.buyit a:link,
#content p.buyit a:visited{
color:#fff;
}

div.shopitem{
/*clear:left;*/
border-top:1px solid #ccc;
margin-top:20px;
padding-top:10px;
/*height:120px;*/
}

div.shopitem img{
border:1px solid #ccc !important;
}

div.shopitem a{
font-weight:bold;
}

div.highlight{
background-color:#ffe;
border:1px solid #036;
padding:0.5em 1em 0 1em;
margin-bottom:1em;
}

#content div.highlight h3{
margin-top:0;
}

#eventlist h3{
width:100%;
font-weight:normal;
background-color:#4c6443;
color:#fff;
font-size:1em;
padding:2px 5px;
}

#eventlist h4.horizdivider{
width:100%;
font-weight:bold;
background-color:#bf8688;
font-size:0.7em;
}

/*#eventlist h5{
width:100%;
font-weight:normal;
background-color:#fd9;
color:#000;
font-size:0.9em;
padding:2px 5px;
margin-bottom:0.5em;
}*/

#magacontents{
clear:left;
}

#magacontents h2#contents{
clear:left;
margin:1em 0 0 0;
font-size: 1.8em;
/* more space above *!! */
}

#magacontents h3,
#unpubarticles h3{
/*
width:90%;
font-weight:bold;
background-color:#4c6443;
color:#fff;
font-size:1.1em;
padding:2px 5px;
*/
font-size:1.2em;
}

#magacontents h4,
#unpubarticles p:first-line{
font-size:1em;
font-weight:bold;
color:#666;
margin-bottom: 0;
}

#magacontents h4.location{
font-size:0.9em;
font-weight:normal;
}

#magacontents h4.atfrav,
#content p.atfrav,
p.opacc{
/* Articles that are free to download */
border-left:0.75em solid #ad1280 /*purple*/;
padding-left:0.25em;
}

#magacontents h4.atfrem,
#content p.atfrem{
/* Articles that only members can download */
border-left:0.75em solid #c8e5e8 /*light blue*/;
padding-left:0.25em;
}

#magacontents h4.atnvdl,
#content p.atnvdl{
border-left:0.75em solid #eee;
padding-left:0.25em;
}


#magacontents p{
margin: 0 0 1em 1em;
}

#content div.articlekey p {
line-height: 1.1em;
margin-bottom: 0.25em;
}

ul#alphacontrib,
ul#majorcontrib{
list-style:none;
margin:0;
width:99%;
}

ul#alphacontrib li,
ul#majorcontrib li{
list-style:none;
float:left;
width:2em;
height:1.5em;
text-align:center;
font-size:1em;
font-weight:bold;
margin-right:0.5em;
}

ul#majorcontrib li{
width:20%;
min-width: 12em;
font-weight:normal;
}

ul#alphacontrib a:link,
ul#majorcontrib a:link,
ul#alphacontrib a:visited,
ul#majorcontrib a:visited{
display:block;
text-decoration:none;
border:none;
padding-top:2px;
}

ul#majorcontrib a:link,
ul#majorcontrib a:visited{
padding-top:0px;
}

p.reviewer{
font-size:0.9em;
border-top:1px solid #999;
padding-top:5px;
}

div.previssue,
div.currissue {
/*display:block;
float:left;
height:25em;*/
width:200px;
margin:0 0.7em 0.5em 0;
position: relative;
}

div.previssue.nobigspaceforcoverimage{
height: inherit;
width: 225px;
}

div.previssue p{
line-height:120%;
margin:2px !important;
}

div.issues-grid { /* used for ecologist archive */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-flow: row wrap;
    flex-direction: row;
    flex-wrap: wrap;
}

/*#subs forms - start */

form#subs legend span{
font-size:0.8em;
}

form#subs fieldset label{
width:30%;
float:left;
text-align:right;
padding-right:10px;
}

form#subs fieldset input{
width:200px;
}

form#subs fieldset.radiocheck label{
width:90%;
margin:0;
float:right;
text-align:left;
}

form#subs fieldset.radiocheck input.radio,
form#subs fieldset.radiocheck input.checkbox{
margin:0;
position:relative;
width:8%;
top:1px;/*this has ie6 and ie7 conditional diffs*/
}

form#subs div.formrow.textarea textarea{
height:65px;
width:200px;
}

form#subs div.formrow{
margin-bottom:5px;
}

form#subs fieldset.radiocheck div.formrow{
margin-bottom:0;
}

form#subs div.formrow.textarea{
height:75px;
}

#button,
.button{
width:auto !important;
max-width: 100%; /* added 14/12/20 */
}

form#subs input.issue[type="radio"] {
width:10px;
margin-left:8%;
} 

form#subs fieldset input#over13 {
  width: 10%;
}

/*#subs forms - end */

/*forms - start (copy of subs form) */

form{
/* width:490px; */
margin-bottom:20px;
/*background-color:#eee;
border:1px solid #ccc;*/
/*padding:10px;*/
}

#header form{
border:0;
padding:0;
background-color:transparent;
}

form p{
margin-top:0.5em;
}

form fieldset{
border:1px solid #ccc;
padding:1em 1em 2em 1em;
margin-bottom:1em;
}

form legend{
font-size:0.9em;
font-weight:normal;
padding:0.25em 0.5em;
background-color:#446;
color:#fff;
margin:0;/*this has ie6 and ie7 conditional diffs*/
}

form legend span{
font-size:0.8em;
}

form label,
form fieldset label{
font-size:0.9em;
font-weight:bold;
width: 200px;
display: inline-block; /* added , 14/12/20 */
text-align:right;
padding-right:10px;
}

form input,
form fieldset input{
max-width: 90%; /* was: width:200px; change 14/12/20 DB */
}

form div.formrow.radiocheck label{
/*width:90%;
margin:0;
float:right;
text-align:left;*/
}

form div.formrow.radiocheck input.radio,
form div.formrow.radiocheck input.checkbox{
margin:0;
position:relative;
left:-13px;
width:8%;
top:1px;/*this has ie6 and ie7 conditional diffs*/
}

form div.formrow.textarea textarea{
height:65px;
width:200px;
}

form div.formrow select{
/*width:200px; removed 14/12/20 DB */
}

form div.formrow{
/* height:30px; */
margin-bottom:5px;
/*clear:left;*/
}

form fieldset.radiocheck div.formrow{
/* height:30px; */
margin-bottom:0;
}

form div.formrow.textarea{
height:75px;
}

div.newsletterform {
padding-left:0.6em;
width: 100%;
max-width: 20em;
border: 3px solid #57a8bd /*bright blue*/;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

#footer div.newsletterform {
max-width: 16em;
}

div.newsletterform label {
width: auto;
}

div.newsletterform div.formrow input#go {
margin:0.5em 0;
}

div.newsletterform form {
margin-bottom:0;
}

/* removed DB 23/11/20
#button,
.button{
width:auto !important;
margin-left:210px;
}
*/

/*forms - end */

/* tables - start */

table{
border:1px solid #ccc;
margin-bottom:20px;
border-collapse:collapse;
}

th,
td{
padding:5px;
}

thead th{
font-weight:bold;
font-size:1em;
text-align:center;
background-color:#eee;
}

tbody th{
font-weight:normal;
font-size:1em;
text-align:left;
background-color:#eee;
}

tbody td{
font-weight:normal;
font-size:1em;
text-align:left;
background-color:#fff;
border:1px solid #ccc;
}

td.right{
text-align:right;
}


/* tables - end */

ul.issuelist{
}

ul.issuelist li{
list-style:none;
/* height:23px; */
}

#content ul.issuelist li img{
float:none;
position:relative;
top:8px;
margin-left:10px;
margin-right:0;
}

#content div.cur-issue,
#content div.bak-issue,
#content div.arc-issue{
font-size:0.9em;
margin-bottom: 0.75em;
padding-left: 1.8em;
background: #fff url(/grafix/open-book-icon-128.jpg) left center / 1.5em no-repeat;
}

#content div.pdf-issue{
font-size:0.9em;
margin-bottom: 0.75em;
padding-left: 1.8em;
background: #fff url(/grafix/pdf-icon-128.jpg) left center / 1.3em no-repeat;
}

#content div.previssue.nobigspaceforcoverimage div.pdf-issue,
#content div.previssue.nobigspaceforcoverimage div.cur-issue,
#content div.previssue.nobigspaceforcoverimage div.bak-issue,
#content div.previssue.nobigspaceforcoverimage div.arc-issue {
/* Dont reduce the font size when this is displayed without the cover image */
font-size: inherit;
}

#classified ul.splitleft{
width:45%;
float:left;
}

#classified h2{
width:492px;
padding:5px;
background-color:#545;
color:#fff;
margin-top:20px;
}

#classified img{
margin:0 0 10px 0;
padding:0;
float:none;
border:1px solid #999;
}

#classified div.dispadvert a{
border-bottom:0;
}

#classified div.advert{
border:1px solid #999;
padding:10px;
margin-bottom:10px;
font-size:0.9em;
width:480px;
}

#classified div.advert p{
margin:0;
}

#classified div.advert p:first-line{
font-weight:bold;
}

#classified p.noadvert{
border:1px solid #999;
font-size:1.2em;
width:480px;
background-color:#eee;
text-align:center;
padding:3px 10px 5px 10px;
}

#content div.artist{
position:relative;
float:left;
width:140px;
height:160px;
margin:10px 10px 15px 0;
}

#content div.artist p{
position:absolute;
bottom:0;
left:0;
font-size:0.9em;
margin:0 0 0 3px;
}

#content p.smallprint{
font-size:0.7em;
}

#content ul.issuelist img{
display:none;
}

/* warning etc messages start */
div.messages {
  /* allow space to the right for possible share buttons */
  margin: 1em 9em 1em 2em;
}

#messages{
margin:0 0 1em 0;
background:#fff url(/grafix/warning-triangle.png) top left no-repeat;
padding:0 0 0 22px;
font-size:0.9em;
min-height:40px;
}

p.error,
p.warn,
p.info{
font-weight:bold;
color:#b22;
margin:0 !important;
padding:0;
}

p.warn{
color:#c70;
}

p.info{
color:#396;
}

.ok {
color:#396;
}

.error {
color:#b22;
}

/* warning etc messages end */

blockquote p{
/*text-indent:-0.3em;*/
margin-left:1em !important;
margin-right:1em !important;
font-style: italic !important;
}
#content p.author{
font-weight:bold;
font-style:italic;
padding:0.8em 0 1em 0;
font-size:1.1em;
/*border:1px solid #ccc;
border-left:0;
border-right:0;*/
}

#content p.more{
font-weight:bold;
font-size:1.1em;
color:#999;
}

form#signup{
font-size:0.9em;
width:190px;
margin:0;
}

form#signup label{
margin:0 0 0 -10px;
text-align:left;
}

form#signup input{
margin:0 0 0 -10px;
padding:0;
}

form#signup input.button{
margin:0 0 0 -10px;
width:auto;
}

p.gallerycaption{
color:#666;
margin:0.5em 0 1em 0;
padding-bottom:0.5em;
border-bottom:1px solid #666;
}

.nobord{
border:0 !important;
text-decoration:none !important;
}

.hide{
display:none;
}

#content div.iconbox{
width:220px;
float:left;
border:1px solid #ddd;
margin:0 10px 10px 0;
min-height:96px;
height:auto !important;
height:96px;
}

#content div.iconbox img{
display:inline-block;
margin:0 5px 0 0;
border-right:1px solid #ddd;
}

#content div.iconbox h2{
font-size:1em;
margin:0;
padding:3px 3px 3px 6px;
color:#fff;
font-weight:bold;
text-transform:uppercase;
}

#content div.iconbox h2.blue{
background-color:#226;
}

#content div.iconbox h2.green{
background-color:#262;
}

#content div.iconbox h2.red{
background-color:#622;
}

#content div.iconbox h2.pink{
background-color:#936;
}

#content div.iconbox h2.grey{
background-color:#555;
}

#content div.iconbox h2.orange{
background-color:#b50;
}

#content div.iconbox p{
padding:3px 5px 0 0;
font-size:0.9em;
line-height:130%;
text-align:center;
font-weight:bold;
margin-top:1em;
}


#logintop{
position:absolute;
top:0;
left:30%;
margin:0;
padding:0;
width:440px;
}

#logintop fieldset{
border:0;
}


#logintop label,
#logintop input{
display:inline;
margin:0;
padding:0;
float:none;
height:14px;
}

#logintop label{
width:150px;
text-align:right;
}

#logintop input.loginsubmit{
width:50px;
position:relative;
right:-30px;
height:22px;
}

#logintop input#username,
#logintop input#password{
width:150px;
color:#666;
font-size:0.9em;
padding:2px;
background-color:#eee;
border:1px solid #333;
}

#logintop input#password,
#logintop label.passwd{
position:relative;
right:-28px;
}


#headerbasket div {
clear:right;
float:right;
margin: 0 20px 0 0;
}

#tinybasket {
display:inline-block;
font-size:1.1em;
width:160px;
height:26px;
padding:2px;
font-weight:bold;
color: #CC0033;
}

#tinybasket img {
border:0;
vertical-align:middle;
}

#tinybasket span.emptybasket {
font-style:italic;
font-weight:normal;
color: grey;
}

#rightbasket{
/*float:right;*/
position:absolute;
right:30px;
top:70px;
background-color:#fff;
border:1px solid #a88;
line-height:1.3em;
font-size:0.9em;
padding:0.5em;
margin-bottom:1em;
width:175px;
}

#rightbasket h3{
font-weight:normal;
font-size:1em;
color:#a88;
margin:0 0 0.5em 0;
}

#rightbasket p.smallbasketmoney {
text-align:right;
border-bottom:1px solid #a88;
width:175px;
}

#rightbasket p span{
display:inline-block;
/* width:6em; */
}


/* basket stuff - START */

#basket{
background-color:#fff;
font-size:0.9em;
border:0;
}

#basket caption{
font-weight:bold;
font-size:1.2em;
color:#666;
border:0;
}


#basket thead tr{
border-bottom:2px solid #555;
}

#basket tbody tr{
height:1em;
border:0;
}

#basket tbody td.pric,
#basket thead th.hpric,
#basket thead th.hprid,
#basket tbody td.quty,
#basket thead th.hquty,
#basket tbody td.cost,
#basket thead th.hcost,
#basket tbody td.desc,
#basket thead th.hdesc,
#order tbody td.pric,
#order thead th.hpric,
#order tbody td.quty,
#order thead th.hquty,
#order tbody td.cost,
#order thead th.hcost,
#order tbody td.desc,
#order thead th.hdesc{
border-bottom:1px solid #ccc;
background-color:#fff;
}

#basket tbody td.quty input{
width:30px
}


#basket tbody td.prid{
text-transform:uppercase;
font-size:0.8em;
}

#content div.divider{
display:block;
height:5px;
background-color:#ddd;
width:100%;
margin:1em 0;
padding:0;
}

#rightcol div.divider{
display:block;
height:3px;
background-color:#eee;
width:100%;
margin:0.5em 0;
padding:0;
}

body#admin table {
font-size:0.85em;
line-height: 1.2em;
}

body#admin #content{
margin-right:20px;
}

ul#myresurgence{
list-style:none;
background-color:red;
color:white;
}

img#printhead{
display:none;
}

form p#whatislogin{
position:absolute;
top:6px;
left:270px;
font-size:0.9em;
width:200px;
}

div.pset_content,
div.allissues {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

div.shoplist {
/*float:left !important;*/
width:190px;
margin:0 1em 0.5em 0;
border-bottom:1px solid #777;
}

/*
p.buylink a:link,
p.buylink a:visited{
background-color:#44573a;
color:#fff !important;
font-weight:bold;
border-bottom:0;
text-decoration:none;
padding:0 5px;
}

p.buylink a:hover{
background-color:#819f6f;
color:#000 !important;
font-weight:bold;
border-bottom:0;
text-decoration:none;
padding:0 5px;
}

p.prodbuylink{
margin-left:0;
}

p.prodbuylink a:link,
p.prodbuylink a:visited{
background-color:#44573a;
color:#fff !important;
font-weight:bold;
border-bottom:0;
text-decoration:none;
padding:0 5px;
}

p.prodbuylink a:hover{
background-color:#819f6f;
color:#fff !important;
font-weight:bold;
border-bottom:0;
text-decoration:none;
padding:0 5px;
}
*/

div.feature ul{
list-style:none;
margin:0 !important;
}

div.feature ul li{
line-height:100%;
margin-bottom:10px;
}

div#creditfooter{
display:none;
}

div#blogheads{
font-size:0.9em;
margin:5px 1px -4px 1px !important;
padding:3px 0 0 0;
background: #a35557 url(/grafix/front-page/blogheads-bgd.png) no-repeat 0 0;
height:50px;
}

#content div.addressbox{
/*width:250px;
padding:0 5px 5px 5px;
float:left !important;
margin:0 1em 2em 0;*/
}

div.twtr-hd h3{
display:none;
}

div.twtr-hd h4 a{
font-size:0.8em;
}

div.twtr-hd img.twtr-profile-img{
position:relative;
top:-8px;
}

div#merger{
border:2px solid #4c6443;
float:right;
padding:10px;
padding-bottom:0;
width:200px;
margin-left:2em;
}

div#poll table{
width:190px !important;
font-size:.8em !important;
}

a.tempmenuitem:hover{
color:yellow !important;
font-weight:bold !important;
}

.hidden {
display:none;
}

form.newforms{
padding:0;
margin:0;
}

form.newforms h4{
}

form.newforms label,
form.newforms input.radio{
width:auto;
margin:0;
padding:0;
float:none;
}

form.newforms label{
position:relative;
top:-2px;
}

form.newforms h2{
clear:both;
}

form.newforms h2.highlit{
color:#fff !important;
padding:5px;
margin-top:1em;
}

form.newforms h2.green{
background-color:#393;
}

form.newforms h2.blue{
background-color:#006cb3;
}

form.newforms h2.orange{
background-color:#f90;
}

form.newforms div.form-section{
float:left;
margin:0 0 1em 70px;
}

form.newforms div.form-section.onethird{
float:left;
margin:0 0 0 20px;
width:200px;
}

form.newforms p.form-country-heads{
background-color:#9ede9e;
margin:0 !important;
padding:5px;
color:#111;
width:100px;
}

form.newforms ul.buttonlist{
list-style:none !important;
margin:0 0 20px 0 !important;
}

form.newforms p.smallprint{
margin-top:3px;
}

form.newforms p.sellingpoints{
font-weight:bold !important;
background-color:#fff !important;
}

form.newforms p.sellingpoints.green{
color:#393 !important;
background-color:#fff !important;
}

form.newforms p.sellingpoints.blue{
color:#006cb3 !important;
background-color:#fff !important;
}

form.newforms p.sellingpoints.richorange{
color:#f90 !important;
background-color:#fff !important;
}

form.newforms p.stage-number{
font-size:2em;
font-weight:bold;
text-align:center;
padding:0 !important;
margin:0;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
width:40px;
height:40px;
}

form.newforms p.pink{
background-color:pink;
color
:red;
}
form.newforms p.orange{
background-color:#f90;
color:#900;
}
form.newforms p.purple{
background-color:#939;
color:#cc6;
}

/*
#submitextradetails{
background-color:#004762;
border:0;
padding:0 1em;
margin:0;
width:150px;
font-size:100%;
font-weight:bold;
height:2em;
color:#fff;
}

#submitextradetails:hover{
background-color:#008bca;
cursor: pointer;
}

#paybutton{
width:120px;
height:20px;
background-color:#006633;
border:0;
}

#paybutton:hover{
background-color:#008A45;
}
*/

#quotebanner{
width:100%;
height:180px;
background: transparent url(/grafix/quote-banner-background.jpg) 0 0 no-repeat;
margin:0 0 30px 0;
font-family: 'Kalam', cursive;
color:#111;
}

p#bannerquote{
font-size:2em;
font-weight:bold;
text-align:center;
padding:50px 100px;
}

p#bannerquote span{
font-size:1em;
font-weight:normal;
font-style:italic;
}

div#membanner{
margin-bottom:1em;
/*padding-bottom: auto;*/
}

div#membanner img {
  margin-right: 0;
  margin-bottom: 1em;
}

div#membanner div.wrapper {
  padding-top: 1.25em;
}

div#membanner div.mem-blurb {
  padding: 0.25em 0;
  background-color:  #006895 /*dark blue*/;
}

div#membanner div.mem-blurb p {
  margin: 0.2em 0.4em;
  line-height: 1.1em;
  color: white;
  font-size: 0.9em;
  text-align: center;
}

p.archiveyrs a {
font-weight:bold;
padding:0.2em 0.3em;
}

div.addthis_horizontal_follow_toolbox{

border:none !important;
text-decoration:none !important;
}

#container a.at-follow-btn,
#container a.at-share-btn {
border:none !important;
text-decoration:none !important;
background-image: none;
}

#frontpageleft {
  width:325px;
  float:left;
}

#frontpageleft img {
  width: 300px;
  margin:0 40px 25px 0;
}

#frontpagetwitterleft {
  display: none;
}

/*
#frontpage #russelbrand {
  position:absolute;
  top:177px;
  left:70px;
}
#frontpage #russelbrand img {
  width: 220px;
  height: 220px;
}
*/

/*
@media screen and (max-width: 950px) {

  #frontpagetwitter {
    display: none;
  }

  #frontpagetwitterleft {
    display: block;
    width:300px;
    float: left;
    margin-right: 1em;
  }
}
*/


@media screen and (max-width: 750px) {

  /* Remove top_banner_ad when window is narrow, to prevent header from wrapping round */
  div#header .banner_ad {
    display: none;
  }

  /* Move share buttons to where the top_banner_ad was, to prevent them clashing with page text */
  div#topsharer {
    top: -6.5em;
  }

  #content > h1:first-child {
    /* No need to make space for Share This Page buttons any more*/
    margin-right: 0;
  }

  #header img#logo {
    padding-left: 1em;
  }

  #content {
    margin-left: 1em;
    margin-right: 1em;
  }

/*
  #banner-image p{
    top: 0.5em;
    left: 0.5em;
    line-height: 1.2em;
  }
*/
  #content div.issuebanner {
    padding: 1.25em 0 1.25em 1em;
    margin: 0 -1em 0 -1em;
  }

  ul#newtop li:first-child {
    padding-left: 1em;
  }

  div#issueblurb {
    padding-left: 0;
  }

  #frontpageleft {
    width: 275px;
  }

  #frontpageleft img {
    width: 250px;
  }

  #content img,
  #content .fl-left {
    margin-right: 1em;
  }

  #content .fl-right{
    margin-left: 1em;
  }

  div.article {
    display: flex;
    flex-flow: column nowrap;
  }
  div.article h1#title {
    /* Margins above and below aren't wanted when displayed in a flex grid,
       because the margins of adjacent elements are sufficient */
    margin-top: 0;
    margin-bottom: 0;
  }
  #container div.article a.donate {
    order: 98; /* display this after the articlebody */
    align-self: center;
    margin-left: 0;
  }
  div.article div#articledata {
    order: 99; /* display this after the articlebody and donate button */
    align-self: center;
    margin-left: 0;
  }
  div.article div#articleimage {
    align-self: center;
    /*margin-bottom: 0.5em;*/
  }
  div.article div#articledata #issue,
  div.article div#articledata #titl,
  div.article div#articledata #section,
  div.article div#articledata #author,
  div.article div#articledata * {
    text-align: center;
  }

  #content div.boxes > div {
    width: 100%;
    margin-right: 0;
  }

  div#footcontent {
    margin:1em 1em;
  }

  #footbottom p {
    margin-left:1em;
    margin-right:1em;
  }

  div.pullquote,
  div.pullquote.right {
    min-width: inherit;
    width: 100%;
    background-size: 10%; 
  }

  div.pullquote p.quote,
  div.pullquote p {
    background-size: 10%;
    padding: 0.5em 12% 0 12%;
  }

  #rightbasket {
    position: static;
    margin-left: 1em;
    float:right;
  }

  #joinbar img {
    margin-left: 0;
  }

  form#subs input.issue[type="radio"] {
    margin-left:0;
  } 

}


@media screen and (max-width: 625px) {

  /* Hide share buttons */
  div#topsharer {
    display: none;
  }

  #content #productpage img {
    /* Move images to be centred, rather than have text flow around them,
       to avoid text getting squeezed into a narrow gutter.
       The breakpoint at 625px is suitable for the product page, with 
       190px-wide images.
    */
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  #frontpage #block1 {
    display: flex;
    flex-flow: column nowrap;
  }

  #frontpage #block1 div#issueblurb {
    order: -1; /* display this first */
    max-width: inherit;
    align-self: center;
  }

  #frontpage #block1 div,
  #frontpage #block1 #frontpageleft img {
    width: 100%;
    max-width: 300px;
    align-self: center;
  }

  #frontpagecottage div img {
    width: calc(100% - 0.6em);
  }
}

@media screen and (max-width: 500px) {

  #header img#logo {
    padding-left: 0.5em;
  }

  #content {
    margin: 1em 0.5em;
  }

/*
  #content h2 {
    margin-top: 0.5em;
  }
*/
  #content ul {
    margin-left: 1em;
  }

/*
  #frontpage a#russelbrand {
    height: 115px;
    overflow: hidden;
    top: 280px;
    left: 20px;
  }
*/

  ul#newtop li:first-child {
    padding-left: 0.5em;
  }

  #content img,
  #content .fl-left,
  #content .fl-right{
    /* Move images to be centred, rather than have text flow around them,
       to avoid text getting squeezed into a narrow gutter.
       The breakpoint at 450px is ok for images that are 200-300px wide.
    */
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
  }

  div#membanner img {
    margin-right: auto;
    margin-bottom: 0.25em;
  }
  div#membanner div.wrapper {
    padding: 0;
  }

  #content div.issuebanner {
    padding: 1em 0 0.5em 0;
    margin: 0 -0.5em 0 -1em;
  }

  #content div.issuebanner img {
    margin: 0 auto 0.8em auto;
  }

  #content div.issuebanner img.cover {
    width: 75%;
    max-width: 300px;
    margin-right: auto;
    margin-bottom: 1.5em; /* allow space for box-shadow */
  }

  #content div.issuebanner img.teaser {
    width: 98%;
    margin: 0.5em auto -0.5em auto;
  }

  div#footcontent {
    margin:1em 0.5em;
  }

  #footbottom p {
    margin-left:0.5em;
    margin-right:0.5em;
  }

  div.pullquote,
  div.pullquote.right {
    background-size: 15%;
  }

  div.pullquote p.quote,
  div.pullquote p {
    background-size: 15%;
    padding: 0.5em 18% 0 18%;
  }

  #rightbasket {
    margin-left: 0.5em;
  }
  #rightbasket,
  #rightbasket p.smallbasketmoney {
    width: 100px;
  }
  #rightbasket h2 {
    font-size: 1.1em;
  }
  #rightbasket ul {
    margin-left: 0;
    list-style: none;
  }
  #rightbasket a.button1 {
    padding-left: 0.25em;
    padding-right: 0.25em;
  }

  form#subs fieldset label {
    width: auto;
    text-align: left;
  }

  form#subs div#countryselector {
    /* ensure properly positioned below postcode field */
    clear: both;
  }

  #frontpagecottage div img {
    margin-right: 0;
    margin-left: 0;
  }

}