/* base (all sizes) */
@media all {
	:root {
	    --tourmail-hr-color: #999999;
	    --tourmail-inputbox-color: #ddffdd;
	    --tourmail-inputboxreq-color: #ffdddd;
	}

	#centerFrame {
		max-width: 1200px;
	}

  #footer {
		max-width: 100vw;
	}

  .boldred        { font-weight: bold; color: var(--text-red); }

  table, tr, td   { border: 0px solid var(--main-border-color); }

  .inputbox, .inputboxreq, .inputboxreqred, .inputtype, .inputcomment, .inputvalue, .inputcheckbox, textarea, input
  {
    font-size: 100%;
    text-align: left;
    font-family: "Trebuchet MS", Arial, Helvetica, Verdana, sans-serif;
    padding: 5px;
    border-radius: 5px;
  }

  .inputbox       { border: 1px solid var(--main-border-color); }
  .inputboxreq    { border: 1px solid var(--main-border-color); background-color: var(--tourmail-inputbox-color); }
  .inputboxreqred { border: 1px solid var(--main-border-color); background-color: var(--tourmail-inputboxreq-color); }
  .inputtype      { font-weight: bold; }
  .inputcomment   { border: 0px solid var(--main-border-color); }
  .inputvalue     { margin-left: 5px; margin-right: 5px; }
  .inputcheckbox  { border: 0px solid var(--main-border-color); }

  .noscript       { border: 1px solid var(--main-border-color); background-color: var(--tourmail-inputboxreq-color); padding: 20px; }

  hr {
    height: 2px;
    background-color: var(--tourmail-hr-color);
    border-width: 0px;
    color: var(--inner-text-color);
  }
}

@media only screen and (max-width: 600px) {

  #container {
    width: 100vw;
    border: 0px solid var(--debug-border-color);
  }
  #centerContent {
      width: 90vw;
      border: 0px solid var(--debug-border-color);
    }

    #innerNavigation {
      width: 90vw;
      margin: 0px 10px 0px 10px;
      padding: 20px 10px 10px 10px;
      float: none;
      text-align: left;
      background-color: #ffffff;
      border: 0px solid var(--main-border-color);
    }
  
    .inputbox, .inputboxreq, .inputboxreqred, .inputtype, .inputcomment, .inputvalue, .inputcheckbox, textarea, input
    {
      max-width: 100%;
    }
    
    .ttable_type { display: none; }
  
    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
      display: block; 
    }
  
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
      position: absolute;
      top: -9999px;
      left: -9999px;
    }
    
    td { 
      /* Behave  like a "row" */
      border: none;
      border-bottom: 1px solid #eee; 
      position: relative;
      /* padding-left: 50%;  */
    }
    
    td:before { 
      /* Now like a table header */
      position: absolute;
      /* Top/left values mimic padding */
      top: 6px;
      left: 6px;
      width: 45%; 
      padding-right: 10px; 
      white-space: nowrap;
    }
    
    /*
    Label the data
    */
    /* td:nth-of-type(1):before { content: "First Name"; }
    td:nth-of-type(2):before { content: "Last Name"; }
    td:nth-of-type(3):before { content: "Job Title"; }
    td:nth-of-type(4):before { content: "Favorite Color"; }
    td:nth-of-type(5):before { content: "Wars of Trek?"; }
    td:nth-of-type(6):before { content: "Secret Alias"; }
    td:nth-of-type(7):before { content: "Date of Birth"; }
    td:nth-of-type(8):before { content: "Dream Vacation City"; }
    td:nth-of-type(9):before { content: "GPA"; }
    td:nth-of-type(10):before { content: "Arbitrary Data"; } */
  
  }