@import url('normalize.css');

@font-face
{
  font-family: Merriweather;
  src: url(fonts/Merriweather-Regular.ttf), 
    url(fonts/Merriweather-Black.ttf), url(fonts/Merriweather-HeavyItalic.ttf), 
    url(fonts/Merriweather-Light.ttf), url(fonts/Merriweather-BoldItalic.ttf), 
    url(fonts/Merriweather-Italic.ttf), url(fonts/Merriweather-Bold.ttf), 
    url(fonts/Merriweather-LightItalic.ttf);
}

html
{
  background: black;
  color: white;
}

body
{
  background: #fff8f8;
  color: #c0c; /* this text colour should never show normally */
  margin: 10px;
  padding: 10px;
}

@media screen and (max-width: 500px)
{
  body { margin: 2px; padding: 2px }
}

h1, h2, h3, h4, h5, h6
{
  margin: 10px 0 10px;
  text-align: left;
  font-family: sans-serif;
}

h1 { font-size: 200% }
h2 { font-size: 140% }
h3 { font-size: 130% }
h4 { font-size: 120%; }
h5 { font-size: 110%; }
h6 { font-size: 100%; }


a, a:visited
{
  color: #c00;
  background: #ffe8e8;
  text-decoration: none;
}

a:hover { text-decoration: underline }

hr.spacer 
{ 
  margin: 30px 0; 
  border: 1px solid #fcc;
  clear: both;
}

/* generic selectors for block elements */
.left { float: left}
.centre { margin-left: auto; margin-right: auto }
.right { float: right }
.clear { clear: both }
.centretext { text-align: center }

/*
 * Overall page layout
 *   +------------wholepage-----------------------+
 *   | +--------------navheader-----------------+ |
 *   | |      +----------navmenu--------+       | |
 *   | |      |                         |       | |
 *   | |      +-------------------------+       | |
 *   | +----------------------------------------+ |
 *   | +---------------content-------+--sidebar-+ |
 *   | |                             |          | |
 *   | |                             |          | |
 *   | +-----------------------------+----------+ |
 *   +--------------------------------------------+
 */

/* 
 * Set size limits and background for the whole page, both navigation
 * and content. Centred as a block if page is wide enough
 */
div.wholepage
{
  background: #fff8f8;
  color: #903;
  width: 100%;
  max-width: 1200px;
  margin: auto;
  font-family: Merriweather, 'Palatino Linotype', 'Book Antiqua', serif;
}

@media screen and (max-width: 500px)
{
  div.wholepage 
  { 
    font-size: 90%;
  }
}

/* contains nav information, full width, colour background or images */
div.navheader
{
  background: none;
  padding: 5px;
}



/* contains nav buttons or icon, set positioning */
div.navmenu
{
  margin: auto;
}

/* under nav header, all page content */
div.content
{
  display: inline-block;
  width: 60%;
  width: calc(90% - 250px);
  vertical-align: top;
  padding: 5px;
  background: none;
  color: #903;
  line-height: 1.5em;
}

div.sidebar
{
  display: inline-block;
  width: 300px;
  width: calc(10% + 150px);
  padding-left: 10px;
  margin-left: 50px;
}

@media screen and (max-width: 800px)
{
  div.content { display: block; width: 95% }
  div.sidebar 
  { 
    display: block; 
    width: 500px; 
    max-width: 95%;
    background: #ffeee8;
    margin-left: 0;
  }

}

img.banner
{
  width: 100%;
  margin: 20px 0 10px;
}

@media screen and (max-width: 500px)
{
  img.banner { margin-top: 5px }
  div.content { line-height: 1.3em }
  div.content h1, div.content h2, div.content h3
  {
    line-height: 1.1em;
  }
}

/* buttons for wide screen menu */
a.navlink, a.navlink:visited
{
  display: inline-block;
  vertical-align: top;
  font-family: sans-serif;
  font-size: 100%;
  text-decoration: none;
  margin: 5px 20px 5px 0;
  width: max-content;
  padding: 2px 0;
  text-align: center;
  color: #903;
  background: none;
}

a.navlink:hover
{
  background: #ecc;
}

a.selflink, a.selflink:hover
{
  border-bottom: 2px solid #900;
}

/* hide small menu and icon for wide screen */
div.smallnavmenu { display: none }
div.menuicon { display: none }
div.menuiconcontainer { display: none }

