== Lyrics ==
=== ^test 1 ===
<poem>
AA
BB

CC
DD
</poem>

=== test 2 ===
<tabs>
{{#tab:tttt|
<poem>
AA
BB

CC
DD
</poem>
}}
</tabs>

=== test 3 ===
{{User:R0o0di/Sandbox/Poem|
AA
BB

CC
DD
}}

=== test 4 ===
{{User:R0o0di/Sandbox/Poem2|
AA
BB

CC
DD
}}

=== test 5 ===
{{User:R0o0di/Sandbox/Lyrics
| romaji =
Hyakunen buri no seikimatsu nake to iwarete boku wa waratta
Hisakata buri no seikimatsu hiroi sekai e tobi dashite yuku

Kodomo no koro ni wakari kaketeta koto ga
Otona ni natte wakaranai mama

Eraku mo nai shi
Rippa demo nai
Wakatteru no wa mune no dokidoki
Kotae demo nai hontou demo nai
Shinjiteru no wa mune no dokidoki
Mune no dokidoki dake

Kakkoii ka wa wakaranai kedo
Osae kirenai yume wo mitanda
Sakusen tatete jitto matsu yori
Kodomo no mama de butsukatte yuku

Uchuu no hate ni hata wo tateta to shite mo
Uchuu no nazo wa wakaranai mama

Eraku mo nai shi
Rippa demo nai
Wakatteru no wa mune no dokidoki
Kotae demo nai hontou demo nai
Shinjiteru no wa mune no dokidoki

Eraku mo nai shi
Rippa demo nai
Wakatteru no wa mune no dokidoki
Kotae demo nai hontou demo nai
Shinjiteru no wa mune no dokidoki
Mune no dokidoki dake
| indonesian =
Walau Masa Berganti
dan Tahun pun berlalu
Namun di dalam hati
ku akan tetap maju

Walau Rintangan Menghadang
Masalah kuhadapi
Semua kan kuterjang
Menghadapi Dunia Ini

Spoken:
Walaupun Sekarang aku Terperangkap di dalam tubuh kecilku,
namun aku tetap yakin dan aku tidak akan pernah ragu
dan disaat semua kucoba untuk mengerti
yang kutahu hanya satu jawaban yang pasti

Ingin Kucoba Sekali Lagi Walau itu tak pasti
Setelah Kulalui Penuh Percaya Diri
Saat Sesuatu Menjadi Sebuah Teka-teki
Kan Tetap kujalani tuk Menyingkap Misteri

| english =
It's the end of a century after a hundred years; I was told to cry yet I laughed
It's the end of a century after a long time; I'll dash out to a broad world

Things that I was starting to understand when I was a child-
I grew up and I still don't understand them

I'm not remarkable
I'm not even praiseworthy
What I understand is the pounding in my chest
It's not even the answer; it's not even true
What I believe in is the pounding in my chest
Only in the pounding of my chest

I don't know if it's cool
But I had an irrepressible dream
Rather than pitching a plan and patiently waiting
I'll run into it still as a child

Even if I raised a flag at the end of the universe
I still don't understand the mystery of the universe

I'm not remarkable
I'm not even praiseworthy
What I understand is the pounding in my chest
It's not even the answer; it's not even true
What I believe in is the pounding in my chest

I'm not remarkable
I'm not even praiseworthy
What I understand is the pounding in my chest
It's not even the answer; it's not even true
What I believe in is the pounding in my chest
Only in the pounding of my chest
| japanese =
百年ぶりの世紀末　泣けといわれて僕は笑った
ひさかたぶりの世紀末　広い世界へとび出して行く

子どものころにわかりかけてたことが
大人になってわからないまま

えらくもないし
りっぱでもない
わかってるのは胸のドキドキ
答えでもない本当でもない
信じてるのは胸のドキドキ
胸のドキドキだけ

かっこいいかはわからないけど
おさえきれない夢をみたんだ
作戦たててじっと待つより
子どものままでぶつかってゆく

宇宙の果てに旗を立てたとしても
宇宙の謎はわからないまま

えらくもないし
りっぱでもない
わかってるのは胸のドキドキ
答えでもない本当でもない
信じてるのは胸のドキドキ

えらくもないし
りっぱでもない
わかってるのは胸のドキドキ
答えでもない本当でもない
信じてるのは胸のドキドキ
胸のドキドキだけ
| english-dub =
It was the first new century
In one-hundred years
When I felt like I should cry
I laughed away my tears
The end of a millenium
We waited a long, long time
To see the brave new world
And the mountains we would climb

The things I tried to comprehend
As a child remain a mystery
There's nothing I need to defend
There's nothing great about me

All I will ever believe
Is the pounding of my heart, though
It doesn't answer questions
That's just the way it goes
All I will ever have faith in
Is the beating in my chest
It won't predict tomorrow
Or give me eternal rest
| spanish-dub =
Un detective muy capaz
un joven con una misión
un muchacho muy audaz
de él se trata esta canción.

Nadie le podrá engañar
su genio no se puede dudar
este chico comprobará
que el crimen nunca pagará.

(Um sha lala...)

En este mundo de sombra y de luz
la verdad se logra ocultar
pero siempre suele llegar
alguien que no la deja de buscar.

En este mundo de sombra y de luz
la verdad se logra ocultar
pero siempre suele llegar
alguien que no la deja de buscar
que no la deja de buscar.
| spanish-dub-english =
A very capable detective
a young man with a mission
a very bold boy
This song is about him.

Nobody can fool you
his genius can not be doubted
this guy will check
that the crime will never pay.

(Um sha lala...)

In this world of shadow and light
the truth is reach to hide
but always usually arrives
someone who does not stop looking.

In this world of shadow and light
the truth is reach to hide
but always usually arrives
someone who does not stop looking
that does not stop looking.
| french-dub =
Une nouvelle vie qui commence.
Par un flash-back vers le passé.
Conan a retrouvé l'enfance,
c'est le sort qu'on lui a jeté.

Il est seul dans son monde a lui,
Tout le monde l'a laissé tombé.
Les gens le prennent pour un petit
Mais il ne faut pas oublier.

Dans la vie on a le droit de s'amuser,
Enquêter et avoir des idées.
Dans la vie il laisse son coeur parler,
Il en est récompensé.

Qui est le plus sidérent ? CONAN
Le plus fou et séduisant ? CONAN
| french-dub-english =
A new life starts.
As a flashback to the past.
Conan is back to childhood,
it is the fate that has been thrown to him.

He is alone in his world,
Everyone dropped him.
People take him for a kid
But we must not forget.

In life we have the right to have fun,
Investigate and have ideas.
In life he lets his heart speak,
He is rewarded.

Who is the most amazing? CONAN
The craziest and attractive? CONAN
| german-dub =
Hundert Jahre geh'n vorbei,
Jetzt ist es soweit.
Sie wollten meine Tränen seh'n,
Doch ich hab nur gelacht.

Denn ich folge einer Spur
Und fliege heut' noch weit.
Mit dem was 100 Jahre war,
Wird jetzt Schluss gemacht.

Kennst du die Antwort, kennst du sie?
Ob Mann ob Kind, das Rätsel löst du nie.
Egal, so vieles bleibt geheim.
Nur was das Herz sagt, kann wahr sein.

Nur Fragen in meinem Kopf,
Noch keine Antwort entdeckt.
Hörst du nicht, wie mein Herz klopft?
Die Wahrheit hat sich gut versteckt.

Nur Fragen in meinem Kopf,
Noch keine Antwort entdeckt.
Hörst du nicht, wie mein Herz klopft?
Die Wahrheit hat sich gut versteckt.
| german-dub-english =
One hundred years go by,
Now the time has come.
They wanted to see my tears,
But I just laughed.

Because I'm following a lead,
And I'm still flying far today.
What has been the case for 100 years,
Will now be brought to an end.

Do you know the answer, do you know it?
Whether man or child, you will never solve that riddle.
No matter, so many things remain a secret.
Only what the heart says can be true.

Only questions in my head,
Still haven't found an answer.
Can't you hear how my heart is beating?
The truth has hidden itself well.

Only questions in my head,
Still haven't found an answer.
Can't you hear how my heart is beating?
The truth has hidden itself well.
| valencian-dub =
Investigador capaç,
un geni de la deducció,
sempre haurà d'entrar en acció,
per trobar els criminals.

(Um sha lala...)

En un món ple d'ombra i de llum (i de llum...)
a on s'oculta la realitat (la realitat...)
apareix un gran detectiu (gran detectiu...)
que descobrirà la veritat.

En un món ple d'ombra i de llum (i de llum...)
a on s'oculta la realitat (la realitat...)
apareix un gran detectiu (gran detectiu...)
que descobrirà la veritat,
que descobrirà la veritat!
| valencian-dub-english =
Capable researcher,
a genius of deduction,
he will always have to enter into action,
to find criminals.

(Um sha lala ...)

In a world full of shadow and light (and light...)
where reality is hidden (reality...)
A great detective appears (great detective...)
that will discover the truth.

In a world full of shadow and light (and light...)
where reality is hidden (reality...)
A great detective appears (great detective...)
that will discover the truth,
that will discover the truth!
| balearic-dub =
Un detectiu molt capaç,
un jove amb una missió,
un al·lot molt espavilat,
d'ell tracta aquesta cançó.

Ningú no el podrà enganar,
del seu geni no se'n pot dubtar.
Aquest al·lot comprovarà,
que el crim mai pagarà.

Les coses que ell va fer emprar,
d'ençà que era ben petit.
Ara també les podrà emprar,
però cada matí.

A un món d'ombra i de llum,
a on s'hi amaga la veritat,
sempre hi podrem trobar qualcú,
que no la deixa de cercar.

A un món d'ombra i de llum,
a on s'hi amaga la veritat,
sempre hi podrem trobar qualcú,
que no la deixa de cercar.
|balearic-dub-english =
A very capable detective,
a young man with a mission,
a very smart kid,
this song is about him.

Nobody can fool you,
of his genius can not be doubted.
This guy will check,
That crime will never pay.

The things he used to do,
since he was very small.
Now you can also use them,
but every morning.

In a world of shadow and light,
where the truth is hidden,
we can always find somebody,
that does not stop searching for it.

In a world of shadow and light,
where the truth is hidden,
we can always find somebody,
that does not stop searching for it.
| galician-dub =
Un cento de anos pasou, o século chega á súa fin.
Un cento de anos pasou, mandáronme chorar e eu rin.
Eu ben sei que a chave está... Entre o yan e o yin.
E cando miro ao meu redor, o mundo está a agardar por min.

E todo o que entender eu crin, cando aínda era un galopín.
E todo o que entender eu crin, hoxe non me entra no maxín.

Non, sobranceiro, non son,
Nin digno de devoción,
Mais o son do corazón.
É o que me guía con paixón.

Respostas non quero, non,
Tan só sentir ilusión.
Pois o son do corazón,
É o que me guía con pai...
É o que me guía con paixón.
| galician-dub-english =
Hundred years have passed, the century comes to his end.
Hundred years have passed, they order me to cry and I laughed.
I know well that the key is ... Between yan and yin.
And when I look around, the world is waiting for me.

And all that I understood I believed, when I was a rascal.
And all that I understood I believed, today I do not get into my mind.

No, distinguished, I'm not,
Not worthy of devotion,
But the sound of the heart.
It is what guides me with passion.

Answers I don't want, no,
Just feel illusion.
As the sound of the heart,
It is what guides me with pa...
It is what guides me with passion.
| hindi-dub =
इन्वेस्टिगेशन, चुपके करता हूँ,
मुश्किल केसेस को, मैं सुलझाता हूँ।

क्रिमिनल कोई भी,
मुझसे नहीं बचा,
दोस्त गिरें जो भी,
उनको बचाता हूँ।

मशहूर मैं हूँ नहीं,
पर कोई मेरे जैसा नहीं,
गलती से छोटा हो गया,
लेकिन दिमाग है बड़ा।

दिल में है हिम्मत हर दम,
फुटबॉल में लगा मेरा मन।
पकड़ूँ मैं क्लूज़ फ़ौरन,
मैं हूँ डिटेक्टिव कोनन।

संग में हैं दोस्त मेरे,
छाए जहाँ अँधेरे,
खोलूँ सारे मैं राज़,
मैं हूँ डिटेक्टिव कोनन।
मैं हूँ डिटेक्टिव कोनन! येह!
| hinglish =
Investigation, chupke karta hoon,
Mushkil cases ko, main suljhaata hoon.

Criminal koi bhi,
mujhse nahin bachaa,
Dost girein jo bhi,
unko bachaata hoon.

Mashahoor main hoon nahin,
Par koyi mere jaisa nahin,
Galti se chota ho gaya,
Lekin dimag hai bada.

Dil main hai himmat har dum,
Football mein laga mera mann.
Pakadoon main clues foren,
Main hoon Detective Conan.

Sang mein hain dost mere,
Chaaye jahaan andhere,
Kholoon saare main raaz,
Main hoon Detective Conan.
Main hoon Detective Conan! Yeah!
| hindi-dub-english =
I investigate things quietly,
I resolve difficult cases.

No criminal has ever escaped me,
I save all my friends when they fall.

I'm not famous,
But there's no one else like me.
I became young accidently
But still my mind is big.

My heart is always filled with courage,
My mind is on football,
I catch clues immediately,
I am Detective Conan.

My friends are with me,
Wherever darkness is cast,
I reveal all the secrets,
I am Detective Conan.
I am Detective Conan! Yeah!
}}

