1/* responsive design */
2@media screen and (max-width: 1000px) {
3	.container { width: 100%; }
4}
5
6@media screen and (max-width: 850px) {
7	.container { width: 100%; }
8}
9
10@media screen and (max-width: 820px) {
11	.container { width: 100%; }
12	.topmenu li { height: 50px; background-size: contain; line-height: 3em; padding: 0px 1em; }
13	.topmenu li:hover { line-height: 3em;}
14	/*.menuhere { height: auto; }*/ /* for dokuwiki */
15	#ddblueblockmenu li{ margin: 0.85em 0px; }
16	ul.footermenu li { padding: 0.85em 0; }
17	/* rearrange elements * /
18	/*
19	https://webdesign.tutsplus.com/tutorials/a-few-different-css-methods-for-column-ordering--cms-27079
20	https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
21	https://www.digitalocean.com/community/tutorials/css-css-grid-layout-fr-unit
22	*/
23	.makehigh {
24		display: grid !important;
25		grid-template-columns: repeat(1);
26	}
27	.leftcol { order: 2; float: none !important; }
28	.rightcol { order: 3; float: none !important; }
29	/* /////_______//// */
30	.leftcol{
31	background-image: url('images/columndivider.jpg'), url('images/columndivider.jpg'), url('images/horizontal-divider-1.png'),  url('images/horizontal-divider-1.png') ;
32	background-position: left, right, top, bottom;
33	background-repeat: repeat-y, repeat-y, repeat-x, repeat-x;
34	}
35
36	.rightcol{
37	background-image: url('images/columndivider.jpg'), url('images/columndivider.jpg'), url('images/horizontal-divider-1.png'),  url('images/horizontal-divider-1.png') ;
38	background-position: right, left, top, bottom;
39	background-repeat: repeat-y, repeat-y, repeat-x, repeat-x;
40	}
41}
42
43@media screen and (max-width: 600px) {
44	.footercontent .block { margin: 0px; float: none;  width: 100%; }
45	#ddblueblockmenu { font-size: 1.35em; }
46	.main, p, .column { line-height: 1.35em; font-size: 1.15em; }
47	.logohere { margin-left: 8px; }
48	.menuhere { clear: both; }
49	.midcol li, .midcol dd { margin: 0px 0px 0.85em 1.5em; }
50	button { margin: 8px 8px; }
51}
52
53/* dokuwiki changes */
54@media screen and (max-width: 600px) {
55div.breadcrumbs { top: -16px; padding: 0.35em 0px; }
56#writtensidebar li { font-size: 21.735px; margin: 0.85em 0px; }
57}
58
59
60@media screen and (max-width: 600px) {
61  /* rearrange elements * /
62
63  https://webdesign.tutsplus.com/tutorials/a-few-different-css-methods-for-column-ordering--cms-27079
64  https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
65  https://www.digitalocean.com/community/tutorials/css-css-grid-layout-fr-unit
66  */
67
68  .page {
69    display: flex !important;
70    /*display: flex !important;*/
71    flex-direction: column;
72    /*grid-template-rows: none;*/
73    /*grid-template-columns: repeat(1); */
74  }
75  #dw__toc { order: -1; align-self: flex-end; margin-top: 12px !important; }
76  .page h1 { order: -2; float: none !important; }
77  /* /////_______//// */
78  /*.colourblock:first-child { margin-left: 0px; }*/
79
80}
81
82
83/* media manager and config manager for mobile */
84@media screen and (max-width: 480px){
85  fieldset,
86  #mediamanager__page,
87  #mediamanager__page .filelist{
88    max-width: 100%; min-width: unset;
89  }
90  #mediamanager__page .file,
91  #mediamanager__page .namespaces,
92  #mediamanager__page .panel {
93    width: 100%; clear: both; float: none;
94  }
95  /*.page li, .page dd { margin: 1.35em 0px !important; }*/
96  #config__manager tr { }
97  #config__manager td { display: block;  padding: 1.15em 0px; max-width: 60%;  }
98
99  #config__manager fieldset td.value { width: unset; }
100
101  #config__manager td .input,
102  #config__manager fieldset td.value,
103  #config__manager td input.edit {
104    /*max-width: 100%; */
105  }
106}