/* Nav menu changes for small screen */

@media screen and ( max-width: 500px )
{
  div.navmenu { display: none }
  /* contains site name/logo and hamburger icon */
  div.smallnavmenu 
  { 
    display: block; 
    text-align: center;
    padding: 10px;
    min-height: 30px;
  }
  /* styles for dropdown menu */
  a.navlink 
  { 
    display: block;
    margin: 10px auto;
    width: 100%;
  }

  /* menu icon ("hamburger") and 'menu' text if shown */
  div.menuiconcontainer, div.menuiconcontainer a
  { 
    display: block; 
    float: right;
    color: black;
    text-decoration: none;
    font-size: 90%;
  }


  div.menuicon
  {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    height: 20px;
  }

  div.menuicon div.menuline
  {
    display: block;
    margin: 3px;
    height: 3px;
    width: 18px;
    background: black;
  }
}

/* images */

img { max-width: 100%; }

img.leftimage 
{ 
  display: block; 
  float: left;
  margin: 0 20px 0 0;
  width: 50%;
  max-width: 600px;
  min-width: 150px;
}

img.centreimage
{
  display: block;
  margin: auto;
  width: 80%;
}

img.rightimage
{
  display: block;
  float: right;
  margin: 0 0 0 20px;
  width: 50%;
  max-width: 600px;
  min-width: 200px;
}

img.small
{
  width: 20%;
  min-width: 100px;
}

/* captioned images */

div.captioned_image
{
  width: 50%;
  min-width: 300px;
  font-style: italic;
  font-size: 80%; 
  color: #666;
  text-align: center;
}

div.captioned_image.small
{
  width: 20%;
  min-width: 100px;
}

div.captioned_image img { width: 100% }

div.centred
{
  margin: auto;
}

div.quote
{
  font-style: italic;
}

/***** action buttons *******/

form input
{
  font-family: sans-serif;
  color: black;
}

form input[type=submit]
{ 
  background: #ccc linear-gradient(#f8f8f8,#bbb);
  margin: 5px 0;
}

