/*
** MOBILE.CSS: EVERYTHING IN THIS STYLESHEET OVERRIDES BIG.CSS (WHICH IS THE DEFAULT STYLESHEET)
**
** !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 {
	padding: 0.75em					!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 */
}

.container {
	width: 100%;
}

header, nav, main, footer {
	padding: 0.75em					!important;
	margin: 0.75em 0					!important;
}

header h1, header h3 { /* for a mobile bgr image these default !importants get overwritten by other !importants in the custom inline style */
	display: inline-block			!important;
	
	margin: 0							!important;
	
	line-height: 1em					!important;
}

header h3 {
	margin-top: 0.25em				!important;
	
	line-height: 1.25em				!important;
}


nav > a, nav > span {
	margin-bottom: 0.5em				!important; /* later, try to remove this extra margin for the 'united' navi */
}

main > div { /* only target direct descendants from main with > , because otherwise it will f*ck up the Spectrum colorpickers */
	margin: 0.25em 0;
}

main figure {
	width: 50%;
}

main figure.text_float {
	margin-right: 0.5em				!important;
	margin-bottom: 0.25em			!important;
}


/* module: forms */

form input[type=text], form input[type=email] {
	width: 69%;
}

form input[type=text].small {
	width: 37%;							!important;
}

form input[type=text].large {
	width: 84%;							!important;
}


/* module: shop */

main div.product { /* container element, also contains cms button */
	width: 50%						!important;
}