<div class="ttt"> helloooo </div>
{{code
|css=
/*IMAGE SLIDESHOW*/
.slideshow-container {
place-self: center;
position: relative;
width: 100%;
max-width: 1150px;
overflow: hidden;
/* visibility: hidden; */
padding: 10px 0;
}

.slideshow-container.ready {
visibility: visible;
}

.slides-wrapper {
display: flex;
transition: transform 0.5s ease-in-out;
}

.slide {
min-width: 350px;
margin: 0 15px;
flex-shrink: 0;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* .slide img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
} */

.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 1.5rem;
color: white;
background: rgba(0, 0, 0, 0.4);
padding: 0.4rem 0.8rem;
cursor: pointer;
user-select: none;
z-index: 2;
border-radius: 6px;
}

.arrow:hover {
background: rgba(0, 0, 0, 0.5);
}

.arrow.left {
left: 10px;
}

.arrow.right {
right: 10px;
}

/* CARD CLASSES */
.cards {
display: flex;
flex-direction: column;
gap: 8px;
}

.card {
border: 2px solid #ccc;
padding: 5px;
width: 100%;
height: 100%;
box-sizing: border-box;
transition: transform 0.3s ease;
}

.card:hover {
transform: scale(1.03);
filter: brightness(0.85);
}

.card-header {
background: #6699CC;
color: white;
text-align: center;
font-size: 130%;
padding: 5px;
}

.card-body {
padding: 5px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 87%;
}

.card-image-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}

.card-image {
text-align: center;
margin: 0;
}

.card-image img {
max-height: 170px;
width: auto;
}

.card-title,
.card-title-next {
text-align: center;
}

.card-title {
padding-bottom: 5px;
}

.card-title-next {
padding-top: 5px;
}

.card-title-next p {
margin: 0;
}

hr {
margin: 0.2em 0;
}
/* END CARD CLASSES */

/* PROGRESS BAR CLASSES */
.sidescroll-progress-bar-container {
display: flex;
justify-content: center;
margin-top: 2px;
}

.sidescroll-progress-bar-background {
position: relative;
border-radius: 999px;
width: 200px;
height: 3px;
background: #ddd;
}

.sidescroll-progress-bar {
position: absolute;
left: 0;
border-radius: 999px;
background: #494949;
height: 100%;
}
/* END OF PROGRESS BAR CLASSES*/
}}

{{User:R0o0di/Sandbox/Latest news

| Regular Airtime = 6:00 PM




| S1 Case First-Last Ep =
| S1 Episode Number = 1201
| S1 Case Name = I'm the Culprit
| S1 Case Part Name =
| S1 Episode Airdate = May 9, 2026
| S1 Episode Airtime =

| S2 Case First-Last Ep =
| S2 Episode Number = 1202
| S2 Case Name =
| S2 Case Part Name =
| S2 Episode Airdate = May 30, 2026
| S2 Episode Airtime =

| S3 Case First-Last Ep =
| S3 Episode Number =
| S3 Case Name =
| S3 Case Part Name =
| S3 Episode Airdate =
| S3 Episode Airtime =

| Anime footnotes =


| Regular Yaiba Airtime = 5:30 PM

| S1 Yaiba First-Last Ep =
| S1 Yaiba Episode Number =
| S1 Yaiba Name =
| S1 Yaiba Part Name =
| S1 Yaiba Episode Airdate =
| S1 Yaiba Episode Airtime =

| S2 Yaiba First-Last Ep =
| S2 Yaiba Episode Number = 24
| S2 Yaiba Name = The Lunar Invaders
| S2 Yaiba Part Name =
| S2 Yaiba Episode Airdate = September 27, 2025
| S2 Yaiba Episode Airtime =

| S3 Yaiba First-Last Ep =
| S3 Yaiba Episode Number =
| S3 Yaiba Name =
| S3 Yaiba Part Name =
| S3 Yaiba Episode Airdate =
| S3 Yaiba Episode Airtime =

| Yaiba footnotes = '''Next:''' Season 2 <br> Dates are to be confirmed


| Latest chapter number = 1162
| Latest chapter name = The Detective on Our Side
| Latest chapter date = April 22, 2026

| Next chapter number = 1163
| Next chapter name =
| Next chapter date = June 24, 2026

| Manga footnotes =
}}<noinclude>
[[Category:Templates]]</noinclude>

= Template:Char Appearances & Template:Char =
=== old ===
{{User:R0o0di/Sandbox/Old Char Appearances|
{{User:R0o0di/Sandbox/Old Char|Conan Edogawa}}
{{User:R0o0di/Sandbox/Old Char|Ran Mouri}}
{{User:R0o0di/Sandbox/Old Char|Kogoro Mouri}}
{{User:R0o0di/Sandbox/Old Char|Eri Kisaki|display=Eri Kisaki (background)}}
{{User:R0o0di/Sandbox/Old Char|Heiji Hattori}}
{{User:R0o0di/Sandbox/Old Char|Hiroshi Agasa}}
{{User:R0o0di/Sandbox/Old Char|Ai Haibara}}
{{User:R0o0di/Sandbox/Old Char|Kazuha Toyama|display=Kazuha Toyama (background)}}
}}

