/*
 _      _____  ___   _   __ ___________  ________   __
| |    |  ___|/ _ \ | | / /|  ___|  _  \ | ___ \ \ / /
| |    | |__ / /_\ \| |/ / | |__ | | | | | |_/ /\ V / 
| |    |  __||  _  ||    \ |  __|| | | | | ___ \ \ /  
| |____| |___| | | || |\  \| |___| |/ /  | |_/ / | |  
\_____/\____/\_| |_/\_| \_/\____/|___/   \____/  \_/                                                                                                            
     ___      .__   __.   ______   .__   __. ____    ____ .___  ___.   ______    __    __       _______.    __       _______     ___       __  ___ .______      
    /   \     |  \ |  |  /  __  \  |  \ |  | \   \  /   / |   \/   |  /  __  \  |  |  |  |     /       |   |  |     |   ____|   /   \     |  |/  / |   _  \     
   /  ^  \    |   \|  | |  |  |  | |   \|  |  \   \/   /  |  \  /  | |  |  |  | |  |  |  |    |   (----`   |  |     |  |__     /  ^  \    |  '  /  |  |_)  |    
  /  /_\  \   |  . `  | |  |  |  | |  . `  |   \_    _/   |  |\/|  | |  |  |  | |  |  |  |     \   \       |  |     |   __|   /  /_\  \   |    <   |      /     
 /  _____  \  |  |\   | |  `--'  | |  |\   |     |  |     |  |  |  | |  `--'  | |  `--'  | .----)   |      |  `----.|  |____ /  _____  \  |  .  \  |  |\  \----.
/__/     \__\ |__| \__|  \______/  |__| \__|     |__|     |__|  |__|  \______/   \______/  |_______/       |_______||_______/__/     \__\ |__|\__\ | _| `._____|
*/


html {
	height: 100%; -webkit-font-smoothing: antialiased; font-smoothing: antialiased;}
