body, html 
{
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 background: white;
 font-family: hevetica,sans-serif;
}

.indent { margin-left: 2vw; }

.body_text
{
 margin-left: auto;
 margin-right: auto;
 width: 600px;
 max-width: 90%;
 font-size: 18px;
}

#banner_table
{
 background: firebrick;
 width: 100%;
 border-top: 2px solid black;
 border-bottom: 2px solid black; 
}

#banner_left
{
 width: 1%;
}

#banner_center
{
 width: 1%;
 text-align: left;
 padding-left: 25px;
}

#banner_right
{
 width: auto;
 text-align: left;
 padding-left: 20px;
 padding-right: 20px;
} 

#banner_title
{ 
 font-size: 30px;
 font-weight: bold; 
 color: white;
 vertical-align: center;
}

#banner_subtitle
{ 
 font-size: 18px; 
 vertical-align: center;
 font-weight: normal; 
 color: white;
}

#pig
{
 height: 75px;
 width: 75px;
 padding-top: 10px;
 padding-bottom: 10px;
 padding-right: 10px;
 padding-left: min(125px, 10vw); 
 text-align: center;
 vertical-align: center;
}

#div_new_poll, #div_close_poll, #div_delete_poll, #div_rmv_poll, #div_cod_poll
{
 width: 100%;
 display: none;
}

#url_instructions { display: none; }
	
#title, #comment
{
 width: 80%;
 border: 1px solid blue;
 margin: none;
 background-color: #FCFFD8;
 padding: 5px 10px 5px 10px;
 margin-top: 2px;
 display: inline-block;
 overflow-wrap: break-word;
}

#title:hover, #comment:hover 
{ 
 cursor: pointer; 
}

#title_chars, #comment_chars
{
 color: firebrick;
 text-align: center;
 color: white; 
}

select
{
 background-color: #FCFFD8;
 padding: 3px 3px 3px 3px;
 font-size: 18px;
}

select:hover { cursor: pointer; }

input[type="date"], input[type="time"] 
{ 
 background-color: #FCFFD8;
 font-size: 18px;
}

input[type="date"]:hover, input[type="time"]:hover
{
 cursor:pointer;
}

#nMeetingTimes
{
 background-color: #FCFFD8;
 padding: 3px 3px 3px 3px;
 text-align: center;
}

#nMeetingTimes:hover { cursor: pointer; }

	
#DateList
{
 border-collapse: collapse;
 border: 1px solid black;
}

#DateList, #DateList th, #DateList td
{
 border: 1px solid black;
}

#DateList th, #DateList td
{
 padding: 5px 10px 5px 10px;
}

#url_button, #cod_button
{
 display: inline-block;
 border-radius: 5px;
 background-color: #24a0ed;
 border: 1px solid black;
 padding: 20px;
 color: white; 
}

#url_button:hover, #cod_button:hover
{
 background-color: firebrick;
 cursor: pointer;
}

#close_days_note
{
 color: darkblue;
 font-size: 15px;
}

#pigmail
{
 text-decoration: none;
 color: blue;
}

#pigmail:hover { color: firebrick; }

#time_zones_label
{
 display: inline-block;
 padding-bottom: 5px; 
}

.heading { font-weight: bold; }
	
#poll_url
{
 border: 2px solid blue;
 padding: 5px 10px 5px 10px;
 margin-top: 5px;
 display: inline-block;
}

#poll_url:hover
{
 cursor: pointer;
 border: 2px solid firebrick;
 background: #D8D8D8;
}

#poll_id, #term_code { color: navy; }

#url_label { font-size: 15px; }

#enter_poll_id, #enter_term_code
{
 border: 1px solid blue;
 background-color: #FCFFD8;
 padding: 5px 10px 5px 10px;
 display: inline-block;
 text-align: center;
}

#enter_poll_id { min-width: 150px; }

#enter_term_code { min-width: 75px; }

#enter_poll_id:hover, #enter_term_code:hover { cursor: pointer; }

#cod_error { color: firebrick; }

/* Adjustments for smaller screen sizes */

@media screen and (max-width: 900px) 
{
  .body_text { font-size: 16px; }
 
  select, #close_days, #banner_subtitle, input[type="date"], input[type="time"]  { font-size: 16px; } 
  
  #close_days_note, #url_label { font-size: 12px; }
 
 .indent { margin-left: 1vw; } 
  
}

@media screen and (max-width: 600px) 
{
  .body_text { font-size: 14px; }

  select, #close_days, #banner_subtitle, input[type="date"], input[type="time"]  { font-size: 14px; } 
 
  #DateList { font-size: 12px; }
  
  #DateList th, #DateList td { padding: 3px 3px 3px 3px; }

  input[type="date"], input[type="time"]  { font-size: 12px; } 
  
  .indent { margin-left: 0; } 
  
}

@media screen and (max-width: 400px) 
{
 #banner_subtitle { display: none; }	
}