/* ==========================================================
THEME NAME: g7
AUTHOR: g (https://glvr.com)
VERSION / UPDATED: Nov 2024
DESCRIPTION: This is a private, non-commercial, theme.
It's heavily modified, lacking various standard features,
has additional others, and may not work as intended.
========================================================== */


/* --------------------------------------------------------------------------------------------------
The css here is old and probably unreliable.

It hasn't been sensibly optimised for smaller screens,
and likely still has some px rather than em values.

And... I long-since passed the point of even beginning to genuinely
understand much of this stuff, since which I've forgotten a lot too.
-------------------------------------------------------------------------------------------------- */



/* ----------------------------------------------------------------------------------------------------
NAVIGATING THIS FILE...

1 First, browser defaults are removed and then some basics established.

2 Then the main structural elements are added,
so they can be quickly changed without scrolling through
a long document.

3 Then other elements are added.

The main divs, all full-width, are, from top-to-bottom:
wrapper ------------ centered, holds all content.
switch --------------- unstyled div, used when Zajax plugin is active.
header -------------- at top, contains logo and primary-nav.
main ----------------- under header, down to footer.
content ----------- main content area (a child div of 'main').
footer --------------- bottom block.
base ----------------- optional additional div pinned to viewport bottom.



Additionally, the above divs can include:
wide-row ------------- full-width, to enable 'horizontal stripe' layout
                         to emphasise content blocks.
inner ------------ used to center content and restrict width.

The main content area is 'main', which has a child div of 'content',
currently unstyled, for a single-column structure.

For a conventional two-column structure, 'inner' can be removed
and an additional div of 'sidebar' added.

Most divs are floated, with 'overflow: hidden;' used to expand
non-floated divs and enclose their floated child elements.

(Usually with 'overflow:hidden' the parent doesn't stretch, and
instead everything outside the bounds of it gets hidden.
But if that parent div doesn't have a specified height, there are
no outer bounds to the height of it and so nothing becomes hidden).

Remember to apply width to floats to prevent shrink-wrap.

Some selectors are over-qualified. I prefer this, because it helps
(by providing useful info, example: whether it's used for a div or a p, etcetera).

 ---------------------------------------------------------------------------------------------------- */


/* =========================================================
 RESET (remove browser defaults).
========================================================== */

/* --------------------------------------------------------------------------------------------------
http://meyerweb.com/eric/tools/css/reset/.
Don't use a universal '*' because it has unwanted
effects (buttons, drop-downs, etcetera).
-------------------------------------------------------------------------------------------------- */


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, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
{
font-size: 100%;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
vertical-align: baseline;
padding: 0;
border: 0;
margin: 0;
outline: 0;
}

body
{
background: white;
color: #333;
line-height: 1;
}


/* tables still need 'cellspacing="0"' in the markup */
table
{
border-collapse: separate;
border-spacing: 0;
}

caption, th, td
{
text-align: left;
font-weight: normal;
}

blockquote:before,
blockquote:after,
q:before, q:after
{
content: "";
}

blockquote, q
{
quotes: "" "";
}


/* =========================================================
 RESTORE ('normalise' some stuff after reset).
========================================================== */

body
{
background: #f0f0e8 url(/graphics/main/misc/background/1.png) 0 0 repeat;
color: #333;
text-align: center; /* when using a centered layout, this centers wrapper in buggy browsers */
font-size: 120%;
line-height: 1.6;
font-family: "Open Sans", sans-serif;
}

/* Fix skinny fonts on Safari */
html
{
-webkit-font-smoothing: subpixel-antialiased;
}

em
{
font-style: italic;
}

strong
{
font-weight: bold;
color: #555; /* slightly paler than normal text */
}






/* --------------------------------------------------------------------------------------------------
Here's some miscellaneous stuff which'll be used throughout.
-------------------------------------------------------------------------------------------------- */



/* --------------------------------------------------------------------------------------------------------------
 HIDE (hides stuff).
-------------------------------------------------------------------------------------------------------------- */

.hidden,
.no-show
{
display: none;
}



/* --------------------------------------------------------------------------------------------------------------
 CENTER (centers stuff).
-------------------------------------------------------------------------------------------------------------- */

.align-center,
.center
{
display: block;
margin: 0 auto;
text-align: center;
}



/* --------------------------------------------------------------------------------------------------------------
 UPPERCASE (text-transform).
-------------------------------------------------------------------------------------------------------------- */

.uppercase
{
text-transform: uppercase;
}





/* --------------------------------------------------------------------------------------------------
Now... add the major layout divs.
 ---------------------------------------------------------------------------------------------------- */


/* =========================================================
 WRAPPER (holds all content).
========================================================== */

div#wrapper
{
float: left;
text-align: left;
width: 100%;
margin: 0 auto;
}


/* =========================================================
 HEADER (contains logo and primary-nav).
========================================================== */

div#header
{
float: left;
background: #666 url(/graphics/header/background/1.jpg) 0 0 repeat;
width: 100%;
padding-top: 0.5em;
border-bottom: 5px solid #333;
}

div#logo
{
float: left;
width: 45%;
}

div#primary-nav
{
float: right;
width: 40%;
text-align: right;
padding: 0;
}



/* =========================================================
 MAIN (under header, down to footer).
========================================================== */

div#main
{
clear: both;
float: left;
width: 100%;
padding: 0 0 5em 0;
}



/* =========================================================
 CONTENT (single column content area).
========================================================== */

div#content
{
float: left;
width: 100%;
}




/* =========================================================
 FOOTER (under main, contains secondary links).
========================================================== */

div#footer
{
clear: both;
float: left;
text-align: left;
background: #666 url(/graphics/footer/background/1.jpg) 0 0 repeat;
width: 100%;
padding: 0;
border-top: 3px solid #333;
}





/* =========================================================
 INNER (centers content and restricts width, used in various divs).
========================================================== */

div.inner
{
width: 80%;
min-width: 230px;
max-width: 750px;
padding: 0 1em;
margin: 0 auto;
overflow: hidden;
}


/* =========================================================
 WIDE-ROW (use with 'inner' for full-width with lower border).
========================================================== */

/* Used on front page. */

div.wide-row,
div.wide-row-2
{
clear: both;
float: left;
width: 100%;
padding: 0 0 2.5em 0;
border-bottom: 1px solid #bbb;
}

div.wide-row-2
{
padding-bottom: 0;
border-bottom: 0px solid #bbb;
}


/* --------------------------------------------------------------------------------------------------
Now let's set basic links.
-------------------------------------------------------------------------------------------------- */

/* =========================================================
 LINKS (set default here, then override where required).
========================================================= */

/* Remove browser-generated border on linked images. */
a img
{
border: 0;
}