=== new ===
{{User:R0o0di/Sandbox/CharAppearances2|
{{User:R0o0di/Sandbox/Char2|Conan Edogawa}}
{{User:R0o0di/Sandbox/Char2|Ran Mouri}}
{{User:R0o0di/Sandbox/Char2|Kogoro Mouri}}
{{User:R0o0di/Sandbox/Char2|Eri Kisaki|display=Eri Kisaki (background)}}
{{User:R0o0di/Sandbox/Char2|Heiji Hattori}}
{{User:R0o0di/Sandbox/Char2|Hiroshi Agasa}}
{{User:R0o0di/Sandbox/Char2|Ai Haibara}}
{{User:R0o0di/Sandbox/Char2|Kazuha Toyama|display=Kazuha Toyama (background)}}
}}
=== Differences ===
<div class="mw-collapsible mw-collapsed">
<strong>difficult to read, too many unnecessary elements, outdated css</strong>
<div style="overflow:auto;">
<pre style="width:max-content">
<div style="vertical-align: top; height: auto; overflow: auto; clear: left; margin-bottom: 2px; ">
<table class="char-appearances-table" style="border: 1px dotted #7BA1EC;">
<tbody>
<tr>
<th style="background: #7BA1EC; color: #ffffff; text-align: left; padding-left: 5px;">Characters</th>
</tr>
<tr>
<td>
<table class="char-appearances-table">
<tbody>
<tr>
<td>
<div style="float:left; font-size: 90%;" class="char-image">
<div class="center">
<div class="thumb tnone">
<div class="thumbinner" style="width:102px;">
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa">
<img alt="Conan Edogawa"src="/wiki/images/4/4f/Conan_Edogawa.jpg" width="100" height="100"></a>
<div class="thumbcaption">
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa">Conan Edogawa</a>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</pre>
</div>

<strong>less complicated structure, better readability, 66% shorter, better css, achieves same results </strong>
<div style="overflow:auto;">
<pre style="width:max-content">
<div style="overflow: auto; margin-bottom: 2px;">
<div style="border: 1px dotted #7BA1EC; width: max-content;">
<div style="background: #7BA1EC; color: #ffffff; padding-left: 5px; font-weight:bold;">Characters</div>
<div style="display:flex; overflow: auto; width: min-content; font-size: 90%; text-align: center;">
<div style="margin: 5px 3px; background: #6969fa7a; border: 1px solid #c8ccd1; border-radius: .25rem; height: min-content;">
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa"><img alt="Conan Edogawa" src="/wiki/images/4/4f/Conan_Edogawa.jpg" width="100" height="100"></a><br>
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa">Conan Edogawa</a>
</div>
</div>
</div>
</div>
</pre>
</div>

</div>
<hr>

= Template:Gadgets Appearances & Template:Gadget =
=== old ===
{{User:R0o0di/Sandbox/Old Gadgets Appearances|
{{User:R0o0di/Sandbox/Old Gadget|Voice-Changing Bowtie}}
{{User:R0o0di/Sandbox/Old Gadget|Power-Enhancing Kick Shoes}}
{{User:R0o0di/Sandbox/Old Gadget|Stun-Gun Wristwatch}}
{{User:R0o0di/Sandbox/Old Gadget|Detective Boys Badge}}
{{User:R0o0di/Sandbox/Old Gadget|Turbo Engine Skateboard}}
}}

=== new ===
{{User:R0o0di/Sandbox/New Gadgets Appearances|
{{User:R0o0di/Sandbox/New Gadget|Voice-Changing Bowtie}}
{{User:R0o0di/Sandbox/New Gadget|Power-Enhancing Kick Shoes}}
{{User:R0o0di/Sandbox/New Gadget|Stun-Gun Wristwatch}}
{{User:R0o0di/Sandbox/New Gadget|Detective Boys Badge}}
{{User:R0o0di/Sandbox/New Gadget|Turbo Engine Skateboard}}
}}
=== Differences ===
<div class="mw-collapsible mw-collapsed">
<strong>difficult to read, too many unnecessary elements, outdated css</strong>
<div style="overflow:auto;">
<pre style="width:max-content">
<div style="vertical-align: top; height: auto; overflow: auto; clear: left; margin-bottom: 2px; ">
<table class="gadget-appearances-table" style="border: 1px dotted #FF9900;">
<tbody>
<tr>
<th style="background: #FF9900; color: #ffffff; text-align: left; padding-left: 5px;">Gadgets</th>
</tr>
<tr>
<td>
<table class="char-appearances-table">
<tbody>
<tr>
<td>
<div style="float:left; font-size: 90%;" class="gadget-image">
<div class="center">
<div class="thumb tnone">
<div class="thumbinner" style="width:102px;">
<a href="/wiki/Voice-Changing_Bowtie" title="Voice-Changing Bowtie">
<img alt="Voice-Changing Bowtie" src="/wiki/images/8/86/Voice-Changing_Bowtie.jpg" width="100" height="100">
</a>
<div class="thumbcaption">
<a href="/wiki/Voice-Changing_Bowtie" title="Voice-Changing Bowtie">Voice-Changing Bowtie</a>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</pre>
</div>

<strong>less complicated structure, better readability, 66% shorter, better css, achieves same results </strong>
<div style="overflow:auto;">
<pre style="width:max-content">
<div style="overflow: auto; margin-bottom: 2px;">
<div style="border: 1px dotted #FF9900; width: max-content;">
<div style="background: #FF9900; color: #ffffff; padding-left: 5px; font-weight:bold;">Gadgets</div>
<div syle="display:flex; width: min-content; font-size: 90%; text-align: center;">
<div style="margin: 5px 3px; border: 1px solid #c8ccd1; border-radius: .25rem; height: min-content;">
<a href="/wiki/Voice-Changing_Bowtie" title="Voice-Changing Bowtie">
<img alt="Voice-Changing Bowtie" src="/wiki/images/8/86/Voice-Changing_Bowtie.jpg" width="100" height="100">
</a><br>
<a href="/wiki/Voice-Changing_Bowtie" title="Voice-Changing Bowtie">Voice-Changing Bowtie</a>
</div>

</div>
</div>
</div>
</pre>
</div>

</div>
<hr>

= Template:InfoBox Crime =
=== old ===
{{User:R0o0di/Sandbox/Old InfoBox Crime
| crime = Attempted Murder
| image = EP174b Case.jpg
| location = Front of the ship
| victim = [[Heiji Hattori]]
| cause-death = Thrown overboard
| cause-death-label = Attack types
| suspects = Unknown
| description = Heiji was pushed off the boat and into the ocean.
| footnotes = this is a footnote
}}

=== new ===
{{User:R0o0di/Sandbox/New InfoBox Crime
| crime = Attempted Murder
| image = EP174b Case.jpg
| location = Front of the ship
| victim = [[Heiji Hattori]]
| cause-death = Thrown overboard
| cause-death-label = Attack types
| suspects = Unknown
| description = Heiji was pushed off the boat and into the ocean.
| footnotes = this is a footnote
}}
=== Differences ===
<div class="mw-collapsible mw-collapsed">
<strong>too many unnecessary elements, outdated css</strong>
<div style="overflow:auto;">
<pre style="width:max-content">
<div style="overflow:auto">
<table class="infobox" style="width: 650px; text-align: left; font-size: 90%; float: none; clear: left; margin-left: 0; margin-right: 1em;" cellpadding="2">
<tbody>
<tr>
<td colspan="2" style="color: #ffffff; text-align:center; vertical-align:middle; font-size: small; background-color: #DF5829; ">
<b>Attempted Murder</b>
</td>
</tr>
<tr>
<td width="290" class="nospacing" style="text-align:center; vertical-align:top; padding: 2px 0px 0px 0px;">
<p>
<a href="/wiki/File:EP174b_Case.jpg" class="image">
<img alt="EP174b Case.jpg" src="/wiki/images/thumb/0/09/EP174b_Case.jpg/290px-EP174b_Case.jpg" width="290" height="218" srcset="/wiki/images/thumb/0/09/EP174b_Case.jpg/435px-EP174b_Case.jpg 1.5x, /wiki/images/thumb/0/09/EP174b_Case.jpg/580px-EP174b_Case.jpg 2x">
</a>
</p>
</td>
<td style="padding: 0px;">
<table class="infobox crime" width="100%" style="border: 0px; margin: 0px; padding: 0px 0px 0px 2px; font-size: 100%; border-collapse: separate; border-spacing: 1px" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th width="102" style="border-bottom: 1px dotted #cccccc;">Location: </th>
<td style="border-bottom: 1px dotted #cccccc;">Front of the ship</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</pre>
</div>

<strong>less complicated structure, better readability, 30% shorter, better css, achieves same results </strong>
<div style="overflow:auto;">
<pre style="width:max-content">
<div style="background: #f8f9fa; border: 1px solid #c8ccd1; border-radius: 5px; max-width: 550px;">
<div style="background: #DF5829; color: white; text-align: center; font-weight: bold; padding: 5px;">
Attempted Murder
</div>
<div style="overflow: auto; font-size: 90%;">
<div style="width: 550px; display: flex;">
<div>
<a href="/wiki/File:EP174b_Case.jpg" class="image">
<img alt="EP174b Case.jpg" src="/wiki/images/thumb/0/09/EP174b_Case.jpg/290px-EP174b_Case.jpg" width="290" height="218" srcset="/wiki/images/thumb/0/09/EP174b_Case.jpg/435px-EP174b_Case.jpg 1.5x, /wiki/images/thumb/0/09/EP174b_Case.jpg/580px-EP174b_Case.jpg 2x">
</a>
</div>
<div style="padding-left: 5px; width: 100%;">
<div style="padding: 3px 0; border-top: 1px dotted;">
<span style="width: 90px; display: inline-block;">
<strong>Location:</strong>
</span>
<span>Front of the ship</span>
</div>
</div>
</div>
</div>
</div>
</pre>
</div>

