@charset "UTF-8";
/* CSS Document */

/* payment options */
#pmop {
	text-align: center;				/* * for centering layout, re-adjustment ! */
	width: auto;
	height: auto;
	float: none;					/* * for centering layout ! */
	margin: 0 auto;      			/* ** auto - for centering layout ! */
	}
/* olpm (online payment) ivpm (invoice payment)	*/
#olpm,#ivpm {
	text-align: right;
	width: 	45%;
	min-width: 250px;
	height: auto;
	display: inline-block;
	vertical-align: top;
	margin: 0 auto;
	}
#ivpm {
	margin-left: 2%;
	}
#olpm div, #ivpm div {
	width: 100%;
	}
#olpm .label, #ivpm .label {
	background: whitesmoke;
	text-align: right;
	width: 80%;
	padding: 2px 0;
	margin-left: 5%;
	}
#olpm input[type="radio"], #ivpm input[type="radio"]{
	outline: 1px solid dodgerblue;
	margin-left: 20px;
	margin-right: 10px;
}
/* payment type info. */
.pyminfo {
		font-weight: normal;
		text-align: center;
	}
#olpm:hover .label {
	background: orange;
	}
#olpm:hover .pyminfo {
	color: darkorange;
	}
#ivpm:hover .label {
	background: greenyellow;
	}
#ivpm:hover .pyminfo {
	color: green;
	}
input[type="submit"] {
		font-size: 1em;
	}
/* dashed line at bottom of each */
#olpm .pmiftr, #ivpm .pmiftr {
	display: none;
	}

/* MEDIA QUERIES */	
@media screen and (max-width: 750px) {
	#pmop {
		width: 70%;
		}
	#olpm,#ivpm {
		width: 	100%;
		float: right;
		clear: both;
		}
	#olpm .label, #ivpm .label {
		display: block;
		width: 90%;
		float: right;
		}
	#olpm input[type="radio"],#ivpm input[type="radio"] {
		margin-left: 30px;
		margin-right: 50px;
		}
	#olpm .pyminfo, #ivpm .pyminfo {
		width: 100%;
		float: right;
		}
	#olpm .pmiftr, #ivpm .pmiftr {
		display: block;
		background-color: white;
		border-bottom: 0px;
		}
		#olpm:hover .pmiftr, #ivpm:hover .pmiftr {
		background-color: white;
		}
}