/* Remove underline (which would chop descenders), before
using pseudo-underline of bottom spacing & border. */
a
{
text-decoration: none;
}

a:link,
a:visited
{
color: inherit; /* Would otherwise be browser default. */
padding-bottom: 1px;
border-bottom: 1px dotted #999;
}

a:hover,
a:hover strong /* 'Strong' word(s) inside a link. */
{
color: #8ec63f;
border-bottom: 1px solid #8ec63f;
}

a:hover strong /* Avoid double border. */
{
border-bottom: 0;
}


a.plain:link,
a.plain:visited
/* Used with » */
{
border-bottom: 0;
}





/* for page/post titles */
h2 a:link,
h2 a:visited,
h3 a:link,
h3 a:visited,
h2 a:hover,
h3 a:hover
{
font-weight: bold;
border-bottom: 0;
}


/* --------------------------------------------------------------------------------------------------
Now, we're revisiting the major divs, to set elements within them...
again, loosely from top-to-bottom. Some are out-of-place, to avoid
unwanted specificity.
 ---------------------------------------------------------------------------------------------------- */



/* =========================================================
 LOGO
========================================================== */

div#logo a:link,
div#logo a:visited,
div#logo a:hover
{
padding-bottom: 0;
border-bottom: 0;
}



/* =========================================================
 PRIMARY-NAV
========================================================== */

div#primary-nav ul
{
float: right;
list-style: none;
margin: 0.5em 0 1em 0;
}

div#primary-nav ul li
{
/* display: inline-block;*/
display: block;
font-size: 110%;
font-size: 100%;
padding: 0;
margin: 0 0 0.1em 1.2em; /* needs bottom margin to show pseudo underline */
}

div#primary-nav ul li a:link,
div#primary-nav ul li a:visited,
div#primary-nav ul li a:hover
{
font-weight: bold;
color: #888;
border-bottom: 0;
}

div#primary-nav ul li a:hover
{
color: #8ec63f;
border-bottom: 1px dotted #8ec63f;
}

/* These over-ride the values above and display a 'current' state. */
div#primary-nav ul li.current a:link,
div#primary-nav ul li.current a:visited
{
color: #bbb;
border-bottom: 1px solid #bbb;
}

div#primary-nav ul li.current a:hover
{
color: #8ec63f;
border-bottom: 1px solid #8ec63f;
}


/* =========================================================
 MAIN
========================================================== */



/* --------------------------------------------------------------------------------------------------------------
 PATH (breadcrumbs at top).
-------------------------------------------------------------------------------------------------------------- */

p#path
{
clear: both;
font-size: 75%;
color: #444;
margin: 1em 0 1.5em 0;
}



/* --------------------------------------------------------------------------------------------------------------
 USER (below breadcrumbs when logged-in).
-------------------------------------------------------------------------------------------------------------- */

p#user
{
clear: both;
font-size: 75%;
color: #444;
margin: 1em 0 2em 0;
}




/* --------------------------------------------------------------------------------------------------------------
 HEADINGS
-------------------------------------------------------------------------------------------------------------- */

/* h1 reserved for logo */

h2, h3, h4
{
clear: both;
font-weight: bold;
font-family: helvetica, arial, "Open Sans", verdana, "Lucida Grande", sans-serif;
letter-spacing: -1px;
color: #555;
line-height: 1.2;
}

h2
{
font-size: 2em;
font-size: 1.7em;
margin-top: 0.5em;
margin-bottom: 0.15em;
}


h3
{
font-size: 1.8em;
font-size: 1.5em;
margin-top: 1.5em;
margin-bottom: 0.3em;
}

form h3:first-of-type
{
margin-top: 0;
}

h4
{
font-size: 1.4em;
font-size: 1.2em;
margin: 1.2em 0 0.5em 0;
}

h4.ept
{
padding-top: 0.8em;
}

h5, /* bold, extra margin-top & reduced margin-bottom */
p.header
{
font-size: 1.2em;
font-size: 1em;
font-weight: bold;
color: #555;
margin-top: 1.5em;
padding-bottom: 0;
margin-bottom: 0;
}

.wide-panel h5
{
margin-top: 0;
}

p.header
{
font-size: 100%;
font-weight: normal;

}

/* --------------------------------------------------------------------------------------------------------------
 PARAGRAPHS
-------------------------------------------------------------------------------------------------------------- */

p
{
margin: 0.5em 0 0.8em 0;
}

.clear
{
clear: both;
}


#first,
.hilite
{
font-size: 120%;
font-weight: bold;
color: #555;
}

#first
{
font-size: 110%;
font-weight: bold;
}

.lolite,
.lolite /* --- sometimes used as span --- */
{
font-size: 85%;
}

.lolite-tight,
p.caption
{
font-size: 80%;
margin-top: -0.7em;
}

p.read-time
{
font-size: 80%;
color: #666;
margin-top: -0.5em;
}

p.emt /* extra margin-top */
{
margin-top: 1.5em;
}

p.rmt /* reduced margin-top*/
{
margin-top: -0.5em;
}

p.emb /* extra margin-bottom */
{
margin-bottom: 1.5em;
}

p.no-wrap /* doesn't wrap under left-floated image. */
{
overflow: hidden;
}

.hi-viz
{
clear: both;
background: #ff3;
font-size: 80%;
padding: 0.2em 0 0.3em 0.2em;
padding: 0.5em 0.7em;
border: 1px solid #555;
}

p.post-check
/* used in /admin/check/ pages */
{
padding-bottom: 10px;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
margin: 40px 0;
}

p#next /* at foot of content, link to next page */
{
clear: both;
font-size: 120%;
font-weight: bold;
font-style: italic;
margin-top: 1.5em;
}

p#next a:link,
p#next a:visited,
p#next a:hover
{
font-weight: bold;
color: #444;
border-bottom: 0;
}

p#next a:hover
{
color: #8ec63f;
}

p#next span.plus /* for '»' which is otherwise too small */
{
font-size: 110%;
}

p.filler /* kludge to fill screen on short page */
{
margin-bottom: 5em;
}



/* --------------------------------------------------------------------------------------------------------------
 HORIZONTAL RULES
-------------------------------------------------------------------------------------------------------------- */

hr,
hr.thick
{
clear: both;
color: #ccc;
background-color: #ccc;
width: 100%;
height: 1px;
border: 0;
margin: 1.2em 0;
}

hr.thick
{
height: 3px;
margin: 2.5em 0;
}




/* --------------------------------------------------------------------------------------------------------------
 BLOCKQUOTES
-------------------------------------------------------------------------------------------------------------- */

/* Indented, left-bordered. */
blockquote
{
clear: both;
font-size: 95%;
width: 90%;
padding-left: 1em;
border-left: 3px solid #666;
margin: 1em 0 1em 0.5em;
}