</div>
<hr>

= Template:InfoBox Heist =
=== old ===
{{User:R0o0di/Sandbox/Old InfoBox Heist
| heist = Heist
| image = MK16 Heist1.jpg
| thief = [[Kaitou Kid]]
| thief-label = Thief
| target = Blue Wonder
| owner = [[Jirokichi Suzuki]]
| location = Suzuki Museum
| date = October 12
| notice = It's my pleasure to accept your challenge. I'll appear at 8:00 PM on October 12th. Expect my first appearance the eve just before. PS. Just like Blue Wonder's name, I'll walk in from the sky.
| description = Golden sculpture holding the blue jewel.
}}

=== new ===
{{User:R0o0di/Sandbox/New InfoBox Heist
| heist = Heist
| image = MK16 Heist1.jpg
| thief = [[Kaitou Kid]]
| thief-label = Thief
| target = Blue Wonder
| owner = [[Jirokichi Suzuki]]
| location = Suzuki Museum
| date = October 12
| notice = It's my pleasure to accept your challenge. I'll appear at 8:00 PM on October 12th. Expect my first appearance the eve just before. PS. Just like Blue Wonder's name, I'll walk in from the sky.
| description = Golden sculpture holding the blue jewel.
}}
=== Differences ===
blabla you alr know the drill same as previous ones

User:R0o0di/Sandbox/Lyrics

2026-07-15T10:00:36Z

R0o0di:

User:R0o0di/Sandbox

2026-07-15T09:55:45Z

R0o0di: /* Lyrics */

== Lyrics ==
=== ^test 1 ===
<poem>
AA
BB

CC
DD
</poem>

=== test 2 ===
<tabs>
{{#tab:tttt|
<poem>
AA
BB

CC
DD
</poem>
}}
</tabs>

=== test 3 ===
{{User:R0o0di/Sandbox/Poem|
AA
BB

CC
DD
}}

=== test 4 ===
{{User:R0o0di/Sandbox/Poem2|
AA
BB

CC
DD
}}

<div class="ttt"> helloooo </div>
{{code
|css=
/*IMAGE SLIDESHOW*/
.slideshow-container {
place-self: center;
position: relative;
width: 100%;
max-width: 1150px;
overflow: hidden;
/* visibility: hidden; */
padding: 10px 0;
}

.slideshow-container.ready {
visibility: visible;
}

.slides-wrapper {
display: flex;
transition: transform 0.5s ease-in-out;
}

.slide {
min-width: 350px;
margin: 0 15px;
flex-shrink: 0;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* .slide img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
} */

.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 1.5rem;
color: white;
background: rgba(0, 0, 0, 0.4);
padding: 0.4rem 0.8rem;
cursor: pointer;
user-select: none;
z-index: 2;
border-radius: 6px;
}

.arrow:hover {
background: rgba(0, 0, 0, 0.5);
}

.arrow.left {
left: 10px;
}

.arrow.right {
right: 10px;
}

/* CARD CLASSES */
.cards {
display: flex;
flex-direction: column;
gap: 8px;
}

.card {
border: 2px solid #ccc;
padding: 5px;
width: 100%;
height: 100%;
box-sizing: border-box;
transition: transform 0.3s ease;
}

.card:hover {
transform: scale(1.03);
filter: brightness(0.85);
}

.card-header {
background: #6699CC;
color: white;
text-align: center;
font-size: 130%;
padding: 5px;
}

.card-body {
padding: 5px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 87%;
}

.card-image-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}

.card-image {
text-align: center;
margin: 0;
}

.card-image img {
max-height: 170px;
width: auto;
}

.card-title,
.card-title-next {
text-align: center;
}

.card-title {
padding-bottom: 5px;
}

.card-title-next {
padding-top: 5px;
}

.card-title-next p {
margin: 0;
}

hr {
margin: 0.2em 0;
}
/* END CARD CLASSES */

/* PROGRESS BAR CLASSES */
.sidescroll-progress-bar-container {
display: flex;
justify-content: center;
margin-top: 2px;
}

.sidescroll-progress-bar-background {
position: relative;
border-radius: 999px;
width: 200px;
height: 3px;
background: #ddd;
}

.sidescroll-progress-bar {
position: absolute;
left: 0;
border-radius: 999px;
background: #494949;
height: 100%;
}
/* END OF PROGRESS BAR CLASSES*/
}}

{{User:R0o0di/Sandbox/Latest news

| Regular Airtime = 6:00 PM




| S1 Case First-Last Ep =
| S1 Episode Number = 1201
| S1 Case Name = I'm the Culprit
| S1 Case Part Name =
| S1 Episode Airdate = May 9, 2026
| S1 Episode Airtime =

| S2 Case First-Last Ep =
| S2 Episode Number = 1202
| S2 Case Name =
| S2 Case Part Name =
| S2 Episode Airdate = May 30, 2026
| S2 Episode Airtime =

| S3 Case First-Last Ep =
| S3 Episode Number =
| S3 Case Name =
| S3 Case Part Name =
| S3 Episode Airdate =
| S3 Episode Airtime =

| Anime footnotes =


| Regular Yaiba Airtime = 5:30 PM

| S1 Yaiba First-Last Ep =
| S1 Yaiba Episode Number =
| S1 Yaiba Name =
| S1 Yaiba Part Name =
| S1 Yaiba Episode Airdate =
| S1 Yaiba Episode Airtime =

| S2 Yaiba First-Last Ep =
| S2 Yaiba Episode Number = 24
| S2 Yaiba Name = The Lunar Invaders
| S2 Yaiba Part Name =
| S2 Yaiba Episode Airdate = September 27, 2025
| S2 Yaiba Episode Airtime =

| S3 Yaiba First-Last Ep =
| S3 Yaiba Episode Number =
| S3 Yaiba Name =
| S3 Yaiba Part Name =
| S3 Yaiba Episode Airdate =
| S3 Yaiba Episode Airtime =

| Yaiba footnotes = '''Next:''' Season 2 <br> Dates are to be confirmed


| Latest chapter number = 1162
| Latest chapter name = The Detective on Our Side
| Latest chapter date = April 22, 2026

| Next chapter number = 1163
| Next chapter name =
| Next chapter date = June 24, 2026

| Manga footnotes =
}}<noinclude>
[[Category:Templates]]</noinclude>

= Template:Char Appearances & Template:Char =
=== old ===
{{User:R0o0di/Sandbox/Old Char Appearances|
{{User:R0o0di/Sandbox/Old Char|Conan Edogawa}}
{{User:R0o0di/Sandbox/Old Char|Ran Mouri}}
{{User:R0o0di/Sandbox/Old Char|Kogoro Mouri}}
{{User:R0o0di/Sandbox/Old Char|Eri Kisaki|display=Eri Kisaki (background)}}
{{User:R0o0di/Sandbox/Old Char|Heiji Hattori}}
{{User:R0o0di/Sandbox/Old Char|Hiroshi Agasa}}
{{User:R0o0di/Sandbox/Old Char|Ai Haibara}}
{{User:R0o0di/Sandbox/Old Char|Kazuha Toyama|display=Kazuha Toyama (background)}}
}}

=== new ===
{{User:R0o0di/Sandbox/CharAppearances2|
{{User:R0o0di/Sandbox/Char2|Conan Edogawa}}
{{User:R0o0di/Sandbox/Char2|Ran Mouri}}
{{User:R0o0di/Sandbox/Char2|Kogoro Mouri}}
{{User:R0o0di/Sandbox/Char2|Eri Kisaki|display=Eri Kisaki (background)}}
{{User:R0o0di/Sandbox/Char2|Heiji Hattori}}
{{User:R0o0di/Sandbox/Char2|Hiroshi Agasa}}
{{User:R0o0di/Sandbox/Char2|Ai Haibara}}
{{User:R0o0di/Sandbox/Char2|Kazuha Toyama|display=Kazuha Toyama (background)}}
}}
=== Differences ===
<div class="mw-collapsible mw-collapsed">
<strong>difficult to read, too many unnecessary elements, outdated css</strong>
<div style="overflow:auto;">
<pre style="width:max-content">
<div style="vertical-align: top; height: auto; overflow: auto; clear: left; margin-bottom: 2px; ">
<table class="char-appearances-table" style="border: 1px dotted #7BA1EC;">
<tbody>
<tr>
<th style="background: #7BA1EC; color: #ffffff; text-align: left; padding-left: 5px;">Characters</th>
</tr>
<tr>
<td>
<table class="char-appearances-table">
<tbody>
<tr>
<td>
<div style="float:left; font-size: 90%;" class="char-image">
<div class="center">
<div class="thumb tnone">
<div class="thumbinner" style="width:102px;">
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa">
<img alt="Conan Edogawa"src="/wiki/images/4/4f/Conan_Edogawa.jpg" width="100" height="100"></a>
<div class="thumbcaption">
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa">Conan Edogawa</a>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</pre>
</div>

<strong>less complicated structure, better readability, 66% shorter, better css, achieves same results </strong>
<div style="overflow:auto;">
<pre style="width:max-content">
<div style="overflow: auto; margin-bottom: 2px;">
<div style="border: 1px dotted #7BA1EC; width: max-content;">
<div style="background: #7BA1EC; color: #ffffff; padding-left: 5px; font-weight:bold;">Characters</div>
<div style="display:flex; overflow: auto; width: min-content; font-size: 90%; text-align: center;">
<div style="margin: 5px 3px; background: #6969fa7a; border: 1px solid #c8ccd1; border-radius: .25rem; height: min-content;">
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa"><img alt="Conan Edogawa" src="/wiki/images/4/4f/Conan_Edogawa.jpg" width="100" height="100"></a><br>
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa">Conan Edogawa</a>
</div>
</div>
</div>
</div>
</pre>
</div>

