/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */
		
	
	body {
		font-family:Arial, Helvetica, sans-serif;
		background: #fff url(../images/nbg.png);
	}
	
	
	.logo {
		
		width:400px;
		height:118px;
		background-image: url(../images/logo.png);
		z-index: 1000;
		position: relative;
		
	}
	
		#monster {
		width:400px;
		height:118px;
		background-image: url(../images/logo.png);
		z-index: 1000;
		position: relative;
		
	}
	
	h1.tagline {
		font-size: 22px;
		color: #0f61cf;
		text-shadow: 0 1px 0 #000;
		text-align: right;
		margin-top: 25px;

	}

	.oops {
		font-size: 48px;
		color: #da1616;
		letter-spacing: -1px;
		word-spacing: 4px;
		text-align: center;
		text-shadow: 0 1px 0px #000;
	}
	
		
	
	h1.tagline_b {
		font-size: 16px;
		color: #535353;

		text-align: right;
	}
	
	span.white {
		color: #0f61cf;
	}
	
	span.red {
		color: #0f61cf;
	}
	
	.navbar {
		background:  url(../images/grdnt.png) repeat-x center center #fff;
		height: 46px;
		margin-top: -32px;
		-webkit-border-top-left-radius: 5px;
		-webkit-border-top-right-radius: 5px;
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-topright: 5px;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		box-shadow: 0 3px 8px #202020;

		
	}
	
	.button_members {
		width: 123px;
		height: 25px;
		background-image: url(../images/nav_sprite.png);
		background-position: 0px 0px;
		float: left;
		margin:0 20px 0 0px; 
	}
	
	.button_join {
		width: 123px;
		height: 25px;
		background-image: url(../images/nav_sprite.png);
		background-position: 0px -25px;
		float: left;
	}
	
	.button_members:hover {
		width: 123px;
		height: 25px;
		background-image: url(../images/nav_sprite.png);
		background-position: 0px -48px;
		float: left;
	}
	
	.button_join:hover {
		width: 123px;
		height: 25px;
		background-image: url(../images/nav_sprite.png);
		background-position: 0px -73px;
		float: left;
	}
	
	.nav_container {
		float: right;
		margin-top: 8px;
	}
	
	.main {
		background-color: #fafafa;
		box-shadow: 0 3px 8px #202020;
	}
	
	.main2 {
		background-color: #fafafa;
		box-shadow: 0px 5px 5px #202020;
		min-width: 1140px;
	}
	
	.thumbgrid {
		margin-left:12px;
		margin-right:12px;
	}
	
	.thumb {
		width:360px;
		height:231px;
		border: 2px solid rgb(213, 213, 213);
		margin:5px 0px; 
	}
	
	.thumb_fixed {
		width:360px;
		height:231px;
		border: 2px solid #ccc;
		margin:5px 0px; 
	}
	
	.thumb_banner {
		width:360px;
		height:231px;
		border: 2px solid #ccc;
		margin:5px 0px; 
		background-image: url(../images/banner.jpg);
	}
	
	.thumbhover {
		width:360px;
		height: 231px;
		opacity:0.1;

	}
	
	.thumbhover:hover {
		width:360px;
		height: 231px;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		background-image: url(../images/thumb_hover2.png);
		opacity:0.7;
	}
	
	.thumbhover_fixed {
		width:360px;
		height: 231px;
		opacity:0.1;

	}
	
	.thumbhover_fixed:hover {
		width:360px;
		height: 231px;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		background-image: url(../images/thumb_hover2.png);
		opacity:0.7;
	}
	
	
	
	.thumbhoverB {
		width:360px;
		height: 231px;
		opacity:0.1;

	}
	
	.thumbhoverB:hover {
		width:360px;
		height: 231px;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		opacity:0.7;
	}
	
	
	
	
	
	
	img.blank {
		width: 359px;
		height: 230px;
	}
	
	.first {
		margin-right:30px;
		margin-left:7px;
	}
	
	.second {
		margin-right:30px;
	}
	
	h1.midtagline {
		color: #535353;
		font-size: 28px;
		text-align: center;
		margin-top: 10px;
	}
	
	h2.midtagline_b {
		color: #202020;
		font-size: 22px;
		text-align: center;
		margin-bottom: 10px;
	}
	
	h2.midtagline_b a {
	    color: #202020;
		text-decoration: underline;
	}
	
	/* tooltip styling */
  .tooltip {
    display:none;
    width:324px;
    height:254px;
    padding:40px 30px 10px 30px;
    font-size:11px;
    color:#fff;
    background-image: url(../images/tooltip.png);
    background-repeat: no-repeat;
    z-index: 1000;
  }
  
  h1.tipcopy {
	  font-size: 19px;
	  color: #fff;
	  font-weight: normal;
	  text-align: right;
	  margin-right: 55px;
	  margin-bottom: 8px;
  }
  
   p.tipcopy {
	  font-size: 12px;
	  color: #fff;
	  font-weight: normal;
	  text-align: left;
	  margin-right: 35px;
	  line-height: 19px;
  }
  
  .footerzone {
	  background-color:#0f61cf; box-shadow:  0 5px 8px #202020;
  }
  
  p.footer {
	  font-size: 12px;
	  color: #fff;
	  text-align: center;
	  padding: 20px 0px 20px 0px
  }
  
   p.footer a {
   font-size: 16px;
   color: #fafafa;
  }
  
     p.footer a:hover {
     color: #fff;
  }
  
  .player {
	 margin:1% 2.9% 3% 3%;
	 position: relative;
  }
  
  .controls {
	 margin-top: -4px;
	 width: auto;
  }
  
  /*#mainForm {
	  display: none;
	  position: absolute;
	  background-color: #fff;
	  text-align: center;
	  margin-left: 28px;
	  width: 1084px;
	  height: 100%;
	  max-height: 611px;
  }
*/	
	#mainForm {
		display: none;
		width: auto;
		background-color: rgb(241, 241, 241);
		text-align: center;
		padding-top: 22%;
		padding-bottom: 21.5%;
	}
  
	 div.playerzone {
	  height:678px;
	  min-width: 1140px;
	 }
	  
	 .ie10 .example {  
	  position:absolute;
	  margin-top: 15%;
	 }  


	.example2 {  
	   position:absolute;
	 }
	 
	 
	 #loaderhide img {
		 opacity:0.7; 
		 margin-top: 25%;
	 }
	 
	
	 div.btn_mob_container {
		 display: none;
	 }
	 
	 #mainForm_mobile {
		 display: none;
	}
	
	a.mdb {
		color: #0044cc;
	}
	
	a.mdb:visited {
		color: #0044cc;
	}
	
	
	#box1 {
	    
	    position:absolute;
	    width:100%;
	    text-align:center;
	    top:0;
	    left:0;
	    
	}

