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

/* 1 - Logo */
#xmain_logo {
	position:relative;
	height:50px;
	width:100px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(../images/sinepay.bmp);
	background-repeat: no-repeat;
	background-color:green;
}

/* 2 - fading wrapper */
#fadeWrapper{
	display:none;
	position:relative;
	height: 100%;
	width: 100%;
	z-index:990;
	left:0;
	color:#00FFFF;	
}

#sinepay_busy { 
	display: none;
	background: url(../images/spinner.gif) no-repeat center; 
	position: relative;
	margin-left:auto;
	margin-right:auto;
	margin-bottom: -40%;
	max-height: 150px;
	max-width: 400px;
	text-align: center;
	font-size:24px;
	font-weight:bold;
	color:violet;
	z-index:990;
}

#sbloader{
	position: relative;
	height: 360px;		/* 360px */
	width: 360px;
	margin-top:5%;
	margin-left: auto;
	margin-right: auto;	
}

.loader {
    border: 16px solid #3498db;
	border-top: 16px solid blue;
 	border-bottom: 16px solid blue;
    border-radius: 50%;
    animation: spin 15s linear infinite;
}
	/* Safari */
	@-webkit-keyframes spin {
	  0% { -webkit-transform: rotate(0deg); }
	  100% { -webkit-transform: rotate(360deg); }
	}
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

#smainBox{
	opacity:1;
	position: relative;
	height: 330px;
	width: 530px;
	background-image:url(../images/grad21.png); 
	margin-top:-360px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0.5%;
	padding-right: 0.5%;
	padding-top: 10px;
	text-align: center;
	overflow: auto;	
}

#scWrapper {
	position: relative;
	height: 50px;
	width: 520px;
	background-color: #9FC; 
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;
	border-radius:5px;
	background-image:url(../images/rhead1.png);
	background-repeat:repeat-x;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

	#radiohead {
		position: relative;
		height: 50px;
		max-width: 500px;
		font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
		font-weight:bold;
		font-variant:small-caps;		
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 5px;
		text-align: center;
		color:#60F;
	}

	#radiobuts {
		position: relative;
		height: 20px;
		max-width: 300px;
		background-color: #099;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: -5px;
		color:#006400;
		font-size:14px;
	}

/* 3 - express / rapid choices */
#logosmain, #logosmainwallet {
    position: relative;
    height: 70px;
    max-width: 520px;    
    margin-left: auto;
    margin-right: auto;
	margin-bottom: 5px;
	text-align: left;
	white-space: nowrap;
	background-color:transparent; 
}

#logoOne, #logoTwo {
    position: relative;
    height: 70px;
    width: 130px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	float:left;
}

#logowallet {
    position: relative;
    height: 70px;
    width: 120px;	
	white-space:normal;
	margin-left:auto;
	margin-right:auto;
}

#logomessage {
    position: relative;
    height: auto;
    max-width: 520px;
	padding-left:3px;
	background-image:url(../images/carbon_fibre.png); 
    margin-left: auto;
    margin-right: auto;
	margin-bottom:5px;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:12px;
	text-align: left;
}

#logomessage input[type="submit"]{
	margin-top: 5px;
	height: auto !important;
	width:auto !important; 
	padding:5px !important;
    margin-left: auto !important;
    margin-right: auto !important;
	background-color:blue;
}

/* resize for smaller screes, wip */
@media only screen and (max-width: 600px) {
	/* 1 - Logo */
	#xmain_logo {
		position:relative;
		max-height:50px;
		max-width:100px;
		margin-left:auto;
		margin-right:auto;
		background-image:url(../images/sinepay.bmp);
		background-repeat: no-repeat;
		background-color:green;
	}

	/* 2 - fadding wrapper */
	#fadeWrapper{
		display:none;
		position:relative;
		height: 100%;
		width: 100%;
		z-index:990;
		top:0;
		left:0;
		color:#00FFFF;	
	}

	#sinepay_busy { 
		display: none;
		background: url(../images/spinner.gif) no-repeat center; 
		position: relative;
		margin-left:auto;
		margin-right:auto;
		margin-bottom: -40%;
		max-height: 150px;
		max-width: 400px;
		text-align: center;
		font-size:24px;
		font-weight:bold;
		color:violet;
		z-index:990;
	}

	#sbloader{
		position: relative;
		height: 180px !important;		/* 360px */
		width: 180px !important;
		margin-top:5%;
		margin-left: auto;
		margin-right: auto;	
	}

	.loader {
		visibility: hidden !important;
		border: 8px solid #3498db;
		border-top: 8px solid blue;
		border-bottom: 8px solid blue;
		border-radius: 50%;
		animation: spin 15s linear infinite;
	}
		/* Safari */
		@-webkit-keyframes spin {
		  0% { -webkit-transform: rotate(0deg); }
		  100% { -webkit-transform: rotate(360deg); }
		}
		@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}

	#smainBox{
		opacity:1;
		position: relative;
		height: auto !important;
		width: auto !important;
		background-image:url(../images/grad21.png); 
		margin-top:-180px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0.5%;
		padding-right: 0.5%;
		padding-top: 10px;
		text-align: center;
		overflow: auto;	
	}

	#scWrapper {
		position: relative;
		max-height: 50px !important;
		width: auto !important;
		background-color: #9FC; 
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 5px !important;
		text-align: left;
		border-radius:5px;
		background-image:url(../images/rhead1.png);
		background-repeat:repeat-x;
		font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	}

		#radiohead {
			position: relative;
			height: auto !important;
			width: auto !important;
			font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
			font-weight:bold;
			font-variant:small-caps;		
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 5px !important;
			text-align: center;
			color:#60F;
		}

		#radiobuts {
			position: relative;
			max-height: auto !important;
			max-width: 300px !important;
			background-color: #099;
			text-align: center;
			margin-left: auto;
			margin-right: auto;
			margin-top: 0px !important;
			color:#006400;
			font-size:14px;
		}

	/* 3 - express / rapid choices */
	#logosmain, #logosmainwallet {
		position: relative;
		min-height: 140px !important;
		width: auto !important;    
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 2px;
		text-align: left;
		white-space: nowrap;
		background-color: transparent; 
	}
	#logosmainwallet {
		min-height: 70px !important;
	}

	#logoOne, #logoTwo {
		position: relative;
		height: 70px;
		width: 50% !important;
		float:left;
		text-align: center;
	}

	#logowallet {
		position: relative;
		max-height: 70px;
		max-width: 120px;	
		white-space:normal;
		margin-left:auto;
		margin-right:auto;
	}

	#logomessage {
		position: relative;
		height: auto !important;
		width: auto !important;
		padding-left:3px;
		background-image:url(../images/carbon_fibre.png); 
		margin-left: auto;
		margin-right: auto;
		margin-bottom:5px;
		border-bottom-left-radius:5px;
		border-bottom-right-radius:5px;
		font-family:Georgia, "Times New Roman", Times, serif;
		font-size:11px;
		text-align: left;
	}

	#logomessage input[type="submit"]{
		margin-top: 5px;
		height: auto !important;
		width:auto !important; 
		padding:5px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		background-color:blue;
	}

}