@charset "utf-8";
/* CSS Stylesheet for Maintenance & Error Pages */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100);

/*--- Global Components ---*/
body, html { 
	background: url('../images/texturebg.png') top left repeat!important; 
	width: 100%!important; height: 100%!important; font-family: Arial;
	margin: 0px!important; padding: 0px!important; 
	}
	
*:focus { outline: none!important; } /*-- Clear Outlines in multiple Browser --*/
img { border: 0px!important; outline: none!important; }

a, a:link, a:visited { color: #147062; text-decoration: none; }
a:hover { color: #222222; text-decoration: none; }


/*--- Page Components ---*/
#page-container, #page-container2 { float: left; width: 100%!important; height: 100%!important; margin: 0px!important; padding: 0px!important; overflow: hidden!important; }
#page-mleft { background:url('../images/monster-left.png') 0px 125px no-repeat!important; width: 100%!important; }
#page-mright { background:url('../images/monster-right.png') top right no-repeat!important; width: 100%!important; }

#page-title { width: 250px; padding-top: 50px!important; margin-left: auto!important; margin-right: auto!important; }
#page-title img { width: 100%!important; }

#page-title .floatmonster { 
	position: relative!important; width: 100px; height: 70px; 
	margin-left: 75px!important; margin-top: -185px!important; margin-bottom: 115px!important;
}

#page-desc { 
	font-family: 'Roboto'; font-size: 32px!important; font-weight: 300!important;
	text-align: center!important; color: #222222!important; 
	text-shadow: 1px 1px #FFFFFF!important;
	padding-top: 35px!important; padding-bottom: 35px!important;
	width: 75%!important; margin: 0px auto!important;
}
#page-desc2 { 
	width: 400px; margin: 0px auto!important; 
	padding-top: 25px!important; padding-bottom: 25px!important;
}
#page-desc2 img { width: 100%!important; }

#page-container .large-monster { margin: auto!important; width: 70%!important; }
#page-container .large-monster img { width: 100%!important; }

#page-container2 .largereflex-monster { margin: auto!important; width: 35%!important; }
#page-container2 .largereflex-monster img { width: 100%!important; }

#page-footer { position: fixed!important; background: url('../images/footerbg.png') top left repeat-x!important; width: 100%!important; height: 120px!important; bottom: 0px!important; }
#footer-container { width: 1000px!important; padding-top: 10px; margin: 0px auto!important; }


/* For Footer Page */
.footerlogo { float: left; width: 12%!important; }
.footerlogo2 { float: left; width: 23%!important; }
.footerlogo img, .footerlogo2 img { width: 100%!important; }

/* For Suspended Page */
#page-suspended { width: 1000px!important; margin-left: auto!important; margin-right: auto!important; margin-bottom: 25px!important; text-align: center!important; }
#page-suspended::after { content: ""; display: table!important; clear: both!important; }
#page-suspended .suspended-leftcol { width: 40%!important; float: left!important; }
#page-suspended .suspended-leftcol img { width: 100%!important; }
#page-suspended .suspended-rightcol { 
	float: right!important; background: #FFFFFF!important; width: 45%!important; 
	min-height: 150px; margin-top: 10%; margin-right: 5%; padding: 25px; 
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
	border: 1px solid #D8D8D8!important;
	}

.suspended-icon { width: 70px; height: 70px; margin-top: -50px!important; margin-left: auto!important; margin-right: auto!important; }
.suspended-title { font-family: 'Roboto'; font-size: 30px!important; letter-spacing: -1px; line-height: 1.1em; font-weight: 600; color: #D5212C!important; margin-top: 15px!important; margin-bottom: 15px!important; }
.suspended-desc { font-family: 'Roboto'; color: #666666!important; }






@media screen and (max-width: 1400px) {
	#page-container .large-monster { width: 50%!important; }
}


@media screen and (max-width: 1000px) {
	#page-container .large-monster { width: 60%!important; }
	#footer-container { width: 100%!important; }
	
	#page-suspended { width: 94%!important; margin-left: auto!important; margin-right: auto!important; }
}


@media screen and (max-width: 782px) {
	#page-container .large-monster { width: 65%!important; }
	#page-container2 { overflow: auto!important; }
	
	#page-footer { 
		position: inherit!important; background: #FFFFFF!important; border: 1px solid #E8E8E8; 
		width: 86%!important; height: inherit!important; 
		padding: 10px; margin-top: -100px; margin-bottom: 25px!important; margin-left: auto!important; margin-right: auto!important;
	}
	.footerlogo { float: left; width: 25%!important; }
	.footerlogo2 { float: left; width: 50%!important; }
	
	/* For Suspended Page */
	#page-suspended .suspended-leftcol { float: none!important; width: 250px!important; margin-left: auto!important; margin-right: auto!important; }
	#page-suspended .suspended-rightcol { float: none!important; width: 70%!important; min-height: 125px; padding: 25px!important; margin-left: auto!important; margin-right: auto!important; }
}


@media screen and (max-width: 650px) {
	#page-container { overflow: auto!important; }
	#page-mleft { background: none!important; }
	#page-mright { background: none!important; }
	
	#page-desc { font-size: 24px!important; width: 70%!important; }
	#page-container .large-monster { width: 80%!important; }
}


@media screen and (max-width: 550px) {
	#page-desc { color: #000000!important; }
	#page-container .large-monster { width: 100%!important; }
}


@media screen and (max-width: 500px) {
	#page-desc2 { width: 80%!important; }
}