.headerStatic {min-width:1140px}

	.hide_desktop {
		display:none !important;
	}
	


	
/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 767px) {

	body {
	
	}
	
	.logo {
		
		background-image: url(../images/logo.png);
		background-repeat: no-repeat;
		z-index: 1000;
		position: relative;
		width: auto;
		min-height: 118px;
		background-size: 90%;
		background-position: 50% 50%;
		
	}
	
	h1.tagline {
		display: none !important;
	}
	
	h1.tagline_b {
		display: none !important;
	}
	
	.nav_container {
	
		display: none;

	}
	
	
	.navbar {
		background:  url(../images/grdnt.png) repeat-x center center rgb(51, 51, 51);
		height: 46px;
		margin-top: 0px !important;
		-webkit-border-top-left-radius: 5px;
		-webkit-border-top-right-radius: 5px;
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-topright: 5px;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		
	}
	
	
	.thumbgrid {
		margin-left:0px !important;
		margin-right:0px !important;
		margin-top: 10px;
	}
	
	.thumb {
		width:auto !important;
		/*height:231px;*/
		border: 2px solid #353535;
		margin:0px 0px;
		background-repeat: no-repeat !important;
		background-size:cover !important;
		background-position: center center !important;
		
	}
	
	.thumb_banner {
		width:auto !important;
		/*height:231px;*/
		/*border: 2px solid #353535;*/
		margin:0px 0px; 
		background-image: url(../images/banner.jpg);
		background-repeat: no-repeat !important;
		background-size:cover !important;
		background-position: center center !important;

	}
	
	.thumbhover {
		width:auto !important;
		/*height: 231px;*/
		opacity:10;
		background-image: url(../images/thumb_hover.png);
		background-repeat: no-repeat !important;
		background-size:cover !important;
		background-position: center center !important;
		

	}
	
	.thumbhover:hover {
		width:auto !important;
		/*height: 231px;*/
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		background-image: url(../images/thumb_hover.png);
		opacity:0.7;
		
	}
	
	img.blank {
		width: 100% !important;
		height: 100% !important;
	}
	
	
	/*mobile buttons*/
	.BtnMob {
	    -moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
	    -webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
	    box-shadow:inset 0px 1px 0px 0px #f29c93;
	    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
	    background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
	    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
	    background-color:#fe1a00;
	    -moz-border-radius:6px;
	    -webkit-border-radius:6px;
	    border-radius:6px;
	    border:1px solid #d83526;
	    display:inline-block;
	    color:#ffffff;
	    font-family:arial;
	    font-size:15px;
	    font-weight:bold;
	    padding:6px 24px;
	    text-decoration:none;
	    text-shadow:1px 1px 0px #b23e35;
    }
    	
	.BtnMob:hover {
	    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
	    background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
	    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
	    background-color:#ce0100;
    }
    	
	.BtnMob:active {
	    position:relative;
	    top:1px;
    }
    
    .BtnMob a:link {
	    color: #fff !important;
    }
    
    
     div.btn_mob_container {
		 width: auto !important;
		 height: auto !important;
		 display: block !important;
		 text-align: center;
		 margin-top: 1%;
	 }
	 
	 div.playerzone {
	  height:200% !important;
	 }
	 
	 .oops {
		font-size: 18px !important;
		color: #da1616;
		letter-spacing: -1px;
		word-spacing: 4px;
		text-align: center;
		text-shadow: 0 1px 0px #000;
	}
	
	h2.oops {
		font-size: 11px !important;
	}
	
	.hide {
		display:none !important;
	}
	
		.hide_desktop {
		display:block !important;
	}
	
	
	#mainForm_mobile {
		width: 100% !important;
		min-height: 300px !important;
		background-color: #000;
		text-align: center;
		padding-top: 8%;
		padding-bottom: 11.5%;
		display: block !important;
		color:#fff;
	}
	 




}





















