/* CSS Stylesheet for MDDB */

@import url('normalize.css');

html { font-family: sans-serif; }

body
{
  background: #fff8d8;
  color: #ffccaa;
  font-family: Arial, Helvetica, sans-serif;
}

/* generic small/large screen switches */
@media screen AND (max-width: 500px)
{
  .bigscreenonly { display: none; }
}

@media screen AND (min-width: 501px)
{
  .smallscreenonly { display: none; }
}

table { border-collapse: collapse; }

/************ content *********/
div.content
{
  padding: 10px; 
  background: #fff8d8;
  color: black;
  min-height: 500px;
  max-width: 1500px;
  margin: auto;
}

/* block is centred on a wide widow */
div.inner-content
{
  width: max-content; 
  max-width: 100%; 
  margin: auto
}

@media screen AND (max-width: 600px)
{
  div.content_r { padding: 2px;  }
}

ul, ol { padding: 0 0 0 20px ; margin: 10px 0}

/********* <hx> headings ******/
h1, h2, h3, h4, h5 { font-family: sans-serif; }
h1 { font-size: 150%; margin: 15px 0; text-align: center;}
h2 { font-size: 130%; margin: 10px 0;}
h3 { font-size: 125%; margin: 10px 0;}
h4 { font-size: 120%; margin: 10px 0;}
h5 { font-size: 115%; margin: 10px 0;}
h6 { font-size: 110%; margin: 10px 0;}

h1 { text-align: center; }

@media screen and (max-width: 700px)
{
  h1 { font-size: 120%; margin: 10px 0;}
  h2 { font-size: 115%; margin: 5px 0;}
  h3 { font-size: 110%; margin: 5px 0;}
  h4 { font-size: 106%; margin: 5px 0;}
  h5 { font-size: 104%; margin: 5px 0;}
  h6 { font-size: 102%; margin: 5px 0;}
}

.centertext { text-align: center }
.redtext { color: red }
.floatright { float: right }
.inlineblock { display: inline-block; }
.maxcontent { width: max-content }
.greentext { color: green }
.smalltext { font-size: 90%; }

div.panel a:link 
{
  display: inline-block;
  background: #e8e8ff;
  color: #006;
  text-decoration: none;
  padding: 1px 5px;
  border-radius: 3px;  
}

/********** nav menu *********/
img.menuhead { display: block; margin: 0 auto 5px }
img.smhead { display: block; float: left }
div.menuicon { clear: right; height:5px }

/* head.php - navigation menu */
div.navmenu
{
  /* width: 100%; */
  /* height: 80px; */
  background: #eda;
  padding: 10px;
  text-align: center;
  color: black;
}

a.navlink
{
  display: inline-block;
  font-size: 120%;
  color: black;
  text-decoration: none;
  margin: 5px;
  padding: 7px;
  background: white;
  border-radius: 5px;
  border: outset white 2px;
}

a.navlink:visited { color: black }

a.selflink
{
  background: #d0ddd0;
  border: outset #d0ddd0 2px;
}

@media screen AND (max-width: 850px)
{
  a.navlink_r { font-size: 105%; padding: 1px; margin: 2px;}
}

/* menu icon ("hamburger") */
div.menuicon
{
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  height: 20px;
}

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

div.smallmenu a.menu_icon   /* "hamburger" */
{
  display: inline-block;
  float: right;
  width: max-content;
  height: 20px;
  background: #eee;
  color: black;
  padding: 5px;
  text-align: center;
  vertical-align: middle;
  border-radius: 5px;
  margin: 0 0 5px 0;
  cursor: pointer;
}

div.widemenu
{
  display: block;
}

div.smallmenu
{
  display: none;
}

div.smallmenu a
{
  color: black;
  text-decoration: none;
}

/* element of dropdown menu */
div.smallmenuitem
{
  width: 100px;
  margin: 2px auto;
  background: #eee;
  color: black;
  padding: 2px;
  border: outset #ccc 2px;
  border-radius: 5px;
}

div.testmodeheader
{
  color:red; 
  font-weight: bold; 
  font-size: 150%;
}

div.testsiteheader
{
  color:green; 
  font-weight: bold; 
  font-size: 150%;
}


/* switch to small screen nav menu */
@media screen and ( max-width: 600px )
{
  div.widemenu { display: none; }
  div.smallmenu { display: block; }
  div.testmodeheader, div.testsiteheader
  {
    font-weight: bold; 
    font-size: 90%;
  }  
}

div.loginstatus 
{ 
  clear: both; 
  font-size: 90%;
  background: none;
  padding: 0 5px;
  margin: auto;
  width: max-content;
  max-width: 90%;
}



/************* general page styles ******************/

div.panel
{ 
  background: white;
  color: black;
  border: 1px solid #999;
  border-radius: 10px;
  padding: 10px;
  font-family: sans-serif;
  margin: 20px;
  width: 800px;
  max-width: 80%;
  max-width: calc(100% - 40px);
}

@media screen and (max-width: 600px)
{
  div.panel
  { 
    margin: 5px auto;
    max-width: 90%;
    max-width: calc(100% - 25px);
  }
}


div.errorbox
{
  color: red;
  border: 3px solid #900;
  width: _moz_max-content;
  width: max-content;
  max-width: 90%;
}