form.delbutton input[type=submit]
{
  background: red linear-gradient(#fee, #f66);
}


/**** text boxes ****/

div.panel
{
  background: white;
  max-width: 600px;
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}

div.panel.centred
{
  margin: 10px auto;
}

div.panel.newsflash
{
  border: solid red 1px;
}

/****** message and error boxes ***/

div.msgbox, div.errorbox
{
  background: white;
  width: max-content;
  max-width: 80%;
  padding: 5px;
  font-family: sans-serif;
}

div.msgbox
{
  border: 2px solid green;
  color: #060;
}

div.errorbox
{
  border: 2px solid red;
  color: #900;
}

/****** sidebar *********/

div.sidebar h3 
{
  display: inline-block;
  vertical-align: top;
  width: 100%;
  margin: 30px 0 10px; 
  border-top: 2px solid #903;
  padding-top: 20px;
  font-family: sans-serif 
}

div.auth_form 
{ 
  width: 90%; 
  max-width: 500px;
  margin: 0 auto; 
  padding: 10px;
  background: #f0e8f0;
  font-family: sans-serif;
  font-size: 90%;
  color: #333;
} 
div.auth_form input { width: 90%}
div.auth_form input[type="submit"] { width: max-content }
div.auth_form table tr td { padding: 0 2px }
div.auth_error { color: red; background: white; padding: 5px }

table.reqvars { margin: 10px 0 }
table.reqvars tr td
{
  background: white;
  font-family: sans-serif;
  font-size: 90%;
  padding: 2px;
  border: 1px solid #ccc;
  color: black;
  vertical-align: top;
  line-height: 1.2;
}

/****** home page *****/


/********* news page *********/

div.newsitem
{
  border-bottom: 1px solid red;
  margin: 0 0 20px 0;
  padding: 0 0 10px 0;
}

div.date 
{ 
  display: inline-block;
  width: 20%;
  width: calc(10% + 70px);
  vertical-align: top;
}

a.newslink
{
  display: inline-block;
  width: 70%;
  width: calc(90% - 90px);
  vertical-align: top;
}



/********* discography *******/

div.cd_summary
{
  overflow: auto;
  margin: 10px 0;
  border-top: 2px solid #fcc;
  padding: 10px 0 0;
}

div.cd_summary img
{
  display: inline-block;
  vertical-align: top;
  width: 40%;
  max-width: 200px;
}

div.cd_summary div.prices
{
  display: inline-block;
  vertical-align: top;
  width: 55%;
  margin: 0 0 0 20px;
}

@media screen and (max-width: 900px)
{
  div.cd_summary div.prices { margin: 0 0 0 10px }
}

div.cd_summary div.prices p
{
  margin: 10px 0 0 0;
}

@media screen and (max-width: 500px)
{
  ol.tracklist { padding-left: 25px }
}

div.postage 
{ 
  width: max-content;
  background: #eee;
  border: 1px solid #666;
  padding: 0;
  margin: 10px;
}
div.postage a, div.postage a:visited
{
  display: block;
  color: black;
  text-decoration: none;
  background: none;
  padding: 0 5px;
}

div.postage a.hl
{
  background: #57f;
  color: white;
}



/**************** data rec forms *******/

form.datarec_form 
{ 
  background: #caa; 
  margin: 10px; 
  padding: 10px;
  color: black;
  font-family: sans-serif;
}
div.form_input_pair { margin: 5px; padding: 5px; background: #fff0f0;}
div.form_input_pair div.label 
{ display: inline-block; width: 30%; vertical-align: top }
div.form_input_pair div.input 
{ display: inline-block; width: 65%; vertical-align: top }
div.form_input_pair div.input input,
div.form_input_pair div.input textarea { max-width: 100% }

@media screen and ( max-width: 900px )
{
  div.form_input_pair div.label,
  div.form_input_pair div.input
  {
    display: block;
    width: 95%;
  }
}

/************* events page ******/

div.event
{
  width: calc(100% - 20px);
  background: white;
  border-radius: 10px;
  padding: 10px;
  font-family: sans-serif;
  color: #900;
  margin: 20px 0;
}

@media screen and (max-width: 500px)
{
  div.event { padding: 5px }
}

div.event h3
{
  margin-top: 0;
}

div.event div.details
{
  background: #f8f0f0;

  margin: 20px 0;
  padding: 5px 10px;
  color: #333;
}

div.event div.address
{
  background: #f8f0f0;
  border-radius: 5px;
  line-height: 1.2em;
  width: max-content;
  min-width: 50%;
  margin: 0 0 30px 0;
  padding: 5px;
  color: #333;

}

div.event_short
{
  width: calc(100% - 20px);
  padding: 2px;
  border-bottom: 1px solid #999;
  font-family: sans-serif;
  color: #900;
  margin: 2px 0;
}

div.event_short:target
{
  background: #ddf;
}

div.event_short div.date
{
  display: inline-block;
  vertical-align: top;
  width: 30%;
  width: calc(10% + 60px);

}

div.event_short div.title
{
  display: inline-block;
  vertical-align: top;
  width: 65%;
  width: calc(90% - 70px);
}

@media screen and (max-width: 500px)
{
  div.event_short, div.event
  {
    width: 100%;
  }
}

/****** reviews page *******/

table.reviews { margin: 30px 0 }

table.reviews tr td
{
  font-weight: bold;
  font-style: italic;
  padding: 5px 20px;
  vertical-align: top;
}

@media screen and ( max-width: 500px )
{
  table.reviews tr td { padding: 5px }
}

div.review 
{ 
  clear: both;
  margin: 30px 0;
  /* border-top: 1px solid #fcc; */
  padding-top: 10px;
}
div.review div.text 
{ 
  display: inline-block;
  vertical-align: top;
  width: 75%;
  border-right: /* 1px solid #fcc; */ none;
  padding-right: 5px;
}
div.review div.source 
{ 
  display: inline-block;
  vertical-align: top;
  width: 20%;
  font-style: italic;
  
  padding-left: 5px;
}
@media screen and (max-width: 500px)
{
  div.review { margin: 20px 0; padding-top: 5px; }

  div.review div.source,
  div.review div.text
  {
    display: block;
    width: 100%;
    border-right: none;
    margin-top: 10px;
  }
}

/********* press pack ******/
div.pressphoto
{
  width: 40%;
  float: right;
  font-style: italic;
  text-align: center;
  margin: 10px;
  background: white;
  padding: 5px;
  border: 1px solid black;
}

div.pressphoto img
{
  display: block;
}