/* stylesheet for historic_teams.php */

div.main
{
  width: 95%;
  max-width: 1200px;
  margin: auto;
}

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

h2 { text-align: center; }

form.qsearch
{
  background: #9c9;
  margin: 10px auto 30px;
  padding: 5px;
  border-radius: 5px;
}


div.hlitem
{
  background: white;
  border: 1px solid black;
  margin: 10px 0;
  padding: 5px;
}

div.hname, div.hattrs
{
  display: inline-block;
}

div.hname  { width: 38%; font-weight: bold }
div.hattrs { width: 58%; }

@media screen and ( max-width: 700px)
{
  div.hattrs { display: block; width: auto; }
  div.hname { display: block; width: auto;}
}

div.hattrs div
{
  display: inline-block;
  border-left: 1px solid #999;
  padding: 0 10px;
}

div.hstyle.small { display: none; }
@media screen and ( max-width: 900px )
{
  div.hstyle.wide { display: none }
  div.hstyle.small { display: inline-block; }
}

div.hstyle { width: 60px; }
div.hstyle.small { width: 10px; }
div.heref { width: 80px;  }
div.hsource { width: 60px; }  
div.htrad { width: 50px; }  

table.hteams tr td, table.hteams tr th
{
  border: 1px solid #999;
  background: white;
  padding: 2px;
  vertical-align: top;
}

@media screen and (max-width: 800px)
{
  table.hteams tr td.source,
  table.hteams tr th.source { display: none; }
}

table.hteams.smallscreen { display: none; }

@media screen and ( max-width: 700px )
{
  table.hteams { display: none }
  table.hteams.smallscreen { display: block }
}

div.hnotes
{
  display: block;
  width: 100%;
  border-top: 1px sold #999;
  margin-top: 10px;
  background: #e8f0e8;
  font-size: 90%;
}


table.sources
{
    margin: 10px 0;
    font-size: 90%;
}

table.sources tr td,
table.sources tr th
{
  background: white;
  border: 1px solid #999;
  padding: 2px 5px;
  vertical-align: top;
  text-align: left;
}

table.sources tr td.buttons 
{ 
  white-space: nowrap; 
  padding: 1px 5px;
}
@media screen and (max-width: 500px)
{ 
  table.sources { font-size: 80%; }
  table.sources tr td.buttons { white-space: normal; } 
}

div.hteam_details
{
  width: 80%;
  max-width: 800px;
  vertical-align: top;
  padding: 0 0 10px;
  margin: auto;
}

table.hteam_details 
{ 
  margin: 10px 0 ;
  max-width: 800px;
}


table.hteam_details tr td
{
  background: white;
  border: 1px solid #999;
  padding: 5px;
}

table.hteam_details tr td:first-child
{
  background: #dde;
  min-width: 20%;
}

div.hteam_dances
{
  display: inline-block;
  vertical-align: top;
  width: 250px;
  background: white;
  margin-left: 20px;
  padding: 0 10px;
}

div.hteam_dances table tr td
{
  border: 1px solid #ddd;
}

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

/******** images *******/

figure
{
  margin: 2rem auto;
  padding: 0;
  width: max-content;
  max-width: 95%;
  max-width: calc(100% - 20px);
  background: #eee;
}


figure picture img
{
  max-width: 100%;
}

div.imgbuttons
{
  padding: 10px;
  display: flex;
  justify-content: center;
}

div.thumb
{
  width: 200px;
  background: white;
  color: black;
  font-size: 90%;
}

div.thumb img
{
  display: block;
  width: 100%;
}