/*
** CMS_MOBILE.CSS: EVERYTHING IN THIS STYLESHEET OVERRIDES CMS_BIG.CSS (WHICH IS THE DEFAULT STYLESHEET FOR THE CMS)
**
** !important is used to also overwrite later inline styles (from the custom design) as well, not only overwrite the default big.css
*/

html {
	font-size: 84%						!important;
}

body.cms {
	padding: 0 1em 1em 1em					!important; /* padding here instead of container; a mobile screen/viewport has influence on the hardware level so it even changes the body of the document, not only the dumb container */
}



body.cms .container {
	width: 100%							!important;
}

body.login .container {
	width: 100%							!important;
}



body.cms form fieldset {
	overflow: hidden					!important;
	min-width: 0						!important; /* solves a horizontal scaling problem with fieldsets and their content on smaller screens */
	width: 100%							!important; /* as addition to the above solution for the fieldset issue */
}

body.cms form input[type=text], body.cms form input[type=submit], body.cms form input[type=password], body.cms form input[type=file], body.cms form input[type=number], body.cms form input[type=email] {
	width: 100%							!important;
}

body.cms form input[type=password] {
	width: 11em							!important;
}

body.cms form input[type=submit] {
	width: auto							!important;
}



/* cropping site images is not possible on mobile (jCrop does not work correctly), so show a message if on mobile and hide stuff */
body.cms form fieldset div.mobile_img_msg { /* show warning about image cropping on mobile not possible */
	display: block						!important;
}
body.cms form *.mobile_img_off { /* hide some parts of the image cropping function */
	display: none						!important;
}
body.cms form fieldset div.checkered img { /* show full image inside the viewport, no overflow outside the screen width */
	max-width: 100%					!important;
}





/* SEPARATE CLASSES FOR CMS-BAR AND CMS-BUTTONS */

div.cms_bar {
	opacity: 1							!important;
	height: auto						!important;
}