/* Tykes News main stylesheet */

/* general */
@import url('normalize.css');
@import url('fonts/OpenSans.css');

@font-face
{
  font-family: "TwangStd";
  src: url('fonts/TwangStd.woff') format("woff");
}

@font-face
{
  font-family: "Talimino";
  src: url('fonts/Talimino-Bold.woff') format("woff");
}

p { margin: 10px 0 }

.tykesfont { font-family: Talimino; color: #f43}
.stirringsfont { font-family: TwangStd; font-size: 110%; color: #f60}

.green { color: green;  }
.red { color: red }
/* for any element that needs to start clear of floating pics */
.clear { clear: both; }
.clearboth { clear: both }
.clearright { clear: right }
.floatleft { float: left }
.floatright { float: right }
.centertext { text-align: center }

a 
{ 
  border: 1px solid #cef;
  border-radius: 5px;
  text-decoration: none;
  background: #f4f8ff;
}

a:hover
{
  background: #cef;
}

body
{
  background: white;
  color: black;
  font-family: 'OpenSans', sans-serif;
  line-height: 1.4;
}

/* headings */
h1 { text-align: center; }
h2 { margin: 12px 0 6px; text-align: center;}
h3 { margin: 12px 0 3px; }
h4 { margin: 10px 0 2px; }

div.panel h1:first-child, div.panel h2:first-child, 
div.panel h3:first-child, div.panel.h4:first-child
{
  margin-top: 0;
}

div.headerdate
{ display: block; }



div.content
{
  padding: 5px;
  background: /* #ffffec */ white;
  color: black;
  min-height: 400px;
  max-width: 1000px;
  margin: 0 auto;
}

.small
{
  display: none;
}

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

/* head.php - navigation menu */
div.widemenu
{
  background: white;
  padding: 5px;
  text-align: center;
}
div.smallmenu
{
  display: none;
}

@media screen and (max-width: 700px)
{
  div.smallmenu
  {
    display: block;
    background: #666;
    color: white;
    padding: 5px;
    text-align: center;
    margin: 5px 0 0;
    min-height: 20px;
  }
  div.smallmenu a
  {
    color: white;
    text-decoration: none;
  }
  div.smallmenu a.button
  {
    display: inline-block;
    background: linear-gradient(#eee, #ccc);
    color: black;
    border: 1px solid black;
    border-radius: 5px;
    width: 200px;
    margin: 5px;
  }
  div.smallmenu a.button.self
  {
    border: 1px solid red;
    background: linear-gradient(#fff, #ddd);
  }
  div.widemenu
  {
    display: none;
  }
}

a.navlink, a.navlink:visited, a.navlink:hover
{
  display: inline-block;
  font-size: 100%;
  text-decoration: none;
  color: black;
  background: #d8d8d8 linear-gradient(#e8e8e8, #ccc);
  padding: 2px;
  margin: 5px;
}

/* menu icon ("hamburger") */

a.menuicon, a.menuicon:hover
{
  display: block;
  float: right;
  margin-right: 20px;
  background: transparent;
  color: white;
}

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: white;
}


a.selflink, a.selflink:visited
{
  background: #e4e4e4 linear-gradient(#f0f0f0, #ddd);
  color: black;
  border-bottom: 2px solid black;
}

/* small screen adjustments */

@media screen and ( max-width: 700px)
{
  h1 { font-size: 120%; margin: 5px; padding: 0; }
  div.header_part img { width: 50% } 

  div.headerdate
  {
    font-size: 70%;
    margin: 0;
    padding: 0;
  }
}

@media screen and ( max-width: 600px)
{
  div.header_part img { display: none } 
}

@media screen and (max-width: 500px)
{
  div.header_part.header3
  { display: none; }
  h1.head 
  { 
    padding: 10px 0 0 0; 
  }
}

/* logo and header */
div.logo_header
{
  text-align: center;
  vertical-align: middle;
}

div.header_part
{
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px;
}

div.header_part h1
{
  margin: 0;
}

div.logo_header img.header_part
{
  vertical-align: middle;
}

div.header_part i
{ 
  font-family: 'Times New Roman', serif;
  font-style: italic;
}

ul { padding: 0 0 0 20px; margin: 5px 0; }
ul li 
{ 
  padding: 2px 0; margin: 0; 
}

/* seasonal header colours */
.winter
{
  color: #f32;
  text-shadow: 1px 1px 1px black;
}

.spring
{
  color: #fd0;
  /* text-shadow: 2px 2px 2px #960; */
  text-shadow: 1px 1px 1px black;
}

.summer
{
  color: #6cf;
  text-shadow: 1px 1px 1px black;
}

.autumn
{
  color: orange;
  text-shadow: 1px 1px 1px black;
}

@media screen and (max-width: 700px)
{
  div.maincol h2.spring, 
  div.maincol h2.summer, 
  div.maincol h2.autumn, 
  div.maincol h2.winter
  {
    font-size: 120%;
  }
}

div.text
{
  max-width: 700px;
  margin: auto;
}


/* images with captions accompanying text */
div.caption
{
  text-align: center;
  font-family: 'Times New Roman', serif;
  font-style: italic;
  font-weight: bold;
  background: #eee;
  margin: 0 0 10px 0;
}



div.smaller
{
  display: inline-block;
  width: 25%;
  max-width: 200px;
}

div.rightimg, div.right
{
  float: right;
}
div.leftimg, div.left
{
  float: left;
}

blockquote 
{ 
  color: #009;
  background: #f0f8ff;
  padding: 10px;
}

blockquote i
{
  font-family: 'Times New Roman', serif;
  font-style: italic;
}


/* general info panel with border */
div.panel
{
  border: 1px solid black;
  border-radius: 10px;
  margin: 10px auto;
  max-width: 500px;
  padding: 10px;
  background: #ffe;
}

/* text panel which is either full width or half width */
div.flexipanel
{
  display: inline-block;
  width: 90%;
  width: calc(100% - 22px);
  border: 1px solid black;
  border-radius: 10px;
  margin: 10px auto;
  padding: 10px;
  background: #ffe;
  vertical-align: top;
}

/* half width when screen is wide enough */
@media screen and (min-width: 700px)
{
  div.flexipanel
  {
    width: 40%;
    width: calc(50% - 44px);
  }
}

/* footer */
div.footer
{
  margin: 10px 0 0;
  background: #eee;
  border-top: 1px solid #aaa;
  text-align: center;
  font-size: 80%;
}

div.footer1 /* slightly larger text for first line of footer */
{
  font-size: 120%;
  margin: 0 0 10px 0;
}

/****** user forms and error boxes *****/
div.errorbox
{
  width: 500px;
  max-width: 95%;
  padding: 10px;
  margin: 10px auto;
  border: 2px solid red;
  border-radius: 10px;
  color: #900;
}

input.spamtrap { display: none; }
.testmode { text-align: center; color: red; }

form.spacedbutton { margin: 10px; }