body{
		
		background-color: #333333;	background-position: center bottom, left top;	background-repeat: no-repeat	font-family: opensans; 	font-weight: normal; 	font-size: 11pt;	 margin:	0; 	 color:	#ffffff;	 margin:0; 	 padding:0; 	 height: 80%;	 width: 100%;	 overflow:hidden;}

		
		@font-face {
		font-family: opensanslight;
		src: url(../fonts/OpenSans-Light.woff);
		}
		@font-face {
		font-family: opensans;
		src: url(../fonts/OpenSans-Regular.woff);
		}


		.content{width: 1000px;margin-left: auto;margin-right: auto;margin-top: auto;margin-bottom: auto;height: 750px;z-index: 10; margin: 0 auto;}
		
		.top-box{	background-color: #333333;	border-top: 5px solid #479ce4;box-shadow: 0.5px 0.5px 15px #000000;height: 18%;margin-top: 9%;}
		
		img.logo{width: 90%;margin-top: 15px;margin-left: -80px;}
		
		.middle-box{margin-top: 20px;background-color: #333333;border-top: 5px solid #479ce4;box-shadow: 0.5px 0.5px 15px #000000;height: 71.5%;width: 35%;margin-left: auto;margin-right: auto;float:left;margin-left: 2.5%;}
		
		.right-side {height: 65%;width: 30%;float: right;margin-top: 20px;}
		
		
		.left-side{height: 65%;width: 30%;float: left;margin-top: 20px;}
		
		.top-left-box{
		background-color: #333333;border-top: 5px solid #479ce4;box-shadow: 0.5px 0.5px 15px #000000;height: 33.33%;width: 100%;margin-left: auto;margin-right: auto;background-image: url(../images/overlay-grey.png), url(../images/side-pic1.jpg);background-size: cover; }
		
		.middle-left-box{
		margin-top: 20px;	background-color: #333333;	border-top: 5px solid #479ce4;	box-shadow: 0.5px 0.5px 15px #000000;	background-image: url(../images/striped-bg.png), url(../images/side-pic3.jpg);	background-size: auto, cover; 	height: 33.33%;	width: 100%;margin-left: auto;	margin-right: auto;}
		
		.bottom-left-box{	margin-top: 20px;	background-color: #333333;	border-top: 5px solid #479ce4;	box-shadow: 0.5px 0.5px 15px #000000;	background-image: url(../images/overlay-grey.png), url(../images/side-pic2.jpg);	background-size: cover; 	height: 33.33%;	width: 100%;	margin-left: auto;	margin-right: auto;}
		
		.bottom-right-box{font-family: opensans; margin-top: 20px;background-color: #333333;border-top: 5px solid #479ce4;box-shadow: 0.5px 0.5px 15px #000000;height: 56.5%;width: 100%;margin-left: auto;margin-right: auto;}
		
		.top-right-box{font-family: opensans; background-color: #333333;border-top: 5px solid #479ce4;box-shadow: 0.5px 0.5px 15px #000000;height: 48%;width: 100%;margin-left: auto;margin-right: auto;}
		
		p.middle-left-box-text{font-family: opensanslight;font-size: 10pt;width: 80%;margin-left: auto;margin-right: auto;margin-top: 10%;display: none;}
		
		.avatar{border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; overflow: hidden; width: 100px; height: 100px; display: block;border: 5px solid #479ce4;margin-left: auto;margin-right: auto;margin-top: 10%;margin-bottom: 10px;}
		
		img.avatar-img{
		width: 100%; height: 100%; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;
		}
		
		p.persona-name{font-family: opensanslight; font-size: 20pt;text-align: center;text-transform: uppercase;margin-top: -1px;white-space: nowrap; width: 100%;                 overflow: hidden;  /* "overflow" value must be different from "visible" */   text-overflow: ellipsis; font-weight: bold;}
		
		p.steam-id{font-family: opensanslight; font-size: 13pt;text-align: center;margin-top: -10%;
		}
		
		hr.blue-line{margin-bottom: 5%;margin-top: 5%;border: 0;color: #479ce4;background-color: #479ce4;height: 5px;width: 100%;}
		
		p.box-title{font-family: opensanslight;text-transform: uppercase;margin-left: 3%;font-size: 16pt;margin: 3%;margin-top: 6%;margin-bottom: 6%;font-weight: bold;}
		
		table.server-info-table{font-family: opensanslight; margin: 0;font-size: 11pt;	}
		
		.server-info-icon{font-size: 20pt;text-align: center;margin:0;}
		
		hr.blue-line2{margin-bottom: 2%;margin-top: 2%;border: 0;color: #479ce4;background-color: #479ce4;height: 5px;width: 100%;}
	
		p.box-title{text-transform: uppercase;margin-left: 3%;font-size: 16pt;margin: 3%;margin-top: 6%;margin-bottom: 6%;}
		
		table.server-info-table{font-family: opensanslight; margin: 0;font-size: 11pt;}
		
		.server-rule-number{font-size: 13pt;text-align: center;margin:0;}
		
		
		#background{width: 100%; height: 100%; position: fixed;top: 0; left: 0; z-index:-100;}
		
		#bg1{
		background: url('../images/striped-bg.png'), url('../images/bg1.jpg');
		background-size: cover; 
		width: 100%; 
		height: 100%;
		}
		#bg2{
		background: url('../images/striped-bg.png'), url('../images/bg2.jpg');
		background-size: cover; 
		width: 100%; 
		height: 100%;
		}
		#bg3{
		background: url('../images/striped-bg.png'), url('../images/bg3.jpg');
		background-size: cover; 
		width: 100%; 
		height: 100%;
		}
		#bg4{
		background: url('../images/striped-bg.png'), url('../images/bg4.jpg');
		background-size: cover; 
		width: 100%; 
		height: 100%;
		}
		
		/* For smaller resolutions */
		@media only screen 
		and (max-width : 1484px) {
		
		
				.content{	width: 900px;margin-left: auto;margin-right: auto;margin-top: auto;margin-bottom: auto;height: 650px;z-index: 10; margin: 0 auto;}
		

		
		.middle-box{margin-top: 15px;background-color: #333333;border-top: 5px solid #479ce4;box-shadow: 0.5px 0.5px 15px #000000;height: 72.5%;width: 35%margin-left: auto;margin-right: auto;float:left;margin-left: 2.5%;}
		
		.right-side {height: 65%;width: 30%;float: right;margin-top: 20px;}
		
		
		.left-side{height: 64%;width: 30%;float: left;margin-top: 20px;}
		
		.top-left-box{background-color: #333333;border-top: 5px solid #479ce4;box-shadow: 0.5px 0.5px 15px #000000;height: 33.33%;width: 100%;margin-left: auto;margin-right: auto;background-image: url(../images/overlay-grey.png), url(../images/side-pic1.jpg);background-size: cover; }
		
		.middle-left-box{margin-top: 20px;background-color: #333333;border-top: 5px solid #479ce4;box-shadow: 0.5px 0.5px 15px #000000;background-image: url(../images/striped-bg.png), url(../images/side-pic3.jpg);background-size: auto, cover; height: 33.33%;width: 100%;margin-left: auto;margin-right: auto;}
		
		.bottom-left-box{margin-top: 20px;background-color: #333333;border-top: 5px solid #479ce4;box-shadow: 0.5px 0.5px 15px #000000;background-image: url(../images/overlay-grey.png), url(../images/side-pic2.jpg);background-size: cover; height: 33.33%;width: 100%;margin-left: auto;margin-right: auto;}
		
		.bottom-right-box{	font-family: opensans; 	margin-top: 20px;	background-color: #333333;	border-top: 5px solid #479ce4;	height: 56.5%;width: 100%;margin-left: auto;margin-right: auto;}
		
		.top-right-box{font-family: opensans; background-color: #333333;border-top: 5px solid #479ce4;box-shadow: 0.5px 0.5px 15px #000000;height: 48%;width: 100%;margin-left: auto;margin-right: auto;}
		
		p.middle-left-box-text{font-family: opensanslight;font-size: 9pt;width: 80%;margin-left: auto;margin-right: auto;margin-top: 10%;display: none;}
		
		.avatar{border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; overflow: hidden; width: 80px; height: 80px; display: block;border: 5px solid #479ce4;margin-left: auto;margin-right: auto;margin-top: 8%;margin-bottom: 10px;}
		
		img.avatar-img{
		width: 100%; height: 100%; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;
		}
		
		p.persona-name{font-family: opensanslight; font-size: 19pt;text-align: center;text-transform: uppercase;margin-top: -1px;white-space: nowrap; width: 100%;  overflow: hidden;  /* "overflow" value must be different from "visible" */  text-overflow: ellipsis; font-weight: bold;}
		
		p.steam-id{font-family: opensanslight; font-size: 12pt;text-align: center;margin-top: -10%;	}
		
		hr.blue-line{	margin-bottom: 8px;	margin-top: 8px;	border: 0;	color: #479ce4;	background-color: #479ce4;	height: 5px;	width: 100%;	}
		
		p.box-title{	font-family: opensanslight;	text-transform: uppercase;	margin-left: 3%;	font-size: 15pt;margin: 3%;margin-top: 6%;margin-bottom: 6%;font-weight: bold;}
		
		table.server-info-table{font-family: opensanslight; margin: 0;font-size: 10pt;}
		
		.server-info-icon{font-size: 19pt;text-align: center;margin:0;}
		
		hr.blue-line2{margin-bottom: 8px;margin-top: 8px;border: 0;color: #479ce4;background-color: #479ce4;height: 5px;width: 100%;}
		
		p.box-title{text-transform: uppercase;margin-left: 3%;font-size: 15pt;margin: 3%;margin-top: 5%;margin-bottom: 5%;}
		
		table.server-info-table{	font-family: opensanslight; margin: 0;font-size: 9.5pt; }
		
		.server-rule-number{font-size: 10.5pt;text-align: center;margin:0;	}
		
		
		#background{
		width: 100%; 
		height: 100%; 
		position: fixed;
		top: 0; 
		left: 0; 
		z-index:-100;
		}
		
		#bg1{
		background: url('../images/striped-bg.png'), url('../images/bg1.jpg');
		background-size: cover; 
		width: 100%; 
		height: 100%;
		}
		#bg2{
		background: url('../images/striped-bg.png'), url('../images/bg2.jpg');
		background-size: cover; 
		width: 100%; 
		height: 100%;
		}
		#bg3{
		background: url('../images/striped-bg.png'), url('../images/bg3.jpg');
		background-size: cover; 
		width: 100%; 
		height: 100%;
		}
		#bg4{
		background: url('../images/striped-bg.png'), url('../images/bg4.jpg');
		background-size: cover; 
		width: 100%; 
		height: 100%;
		}
		}