Difference between revisions of "Offer Templates"

From BakaBT Wiki
Jump to: navigation, search
(Anime Templates)
(Removed broken IE special case.)
 
(46 intermediate revisions by 8 users not shown)
Line 14: Line 14:
 
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:
 
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:
  
'''[Update]''' The templates feature is working again. Most of these templates have been [http://www.BakaBT.com/template.php 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.
+
Most of these templates have been [http://bakabt.me/template.php 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=
 
=Submission Format=
Line 22: Line 22:
 
* Replace {curly-bracketed text} with the appropriate names/text.
 
* Replace {curly-bracketed text} with the appropriate names/text.
  
Templates submitted here may be ported over to [http://www.BakaBT.com/template.php BakaBT templates] ''(subject to kureshii's available free time)''.
+
Templates submitted here may be ported over to [http://bakabt.me/template.php BakaBT templates].
  
 
===Sample Template===
 
===Sample Template===
Line 41: Line 41:
 
</pre>
 
</pre>
  
[http://wiki.BakaBT.com/index.php?title=Special:Userlogin Log in] to your BakaBT-Wiki account (Or [http://wiki.BakaBT.com/index.php?title=Special:Userlogin&type=signup register for one] if you don't have one yet). Click one of the links below.
+
[http://wiki.bakabt.me/index.php?title=Special:Userlogin Log in] to your BakaBT-Wiki account (Or [http://wiki.bakabt.me/index.php?title=Special:Userlogin&type=signup register for one] if you don't have one yet). Click one of the links below.
  
# [http://wiki.BakaBT.com/index.php?title=Offer_Templates&action=edit&section=3 Click here] to add your template to [[Offer Templates#Anime Templates| Anime Templates]].
+
# [http://wiki.bakabt.me/index.php?title=Offer_Templates&action=edit&section=3 Click here] to add your template to [[Offer Templates#Anime Templates| Anime Templates]].
# [http://wiki.BakaBT.com/index.php?title=Offer_Templates&action=edit&section=4 Click here] to add your template to [[Offer Templates#Manga Templates| Manga Templates]].
+
# [http://wiki.bakabt.me/index.php?title=Offer_Templates&action=edit&section=4 Click here] to add your template to [[Offer Templates#Manga Templates| Manga Templates]].
# [http://wiki.BakaBT.com/index.php?title=Offer_Templates&action=edit&section=5 Click here] to add your template to [[Offer Templates#OST Templates| OST Templates]].
+
# [http://wiki.bakabt.me/index.php?title=Offer_Templates&action=edit&section=5 Click here] to add your template to [[Offer Templates#OST Templates| OST Templates]].
  
 
Paste your code right at the bottom, then click 'Show Preview'. If you're satisfied that nothing is broken, click 'Save Page'.
 
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 [[IRC#5-Step Guide to getting on #bakabt-support|#bakabt-support]].
 
If something breaks, don't worry, we can roll back changes :) If you need help, drop us a line at [[IRC#5-Step Guide to getting on #bakabt-support|#bakabt-support]].
 +
 +
=Templates preview=
 +
 +
===Anime===
 +
----
 +
 +
{|class="wikitable" border="1" cellspacing="0" style="font-size: 90%;"
 +
|-
 +
! Simple HTML Anime Template !! Simple ChalamiuS HTML Anime Template !! Simple BBCode Anime Template
 +
|-
 +
|[[File:Simple_HTML_Anime_Template.jpg|thumb|center|alt=kureshii|by kureshii.]]||[[File:Simple_ChalamiuS_HTML_Anime_Template.jpg|thumb|center|alt=ChalamiuS|by ChalamiuS.]]||[[File:Simple_BBCode_Anime_Template.jpg|thumb|center|alt=kureshii|by kureshii.]]
 +
|-
 +
|[http://bakabt.me/template.php?id=Simple%20HTML%20Anime%20Template Choose]||[http://bakabt.me/template.php?id=Simple%20ChalamiuS%20HTML%20Anime%20Template Choose]||[http://bakabt.me/template.php?id=Simple%20BBCode%20Anime%20Template Choose]
 +
|-
 +
|}
 +
 +
 +
{|class="wikitable" border="1" cellspacing="0" style="font-size: 90%;"
 +
|-
 +
! Simplest Tabled Anime Template !! Infobox Anime Template !! Twin Alpha Box Description !! Simple book with JS pages
 +
|-
 +
| ||[[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]]||[[Offer_Templates#Infobox_Anime_Template|Choose]]||[[Offer_Templates#Twin_Alpha_Box_Description|Choose]]||[[Offer_Templates#Simple_book_with_JS_pages|Choose]]
 +
|-
 +
|}
 +
 +
===Manga===
 +
----
 +
 +
 +
 +
===OST===
 +
----
  
 
=Anime Templates=
 
=Anime Templates=
Line 55: Line 89:
 
===Simple HTML Anime Template===
 
===Simple HTML Anime Template===
 
----
 
----
[http://www.bakabt.com/template.php?id=Simple%20HTML%20Anime%20Template Click here] to use
+
[http://bakabt.me/template.php?id=Simple%20HTML%20Anime%20Template Click here] to use
  
 
===Simple ChalamiuS HTML Anime Template===
 
===Simple ChalamiuS HTML Anime Template===
 
----
 
----
[http://www.bakabt.com/template.php?id=Simple%20ChalamiuS%20HTML%20Anime%20Template Click here] to use
+
[http://bakabt.me/template.php?id=Simple%20ChalamiuS%20HTML%20Anime%20Template Click here] to use
  
 
===Simple BBCode Anime Template===
 
===Simple BBCode Anime Template===
 
----
 
----
[http://www.BakaBT.com/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===
 +
----
 +
<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]].
 +
 
 +
===Infobox Anime Template===
 
----
 
----
  
Submitted by: deysmacro
+
Submitted by: kureshii
  
 
<pre>
 
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
<!--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>
 
<html>
 
<head>
 
<head>
 
+
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
+
  <style type="text/css">
/* --------------------------------------------------------------------------------------------------------------------------------------------| some note |-----
+
  body { font-family: sans-serif; font-size: 14px; margin: 0px; }
*
+
a { text-decoration: none; }
* Please take note. The indentation should look correctly using Firefox.
+
a:link { color: #b62400; }
*
+
a:visited { color: #444444; }
* Although I have taken all possible steps that it should look correct, using IE will somehow still make it look a little bit weird.
+
.main {
* When that happen, please use Firefox.
+
  background: url([Insert]) no-repeat;
*
+
  border-style: solid 2px;
* Thank you for your understanding.
+
  width: 940px;
*
+
  height: 720px;
* --------------------------------------------------------------------------------------------------------------------------------------------| general info |-----
+
}
*
+
.links {
* Main user link : http://www.bakabt.com/user/816453/deysmacro.html
+
  font-size: 150%;
* Forum user link : http://forums.bakabt.com/index.php?action=profile;u=816453
+
  font-weight: bold;
*
+
  font-variant: small-caps;
* I welcome all of you people to use this template at your convenience.
+
  text-align: right;
* Do contact me via PM or email if you had anything to say.
+
  float: right;
*
+
}
* Email : deysmacro[at]gmail[dot]com
+
.titlediv { font-size: 24px bold; float: center; }
*
+
.infobox {
* I also can help you guys with the template.
+
  background: #FFFFFF; /*Change infobox colour if desired. Transclucent white color creates lightening of background image effect*/
* I will help whenever I can.
+
  filter: alpha(opacity=60); /*for IE*/
*
+
  opacity: 0.50;
* Originally Customized By : deysmacro
+
  width: 220px; /*Adjust infobox width as required*/
* Re-Customized By : YOUR NICK HERE
+
  float: right;
*
+
  clear: right;
* Template Version : v2.0.9.1 generic - light themed
+
  padding: 2px 10px;
* Template Last Update On : July 20th, 2009 @ 23:28pm GMT+8
+
  margin: 10px 20px;
*
+
}
* Please leave the credit intact if you plan to use this template.
+
.header {
* Your cooperation is highly appreciated. Thank you.
+
  text-align: center;
*
+
  font-size: 150%;
* --------------------------------------------------------------------------------------------------------------------------------------------------------| SN |-----
+
  font-weight: bold;
* SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2009 | 07 | 19 | 0720 | d-ait | v2091 | 17
+
  padding-top: 5px;
* ---------------------------------------------------------------------------------------------------------------------------------| Info you should know |-----
+
}
*
+
  </style>
* Quick Reminder:
+
</head>
* If you found any syntax with * siding with the syntax, it is targeted for IE only.
+
<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>
 +
 
 +
[[Media:Infobox Anime Template.jpg|Sample]]
 +
 
 +
Back to [[Offer_Templates#Templates_preview|top]].
 +
 
 +
===Twin Alpha Box Description===
 +
----
 +
 
 +
Submitted by: miasmacloud
 +
 
 +
<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;
 +
}
 +
 
 +
/* 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]
 +
</pre>
 +
 
 +
[[Media:Twin Alpha Box Description.jpg|Sample]]
 +
 
 +
Back to [[Offer_Templates#Templates_preview|top]].
 +
 
 +
===Simple book with JS pages===
 +
----
 +
 
 +
Submitted by: remix85
 +
 
 +
<pre>
 +
<html>
 +
<head>
 +
<!--
 +
* Template: Book v1.1
 +
*           by remix85
 
*
 
*
* Example:
+
* Feel free to rearange pages as You wish, just leave this comment.
* Assume "width" is the syntax...
+
* 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.
 
*
 
*
* body {
+
* Maximum image size is 340x480. Bigger images will be automatically clipped.
* width: 100px; <-- major browser support
 
 
*
 
*
* *width: 110px; <-- targeted for IE only
+
* 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">
* This is done as to make it IE compatible. It is not required if IE displays the generated page correctly.
+
BODY {background-color: #FFFFFF; font-family: Times New Roman; font-size: 13px;}
* Please take note of this when you are editing.
+
TABLE {font-family: Times New Roman; font-size: 13px; color: #101010;}
*
+
A {color: #808080;}
* ---------------------------------------------------------------------------------------------------------------------------------------------------| end |----- */
+
A:hover {color: #000000;}
/*
 
* 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 {
+
IMG {max-width: 340px; max-height: 480px; overflow: hidden;}
background: #131313;
 
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
 
font-family: Tahoma;
 
font-size: 11px;
 
text-align: justify;
 
color: #0F0F0F;
 
  
}
+
#book {width: 940px;}
 +
#book1 {padding: 0 40px 0 50px;}
 +
.title {font-size: 2em; font-weight: bold; text-align: center; color: #101010;}
 +
.page {display: block;}
  
/* --| end |--------------------------- */
+
.hdr {display: none; text-align: center; border-bottom: solid 1px; width: 100%; margin: 0 0 5px 0; padding: 0;}
/* --| http link styling control |-- */
+
#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;}
  
a {
+
.box_left {color: #101010; float: left; clear: left; width: 340px; margin-left: 40px;}
color: #FF661A;
+
.box_left TABLE {width: 100%;}
text-decoration: none;
+
.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;}
  
a:hover {
+
.tbl_info {width: 100%;}
color: #000000;
+
.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[
  
/* --| end |----------------------------- */
+
// small hack to show book layout only when JavaScript is enabled
/* --| paragraph styling control |-- */
+
document.writeln('<style type="text/css">');
 
+
document.writeln('#book {height: 582px; background-repeat: no-repeat; background-image: url("[bbtimg=1314]");}');
p {
+
document.writeln('#book1 {overflow: hidden; max-height:500px; padding: 40px 40px 40px 50px;}');
text-align: justify;
+
document.writeln('.page {display: none;}');
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
+
document.writeln('.hdr {display: block;}');
padding:20px;
+
document.writeln('</style>');
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>
  
/* --| end |------------------------ */
+
<body>
/* --| table content control |-- */
+
<center>
  
td {
+
<div id="book"><div id="book1">
vertical-align: left middle;
+
<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
 +
-->
  
/* --| end |---------------------------- */
+
<div class="page" id="page1" style="display:block;">
/* --| main title styling control |-- */
+
<div class="box_right" style="text-align: center;">
 +
[TODO: image]
 +
<!--<img src="http://" alt="Image not found" />-->
 +
</div>
  
.title {
+
<div class="box_left">
font-family: Tahoma;
+
<table><tr><td>
font-size: 22px;
+
<div class="title">[TODO: title]</div>
font-weight: bold;
+
</td></tr></table><br />
text-align: center;
+
</div>
padding:10px;
 
background-color: #ffffff;
 
color: #000066;
 
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
 
border: #999999 1px solid;
 
  
}
+
<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-->
  
/* --| end |--------------------------- */
+
<div class="page" id="page2">
/* --| picture content control |-- */
+
<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!
 +
-->
 +
  
.pic2 {
+
</div></div><!--book-->
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');
 
  
}
+
</center>
 +
</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]].
  
/* --| end |------------------------------- */
+
=Manga Templates=
/* --| sub heading styling control |-- */
 
  
.heading {
+
===Byousoku 5cm Manga Template===
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;
 
  
}
+
[http://bakabt.me/template.php?id=Simple%20HTML%20Manga%20Template Click here] to use
  
/* --| end |---------------------- */
+
===Dille's Manga Template===
/* --| label styling control |-- */
+
----
  
.label {
+
[http://bakabt.me/template.php?id=Dille%27s%20Manga%20Template Click here] to use
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%;
+
===Msm595's Manga Template===
 +
----
  
}
+
Submitted by: kiiller_man1
  
/* --| end |-------------------------------- */
+
<pre>
/* --| various text styling control |-- */
+
<!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>
  
.text {
+
Sample template image: [http://i51.tinypic.com/dfzo6t.jpg Image link]
width: 100%;
 
color: #000066;
 
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
 
border: #999999 1px solid;
 
  
}
+
=OST Templates=
  
.text3 {
+
===OST Template 1===
width: 100%;
+
----
color: #9D9D9D;
 
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
 
border: #999999 1px solid;
 
  
}
+
[http://bakabt.me/template.php?id=Simple%20HTML%20OST%20Template Click here] to use
  
.text6 {
+
===Show/hide Tracklist OST Template===
color: #CC6600;
+
----
  
}
+
[http://bakabt.me/template.php?id=Show/HideList%20OST%20Template Click here] to use
  
.text7 {
+
===Dropdown list OST Template===
color: #518ABF;
+
----
font-weight: bold;
 
  
}
+
[http://bakabt.me/template.php?id=DropdownBox%20OST%20Template Click here] to use
  
.text9 {
+
===Simple OST Template===
color: #000000;
+
----
font-weight: bold;
 
  
}
+
[http://bakabt.me/template.php?id=Simple%20HTML%20OST%20Template Click here] to use
  
</style>
+
===Boxed OST Template===
 +
---
  
</head>
+
Submitted by: kureshii
<body>
 
  
 +
'''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.'''
  
<table style="background-color: transparent;" cellpadding="6" cellspacing="6" height="100%">
+
<pre>
<tr>
+
<html>
<td colspan="3">
+
<head>
<div><hr><br></div>
+
<title>[[Torrent Title]]</title>
 
+
<style type="text/css">
 
+
body {
<!-- the title heading -->
+
background-color: #ffffff;
<div class="title">Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]</div>
+
text-align: left;
 
+
margin: auto;
<div><br><hr></div>
+
}
</td>
+
table {
</tr>
+
display: table;
<tr>
+
border-spacing: 10px;
 
+
font-family: Calibri, Helvetica, sans-serif;
 
+
font-size: medium;
<!-- rowspan number must be changed accordingly if you add/remove row -->
+
}
<td rowspan="20" >
+
tr {display: table-row;}
 
+
td {
 
+
display: table-cell;
<!-- 400px max width recommended -->
+
min-width: 430px;
<img class="pic2" src="http://img200.imageshack.us/img200/4229/187611.png">
+
padding: 10px;
 
+
border: solid 2px #000000;
</td>
+
vertical-align: top;
</tr>
+
}
<tr>
+
.album {max-width: 30em; margin: auto;}
<td colspan="3" style="padding-top: 0px;">
+
.vocal {max-width: 50em; margin: auto;}
<div class="heading">SERIES INFORMATION</div>
+
.header1 {
</td>
+
font-size: 140%;
</tr>
+
font-weight: bold;
 
+
text-align: center;
 
+
}
<!-- edit the info accordingly -->
+
.header2 {
<tr>
+
font-size: 115%;
<td class="label">Main Title:</td>
+
}
<td class="text">Panda Kopanda</td>
+
.header3 {
</tr>
+
font-size: 66%;
<tr>
+
font-style: italic;
<td class="label">Official Title:</td>
+
font-weight: normal;
<td class="text">Panda! Go Panda!</td>
+
}
</tr>
+
img {
<tr>
+
margin: 8px;
<td class="label">Japanese Title:</td>
+
}
<td class="text">パンダコパンダ</td>
+
.imgborder {
</tr>
+
border: 1px solid #666666;
<tr>
+
height: 366px;
<td class="label">Year:</td>
+
width: 366px;
<td class="text">1972 & 1973</td>
+
margin-left: auto;
</tr>
+
margin-right: auto;
<tr>
+
margin-top: 5px;
<td class="label">Episodes:</td>
+
margin-bottom: 5px;
<td class="text"><span class="text7">2 combined into 1</span></td>
+
}
</tr>
+
.footer {position: relative;}
<tr>
+
</style></head>
<td class="label">Categories:</td>
+
<body>
<td class="text">Adventure, Anthropomorphism, Comedy, Contemporary Fantasy, Fantasy</td>
+
<table>
</tr>
+
    <tr>
<tr>
+
      <td>
<td class="label">Director:</td>
+
      <div class="header1">[[Album 1 Description: OST/Single/OP/ED/etc]]<br>
<td class="text">Isao Takahata</td>
+
      <div class="header2">[[Album 1 Title]]<br>
</tr>
+
      <div class="header3">[[Artist(s) info]]</div></div></div>
<tr>
+
      <div class="imgborder"><img src="[[Album 1 Image URL (note: update image height&width in imgborder CSS class!)]]"></div>
<td class="label">Production:</td>
+
      <div class="album"><b>Catalog No.:</b> [[Catalog No.]]<br>
<td class="text">Shunzo Kato</td>
+
      <b>Compression:</b> [[File codec/format]]<br>
</tr>
+
      <b>Album Release Date:</b> [[Album 1 Release Date]]<br>
<tr>
+
      <br>
<td class="label">References:</td>
+
      <b>Tracklist:</b><br>
<td class="text">
+
1. [[Track 1]]<br>
 
+
2. [[Track 2]]<br>
 
+
3. [[Track 3]]<br>
<!-- edit the info accordingly -->
+
4. [[Track 4]]<br>
<a href="http://anidb.net/perl-bin/animedb.pl?show=anime&aid=530" target="_blank">AniDB</a> |
+
<br>
<a href="http://www.animenfo.com/animetitle,2379,stbesx,panda_kopanda.html" target="_blank">AnimeNFO</a> |
+
<div class="footer">[[FLAC/MP3/WV (choose 1)]] files from [[Insert Ripper name here]]<br>
<a href="http://www.animenewsnetwork.com/encyclopedia/anime.php?id=352" target="_blank">ANN</a> |
+
Booklet scans included ([[Number of album 1 scans]] files).</div></div>
<a href="http://www.nausicaa.net/miyazaki/panda/" target="_blank">Official Page</a>
+
      </td>
 
+
      <td>
</td>
+
      <div class="header1">[[Album 2 Description: OST/Single/OP/ED/etc]]<br>
</tr>
+
      <div class="header2">[[Album 2 Title]]<br>
<br><br><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>
<tr>
+
      <div class="album"><b>Catalog No.:</b> [[Catalog No.]]<br>
<td colspan="3" style="padding-top: 20px;"><div class="heading">FILE INFORMATION</div> </td>
+
      <b>Compression:</b> [[File codec/format]]<br>
</tr>
+
      <b>Album Release Date:</b> [[Album 2 Release Date]]<br>
 
+
      <br>
 
+
      <b>Tracklist:</b><br>
<!-- edit the info accordingly -->
+
1. [[Track 1]]<br>
<!-- change text3 to text if there is information -->
+
2. [[Track 2]]<br>
<tr>
+
3. [[Track 3]]<br>
<td class="label">FanSub by:</td>
+
4. [[Track 4]]<br>
<td class="text3">No Information</td>
+
<br>
</tr>
+
<div class="footer">[[FLAC/MP3/WV (choose 1)]] files from [[Insert Ripper name here]]<br>
<tr>
+
Booklet scans included ([[Number of album 2 scans]] files).</div></div>
<td class="label">Video:</td>
+
      </td>
<td class="text"><span class="text7">DivX 6</span> [ <span class="text6">704x544 29.97fps</span> ]</td>
+
    </tr>
</tr>
+
    <tr>
<tr>
+
      <td>
<td class="label">Audio:</td>
+
      <div class="header1">[[Album 3 Description: OST/Single/OP/ED/etc]]<br>
<td class="text"><span class="text7">Japanese</span> [ <span class="text6">MPEG Audio Layer 3 24000Hz stereo 48Kbps</span> ]</td>
+
      <div class="header2">[[Album 3 Title]]<br>
</tr>
+
      <div class="header3">[[Artist(s) info]]</div></div></div>
<tr>
+
      <div class="imgborder"><img src="[[Album 3 Image URL (note: update image height&width in imgborder CSS class!)]]"></div>
<td class="label">Subtitles:</td>
+
      <div class="album"><b>Catalog No.:</b> [[Catalog No.]]<br>
<td class="text"><span class="text7">English</span> [ <span class="text6">Hard-Subbed</span> ]</td>
+
      <b>Compression:</b> [[File codec/format]]<br>
</tr>
+
      <b>Album Release Date:</b> [[Album 3 Release Date]]<br>
<tr>
+
      <br>
<td class="label">Approx. Duration:</td>
+
      <b>Tracklist:</b><br>
<td class="text">~ <span class="text7">1 hour 11 minutes</span> per episode</td>
+
1. [[Track 1]]<br>
</tr>
+
2. [[Track 2]]<br>
<tr>
+
3. [[Track 3]]<br>
<td class="label">Note:</td>
+
4. [[Track 4]]<br>
<td class="text">Please continue seeding as much as you can people. Thank you.</td>
+
<br>
</tr>
+
<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>
<!-- edit the info accordingly -->
+
      <td>
<tr>
+
      <div class="header1">[[Album 4 Description: OST/Single/OP/ED/etc]]<br>
<td class="label">Related Anime:</td>
+
      <div class="header2">[[Album 4 Title]]<br>
<td class="text">
+
      <div class="header3">[[Artist(s) info]]</div></div></div>
> <a href="http://www.bakabt.com/torrent/10676/Panda_Kopanda_Panda_Go_Panda_DVD_DivX_MP3.html" target="_blank">Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]</a>
+
      <div class="imgborder"><img src="[[Album 4 Image URL (note: update image height&width in imgborder CSS class!)]]"></div>
</td>
+
      <div class="album"><b>Catalog No.:</b> [[Catalog No.]]<br>
</tr>
+
      <b>Compression:</b> [[File codec/format]]<br>
<tr>
+
      <b>Album Release Date:</b> [[Album 4 Release Date]]<br>
<td class="label">Related OST:</td>
+
      <br>
<td class="text3">No Information</td>
+
      <b>Tracklist:</b><br>
</tr>
+
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>
  
<tr>
+
Sample torrent: [http://bakabt.me/torrent/140104/Macross_Frontier_Music_Collection_(FLAC)_LonE.html Macross Frontier Music Collection]
<td colspan="3" style="padding-top: 20px;"><div class="heading">SYNOPSIS</div>
 
  
<p>
+
Go to: [http://bakabt.me/offer.php Offers Page]
<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>
+
===Javascript-based dropdown menu Template (Especially good for manga/OST collections)===
 +
----
  
</p>
+
Submitted by: shadowmaniac
</td>
 
</tr>
 
<tr>
 
<td colspan="3" style="padding-top: 20px;"><div class="heading">SCREENSHOTS</div></td>
 
</tr>
 
</table>
 
  
 +
'''Note: A fixed body height, based on the max height of your longest description, has to be specified else, description will be truncated.'''
  
</body>
+
'''Note: Please don't use this template if you don't/can't understand what's going on.'''
</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]
 
</pre>
 
 
 
Sample template image: [http://img269.imageshack.us/img269/7817/sandboxbakabtanimebitto.png Click here for full preview]
 
 
 
===Generic Anime Template - Dark Themed===
 
----
 
 
 
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>
 +
<style type="text/css">
 +
hr
 +
{
 +
width: 80%;
 +
}
  
<style type="text/css">
+
body
/* --------------------------------------------------------------------------------------------------------------------------------------------| some note |-----
+
{
*
+
align: center;
* Please take note. The indentation should look correctly using Firefox.  
+
                height: 500px;
*
+
}
* 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.
+
.tdtext
*
+
{
* Thank you for your understanding.
+
width: 30%;
*
+
v-align: top;
* --------------------------------------------------------------------------------------------------------------------------------------------| general info |-----
+
}
*
+
 
* Main user link : http://www.bakabt.com/user/816453/deysmacro.html
+
.wrapper
* Forum user link : http://forums.bakabt.com/index.php?action=profile;u=816453
+
{
*
+
width: 800px;
* I welcome all of you people to use this template at your convenience.
+
align: center; border-width: 2px;
* Do contact me via PM or email if you had anything to say.
+
border-style: solid;
*
+
border-color: #000;
* Email : deysmacro[at]gmail[dot]com
+
overflow: auto;
*
+
text-align: center;
* I also can help you guys with the template.
+
}
* I will help whenever I can.
+
</style>
*
+
 
* Originally Customized By : deysmacro
+
<script  language="javascript">
* Re-Customized By : YOUR NICK HERE
+
<!--
*
+
//############################################
* Template Version : v2.0.8.1 generic - dark themed
+
//Don't change any of the code BELOW this line
* Template Last Update On : July 21th, 2009 @ 13:28pm GMT+8
+
//############################################
*
+
/***********************************************
* Please leave the credit intact if you plan to use this template.
+
* IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Your cooperation is highly appreciated. Thank you.
+
* Visit DynamicDrive.com for hundreds of original DHTML scripts
*
+
* This notice must stay intact for legal use
* --------------------------------------------------------------------------------------------------------------------------------------------------------| SN |-----
+
***********************************************/
* SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2009 | 07 | 19 | 0720 | d-ait | v2081 | 11
+
 
* ---------------------------------------------------------------------------------------------------------------------------------| Info you should know |-----
+
//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:
* Quick Reminder:
+
var iframeids=["myframe"]
* If you found any syntax with * siding with the syntax, it is targeted for IE only.
+
 
*
+
//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
*
+
var iframehide="yes"
* 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 {
+
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
background: #131313;
+
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers
background-image:url('http://img11.imageshack.us/img11/6719/3784.gif'); /* want some fresh background? change it here */
 
font-family: Tahoma;
 
font-size: 11px;
 
  
}
+
function resizeCaller() {
 
+
var dyniframe=new Array()
/* --| end |--------------------------- */
+
for (i=0; i<iframeids.length; i++){
/* --| http link styling control |-- */
+
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"
 +
}
 +
}
 +
}
  
a {
+
function resizeIframe(frameid){
text-decoration: none;
+
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);
 +
}
  
a:hover {
+
function loadintoIframe(iframeid, url){
color: #FF661A;
+
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
 +
//#############################################
  
/* --| 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 |-- */
+
//Modify the code below to suit your needs
 +
//########################################
 +
function Show(selected_option)
 +
{
 +
  // get our iframe
 +
var testFrame = document.getElementById("myframe");
 +
var val;
  
td {
+
//selected_option refers to the "option" value provided in the HTML code
vertical-align: left middle;
+
switch(parseInt(selected_option))
 
+
{
}
+
case 1:
 
+
val = "<table align='center' border='1' width='100%'>";
/* --| end |---------------------- */
+
val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>";
/* --| title styling control |-- */
+
val += "<img src='[[img link here]]'></td></tr>";
 
+
val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 1]]</h2></td></tr>";
.title {
+
val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>";
font-family: Tahoma;
+
val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>";
font-size: 22px;
+
val += "<tr><td class='text'>[[Track list 2]]</td><td class='text'>[[Track list 6]]</td></tr>";
font-weight: bold;
+
val += "<tr><td class='text'>[[Track list 3]]</td><td class='text'>[[Track list 7]]</td></tr>";
text-align: center;
+
val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>";
padding:10px;
+
val += "</table>";
background-color: #2E2E2E;
+
  break;
color: #FFB856;
+
case 2:
background-image:url(http://img179.imageshack.us/img179/4977/bgrepeater2hn2.gif);
+
val = "<table align='center' border='1' width='100%'>";
border: #999999 1px solid;
+
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>";
/* --| end |-------------------------- */
+
val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>";
/* --| picture styling control |-- */
+
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>";
.pic2 {
+
val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>";
font-family: Tahoma;
+
val += "</table>";
font-size: 22px;
+
  break;
font-weight: bold;
+
case 3:
text-align: center;
+
val = "<table align='center' border='1' width='100%'>";
padding:10px;
+
val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>";
background-color: #2E2E2E;
+
val += "<img src='[[img link here]]'></td></tr>";
color: #FFB856;
+
val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 3]]</h2></td></tr>";
border: #999999 1px solid;
+
val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>";
background-image:url(http://img179.imageshack.us/img179/4977/bgrepeater2hn2.gif);
+
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>";
/* --| end |-------------------------- */
+
val += "</table>";
/* --| heading styling control |-- */
+
  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;
 +
}
  
.heading {
+
// now write out the new contents
font-family: Tahoma;
+
var doc = testFrame.contentDocument;
font-size: 14px;
+
if (doc == undefined || doc == null)
font-weight: bold;
+
doc = testFrame.contentWindow.document;
text-align: center;
+
doc.open();
color: #FF661A;
+
doc.write(val);
background-image:url(http://img358.imageshack.us/img358/4214/back2il5.png);
+
doc.close();
padding: 8px 0px 8px 0px;
 
  
}
+
  document.all.myFrame.style.visibility="visible";
 +
}
 +
//-->
 +
</script>
 +
</head>
  
/* --| end |---------------------- */
+
<body>
/* --| label styling control |-- */
+
<center>
 +
<div class="wrapper">
 +
<br />
 +
<form  id="form1">
 +
<select name="dest" onchange="Show(this.options[this.selectedIndex].value)">
  
.label {
+
<!-- Modify this part here -->
width: 18%;
+
<option value="0">Choose an album/OST</option>
text-align: right;
+
<option value="1">[[OST 1]]</option>
font-weight: bold;
+
<option value="2">[[OST 2]]</option>
color: #FFFFFF;
+
<option value="3">[[OST 3]]</option>
background-image:url(http://img358.imageshack.us/img358/4214/back2il5.png);
+
<option value="4">[[OST 4]]</option>
border: #999999 1px solid;
+
<option value="5">[[OST 5]]</option>
 +
<!-- No need for modification beyond this point -->
  
*width: 22%;  
+
</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>
 +
</pre>
  
}
+
Sample template image: [http://i369.photobucket.com/albums/oo133/shadowmaniac_2000/JSDropdown.jpg Sample image]
  
/* --| end |-------------------------------- */
+
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]
/* --| various text styling control |-- */
 
  
.text {
+
===Simple ChalamiuS OST Template===
width: 100%;
+
----
color: #FFB856;
+
[http://bakabt.me/template.php?id=Simple%20ChalamiuS%20HTML%20OST%20Template Click here] to use
background-image:url(http://img358.imageshack.us/img358/4214/back2il5.png);
 
border: #999999 1px solid;
 
  
}
+
Go to: [http://bakabt.me/offer.php Offers Page]
  
.text3 {
+
=Outdated Templates=
width: 100%;
+
<span style="color:red; font-size:18px;">Please don't use following templates anymore. They are outdated.</span>
color: #9D9D9D;
 
background-image:url(http://img358.imageshack.us/img358/4214/back2il5.png);
 
border: #999999 1px solid;
 
  
}
+
===HTML5 CSS3 Anime Template===
 +
----
  
.text6 {
+
Submitted by: CvP
        color: #FFF0CC;
+
[[File:Html5_CSS3_anime_template_by_cvp.JPG|thumb|300px|Full Sized Screenshot]]
}
+
This anime template utilizes HTML5 and CSS3.
 +
It is compatible with latest IE9/Firefox/Chrome/Safari/Opera as much as possible.<br /><br />
  
.text7 {
+
<blockquote>To use this template, you don't need to edit a single line of code.<br />
color: #00D4FF;
+
All you need to do is
font-weight: bold;
+
*'''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.</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 />
 +
If you need any help customizing this template, you can post in the above link as well.<br />
  
.text9 {
+
'''Note''': It is a good idea to use Firefox4 to view the form (The template should be ok on any newer browsers).
color: #FFB856;
 
font-weight: bold;
 
  
}
+
[http://cvp.banglagamer.com/bakabt Click here] to use.<br />
 +
[http://bakabt.me/147902-fate-stay-night-1080p-anime-supreme.html Click here] for a live preview!<br /><br />
 +
Back to [[Offer_Templates#Templates_preview|top]].
  
/* --| end |------------------------ */
+
===Generic Revision-2 Anime Template===
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
+
----
</style>
 
  
</head>
+
Submitted by: deysmacro
<body>
 
  
<table style="background-color: transparent;" cellpadding="6" cellspacing="6" height="100%">
+
<pre>
<tr>
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<td colspan="3">
+
<html><head>
<div><hr><br></div>
 
  
 +
<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>
  
<!-- main heading here -->
+
<style type="text/css">
<div class="title">Kaidoumaru | Kai Doh Maru [DVD][XviD][MP3]</div>
+
/*  -| 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 |- */
  
<div><br><hr></div>
+
/* -| Info you should know |-
</td>
+
*
</tr>
+
*    Quick Reminder:
 
+
*    If you found any syntax with * siding with the syntax, it is targeted for IE only.
<tr>
+
*
+
*
 
+
*    Example:
<!-- if you add or remove row, rowspan number of 20 here must be adjusted accordingly; else the table would look weird -->
+
*          Assume "width" is the syntax...
<!-- 400px max width recommended -->
+
*
<td rowspan="20" ><img class="pic2" src="http://img24.imageshack.us/img24/590/1086019.jpg"></td>
+
*    body {
</tr>
+
*          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 |- */
  
<tr>
+
#jquery-overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; }
<td colspan="3" style="padding-top: 0px;"><div class="heading">SERIES INFORMATION</div></td>
+
#jquery-lightbox { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; }
</tr>
+
#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; }
<!-- edit the info accordingly -->
+
#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; }
<tr>
+
#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; }
<td class="label">Main Title:</td>
+
#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; }
<td class="text">Kaidoumaru</td>
+
#lightbox-container-image-box { position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
</tr>
+
#lightbox-container-image { height: 100%; padding: 10px; }
<tr>
+
#lightbox-loading { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
<td class="label">Official Title:</td>
+
#lightbox-nav { position: absolute; top: 32px; left: 0; height: 100%; width: 100%; z-index: 10; }
<td class="text">Kai Doh Maru</td>
+
#lightbox-container-image-box > #lightbox-nav { left: 0; }
</tr>
+
#lightbox-nav a { outline: none; }
<tr>
+
#lightbox-nav-btnPrev, #lightbox-nav-btnNext { width: 49%; height: 100%; zoom: 1; display: block; }
<td class="label">Japanese Title:</td>
+
#lightbox-nav-btnPrev { left: 0; float: left; }
<td class="text">怪童丸</td>
+
#lightbox-nav-btnNext { right: 0; float: right; }
</tr>
+
#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; }
<tr>
+
#lightbox-container-image-data #lightbox-image-details { width: 70%; float: left; text-align: left; }
<td class="label">Year:</td>
+
#lightbox-image-details-caption { font-weight: bold; display: block; height: 25px; line-height: 25px; vertical-align: middle; }
<td class="text">2001</td>
+
#lightbox-image-details-currentNumber { display: block; clear: left; padding-bottom: 1.0em; display: inline; height: 16px; line-height: 16px; vertical-align: middle; }
</tr>
+
#lightbox-image-details-previous-image, #lightbox-image-details-previous-text, #lightbox-image-details-next-image, #lightbox-image-details-next-text
<tr>
+
{ display: inline; height: 25px; line-height: 25px; vertical-align: middle; cursor: pointer; cursor: hand; }
<td class="label">Episodes:</td>
+
 
<td class="text"><span class="text7">1</span></td>
+
p { text-align: justify; background-color: #F5E8E0; text-shadow: #CEB0D6 2px 2px 2px; }
</tr>
+
 
<tr>
+
.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; }
<td class="label">Categories:</td>
+
.div2 { margin-top: 15px; }
<td class="text">Action, Fantasy, Historical, Magic, Seinen</td>
+
.div3 { margin-top: 10px; }
</tr>
+
.div4 { *padding: 10px; }
<tr>
+
 
<td class="label">Director:</td>
+
fieldset { border: 1px solid #CEB0D6; }
<td class="text">Kanji Wakabayashi</td>
+
 
</tr>
+
.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;] }
<tr>
+
.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;] }
<td class="label">Production:</td>
+
.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;] }
<td class="text">Production I.G</td>
+
.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;] }
</tr>
 
<tr>
 
<td class="label">References:</td>
 
  
 +
#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; }
  
<!-- edit the info accordingly -->
+
body {  background-color: #FCF3F4; }
<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>
+
.tr1 { background-color:#F5E8E0; }
<td colspan="3" style="padding-top: 20px;"><div class="heading">FILE INFORMATION</div></td>
+
.td1 { border:1px solid #EFD5BE; text-align:right; width:19%; text-shadow: #CEB0D6 2px 2px 2px; }
</tr>
+
.td2 { border:1px solid #EFD5BE; text-shadow: #CEB0D6 2px 2px 2px; }
  
 +
</style>
  
<!-- edit the info accordingly -->
+
</head>
<tr>
+
<body>
<td class="label">FanSub by:</td>
+
<table width='100%'>
<td class="text3">No Information</td>
+
    <tr>
</tr>
+
          <td ><img id='img1' src='http://img693.imageshack.us/img693/330/imgcm.jpg' /></td>
<tr>
+
          <td>
<td class="label">Video:</td>
+
              <fieldset><legend class=legend1>SERIES INFORMATION</legend>
<td class="text"><span class="text7">XviD</span> [ <span class="text6">720x400 29.97fps</span> ]</td>
+
                    <table width=100% cellpadding=5px cellspacing=5px>
</tr>
+
                        <tr class=tr1><td class=td1>Main Title:</td><td class=td2>Misutenaide Daisy</td></tr>
<tr>
+
                        <tr class=tr1><td class=td1>Official Title:</td><td class=td2>Don`t Leave Me Alone, Daisy</td></tr>
<td class="label">Audio:</td>
+
                        <tr class=tr1><td class=td1>Japanese Title:</td><td class=td2>みすてないで デイジー</td></tr>
<td class="text"><span class="text7">Japanese</span> [ <span class="text6">MPEG Audio Layer 3 48000Hz stereo 130Kbps</span> ]</td>
+
                        <tr class=tr1><td class=td1>Year:</td><td class=td2>03.07.1997 till 18.09.1997</td></tr>
</tr>
+
                        <tr class=tr1><td class=td1>Episodes:</td><td class=td2>12</td></tr>
<tr>
+
                        <tr class=tr1><td class=td1>Categories:</td><td class=td2>Comedy, Cyborgs, Mecha, Sci-Fi, Shounen, Slapstick</td></tr>
<td class="label">Subtitles:</td>
+
                        <tr class=tr1><td class=td1>Director:</td><td class=td2>Yuji Mutoh</td></tr>
<td class="text"><span class="text7">English</span> [ <span class="text6">Hard-Subbed</span> ]</td>
+
                        <tr class=tr1><td class=td1>Production:</td><td class=td2>BeSTACK, d-rights</td></tr>
</tr>
+
                        <tr class=tr1><td class=td1>References:</td>
<tr>
+
                              <td class=td2>
<td class="label">Approx. Duration:</td><td class="text">~ <span class="text7">46</span> minutes per episode</td>
+
                                  <a href="http://anidb.net/perl-bin/animedb.pl?show=anime&aid=2022" target="_blank">AniDB</a> |
</tr>
+
                                  <a href="http://www.animenewsnetwork.com/encyclopedia/anime.php?id=137" target="_blank">ANN</a> |
<tr>
+
                                  <a href="http://www.animenfo.com/animetitle,711,ubabvw,misutenaide_dai.html" target="_blank">AnimeNFO</a>
<td class="label">Note:</td><td class="text">Please continue seeding as much as you can.<br>Thank you guys.</td>
+
                              </td></tr>
</tr>
+
                    </table>
 
+
          </fieldset>
 
+
          <div class=div2>
<!-- edit the info accordingly -->
+
          <fieldset><legend class=legend2>FILE INFORMATION</legend>
<tr>
+
              <table width=100% cellpadding=5px cellspacing=5px>
<td class="label">Related Anime:</td>
+
                    <tr class=tr1><td class=td1>FanSub By:</td><td class=td2><b>A-Et</b></td></tr>
<td class="text">
+
                    <tr class=tr1><td class=td1>Video:</td><td class=td2><b>DivX 5</b> [ 560x420 29.97fps ]</td></tr>
<a href="http://www.BakaBT.com/torrent/141617/Kai_Doh_Maru._DVDrip.html" target="_blank">Kai Doh Maru.[DVDrip]</a><br>
+
                    <tr class=tr1><td class=td1>Audio:</td><td class=td2><b>Japanese</b> [ MPEG Audio Layer 3 48000Hz stereo 113kbps ]</td></tr>
<a href="http://www.BakaBT.com/torrent/129335/Kaidoumaru_-_OVA_a4e.html" target="_blank">Kaidoumaru - OVA [a4e]</a>
+
                    <tr class=tr1><td class=td1>Subtitles:</td><td class=td2><b>English</b> [ Hard-Subbed ]</td></tr>
</td>
+
              </table>
</tr>
+
          </fieldset>
<tr>
+
          </div>
<td class="label">Related OST:</td>
+
          </td>
<td class="text3">No Information</td>
+
    </tr>
</tr>
+
    <tr>
 
+
          <td width=30%>
<tr>
+
          <div class=div3>
<td colspan="3" style="padding-top: 20px;"><div class="heading">SYNOPSIS</div>
+
          <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>
  
<!-- edit the info accordingly -->
+
Sample template image: [http://wiki.bakabt.me/index.php/File:Generic_Revision-2_Anime_Template.png Click here for full preview]<br />
<p>
+
Back to [[Offer_Templates#Templates_preview|top]].
<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>
+
===JS Alternative Anime Template - Editing Friendly Edition===
<td colspan="3" style="padding-top: 20px;"><div class="heading">SCREENSHOTS</div></td>
+
----
</tr>
 
</table>
 
  
 +
Submitted by: deysmacro
  
</body>
+
<pre>
</html>
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +
<html>
 +
<head>
  
  
<!-- change your demo pic here; use png format only; box may be added or removed accordingly -->
+
<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 |-- */
  
[screenshot]
+
function dcw(input)
[img]http://img91.imageshack.us/img91/8154/snapshot20090503140650j.png[/img]
+
  { document.write(input); }
[img]http://img397.imageshack.us/img397/945/snapshot20090503140744.png[/img]
+
      useredit = new Object();
[img]http://img212.imageshack.us/img212/3776/snapshot20090503140822.png[/img]
+
      related = new Object();
[img]http://img240.imageshack.us/img240/889/snapshot20090503140849.png[/img]
 
[img]http://img142.imageshack.us/img142/8716/snapshot20090503141314.png[/img]
 
[/screenshot]                                                   
 
</pre>
 
  
Sample template image: [http://img32.imageshack.us/img32/8761/sandboxbakabtanimebittor.png Click here for full preview]
+
      related.anime_list = new Array();
 +
      related.ost_list = new Array();
 +
      related.pics_list = new Array();
  
===Generic Revision-2 Anime Template===
+
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; }
  
Submitted by: deysmacro
+
        tmp_item = new Object();
 +
 
 +
        tmp_item.title = title;
 +
        tmp_item.href = href;
 +
 
 +
        target_list.push(tmp_item);
 +
  }
  
<pre>
+
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit info center |--| start |-- */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
/* --> most user only need to edit the info here <--------------------------------------------------------------------------------------------------------------------------------------------------------------| note |-- */
<html><head>
+
 
 +
 
 +
useredit.heading="Panda Kopanda | Panda! Go Panda! [DivX][MP3]";
  
<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">
+
useredit.maintitle="Panda Kopanda";
/*  -| general info |-
+
useredit.officialtitle="Panda! Go Panda";
*
+
useredit.japanesetitle="パンダコパンダ ";
*    Main user link  : http://www.bakabt.com/user/816453/deysmacro.html
+
useredit.year="1972 & 1973";
*    Forum user link : http://forums.bakabt.com/index.php?action=profile;u=816453
+
useredit.episodes="2 combined into 1";
*
+
useredit.categories="Adventure, Anthropomorphism, Comedy, Contemporary Fantasy, Fantasy";
*    I welcome all of you people to use this template at your convenience.
+
useredit.director="Isao Takahata";
*    I also can help you guys with the template. I will help whenever I can.
+
useredit.production="Shunzo Kato";
*    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 |-
+
/* --> 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";
*    Quick Reminder:
+
useredit.animenfo = "http://www.animenfo.com/animetitle,2379,stbesx,panda_kopanda.html";
*    If you found any syntax with * siding with the syntax, it is targeted for IE only.
+
useredit.ann = "http://www.animenewsnetwork.com/encyclopedia/anime.php?id=352";
*
+
useredit.officialpage = "http://www.nausicaa.net/miyazaki/panda/";
*
 
*    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; }
+
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.";
  
.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; }
+
useredit.srcs_left="";
 +
useredit.srcs_right="DVD";
  
.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; }
+
useredit.vids_left="DIVX";
#img2 { padding:10px; text-align:center; border:1px solid #EFD5BE; background-color:#fff; margin-left: 4px; }
+
useredit.vids_right="704X544";
  
body {  background-color: #FCF3F4; }
 
  
.tr1 { background-color:#F5E8E0; }
+
useredit.auds_left="JP";
.td1 { border:1px solid #EFD5BE; text-align:right; width:19%; text-shadow: #CEB0D6 2px 2px 2px; }
+
useredit.auds_right="MP3  24KHZ";
.td2 { border:1px solid #EFD5BE; text-shadow: #CEB0D6 2px 2px 2px; }
 
  
</style>
 
  
</head>
+
useredit.subs_left="EN";
<body>
+
useredit.subs_right="HARD";
<table width='100%'>
+
 
    <tr>
+
 
          <td ><img id='img1' src='http://img693.imageshack.us/img693/330/imgcm.jpg' /></td>
+
useredit.tooltip_label_vids="This title has been encoded with <b>DivX 6 - 704 x 544 29.97fps</b>.";
          <td>
+
useredit.tooltip_label_auds="This title utilized <b>MPEG Audio Layer 3 24000Hz stereo 48Kbps</b>.";
              <fieldset><legend class=legend1>SERIES INFORMATION</legend>
+
useredit.tooltip_label_subs="This title has been <b>hard-subbed</b>.";
                    <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>
+
/* --> 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 |-- */
                        <tr class=tr1><td class=td1>Japanese Title:</td><td class=td2>みすてないで デイジー</td></tr>
+
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");
                        <tr class=tr1><td class=td1>Year:</td><td class=td2>03.07.1997 till 18.09.1997</td></tr>
+
add_related("anime", "Dummy link", "#");
                        <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>
+
/* --> 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 |-- */
                        <tr class=tr1><td class=td1>Production:</td><td class=td2>BeSTACK, d-rights</td></tr>
+
add_related("ost", "No related link", "#");
                        <tr class=tr1><td class=td1>References:</td>
+
add_related("ost", "Dummy link", "#");
                              <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> |
+
/* --> 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 |-- */
                                  <a href="http://www.animenfo.com/animetitle,711,ubabvw,misutenaide_dai.html" target="_blank">AnimeNFO</a>
+
add_related("pics", "#", "http://img39.imageshack.us/img39/280/pandakopanda.jpg");
                              </td></tr>
+
add_related("pics", "#", "http://img39.imageshack.us/img39/280/pandakopanda.jpg");
                    </table>
+
add_related("pics", "#", "http://img39.imageshack.us/img39/280/pandakopanda.jpg");
          </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://img63.imageshack.us/img63/7550/seriesmisutenaidedaisyd.png Click here for full preview]
+
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit info center |--| end |-- */
 +
/* --| end |--| user-edit auto text replacement scripting engine |---------------------------------------------------------------------------------------------------------------------------------------------------- */
 +
</script>
  
===Pure CSS Driven Anime Template - Alternative===
 
----
 
  
Submitted by: deysmacro
+
<!-- multi picture presentation scripting engine -->
 +
<script src="http://deysmacro.uuuq.com/resources/bakabt/jquery.cycle.all.min.js" type="text/javascript"></script>
  
<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">
 
<style type="text/css">
/* --------------------------------------------------------------------------------------------------------------------------------------------| some note |-----
+
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| general info section |--| start |---
 +
* Thanks To        : kureshii, Jarudin
 +
* Thanks Also To : enginarc, DaggerLite, blubart
 
*
 
*
* Please take note. The indentation should look correctly using Firefox.
+
* Originally Customized By : deysmacro
 +
* Re-Customized By            : PUT YOUR NICK HERE
 
*
 
*
* 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 Version              : 3.2.2.1 js alternative - editing friendly edition
* When that happen, please use Firefox.
+
* Template Last Update On : July 26th, 2009 @ 17:28pm GMT+8
 
*
 
*
* Thank you for your understanding.
+
* Please leave the credit intact if you plan to use this template.
 +
* Your cooperation is highly appreciated.  
 
*
 
*
* --------------------------------------------------------------------------------------------------------------------------------------------| general info |-----
+
* 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.
 
*
 
*
* Main user link : http://www.bakabt.com/user/816453/deysmacro.html
+
* Example:
* Forum user link : http://forums.bakabt.com/index.php?action=profile;u=816453
+
* Assume "width" is the syntax...
 
*
 
*
* I welcome all of you people to use this template at your convenience.
+
* body {
* Do contact me via PM or email if you had anything to say.
+
* width: 100px;      <-- major browser support
 
*
 
*
* Email : deysmacro[at]gmail[dot]com
+
* *width: 110px;       <-- targeted for IE only
*
 
* 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.
 
* 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 |----- */
+
 
/*
+
 
* Nothing much to change or edit about the template appearance since it is 99% ready out of the box.
+
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| read first before carry on --| start |--
* 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:
* Hopefully you guys enjoy using this template. Good day people.
+
        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.
/* ------------------------------------------------------------------------------------------------------------| quick file summary control center |----- */
+
        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 |-- */
 
/* --| whole table positioning control |-- */
  
 
.button {
 
.button {
 
margin: 0px;
 
margin: 0px;
 
 
}
 
}
  
Line 1,095: Line 1,590:
 
margin-left: auto;
 
margin-left: auto;
 
margin-right: auto;
 
margin-right: auto;
margin-top: 5px;
+
margin-top: 6px;
 +
margin-bottom: 0px;
 
width: auto;
 
width: auto;
  
 
*border-collapse: collapse;
 
*border-collapse: collapse;
 
 
}
 
}
  
Line 1,108: Line 1,603:
 
z-index: 9;
 
z-index: 9;
 
cursor: help;
 
cursor: help;
 
 
}
 
}
  
Line 1,116: Line 1,610:
 
td.info_label span {
 
td.info_label span {
 
display: none;  
 
display: none;  
 
 
}
 
}
  
Line 1,140: Line 1,633:
 
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 */
 +
 
 +
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 1 of 3 |---------- */
 +
 
 +
 
 +
*bottom: 16px;
 +
*left: -80px;
 +
*text-align: left;
 +
}
  
 
/* --| end |---------------------------------------- */
 
/* --| end |---------------------------------------- */
Line 1,161: Line 1,660:
  
 
*font-size: 9px;
 
*font-size: 9px;
 
 
}
 
}
  
Line 1,180: Line 1,678:
  
 
*font-size: 9px;
 
*font-size: 9px;
 
 
}
 
}
  
Line 1,199: Line 1,696:
  
 
*font-size: 9px;
 
*font-size: 9px;
 
 
}
 
}
  
 
/* --| end |----------------------------------------------------- */
 
/* --| end |----------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
+
/* ------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
  
/* ---------------------------------------------------------------------------------------------------------------------------------| message bar styling control |---- */
 
  
.note1 {
+
/* --| div which holds divpic and divtab |-- */  
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 |---- */
 
  
/* ----------------------------------------------------------------------------------------------------------------------------------------------| container control |---- */
+
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 2 of 3 |---------- */
/* --| top half container control |-- */
 
  
.divtop {
+
        height: 460px; /* this height only need to be adjusted when necessary only */
margin: 0px;
 
padding: 0px;
 
height: 410px; /* no need to adjust the height unless needed */
 
  
}
+
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| 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 |--------------------------- */  
/* --| top right container control |-- */
+
/* --| div which holds the pics |-- */  
  
.divtr {
+
.divpic {
margin: -415px 0px 0px 540px;
+
        margin: 0px 0px 0px 20px;
padding: 10px;
+
        padding: 0px;
 
 
*margin: -410px 0px 0px 540px;
 
  
 +
        *margin: -25px -365px 0px 20px;
 
}
 
}
  
/* --| end |---------------------------------- */
+
/* --| end |--------------------------------------- */  
/* --| bottom half container control |-- */
+
/* --| div which holds the tab container |-- */  
  
.divbottom {
+
.divtab {
margin: 5px 0px 0px 0px;
+
        margin: -450px 0px 0px 360px;
padding: 0px;
+
        padding: 0px;
height: 340px; /* no need to adjust the height unless needed */
+
        width: 560px;
 +
}
  
*margin: 0px;
+
/* --| end |------------ */
*height: 335px; /* no need to adjust the height unless needed */
+
/* --| body styling |-- */  
  
}
+
body {
 +
  background: #131313;
  
/* --| end |---------------------------------- */
 
/* --| bottom left container control |-- */
 
  
.divbl {
+
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 3 of 3 |---------- */
margin: 0px 0px 0px 10px;
 
padding: 10px;
 
width: 520px;
 
  
}
+
  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 |------------------------------------ */
+
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 3 of 3 |---------- */
/* --| 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 */
 
  
 +
  font-family: "Trebuchet MS", sans-serif;
 +
  font-size: 11px;
 +
  text-align: left;
 +
  color: #854C9E;
 +
  height:auto;
 
}
 
}
  
/* --| end |------------------------------------ */
+
/* --| end |----------------- */  
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
 
  
/* ---------------------------------------------------------------------------------------------------------------------------------------------| list styling control |---- */
 
  
.div5 {
+
/* -----------------------------------------------------------------------------------------------------------------------------------------| tabbed container settings center |--| start |-- */
margin: -10px 0px -10px -25px;
+
/* --> 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: -20px 0px -20px -25px;
+
/* 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; }
  
li {
+
/* Interaction states ----------------------------------*/
text-align: justify;
+
.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; }
color: #854C9E;
+
.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; }
  
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
+
/* ----------------------------------------------------------------------------------------------------------------------------------------| tabbed container settings center |--| end |-- */
  
/* -------------------------------------------------------------------------------------------------------------------------------| whole content styling control |---- */
 
/* --| body control |-- */
 
  
body {
+
/* --| message bar positioning control |-- */
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;
 
  
 +
.overlap1 {
 +
  height: 32px;
 +
  z-index: 2;
 +
  position: relative;
 +
  margin: 0px 0px -16px 0px;
 
}
 
}
  
/* --| end |-------------------- */
+
/* --| end |---------------------- */
/* --| paragraph control |-- */
+
/* --| message bar styling |-- */  
  
p {
+
.note {
text-align: justify;
+
  font-family: "Trebuchet MS", sans-serif;
color: #854C9E;
+
  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 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;
 
}
 
}
  
/* --| end |-------------------- */
 
/* --| main table control |-- */
 
 
td {
 
vertical-align: left middle;
 
  
 +
.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;
 
}
 
}
  
.table1 {
+
/* --| end |-------------------------------------- */
background-color: transparent;
+
/* --| list styling |-- */
cellpadding: 2px;
 
cellspacing: 0px;
 
height: 100%;
 
width: 100%;
 
  
 +
li {
 +
  text-align: justify;
 +
  color: #854C9E;
 
}
 
}
  
.table2 {
+
.divlist {
background-color: transparent;
+
  margin: -10px 0px -10px -25px;
cellpadding: 0px;
 
cellspacing: 0px;
 
height: 100%;
 
width: 100%;
 
  
 +
  *margin: -20px 0px -20px -25px;
 
}
 
}
  
/* --| end |--------------------------- */
+
/* --| end |------------ */  
/* --| headings styling control |-- */
+
/* --| http link styling |-- */  
 +
 
 +
a:hover {
 +
  color: #854C9E;
 +
}
  
.inner {
+
/* --| end |------------------- */
background-color:#EEEEFF;
+
/* --| paragraph styling |-- */
padding: 10px;
 
border: 1px solid #CCCFC8;
 
font-family: "Comic Sans MS", "Trebuchet MS", "Times New Roman";
 
font-size: 22px;
 
font-weight: bold;
 
color: #854C9E;
 
  
 +
p {
 +
  text-align: justify;
 +
  color: #854C9E;
 +
  font-weight: bold;
 
}
 
}
  
.outer2 {
+
/* --| end |------------- */
z-index: 1;
+
/* --| table styling |-- */
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;
 
  
 +
td {
 +
  vertical-align: left middle;
 
}
 
}
  
.outer3 {
+
/* --| end |------------ */
background-color: #EEDDFF;
+
/* --| label styling |-- */
margin: 0px 0px 10px 0px;
 
padding: 6px;
 
width: 815px;
 
border: 1px solid #CCCFC8;
 
text-align: center;
 
margin-left: auto;
 
margin-right: auto;
 
  
 +
.label {
 +
  color: #854C9E;
 +
  width: 17%;
 +
  text-align: right;
 
}
 
}
  
/* --| end |------------------------- */
+
.label:hover {
/* --| horizontal line control |-- */
+
  color: blue;
 +
}
  
hr {
+
/* --| end |------------ */
width: 93%;
+
/* --| text styling |-- */
  
 +
.text {
 +
  color: #854C9E;
 +
  width: 74%;
 
}
 
}
  
.hr1 {
 
margin: 0px;
 
 
*text-align: center;
 
  
 +
.text:hover {
 +
  color: red;
 
}
 
}
  
/* --| end |--------------------------- */
+
/* --| end |--------------------------- */  
/* --| picture content control |-- */
+
/* --| headings styling control |-- */
 
 
.pics {
 
height: auto;
 
width: auto;
 
padding: 0px;
 
margin: 0px;
 
overflow: hidden;
 
  
 +
.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;
 
}
 
}
  
.pics img {  
+
.outer2 {
height: auto;  
+
  z-index: 1;
width: auto;  
+
  background-color: #EEDDFF;
padding: 10px;  
+
  margin: 0px;
border: 1px solid #ccc;  
+
  padding: 6px;  
background-color: #fff;  
+
  width: 815px;  
top: 0px;  
+
  position: relative;  
left: 0px;  
+
  border: 1px solid #CCCFC8;  
 
+
  text-align: center;
 +
  margin-left: auto;
 +
  margin-right: auto;
 
}
 
}
  
/* --| end |---------------------- */
+
.outer3 {
/* --| label styling control |-- */
+
  background-color: #EEDDFF;  
 
+
  margin: 0px 0px 10px 0px;
.label {
+
  padding: 6px;
color: #854C9E;
+
  width: 815px;  
width: 26%;  
+
  border: 1px solid #CCCFC8;
text-align: right;
+
  text-align: center;
 
+
  margin-left: auto;
 +
  margin-right: auto;
 
}
 
}
  
.label:hover {
+
/* --| end |------------------------- */
color: blue;
+
/* --| horizontal line control |-- */
  
 +
hr {
 +
  width: 93%;
 
}
 
}
  
/* --| end |--------------------- */
+
.hr1 {
/* --| text styling control |-- */
+
  margin: 0px;
 
 
.text {
 
color: #854C9E;
 
width: 74%;  
 
  
 +
  *text-align: center;
 
}
 
}
  
.text:hover {
+
/* --| end |--------------------------------------------- */
color: red;
+
/* --| pics holder styling |--------------------------- */
  
 +
.pics {
 +
  height: auto;
 +
  width: auto;
 +
  padding: 0px;
 +
  margin: 0px;
 +
  overflow: hidden
 
}
 
}
  
/* --| end |--------------------------- */
+
.pics img {
/* --| label box styling control |-- */
+
  height: auto;
 +
  width: auto;
 +
  padding: 10px;
 +
  border: 1px solid #ccc;
 +
  background-color: #fff;
 +
  top: 0px;
 +
  left: 0px;
 +
}
 +
 
 +
/* --| end |--------------------------------------------------- */
 +
/* --| background box styling |--------------------------- */
  
 +
/*
 
.rounded1 {
 
.rounded1 {
background-color:#EEDDFF;  
+
  background-color: #EEDDFF;  
padding: 10px;
+
  padding: 10px;
width: auto;
+
  width: auto;
height: auto;
+
  height: auto;
border: 1px solid #CCCFC8;  
+
  border: 1px solid #CCCFC8;  
 
 
 
}
 
}
 
+
*/
/* --| end |--------------------------- */
 
/* --| text box styling control |-- */
 
  
 
.rounded2 {
 
.rounded2 {
background-color:#EEEEFF;  
+
  background-color: #EEEEFF;  
padding: 10px;
+
  padding: 10px;
width: auto;
+
  width: auto;
height: auto;
+
  height: auto;
border: 1px solid #CCCFC8;  
+
  border: 1px solid #CCCFC8;  
 
 
 
}
 
}
 
/* --| end |-------------------------------- */
 
/* --| synopsis box styling control |-- */
 
  
 
.rounded3 {
 
.rounded3 {
background-color:#EEEEFF;  
+
  background-color: #EEEEFF;  
padding: 5px 10px 5px 10px;
+
  padding: 5px 10px 5px 10px;
width: auto;
+
  width: auto;
height: auto;
+
  height: auto;
border: 1px solid #CCCFC8;  
+
  border: 1px solid #CCCFC8;  
  
 +
  *padding: 0px 10px 0px 10px;
 
}
 
}
 +
/* --| end |--------------------------------------------- */
  
/* --| end |-------------------------------- */
 
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
 
 
</style>
 
</style>
  
</head>
+
<!-- multi picture presentation timing control -->
<body>
+
<script type="text/javascript">  
 +
$('#slideshow').cycle({
 +
    fx:    'all',
 +
    timeout: 5000,
 +
    speed:  1000
 +
});
 +
</script>  
  
<div class="outer2">
+
<!-- message bar timing control 1 of 3 -->
 
+
<script type="text/javascript">
 
+
  $(document).ready(function(){
<!-- the title heading -->
+
  setTimeout(function(){
 +
  $("#note1").fadeOut("slow", function () {
 +
  $("#note1").remove();
 +
    });
 +
 
 +
}, 5000);
 +
});
 +
</script>
  
<div class="inner">Panda Kopanda | Panda! Go Panda! [DivX][MP3]</div>
+
<!-- message bar timing control 2 of 3 -->
 +
<script type="text/javascript">
 +
  $(document).ready(function(){
 +
  $('#note2').hide();
 +
  setTimeout(function(){
 +
  $("#note2").fadeIn("slow", function () {
 +
  $("#note2").show();
 +
      });
  
<div class="button">
+
}, 4990);
<table class="file_info">
+
});
 +
</script>
  
 +
<!-- message bar timing control 3 of 3 -->
 +
<script type="text/javascript">
 +
  $(document).ready(function(){
 +
  setTimeout(function(){
 +
  $("#note3").fadeOut("slow", function () {
 +
  $("#note3").remove();
 +
    });
  
<!-- tooltip and quick file summary area -->
+
}, 10000);
 +
});
 +
</script>
  
<tr>
+
<!-- tab container fx control -->
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the title source.</span><div>SRCS</div></td>
+
<script type="text/javascript">
<td class="info_a"><div>&nbsp;</div></td>
+
  $(function() {
<td class="info_b"><div>DVD</div></td>
+
  $("#tabs").tabs({ fx: { opacity: 'toggle' } });
<td />
+
      var fx = $('.selector').tabs('slow', 'fx');
<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>
+
</script>
<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>
+
</head>
 
+
<body>
<div class="hr1"><hr></div>
+
<!-- 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="divtop">
 
  
<div class="divtl">
+
<div class="overlap1">
<fieldset>
+
<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>
  
<legend>| Series Information |</legend>
+
<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>&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>
  
<!-- add or remove <br> accordingly when you editing the info below; it is some sort of box height matching with the content -->
+
<div class="divwhole">
<!-- edit the info accordingly -->
 
  
<table class="table1">
+
<div class="divpic">
<tr>
+
<table style="background-color: transparent;" cellpadding="0" cellspacing="0" height="100%">
<td class="label"><div class="rounded1">Main Title:</div> </td>
+
<tr><td>
<td class="text"><div class="rounded2">Panda Kopanda</div></td>
+
<div id="slideshow" class="pics"></div>
</tr>
+
<script language="javascript" purpose="Print related pics">
<tr>
+
for (i in related.pics_list) { document.getElementById("slideshow").innerHTML += '<img src="'+related.pics_list[i].href +'" />'; }
<td class="label"><div class="rounded1">Official Title:</div></td>
+
</script>
<td class="text"><div class="rounded2">Panda! Go Panda!</div></td>
+
</td></tr>
</tr>
+
</table>
<tr>
+
</div>
<td class="label"><div class="rounded1">Japanese Title:</div></td>
+
 
<td class="text"><div class="rounded2">パンダコパンダ</div></td>
+
<div class="divtab">
</tr>
+
<div id="tabs">
<tr>
+
<ul>
<td class="label"><div class="rounded1">Year:</div></td>
+
<li><a href="#tabs-1">Series Information</a></li>
<td class="text"><div class="rounded2">1972 & 1973</div></td>
+
<li><a href="#tabs-2">File Information - Related Anime - Related OST</a></li>
</tr>
+
<li><a href="#tabs-3">Synopsis</a></li>
<tr>
+
</ul>
<td class="label"><div class="rounded1">Episodes:</div></td>
+
 
<td class="text"><div class="rounded2">2 combined into 1</div></td>
+
<div id="tabs-1">
</tr>
+
<table style="background-color: transparent;" cellpadding="3" cellspacing="0" height="100%" width="100%">
<tr>
+
<tr>
<td class="label"><div class="rounded1">Categories:<br><br></div></td>
+
<td class="label"><div class="rounded1">Main Title:</div></td>
<td class="text"><div class="rounded2">Adventure, Anthropomorphism, Comedy, Contemporary Fantasy, Fantasy</div></td>
+
<td class="text"><div class="rounded2"><script>dcw(useredit.maintitle);</script></div></td>
</tr>
+
</tr>
<tr>
+
<tr>
<td class="label"><div class="rounded1">Director:</div></td>
+
<td class="label"><div class="rounded1">Official Title:</div></td>
<td class="text"><div class="rounded2">Isao Takahata</div></td>
+
<td class="text"><div class="rounded2"><script>dcw(useredit.officialtitle);</script></div></td>
</tr>
+
</tr>
<tr>
+
<tr>
<td class="label"><div class="rounded1">Production:</div></td>
+
<td class="label"><div class="rounded1">Japanese Title:</div></td>
<td class="text"><div class="rounded2">Shunzo Kato</div></td>
+
<td class="text"><div class="rounded2"><script>dcw(useredit.japanesetitle);</script></div></td>
</tr>
+
</tr>
<tr>
+
<tr>
<td class="label"><div class="rounded1">References:</div></td>
+
<td class="label"><div class="rounded1">Year:</div></td>
<td class="text">
+
<td class="text"><div class="rounded2"><script>dcw(useredit.year);</script></div></td>
<div class="rounded2">
+
</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>
  
<!-- edit the info accordingly -->
+
<div id="tabs-2">
 
+
<table style="background-color: transparent;" cellpadding="3" cellspacing="0" height="100%" width="100%">
<a href="http://anidb.net/perl-bin/animedb.pl?show=anime&aid=530" target="_blank">AniDB</a> |
+
<tr>
<a href="http://www.animenfo.com/animetitle,2379,stbesx,panda_kopanda.html" target="_blank">AnimeNFO</a> |
+
<td class="label"><div class="rounded1"><b>HINT</b>:</div></td>
<a href="http://www.animenewsnetwork.com/encyclopedia/anime.php?id=352" target="_blank">ANN</a> |
+
<td class="text"><br>Hover on the quick file summary for more information.<br><br></td>
<a href="http://www.nausicaa.net/miyazaki/panda/" target="_blank">Official Page</a>
+
</tr>
</div>
+
<tr>
</td>
+
<td class="label"><div class="rounded1">FanSub by:</div></td>
</tr>
+
<td class="text"><div class="rounded2"><script>dcw(useredit.fansub);</script></div></td>
</table>
+
</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>
  
</fieldset>
+
<td class="text">
</div>
+
<div class="rounded2">
+
<ul>
<div class="divtr">
+
<div class="divlist">
<fieldset>
+
<script language="javascript" purpose="Print related anime">
 
+
for (i in related.anime_list)
<legend>| Main Picture |</legend>
+
{ document.write('<li><a href="'+related.anime_list[i].href +'" target="_blank">'+ related.anime_list[i].title + '</a></li>'); }
 
+
</script>
<table class="table2">
+
</div>
<tr>
+
</ul>
<td>
+
</div>
<div class="pics">
+
</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>
  
<!-- picture height should be 340px max; you may use your preferred height though -->
+
</div>
  
<img src="http://img21.imageshack.us/img21/2401/pandakopanda1.png" />
+
<div class="hr1"><hr></div>
</div>
 
</td>
 
</tr>
 
</table>
 
 
 
</fieldset>
 
</div>
 
  
 +
<div class="outer3">
 +
  <div class="inner">Screenshots</div>
 
</div>
 
</div>
  
<div class="divbottom">
+
</body>
  
<div class="divbl">
+
<!-- reference link text replacement engine -->
<fieldset>
+
<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>
  
<legend>| File Information |</legend>
+
<!-- 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>
  
<!-- add or remove <br> accordingly when you editing the info below; it is some sort of box height matching with the content -->
+
<!-- imgs block could be added or removed at will; recommended at least 4 blocks; use png format only -->
<!-- edit the info accordingly -->
+
[screenshot]
 
+
  [img]http://img24.imageshack.us/img24/9528/snapshot20090509131128j.png[/img]
<table class="table1">
+
  [img]http://img17.imageshack.us/img17/7907/snapshot20090509131221.png[/img]
<tr>
+
  [img]http://img4.imageshack.us/img4/3651/snapshot20090509131238.png[/img]
<td class="label"><div class="rounded1"><b>HINT</b>:</div></td>
+
  [img]http://img14.imageshack.us/img14/2361/snapshot20090509131248.png[/img]
<td class="text"><div class="rounded2">Hover on the quick file summary for more information.</div></td>
+
  [img]http://img22.imageshack.us/img22/197/snapshot20090509131326.png[/img]
</tr>
+
[/screenshot]
<tr>
+
</pre>
<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">
+
Sample template image: [http://wiki.bakabt.me/index.php/File:JS_Alternative_Anime_Template.png Click here for full preview]<br />
<li>
+
Back to [[Offer_Templates#Templates_preview|top]].
  
 +
===Pure CSS Driven Anime Template - Alternative===
 +
----
  
<!-- edit the info accordingly -->
+
Submitted by: deysmacro
  
<a href="http://www.bakabt.com/torrent/10676/Panda_Kopanda_Panda_Go_Panda_DVD_DivX_MP3.html" target="_blank">
+
<pre>
Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
</a>
+
<html>
</li>
+
<head>
</div>
 
  
</ul>
+
<style type="text/css">
</div>
+
/* --------------------------------------------------------------------------------------------------------------------------------------------| some note |-----
</td>
+
*
</tr>
+
* Please take note. The indentation should look correctly using Firefox.
<tr>
+
*
<td class="label"><div class="rounded1">Related OST:<br><br></div></td>
+
* 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.
 
+
*
<!-- edit the info accordingly -->
+
* Thank you for your understanding.
 
+
*
<td class="text"><div class="rounded2"><div class="note1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i>None available</i>.</div></div></td>
+
* --------------------------------------------------------------------------------------------------------------------------------------------| general info |-----
</tr>
+
*
</table>
+
* Main user link : http://bakabt.me/user/816453/deysmacro.html
 
+
* Forum user link : http://forums.bakabt.me/index.php?action=profile;u=816453
</fieldset>
+
*
</div>
+
* 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.
<div class="divbr">
+
*
<fieldset>
+
* Email : deysmacro[at]gmail[dot]com
 
+
*
<legend>| Synopsis |</legend>
+
* I also can help you guys with the template.
 
+
* I will help whenever I can.
<table class="table2">
+
*
<tr>
+
* Thanks To : kureshii, Jarudin, xchiamiov
<td>
+
* Thanks Also To : DaggerLite, enginarc, mrdkreka, blubart
<div class="rounded3">
+
*
 
+
* Originally Customized By : deysmacro
 
+
* Re-Customized By : YOUR NICK HERE
<!-- the <br> here is for break; not the same purpose as of above usage -->
+
*
<!-- edit the info accordingly -->
+
* Template Version : 3.3.3.1 pure css driven - alternative
 
+
* Template Last Update On : July 20th, 2009 @ 23:28pm GMT+8
<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.
+
* Please leave the credit intact if you plan to use this template.
<br><br>
+
* Your cooperation is highly appreciated. Thank you.
The story is about a little girl, Mimiko, who was left alone while her Grandma was away.
+
*
<br><br>
+
* --------------------------------------------------------------------------------------------------------------------------------------------------------| SN |-----
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.
+
* SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2009 | 07 | 19 | 0720 | d-ait | v3331 | 13
<br><br>
+
* ---------------------------------------------------------------------------------------------------------------------------------| Info you should know |-----
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>
+
* 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;
  
</div>
+
}
</td>
+
 
</tr>
+
/* --| end |---------------------------- */
</table>
+
/* --| whole table body control |-- */
  
</fieldset>
+
table.file_info {
</div>
+
border-spacing: 0px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
margin-top: 5px;
 +
width: auto;
  
</div>
+
*border-collapse: collapse;
  
<div class="hr1"><hr></div>
+
}
  
<div class="outer3">
+
/* --| end |----------------------- */
<div class="inner">Screenshots</div>
+
/* --| tootip hover control |-- */
</div>
 
  
 +
td.info_label:hover {
 +
z-index: 9;
 +
cursor: help;
  
</body>
+
}
</html>
 
  
 +
/* --| end |------------------------- */
 +
/* --| tootip misc control |------ */
  
<!-- change your demo pic here; use png format only; box may be added or removed accordingly -->
+
td.info_label span {
 +
display: none;  
  
[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>
 
  
Sample template image: [http://img24.imageshack.us/img24/7817/sandboxbakabtanimebitto.png Click here for full preview]
+
/* --| end |------------------------ */
 +
/* --| tootip styling control |-- */
  
===JS Alternative Anime Template - Editing Friendly Edition (original)===
+
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;
  
Submitted by: deysmacro
+
*width: 350px; /* no need to adjust the tooltip width unless needed */
 +
*bottom: 16px;
 +
*left: -80px;
 +
*text-align: left;
  
<pre>
+
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
 
<head>
 
  
 +
/* --| end |---------------------------------------- */
 +
/* --| individual left side content control |-- */
  
<script language="javascript" purpose="User definitions">
+
td.info_label {
/* --| start |--| user-edit auto text replacement scripting engine |---------------------------------------------------------------> nothing to edit here - go to edit info center instead <--| note |-- */
+
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;
  
function dcw(input)
+
*font-size: 9px;
  { 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)
+
/* --| end |------------------------------------------------- */
  { var tmp_list;
+
/* --| individual right side - left content control |-- */
          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();
+
td.info_a {
 
+
background-color: #EEEEFF;
        tmp_item.title = title;
+
border: #854C9E 2px solid;
        tmp_item.href = href;
+
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;
  
        target_list.push(tmp_item);
+
*font-size: 9px;
  }
 
  
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit info center |--| start |-- */
+
}
/* --> most user only need to edit the info here <--------------------------------------------------------------------------------------------------------------------------------------------------------------| note |-- */
 
  
 +
/* --| end |--------------------------------------------------- */
 +
/* --| individual right side - right content control |-- */
  
useredit.heading="Panda Kopanda | Panda! Go Panda! [DivX][MP3]";
+
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;
  
 +
}
  
useredit.maintitle="Panda Kopanda";
+
/* --| end |----------------------------------------------------- */
useredit.officialtitle="Panda! Go Panda";
+
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
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";
 
  
 +
/* ---------------------------------------------------------------------------------------------------------------------------------| message bar styling control |---- */
  
/* --> if any of the reference link is unavailable, just replace it with # <----------------------------------------------------------------------------------------------------------------------------------| note |-- */
+
.note1 {
useredit.anidb = "http://anidb.net/perl-bin/animedb.pl?show=anime&aid=530";
+
font-family: "Trebuchet MS", sans-serif;
useredit.animenfo = "http://www.animenfo.com/animetitle,2379,stbesx,panda_kopanda.html";
+
font-size: 11px;
useredit.ann = "http://www.animenewsnetwork.com/encyclopedia/anime.php?id=352";
+
line-height: 16px;
useredit.officialpage = "http://www.nausicaa.net/miyazaki/panda/";
+
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;
  
 +
}
  
useredit.synopsis=
+
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
"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.";
 
  
 +
/* ----------------------------------------------------------------------------------------------------------------------------------------------| container control |---- */
 +
/* --| top half container control |-- */
  
useredit.fansub="<b>No Information</b>";
+
.divtop {
useredit.note="Please continue seeding as much as you can.<br>Thank you guys.";
+
margin: 0px;
 +
padding: 0px;
 +
height: 410px; /* no need to adjust the height unless needed */
  
 +
}
  
useredit.srcs_left="";
+
/* --| end |----------------------------- */
useredit.srcs_right="DVD";
+
/* --| top left container control |-- */
  
 +
.divtl {
 +
margin: 0px 0px 0px 10px;
 +
padding: 10px;
 +
width: 520px;
  
useredit.vids_left="DIVX";
+
}
useredit.vids_right="704X544";
 
  
 +
/* --| end |------------------------------- */
 +
/* --| top right container control |-- */
  
useredit.auds_left="JP";
+
.divtr {
useredit.auds_right="MP3  24KHZ";
+
margin: -415px 0px 0px 540px;
 +
padding: 10px;
  
 +
*margin: -410px 0px 0px 540px;
  
useredit.subs_left="EN";
+
}
useredit.subs_right="HARD";
 
  
 +
/* --| end |---------------------------------- */
 +
/* --| bottom half container control |-- */
  
useredit.tooltip_label_vids="This title has been encoded with <b>DivX 6 - 704 x 544 29.97fps</b>.";
+
.divbottom {
useredit.tooltip_label_auds="This title utilized <b>MPEG Audio Layer 3 24000Hz stereo 48Kbps</b>.";
+
margin: 5px 0px 0px 0px;
useredit.tooltip_label_subs="This title has been <b>hard-subbed</b>.";
+
padding: 0px;
 +
height: 340px; /* no need to adjust the height unless needed */
  
 +
*margin: 0px;
 +
*height: 335px; /* no need to adjust the height unless needed */
  
/* --> 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://www.bakabt.com/torrent/10676/Panda_Kopanda_Panda_Go_Panda_DVD_DivX_MP3.html");
+
 
add_related("anime", "Dummy link", "#");
+
/* --| end |---------------------------------- */
 +
/* --| bottom left container control |-- */
  
 +
.divbl {
 +
margin: 0px 0px 0px 10px;
 +
padding: 10px;
 +
width: 520px;
  
/* --> 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", "#");
 
  
 +
/* --| end |------------------------------------ */
 +
/* --| bottom right container control |-- */
  
/* --> 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 |-- */
+
.divbr {
add_related("pics", "#", "http://img39.imageshack.us/img39/280/pandakopanda.jpg");
+
margin: -330px 0px 0px 540px; /* no need to adjust the height unless needed */
add_related("pics", "#", "http://img39.imageshack.us/img39/280/pandakopanda.jpg");
+
padding: 10px;
add_related("pics", "#", "http://img39.imageshack.us/img39/280/pandakopanda.jpg");
 
  
 +
*margin: -320px 0px 0px 540px; /* no need to adjust the height unless needed */
  
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit info center |--| end |-- */
+
}
/* --| end |--| user-edit auto text replacement scripting engine |---------------------------------------------------------------------------------------------------------------------------------------------------- */
 
</script>
 
  
 +
/* --| end |------------------------------------ */
 +
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
  
<!-- multi picture presentation scripting engine -->
+
/* ---------------------------------------------------------------------------------------------------------------------------------------------| list styling control |---- */
<script src="http://deysmacro.uuuq.com/resources/bakabt/jquery.cycle.all.min.js" type="text/javascript"></script>
 
  
 +
.div5 {
 +
margin: -10px 0px -10px -25px;
  
<style type="text/css">
+
*margin: -20px 0px -20px -25px;
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| 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 |--
+
li {
   
+
text-align: justify;
        Note:
+
color: #854C9E;
        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 |-- */
+
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
  
 +
/* -------------------------------------------------------------------------------------------------------------------------------| whole content styling control |---- */
 +
/* --| body control |-- */
  
/* ---------------------------------------------------------------------------------------------------------| quick file summary control center |----- */
+
body {
/* --| whole table positioning control |-- */
+
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;
  
.button {
 
margin: 0px;
 
 
}
 
}
  
/* --| end |---------------------------- */
+
/* --| end |-------------------- */
/* --| whole table body control |-- */
+
/* --| paragraph control |-- */
  
table.file_info {
+
p {
border-spacing: 0px;
+
text-align: justify;
margin-left: auto;
+
color: #854C9E;
margin-right: auto;
+
font-weight: bold;  
margin-top: 6px;
 
margin-bottom: 0px;
 
width: auto;
 
  
*border-collapse: collapse;
 
 
}
 
}
  
/* --| end |----------------------- */
+
/* --| end |-------------------- */
/* --| tootip hover control |-- */
+
/* --| main table control |-- */
 +
 
 +
td {
 +
vertical-align: left middle;
  
td.info_label:hover {
 
z-index: 9;
 
cursor: help;
 
 
}
 
}
  
/* --| end |------------------------- */
+
.table1 {
/* --| tootip misc control |------ */
+
background-color: transparent;
 +
cellpadding: 2px;
 +
cellspacing: 0px;
 +
height: 100%;
 +
width: 100%;
  
td.info_label span {
 
display: none;
 
 
}
 
}
  
/* --| end |------------------------ */
+
.table2 {
/* --| tootip styling control |-- */
+
background-color: transparent;
 +
cellpadding: 0px;
 +
cellspacing: 0px;
 +
height: 100%;
 +
width: 100%;
 +
 
 +
}
  
td.info_label:hover span {
+
/* --| end |--------------------------- */
position: absolute;
+
/* --| headings styling control |-- */
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;
 
  
 +
.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;
  
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| 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 |---------------------------------------- */
+
.outer2 {
/* --| individual left side content control |-- */
+
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;
 +
 
 +
}
  
td.info_label {
+
.outer3 {
width: 20px;
+
background-color: #EEDDFF;
font-family: "Lucida Console", sans-serif;
+
margin: 0px 0px 10px 0px;
font-size: 7.7px;
+
padding: 6px;  
 +
width: 815px;  
 +
border: 1px solid #CCCFC8;  
 
text-align: center;
 
text-align: center;
color: #D0D0F0;
+
margin-left: auto;
background-color: #854C9E;
+
margin-right: auto;
border: #854C9E 2px solid;
 
position: relative;
 
  
*font-size: 9px;
 
 
}
 
}
  
/* --| end |------------------------------------------------- */
+
/* --| end |------------------------- */
/* --| individual right side - left content control |-- */
+
/* --| horizontal line control |-- */
  
td.info_a {
+
hr {  
background-color: #EEEEFF;
+
width: 93%;
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 |--------------------------------------------------- */
+
.hr1 {
/* --| individual right side - right content control |-- */
+
margin: 0px;
  
td.info_b {
+
*text-align: center;
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 |--------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
+
/* --| picture content control |-- */
  
 +
.pics {
 +
height: auto;
 +
width: auto;
 +
padding: 0px;
 +
margin: 0px;
 +
overflow: hidden;
  
/* --| div which holds divpic and divtab |-- */
+
}
  
.divwhole {
+
.pics img {  
        margin: 23px 0px 20px 0px;
+
height: auto;
        padding: 0px;
+
width: auto;
 +
padding: 10px;
 +
border: 1px solid #ccc;
 +
background-color: #fff;
 +
top: 0px;  
 +
left: 0px;  
  
 +
}
  
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 2 of 3 |---------- */
+
/* --| end |---------------------- */
 +
/* --| label styling control |-- */
  
        height: 460px; /* this height only need to be adjusted when necessary only */
+
.label {
 +
color: #854C9E;
 +
width: 26%;
 +
text-align: right;
  
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 2 of 3 |---------- */
+
}
  
 +
.label:hover {
 +
color: blue;
  
        *margin: 35px 0px -5px 0px;
 
 
}
 
}
  
/* --| end |--------------------------- */  
+
/* --| end |--------------------- */
/* --| div which holds the pics |-- */  
+
/* --| text styling control |-- */
  
.divpic {
+
.text {
        margin: 0px 0px 0px 20px;
+
color: #854C9E;
        padding: 0px;
+
width: 74%;  
  
        *margin: -25px -365px 0px 20px;
 
 
}
 
}
  
/* --| end |--------------------------------------- */
+
.text:hover {
/* --| div which holds the tab container |-- */
+
color: red;
  
.divtab {
 
        margin: -450px 0px 0px 360px;
 
        padding: 0px;
 
        width: 560px;
 
 
}
 
}
  
/* --| end |------------ */  
+
/* --| end |--------------------------- */
/* --| body styling |-- */  
+
/* --| label box styling control |-- */
  
body {
+
.rounded1 {
  background: #131313;
+
background-color:#EEDDFF;  
 +
padding: 10px;
 +
width: auto;
 +
height: auto;
 +
border: 1px solid #CCCFC8; 
  
 +
}
  
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 3 of 3 |---------- */
+
/* --| end |--------------------------- */
 +
/* --| text box styling control |-- */
  
  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 */
+
.rounded2 {
 +
background-color:#EEEEFF;
 +
padding: 10px;
 +
width: auto;
 +
height: auto;
 +
border: 1px solid #CCCFC8;  
  
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 3 of 3 |---------- */
+
}
  
 +
/* --| end |-------------------------------- */
 +
/* --| synopsis box styling control |-- */
 +
 +
.rounded3 {
 +
background-color:#EEEEFF;
 +
padding: 5px 10px 5px 10px;
 +
width: auto;
 +
height: auto;
 +
border: 1px solid #CCCFC8; 
  
  font-family: "Trebuchet MS", sans-serif;
 
  font-size: 11px;
 
  text-align: left;
 
  color: #854C9E;
 
  height:auto;
 
 
}
 
}
  
/* --| end |----------------- */  
+
/* --| end |-------------------------------- */
 +
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
 +
</style>
 +
 
 +
</head>
 +
<body>
  
 +
<div class="outer2">
  
/* -----------------------------------------------------------------------------------------------------------------------------------------| 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 ----------------------------------*/
+
<!-- the title heading -->
.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 ----------------------------------*/
+
<div class="inner">Panda Kopanda | Panda! Go Panda! [DivX][MP3]</div>
.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 ----------------------------------*/
+
<div class="button">
.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; }
+
<table class="file_info">
.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... */
+
<!-- tooltip and quick file summary area -->
.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 |-- */
+
<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>
/* --| message bar positioning control |-- */
+
<td class="info_b"><div>DVD</div></td>
 
+
<td />
.overlap1 {
+
<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>
  height: 32px;
+
<td class="info_a"><div>DIVX</div></td>
  z-index: 2;
+
<td class="info_b"><div>704X544</div></td>
  position: relative;
+
<td />
  margin: 0px 0px -16px 0px;
+
<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>
 +
 
 +
<div class="hr1"><hr></div>
 +
 
 +
<div class="divtop">
  
/* --| end |---------------------- */
+
<div class="divtl">
/* --| message bar styling |-- */
+
<fieldset>
  
.note {
+
<legend>| Series Information |</legend>
  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;
 
}
 
  
 +
<!-- 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 -->
  
.note2 {
+
<table class="table1">
  font-family: "Trebuchet MS", sans-serif;
+
<tr>
  font-size: 11px;
+
<td class="label"><div class="rounded1">Main Title:</div> </td>
  line-height: 16px;
+
<td class="text"><div class="rounded2">Panda Kopanda</div></td>
  background-color: #FFFFCC;
+
</tr>
  background-image:url('http://img194.imageshack.us/img194/1986/helpm.png');
+
<tr>
  background-position: 3px 50%;
+
<td class="label"><div class="rounded1">Official Title:</div></td>
  background-repeat: no-repeat;
+
<td class="text"><div class="rounded2">Panda! Go Panda!</div></td>
  color: #777777;
+
</tr>
  height: 16px;
+
<tr>
  width: auto;
+
<td class="label"><div class="rounded1">Japanese Title:</div></td>
  border: 1px solid #999999;
+
<td class="text"><div class="rounded2">パンダコパンダ</div></td>
  margin: 5px 0px 0px 0px;
+
</tr>
  padding: 5px;
+
<tr>
  display: block;
+
<td class="label"><div class="rounded1">Year:</div></td>
}
+
<td class="text"><div class="rounded2">1972 & 1973</div></td>
 
+
</tr>
/* --| end |-------------------------------------- */  
+
<tr>
/* --| list styling |-- */  
+
<td class="label"><div class="rounded1">Episodes:</div></td>
 
+
<td class="text"><div class="rounded2">2 combined into 1</div></td>
li {
+
</tr>
  text-align: justify;
+
<tr>
  color: #854C9E;
+
<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">
  
.divlist {
 
  margin: -10px 0px -10px -25px;
 
  
  *margin: -20px 0px -20px -25px;
+
<!-- edit the info accordingly -->
}
 
  
/* --| end |------------ */  
+
<a href="http://anidb.net/perl-bin/animedb.pl?show=anime&aid=530" target="_blank">AniDB</a> |  
/* --| http link styling |-- */  
+
<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>
  
a:hover {
+
</fieldset>
  color: #854C9E;
+
</div>
}
+
 +
<div class="divtr">
 +
<fieldset>
  
/* --| end |------------------- */
+
<legend>| Main Picture |</legend>
/* --| paragraph styling |-- */  
 
  
p {
+
<table class="table2">
  text-align: justify;
+
<tr>
  color: #854C9E;
+
<td>
  font-weight: bold;
+
<div class="pics">
}
 
  
/* --| end |------------- */
 
/* --| table styling |-- */
 
  
td {
+
<!-- picture height should be 340px max; you may use your preferred height though -->
  vertical-align: left middle;
 
}
 
  
/* --| end |------------ */  
+
<img src="http://img21.imageshack.us/img21/2401/pandakopanda1.png"  />
/* --| label styling |-- */  
+
</div>
 +
</td>
 +
</tr>
 +
</table>
  
.label {
+
</fieldset>
  color: #854C9E;
+
</div>
  width: 17%;
 
  text-align: right;
 
}
 
  
.label:hover {
+
</div>
  color: blue;
 
}
 
  
/* --| end |------------ */
+
<div class="divbottom">
/* --| text styling |-- */
 
  
.text {
+
<div class="divbl">
  color: #854C9E;
+
<fieldset>
  width: 74%;
 
}
 
  
 +
<legend>| File Information |</legend>
  
.text:hover {
 
  color: red;
 
}
 
  
/* --| end |--------------------------- */
+
<!-- add or remove <br> accordingly when you editing the info below; it is some sort of box height matching with the content -->
/* --| headings styling control |-- */
+
<!-- edit the info accordingly -->
  
.inner {
+
<table class="table1">
  background-color: #EEEEFF;
+
<tr>
  padding: 10px;
+
<td class="label"><div class="rounded1"><b>HINT</b>:</div></td>
  border: 1px solid #CCCFC8;
+
<td class="text"><div class="rounded2">Hover on the quick file summary for more information.</div></td>
  font-family: "Comic Sans MS", "Trebuchet MS", "Times New Roman";
+
</tr>
  font-size: 22px;
+
<tr>
  font-weight: bold;
+
<td class="label"><div class="rounded1">FanSub by:<br><br></div></td>
  color: #854C9E;
+
<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>
.outer2 {
+
<td class="label"><div class="rounded1">Approx. Duration:</div></td>
  z-index: 1;
+
<td class="text"><div class="rounded2">~ 1 hour 11 minutes per episode</div></td>
  background-color: #EEDDFF;
+
</tr>
  margin: 0px;
+
<tr>
  padding: 6px;
+
<td class="label"><div class="rounded1">Note:<br><br></div></td>
  width: 815px;
+
<td class="text"><div class="rounded2">Please continue seeding as much as you can.<br>Thank you guys.</div></td>
  position: relative;
+
</tr>
  border: 1px solid #CCCFC8;
+
<tr>
  text-align: center;
+
<td class="label"><div class="rounded1">Related Anime:<br></div></td>
  margin-left: auto;
+
<td class="text">
  margin-right: auto;
+
<div class="rounded2">
}
+
<ul>
  
.outer3 {
+
<div class="div5">
  background-color: #EEDDFF;
+
<li>
  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 {
+
<!-- edit the info accordingly -->
  width: 93%;
+
 
}
+
<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>
  
.hr1 {
+
</ul>
  margin: 0px;
+
</div>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td class="label"><div class="rounded1">Related OST:<br><br></div></td>
  
  *text-align: center;
 
}
 
  
/* --| end |--------------------------------------------- */
+
<!-- edit the info accordingly -->
/* --| pics holder styling |--------------------------- */
 
  
.pics {
+
<td class="text"><div class="rounded2"><div class="note1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i>None available</i>.</div></div></td>
  height: auto;  
+
</tr>
  width: auto;  
+
</table>
  padding: 0px;  
 
  margin: 0px;  
 
  overflow: hidden
 
}
 
  
.pics img {
+
</fieldset>
  height: auto;
+
</div>
  width: auto;
 
  padding: 10px;
 
  border: 1px solid #ccc;
 
  background-color: #fff;
 
  top: 0px;
 
  left: 0px;
 
}
 
  
/* --| end |--------------------------------------------------- */
+
<div class="divbr">
/* --| background box styling |--------------------------- */
+
<fieldset>
  
/*
+
<legend>| Synopsis |</legend>
.rounded1 {
 
  background-color: #EEDDFF;
 
  padding: 10px;
 
  width: auto;
 
  height: auto;
 
  border: 1px solid #CCCFC8;
 
}
 
*/
 
  
.rounded2 {
+
<table class="table2">
  background-color: #EEEEFF;
+
<tr>
  padding: 10px;
+
<td>
  width: auto;
+
<div class="rounded3">
  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;
+
<!-- the <br> here is for break; not the same purpose as of above usage -->
}
+
<!-- edit the info accordingly -->
/* --| end |--------------------------------------------- */
 
  
</style>
+
<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>
  
<!-- multi picture presentation timing control -->
+
</div>
<script type="text/javascript">  
+
</td>
$('#slideshow').cycle({
+
</tr>
    fx:    'all',
+
</table>
    timeout: 5000,
 
    speed:  1000
 
});
 
</script>  
 
  
<!-- message bar timing control 1 of 3 -->
+
</fieldset>
<script type="text/javascript">
+
</div>
  $(document).ready(function(){
 
  setTimeout(function(){
 
  $("#note1").fadeOut("slow", function () {
 
  $("#note1").remove();
 
    });
 
  
}, 5000);
+
</div>
});
 
</script>
 
  
<!-- 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="outer3">
});
+
<div class="inner">Screenshots</div>
</script>
+
</div>
  
<!-- message bar timing control 3 of 3 -->
 
<script type="text/javascript">
 
  $(document).ready(function(){
 
  setTimeout(function(){
 
  $("#note3").fadeOut("slow", function () {
 
  $("#note3").remove();
 
    });
 
  
}, 10000);
+
</body>
});
+
</html>
</script>
 
  
<!-- tab container fx control -->
 
<script type="text/javascript">
 
  $(function() {
 
  $("#tabs").tabs({ fx: { opacity: 'toggle' } });
 
      var fx = $('.selector').tabs('slow', 'fx');
 
      });
 
</script>
 
  
</head>
+
<!-- change your demo pic here; use png format only; box may be added or removed accordingly -->
<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 -->
+
[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>
  
 +
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]].
  
<div class="overlap1">
+
===Generic Anime Template - Light Themed===
<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">
+
Submitted by: deysmacro
<div class="inner"><script>dcw(useredit.heading);</script></div>
 
  
<div class="button">
+
<pre>
<table class="file_info">
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<tr>
+
<html>
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the title source.</span><div>SRCS</div></td>
+
<head>
<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>&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>
+
<style type="text/css">
 
+
/* --------------------------------------------------------------------------------------------------------------------------------------------| some note |-----
<div class="divwhole">
+
*
 
+
* Please take note. The indentation should look correctly using Firefox.
<div class="divpic">
+
*
<table style="background-color: transparent;" cellpadding="0" cellspacing="0" height="100%">
+
* Although I have taken all possible steps that it should look correct, using IE will somehow still make it look a little bit weird.
<tr><td>
+
* When that happen, please use Firefox.
<div id="slideshow" class="pics"></div>
+
*
<script language="javascript" purpose="Print related pics">
+
* Thank you for your understanding.
for (i in related.pics_list) { document.getElementById("slideshow").innerHTML += '<img src="'+related.pics_list[i].href +'" />'; }
+
*
</script>
+
* --------------------------------------------------------------------------------------------------------------------------------------------| general info |-----
</td></tr>
+
*
</table>
+
* Main user link : http://bakabt.me/user/816453/deysmacro.html
</div>
+
* Forum user link : http://forums.bakabt.me/index.php?action=profile;u=816453
 
+
*
<div class="divtab">
+
* I welcome all of you people to use this template at your convenience.
<div id="tabs">
+
* Do contact me via PM or email if you had anything to say.
<ul>
+
*
<li><a href="#tabs-1">Series Information</a></li>
+
* Email : deysmacro[at]gmail[dot]com
<li><a href="#tabs-2">File Information - Related Anime - Related OST</a></li>
+
*
<li><a href="#tabs-3">Synopsis</a></li>
+
* I also can help you guys with the template.
</ul>
+
* I will help whenever I can.
 
+
*
<div id="tabs-1">
+
* Originally Customized By : deysmacro
<table style="background-color: transparent;" cellpadding="3" cellspacing="0" height="100%" width="100%">
+
* Re-Customized By : YOUR NICK HERE
<tr>
+
*
<td class="label"><div class="rounded1">Main Title:</div></td>
+
* Template Version : v2.0.9.1 generic - light themed
<td class="text"><div class="rounded2"><script>dcw(useredit.maintitle);</script></div></td>
+
* Template Last Update On : July 20th, 2009 @ 23:28pm GMT+8
</tr>
+
*
<tr>
+
* Please leave the credit intact if you plan to use this template.
<td class="label"><div class="rounded1">Official Title:</div></td>
+
* Your cooperation is highly appreciated. Thank you.
<td class="text"><div class="rounded2"><script>dcw(useredit.officialtitle);</script></div></td>
+
*
</tr>
+
* --------------------------------------------------------------------------------------------------------------------------------------------------------| SN |-----
<tr>
+
* SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2009 | 07 | 19 | 0720 | d-ait | v2091 | 17
<td class="label"><div class="rounded1">Japanese Title:</div></td>
+
* ---------------------------------------------------------------------------------------------------------------------------------| Info you should know |-----
<td class="text"><div class="rounded2"><script>dcw(useredit.japanesetitle);</script></div></td>
+
*
</tr>
+
* Quick Reminder:
<tr>
+
* If you found any syntax with * siding with the syntax, it is targeted for IE only.
<td class="label"><div class="rounded1">Year:</div></td>
+
*
<td class="text"><div class="rounded2"><script>dcw(useredit.year);</script></div></td>
+
*
</tr>
+
* Example:
<tr>
+
* Assume "width" is the syntax...
<td class="label"><div class="rounded1">Episodes:</div></td>
+
*
<td class="text"><div class="rounded2"><script>dcw(useredit.episodes);</script></div></td>
+
* body {
</tr>
+
* width: 100px; <-- major browser support
<tr>
+
*
<td class="label"><div class="rounded1">Categories:<br><br></div></td>
+
* *width: 110px; <-- targeted for IE only
<td class="text"><div class="rounded2"><script>dcw(useredit.categories);</script></div></td>
+
* }
</tr>
+
*
<tr>
+
*
<td class="label"><div class="rounded1">Director:</div></td>
+
* This is done as to make it IE compatible. It is not required if IE displays the generated page correctly.
<td class="text"><div class="rounded2"><script>dcw(useredit.director);</script></div></td>
+
* Please take note of this when you are editing.
</tr>
+
*
<tr>
+
* ---------------------------------------------------------------------------------------------------------------------------------------------------| end |----- */
<td class="label"><div class="rounded1">Production:</div></td>
+
/*
<td class="text"><div class="rounded2"><script>dcw(useredit.production);</script></div></td>
+
* Nothing much to change or edit about the template appearance since it is 99% ready out of the box.
</tr>
+
* 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.
<tr>
+
*
<td class="label"><div class="rounded1">References:</div></td>
+
* Hopefully you guys enjoy using this template. Good day people.
 +
*/
 +
/* ------------------------------------------------------------------------------------------------------------------------------| general styling area |----- */
 +
/* --| body styling control |-- */
  
<td class="text"><div class="rounded2">
+
body {
<a id="link_anidb" target="_blank">AniDB</a> |
+
background: #131313;
<a id="link_animenfo" target="_blank">AnimeNFO</a> |
+
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
<a id="link_ann" target="_blank">ANN</a> |
+
font-family: Tahoma;
<a id="link_officialpage" target="_blank">Official Page</a>
+
font-size: 11px;
</div></td>
+
text-align: justify;
</tr>
+
color: #0F0F0F;
</table>
+
 
</div>
+
}
  
<div id="tabs-2">
+
/* --| end |--------------------------- */
<table style="background-color: transparent;" cellpadding="3" cellspacing="0" height="100%" width="100%">
+
/* --| http link styling control |-- */
<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">