</div>
<hr>

= Template:Gadgets Appearances & Template:Gadget =
=== old ===
{{User:R0o0di/Sandbox/Old Gadgets Appearances|
{{User:R0o0di/Sandbox/Old Gadget|Voice-Changing Bowtie}}
{{User:R0o0di/Sandbox/Old Gadget|Power-Enhancing Kick Shoes}}
{{User:R0o0di/Sandbox/Old Gadget|Stun-Gun Wristwatch}}
{{User:R0o0di/Sandbox/Old Gadget|Detective Boys Badge}}
{{User:R0o0di/Sandbox/Old Gadget|Turbo Engine Skateboard}}
}}

=== new ===
{{User:R0o0di/Sandbox/New Gadgets Appearances|
{{User:R0o0di/Sandbox/New Gadget|Voice-Changing Bowtie}}
{{User:R0o0di/Sandbox/New Gadget|Power-Enhancing Kick Shoes}}
{{User:R0o0di/Sandbox/New Gadget|Stun-Gun Wristwatch}}
{{User:R0o0di/Sandbox/New Gadget|Detective Boys Badge}}
{{User:R0o0di/Sandbox/New Gadget|Turbo Engine Skateboard}}
}}
=== Differences ===
<div class="mw-collapsible mw-collapsed">
<strong>difficult to read, too many unnecessary elements, outdated css</strong>
<div style="overflow:auto;">
<pre style="width:max-content">
<div style="vertical-align: top; height: auto; overflow: auto; clear: left; margin-bottom: 2px; ">
<table class="gadget-appearances-table" style="border: 1px dotted #FF9900;">
<tbody>
<tr>
<th style="background: #FF9900; color: #ffffff; text-align: left; padding-left: 5px;">Gadgets</th>
</tr>
<tr>
<td>
<table class="char-appearances-table">
<tbody>
<tr>
<td>
<div style="float:left; font-size: 90%;" class="gadget-image">
<div class="center">
<div class="thumb tnone">
<div class="thumbinner" style="width:102px;">
<a href="/wiki/Voice-Changing_Bowtie" title="Voice-Changing Bowtie">
<img alt="Voice-Changing Bowtie" src="/wiki/images/8/86/Voice-Changing_Bowtie.jpg" width="100" height="100">
</a>
<div class="thumbcaption">
<a href="/wiki/Voice-Changing_Bowtie" title="Voice-Changing Bowtie">Voice-Changing Bowtie</a>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</pre>
</div>

<strong>less complicated structure, better readability, 66% shorter, better css, achieves same results </strong>
<div style="overflow:auto;">
<pre style="width:max-content">
<div style="overflow: auto; margin-bottom: 2px;">
<div style="border: 1px dotted #FF9900; width: max-content;">
<div style="background: #FF9900; color: #ffffff; padding-left: 5px; font-weight:bold;">Gadgets</div>
<div syle="display:flex; width: min-content; font-size: 90%; text-align: center;">
<div style="margin: 5px 3px; border: 1px solid #c8ccd1; border-radius: .25rem; height: min-content;">
<a href="/wiki/Voice-Changing_Bowtie" title="Voice-Changing Bowtie">
<img alt="Voice-Changing Bowtie" src="/wiki/images/8/86/Voice-Changing_Bowtie.jpg" width="100" height="100">
</a><br>
<a href="/wiki/Voice-Changing_Bowtie" title="Voice-Changing Bowtie">Voice-Changing Bowtie</a>
</div>

</div>
</div>
</div>
</pre>
</div>

</div>
<hr>

= Template:InfoBox Crime =
=== old ===
{{User:R0o0di/Sandbox/Old InfoBox Crime
| crime = Attempted Murder
| image = EP174b Case.jpg
| location = Front of the ship
| victim = [[Heiji Hattori]]
| cause-death = Thrown overboard
| cause-death-label = Attack types
| suspects = Unknown
| description = Heiji was pushed off the boat and into the ocean.
| footnotes = this is a footnote
}}

=== new ===
{{User:R0o0di/Sandbox/New InfoBox Crime
| crime = Attempted Murder
| image = EP174b Case.jpg
| location = Front of the ship
| victim = [[Heiji Hattori]]
| cause-death = Thrown overboard
| cause-death-label = Attack types
| suspects = Unknown
| description = Heiji was pushed off the boat and into the ocean.
| footnotes = this is a footnote
}}
=== Differences ===
<div class="mw-collapsible mw-collapsed">
<strong>too many unnecessary elements, outdated css</strong>
<div style="overflow:auto;">
<pre style="width:max-content">
<div style="overflow:auto">
<table class="infobox" style="width: 650px; text-align: left; font-size: 90%; float: none; clear: left; margin-left: 0; margin-right: 1em;" cellpadding="2">
<tbody>
<tr>
<td colspan="2" style="color: #ffffff; text-align:center; vertical-align:middle; font-size: small; background-color: #DF5829; ">
<b>Attempted Murder</b>
</td>
</tr>
<tr>
<td width="290" class="nospacing" style="text-align:center; vertical-align:top; padding: 2px 0px 0px 0px;">
<p>
<a href="/wiki/File:EP174b_Case.jpg" class="image">
<img alt="EP174b Case.jpg" src="/wiki/images/thumb/0/09/EP174b_Case.jpg/290px-EP174b_Case.jpg" width="290" height="218" srcset="/wiki/images/thumb/0/09/EP174b_Case.jpg/435px-EP174b_Case.jpg 1.5x, /wiki/images/thumb/0/09/EP174b_Case.jpg/580px-EP174b_Case.jpg 2x">
</a>
</p>
</td>
<td style="padding: 0px;">
<table class="infobox crime" width="100%" style="border: 0px; margin: 0px; padding: 0px 0px 0px 2px; font-size: 100%; border-collapse: separate; border-spacing: 1px" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th width="102" style="border-bottom: 1px dotted #cccccc;">Location: </th>
<td style="border-bottom: 1px dotted #cccccc;">Front of the ship</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</pre>
</div>

<strong>less complicated structure, better readability, 30% shorter, better css, achieves same results </strong>
<div style="overflow:auto;">
<pre style="width:max-content">
<div style="background: #f8f9fa; border: 1px solid #c8ccd1; border-radius: 5px; max-width: 550px;">
<div style="background: #DF5829; color: white; text-align: center; font-weight: bold; padding: 5px;">
Attempted Murder
</div>
<div style="overflow: auto; font-size: 90%;">
<div style="width: 550px; display: flex;">
<div>
<a href="/wiki/File:EP174b_Case.jpg" class="image">
<img alt="EP174b Case.jpg" src="/wiki/images/thumb/0/09/EP174b_Case.jpg/290px-EP174b_Case.jpg" width="290" height="218" srcset="/wiki/images/thumb/0/09/EP174b_Case.jpg/435px-EP174b_Case.jpg 1.5x, /wiki/images/thumb/0/09/EP174b_Case.jpg/580px-EP174b_Case.jpg 2x">
</a>
</div>
<div style="padding-left: 5px; width: 100%;">
<div style="padding: 3px 0; border-top: 1px dotted;">
<span style="width: 90px; display: inline-block;">
<strong>Location:</strong>
</span>
<span>Front of the ship</span>
</div>
</div>
</div>
</div>
</div>
</pre>
</div>

</div>
<hr>

= Template:InfoBox Heist =
=== old ===
{{User:R0o0di/Sandbox/Old InfoBox Heist
| heist = Heist
| image = MK16 Heist1.jpg
| thief = [[Kaitou Kid]]
| thief-label = Thief
| target = Blue Wonder
| owner = [[Jirokichi Suzuki]]
| location = Suzuki Museum
| date = October 12
| notice = It's my pleasure to accept your challenge. I'll appear at 8:00 PM on October 12th. Expect my first appearance the eve just before. PS. Just like Blue Wonder's name, I'll walk in from the sky.
| description = Golden sculpture holding the blue jewel.
}}

=== new ===
{{User:R0o0di/Sandbox/New InfoBox Heist
| heist = Heist
| image = MK16 Heist1.jpg
| thief = [[Kaitou Kid]]
| thief-label = Thief
| target = Blue Wonder
| owner = [[Jirokichi Suzuki]]
| location = Suzuki Museum
| date = October 12
| notice = It's my pleasure to accept your challenge. I'll appear at 8:00 PM on October 12th. Expect my first appearance the eve just before. PS. Just like Blue Wonder's name, I'll walk in from the sky.
| description = Golden sculpture holding the blue jewel.
}}
=== Differences ===
blabla you alr know the drill same as previous ones

User:R0o0di/Sandbox/Poem2

2026-07-15T09:55:37Z

R0o0di: Created page with "{{#tag:poem|{{{1}}} }}"

