/
* This file provides styles for mobile devices
* and smaller screens (up to 480px and 768px width).
*
* @author Anika Henke anika@selfthinker.org
*/

/* for detecting media queries in JavaScript (see script.js): */
#screenmode {
position: relative;
z-index: 0;
}

/* for screen widths in the tablet range
/
@media only screen and (max-width: @ini_tablet_width) {

#screenmode {
z-index: 1; /* for detecting media queries in JavaScript (see script.js) */
}

/* structure */
#dokuwikiaside {
width: 100%;
float: none;
margin-bottom: 1.5em;
}

#dokuwikiaside > .pad,
[dir=rtl] #dokuwikiaside > .pad {
margin: 0 0 .5em;
/* style like .page */
background: @ini_background;
color: inherit;
border: 1px solid #eee;
box-shadow: 0 0 .5em @ini_text_alt;
border-radius: 2px;
padding: 1em;
margin-bottom: .5em;
}

#dokuwikiaside h3.toggle {
font-size: 1em;

&.closed {
margin-bottom: 0;
padding-bottom: 0;
}
&.open {
border-bottom: 1px solid @ini_border;
}
}

.showSidebar #dokuwikicontent {
float: none;
margin-left: 0;
width: 100%;

> .pad {
margin-left: 0;
}
}

[dir=rtl] .showSidebar #dokuwikicontent,
[dir=rtl] .showSidebar #dokuwikicontent > .pad {
margin-right: 0;
}

/* preview */
.dokuwiki.hasSidebar div.preview {
border-right: none;
}

[dir=rtl] .dokuwiki.hasSidebar div.preview {
border-left: none;
}

/* toc */
#dwtoc {
float: none;
margin: 0 0 1em 0;
width: auto;
border-left-width: 0;
border-bottom: 1px solid @ini_border;
}
[dir=rtl] #dwtoc {
float: none;
margin: 0 0 1em 0;
border-right-width: 0;
}

.dokuwiki h3.toggle {
padding: 0 .5em .5em 0;
}
#dwtoc > div,
#dokuwikiaside div.content {
padding: .2em 0 .5em;
}

/* page */
.dokuwiki div.page {
padding: 1em;
}
/* enable horizontal scrolling in media manager */
.mode_media div.page {
overflow: auto;
}

/* push pagetools closer to content */
#dokuwikipagetools {
top: 0;
}
.showSidebar #dokuwikipagetools {
top: 3.5em;
}


/* _edit */
.dokuwiki div.section_highlight {
margin: 0 -1em;
padding: 0 .5em;
border-width: 0 .5em;
}
.dokuwiki div.preview {
margin: 0 -1em;
padding: 1em;
}

/* _recent */
.dokuwiki form.changes ul {
padding-left: 0;
}
[dir=rtl] .dokuwiki form.changes ul {
padding-right: 0;
}


} /* /@media */


/* for screen widths in the smartphone range
/
@media only screen and (max-width: @ini_phone_width) {

#screenmode {
z-index: 2; /* for detecting media queries in JavaScript (see script.js) */
}

body {
font-size: 100%;
}

/* structure */

#dokuwikisite {
max-width: 100%;

> .site {
padding: 0 .5em;
}
}

#dokuwikiaside {
margin-bottom: 0;
}

#dokuwikiheader {
padding: .5em 0;
}


/* header */

#dokuwikiheader ul.a11y.skip {
position: static !important;
left: 0 !important;
width: auto !important;
height: auto !important;
float: right;
font-size: 0.875em;
list-style: none;
padding-left: 0;
margin: 0;

li {
margin-left: .35em;
display: inline;
}
}
[dir=rtl] #dokuwikiheader ul.a11y.skip {
left: auto !important;
right: 0 !important;
float: left;
padding-right: 0;

li {
margin: 0 .35em 0 0;
}
}

#dokuwikiheader .headings,
#dokuwikiheader .tools {
float: none;
text-align: left;
width: auto;
margin-bottom: .5em;
}
[dir=rtl] #dokuwikiheader .headings,
[dir=rtl] #dokuwikiheader .tools {
float: none;
text-align: right;
width: auto;
}
#dokuwikisitetools {
text-align: left;
}
[dir=rtl] #dokuwikisitetools {
text-align: right;
}
#dokuwikiusertools,
#dokuwikisitetools ul,
#dokuwikisitetools h3,
#dokuwikipagetools,
.dokuwiki div.breadcrumbs, /* @todo: maybe move breadcrumbs to the bottom? */
.dokuwiki .pageId {
display: none;
}

/* search form */
#dokuwikisitetools form.search {
float: left;
margin: 0 .2em .2em 0;
width: 49%;
}
[dir=rtl] #dokuwikisitetools form.search {
float: right;
margin: 0 0 .2em .2em;
}

#dokuwikisitetools form.search input {
width: 100% !important;
}
.dokuwiki form.search div.ajax_qsearch {
display: none !important;
}

/* action dropdown is alternative for all hidden tools */
#dokuwikiheader .mobileTools {
display: block;
font-size: 0.875em;
margin: 0 0 .2em 0;
float: right;
width: 49%;
}
[dir=rtl] #dokuwikiheader .mobileTools {
float: left;
}
#dokuwikiheader .mobileTools select {
padding: .3em .1em;
width: 100% !important;
}

/* force same height on search input and tools select */
#dokuwikisitetools form.search input,
#dokuwikiheader .mobileTools select {
height: 2.1em;
line-height: 2.1em;
overflow: visible;
}


/* content */

#dokuwikiaside > .pad,
.dokuwiki div.page {
padding: .5em;
}

/* form elements */
#configmanager fieldset td.value,
#configmanager td .input,
.dokuwiki fieldset,
.dokuwiki input.edit,
.dokuwiki textarea {
width: auto !important;
max-width: 100% !important;
}
.dokuwiki select {
max-width: 100% !important;
}
#configmanager fieldset {
margin-left: 0;
margin-right: 0;
}

.dokuwiki label.block {
text-align: left;

span {
display: block;
}
}
[dir=rtl] .dokuwiki label.block {
text-align: right;
}

/* _edit */
.dokuwiki div.section_highlight {
margin: 0;
padding: 0;
border-width: 0;
}
.dokuwiki div.preview {
margin: 0 -.5em;
padding: .5em;
}


} /* /@media */


/* for screen heights smaller than the pagetools permit
/
@media only screen and (max-height: 400px) {
400px is only roughly the required value, this may be wrong under non-standard circumstances

#dokuwiki__pagetools div.tools {
position: static;
}


} /* /@media */