/* Four-bordered. */
blockquote.panel,
blockquote.wide-panel,
blockquote.panel-player
{
background: #f8f8ee;
padding: 1em 1.5em 1.5em 1.5em;
border: 1px solid #888;
margin: 1em auto;
box-sizing: border-box;
}

/* Full-width, no indent. */
blockquote.wide-panel,
blockquote.panel-player
{
width: 100%;
}

blockquote.panel h4,
blockquote.wide-panel h4
{
margin-top: 0.2em;
}


blockquote.paypal /* four-bordered, looks like a PayPal form */
{
background: #f8f8ee;
padding: 1em 1em;
border: 1px solid #888;
margin: 1.5em auto;
}

blockquote.paypal img
/* The PayPal logo */
{
clear: both;
float: left;
display: block;
width: 30%;
max-width: 106px;
height: auto;
margin: 0 10px 0 0;
}

blockquote.paypal p
{
font-size: 90%;
padding: 0;
margin: 0 0 1em 0;
}




/* --------------------------------------------------------------------------------------------------------------
 LISTS
-------------------------------------------------------------------------------------------------------------- */


ul,
ul.emt,
ul.rmt,
ul.plain,
ul.flush,
ul.tight
{
margin: 0.5em 2.5em 1em 1.5em; /* needs left-margin (or padding) to display bullets */
}

ul.emt
{
margin-top: 1.5em;
}

ul.rmt
{
margin-top: -0.5em;
}

ul.plain
{
margin-left: 1em;
}

ul.flush
{
margin-left: 0;
}

ul.plain,
ul.flush
{
list-style-type: none;
}

ul li
{
padding-left: 0.1em; /* space between the bullet and the text */
margin: 0 0 0.5em 0;
}

ul.tight li
{
margin: 0;
}


dl
{
margin: 1em 0;
}

dl dt
{
font-weight: bold;
color: #555;
margin: 1em 0 0 0;
}

dl dd
{
font-size: 90%;
margin-left: 0;
}





/* --------------------------------------------------------------------------------------------------------------
ZONE-NAV and ZONE-SUBNAV (per section nav, example: admin).
-------------------------------------------------------------------------------------------------------------- */

div#zone-nav
{
/* currently unstyled */
}

ul.zone-nav,
ul.zone-subnav
{
list-style: none;
padding: 1em 0 0 0;
margin: 0;
overflow: auto;
}

ul.zone-subnav
{
padding: 0;
}

ul.zone-nav li,
ul.zone-subnav li
{
display: inline-block;
font-size: 100%;
font-weight: bold;
color: #888;
padding: 0;
margin: 0 1em 0.1em 0; /* needs bottom margin to show pseudo underline */
}

ul.zone-subnav li
{
font-size: 90%;
margin-right: 0.75em;
}

ul.zone-nav li a:link,
ul.zone-nav li a:visited,
ul.zone-nav li a:hover,
ul.zone-subnav li a:link,
ul.zone-subnav li a:visited,
ul.zone-subnav li a:hover
{
color: #888;
border-bottom: 0;
}

ul.zone-nav li a:hover,
ul.zone-subnav li a:hover
{
color: #8ec63f;
border-bottom: 1px dotted #8ec63f;
}

/* These over-ride the values above and display a 'current' state. */
ul.zone-nav li.current a:link,
ul.zone-nav li.current a:visited,
ul.zone-subnav li.current a:link,
ul.zone-subnav li.current a:visited
{
color: #666;
border-bottom: 1px solid #666;
}

ul.zone-nav li.current a:hover,
ul.zone-subnav li.current a:hover
{
color: #8ec63f;
border-bottom: 1px dotted #8ec63f;
}


/* --------------------------------------------------------------------------------------------------------------
 PAGE-LIST (used for site map list of all pages).
-------------------------------------------------------------------------------------------------------------- */

ul.page-list
{
list-style: none;
margin: 0;
}

ul.page-list li
{
text-transform: uppercase; /* Upper-case main items. */
font-weight: 700;
padding: 0;
margin: 10px 0;
}

ul.page-list ul.children
{
list-style: none;
font-size: 95%;
margin: 0 0 0px 10px;
}

ul.page-list ul.children li
{
text-transform: none; /* Remove unwanted upper-case. */
font-weight: 600;
margin: 0 0 2px 0;
color: #444;
}

ul.page-list ul.children ul.children
{
font-size: 95%;
margin: 0 0 10px 10px;
}

ul.page-list ul.children ul.children li
{
font-weight: 400;
margin-top: -2px
}

ul.page-list a:link,
ul.page-list a:visited,
ul.page-list a:hover
{
border-bottom: 0;
}

ul.page-list a:hover
{
border-bottom: 1px solid #8ec63f;
}



/* --------------------------------------------------------------------------------------------------------------
 POST-LIST (used at 'archive' page for list of posts).
-------------------------------------------------------------------------------------------------------------- */


dl.post-list dd
{
margin: 0 0 15px 35px;
}

dl.post-list-2 dd
{
margin: 0 0 15px 0;
}

dl.post-list dd,
dl.post-list-2 dd
{
font-size: 90%;
}

dl.post-list a:link,
dl.post-list a:visited,
dl.post-list a:hover,
dl.post-list-2 a:link,
dl.post-list-2 a:visited,
dl.post-list-2 a:hover
{
font-weight: bold;
}


/* --------------------------------------------------------------------------------------------------------------
 SCHEDULE-LIST (example: /programs/schedule/honk-1/).
-------------------------------------------------------------------------------------------------------------- */
dl.schedule
{
}

dl.schedule dt
{
}

dl.schedule dd
{
margin-left: 0.5em;
}


dl.schedule a:link,
dl.schedule a:visited,
dl.schedule a:hover
{
color: #555;
border-bottom: 0;
}


dl.schedule a:hover
{
border-bottom: 2px dotted #8ec63f;
}

dl.schedule dt a:link,
dl.schedule dt a:visited,
dl.schedule dt a:hover
{
font-weight: bold;
}



/* =========================================================
 IMAGES
========================================================== */


img.main, /* The main full-width 'letterbox' image on each page. */
img.main-2, /* Used on front page. */
img.wide /* Additional full-width images on pages. */
{
display: block;
background: #fff;
width: 100%;
height: auto;
padding: 4px;
border: 1px solid #999;
box-sizing: border-box;
-webkit-box-sizing: border-box; /* Safari */
-moz-box-sizing: border-box; /* Firefox */
margin: 0.5em 0 0.7em 0;
}

img.main
{
max-height: 250px;
}

img.main-2
/* No padding, thicker border - used on front page. */
{
padding: 0;
border: 6px solid #333;
}

img.wide
{
}