div.msgbox
{
  color: #090;
  border: 3px solid #090;
  width: 600px;
  max-width: 90%;
  max-width: calc(100% - 40px);
}

table.login tr td
{
  padding: 5px;
  border: none;
}

table.dancelist, table.teamlist
{
  margin: 5px;
  border: 1px solid #666;
  max-width: 95%;
  font-size: 90%;
}

table.dancelist tr td, table.teamlist tr td, 
table.dancelist tr th, table.teamlist tr th
{
  font-family: 'Lucida Sans Unicode','Lucida Grande', sans-serif;
  padding: 2px 4px;
  border-bottom: 1px solid #99f;
  border-right: 1px solid #99f;
  background: white;
}

/* suppress some table columns on small screens */
@media screen AND (max-width: 500px)
{
  td.list_r, th.list_r { display: none; }
  td { padding: 0; }
  td span.list_r { display: none; }
}


/* list_w cells only show above 800px screen */
@media screen AND (max-width: 800px)
{
  td.list_w, th.list_w { display: none; }
}



table.showteam tr td
{
  border: 1px solid #696;
  padding: 2px;
  background: white;
  overflow-wrap: break-word;
}


div.photocaption
{
  font-family: serif;
  font-style: italic;
  text-align: center;
}

/* dance and style text notes in their own box */

div.notes
{
  border: 1px solid black; 
  padding: 10px; 
  background: white;
  width: -moz-max-content;
  width: max-content;
  min-width: 250px;
  max-width: 800px;
}

/********** buttons ********/


form
{
  margin: 0;
}

form.inlinebutton
{
  display: inline-block;
  margin: 0 2px;
}

form.inlinebutton.widespaced
{
  margin: 0 20px;
}


form.button 
{ 
  margin: 0; 
}

input[type="submit"]
{
  border-top-width: 3px;
  border-bottom-width: 3px;
  background: #eee;
}

form.datarec_form
{ 
  background: #acb; 
  padding: 2px 5px; 
  margin: 10px 0; 
  border-radius: 5px;
  max-width: 800px;
}


input[type="submit"]:hover
{
  background: #f8f8f8;
}

button, input[type="submit"] 
{ 
  background: linear-gradient(#eee,#ddd); 
  padding: 2px 5px; 
}
button.redbutton, input[type="submit"].redbutton 
  { background: linear-gradient(#fdd, #f66) }
button.greenbutton, input[type="submit"].greenbutton
  { background: linear-gradient(#afa, #6c6) }
form.deldancebutton.redbutton input[type="submit"],
form.redbutton input[type="submit"]
  { background: linear-gradient(#fdd, #f66) }

/* pop-up help pages */
table.help
{
  background: white;
}
table.help tr td
{
  border: 1px solid #696;
  vertical-align: top;
  padding: 5px;
  font-family: sans-serif;
  font-size: 90%;
}

/*************** edit forms ***************/

div.form_input_pair 
{ 
  max-width: 900px; 
  background: #d0ddd0; 
  margin: 3px 0; 
  padding: 2px 1px;
  border-radius: 3px;
}

div.form_input_pair div.input input.owntrad { width: 3em; }

/* spam trap in contact form */
.st_class
{
  display: none;
}

div.label { display: inline-block; width: 38%; vertical-align: top;}
div.input { display: inline-block; width: 58%; vertical-align: top;}
div.input input[type=text] { width: 99%; }

textarea { max-width: 100%; }

form.datarec_form input.teamyear { max-width: 100px; }

@media screen AND (max-width: 500px)
{
  div.form_input_pair div.label {display: block; width: 100%;}
  div.form_input_pair div.input { display: block; width: 100%;}
  textarea { max-width: 98%; }
}

form.logdates { max-width: 400px; }

div.form_input_pair div.input span.checkbox 
{
  display: inline-block;
  width: 25%;
  font-size: 90%;
}
@media screen and (max-width: 800px)
{
  div.form_input_pair div.input span.checkbox 
  {
    width: 30%
  }
}
@media screen and (max-width: 600px)
{
  div.form_input_pair div.input span.checkbox 
  {
    width: 50%
  }

  div.form_input_pair div.input[type=checkbox]
  { 
    display: inline-block;
    width: max-content;
  }
  div.form_input_pair div.input span.checkbox label
  {
    font-size: 90%;
  }
}

/******* login and password reset forms ******/


/* team photos */
div.captioned_photo 
{
  width: 100%; 
  max-width: 400px;
  text-align: center;
  background: #fffff4;
  border: 1px solid #cc9;
  border-bottom: 2px solid #996;
  border-right: 2px solid #996;
  border-radius: 5px;
  padding: 5px;
  font-family: 'Times New Roman', serif;
  font-style: italic;
  font-weight: bold;
}

div.captioned_photo img { width: 100% }


@media screen and (max-width: 600px)
{
  div.halfmenu { display: block; width: 90% }
}
div.halfmenu h3 { margin: 0 }

table.reqvars { margin: 10px; background: white }
table.reqvars tr td 
{
  font-family: monospace;
  vertical-align: top;
  border: 1px solid black; 
  padding: 2px;
}