1/* responsive */
2@media screen and (max-width: 850px) {
3	#wrapper { width: 100%; }
4	#header, #column1, #column2, #column3, #footer {
5		width: 100%;
6		min-width: unset;
7		box-sizing: border-box;
8		padding: 0px 1em;
9	}
10	h1, h2, h3, h4, h5, h6{
11		line-height: 0.85em;
12	}
13	#column1 h3, #column2 h3, #column3 h3, #writtensidebar h1 {
14		margin: 0px;
15	}
16	#column2 {
17		padding-bottom: 1em;
18		margin-bottom: 2em;
19		border-bottom: 2px solid black;
20	}
21	#column1 ul, #column3 ul, #writtensidebar ul {
22		text-align: left;
23		margin: 0px;
24	}
25	#column1 li, #column2 li, #column3 li, #writtensidebar li,
26	#column1 dd, #column2 dd, #column3 dd, #writtensidebar dd,
27	.page li, .page dd
28	{
29		margin: 1.35em 0px;
30	}
31	ul ul { margin-left: 1.35em; }
32	button img { padding: 5px; }
33	button { margin: 12px 8px; }
34	textarea { font-size: 1.15em; }
35
36  /* rearrange elements * /
37  /*
38  https://webdesign.tutsplus.com/tutorials/a-few-different-css-methods-for-column-ordering--cms-27079
39  https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
40  https://www.digitalocean.com/community/tutorials/css-css-grid-layout-fr-unit
41  */
42  #wrapper {
43    display: grid !important;
44    grid-template-rows: none;
45    /*grid-template-columns: repeat(1);*/
46  }
47  #column2 { order: 1; float: none !important; }
48  #column1 { order: 2; float: none !important; }
49  #column3 { order: 3; float: none !important; }
50  #footer { order: 4; float: none !important; }
51}
52
53/* media manager and config manager for mobile */
54@media screen and (max-width: 480px){
55  fieldset,
56  #mediamanager__page,
57  #mediamanager__page .filelist{
58    max-width: 100%; min-width: unset;
59  }
60  #mediamanager__page .file,
61  #mediamanager__page .namespaces,
62  #mediamanager__page .panel {
63    width: 100%; clear: both; float: none;
64  }
65
66/* #mediamanager__page .namespaces { min-width: unset; } */
67
68  /*.page li, .page dd { margin: 1.35em 0px !important; display: block; }*/
69  #config__manager tr { }
70  #config__manager td { display: block;  padding: 1.15em 0px; max-width: 75%;  }
71  #config__manager fieldset {  margin: 1em 0px; width: 100%; box-sizing: border-box; }
72
73     /* make <select> not exceed it's parent div's width */
74    /* https://stackoverflow.com/q/44810056/337306 */
75    div.input, label.nowrap { display: flex; } select { width: 100%; flex-shrink: 1; }
76
77  fieldset { width: unset; }
78  #config__manager fieldset td.value { width: unset; }
79  td.label { word-wrap: anywhere; }
80
81  #config__manager td .input,
82  #config__manager fieldset td.value,
83  input, textarea,
84  #config__manager td input.edit,
85  #config__manager td textarea.edit {
86    max-width: 100%;
87    width: auto;
88  }
89}
90