/* responsive */
@media screen and (max-width: 850px) {
	#wrapper { width: 100%; }
	#header, #column1, #column2, #column3, #footer { 
		width: 100%; 
		min-width: unset; 
		box-sizing: border-box;
		padding: 0px 1em;
	}
	h1, h2, h3, h4, h5, h6{
		line-height: 0.85em;
	}
	#column1 h3, #column2 h3, #column3 h3, #writtensidebar h1 {
		margin: 0px;
	}
	#column2 {
		padding-bottom: 1em;
		margin-bottom: 2em;
		border-bottom: 2px solid black;
	}
	#column1 ul, #column3 ul, #writtensidebar ul {
		text-align: left;
		margin: 0px;
	}
	#column1 li, #column2 li, #column3 li, #writtensidebar li,
	#column1 dd, #column2 dd, #column3 dd, #writtensidebar dd,
	.page li, .page dd
	{
		margin: 1.35em 0px;
	}
	ul ul { margin-left: 1.35em; }
	button img { padding: 5px; }
	button { margin: 12px 8px; }
	textarea { font-size: 1.15em; }

  /* rearrange elements * /
  /* 
  https://webdesign.tutsplus.com/tutorials/a-few-different-css-methods-for-column-ordering--cms-27079
  https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
  https://www.digitalocean.com/community/tutorials/css-css-grid-layout-fr-unit
  */
  #wrapper { 
    display: grid !important; 
    grid-template-rows: none;
    /*grid-template-columns: repeat(1);*/
  }
  #column2 { order: 1; float: none !important; }
  #column1 { order: 2; float: none !important; }
  #column3 { order: 3; float: none !important; }
  #footer { order: 4; float: none !important; }
}

/* media manager and config manager for mobile */
@media screen and (max-width: 480px){
  fieldset, 
  #mediamanager__page, 
  #mediamanager__page .filelist{ 
    max-width: 100%; min-width: unset; 
  }
  #mediamanager__page .file, 
  #mediamanager__page .namespaces, 
  #mediamanager__page .panel { 
    width: 100%; clear: both; float: none;
  }

/* #mediamanager__page .namespaces { min-width: unset; } */

  /*.page li, .page dd { margin: 1.35em 0px !important; display: block; }*/
  #config__manager tr { }
  #config__manager td { display: block;  padding: 1.15em 0px; max-width: 75%;  }
  #config__manager fieldset {  margin: 1em 0px; width: 100%; box-sizing: border-box; }

     /* make <select> not exceed it's parent div's width */
    /* https://stackoverflow.com/q/44810056/337306 */
    div.input, label.nowrap { display: flex; } select { width: 100%; flex-shrink: 1; }

  fieldset { width: unset; }
  #config__manager fieldset td.value { width: unset; }
  td.label { word-wrap: anywhere; }

  #config__manager td .input, 
  #config__manager fieldset td.value, 
  input, textarea,
  #config__manager td input.edit,
  #config__manager td textarea.edit { 
    max-width: 100%; 
    width: auto;
  }
}