body.item-single img.main
/* Over-ride to show full-width above main content (magazine items). */
{
padding: 0;
border: 0;
border-bottom: 4px solid #444;
margin: 0;
}


img.t-100,
img.t-150,
img.t-350
{
clear: both;
float: left;
display: block;
width: 25%;
min-width: 60px;
max-width: 100px;
height: auto;
padding: 4px;
border: 1px solid #888;
box-sizing: border-box;
-webkit-box-sizing: border-box; /* Safari */
-moz-box-sizing: border-box; /* Firefox */
margin: 0 0.6em 0.3em 0;
}

img.t-350
{
width: 50%;
max-width: 350px;
}

img.t-150
{
max-width: 150px;
}


.thumb img /* Used (in chss/cpt.php) with WP code, where no access to img tag. */
{
float: left;
width: 30%;
min-width: 60px;
max-width: 150px;
height: auto;
padding: 4px;
border: 1px solid #888;
box-sizing: border-box;
-webkit-box-sizing: border-box; /* Safari */
-moz-box-sizing: border-box; /* Firefox */
margin: 0 0.7em 0 0;
}




/* --------------------------------------------------------------------------------------------------------------
 IFRAMES
-------------------------------------------------------------------------------------------------------------- */

iframe
{
box-sizing: border-box;
}


.iframe-video /* for video embeds */
{
position: relative;
height: 0;
padding-bottom: 56.25%;
padding-top: 1em;
border: 2px solid #666;
box-sizing: border-box;
-webkit-box-sizing: border-box; /* Safari */
-moz-box-sizing: border-box; /* Firefox */
margin: 1.2em 0;
overflow: hidden;
}

.iframe-video iframe
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.iframe-audio,
.iframe-contact,
.iframe-player,
.iframe-support
/* Kludged to look ok. */
{
/*Height set by js. */
font-size: 120%;
width: 100%;
}

.iframe-contact
{
/*min-height: 38em;*/
min-height: 46em; /* temp fix for js removal */
margin-top: 0.5em;
}

.iframe-contact h3:first-of-type
{
margin-top: 0;
}

.iframe-contact blockquote
{
font-size: 80%;
}

.iframe-support
{
border: 1px solid #999;
background: white;
}

.iframe-player
{
min-height: 25em;
}

/* --------------------------------------------------------------------------------------------------------------
 PAGINATE (block of numbered links to other posts... on posts index & summaries, search pages).
-------------------------------------------------------------------------------------------------------------- */

p.paginate
{
clear: both;
position: relative;
overflow: hidden; /* pushes subsequent content onto new line */
font-size: 80%;
width: 100%;
margin: 0.5em 0;
}

/* Add boxes */
p.paginate span, /* the word 'page' and unlinked numbers */
p.paginate a /* linked numbers */
{
display: block;
float: left;
background: transparent;
color: #000;
width: auto;
padding: 3px 7px;
border: 1px solid #888;
border-radius: 3px;
margin: 0px 3px 0px 0;
}

/* Change the word 'page' box color */
p.paginate span
{
background: #f8f8ee;
}

/* Change unlinked-number-box color */
p.paginate span.current
{
}

/* Change linked-box color */
p.paginate a.inactive
{
color: #888; /* paler */
}

/* Change linked-box hover state color */
p.paginate a:hover
{
background: #f8f8ee; /* same as the  'current' state */
color: #8ec63f;  /* green */
border-color: #8ec63f;   /* green */
}




/* --------------------------------------------------------------------------------------------------------------
 PAGINATE PAGE (for pagination of a page or post).
-------------------------------------------------------------------------------------------------------------- */

div#paginate-page-upper, /* 'Page: x x x x' under post title */,
p#continued /* 'Continued... page x of x' under post title */
div#paginate-page-lower /* 'Page: x x x x' under post text, before ShareThis */
{
clear: both;
color: #444;
font-size: 90%;
padding: 0;
margin: 0;
}

div#paginate-page-upper
{
margin-top: 0.5em;
padding-bottom: 5px;
border-bottom: 1px solid #ccc;
margin-bottom: 20px;
}

p#continued /* 'Continued... page x of x' under post title */
{
color: #555;
font-style: italic;
font-size: 90%;
margin: -0.5em 0 0 0;
}

div#paginate-page-lower
{
padding: 5px 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-top: 1em;
}

p#paginate-page-center /* The words 'Previous/Next Page' links */
{
clear: both;
font-family: helvetica, arial, verdana, "Lucida Grande", sans-serif;
font-size: 90%;
margin: 0.5em auto;
}

p#paginate-page-center a:link,
p#paginate-page-center a:visited,
p#paginate-page-center a:hover
{
font-weight: bold;
color: #555;
border-bottom: 0;
}

p#paginate-page-center a:hover
{
color: #8ec63f;
border-bottom: 1px dotted #8ec63f;
}

p.page-numbers /* The full-width block of '1 2 3...' */
{
font-size: 80%;
}

p.page-numbers a /* remove link 'pseudo underline */
{
border-bottom: 0;
}

/* Add boxes */
p.page-numbers span.page, /* The word 'page' */
p.page-numbers span /* The numbers - but creates unwanted extra padding and border on the linked numbers */
{
display: inline-block;
width: auto;
color: #000;
padding: 3px 7px;
border: 1px solid #888;
border-radius: 3px;
margin: 0;
}

/* Remove the double padding/border (created by <span> in the WP code) from the linked numbers */
p.page-numbers span.post-page-numbers
{
padding: 0;
border: 0;
}

/* Change unlinked-box color */
p.page-numbers span.page, /* The word 'page' */
p.page-numbers span.post-page-numbers span /* The unlinked numbers*/
{
background: #f8f8ee; /* to show a 'current' state */
}

/* Change linked-box color */
p.page-numbers a.post-page-numbers span
{
color: #888; /* paler */
}

/* Change linked-box hover state color */
p.page-numbers a.post-page-numbers:hover span
{
background: #f8f8ee; /* same as the  'current' state */
color: #8ec63f;  /* green */
border-color: #8ec63f;   /* green */
}

/* --------------------------------------------------------------------------------------------------------------
 READ MORE (link to full post on posts index page, excerpts, search).
-------------------------------------------------------------------------------------------------------------- */

p.read-more
{
clear: both;
font-family: helvetica, arial, verdana, "Lucida Grande", sans-serif;
font-weight: bold;
font-size: 90%;
margin: 1em 0 1.5em 0;
}

p.read-more a:link,
p.read-more a:visited,
p.read-more a:hover
{
font-weight: bold;
border-bottom: 0;
}

p.read-more a:hover
{
border-bottom: 1px dotted #8ec63f;
}