{{#tag:poem|{{{1}}} }}

User:R0o0di/Sandbox

2026-07-15T09:52:28Z

R0o0di: /* Lyrics */

== Lyrics ==
=== ^test 1 ===
<poem>
AA
BB

CC
DD
</poem>

=== test 2 ===
<tabs>
{{#tab:tttt|
<poem>
AA
BB

CC
DD
</poem>
}}
</tabs>

=== test 3 ===
{{User:R0o0di/Sandbox/Poem|
AA
BB

CC
DD
}}

<div class="ttt"> helloooo </div>
{{code
|css=
/*IMAGE SLIDESHOW*/
.slideshow-container {
place-self: center;
position: relative;
width: 100%;
max-width: 1150px;
overflow: hidden;
/* visibility: hidden; */
padding: 10px 0;
}

.slideshow-container.ready {
visibility: visible;
}

.slides-wrapper {
display: flex;
transition: transform 0.5s ease-in-out;
}

.slide {
min-width: 350px;
margin: 0 15px;
flex-shrink: 0;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* .slide img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
} */

.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 1.5rem;
color: white;
background: rgba(0, 0, 0, 0.4);
padding: 0.4rem 0.8rem;
cursor: pointer;
user-select: none;
z-index: 2;
border-radius: 6px;
}

.arrow:hover {
background: rgba(0, 0, 0, 0.5);
}

.arrow.left {
left: 10px;
}

.arrow.right {
right: 10px;
}

/* CARD CLASSES */
.cards {
display: flex;
flex-direction: column;
gap: 8px;
}

.card {
border: 2px solid #ccc;
padding: 5px;
width: 100%;
height: 100%;
box-sizing: border-box;
transition: transform 0.3s ease;
}

.card:hover {
transform: scale(1.03);
filter: brightness(0.85);
}

.card-header {
background: #6699CC;
color: white;
text-align: center;
font-size: 130%;
padding: 5px;
}

.card-body {
padding: 5px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 87%;
}

.card-image-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}

.card-image {
text-align: center;
margin: 0;
}

.card-image img {
max-height: 170px;
width: auto;
}

.card-title,
.card-title-next {
text-align: center;
}

.card-title {
padding-bottom: 5px;
}

.card-title-next {
padding-top: 5px;
}

.card-title-next p {
margin: 0;
}

hr {
margin: 0.2em 0;
}
/* END CARD CLASSES */

/* PROGRESS BAR CLASSES */
.sidescroll-progress-bar-container {
display: flex;
justify-content: center;
margin-top: 2px;
}

.sidescroll-progress-bar-background {
position: relative;
border-radius: 999px;
width: 200px;
height: 3px;
background: #ddd;
}

.sidescroll-progress-bar {
position: absolute;
left: 0;
border-radius: 999px;
background: #494949;
height: 100%;
}
/* END OF PROGRESS BAR CLASSES*/
}}

{{User:R0o0di/Sandbox/Latest news

| Regular Airtime = 6:00 PM




| S1 Case First-Last Ep =
| S1 Episode Number = 1201
| S1 Case Name = I'm the Culprit
| S1 Case Part Name =
| S1 Episode Airdate = May 9, 2026
| S1 Episode Airtime =

| S2 Case First-Last Ep =
| S2 Episode Number = 1202
| S2 Case Name =
| S2 Case Part Name =
| S2 Episode Airdate = May 30, 2026
| S2 Episode Airtime =

| S3 Case First-Last Ep =
| S3 Episode Number =
| S3 Case Name =
| S3 Case Part Name =
| S3 Episode Airdate =
| S3 Episode Airtime =

| Anime footnotes =


| Regular Yaiba Airtime = 5:30 PM

| S1 Yaiba First-Last Ep =
| S1 Yaiba Episode Number =
| S1 Yaiba Name =
| S1 Yaiba Part Name =
| S1 Yaiba Episode Airdate =
| S1 Yaiba Episode Airtime =

| S2 Yaiba First-Last Ep =
| S2 Yaiba Episode Number = 24
| S2 Yaiba Name = The Lunar Invaders
| S2 Yaiba Part Name =
| S2 Yaiba Episode Airdate = September 27, 2025
| S2 Yaiba Episode Airtime =

| S3 Yaiba First-Last Ep =
| S3 Yaiba Episode Number =
| S3 Yaiba Name =
| S3 Yaiba Part Name =
| S3 Yaiba Episode Airdate =
| S3 Yaiba Episode Airtime =

| Yaiba footnotes = '''Next:''' Season 2 <br> Dates are to be confirmed


| Latest chapter number = 1162
| Latest chapter name = The Detective on Our Side
| Latest chapter date = April 22, 2026

| Next chapter number = 1163
| Next chapter name =
| Next chapter date = June 24, 2026

| Manga footnotes =
}}<noinclude>
[[Category:Templates]]</noinclude>

= Template:Char Appearances & Template:Char =
=== old ===
{{User:R0o0di/Sandbox/Old Char Appearances|
{{User:R0o0di/Sandbox/Old Char|Conan Edogawa}}
{{User:R0o0di/Sandbox/Old Char|Ran Mouri}}
{{User:R0o0di/Sandbox/Old Char|Kogoro Mouri}}
{{User:R0o0di/Sandbox/Old Char|Eri Kisaki|display=Eri Kisaki (background)}}
{{User:R0o0di/Sandbox/Old Char|Heiji Hattori}}
{{User:R0o0di/Sandbox/Old Char|Hiroshi Agasa}}
{{User:R0o0di/Sandbox/Old Char|Ai Haibara}}
{{User:R0o0di/Sandbox/Old Char|Kazuha Toyama|display=Kazuha Toyama (background)}}
}}

=== new ===
{{User:R0o0di/Sandbox/CharAppearances2|
{{User:R0o0di/Sandbox/Char2|Conan Edogawa}}
{{User:R0o0di/Sandbox/Char2|Ran Mouri}}
{{User:R0o0di/Sandbox/Char2|Kogoro Mouri}}
{{User:R0o0di/Sandbox/Char2|Eri Kisaki|display=Eri Kisaki (background)}}
{{User:R0o0di/Sandbox/Char2|Heiji Hattori}}
{{User:R0o0di/Sandbox/Char2|Hiroshi Agasa}}
{{User:R0o0di/Sandbox/Char2|Ai Haibara}}
{{User:R0o0di/Sandbox/Char2|Kazuha Toyama|display=Kazuha Toyama (background)}}
}}
=== Differences ===
<div class="mw-collapsible mw-collapsed">
<strong>difficult to read, too many unnecessary elements, outdated css</strong>
<div style="overflow:auto;">
<pre style="width:max-content">
<div style="vertical-align: top; height: auto; overflow: auto; clear: left; margin-bottom: 2px; ">
<table class="char-appearances-table" style="border: 1px dotted #7BA1EC;">
<tbody>
<tr>
<th style="background: #7BA1EC; color: #ffffff; text-align: left; padding-left: 5px;">Characters</th>
</tr>
<tr>
<td>
<table class="char-appearances-table">
<tbody>
<tr>
<td>
<div style="float:left; font-size: 90%;" class="char-image">
<div class="center">
<div class="thumb tnone">
<div class="thumbinner" style="width:102px;">
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa">
<img alt="Conan Edogawa"src="/wiki/images/4/4f/Conan_Edogawa.jpg" width="100" height="100"></a>
<div class="thumbcaption">
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa">Conan Edogawa</a>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</pre>
</div>

<strong>less complicated structure, better readability, 66% shorter, better css, achieves same results </strong>
<div style="overflow:auto;">
<pre style="width:max-content">
<div style="overflow: auto; margin-bottom: 2px;">
<div style="border: 1px dotted #7BA1EC; width: max-content;">
<div style="background: #7BA1EC; color: #ffffff; padding-left: 5px; font-weight:bold;">Characters</div>
<div style="display:flex; overflow: auto; width: min-content; font-size: 90%; text-align: center;">
<div style="margin: 5px 3px; background: #6969fa7a; border: 1px solid #c8ccd1; border-radius: .25rem; height: min-content;">
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa"><img alt="Conan Edogawa" src="/wiki/images/4/4f/Conan_Edogawa.jpg" width="100" height="100"></a><br>
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa">Conan Edogawa</a>
</div>
</div>
</div>
</div>
</pre>
</div>

</div>
<hr>

= Template:Gadgets Appearances & Template:Gadget =
=== old ===
{{User:R0o0di/Sandbox/Old Gadgets Appearances|
{{User:R0o0di/Sandbox/Old Gadget|Voice-Changing Bowtie}}
{{User:R0o0di/Sandbox/Old Gadget|Power-Enhancing Kick Shoes}}
{{User:R0o0di/Sandbox/Old Gadget|Stun-Gun Wristwatch}}
{{User:R0o0di/Sandbox/Old Gadget|Detective Boys Badge}}
{{User:R0o0di/Sandbox/Old Gadget|Turbo Engine Skateboard}}
}}

=== new ===
{{User:R0o0di/Sandbox/New Gadgets Appearances|
{{User:R0o0di/Sandbox/New Gadget|Voice-Changing Bowtie}}
{{User:R0o0di/Sandbox/New Gadget|Power-Enhancing Kick Shoes}}
{{User:R0o0di/Sandbox/New Gadget|Stun-Gun Wristwatch}}
{{User:R0o0di/Sandbox/New Gadget|Detective Boys Badge}}
{{User:R0o0di/Sandbox/New Gadget|Turbo Engine Skateboard}}
}}
=== Differences ===
<div class="mw-collapsible mw-collapsed">
<strong>difficult to read, too many unnecessary elements, outdated css</strong>
<div style="overflow:auto;">
<pre style="width:max-content">
<div style="vertical-align: top; height: auto; overflow: auto; clear: left; margin-bottom: 2px; ">
<table class="gadget-appearances-table" style="border: 1px dotted #FF9900;">
<tbody>
<tr>
<th style="background: #FF9900; color: #ffffff; text-align: left; padding-left: 5px;">Gadgets</th>
</tr>
<tr>
<td>
<table class="char-appearances-table">
<tbody>
<tr>
<td>
<div style="float:left; font-size: 90%;" class="gadget-image">
<div class="center">
<div class="thumb tnone">
<div class="thumbinner" style="width:102px;">
<a href="/wiki/Voice-Changing_Bowtie" title="Voice-Changing Bowtie">
<img alt="Voice-Changing Bowtie" src="/wiki/images/8/86/Voice-Changing_Bowtie.jpg" width="100" height="100">
</a>
<div class="thumbcaption">
<a href="/wiki/Voice-Changing_Bowtie" title="Voice-Changing Bowtie">Voice-Changing Bowtie</a>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</pre>
</div>

