/******************************** GENERAL ********************************/

/** On large screens the width will be maximum 1200 px **/
/** On small screens the width will be 100% of the width of the device **/

body {
	width: 1200px;
	max-width: 98%;
	margin: 0px auto;
}


a:focus {
	outline-style: none;
	-moz-outline-style: none;
	border: none;
	text-decoration: none;
}

a, a:visited {
	color: moccasin;
	text-decoration: none;
}

a:hover {
	color: brown;
}




p {
	max-width: 80%;
	margin-left: auto;
	margin-right: auto;

	text-align: center;
}

h1, h2, h3 {
	text-align: center;
}

* {
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
}

/*
input,
textarea,
button,
select,
div,
a {
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
*/



/** Ensure form field respect the maximum width of the device **/

input, select, button, textarea {
	max-width: 100%;
	box-shadow: none;
}

input:-moz-placeholder,
input:focus {
	box-shadow: none !important;
}

input:invalid {
	box-shadow: none;
}

meter, progress, output {
	max-width: 100% ;
} 


/** Ensure images respect the maximum width of the device and are shrunk appropriately respecting their aspect-ratio **/
/** By default images are shown using there native width and height **/

img {
	width: auto;
	max-width: 80%;
	height: auto;
} 


p img {
	width: auto;
	max-width: 100%;
	height: auto;
} 


/** Showing two different background images depending on the device width **/
/** Corresponding html: <div id="picblock">text above the image</div> **/


@media (max-width: 480px) {

	#picblock {
		background-image: url(mobile.png);
		background-repeat: no-repeat;
		background-size: contain ;
	}
}

@media (min-width: 481px) {

	#picblock {
		background-image: url(desktop.png);
		background-repeat: no-repeat;
		background-size: contain ;
	}
} 


/******************************** TABLES ********************************/


td {
	vertical-align: top;
}

.bordered_cells {
	border: 1px solid black;
}

.bordered_cells > tbody > tr > td {
	border: 1px solid black;
	padding: 5px;
}

.bordered_no {
	border: 0px;
}

.bordered_no > tbody > tr > td {
	border: 0px;
	padding: 5px;
}

td > p {
	max-width: 100%;
	margin-left: 5px;
	margin-right: 5px;
}


/******************************** END ********************************/