/* --------------------------------------------------------------------------------------------------------------
 EXCERPT (for 'single' page).
-------------------------------------------------------------------------------------------------------------- */

p.excerpt
{
font-weight: bold;
color: #555;
padding: 0 0 0.5em 0;
border-bottom: 1px solid #ccc;
margin-bottom: 1em;
}



/* --------------------------------------------------------------------------------------------------------------
 SEARCH-EXCERPT (for 'search results' page).
-------------------------------------------------------------------------------------------------------------- */

p.search-excerpt /* one for each post */
{
clear: both;
float: left;
font-size: 90%;
width: 100%;
}

p.search-excerpt strong
{
font-family: helvetica, arial, verdana, "Lucida Grande", sans-serif;
}

p.search-excerpt a:link,
p.search-excerpt a:visited,
p.search-excerpt a:hover
{
padding-bottom: 0;
}



/* --------------------------------------------------------------------------------------------------------------
 POST-INFO ('posted on/by').
-------------------------------------------------------------------------------------------------------------- */

p.post-info,
p.post-info-single
{
clear: both;
font-size: 75%;
padding: 0 0 1em 0;
border-bottom: 1px solid #ccc;
margin: 0.5em 0 1.5em 0;
}

p.post-info-single
{
padding: 0;
border-bottom: 0;
margin-bottom: 0;
}

p.post-info::first-letter
{
text-transform: uppercase;
}


/* --------------------------------------------------------------------------------------------------------------
 SHARE-THIS (the ShareThis icon, toward the foot of each post & page).
-------------------------------------------------------------------------------------------------------------- */

div.share-page,
div.share-post
{
clear: both;
padding: 0;
margin: 0;
margin: 5em 0 0 0;
}

div.share-post
{
margin: 1.5em 0 0.5em 0;
}




/* --------------------------------------------------------------------------------------------------------------
    SOURCES ('author credit' for what-and-who page.)
-------------------------------------------------------------------------------------------------------------- */


#sources
{
clear: both;
padding-top: 1.2em;
border-top: 1px solid #ccc;
margin-top: 1.5em;
}


#sources img
{
clear: both;
float: left;
width: 30%;
min-width: 80px;
max-width: 100px;
height: auto;
padding: 2px;
border: 1px solid #888;
box-sizing: border-box;
-webkit-box-sizing: border-box; /* Safari */
-moz-box-sizing: border-box; /* Firefox */
margin:  0 0.7em 1em 0;
}

#sources dl
{
font-size: 95%;
overflow: hidden;
padding: 0 0 0.75em 0;
margin: 0;
}

#sources dt
{
font-weight: normal;
margin-top: 0;
}

#sources dt a:link,
#sources dt a:visited,
#sources dt a:hover
{
font-weight: bold;
}

#sources dd
{
line-height: 175%;
font-size: 95%;
}

#sources dd::before
{
content: "\2022\0a";
content: "* ";
}


p.source /* Source credit on items */
{
font-size: 85%;
padding-top: 1em;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 2em 0 2em 0;
overflow: hidden;
}

#sources2 p.source
/* used in /admin/elements/ */
{
margin: 0 0 4em 0;
}

#sources3 p.source
/* used in /admin/elements/ */
{
margin: 0 0 3em 0;
}

p.source img
{
clear: both;
float: left;
display: block;
width: 30%;
min-width: 80px;
max-width: 80px;
height: auto;
padding: 2px;
border: 1px solid #888;
box-sizing: border-box;
-webkit-box-sizing: border-box; /* Safari */
-moz-box-sizing: border-box; /* Firefox */
margin: 0 1em 1em 0;
}




/* ==========================================================
 FORMS
========================================================== */

/*
Don't use 'form', because it affects 'https://honkradio.com/buy/cart/'.
*/

form.wpcf7-form,
form#search
{
clear: both;
background: #f8f8ee;
font-size: 90%;
width: 100%;
box-sizing: border-box;
padding: 1em 1.5em 1.5em 1.5em;
border: 1px solid #aaa;
overflow: hidden;
}

form.wp-cart-button-form
{
background: transparent;
padding: 0;
border: 0;
}


label
{
display: block;
margin-bottom: 0.2em;
}

form h4
{
margin-top: 0.2em
}

/* --------------------------------------------------------------------------------------------------------------
FIELDS
-------------------------------------------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="password"],
textarea
{
display: block;
color: #333;
font-size: 1.1em;
width: 100%;
box-sizing: border-box;
padding: 0.5em;
border: 1px solid #bbb;
border-radius: 4px;
margin-bottom: 1em;
}

input[type="checkbox"]
{
}

input[type="number"]
{
font-size: 80%;
border: 1px solid #bbb;
border-radius: 4px;
padding: 3px;
margin-left: 0.5em;
width: 2.5em;
}

textarea
{
resize: none;
}


/* --------------------------------------------------------------------------------------------------------------
BUTTON
-------------------------------------------------------------------------------------------------------------- */

button[type="submit"],
input[type="submit"]
{
display: block;
font-size: 1em;
font-family: helvetica, arial, verdana, "Lucida Grande", sans-serif;
line-height: 1;
font-weight: bold;
text-transform: uppercase;
background: #8ec63f;
color: #fff;
cursor: pointer;
outline: none;
padding: 0.7em 0.5em 0.5em 0.5em;
border: 2px solid #8ec63f;
border-radius: 4px;
-webkit-border-radius: 4px;
-webkit-appearance: none;
margin: 1em 0;
}

button[type="submit"]:hover,
input[type="submit"]:hover
{
color: #8ec63f;
background: #fff;
}


/* --------------------------------------------------------------------------------------------------------------
OTHER FORM ELEMENTS
-------------------------------------------------------------------------------------------------------------- */

form.wpcf7-form p.message
/* used for 'Your info is private...' */
{
font-size: 95%;
padding: 0.5em 0 0 0;
border-top: 1px solid #aaa;
margin: 0 0 1em 0;
}


form.wpcf7-form .wpcf7-not-valid-tip,
form.wpcf7-form .wpcf7-response-output
/*
Field error messages are 'wpcf7-not-valid-tip'.
Main error/success message, at foot of form,
is 'wpcf7-response-output', appended with '-mail-sent-ok' for success.
*/
{
background: yellow;
color: #333;
font-size: 100%;
width: 90%;
padding: 0.2em 0.5em;
border: 1px solid #999;
border-radius: 4px;
-webkit-border-radius: 4px;
margin: 0 auto;
margin-top: -1.5em;
}

form.wpcf7-form .wpcf7-not-valid-tip
{
width: 60%;
min-width: 200px;
}

form.wpcf7-form .wpcf7-response-output
{
margin: 1.5em auto;
}

form.wpcf7-form .wpcf7-mail-sent-ok
/* Main success message */
{
background: #e2fee2;
}



