@charset "UTF-8";

@font-face {
    font-family: 'hvd_comic_serif_proregular';
    src: url('../fonts/HVD_Comic_Serif_Pro-webfont.eot');
    src: url('../fonts/HVD_Comic_Serif_Pro-webfont.svg#hvd_comic_serif_proregular') format('svg'),
		 url('../fonts/HVD_Comic_Serif_Pro-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/HVD_Comic_Serif_Pro-webfont.woff') format('woff'),
		 url('../fonts/HVD_Comic_Serif_Pro-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OblikBoldRegular';
    src: url('../fonts/Oblik_Bold-webfont.eot');
    src: url('../fonts/Oblik_Bold-webfont.svg#OblikBoldRegular') format('svg'),
		 url('../fonts/Oblik_Bold-webfont.woff') format('woff'),
		 url('../fonts/Oblik_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Oblik_Bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


body { 	
	margin: 0;
	background-color:#140514;}

/* Overflow (hidden): Make sure no scrollbar is needed to scroll to the extra space on the right side */
#maincontainer { 
	width: 100%; 
	margin: 0 auto;
	padding: 0px;
	overflow: hidden;
	border: 0; }
	
.center {
	position: relative;
	margin: 0 auto;
	padding: 0;
	border: 0; }
	
.sub_left {
	position: absolute;
	text-align:right;
	left: -500px; }

.sub_right {
	position: absolute;
	text-align: left;
	right: -500px; }

.bg_center {
	position: relative;
	margin: 0 auto;
	padding: 0;
	border: 0;
	background-image:url(../images/woodbg_middle.jpg);
	background-repeat:repeat-y; }

.bg_left {
	position: absolute;
	text-align:right;
	left: -500px;
	background-position: right top;
	background-image:url(../images/woodbg_side.jpg); }

.bg_right {
	position: absolute;
	text-align: left;
	right: -500px;  
	background-image:url(../images/woodbg_side.jpg); }
	
.header_left {
	position: absolute;
	left: -500px;
	background-position: right top;
	background-image: url(../images/tinyguardians_header_left.png);
}

.header_right {
	position: absolute;
	right: -500px;  
	background-image:url(../images/tinyguardians_header_right.png); }
	
.headerFrame_left {
	position: absolute;
	top: 591px;
	background-position: right;
	background-image:url(../images/topframe_loop.png); }

.headerFrame_right {
	position: absolute;
	top: 591px; 
	background-position: left;
	background-image:url(../images/topframe_loop.png); }
	
.footer_left {
	position: absolute;
	left: -500px;
	background-position: right top;
	background-image: url(../images/footer_tile.png);
}

.footer_right {
	position: absolute;
	right: -500px;  
	background-image:url(../images/footer_tile.png); }
	
.footerBar_left {
	position: absolute;
	top: 0px;
	background-position: right;
	background-image:url(../images/footer_bar.png); }

.footerBar_right {
	position: absolute;
	top: 0px; 
	background-position: left;
	background-image:url(../images/footer_bar.png); }

.link_text {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
	color:#F90; }

.link_text2 {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#F90; }

#bg_id { width: 960px; height: 100%;}
#bg_left { width: 500px; height: 100%; }
#bg_right { width: 500px; height: 100%; }

#headerLeft { width: 500px; height: 640px; }
#headerRight { width: 500px; height: 640px; }
#headerFrameLoopLeft { width: 100%; height: 49px; }
#headerFrameLoopRight { width: 100%; height: 49px; }

#footerLeft { width: 500px; height: 200px; }
#footerRight { width: 500px; height: 200px; }
#footerBarLoopLeft { width: 100%; height: 9px; }
#footerBarLoopRight { width: 100%; height: 9px; }

#general_left { width: 500px; height: 100%; }
#general_right { width: 500px; height: 100%; }

#header { width: 960px; }
#header .btnAppStore { position: absolute; width: 121px; height: 36px; left:20px; top: 5px; border: none;  }
#header .btnGooglePlay { position: absolute; width: 121px; height: 38px; left:20px; top: 46px; border: none; }
#header .btnAmazon { position: absolute; width: 121px; height: 42px; left:20px; top: 89px; border: none; }
#header .btnSteam { position: absolute; width: 121px; height: 42px; left:20px; top: 136px; border: none; }

#header .btnFacebook { position: absolute; width: 39px; height: 42px; right:120px; top: 0px; border: none; }
#header .btnTwitter { position: absolute; width: 39px; height: 42px; right:70px; top: 0px; border: none; }
#header .btnGplus { position: absolute; width: 39px; height: 42px; right:20px; top: 0px; border: none;}

#header .image { width: 960px; height: 640px; background-image:url(../images/tinyguardians_header_center.png); }
#header .frameLeft { position: absolute; width: 74px; height: 52px; left:0px; bottom: 0px; }
#header .frameRight { position: absolute; width: 74px; height: 52px; right:0px; bottom: 0px; }

#tagline { width: 960px; height: 270px;}x
#tagline .comingSoon { position: absolute; width: 858px; height: 52px; top: -27px; text-align:center;}
#tagline .playNow { position: absolute; width: 858px; height: 59px; top: -27px; text-align:center;}
#tagline .textBanner { position: absolute; width:858px; height:249px; left: 51px; top: -12px; text-align:center; background-image:url(../images/banner_top.png); }
#tagline .title { position: absolute; width:858px; height:40px; top: 50px; text-align:center; font-family: 'hvd_comic_serif_proregular'; font-size: 26px; color:#E9A938; text-shadow: 4px 4px #624560; }
#tagline .text1 { position: absolute; width:858px; height:60px; top: 95px; text-align:center; font-family: 'hvd_comic_serif_proregular'; font-size: 20px; color:#A391BB; }
#tagline .text2 { position: absolute; width:858px; height: 50px; top: 160px; text-align:center; font-family: 'hvd_comic_serif_proregular'; font-size: 14px; color:#453756;  }

#dllinks { width:960px; height:150px; top: 20px; }
#dllinks .links { position: absolute; width: 960px; }
#dllinks .appstore { position: absolute; border: none; top: 0px; left: 49px; }
#dllinks .googleplay { position: absolute; border: none; top: 0px; left: 295px; }
#dllinks .amazon { position: absolute; border: none; top: 0px; right: 275px; }
#dllinks .steam { position: absolute; border: none; top: 0px; right: 49px; }

#story { width:960px; height:350px; }
#story .bg { position: absolute; left: 120px; width:715px; height:321px;  background-image:url(../images/content_bg1.png); }
#story .title { position: absolute; top: 10px; width: 715px; text-align: center; height: 24px; }
#story .storyText { position: absolute; top: 100px; width: 715px; font-family:'OblikBoldRegular'; font-size: 17px; color: #805E6B; text-align:center; line-height: 21px;}
#story .deco1 { position: absolute; left: -120px; top: 0px; width: 271px; height:267px; }
#story .deco2 { position: absolute; right: -120px; top: 65px; width: 204px; height:271px; }

#intro { width: 960px; height: 210px;}
#intro .content1 { position: absolute; width:700px; left: 130px; top: 0px; font-size: 18px; color:#663300; text-align:center; }
#intro .btnios { position:absolute; width: 121px; left: 250px; top: 170px; text-align:right; }
#intro .btnandroid { position:absolute; width: 121px; right: 250px; top: 170px; text-align: left; }

#suscribe { width: 960px; height: 430px;}
#suscribe .form { position: absolute; width:543px; height: 325px; left: 205px; top: 60px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color:#663300; text-align:center; background-image:url(../images/newsletter_bg.png); }
#suscribe .bookFloat { position: absolute; width:108px; height: 140px; left: 396px; top: 42px; }
#suscribe .formTitle { position: absolute; left: 60px; top: 30px; font-family:'hvd_comic_serif_proregular' ; font-size: 19px; color:#C04848; text-align:left; }
#suscribe .formText1 { position: absolute; left: 60px; top: 55px; font-family:'hvd_comic_serif_proregular' ; font-size: 14px; color:#522440; text-align:left; }
#suscribe .formText2 { position: absolute; left: 60px; top: 80px; width: 320px; height:40px; font-family:'OblikBoldRegular' ; font-size: 12px; color:#B8A49F; text-align:left; }
#suscribe .formText3 { position: absolute; left: 80px; top: 127px; width: 300px; height:15px; font-family:'hvd_comic_serif_proregular' ; font-size: 15px; color:#E5DDCA; text-align:left; }
#suscribe .formSignUp { position: absolute;	left: 95px;	top: 160px;	}
#suscribe .formSignUpStyle { font-family: 'hvd_comic_serif_proregular';	font-size: 13px; color: #522440; text-align: left; width: 200px; background-color:transparent; border:none; }
#suscribe .formButton { position: absolute;	left: 300px; top: 148px; width: 45px; height:46px; background-image:url(../images/newsletter_btn.png); background-color:transparent; border: none; }

#suscribe .gifSummoner { position: absolute; left: 250px; top: 215px; width: 70px; height: 50px; }
#suscribe .gifAssassin { position: absolute; left: 465px; top: 255px; width: 48px; height: 39px; }
#suscribe .gifDancer { position: absolute; left: 330px; top: 240px; width: 51px; height: 45px; }
#suscribe .gifHunter { position: absolute; left: 35px; top: 240px; width: 53px; height: 45px; }
#suscribe .gifKnight { position: absolute; left: 190px; top: 220px; width: 49px; height: 56px; }
#suscribe .gifMagician { position: absolute; left: 100px; top: 220px; width: 90px; height: 85px; }
#suscribe .gifRogue { position: absolute; left: 390px; top: 210px; width: 58px; height: 70px; }

#video { width: 960px; height: 530px;}
#video .videoContainer { position: absolute; width: 960px; height:450px; text-align:center; top: 20px; }
#video .videoTitle { position: absolute; width: 960px; height:18px; top:-5px; text-align:center; }
#video .videoFrameTop { position: absolute; width: 960px; height:18px; top:0px; text-align:center; }
#video .videoFrameLeft { position: absolute; width: 23px; height:449px; top:18px; left: 60px; }
#video .videoFrameRight { position: absolute; width: 21px; height:449px; top:18px; right: 62px; }
#video .videoFrameBottom { position: absolute; width: 960px; height:25px; top:467px; text-align:center;  }

#features { width: 960px; height: 475px;}
#features .featuresBG { position: absolute; width: 960px; height:435px; text-align:center; }
#features .featuresSlider { position: absolute;	width: 760px; left: 100px; top: 90px; }
#features .featuresHeader { font-size: 24px; text-align:left; color: #C04848; font-family: 'hvd_comic_serif_proregular'; }
#features .featuresDesc { font-size: 16px; text-align:left; vertical-align:text-top; color: #805E6B; font-family: 'OblikBoldRegular'; }

#reviews { width: 960px; height: 320px;}
#reviews .reviewsBG { position: absolute; width: 960px; height:303px; text-align:center; }
#reviews .reviewsSlider { position: absolute; width: 760px; left: 100px; top: 100px; }
#reviews .reviewsHeader { font-size: 24px; text-align:left; color: #C04848; font-family: 'hvd_comic_serif_proregular'; }
#reviews .reviewsDesc { font-size: 16px; text-align:left; vertical-align:text-top; color: #805E6B; font-family: 'OblikBoldRegular'; }

#media { width: 960px; height: 700px;}
#media .mediaBG { position: absolute; width: 960px; height: 303px; text-align: center; }
#media .mediaSlider { position: absolute; width: 760px; left: 100px; top: 100px; }
#media .deco3 { position: absolute; left: 0px; top: 50px; }
#media .deco4 { position: absolute; right: 30px; top: 200px; }
#media .mediaScreenBG { position: absolute; width: 960px; top: 85px; text-align:center; }
#media .mediakit_btn { position: absolute; width: 960px; top: 590px; text-align:center; }
#media .mediakit_btnPippop { position: absolute; width: 70px; left: 365px; top:605px;}
#media .mediakit_text { position: absolute; width:960px; top: 698px; font-family:'OblikBoldRegular'; text-align:center; color: #4F3725; font-size: 12px; }

#footer { width: 960px; height: 200px; background-image:url(../images/footer_tile.png); }
#footer .bar { top:0px; height: 9px; background-image:url(../images/footer_bar.png);}
#footer .logo { position:absolute; width: 285px; height:165px; left: 2px; top: -3px; border: none; }
#footer .btn1 { position:absolute; width: 78px; right: 180px; top: -35px; border: none;  }
#footer .btn2 { position:absolute; width: 78px; right: 100px; top: -35px; border: none;  }
#footer .btn3 { position:absolute; width: 78px; right: 20px; top: -35px; border: none; }
#footer .text1 { position:absolute; width: 380px; left: 280px; top: 50px; font-family:'OblikBoldRegular'; text-align:left; color: #8F7EA8; font-size: 12px;  }
#footer .text2 { font-family:'OblikBoldRegular'; font-size: 12px; color:#C2B3D9;}