/* ============================= */
/* ! Layout for ipad portrait version   */
/* ============================= */

@media handheld, only screen and (max-width: 1024px) {

	body {
	
	}
	
	.logo {
		
		background-image: url(../images/logo.png);
		background-repeat: no-repeat;
		z-index: 1000;
		position: relative;
		width: auto;
		min-height: 118px;
		background-size: 90%;
		background-position: 50% 50%;
		
	}
	
	h1.tagline {
		display: none !important;
	}
	
	h1.tagline_b {
		display: none !important;
	}
	
	.nav_container {
	
		display: none;

	}
	
	
	.navbar {
		background:  url(../images/grdnt.png) repeat-x center center rgb(51, 51, 51);
		height: 46px;
		margin-top: 0px !important;
		-webkit-border-top-left-radius: 5px;
		-webkit-border-top-right-radius: 5px;
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-topright: 5px;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		
	}
	
	
	.thumbgrid {
		margin-left:8px !important;
		margin-right:8px !important;
		margin-top: 10px;
	}
	
	.thumb {
		width:auto !important;
		/*height:231px;*/
		border: 2px solid #353535;
		margin:0px 0px;
		background-repeat: no-repeat !important;
		background-size:cover !important;
		background-position: center center !important;
		
	}
	
	.thumb_banner {
		width:auto !important;
		/*height:231px;*/
		/*border: 2px solid #353535;*/
		margin:0px 0px; 
		background-image: url(../images/banner.jpg);
		background-repeat: no-repeat !important;
		background-size:cover !important;
		background-position: center center !important;

	}
	
	.thumbhover {
		width:auto !important;
		/*height: 231px;*/
		opacity:10;
		background-image: url(../images/thumb_hover.png);
		background-repeat: no-repeat !important;
		background-size:cover !important;
		background-position: center center !important;
		

	}
	
	.thumbhover:hover {
		width:auto !important;
		/*height: 231px;*/
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		background-image: url(../images/thumb_hover.png);
		opacity:0.7;
		
	}
	
	img.blank {
		width: 100% !important;
		height: 100% !important;
	}
	
	
	/*mobile buttons*/
	.BtnMob {
	    -moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
	    -webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
	    box-shadow:inset 0px 1px 0px 0px #f29c93;
	    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
	    background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
	    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
	    background-color:#fe1a00;
	    -moz-border-radius:6px;
	    -webkit-border-radius:6px;
	    border-radius:6px;
	    border:1px solid #d83526;
	    display:inline-block;
	    color:#ffffff;
	    font-family:arial;
	    font-size:15px;
	    font-weight:bold;
	    padding:6px 24px;
	    text-decoration:none;
	    text-shadow:1px 1px 0px #b23e35;
    }
    	
	.BtnMob:hover {
	    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
	    background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
	    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
	    background-color:#ce0100;
    }
    	
	.BtnMob:active {
	    position:relative;
	    top:1px;
    }
    
    .BtnMob a:link {
	    color: #fff !important;
    }
    
    
     div.btn_mob_container {
		 width: auto !important;
		 height: auto !important;
		 display: block !important;
		 text-align: center;
		 margin-top: 1%;
	 }
	 
	 div.playerzone {
	  height:200% !important;
	 }
	 
	 .oops {
		font-size: 18px !important;
		color: #da1616;
		letter-spacing: -1px;
		word-spacing: 4px;
		text-align: center;
		text-shadow: 0 1px 0px #000;
	}
	
	h2.oops {
		font-size: 11px !important;
	}
	
	.hide {
		display:none !important;
	}
	
		.hide_desktop {
		display:block !important;
	}
	
	
	#mainForm_mobile {
		width: 100% !important;
		min-height: 300px !important;
		background-color: #000;
		text-align: center;
		padding-top: 8%;
		padding-bottom: 11.5%;
		display: block !important;
		color:#fff;
	}
	 




}





















/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

/*	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}*/
	
	

}