/* --------------------------------------------------------------------------------------------------------------
 MORE POSTS (previous/next/random posts at foot of post).
-------------------------------------------------------------------------------------------------------------- */


#more-posts
{
background: #f8f8ee;
padding: 1em 1.2em;
border: 1px solid #ccc;
margin: 1.5em 0 1em 0;
}

#more-posts h4
{
margin-top: 0.2em;
}

#more-posts strong
{
font-family: helvetica, arial, verdana, "Lucida Grande", sans-serif;
}


ul#random-posts
{
margin-top: -1em;
}

ul#random-posts li
{
padding: 2px;
margin: 0;
}




/* --------------------------------------------------------------------------------------------------------------
TOGGLE BLOCK (toggle-able block of info).
-------------------------------------------------------------------------------------------------------------- */

p.toggle
{
padding-bottom: 0;
margin-bottom: 0;
}

p.toggle-show,
p.toggle-hide
{
font-size: 70%;
margin: 0 0 2em 0;
}

.toggle-block
{
display: none;
margin: 0.5em 0;
}





/* --------------------------------------------------------------------------------------------------------------
 TABS
-------------------------------------------------------------------------------------------------------------- */

/* Style the tab. */
.tabs
{
overflow: hidden;
}

/* Style the buttons inside the tab. */
.tabs button
{
display: inline-block;
background: transparent;
font-size: 80%;
font-weight: 600;
color: #555;
transition: 0.3s;
outline: none;
padding: 0.3em 0.5em;
border: 2px solid #f8f8ee;
border-radius: 4px;
margin-bottom: 5px;
}

.tabs button:hover
{
background: #f8f8ee;
background: #f8f8f8;
border: 2px solid #bbb;
}

.tabs button.active
{
color: #333;
background: #f8f8f8;
background: #f8f8ee;
border: 2px solid #999;
}

.tab-content
{
display: none;
padding: 6px 0;
border-radius: 4px;
}

.tab-content h3
{
margin-top: 0.5em;
margin-bottom: 0.3em;
}


/* --------------------------------------------------------------------------------------------------------------
 ACCORDION
-------------------------------------------------------------------------------------------------------------- */

button.accordion
{
background: transparent;
color: #555;
cursor: pointer;
text-align: left;
font-family: helvetica, arial, "Open Sans", verdana, "Lucida Grande", sans-serif;
font-size: 120%;
font-weight: bold;
letter-spacing: -1px;
width: auto;
outline: none;
transition: 0.4s;
padding: 0;
border: none;
margin-top: 0.5em;
}

button.accordion.active,
button.accordion:hover
{
}

button.accordion:after
{
content: '\002B';
content: '[show]';
color: #777;
font-family: "Open Sans", verdana, "Lucida Grande", sans-serif;
font-weight: normal;
font-size: 80%;
padding-left: 0.5em;
}

button.accordion.active:after
{
content: "\2212";
content: '[hide]';
}

.accordion-panel
{
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
margin-bottom: 1em;
}





/* --------------------------------------------------------------------------------------------------------------
 ROWS (rows of info blocks, used on hosts/programs, etc).
-------------------------------------------------------------------------------------------------------------- */

/*
For Schedule:
<ul class="day-part">
<p class="timezone">
<div id="rows">
*/

ul.day-part
/* The 'Early=>Late' nav menu. */
{
clear: both;
width: 100%;
list-style: none;
font-size: 90%;
padding: 0;
margin: 0;
overflow: auto;
}

ul.day-part li
{
display: inline-block;
font-size: 110%;
padding: 0;
margin: 0 1.2em 0.1em 0; /* needs bottom margin to show pseudo underline */
}

ul.day-part li a:link,
ul.day-part li a:visited,
ul.day-part li a:hover
{
font-weight: bold;
color: #888;
border-bottom: 0;
}

ul.day-part li a:hover
{
color: #8ec63f;
border-bottom: 2px dotted #8ec63f;
}

p.timezone
{
clear: both;
font-size: 90%;
/*overflow: hidden;*/
padding-bottom: 0;
margin-bottom: 0;
}



/* 'row' is an individual block,
and 'rows' is a container for a series of them. */

.rows
{
clear: both;
float: left;
width: 100%;
margin: 0.5em 0 1em 0;
}


.row
{
clear: both;
padding: 1.4em 0 0.7em 0;
margin: 0 0 0.5em 0;
overflow: auto;
}

.rows .row
/* Adds divider between multiple instances of 'row'. */
{
border-top: 1px solid #ccc;
}

.rows .row:last-of-type
/* Adds closing divider after multiple instances of 'row'. */
{
border-bottom: 1px solid #ccc;
}

.rows p[id^='mon-'],
.rows p[id^='tue-'],
.rows p[id^='wed-'],
.rows p[id^='thu-'],
.rows p[id^='fri-'],
.rows p[id^='sat-'],
.rows p[id^='sun-'],
.rows p.timezone-top,
.rows p.timezone-lower
/* For 'early, late, etc' day segments. */
{
clear: both;
width: 100%;
padding: 0.5em 0 0.3em 0;
border-style: solid;
border-color: #ccc;
border-width: 1px 0 0 0;
margin: 0;
overflow: auto;
}

.rows p.timezone-top
{
border: 0;
margin: 1em 0;
}


.rows p.timezone-lower
{
border-width: 1px 0;
margin-top: -5px;
}

.rows p.timezone-lower span.lolite
{
font-size: 85%;
}

.rows p span.right
{
float: right;
font-size: 130%;
margin-top: -5px;
}



.row h3
{
float: left;
font-size: 140%;
width: 15%;
max-width: 80px;
padding: 1em 0 0 0;
margin: 0 0.5em 0 0;
}

.row img,
.row p img
{
float: left;
width: 25%;
min-width: 60px;
max-width: 100px;
height: auto;
padding: 4px;
border: 1px solid #888;
box-sizing: border-box;
-webkit-box-sizing: border-box; /* Safari */
-moz-box-sizing: border-box; /* Firefox */
margin: 0 0.7em 0 0;
}

.row p
{
padding: 0;
margin: 0 0 0.5em 0;
overflow: hidden;
font-size: 95%;
}



.no-wrap
{
overflow: hidden;
}





/* =========================================================
 LOWER TEASER (used at base of main before footer).
========================================================== */

#lower-teaser p
{
font-size: 110%;
margin: 0;
padding: 0;
}

#lower-teaser a:link,
#lower-teaser a:visited,
#lower-teaser a:hover
{
font-weight: normal;
color: #eee;
border-bottom: 0;
}

#lower-teaser a:hover
{
color: #8ec63f;
}



/* =========================================================
 FOOTER
========================================================== */

