/* responsive design */
@media screen and (max-width: 1000px) {
	.container { width: 100%; }
}

@media screen and (max-width: 850px) {
	.container { width: 100%; }
}

@media screen and (max-width: 820px) {
	.container { width: 100%; }
	.topmenu li { height: 50px; background-size: contain; line-height: 3em; padding: 0px 1em; }
	.topmenu li:hover { line-height: 3em;}
	/*.menuhere { height: auto; }*/ /* for dokuwiki */
	#ddblueblockmenu li{ margin: 0.85em 0px; }
	ul.footermenu li { padding: 0.85em 0; }
	/* 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
	*/
	.makehigh { 
		display: grid !important; 
		grid-template-columns: repeat(1);
	}
	.leftcol { order: 2; float: none !important; }
	.rightcol { order: 3; float: none !important; }
	/* /////_______//// */
	.leftcol{
	background-image: url('images/columndivider.jpg'), url('images/columndivider.jpg'), url('images/horizontal-divider-1.png'),  url('images/horizontal-divider-1.png') ; 
	background-position: left, right, top, bottom;
	background-repeat: repeat-y, repeat-y, repeat-x, repeat-x; 
	}

	.rightcol{
	background-image: url('images/columndivider.jpg'), url('images/columndivider.jpg'), url('images/horizontal-divider-1.png'),  url('images/horizontal-divider-1.png') ; 
	background-position: right, left, top, bottom;
	background-repeat: repeat-y, repeat-y, repeat-x, repeat-x; 
	}
}

@media screen and (max-width: 600px) {
	.footercontent .block { margin: 0px; float: none;  width: 100%; }
	#ddblueblockmenu { font-size: 1.35em; }
	.main, p, .column { line-height: 1.35em; font-size: 1.15em; }
	.logohere { margin-left: 8px; }
	.menuhere { clear: both; }
	.midcol li, .midcol dd { margin: 0px 0px 0.85em 1.5em; }
	button { margin: 8px 8px; }
}

/* dokuwiki changes */
@media screen and (max-width: 600px) {
div.breadcrumbs { top: -16px; padding: 0.35em 0px; }
#writtensidebar li { font-size: 21.735px; margin: 0.85em 0px; }
}


@media screen and (max-width: 600px) {
  /* 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
  */
  
  .page { 
    display: flex !important; 
    /*display: flex !important;*/
    flex-direction: column;
    /*grid-template-rows: none;*/
    /*grid-template-columns: repeat(1); */
  }
  #dw__toc { order: -1; align-self: flex-end; margin-top: 12px !important; }
  .page h1 { order: -2; float: none !important; }
  /* /////_______//// */
  /*.colourblock:first-child { margin-left: 0px; }*/

}


/* 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;
  }
  /*.page li, .page dd { margin: 1.35em 0px !important; }*/
  #config__manager tr { }
  #config__manager td { display: block;  padding: 1.15em 0px; max-width: 60%;  }

  #config__manager fieldset td.value { width: unset; }

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