<strong>less complicated structure, better readability, 66% shorter, better css, achieves same results </strong>
<div style="overflow:auto;">
<pre style="width:max-content">
<div style="overflow: auto; margin-bottom: 2px;">
<div style="border: 1px dotted #FF9900; width: max-content;">
<div style="background: #FF9900; color: #ffffff; padding-left: 5px; font-weight:bold;">Gadgets</div>
<div syle="display:flex; width: min-content; font-size: 90%; text-align: center;">
<div style="margin: 5px 3px; border: 1px solid #c8ccd1; border-radius: .25rem; height: min-content;">
<a href="/wiki/Voice-Changing_Bowtie" title="Voice-Changing Bowtie">
<img alt="Voice-Changing Bowtie" src="/wiki/images/8/86/Voice-Changing_Bowtie.jpg" width="100" height="100">
</a><br>
<a href="/wiki/Voice-Changing_Bowtie" title="Voice-Changing Bowtie">Voice-Changing Bowtie</a>
</div>

</div>
</div>
</div>
</pre>
</div>

</div>
<hr>

= Template:InfoBox Crime =
=== old ===
{{User:R0o0di/Sandbox/Old InfoBox Crime
| crime = Attempted Murder
| image = EP174b Case.jpg
| location = Front of the ship
| victim = [[Heiji Hattori]]
| cause-death = Thrown overboard
| cause-death-label = Attack types
| suspects = Unknown
| description = Heiji was pushed off the boat and into the ocean.
| footnotes = this is a footnote
}}

=== new ===
{{User:R0o0di/Sandbox/New InfoBox Crime
| crime = Attempted Murder
| image = EP174b Case.jpg
| location = Front of the ship
| victim = [[Heiji Hattori]]
| cause-death = Thrown overboard
| cause-death-label = Attack types
| suspects = Unknown
| description = Heiji was pushed off the boat and into the ocean.
| footnotes = this is a footnote
}}
=== Differences ===
<div class="mw-collapsible mw-collapsed">
<strong>too many unnecessary elements, outdated css</strong>
<div style="overflow:auto;">
<pre style="width:max-content">
<div style="overflow:auto">
<table class="infobox" style="width: 650px; text-align: left; font-size: 90%; float: none; clear: left; margin-left: 0; margin-right: 1em;" cellpadding="2">
<tbody>
<tr>
<td colspan="2" style="color: #ffffff; text-align:center; vertical-align:middle; font-size: small; background-color: #DF5829; ">
<b>Attempted Murder</b>
</td>
</tr>
<tr>
<td width="290" class="nospacing" style="text-align:center; vertical-align:top; padding: 2px 0px 0px 0px;">
<p>
<a href="/wiki/File:EP174b_Case.jpg" class="image">
<img alt="EP174b Case.jpg" src="/wiki/images/thumb/0/09/EP174b_Case.jpg/290px-EP174b_Case.jpg" width="290" height="218" srcset="/wiki/images/thumb/0/09/EP174b_Case.jpg/435px-EP174b_Case.jpg 1.5x, /wiki/images/thumb/0/09/EP174b_Case.jpg/580px-EP174b_Case.jpg 2x">
</a>
</p>
</td>
<td style="padding: 0px;">
<table class="infobox crime" width="100%" style="border: 0px; margin: 0px; padding: 0px 0px 0px 2px; font-size: 100%; border-collapse: separate; border-spacing: 1px" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th width="102" style="border-bottom: 1px dotted #cccccc;">Location: </th>
<td style="border-bottom: 1px dotted #cccccc;">Front of the ship</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</pre>
</div>

<strong>less complicated structure, better readability, 30% shorter, better css, achieves same results </strong>
<div style="overflow:auto;">
<pre style="width:max-content">
<div style="background: #f8f9fa; border: 1px solid #c8ccd1; border-radius: 5px; max-width: 550px;">
<div style="background: #DF5829; color: white; text-align: center; font-weight: bold; padding: 5px;">
Attempted Murder
</div>
<div style="overflow: auto; font-size: 90%;">
<div style="width: 550px; display: flex;">
<div>
<a href="/wiki/File:EP174b_Case.jpg" class="image">
<img alt="EP174b Case.jpg" src="/wiki/images/thumb/0/09/EP174b_Case.jpg/290px-EP174b_Case.jpg" width="290" height="218" srcset="/wiki/images/thumb/0/09/EP174b_Case.jpg/435px-EP174b_Case.jpg 1.5x, /wiki/images/thumb/0/09/EP174b_Case.jpg/580px-EP174b_Case.jpg 2x">
</a>
</div>
<div style="padding-left: 5px; width: 100%;">
<div style="padding: 3px 0; border-top: 1px dotted;">
<span style="width: 90px; display: inline-block;">
<strong>Location:</strong>
</span>
<span>Front of the ship</span>
</div>
</div>
</div>
</div>
</div>
</pre>
</div>

</div>
<hr>

= Template:InfoBox Heist =
=== old ===
{{User:R0o0di/Sandbox/Old InfoBox Heist
| heist = Heist
| image = MK16 Heist1.jpg
| thief = [[Kaitou Kid]]
| thief-label = Thief
| target = Blue Wonder
| owner = [[Jirokichi Suzuki]]
| location = Suzuki Museum
| date = October 12
| notice = It's my pleasure to accept your challenge. I'll appear at 8:00 PM on October 12th. Expect my first appearance the eve just before. PS. Just like Blue Wonder's name, I'll walk in from the sky.
| description = Golden sculpture holding the blue jewel.
}}

=== new ===
{{User:R0o0di/Sandbox/New InfoBox Heist
| heist = Heist
| image = MK16 Heist1.jpg
| thief = [[Kaitou Kid]]
| thief-label = Thief
| target = Blue Wonder
| owner = [[Jirokichi Suzuki]]
| location = Suzuki Museum
| date = October 12
| notice = It's my pleasure to accept your challenge. I'll appear at 8:00 PM on October 12th. Expect my first appearance the eve just before. PS. Just like Blue Wonder's name, I'll walk in from the sky.
| description = Golden sculpture holding the blue jewel.
}}
=== Differences ===
blabla you alr know the drill same as previous ones

2026-05-20T23:28:39Z

R0o0di:

2026-05-20T21:03:37Z

R0o0di:

=
<div class="ttt"> helloooo </div>
{{code
|css=
.ttt {
color:red;
}

}}
= Template:Char Appearances & Template:Char =
=== old ===
{{User:R0o0di/Sandbox/Old Char Appearances|
{{User:R0o0di/Sandbox/Old Char|Conan Edogawa}}
{{User:R0o0di/Sandbox/Old Char|Ran Mouri}}
{{User:R0o0di/Sandbox/Old Char|Kogoro Mouri}}
{{User:R0o0di/Sandbox/Old Char|Eri Kisaki|display=Eri Kisaki (background)}}
{{User:R0o0di/Sandbox/Old Char|Heiji Hattori}}
{{User:R0o0di/Sandbox/Old Char|Hiroshi Agasa}}
{{User:R0o0di/Sandbox/Old Char|Ai Haibara}}
{{User:R0o0di/Sandbox/Old Char|Kazuha Toyama|display=Kazuha Toyama (background)}}
}}

=== new ===
{{User:R0o0di/Sandbox/CharAppearances2|
{{User:R0o0di/Sandbox/Char2|Conan Edogawa}}
{{User:R0o0di/Sandbox/Char2|Ran Mouri}}
{{User:R0o0di/Sandbox/Char2|Kogoro Mouri}}
{{User:R0o0di/Sandbox/Char2|Eri Kisaki|display=Eri Kisaki (background)}}
{{User:R0o0di/Sandbox/Char2|Heiji Hattori}}
{{User:R0o0di/Sandbox/Char2|Hiroshi Agasa}}
{{User:R0o0di/Sandbox/Char2|Ai Haibara}}
{{User:R0o0di/Sandbox/Char2|Kazuha Toyama|display=Kazuha Toyama (background)}}
}}
=== Differences ===
<div class="mw-collapsible mw-collapsed">
<strong>difficult to read, too many unnecessary elements, outdated css</strong>
<div style="overflow:auto;">
<pre style="width:max-content">
<div style="vertical-align: top; height: auto; overflow: auto; clear: left; margin-bottom: 2px; ">
<table class="char-appearances-table" style="border: 1px dotted #7BA1EC;">
<tbody>
<tr>
<th style="background: #7BA1EC; color: #ffffff; text-align: left; padding-left: 5px;">Characters</th>
</tr>
<tr>
<td>
<table class="char-appearances-table">
<tbody>
<tr>
<td>
<div style="float:left; font-size: 90%;" class="char-image">
<div class="center">
<div class="thumb tnone">
<div class="thumbinner" style="width:102px;">
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa">
<img alt="Conan Edogawa"src="/wiki/images/4/4f/Conan_Edogawa.jpg" width="100" height="100"></a>
<div class="thumbcaption">
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa">Conan Edogawa</a>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</pre>
</div>