/* ----------------------------------------------------------------------------------------------------
This is a kludge to get the center text to appear to be
horizontally-centered at various resolutions.

Although the columns can be mathematically correct,
the text in the some columns can appears to be too near to
or far from the adjacent column, because the text in the columns
doesn't fill their full width.

With full-width text in all cols this isn't an issue, but the wider the
column and the shorter the text in it then the greater the problem.
---------------------------------------------------------------------------------------------------- */


#footer-column-1,
#footer-column-2
{
font-size: 95%;
margin-top: 1em;
}

#footer-column-1
{
float: left;
width: 50%;
margin-right: 5%;
}

#footer-column-2
{
float: right;
text-align: right;
width: 43%;
}

#footer-column-1 ul,
#footer-column-2 ul
{
list-style-type: none;
padding: 0;
margin: 0;
}

#footer-column-1 ul li,
#footer-column-2 ul li
{
font-size: 95%;
padding: 0.2em 0;
margin-bottom: 0;
}



ul#footer-icons /* full-width, contains icons */
{
clear: both;
float: left;
list-style-type: none;
width: 100%;
padding: 0;
margin: 1em 0 0 0;
}

ul#footer-icons li
{
float: left;
font-size: 150%;
font-weight: bold;
vertical-align: middle;
padding: 0;
margin: 0 0.5em 0 0;
}

ul#footer-icons li#right
{
float: right;
font-size: 150%;
margin-right: 0;
}

#footer a:link,
#footer a:visited,
#footer a:hover
{
font-weight: normal;
color: #eee;
padding-bottom: 0;
border-bottom: 0;
}

#footer a:hover
{
color: #8ec63f;
}

p#footer-tagline /* for tagline */
{
clear: both;
font-size: 70%;
color: #bbb;
text-align: center;
letter-spacing: 1px;
padding: 1.5em 0;
margin: 0;
}



/* =========================================================
 BASE (at foot of viewport, contains media player and clock, etcetera).
========================================================== */

/* ------------------------------------------------------------------------------------------------------
 PLAYER (audio player).
-------------------------------------------------------------------------------------------------------- */

#player
{
float: left;
font-size: 90%;
color: #ccc;
width: 75%;
}


.amplitude-play-pause
{
float: left;
cursor: pointer;
font-size: 130%;
height: 2em;
width: 1em;
margin-right: 0.2em;
}


.amplitude-playing,
.amplitude-paused
{
float: left;
}

.amplitude-playing:before,
.amplitude-paused:before
{
float: left;
position: absolute;
font-family: 'FontAwesome';
}

.amplitude-playing:before
{
content: "\f04d";
}

.amplitude-paused:before
{
content: "\f04b";
}

#playing
{
float: left;
font-size: 80%;
color: #aaa;
margin-top: 6px; /* visual kludge to v-align with play/stop button */
}

#playing a:link,
#playing a:visited
{
color: #aaa;
}

#playing a:hover
{
color: #8ec63f;
border-bottom: 1px solid #8ec63f;
}


/* ------------------------------------------------------------------------------------------------------
 CLOCK (bottom-right of viewport).
-------------------------------------------------------------------------------------------------------- */

#clock
{
float: right;
text-align: right;
color: #ccc;
font-weight: normal;
font-size: 70%;
letter-spacing: 1px;
width: 20%;
padding-top: 0.3em; /* visual kludge to v-align with nowPlaying */
}

#clock a:link,
#clock a:visited
{
color: #aaa;
}

#clock a:hover
{
color: #8ec63f;
}




/* --------------------------------------------------------------------------------------------------------------
 Now let's modify some unwanted css of plugins.
-------------------------------------------------------------------------------------------------------------- */

/* =========================================================
 PLUGIN CSS (mods to plugin default css).
========================================================== */


/* --------------------------------------------------------------------------------------------------------------
 BB PRESS
-------------------------------------------------------------------------------------------------------------- */

span#subscription-toggle
{
clear: both !important;
margin: 2em 0;
}



/* --------------------------------------------------------------------------------------------------------------
 COOKIE NOTICE
-------------------------------------------------------------------------------------------------------------- */

#cookie-notice
{
padding: 0.3em 0;
}

#cn-notice-text,
#cn-accept-cookie
{
font-size: 120%;
}



#cn-accept-cookie
{
margin: 0 1em;
}

a#cn-accept-cookie:link,
a#cn-accept-cookie:visited,
a#cn-accept-cookie:hover
{
color: #aaa;
}

a#cn-accept-cookie:hover
{
color: #8ec63f;
}

a#cn-more-info:link,
a#cn-more-info:visited,
a#cn-more-info:hover
{
color: #aaa;
}

a#cn-more-info:hover
{
color: #8ec63f;
}


/* --------------------------------------------------------------------------------------------------------------
 FACEBOOK STREAM
-------------------------------------------------------------------------------------------------------------- */

.facebook-stream-white-panel:hover
{
margin: 0;
}

.fb-page
/* For embed of Facebook page. */
{
margin-bottom: 30px;
}



/* --------------------------------------------------------------------------------------------------------------
 INSTAGRAM FEED
-------------------------------------------------------------------------------------------------------------- */

a.sbi_photo:link,
a.sbi_photo:visited,
a.sbi_photo:hover
{
padding-bottom: 0;
border-bottom: 0;
border: 1px solid #666;
}

a.sbi_photo_wrap:hover
{
border: 2px solid #8ec63f!important;
}

a.sbi_header_link:link,
a.sbi_header_link:visited,
a.sbi_header_link:hover
{
border-bottom: 0;
}


/* --------------------------------------------------------------------------------------------------------------
 WP SIMPLE PAYPAL CART
-------------------------------------------------------------------------------------------------------------- */

p.in-cart
{
clear: both;
float: left;
background: #f8f8ee;
font-size: 80%;
font-weight: bold;
padding: 0.5em 1em 0.5em 0.5em;
border: 1px solid #888;
border-radius: 4px;
margin-bottom: 2em;
}

blockquote.panel p.in-cart
{
background: #fff;
}


p.in-cart a
{
font-weight: bold;
border-bottom: 0;
}

p.in-cart a:hover
{
border-bottom: 1px solid #8ec63f;
}

.buy-ul
{
clear: both;
margin: 1em 0;
}

.buy-ul li
{
margin: 1em 0;
list-style: none;
}

.wp_cart_button_wrapper
{
margin-top: 5px;
}


/* --------------------------------------------------------------------------------------------------------------
 WOOCOMMERCE.
-------------------------------------------------------------------------------------------------------------- */

