/* ------------------------ GENERAL ------------------------ */ body { margin:0; padding:0; } #wrapper { width: 1280px; margin: 0 auto; } ul, li { margin: 0; } /* ------------------------ GENERAL END ------------------------ */ /* ------------------------ SOCIALS ------------------------ */ .social { position:fixed; right:0; top:227px; border-radius:10px 0 0 10px; box-shadow:0 0 7px #056391; width:74px; height:278px; background:#52aad5; z-index:9999; padding:10px 0 0 0; } .twitter, .facebook, .youtube, .forum, .steam { float:left; width:49px; height:49px; margin:2px 13px; border-radius:50%; background:url(../images/icons.png) no-repeat; -webkit-transition:all 0.4s ease-out;/* Safari 3.2+, Chrome */ -moz-transition:all 0.4s ease-out;/* Firefox 4-15 */ -o-transition:all 0.4s ease-out;/* Opera 10.5-12.00 */ transition: all 0.4s ease-out;/* Firefox 16+, Opera 12.50+ */ } .facebook { background-position:0 -112px; } .youtube { background-position:0 -224px; } .forum { background-position:0 -333px; } .steam { background-position:0 -442px; } .twitter:hover { background:url(../images/icons.png) no-repeat; background-position:0 -57px !important; } .facebook:hover { background-position:0 -169px !important; background:url(../images/icons.png) no-repeat; } .youtube:hover { background-position:0 -279px !important; background:url(../images/icons.png) no-repeat; } .forum:hover { background-position:0 -386px !important; background:url(../images/icons.png) no-repeat; } .steam:hover { background-position:0 -497px !important; background:url(../images/icons.png) no-repeat; } .social_bottom { display: none; } /* ------------------------ SOCIALS END ------------------------ */ /* ------------------------ HEADER ------------------------ */ .buyframe { position: absolute; right: -10px; top: -100px; } .buytext { position: absolute; right: 20px; top: -82px; width: 200px; border: white solid 0px; text-align: center; font-family: 'lostsearegular'; font-size: 38px; color: #FFF; text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } .buytext a { text-decoration: none; color: #FFF; } .buytext a:hover { text-decoration: underline; } .limitedrun { border: black solid 2px; background-color: #fff; position: absolute; left: 20px; top: 270px; text-align: center; padding: 10px; font-family: 'berlin_sans_fbregular'; line-height: 1.2em; } .limitedrun a { color: #000; } .header { float:left; width:1280px; background:url(../images/header_bg_720p.jpg) no-repeat center; min-height:720px; } .header_menu { float: left; width: 100%; background: url(../images/menu_bg.png) repeat; margin: 100px 0 0 0; padding: 0; border-top: 5px solid #4c7209; height: 77px; } .header_menuin { max-width:1230px; width:100%; margin:0 auto; position:relative; } .logo { float:left; width:auto; position:absolute; left:0; top:-90px; width:29%; } .logo img { width:100%; } .trailer { position:absolute; left:404px; top:180px; } .trailerbuttonred { position: absolute; left: 152px; top: 106px; display:none; } .trailer:hover .trailerbuttonred { display:block; } .trailerbuttonblack { position: absolute; left: 152px; top: 106px; display:block; } .trailer:hover .trailerbuttonblack { display:none; } /* ------------------------ HEADER END ------------------------ */ /* ------------------------ FOOTER ------------------------ */ .footer { float:left; min-height:100px; background:#ffffff; padding: 50px 0; } .footer img { margin: 0 28px 30px; } .footer span { float: left; width: 100%; font-size: 10px; text-align: center; font-family: arial; padding:10px 0 0; background-size:20px; } /* ------------------------ FOOTER END ------------------------ */ /* ------------------------ TOP MENU ------------------------ */ .menu { float: right; width: 70%; font-family: 'lostsearegular'; } .menu a { text-decoration:none; color: #2c2c2c; } .menu ul { float: left; width: 100%; padding:0; display:block; } .menu ul li { font-family: 'lostsearegular'; list-style:none; float: left; width: auto; position:relative; } .conts { max-width:1230px; margin:auto; } .menu ul li a { float: left; width: auto; color: #ffffff; font-size: 30px; padding: 20px 38px 0; text-shadow:2px 5px 0px #023b59; } .menu ul li a:hover { background:url(../images/menu_hover.png) no-repeat; padding:20px 38px 89px; } .menu ul li.active a { background:url(../images/menu_hover.png) no-repeat; padding-bottom:89px; } span.tog { display:none; } /* ------------------------ TOP MENU END ------------------------ */ /* ------------------------ MAIN CONTENT FRAME ------------------------ */ .mainbody { float: left; width: 100%; height: auto; position: relative; background:url(../images/web_fill.jpg) repeat; } .mainbodyinner { padding: 20px 40px 20px 40px; } .mainbody p { font-family: 'berlin_sans_fbregular'; font-size: 20px; color: #fff; line-height: 27px; text-align: justify; margin: 0 0 25px 0px; } .mainbody ul, li { font-family: 'berlin_sans_fbregular'; font-size: 20px; color: #fff; } .mainbody h2 { font-family: 'lostsearegular'; color: #000; font-size: 25px; } .mainbody a { color: #000; text-decoration: none; } .mainbody a:hover { color: #000; text-decoration: underline; } .cor-top { position: absolute; top: -72px; left: 0; z-index: 999; width: 1280px; } .cor-btm { position: relative; top: 0; left: 0; z-index: 999; width: 1280px; } .headerbar { position: relative; top: 0px; margin: 0 0 20px 0px; z-index: 999; } /* ------------------------ MAIN CONTENT FRAME END ------------------------ */ /* ------------------------ PAGE: HOME ------------------------ */ .welcomehero { float:right; margin-top: 90px; margin-left: 20px; margin-right: 0px; margin-bottom: 34px; } .welcome_images img { margin-right:5px; border-style:solid; border-color: #000; border-width: 2px; } /* ------------------------ PAGE: HOME END ------------------------ */ /* ------------------------ PAGE: ABOUT ------------------------ */ .about_treehouse { float:right; margin-top: 20px; margin-left: 20px; margin-right: 0px; margin-bottom: 0px; } .about_portal { float:left; margin-top: 20px; margin-left: 0px; margin-right: 20px; margin-bottom: 60px; } /* ------------------------ PAGE: ABOUT END ------------------------ */ /* ------------------------ PAGE: TEAM ------------------------ */ .team_row { float: left; width: auto; margin: 20px 20px 30px; padding: 0; } .team_lt { float: left; width: 15%; position:relative; } .team_lt img { width:100%; float:left; } .team_lt .team_img { position: absolute; top: 19%; left: 14%; width: 73%; } .team_rt { float: left; width: 60%; margin-left: 30px; } .team_rt p { margin: 0px 0 25px 0px; } .team_hdn { float: left; width: 100%; border-bottom: 3px solid #4c7209; padding: 0 0 5px; margin-bottom: 15px; } .team_hdn .title_img { float: left; margin: 0 0 5px; } .team_hdn .twitter_img { float: right; margin: 15px 0 0; } .team_more { float:left; margin: 40px 0 0 25px; font-family: 'berlin_sans_fbregular'; font-size: 20px; color: #fff; line-height: 27px; text-align: justify; } .shipwreck { float: right; position: relative; top: -65px; right: 20px; margin-bottom: -65px; } /* ------------------------ PAGE: TEAM END ------------------------ */ /* ------------------------ PAGE: MEDIA ------------------------ */ .screenshots { width: auto; } .screenshots p { margin-left: 15px; } .screenshots ul { float: left; width: 100%; margin: 0; padding: 0; } .screenshots ul li { float: left; margin: 6px 6px; position: relative; list-style:none; } .frame { position: relative; z-index: 1; } .screenshots ul li .media1 { position: absolute; top: 30px; left: 19px; width: 245px; height: 138px; z-index: 0; } .screenshots ul li .media1 img { width:100%; float:left; height:100%; position:absolute; } /* ------------------------ PAGE: MEDIA END ------------------------ */ /* ------------------------ PAGE: BLOG ------------------------ */ .blog1 { float: left; width: 100%; margin: 0 0 0 0; padding: 0; background:url(../images/under_line3.jpg) repeat-x; background-position:bottom; } .blog_img { position:relative; float: left; width: 260px; margin: 0 30px 0px 0; z-index: 0; } .blog2 { position: absolute; top: 30px; left: 36px; height: 195px; width: 185px; } .blog1.blog12 { margin: 50px 0px; } .blog1.blog12 .blog_img { float: right; width: 260px; margin: 0 0 10px 30px; position: relative; } .blog_txt font { float: right; font-size: 22px; font-family: 'berlin_sans_fbregular'; padding: 8px 0; color: #000; } .blog_txt a { color:#000; } .blog_txt span a:hover { text-decoration: none; } .blog_img .blog2 img { position: relative; top: 0px; left: 0px; z-index: -1; width: 190px; height: 190px; } .blog_img img { width: 100%; } .blog_txt span { color: #000; margin: 0 0 20px; font-size: 35px; float: left; font-family:'lostsearegular'; background:url(../images/under_line3.jpg) repeat-x; background-position:bottom; padding: 0 0 0px; width: 75.5%; } .comment { width: auto; padding: 14px; background-color: #fff; border: solid black 2px; } /* ------------------------ PAGE: BLOG END ------------------------ */ /* ------------------------ PAGE: DOWNLOAD ------------------------ */ .downloadtable { border: 1px black solid; border-collapse: collapse; font-family: 'berlin_sans_fbregular'; min-width: 50%; } .downloadtable td, th, tr { border: black solid 1px; padding: 10px; color: #fff; } .downloadtable th { background-color: #287a00; font-size: 20px; } .downloadtable td { vertical-align: center; } .downloadtable tr:nth-child(odd) { background-color: #287a00; } .downloadtable tr:nth-child(even) { background-color: #569138; } .downloadtable td a { color: #fff; text-decoration: underline; } .downloadtable td a:hover { color: #000; text-decoration: underline; } .castaway img { float: right; margin-right: 20px; } /* ------------------------ PAGE: DOWNLOAD END ------------------------ */ /* ------------------------ NEWSLETTER ------------------------ */ .newsletterbox { font-family: 'berlin_sans_fbregular'; font-size: 20px; color: #fff; line-height: 22px; } .newsletterbox fieldset { margin: 0; border: black solid 1px; } .newsletterresponse { margin-top: 5px; } /* ------------------------ NEWSLETTER END ------------------------ */ /* ------------------------ BACK TO TOP LINK ------------------------ */ #toTop { position: fixed; bottom: 20px; right: 20px; display: none; z-index: 9999; } #toTop:hover { cursor: pointer; } /* ------------------------ BACK TO TOP LINK END ------------------------ */