<strong>less complicated structure, better readability, 66% shorter, better css, achieves same results </strong>
<div style="overflow:auto;">
<pre style="width:max-content">
<div style="overflow: auto; margin-bottom: 2px;">
<div style="border: 1px dotted #7BA1EC; width: max-content;">
<div style="background: #7BA1EC; color: #ffffff; padding-left: 5px; font-weight:bold;">Characters</div>
<div style="display:flex; overflow: auto; width: min-content; font-size: 90%; text-align: center;">
<div style="margin: 5px 3px; background: #6969fa7a; border: 1px solid #c8ccd1; border-radius: .25rem; height: min-content;">
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa"><img alt="Conan Edogawa" src="/wiki/images/4/4f/Conan_Edogawa.jpg" width="100" height="100"></a><br>
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa">Conan Edogawa</a>
</div>
</div>
</div>
</div>
</pre>
</div>

</div>
<hr>

= Template:Gadgets Appearances & Template:Gadget =
=== old ===
{{User:R0o0di/Sandbox/Old Gadgets Appearances|
{{User:R0o0di/Sandbox/Old Gadget|Voice-Changing Bowtie}}
{{User:R0o0di/Sandbox/Old Gadget|Power-Enhancing Kick Shoes}}
{{User:R0o0di/Sandbox/Old Gadget|Stun-Gun Wristwatch}}
{{User:R0o0di/Sandbox/Old Gadget|Detective Boys Badge}}
{{User:R0o0di/Sandbox/Old Gadget|Turbo Engine Skateboard}}
}}

=== new ===
{{User:R0o0di/Sandbox/New Gadgets Appearances|
{{User:R0o0di/Sandbox/New Gadget|Voice-Changing Bowtie}}
{{User:R0o0di/Sandbox/New Gadget|Power-Enhancing Kick Shoes}}
{{User:R0o0di/Sandbox/New Gadget|Stun-Gun Wristwatch}}
{{User:R0o0di/Sandbox/New Gadget|Detective Boys Badge}}
{{User:R0o0di/Sandbox/New Gadget|Turbo Engine Skateboard}}
}}
=== Differences ===
<div class="mw-collapsible mw-collapsed">
<strong>difficult to read, too many unnecessary elements, outdated css</strong>
<div style="overflow:auto;">
<pre style="width:max-content">
<div style="vertical-align: top; height: auto; overflow: auto; clear: left; margin-bottom: 2px; ">
<table class="gadget-appearances-table" style="border: 1px dotted #FF9900;">
<tbody>
<tr>
<th style="background: #FF9900; color: #ffffff; text-align: left; padding-left: 5px;">Gadgets</th>
</tr>
<tr>
<td>
<table class="char-appearances-table">
<tbody>
<tr>
<td>
<div style="float:left; font-size: 90%;" class="gadget-image">
<div class="center">
<div class="thumb tnone">
<div class="thumbinner" style="width:102px;">
<a href="/wiki/Voice-Changing_Bowtie" title="Voice-Changing Bowtie">
<img alt="Voice-Changing Bowtie" src="/wiki/images/8/86/Voice-Changing_Bowtie.jpg" width="100" height="100">
</a>
<div class="thumbcaption">
<a href="/wiki/Voice-Changing_Bowtie" title="Voice-Changing Bowtie">Voice-Changing Bowtie</a>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</pre>
</div>

<strong>less complicated structure, better readability, 66% shorter, better css, achieves same results </strong>
<div style="overflow:auto;">
<pre style="width:max-content">
<div style="overflow: auto; margin-bottom: 2px;">
<div style="border: 1px dotted #FF9900; width: max-content;">
<div style="background: #FF9900; color: #ffffff; padding-left: 5px; font-weight:bold;">Gadgets</div>
<div syle="display:flex; width: min-content; font-size: 90%; text-align: center;">
<div style="margin: 5px 3px; border: 1px solid #c8ccd1; border-radius: .25rem; height: min-content;">
<a href="/wiki/Voice-Changing_Bowtie" title="Voice-Changing Bowtie">
<img alt="Voice-Changing Bowtie" src="/wiki/images/8/86/Voice-Changing_Bowtie.jpg" width="100" height="100">
</a><br>
<a href="/wiki/Voice-Changing_Bowtie" title="Voice-Changing Bowtie">Voice-Changing Bowtie</a>
</div>

</div>
</div>
</div>
</pre>
</div>

</div>
<hr>

= Template:InfoBox Crime =
=== old ===
{{User:R0o0di/Sandbox/Old InfoBox Crime
| crime = Attempted Murder
| image = EP174b Case.jpg
| location = Front of the ship
| victim = [[Heiji Hattori]]
| cause-death = Thrown overboard
| cause-death-label = Attack types
| suspects = Unknown
| description = Heiji was pushed off the boat and into the ocean.
| footnotes = this is a footnote
}}

=== new ===
{{User:R0o0di/Sandbox/New InfoBox Crime
| crime = Attempted Murder
| image = EP174b Case.jpg
| location = Front of the ship
| victim = [[Heiji Hattori]]
| cause-death = Thrown overboard
| cause-death-label = Attack types
| suspects = Unknown
| description = Heiji was pushed off the boat and into the ocean.
| footnotes = this is a footnote
}}
=== Differences ===
<div class="mw-collapsible mw-collapsed">
<strong>too many unnecessary elements, outdated css</strong>
<div style="overflow:auto;">
<pre style="width:max-content">
<div style="overflow:auto">
<table class="infobox" style="width: 650px; text-align: left; font-size: 90%; float: none; clear: left; margin-left: 0; margin-right: 1em;" cellpadding="2">
<tbody>
<tr>
<td colspan="2" style="color: #ffffff; text-align:center; vertical-align:middle; font-size: small; background-color: #DF5829; ">
<b>Attempted Murder</b>
</td>
</tr>
<tr>
<td width="290" class="nospacing" style="text-align:center; vertical-align:top; padding: 2px 0px 0px 0px;">
<p>
<a href="/wiki/File:EP174b_Case.jpg" class="image">
<img alt="EP174b Case.jpg" src="/wiki/images/thumb/0/09/EP174b_Case.jpg/290px-EP174b_Case.jpg" width="290" height="218" srcset="/wiki/images/thumb/0/09/EP174b_Case.jpg/435px-EP174b_Case.jpg 1.5x, /wiki/images/thumb/0/09/EP174b_Case.jpg/580px-EP174b_Case.jpg 2x">
</a>
</p>
</td>
<td style="padding: 0px;">
<table class="infobox crime" width="100%" style="border: 0px; margin: 0px; padding: 0px 0px 0px 2px; font-size: 100%; border-collapse: separate; border-spacing: 1px" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th width="102" style="border-bottom: 1px dotted #cccccc;">Location: </th>
<td style="border-bottom: 1px dotted #cccccc;">Front of the ship</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</pre>
</div>

<strong>less complicated structure, better readability, 30% shorter, better css, achieves same results </strong>
<div style="overflow:auto;">
<pre style="width:max-content">
<div style="background: #f8f9fa; border: 1px solid #c8ccd1; border-radius: 5px; max-width: 550px;">
<div style="background: #DF5829; color: white; text-align: center; font-weight: bold; padding: 5px;">
Attempted Murder
</div>
<div style="overflow: auto; font-size: 90%;">
<div style="width: 550px; display: flex;">
<div>
<a href="/wiki/File:EP174b_Case.jpg" class="image">
<img alt="EP174b Case.jpg" src="/wiki/images/thumb/0/09/EP174b_Case.jpg/290px-EP174b_Case.jpg" width="290" height="218" srcset="/wiki/images/thumb/0/09/EP174b_Case.jpg/435px-EP174b_Case.jpg 1.5x, /wiki/images/thumb/0/09/EP174b_Case.jpg/580px-EP174b_Case.jpg 2x">
</a>
</div>
<div style="padding-left: 5px; width: 100%;">
<div style="padding: 3px 0; border-top: 1px dotted;">
<span style="width: 90px; display: inline-block;">
<strong>Location:</strong>
</span>
<span>Front of the ship</span>
</div>
</div>
</div>
</div>
</div>
</pre>
</div>

</div>
<hr>

= Template:InfoBox Heist =
=== old ===
{{User:R0o0di/Sandbox/Old InfoBox Heist
| heist = Heist
| image = MK16 Heist1.jpg
| thief = [[Kaitou Kid]]
| thief-label = Thief
| target = Blue Wonder
| owner = [[Jirokichi Suzuki]]
| location = Suzuki Museum
| date = October 12
| notice = It's my pleasure to accept your challenge. I'll appear at 8:00 PM on October 12th. Expect my first appearance the eve just before. PS. Just like Blue Wonder's name, I'll walk in from the sky.
| description = Golden sculpture holding the blue jewel.
}}

=== new ===
{{User:R0o0di/Sandbox/New InfoBox Heist
| heist = Heist
| image = MK16 Heist1.jpg
| thief = [[Kaitou Kid]]
| thief-label = Thief
| target = Blue Wonder
| owner = [[Jirokichi Suzuki]]
| location = Suzuki Museum
| date = October 12
| notice = It's my pleasure to accept your challenge. I'll appear at 8:00 PM on October 12th. Expect my first appearance the eve just before. PS. Just like Blue Wonder's name, I'll walk in from the sky.
| description = Golden sculpture holding the blue jewel.
}}
=== Differences ===
blabla you alr know the drill same as previous ones