a.woo-button:link,
a.woo-button:visited,
a.woo-button:hover
{
font-size: 1em;
font-family: helvetica, arial, verdana, "Lucida Grande", sans-serif;
line-height: 1;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bold;
background: #8ec63f;
color: #fff;
cursor: pointer;
outline: none;
padding: 0.7em 0.5em 0.5em 0.5em;
border: 2px solid #8ec63f;
border-radius: 4px;
-webkit-border-radius: 4px;
-webkit-appearance: none;
margin: 1em 0;
}

a.woo-button:hover
{
color: #8ec63f;
background: #fff;
}


abbr.required
/* Remove * from field. */
{
display: none;
}


.woocommerce-info
{
font-size: 100%;
width: 90%;
padding: 0.2em 0.5em;
border: 1px solid #999;border-radius: 4px;
-webkit-border-radius: 4px;
margin: 0 auto;
background: #e2fee2;
}


/* --------------------------------------------------------------------------------------------------------------
 CONTACT FORM 7.
-------------------------------------------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------------------------------------------
 CENTOVA.
-------------------------------------------------------------------------------------------------------------- */


/* Container for recent tracks. */
.cc_recenttracks_list
{
border-top: 1px solid #ccc;
}

/* Container for a single track. */
.cc_recenttracks_list > .cctrack
{
padding-bottom: 0.5em;
border-bottom: 1px solid #ccc;
margin: 1em 0;
}

/* Current track title. */
.cc_recenttracks_list > .cctrack > .ccdetails > .cctitle.ccnowplaying
{
font-weight: 600;
}



/* Time when track aired. */
.cc_recenttracks_list > .cctrack > .cctime
{
display: block;
font-size: 80%;
text-transform: lowercase;
word-spacing: -0.2em;
color: #888;
}


.cc_recenttracks_list > .cctrack > .cctime::before
{
content: "[";
}

.cc_recenttracks_list > .cctrack > .cctime::after
{
content: "]";
}


/* Time when current track began. */
.cc_recenttracks_list > .cctrack > .cctime.ccnowplaying
{
font-weight: normal;
}

/* Container track details. */
.cc_recenttracks_list > .cctrack > .ccdetails
{
}

/* Track title. */
.cc_recenttracks_list > .cctrack > .ccdetails > .cctitle,
.cc_recenttracks_list > .cctrack > .ccdetails > .cctitle.ccnowplaying
{
font-weight: 600;
color: #444;
}


.cc_recenttracks_list > .cctrack > .ccdetails > .cctitle::after
{
content: ".";
}

/* Track artist. */
.cc_recenttracks_list > .cctrack > .ccdetails > .ccartist
{
font-size: 90%;
color: #444;
}


/* Track album. */
.cc_recenttracks_list > .cctrack > .ccdetails > .ccalbum
{
font-size: 75%;
}

.cc_recenttracks_list > .cctrack > .ccdetails > .ccalbum::before
{
content: "[";
}

.cc_recenttracks_list > .cctrack > .ccdetails > .ccalbum::after
{
content: "]";
}


/* 'Buy this album' link. */
.cc_recenttracks_list > .cctrack > .ccdetails > .ccbuy,
a.ccbuy
{
display: none !important;
}

/* =========================================================
 MEDIA QUERIES (for smaller-than-desktop screens).
 At the width declared and smaller, the new values will apply.
========================================================== */

/*
Considerations are:
1 Stop main nav wrapping -  switch to vertical.
2 Stop sub-nav wrapping - switch to vertical.
3 Text should become progressively smaller.

*/

/* --------------------------------------------------------------------------------------------------------------
 768px and smaller.
-------------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 52em)
{

body
{
font-size: 110%;
}

div#primary-nav ul
{
margin-top: 0;
}

div#primary-nav ul li
/* switch from horizontal to vertical  */
{
display: block;
margin-bottom: 5px;
}

 /* add extra vertical space on current item, to visually balance effect of bottom border */
div#primary-nav ul li.current_page_item,
div#primary-nav ul li.current_page_item,
div#primary-nav ul li.current-menu-item,
div#primary-nav ul li.current-menu-item,
div#primary-nav ul li.current-menu-item parent_url,
div#primary-nav ul li.parent_url, /* kludge - see '// Highlight menu current on subpage' in functions.php */
div#primary-nav ul li.current-post-ancestor,
div#primary-nav ul li.current_page_parent,
div#primary-nav ul li.active
{
margin-bottom: 10px;
margin-bottom: 0;
}

ul.zone-nav li,
ul.zone-subnav li
/* switch from horizontal to vertical */
{
display: block;
margin: 0 0 0.1em 0;
/* needs bottom margin to show pseudo underline */
}

ul.zone-subnav
{
margin-top: 10px;
}

ul.zone-subnav li
{
font-weight: normal;
}

}


/* --------------------------------------------------------------------------------------------------------------
 600px and smaller.
-------------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 38em)
{

#footer
{
padding-bottom: 6em; /* bottom must be at least equal to #base, or content will be hidden */
}

p#footer-base
 /* Strap-line. */
{
margin-bottom: 3em;
}

#player
/* Expand to full-width. */
{
width: 100%;
}

#clock
/* Move below 'playing'. */
{
clear: both;
float: none;
width: 100%;
text-align: left;
padding-top: 0.5em;
border-top: 1px solid #666;
margin: 1em 0;
}

#clock:before
{
content: "Channel time: ";
letter-spacing: 0;
color: #aaa;
}

}


/* --------------------------------------------------------------------------------------------------------------
 480px and smaller.
-------------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 30em)
{

body
{
font-size: 95%;
}

#logo img
{
min-width: 120px;
max-width: 150px;
}

div#primary-nav ul
{
margin-top: 0;
}

div#primary-nav ul li
{
font-size: 110%;
}

ul.day-part li
/* switch from horizontal to vertical */
{
display: block;
margin: 0 0 0.1em 0;
/* needs bottom margin to show pseudo underline */
}

ul.tabs li
/* switch from horizontal to vertical */
{
float: none;
margin: 0 0 0.1em 0;
/* needs bottom margin to show pseudo underline */
}


}



/* --------------------------------------------------------------------------------------------------------------
 320px and smaller.
-------------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 20em)
{

body
{
font-size: 85%;
}

#logo img
{
min-width: 100px;
max-width: 110px;
}

img#main-2
{
border: 2px solid #333;
}


}


/* -------------------------------------------------------------------------------------------
 Phew! All done. That was fun.

If there's anything below, it's temporary - used whilst testing
and likely hasn't yet been moved to an appropriate place.

------------------------------------------------------------------------------------------- */

.link-test a
{
font-weight: bold;
padding-bottom: 1px;
border-bottom: 1px dotted #999;
}

/* --------------------------------------------------------------------------------------------------------------
 Hide Google recaptcha.
-------------------------------------------------------------------------------------------------------------- */
.grecaptcha-badge { visibility: hidden; }