Offer Templates: Difference between revisions

From BakaBT Wiki
Jump to navigation Jump to search
(Removed broken IE special case.)
 
(8 intermediate revisions by one other user not shown)
Line 69: Line 69:
{|class="wikitable" border="1" cellspacing="0" style="font-size: 90%;"
{|class="wikitable" border="1" cellspacing="0" style="font-size: 90%;"
|-
|-
! Simplest Tabled Anime Template !! Twin Alpha Box Description !! Simple book with JS pages
! Simplest Tabled Anime Template !! Infobox Anime Template !! Twin Alpha Box Description !! Simple book with JS pages
|-
|-
| ||[[File:Twin_Alpha_Box_Description.jpg|thumb|center|alt=miasmacloud|by miasmacloud]]||[[File:Book_of_gosick.png|thumb|center|alt=book|by remix85]]
| ||[[File:Infobox_Anime_Template.jpg|thumb|center|alt=kureshii|by kureshii]]||[[File:Twin_Alpha_Box_Description.jpg|thumb|center|alt=miasmacloud|by miasmacloud]]||[[File:Book_of_gosick.png|thumb|center|alt=book|by remix85]]
|-
|-
|[[Offer_Templates#Simplest_Tabled_Anime_Template|Choose]]||[http://bakabt.me/template.php?id=Twin%20Alpha%20Box%20Anime%20Template Choose]||[[Offer_Templates#Simple_book_with_JS_pages|Choose]]
|[[Offer_Templates#Simplest_Tabled_Anime_Template|Choose]]||[[Offer_Templates#Infobox_Anime_Template|Choose]]||[[Offer_Templates#Twin_Alpha_Box_Description|Choose]]||[[Offer_Templates#Simple_book_with_JS_pages|Choose]]
|-
|-
|}
|}
Line 99: Line 99:
[http://bakabt.me/template.php?id=Simple%20BBCode%20Anime%20Template Click here] to use
[http://bakabt.me/template.php?id=Simple%20BBCode%20Anime%20Template Click here] to use


===Generic Anime Template - Light Themed===
===Simplest Tabled Anime Template===
----
----
Submitted by: deysmacro
<pre>
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<html>
<head>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1></h1>
<h3><a href="ANN URL" target="_blank">ANN</a> / <a href="AniDB URL" target="_blank">AniDB</a></h3>
    <table cellspacing="4">
    <tr valign="top">
        <td>
            <h2>Series Information</h2>
                <ul>
                    <table cellspacing="3">
                        <tr><td style="font-size:15px">Year</td><td>[Insert]</td></tr>
                        <tr><td style="font-size:15px">Episodes</td><td>[Insert]</td></tr>
                        <tr><td style="font-size:15px">Categories</td><td>[Insert]</td></tr>
                        <tr><td style="font-size:15px">Director</td><td>[Insert]</td></tr>
                        <tr><td style="font-size:15px">Production</td><td>[Insert]</td></tr>
                    </table>
                </ul>
                <h2>File Information</h2>
                <ul>
                    <table cellspacing="3">
                        <tr><td style="font-size:15px">Ripper</td><td>[Insert]</td></tr>
                        <tr><td style="font-size:15px">Video</td><td>[Insert]</td></tr>
                        <tr><td style="font-size:15px">Audio</td><td>[Insert]</td></tr>
                        <tr><td style="font-size:15px">Subtitle</td><td>[Insert]</td></tr>
                        <tr><td style="font-size:15px">Comments</td><td>[Insert]</td></tr>
                    </table>
</ul>
                <h2>Related Torrents</h2>
                <ul>
                    [Insert]
                </ul>
                <h2>Summary/Description</h2>
                <ul>
    [Insert]
</ul>
            </td>
            <td><img src="[Insert SUMMARY IMAGE URL]" alt="Image" /></td>
        </tr>
    </table>
    <h2>Screenshots</h2>
</body>
</html>
[screenshot]
[IMG]http://i50.tinypic.com/1znly1j.png[/IMG]
[IMG]http://i46.tinypic.com/m0mc3.png[/IMG]
[IMG]http://i46.tinypic.com/1z2ln4h.png[/IMG]
[/screenshot]
</pre>
Back to [[Offer_Templates#Templates_preview|top]].
===Infobox Anime Template===
----
Submitted by: kureshii
<pre>
<!--User must provide own background image for use. The infoboxes are positioned using CSS float. There is thus limited flexibility with regards to the layout.-->
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <style type="text/css">
  body { font-family: sans-serif; font-size: 14px; margin: 0px; }
a { text-decoration: none; }
a:link { color: #b62400; }
a:visited { color: #444444; }
.main {
  background: url([Insert]) no-repeat;
  border-style: solid 2px;
  width: 940px;
  height: 720px;
}
.links {
  font-size: 150%;
  font-weight: bold;
  font-variant: small-caps;
  text-align: right;
  float: right;
}
.titlediv { font-size: 24px bold; float: center; }
.infobox {
  background: #FFFFFF; /*Change infobox colour if desired. Transclucent white color creates lightening of background image effect*/
  filter: alpha(opacity=60); /*for IE*/
  opacity: 0.50;
  width: 220px; /*Adjust infobox width as required*/
  float: right;
  clear: right;
  padding: 2px 10px;
  margin: 10px 20px;
}
.header {
  text-align: center;
  font-size: 150%;
  font-weight: bold;
  padding-top: 5px;
}
  </style>
</head>
<body>
  <div class="main">
    <div class="titlediv">[Insert]</div>
    <div class="infobox">
      <div class="header">SERIES INFO</div>
      <div class="info">
        <b>[Insert]</b> ([Insert])<br>
        [Insert]<br>
        Directed by <b>[Insert]</b><br>
        Produced by <b>[Insert]</b>
      </div>
    </div>
    <div class="links">
      <a href="[Insert]" target="_blank">Anime News Network</a><br>
      <a href="[Insert]" target="_blank">Anime-Planet</a><br>
      <a href="[Insert]">AniDB</a>
    </div>
    <div class="infobox">
      <div class="header">FILE INFO</div>
      <div class="info">
        Encoded and translated by <b><a href="[Insert]" target="_blank">[Insert]</a></b><br>
        [Insert]<br>
        [Insert]<br>
        [Insert]
      </div>
    </div>
    <div class="infobox" style="line-height: normal;">
      <div class="header">DESCRIPTION</div>
      <div class="info">[Insert]</div>
    </div>
  </div>
</body>
</html>
[screenshot]
<!--duplicate the line below to add more screenshots-->
[img][Insert][/img]
[img][Insert][/img]
[img][Insert][/img]
[img][Insert][/img]
[img][Insert][/img]
[/screenshot]
</pre>


<style type="text/css">
[[Media:Infobox Anime Template.jpg|Sample]]
/* --------------------------------------------------------------------------------------------------------------------------------------------| some note |-----
*
* Please take note. The indentation should look correctly using Firefox.
*
* Although I have taken all possible steps that it should look correct, using IE will somehow still make it look a little bit weird.
* When that happen, please use Firefox.
*
* Thank you for your understanding.
*
* --------------------------------------------------------------------------------------------------------------------------------------------| general info |-----
*
* Main user link : http://bakabt.me/user/816453/deysmacro.html
* Forum user link : http://forums.bakabt.me/index.php?action=profile;u=816453
*
* I welcome all of you people to use this template at your convenience.
* Do contact me via PM or email if you had anything to say.
*
* Email : deysmacro[at]gmail[dot]com
*
* I also can help you guys with the template.
* I will help whenever I can.
*
* Originally Customized By : deysmacro
* Re-Customized By : YOUR NICK HERE
*
* Template Version : v2.0.9.1 generic - light themed
* Template Last Update On : July 20th, 2009 @ 23:28pm GMT+8
*
* Please leave the credit intact if you plan to use this template.
* Your cooperation is highly appreciated. Thank you.
*
* --------------------------------------------------------------------------------------------------------------------------------------------------------| SN |-----
* SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2009 | 07 | 19 | 0720 | d-ait | v2091 | 17
* ---------------------------------------------------------------------------------------------------------------------------------| Info you should know |-----
*
* Quick Reminder:
* If you found any syntax with * siding with the syntax, it is targeted for IE only.
*
*
* Example:
* Assume "width" is the syntax...
*
* body {
* width: 100px; <-- major browser support
*
* *width: 110px; <-- targeted for IE only
* }
*
*
* This is done as to make it IE compatible. It is not required if IE displays the generated page correctly.
* Please take note of this when you are editing.
*
* ---------------------------------------------------------------------------------------------------------------------------------------------------| end |----- */
/*
* Nothing much to change or edit about the template appearance since it is 99% ready out of the box.
* I will put some edit guides at the critical point only. The rest doesn't need to be edited unless you know what are you doing or you just want to play with the settings.
*
* Hopefully you guys enjoy using this template. Good day people.
*/
/* ------------------------------------------------------------------------------------------------------------------------------| general styling area |----- */
/* --| body styling control |-- */
 
body {
background: #131313;
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
font-family: Tahoma;
font-size: 11px;
text-align: justify;
color: #0F0F0F;


}
Back to [[Offer_Templates#Templates_preview|top]].


/* --| end |--------------------------- */
===Twin Alpha Box Description===
/* --| http link styling control |-- */
----


a {
Submitted by: miasmacloud
color: #FF661A;
text-decoration: none;


<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Template </title>
<style type="text/css" media="screen">
/* main */
*{
padding: 0px;
margin: 0px;
}
*:focus{
outline: none;
}
body{
background: #fff;
font-family: tahoma;
font-size: 8pt;
color: #fff;
/* size the body so the background image doesn't get cut off */
height: [Insert]px;
width: 940px;
background-repeat: no-repeat;
}
body{
background-image: url([Insert]);
}
a:link,a:visited,a:active,a:hover{
text-decoration: underline;
color: #fff;
}
h1{
padding: 5px;
text-align: center;
font-size: 11pt;
}
}


a:hover {
/* text bars */
color: #000000;
.bars{
 
width: 250px;
margin: 0px 20px 0px 20px;
}
#centered{
/* width: 580px; */
margin: 0px auto;
}
#bar1{
float: left;
}
#bar2{
float: left;
}
.bg{
background-image: url([bbtimg=668]);
}
.low{
height: 100px;
background-image: url([bbtimg=2881]);
}
}


/* --| end |----------------------------- */
/* inside the text bars */
/* --| paragraph styling control |-- */
.content{
 
padding: 10px;
p {
line-height: 12pt;
text-shadow: 1px 1px 2px #000;
text-align: justify;
text-align: justify;
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
}
padding:20px;
.item{
border: #999999 1px solid;
margin: 3px 0px 3px 0px;
 
}
}


/* --| end |------------------------ */
/* right bar specific */
/* --| table content control |-- */
#show{
 
margin-bottom: 15px;
td {
vertical-align: left middle;
 
}
}
</style>
</head>
<body>


/* --| end |---------------------------- */
<div id="centered">
/* --| main title styling control |-- */
<div id="bar1" class="bars">
<div class="bg">
<div class="content">
<h1>
[Insert]
</h1>
<div class="item">
[Insert]
</div>
</div>
</div>
<div class="low"></div>
</div>
<div id="bar2" class="bars">
<div class="bg">
<div class="content">
<div id="show">
<h1>
Show Information
</h1>
<div class="item">
<b>Year:</b> [Insert]
</div>
<div class="item">
<b>Runtime:</b> [Insert] episodes
</div>
<div class="item">
<b>Categories:</b>
[Insert]
</div>
<div class="item">
<b>Director:</b> [Insert]
</div>
<div class="item">
<b>Production:</b> [Insert]
</div>
<div class="item">
<b>More:</b>
<a target="_blank" title="Anime News Network" href="[Insert]">ANN</a>,
<a target="_blank" title="AniDB" href="[Insert]">AniDB</a>,
<a target="_blank" title="Anime Planet" href="[Insert]">Anime-Planet</a>
</div>
</div>
<div id="file">
<h1>
File Information
</h1>
<div class="item">
<b>Group:</b> [Insert]
</div>
<div class="item">
<b>Video:</b> [Insert]
</div>
<div class="item">
<b>Audio:</b> [Insert]
</div>
<div class="item">
<b>Subtitles:</b> [Insert]
</div>
<div class="item">
<b>Related:</b> [Insert]
</div>
</div>
</div>
</div>
<div class="low"></div>
</div>
</div>
</body>
</html>
[screenshot]
[img][Insert][/img]
[img][Insert][/img]
[img][Insert][/img]
[img][Insert][/img]
[img][Insert][/img]
[/screenshot]
</pre>
 
[[Media:Twin Alpha Box Description.jpg|Sample]]


.title {
Back to [[Offer_Templates#Templates_preview|top]].
font-family: Tahoma;
font-size: 22px;
font-weight: bold;
text-align: center;
padding:10px;
background-color: #ffffff;
color: #000066;
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
border: #999999 1px solid;


}
===Simple book with JS pages===
----


/* --| end |--------------------------- */
Submitted by: remix85
/* --| picture content control |-- */


.pic2 {
<pre>
font-family: Tahoma;
<html>
font-size: 22px;
<head>
font-weight: bold;
<!--
text-align: center;
* Template: Book v1.1
padding:10px;
*          by remix85
background-color: #2E2E2E;
*
color: #0F0F0F;
* Feel free to rearange pages as You wish, just leave this comment.
border: #999999 1px solid;
* Keep in mind that space is limited, so long descriptions will have to be split manualy to two boxes or more.
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
* To find what should be done search for TODO in this template, but first copy it to sandbox and see how it works.
*
* Maximum image size is 340x480. Bigger images will be automatically clipped.
*
* I know that it's not quite edit-friendly.
* Send me a PM if You have problems with editing this template, or there's something wrong.
-->
<style type="text/css">
BODY {background-color: #FFFFFF; font-family: Times New Roman; font-size: 13px;}
TABLE {font-family: Times New Roman; font-size: 13px; color: #101010;}
A {color: #808080;}
A:hover {color: #000000;}


}
IMG {max-width: 340px; max-height: 480px; overflow: hidden;}


/* --| end |------------------------------- */
#book {width: 940px;}
/* --| sub heading styling control |-- */
#book1 {padding: 0 40px 0 50px;}
.title {font-size: 2em; font-weight: bold; text-align: center; color: #101010;}
.page {display: block;}


.heading {
.hdr {display: none; text-align: center; border-bottom: solid 1px; width: 100%; margin: 0 0 5px 0; padding: 0;}
font-family: Tahoma;
#tablist > UL {text-align: center; list-style: none; padding: 0; margin: 0;}
font-size: 14px;
#tablist > UL > LI {float: left; background-color: transparent; border: solid #000000; border-width: 1px 1px 0 1px; color: #808080; margin: 0 0 0 0.5em; padding: 0 0.75em 0 0.75em; cursor: pointer;}
font-weight: bold;
#tablist > UL > LI:hover {color: #000000;}
text-align: center;
color: #000066;
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
padding: 8px 0px 8px 0px;


}
.box_left {color: #101010; float: left; clear: left; width: 340px; margin-left: 40px;}
.box_left TABLE {width: 100%;}
.box_left TABLE TR TH {font-size: 1.2em; text-align: center; width: 100%; color: #303030;}


/* --| end |---------------------- */
.box_right {color: #101010; float: right; clear: right; width: 340px; margin-right: 60px;}
/* --| label styling control |-- */
.box_right TABLE {width: 100%;}
.box_right TABLE TR TH {font-size: 1.2em; text-align: center; width: 100%; color: #303030;}


.label {
.tbl_info {width: 100%;}
font-weight: bold;
.tbl_info TR {vertical-align: text-top;}
color: #0F0F0F;
.tbl_info TR TD {text-align: left; padding: 0.2em 0 0.2em 0;}
width: 19%;
.tbl_info TR TD:first-child {text-align: right; font-weight: bold; max-width: 25%;}
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
</style>
border: #999999 1px solid;
text-align: right;


*width: 22%;
<script type="text/javascript" language="javascript">
// <![CDATA[


}
// small hack to show book layout only when JavaScript is enabled
 
document.writeln('<style type="text/css">');
/* --| end |-------------------------------- */
document.writeln('#book {height: 582px; background-repeat: no-repeat; background-image: url("[bbtimg=1314]");}');
/* --| various text styling control |-- */
document.writeln('#book1 {overflow: hidden; max-height:500px; padding: 40px 40px 40px 50px;}');
 
document.writeln('.page {display: none;}');
.text {
document.writeln('.hdr {display: block;}');
width: 100%;
document.writeln('</style>');
color: #000066;
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
border: #999999 1px solid;


// Switch current page -> hide all pages, show current
function newpage(page_id)
{
page_id = '#' + page_id;
if(!$(page_id).is(":visible"))
{
$("div.page").hide();
$(page_id).fadeIn(600, function(){});
}
}
}
// ]]>
</script>
</head>


.text3 {
<body>
width: 100%;
<center>
color: #9D9D9D;
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
border: #999999 1px solid;


}
<div id="book"><div id="book1">
<div class="box_left"><div class="hdr" id="tablist"><ul>
<li onClick="newpage('page1');">Info</li>
<li onClick="newpage('page2');">Summary</li>
<!-- TODO: If needed, insert new tabs here -->
<!-- something like <li onClick="newpage('tab_id');>Tab name</li> -->
</ul><br /></div></div>


.text6 {
<div class="box_right"><div class="hdr">[TODO: small title]</div></div>
color: #CC6600;
<!--
TODO: put here elements that are always visible
eg. move the image from page1 and use only "box_left" on all pages
-->


}
<div class="page" id="page1" style="display:block;">
<div class="box_right" style="text-align: center;">
[TODO: image]
<!--<img src="http://" alt="Image not found" />-->
</div>


.text7 {
<div class="box_left">
color: #518ABF;
<table><tr><td>
font-weight: bold;
<div class="title">[TODO: title]</div>
</td></tr></table><br />
</div>


}
<div class="box_left">
 
<table><tr><th>- SERIES INFORMATION -</th></tr><tr><td>
.text9 {
<table class="tbl_info">
color: #000000;
<tr><td>Aired:</td><td>[TODO: aired]</td></tr>
font-weight: bold;
<tr><td>Episodes:</td><td>[TODO: episodes]</td></tr>
 
<tr><td>Categories:</td><td>[TODO: categories]</td></tr>
}
<tr><td>Director:</td><td>[TODO: director]</td></tr>
 
<tr><td>Production:</td><td>[TODO: producer]</td></tr>
</style>
<tr><td>References:</td><td><a href="http://anidb.net/">AniDB</a>, <a href="http://www.animenewsnetwork.com/">ANN</a>, [TODO: sources]
 
</table>
</head>
</td></tr></table><br />
<body>
</div>
<div class="box_left">
<table><tr><th>- FILE INFORMATION -</th></tr><tr><td>
<table class="tbl_info">
<tr><td>Group:</td><td>[TODO: group]</td></tr>
<tr><td>Video:</td><td>[TODO: video]</td></tr>
<tr><td>Audio:</td><td>[TODO: audio]</td></tr>
<tr><td>Subtitle:</td><td>[TODO: subs]</td></tr>
<tr><td>Comments:</td><td>- none -<br />[TODO: some comments?]</td></tr>
<tr><td>Related:</td><td>[TODO: related]</td></tr>
</table>
</td></tr></table><br />
</div>
</div><!--page1-->


<div class="page" id="page2">
<div class="box_left">
<table><tr><th>- SUMMARY -</th></tr><tr><td style="text-align: justify; text-indent: 1em;">
[TODO: summary]
</td></tr></table><br />
</div>
<div class="box_right">
<table><tr><td style="text-align: justify; text-indent: 1em;">
[TODO: add more summary or move image outside page1 and delete this div]
</td></tr></table>
</div>
</div><!--page2-->
<!--
TODO: more pages? Why not! Just insert
<div class="page" id="tab_id">
<div class="box_left"> or <div class="box_right">
<table><tr><th>- [Box title] -</th></tr><tr><td style="text-align: justify; text-indent: 1em;">
[content]
</td></tr></table><br /></div>
</div>
</div>
and that's all!
Don't forget to name your new page (eg. id="page3") and add new tab.
Remember to check if it doesn't overflow the page and split content if necessary!
-->


<table style="background-color: transparent;" cellpadding="6" cellspacing="6" height="100%">
</div></div><!--book-->
<tr>
<td colspan="3">
<div><hr><br></div>
 
 
<!-- the title heading -->
<div class="title">Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]</div>
 
<div><br><hr></div>
</td>
</tr>
<tr>
 


<!-- rowspan number must be changed accordingly if you add/remove row -->
</center>
<td rowspan="20" >
</body>
</html>
[url=http://wiki.bakabt.me/index.php/BBCode#Screenshots]TODO: Screenshots[/url]
</pre>
Sample template image: [http://wiki.bakabt.me/index.php/File:Book_of_gosick.png Book of Gosick]<br />
Back to [[Offer_Templates#Templates_preview|top]].


=Manga Templates=


<!-- 400px max width recommended -->
===Byousoku 5cm Manga Template===
<img class="pic2" src="http://img200.imageshack.us/img200/4229/187611.png">
----


</td>
[http://bakabt.me/template.php?id=Simple%20HTML%20Manga%20Template Click here] to use
</tr>
<tr>
<td colspan="3" style="padding-top: 0px;">
<div class="heading">SERIES INFORMATION</div>
</td>
</tr>


===Dille's Manga Template===
----


<!-- edit the info accordingly -->
[http://bakabt.me/template.php?id=Dille%27s%20Manga%20Template Click here] to use
<tr>
<td class="label">Main Title:</td>
<td class="text">Panda Kopanda</td>
</tr>
<tr>
<td class="label">Official Title:</td>
<td class="text">Panda! Go Panda!</td>
</tr>
<tr>
<td class="label">Japanese Title:</td>
<td class="text">パンダコパンダ</td>
</tr>
<tr>
<td class="label">Year:</td>
<td class="text">1972 & 1973</td>
</tr>
<tr>
<td class="label">Episodes:</td>
<td class="text"><span class="text7">2 combined into 1</span></td>
</tr>
<tr>
<td class="label">Categories:</td>
<td class="text">Adventure, Anthropomorphism, Comedy, Contemporary Fantasy, Fantasy</td>
</tr>
<tr>
<td class="label">Director:</td>
<td class="text">Isao Takahata</td>
</tr>
<tr>
<td class="label">Production:</td>
<td class="text">Shunzo Kato</td>
</tr>
<tr>
<td class="label">References:</td>
<td class="text">


===Msm595's Manga Template===
----


<!-- edit the info accordingly -->
Submitted by: kiiller_man1
<a href="http://anidb.net/perl-bin/animedb.pl?show=anime&aid=530" target="_blank">AniDB</a> |
<a href="http://www.animenfo.com/animetitle,2379,stbesx,panda_kopanda.html" target="_blank">AnimeNFO</a> |
<a href="http://www.animenewsnetwork.com/encyclopedia/anime.php?id=352" target="_blank">ANN</a> |
<a href="http://www.nausicaa.net/miyazaki/panda/" target="_blank">Official Page</a>


</td>
<pre>
</tr>
<!DOCTYPE html>  
<br><br><br>
<html>  
 
<head>  
<tr>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">  
<td colspan="3" style="padding-top: 20px;"><div class="heading">FILE INFORMATION</div> </td>
<title></title>  
</tr>
<style type="text/css">  
 
    html, body, p, h1, ul {
 
        margin: 0;
<!-- edit the info accordingly -->
        padding: 0;
<!-- change text3 to text if there is information -->
    }
<tr>
    body {
<td class="label">FanSub by:</td>
        font-size: 14px;
<td class="text3">No Information</td>
        height: 580px;
</tr>
        width: 940px;
<tr>
        color: #333;
<td class="label">Video:</td>
        text-shadow: 1px 1px #ccc;
<td class="text"><span class="text7">DivX 6</span> [ <span class="text6">704x544 29.97fps</span> ]</td>
        font-family: Helvetica, Arial, sans-serif;
</tr>
        background-color: #f9f9f9;
<tr>
    }
<td class="label">Audio:</td>
    #header {
<td class="text"><span class="text7">Japanese</span> [ <span class="text6">MPEG Audio Layer 3 24000Hz stereo 48Kbps</span> ]</td>
        text-align: center;
</tr>
        margin: 0 0 18px;
<tr>
    }
<td class="label">Subtitles:</td>
    h1 {
<td class="text"><span class="text7">English</span> [ <span class="text6">Hard-Subbed</span> ]</td>
        font-family: Georgia, serif;
</tr>
        font-size: 28px;
<tr>
        text-shadow: 1px 1px 2px #aaa;
<td class="label">Approx. Duration:</td>
        color: #444;
<td class="text">~ <span class="text7">1 hour 11 minutes</span> per episode</td>
    }
</tr>
    #links li {
<tr>
        display: inline;
<td class="label">Note:</td>
        padding: 0 5px 0 10px;
<td class="text">Please continue seeding as much as you can people. Thank you.</td>
        border-left: 1px solid #ccc;
</tr>
    }
 
    #links li.first {
 
        border-left: none;
<!-- edit the info accordingly -->
    }
<tr>
    a {
<td class="label">Related Anime:</td>
        color: #FFB000;
<td class="text">
        text-decoration: none;
> <a href="http://bakabt.me/torrent/10676/Panda_Kopanda_Panda_Go_Panda_DVD_DivX_MP3.html" target="_blank">Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]</a>
        font-size: 16px;
</td>
        text-shadow: none;
</tr>
        font-weight: bold;
<tr>
    }
<td class="label">Related OST:</td>
    a:hover {
<td class="text3">No Information</td>
        color: #00B0FF;
</tr>
    }
 
    #bigPicture {
<tr>
        width: 350px;
<td colspan="3" style="padding-top: 20px;"><div class="heading">SYNOPSIS</div>
        float: left;
 
        text-align: center;
<p>
    }
<span class="text9">
    #bigPicture img {
 
        max-width: 350px;
 
        max-height: 490px;
<!-- edit the info accordingly -->
        /*ie6 max- fixes. does anyone even use ie6 anymore? it's not even supported by microsoft now... lol*/
Panda Kopanda (Panda! Go Panda!) is a 30 minute movie made in 1972. Miyazaki created the original idea, the script, the layouts, and did key animation, and Takahata directed the film.
        width: expression(this.width > 350 ? (this.height > 490 ? true : 350): true);
<br><br>
        height: expression(this.height > 490 ? 490: true);
The story is about a little girl, Mimiko, who was left alone while her Grandma was away.
    }
<br><br>
    #info {
A 1973 sequel, Panda Kopanda: Amefuri Saakasu no Maki (Panda! Go Panda! & the Rainy-day Circus), continues the story and was made by the same people who made the first movie.
        float: left;
<br><br>
        width: 565px;
The literal translation of the title Panda Kopanda is "Panda, Baby Panda", but it's been released in North America as Panda Go Panda.
        margin-left: 25px;
 
    }
</span>
    h2 {
 
        margin: 0 0 3px 0;
</p>
        text-align: center;
</td>
        font-size: 22px;
</tr>
        color: #444;
<tr>
        text-shadow: 1px 1px 1px #aaa;
<td colspan="3" style="padding-top: 20px;"><div class="heading">SCREENSHOTS</div></td>
    }
</tr>
    dl {
</table>
        margin: 0 0 12px;
 
    }
 
    dt {
</body>
        font-weight: bold;
</html>
        margin-top: 5px;
 
    }
 
    dd {
<!-- change your demo pic here; use png format only; box may be added or removed accordingly -->
        margin-left: 18px;
 
    }
[screenshot]
    #screens {
[img]http://img24.imageshack.us/img24/9528/snapshot20090509131128j.png[/img]
        clear: both;
[img]http://img17.imageshack.us/img17/7907/snapshot20090509131221.png[/img]
        padding: 25px 25px 0;
[img]http://img4.imageshack.us/img4/3651/snapshot20090509131238.png[/img]
        text-align: center;
[img]http://img14.imageshack.us/img14/2361/snapshot20090509131248.png[/img]
    }
[img]http://img22.imageshack.us/img22/197/snapshot20090509131326.png[/img]
    #screens a {
[/screenshot]
        display: inline-block;
</pre>
        margin-right: 12px;
 
        border: 1px solid #bbb;
Sample template image: [http://wiki.bakabt.me/index.php/File:Generic_Anime_Template_-_Light_Themed.png Click here for full preview].<br />
        height: 200px;
Back to [[Offer_Templates#Templates_preview|top]].
        padding: 5px;
===Generic Anime Template - Dark Themed===
        vertical-align: bottom;
----
    }
 
    #screens a:hover {
Submitted by: deysmacro
        border: 1px solid #444;
 
    }
<pre>
    #screens img {
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        max-height: 200px;
<html>
        border: none;
<head>
    }
 
    ::-moz-selection{ background: #66A3D2; color:#fff; text-shadow: none; }
<style type="text/css">
    ::selection { background:#66A3D2; color:#fff; text-shadow: none; }
/* --------------------------------------------------------------------------------------------------------------------------------------------| some note |-----
</style>  
*
</head>  
* Please take note. The indentation should look correctly using Firefox.
<body>
*
    <div id="header">
* Although I have taken all possible steps that it should look correct, using IE will somehow still make it look a little bit weird.
        <h1>Negative Happy Chain Saw Edge</h1>  
* When that happen, please use Firefox.
        <h2>ネガティブハッピー・チェーンソーエッヂ</h2>
*
        <ul id="links">
* Thank you for your understanding.
            <li class="first"><a href="http://www.mangaupdates.com/series.html?id=19674">Manga Updates</a></li>
*
            <li><a href="http://myanimelist.net/manga/5674/Negative_Happy_Chainsaw_Edge">My Anime List</a></li>
* --------------------------------------------------------------------------------------------------------------------------------------------| general info |-----
        </ul>
*
    </div>
* Main user link : http://bakabt.me/user/816453/deysmacro.html
   
* Forum user link : http://forums.bakabt.me/index.php?action=profile;u=816453
    <div id="bigPicture">
*
        <img src="example/manga_cover.jpg" alt="Manga Picture" id="bigImage">
* I welcome all of you people to use this template at your convenience.
    </div>
* Do contact me via PM or email if you had anything to say.
   
*
    <div id="info">
* Email : deysmacro[at]gmail[dot]com
        <h2>Manga Information</h2>
*
        <dl>
* I also can help you guys with the template.
            <dt>Year</dt>  
* I will help whenever I can.
            <dd>2008</dd>
*
            <dt>Volumes</dt>  
* Originally Customized By : deysmacro
            <dd>2</dd>
* Re-Customized By : YOUR NICK HERE
            <dt>Categories</dt>
*
            <dd>Action, Ecchi, Romance, Shounen, Psychological</dd>
* Template Version : v2.0.8.1 generic - dark themed
            <dt>Artist</dt>
* Template Last Update On : July 21th, 2009 @ 13:28pm GMT+8
            <dd>Saika, Junichi</dd>
*
            <dt>Author</dt>  
* Please leave the credit intact if you plan to use this template.
            <dd>Takimoto, Tatsuhiko</dd>
* Your cooperation is highly appreciated. Thank you.
            <dt>Publisher</dt>
*
            <dd>Shounen Ace</dd>
* --------------------------------------------------------------------------------------------------------------------------------------------------------| SN |-----
            <dt>Scanlator</dt>
* SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2009 | 07 | 19 | 0720 | d-ait | v2081 | 11
            <dd>Moob</dd>  
* ---------------------------------------------------------------------------------------------------------------------------------| Info you should know |-----
            <dt>Comments</dt>  
*
            <dd>A great read :D</dd>  
* Quick Reminder:
        </dl>
* If you found any syntax with * siding with the syntax, it is targeted for IE only.
        <h2>Summary</h2>
*
        <p>Eri Yukizaki is a girl who fights. She is a “pretty soldier.” Her foe is the evil Chainsaw-man, who doesn’t die even after being slashed. If he isn’t defeated, the world will have no future. I was wrapped into this battle, and my life has changed completely… A “non-stop” negative youth story! - MAL</p>
*
    </div>
* Example:
   
* Assume "width" is the syntax...
    <div id="screens">
*
        <a href="example/manga_cover.jpg" rel="lightbox"><img src="example/manga_covert.jpg" alt="manga screenshot"></a>
* body {
        <a href="example/manga_1.jpg" rel="lightbox"><img src="example/manga_1t.jpg" alt="manga screenshot"></a>
* width: 100px; <-- major browser support
        <a href="example/manga_2.jpg" rel="lightbox"><img src="example/manga_2t.jpg" alt="manga screenshot"></a>
*
        <a href="example/manga_3.jpg" rel="lightbox"><img src="example/manga_3t.jpg" alt="manga screenshot"></a>
* *width: 110px; <-- targeted for IE only
        <a href="example/manga_4.jpg" rel="lightbox"><img src="example/manga_4t.jpg" alt="manga screenshot"></a>
* }
    </div>
*
   
*
    <script type="text/javascript">
* This is done as to make it IE compatible. It is not required if IE displays the generated page correctly.
        var as=document.getElementById("screens").getElementsByTagName('a'),
* Please take note of this when you are editing.
            img=document.getElementById('bigImage');
*
           
* -------------------------------------------------------------------------------------------------------------------------------------------| end |----- */
        for(var i=0;i<as.length;i++) {
/*
            as[i].onmouseover = function() {
* Nothing much to change or edit about the template appearance since it is 99% ready out of the box.
                var im = new Image();
* I will put some edit guides at the critical point only. The rest doesn't need to be edited unless you know what are you doing or you just want to play with the settings.
                im.onload = function() {
*
                    img.height=img.height; //don't let the image get taller than the original
* Hopefully you guys enjoy using this template. Good day people.
                    img.src=this.src;
*/
                };
/* ------------------------------------------------------------------------------------------------------------| general styling control area |----- */
                im.src = this.href;
/* --| body styling control |-- */
            };
        }
    </script>
</body>
</html>
</pre>


body {
Sample template image: [http://i51.tinypic.com/dfzo6t.jpg Image link]
background: #131313;
background-image:url('http://img11.imageshack.us/img11/6719/3784.gif'); /* want some fresh background? change it here */
font-family: Tahoma;
font-size: 11px;


}
=OST Templates=


/* --| end |--------------------------- */
===OST Template 1===
/* --| http link styling control |-- */
----


a {
[http://bakabt.me/template.php?id=Simple%20HTML%20OST%20Template Click here] to use
text-decoration: none;


}
===Show/hide Tracklist OST Template===
----


a:hover {
[http://bakabt.me/template.php?id=Show/HideList%20OST%20Template Click here] to use
color: #FF661A;


}
===Dropdown list OST Template===
----


/* --| end |----------------------------- */
[http://bakabt.me/template.php?id=DropdownBox%20OST%20Template Click here] to use
/* --| paragraph styling control |-- */


p {
===Simple OST Template===
text-align: justify;
----
background-image:url(http://img179.imageshack.us/img179/4977/bgrepeater2hn2.gif);
padding:20px;
border: #999999 1px solid;


}
[http://bakabt.me/template.php?id=Simple%20HTML%20OST%20Template Click here] to use


/* --| end |----------------------- */
===Boxed OST Template===
/* --| table styling control |-- */
---


td {
Submitted by: kureshii
vertical-align: left middle;


}
'''Note: All album images used must be the same size! Preferably ~350X350px, not too tall or wide. height and width values in "imgborder" class must be edited to fit the image. Other numbers in the CSS stylesheet may need to be tweaked for best effect.'''
 
/* --| end |---------------------- */
/* --| title styling control |-- */
 
.title {
font-family: Tahoma;
font-size: 22px;
font-weight: bold;
text-align: center;
padding:10px;
background-color: #2E2E2E;
color: #FFB856;
background-image:url(http://img179.imageshack.us/img179/4977/bgrepeater2hn2.gif);
border: #999999 1px solid;


<pre>
<html>
<head>
<title>[[Torrent Title]]</title>
<style type="text/css">
body {
background-color: #ffffff;
text-align: left;
margin: auto;
}
table {
display: table;
border-spacing: 10px;
font-family: Calibri, Helvetica, sans-serif;
font-size: medium;
}
}
 
tr {display: table-row;}
/* --| end |-------------------------- */
td {
/* --| picture styling control |-- */
display: table-cell;
 
min-width: 430px;
.pic2 {
padding: 10px;
font-family: Tahoma;
border: solid 2px #000000;
font-size: 22px;
vertical-align: top;
font-weight: bold;
}
text-align: center;
.album {max-width: 30em; margin: auto;}
padding:10px;
.vocal {max-width: 50em; margin: auto;}
background-color: #2E2E2E;
.header1 {
color: #FFB856;
font-size: 140%;
border: #999999 1px solid;
font-weight: bold;
background-image:url(http://img179.imageshack.us/img179/4977/bgrepeater2hn2.gif);
text-align: center;
 
}
}
 
.header2 {
/* --| end |-------------------------- */
font-size: 115%;
/* --| heading styling control |-- */
 
.heading {
font-family: Tahoma;
font-size: 14px;
font-weight: bold;
text-align: center;
color: #FF661A;
background-image:url(http://img358.imageshack.us/img358/4214/back2il5.png);
padding: 8px 0px 8px 0px;
 
}
}
 
.header3 {
/* --| end |---------------------- */
font-size: 66%;
/* --| label styling control |-- */
font-style: italic;
 
font-weight: normal;
.label {
width: 18%;  
text-align: right;
font-weight: bold;
color: #FFFFFF;
background-image:url(http://img358.imageshack.us/img358/4214/back2il5.png);
border: #999999 1px solid;
 
*width: 22%;
 
}
}
 
img {
/* --| end |-------------------------------- */
margin: 8px;
/* --| various text styling control |-- */
 
.text {
width: 100%;
color: #FFB856;
background-image:url(http://img358.imageshack.us/img358/4214/back2il5.png);
border: #999999 1px solid;
 
}
}
 
.imgborder {
.text3 {
border: 1px solid #666666;
width: 100%;
height: 366px;
color: #9D9D9D;
width: 366px;
background-image:url(http://img358.imageshack.us/img358/4214/back2il5.png);
margin-left: auto;
border: #999999 1px solid;
margin-right: auto;
 
margin-top: 5px;
margin-bottom: 5px;
}
}
 
.footer {position: relative;}
.text6 {
</style></head>
        color: #FFF0CC;
}
 
.text7 {
color: #00D4FF;
font-weight: bold;
 
}
 
.text9 {
color: #FFB856;
font-weight: bold;
 
}
 
/* --| end |------------------------ */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
</style>
 
</head>
<body>
<body>
<table>
    <tr>
      <td>
      <div class="header1">[[Album 1 Description: OST/Single/OP/ED/etc]]<br>
      <div class="header2">[[Album 1 Title]]<br>
      <div class="header3">[[Artist(s) info]]</div></div></div>
      <div class="imgborder"><img src="[[Album 1 Image URL (note: update image height&width in imgborder CSS class!)]]"></div>
      <div class="album"><b>Catalog No.:</b> [[Catalog No.]]<br>
      <b>Compression:</b> [[File codec/format]]<br>
      <b>Album Release Date:</b> [[Album 1 Release Date]]<br>
      <br>
      <b>Tracklist:</b><br>
1. [[Track 1]]<br>
2. [[Track 2]]<br>
3. [[Track 3]]<br>
4. [[Track 4]]<br>
<br>
<div class="footer">[[FLAC/MP3/WV (choose 1)]] files from [[Insert Ripper name here]]<br>
Booklet scans included ([[Number of album 1 scans]] files).</div></div>
      </td>
      <td>
      <div class="header1">[[Album 2 Description: OST/Single/OP/ED/etc]]<br>
      <div class="header2">[[Album 2 Title]]<br>
      <div class="header3">[[Artist(s) info]]</div></div></div>
      <div class="imgborder"><img src="[[Album 2 Image URL (note: update image height&width in imgborder CSS class!)]]"></div>
      <div class="album"><b>Catalog No.:</b> [[Catalog No.]]<br>
      <b>Compression:</b> [[File codec/format]]<br>
      <b>Album Release Date:</b> [[Album 2 Release Date]]<br>
      <br>
      <b>Tracklist:</b><br>
1. [[Track 1]]<br>
2. [[Track 2]]<br>
3. [[Track 3]]<br>
4. [[Track 4]]<br>
<br>
<div class="footer">[[FLAC/MP3/WV (choose 1)]] files from [[Insert Ripper name here]]<br>
Booklet scans included ([[Number of album 2 scans]] files).</div></div>
      </td>
    </tr>
    <tr>
      <td>
      <div class="header1">[[Album 3 Description: OST/Single/OP/ED/etc]]<br>
      <div class="header2">[[Album 3 Title]]<br>
      <div class="header3">[[Artist(s) info]]</div></div></div>
      <div class="imgborder"><img src="[[Album 3 Image URL (note: update image height&width in imgborder CSS class!)]]"></div>
      <div class="album"><b>Catalog No.:</b> [[Catalog No.]]<br>
      <b>Compression:</b> [[File codec/format]]<br>
      <b>Album Release Date:</b> [[Album 3 Release Date]]<br>
      <br>
      <b>Tracklist:</b><br>
1. [[Track 1]]<br>
2. [[Track 2]]<br>
3. [[Track 3]]<br>
4. [[Track 4]]<br>
<br>
<div class="footer">[[FLAC/MP3/WV (choose 1)]] files from [[Insert Ripper name here]]<br>
Booklet scans included ([[Number of album 3 scans]] files).</div></div>
      </td>
      <td>
      <div class="header1">[[Album 4 Description: OST/Single/OP/ED/etc]]<br>
      <div class="header2">[[Album 4 Title]]<br>
      <div class="header3">[[Artist(s) info]]</div></div></div>
      <div class="imgborder"><img src="[[Album 4 Image URL (note: update image height&width in imgborder CSS class!)]]"></div>
      <div class="album"><b>Catalog No.:</b> [[Catalog No.]]<br>
      <b>Compression:</b> [[File codec/format]]<br>
      <b>Album Release Date:</b> [[Album 4 Release Date]]<br>
      <br>
      <b>Tracklist:</b><br>
1. [[Track 1]]<br>
2. [[Track 2]]<br>
3. [[Track 3]]<br>
4. [[Track 4]]<br>
<br>
<div class="footer">[[FLAC/MP3/WV (choose 1)]] files from [[Insert Ripper name here]]<br>
Booklet scans included ([[Number of album 4 scans]] files).</div></div>
      </td>
    </tr>
</table>
</div>
</body></html>
</pre>
Sample torrent: [http://bakabt.me/torrent/140104/Macross_Frontier_Music_Collection_(FLAC)_LonE.html Macross Frontier Music Collection]
Go to: [http://bakabt.me/offer.php Offers Page]


<table style="background-color: transparent;" cellpadding="6" cellspacing="6" height="100%">
===Javascript-based dropdown menu Template (Especially good for manga/OST collections)===
<tr>
----
<td colspan="3">
<div><hr><br></div>
 
 
<!-- main heading here -->
<div class="title">Kaidoumaru | Kai Doh Maru [DVD][XviD][MP3]</div>
 
<div><br><hr></div>
</td>
</tr>
 
<tr>
 
<!-- if you add or remove row, rowspan number of 20 here must be adjusted accordingly; else the table would look weird -->
<!-- 400px max width recommended -->
<td rowspan="20" ><img class="pic2" src="http://img24.imageshack.us/img24/590/1086019.jpg"></td>
</tr>
 
<tr>
<td colspan="3" style="padding-top: 0px;"><div class="heading">SERIES INFORMATION</div></td>
</tr>
 
 
<!-- edit the info accordingly -->
<tr>
<td class="label">Main Title:</td>
<td class="text">Kaidoumaru</td>
</tr>
<tr>
<td class="label">Official Title:</td>
<td class="text">Kai Doh Maru</td>
</tr>
<tr>
<td class="label">Japanese Title:</td>
<td class="text">怪童丸</td>
</tr>
<tr>
<td class="label">Year:</td>
<td class="text">2001</td>
</tr>
<tr>
<td class="label">Episodes:</td>
<td class="text"><span class="text7">1</span></td>
</tr>
<tr>
<td class="label">Categories:</td>
<td class="text">Action, Fantasy, Historical, Magic, Seinen</td>
</tr>
<tr>
<td class="label">Director:</td>
<td class="text">Kanji Wakabayashi</td>
</tr>
<tr>
<td class="label">Production:</td>
<td class="text">Production I.G</td>
</tr>
<tr>
<td class="label">References:</td>
 
 
<!-- edit the info accordingly -->
<td class="text">
<a href="http://anidb.net/perl-bin/animedb.pl?show=anime&aid=500" target="_blank">AniDB</a> |
<a href="http://www.animenfo.com/animetitle,888,lcvouh,kaidoumaru.html" target="_blank">AnimeNFO</a> |
<a href="http://www.animenewsnetwork.com/encyclopedia/anime.php?id=306" target="_blank">ANN</a> |
<a href="http://www.sonymusic.co.jp/Animation/kaidohmaru/" target="_blank">Official Page</a>
</td>
</tr>
 
<tr>
<td colspan="3" style="padding-top: 20px;"><div class="heading">FILE INFORMATION</div></td>
</tr>


Submitted by: shadowmaniac


<!-- edit the info accordingly -->
'''Note: A fixed body height, based on the max height of your longest description, has to be specified else, description will be truncated.'''
<tr>
<td class="label">FanSub by:</td>
<td class="text3">No Information</td>
</tr>
<tr>
<td class="label">Video:</td>
<td class="text"><span class="text7">XviD</span> [ <span class="text6">720x400 29.97fps</span> ]</td>
</tr>
<tr>
<td class="label">Audio:</td>
<td class="text"><span class="text7">Japanese</span> [ <span class="text6">MPEG Audio Layer 3 48000Hz stereo 130Kbps</span> ]</td>
</tr>
<tr>
<td class="label">Subtitles:</td>
<td class="text"><span class="text7">English</span> [ <span class="text6">Hard-Subbed</span> ]</td>
</tr>
<tr>
<td class="label">Approx. Duration:</td><td class="text">~ <span class="text7">46</span> minutes per episode</td>
</tr>
<tr>
<td class="label">Note:</td><td class="text">Please continue seeding as much as you can.<br>Thank you guys.</td>
</tr>


'''Note: Please don't use this template if you don't/can't understand what's going on.'''


<!-- edit the info accordingly -->
<pre>
<tr>
<html>
<td class="label">Related Anime:</td>
<head>
<td class="text">
<style type="text/css">
>  <a href="http://bakabt.me/torrent/141617/Kai_Doh_Maru._DVDrip.html" target="_blank">Kai Doh Maru.[DVDrip]</a><br>
hr
>  <a href="http://bakabt.me/torrent/129335/Kaidoumaru_-_OVA_a4e.html"  target="_blank">Kaidoumaru - OVA [a4e]</a>
{
</td>
width: 80%;
</tr>
}
<tr>
<td class="label">Related OST:</td>
<td class="text3">No Information</td>
</tr>


<tr>
body
<td colspan="3" style="padding-top: 20px;"><div class="heading">SYNOPSIS</div>
{
align: center;
                height: 500px;
}


.tdtext
{
width: 30%;
v-align: top;
}


<!-- edit the info accordingly -->
.wrapper
<p>
{
<span class="text9">
width: 800px;
This story takes place during the Heian Period of Japan's history, when evil spirits still resided in the forests, mountains and rivers.
align: center; border-width: 2px;
A girl, accompanied by her loved one, battles against these evil spirits, while she is disguised as man.
border-style: solid;
This brave woman, aka "Kaidomaru", with a Chinese character "Flame" tatooed on her upper arm, was one of the "Four Devas".
border-color: #000;
Kaidomaru fights for the honor of her lost love, Raikou Minamotono, who had sacrified his life in order to protect the capital Kyoto, from the evils deeds of a "princess" cursed by a malicious ogre.
overflow: auto;
The princess, whom Kaidomaru used to play with as a child, has now become her ultimate enemy.
text-align: center;
</span>
}
</p>
</style>
</td>
</tr>


<tr>
<script  language="javascript">
<td colspan="3" style="padding-top: 20px;"><div class="heading">SCREENSHOTS</div></td>
<!--
</tr>
//############################################
</table>
//Don't change any of the code BELOW this line
//############################################
/***********************************************
* IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/


//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["myframe"]


</body>
//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
</html>
var iframehide="yes"


var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers


<!-- change your demo pic here; use png format only; box may be added or removed accordingly -->
function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}


[screenshot]
function resizeIframe(frameid){
[img]http://img91.imageshack.us/img91/8154/snapshot20090503140650j.png[/img]
var currentfr=document.getElementById(frameid)
[img]http://img397.imageshack.us/img397/945/snapshot20090503140744.png[/img]
if (currentfr && !window.opera){
[img]http://img212.imageshack.us/img212/3776/snapshot20090503140822.png[/img]
currentfr.style.display="block"
[img]http://img240.imageshack.us/img240/889/snapshot20090503140849.png[/img]
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
[img]http://img142.imageshack.us/img142/8716/snapshot20090503141314.png[/img]
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
[/screenshot]                                                   
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
</pre>
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}
 
function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}


Sample template image: [http://wiki.bakabt.me/index.php/File:Generic_Anime_Template_-_Dark_Themed.png Click here for full preview]<br />
function loadintoIframe(iframeid, url){
Back to [[Offer_Templates#Templates_preview|top]].
if (document.getElementById)
 
document.getElementById(iframeid).src=url
===Simplest Tabled Anime Template===
}
<pre>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1></h1>
<h3><a href="ANN URL" target="_blank">ANN</a> / <a href="AniDB URL" target="_blank">AniDB</a></h3>
    <table cellspacing="4">
    <tr valign="top">
        <td>
            <h2>Series Information</h2>
                <ul>
                    <table cellspacing="3">
                        <tr><td style="font-size:15px">Year</td><td>[Insert]</td></tr>
                        <tr><td style="font-size:15px">Episodes</td><td>[Insert]</td></tr>
                        <tr><td style="font-size:15px">Categories</td><td>[Insert]</td></tr>
                        <tr><td style="font-size:15px">Director</td><td>[Insert]</td></tr>
                        <tr><td style="font-size:15px">Production</td><td>[Insert]</td></tr>
                    </table>
                </ul>
                <h2>File Information</h2>
                <ul>
                    <table cellspacing="3">
                        <tr><td style="font-size:15px">Ripper</td><td>[Insert]</td></tr>
                        <tr><td style="font-size:15px">Video</td><td>[Insert]</td></tr>
                        <tr><td style="font-size:15px">Audio</td><td>[Insert]</td></tr>
                        <tr><td style="font-size:15px">Subtitle</td><td>[Insert]</td></tr>
                        <tr><td style="font-size:15px">Comments</td><td>[Insert]</td></tr>
                    </table>
</ul>
                <h2>Related Torrents</h2>
                <ul>
                    [Insert]
                </ul>
                <h2>Summary/Description</h2>
                <ul>
    [Insert]
</ul>
            </td>
            <td><img src="[Insert SUMMARY IMAGE URL]" alt="Image" /></td>
        </tr>
    </table>
    <h2>Screenshots</h2>
</body>
</html>
[screenshot]
[IMG]http://i50.tinypic.com/1znly1j.png[/IMG]
[IMG]http://i46.tinypic.com/m0mc3.png[/IMG]
[IMG]http://i46.tinypic.com/1z2ln4h.png[/IMG]
[/screenshot]
</pre>
 
Back to [[Offer_Templates#Templates_preview|top]].
 
===Twin Alpha Box Description===
----
 
Submitted by: miasmacloud
 
[http://bakabt.me/template.php?id=Twin%20Alpha%20Box%20Anime%20Template Click here] to use
 
 
Back to [[Offer_Templates#Templates_preview|top]].


if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller
//#############################################
//Don't change any of the code BEYOND this line
//#############################################
//########################################
//Modify the code below to suit your needs
//########################################
function Show(selected_option)
{
  // get our iframe
var testFrame = document.getElementById("myframe");
var val;
//selected_option refers to the "option" value provided in the HTML code
switch(parseInt(selected_option))
{
case 1:
val = "<table align='center' border='1' width='100%'>";
val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>";
val += "<img src='[[img link here]]'></td></tr>";
val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 1]]</h2></td></tr>";
val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>";
val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>";
val += "<tr><td class='text'>[[Track list 2]]</td><td class='text'>[[Track list 6]]</td></tr>";
val += "<tr><td class='text'>[[Track list 3]]</td><td class='text'>[[Track list 7]]</td></tr>";
val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>";
val += "</table>";
  break;
case 2:
val = "<table align='center' border='1' width='100%'>";
val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>";
val += "<img src='[[img link here]]'></td></tr>";
val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 2]]</h2></td></tr>";
val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>";
val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>";
val += "<tr><td class='text'>[[Track list 2]]</td><td class='text'>[[Track list 6]]</td></tr>";
val += "<tr><td class='text'>[[Track list 3]]</td><td class='text'>[[Track list 7]]</td></tr>";
val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>";
val += "</table>";
  break;
case 3:
val = "<table align='center' border='1' width='100%'>";
val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>";
val += "<img src='[[img link here]]'></td></tr>";
val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 3]]</h2></td></tr>";
val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>";
val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>";
val += "<tr><td class='text'>[[Track list 2]]</td><td class='text'>[[Track list 6]]</td></tr>";
val += "<tr><td class='text'>[[Track list 3]]</td><td class='text'>[[Track list 7]]</td></tr>";
val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>";
val += "</table>";
  break;
case 4:
val = "<table align='center' border='1' width='100%'>";
val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>";
val += "<img src='[[img link here]]'></td></tr>";
val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 4]]</h2></td></tr>";
val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>";
val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>";
val += "<tr><td class='text'>[[Track list 2]]</td><td class='text'>[[Track list 6]]</td></tr>";
val += "<tr><td class='text'>[[Track list 3]]</td><td class='text'>[[Track list 7]]</td></tr>";
val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>";
val += "</table>";
  break;
case 5:
val = "<table align='center' border='1' width='100%'>";
val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>";
val += "<img src='[[img link here]]'></td></tr>";
val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 5]]</h2></td></tr>";
val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>";
val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>";
val += "<tr><td class='text'>[[Track list 2]]</td><td class='text'>[[Track list 6]]</td></tr>";
val += "<tr><td class='text'>[[Track list 3]]</td><td class='text'>[[Track list 7]]</td></tr>";
val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>";
val += "</table>";
  break;
default:
  val = "<h2 align='center'>Choose an album/OST from the drop menu</h2><br />";
  break;
}


===Simple book with JS pages===
// now write out the new contents
----
var doc = testFrame.contentDocument;
if (doc == undefined || doc == null)
doc = testFrame.contentWindow.document;
doc.open();
doc.write(val);
doc.close();


Submitted by: remix85
  document.all.myFrame.style.visibility="visible";
 
}
<pre>
//-->
<html>
</script>
<head>
</head>
<!--
* Template: Book v1.1
*          by remix85
*
* Feel free to rearange pages as You wish, just leave this comment.
* Keep in mind that space is limited, so long descriptions will have to be split manualy to two boxes or more.
* To find what should be done search for TODO in this template, but first copy it to sandbox and see how it works.
*
* Maximum image size is 340x480. Bigger images will be automatically clipped.
*
* I know that it's not quite edit-friendly.
* Send me a PM if You have problems with editing this template, or there's something wrong.
-->
<style type="text/css">
BODY {background-color: #FFFFFF; font-family: Times New Roman; font-size: 13px;}
TABLE {font-family: Times New Roman; font-size: 13px; color: #101010;}
A {color: #808080;}
A:hover {color: #000000;}


IMG {max-width: 340px; max-height: 480px; overflow: hidden;}
<body>
<center>
<div class="wrapper">
<br />
<form  id="form1">
<select name="dest" onchange="Show(this.options[this.selectedIndex].value)">


#book {width: 940px;}
<!-- Modify this part here -->
#book1 {padding: 0 40px 0 50px;}
<option value="0">Choose an album/OST</option>
.title {font-size: 2em; font-weight: bold; text-align: center; color: #101010;}
<option value="1">[[OST 1]]</option>
.page {display: block;}
<option value="2">[[OST 2]]</option>
<option value="3">[[OST 3]]</option>
<option value="4">[[OST 4]]</option>
<option value="5">[[OST 5]]</option>
<!-- No need for modification beyond this point -->


.hdr {display: none; text-align: center; border-bottom: solid 1px; width: 100%; margin: 0 0 5px 0; padding: 0;}
</select>
#tablist > UL {text-align: center; list-style: none; padding: 0; margin: 0;}
</form>
#tablist > UL > LI {float: left; background-color: transparent; border: solid #000000; border-width: 1px 1px 0 1px; color: #808080; margin: 0 0 0 0.5em; padding: 0 0.75em 0 0.75em; cursor: pointer;}
<iframe  id="myframe" frameborder="0"  vspace="0"  hspace="0"  marginwidth="0" marginheight="0" width="700" 
#tablist > UL > LI:hover {color: #000000;}
  scrolling="no" style="overflow:visible; width:100%; display:none"></iframe>
</div>
    </center>
</body>
</html>
</pre>


.box_left {color: #101010; float: left; clear: left; width: 340px; margin-left: 40px;}
Sample template image: [http://i369.photobucket.com/albums/oo133/shadowmaniac_2000/JSDropdown.jpg Sample image]
.box_left TABLE {width: 100%;}
.box_left TABLE TR TH {font-size: 1.2em; text-align: center; width: 100%; color: #303030;}


.box_right {color: #101010; float: right; clear: right; width: 340px; margin-right: 60px;}
Sample torrent (slightly modified template): [http://bakabt.me/torrent/143278/KoiKoi7_-_Song_Shu_Paradise_Character_Mini_Albums.html KoiKoi7 - Song Shu Paradise & Character Mini Albums]
.box_right TABLE {width: 100%;}
.box_right TABLE TR TH {font-size: 1.2em; text-align: center; width: 100%; color: #303030;}


.tbl_info {width: 100%;}
===Simple ChalamiuS OST Template===
.tbl_info TR {vertical-align: text-top;}
----
.tbl_info TR TD {text-align: left; padding: 0.2em 0 0.2em 0;}
[http://bakabt.me/template.php?id=Simple%20ChalamiuS%20HTML%20OST%20Template Click here] to use
.tbl_info TR TD:first-child {text-align: right; font-weight: bold; max-width: 25%;}
</style>


<script type="text/javascript" language="javascript">
Go to: [http://bakabt.me/offer.php Offers Page]
// <![CDATA[


// small hack to show book layout only when JavaScript is enabled
=Outdated Templates=
document.writeln('<style type="text/css">');
<span style="color:red; font-size:18px;">Please don't use following templates anymore. They are outdated.</span>
document.writeln('#book {height: 582px; background-repeat: no-repeat; background-image: url("[bbtimg=1314]");}');
 
document.writeln('#book1 {overflow: hidden; max-height:500px; padding: 40px 40px 40px 50px;}');
===HTML5 CSS3 Anime Template===
document.writeln('.page {display: none;}');
----
document.writeln('.hdr {display: block;}');
document.writeln('</style>');


// Switch current page -> hide all pages, show current
Submitted by: CvP
function newpage(page_id)
[[File:Html5_CSS3_anime_template_by_cvp.JPG|thumb|300px|Full Sized Screenshot]]
{
This anime template utilizes HTML5 and CSS3.
if(!$.browser.msie)
It is compatible with latest IE9/Firefox/Chrome/Safari/Opera as much as possible.<br /><br />
{
page_id = '#' + page_id;
if(!$(page_id).is(":visible"))
{
$("div.page").hide();
$(page_id).fadeIn(600, function(){});
}
}
else // jQuery effects don't work too good in IE...
{
var alltags = document.getElementsByTagName("div");


for (i=0; i < alltags.length; i++)
<blockquote>To use this template, you don't need to edit a single line of code.<br />
{
All you need to do is
if (alltags[i].className=="page")
*'''fill up the form with all the data and hit submit.'''
{
*'''Once template is loaded, right click > "view source" > select all > copy.'''
alltags[i].style.display = "none";
*'''Now go to offer page and paste the code'''.
}
It is that simple.</blockquote><br />
}
document.getElementById(page_id).style.display = "block";
}
}
// ]]>
</script>
</head>


<body>
This template (and the form) will be constantly updated for better compatibility and features. Please leave your feedback in [http://forums.bakabt.me/index.php?topic=26922.0 here]<br />
<center>
If you need any help customizing this template, you can post in the above link as well.<br />


<div id="book"><div id="book1">
'''Note''': It is a good idea to use Firefox4 to view the form (The template should be ok on any newer browsers).
<div class="box_left"><div class="hdr" id="tablist"><ul>
 
<li onClick="newpage('page1');">Info</li>
[http://cvp.banglagamer.com/bakabt Click here] to use.<br />
<li onClick="newpage('page2');">Summary</li>
[http://bakabt.me/147902-fate-stay-night-1080p-anime-supreme.html Click here] for a live preview!<br /><br />
<!-- TODO: If needed, insert new tabs here -->
Back to [[Offer_Templates#Templates_preview|top]].
<!-- something like <li onClick="newpage('tab_id');>Tab name</li> -->
</ul><br /></div></div>


<div class="box_right"><div class="hdr">[TODO: small title]</div></div>
===Generic Revision-2 Anime Template===
----
<!--
TODO: put here elements that are always visible
eg. move the image from page1 and use only "box_left" on all pages
-->


<div class="page" id="page1" style="display:block;">
Submitted by: deysmacro
<div class="box_right" style="text-align: center;">
[TODO: image]
<!--<img src="http://" alt="Image not found" />-->
</div>


<div class="box_left">
<pre>
<table><tr><td>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div class="title">[TODO: title]</div>
<html><head>
</td></tr></table><br />
</div>


<div class="box_left">
<script src="http://www.yourjavascript.com/1103491011/NFLightBox.js" type="text/javascript"></script>
<table><tr><th>- SERIES INFORMATION -</th></tr><tr><td>
<script type="text/javascript">
<table class="tbl_info">
    $(function() {
<tr><td>Aired:</td><td>[TODO: aired]</td></tr>
        var settings = {
<tr><td>Episodes:</td><td>[TODO: episodes]</td></tr>
            imageLoading: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.loading.gif',
<tr><td>Categories:</td><td>[TODO: categories]</td></tr>
            imageBtnPrev: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.prev.png',
<tr><td>Director:</td><td>[TODO: director]</td></tr>
            imageBtnNext: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.next.png',
<tr><td>Production:</td><td>[TODO: producer]</td></tr>
            imageBtnClose: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.close.png',
<tr><td>References:</td><td><a href="http://anidb.net/">AniDB</a>, <a href="http://www.animenewsnetwork.com/">ANN</a>, [TODO: sources]
            imageBlank: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.blank.gif',
</table>
            imageBtnBottomPrev: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.btm.prev.gif',
</td></tr></table><br />
            imageBtnBottomNext: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.btm.next.gif',
</div>
            imageBtnPlay: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.start.png',
<div class="box_left">
            imageBtnStop: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.pause.png',
<table><tr><th>- FILE INFORMATION -</th></tr><tr><td>
            containerResizeSpeed: 350 };
<table class="tbl_info">
        $('#gallery a').lightBox(settings);
<tr><td>Group:</td><td>[TODO: group]</td></tr>
    });
<tr><td>Video:</td><td>[TODO: video]</td></tr>
</script>
<tr><td>Audio:</td><td>[TODO: audio]</td></tr>
<tr><td>Subtitle:</td><td>[TODO: subs]</td></tr>
<tr><td>Comments:</td><td>- none -<br />[TODO: some comments?]</td></tr>
<tr><td>Related:</td><td>[TODO: related]</td></tr>
</table>
</td></tr></table><br />
</div>
</div><!--page1-->


<div class="page" id="page2">
<style type="text/css">
<div class="box_left">
/*  -| general info |-
<table><tr><th>- SUMMARY -</th></tr><tr><td style="text-align: justify; text-indent: 1em;">
*
[TODO: summary]
*    Main user link  : http://bakabt.me/user/816453/deysmacro.html
</td></tr></table><br />
*    Forum user link : http://forums.bakabt.me/index.php?action=profile;u=816453
</div>
*
<div class="box_right">
*    I welcome all of you people to use this template at your convenience.
<table><tr><td style="text-align: justify; text-indent: 1em;">
*    I also can help you guys with the template. I will help whenever I can.
[TODO: add more summary or move image outside page1 and delete this div]
*    Please leave the credit intact if you plan to use this template.
</td></tr></table>
*    Your cooperation is highly appreciated. Thank you.
</div>
*    Do contact me via PM or email if you had anything to say.
</div><!--page2-->
*
*    Email : deysmacro[at]gmail[dot]com
<!--
*
TODO: more pages? Why not! Just insert
*
<div class="page" id="tab_id">
*    Originally Customized By : deysmacro
<div class="box_left"> or <div class="box_right">
*    Re-Customized By            : PUT YOUR NICK HERE
<table><tr><th>- [Box title] -</th></tr><tr><td style="text-align: justify; text-indent: 1em;">
*
[content]
*    Template Version              : 1.0.12 generic revision-2 anime template
</td></tr></table><br /></div>
*    Template Last Update On : Jan 7th, 2010 @ 11:28am GMT+8
</div>
*
</div>
*
and that's all!
*    SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2010 | 01 | 07 | g-r2-at | v1.0.12
Don't forget to name your new page (eg. id="page3") and add new tab.
*
Remember to check if it doesn't overflow the page and split content if necessary!
* -| end |- */
-->


</div></div><!--book-->
/* -| Info you should know |-
*
*    Quick Reminder:
*    If you found any syntax with * siding with the syntax, it is targeted for IE only.
*
*
*    Example:
*          Assume "width" is the syntax...
*
*    body {
*          width: 100px;    <-- major browser support
*
*          *width: 110px;    <-- targeted for IE only
*    }
*
*
*    This is done as to make it IE compatible. It is not required if IE displays the generated page correctly.
*    Please take note of this when you are editing.
*
* -| end |- */


</center>
#jquery-overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; }
</body>
#jquery-lightbox { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; }
</html>
#jquery-lightbox a img { border: none; }
[url=http://wiki.bakabt.me/index.php/BBCode#Screenshots]TODO: Screenshots[/url]
#lightbox-container-image-box-top { width: 100%; }
</pre>
#lightbox-container-image-box-top-left { width: 10%; height: 1px; position: relative; margin: 0 auto; float: left; z-index: 10; display: inline; text-align: left; }
Sample template image: [http://wiki.bakabt.me/index.php/File:Book_of_gosick.png Book of Gosick]<br />
#lightbox-container-image-box-top-middle { width: 80%; padding-top: 5px; height: 5px; position: relative; margin: 0 auto 0 0px; float: left; z-index: 5; display: inline; }
Back to [[Offer_Templates#Templates_preview|top]].
#lightbox-container-image-box-top-middle div.progress { width: 80%; padding-top: 5px; height: 5px; position: relative; margin: 0 auto 0 0px; float: left; background-color: #e4e4e4; z-index: 5; display: inline; }
#lightbox-container-image-box-top-right { width: 10%; height: 1px; position: relative; margin: 0 auto; float: right; text-align: right; z-index: 10; display: inline; }
#lightbox-container-image-box { position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#lightbox-container-image { height: 100%; padding: 10px; }
#lightbox-loading { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#lightbox-nav { position: absolute; top: 32px; left: 0; height: 100%; width: 100%; z-index: 10; }
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none; }
#lightbox-nav-btnPrev, #lightbox-nav-btnNext { width: 49%; height: 100%; zoom: 1; display: block; }
#lightbox-nav-btnPrev { left: 0; float: left; }
#lightbox-nav-btnNext { right: 0; float: right; }
#lightbox-container-image-data-box { font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; padding: 0 10px 0; text-align: left; }
#lightbox-container-image-data #lightbox-image-details { width: 70%; float: left; text-align: left; }
#lightbox-image-details-caption { font-weight: bold; display: block; height: 25px; line-height: 25px; vertical-align: middle; }
#lightbox-image-details-currentNumber { display: block; clear: left; padding-bottom: 1.0em; display: inline; height: 16px; line-height: 16px; vertical-align: middle; }
#lightbox-image-details-previous-image, #lightbox-image-details-previous-text, #lightbox-image-details-next-image, #lightbox-image-details-next-text
{ display: inline; height: 25px; line-height: 25px; vertical-align: middle; cursor: pointer; cursor: hand; }


=Manga Templates=
p { text-align: justify; background-color: #F5E8E0; text-shadow: #CEB0D6 2px 2px 2px; }


===Byousoku 5cm Manga Template===
.div1 { text-align: center; padding: 5px 10px 5px 10px; *padding: -25px 10px -25px 10px; margin:0px; *margin: 5px 10px 5px 10px; background-color: #F5E8E0; border:1px solid #EFD5BE; }
----
.div2 { margin-top: 15px; }
.div3 { margin-top: 10px; }
.div4 { *padding: 10px; }


[http://bakabt.me/template.php?id=Simple%20HTML%20Manga%20Template Click here] to use
fieldset { border: 1px solid #CEB0D6; }


===Dille's Manga Template===
.legend1 { color: #710000; text-align: center; text-shadow: #fff -2px -2px 2px; font-weight: bold; background: #E2D5E6; border: 1px solid  #CEB0D6; padding: 5px 250px; *padding: 5px 270px; padding: 5px 193px;] }
----
.legend2 { color: #710000; text-align: center; text-shadow: #fff -2px -2px 2px; font-weight: bold; background: #E2D5E6; border: 1px solid  #CEB0D6; padding: 5px 255px; *padding: 5px 275px; padding: 5px 200px;] }
.legend3 { color: #710000; text-align: center; text-shadow: #fff -2px -2px 2px; font-weight: bold; background: #E2D5E6; border: 1px solid  #CEB0D6; padding: 5px 144px; padding: 5px 142px;] }
.legend4 { color: #710000; text-align: center; text-shadow: #fff -2px -2px 2px; font-weight: bold; background: #E2D5E6; border: 1px solid  #CEB0D6; padding: 5px 235px; padding: 5px 222px;] }


[http://bakabt.me/template.php?id=Dille%27s%20Manga%20Template Click here] to use
#img1 { padding:15px; text-align:center; border:1px solid #EFD5BE; background-color:#fff; margin: 10px; }
#img2 { padding:10px; text-align:center; border:1px solid #EFD5BE; background-color:#fff; margin-left: 4px; }


===Msm595's Manga Template===
body {  background-color: #FCF3F4; }
----
 
.tr1 { background-color:#F5E8E0; }
.td1 { border:1px solid #EFD5BE; text-align:right; width:19%; text-shadow: #CEB0D6 2px 2px 2px; }
.td2 { border:1px solid #EFD5BE; text-shadow: #CEB0D6 2px 2px 2px; }


Submitted by: kiiller_man1
</style>
 
</head>
<body>
<table width='100%'>
    <tr>
          <td ><img id='img1' src='http://img693.imageshack.us/img693/330/imgcm.jpg' /></td>
          <td>
              <fieldset><legend class=legend1>SERIES INFORMATION</legend>
                    <table width=100% cellpadding=5px cellspacing=5px>
                        <tr class=tr1><td class=td1>Main Title:</td><td class=td2>Misutenaide Daisy</td></tr>
                        <tr class=tr1><td class=td1>Official Title:</td><td class=td2>Don`t Leave Me Alone, Daisy</td></tr>
                        <tr class=tr1><td class=td1>Japanese Title:</td><td class=td2>みすてないで　デイジー</td></tr>
                        <tr class=tr1><td class=td1>Year:</td><td class=td2>03.07.1997 till 18.09.1997</td></tr>
                        <tr class=tr1><td class=td1>Episodes:</td><td class=td2>12</td></tr>
                        <tr class=tr1><td class=td1>Categories:</td><td class=td2>Comedy, Cyborgs, Mecha, Sci-Fi, Shounen, Slapstick</td></tr>
                        <tr class=tr1><td class=td1>Director:</td><td class=td2>Yuji Mutoh</td></tr>
                        <tr class=tr1><td class=td1>Production:</td><td class=td2>BeSTACK, d-rights</td></tr>
                        <tr class=tr1><td class=td1>References:</td>
                              <td class=td2>
                                  <a href="http://anidb.net/perl-bin/animedb.pl?show=anime&aid=2022" target="_blank">AniDB</a> |
                                  <a href="http://www.animenewsnetwork.com/encyclopedia/anime.php?id=137" target="_blank">ANN</a> |
                                  <a href="http://www.animenfo.com/animetitle,711,ubabvw,misutenaide_dai.html" target="_blank">AnimeNFO</a>
                              </td></tr>
                    </table>
          </fieldset>
          <div class=div2>
          <fieldset><legend class=legend2>FILE INFORMATION</legend>
              <table width=100% cellpadding=5px cellspacing=5px>
                    <tr class=tr1><td class=td1>FanSub By:</td><td class=td2><b>A-Et</b></td></tr>
                    <tr class=tr1><td class=td1>Video:</td><td class=td2><b>DivX 5</b> [ 560x420 29.97fps ]</td></tr>
                    <tr class=tr1><td class=td1>Audio:</td><td class=td2><b>Japanese</b> [ MPEG Audio Layer 3 48000Hz stereo 113kbps ]</td></tr>
                    <tr class=tr1><td class=td1>Subtitles:</td><td class=td2><b>English</b> [ Hard-Subbed ]</td></tr>
              </table>
          </fieldset>
          </div>
          </td>
    </tr>
    <tr>
          <td width=30%>
          <div class=div3>
          <fieldset><legend class=legend3>SYNOPSIS</legend>
              <div class=div1><p>Surrounded only by his inventions, Techno doesn't really interact with other people much. However, one day, a girl attempts to "break into" his fortress. This hapless passerby, a girl named Hitomi, becomes the object of his affection. Techno decides to name her "Daisy," and begins planning to make her his, but can Annie and Yamakawa X protect Hitomi or will the science nerd Techno win Hitomi's heart?</p></div>
          </fieldset>
          </div>
          </td>
          <td>
          <div class=div3>
          <fieldset><legend class=legend4>SCREENSHOTS</legend><div class=div4><div id=gallery>
              <a href='http://img706.imageshack.us/img706/5193/dontleavemealonedaisy01.png' ><img id=img2 src='http://img706.imageshack.us/img706/5193/dontleavemealonedaisy01.th.png' border='0'/></a>
              <a href='http://img687.imageshack.us/img687/5193/dontleavemealonedaisy01.png' ><img id=img2 src='http://img687.imageshack.us/img687/5193/dontleavemealonedaisy01.th.png' border='0'/></a>
              <a href='http://img192.imageshack.us/img192/5193/dontleavemealonedaisy01.png' ><img id=img2 src='http://img192.imageshack.us/img192/5193/dontleavemealonedaisy01.th.png' border='0'/></a>
          </div></div></fieldset>
          </div>
          </td>
    </tr>
</table>
 
</body></html>
</pre>
 
Sample template image: [http://wiki.bakabt.me/index.php/File:Generic_Revision-2_Anime_Template.png Click here for full preview]<br />
Back to [[Offer_Templates#Templates_preview|top]].
 
===JS Alternative Anime Template - Editing Friendly Edition===
----
 
Submitted by: deysmacro
 
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 
 
<script language="javascript" purpose="User definitions">
/* --| start |--| user-edit auto text replacement scripting engine |---------------------------------------------------------------> nothing to edit here - go to edit info center instead <--| note |-- */
 
function dcw(input)
  { document.write(input); }
      useredit = new Object();
      related = new Object();
 
      related.anime_list = new Array();
      related.ost_list = new Array();
      related.pics_list = new Array();
 
function add_related(type, title, href)
  { var tmp_list;
          switch (type) {
                case "anime": target_list = related.anime_list;
                    break;
                  case "ost"  : target_list = related.ost_list;
                      break;
                  case "pics": target_list = related.pics_list;
                      break; }
 
        tmp_item = new Object();
 
        tmp_item.title = title;
        tmp_item.href = href;
 
        target_list.push(tmp_item);
  }
 
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit info center |--| start |-- */
/* --> most user only need to edit the info here <--------------------------------------------------------------------------------------------------------------------------------------------------------------| note |-- */
 
 
useredit.heading="Panda Kopanda | Panda! Go Panda! [DivX][MP3]";
 
 
useredit.maintitle="Panda Kopanda";
useredit.officialtitle="Panda! Go Panda";
useredit.japanesetitle="パンダコパンダ ";
useredit.year="1972 & 1973";
useredit.episodes="2 combined into 1";
useredit.categories="Adventure, Anthropomorphism, Comedy, Contemporary Fantasy, Fantasy";
useredit.director="Isao Takahata";
useredit.production="Shunzo Kato";
 
 
/* --> if any of the reference link is unavailable, just replace it with # <----------------------------------------------------------------------------------------------------------------------------------| note |-- */
useredit.anidb = "http://anidb.net/perl-bin/animedb.pl?show=anime&aid=530";
useredit.animenfo = "http://www.animenfo.com/animetitle,2379,stbesx,panda_kopanda.html";
useredit.ann = "http://www.animenewsnetwork.com/encyclopedia/anime.php?id=352";
useredit.officialpage = "http://www.nausicaa.net/miyazaki/panda/";
 
 
useredit.synopsis=
"Panda Kopanda (Panda! Go Panda!) is a 30 minute movie made in 1972. Miyazaki created the original idea, the script, the layouts, and did key animation, and Takahata directed the film.<br><br>The story is about a little girl, Mimiko, who was left alone while her Grandma was away.<br><br>A 1973 sequel, Panda Kopanda: Amefuri Saakasu no Maki (Panda! Go Panda! & the Rainy-day Circus), continues the story and was made by the same people who made the first movie. <br><br>The literal translation of the title Panda Kopanda is 'Panda, Baby Panda', but it's been released in North America as Panda Go Panda.";
 
 
useredit.fansub="<b>No Information</b>";
useredit.note="Please continue seeding as much as you can.<br>Thank you guys.";
 
 
useredit.srcs_left="";
useredit.srcs_right="DVD";
 
 
useredit.vids_left="DIVX";
useredit.vids_right="704X544";
 
 
useredit.auds_left="JP";
useredit.auds_right="MP3  24KHZ";
 
 
useredit.subs_left="EN";
useredit.subs_right="HARD";
 
 
useredit.tooltip_label_vids="This title has been encoded with <b>DivX 6 - 704 x 544 29.97fps</b>.";
useredit.tooltip_label_auds="This title utilized <b>MPEG Audio Layer 3 24000Hz stereo 48Kbps</b>.";
useredit.tooltip_label_subs="This title has been <b>hard-subbed</b>.";


<pre>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
    html, body, p, h1, ul {
        margin: 0;
        padding: 0;
    }
    body {
        font-size: 14px;
        height: 580px;
        width: 940px;
        color: #333;
        text-shadow: 1px 1px #ccc;
        font-family: Helvetica, Arial, sans-serif;
        background-color: #f9f9f9;
    }
    #header {
        text-align: center;
        margin: 0 0 18px;
    }
    h1 {
        font-family: Georgia, serif;
        font-size: 28px;
        text-shadow: 1px 1px 2px #aaa;
        color: #444;
    }
    #links li {
        display: inline;
        padding: 0 5px 0 10px;
        border-left: 1px solid #ccc;
    }
    #links li.first {
        border-left: none;
    }
    a {
        color: #FFB000;
        text-decoration: none;
        font-size: 16px;
        text-shadow: none;
        font-weight: bold;
    }
    a:hover {
        color: #00B0FF;
    }
    #bigPicture {
        width: 350px;
        float: left;
        text-align: center;
    }
    #bigPicture img {
        max-width: 350px;
        max-height: 490px;
        /*ie6 max- fixes. does anyone even use ie6 anymore? it's not even supported by microsoft now... lol*/
        width: expression(this.width > 350 ? (this.height > 490 ? true : 350): true);
        height: expression(this.height > 490 ? 490: true);
    }
    #info {
        float: left;
        width: 565px;
        margin-left: 25px;
    }
    h2 {
        margin: 0 0 3px 0;
        text-align: center;
        font-size: 22px;
        color: #444;
        text-shadow: 1px 1px 1px #aaa;
    }
    dl {
        margin: 0 0 12px;
    }
    dt {
        font-weight: bold;
        margin-top: 5px;
    }
    dd {
        margin-left: 18px;
    }
    #screens {
        clear: both;
        padding: 25px 25px 0;
        text-align: center;
    }
    #screens a {
        display: inline-block;
        margin-right: 12px;
        border: 1px solid #bbb;
        height: 200px;
        padding: 5px;
        vertical-align: bottom;
    }
    #screens a:hover {
        border: 1px solid #444;
    }
    #screens img {
        max-height: 200px;
        border: none;
    }
    ::-moz-selection{ background: #66A3D2; color:#fff; text-shadow: none; }
    ::selection { background:#66A3D2; color:#fff; text-shadow: none; }
</style>
</head>
<body>
    <div id="header">
        <h1>Negative Happy Chain Saw Edge</h1>
        <h2>ネガティブハッピー・チェーンソーエッヂ</h2>
        <ul id="links">
            <li class="first"><a href="http://www.mangaupdates.com/series.html?id=19674">Manga Updates</a></li>
            <li><a href="http://myanimelist.net/manga/5674/Negative_Happy_Chainsaw_Edge">My Anime List</a></li>
        </ul>
    </div>
   
    <div id="bigPicture">
        <img src="example/manga_cover.jpg" alt="Manga Picture" id="bigImage">
    </div>
   
    <div id="info">
        <h2>Manga Information</h2>
        <dl>
            <dt>Year</dt>
            <dd>2008</dd>
            <dt>Volumes</dt>
            <dd>2</dd>
            <dt>Categories</dt>
            <dd>Action, Ecchi, Romance, Shounen, Psychological</dd>
            <dt>Artist</dt>
            <dd>Saika, Junichi</dd>
            <dt>Author</dt>
            <dd>Takimoto, Tatsuhiko</dd>
            <dt>Publisher</dt>
            <dd>Shounen Ace</dd>
            <dt>Scanlator</dt>
            <dd>Moob</dd>
            <dt>Comments</dt>
            <dd>A great read :D</dd>
        </dl>
        <h2>Summary</h2>
        <p>Eri Yukizaki is a girl who fights. She is a “pretty soldier.” Her foe is the evil Chainsaw-man, who doesn’t die even after being slashed. If he isn’t defeated, the world will have no future. I was wrapped into this battle, and my life has changed completely… A “non-stop” negative youth story! - MAL</p>
    </div>
   
    <div id="screens">
        <a href="example/manga_cover.jpg" rel="lightbox"><img src="example/manga_covert.jpg" alt="manga screenshot"></a>
        <a href="example/manga_1.jpg" rel="lightbox"><img src="example/manga_1t.jpg" alt="manga screenshot"></a>
        <a href="example/manga_2.jpg" rel="lightbox"><img src="example/manga_2t.jpg" alt="manga screenshot"></a>
        <a href="example/manga_3.jpg" rel="lightbox"><img src="example/manga_3t.jpg" alt="manga screenshot"></a>
        <a href="example/manga_4.jpg" rel="lightbox"><img src="example/manga_4t.jpg" alt="manga screenshot"></a>
    </div>
   
    <script type="text/javascript">
        var as=document.getElementById("screens").getElementsByTagName('a'),
            img=document.getElementById('bigImage');
           
        for(var i=0;i<as.length;i++) {
            as[i].onmouseover = function() {
                var im = new Image();
                im.onload = function() {
                    img.height=img.height; //don't let the image get taller than the original
                    img.src=this.src;
                };
                im.src = this.href;
            };
        }
    </script>
</body>
</html>
</pre>


Sample template image: [http://i51.tinypic.com/dfzo6t.jpg Image link]
/* --> this is an array of links; means that the link could be add or remove at your will; the link here would be dynamically generated accordingly <-------------------------------------| note |-- */
add_related("anime", "Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]", "http://bakabt.me/torrent/10676/Panda_Kopanda_Panda_Go_Panda_DVD_DivX_MP3.html");
add_related("anime", "Dummy link", "#");


=OST Templates=


===OST Template 1===
/* --> this is an array of links; means that the link could be add or remove at your will; the link here would be dynamically generated accordingly <-------------------------------------| note |-- */
----
add_related("ost", "No related link", "#");
add_related("ost", "Dummy link", "#");


[http://bakabt.me/template.php?id=Simple%20HTML%20OST%20Template Click here] to use


===Show/hide Tracklist OST Template===
/* --> this is an array of pics; means that the pics could be add or remove at your will; the pics here would be dynamically generated accordingly; 320px max width if possible; use jpg format for loading performance <| note |-- */
----
add_related("pics", "#", "http://img39.imageshack.us/img39/280/pandakopanda.jpg");
add_related("pics", "#", "http://img39.imageshack.us/img39/280/pandakopanda.jpg");
add_related("pics", "#", "http://img39.imageshack.us/img39/280/pandakopanda.jpg");


[http://bakabt.me/template.php?id=Show/HideList%20OST%20Template Click here] to use


===Dropdown list OST Template===
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit info center |--| end |-- */
----
/* --| end |--| user-edit auto text replacement scripting engine |---------------------------------------------------------------------------------------------------------------------------------------------------- */
</script>


[http://bakabt.me/template.php?id=DropdownBox%20OST%20Template Click here] to use


===Simple OST Template===
<!-- multi picture presentation scripting engine -->
----
<script src="http://deysmacro.uuuq.com/resources/bakabt/jquery.cycle.all.min.js" type="text/javascript"></script>
 
[http://bakabt.me/template.php?id=Simple%20HTML%20OST%20Template Click here] to use
 
===Boxed OST Template===
---


Submitted by: kureshii


'''Note: All album images used must be the same size! Preferably ~350X350px, not too tall or wide. height and width values in "imgborder" class must be edited to fit the image. Other numbers in the CSS stylesheet may need to be tweaked for best effect.'''
<pre>
<html>
<head>
<title>[[Torrent Title]]</title>
<style type="text/css">
<style type="text/css">
body {
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| general info section |--| start |---
background-color: #ffffff;
* Thanks To        : kureshii, Jarudin
text-align: left;
* Thanks Also To : enginarc, DaggerLite, blubart
margin: auto;
*
}
* Originally Customized By : deysmacro
table {
* Re-Customized By            : PUT YOUR NICK HERE
display: table;
*
border-spacing: 10px;
* Template Version              : 3.2.2.1 js alternative - editing friendly edition
font-family: Calibri, Helvetica, sans-serif;
* Template Last Update On : July 26th, 2009 @ 17:28pm GMT+8
font-size: medium;
*
}
* Please leave the credit intact if you plan to use this template.
tr {display: table-row;}
* Your cooperation is highly appreciated.
td {
*
display: table-cell;
* Hopefully you enjoy using this template
min-width: 430px;
* Thank you for your time and good day.
padding: 10px;
* --------------------------------------------------------------------------------------------------------------------------------------------------------| SN |-----
border: solid 2px #000000;
* SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2009 | 07 | 26 | 0720 | d-ait | v3221 | 36
vertical-align: top;
* ---------------------------------------------------------------------------------------------------------------------------------| Info you should know |-----
}
* Quick Reminder:
.album {max-width: 30em; margin: auto;}
* If you found any syntax with * siding with the syntax, it is targeted for IE only.
.vocal {max-width: 50em; margin: auto;}
*
.header1 {
* Example:
font-size: 140%;
* Assume "width" is the syntax...
font-weight: bold;
*
text-align: center;
* body {
}
* width: 100px;       <-- major browser support
.header2 {
*
font-size: 115%;
* *width: 110px;       <-- targeted for IE only
* }
*
* This is done as to make it IE compatible. It is not required if IE displays the generated page correctly.
* Please take note of this when you are editing.
* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| general info section |--| end |-- */
 
 
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| read first before carry on --| start |--
   
        Note:
        1. This template is pretty much already ready out of the box and usually doesn't need to be customized anymore.
        2. I will put edit hint at critical point only where the edit usually doesn't need to be done unless the generated page is somehow not quite right.
        3. Just find any 'edit point xx of xx' for quick edit target.
        4. Other settings which have no edit point or edit hint is meant to be left as it is and for advanced user only.
        5. Advanced user may edit the settings but I highly not recommended as it should be fine without to be customized.
        6. Go directly to bottom to edit the screenshot img links.
 
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| read first before carry on --| end |-- */
 
 
/* ---------------------------------------------------------------------------------------------------------| quick file summary control center |----- */
/* --| whole table positioning control |-- */
 
.button {
margin: 0px;
}
}
.header3 {
 
font-size: 66%;
/* --| end |---------------------------- */
font-style: italic;
/* --| whole table body control |-- */
font-weight: normal;
 
}
table.file_info {
img {
border-spacing: 0px;
margin: 8px;
margin-left: auto;
margin-right: auto;
margin-top: 6px;
margin-bottom: 0px;
width: auto;
 
*border-collapse: collapse;
}
 
/* --| end |----------------------- */
/* --| tootip hover control |-- */
 
td.info_label:hover {
z-index: 9;
cursor: help;
}
}
.imgborder {
 
border: 1px solid #666666;
/* --| end |------------------------- */
height: 366px;
/* --| tootip misc control |------ */
width: 366px;
 
margin-left: auto;
td.info_label span {
margin-right: auto;
display: none;  
margin-top: 5px;
margin-bottom: 5px;
}
}
.footer {position: relative;}
</style></head>
<body>
<table>
    <tr>
      <td>
      <div class="header1">[[Album 1 Description: OST/Single/OP/ED/etc]]<br>
      <div class="header2">[[Album 1 Title]]<br>
      <div class="header3">[[Artist(s) info]]</div></div></div>
      <div class="imgborder"><img src="[[Album 1 Image URL (note: update image height&width in imgborder CSS class!)]]"></div>
      <div class="album"><b>Catalog No.:</b> [[Catalog No.]]<br>
      <b>Compression:</b> [[File codec/format]]<br>
      <b>Album Release Date:</b> [[Album 1 Release Date]]<br>
      <br>
      <b>Tracklist:</b><br>
1. [[Track 1]]<br>
2. [[Track 2]]<br>
3. [[Track 3]]<br>
4. [[Track 4]]<br>
<br>
<div class="footer">[[FLAC/MP3/WV (choose 1)]] files from [[Insert Ripper name here]]<br>
Booklet scans included ([[Number of album 1 scans]] files).</div></div>
      </td>
      <td>
      <div class="header1">[[Album 2 Description: OST/Single/OP/ED/etc]]<br>
      <div class="header2">[[Album 2 Title]]<br>
      <div class="header3">[[Artist(s) info]]</div></div></div>
      <div class="imgborder"><img src="[[Album 2 Image URL (note: update image height&width in imgborder CSS class!)]]"></div>
      <div class="album"><b>Catalog No.:</b> [[Catalog No.]]<br>
      <b>Compression:</b> [[File codec/format]]<br>
      <b>Album Release Date:</b> [[Album 2 Release Date]]<br>
      <br>
      <b>Tracklist:</b><br>
1. [[Track 1]]<br>
2. [[Track 2]]<br>
3. [[Track 3]]<br>
4. [[Track 4]]<br>
<br>
<div class="footer">[[FLAC/MP3/WV (choose 1)]] files from [[Insert Ripper name here]]<br>
Booklet scans included ([[Number of album 2 scans]] files).</div></div>
      </td>
    </tr>
    <tr>
      <td>
      <div class="header1">[[Album 3 Description: OST/Single/OP/ED/etc]]<br>
      <div class="header2">[[Album 3 Title]]<br>
      <div class="header3">[[Artist(s) info]]</div></div></div>
      <div class="imgborder"><img src="[[Album 3 Image URL (note: update image height&width in imgborder CSS class!)]]"></div>
      <div class="album"><b>Catalog No.:</b> [[Catalog No.]]<br>
      <b>Compression:</b> [[File codec/format]]<br>
      <b>Album Release Date:</b> [[Album 3 Release Date]]<br>
      <br>
      <b>Tracklist:</b><br>
1. [[Track 1]]<br>
2. [[Track 2]]<br>
3. [[Track 3]]<br>
4. [[Track 4]]<br>
<br>
<div class="footer">[[FLAC/MP3/WV (choose 1)]] files from [[Insert Ripper name here]]<br>
Booklet scans included ([[Number of album 3 scans]] files).</div></div>
      </td>
      <td>
      <div class="header1">[[Album 4 Description: OST/Single/OP/ED/etc]]<br>
      <div class="header2">[[Album 4 Title]]<br>
      <div class="header3">[[Artist(s) info]]</div></div></div>
      <div class="imgborder"><img src="[[Album 4 Image URL (note: update image height&width in imgborder CSS class!)]]"></div>
      <div class="album"><b>Catalog No.:</b> [[Catalog No.]]<br>
      <b>Compression:</b> [[File codec/format]]<br>
      <b>Album Release Date:</b> [[Album 4 Release Date]]<br>
      <br>
      <b>Tracklist:</b><br>
1. [[Track 1]]<br>
2. [[Track 2]]<br>
3. [[Track 3]]<br>
4. [[Track 4]]<br>
<br>
<div class="footer">[[FLAC/MP3/WV (choose 1)]] files from [[Insert Ripper name here]]<br>
Booklet scans included ([[Number of album 4 scans]] files).</div></div>
      </td>
    </tr>
</table>
</div>
</body></html>
</pre>


Sample torrent: [http://bakabt.me/torrent/140104/Macross_Frontier_Music_Collection_(FLAC)_LonE.html Macross Frontier Music Collection]
/* --| end |------------------------ */
/* --| tootip styling control |-- */
 
td.info_label:hover span {
position: absolute;
bottom: 24px;
font-family: "Trebuchet MS", sans-serif;
font-size: 11px;
line-height: 16px;
background-color: #FFFFCC;
background-image:url('http://img194.imageshack.us/img194/1986/helpm.png');
background-position: 3px 50%;
background-repeat: no-repeat;
color: #777777;
height: 16px;
width: auto;
border: 1px solid #999999;
margin: 0px;
padding: 5px;
display: block;
 
 
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 1 of 3 |---------- */
 
*width: 350px; /* for IE only - no need to adjust the tooltip width unless needed */
 
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 1 of 3 |---------- */
 
 
*bottom: 16px;
*left: -80px;
*text-align: left;
}
 
/* --| end |---------------------------------------- */
/* --| individual left side content control |-- */
 
td.info_label {
width: 20px;
font-family: "Lucida Console", sans-serif;
font-size: 7.7px;
text-align: center;
color: #D0D0F0;
background-color: #854C9E;
border: #854C9E 2px solid;
position: relative;
 
*font-size: 9px;
}
 
/* --| end |------------------------------------------------- */
/* --| individual right side - left content control |-- */
 
td.info_a {
background-color: #EEEEFF;
border: #854C9E 2px solid;
border-right: 0px;
color: #854C9E;
font-family: "Lucida Console", sans-serif;
font-size: 7.7px;
text-align: left;
width: 50px;
padding: 0px 0px 0px 3px;
font-size: 7.7px;
 
*font-size: 9px;
}


Go to: [http://bakabt.me/offer.php Offers Page]
/* --| end |--------------------------------------------------- */
/* --| individual right side - right content control |-- */


td.info_b {
background-color: #EEEEFF;
border: #854C9E 2px solid;
border-left: 0px;
color: #854C9E;
font-family: "Lucida Console", sans-serif;
font-size: 7.7px;
text-align: right;
width: 60px;
padding: 0px 3px 0px 0px;
font-size: 7.7px;
*font-size: 9px;
}
/* --| end |----------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */




===Javascript-based dropdown menu Template (Especially good for manga/OST collections)===
/* --| div which holds divpic and divtab |-- */
----


Submitted by: shadowmaniac
.divwhole {
        margin: 23px 0px 20px 0px;
        padding: 0px;


'''Note: A fixed body height, based on the max height of your longest description, has to be specified else, description will be truncated.'''


'''Note: Please don't use this template if you don't/can't understand what's going on.'''
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 2 of 3 |---------- */


<pre>
        height: 460px; /* this height only need to be adjusted when necessary only */
<html>
<head>
<style type="text/css">
hr
{
width: 80%;
}


body
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 2 of 3 |---------- */
{
align: center;
                height: 500px;
}


.tdtext
{
width: 30%;
v-align: top;
}


.wrapper
        *margin: 35px 0px -5px 0px;
{
}
width: 800px;
align: center; border-width: 2px;
border-style: solid;
border-color: #000;
overflow: auto;
text-align: center;
}
</style>


<script  language="javascript">
/* --| end |--------------------------- */  
<!--
/* --| div which holds the pics |-- */  
//############################################
//Don't change any of the code BELOW this line
//############################################
/***********************************************
* IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/


//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
.divpic {
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
        margin: 0px 0px 0px 20px;
var iframeids=["myframe"]
        padding: 0px;


//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
        *margin: -25px -365px 0px 20px;
var iframehide="yes"
}


var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
/* --| end |--------------------------------------- */
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers
/* --| div which holds the tab container |-- */  


function resizeCaller() {
.divtab {
var dyniframe=new Array()
        margin: -450px 0px 0px 360px;
for (i=0; i<iframeids.length; i++){
        padding: 0px;
if (document.getElementById)
        width: 560px;
resizeIframe(iframeids[i])
}
//reveal iframe for lower end browsers? (see var above):
 
if ((document.all || document.getElementById) && iframehide=="no"){
/* --| end |------------ */  
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
/* --| body styling |-- */
tempobj.style.display="block"
}
}
}


function resizeIframe(frameid){
body {
var currentfr=document.getElementById(frameid)
  background: #131313;
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}


function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}


function loadintoIframe(iframeid, url){
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 3 of 3 |---------- */
if (document.getElementById)
document.getElementById(iframeid).src=url
}


if (window.addEventListener)
  background:url('http://img15.imageshack.us/img15/9931/dangobg1.png'); /* want some new and fresh background? change it here; use jpg format for loading performance */
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller
//#############################################
//Don't change any of the code BEYOND this line
//#############################################


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 3 of 3 |---------- */


  font-family: "Trebuchet MS", sans-serif;
  font-size: 11px;
  text-align: left;
  color: #854C9E;
  height:auto;
}
/* --| end |----------------- */




//########################################
/* -----------------------------------------------------------------------------------------------------------------------------------------| tabbed container settings center |--| start |-- */
//Modify the code below to suit your needs
/* --> the tab container settings are not meant to be adjusted unless you know what are you doing or you are just want to play with the settings <-----| note |-- */
//########################################
function Show(selected_option)
{
  // get our iframe
var testFrame = document.getElementById("myframe");
var val;


//selected_option refers to the "option" value provided in the HTML code
/* Layout helpers ----------------------------------*/
switch(parseInt(selected_option))
.ui-helper-hidden { display: none; }
{
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
case 1:
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
val = "<table align='center' border='1' width='100%'>";
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>";
.ui-helper-clearfix { display: inline-block; }
val += "<img src='[[img link here]]'></td></tr>";
/* required comment for clearfix to work in Opera \*/
val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 1]]</h2></td></tr>";
* html .ui-helper-clearfix { height:1%; }
val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>";
.ui-helper-clearfix { display:block; }
val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>";
/* end clearfix */
val += "<tr><td class='text'>[[Track list 2]]</td><td class='text'>[[Track list 6]]</td></tr>";
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
val += "<tr><td class='text'>[[Track list 3]]</td><td class='text'>[[Track list 7]]</td></tr>";
 
val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>";
/* Component containers ----------------------------------*/
val += "</table>";
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }
  break;
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }
case 2:
.ui-widget-content { border: 1px solid #dddddd; background: #F6FAFD url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #eeeeee; }
val = "<table align='center' border='1' width='100%'>";
.ui-widget-content a { color: #333333; }
val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>";
.ui-widget-header { border: 1px solid #CCCCCC; background: #EEEEFF url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #F6FAFD; font-weight: bold; }
val += "<img src='[[img link here]]'></td></tr>";
.ui-widget-header a { color: #F6FAFD; }
val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 2]]</h2></td></tr>";
 
val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>";
/* Interaction states ----------------------------------*/
val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>";
.ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid #cccccc; background: #f6f6f6 url(images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #1c94c4; outline: none; }
val += "<tr><td class='text'>[[Track list 2]]</td><td class='text'>[[Track list 6]]</td></tr>";
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #1c94c4; text-decoration: none; outline: none; }
val += "<tr><td class='text'>[[Track list 3]]</td><td class='text'>[[Track list 7]]</td></tr>";
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: 1px solid #fbcb09; background: #fdf5ce url(images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #c77405; outline: none; }
val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>";
.ui-state-hover a, .ui-state-hover a:hover { color: #c77405; text-decoration: none; outline: none; }
val += "</table>";
.ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid #CCCCCC; background: #F6FAFD url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #eb8f00; outline: none; }
  break;
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #eb8f00; outline: none; text-decoration: none; }
case 3:
 
val = "<table align='center' border='1' width='100%'>";
/* Tabs ----------------------------------*/
val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>";
.ui-tabs { padding: .2em; zoom: 1; }
val += "<img src='[[img link here]]'></td></tr>";
.ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .2em .2em 0; }
val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 3]]</h2></td></tr>";
.ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .2em -1px 0; padding: 0; }
val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>";
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .5em 1em; }
val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>";
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; }
val += "<tr><td class='text'>[[Track list 2]]</td><td class='text'>[[Track list 6]]</td></tr>";
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
val += "<tr><td class='text'>[[Track list 3]]</td><td class='text'>[[Track list 7]]</td></tr>";
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; }
val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>";
 
val += "</table>";
/* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
  break;
.ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; border-width: 0; background: none; }
case 4:
.ui-tabs .ui-tabs-hide { display: none !important; }
val = "<table align='center' border='1' width='100%'>";
val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>";
val += "<img src='[[img link here]]'></td></tr>";
val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 4]]</h2></td></tr>";
val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>";
val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>";
val += "<tr><td class='text'>[[Track list 2]]</td><td class='text'>[[Track list 6]]</td></tr>";
val += "<tr><td class='text'>[[Track list 3]]</td><td class='text'>[[Track list 7]]</td></tr>";
val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>";
val += "</table>";
  break;
case 5:
val = "<table align='center' border='1' width='100%'>";
val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>";
val += "<img src='[[img link here]]'></td></tr>";
val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 5]]</h2></td></tr>";
val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>";
val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>";
val += "<tr><td class='text'>[[Track list 2]]</td><td class='text'>[[Track list 6]]</td></tr>";
val += "<tr><td class='text'>[[Track list 3]]</td><td class='text'>[[Track list 7]]</td></tr>";
val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>";
val += "</table>";
  break;
default:
  val = "<h2 align='center'>Choose an album/OST from the drop menu</h2><br />";
  break;
}


// now write out the new contents
/* ----------------------------------------------------------------------------------------------------------------------------------------| tabbed container settings center |--| end |-- */
var doc = testFrame.contentDocument;
if (doc == undefined || doc == null)
doc = testFrame.contentWindow.document;
doc.open();
doc.write(val);
doc.close();


  document.all.myFrame.style.visibility="visible";
}
//-->
</script>
</head>


<body>
/* --| message bar positioning control |-- */
<center>
<div class="wrapper">
<br />
<form  id="form1">
<select name="dest" onchange="Show(this.options[this.selectedIndex].value)">


<!-- Modify this part here -->
.overlap1 {
<option value="0">Choose an album/OST</option>
  height: 32px;
<option value="1">[[OST 1]]</option>
  z-index: 2;
<option value="2">[[OST 2]]</option>
  position: relative;
<option value="3">[[OST 3]]</option>
  margin: 0px 0px -16px 0px;
<option value="4">[[OST 4]]</option>
}
<option value="5">[[OST 5]]</option>
<!-- No need for modification beyond this point -->


</select>
/* --| end |---------------------- */
</form>
/* --| message bar styling |-- */  
<iframe  id="myframe" frameborder="0"  vspace="0"  hspace="0"  marginwidth="0" marginheight="0" width="700" 
  scrolling="no" style="overflow:visible; width:100%; display:none"></iframe>
</div>
    </center>
</body>
</html>
</pre>


Sample template image: [http://i369.photobucket.com/albums/oo133/shadowmaniac_2000/JSDropdown.jpg Sample image]
.note {
 
  font-family: "Trebuchet MS", sans-serif;
Sample torrent (slightly modified template): [http://bakabt.me/torrent/143278/KoiKoi7_-_Song_Shu_Paradise_Character_Mini_Albums.html KoiKoi7 - Song Shu Paradise & Character Mini Albums]
  font-size: 11px;
 
  line-height: 16px;
===Simple ChalamiuS OST Template===
  background-color: #FFFFCC;
----
  background-image:url('http://img194.imageshack.us/img194/1986/helpm.png');
[http://bakabt.me/template.php?id=Simple%20ChalamiuS%20HTML%20OST%20Template Click here] to use
  background-position: 3px 50%;
  background-repeat: no-repeat;
  color: #777777;
  height: 16px;
  width: auto;
  border: 1px solid #999999;
  margin: 0px 0px 5px 0px;
  padding: 5px;
  display: block;
}


Go to: [http://bakabt.me/offer.php Offers Page]
.note1 {
  font-family: "Trebuchet MS", sans-serif;
  font-size: 11px;
  line-height: 16px;
  background-color: #FFFFCC;
  background-image:url('http://img194.imageshack.us/img194/1986/helpm.png');
  background-position: 3px 50%;
  background-repeat: no-repeat;
  color: #777777;
  height: 16px;
  width: auto;
  border: 1px solid #999999;
  margin: 0px;
  padding: 5px;
  display: block;
}


=Outdated Templates=
<span style="color:red; font-size:18px;">Please don't use following templates anymore. They are outdated.</span>


===HTML5 CSS3 Anime Template===
.note2 {
----
  font-family: "Trebuchet MS", sans-serif;
  font-size: 11px;
  line-height: 16px;
  background-color: #FFFFCC;
  background-image:url('http://img194.imageshack.us/img194/1986/helpm.png');
  background-position: 3px 50%;
  background-repeat: no-repeat;
  color: #777777;
  height: 16px;
  width: auto;
  border: 1px solid #999999;
  margin: 5px 0px 0px 0px;
  padding: 5px;
  display: block;
}


Submitted by: CvP
/* --| end |-------------------------------------- */
[[File:Html5_CSS3_anime_template_by_cvp.JPG|thumb|300px|Full Sized Screenshot]]
/* --| list styling |-- */  
This anime template utilizes HTML5 and CSS3.
It is compatible with latest IE9/Firefox/Chrome/Safari/Opera as much as possible.<br /><br />


<blockquote>To use this template, you don't need to edit a single line of code.<br />
li {
All you need to do is
  text-align: justify;
*'''fill up the form with all the data and hit submit.'''
  color: #854C9E;
*'''Once template is loaded, right click > "view source" > select all > copy.'''
}
*'''Now go to offer page and paste the code'''.
It is that simple.</blockquote><br />


This template (and the form) will be constantly updated for better compatibility and features. Please leave your feedback in [http://forums.bakabt.me/index.php?topic=26922.0 here]<br />
.divlist {
If you need any help customizing this template, you can post in the above link as well.<br />
  margin: -10px 0px -10px -25px;


'''Note''': It is a good idea to use Firefox4 to view the form (The template should be ok on any newer browsers).
  *margin: -20px 0px -20px -25px;
}


[http://cvp.banglagamer.com/bakabt Click here] to use.<br />
/* --| end |------------ */  
[http://bakabt.me/147902-fate-stay-night-1080p-anime-supreme.html Click here] for a live preview!<br /><br />
/* --| http link styling |-- */
Back to [[Offer_Templates#Templates_preview|top]].


===Generic Revision-2 Anime Template===
a:hover {
----
  color: #854C9E;
}


Submitted by: deysmacro
/* --| end |------------------- */
/* --| paragraph styling |-- */


<pre>
p {
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  text-align: justify;
<html><head>
  color: #854C9E;
  font-weight: bold;
}


<script src="http://www.yourjavascript.com/1103491011/NFLightBox.js" type="text/javascript"></script>
/* --| end |------------- */  
<script type="text/javascript">
/* --| table styling |-- */  
    $(function() {
        var settings = {
            imageLoading: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.loading.gif',
            imageBtnPrev: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.prev.png',
            imageBtnNext: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.next.png',
            imageBtnClose: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.close.png',
            imageBlank: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.blank.gif',
            imageBtnBottomPrev: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.btm.prev.gif',
            imageBtnBottomNext: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.btm.next.gif',
            imageBtnPlay: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.start.png',
            imageBtnStop: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.pause.png',
            containerResizeSpeed: 350 };
        $('#gallery a').lightBox(settings);
    });
</script>


<style type="text/css">
td {
/*  -| general info |-
  vertical-align: left middle;
*
}
*    Main user link  : http://bakabt.me/user/816453/deysmacro.html
 
*    Forum user link : http://forums.bakabt.me/index.php?action=profile;u=816453
/* --| end |------------ */
*
/* --| label styling |-- */  
*    I welcome all of you people to use this template at your convenience.
*    I also can help you guys with the template. I will help whenever I can.
*    Please leave the credit intact if you plan to use this template.
*    Your cooperation is highly appreciated. Thank you.
*    Do contact me via PM or email if you had anything to say.
*
*    Email : deysmacro[at]gmail[dot]com
*
*
*    Originally Customized By : deysmacro
*     Re-Customized By            : PUT YOUR NICK HERE
*
*    Template Version              : 1.0.12 generic revision-2 anime template
*    Template Last Update On : Jan 7th, 2010 @ 11:28am GMT+8
*
*
*    SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2010 | 01 | 07 | g-r2-at | v1.0.12
*
* -| end |- */


/* -| Info you should know |-
.label {
*
  color: #854C9E;
*    Quick Reminder:
  width: 17%;
*    If you found any syntax with * siding with the syntax, it is targeted for IE only.
  text-align: right;
*
}
*
 
*    Example:
.label:hover {
*          Assume "width" is the syntax...
  color: blue;
*
}
*    body {
 
*         width: 100px;    <-- major browser support
/* --| end |------------ */
*
/* --| text styling |-- */
*         *width: 110px;    <-- targeted for IE only
 
*    }
.text {
*
  color: #854C9E;
*
  width: 74%;
*    This is done as to make it IE compatible. It is not required if IE displays the generated page correctly.
}
*    Please take note of this when you are editing.
*
* -| end |- */


#jquery-overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; }
#jquery-lightbox { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; }
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box-top { width: 100%; }
#lightbox-container-image-box-top-left { width: 10%; height: 1px; position: relative; margin: 0 auto; float: left; z-index: 10; display: inline; text-align: left; }
#lightbox-container-image-box-top-middle { width: 80%; padding-top: 5px; height: 5px; position: relative; margin: 0 auto 0 0px; float: left; z-index: 5; display: inline; }
#lightbox-container-image-box-top-middle div.progress { width: 80%; padding-top: 5px; height: 5px; position: relative; margin: 0 auto 0 0px; float: left; background-color: #e4e4e4; z-index: 5; display: inline; }
#lightbox-container-image-box-top-right { width: 10%; height: 1px; position: relative; margin: 0 auto; float: right; text-align: right; z-index: 10; display: inline; }
#lightbox-container-image-box { position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#lightbox-container-image { height: 100%; padding: 10px; }
#lightbox-loading { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#lightbox-nav { position: absolute; top: 32px; left: 0; height: 100%; width: 100%; z-index: 10; }
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none; }
#lightbox-nav-btnPrev, #lightbox-nav-btnNext { width: 49%; height: 100%; zoom: 1; display: block; }
#lightbox-nav-btnPrev { left: 0; float: left; }
#lightbox-nav-btnNext { right: 0; float: right; }
#lightbox-container-image-data-box { font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; padding: 0 10px 0; text-align: left; }
#lightbox-container-image-data #lightbox-image-details { width: 70%; float: left; text-align: left; }
#lightbox-image-details-caption { font-weight: bold; display: block; height: 25px; line-height: 25px; vertical-align: middle; }
#lightbox-image-details-currentNumber { display: block; clear: left; padding-bottom: 1.0em; display: inline; height: 16px; line-height: 16px; vertical-align: middle; }
#lightbox-image-details-previous-image, #lightbox-image-details-previous-text, #lightbox-image-details-next-image, #lightbox-image-details-next-text
{ display: inline; height: 25px; line-height: 25px; vertical-align: middle; cursor: pointer; cursor: hand; }


p { text-align: justify; background-color: #F5E8E0; text-shadow: #CEB0D6 2px 2px 2px; }
.text:hover {
  color: red;
}


.div1 { text-align: center; padding: 5px 10px 5px 10px; *padding: -25px 10px -25px 10px; margin:0px; *margin: 5px 10px 5px 10px; background-color: #F5E8E0; border:1px solid #EFD5BE; }
/* --| end |--------------------------- */
.div2 { margin-top: 15px; }
/* --| headings styling control |-- */
.div3 { margin-top: 10px; }
.div4 { *padding: 10px; }


fieldset { border: 1px solid #CEB0D6; }
.inner {
  background-color: #EEEEFF;
  padding: 10px;
  border: 1px solid #CCCFC8;
  font-family: "Comic Sans MS", "Trebuchet MS", "Times New Roman";
  font-size: 22px;
  font-weight: bold;
  color: #854C9E;
}


.legend1 { color: #710000; text-align: center; text-shadow: #fff -2px -2px 2px; font-weight: bold; background: #E2D5E6; border: 1px solid  #CEB0D6; padding: 5px 250px; *padding: 5px 270px; padding: 5px 193px;] }
.outer2 {
.legend2 { color: #710000; text-align: center; text-shadow: #fff -2px -2px 2px; font-weight: bold; background: #E2D5E6; border: 1px solid  #CEB0D6; padding: 5px 255px; *padding: 5px 275px; padding: 5px 200px;] }  
  z-index: 1;  
.legend3 { color: #710000; text-align: center; text-shadow: #fff -2px -2px 2px; font-weight: bold; background: #E2D5E6; border: 1px solid #CEB0D6; padding: 5px 144px; padding: 5px 142px;] }
  background-color: #EEDDFF;  
.legend4 { color: #710000; text-align: center; text-shadow: #fff -2px -2px 2px; font-weight: bold; background: #E2D5E6; border: 1px solid  #CEB0D6; padding: 5px 235px; padding: 5px 222px;] }  
  margin: 0px;  
  padding: 6px;  
  width: 815px;  
  position: relative;  
  border: 1px solid #CCCFC8;  
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
 
.outer3 {
  background-color: #EEDDFF;  
  margin: 0px 0px 10px 0px;
  padding: 6px;  
  width: 815px;  
  border: 1px solid #CCCFC8;  
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}


#img1 { padding:15px; text-align:center; border:1px solid #EFD5BE; background-color:#fff; margin: 10px; }
/* --| end |------------------------- */
#img2 { padding:10px; text-align:center; border:1px solid #EFD5BE; background-color:#fff; margin-left: 4px; }
/* --| horizontal line control |-- */


body { background-color: #FCF3F4; }
hr {  
  width: 93%;
}


.tr1 { background-color:#F5E8E0; }
.hr1 {
.td1 { border:1px solid #EFD5BE; text-align:right; width:19%; text-shadow: #CEB0D6 2px 2px 2px; }
  margin: 0px;
.td2 { border:1px solid #EFD5BE; text-shadow: #CEB0D6 2px 2px 2px; }


</style>
  *text-align: center;
}


</head>
/* --| end |--------------------------------------------- */
<body>
/* --| pics holder styling |--------------------------- */
<table width='100%'>
 
    <tr>
.pics {
          <td ><img id='img1' src='http://img693.imageshack.us/img693/330/imgcm.jpg' /></td>
  height: auto;
          <td>
  width: auto;
              <fieldset><legend class=legend1>SERIES INFORMATION</legend>
  padding: 0px;
                    <table width=100% cellpadding=5px cellspacing=5px>
  margin: 0px;
                        <tr class=tr1><td class=td1>Main Title:</td><td class=td2>Misutenaide Daisy</td></tr>
  overflow: hidden
                        <tr class=tr1><td class=td1>Official Title:</td><td class=td2>Don`t Leave Me Alone, Daisy</td></tr>
}
                        <tr class=tr1><td class=td1>Japanese Title:</td><td class=td2>みすてないで　デイジー</td></tr>
 
                        <tr class=tr1><td class=td1>Year:</td><td class=td2>03.07.1997 till 18.09.1997</td></tr>
.pics img {
                        <tr class=tr1><td class=td1>Episodes:</td><td class=td2>12</td></tr>
  height: auto;
                        <tr class=tr1><td class=td1>Categories:</td><td class=td2>Comedy, Cyborgs, Mecha, Sci-Fi, Shounen, Slapstick</td></tr>
  width: auto;
                        <tr class=tr1><td class=td1>Director:</td><td class=td2>Yuji Mutoh</td></tr>
  padding: 10px;
                        <tr class=tr1><td class=td1>Production:</td><td class=td2>BeSTACK, d-rights</td></tr>
  border: 1px solid #ccc;
                        <tr class=tr1><td class=td1>References:</td>
  background-color: #fff;
                              <td class=td2>
  top: 0px;
                                  <a href="http://anidb.net/perl-bin/animedb.pl?show=anime&aid=2022" target="_blank">AniDB</a> |
  left: 0px;
                                  <a href="http://www.animenewsnetwork.com/encyclopedia/anime.php?id=137" target="_blank">ANN</a> |
}
                                  <a href="http://www.animenfo.com/animetitle,711,ubabvw,misutenaide_dai.html" target="_blank">AnimeNFO</a>
 
                              </td></tr>
/* --| end |--------------------------------------------------- */
                    </table>
/* --| background box styling |--------------------------- */
          </fieldset>
          <div class=div2>
          <fieldset><legend class=legend2>FILE INFORMATION</legend>
              <table width=100% cellpadding=5px cellspacing=5px>
                    <tr class=tr1><td class=td1>FanSub By:</td><td class=td2><b>A-Et</b></td></tr>
                    <tr class=tr1><td class=td1>Video:</td><td class=td2><b>DivX 5</b> [ 560x420 29.97fps ]</td></tr>
                    <tr class=tr1><td class=td1>Audio:</td><td class=td2><b>Japanese</b> [ MPEG Audio Layer 3 48000Hz stereo 113kbps ]</td></tr>
                    <tr class=tr1><td class=td1>Subtitles:</td><td class=td2><b>English</b> [ Hard-Subbed ]</td></tr>
              </table>
          </fieldset>
          </div>
          </td>
    </tr>
    <tr>
          <td width=30%>
          <div class=div3>
          <fieldset><legend class=legend3>SYNOPSIS</legend>
              <div class=div1><p>Surrounded only by his inventions, Techno doesn't really interact with other people much. However, one day, a girl attempts to "break into" his fortress. This hapless passerby, a girl named Hitomi, becomes the object of his affection. Techno decides to name her "Daisy," and begins planning to make her his, but can Annie and Yamakawa X protect Hitomi or will the science nerd Techno win Hitomi's heart?</p></div>
          </fieldset>
          </div>
          </td>
          <td>
          <div class=div3>
          <fieldset><legend class=legend4>SCREENSHOTS</legend><div class=div4><div id=gallery>
              <a href='http://img706.imageshack.us/img706/5193/dontleavemealonedaisy01.png' ><img id=img2 src='http://img706.imageshack.us/img706/5193/dontleavemealonedaisy01.th.png' border='0'/></a>
              <a href='http://img687.imageshack.us/img687/5193/dontleavemealonedaisy01.png' ><img id=img2 src='http://img687.imageshack.us/img687/5193/dontleavemealonedaisy01.th.png' border='0'/></a>
              <a href='http://img192.imageshack.us/img192/5193/dontleavemealonedaisy01.png' ><img id=img2 src='http://img192.imageshack.us/img192/5193/dontleavemealonedaisy01.th.png' border='0'/></a>
          </div></div></fieldset>
          </div>
          </td>
    </tr>
</table>


</body></html>
/*
</pre>
.rounded1 {
  background-color: #EEDDFF;
  padding: 10px;
  width: auto;
  height: auto;
  border: 1px solid #CCCFC8;
}
*/


Sample template image: [http://wiki.bakabt.me/index.php/File:Generic_Revision-2_Anime_Template.png Click here for full preview]<br />
.rounded2 {
Back to [[Offer_Templates#Templates_preview|top]].
  background-color: #EEEEFF;
  padding: 10px;
  width: auto;
  height: auto;
  border: 1px solid #CCCFC8;
}


===JS Alternative Anime Template - Editing Friendly Edition===
.rounded3 {
----
  background-color: #EEEEFF;
  padding: 5px 10px 5px 10px;
  width: auto;
  height: auto;
  border: 1px solid #CCCFC8;


Submitted by: deysmacro
  *padding: 0px 10px 0px 10px;
}
/* --| end |--------------------------------------------- */


<pre>
</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>


<!-- multi picture presentation timing control -->
<script type="text/javascript">
$('#slideshow').cycle({
    fx:    'all',
    timeout: 5000,
    speed:  1000
});
</script>


<script language="javascript" purpose="User definitions">
<!-- message bar timing control 1 of 3 -->
/* --| start |--| user-edit auto text replacement scripting engine |---------------------------------------------------------------> nothing to edit here - go to edit info center instead <--| note |-- */
<script type="text/javascript">
 
  $(document).ready(function(){
function dcw(input)
   setTimeout(function(){
   { document.write(input); }
  $("#note1").fadeOut("slow", function () {
      useredit = new Object();
  $("#note1").remove();
      related = new Object();
    });


      related.anime_list = new Array();
}, 5000);
      related.ost_list = new Array();
});
      related.pics_list = new Array();
</script>


function add_related(type, title, href)
<!-- message bar timing control 2 of 3 -->
  { var tmp_list;
<script type="text/javascript">
          switch (type) {
  $(document).ready(function(){
                case "anime": target_list = related.anime_list;
  $('#note2').hide();
                    break;
  setTimeout(function(){
                  case "ost" : target_list = related.ost_list;
  $("#note2").fadeIn("slow", function () {
                      break;
  $("#note2").show();
                  case "pics": target_list = related.pics_list;
      });
                      break; }


        tmp_item = new Object();
}, 4990);
 
});
        tmp_item.title = title;
</script>
        tmp_item.href = href;


        target_list.push(tmp_item);
<!-- message bar timing control 3 of 3 -->
  }
<script type="text/javascript">
  $(document).ready(function(){
  setTimeout(function(){
  $("#note3").fadeOut("slow", function () {
  $("#note3").remove();
    });


/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit info center |--| start |-- */
}, 10000);
/* --> most user only need to edit the info here <--------------------------------------------------------------------------------------------------------------------------------------------------------------| note |-- */
});
</script>


<!-- tab container fx control -->
<script type="text/javascript">
  $(function() {
  $("#tabs").tabs({ fx: { opacity: 'toggle' } });
      var fx = $('.selector').tabs('slow', 'fx');
      });
</script>


useredit.heading="Panda Kopanda | Panda! Go Panda! [DivX][MP3]";
</head>
<body>
<!-- advanced user only - body section - NO EDIT GUIDES as i have made it to the point where it is already ready out of the box; basically there is no need to further customized it anymore -->




useredit.maintitle="Panda Kopanda";
<div class="overlap1">
useredit.officialtitle="Panda! Go Panda";
<div id="note3">
useredit.japanesetitle="パンダコパンダ ";
<div id="note2" class="note">
useredit.year="1972 & 1973";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;In case the pictures are not properly fetched/displayed, refresh this page to see if it helps.
useredit.episodes="2 combined into 1";
</div>
useredit.categories="Adventure, Anthropomorphism, Comedy, Contemporary Fantasy, Fantasy";
</div>
useredit.director="Isao Takahata";
<div id="note1" class="note">
useredit.production="Shunzo Kato";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;If this message does not go away, means that Javascripts support is disabled or this page loads improperly.
Enable Javascripts support and/or refresh this page to see if it helps.
</div>
</div>


<div class="outer2">
<div class="inner"><script>dcw(useredit.heading);</script></div>


/* --> if any of the reference link is unavailable, just replace it with # <----------------------------------------------------------------------------------------------------------------------------------| note |-- */
<div class="button">
useredit.anidb = "http://anidb.net/perl-bin/animedb.pl?show=anime&aid=530";
<table class="file_info">
useredit.animenfo = "http://www.animenfo.com/animetitle,2379,stbesx,panda_kopanda.html";
<tr>
useredit.ann = "http://www.animenewsnetwork.com/encyclopedia/anime.php?id=352";
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the title source.</span><div>SRCS</div></td>
useredit.officialpage = "http://www.nausicaa.net/miyazaki/panda/";
<td class="info_a"><div><script>dcw(useredit.srcs_left);</script></div></td>
 
<td class="info_b"><div><script>dcw(useredit.srcs_right);</script></div></td>
 
<td />
useredit.synopsis=
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script>dcw(useredit.tooltip_label_vids);</script></span><div>VIDS</div></td>
"Panda Kopanda (Panda! Go Panda!) is a 30 minute movie made in 1972. Miyazaki created the original idea, the script, the layouts, and did key animation, and Takahata directed the film.<br><br>The story is about a little girl, Mimiko, who was left alone while her Grandma was away.<br><br>A 1973 sequel, Panda Kopanda: Amefuri Saakasu no Maki (Panda! Go Panda! & the Rainy-day Circus), continues the story and was made by the same people who made the first movie. <br><br>The literal translation of the title Panda Kopanda is 'Panda, Baby Panda', but it's been released in North America as Panda Go Panda.";
<td class="info_a"><div><script>dcw(useredit.vids_left);</script></div></td>
 
<td class="info_b"><div><script>dcw(useredit.vids_right);</script></div></td>
 
<td />
useredit.fansub="<b>No Information</b>";
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script>dcw(useredit.tooltip_label_auds);</script></span><div>AUDS</div></td>
useredit.note="Please continue seeding as much as you can.<br>Thank you guys.";
<td class="info_a"><div><script>dcw(useredit.auds_left);</script></div></td>
<td class="info_b"><div><script>dcw(useredit.auds_right);</script></div></td>
<td />
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script>dcw(useredit.tooltip_label_subs);</script></span><div>SUBS</div></td>
<td class="info_a"><div><script>dcw(useredit.subs_left);</script></div></td>
<td class="info_b"><div><script>dcw(useredit.subs_right);</script></div></td>
</tr>
</table>
</div>
</div>


<div class="hr1"><hr></div>


useredit.srcs_left="";
<div class="divwhole">
useredit.srcs_right="DVD";


<div class="divpic">
<table style="background-color: transparent;" cellpadding="0" cellspacing="0" height="100%">
<tr><td>
<div id="slideshow" class="pics"></div>
<script language="javascript" purpose="Print related pics">
for (i in related.pics_list) { document.getElementById("slideshow").innerHTML += '<img src="'+related.pics_list[i].href +'" />'; }
</script>
</td></tr>
</table>
</div>


useredit.vids_left="DIVX";
<div class="divtab">
useredit.vids_right="704X544";
<div id="tabs">
<ul>
<li><a href="#tabs-1">Series Information</a></li>
<li><a href="#tabs-2">File Information - Related Anime - Related OST</a></li>
<li><a href="#tabs-3">Synopsis</a></li>
</ul>


<div id="tabs-1">
<table style="background-color: transparent;" cellpadding="3" cellspacing="0" height="100%" width="100%">
<tr>
<td class="label"><div class="rounded1">Main Title:</div></td>
<td class="text"><div class="rounded2"><script>dcw(useredit.maintitle);</script></div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Official Title:</div></td>
<td class="text"><div class="rounded2"><script>dcw(useredit.officialtitle);</script></div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Japanese Title:</div></td>
<td class="text"><div class="rounded2"><script>dcw(useredit.japanesetitle);</script></div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Year:</div></td>
<td class="text"><div class="rounded2"><script>dcw(useredit.year);</script></div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Episodes:</div></td>
<td class="text"><div class="rounded2"><script>dcw(useredit.episodes);</script></div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Categories:<br><br></div></td>
<td class="text"><div class="rounded2"><script>dcw(useredit.categories);</script></div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Director:</div></td>
<td class="text"><div class="rounded2"><script>dcw(useredit.director);</script></div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Production:</div></td>
<td class="text"><div class="rounded2"><script>dcw(useredit.production);</script></div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">References:</div></td>


useredit.auds_left="JP";
<td class="text"><div class="rounded2">
useredit.auds_right="MP3  24KHZ";
<a id="link_anidb" target="_blank">AniDB</a> |
 
<a id="link_animenfo" target="_blank">AnimeNFO</a> |
 
<a id="link_ann" target="_blank">ANN</a> |
useredit.subs_left="EN";
<a id="link_officialpage" target="_blank">Official Page</a>
useredit.subs_right="HARD";
</div></td>
</tr>
</table>
</div>


<div id="tabs-2">
<table style="background-color: transparent;" cellpadding="3" cellspacing="0" height="100%" width="100%">
<tr>
<td class="label"><div class="rounded1"><b>HINT</b>:</div></td>
<td class="text"><br>Hover on the quick file summary for more information.<br><br></td>
</tr>
<tr>
<td class="label"><div class="rounded1">FanSub by:</div></td>
<td class="text"><div class="rounded2"><script>dcw(useredit.fansub);</script></div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Note:<br><br></div></td>
<td class="text"><div class="rounded2"><script>dcw(useredit.note);</script></div></td>
</tr>
<tr>
<td><br>&nbsp;<br></td>
<td><br><hr><br></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Related Anime:<br></div></td>


useredit.tooltip_label_vids="This title has been encoded with <b>DivX 6 - 704 x 544 29.97fps</b>.";
<td class="text">
useredit.tooltip_label_auds="This title utilized <b>MPEG Audio Layer 3 24000Hz stereo 48Kbps</b>.";
<div class="rounded2">
useredit.tooltip_label_subs="This title has been <b>hard-subbed</b>.";
<ul>
 
<div class="divlist">
 
<script language="javascript" purpose="Print related anime">
/* --> this is an array of links; means that the link could be add or remove at your will; the link here would be dynamically generated accordingly <-------------------------------------| note |-- */
for (i in related.anime_list)
add_related("anime", "Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]", "http://bakabt.me/torrent/10676/Panda_Kopanda_Panda_Go_Panda_DVD_DivX_MP3.html");
{ document.write('<li><a href="'+related.anime_list[i].href +'" target="_blank">'+ related.anime_list[i].title + '</a></li>'); }
add_related("anime", "Dummy link", "#");
</script>
</div>
</ul>
</div>
</td>
</tr>
<tr>
<td class="label"><div class="rounded1">Related OST:<br><br></div></td>
<td class="text">
<div class="rounded2">
<ul>
<div class="divlist">
<script language="javascript" purpose="Print related ost">
for (i in related.ost_list)
{ document.write('<li><a href="'+related.ost_list[i].href +'" target="_blank">'+ related.ost_list[i].title + '</a></li>'); }
</script>
</div>
</ul>
</div>
</td>
</tr>
</table>
</div>
<div id="tabs-3">
<table style="background-color: transparent;" cellpadding="0" cellspacing="0" height="100%">
<tr>
<td><div class="rounded3">
<p>
<script>dcw(useredit.synopsis);</script>
</p>
</div></td>
</tr>
</table>
</div>
</div>


</div>


/* --> this is an array of links; means that the link could be add or remove at your will; the link here would be dynamically generated accordingly <-------------------------------------| note |-- */
</div>
add_related("ost", "No related link", "#");
add_related("ost", "Dummy link", "#");


<div class="hr1"><hr></div>


/* --> this is an array of pics; means that the pics could be add or remove at your will; the pics here would be dynamically generated accordingly; 320px max width if possible; use jpg format for loading performance <| note |-- */
<div class="outer3">
add_related("pics", "#", "http://img39.imageshack.us/img39/280/pandakopanda.jpg");
  <div class="inner">Screenshots</div>
add_related("pics", "#", "http://img39.imageshack.us/img39/280/pandakopanda.jpg");
</div>
add_related("pics", "#", "http://img39.imageshack.us/img39/280/pandakopanda.jpg");


</body>


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit info center |--| end |-- */
<!-- reference link text replacement engine -->
/* --| end |--| user-edit auto text replacement scripting engine |---------------------------------------------------------------------------------------------------------------------------------------------------- */
<script language="javascript">
document.getElementById('link_anidb').href= useredit.anidb;
document.getElementById('link_animenfo').href= useredit.animenfo;
document.getElementById('link_ann').href= useredit.ann;
document.getElementById('link_officialpage').href= useredit.officialpage;
</script>
</script>


<!-- tab container scripting engine -->
<script src="http://deysmacro.uuuq.com/resources/bakabt/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>


<!-- multi picture presentation scripting engine -->
</html>
<script src="http://deysmacro.uuuq.com/resources/bakabt/jquery.cycle.all.min.js" type="text/javascript"></script>


<!-- imgs block could be added or removed at will; recommended at least 4 blocks; use png format only -->
[screenshot]
  [img]http://img24.imageshack.us/img24/9528/snapshot20090509131128j.png[/img]
  [img]http://img17.imageshack.us/img17/7907/snapshot20090509131221.png[/img]
  [img]http://img4.imageshack.us/img4/3651/snapshot20090509131238.png[/img]
  [img]http://img14.imageshack.us/img14/2361/snapshot20090509131248.png[/img]
  [img]http://img22.imageshack.us/img22/197/snapshot20090509131326.png[/img]
[/screenshot]
</pre>


<style type="text/css">
Sample template image: [http://wiki.bakabt.me/index.php/File:JS_Alternative_Anime_Template.png Click here for full preview]<br />
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| general info section |--| start |---
Back to [[Offer_Templates#Templates_preview|top]].
* Thanks To        : kureshii, Jarudin
 
* Thanks Also To : enginarc, DaggerLite, blubart
===Pure CSS Driven Anime Template - Alternative===
----
 
Submitted by: deysmacro
 
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 
<style type="text/css">
/* --------------------------------------------------------------------------------------------------------------------------------------------| some note |-----
*
*
* Originally Customized By : deysmacro
* Please take note. The indentation should look correctly using Firefox.
* Re-Customized By            : PUT YOUR NICK HERE
*
*
* Template Version              : 3.2.2.1 js alternative - editing friendly edition
* Although I have taken all possible steps that it should look correct, using IE will somehow still make it look a little bit weird.
* Template Last Update On : July 26th, 2009 @ 17:28pm GMT+8
* When that happen, please use Firefox.
*
*
* Please leave the credit intact if you plan to use this template.
* Thank you for your understanding.
* Your cooperation is highly appreciated.  
*
*
* Hopefully you enjoy using this template
* --------------------------------------------------------------------------------------------------------------------------------------------| general info |-----
* Thank you for your time and good day.
* --------------------------------------------------------------------------------------------------------------------------------------------------------| SN |-----
* SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2009 | 07 | 26 | 0720 | d-ait | v3221 | 36
* ---------------------------------------------------------------------------------------------------------------------------------| Info you should know |-----
* Quick Reminder:
* If you found any syntax with * siding with the syntax, it is targeted for IE only.
*
*
* Example:
* Main user link : http://bakabt.me/user/816453/deysmacro.html
* Assume "width" is the syntax...
* Forum user link : http://forums.bakabt.me/index.php?action=profile;u=816453
*
*
* body {
* I welcome all of you people to use this template at your convenience.
* width: 100px;       <-- major browser support
* Do contact me via PM or email if you had anything to say.
*
* Email : deysmacro[at]gmail[dot]com
*
* I also can help you guys with the template.
* I will help whenever I can.
*
* Thanks To : kureshii, Jarudin, xchiamiov
* Thanks Also To : DaggerLite, enginarc, mrdkreka, blubart
*
* Originally Customized By : deysmacro
* Re-Customized By : YOUR NICK HERE
*
* Template Version : 3.3.3.1 pure css driven - alternative
* Template Last Update On : July 20th, 2009 @ 23:28pm GMT+8
*
* Please leave the credit intact if you plan to use this template.
* Your cooperation is highly appreciated. Thank you.
*
* --------------------------------------------------------------------------------------------------------------------------------------------------------| SN |-----
* SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2009 | 07 | 19 | 0720 | d-ait | v3331 | 13
* ---------------------------------------------------------------------------------------------------------------------------------| Info you should know |-----
*
* Quick Reminder:
* If you found any syntax with * siding with the syntax, it is targeted for IE only.
*
*
* Example:
* Assume "width" is the syntax...
*
* body {
* width: 100px; <-- major browser support
*
*
* *width: 110px;       <-- targeted for IE only
* *width: 110px; <-- targeted for IE only
* }
* }
*
*
*
* This is done as to make it IE compatible. It is not required if IE displays the generated page correctly.
* This is done as to make it IE compatible. It is not required if IE displays the generated page correctly.
* Please take note of this when you are editing.
* Please take note of this when you are editing.
* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| general info section |--| end |-- */
*
 
* ---------------------------------------------------------------------------------------------------------------------------------------------------| end |----- */
 
/*
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| read first before carry on --| start |--
* Nothing much to change or edit about the template appearance since it is 99% ready out of the box.
   
* I will put some edit guides at the critical point only. The rest doesn't need to be edited unless you know what are you doing or you just want to play with the settings.
        Note:
*
        1. This template is pretty much already ready out of the box and usually doesn't need to be customized anymore.
* Hopefully you guys enjoy using this template. Good day people.
        2. I will put edit hint at critical point only where the edit usually doesn't need to be done unless the generated page is somehow not quite right.
*/
        3. Just find any 'edit point xx of xx' for quick edit target.
/* ------------------------------------------------------------------------------------------------------------| quick file summary control center |----- */
        4. Other settings which have no edit point or edit hint is meant to be left as it is and for advanced user only.
        5. Advanced user may edit the settings but I highly not recommended as it should be fine without to be customized.
        6. Go directly to bottom to edit the screenshot img links.
 
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| read first before carry on --| end |-- */
 
 
/* ---------------------------------------------------------------------------------------------------------| quick file summary control center |----- */
/* --| whole table positioning control |-- */
/* --| whole table positioning control |-- */


.button {
.button {
margin: 0px;
margin: 0px;
}
}


Line 2,112: Line 2,399:
margin-left: auto;
margin-left: auto;
margin-right: auto;
margin-right: auto;
margin-top: 6px;
margin-top: 5px;
margin-bottom: 0px;
width: auto;
width: auto;


*border-collapse: collapse;
*border-collapse: collapse;
}
}


Line 2,125: Line 2,412:
z-index: 9;
z-index: 9;
cursor: help;
cursor: help;
}
}


Line 2,132: Line 2,420:
td.info_label span {
td.info_label span {
display: none;  
display: none;  
}
}


Line 2,155: Line 2,444:
display: block;
display: block;


*width: 350px; /* no need to adjust the tooltip width unless needed */
*bottom: 16px;
*left: -80px;
*text-align: left;


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 1 of 3 |---------- */
}


*width: 350px; /* for IE only - no need to adjust the tooltip width unless needed */
/* --| end |---------------------------------------- */
 
/* --| individual left side content control |-- */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 1 of 3 |---------- */
 
 
*bottom: 16px;
*left: -80px;
*text-align: left;
}
 
/* --| end |---------------------------------------- */
/* --| individual left side content control |-- */


td.info_label {
td.info_label {
Line 2,182: Line 2,465:


*font-size: 9px;
*font-size: 9px;
}
}


Line 2,200: Line 2,484:


*font-size: 9px;
*font-size: 9px;
}
}


Line 2,218: Line 2,503:


*font-size: 9px;
*font-size: 9px;
}
}


/* --| end |----------------------------------------------------- */
/* --| end |----------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */


/* ---------------------------------------------------------------------------------------------------------------------------------| message bar styling control |---- */


/* --| div which holds divpic and divtab |-- */  
.note1 {
font-family: "Trebuchet MS", sans-serif;
font-size: 11px;
line-height: 16px;
background-color: #FFFFCC;
background-image:url('http://img194.imageshack.us/img194/1986/helpm.png');
background-position: 3px 50%;
background-repeat: no-repeat;
color: #777777;
height: 16px;
width: auto;
border: 1px solid #999999;
margin: 0px;
padding: 5px;
display: block;


.divwhole {
}
        margin: 23px 0px 20px 0px;
        padding: 0px;


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 2 of 3 |---------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------| container control |---- */
/* --| top half container control |-- */
 
.divtop {
margin: 0px;
padding: 0px;
height: 410px; /* no need to adjust the height unless needed */


        height: 460px; /* this height only need to be adjusted when necessary only */
}


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 2 of 3 |---------- */
/* --| end |----------------------------- */
/* --| top left container control |-- */


.divtl {
margin: 0px 0px 0px 10px;
padding: 10px;
width: 520px;


        *margin: 35px 0px -5px 0px;
}
}


/* --| end |--------------------------- */  
/* --| end |------------------------------- */
/* --| div which holds the pics |-- */  
/* --| top right container control |-- */
 
.divtr {
margin: -415px 0px 0px 540px;
padding: 10px;


.divpic {
*margin: -410px 0px 0px 540px;
        margin: 0px 0px 0px 20px;
        padding: 0px;


        *margin: -25px -365px 0px 20px;
}
}


/* --| end |--------------------------------------- */  
/* --| end |---------------------------------- */
/* --| div which holds the tab container |-- */  
/* --| bottom half container control |-- */


.divtab {
.divbottom {
        margin: -450px 0px 0px 360px;
margin: 5px 0px 0px 0px;
        padding: 0px;
padding: 0px;
        width: 560px;
height: 340px; /* no need to adjust the height unless needed */
}
 
*margin: 0px;
*height: 335px; /* no need to adjust the height unless needed */


/* --| end |------------ */
}
/* --| body styling |-- */


body {
/* --| end |---------------------------------- */
  background: #131313;
/* --| bottom left container control |-- */


.divbl {
margin: 0px 0px 0px 10px;
padding: 10px;
width: 520px;


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 3 of 3 |---------- */
}


  background:url('http://img15.imageshack.us/img15/9931/dangobg1.png'); /* want some new and fresh background? change it here; use jpg format for loading performance */
/* --| end |------------------------------------ */
/* --| bottom right container control |-- */


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 3 of 3 |---------- */
.divbr {
margin: -330px 0px 0px 540px; /* no need to adjust the height unless needed */
padding: 10px;


*margin: -320px 0px 0px 540px; /* no need to adjust the height unless needed */


  font-family: "Trebuchet MS", sans-serif;
  font-size: 11px;
  text-align: left;
  color: #854C9E;
  height:auto;
}
}


/* --| end |----------------- */  
/* --| end |------------------------------------ */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */


/* ---------------------------------------------------------------------------------------------------------------------------------------------| list styling control |---- */


/* -----------------------------------------------------------------------------------------------------------------------------------------| tabbed container settings center |--| start |-- */
.div5 {
/* --> the tab container settings are not meant to be adjusted unless you know what are you doing or you are just want to play with the settings <-----| note |-- */
margin: -10px 0px -10px -25px;
 
*margin: -20px 0px -20px -25px;
 
}


/* Layout helpers ----------------------------------*/
li {
.ui-helper-hidden { display: none; }
text-align: justify;
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
color: #854C9E;
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Component containers ----------------------------------*/
}
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #dddddd; background: #F6FAFD url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #eeeeee; }
.ui-widget-content a { color: #333333; }
.ui-widget-header { border: 1px solid #CCCCCC; background: #EEEEFF url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #F6FAFD; font-weight: bold; }
.ui-widget-header a { color: #F6FAFD; }


/* Interaction states ----------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
.ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid #cccccc; background: #f6f6f6 url(images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #1c94c4; outline: none; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #1c94c4; text-decoration: none; outline: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: 1px solid #fbcb09; background: #fdf5ce url(images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #c77405; outline: none; }
.ui-state-hover a, .ui-state-hover a:hover { color: #c77405; text-decoration: none; outline: none; }
.ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid #CCCCCC; background: #F6FAFD url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #eb8f00; outline: none; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #eb8f00; outline: none; text-decoration: none; }


/* Tabs ----------------------------------*/
/* -------------------------------------------------------------------------------------------------------------------------------| whole content styling control |---- */
.ui-tabs { padding: .2em; zoom: 1; }
/* --| body control |-- */
.ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .2em -1px 0; padding: 0; }
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .5em 1em; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; }


/* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
body {
.ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; border-width: 0; background: none; }
background: #131313;
.ui-tabs .ui-tabs-hide { display: none !important; }
background:url('http://img15.imageshack.us/img15/9931/dangobg1.png'); /* want some fresh background? change it here */
font-family: "Trebuchet MS", sans-serif;
font-size: 11px;
text-align: left;
color: #854C9E; /* main font color */
height:auto;


/* ----------------------------------------------------------------------------------------------------------------------------------------| tabbed container settings center |--| end |-- */
}


/* --| end |-------------------- */
/* --| paragraph control |-- */


/* --| message bar positioning control |-- */
p {
text-align: justify;
color: #854C9E;
font-weight: bold;


.overlap1 {
  height: 32px;
  z-index: 2;
  position: relative;
  margin: 0px 0px -16px 0px;
}
}


/* --| end |---------------------- */
/* --| end |-------------------- */
/* --| message bar styling |-- */  
/* --| main table control |-- */
 
td {
vertical-align: left middle;


.note {
  font-family: "Trebuchet MS", sans-serif;
  font-size: 11px;
  line-height: 16px;
  background-color: #FFFFCC;
  background-image:url('http://img194.imageshack.us/img194/1986/helpm.png');
  background-position: 3px 50%;
  background-repeat: no-repeat;
  color: #777777;
  height: 16px;
  width: auto;
  border: 1px solid #999999;
  margin: 0px 0px 5px 0px;
  padding: 5px;
  display: block;
}
}


.note1 {
.table1 {
  font-family: "Trebuchet MS", sans-serif;
background-color: transparent;
  font-size: 11px;
cellpadding: 2px;
  line-height: 16px;
cellspacing: 0px;
  background-color: #FFFFCC;
height: 100%;
  background-image:url('http://img194.imageshack.us/img194/1986/helpm.png');  
width: 100%;
  background-position: 3px 50%;  
 
  background-repeat: no-repeat;
  color: #777777;
  height: 16px;
  width: auto;
  border: 1px solid #999999;
  margin: 0px;
  padding: 5px;
  display: block;
}
}


 
.table2 {
.note2 {
background-color: transparent;
  font-family: "Trebuchet MS", sans-serif;
cellpadding: 0px;  
  font-size: 11px;
cellspacing: 0px;
  line-height: 16px;
height: 100%;
  background-color: #FFFFCC;
width: 100%;
  background-image:url('http://img194.imageshack.us/img194/1986/helpm.png');  
 
  background-position: 3px 50%;  
  background-repeat: no-repeat;
  color: #777777;
  height: 16px;
  width: auto;
  border: 1px solid #999999;
  margin: 5px 0px 0px 0px;
  padding: 5px;
  display: block;
}
}


/* --| end |-------------------------------------- */  
/* --| end |--------------------------- */
/* --| list styling |-- */  
/* --| headings styling control |-- */
 
.inner {
background-color:#EEEEFF;
padding: 10px;
border: 1px solid #CCCFC8;
font-family: "Comic Sans MS", "Trebuchet MS", "Times New Roman";
font-size: 22px;
font-weight: bold;
color: #854C9E;


li {
  text-align: justify;
  color: #854C9E;
}
}


.divlist {
.outer2 {
  margin: -10px 0px -10px -25px;
z-index: 1;
background-color: #EEDDFF;
margin: 10px 0px 0px 0px;
padding: 6px; width: 815px;
position: relative;
border: 1px solid #CCCFC8;
text-align: center;
margin-left: auto;
margin-right: auto;


  *margin: -20px 0px -20px -25px;
}
}


/* --| end |------------ */
.outer3 {
/* --| http link styling |-- */
background-color: #EEDDFF;
margin: 0px 0px 10px 0px;
padding: 6px;
width: 815px;
border: 1px solid #CCCFC8;
text-align: center;
margin-left: auto;
margin-right: auto;


a:hover {
  color: #854C9E;
}
}


/* --| end |------------------- */  
/* --| end |------------------------- */
/* --| paragraph styling |-- */  
/* --| horizontal line control |-- */
 
hr {
width: 93%;


p {
  text-align: justify;
  color: #854C9E;
  font-weight: bold;
}
}


/* --| end |------------- */
.hr1 {
/* --| table styling |-- */
margin: 0px;
 
*text-align: center;


td {
  vertical-align: left middle;
}
}


/* --| end |------------ */  
/* --| end |--------------------------- */
/* --| label styling |-- */  
/* --| picture content control |-- */


.label {
.pics {  
  color: #854C9E;
height: auto;  
  width: 17%;  
width: auto;  
  text-align: right;
padding: 0px;  
}
margin: 0px;
overflow: hidden;


.label:hover {
  color: blue;
}
}


/* --| end |------------ */
.pics img {
/* --| text styling |-- */
height: auto;
width: auto;
padding: 10px;
border: 1px solid #ccc;
background-color: #fff;
top: 0px;
left: 0px;


.text {
  color: #854C9E;
  width: 74%;
}
}


/* --| end |---------------------- */
/* --| label styling control |-- */


.text:hover {
.label {
  color: red;
color: #854C9E;
}
width: 26%;  
text-align: right;
 
}


/* --| end |--------------------------- */
.label:hover {
/* --| headings styling control |-- */
color: blue;


.inner {
  background-color: #EEEEFF;
  padding: 10px;
  border: 1px solid #CCCFC8;
  font-family: "Comic Sans MS", "Trebuchet MS", "Times New Roman";
  font-size: 22px;
  font-weight: bold;
  color: #854C9E;
}
}


.outer2 {
/* --| end |--------------------- */
  z-index: 1;
/* --| text styling control |-- */
  background-color: #EEDDFF;
 
  margin: 0px;
.text {
  padding: 6px;
color: #854C9E;
  width: 815px;
width: 74%;  
  position: relative;
 
  border: 1px solid #CCCFC8;  
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
}


.outer3 {
.text:hover {
  background-color: #EEDDFF;
color: red;
  margin: 0px 0px 10px 0px;
 
  padding: 6px;
  width: 815px;  
  border: 1px solid #CCCFC8;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
}


/* --| end |------------------------- */
/* --| end |--------------------------- */
/* --| horizontal line control |-- */
/* --| label box styling control |-- */
 
.rounded1 {
background-color:#EEDDFF;
padding: 10px;
width: auto;
height: auto;
border: 1px solid #CCCFC8; 


hr {
  width: 93%;
}
}


.hr1 {
/* --| end |--------------------------- */
  margin: 0px;
/* --| text box styling control |-- */
 
.rounded2 {
background-color:#EEEEFF;
padding: 10px;
width: auto;
height: auto;
border: 1px solid #CCCFC8;  


  *text-align: center;
}
}


/* --| end |--------------------------------------------- */
/* --| end |-------------------------------- */
/* --| pics holder styling |--------------------------- */
/* --| synopsis box styling control |-- */
 
.rounded3 {
background-color:#EEEEFF;
padding: 5px 10px 5px 10px;
width: auto;
height: auto;
border: 1px solid #CCCFC8; 


.pics {
  height: auto;
  width: auto;
  padding: 0px;
  margin: 0px;
  overflow: hidden
}
}


.pics img {
/* --| end |-------------------------------- */
  height: auto;
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
  width: auto;
</style>
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  top: 0px;
  left: 0px;
}


/* --| end |--------------------------------------------------- */
</head>
/* --| background box styling |--------------------------- */
<body>


/*
<div class="outer2">
.rounded1 {
  background-color: #EEDDFF;
  padding: 10px;
  width: auto;
  height: auto;
  border: 1px solid #CCCFC8;
}
*/


.rounded2 {
  background-color: #EEEEFF;
  padding: 10px;
  width: auto;
  height: auto;
  border: 1px solid #CCCFC8;
}


.rounded3 {
<!-- the title heading -->
  background-color: #EEEEFF;
  padding: 5px 10px 5px 10px;
  width: auto;
  height: auto;
  border: 1px solid #CCCFC8;


  *padding: 0px 10px 0px 10px;
<div class="inner">Panda Kopanda | Panda! Go Panda! [DivX][MP3]</div>
}
/* --| end |--------------------------------------------- */


</style>
<div class="button">
<table class="file_info">


<!-- multi picture presentation timing control -->
<script type="text/javascript">
$('#slideshow').cycle({
    fx:    'all',
    timeout: 5000,
    speed:  1000
});
</script>


<!-- message bar timing control 1 of 3 -->
<!-- tooltip and quick file summary area -->
<script type="text/javascript">
  $(document).ready(function(){
  setTimeout(function(){
  $("#note1").fadeOut("slow", function () {
  $("#note1").remove();
    });


}, 5000);
<tr>
  });
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the title source.</span><div>SRCS</div></td>
</script>
<td class="info_a"><div>&nbsp;</div></td>
<td class="info_b"><div>DVD</div></td>
<td />
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This title has been encoded with <b>DivX 6 - 704 x 544 29.97fps</b>.</span><div>VIDS</div></td>
<td class="info_a"><div>DIVX</div></td>
<td class="info_b"><div>704X544</div></td>
<td />
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This title utilized <b>MPEG Audio Layer 3 24000Hz stereo 48Kbps</b>.</span><div>AUDS</div></td>
<td class="info_a"><div>JP</div></td>
<td class="info_b"><div>MP3 24KHZ</div></td>
<td />
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This title has been <b>hard-subbed</b>.</span><div>SUBS</div></td>
<td class="info_a"><div>EN</div></td>
<td class="info_b"><div>HARD</div></td>
</tr>
</table>
</div>
 
</div>


<!-- message bar timing control 2 of 3 -->
<div class="hr1"><hr></div>
<script type="text/javascript">
  $(document).ready(function(){
  $('#note2').hide();
  setTimeout(function(){
  $("#note2").fadeIn("slow", function () {
  $("#note2").show();
      });


}, 4990);
<div class="divtop">
});
</script>


<!-- message bar timing control 3 of 3 -->
<div class="divtl">
<script type="text/javascript">
<fieldset>
  $(document).ready(function(){
  setTimeout(function(){
  $("#note3").fadeOut("slow", function () {
  $("#note3").remove();
    });


}, 10000);
<legend>| Series Information |</legend>
});
</script>


<!-- tab container fx control -->
<script type="text/javascript">
  $(function() {
  $("#tabs").tabs({ fx: { opacity: 'toggle' } });
      var fx = $('.selector').tabs('slow', 'fx');
      });
</script>


</head>
<!-- add or remove <br> accordingly when you editing the info below; it is some sort of box height matching with the content -->
<body>
<!-- edit the info accordingly -->
<!-- advanced user only - body section - NO EDIT GUIDES as i have made it to the point where it is already ready out of the box; basically there is no need to further customized it anymore -->
 
<table class="table1">
<tr>
<td class="label"><div class="rounded1">Main Title:</div> </td>
<td class="text"><div class="rounded2">Panda Kopanda</div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Official Title:</div></td>
<td class="text"><div class="rounded2">Panda! Go Panda!</div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Japanese Title:</div></td>
<td class="text"><div class="rounded2">パンダコパンダ</div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Year:</div></td>
<td class="text"><div class="rounded2">1972 & 1973</div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Episodes:</div></td>
<td class="text"><div class="rounded2">2 combined into 1</div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Categories:<br><br></div></td>
<td class="text"><div class="rounded2">Adventure, Anthropomorphism, Comedy, Contemporary Fantasy, Fantasy</div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Director:</div></td>
<td class="text"><div class="rounded2">Isao Takahata</div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Production:</div></td>
<td class="text"><div class="rounded2">Shunzo Kato</div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">References:</div></td>
<td class="text">
<div class="rounded2">




<div class="overlap1">
<!-- edit the info accordingly -->
<div id="note3">
<div id="note2" class="note">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;In case the pictures are not properly fetched/displayed, refresh this page to see if it helps.
</div>
</div>
<div id="note1" class="note">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;If this message does not go away, means that Javascripts support is disabled or this page loads improperly.
Enable Javascripts support and/or refresh this page to see if it helps.
</div>
</div>
 
<div class="outer2">
<div class="inner"><script>dcw(useredit.heading);</script></div>


<div class="button">
<a href="http://anidb.net/perl-bin/animedb.pl?show=anime&aid=530" target="_blank">AniDB</a> |
<table class="file_info">
<a href="http://www.animenfo.com/animetitle,2379,stbesx,panda_kopanda.html" target="_blank">AnimeNFO</a> |
<tr>
<a href="http://www.animenewsnetwork.com/encyclopedia/anime.php?id=352" target="_blank">ANN</a> |
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the title source.</span><div>SRCS</div></td>
<a href="http://www.nausicaa.net/miyazaki/panda/" target="_blank">Official Page</a>
<td class="info_a"><div><script>dcw(useredit.srcs_left);</script></div></td>
</div>
<td class="info_b"><div><script>dcw(useredit.srcs_right);</script></div></td>
</td>
<td />
</tr>
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script>dcw(useredit.tooltip_label_vids);</script></span><div>VIDS</div></td>
</table>
<td class="info_a"><div><script>dcw(useredit.vids_left);</script></div></td>
<td class="info_b"><div><script>dcw(useredit.vids_right);</script></div></td>
<td />
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script>dcw(useredit.tooltip_label_auds);</script></span><div>AUDS</div></td>
<td class="info_a"><div><script>dcw(useredit.auds_left);</script></div></td>
<td class="info_b"><div><script>dcw(useredit.auds_right);</script></div></td>
<td />
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script>dcw(useredit.tooltip_label_subs);</script></span><div>SUBS</div></td>
<td class="info_a"><div><script>dcw(useredit.subs_left);</script></div></td>
<td class="info_b"><div><script>dcw(useredit.subs_right);</script></div></td>
</tr>
</table>
</div>
</div>


<div class="hr1"><hr></div>
</fieldset>
</div>
<div class="divtr">
<fieldset>


<div class="divwhole">
<legend>| Main Picture |</legend>


<div class="divpic">
<table class="table2">
<table style="background-color: transparent;" cellpadding="0" cellspacing="0" height="100%">
<tr>
<tr><td>
<td>
<div id="slideshow" class="pics"></div>
<div class="pics">
<script language="javascript" purpose="Print related pics">
 
for (i in related.pics_list) { document.getElementById("slideshow").innerHTML += '<img src="'+related.pics_list[i].href +'" />'; }
 
</script>
<!-- picture height should be 340px max; you may use your preferred height though -->
</td></tr>
 
</table>
<img src="http://img21.imageshack.us/img21/2401/pandakopanda1.png" />
</div>
</td>
</tr>
</table>
 
</fieldset>
</div>
</div>


<div class="divtab">
</div>
<div id="tabs">
 
<ul>
<div class="divbottom">
<li><a href="#tabs-1">Series Information</a></li>
 
<li><a href="#tabs-2">File Information - Related Anime - Related OST</a></li>
<div class="divbl">
<li><a href="#tabs-3">Synopsis</a></li>
<fieldset>
</ul>
 
<legend>| File Information |</legend>


<div id="tabs-1">
<table style="background-color: transparent;" cellpadding="3" cellspacing="0" height="100%" width="100%">
<tr>
<td class="label"><div class="rounded1">Main Title:</div></td>
<td class="text"><div class="rounded2"><script>dcw(useredit.maintitle);</script></div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Official Title:</div></td>
<td class="text"><div class="rounded2"><script>dcw(useredit.officialtitle);</script></div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Japanese Title:</div></td>
<td class="text"><div class="rounded2"><script>dcw(useredit.japanesetitle);</script></div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Year:</div></td>
<td class="text"><div class="rounded2"><script>dcw(useredit.year);</script></div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Episodes:</div></td>
<td class="text"><div class="rounded2"><script>dcw(useredit.episodes);</script></div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Categories:<br><br></div></td>
<td class="text"><div class="rounded2"><script>dcw(useredit.categories);</script></div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Director:</div></td>
<td class="text"><div class="rounded2"><script>dcw(useredit.director);</script></div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Production:</div></td>
<td class="text"><div class="rounded2"><script>dcw(useredit.production);</script></div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">References:</div></td>


<td class="text"><div class="rounded2">
<!-- add or remove <br> accordingly when you editing the info below; it is some sort of box height matching with the content -->
<a id="link_anidb" target="_blank">AniDB</a> |
<!-- edit the info accordingly -->
<a id="link_animenfo" target="_blank">AnimeNFO</a> |
 
<a id="link_ann" target="_blank">ANN</a> |
<table class="table1">
<a id="link_officialpage" target="_blank">Official Page</a>
<tr>
</div></td>
<td class="label"><div class="rounded1"><b>HINT</b>:</div></td>
</tr>
<td class="text"><div class="rounded2">Hover on the quick file summary for more information.</div></td>
</table>
</tr>
</div>
<tr>
<td class="label"><div class="rounded1">FanSub by:<br><br></div></td>
<td class="text"><div class="rounded2"><div class="note1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i>No Information.</i></div></div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Approx. Duration:</div></td>
<td class="text"><div class="rounded2">~ 1 hour 11 minutes per episode</div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Note:<br><br></div></td>
<td class="text"><div class="rounded2">Please continue seeding as much as you can.<br>Thank you guys.</div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Related Anime:<br></div></td>
<td class="text">
<div class="rounded2">
<ul>
 
<div class="div5">
<li>
 
 
<!-- edit the info accordingly -->


<div id="tabs-2">
<a href="http://bakabt.me/torrent/10676/Panda_Kopanda_Panda_Go_Panda_DVD_DivX_MP3.html" target="_blank">
<table style="background-color: transparent;" cellpadding="3" cellspacing="0" height="100%" width="100%">
Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]
<tr>
</a>
<td class="label"><div class="rounded1"><b>HINT</b>:</div></td>
</li>
<td class="text"><br>Hover on the quick file summary for more information.<br><br></td>
</div>
</tr>
 
<tr>
</ul>
<td class="label"><div class="rounded1">FanSub by:</div></td>
</div>
<td class="text"><div class="rounded2"><script>dcw(useredit.fansub);</script></div></td>
</td>
</tr>
</tr>
<tr>
<tr>
<td class="label"><div class="rounded1">Note:<br><br></div></td>
<td class="label"><div class="rounded1">Related OST:<br><br></div></td>
<td class="text"><div class="rounded2"><script>dcw(useredit.note);</script></div></td>
 
</tr>
 
<tr>
<!-- edit the info accordingly -->
<td><br>&nbsp;<br></td>
<td><br><hr><br></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Related Anime:<br></div></td>


<td class="text">
<td class="text"><div class="rounded2"><div class="note1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i>None available</i>.</div></div></td>
<div class="rounded2">
</tr>
<ul>
</table>
<div class="divlist">
<script language="javascript" purpose="Print related anime">
for (i in related.anime_list)
{ document.write('<li><a href="'+related.anime_list[i].href +'" target="_blank">'+ related.anime_list[i].title + '</a></li>'); }
</script>
</div>
</ul>
</div>
</td>
</tr>
<tr>
<td class="label"><div class="rounded1">Related OST:<br><br></div></td>
<td class="text">
<div class="rounded2">
<ul>
<div class="divlist">
<script language="javascript" purpose="Print related ost">
for (i in related.ost_list)
{ document.write('<li><a href="'+related.ost_list[i].href +'" target="_blank">'+ related.ost_list[i].title + '</a></li>'); }
</script>
</div>
</ul>
</div>
</td>
</tr>
</table>
</div>
<div id="tabs-3">
<table style="background-color: transparent;" cellpadding="0" cellspacing="0" height="100%">
<tr>
<td><div class="rounded3">
<p>
<script>dcw(useredit.synopsis);</script>
</p>
</div></td>
</tr>
</table>
</div>
</div>


</fieldset>
</div>
</div>


</div>
<div class="divbr">
<fieldset>
 
<legend>| Synopsis |</legend>
 
<table class="table2">
<tr>
<td>
<div class="rounded3">
 
 
<!-- the <br> here is for break; not the same purpose as of above usage -->
<!-- edit the info accordingly -->
 
<p>
Panda Kopanda (Panda! Go Panda!) is a 30 minute movie made in 1972. Miyazaki created the original idea, the script, the layouts, and did key animation, and Takahata directed the film.
<br><br>
The story is about a little girl, Mimiko, who was left alone while her Grandma was away.
<br><br>
A 1973 sequel, Panda Kopanda: Amefuri Saakasu no Maki (Panda! Go Panda! & the Rainy-day Circus), continues the story and was made by the same people who made the first movie.
<br><br>
The literal translation of the title Panda Kopanda is "Panda, Baby Panda", but it's been released in North America as Panda Go Panda.
</p>
 
</div>
</td>
</tr>
</table>
 
</fieldset>
</div>
 
</div>


<div class="hr1"><hr></div>
<div class="hr1"><hr></div>


<div class="outer3">
<div class="outer3">
  <div class="inner">Screenshots</div>
<div class="inner">Screenshots</div>
</div>
</div>


</body>
</body>
</html>
<!-- change your demo pic here; use png format only; box may be added or removed accordingly -->


<!-- reference link text replacement engine -->
<script language="javascript">
document.getElementById('link_anidb').href= useredit.anidb;
document.getElementById('link_animenfo').href= useredit.animenfo;
document.getElementById('link_ann').href= useredit.ann;
document.getElementById('link_officialpage').href= useredit.officialpage;
</script>
<!-- tab container scripting engine -->
<script src="http://deysmacro.uuuq.com/resources/bakabt/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
</html>
<!-- imgs block could be added or removed at will; recommended at least 4 blocks; use png format only -->
[screenshot]
[screenshot]
  [img]http://img24.imageshack.us/img24/9528/snapshot20090509131128j.png[/img]
[img]http://img24.imageshack.us/img24/9528/snapshot20090509131128j.png[/img]
  [img]http://img17.imageshack.us/img17/7907/snapshot20090509131221.png[/img]
[img]http://img17.imageshack.us/img17/7907/snapshot20090509131221.png[/img]
  [img]http://img4.imageshack.us/img4/3651/snapshot20090509131238.png[/img]
[img]http://img4.imageshack.us/img4/3651/snapshot20090509131238.png[/img]
  [img]http://img14.imageshack.us/img14/2361/snapshot20090509131248.png[/img]
[img]http://img14.imageshack.us/img14/2361/snapshot20090509131248.png[/img]
  [img]http://img22.imageshack.us/img22/197/snapshot20090509131326.png[/img]
[img]http://img22.imageshack.us/img22/197/snapshot20090509131326.png[/img]
[/screenshot]
[/screenshot]
</pre>
</pre>


Sample template image: [http://wiki.bakabt.me/index.php/File:JS_Alternative_Anime_Template.png Click here for full preview]<br />
Sample template image: [http://wiki.bakabt.me/index.php/File:Pure_CSS_Driven_Anime_Template_-_Alternative.png Click here for full preview]<br />
Back to [[Offer_Templates#Templates_preview|top]].
Back to [[Offer_Templates#Templates_preview|top]].


===Pure CSS Driven Anime Template - Alternative===
===Generic Anime Template - Light Themed===
----
----


Line 2,865: Line 3,094:
* I also can help you guys with the template.
* I also can help you guys with the template.
* I will help whenever I can.
* I will help whenever I can.
*
* Thanks To : kureshii, Jarudin, xchiamiov
* Thanks Also To : DaggerLite, enginarc, mrdkreka, blubart
*
*
* Originally Customized By : deysmacro
* Originally Customized By : deysmacro
* Re-Customized By : YOUR NICK HERE
* Re-Customized By : YOUR NICK HERE
*
*
* Template Version : 3.3.3.1 pure css driven - alternative
* Template Version : v2.0.9.1 generic - light themed
* Template Last Update On : July 20th, 2009 @ 23:28pm GMT+8
* Template Last Update On : July 20th, 2009 @ 23:28pm GMT+8
*
*
Line 2,879: Line 3,105:
*
*
* --------------------------------------------------------------------------------------------------------------------------------------------------------| SN |-----
* --------------------------------------------------------------------------------------------------------------------------------------------------------| SN |-----
* SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2009 | 07 | 19 | 0720 | d-ait | v3331 | 13
* SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2009 | 07 | 19 | 0720 | d-ait | v2091 | 17
* ---------------------------------------------------------------------------------------------------------------------------------| Info you should know |-----
* ---------------------------------------------------------------------------------------------------------------------------------| Info you should know |-----
*
*
Line 2,906: Line 3,132:
* Hopefully you guys enjoy using this template. Good day people.
* Hopefully you guys enjoy using this template. Good day people.
*/
*/
/* ------------------------------------------------------------------------------------------------------------| quick file summary control center |----- */
/* ------------------------------------------------------------------------------------------------------------------------------| general styling area |----- */
/* --| whole table positioning control |-- */
/* --| body styling control |-- */


.button {
body {
margin: 0px;
background: #131313;
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
font-family: Tahoma;
font-size: 11px;
text-align: justify;
color: #0F0F0F;


}
}


/* --| end |---------------------------- */
/* --| end |--------------------------- */
/* --| whole table body control |-- */
/* --| http link styling control |-- */
 
a {
color: #FF661A;
text-decoration: none;


table.file_info {
}
border-spacing: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
width: auto;


*border-collapse: collapse;
a:hover {
color: #000000;


}
}


/* --| end |----------------------- */
/* --| end |----------------------------- */
/* --| tootip hover control |-- */
/* --| paragraph styling control |-- */


td.info_label:hover {
p {
z-index: 9;
text-align: justify;
cursor: help;
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
padding:20px;
border: #999999 1px solid;


}
}


/* --| end |------------------------- */
/* --| end |------------------------ */
/* --| tootip misc control |------ */
/* --| table content control |-- */


td.info_label span {
td {
display: none;  
vertical-align: left middle;


}
}


/* --| end |------------------------ */
/* --| end |---------------------------- */
/* --| tootip styling control |-- */
/* --| main title styling control |-- */


td.info_label:hover span {
.title {
position: absolute;
font-family: Tahoma;
bottom: 24px;
font-size: 22px;
font-family: "Trebuchet MS", sans-serif;
font-weight: bold;
font-size: 11px;
text-align: center;
line-height: 16px;
padding:10px;
background-color: #FFFFCC;
background-color: #ffffff;
background-image:url('http://img194.imageshack.us/img194/1986/helpm.png');  
color: #000066;
background-position: 3px 50%;
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
background-repeat: no-repeat;
border: #999999 1px solid;
color: #777777;
height: 16px;
width: auto;
border: 1px solid #999999;
margin: 0px;
padding: 5px;
display: block;


*width: 350px; /* no need to adjust the tooltip width unless needed */
}
*bottom: 16px;
 
*left: -80px;
/* --| end |--------------------------- */
*text-align: left;
/* --| picture content control |-- */
 
.pic2 {
font-family: Tahoma;
font-size: 22px;
font-weight: bold;
text-align: center;
padding:10px;
background-color: #2E2E2E;
color: #0F0F0F;
border: #999999 1px solid;
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');


}
}


/* --| end |---------------------------------------- */
/* --| end |------------------------------- */
/* --| individual left side content control |-- */
/* --| sub heading styling control |-- */


td.info_label {
.heading {
width: 20px;
font-family: Tahoma;
font-family: "Lucida Console", sans-serif;
font-size: 14px;
font-size: 7.7px;
font-weight: bold;
text-align: center;
text-align: center;
color: #D0D0F0;
color: #000066;
background-color: #854C9E;
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
border: #854C9E 2px solid;
padding: 8px 0px 8px 0px;
position: relative;
 
*font-size: 9px;


}
}


/* --| end |------------------------------------------------- */
/* --| end |---------------------- */
/* --| individual right side - left content control |-- */
/* --| label styling control |-- */


td.info_a {
.label {
background-color: #EEEEFF;
font-weight: bold;
border: #854C9E 2px solid;
color: #0F0F0F;
border-right: 0px;  
width: 19%;
color: #854C9E;
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
font-family: "Lucida Console", sans-serif;
border: #999999 1px solid;
font-size: 7.7px;
text-align: right;
text-align: left;
width: 50px;
padding: 0px 0px 0px 3px;
font-size: 7.7px;


*font-size: 9px;
*width: 22%;


}
}


/* --| end |--------------------------------------------------- */
/* --| end |-------------------------------- */
/* --| individual right side - right content control |-- */
/* --| various text styling control |-- */
 
.text {
width: 100%;
color: #000066;
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
border: #999999 1px solid;


td.info_b {
}
background-color: #EEEEFF;
border: #854C9E 2px solid;
border-left: 0px;
color: #854C9E;
font-family: "Lucida Console", sans-serif;
font-size: 7.7px;
text-align: right;
width: 60px;
padding: 0px 3px 0px 0px;
font-size: 7.7px;


*font-size: 9px;
.text3 {
width: 100%;
color: #9D9D9D;
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
border: #999999 1px solid;


}
}


/* --| end |----------------------------------------------------- */
.text6 {
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
color: #CC6600;


/* ---------------------------------------------------------------------------------------------------------------------------------| message bar styling control |---- */
}


.note1 {
.text7 {
font-family: "Trebuchet MS", sans-serif;
color: #518ABF;
font-size: 11px;
font-weight: bold;
line-height: 16px;
background-color: #FFFFCC;
background-image:url('http://img194.imageshack.us/img194/1986/helpm.png');
background-position: 3px 50%;
background-repeat: no-repeat;
color: #777777;
height: 16px;
width: auto;
border: 1px solid #999999;
margin: 0px;
padding: 5px;
display: block;


}
}


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
.text9 {
color: #000000;
font-weight: bold;


/* ----------------------------------------------------------------------------------------------------------------------------------------------| container control |---- */
}
/* --| top half container control |-- */


.divtop {
</style>
margin: 0px;
padding: 0px;
height: 410px; /* no need to adjust the height unless needed */


}
</head>
<body>


/* --| end |----------------------------- */
/* --| top left container control |-- */


.divtl {
<table style="background-color: transparent;" cellpadding="6" cellspacing="6" height="100%">
margin: 0px 0px 0px 10px;
<tr>
padding: 10px;
<td colspan="3">
width: 520px;
<div><hr><br></div>


}


/* --| end |------------------------------- */
<!-- the title heading -->
/* --| top right container control |-- */
<div class="title">Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]</div>


.divtr {
<div><br><hr></div>
margin: -415px 0px 0px 540px;
</td>
padding: 10px;
</tr>
<tr>


*margin: -410px 0px 0px 540px;


}
<!-- rowspan number must be changed accordingly if you add/remove row -->
<td rowspan="20" >


/* --| end |---------------------------------- */
/* --| bottom half container control |-- */


.divbottom {
<!-- 400px max width recommended -->
margin: 5px 0px 0px 0px;
<img class="pic2" src="http://img200.imageshack.us/img200/4229/187611.png">
padding: 0px;
height: 340px; /* no need to adjust the height unless needed */


*margin: 0px;
</td>
*height: 335px; /* no need to adjust the height unless needed */
</tr>
<tr>
<td colspan="3" style="padding-top: 0px;">
<div class="heading">SERIES INFORMATION</div>
</td>
</tr>


}


/* --| end |---------------------------------- */
<!-- edit the info accordingly -->
/* --| bottom left container control |-- */
<tr>
 
<td class="label">Main Title:</td>
.divbl {
<td class="text">Panda Kopanda</td>
margin: 0px 0px 0px 10px;
</tr>
padding: 10px;
<tr>
width: 520px;
<td class="label">Official Title:</td>
 
<td class="text">Panda! Go Panda!</td>
}
</tr>
 
<tr>
/* --| end |------------------------------------ */
<td class="label">Japanese Title:</td>
/* --| bottom right container control |-- */
<td class="text">パンダコパンダ</td>
</tr>
<tr>
<td class="label">Year:</td>
<td class="text">1972 & 1973</td>
</tr>
<tr>
<td class="label">Episodes:</td>
<td class="text"><span class="text7">2 combined into 1</span></td>
</tr>
<tr>
<td class="label">Categories:</td>
<td class="text">Adventure, Anthropomorphism, Comedy, Contemporary Fantasy, Fantasy</td>
</tr>
<tr>
<td class="label">Director:</td>
<td class="text">Isao Takahata</td>
</tr>
<tr>
<td class="label">Production:</td>
<td class="text">Shunzo Kato</td>
</tr>
<tr>
<td class="label">References:</td>
<td class="text">


.divbr {
margin: -330px 0px 0px 540px; /* no need to adjust the height unless needed */
padding: 10px;


*margin: -320px 0px 0px 540px; /* no need to adjust the height unless needed */
<!-- edit the info accordingly -->
<a href="http://anidb.net/perl-bin/animedb.pl?show=anime&aid=530" target="_blank">AniDB</a> |
<a href="http://www.animenfo.com/animetitle,2379,stbesx,panda_kopanda.html" target="_blank">AnimeNFO</a> |
<a href="http://www.animenewsnetwork.com/encyclopedia/anime.php?id=352" target="_blank">ANN</a> |
<a href="http://www.nausicaa.net/miyazaki/panda/" target="_blank">Official Page</a>


}
</td>
</tr>
<br><br><br>


/* --| end |------------------------------------ */
<tr>
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
<td colspan="3" style="padding-top: 20px;"><div class="heading">FILE INFORMATION</div> </td>
</tr>


/* ---------------------------------------------------------------------------------------------------------------------------------------------| list styling control |---- */


.div5 {
<!-- edit the info accordingly -->
margin: -10px 0px -10px -25px;
<!-- change text3 to text if there is information -->
<tr>
<td class="label">FanSub by:</td>
<td class="text3">No Information</td>
</tr>
<tr>
<td class="label">Video:</td>
<td class="text"><span class="text7">DivX 6</span> [ <span class="text6">704x544 29.97fps</span> ]</td>
</tr>
<tr>
<td class="label">Audio:</td>
<td class="text"><span class="text7">Japanese</span> [ <span class="text6">MPEG Audio Layer 3 24000Hz stereo 48Kbps</span> ]</td>
</tr>
<tr>
<td class="label">Subtitles:</td>
<td class="text"><span class="text7">English</span> [ <span class="text6">Hard-Subbed</span> ]</td>
</tr>
<tr>
<td class="label">Approx. Duration:</td>
<td class="text">~ <span class="text7">1 hour 11 minutes</span> per episode</td>
</tr>
<tr>
<td class="label">Note:</td>
<td class="text">Please continue seeding as much as you can people. Thank you.</td>
</tr>


*margin: -20px 0px -20px -25px;


}
<!-- edit the info accordingly -->
 
<tr>
li {
<td class="label">Related Anime:</td>
text-align: justify;
<td class="text">
color: #854C9E;
> <a href="http://bakabt.me/torrent/10676/Panda_Kopanda_Panda_Go_Panda_DVD_DivX_MP3.html" target="_blank">Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]</a>
</td>
</tr>
<tr>
<td class="label">Related OST:</td>
<td class="text3">No Information</td>
</tr>


}
<tr>
<td colspan="3" style="padding-top: 20px;"><div class="heading">SYNOPSIS</div>


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
<p>
<span class="text9">


/* -------------------------------------------------------------------------------------------------------------------------------| whole content styling control |---- */
/* --| body control |-- */


body {
<!-- edit the info accordingly -->
background: #131313;
Panda Kopanda (Panda! Go Panda!) is a 30 minute movie made in 1972. Miyazaki created the original idea, the script, the layouts, and did key animation, and Takahata directed the film.  
background:url('http://img15.imageshack.us/img15/9931/dangobg1.png'); /* want some fresh background? change it here */
<br><br>
font-family: "Trebuchet MS", sans-serif;
The story is about a little girl, Mimiko, who was left alone while her Grandma was away.
font-size: 11px;
<br><br>
text-align: left;
A 1973 sequel, Panda Kopanda: Amefuri Saakasu no Maki (Panda! Go Panda! & the Rainy-day Circus), continues the story and was made by the same people who made the first movie.
color: #854C9E; /* main font color */
<br><br>
height:auto;
The literal translation of the title Panda Kopanda is "Panda, Baby Panda", but it's been released in North America as Panda Go Panda.


}
</span>


/* --| end |-------------------- */
</p>
/* --| paragraph control |-- */
</td>
</tr>
<tr>
<td colspan="3" style="padding-top: 20px;"><div class="heading">SCREENSHOTS</div></td>
</tr>
</table>


p {
text-align: justify;
color: #854C9E;
font-weight: bold;


}
</body>
</html>


/* --| end |-------------------- */
/* --| main table control |-- */


td {
<!-- change your demo pic here; use png format only; box may be added or removed accordingly -->
vertical-align: left middle;


}
[screenshot]
[img]http://img24.imageshack.us/img24/9528/snapshot20090509131128j.png[/img]
[img]http://img17.imageshack.us/img17/7907/snapshot20090509131221.png[/img]
[img]http://img4.imageshack.us/img4/3651/snapshot20090509131238.png[/img]
[img]http://img14.imageshack.us/img14/2361/snapshot20090509131248.png[/img]
[img]http://img22.imageshack.us/img22/197/snapshot20090509131326.png[/img]
[/screenshot]
</pre>


.table1 {
Sample template image: [http://wiki.bakabt.me/index.php/File:Generic_Anime_Template_-_Light_Themed.png Click here for full preview].<br />
background-color: transparent;
Back to [[Offer_Templates#Templates_preview|top]].
cellpadding: 2px;
===Generic Anime Template - Dark Themed===
cellspacing: 0px;
----
height: 100%;
width: 100%;


}
Submitted by: deysmacro


.table2 {
<pre>
background-color: transparent;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
cellpadding: 0px;
<html>
cellspacing: 0px;
<head>
height: 100%;
width: 100%;


}
<style type="text/css">
 
/* --------------------------------------------------------------------------------------------------------------------------------------------| some note |-----
/* --| end |--------------------------- */
*
/* --| headings styling control |-- */
* Please take note. The indentation should look correctly using Firefox.
 
*
.inner {
* Although I have taken all possible steps that it should look correct, using IE will somehow still make it look a little bit weird.
background-color:#EEEEFF;
* When that happen, please use Firefox.
padding: 10px;
*
border: 1px solid #CCCFC8;
* Thank you for your understanding.
font-family: "Comic Sans MS", "Trebuchet MS", "Times New Roman";
*
font-size: 22px;
* --------------------------------------------------------------------------------------------------------------------------------------------| general info |-----
font-weight: bold;
*
color: #854C9E;
* Main user link : http://bakabt.me/user/816453/deysmacro.html
 
* Forum user link : http://forums.bakabt.me/index.php?action=profile;u=816453
}
*
 
* I welcome all of you people to use this template at your convenience.
.outer2 {
* Do contact me via PM or email if you had anything to say.
z-index: 1;
*
background-color: #EEDDFF;
* Email : deysmacro[at]gmail[dot]com
margin: 10px 0px 0px 0px;
*
padding: 6px; width: 815px;
* I also can help you guys with the template.
position: relative;
* I will help whenever I can.
border: 1px solid #CCCFC8;  
*
text-align: center;
* Originally Customized By : deysmacro
margin-left: auto;
* Re-Customized By : YOUR NICK HERE
margin-right: auto;
*
 
* Template Version : v2.0.8.1 generic - dark themed
}
* Template Last Update On : July 21th, 2009 @ 13:28pm GMT+8
 
*
.outer3 {
* Please leave the credit intact if you plan to use this template.
background-color: #EEDDFF;
* Your cooperation is highly appreciated. Thank you.
margin: 0px 0px 10px 0px;
*
padding: 6px;
* --------------------------------------------------------------------------------------------------------------------------------------------------------| SN |-----
width: 815px;
* SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2009 | 07 | 19 | 0720 | d-ait | v2081 | 11
border: 1px solid #CCCFC8;
* ---------------------------------------------------------------------------------------------------------------------------------| Info you should know |-----
text-align: center;
*
margin-left: auto;
* Quick Reminder:
margin-right: auto;
* If you found any syntax with * siding with the syntax, it is targeted for IE only.
*
*
* Example:
* Assume "width" is the syntax...
*
* body {
* width: 100px; <-- major browser support
*
* *width: 110px; <-- targeted for IE only
* }
*
*
* This is done as to make it IE compatible. It is not required if IE displays the generated page correctly.
* Please take note of this when you are editing.
*
* -------------------------------------------------------------------------------------------------------------------------------------------| end |----- */
/*
* Nothing much to change or edit about the template appearance since it is 99% ready out of the box.
* I will put some edit guides at the critical point only. The rest doesn't need to be edited unless you know what are you doing or you just want to play with the settings.
*
* Hopefully you guys enjoy using this template. Good day people.
*/
/* ------------------------------------------------------------------------------------------------------------| general styling control area |----- */
/* --| body styling control |-- */


}
body {
 
background: #131313;
/* --| end |------------------------- */
background-image:url('http://img11.imageshack.us/img11/6719/3784.gif'); /* want some fresh background? change it here */
/* --| horizontal line control |-- */
font-family: Tahoma;
 
font-size: 11px;
hr {
width: 93%;
 
}
 
.hr1 {
margin: 0px;
 
*text-align: center;


}
}


/* --| end |--------------------------- */
/* --| end |--------------------------- */
/* --| picture content control |-- */
/* --| http link styling control |-- */


.pics {  
a {
height: auto;
text-decoration: none;
width: auto;
padding: 0px;
margin: 0px;
overflow: hidden;


}
}


.pics img {  
a:hover {
height: auto;
color: #FF661A;
width: auto;
padding: 10px;
border: 1px solid #ccc;
background-color: #fff;
top: 0px;
left: 0px;  


}
}


/* --| end |---------------------- */
/* --| end |----------------------------- */
/* --| label styling control |-- */
/* --| paragraph styling control |-- */


.label {
p {
color: #854C9E;
text-align: justify;
width: 26%;  
background-image:url(http://img179.imageshack.us/img179/4977/bgrepeater2hn2.gif);
text-align: right;
padding:20px;
border: #999999 1px solid;


}
}


.label:hover {
/* --| end |----------------------- */
color: blue;
/* --| table styling control |-- */
 
td {
vertical-align: left middle;


}
}


/* --| end |--------------------- */
/* --| end |---------------------- */
/* --| text styling control |-- */
/* --| title styling control |-- */


.text {
.title {
color: #854C9E;
font-family: Tahoma;
width: 74%;  
font-size: 22px;
font-weight: bold;
text-align: center;
padding:10px;
background-color: #2E2E2E;
color: #FFB856;
background-image:url(http://img179.imageshack.us/img179/4977/bgrepeater2hn2.gif);
border: #999999 1px solid;


}
}


.text:hover {
/* --| end |-------------------------- */
color: red;
/* --| picture styling control |-- */


}
.pic2 {
 
font-family: Tahoma;
/* --| end |--------------------------- */
font-size: 22px;
/* --| label box styling control |-- */
font-weight: bold;
 
text-align: center;
.rounded1 {
padding:10px;
background-color:#EEDDFF;  
background-color: #2E2E2E;
padding: 10px;
color: #FFB856;
width: auto;
border: #999999 1px solid;
height: auto;
background-image:url(http://img179.imageshack.us/img179/4977/bgrepeater2hn2.gif);
border: 1px solid #CCCFC8;  


}
}


/* --| end |--------------------------- */
/* --| end |-------------------------- */
/* --| text box styling control |-- */
/* --| heading styling control |-- */


.rounded2 {
.heading {
background-color:#EEEEFF;  
font-family: Tahoma;
padding: 10px;
font-size: 14px;
width: auto;
font-weight: bold;
height: auto;
text-align: center;
border: 1px solid #CCCFC8;  
color: #FF661A;
background-image:url(http://img358.imageshack.us/img358/4214/back2il5.png);
padding: 8px 0px 8px 0px;


}
}


/* --| end |-------------------------------- */
/* --| end |---------------------- */
/* --| synopsis box styling control |-- */
/* --| label styling control |-- */
 
.label {
width: 18%;
text-align: right;
font-weight: bold;
color: #FFFFFF;
background-image:url(http://img358.imageshack.us/img358/4214/back2il5.png);
border: #999999 1px solid;


.rounded3 {
*width: 22%;  
background-color:#EEEEFF;
padding: 5px 10px 5px 10px;
width: auto;
height: auto;
border: 1px solid #CCCFC8;  


}
}


/* --| end |-------------------------------- */
/* --| end |-------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
/* --| various text styling control |-- */
</style>


</head>
.text {
<body>
width: 100%;
color: #FFB856;
background-image:url(http://img358.imageshack.us/img358/4214/back2il5.png);
border: #999999 1px solid;


<div class="outer2">
}


.text3 {
width: 100%;
color: #9D9D9D;
background-image:url(http://img358.imageshack.us/img358/4214/back2il5.png);
border: #999999 1px solid;


<!-- the title heading -->
}


<div class="inner">Panda Kopanda | Panda! Go Panda! [DivX][MP3]</div>
.text6 {
        color: #FFF0CC;
}


<div class="button">
.text7 {
<table class="file_info">
color: #00D4FF;
font-weight: bold;


}


<!-- tooltip and quick file summary area -->
.text9 {
color: #FFB856;
font-weight: bold;


<tr>
}
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the title source.</span><div>SRCS</div></td>
<td class="info_a"><div>&nbsp;</div></td>
<td class="info_b"><div>DVD</div></td>
<td />
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This title has been encoded with <b>DivX 6 - 704 x 544 29.97fps</b>.</span><div>VIDS</div></td>
<td class="info_a"><div>DIVX</div></td>
<td class="info_b"><div>704X544</div></td>
<td />
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This title utilized <b>MPEG Audio Layer 3 24000Hz stereo 48Kbps</b>.</span><div>AUDS</div></td>
<td class="info_a"><div>JP</div></td>
<td class="info_b"><div>MP3  24KHZ</div></td>
<td />
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This title has been <b>hard-subbed</b>.</span><div>SUBS</div></td>
<td class="info_a"><div>EN</div></td>
<td class="info_b"><div>HARD</div></td>
</tr>
</table>
</div>


</div>
/* --| end |------------------------ */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
</style>


<div class="hr1"><hr></div>
</head>
<body>


<div class="divtop">
<table style="background-color: transparent;" cellpadding="6" cellspacing="6" height="100%">
<tr>
<td colspan="3">
<div><hr><br></div>
 
 
<!-- main heading here -->
<div class="title">Kaidoumaru | Kai Doh Maru [DVD][XviD][MP3]</div>
 
<div><br><hr></div>
</td>
</tr>


<div class="divtl">
<tr>
<fieldset>
 
<!-- if you add or remove row, rowspan number of 20 here must be adjusted accordingly; else the table would look weird -->
<!-- 400px max width recommended -->
<td rowspan="20" ><img class="pic2" src="http://img24.imageshack.us/img24/590/1086019.jpg"></td>
</tr>


<legend>| Series Information |</legend>
<tr>
<td colspan="3" style="padding-top: 0px;"><div class="heading">SERIES INFORMATION</div></td>
</tr>




<!-- add or remove <br> accordingly when you editing the info below; it is some sort of box height matching with the content -->
<!-- edit the info accordingly -->
<!-- edit the info accordingly -->
 
<tr>
<table class="table1">
<td class="label">Main Title:</td>
<tr>
<td class="text">Kaidoumaru</td>
<td class="label"><div class="rounded1">Main Title:</div> </td>
</tr>
<td class="text"><div class="rounded2">Panda Kopanda</div></td>
<tr>
</tr>
<td class="label">Official Title:</td>
<tr>
<td class="text">Kai Doh Maru</td>
<td class="label"><div class="rounded1">Official Title:</div></td>
</tr>
<td class="text"><div class="rounded2">Panda! Go Panda!</div></td>
<tr>
</tr>
<td class="label">Japanese Title:</td>
<tr>
<td class="text">怪童丸</td>
<td class="label"><div class="rounded1">Japanese Title:</div></td>
</tr>
<td class="text"><div class="rounded2">パンダコパンダ</div></td>
<tr>
</tr>
<td class="label">Year:</td>
<tr>
<td class="text">2001</td>
<td class="label"><div class="rounded1">Year:</div></td>
</tr>
<td class="text"><div class="rounded2">1972 & 1973</div></td>
<tr>
</tr>
<td class="label">Episodes:</td>
<tr>
<td class="text"><span class="text7">1</span></td>
<td class="label"><div class="rounded1">Episodes:</div></td>
</tr>
<td class="text"><div class="rounded2">2 combined into 1</div></td>
<tr>
</tr>
<td class="label">Categories:</td>
<tr>
<td class="text">Action, Fantasy, Historical, Magic, Seinen</td>
<td class="label"><div class="rounded1">Categories:<br><br></div></td>
</tr>
<td class="text"><div class="rounded2">Adventure, Anthropomorphism, Comedy, Contemporary Fantasy, Fantasy</div></td>
<tr>
</tr>
<td class="label">Director:</td>
<tr>
<td class="text">Kanji Wakabayashi</td>
<td class="label"><div class="rounded1">Director:</div></td>
</tr>
<td class="text"><div class="rounded2">Isao Takahata</div></td>
<tr>
</tr>
<td class="label">Production:</td>
<tr>
<td class="text">Production I.G</td>
<td class="label"><div class="rounded1">Production:</div></td>
</tr>
<td class="text"><div class="rounded2">Shunzo Kato</div></td>
<tr>
</tr>
<td class="label">References:</td>
<tr>
<td class="label"><div class="rounded1">References:</div></td>
<td class="text">
<div class="rounded2">




<!-- edit the info accordingly -->
<!-- edit the info accordingly -->
<td class="text">
<a href="http://anidb.net/perl-bin/animedb.pl?show=anime&aid=500" target="_blank">AniDB</a> |
<a href="http://www.animenfo.com/animetitle,888,lcvouh,kaidoumaru.html" target="_blank">AnimeNFO</a> |
<a href="http://www.animenewsnetwork.com/encyclopedia/anime.php?id=306" target="_blank">ANN</a> |
<a href="http://www.sonymusic.co.jp/Animation/kaidohmaru/" target="_blank">Official Page</a>
</td>
</tr>
<tr>
<td colspan="3" style="padding-top: 20px;"><div class="heading">FILE INFORMATION</div></td>
</tr>


<a href="http://anidb.net/perl-bin/animedb.pl?show=anime&aid=530" target="_blank">AniDB</a> |
<a href="http://www.animenfo.com/animetitle,2379,stbesx,panda_kopanda.html" target="_blank">AnimeNFO</a> |
<a href="http://www.animenewsnetwork.com/encyclopedia/anime.php?id=352" target="_blank">ANN</a> |
<a href="http://www.nausicaa.net/miyazaki/panda/" target="_blank">Official Page</a>
</div>
</td>
</tr>
</table>


</fieldset>
<!-- edit the info accordingly -->
</div>
<tr>
<td class="label">FanSub by:</td>
<div class="divtr">
<td class="text3">No Information</td>
<fieldset>
</tr>
<tr>
<td class="label">Video:</td>
<td class="text"><span class="text7">XviD</span> [ <span class="text6">720x400 29.97fps</span> ]</td>
</tr>
<tr>
<td class="label">Audio:</td>
<td class="text"><span class="text7">Japanese</span> [ <span class="text6">MPEG Audio Layer 3 48000Hz stereo 130Kbps</span> ]</td>
</tr>
<tr>
<td class="label">Subtitles:</td>
<td class="text"><span class="text7">English</span> [ <span class="text6">Hard-Subbed</span> ]</td>
</tr>
<tr>
<td class="label">Approx. Duration:</td><td class="text">~ <span class="text7">46</span> minutes per episode</td>
</tr>
<tr>
<td class="label">Note:</td><td class="text">Please continue seeding as much as you can.<br>Thank you guys.</td>
</tr>


<legend>| Main Picture |</legend>
<table class="table2">
<tr>
<td>
<div class="pics">


<!-- edit the info accordingly -->
<tr>
<td class="label">Related Anime:</td>
<td class="text">
>  <a href="http://bakabt.me/torrent/141617/Kai_Doh_Maru._DVDrip.html"  target="_blank">Kai Doh Maru.[DVDrip]</a><br>
>  <a href="http://bakabt.me/torrent/129335/Kaidoumaru_-_OVA_a4e.html"  target="_blank">Kaidoumaru - OVA [a4e]</a>
</td>
</tr>
<tr>
<td class="label">Related OST:</td>
<td class="text3">No Information</td>
</tr>


<!-- picture height should be 340px max; you may use your preferred height though -->
<tr>
<td colspan="3" style="padding-top: 20px;"><div class="heading">SYNOPSIS</div>


<img src="http://img21.imageshack.us/img21/2401/pandakopanda1.png"  />
</div>
</td>
</tr>
</table>


</fieldset>
<!-- edit the info accordingly -->
</div>
<p>
<span class="text9">
This story takes place during the Heian Period of Japan's history, when evil spirits still resided in the forests, mountains and rivers.
A girl, accompanied by her loved one, battles against these evil spirits, while she is disguised as man.
This brave woman, aka "Kaidomaru", with a Chinese character "Flame" tatooed on her upper arm, was one of the "Four Devas".
Kaidomaru fights for the honor of her lost love, Raikou Minamotono, who had sacrified his life in order to protect the capital Kyoto, from the evils deeds of a "princess" cursed by a malicious ogre.
The princess, whom Kaidomaru used to play with as a child, has now become her ultimate enemy.
</span>
</p>
</td>
</tr>


</div>
<tr>
<td colspan="3" style="padding-top: 20px;"><div class="heading">SCREENSHOTS</div></td>
</tr>
</table>


<div class="divbottom">


<div class="divbl">
</body>
<fieldset>
</html>
 
<legend>| File Information |</legend>
 
 
<!-- add or remove <br> accordingly when you editing the info below; it is some sort of box height matching with the content -->
<!-- edit the info accordingly -->
 
<table class="table1">
<tr>
<td class="label"><div class="rounded1"><b>HINT</b>:</div></td>
<td class="text"><div class="rounded2">Hover on the quick file summary for more information.</div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">FanSub by:<br><br></div></td>
<td class="text"><div class="rounded2"><div class="note1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i>No Information.</i></div></div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Approx. Duration:</div></td>
<td class="text"><div class="rounded2">~ 1 hour 11 minutes per episode</div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Note:<br><br></div></td>
<td class="text"><div class="rounded2">Please continue seeding as much as you can.<br>Thank you guys.</div></td>
</tr>
<tr>
<td class="label"><div class="rounded1">Related Anime:<br></div></td>
<td class="text">
<div class="rounded2">
<ul>
 
<div class="div5">
<li>
 
 
<!-- edit the info accordingly -->
 
<a href="http://bakabt.me/torrent/10676/Panda_Kopanda_Panda_Go_Panda_DVD_DivX_MP3.html" target="_blank">
Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]
</a>
</li>
</div>
 
</ul>
</div>
</td>
</tr>
<tr>
<td class="label"><div class="rounded1">Related OST:<br><br></div></td>
 
 
<!-- edit the info accordingly -->
 
<td class="text"><div class="rounded2"><div class="note1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i>None available</i>.</div></div></td>
</tr>
</table>
 
</fieldset>
</div>
 
<div class="divbr">
<fieldset>
 
<legend>| Synopsis |</legend>
 
<table class="table2">
<tr>
<td>
<div class="rounded3">
 
 
<!-- the <br> here is for break; not the same purpose as of above usage -->
<!-- edit the info accordingly -->
 
<p>
Panda Kopanda (Panda! Go Panda!) is a 30 minute movie made in 1972. Miyazaki created the original idea, the script, the layouts, and did key animation, and Takahata directed the film.
<br><br>
The story is about a little girl, Mimiko, who was left alone while her Grandma was away.
<br><br>
A 1973 sequel, Panda Kopanda: Amefuri Saakasu no Maki (Panda! Go Panda! & the Rainy-day Circus), continues the story and was made by the same people who made the first movie.
<br><br>
The literal translation of the title Panda Kopanda is "Panda, Baby Panda", but it's been released in North America as Panda Go Panda.
</p>
 
</div>
</td>
</tr>
</table>
 
</fieldset>
</div>
 
</div>
 
<div class="hr1"><hr></div>
 
<div class="outer3">
<div class="inner">Screenshots</div>
</div>
 
 
</body>
</html>




Line 3,573: Line 3,810:


[screenshot]
[screenshot]
[img]http://img24.imageshack.us/img24/9528/snapshot20090509131128j.png[/img]
[img]http://img91.imageshack.us/img91/8154/snapshot20090503140650j.png[/img]
[img]http://img17.imageshack.us/img17/7907/snapshot20090509131221.png[/img]
[img]http://img397.imageshack.us/img397/945/snapshot20090503140744.png[/img]
[img]http://img4.imageshack.us/img4/3651/snapshot20090509131238.png[/img]
[img]http://img212.imageshack.us/img212/3776/snapshot20090503140822.png[/img]
[img]http://img14.imageshack.us/img14/2361/snapshot20090509131248.png[/img]
[img]http://img240.imageshack.us/img240/889/snapshot20090503140849.png[/img]
[img]http://img22.imageshack.us/img22/197/snapshot20090509131326.png[/img]
[img]http://img142.imageshack.us/img142/8716/snapshot20090503141314.png[/img]
[/screenshot]
[/screenshot]                                                  
</pre>
</pre>


Sample template image: [http://wiki.bakabt.me/index.php/File:Pure_CSS_Driven_Anime_Template_-_Alternative.png Click here for full preview]<br />
Sample template image: [http://wiki.bakabt.me/index.php/File:Generic_Anime_Template_-_Dark_Themed.png Click here for full preview]<br />
Back to [[Offer_Templates#Templates_preview|top]].
Back to [[Offer_Templates#Templates_preview|top]].

Latest revision as of 22:07, 27 June 2015

Offer Templates (UNDER CONSTRUCTION)
Templates for Uploaders. Feel free to add! ^^

This is a temporary place for users to submit and use torrent templates, which hopefully will help make some lives easier. Please use the following template when submitting new templates:

Most of these templates have been ported over to the BakaBT template page for your convenience. As such, working templates will be removed from the Wiki, access them from the template page instead.

Submission Format

For template-makers:

  • Follow the instructions given for submitting a template.
  • Replace {curly-bracketed text} with the appropriate names/text.

Templates submitted here may be ported over to BakaBT templates.

Sample Template

Copy and paste the code below: 

==={Template Name}===
----

Submitted by: {your BakaBT username}

<pre>
{Source code goes here}
</pre>

Sample template image: [{Template Image URL} Image link]

Log in to your BakaBT-Wiki account (Or register for one if you don't have one yet). Click one of the links below.

  1. Click here to add your template to Anime Templates.
  2. Click here to add your template to Manga Templates.
  3. Click here to add your template to OST Templates.

Paste your code right at the bottom, then click 'Show Preview'. If you're satisfied that nothing is broken, click 'Save Page'.

If something breaks, don't worry, we can roll back changes :) If you need help, drop us a line at #bakabt-support.

Templates preview

Anime

Simple HTML Anime Template Simple ChalamiuS HTML Anime Template Simple BBCode Anime Template
Error creating thumbnail: File missing
by kureshii.
Error creating thumbnail: File missing
by ChalamiuS.
Error creating thumbnail: File missing
by kureshii.
Choose Choose Choose


Simplest Tabled Anime Template Infobox Anime Template Twin Alpha Box Description Simple book with JS pages
Error creating thumbnail: File missing
by kureshii
Error creating thumbnail: File missing
by miasmacloud
Error creating thumbnail: File missing
by remix85
Choose Choose Choose Choose

Manga


OST

Anime Templates

Simple HTML Anime Template

Click here to use

Simple ChalamiuS HTML Anime Template

Click here to use

Simple BBCode Anime Template

Click here to use

Simplest Tabled Anime Template

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
	<h1></h1>
	<h3><a href="ANN URL" target="_blank">ANN</a> / <a href="AniDB URL" target="_blank">AniDB</a></h3>
    <table cellspacing="4">
    	<tr valign="top">
        	<td>
            	<h2>Series Information</h2>
                <ul>
                    <table cellspacing="3">
                        <tr><td style="font-size:15px">Year</td><td>[Insert]</td></tr>
                        <tr><td style="font-size:15px">Episodes</td><td>[Insert]</td></tr>
                        <tr><td style="font-size:15px">Categories</td><td>[Insert]</td></tr>
                        <tr><td style="font-size:15px">Director</td><td>[Insert]</td></tr>
                        <tr><td style="font-size:15px">Production</td><td>[Insert]</td></tr>
                    </table>
                </ul>
                <h2>File Information</h2>
                <ul>
                    <table cellspacing="3">
                        <tr><td style="font-size:15px">Ripper</td><td>[Insert]</td></tr>
                        <tr><td style="font-size:15px">Video</td><td>[Insert]</td></tr>
                        <tr><td style="font-size:15px">Audio</td><td>[Insert]</td></tr>
                        <tr><td style="font-size:15px">Subtitle</td><td>[Insert]</td></tr>
                        <tr><td style="font-size:15px">Comments</td><td>[Insert]</td></tr>
                    </table>
				</ul>
                <h2>Related Torrents</h2>
                <ul>
                    [Insert]
                </ul>
                <h2>Summary/Description</h2>
                <ul>
		    [Insert]
		</ul>
            </td>
            <td><img src="[Insert SUMMARY IMAGE URL]" alt="Image" /></td>
        </tr>
    </table>
    <h2>Screenshots</h2>
</body>
</html>
[screenshot]
[IMG]http://i50.tinypic.com/1znly1j.png[/IMG]
[IMG]http://i46.tinypic.com/m0mc3.png[/IMG]
[IMG]http://i46.tinypic.com/1z2ln4h.png[/IMG]
[/screenshot]

Back to top.

Infobox Anime Template

Submitted by: kureshii 

<!--User must provide own background image for use. The infoboxes are positioned using CSS float. There is thus limited flexibility with regards to the layout.-->
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <style type="text/css">
  body { font-family: sans-serif; font-size: 14px; margin: 0px; }
a { text-decoration: none; }
a:link { color: #b62400; }
a:visited { color: #444444; }
.main {
  background: url([Insert]) no-repeat;
  border-style: solid 2px;
  width: 940px;
  height: 720px;
}
.links {
  font-size: 150%;
  font-weight: bold;
  font-variant: small-caps;
  text-align: right;
  float: right;
}
.titlediv { font-size: 24px bold; float: center; }
.infobox {
  background: #FFFFFF; /*Change infobox colour if desired. Transclucent white color creates lightening of background image effect*/
  filter: alpha(opacity=60); /*for IE*/
  opacity: 0.50;
  width: 220px; /*Adjust infobox width as required*/
  float: right;
  clear: right;
  padding: 2px 10px;
  margin: 10px 20px;
}
.header {
  text-align: center;
  font-size: 150%;
  font-weight: bold;
  padding-top: 5px;
}
   </style>
</head>
<body>
  <div class="main">
    <div class="titlediv">[Insert]</div>
    <div class="infobox">
      <div class="header">SERIES INFO</div>
      <div class="info">
        <b>[Insert]</b> ([Insert])<br>
        [Insert]<br>
        Directed by <b>[Insert]</b><br>
        Produced by <b>[Insert]</b>
      </div>
    </div>
    <div class="links">
      <a href="[Insert]" target="_blank">Anime News Network</a><br>
      <a href="[Insert]" target="_blank">Anime-Planet</a><br>
      <a href="[Insert]">AniDB</a>
    </div>
    <div class="infobox">
      <div class="header">FILE INFO</div>
      <div class="info">
        Encoded and translated by <b><a href="[Insert]" target="_blank">[Insert]</a></b><br>
        [Insert]<br>
        [Insert]<br>
        [Insert]
      </div>
    </div>
    <div class="infobox" style="line-height: normal;">
      <div class="header">DESCRIPTION</div>
      <div class="info">[Insert]</div>
    </div>
  </div>
</body>
</html>
[screenshot]
<!--duplicate the line below to add more screenshots-->
[img][Insert][/img]
[img][Insert][/img]
[img][Insert][/img]
[img][Insert][/img]
[img][Insert][/img]
[/screenshot]

Sample

Back to top.

Twin Alpha Box Description

Submitted by: miasmacloud 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Template </title>
<style type="text/css" media="screen">
/* main */
*{
	padding: 0px;
	margin: 0px;
}
*:focus{
	outline: none;
}
body{
	background: #fff;
	font-family: tahoma;
	font-size: 8pt;
	color: #fff;
	/* size the body so the background image doesn't get cut off */
	height: [Insert]px;
	width: 940px;
	background-repeat: no-repeat;
}
body{
	background-image: url([Insert]);
}
a:link,a:visited,a:active,a:hover{
	text-decoration: underline;
	color: #fff;
}
h1{
	padding: 5px;
	text-align: center;
	font-size: 11pt;
}

/* text bars */
.bars{
	width: 250px;
	margin: 0px 20px 0px 20px;
}
#centered{
	/* width: 580px; */
	margin: 0px auto;
}
#bar1{
	float: left;
}
#bar2{
	float: left;
}
.bg{
	background-image: url([bbtimg=668]);
}
.low{
	height: 100px;
	background-image: url([bbtimg=2881]);
}

/* inside the text bars */
.content{
	padding: 10px;
	line-height: 12pt;
	text-shadow: 1px 1px 2px #000;
	text-align: justify;
}
.item{
	margin: 3px 0px 3px 0px;
}

/* right bar specific */
#show{
	margin-bottom: 15px;
}
</style>
</head>
<body>

<div id="centered">
	<div id="bar1" class="bars">
		<div class="bg">
			<div class="content">
				<h1>
					[Insert]
				</h1>
				<div class="item">
					[Insert]
				</div>
			</div>
		</div>
		<div class="low"></div>
	</div>
	<div id="bar2" class="bars">
		<div class="bg">
			<div class="content">
				<div id="show">
					<h1>
						Show Information
					</h1>
					<div class="item">
						<b>Year:</b> [Insert]
					</div>
					<div class="item">
						<b>Runtime:</b> [Insert] episodes
					</div>
					<div class="item">
						<b>Categories:</b>
						[Insert]
					</div>
					<div class="item">
						<b>Director:</b> [Insert]
					</div>
					<div class="item">
						<b>Production:</b> [Insert]
					</div>
					<div class="item">
						<b>More:</b>
						<a target="_blank" title="Anime News Network" href="[Insert]">ANN</a>,
						<a target="_blank" title="AniDB" href="[Insert]">AniDB</a>,
						<a target="_blank" title="Anime Planet" href="[Insert]">Anime-Planet</a>
					</div>
				</div>
				<div id="file">
					<h1>
						File Information
					</h1>
					<div class="item">
						<b>Group:</b> [Insert]
					</div>
					<div class="item">
						<b>Video:</b> [Insert]
					</div>
					<div class="item">
						<b>Audio:</b> [Insert]
					</div>
					<div class="item">
						<b>Subtitles:</b> [Insert]
					</div>
					<div class="item">
						<b>Related:</b> [Insert]
					</div>
				</div>
			</div>
		</div>
		<div class="low"></div>
	</div>
</div>
</body>
</html>
[screenshot]
[img][Insert][/img]
[img][Insert][/img]
[img][Insert][/img]
[img][Insert][/img]
[img][Insert][/img]
[/screenshot]

Sample

Back to top.

Simple book with JS pages

Submitted by: remix85 

<html>
<head>
<!--
* Template: Book v1.1
*           by remix85
*
* Feel free to rearange pages as You wish, just leave this comment.
* Keep in mind that space is limited, so long descriptions will have to be split manualy to two boxes or more.
* To find what should be done search for TODO in this template, but first copy it to sandbox and see how it works.
*
* Maximum image size is 340x480. Bigger images will be automatically clipped.
*
* I know that it's not quite edit-friendly.
* Send me a PM if You have problems with editing this template, or there's something wrong.
-->
<style type="text/css">
BODY {background-color: #FFFFFF; font-family: Times New Roman; font-size: 13px;}
TABLE {font-family: Times New Roman; font-size: 13px; color: #101010;}
A {color: #808080;}
A:hover {color: #000000;}

IMG {max-width: 340px; max-height: 480px; overflow: hidden;}

#book {width: 940px;}
#book1 {padding: 0 40px 0 50px;}
.title {font-size: 2em; font-weight: bold; text-align: center; color: #101010;}
.page {display: block;}

.hdr {display: none; text-align: center; border-bottom: solid 1px; width: 100%; margin: 0 0 5px 0; padding: 0;}
#tablist > UL {text-align: center; list-style: none; padding: 0; margin: 0;}
#tablist > UL > LI {float: left; background-color: transparent; border: solid #000000; border-width: 1px 1px 0 1px; color: #808080; margin: 0 0 0 0.5em; padding: 0 0.75em 0 0.75em; cursor: pointer;}
#tablist > UL > LI:hover {color: #000000;}

.box_left {color: #101010; float: left; clear: left; width: 340px; margin-left: 40px;}
.box_left TABLE {width: 100%;}
.box_left TABLE TR TH {font-size: 1.2em; text-align: center; width: 100%; color: #303030;}

.box_right {color: #101010; float: right; clear: right; width: 340px; margin-right: 60px;}
.box_right TABLE {width: 100%;}
.box_right TABLE TR TH {font-size: 1.2em; text-align: center; width: 100%; color: #303030;}

.tbl_info {width: 100%;}
.tbl_info TR {vertical-align: text-top;}
.tbl_info TR TD {text-align: left; padding: 0.2em 0 0.2em 0;}
.tbl_info TR TD:first-child {text-align: right; font-weight: bold; max-width: 25%;}
</style>

<script type="text/javascript" language="javascript">
// <![CDATA[

// small hack to show book layout only when JavaScript is enabled
document.writeln('<style type="text/css">');
document.writeln('#book {height: 582px; background-repeat: no-repeat; background-image: url("[bbtimg=1314]");}');
document.writeln('#book1 {overflow: hidden; max-height:500px; padding: 40px 40px 40px 50px;}');
document.writeln('.page {display: none;}');
document.writeln('.hdr {display: block;}');
document.writeln('</style>');

// Switch current page -> hide all pages, show current
function newpage(page_id)
{
	page_id = '#' + page_id;
	if(!$(page_id).is(":visible"))
	{
		$("div.page").hide();
		$(page_id).fadeIn(600, function(){});
	}
}
// ]]>
</script>
</head>

<body>
<center>

<div id="book"><div id="book1">
	<div class="box_left"><div class="hdr" id="tablist"><ul>
		<li onClick="newpage('page1');">Info</li>
		<li onClick="newpage('page2');">Summary</li>
		<!-- TODO: If needed, insert new tabs here -->
		<!-- something like <li onClick="newpage('tab_id');>Tab name</li> -->
	</ul><br /></div></div>

	<div class="box_right"><div class="hdr">[TODO: small title]</div></div>
	
	<!--
		TODO: put here elements that are always visible
		eg. move the image from page1 and use only "box_left" on all pages
	-->

	<div class="page" id="page1" style="display:block;">
		<div class="box_right" style="text-align: center;">
			[TODO: image]
			<!--<img src="http://" alt="Image not found" />-->
		</div>

		<div class="box_left">
			<table><tr><td>
				<div class="title">[TODO: title]</div>
			</td></tr></table><br />
		</div>

		<div class="box_left">
			<table><tr><th>- SERIES INFORMATION -</th></tr><tr><td>
				<table class="tbl_info">
				<tr><td>Aired:</td><td>[TODO: aired]</td></tr>
				<tr><td>Episodes:</td><td>[TODO: episodes]</td></tr>
				<tr><td>Categories:</td><td>[TODO: categories]</td></tr>
				<tr><td>Director:</td><td>[TODO: director]</td></tr>
				<tr><td>Production:</td><td>[TODO: producer]</td></tr>
				<tr><td>References:</td><td><a href="http://anidb.net/">AniDB</a>, <a href="http://www.animenewsnetwork.com/">ANN</a>, [TODO: sources]
				</table>
			</td></tr></table><br />
		</div>
		<div class="box_left">
			<table><tr><th>- FILE INFORMATION -</th></tr><tr><td>
				<table class="tbl_info">
				<tr><td>Group:</td><td>[TODO: group]</td></tr>
				<tr><td>Video:</td><td>[TODO: video]</td></tr>
				<tr><td>Audio:</td><td>[TODO: audio]</td></tr>
				<tr><td>Subtitle:</td><td>[TODO: subs]</td></tr>
				<tr><td>Comments:</td><td>- none -<br />[TODO: some comments?]</td></tr>
				<tr><td>Related:</td><td>[TODO: related]</td></tr>
				</table>
			</td></tr></table><br />
		</div>
	</div><!--page1-->

	<div class="page" id="page2">
		<div class="box_left">
			<table><tr><th>- SUMMARY -</th></tr><tr><td style="text-align: justify; text-indent: 1em;">
			[TODO: summary]
			</td></tr></table><br />
		</div>
		<div class="box_right">
			<table><tr><td style="text-align: justify; text-indent: 1em;">
			[TODO: add more summary or move image outside page1 and delete this div]
			</td></tr></table>
		</div>
	</div><!--page2-->
	
	<!--
	TODO: more pages? Why not! Just insert
	<div class="page" id="tab_id">
		<div class="box_left"> or <div class="box_right">
			<table><tr><th>- [Box title] -</th></tr><tr><td style="text-align: justify; text-indent: 1em;">
			[content]
			</td></tr></table><br /></div>
		</div>
	</div>
	and that's all!
	Don't forget to name your new page (eg. id="page3") and add new tab.
	Remember to check if it doesn't overflow the page and split content if necessary!
	-->
		

</div></div><!--book-->

</center>
</body>
</html>
[url=http://wiki.bakabt.me/index.php/BBCode#Screenshots]TODO: Screenshots[/url]

Sample template image: Book of Gosick
Back to top.

Manga Templates

Byousoku 5cm Manga Template

Click here to use

Dille's Manga Template

Click here to use

Msm595's Manga Template

Submitted by: kiiller_man1 

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<title></title> 
<style type="text/css"> 
    html, body, p, h1, ul {
        margin: 0;
        padding: 0;
    }
    body {
        font-size: 14px;
        height: 580px;
        width: 940px;
        color: #333;
        text-shadow: 1px 1px #ccc;
        font-family: Helvetica, Arial, sans-serif;
        background-color: #f9f9f9;
    }
    #header {
        text-align: center;
        margin: 0 0 18px;
    }
    h1 {
        font-family: Georgia, serif;
        font-size: 28px;
        text-shadow: 1px 1px 2px #aaa;
        color: #444;
    }
    #links li {
        display: inline;
        padding: 0 5px 0 10px;
        border-left: 1px solid #ccc;
    }
    #links li.first {
        border-left: none;
    }
    a {
        color: #FFB000;
        text-decoration: none;
        font-size: 16px;
        text-shadow: none;
        font-weight: bold;
    }
    a:hover {
        color: #00B0FF;
    }
    #bigPicture {
        width: 350px;
        float: left;
        text-align: center;
    }
    #bigPicture img {
        max-width: 350px;
        max-height: 490px;
        /*ie6 max- fixes. does anyone even use ie6 anymore? it's not even supported by microsoft now... lol*/
        width: expression(this.width > 350 ? (this.height > 490 ? true : 350): true);
        height: expression(this.height > 490 ? 490: true);
    }
    #info {
        float: left;
        width: 565px;
        margin-left: 25px;
    }
    h2 {
        margin: 0 0 3px 0;
        text-align: center;
        font-size: 22px;
        color: #444;
        text-shadow: 1px 1px 1px #aaa;
    }
    dl {
        margin: 0 0 12px;
    }
    dt {
        font-weight: bold;
        margin-top: 5px;
    }
    dd {
        margin-left: 18px;
    }
    #screens {
        clear: both;
        padding: 25px 25px 0;
        text-align: center;
    }
    #screens a {
        display: inline-block;
        margin-right: 12px;
        border: 1px solid #bbb;
        height: 200px;
        padding: 5px;
        vertical-align: bottom;
    }
    #screens a:hover {
        border: 1px solid #444;
    }
    #screens img {
        max-height: 200px;
        border: none;
    }
    ::-moz-selection{ background: #66A3D2; color:#fff; text-shadow: none; }
    ::selection { background:#66A3D2; color:#fff; text-shadow: none; } 
</style> 
</head> 
<body> 
    <div id="header"> 
        <h1>Negative Happy Chain Saw Edge</h1> 
        <h2>ネガティブハッピー・チェーンソーエッヂ</h2> 
        <ul id="links"> 
            <li class="first"><a href="http://www.mangaupdates.com/series.html?id=19674">Manga Updates</a></li> 
            <li><a href="http://myanimelist.net/manga/5674/Negative_Happy_Chainsaw_Edge">My Anime List</a></li> 
        </ul> 
    </div> 
    
    <div id="bigPicture"> 
        <img src="example/manga_cover.jpg" alt="Manga Picture" id="bigImage"> 
    </div> 
    
    <div id="info"> 
        <h2>Manga Information</h2> 
        <dl> 
            <dt>Year</dt> 
            <dd>2008</dd> 
            <dt>Volumes</dt> 
            <dd>2</dd> 
            <dt>Categories</dt> 
            <dd>Action, Ecchi, Romance, Shounen, Psychological</dd> 
            <dt>Artist</dt> 
            <dd>Saika, Junichi</dd> 
            <dt>Author</dt> 
            <dd>Takimoto, Tatsuhiko</dd> 
            <dt>Publisher</dt> 
            <dd>Shounen Ace</dd> 
            <dt>Scanlator</dt> 
            <dd>Moob</dd> 
            <dt>Comments</dt> 
            <dd>A great read :D</dd> 
        </dl> 
        <h2>Summary</h2> 
        <p>Eri Yukizaki is a girl who fights. She is a “pretty soldier.” Her foe is the evil Chainsaw-man, who doesn’t die even after being slashed. If he isn’t defeated, the world will have no future. I was wrapped into this battle, and my life has changed completely… A “non-stop” negative youth story! - MAL</p> 
    </div> 
    
    <div id="screens"> 
        <a href="example/manga_cover.jpg" rel="lightbox"><img src="example/manga_covert.jpg" alt="manga screenshot"></a> 
        <a href="example/manga_1.jpg" rel="lightbox"><img src="example/manga_1t.jpg" alt="manga screenshot"></a> 
        <a href="example/manga_2.jpg" rel="lightbox"><img src="example/manga_2t.jpg" alt="manga screenshot"></a> 
        <a href="example/manga_3.jpg" rel="lightbox"><img src="example/manga_3t.jpg" alt="manga screenshot"></a> 
        <a href="example/manga_4.jpg" rel="lightbox"><img src="example/manga_4t.jpg" alt="manga screenshot"></a> 
    </div> 
    
    <script type="text/javascript"> 
        var as=document.getElementById("screens").getElementsByTagName('a'),
            img=document.getElementById('bigImage');
            
        for(var i=0;i<as.length;i++) { 
            as[i].onmouseover = function() {
                var im = new Image();
                im.onload = function() {
                    img.height=img.height; //don't let the image get taller than the original
                    img.src=this.src;
                };
                im.src = this.href;
            };
        }
    </script> 
</body> 
</html>

Sample template image: Image link

OST Templates

OST Template 1

Click here to use

Show/hide Tracklist OST Template

Click here to use

Dropdown list OST Template

Click here to use

Simple OST Template

Click here to use

Boxed OST Template

---

Submitted by: kureshii

Note: All album images used must be the same size! Preferably ~350X350px, not too tall or wide. height and width values in "imgborder" class must be edited to fit the image. Other numbers in the CSS stylesheet may need to be tweaked for best effect. 

<html>
<head>
<title>[[Torrent Title]]</title>
<style type="text/css">
body {
background-color: #ffffff;
text-align: left;
margin: auto;
}
table {
display: table;
border-spacing: 10px;
font-family: Calibri, Helvetica, sans-serif;
font-size: medium;
}
tr {display: table-row;}
td {
display: table-cell;
min-width: 430px;
padding: 10px;
border: solid 2px #000000;
vertical-align: top;
}
.album {max-width: 30em; margin: auto;}
.vocal {max-width: 50em; margin: auto;}
.header1 {
font-size: 140%;
font-weight: bold;
text-align: center;
}
.header2 {
font-size: 115%;
}
.header3 {
font-size: 66%;
font-style: italic;
font-weight: normal;
}
img {
margin: 8px;
}
.imgborder {
border: 1px solid #666666;
height: 366px;
width: 366px;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
margin-bottom: 5px;
}
.footer {position: relative;}
</style></head>
<body>
<table>
    <tr>
      <td>
      <div class="header1">[[Album 1 Description: OST/Single/OP/ED/etc]]<br>
      <div class="header2">[[Album 1 Title]]<br>
      <div class="header3">[[Artist(s) info]]</div></div></div>
      <div class="imgborder"><img src="[[Album 1 Image URL (note: update image height&width in imgborder CSS class!)]]"></div>
      <div class="album"><b>Catalog No.:</b> [[Catalog No.]]<br>
      <b>Compression:</b> [[File codec/format]]<br>
      <b>Album Release Date:</b> [[Album 1 Release Date]]<br>
      <br>
      <b>Tracklist:</b><br>
1. [[Track 1]]<br>
2. [[Track 2]]<br>
3. [[Track 3]]<br>
4. [[Track 4]]<br>
<br>
<div class="footer">[[FLAC/MP3/WV (choose 1)]] files from [[Insert Ripper name here]]<br>
Booklet scans included ([[Number of album 1 scans]] files).</div></div>
      </td>
      <td>
      <div class="header1">[[Album 2 Description: OST/Single/OP/ED/etc]]<br>
      <div class="header2">[[Album 2 Title]]<br>
      <div class="header3">[[Artist(s) info]]</div></div></div>
      <div class="imgborder"><img src="[[Album 2 Image URL (note: update image height&width in imgborder CSS class!)]]"></div>
      <div class="album"><b>Catalog No.:</b> [[Catalog No.]]<br>
      <b>Compression:</b> [[File codec/format]]<br>
      <b>Album Release Date:</b> [[Album 2 Release Date]]<br>
      <br>
      <b>Tracklist:</b><br>
1. [[Track 1]]<br>
2. [[Track 2]]<br>
3. [[Track 3]]<br>
4. [[Track 4]]<br>
<br>
<div class="footer">[[FLAC/MP3/WV (choose 1)]] files from [[Insert Ripper name here]]<br>
Booklet scans included ([[Number of album 2 scans]] files).</div></div>
      </td>
    </tr>
    <tr>
      <td>
      <div class="header1">[[Album 3 Description: OST/Single/OP/ED/etc]]<br>
      <div class="header2">[[Album 3 Title]]<br>
      <div class="header3">[[Artist(s) info]]</div></div></div>
      <div class="imgborder"><img src="[[Album 3 Image URL (note: update image height&width in imgborder CSS class!)]]"></div>
      <div class="album"><b>Catalog No.:</b> [[Catalog No.]]<br>
      <b>Compression:</b> [[File codec/format]]<br>
      <b>Album Release Date:</b> [[Album 3 Release Date]]<br>
      <br>
      <b>Tracklist:</b><br>
1. [[Track 1]]<br>
2. [[Track 2]]<br>
3. [[Track 3]]<br>
4. [[Track 4]]<br>
<br>
<div class="footer">[[FLAC/MP3/WV (choose 1)]] files from [[Insert Ripper name here]]<br>
Booklet scans included ([[Number of album 3 scans]] files).</div></div>
      </td>
      <td>
      <div class="header1">[[Album 4 Description: OST/Single/OP/ED/etc]]<br>
      <div class="header2">[[Album 4 Title]]<br>
      <div class="header3">[[Artist(s) info]]</div></div></div>
      <div class="imgborder"><img src="[[Album 4 Image URL (note: update image height&width in imgborder CSS class!)]]"></div>
      <div class="album"><b>Catalog No.:</b> [[Catalog No.]]<br>
      <b>Compression:</b> [[File codec/format]]<br>
      <b>Album Release Date:</b> [[Album 4 Release Date]]<br>
      <br>
      <b>Tracklist:</b><br>
1. [[Track 1]]<br>
2. [[Track 2]]<br>
3. [[Track 3]]<br>
4. [[Track 4]]<br>
<br>
<div class="footer">[[FLAC/MP3/WV (choose 1)]] files from [[Insert Ripper name here]]<br>
Booklet scans included ([[Number of album 4 scans]] files).</div></div>
      </td>
    </tr>
</table>
</div>
</body></html>

Sample torrent: Macross Frontier Music Collection

Go to: Offers Page


Javascript-based dropdown menu Template (Especially good for manga/OST collections)

Submitted by: shadowmaniac

Note: A fixed body height, based on the max height of your longest description, has to be specified else, description will be truncated.

Note: Please don't use this template if you don't/can't understand what's going on. 

<html>
<head>
	<style type="text/css">
	hr
	{
		width: 80%;
	}

	body
	{
		align: center;
                height: 500px;
	}

	.tdtext
	{
		width: 30%;
		v-align: top;
	}

	.wrapper
	{
		width: 800px;
		align: center;	border-width: 2px;
		border-style: solid;
		border-color: #000;
		overflow: auto;
		text-align: center;
	}
	</style>

	<script  language="javascript">
	<!--
//############################################
//Don't change any of the code BELOW this line
//############################################
	/***********************************************
	* IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
	* Visit DynamicDrive.com for hundreds of original DHTML scripts
	* This notice must stay intact for legal use
	***********************************************/

	//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
	//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
	var iframeids=["myframe"]

	//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
	var iframehide="yes"

	var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
	var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

	function resizeCaller() {
	var dyniframe=new Array()
	for (i=0; i<iframeids.length; i++){
	if (document.getElementById)
	resizeIframe(iframeids[i])
	//reveal iframe for lower end browsers? (see var above):
	if ((document.all || document.getElementById) && iframehide=="no"){
	var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
	tempobj.style.display="block"
	}
	}
	}

	function resizeIframe(frameid){
	var currentfr=document.getElementById(frameid)
	if (currentfr && !window.opera){
	currentfr.style.display="block"
	if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
	currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
	else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
	currentfr.height = currentfr.Document.body.scrollHeight;
	if (currentfr.addEventListener)
	currentfr.addEventListener("load", readjustIframe, false)
	else if (currentfr.attachEvent){
	currentfr.detachEvent("onload", readjustIframe) // Bug fix line
	currentfr.attachEvent("onload", readjustIframe)
	}
	}
	}

	function readjustIframe(loadevt) {
	var crossevt=(window.event)? event : loadevt
	var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
	if (iframeroot)
	resizeIframe(iframeroot.id);
	}

	function loadintoIframe(iframeid, url){
	if (document.getElementById)
	document.getElementById(iframeid).src=url
	}

	if (window.addEventListener)
	window.addEventListener("load", resizeCaller, false)
	else if (window.attachEvent)
	window.attachEvent("onload", resizeCaller)
	else
	window.onload=resizeCaller
//#############################################
//Don't change any of the code BEYOND this line
//#############################################




//########################################
//Modify the code below to suit your needs
//########################################
	function Show(selected_option)
	{
		  // get our iframe
			var testFrame = document.getElementById("myframe");
			var val;

//selected_option refers to the "option" value provided in the HTML code
			switch(parseInt(selected_option))
			{
				case 1:
val = "<table align='center' border='1' width='100%'>";
val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>";
val += "<img src='[[img link here]]'></td></tr>";
val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 1]]</h2></td></tr>";
val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>";
val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>";
val += "<tr><td class='text'>[[Track list 2]]</td><td class='text'>[[Track list 6]]</td></tr>";
val += "<tr><td class='text'>[[Track list 3]]</td><td class='text'>[[Track list 7]]</td></tr>";
val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>";
val += "</table>";
				  break;
				case 2:
val = "<table align='center' border='1' width='100%'>";
val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>";
val += "<img src='[[img link here]]'></td></tr>";
val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 2]]</h2></td></tr>";
val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>";
val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>";
val += "<tr><td class='text'>[[Track list 2]]</td><td class='text'>[[Track list 6]]</td></tr>";
val += "<tr><td class='text'>[[Track list 3]]</td><td class='text'>[[Track list 7]]</td></tr>";
val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>";
val += "</table>";
				  break;
				case 3:
val = "<table align='center' border='1' width='100%'>";
val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>";
val += "<img src='[[img link here]]'></td></tr>";
val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 3]]</h2></td></tr>";
val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>";
val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>";
val += "<tr><td class='text'>[[Track list 2]]</td><td class='text'>[[Track list 6]]</td></tr>";
val += "<tr><td class='text'>[[Track list 3]]</td><td class='text'>[[Track list 7]]</td></tr>";
val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>";
val += "</table>";
				  break;
				case 4:
val = "<table align='center' border='1' width='100%'>";
val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>";
val += "<img src='[[img link here]]'></td></tr>";
val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 4]]</h2></td></tr>";
val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>";
val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>";
val += "<tr><td class='text'>[[Track list 2]]</td><td class='text'>[[Track list 6]]</td></tr>";
val += "<tr><td class='text'>[[Track list 3]]</td><td class='text'>[[Track list 7]]</td></tr>";
val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>";
val += "</table>";
				  break;
				case 5:
val = "<table align='center' border='1' width='100%'>";
val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>";
val += "<img src='[[img link here]]'></td></tr>";
val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 5]]</h2></td></tr>";
val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>";
val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>";
val += "<tr><td class='text'>[[Track list 2]]</td><td class='text'>[[Track list 6]]</td></tr>";
val += "<tr><td class='text'>[[Track list 3]]</td><td class='text'>[[Track list 7]]</td></tr>";
val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>";
val += "</table>";
				  break;
				default:
				  val = "<h2 align='center'>Choose an album/OST from the drop menu</h2><br />";
				  break;
			}

			// now write out the new contents
			var doc = testFrame.contentDocument;
			if (doc == undefined || doc == null)
				doc = testFrame.contentWindow.document;
			doc.open();
			doc.write(val);
			doc.close();

		  document.all.myFrame.style.visibility="visible";
	}
	//-->
	</script>
</head>

<body>
	<center>
		<div class="wrapper">
			<br />
			<form  id="form1">
				<select name="dest" onchange="Show(this.options[this.selectedIndex].value)">

<!-- Modify this part here -->
					<option value="0">Choose an album/OST</option>
					<option value="1">[[OST 1]]</option>
					<option value="2">[[OST 2]]</option>
					<option value="3">[[OST 3]]</option>
					<option value="4">[[OST 4]]</option>
					<option value="5">[[OST 5]]</option>
<!-- No need for modification beyond this point -->

				</select>
			</form>
<iframe  id="myframe" frameborder="0"  vspace="0"  hspace="0"  marginwidth="0" marginheight="0" width="700"  
   scrolling="no" style="overflow:visible; width:100%; display:none"></iframe>
		</div>
    </center>
</body>
</html>

Sample template image: Sample image

Sample torrent (slightly modified template): KoiKoi7 - Song Shu Paradise & Character Mini Albums

Simple ChalamiuS OST Template

Click here to use

Go to: Offers Page

Outdated Templates

Please don't use following templates anymore. They are outdated.

HTML5 CSS3 Anime Template

Submitted by: CvP

Error creating thumbnail: File missing
Full Sized Screenshot

This anime template utilizes HTML5 and CSS3. It is compatible with latest IE9/Firefox/Chrome/Safari/Opera as much as possible.

To use this template, you don't need to edit a single line of code.

All you need to do is

  • fill up the form with all the data and hit submit.
  • Once template is loaded, right click > "view source" > select all > copy.
  • Now go to offer page and paste the code.

It is that simple.


This template (and the form) will be constantly updated for better compatibility and features. Please leave your feedback in here
If you need any help customizing this template, you can post in the above link as well.

Note: It is a good idea to use Firefox4 to view the form (The template should be ok on any newer browsers).

Click here to use.
Click here for a live preview!

Back to top.

Generic Revision-2 Anime Template

Submitted by: deysmacro 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>

<script src="http://www.yourjavascript.com/1103491011/NFLightBox.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        var settings = {
            imageLoading: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.loading.gif',
            imageBtnPrev: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.prev.png',
            imageBtnNext: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.next.png',
            imageBtnClose: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.close.png',
            imageBlank: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.blank.gif',
            imageBtnBottomPrev: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.btm.prev.gif',
            imageBtnBottomNext: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.btm.next.gif',
            imageBtnPlay: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.start.png',
            imageBtnStop: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.pause.png',
            containerResizeSpeed: 350 };
        $('#gallery a').lightBox(settings);
    }); 
</script>

<style type="text/css">
/*  -| general info |-
*
*     Main user link   : http://bakabt.me/user/816453/deysmacro.html
*     Forum user link : http://forums.bakabt.me/index.php?action=profile;u=816453
*
*     I welcome all of you people to use this template at your convenience.
*     I also can help you guys with the template. I will help whenever I can.
*     Please leave the credit intact if you plan to use this template.
*     Your cooperation is highly appreciated. Thank you.
*     Do contact me via PM or email if you had anything to say.
*
*     Email : deysmacro[at]gmail[dot]com
*
*
*     Originally Customized By : deysmacro
*     Re-Customized By            : PUT YOUR NICK HERE
*
*     Template Version              : 1.0.12 generic revision-2 anime template
*     Template Last Update On : Jan 7th, 2010 @ 11:28am GMT+8
*
*
*     SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2010 | 01 | 07 | g-r2-at | v1.0.12
*
* -| end |- */

/* -| Info you should know |-
*
*     Quick Reminder:
*     If you found any syntax with * siding with the syntax, it is targeted for IE only.
*
*
*     Example:
*          Assume "width" is the syntax...
*
*     body {		
*          width: 100px;     <-- major browser support
*
*          *width: 110px;     <-- targeted for IE only
*     }
*
*
*     This is done as to make it IE compatible. It is not required if IE displays the generated page correctly.
*     Please take note of this when you are editing.
*
* -| end |- */

#jquery-overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; }
#jquery-lightbox { position: absolute; top: 0; left: 0; 	width: 100%; z-index: 100; text-align: center; line-height: 0; }
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box-top { width: 100%; }
#lightbox-container-image-box-top-left { width: 10%; height: 1px; position: relative; margin: 0 auto; float: left; z-index: 10; display: inline; 	text-align: left; }
#lightbox-container-image-box-top-middle { width: 80%; padding-top: 5px; height: 5px; position: relative; margin: 0 auto 0 0px; float: left; z-index: 5; display: inline; }
#lightbox-container-image-box-top-middle div.progress { 	width: 80%; padding-top: 5px; height: 5px; position: relative; 	margin: 0 auto 0 0px; float: left; background-color: #e4e4e4; z-index: 5; display: inline; }
#lightbox-container-image-box-top-right { 	width: 10%; height: 1px; position: relative; margin: 0 auto; float: right; text-align: right; z-index: 10; display: inline; }
#lightbox-container-image-box { position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#lightbox-container-image { height: 100%; padding: 10px; }
#lightbox-loading { 	position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#lightbox-nav { position: absolute; top: 32px; left: 0; height: 100%; width: 100%; z-index: 10; }
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none; }
#lightbox-nav-btnPrev, #lightbox-nav-btnNext { width: 49%; height: 100%; zoom: 1; display: block; }
#lightbox-nav-btnPrev { left: 0; float: left; }
#lightbox-nav-btnNext { right: 0; float: right; }
#lightbox-container-image-data-box { 	font: 10px Verdana, Helvetica, sans-serif; 	background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; padding: 0 10px 0; text-align: left; }
#lightbox-container-image-data #lightbox-image-details { width: 70%; float: left; text-align: left; }
#lightbox-image-details-caption { font-weight: bold; display: block; 	height: 25px; 	line-height: 25px; vertical-align: middle; }
#lightbox-image-details-currentNumber { display: block; clear: left; padding-bottom: 1.0em; display: inline; height: 16px; line-height: 16px; 	vertical-align: middle; }
#lightbox-image-details-previous-image, #lightbox-image-details-previous-text, #lightbox-image-details-next-image, #lightbox-image-details-next-text
{ display: inline; height: 25px; line-height: 25px; vertical-align: middle; cursor: pointer; cursor: hand; }

p { text-align: justify; background-color: #F5E8E0; text-shadow: #CEB0D6 2px 2px 2px; }

.div1 { text-align: center; padding: 5px 10px 5px 10px; *padding: -25px 10px -25px 10px; margin:0px; *margin: 5px 10px 5px 10px; background-color: #F5E8E0; border:1px solid #EFD5BE; }
.div2 { margin-top: 15px; }
.div3 { margin-top: 10px; }
.div4 { *padding: 10px; }

fieldset { border: 1px solid #CEB0D6; }

.legend1 { color: #710000; text-align: center; text-shadow: #fff -2px -2px 2px; font-weight: bold; background: #E2D5E6; border: 1px solid  #CEB0D6; padding: 5px 250px; *padding: 5px 270px; padding: 5px 193px;] } 
.legend2 { color: #710000; text-align: center; text-shadow: #fff -2px -2px 2px; font-weight: bold; background: #E2D5E6; border: 1px solid  #CEB0D6; padding: 5px 255px; *padding: 5px 275px; padding: 5px 200px;] } 
.legend3 { color: #710000; text-align: center; text-shadow: #fff -2px -2px 2px; font-weight: bold; background: #E2D5E6; border: 1px solid  #CEB0D6; padding: 5px 144px; padding: 5px 142px;] } 
.legend4 { color: #710000; text-align: center; text-shadow: #fff -2px -2px 2px; font-weight: bold; background: #E2D5E6; border: 1px solid  #CEB0D6; padding: 5px 235px; padding: 5px 222px;] } 

#img1 { padding:15px; text-align:center; border:1px solid #EFD5BE; background-color:#fff; margin: 10px; }
#img2 { padding:10px; text-align:center; border:1px solid #EFD5BE; background-color:#fff; margin-left: 4px; }

body {  background-color: #FCF3F4; }

.tr1 { background-color:#F5E8E0; }
.td1 { border:1px solid #EFD5BE; text-align:right; width:19%; text-shadow: #CEB0D6 2px 2px 2px; }
.td2 { border:1px solid #EFD5BE; text-shadow: #CEB0D6 2px 2px 2px; }

</style>

</head>
<body>
<table width='100%'>
     <tr>
          <td ><img id='img1' src='http://img693.imageshack.us/img693/330/imgcm.jpg' /></td>
          <td>
               <fieldset><legend class=legend1>SERIES INFORMATION</legend>
                    <table width=100% cellpadding=5px cellspacing=5px>
                         <tr class=tr1><td class=td1>Main Title:</td><td class=td2>Misutenaide Daisy</td></tr>
                         <tr class=tr1><td class=td1>Official Title:</td><td class=td2>Don`t Leave Me Alone, Daisy</td></tr>
                         <tr class=tr1><td class=td1>Japanese Title:</td><td class=td2>みすてないで　デイジー</td></tr>
                         <tr class=tr1><td class=td1>Year:</td><td class=td2>03.07.1997 till 18.09.1997</td></tr>
                         <tr class=tr1><td class=td1>Episodes:</td><td class=td2>12</td></tr>
                         <tr class=tr1><td class=td1>Categories:</td><td class=td2>Comedy, Cyborgs, Mecha, Sci-Fi, Shounen, Slapstick</td></tr>
                         <tr class=tr1><td class=td1>Director:</td><td class=td2>Yuji Mutoh</td></tr>
                         <tr class=tr1><td class=td1>Production:</td><td class=td2>BeSTACK, d-rights</td></tr>
                         <tr class=tr1><td class=td1>References:</td>
                              <td class=td2>
                                   <a href="http://anidb.net/perl-bin/animedb.pl?show=anime&aid=2022" target="_blank">AniDB</a> | 
                                   <a href="http://www.animenewsnetwork.com/encyclopedia/anime.php?id=137" target="_blank">ANN</a> |
                                   <a href="http://www.animenfo.com/animetitle,711,ubabvw,misutenaide_dai.html" target="_blank">AnimeNFO</a>
                              </td></tr>
                    </table>
          </fieldset>
          <div class=div2>
          <fieldset><legend class=legend2>FILE INFORMATION</legend>
               <table width=100% cellpadding=5px cellspacing=5px>
                    <tr class=tr1><td class=td1>FanSub By:</td><td class=td2><b>A-Et</b></td></tr>
                    <tr class=tr1><td class=td1>Video:</td><td class=td2><b>DivX 5</b> [ 560x420 29.97fps ]</td></tr>
                    <tr class=tr1><td class=td1>Audio:</td><td class=td2><b>Japanese</b> [ MPEG Audio Layer 3 48000Hz stereo 113kbps ]</td></tr>
                    <tr class=tr1><td class=td1>Subtitles:</td><td class=td2><b>English</b> [ Hard-Subbed ]</td></tr>
               </table>
          </fieldset>
          </div>
          </td>
     </tr>
     <tr>
          <td width=30%>
          <div class=div3>
          <fieldset><legend class=legend3>SYNOPSIS</legend>
               <div class=div1><p>Surrounded only by his inventions, Techno doesn't really interact with other people much. However, one day, a girl attempts to "break into" his fortress. This hapless passerby, a girl named Hitomi, becomes the object of his affection. Techno decides to name her "Daisy," and begins planning to make her his, but can Annie and Yamakawa X protect Hitomi or will the science nerd Techno win Hitomi's heart?</p></div>
          </fieldset>
          </div>
          </td>
          <td>
          <div class=div3>
          <fieldset><legend class=legend4>SCREENSHOTS</legend><div class=div4><div id=gallery>
               <a href='http://img706.imageshack.us/img706/5193/dontleavemealonedaisy01.png' ><img id=img2 src='http://img706.imageshack.us/img706/5193/dontleavemealonedaisy01.th.png' border='0'/></a>
               <a href='http://img687.imageshack.us/img687/5193/dontleavemealonedaisy01.png' ><img id=img2 src='http://img687.imageshack.us/img687/5193/dontleavemealonedaisy01.th.png' border='0'/></a>
               <a href='http://img192.imageshack.us/img192/5193/dontleavemealonedaisy01.png' ><img id=img2 src='http://img192.imageshack.us/img192/5193/dontleavemealonedaisy01.th.png' border='0'/></a>
          </div></div></fieldset>
          </div>
          </td>
     </tr>
</table>

</body></html>

Sample template image: Click here for full preview
Back to top.

JS Alternative Anime Template - Editing Friendly Edition

Submitted by: deysmacro 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>


<script language="javascript" purpose="User definitions">
/* --| start |--| user-edit auto text replacement scripting engine |---------------------------------------------------------------> nothing to edit here - go to edit info center instead <--| note |-- */

function dcw(input)
   { document.write(input); }
       useredit = new Object();
       related = new Object();

       related.anime_list = new Array();
       related.ost_list = new Array();
       related.pics_list = new Array();

function add_related(type, title, href)
   { var tmp_list;
          switch (type) {
                 case "anime": target_list = related.anime_list; 
                     break;
                  case "ost"  : target_list = related.ost_list;
                      break;
                   case "pics": target_list = related.pics_list;
                      break; }

        tmp_item = new Object();
   
        tmp_item.title = title;
        tmp_item.href = href;

        target_list.push(tmp_item);
   }

/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit info center |--| start |-- */
/* --> most user only need to edit the info here <--------------------------------------------------------------------------------------------------------------------------------------------------------------| note |-- */


useredit.heading="Panda Kopanda | Panda! Go Panda! [DivX][MP3]";


useredit.maintitle="Panda Kopanda";
useredit.officialtitle="Panda! Go Panda";
useredit.japanesetitle="パンダコパンダ ";
useredit.year="1972 & 1973";
useredit.episodes="2 combined into 1";
useredit.categories="Adventure, Anthropomorphism, Comedy, Contemporary Fantasy, Fantasy";
useredit.director="Isao Takahata";
useredit.production="Shunzo Kato";


/* --> if any of the reference link is unavailable, just replace it with # <----------------------------------------------------------------------------------------------------------------------------------| note |-- */
useredit.anidb = "http://anidb.net/perl-bin/animedb.pl?show=anime&aid=530";
useredit.animenfo = "http://www.animenfo.com/animetitle,2379,stbesx,panda_kopanda.html";
useredit.ann = "http://www.animenewsnetwork.com/encyclopedia/anime.php?id=352";
useredit.officialpage = "http://www.nausicaa.net/miyazaki/panda/";


useredit.synopsis=
"Panda Kopanda (Panda! Go Panda!) is a 30 minute movie made in 1972. Miyazaki created the original idea, the script, the layouts, and did key animation, and Takahata directed the film.<br><br>The story is about a little girl, Mimiko, who was left alone while her Grandma was away.<br><br>A 1973 sequel, Panda Kopanda: Amefuri Saakasu no Maki (Panda! Go Panda! & the Rainy-day Circus), continues the story and was made by the same people who made the first movie. <br><br>The literal translation of the title Panda Kopanda is 'Panda, Baby Panda', but it's been released in North America as Panda Go Panda.";


useredit.fansub="<b>No Information</b>";
useredit.note="Please continue seeding as much as you can.<br>Thank you guys.";


useredit.srcs_left="";
useredit.srcs_right="DVD";


useredit.vids_left="DIVX";
useredit.vids_right="704X544";


useredit.auds_left="JP";
useredit.auds_right="MP3  24KHZ";


useredit.subs_left="EN";
useredit.subs_right="HARD";


useredit.tooltip_label_vids="This title has been encoded with <b>DivX 6 - 704 x 544 29.97fps</b>.";
useredit.tooltip_label_auds="This title utilized <b>MPEG Audio Layer 3 24000Hz stereo 48Kbps</b>.";
useredit.tooltip_label_subs="This title has been <b>hard-subbed</b>.";


/* --> this is an array of links; means that the link could be add or remove at your will; the link here would be dynamically generated accordingly <-------------------------------------| note |-- */
add_related("anime", "Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]", "http://bakabt.me/torrent/10676/Panda_Kopanda_Panda_Go_Panda_DVD_DivX_MP3.html");
add_related("anime", "Dummy link", "#");


/* --> this is an array of links; means that the link could be add or remove at your will; the link here would be dynamically generated accordingly <-------------------------------------| note |-- */
add_related("ost", "No related link", "#");
add_related("ost", "Dummy link", "#");


/* --> this is an array of pics; means that the pics could be add or remove at your will; the pics here would be dynamically generated accordingly; 320px max width if possible; use jpg format for loading performance <| note |-- */
add_related("pics", "#", "http://img39.imageshack.us/img39/280/pandakopanda.jpg");
add_related("pics", "#", "http://img39.imageshack.us/img39/280/pandakopanda.jpg");
add_related("pics", "#", "http://img39.imageshack.us/img39/280/pandakopanda.jpg");


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit info center |--| end |-- */
/* --| end |--| user-edit auto text replacement scripting engine |---------------------------------------------------------------------------------------------------------------------------------------------------- */
</script>


<!-- multi picture presentation scripting engine -->
<script src="http://deysmacro.uuuq.com/resources/bakabt/jquery.cycle.all.min.js" type="text/javascript"></script>


<style type="text/css">
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| general info section |--| start |---
*	Thanks To         : kureshii, Jarudin
*	Thanks Also To : enginarc, DaggerLite, blubart
*
*	Originally Customized By : deysmacro
*	Re-Customized By            : PUT YOUR NICK HERE
*
*	Template Version              : 3.2.2.1 js alternative - editing friendly edition
*	Template Last Update On : July 26th, 2009 @ 17:28pm GMT+8
*
*	Please leave the credit intact if you plan to use this template.
*	Your cooperation is highly appreciated. 
*
*	Hopefully you enjoy using this template
*	Thank you for your time and good day.
* --------------------------------------------------------------------------------------------------------------------------------------------------------| SN |-----
*	SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2009 | 07 | 26 | 0720 | d-ait | v3221 | 36
* ---------------------------------------------------------------------------------------------------------------------------------| Info you should know |-----
*	Quick Reminder:
*	If you found any syntax with * siding with the syntax, it is targeted for IE only.
*
*	Example:
*	Assume "width" is the syntax...
*
*	body {		
*		width: 100px;       <-- major browser support
*
*		*width: 110px;       <-- targeted for IE only
*	}
*
*	This is done as to make it IE compatible. It is not required if IE displays the generated page correctly.
*	Please take note of this when you are editing.
* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| general info section |--| end |-- */


/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| read first before carry on --| start |--
    
        Note:
        1. This template is pretty much already ready out of the box and usually doesn't need to be customized anymore.
        2. I will put edit hint at critical point only where the edit usually doesn't need to be done unless the generated page is somehow not quite right.
        3. Just find any 'edit point xx of xx' for quick edit target.
        4. Other settings which have no edit point or edit hint is meant to be left as it is and for advanced user only.
        5. Advanced user may edit the settings but I highly not recommended as it should be fine without to be customized.
        6. Go directly to bottom to edit the screenshot img links.

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| read first before carry on --| end |-- */


/* ---------------------------------------------------------------------------------------------------------| quick file summary control center |----- */
/* --| whole table positioning control |-- */

.button {
	margin: 0px;
}

/* --| end |---------------------------- */
/* --| whole table body control |-- */

table.file_info {
	border-spacing: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 6px;
	margin-bottom: 0px;
	width: auto;

	*border-collapse: collapse;
}

/* --| end |----------------------- */
/* --| tootip hover control |-- */

td.info_label:hover {
	z-index: 9;
	cursor: help;
}

/* --| end |------------------------- */
/* --| tootip misc control |------ */

td.info_label span {
	display: none; 
}

/* --| end |------------------------ */
/* --| tootip styling control |-- */

td.info_label:hover span {
	position: absolute;
	bottom: 24px;
	font-family: "Trebuchet MS", sans-serif;
	font-size: 11px;
	line-height: 16px;
	background-color: #FFFFCC;
	background-image:url('http://img194.imageshack.us/img194/1986/helpm.png'); 
	background-position: 3px 50%; 
	background-repeat: no-repeat; 
	color: #777777;
	height: 16px;
	width: auto;
	border: 1px solid #999999;
	margin: 0px;
	padding: 5px;
	display: block;


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 1 of 3 |---------- */

	*width: 350px;	/* for IE only - no need to adjust the tooltip width unless needed */

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 1 of 3 |---------- */


	*bottom: 16px;
	*left: -80px;
	*text-align: left;
}

/* --| end |---------------------------------------- */
/* --| individual left side content control |-- */

td.info_label {
	width: 20px;
	font-family: "Lucida Console", sans-serif;
	font-size: 7.7px;
	text-align: center;
	color: #D0D0F0;
	background-color: #854C9E;
	border: #854C9E 2px solid;
	position: relative;

	*font-size: 9px;
}

/* --| end |------------------------------------------------- */
/* --| individual right side - left content control |-- */

td.info_a {
	background-color: #EEEEFF;
	border: #854C9E 2px solid;
	border-right: 0px; 
	color: #854C9E;
	font-family: "Lucida Console", sans-serif;
	font-size: 7.7px;
	text-align: left;
	width: 50px;
	padding: 0px 0px 0px 3px;
	font-size: 7.7px;

	*font-size: 9px;
}

/* --| end |--------------------------------------------------- */
/* --| individual right side - right content control |-- */

td.info_b {
	background-color: #EEEEFF;
	border: #854C9E 2px solid;
	border-left: 0px; 
	color: #854C9E;
	font-family: "Lucida Console", sans-serif;
	font-size: 7.7px;
	text-align: right;
	width: 60px;
	padding: 0px 3px 0px 0px;
	font-size: 7.7px;

	*font-size: 9px;
}

/* --| end |----------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */


/* --| div which holds divpic and divtab |-- */ 

.divwhole {
        margin: 23px 0px 20px 0px;
        padding: 0px;


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 2 of 3 |---------- */

        height: 460px;	/* this height only need to be adjusted when necessary only */

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 2 of 3 |---------- */


        *margin: 35px 0px -5px 0px;
}

/* --| end |--------------------------- */ 
/* --| div which holds the pics |-- */ 

.divpic {
        margin: 0px 0px 0px 20px;
        padding: 0px;

        *margin: -25px -365px 0px 20px;
}

/* --| end |--------------------------------------- */ 
/* --| div which holds the tab container |-- */ 

.divtab {
        margin: -450px 0px 0px 360px;
        padding: 0px;
        width: 560px;
}

/* --| end |------------ */ 
/* --| body styling |-- */ 

body {
   background: #131313;


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 3 of 3 |---------- */

   background:url('http://img15.imageshack.us/img15/9931/dangobg1.png');	/* want some new and fresh background? change it here; use jpg format for loading performance */

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 3 of 3 |---------- */


   font-family: "Trebuchet MS", sans-serif;
   font-size: 11px;
   text-align: left;
   color: #854C9E;
   height:auto;
}

/* --| end |----------------- */ 


/* -----------------------------------------------------------------------------------------------------------------------------------------| tabbed container settings center |--| start |-- */
/* --> the tab container settings are not meant to be adjusted unless you know what are you doing or you are just want to play with the settings <-----| note |-- */

/* Layout helpers ----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }

/* Component containers ----------------------------------*/
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #dddddd; background: #F6FAFD url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #eeeeee; }
.ui-widget-content a { color: #333333; }
.ui-widget-header { border: 1px solid #CCCCCC; background: #EEEEFF url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #F6FAFD; font-weight: bold; }
.ui-widget-header a { color: #F6FAFD; }

/* Interaction states ----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid #cccccc; background: #f6f6f6 url(images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #1c94c4; outline: none; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #1c94c4; text-decoration: none; outline: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: 1px solid #fbcb09; background: #fdf5ce url(images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #c77405; outline: none; }
.ui-state-hover a, .ui-state-hover a:hover { color: #c77405; text-decoration: none; outline: none; }
.ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid #CCCCCC; background: #F6FAFD url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #eb8f00; outline: none; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #eb8f00; outline: none; text-decoration: none; }

/* Tabs ----------------------------------*/
.ui-tabs { padding: .2em; zoom: 1; }
.ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .2em -1px 0; padding: 0; }
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .5em 1em; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } 

/* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; border-width: 0; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }

/* ----------------------------------------------------------------------------------------------------------------------------------------| tabbed container settings center |--| end |-- */


/* --| message bar positioning control |-- */

.overlap1 {
   height: 32px;
   z-index: 2;
   position: relative;
   margin: 0px 0px -16px 0px;
}

/* --| end |---------------------- */
/* --| message bar styling |-- */ 

.note {
   font-family: "Trebuchet MS", sans-serif;
   font-size: 11px;
   line-height: 16px;
   background-color: #FFFFCC;
   background-image:url('http://img194.imageshack.us/img194/1986/helpm.png'); 
   background-position: 3px 50%; 
   background-repeat: no-repeat; 
   color: #777777;
   height: 16px;
   width: auto;
   border: 1px solid #999999;
   margin: 0px 0px 5px 0px;
   padding: 5px;
   display: block;
}

.note1 {
   font-family: "Trebuchet MS", sans-serif;
   font-size: 11px;
   line-height: 16px;
   background-color: #FFFFCC;
   background-image:url('http://img194.imageshack.us/img194/1986/helpm.png'); 
   background-position: 3px 50%; 
   background-repeat: no-repeat; 
   color: #777777;
   height: 16px;
   width: auto;
   border: 1px solid #999999;
   margin: 0px;
   padding: 5px;
   display: block;
}


.note2 {
   font-family: "Trebuchet MS", sans-serif;
   font-size: 11px;
   line-height: 16px;
   background-color: #FFFFCC;
   background-image:url('http://img194.imageshack.us/img194/1986/helpm.png'); 
   background-position: 3px 50%; 
   background-repeat: no-repeat; 
   color: #777777;
   height: 16px;
   width: auto;
   border: 1px solid #999999;
   margin: 5px 0px 0px 0px;
   padding: 5px;
   display: block;
}

/* --| end |-------------------------------------- */ 
/* --| list styling |-- */ 

li {
   text-align: justify;
   color: #854C9E;
}

.divlist {
   margin: -10px 0px -10px -25px;

   *margin: -20px 0px -20px -25px;
}

/* --| end |------------ */ 
/* --| http link styling |-- */ 

a:hover {
   color: #854C9E;
}

/* --| end |------------------- */ 
/* --| paragraph styling |-- */ 

p {
   text-align: justify;
   color: #854C9E;
   font-weight: bold; 
}

/* --| end |------------- */ 
/* --| table styling |-- */ 

td {
   vertical-align: left middle;
}

/* --| end |------------ */ 
/* --| label styling |-- */ 

.label {
   color: #854C9E;
   width: 17%; 
   text-align: right;
}

.label:hover {
   color: blue;
}

/* --| end |------------ */ 
/* --| text styling |-- */ 

.text {
   color: #854C9E;
   width: 74%; 
}


.text:hover {
   color: red;
}

/* --| end |--------------------------- */ 
/* --| headings styling control |-- */

.inner {
   background-color: #EEEEFF;
   padding: 10px;
   border: 1px solid #CCCFC8;
   font-family: "Comic Sans MS", "Trebuchet MS", "Times New Roman";
   font-size: 22px;
   font-weight: bold;
   color: #854C9E;
}

.outer2 {
   z-index: 1; 
   background-color: #EEDDFF; 
   margin: 0px; 
   padding: 6px; 
   width: 815px; 
   position: relative; 
   border: 1px solid #CCCFC8; 
   text-align: center;
   margin-left: auto;
   margin-right: auto;
}

.outer3 {
   background-color: #EEDDFF; 
   margin: 0px 0px 10px 0px;
   padding: 6px; 
   width: 815px; 
   border: 1px solid #CCCFC8; 
   text-align: center;
   margin-left: auto;
   margin-right: auto;
}

/* --| end |------------------------- */
/* --| horizontal line control |-- */

hr { 
   width: 93%;
}

.hr1 {
   margin: 0px;

   *text-align: center;
}

/* --| end |--------------------------------------------- */
/* --| pics holder styling |--------------------------- */

.pics { 
   height: auto; 
   width: auto; 
   padding: 0px; 
   margin: 0px; 
   overflow: hidden 
}

.pics img { 
   height: auto; 
   width: auto; 
   padding: 10px; 
   border: 1px solid #ccc; 
   background-color: #fff; 
   top: 0px; 
   left: 0px;
}

/* --| end |--------------------------------------------------- */
/* --| background box styling |--------------------------- */

/*
.rounded1 {
   background-color: #EEDDFF; 
   padding: 10px;
   width: auto;
   height: auto;
   border: 1px solid #CCCFC8; 
}
*/

.rounded2 {
   background-color: #EEEEFF; 
   padding: 10px;
   width: auto;
   height: auto;
   border: 1px solid #CCCFC8; 
}

.rounded3 {
   background-color: #EEEEFF; 
   padding: 5px 10px 5px 10px;
   width: auto;
   height: auto;
   border: 1px solid #CCCFC8; 

   *padding: 0px 10px 0px 10px;
}
/* --| end |--------------------------------------------- */

</style>

<!-- multi picture presentation timing control -->
<script type="text/javascript"> 
 $('#slideshow').cycle({ 
    fx:     'all', 
    timeout: 5000, 
    speed:   1000 
}); 
 </script> 

<!-- message bar timing control 1 of 3 -->
<script type="text/javascript">
  $(document).ready(function(){
   setTimeout(function(){
  $("#note1").fadeOut("slow", function () {
  $("#note1").remove();
    });

}, 5000);
 });
</script>

<!-- message bar timing control 2 of 3 -->
<script type="text/javascript">
  $(document).ready(function(){
  $('#note2').hide();
   setTimeout(function(){
  $("#note2").fadeIn("slow", function () {
  $("#note2").show();
      });

}, 4990);
 });
</script>

<!-- message bar timing control 3 of 3 -->
<script type="text/javascript">
  $(document).ready(function(){
   setTimeout(function(){
  $("#note3").fadeOut("slow", function () {
  $("#note3").remove();
    });

}, 10000);
 });
</script>

<!-- tab container fx control -->
<script type="text/javascript">
   $(function() {
   $("#tabs").tabs({ fx: { opacity: 'toggle' } });
      var fx = $('.selector').tabs('slow', 'fx');
      });
</script>

</head>
<body>	
<!-- advanced user only - body section - NO EDIT GUIDES as i have made it to the point where it is already ready out of the box; basically there is no need to further customized it anymore -->


<div class="overlap1">
	<div id="note3">
		<div id="note2" class="note">
		       In case the pictures are not properly fetched/displayed, refresh this page to see if it helps.
		</div>
	</div>
	<div id="note1" class="note">
	       If this message does not go away, means that Javascripts support is disabled or this page loads improperly. 
	Enable Javascripts support and/or refresh this page to see if it helps.
	</div>
</div>

<div class="outer2">
	<div class="inner"><script>dcw(useredit.heading);</script></div>

		<div class="button">
			<table class="file_info">
			<tr>
				<td class="info_label"><span>       This is the title source.</span><div>SRCS</div></td>
				<td class="info_a"><div><script>dcw(useredit.srcs_left);</script></div></td>
				<td class="info_b"><div><script>dcw(useredit.srcs_right);</script></div></td>
			<td />
				<td class="info_label"><span>       <script>dcw(useredit.tooltip_label_vids);</script></span><div>VIDS</div></td>
				<td class="info_a"><div><script>dcw(useredit.vids_left);</script></div></td>
				<td class="info_b"><div><script>dcw(useredit.vids_right);</script></div></td>
			<td />
				<td class="info_label"><span>       <script>dcw(useredit.tooltip_label_auds);</script></span><div>AUDS</div></td>
				<td class="info_a"><div><script>dcw(useredit.auds_left);</script></div></td>
				<td class="info_b"><div><script>dcw(useredit.auds_right);</script></div></td>
			<td />
				<td class="info_label"><span>       <script>dcw(useredit.tooltip_label_subs);</script></span><div>SUBS</div></td>
				<td class="info_a"><div><script>dcw(useredit.subs_left);</script></div></td>
				<td class="info_b"><div><script>dcw(useredit.subs_right);</script></div></td>
			</tr>
			</table>
		</div>
</div>

<div class="hr1"><hr></div>

<div class="divwhole">

	<div class="divpic">
	<table style="background-color: transparent;" cellpadding="0" cellspacing="0" height="100%">
	<tr><td>
		<div id="slideshow" class="pics"></div>
		<script language="javascript" purpose="Print related pics">
		 for (i in related.pics_list) { document.getElementById("slideshow").innerHTML += '<img src="'+related.pics_list[i].href +'" />'; }
		</script>
	</td></tr>
	</table>
	</div>

	<div class="divtab">
		<div id="tabs">
		<ul>
		<li><a href="#tabs-1">Series Information</a></li>
		<li><a href="#tabs-2">File Information - Related Anime - Related OST</a></li>
		<li><a href="#tabs-3">Synopsis</a></li>
		</ul>

		<div id="tabs-1">
		<table style="background-color: transparent;" cellpadding="3" cellspacing="0" height="100%" width="100%">
		<tr>
			<td class="label"><div class="rounded1">Main Title:</div></td>
			<td class="text"><div class="rounded2"><script>dcw(useredit.maintitle);</script></div></td>
		</tr>
		<tr>
			<td class="label"><div class="rounded1">Official Title:</div></td>
			<td class="text"><div class="rounded2"><script>dcw(useredit.officialtitle);</script></div></td>
		</tr>
		<tr>
			<td class="label"><div class="rounded1">Japanese Title:</div></td>
			<td class="text"><div class="rounded2"><script>dcw(useredit.japanesetitle);</script></div></td>
		</tr>
		<tr>
			<td class="label"><div class="rounded1">Year:</div></td>
			<td class="text"><div class="rounded2"><script>dcw(useredit.year);</script></div></td>
		</tr>
		<tr>
			<td class="label"><div class="rounded1">Episodes:</div></td>
			<td class="text"><div class="rounded2"><script>dcw(useredit.episodes);</script></div></td>
		</tr>
		<tr>
			<td class="label"><div class="rounded1">Categories:<br><br></div></td>
			<td class="text"><div class="rounded2"><script>dcw(useredit.categories);</script></div></td>
		</tr>
		<tr>
			<td class="label"><div class="rounded1">Director:</div></td>
			<td class="text"><div class="rounded2"><script>dcw(useredit.director);</script></div></td>
		</tr>
		<tr>
			<td class="label"><div class="rounded1">Production:</div></td>
			<td class="text"><div class="rounded2"><script>dcw(useredit.production);</script></div></td>
		</tr>
		<tr>
			<td class="label"><div class="rounded1">References:</div></td>

			<td class="text"><div class="rounded2">
				<a id="link_anidb" target="_blank">AniDB</a> | 
				<a id="link_animenfo" target="_blank">AnimeNFO</a> | 
				<a id="link_ann" target="_blank">ANN</a> | 
				<a id="link_officialpage" target="_blank">Official Page</a>
			</div></td>
		</tr>
		</table>
		</div>

		<div id="tabs-2">
		<table style="background-color: transparent;" cellpadding="3" cellspacing="0" height="100%" width="100%">
		<tr>
			<td class="label"><div class="rounded1"><b>HINT</b>:</div></td>
			<td class="text"><br>Hover on the quick file summary for more information.<br><br></td>
		</tr>
		<tr>
			<td class="label"><div class="rounded1">FanSub by:</div></td>
			<td class="text"><div class="rounded2"><script>dcw(useredit.fansub);</script></div></td>
		</tr>
		<tr>
			<td class="label"><div class="rounded1">Note:<br><br></div></td>
			<td class="text"><div class="rounded2"><script>dcw(useredit.note);</script></div></td>
		</tr>
		<tr>
			<td><br> <br></td>
			<td><br><hr><br></td>
		</tr>
		<tr>
			<td class="label"><div class="rounded1">Related Anime:<br></div></td>

			<td class="text">
			<div class="rounded2">
				<ul>
				<div class="divlist">
					<script language="javascript" purpose="Print related anime">
					for (i in related.anime_list)
					{ document.write('<li><a href="'+related.anime_list[i].href +'" target="_blank">'+ related.anime_list[i].title + '</a></li>'); }
					</script>
				</div>
				</ul>
			</div>
			</td>
		</tr>
		<tr>
			<td class="label"><div class="rounded1">Related OST:<br><br></div></td>
			<td class="text">
			<div class="rounded2">
				<ul>
				<div class="divlist">
					<script language="javascript" purpose="Print related ost">
					for (i in related.ost_list)
					{ document.write('<li><a href="'+related.ost_list[i].href +'" target="_blank">'+ related.ost_list[i].title + '</a></li>'); }
					</script>
				</div>
				</ul>
			</div>
			</td>
		</tr>
		</table>
		</div>
		
		<div id="tabs-3">
		<table style="background-color: transparent;" cellpadding="0" cellspacing="0" height="100%">
		<tr>
			<td><div class="rounded3">
			<p>
			<script>dcw(useredit.synopsis);</script>
			</p>
			</div></td>
		</tr>
		</table>
		</div>
		</div>

	</div>

</div>

<div class="hr1"><hr></div>

<div class="outer3">
   <div class="inner">Screenshots</div>
</div>

</body>

<!-- reference link text replacement engine -->
<script language="javascript">
document.getElementById('link_anidb').href= useredit.anidb;
document.getElementById('link_animenfo').href= useredit.animenfo;
document.getElementById('link_ann').href= useredit.ann;
document.getElementById('link_officialpage').href= useredit.officialpage;
</script>

<!-- tab container scripting engine -->
<script src="http://deysmacro.uuuq.com/resources/bakabt/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

</html>

<!-- imgs block could be added or removed at will; recommended at least 4 blocks; use png format only -->
[screenshot]
   [img]http://img24.imageshack.us/img24/9528/snapshot20090509131128j.png[/img]
   [img]http://img17.imageshack.us/img17/7907/snapshot20090509131221.png[/img]
   [img]http://img4.imageshack.us/img4/3651/snapshot20090509131238.png[/img]
   [img]http://img14.imageshack.us/img14/2361/snapshot20090509131248.png[/img]
   [img]http://img22.imageshack.us/img22/197/snapshot20090509131326.png[/img]
[/screenshot]

Sample template image: Click here for full preview
Back to top.

Pure CSS Driven Anime Template - Alternative

Submitted by: deysmacro 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<style type="text/css">
/* --------------------------------------------------------------------------------------------------------------------------------------------| some note |-----
*
*	Please take note. The indentation should look correctly using Firefox. 
*
*	Although I have taken all possible steps that it should look correct, using IE will somehow still make it look a little bit weird.
*	When that happen, please use Firefox.
*
*	Thank you for your understanding.
*
* --------------------------------------------------------------------------------------------------------------------------------------------| general info |-----
*
*	Main user link		:	http://bakabt.me/user/816453/deysmacro.html
*	Forum user link	:	http://forums.bakabt.me/index.php?action=profile;u=816453
*
*	I welcome all of you people to use this template at your convenience.
*	Do contact me via PM or email if you had anything to say.
*
*	Email	:	deysmacro[at]gmail[dot]com
*
*	I also can help you guys with the template.
*	I will help whenever I can.
*
*	Thanks To		:	kureshii, Jarudin, xchiamiov
*	Thanks Also To	:	DaggerLite, enginarc, mrdkreka, blubart
*
*	Originally Customized By	:	deysmacro
*	Re-Customized By			:	YOUR NICK HERE
*
*	Template Version			:	3.3.3.1 pure css driven - alternative
*	Template Last Update On	:	July 20th, 2009 @ 23:28pm GMT+8
*
*	Please leave the credit intact if you plan to use this template.
*	Your cooperation is highly appreciated. Thank you.
*
* --------------------------------------------------------------------------------------------------------------------------------------------------------| SN |-----
*	SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2009 | 07 | 19 | 0720 | d-ait | v3331 | 13
* ---------------------------------------------------------------------------------------------------------------------------------| Info you should know |-----
*
*	Quick Reminder:
*	If you found any syntax with * siding with the syntax, it is targeted for IE only.
*
*
*	Example:
*	Assume "width" is the syntax...
*
*	body {		
*		width: 100px;		<-- major browser support
*
*		*width: 110px;	<-- targeted for IE only
*	}
*
*
*	This is done as to make it IE compatible. It is not required if IE displays the generated page correctly.
*	Please take note of this when you are editing.
*
* ---------------------------------------------------------------------------------------------------------------------------------------------------| end |----- */
/*
*	Nothing much to change or edit about the template appearance since it is 99% ready out of the box.
*	I will put some edit guides at the critical point only. The rest doesn't need to be edited unless you know what are you doing or you just want to play with the settings.
*
*	Hopefully you guys enjoy using this template. Good day people.
*/
/* ------------------------------------------------------------------------------------------------------------| quick file summary control center |----- */
/* --| whole table positioning control |-- */

.button {
	margin: 0px;

}

/* --| end |---------------------------- */
/* --| whole table body control |-- */

table.file_info {
	border-spacing: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	width: auto;

	*border-collapse: collapse;

}

/* --| end |----------------------- */
/* --| tootip hover control |-- */

td.info_label:hover {
	z-index: 9;
	cursor: help;

}

/* --| end |------------------------- */
/* --| tootip misc control |------ */

td.info_label span {
	display: none; 

}

/* --| end |------------------------ */
/* --| tootip styling control |-- */

td.info_label:hover span {
	position: absolute;
	bottom: 24px;
	font-family: "Trebuchet MS", sans-serif;
	font-size: 11px;
	line-height: 16px;
	background-color: #FFFFCC;
	background-image:url('http://img194.imageshack.us/img194/1986/helpm.png'); 
	background-position: 3px 50%; 
	background-repeat: no-repeat; 
	color: #777777;
	height: 16px;
	width: auto;
	border: 1px solid #999999;
	margin: 0px;
	padding: 5px;
	display: block;

	*width: 350px;		/* no need to adjust the tooltip width unless needed */
	*bottom: 16px;
	*left: -80px;
	*text-align: left;

}

/* --| end |---------------------------------------- */
/* --| individual left side content control |-- */

td.info_label {
	width: 20px;
	font-family: "Lucida Console", sans-serif;
	font-size: 7.7px;
	text-align: center;
	color: #D0D0F0;
	background-color: #854C9E;
	border: #854C9E 2px solid;
	position: relative;

	*font-size: 9px;

}

/* --| end |------------------------------------------------- */
/* --| individual right side - left content control |-- */

td.info_a {
	background-color: #EEEEFF;
	border: #854C9E 2px solid;
	border-right: 0px; 
	color: #854C9E;
	font-family: "Lucida Console", sans-serif;
	font-size: 7.7px;
	text-align: left;
	width: 50px;
	padding: 0px 0px 0px 3px;
	font-size: 7.7px;

	*font-size: 9px;

}

/* --| end |--------------------------------------------------- */
/* --| individual right side - right content control |-- */

td.info_b {
	background-color: #EEEEFF;
	border: #854C9E 2px solid;
	border-left: 0px; 
	color: #854C9E;
	font-family: "Lucida Console", sans-serif;
	font-size: 7.7px;
	text-align: right;
	width: 60px;
	padding: 0px 3px 0px 0px;
	font-size: 7.7px;

	*font-size: 9px;

}

/* --| end |----------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */

/* ---------------------------------------------------------------------------------------------------------------------------------| message bar styling control |---- */

.note1 {
	font-family: "Trebuchet MS", sans-serif;
	font-size: 11px;
	line-height: 16px;
	background-color: #FFFFCC;
	background-image:url('http://img194.imageshack.us/img194/1986/helpm.png'); 
	background-position: 3px 50%; 
	background-repeat: no-repeat; 
	color: #777777;
	height: 16px;
	width: auto;
	border: 1px solid #999999;
	margin: 0px;
	padding: 5px;
	display: block;

}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */

/* ----------------------------------------------------------------------------------------------------------------------------------------------| container control |---- */
/* --| top half container control |-- */

.divtop {
	margin: 0px;
	padding: 0px;
	height: 410px;		/* no need to adjust the height unless needed */

}

/* --| end |----------------------------- */
/* --| top left container control |-- */

.divtl {
	margin: 0px 0px 0px 10px;
	padding: 10px;
	width: 520px; 

}

/* --| end |------------------------------- */
/* --| top right container control |-- */

.divtr {
	margin: -415px 0px 0px 540px;
	padding: 10px;

	*margin: -410px 0px 0px 540px;

}

/* --| end |---------------------------------- */
/* --| bottom half container control |-- */

.divbottom {
	margin: 5px 0px 0px 0px;
	padding: 0px;
	height: 340px;		/* no need to adjust the height unless needed */

	*margin: 0px;
	*height: 335px;		/* no need to adjust the height unless needed */

}

/* --| end |---------------------------------- */
/* --| bottom left container control |-- */

.divbl {
	margin: 0px 0px 0px 10px; 
	padding: 10px;
	width: 520px;

}

/* --| end |------------------------------------ */
/* --| bottom right container control |-- */

.divbr {
	margin: -330px 0px 0px 540px;		/* no need to adjust the height unless needed */
	padding: 10px;

	*margin: -320px 0px 0px 540px;		/* no need to adjust the height unless needed */

}

/* --| end |------------------------------------ */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */

/* ---------------------------------------------------------------------------------------------------------------------------------------------| list styling control |---- */

.div5 {
	margin: -10px 0px -10px -25px;

	*margin: -20px 0px -20px -25px;

}

li {
	text-align: justify;
	color: #854C9E;

}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */

/* -------------------------------------------------------------------------------------------------------------------------------| whole content styling control |---- */
/* --| body control |-- */

body {
	background: #131313;
	background:url('http://img15.imageshack.us/img15/9931/dangobg1.png');		/* want some fresh background? change it here */
	font-family: "Trebuchet MS", sans-serif;
	font-size: 11px;
	text-align: left;
	color: #854C9E;		/* main font color */
	height:auto;

}

/* --| end |-------------------- */
/* --| paragraph control |-- */

p {
	text-align: justify;
	color: #854C9E;
	font-weight: bold; 

}

/* --| end |-------------------- */
/* --| main table control |-- */

td {
	vertical-align: left middle;

}

.table1 {
	background-color: transparent;
	cellpadding: 2px;
	cellspacing: 0px;
	height: 100%;
	width: 100%;

}

.table2 {
	background-color: transparent;
	cellpadding: 0px; 
	cellspacing: 0px;
	height: 100%;
	width: 100%;

}

/* --| end |--------------------------- */
/* --| headings styling control |-- */

.inner {
	background-color:#EEEEFF;
	padding: 10px;
	border: 1px solid #CCCFC8;
	font-family: "Comic Sans MS", "Trebuchet MS", "Times New Roman";
	font-size: 22px;
	font-weight: bold;
	color: #854C9E;

}

.outer2 {
	z-index: 1; 
	background-color: #EEDDFF; 
	margin: 10px 0px 0px 0px; 
	padding: 6px; width: 815px; 
	position: relative; 
	border: 1px solid #CCCFC8; 
	text-align: center;
	margin-left: auto;
	margin-right: auto;

}

.outer3 {
	background-color: #EEDDFF; 
	margin: 0px 0px 10px 0px;
	padding: 6px; 
	width: 815px; 
	border: 1px solid #CCCFC8; 
	text-align: center;
	margin-left: auto;
	margin-right: auto;

}

/* --| end |------------------------- */
/* --| horizontal line control |-- */

hr { 
	width: 93%;

}

.hr1 {
	margin: 0px;

	*text-align: center;

}

/* --| end |--------------------------- */
/* --| picture content control |-- */

.pics { 
	height: auto; 
	width: auto; 
	padding: 0px; 
	margin: 0px; 
	overflow: hidden;

}

.pics img { 
	height: auto; 
	width: auto; 
	padding: 10px; 
	border: 1px solid #ccc; 
	background-color: #fff; 
	top: 0px; 
	left: 0px; 

}

/* --| end |---------------------- */
/* --| label styling control |-- */

.label {
	color: #854C9E;
	width: 26%; 
	text-align: right;

}

.label:hover {
	color: blue;

}

/* --| end |--------------------- */
/* --| text styling control |-- */

.text {
	color: #854C9E;
	width: 74%; 

}

.text:hover {
	color: red;

}

/* --| end |--------------------------- */
/* --| label box styling control |-- */

.rounded1 {
	background-color:#EEDDFF; 
	padding: 10px;
	width: auto;
	height: auto;
	border: 1px solid #CCCFC8;   

}

/* --| end |--------------------------- */
/* --| text box styling control |-- */

.rounded2 {
	background-color:#EEEEFF; 
	padding: 10px;
	width: auto;
	height: auto;
	border: 1px solid #CCCFC8;   

}

/* --| end |-------------------------------- */
/* --| synopsis box styling control |-- */

.rounded3 {
	background-color:#EEEEFF; 
	padding: 5px 10px 5px 10px;
	width: auto;
	height: auto;
	border: 1px solid #CCCFC8;   

}

/* --| end |-------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
</style>

</head>
<body>	

<div class="outer2">


<!-- the title heading -->

	<div class="inner">Panda Kopanda | Panda! Go Panda! [DivX][MP3]</div>

		<div class="button">
			<table class="file_info">


<!-- tooltip and quick file summary area -->

			<tr>
				<td class="info_label"><span>       This is the title source.</span><div>SRCS</div></td>
				<td class="info_a"><div> </div></td>
				<td class="info_b"><div>DVD</div></td>
			<td />
				<td class="info_label"><span>       This title has been encoded with <b>DivX 6 - 704 x 544 29.97fps</b>.</span><div>VIDS</div></td>
				<td class="info_a"><div>DIVX</div></td>
				<td class="info_b"><div>704X544</div></td>
			<td />
				<td class="info_label"><span>       This title utilized <b>MPEG Audio Layer 3 24000Hz stereo 48Kbps</b>.</span><div>AUDS</div></td>
				<td class="info_a"><div>JP</div></td>
				<td class="info_b"><div>MP3  24KHZ</div></td>
			<td />
				<td class="info_label"><span>       This title has been <b>hard-subbed</b>.</span><div>SUBS</div></td>
				<td class="info_a"><div>EN</div></td>
				<td class="info_b"><div>HARD</div></td>
			</tr>
			</table>
		</div>

</div>

<div class="hr1"><hr></div>

<div class="divtop">

	<div class="divtl">
		<fieldset>

			<legend>| Series Information |</legend>


<!-- add or remove <br> accordingly when you editing the info below; it is some sort of box height matching with the content -->
<!-- edit the info accordingly -->

				<table class="table1">
					<tr>
						<td class="label"><div class="rounded1">Main Title:</div>	</td>
						<td class="text"><div class="rounded2">Panda Kopanda</div></td>
					</tr>
					<tr>
						<td class="label"><div class="rounded1">Official Title:</div></td>
						<td class="text"><div class="rounded2">Panda! Go Panda!</div></td>
					</tr>
					<tr>
						<td class="label"><div class="rounded1">Japanese Title:</div></td>
						<td class="text"><div class="rounded2">パンダコパンダ</div></td>
					</tr>
					<tr>
						<td class="label"><div class="rounded1">Year:</div></td>
						<td class="text"><div class="rounded2">1972 & 1973</div></td>
					</tr>
					<tr>
						<td class="label"><div class="rounded1">Episodes:</div></td>
						<td class="text"><div class="rounded2">2 combined into 1</div></td>
					</tr>
					<tr>
						<td class="label"><div class="rounded1">Categories:<br><br></div></td>
						<td class="text"><div class="rounded2">Adventure, Anthropomorphism, Comedy, Contemporary Fantasy, Fantasy</div></td>
					</tr>
					<tr>
						<td class="label"><div class="rounded1">Director:</div></td>
						<td class="text"><div class="rounded2">Isao Takahata</div></td>
					</tr>
					<tr>
						<td class="label"><div class="rounded1">Production:</div></td>
						<td class="text"><div class="rounded2">Shunzo Kato</div></td>
					</tr>
					<tr>
						<td class="label"><div class="rounded1">References:</div></td>
						<td class="text">
							<div class="rounded2">


<!-- edit the info accordingly -->

							<a href="http://anidb.net/perl-bin/animedb.pl?show=anime&aid=530" target="_blank">AniDB</a> | 
							<a href="http://www.animenfo.com/animetitle,2379,stbesx,panda_kopanda.html" target="_blank">AnimeNFO</a> | 
							<a href="http://www.animenewsnetwork.com/encyclopedia/anime.php?id=352" target="_blank">ANN</a> | 
							<a href="http://www.nausicaa.net/miyazaki/panda/" target="_blank">Official Page</a>
							</div>
						</td>
					</tr>
				</table>

		</fieldset>
	</div>
	
	<div class="divtr">
		<fieldset>

			<legend>| Main Picture |</legend>

				<table class="table2">
					<tr>
						<td>
							<div class="pics">


<!-- picture height should be 340px max; you may use your preferred height though -->

							<img src="http://img21.imageshack.us/img21/2401/pandakopanda1.png"  />
							</div>
						</td>
					</tr>
				</table>

		</fieldset>
	</div>

</div>

<div class="divbottom">

	<div class="divbl">
		<fieldset>

			<legend>| File Information |</legend>


<!-- add or remove <br> accordingly when you editing the info below; it is some sort of box height matching with the content -->
<!-- edit the info accordingly -->

				<table class="table1"> 
					<tr>
						<td class="label"><div class="rounded1"><b>HINT</b>:</div></td>
						<td class="text"><div class="rounded2">Hover on the quick file summary for more information.</div></td>
					</tr>
					<tr>
						<td class="label"><div class="rounded1">FanSub by:<br><br></div></td>
						<td class="text"><div class="rounded2"><div class="note1">       <i>No Information.</i></div></div></td>
					</tr>
					<tr>
						<td class="label"><div class="rounded1">Approx. Duration:</div></td>
						<td class="text"><div class="rounded2">~ 1 hour 11 minutes per episode</div></td>
					</tr>
					<tr>
						<td class="label"><div class="rounded1">Note:<br><br></div></td>
						<td class="text"><div class="rounded2">Please continue seeding as much as you can.<br>Thank you guys.</div></td>
					</tr>
					<tr>
						<td class="label"><div class="rounded1">Related Anime:<br></div></td>
						<td class="text">
							<div class="rounded2">
							<ul>

								<div class="div5">
									<li>


<!-- edit the info accordingly -->

										<a href="http://bakabt.me/torrent/10676/Panda_Kopanda_Panda_Go_Panda_DVD_DivX_MP3.html" target="_blank">
										Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]
										</a>
									</li>
								</div>

							</ul>
							</div>
						</td>
					</tr>
					<tr>
						<td class="label"><div class="rounded1">Related OST:<br><br></div></td>


<!-- edit the info accordingly -->

						<td class="text"><div class="rounded2"><div class="note1">       <i>None available</i>.</div></div></td>
					</tr>
				</table>

		</fieldset>
	</div>

	<div class="divbr">
		<fieldset>

			<legend>| Synopsis |</legend>

				<table class="table2">
					<tr>
						<td>
							<div class="rounded3">


<!-- the <br> here is for break; not the same purpose as of above usage -->
<!-- edit the info accordingly -->

							<p>
							Panda Kopanda (Panda! Go Panda!) is a 30 minute movie made in 1972. Miyazaki created the original idea, the script, the layouts, and did key animation, and Takahata directed the film.
							<br><br>
							The story is about a little girl, Mimiko, who was left alone while her Grandma was away.
							<br><br>
							A 1973 sequel, Panda Kopanda: Amefuri Saakasu no Maki (Panda! Go Panda! & the Rainy-day Circus), continues the story and was made by the same people who made the first movie.
							<br><br>
							The literal translation of the title Panda Kopanda is "Panda, Baby Panda", but it's been released in North America as Panda Go Panda.
							</p>

							</div>
						</td>
					</tr>
				</table>

		</fieldset>
	</div>

</div>

<div class="hr1"><hr></div>

<div class="outer3">
	<div class="inner">Screenshots</div>
</div>


</body>
</html>


<!-- change your demo pic here; use png format only; box may be added or removed accordingly -->

[screenshot]
	[img]http://img24.imageshack.us/img24/9528/snapshot20090509131128j.png[/img]
	[img]http://img17.imageshack.us/img17/7907/snapshot20090509131221.png[/img]
	[img]http://img4.imageshack.us/img4/3651/snapshot20090509131238.png[/img]
	[img]http://img14.imageshack.us/img14/2361/snapshot20090509131248.png[/img]
	[img]http://img22.imageshack.us/img22/197/snapshot20090509131326.png[/img]
[/screenshot]

Sample template image: Click here for full preview
Back to top.

Generic Anime Template - Light Themed

Submitted by: deysmacro 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<style type="text/css">
/* --------------------------------------------------------------------------------------------------------------------------------------------| some note |-----
*
*	Please take note. The indentation should look correctly using Firefox. 
*
*	Although I have taken all possible steps that it should look correct, using IE will somehow still make it look a little bit weird.
*	When that happen, please use Firefox.
*
*	Thank you for your understanding.
*
* --------------------------------------------------------------------------------------------------------------------------------------------| general info |-----
*
*	Main user link		:	http://bakabt.me/user/816453/deysmacro.html
*	Forum user link	:	http://forums.bakabt.me/index.php?action=profile;u=816453
*
*	I welcome all of you people to use this template at your convenience.
*	Do contact me via PM or email if you had anything to say.
*
*	Email	:	deysmacro[at]gmail[dot]com
*
*	I also can help you guys with the template.
*	I will help whenever I can.
*
*	Originally Customized By	:	deysmacro
*	Re-Customized By			:	YOUR NICK HERE
*
*	Template Version			:	v2.0.9.1 generic - light themed
*	Template Last Update On	:	July 20th, 2009 @ 23:28pm GMT+8
*
*	Please leave the credit intact if you plan to use this template.
*	Your cooperation is highly appreciated. Thank you.
*
* --------------------------------------------------------------------------------------------------------------------------------------------------------| SN |-----
*	SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2009 | 07 | 19 | 0720 | d-ait | v2091 | 17
* ---------------------------------------------------------------------------------------------------------------------------------| Info you should know |-----
*
*	Quick Reminder:
*	If you found any syntax with * siding with the syntax, it is targeted for IE only.
*
*
*	Example:
*	Assume "width" is the syntax...
*
*	body {		
*		width: 100px;		<-- major browser support
*
*		*width: 110px;	<-- targeted for IE only
*	}
*
*
*	This is done as to make it IE compatible. It is not required if IE displays the generated page correctly.
*	Please take note of this when you are editing.
*
* ---------------------------------------------------------------------------------------------------------------------------------------------------| end |----- */
/*
*	Nothing much to change or edit about the template appearance since it is 99% ready out of the box.
*	I will put some edit guides at the critical point only. The rest doesn't need to be edited unless you know what are you doing or you just want to play with the settings.
*
*	Hopefully you guys enjoy using this template. Good day people.
*/
/* ------------------------------------------------------------------------------------------------------------------------------| general styling area |----- */
/* --| body styling control |-- */

body {
	background: #131313;
	background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
	font-family: Tahoma;
	font-size: 11px;
	text-align: justify;
	color: #0F0F0F;

}

/* --| end |--------------------------- */
/* --| http link styling control |-- */

a {
	color: #FF661A;
	text-decoration: none;

}

a:hover {
	color: #000000;

}

/* --| end |----------------------------- */
/* --| paragraph styling control |-- */

p {
	text-align: justify;
	background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
	padding:20px;
	border: #999999 1px solid;

}

/* --| end |------------------------ */
/* --| table content control |-- */

td {
	vertical-align: left middle;

}

/* --| end |---------------------------- */
/* --| main title styling control |-- */

.title {
	font-family: Tahoma;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	padding:10px;
	background-color: #ffffff;
	color: #000066;
	background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
	border: #999999 1px solid;

}

/* --| end |--------------------------- */
/* --| picture content control |-- */

.pic2 {
	font-family: Tahoma;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	padding:10px;
	background-color: #2E2E2E;
	color: #0F0F0F;
	border: #999999 1px solid;
	background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');

}

/* --| end |------------------------------- */
/* --| sub heading styling control |-- */

.heading {
	font-family: Tahoma;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	color: #000066;
	background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
	padding: 8px 0px 8px 0px;

}

/* --| end |---------------------- */
/* --| label styling control |-- */

.label {
	font-weight: bold;
	color: #0F0F0F;
	width: 19%;
	background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
	border: #999999 1px solid;
	text-align: right;

	*width: 22%;

}

/* --| end |-------------------------------- */
/* --| various text styling control |-- */

.text {
	width: 100%;
	color: #000066;
	background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
	border: #999999 1px solid;

}

.text3 {
	width: 100%;
	color: #9D9D9D;
	background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
	border: #999999 1px solid;

}

.text6 {
	color: #CC6600;

}

.text7 {
	color: #518ABF;
	font-weight: bold;

}

.text9 {
	color: #000000;
	font-weight: bold;

}

</style>

</head>
<body>


<table style="background-color: transparent;" cellpadding="6" cellspacing="6" height="100%">
	<tr>
		<td colspan="3">
			<div><hr><br></div>


<!-- the title heading -->
			<div class="title">Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]</div>

			<div><br><hr></div>
		</td>
	</tr>
	<tr>


<!-- rowspan number must be changed accordingly if you add/remove row -->
		<td rowspan="20" >


<!-- 400px max width recommended -->
			<img class="pic2" src="http://img200.imageshack.us/img200/4229/187611.png">

		</td>
	</tr>
	<tr>
		<td colspan="3" style="padding-top: 0px;">
			<div class="heading">SERIES INFORMATION</div>
		</td>
	</tr>


<!-- edit the info accordingly -->
	<tr>
		<td class="label">Main Title:</td>
		<td class="text">Panda Kopanda</td>
	</tr>
	<tr>
		<td class="label">Official Title:</td>
		<td class="text">Panda! Go Panda!</td>
	</tr>
	<tr>
		<td class="label">Japanese Title:</td>
		<td class="text">パンダコパンダ</td>
	</tr>
	<tr>
		<td class="label">Year:</td>
		<td class="text">1972 & 1973</td>
	</tr>
	<tr>
		<td class="label">Episodes:</td>
		<td class="text"><span class="text7">2 combined into 1</span></td>
	</tr>
	<tr>
		<td class="label">Categories:</td>
		<td class="text">Adventure, Anthropomorphism, Comedy, Contemporary Fantasy, Fantasy</td>
	</tr>
	<tr>
		<td class="label">Director:</td>
		<td class="text">Isao Takahata</td>
	</tr>
	<tr>
		<td class="label">Production:</td>
		<td class="text">Shunzo Kato</td>
	</tr>
	<tr>
		<td class="label">References:</td>
			<td class="text">


<!-- edit the info accordingly -->
				<a href="http://anidb.net/perl-bin/animedb.pl?show=anime&aid=530" target="_blank">AniDB</a> | 
				<a href="http://www.animenfo.com/animetitle,2379,stbesx,panda_kopanda.html" target="_blank">AnimeNFO</a> | 
				<a href="http://www.animenewsnetwork.com/encyclopedia/anime.php?id=352" target="_blank">ANN</a> | 
				<a href="http://www.nausicaa.net/miyazaki/panda/" target="_blank">Official Page</a>

			</td>
	</tr>
<br><br><br>

	<tr>
		<td colspan="3" style="padding-top: 20px;"><div class="heading">FILE INFORMATION</div>	</td>
	</tr>


<!-- edit the info accordingly -->
<!-- change text3 to text if there is information -->
	<tr>
		<td class="label">FanSub by:</td>
		<td class="text3">No Information</td>
	</tr>
	<tr>
		<td class="label">Video:</td>
		<td class="text"><span class="text7">DivX 6</span> [ <span class="text6">704x544 29.97fps</span> ]</td>
	</tr>
	<tr>
		<td class="label">Audio:</td>
		<td class="text"><span class="text7">Japanese</span> [ <span class="text6">MPEG Audio Layer 3 24000Hz stereo 48Kbps</span> ]</td>
	</tr>
	<tr>
		<td class="label">Subtitles:</td>
		<td class="text"><span class="text7">English</span> [ <span class="text6">Hard-Subbed</span> ]</td>
	</tr>
	<tr>
		<td class="label">Approx. Duration:</td>
		<td class="text">~ <span class="text7">1 hour 11 minutes</span> per episode</td>
	</tr>
	<tr>
		<td class="label">Note:</td>
		<td class="text">Please continue seeding as much as you can people. Thank you.</td>
	</tr>


<!-- edit the info accordingly -->
	<tr>
		<td class="label">Related Anime:</td>
			<td class="text">
				> <a href="http://bakabt.me/torrent/10676/Panda_Kopanda_Panda_Go_Panda_DVD_DivX_MP3.html" target="_blank">Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]</a>
			</td>
	</tr>
	<tr>
		<td class="label">Related OST:</td>
		<td class="text3">No Information</td>
	</tr>

	<tr>
		<td colspan="3" style="padding-top: 20px;"><div class="heading">SYNOPSIS</div>

			<p>
			<span class="text9">


<!-- edit the info accordingly -->
			Panda Kopanda (Panda! Go Panda!) is a 30 minute movie made in 1972. Miyazaki created the original idea, the script, the layouts, and did key animation, and Takahata directed the film. 
			<br><br>
			The story is about a little girl, Mimiko, who was left alone while her Grandma was away.
			<br><br>
			A 1973 sequel, Panda Kopanda: Amefuri Saakasu no Maki (Panda! Go Panda! & the Rainy-day Circus), continues the story and was made by the same people who made the first movie.
			<br><br>
			The literal translation of the title Panda Kopanda is "Panda, Baby Panda", but it's been released in North America as Panda Go Panda. 

			</span>

			</p>
		</td>
	</tr>
	<tr>
		<td colspan="3" style="padding-top: 20px;"><div class="heading">SCREENSHOTS</div></td>
	</tr>
</table>


</body>
</html>


<!-- change your demo pic here; use png format only; box may be added or removed accordingly -->

[screenshot]
	[img]http://img24.imageshack.us/img24/9528/snapshot20090509131128j.png[/img]
	[img]http://img17.imageshack.us/img17/7907/snapshot20090509131221.png[/img]
	[img]http://img4.imageshack.us/img4/3651/snapshot20090509131238.png[/img]
	[img]http://img14.imageshack.us/img14/2361/snapshot20090509131248.png[/img]
	[img]http://img22.imageshack.us/img22/197/snapshot20090509131326.png[/img]
[/screenshot]

Sample template image: Click here for full preview.
Back to top.

Generic Anime Template - Dark Themed

Submitted by: deysmacro 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<style type="text/css">
/* --------------------------------------------------------------------------------------------------------------------------------------------| some note |-----
*
*	Please take note. The indentation should look correctly using Firefox. 
*
*	Although I have taken all possible steps that it should look correct, using IE will somehow still make it look a little bit weird.
*	When that happen, please use Firefox.
*
*	Thank you for your understanding.
*
* --------------------------------------------------------------------------------------------------------------------------------------------| general info |-----
*
*	Main user link		:	http://bakabt.me/user/816453/deysmacro.html
*	Forum user link	:	http://forums.bakabt.me/index.php?action=profile;u=816453
*
*	I welcome all of you people to use this template at your convenience.
*	Do contact me via PM or email if you had anything to say.
*
*	Email	:	deysmacro[at]gmail[dot]com
*
*	I also can help you guys with the template.
*	I will help whenever I can.
*
*	Originally Customized By	:	deysmacro
*	Re-Customized By			:	YOUR NICK HERE
*
*	Template Version			:	v2.0.8.1 generic - dark themed
*	Template Last Update On	:	July 21th, 2009 @ 13:28pm GMT+8
*
*	Please leave the credit intact if you plan to use this template.
*	Your cooperation is highly appreciated. Thank you.
*
* --------------------------------------------------------------------------------------------------------------------------------------------------------| SN |-----
*	SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2009 | 07 | 19 | 0720 | d-ait | v2081 | 11
* ---------------------------------------------------------------------------------------------------------------------------------| Info you should know |-----
*
*	Quick Reminder:
*	If you found any syntax with * siding with the syntax, it is targeted for IE only.
*
*
*	Example:
*	Assume "width" is the syntax...
*
*	body {		
*		width: 100px;		<-- major browser support
*
*		*width: 110px;	<-- targeted for IE only
*	}
*
*
*	This is done as to make it IE compatible. It is not required if IE displays the generated page correctly.
*	Please take note of this when you are editing.
*
* -------------------------------------------------------------------------------------------------------------------------------------------| end |----- */
/*
*	Nothing much to change or edit about the template appearance since it is 99% ready out of the box.
*	I will put some edit guides at the critical point only. The rest doesn't need to be edited unless you know what are you doing or you just want to play with the settings.
*
*	Hopefully you guys enjoy using this template. Good day people.
*/
/* ------------------------------------------------------------------------------------------------------------| general styling control area |----- */
/* --| body styling control |-- */

body {
	background: #131313;
	background-image:url('http://img11.imageshack.us/img11/6719/3784.gif');		/* want some fresh background? change it here */
	font-family: Tahoma;
	font-size: 11px;

}

/* --| end |--------------------------- */
/* --| http link styling control |-- */

a {
	text-decoration: none;

}

a:hover {
	color: #FF661A;

}

/* --| end |----------------------------- */
/* --| paragraph styling control |-- */

p {
	text-align: justify;
	background-image:url(http://img179.imageshack.us/img179/4977/bgrepeater2hn2.gif);
	padding:20px;
	border: #999999 1px solid;

}

/* --| end |----------------------- */
/* --| table styling control |-- */

td {
	vertical-align: left middle;

}

/* --| end |---------------------- */
/* --| title styling control |-- */

.title {
	font-family: Tahoma;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	padding:10px;
	background-color: #2E2E2E;
	color: #FFB856;
	background-image:url(http://img179.imageshack.us/img179/4977/bgrepeater2hn2.gif);
	border: #999999 1px solid;

}

/* --| end |-------------------------- */
/* --| picture styling control |-- */

.pic2 {
	font-family: Tahoma;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	padding:10px;
	background-color: #2E2E2E;
	color: #FFB856;
	border: #999999 1px solid;
	background-image:url(http://img179.imageshack.us/img179/4977/bgrepeater2hn2.gif);

}

/* --| end |-------------------------- */
/* --| heading styling control |-- */

.heading {
	font-family: Tahoma;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	color: #FF661A;
	background-image:url(http://img358.imageshack.us/img358/4214/back2il5.png); 
	padding: 8px 0px 8px 0px;

}

/* --| end |---------------------- */
/* --| label styling control |-- */

.label {
	width: 18%; 
	text-align: right;
	font-weight: bold;
	color: #FFFFFF;
	background-image:url(http://img358.imageshack.us/img358/4214/back2il5.png);
	border: #999999 1px solid;

	*width: 22%; 

}

/* --| end |-------------------------------- */
/* --| various text styling control |-- */

.text {
	width: 100%;
	color: #FFB856;
	background-image:url(http://img358.imageshack.us/img358/4214/back2il5.png);
	border: #999999 1px solid;

}

.text3 {
	width: 100%;
	color: #9D9D9D;
	background-image:url(http://img358.imageshack.us/img358/4214/back2il5.png);
	border: #999999 1px solid;

}

.text6 {
        color: #FFF0CC;
}

.text7 {
	color: #00D4FF;
	font-weight: bold;

}

.text9 {
	color: #FFB856;
	font-weight: bold;

}

/* --| end |------------------------ */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
</style>

</head>
<body>

	<table style="background-color: transparent;" cellpadding="6" cellspacing="6" height="100%">
		<tr>
			<td colspan="3">
				<div><hr><br></div>


<!-- main heading here -->
					<div class="title">Kaidoumaru | Kai Doh Maru [DVD][XviD][MP3]</div>

				<div><br><hr></div>
			</td>
		</tr>

		<tr>
		

<!-- if you add or remove row, rowspan number of 20 here must be adjusted accordingly; else the table would look weird -->
<!-- 400px max width recommended -->
			<td rowspan="20" ><img class="pic2" src="http://img24.imageshack.us/img24/590/1086019.jpg"></td>
		</tr>

		<tr>
			<td colspan="3" style="padding-top: 0px;"><div class="heading">SERIES INFORMATION</div></td>
		</tr>


<!-- edit the info accordingly -->
		<tr>
			<td class="label">Main Title:</td>
			<td class="text">Kaidoumaru</td>
		</tr>
		<tr>
			<td class="label">Official Title:</td>
			<td class="text">Kai Doh Maru</td>
		</tr>
		<tr>
			<td class="label">Japanese Title:</td>
			<td class="text">怪童丸</td>
		</tr>
		<tr>
			<td class="label">Year:</td>
			<td class="text">2001</td>
		</tr>
		<tr>
			<td class="label">Episodes:</td>
			<td class="text"><span class="text7">1</span></td>
		</tr>
		<tr>
			<td class="label">Categories:</td>
			<td class="text">Action, Fantasy, Historical, Magic, Seinen</td>
		</tr>
		<tr>
			<td class="label">Director:</td>
			<td class="text">Kanji Wakabayashi</td>
		</tr>
		<tr>
			<td class="label">Production:</td>
			<td class="text">Production I.G</td>
		</tr>
		<tr>
			<td class="label">References:</td>


<!-- edit the info accordingly -->
			<td class="text">
				<a href="http://anidb.net/perl-bin/animedb.pl?show=anime&aid=500" target="_blank">AniDB</a> | 
				<a href="http://www.animenfo.com/animetitle,888,lcvouh,kaidoumaru.html" target="_blank">AnimeNFO</a> | 
				<a href="http://www.animenewsnetwork.com/encyclopedia/anime.php?id=306" target="_blank">ANN</a> | 
				<a href="http://www.sonymusic.co.jp/Animation/kaidohmaru/" target="_blank">Official Page</a>
			</td>
		</tr>

		<tr>
			<td colspan="3" style="padding-top: 20px;"><div class="heading">FILE INFORMATION</div></td>
		</tr>


<!-- edit the info accordingly -->
		<tr>
			<td class="label">FanSub by:</td>
			<td class="text3">No Information</td>
		</tr>
		<tr>
			<td class="label">Video:</td>
			<td class="text"><span class="text7">XviD</span> [ <span class="text6">720x400 29.97fps</span> ]</td>
		</tr>
		<tr>
			<td class="label">Audio:</td>
			<td class="text"><span class="text7">Japanese</span> [ <span class="text6">MPEG Audio Layer 3 48000Hz stereo 130Kbps</span> ]</td>
		</tr>
		<tr>
			<td class="label">Subtitles:</td>
			<td class="text"><span class="text7">English</span> [ <span class="text6">Hard-Subbed</span> ]</td>
		</tr>
		<tr>
			<td class="label">Approx. Duration:</td><td class="text">~ <span class="text7">46</span> minutes per episode</td>
		</tr>
		<tr>
			<td class="label">Note:</td><td class="text">Please continue seeding as much as you can.<br>Thank you guys.</td>
		</tr>


<!-- edit the info accordingly -->
		<tr>
			<td class="label">Related Anime:</td>
			<td class="text">
				>  <a href="http://bakabt.me/torrent/141617/Kai_Doh_Maru._DVDrip.html"  target="_blank">Kai Doh Maru.[DVDrip]</a><br>
				>  <a href="http://bakabt.me/torrent/129335/Kaidoumaru_-_OVA_a4e.html"  target="_blank">Kaidoumaru - OVA [a4e]</a>
			</td>
		</tr>
		<tr>
			<td class="label">Related OST:</td>
			<td class="text3">No Information</td>
		</tr>

		<tr>
			<td colspan="3" style="padding-top: 20px;"><div class="heading">SYNOPSIS</div>


<!-- edit the info accordingly -->
			<p>
				<span class="text9">
				This story takes place during the Heian Period of Japan's history, when evil spirits still resided in the forests, mountains and rivers. 
				A girl, accompanied by her loved one, battles against these evil spirits, while she is disguised as man. 
				This brave woman, aka "Kaidomaru", with a Chinese character "Flame" tatooed on her upper arm, was one of the "Four Devas". 
				Kaidomaru fights for the honor of her lost love, Raikou Minamotono, who had sacrified his life in order to protect the capital Kyoto, from the evils deeds of a "princess" cursed by a malicious ogre. 
				The princess, whom Kaidomaru used to play with as a child, has now become her ultimate enemy.
				</span>
			</p>
			</td>
		</tr>

		<tr>
			<td colspan="3" style="padding-top: 20px;"><div class="heading">SCREENSHOTS</div></td>
		</tr>
</table>


</body>
</html>


<!-- change your demo pic here; use png format only; box may be added or removed accordingly -->

[screenshot]
	[img]http://img91.imageshack.us/img91/8154/snapshot20090503140650j.png[/img]
	[img]http://img397.imageshack.us/img397/945/snapshot20090503140744.png[/img]
	[img]http://img212.imageshack.us/img212/3776/snapshot20090503140822.png[/img]
	[img]http://img240.imageshack.us/img240/889/snapshot20090503140849.png[/img]
	[img]http://img142.imageshack.us/img142/8716/snapshot20090503141314.png[/img]
[/screenshot]

Sample template image: Click here for full preview
Back to top.

Retrieved from "https://wiki.bakabt.me/index.php?title=Offer_Templates&oldid=6037"