Track2
How do I make an track2?
What is a track2? How do you make a track2? This script and codes were developed by Nugroho Indra Utomo on 17 October 2022, Monday.
Track2 Previews
Track2 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>track2</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DM Soft Gaming :.</title>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta name="description" content="Digital Marketing">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Transcosmos Indonesia">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/parts.css" rel="stylesheet" type="text/css">
<link href="css/base.css" rel="stylesheet" type="text/css">
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript">
function tab(content){ $(".activeTab").addClass('tabTitle'); $(".activeTab").removeClass('activeTab'); $("#tab"+content).removeClass(); $("#tab"+content).addClass('activeTab'); $(".tabFilling").css({"transition":"0.4s","transform":"scale(1,0)"}); setTimeout(function() { $(".tabFilling").css({"transform":"scale(0,0)"}); },200); setTimeout(function() { $(".tabFilling").css({"transition":"0.5s","transform":"scale(1,1)"}); },600);
}
</script>
</head>
<body>
<!--#wrap-->
<div id="wrap"> <!--#wrapInner--> <div id="wrapInner"> <!--#headerArea--> <div id="headerArea"> <div id="gnavArea"> <div id="navbarArea"> <div class="headerLogo"> <img src="images/img_logo_01.png" alt="logo" /> </div> <ul> <a href="#" title="home"><li>HOME</li></a> <li class="dropdown"> <a href="#" title="games">GAMES</a> <div class="hovNav"> <ul> <li> <a href="games-action.html" title="Action"> <img src="images/img_hover_01.jpg" alt="action" /> <p>Action</p> </a> </li> <li> <a href="games-rpg.html" title="RPG"> <img src="images/img_hover_02.jpg" alt="action" /> <p>RPG</p> </a> </li> <li> <a href="games-racing.html" title="Racing"> <img src="images/img_hover_03.jpg" alt="action" /> <p>Racing</p></a> </li> <li> <a href="games-simulation.html" title="Simulation"> <img src="images/img_hover_04.jpg" alt="action" /> <p>Simulation</p> </a> </li> <li> <a href="games-strategy.html" title="Strategy"> <img src="images/img_hover_05.jpg" alt="action" /> <p>Strategy</p> </a> </li> <li> <a href="games-shooter.html" title="Shooter"> <img src="images/img_hover_06.jpg" alt="action" /> <p>Shooter</p> </a> </li> <li> <a href="games-racing.html" title="Racing"> <img src="images/img_hover_03.jpg" alt="action" /> <p>Racing</p> </a> </li> <li> <a href="games-simulation.html" title="Simulation"> <img src="images/img_hover_04.jpg" alt="action" /> <p>Simulation</p> </a> </li> <li> <a href="games-strategy.html" title="Strategy"> <img src="images/img_hover_05.jpg" alt="action" /> <p>Strategy</p> </a> </li> <li> <a href="games-shooter.html" title="Shooter"> <img src="images/img_hover_06.jpg" alt="action" /> <p>Shooter</p> </a> </li> </ul> </div> </li> <a href="#" title="store"><li>STORE</li></a> <a href="#" title="support"><li>SUPPORT</li></a> </ul> <div id="formArea"> <div id="signArea"> <ul> <a href="#" title="log in"><li>Log in</li></a> <a href="#" title="sign up"><li>Sign up</li></a> </ul> </div> <div id="searchBar"> <input type="text" placeholder="Search Here..." /> <input type="submit" value="" /> </div> </div> </div> </div> <!--#mainBanner--> <div id="mainBanner"> <img src="images/img_banner.jpg" alr="main banner" /> <div id="bannerSlogan"> <div class="bannerTitle"> <p>Be Prepared For Your New Adventure</p> </div> <div class="bannerDescription"> <p>Download and Play now to feel the Goddes Power ! New move, engines, and more equipment !</p> </div> <a href="#" title="Get It Now"><div class="getItNow glow">Get It Now</div></a> </div> </div> <!--/#mainBanner--> </div> <!-- / #headerArea --> <!--#dirPathArea--> <div id="dirPathArea"></div> <!--/#dirPathArea--> <!--#mainArea --> <div id="mainArea"> <section> <!--#contentArea --> <div id="contentArea"> <div id="contentAreaBaseline"> <ul> <li> <img src="images/img_menu_01.jpg" alt="Action Game" /> <p><a href="#" title="Action Games">Action Games</a></p> </li> <li> <img src="images/img_menu_02.jpg" alt="Action Game" /> <p><a href="#" title="Sport Games">Sport Games</a></p> </li> <li> <img src="images/img_menu_03.jpg" alt="Action Game" /> <p><a href="#" title="Shooter Games">Shooter Games</a></p> </li> <li> <img src="images/img_menu_04.jpg" alt="Action Game" /> <p><a href="#" title="Role Playing Games">Role Playing Games</a></p> </li> <li> <img src="images/img_menu_05.jpg" alt="Action Game" /> <p><a href="#" title="Kids Games">Kids Games</a></p> </li> </ul> </div> <div id="contentAreaBlockA01"> <div class="tab"> <div class="tabHeader"> <ul> <li onClick="tab('release')" class="activeTab" id="tabrelease">New Release</li> <li onClick="tab('popular')" class="tabtitle" id="tabpopular">Popular</li> <li onClick="tab('upcoming')" class="tabtitle" id="tabupcoming">Upcoming</li> <li onClick="tab('special')" class="tabtitle" id="tabspecial">Special</li> </ul> </div> <div class="tabContent"> <div class="tabFilling"> <div class="image"> <img src="images/img_tab_01.jpg" alt="titan fall" /> </div> <div class="tabLeft"> <div class="title"> <p>Titan fall</p> </div> <div class="description"> <p>Feel the excitement of Mecha Wars, Download, and join the army now!</p> </div> <div class="categories"> <p>( Action adventure )</p> </div> <div class="platform"> <img src="images/img_icon_01.png" alt="windows" /> <img src="images/img_icon_02.png" alt="windows" /> <img src="images/img_icon_03.png" alt="windows" /> </div> </div> <div class="tabRight"> <div class="price">Rp 1.000.000,-</div> <a href="#" title="download"><div class="download glow">Download Now</div></a> </div> </div> <div class="tabFilling"> <div class="image"> <img src="images/img_tab_01.jpg" alt="titan fall" /> </div> <div class="tabLeft"> <div class="title"> <p>Titan fall</p> </div> <div class="description"> <p>Feel the excitement of Mecha Wars, Download, and join the army now!</p> </div> <div class="categories"> <p>( Action adventure )</p> </div> <div class="platform"> <img src="images/img_icon_01.png" alt="windows" /> <img src="images/img_icon_02.png" alt="windows" /> <img src="images/img_icon_03.png" alt="windows" /> </div> </div> <div class="tabRight"> <div class="price">Rp 1.000.000,-</div> <a href="#" title="download"><div class="download glow">Download Now</div></a> </div> </div> <div class="tabFilling"> <div class="image"> <img src="images/img_tab_01.jpg" alt="titan fall" /> </div> <div class="tabLeft"> <div class="title"> <p>Titan fall</p> </div> <div class="description"> <p>Feel the excitement of Mecha Wars, Download, and join the army now!</p> </div> <div class="categories"> <p>( Action adventure )</p> </div> <div class="platform"> <img src="images/img_icon_01.png" alt="windows" /> <img src="images/img_icon_02.png" alt="windows" /> <img src="images/img_icon_03.png" alt="windows" /> </div> </div> <div class="tabRight"> <div class="price">Rp 1.000.000,-</div> <a href="#" title="download"><div class="download glow">Download Now</div></a> </div> </div> <div class="tabFilling"> <div class="image"> <img src="images/img_tab_01.jpg" alt="titan fall" /> </div> <div class="tabLeft"> <div class="title"> <p>Titan fall</p> </div> <div class="description"> <p>Feel the excitement of Mecha Wars, Download, and join the army now!</p> </div> <div class="categories"> <p>( Action adventure )</p> </div> <div class="platform"> <img src="images/img_icon_01.png" alt="windows" /> <img src="images/img_icon_02.png" alt="windows" /> <img src="images/img_icon_03.png" alt="windows" /> </div> </div> <div class="tabRight"> <div class="price">Rp 1.000.000,-</div> <a href="#" title="download"><div class="download glow">Download Now</div></a> </div> </div> <div class="tabFilling"> <div class="image"> <img src="images/img_tab_01.jpg" alt="titan fall" /> </div> <div class="tabLeft"> <div class="title"> <p>Titan fall</p> </div> <div class="description"> <p>Feel the excitement of Mecha Wars, Download, and join the army now!</p> </div> <div class="categories"> <p>( Action adventure )</p> </div> <div class="platform"> <img src="images/img_icon_01.png" alt="windows" /> <img src="images/img_icon_02.png" alt="windows" /> <img src="images/img_icon_03.png" alt="windows" /> </div> </div> <div class="tabRight"> <div class="price">Rp 1.000.000,-</div> <a href="#" title="download"><div class="download glow">Download Now</div></a> </div> </div> <a href="#" class="viewAll">View All</a> </div> </div><div class="tab"> <div class="tabHeader"> <ul> <li class="activeTab">News Update</li> </ul> </div> <div class="tabContent"> <div class="tabNewsFilling"> <div class="newsImage"> <img src="images/img_content_02.jpg" alt="titan fall" /> </div> <div class="tabNewsLeft"> <div class="title"> <p>EVE launch a New Game</p> </div> <div class="newsDescription"> <p>New game day, The EVE Premium Edition has launched...</p> </div> </div> <div class="tabNewsRight"> <a href="#" title="readmore"><div class="readmore">[ + ]</div></a> </div> </div> <div class="tabNewsFilling"> <div class="newsImage"> <img src="images/img_content_03.jpg" alt="titan fall" /> </div> <div class="tabNewsLeft"> <div class="title"> <p>EVE launch a New Game</p> </div> <div class="newsDescription"> <p>New game day, The EVE Premium Edition has launched...</p> </div> </div> <div class="tabNewsRight"> <a href="#" title="readmore"><div class="readmore">[ + ]</div></a> </div> </div> <div class="tabNewsFilling"> <div class="newsImage"> <img src="images/img_content_04.jpg" alt="titan fall" /> </div> <div class="tabNewsLeft"> <div class="title"> <p>EVE launch a New Game</p> </div> <div class="newsDescription"> <p>New game day, The EVE Premium Edition has launched...</p> </div> </div> <div class="tabNewsRight"> <a href="#" title="readmore"><div class="readmore">[ + ]</div></a> </div> </div> <a href="#" class="viewAll">View All</a> </div> </div> </div> <div id="contentAreaBlockB01"> <div class="banner"><img src="images/img_side_01.jpg" alt="banner" /></div> <div class="banner"><img src="images/img_side_02.jpg" alt="banner" /></div> <div class="banner"><img src="images/img_side_03.jpg" alt="banner" /></div> <div class="getStarted"> <div class="title"> <p>It’s Easy to Get started</p> </div> <div class="img"> <img src="images/img_side_04.jpg" alt="get started" /> </div> <div class="img"> <img src="images/img_side_05.jpg" alt="get started" /> </div> <div class="img"> <img src="images/img_side_06.jpg" alt="get started" /> </div> <div class="clear"></div> <ul> <li>- 100% Legal , 100% Secure</li> <li>- At least 1 New Game every Week</li> <li>- Easy to Download</li> </ul> <div class="startNow"> <p>Be Playing in Minutes!</p> <input class="glow" type="submit" value="Start Now" /> </div> </div> <div class="subscribe"> <div class="image"> <img src="images/img_logo_01.png" width ="73" height="115"/> </div> <div class="subscribeHeader"> <p>The Ultimate Entertainment Platform!</p> </div> <div class="clear"></div> <p>Subscribe Our Newsletter</p> <div class="form"> <p><input type="text" placeholder="Your E-mail here" /></p> <p><input class="glow" type="submit" value="Send" /></p> </div> </div> </div> <div class="footerBanner"> <img src="images/img_content_01.jpg" alt="banner" /> </div> </div> <!-- / #contentArea --> </section> </div> <!-- / #mainArea --> <!--#footerArea--> <div id="footerArea"> <!--#footerAreaBlockA--> <div id="footerAreaBlockA"> <div class="footerMain"> <ul> <a href="#" title="contact us"><li>CONTACT US</li></a> <a href="#" title="work with us"><li>WORK WITH US</li></a> <a href="#" title="game catalogue"><li>GAME CATALOGUE</li></a> <a href="#" title="offer"><li>OFFER</li></a> <a href="#" title="account"><li>ACCOUNT</li></a> </ul> </div> </div> <!--/#footerAreaBlockA--> <!--#footerAreaBlockB--> <div id="footerAreaBlockB"> <div class="footerMain"> <div class="siteMap"> <ul> <li>DMSOFT</li> <a href="#" title="About DMSOFT"><li>About DMSOFT</li></a> <a href="#" title="Terms of Sale"><li>Terms of Sale</li></a> <a href="#" title="About Guarantee"><li>About Guarantee</li></a> <a href="#" title="Release Note"><li>Release Note</li></a> <a href="#" title="Corporate Information"><li>Corporate Information</li></a> </ul> </div> <div class="siteMap"> <ul> <li>LEGAL</li> <a href="#" title="Terms and Condition"><li>Terms and Condition</li></a> <a href="#" title="Privacy Policy"><li>Privacy Policy</li></a> <a href="#" title="Legal Notices"><li>Legal Notices</li></a> </ul> </div> <div class="siteMap"> <ul> <li>HELP</li> <a href="#" title="Help center"><li>Help center</li></a> <a href="#" title="FAQ"><li>FAQ</li></a> </ul> </div> <div id="copyright"> <img src="images/img_logo_02.png" alt="logo"/>Copyright 2014. All Right Reserved </div> </div> </div> <!--/#footerAreaBlockB--> <!--#footerAreaBlockC--> <div id="footerAreaBlockC"> <div class="footerMain"> <ul> <a href="#" title="home"><li><img src="images/img_icon_04.png" alt="facebook" />FACEBOOK</li></a> <a href="#" title="twitter"><li><img src="images/img_icon_05.png" alt="twitter" />TWITTER</li></a> <a href="#" title="google"><li><img src="images/img_icon_06.png" alt="google +" />GOOGLE +</li></a> <a href="#" title="youtube"><li><img src="images/img_icon_07.png" alt="youtube" />YOUTUBE</li></a> <a href="#" title="tumblr"><li><img src="images/img_icon_08.png" alt="tumblr" />TUMBLR</li></a> </ul> </div> </div> <!--#footerAreaBlockC--> </div> <!-- / #footerArea --> </div> <!--/#wrapInner-->
</div>
<!--/#wrap-->
</body>
</html>
</body>
</html>
Track2 - Script Codes CSS Codes
@charset "utf-8";
/*===============
contain : construct page layout like page background,
header, footer, global navigation and so on =====*/
/*----- contents ------- 1: Wrap Section 2: Header Area : gnavArea 3: Main Area : contentArea : sideArea 4: Footer Area
----------------------*/
/*
===== 1: Wrap Section ===========================*/
#wrap { margin: 0px; padding: 0px;
}
#wrap #wrapInner { width: 100%; min-height:100%; height: auto; margin: 0px auto; overflow:hidden;
}
/*
===== 2: Header Area ============================*/
#headerArea { width:100%;
}
/* #gnavArea
----------------------------*/
#headerArea #gnavArea { position:relative; width:100%; height:95px; background:url(../images/bg_header_01.png); border-top:1px solid #2b2b2b; border-bottom:1px solid #2b2b2b;
}
#headerArea #gnavArea #navbarArea{ position:relative; width:1230px; height:95px; margin: 0 auto;
}
#headerArea #gnavArea #navbarArea .headerLogo{ width:48px; height:75px; padding:10px 10px 10px 0; float:left;
}
#headerArea #gnavArea #navbarArea > ul{
}
#headerArea #gnavArea #navbarArea > ul li{ float:left; height:25px; background:green; font-size:18px; color:#ffffff; padding:40px 42px 30px 42px; background:url(../images/bg_li_01.png); background-repeat:no-repeat; background-position:right center;
}
#headerArea #gnavArea #navbarArea > ul li:hover{ background-image:url(../images/bg_header_01_on.png); background-position:center right; background-repeat:repeat;
}
#headerArea #gnavArea #navbarArea > ul li .hovNav{ display:block; position:absolute; left:0px; background:url(../images/bg_header_02.png); font-size:18px; width:100%; top:62px; -ms-transform:scale(0,1); transform:scale(0,1); transition:0s; z-index:10; padding:0 0 10px 0;
}
#headerArea #gnavArea #navbarArea > ul li:hover .hovNav{ transform:scale(1,1); transition:0.4s; margin-top:33px;
}
#headerArea #gnavArea #navbarArea > ul li.dropdown:before{ content:''; display:block; position: absolute; margin-left:75px; margin-top:7px; border-top:8px solid white; border-left:4px solid transparent; border-right:4px solid transparent;
}
#headerArea #gnavArea #navbarArea > ul li .hovNav ul{ display:block; margin-left:10px;
}
#headerArea #gnavArea #navbarArea > ul li .hovNav ul li{ width:196px; height:165px; background:none; padding:10px 23px 10px 23px;
}
#headerArea #gnavArea #navbarArea > ul li .hovNav ul li:hover{ background:#212020;
}
#headerArea #gnavArea #navbarArea > ul li .hovNav ul li p{ text-align:center; margin-top:25px;
}
#headerArea #gnavArea #formArea{ float:right; min-width:415px; margin-right:-272px;
}
#headerArea #gnavArea #formArea #signArea{ float:left;
}
#headerArea #gnavArea #formArea #signArea > ul{ display:block; float:left;
}
#headerArea #gnavArea #formArea #signArea > ul li{ float:left; height:25px; padding:40px 18px 30px 18px; font-size:14px; color:#cac8c8;
}
#headerArea #gnavArea #formArea #signArea > ul li{ background:url(../images/bg_li_02.png); background-repeat:no-repeat; background-position:right center;
}
#headerArea #gnavArea #formArea #signArea > ul a:last-child li{ background:none;
}
#headerArea #gnavArea #formArea #searchBar{ margin:32px 0 30px 0; float:left;
}
#headerArea #gnavArea #formArea #searchBar input[type=text]{ height:23px; padding:5px 45px 5px 10px; background:url(../images/bg_input_search_01.png); background-color:#FFFFFF; background-position:right center; background-repeat:no-repeat; border-radius:8px; border:none; margin-left:-2px;
}
#headerArea #gnavArea #formArea #searchBar input[type=submit]{ height:23px; padding:5px 0 10px 0; margin-bottom:-10px; width:45px; margin-left:-45px; opacity:0; filter: Alpha(opacity=0); cursor:pointer;
}
/* #mainBanner
----------------------------*/
#headerArea #mainBanner{ position:relative; width:100%; max-width:1920px; height:821px; margin:0 auto; background-color:#0c0b0b; background-position:center; background-repeat:no-repeat; z-index:1;
}
#headerArea #mainBanner #bannerSlogan{ display:block; position:absolute; width:1230px; left:18.5%; top:330px;
}
#headerArea #mainBanner #bannerSlogan .bannerTitle{ width:590px; font-size:50px; background-image:url(../images/bg_footer_001.png); background-size:292px 1px; background-repeat:no-repeat; background-position:0px 70px; color:#b2a778; line-height:75px; font-weight:bold;
}
#headerArea #mainBanner #bannerSlogan .bannerDescription{ width:590px; font-size:24px; color:#dedfe1; font-weight:bold; margin:10px 0 40px 0;
}
#headerArea #mainBanner #bannerSlogan .getItNow{ background:url(../images/bg_contents_001.png); width:120px; padding:10px 65px; color:#232323; border-radius:10px; font-weight:bold; font-size:24px;
}
/*
===== 3: Main Area ===============================*/
#mainArea { min-height:500px;
}
#mainArea section{ background:url(../images/bg_body_001.jpg) no-repeat top center;
}
/* #contentArea
----------------------------*/
#mainArea #contentArea { position:relative; width:1230px; min-height:500px; margin: 0 auto; padding-bottom:10px; background:#111111; border-top:1px solid #504f4f; border-left:1px solid #504f4f; border-right:1px solid #504f4f; overflow:hidden;
}
#mainArea #contentArea #contentAreaBaseline > ul{ display:block; position:relative; width:955px; height:330px; margin:0 auto; padding-top:33px;
}
#mainArea #contentArea #contentAreaBaseline > ul > li{ float:left; width:116px; height:238px; padding:22px 35px 15px 35px; border:1px solid #484848; border-right:none;
}
#mainArea #contentArea #contentAreaBaseline > ul > li:last-child{ border-right:1px solid #484848;
}
#mainArea #contentArea #contentAreaBaseline > ul > li p{ margin-top:15px; font-weight:16px; font-weight:bold; background:url(../images/bg_footer_001.png); background-repeat:no-repeat; background-position:0 20px; line-height:24px;
}
#mainArea #contentArea #contentAreaBlockA01{ float:left; position:relative; width:670px; margin-left:29px;
}
#mainArea #contentArea #contentAreaBlockA01 .tab{ width:100%; margin-bottom:50px;
}
#mainArea #contentArea #contentAreaBlockA01 .tab .tabHeader{ position:relative; height:39px; width:100%;
}
#mainArea #contentArea #contentAreaBlockA01 .tab .tabHeader ul{
}
#mainArea #contentArea #contentAreaBlockA01 .tab .tabHeader ul li.tabtitle{ float:left; margin-top:0px; background:#000000; width:140px; border:1px solid #434343; border-bottom:none; border-radius:10px 10px 0 0; padding:12px 0 9px 0; text-align:center; margin-right:-1px; cursor:pointer; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;
}
.activeTab{ float:left; margin-top:0px; background:#000000; width:140px; border:1px solid #434343; border-bottom:none; border-radius:10px 10px 0 0; text-align:center; margin-right:-1px; margin-top:-4px; border-top:2px solid #ffffff; padding:16px 0 12px 0; cursor:pointer; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;
}
.tabTitle{ float:left; margin-top:0px; background:#000000; width:140px; border:1px solid #434343; border-bottom:none; border-radius:10px 10px 0 0; padding:12px 0 9px 0; text-align:center; margin-right:-1px; cursor:pointer; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;
}
#mainArea #contentArea #contentAreaBlockA01 .tab .tabContent{ border:1px solid #4f4f4f; padding:18px 22px 18px 18px; box-shadow:0px 2px 1px #474747 inset;
}
#mainArea #contentArea #contentAreaBlockA01 .tab .tabContent a.viewAll{ display:block; position:relative; font-weight:bold; width:120px; background:#e1e1e1; padding:10px 22px 10px 18px; color:#232323; font-size:14px; text-align:center; margin:20px auto 15px auto;
}
#mainArea #contentArea #contentAreaBlockA01 .tab .tabContent .tabFilling{ min-height:188px; border-top:1px solid #828282; margin:0 0 0 0; padding:35px 0 0 0;
}
#mainArea #contentArea #contentAreaBlockA01 .tab .tabContent .tabFilling:first-child{ border-top:none; padding:0;
}
#mainArea #contentArea #contentAreaBlockA01 .tab .tabContent .tabFilling .image{ width:106px; height:150px; float:left;
}
#mainArea #contentArea #contentAreaBlockA01 .tab .tabContent .tabFilling .tabLeft{ position:relative; width:285px; height:150px; margin-left:15px; float:left;
}
#mainArea #contentArea #contentAreaBlockA01 .tab .tabContent .tabFilling .tabLeft .title{ color:#5d9516; font-size:16px; padding-bottom:5px; margin:0 0 5px 0; background-image:url(../images/bg_footer_001.png); background-repeat:no-repeat; background-position:bottom left;
}
#mainArea #contentArea #contentAreaBlockA01 .tab .tabContent .tabFilling .tabLeft .description{ font-size:14px;
}
#mainArea #contentArea #contentAreaBlockA01 .tab .tabContent .tabFilling .tabLeft .categories{ font-size:12px; font-style:italic; margin-top:12px;
}
#mainArea #contentArea #contentAreaBlockA01 .tab .tabContent .tabFilling .tabLeft .platform{ position:absolute; bottom:5px;
}
#mainArea #contentArea #contentAreaBlockA01 .tab .tabContent .tabFilling .tabLeft .platform img{ margin:0 15px 0 0;
}
#mainArea #contentArea #contentAreaBlockA01 .tab .tabContent .tabFilling .tabRight{ float:left; width:210px; text-align:center;
}
#mainArea #contentArea #contentAreaBlockA01 .tab .tabContent .tabFilling .tabRight .price{ font-size:18px; font-weight:bold; margin:30px 0 25px 0;
}
#mainArea #contentArea #contentAreaBlockA01 .tab .tabContent .tabFilling .tabRight .download{ background:url(../images/bg_contents_001.png); padding:10px 25px; color:#232323; border-radius:10px; font-weight:bold;
}
#mainArea #contentArea #contentAreaBlockA01 .tab .tabContent .tabNewsFilling{ min-height:40px; padding:0 0 20px 0; margin:20px 0 0 0; border-top:1px solid #828282; padding:20px 0 0 0;
}
#mainArea #contentArea #contentAreaBlockA01 .tab .tabContent .tabNewsFilling:first-child{ border-top:0px; padding:0px;
}
#mainArea #contentArea #contentAreaBlockA01 .tab .tabContent .tabNewsFilling .newsImage{ float:left; width:75px; margin:0 30px 0 0;
}
#mainArea #contentArea #contentAreaBlockA01 .tab .tabContent .tabNewsFilling .tabNewsLeft{ float:left; width:455px;
}
#mainArea #contentArea #contentAreaBlockA01 .tab .tabContent .tabNewsFilling .tabNewsLeft .title{ color:#5d9516; font-size:16px; padding-bottom:2px; margin:0 0 4px 0; background-image:url(../images/bg_footer_001.png); background-repeat:no-repeat; background-position:bottom left; background-size:75px 1px;
}
#mainArea #contentArea #contentAreaBlockA01 .tab .tabContent .tabNewsFilling .tabNewsLeft .description{ font-size:14px;
}
#mainArea #contentArea #contentAreaBlockA01 .tab .tabContent .tabNewsFilling .tabNewsRight{ float:right; margin-top:10px; font-size:28px;
}
#mainArea #contentArea #contentAreaBlockA01 .tab .tabContent .tabNewsFilling .tabNewsRight a{ color:#7dae2e;
}
#mainArea #contentArea #contentAreaBlockB01{ float:right; margin-right:100px; padding-top:40px;
}
#mainArea #contentArea #contentAreaBlockB01 .banner{ width:323px; margin-bottom:35px; text-align:center;
}
#mainArea #contentArea #contentAreaBlockB01 .getStarted{ border:1px solid #5d5d5d; background:#2f2f2f; padding:15px 0 25px 10px; width:313px;
}
#mainArea #contentArea #contentAreaBlockB01 .getStarted .title{ width:185px; margin:0 auto 35px auto;
}
#mainArea #contentArea #contentAreaBlockB01 .getStarted .title p{ color:#5d9516; font-size:18px; border-bottom:1px solid #5d9516; padding-bottom:5px;
}
#mainArea #contentArea #contentAreaBlockB01 .getStarted .img{ float:left; margin-right:10px;
}
#mainArea #contentArea #contentAreaBlockB01 .getStarted .img:last-child{ margin-right:0px;
}
#mainArea #contentArea #contentAreaBlockB01 .getStarted ul{ display:block; margin-top:30px;
}
#mainArea #contentArea #contentAreaBlockB01 .getStarted ul li{ margin-bottom:5px;
}
#mainArea #contentArea #contentAreaBlockB01 .getStarted .startNow{ background:#111111; padding:8px; width:91%; border-radius:8px; border:1px solid #5d5d5d; margin:6px 0 0 0;
}
#mainArea #contentArea #contentAreaBlockB01 .getStarted .startNow p{ display:block; position:relative; width:160px; float:left; margin:5px 0 0 5px;
}
#mainArea #contentArea #contentAreaBlockB01 .getStarted .startNow input{ background:url(../images/bg_contents_001.png); padding:5px 20px; color:#232323; border:none; border-radius:10px; font-weight:bold; cursor:pointer;
}
#mainArea #contentArea #contentAreaBlockB01 .subscribe{ border:1px solid #5d5d5d; background:#2f2f2f; padding:15px 0 25px 10px; margin-top:90px; width:313px;
}
#mainArea #contentArea #contentAreaBlockB01 .subscribe .image{ float:left; width:73px; height:115px; margin:0 40px 0 30px;
}
#mainArea #contentArea #contentAreaBlockB01 .subscribe > p{ text-align:center; font-size:18px; color:#7dae2e; margin:25px 0 0 0;
}
#mainArea #contentArea #contentAreaBlockB01 .subscribe .form{
}
#mainArea #contentArea #contentAreaBlockB01 .subscribe .form input[type=text]{ border:none; padding:12px 0 12px 10px; border-radius:8px; width:205px;
}
#mainArea #contentArea #contentAreaBlockB01 .subscribe .form input[type=submit]{ background:url(../images/bg_contents_001.png); padding:8px 35px; margin:10px 0 11px 0; color:#232323; border:none; border-radius:10px; font-weight:bold; cursor:pointer;
}
#mainArea #contentArea #contentAreaBlockB01 .subscribe .form p{ text-align:center; margin:15px 0 0 0;
}
#mainArea #contentArea #contentAreaBlockB01 .subscribe .subscribeHeader{
}
#mainArea #contentArea #contentAreaBlockB01 .subscribe .subscribeHeader p{ font-size:18px; font-weight:bold; line-height:27px; margin:20px 0 0 0;
}
#mainArea #contentArea .footerBanner{ text-align:center; margin:0 0 20px 0;
} /* GAMES PAGE*/
#mainArea #contentArea > .columnBlockG01{ float:right; width:847px; min-height:400px; background:#0c0b0b; border:1px solid #504f4f; margin:51px 26px 92px 0; padding:0 0 0 25px;
}
#mainArea #contentArea > .columnBlockG01 .columnBlockA01 { width:auto; height:35px; margin:31px 0 41px 0;
}
#mainArea #contentArea > .columnBlockG01 .columnBlockA01 li{ display:block; float:left; width:148px; height:auto; border:1px solid #b9ae7a; margin:0 19px 0 0; padding:7px 0 6px 5px ; background-color:#fff; -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:5px;
}
#mainArea #contentArea > .columnBlockG01 .columnBlockA01 li:nth-child(3){ width:auto; height:auto; border:1px solid #cdcdcd; margin:0 142px 0 0; padding:0; overflow:hidden;
}
#mainArea #contentArea > .columnBlockG01 .columnBlockA01 li:nth-child(3) a { display:block; float:left; width:33px; height:33px; background-color:#fff;
}
#mainArea #contentArea > .columnBlockG01 .columnBlockA01 li:nth-child(3) a:hover { background-color:#c8c192;
}
#mainArea #contentArea > .columnBlockG01 .columnBlockA01 li:nth-child(3) a:nth-child(1) { background-image:url(../images/contents_ico_001.png); background-position:0 33px;
}
#mainArea #contentArea > .columnBlockG01 .columnBlockA01 li:nth-child(3) a:nth-child(2) { background-image:url(../images/contents_ico_001.png); background-position:66px 33px; border-left:1px solid #cdcdcd; border-right:1px solid #cdcdcd;
}
#mainArea #contentArea > .columnBlockG01 .columnBlockA01 li:nth-child(3) a:nth-child(3) { background-image:url(../images/contents_ico_001.png); background-position:33px 33px;
}
#mainArea #contentArea > .columnBlockG01 .columnBlockA01 li:nth-child(3) a:nth-child(1):hover { background-position:0 -1px;
}
#mainArea #contentArea > .columnBlockG01 .columnBlockA01 li:nth-child(3) a:nth-child(2):hover { background-position:66px -1px;
}
#mainArea #contentArea > .columnBlockG01 .columnBlockA01 li:nth-child(3) a:nth-child(3):hover { background-position:33px -1px;
}
#mainArea #contentArea > .columnBlockG01 .columnBlockA01 li:nth-child(4){ width:70px; height:auto; border:none; background-color:transparent; color:#fff; font-size:16px; font-weight:bold; margin:0 0 0 0;
}
#mainArea #contentArea > .columnBlockG01 .columnBlockA01 li:nth-child(5){ margin:0 0 0 0;
}
#mainArea #contentArea .columnBlockG01 .columnBlockA01 select { width:138px; height:20px; border:none; color:#b9ae7a;
}
#mainArea #contentArea .columnBlockG01 .columnBlockB01 {
}
#mainArea #contentArea .columnBlockG01 .columnBlockB01 ul {
}
#mainArea #contentArea .columnBlockG01 .columnBlockB01 ul li{ position:relative; float:left; width:146px; height:251px; background-color:#e9e9e9; border:1px solid #e1e1e1; margin:0 20px 43px 0; -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:5px; overflow:hidden;
}
#mainArea #contentArea .columnBlockG01 .columnBlockB01 ul li:nth-child(5),
#mainArea #contentArea .columnBlockG01 .columnBlockB01 ul li:nth-child(11),
#mainArea #contentArea .columnBlockG01 .columnBlockB01 ul li:nth-child(17){ margin:0 0 43px 0;
}
#mainArea #contentArea .columnBlockG01 .columnBlockB01 ul li:nth-child(6n){ float:left; width:805px; height:1px; background-color:#807f7f; border:none; margin:0 0 43px 7px; clear:both;
}
#mainArea #contentArea .columnBlockG01 .columnBlockB01 ul li h3.captionBlockB01{ display:block; float:left; width:82px; max-height:30px; font-size:12px; font-weight:bold; color:#000; margin:3px 0 0 0; padding:2px 4px 0 4px; overflow:hidden;
}
#mainArea #contentArea .columnBlockG01 .columnBlockB01 ul li p.captionBlockB02{ display:block; float:left; width:52px; height:18px; font-size:14px; font-weight:bold; text-align:center; color:#000; margin:3px 0 0 0; border:1px solid #bfbebe; -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:5px;
}
#mainArea #contentArea .columnBlockG01 .columnBlockB01 ul li p.captionBlockB03{ display:block; float:left; width:132px; height:auto; font-size:10px; font-style:italic; color:#555555; margin:-2px 0 0 0; padding:0 4px 0 4px;
}
#mainArea #contentArea .columnBlockG01 .columnBlockB01 ul li p.captionBlockB04{ display:block; position:absolute; width:65px; height:16px; bottom:5px; left:3px; color:#555555; margin:3px 0 0 5px;
}
#mainArea #contentArea .columnBlockG01 .columnBlockB01 ul li a.linkBlockB01{ display:block; position:absolute; width:74px; height:20px; bottom:4px; right:3px; font-size:10px; font-weight:bold; color:#000; text-align:center; background-image:url(../images/contents_btn_001.png); padding:4px 0 0 0;
}
#mainArea #contentArea .columnBlockG01 .columnBlockC01 { clear:both; text-align:right; margin:0 0 35px 0; padding:0 30px 0 0;
}
#mainArea #contentArea .columnBlockG01 .columnBlockC01 a { color:#fff;
}
#mainArea #contentArea .columnBlockG01 .columnBlockC01 a:hover { text-decoration:underline; color:#598f15;
}
/* .columnBlockJ01
-------------------------------*/
#mainArea #contentArea .columnBlockJ01 { width:371px; height:auto; float:left; margin:140px 50px 0 230px;
}
#mainArea #contentArea .columnBlockJ01 img { margin:0 0 30px 118px;
}
#mainArea #contentArea .columnBlockJ01 .form { margin:20px 0 0 0;
}
#mainArea #contentArea .columnBlockJ01 .form label { color:#b3a778;
}
#mainArea #contentArea .columnBlockJ01 .form input[type="text"] { width:350px; height:35px; margin:13px 0 20px 0; padding:0 0 4px 10px; border-radius:5px; border:none;
}
#mainArea #contentArea .columnBlockJ01 .form input[type="submit"] { font-size:14px; border:none; cursor:pointer; display:block; width:100px; height:35px; background-color:#e1e1e1; margin:23px 0 0 0;
}
#mainArea #contentArea .columnBlockJ01 .form .checkButton { margin:20px 0 0 0;
}
#mainArea #contentArea .columnBlockJ01 .form .checkButton u { margin:0 0 0 140px; color:#558815;
}
#mainArea #contentArea .columnBlockJ01 .form input[type="checkbox"] { margin:0 12px 0 0;
}
#mainArea #contentArea .columnBlockJ01 .form .checkButton u { margin:0 0 0 140px; color:#558815;
}
#mainArea #contentArea .columnBlockJ01 .form .login { width:189px; height:24px; display:block; text-align:center; border-radius:5px; padding: 10px 0 10px 0; color:#000; font-size:16px; font-weight:bold; margin:33px 0 274px 74px; background-image:url(../images/main_btn_001.png); background-repeat:no-repeat;
}
/* .columnBlockJ02
---------------------------------*/
#mainArea #contentArea .columnBlockJ02 { width:361px; height:319px; float:left; margin:208px 50px 0 55px; padding:43px 0 0 0; background-image:url(../images/main_bg_001.png); background-repeat:no-repeat;
}
#mainArea #contentArea .columnBlockJ02 .signup { width:133px; height:34px; display:block; text-align:center; border-radius:5px; margin:25px auto; color:#000; font-size:16px; font-weight:bold; padding:6px; background-image:url(../images/main_btn_002.png); background-repeat:no-repeat;
}
/* .columnBlockK01
-------------------------------*/
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 { height:auto; width:325px; /*background-color:red;*/ margin:50px auto;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 img { margin:0 0 35px 100px;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form { width:auto; height:auto; /*background-color:blue;*/
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form form label { width:250px; height:auto; margin:0 0 0 0; display:inline-block; color:#b3a778;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form input[type="text"] { width: 290px; height:35px; margin:8px 0 31px 0; border-radius:5px; border:none; padding-left:14px
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form .select1 { float:left; margin:6px 4px 0 0; width:97px; height:30px; background-color:#ffffff; padding:10px 0 0 0; border-radius:5px;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form .select1 select { border:none; color:#8f8f8f;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form .select1 label { margin:0 51px 0 0;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form .select2 { float:left; margin:6px 4px 0 0; width:97px; height:30px; background-color:#ffffff; padding:10px 0 0 0; border-radius:5px;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form .select2 select { border:none; color:#8f8f8f;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form .select3 { float:left; margin:6px 20px 0 0; width:97px; height:30px; background-color:#ffffff; padding:10px 0 0 0; border-radius:5px;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form .select3 select { border:none; width:83px; color:#8f8f8f;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form .checkbox { margin:43px 0 0 0px;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form .checkbox input { margin:0px 22px 9px 0px; float:left; width:19px; height:19px;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form .checkbox label { margin:0 0 0 0; font-size:12px; color:#b2a778; float:right; width:280px; height:32px; line-height:21px;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form .checkbox2{ margin:27px 0 0 0;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form .checkbox input { margin:0px 22px 9px 0px; float:left; width:19px; height:19px;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form .checkbox2 label { margin:0 0 0 0; font-size:12px; color:#b2a778; float:right; width:280px; height:51px; line-height:21px;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .createAccount { background-image:url(../images/main_btn_003.png); background-repeat:no-repeat; display:block; text-align:center; width:190px; height:42px; color:#232323; font-weight:bold; padding:12px 0 0 0; margin:38px 0 341px 48px;
}
/* .columnBlockL01
-------------------------------*/
#mainArea #contentArea .columnBlockL01 { text-align:center;
}
#mainArea #contentArea .columnBlockL02 p:last-child { margin:0 0 195px 0
}
/* #sideArea
----------------------------*/
#mainArea #contentArea #sideArea { float:left; width:272px; height:auto; margin:51px 0 0 29px;
}
#mainArea #contentArea #sideArea .columnBlockG01{ float:right; width:270px; height:auto; margin: 0 auto 27px auto; background:#0c0b0b; border:1px solid #504f4f; overflow:hidden;
}
#mainArea #contentArea #sideArea .columnBlockG01 h4{ width:auto; height:32px; color:#5d9516; font-size:16px; padding:15px 0 0 25px;
}
#mainArea #contentArea #sideArea .columnBlockG01 form{ width:246px; height:auto; background-color:#2f2f2f; padding:12px 0 14px 24px;
}
#mainArea #contentArea #sideArea .columnBlockG01 form label:nth-child(1),
#mainArea #contentArea #sideArea .columnBlockG01 form label:nth-child(3){ display:block; width:200px; height:auto; font-size:12px; font-weight:bold; padding:0 0 4px 0;
}
#mainArea #contentArea #sideArea .columnBlockG01 form label:nth-child(6){ font-size:12px;
}
#mainArea #contentArea #sideArea .columnBlockG01 form input[type="text"],
#mainArea #contentArea #sideArea .columnBlockG01 form input[type="password"]{ display:block; width:190px; height:29px; border:1px solid #504f4f; margin:0 0 16px 0; padding:0 10px 0 10px ; -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:5px;
}
#mainArea #contentArea #sideArea .columnBlockG01 form input[type="submit"]{ width:88px; height:29px; background-image:url(../images/side_btn_001.png); border:none; background-color:transparent; margin:0 0 0 18px; cursor:pointer;
}
#mainArea #contentArea #sideArea .columnBlockG01 ul{
}
#mainArea #contentArea #sideArea .columnBlockG01 ul li{ display:block; width:230px; height:45px; background-color:#cdcdcd; border-top:1px solid #e2e2e2; border-bottom:1px solid #bdbdbd; padding:0px 15px 0 25px;
}
#mainArea #contentArea #sideArea .columnBlockG01 ul li:hover{ background-color:#b3a778;
}
#mainArea #contentArea #sideArea .columnBlockG01 ul li:first-child{ border-top:none; border-bottom:1px solid #bdbdbd;
}
#mainArea #contentArea #sideArea .columnBlockG01 ul li:last-child{ border-top:1px solid #e2e2e2; border-bottom:none;
}
#mainArea #contentArea #sideArea .columnBlockG01 ul li a{ display:block; width:190px; height:30px; float:left; color:#000; padding:15px 0 0 0;
}
#mainArea #contentArea #sideArea .columnBlockG01 ul li span{ display:block; width:40px; height:30px; float:right; text-align:center; font-weight:bold; color:#000; padding:15px 0 0 0;
}
/*
===== 4: Footer Area =============================*/
#footerArea {
}
#footerArea .footerMain{ width:1230px; margin:0 auto;
}
/* #footerAreaBlockA
----------------------------*/
#footerArea #footerAreaBlockA { position:relative; background:#0c0b0b; border-top:1px solid #807f7f; height:102px;
}
#footerArea #footerAreaBlockA .footerMain > ul a li{ float:left; font-size:16px; padding:0 100px 0 0; margin:45px 0 0 0;
}
#footerArea #footerAreaBlockA .footerMain > ul a li:hover{ color:#5D9516; text-decoration:underline;
}
#footerArea #footerAreaBlockA .footerMain > ul a:last-child li{ float:right ; font-size:16px; padding:0 20px 0 0; margin:45px 5px 0 0; background:url(../images/ico_footer_001.png); background-position:right; background-repeat:no-repeat;
}
#footerArea #footerAreaBlockA .footerMain > ul a:last-child li:hover{ color:#D9D9D9; text-decoration:none;
}
/* #footerAreaBlockB
----------------------------*/
#footerArea #footerAreaBlockB { position:relative; background:#1d1c1c; border-top:1px solid #807f7f; height:235px;
}
#footerArea #footerAreaBlockB .footerMain .siteMap{ width:205px; float:left;
}
#footerArea #footerAreaBlockB .footerMain .siteMap > ul a li{ font-size:16px; height:20px; padding:5px 0 0 0;
}
#footerArea #footerAreaBlockB .footerMain .siteMap > ul a li:hover{ color:#5D9516; text-decoration:underline;
}
#footerArea #footerAreaBlockB .footerMain .siteMap > ul > li:first-child{ height:20px; background:url(../images/bg_footer_001.png); background-repeat:no-repeat; background-position:left bottom; padding:0 0 12px 0; margin:42px 0 0 0;
}
#footerArea #footerAreaBlockB .footerMain #copyright{ border-left:1px solid #858484; float:left; margin:37px 0 0 0; padding:0 0 0 70px; font-size:12px;
}
#footerArea #footerAreaBlockB .footerMain #copyright img{ margin-right:30px;
}
/* #footerAreaBlockC
----------------------------*/
#footerArea #footerAreaBlockC { position:relative; background:#0c0b0b; height:88px;
}
#footerArea #footerAreaBlockC .footerMain > ul a li{ float:left; width:138px; margin:28px 52px 0 0; padding:8px 10px 6px 10px; background:#868585;
}
#footerArea #footerAreaBlockC .footerMain > ul a:hover li{ background:#c3c2c2;
}
#footerArea #footerAreaBlockC .footerMain > ul a li img{ margin:0 10px 0 2px;
}
.clear { clear: both;
}
@charset "utf-8";
/*===============
contain : such as strong text, margin set, basic list & font style and so on =====*/
body { margin: 0px; padding: 0px; font-family: Arial, sans-serif; font-size:14px; color:#FFFFFF; background:#0c0b0b;
}
a:link, a:visited, a:active{ color:#d9d9d9; text-decoration:none;
}
.radiusBlockG01{ -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:5px;
}
.glow:hover{ box-shadow: 0 0 5px #FFFFFF; -webkit-border-radius:12px; -moz-border-radius:12px; -ms-border-radius:12px; -o-border-radius:12px; border-radius:12px; transition:0.2s;
}
.glowBlack:hover{ box-shadow: 0 0 5px #000000; -webkit-border-radius:12px; -moz-border-radius:12px; -ms-border-radius:12px; -o-border-radius:12px; border-radius:12px;
}
/*
===== #dirPathArea ===============================*/
#dirPathArea{ width:100%; height:auto; overflow:hidden;
}
#dirPathArea ul { width:1230px; height:40px; display:block; margin:20px auto 0 auto;
}
#dirPathArea ul li{ display:block; float:left; margin:0 5px 0 0; padding:0 0 0 18px; position:relative;
}
#dirPathArea ul li a{ color:#d9d9d9;
}
#dirPathArea ul li:before{ content: ''; display: block; position: absolute; top:4px; left:5px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #cdcdcd;
}
#dirPathArea ul li:first-child{ padding:0;
}
#dirPathArea ul li:first-child:before{ display: none;
}
#dirPathArea ul li:last-child:before{ content: ''; display: block; position: absolute; top:4px; left:5px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #5d9516;
}
#dirPathArea ul li:last-child a{ color:#5d9516;
}
/*============================== contentBlockJ02 ==============================*/
#wrap #wrapInner #mainArea #contentArea .columnBlockJ02 h2 { color:#558815; font-size:22px; font-weight:bold; line-height:30px; padding:0 0 0 44px;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockJ02 p{ display:block; width:294px; height:69px; border:1px solid #313131; border-radius:5px; padding:10px; letter-spacing: 1px; margin:23px 0 0 22px;
}
/*============================== columnBlockK01 ==============================*/
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 h1{ font-size:24px; font-family:; /*border-bottom:1px solid red;*/ padding:20px 0 50px 10px;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 h2 { font-size:24px; color:#5d9516; padding:0 0 20px 0;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 p { line-height:22px; padding:0 0 0 0;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockK01 .form p { color:#b3a778; margin:0 0 0 0;
}
/*============================== columnBlockL01 ==============================*/
#wrap #wrapInner #mainArea #contentArea .columnBlockL01 h1 { padding:0 0 10px 0; margin:0 0 0 0;
}
/*============================== columnBlockL02 ==============================*/
#mainArea #contentArea .columnBlockL02 h1 { font-size:30px; color:#b2a778; padding:47px 0 0 30px;
}
#mainArea #contentArea .columnBlockL02 p { line-height:21px; padding:27px 35px 0 30px;
}
/*=======DETAIL================*/
#wrap #wrapInner #mainArea #contentArea .contentAreaBlock { float: left;
}
#wrap #wrapInner #mainArea #contentArea .contentAreaBlock .contentAreaBlockA { width: 775px; height: 450px; margin: 50px 0px 0px 30px;
}
#wrap #wrapInner #mainArea #contentArea .contentAreaBlock .contentAreaBorder { width: 473px; margin: 20px 0px 0px 30px; padding: 10px 0px 10px 20px; border: 1px solid #494949; border-radius: 3px;
}
#wrap #wrapInner #mainArea #contentArea .contentAreaBlock .contentAreaBorder p { color: #555555;
}
#wrap #wrapInner #mainArea #contentArea .contentAreaBlock .contentAreaBorder p a { color: #b2a778;
}
#wrap #wrapInner #mainArea #contentArea .contentAreaBlock .contentAreaTitle01 p { margin: 38px 0px 0px 30px; font-size: 24px; color: #b2a778;
}
#wrap #wrapInner #mainArea #contentArea .contentAreaBlock .borderA { width: 775px; height: auto; margin: 20px 0px 0px 30px;
}
#wrap #wrapInner #mainArea #contentArea .contentAreaBlock .borderA ul li { display: block; width: 775px; height: 27px; background-color: #888888; margin: 0 0 2px 0;
}
#wrap #wrapInner #mainArea #contentArea .contentAreaBlock .borderA ul li:hover { background-color: #5d9516;
}
#wrap #wrapInner #mainArea #contentArea .contentAreaBlock .borderA a { display: block; float: left; width: 620px; height: 22px; color: #232323; padding: 5px 0 0 20px;
}
#wrap #wrapInner #mainArea #contentArea .contentAreaBlock .borderA span { display: block; float: right; width: 111px; height: 22px; color: #fff; text-align: right; padding: 5px 24px 0 0;
}
#wrap #wrapInner #mainArea #contentArea .contentAreaBlock .borderB { width: 280px; height: 65px; background-color: #0c0b0b; border: 1px solid #494949; border-radius: 3px; margin: 15px 0px 0px 525px;
}
#wrap #wrapInner #mainArea #contentArea .contentAreaBlock .borderB p { display: block; float: right; width: 135px; text-align: right; font-size: 18px; color: #fbfbfb; margin: 20px 6px 0 0;
}
#wrap #wrapInner #mainArea #contentArea .contentAreaBlock .borderB a { display: block; float: left; width: 100px; height: 25px; background-color: #f9de6f; border: 1px solid #494949; font-size: 16px; font-weight: bold; text-align: center; color: #232323; border-radius: 8px; margin: 16px 0px 0px 27px; padding: 5px 0 0 0;
}
#wrap #wrapInner #mainArea #contentArea .contentAreaBlock .contentAreaTitle02 p { margin: 5px 0px 0px 30px; font-size: 24px; color: #b2a778;
}
#wrap #wrapInner #mainArea #contentArea .contentAreaBlock .contentAreaBlockB h3, #wrap #wrapInner #mainArea #contentArea .contentAreaBlock .contentAreaTitle03 h3 { margin: 24px 0px 0px 30px; padding: 0px 0px 10px 0px; color: #5d9516; font-size: 14px; background-image:url(../images/contents_line_001.png); background-repeat:no-repeat; background-position:left bottom;
}
#wrap #wrapInner #mainArea #contentArea .contentAreaBlock .contentAreaBlockB p { width: 775px; margin: 10px 0px 0px 30px; color: #d9d9d9; font-size: 14px;
}
#wrap #wrapInner #mainArea #contentArea .contentAreaBlock .contentAreaTitle03 img { margin: 18px 0px 0px 30px;
}
#wrap #wrapInner #mainArea #contentArea .contentAreaBlock .contentAreaTitle03 ul { width: 775px; margin: 42px 0px 0px 30px;
}
#wrap #wrapInner #mainArea #contentArea .contentAreaBlock .contentAreaTitle03 ul li { list-style-type: square; margin: 0px 0px 25px 20px;
}
#wrap #wrapInner #mainArea #contentArea .contentAreaBlock .contentAreaTitle03 p { width: 775px; margin: 0px 0px 100px 50px; color:#555555;
}
#wrap #wrapInner #mainArea #contentArea .contentAreaBlock .contentAreaTitle03 p span { color:#b2a778;
}
#wrap #wrapInner #mainArea #contentArea #sideAreaA { float: right;
}
#wrap #wrapInner #mainArea #contentArea #sideAreaA .sideAreaBlockA img { margin: 50px 30px 0px 0px;
}
#wrap #wrapInner #mainArea #contentArea #sideAreaA .sideAreaBlockA p { margin: 35px 30px 0px 0px; color: #cdcdcd; font-size: 12px; line-height: 21px;
}
#wrap #wrapInner #mainArea #contentArea #sideAreaA .sideAreaBlockB { margin: 25px 0px 0px 0px;
}
#wrap #wrapInner #mainArea #contentArea #sideAreaA .sideAreaBlockB p { margin: 0px 0px 0px 0px; font-size: 12px; line-height: 21px; color: #555555;
}
#wrap #wrapInner #mainArea #contentArea #sideAreaA .sideAreaBlockB p span { font-size: 12px; line-height: 21px; color: #5d9516;
}
#wrap #wrapInner #mainArea #contentArea #sideAreaA .sideAreaBlockC { margin: 20px 0px 0px 0px; overflow:hidden;
}
#wrap #wrapInner #mainArea #contentArea #sideAreaA .sideAreaBlockC p { color:#b2a778; margin: 0px 0px 0px 0px;
}
#wrap #wrapInner #mainArea #contentArea #sideAreaA .sideAreaBlockC ul li{ display:block; float:left; color:#eeeeee; font-size:12px; background-color:#4a4a4a; margin: 11px 6px 0px 0px; padding:11px
}
#wrap #wrapInner #mainArea #contentArea #sideAreaA .sideAreaBlockD { width:369px; height:auto; border:1px solid #484848; background-color:#0c0b0b; margin: 20px 0px 0px 0px; -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:5px; overflow:hidden;
}
#wrap #wrapInner #mainArea #contentArea #sideAreaA .sideAreaBlockD img { border-bottom:1px solid #fff;
}
#wrap #wrapInner #mainArea #contentArea #sideAreaA .sideAreaBlockD h3 { width:369px; height:44px; font-size:24px; text-align:center; color:#b2a778; background-color:#111111; padding:12px 0 0 0;
}
#wrap #wrapInner #mainArea #contentArea #sideAreaA .sideAreaBlockD ul { display:block; width:365px; height:auto; font-size:24px; color:#b2a778; border-top:1px solid #080707; margin:0 0 0 2px;
}
#wrap #wrapInner #mainArea #contentArea #sideAreaA .sideAreaBlockD ul li { display:block; position:relative; width:365px; height:270px; font-size:24px; color:#b2a778; border-top:1px solid #111010; border-bottom:1px solid #080707;
}
#wrap #wrapInner #mainArea #contentArea #sideAreaA .sideAreaBlockD ul li img{ float:left; margin:44px 0 0 22px;
}
#wrap #wrapInner #mainArea #contentArea #sideAreaA .sideAreaBlockD ul li h4{ display:block; width:220px; height:25px; background-image:url(../images/side_bg_002.gif); background-repeat:no-repeat; background-position:left bottom; font-size:16px; color:#5d9516; float:left; margin:44px 0 0 25px; padding:0 0 2px 0;
}
#wrap #wrapInner #mainArea #contentArea #sideAreaA .sideAreaBlockD ul li h5{ display:block; position:absolute; width:95px; height:20px; top:155px; left:22px; font-size:12px; font-weight:bold; color:#5d9516; text-align:center; background-color:#111111; border:1px solid #484848; -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:5px; padding:5px 0 0 0;
}
#wrap #wrapInner #mainArea #contentArea #sideAreaA .sideAreaBlockD ul li p{ display:block; width:185px; height:auto; font-size:12px; color:#555555; line-height:21px; float:left; margin:10px 0 40px 25px;
}
#wrap #wrapInner #mainArea #contentArea #sideAreaA .sideAreaBlockD ul li p span{ color:#b2a778; font-weight:bold;
}
/*=======END OF DETAIL================*/
/*=======SUPPORT================*/
#wrap #wrapInner #mainArea #contentArea .contentAreaHeadingBlockA01 { margin:30px 35px 0px 35px; }
#wrap #wrapInner #mainArea #contentArea .contentAreaHeadingBlockA01 p { font-size:24px; color:#b2a778; }
#wrap #wrapInner #mainArea #contentArea .contentAreaHeadingBlockA01 ul li a{ text-decoration:underline; color:#487313; }
#wrap #wrapInner #mainArea #contentArea .contentAreaHeadingBlockA01 .contentAreaHeadingBlockB01{ margin:20px 0px 0px 0px; border:1px solid #333232; background-color:#0c0b0b; }
#wrap #wrapInner #mainArea #contentArea .contentAreaHeadingBlockA01 .contentAreaHeadingBlockB01 p{ font-size:30px; margin:25px 10px 30px 10px; text-align:center; color:#f2f2f2; }
#wrap #wrapInner #mainArea #contentArea .contentAreaHeadingBlockA01 .contentAreaHeadingBlockB01 #contentAreaForm { text-align:center; }
#wrap #wrapInner #mainArea #contentArea .contentAreaHeadingBlockA01 .contentAreaHeadingBlockB01 #searchSupport{ background-color:#232323; width:770px; font-style:italic; border:1px solid #5d9516; color:#6c6c6c; border-radius:5px; padding:10px 0px 10px 20px; margin:0px 0px 30px 0px; }
#wrap #wrapInner #mainArea #contentArea .contentAreaHeadingBlockA01 .contentAreaHeadingBlockB01 input[type=submit]{ width:25px; height:25px; background:url(../images/contents_ico_005.png)transparent; background-repeat:no-repeat; border:none; }
#wrap #wrapInner #mainArea #contentArea .contentAreaHeadingBlockA01 .contentAreaBlock01{ width:365px; height: 240px; float:left; margin:50px 30px 0px 0px; border:1px solid #333232; }
#wrap #wrapInner #mainArea #contentArea .contentAreaHeadingBlockA01 .contentAreaBlock01:nth-child(3n){ margin-right:0px; }
#wrap #wrapInner #mainArea #contentArea .contentAreaHeadingBlockA01 .contentAreaBlockC01{ width:1170px; margin: 0px 0px 100px 0px; overflow:hidden; }
#wrap #wrapInner #mainArea #contentArea .contentAreaHeadingBlockA01 .contentAreaBlock01 p{ margin:0px 0px 15px 60px; padding:15px 0px 0px 15px; font-size:18px; }
#wrap #wrapInner #mainArea #contentArea .contentAreaHeadingBlockA01 .contentAreaBlock01 ul{ color:#373737; list-style-type:square; }
#wrap #wrapInner #mainArea #contentArea .contentAreaHeadingBlockA01 .contentAreaBlock01 ul li { margin: 10px 0px 10px 30px; }
#wrap #wrapInner #mainArea #contentArea .contentAreaHeadingBlockA01 .contentAreaBlock01 .contentAreaBlockA01{ background-color:#000; background-image:url(../images/contents_ico_001.png); background-repeat:no-repeat; background-position:10px 12px; margin:0px 0px 10px 0px; border-bottom:1px solid #333232; }
#wrap #wrapInner #mainArea #contentArea .contentAreaHeadingBlockA01 .contentAreaBlock01 .contentAreaBlockA01 p,
#wrap #wrapInner #mainArea #contentArea .contentAreaHeadingBlockA01 .contentAreaBlock01 .contentAreaBlockA02 p,
#wrap #wrapInner #mainArea #contentArea .contentAreaHeadingBlockA01 .contentAreaBlock01 .contentAreaBlockA03 p,
#wrap #wrapInner #mainArea #contentArea .contentAreaHeadingBlockA01 .contentAreaBlock01 .contentAreaBlockA04 p,
#wrap #wrapInner #mainArea #contentArea .contentAreaHeadingBlockA01 .contentAreaBlock01 .contentAreaBlockA05 p{ color:#fff; }
#wrap #wrapInner #mainArea #contentArea .contentAreaHeadingBlockA01 .contentAreaBlock01 .contentAreaBlockA02{ background-color:#000; background-image:url(../images/contents_ico_002.png); background-repeat:no-repeat; background-position:10px 12px; margin:0px 0px 10px 0px; border-bottom:1px solid #333232; }
#wrap #wrapInner #mainArea #contentArea .contentAreaHeadingBlockA01 .contentAreaBlock01 .contentAreaBlockA03{ background-color:#000; background-image:url(../images/contents_ico_006.png); background-repeat:no-repeat; background-position:10px 12px; margin:0px 0px 10px 0px; border-bottom:1px solid #333232; }
#wrap #wrapInner #mainArea #contentArea .contentAreaHeadingBlockA01 .contentAreaBlock01 .contentAreaBlockA04{ background-color:#000; background-image:url(../images/contents_ico_003.png); background-repeat:no-repeat; background-position:10px 12px; margin:0px 0px 10px 0px; border-bottom:1px solid #333232; }
#wrap #wrapInner #mainArea #contentArea .contentAreaHeadingBlockA01 .contentAreaBlock01 .contentAreaBlockA05{ background-color:#000; background-image:url(../images/contents_ico_004.png); background-repeat:no-repeat; background-position:10px 12px; margin:0px 0px 10px 0px; border-bottom:1px solid #333232; }
/*=======END OF SUPPORT================*/
| Developer | Nugroho Indra Utomo |
| Username | indra_z85 |
| Uploaded | October 17, 2022 |
| Rating | 3 |
| Size | 10,828 Kb |
| Views | 24,288 |
Do you need developer help for Track2?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Nugroho Indra Utomo (indra_z85) Script Codes
| Name | Size |
| Fancy box effect | 19,982 Kb |
| Slider hover | 2,000 Kb |
| Parents | 3,676 Kb |
| Task | 5,383 Kb |
| A Pen by nugroho indra utomo | 7,925 Kb |
| Javascript only | 2,016 Kb |
| Jquery effect | 2,139 Kb |
| Javascript2 | 1,997 Kb |
| Js form | 1,753 Kb |
| Template | 2,323 Kb |
Create amazing marketing copy with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| UI Challenge - Budget Selector | AgentRR007 | 3,547 Kb |
| Flip test | Madhes | 1,635 Kb |
| Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 Kb |
| Countdown Timer | Massiebn | 3,001 Kb |
| Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
| A Pen by tugce | Ecgutcnkr | 4,197 Kb |
| Break Out | AzazelN28 | 12,431 Kb |
| Vue Transition | Chenming142 | 4,561 Kb |
| Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
| SlideDown FixedMenu | Mp_graphic | 5,602 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!