Styleclass and You: An Introduction

How would I change the color, height, and width of the buttons for the tabs? I've been messing around with it, but can't figure it out.

li { background: black; color: white; } li.tab-active { color: red; } .tab { color: black; } .tab-active { color: white; background: black; }

Try messing around with the margins in the code. Set it to something like 2% or whatever you think looks nice.

[styleclass=tabbed_interface][ ][ul][ ][li]Tab 1[/li][ ][li]Tab 2[/li][ ][/ul][ ][styleclass=tab-active]Contents 1[/styleclass][ ][styleclass=tab]Contents 2[/styleclass][ ][/styleclass] [style] li { } li.tab-active { width: 100%; } .tab { width: 50%; } .tab-active { width: 50%; } [/style]

[styleclass=reset][styleclass=Background] [styleclass=img][tip=Edited by BayleafBeeen][img]http://piskel-imgstore-b.appspot.com/img/258716a6-247e-11e6-9764-9376a457faf4.gif[/img][/tip][/styleclass] [styleclass=header][center] Welcome to LadyElemental's Shop[/center][/styleclass] [styleclass=link][styleclass=Body] My mistress has many things up for trade, and each category will have its own tab, from Mega Stones, to spare unwanted Summons and varying evolution items. Each tab will also include prices she will be willing to sell the items for, and are negotiable. She will accept mixed payments and is generally easy going. *Made by BayleefBean [/styleclass] [styleclass=container][styleclass=tab1][styleclass=tab1hide][styleclass=tab1text]Rules[/styleclass][/styleclass][styleclass=imgt1][img]http://i1196.photobucket.com/albums/aa415/Shadoul01/Orders/torterra%20fus.png[/img][/styleclass][styleclass=tab1body][size=9]These are very important. Typical PFQ rules apply. 1. No double posting. 2. State what you want and what you're offering. 3. [size=11]PLEASE BE GRAMMATICAL![/size] I am really big on grammar, and if you don't spell something correctly, I'm going to be confused and have no idea what you're on about. So please, use correct spelling and grammar. I'm generally lenient when it comes to my shop, but even I have limits. 4. I know that it is stated below, but [color=red]no offering on future hunts[/color]. Due to my tendency to hunt Event Pokemon, my hunts take a long time. And unless you're willing to wait for months, possibly years, on one of my future hunts [color=red]do not offer[/color]. 5. [size=11]READ MY PRICES PLEASE![/size] You (customers) PMing me orders for normal Apocalyptic Poochyena is fine, but [i]please[/i] don't ask how much I want for them. It is stated [i]in the first post[/i] so the asking is completely unneccesary. 6. I won't hunt any Pokemon of any particular gender, berry, or nature preference. Whatever you get, well it isn't a custom hunt spot, it is just a general one. So if you want a particular gender, berry or nature, you'll just have to cross your fingers that I'll get it. This is for [b]hunts[/b], [i]not[/i] any requests for a normal Pokemon that I'm hunting. 7. If you order a normal Event Pokemon from me, expect a trade almost right away if I'm online. Those offers are almost automatic acceptance because I have way more than I need to. If you don't accept or offer on the trade after a week has passed, I'll just cancel the trade and it will be up to [b][i]you[/i][/b] to send me a trade to pick up your order. This will also go for any [i]other[/i] orders, but typically I make an announcement for those. 8. If I've completed your order and posted that I've completed your order and you haven't responded back to me, either through the shop or PM after a week, your order will be moved to the bottom of the list, and I will send the order to the next person. [/size] *Made by Cerberus [/styleclass] [/styleclass] [/styleclass][styleclass=tab2][styleclass=tab2hide][styleclass=tab2text]Hunt Spots[/styleclass][/styleclass][styleclass=imgt2][img]http://i.imgur.com/fmHgvih.png[/img][/styleclass] [styleclass=tab2body][size=10] Hi, I'm LadyElemental's [b]Ultimate[/b]. That's my name as well. I am a Dikiaheaterra, Blaze probably mentioned me earlier. I am super protective of LadyElemental, so I've got some requests for you. Don't offer on future hunts. Since she hunts Exclusives or PFQ variants often, her hunts take time, even more so because she doesn't use HM, UC, or SC. [/size][size=9] [hide=Current Hunts] [accordion] [a-section=Apocalyptic Poochyena Hunts] [accordion] [a-section=Shiny Apocalyptic Poochyena Hunt*Closed*14/12] 1. Me (complete) 2. Me (complete) 3. Princess Luna - 10Z (complete!) 4. Princess Luna - 150GP (complete!) 5. Gyro - 150GP (complete!) 6. Gyro - 150GP (complete!) 7. Addonia - 150GP (complete!) 8. Addonia - 150GP (complete!) 9. Mom - shiny early bird natu (complete!) 10. Sandslash666 - Shiny Celebi (complete!) 11. Wardove - Unknown Payment (complete!) 12. Yuuki - Rapidite Q (1/2) [/a-section] [a-section=Albino Apocalyptic Poochyena Hunt 7/10] 1. Me (complete) 2. Me (complete) 3. Mom 4. Gyro - 200GP (complete!) 5. PrincessLuna - 300GP (complete) 6. N Harmonia - 300GP (complete) 7. Sandslash666 - Albino Celebi (complete) 8. 2pVaporeon - 200GP (complete) 9. Yuuki - Rapidite Q 10. [/a-section] [a-section=Melanstic Apocalyptic Poochyena Hunt 0/5] 1. Me 2. Me 3. RyuokoWolf - 450GP 4. ApricornDivision - 500GP 5. Alvilda - 1500ZC [/a-section] [/accordion] [/a-section][/accordion][/hide][/size] *Made by Absol4Life [/styleclass] [/styleclass] [styleclass=tab3][styleclass=tab3hide][styleclass=tab3text]Current Hunt [/styleclass][/styleclass][styleclass=imgt3][img]http://i.imgur.com/htSZFK8.png[/img][/styleclass] [styleclass=tab3body] [size=11] Hey! I'm Flare, and she's Corona. This is where you can see our Mistress' progress on her current hunt! Apocalyptic Poochyena Hunt 14/12 Shinies hatched 6/10 Albinos hatched 0/5 Melans hatched 1735 hatched This has already been asked, but please don't offer on future hunts. Since her hunts can take a long time (especially because of melanstics, oh how she loves those), she doesn't want to keep people waiting! [/size] *Made by BayleefBean [/styleclass] [/styleclass] [styleclass=tab4][styleclass=tab4hide][styleclass=tab4text]Mega Stones[/styleclass][/styleclass][styleclass=imgt4][img]http://i1196.photobucket.com/albums/aa415/Shadoul01/Orders/Winter%20del.png[/img][/styleclass] [styleclass=tab4body][colour=#cae1ff][size=10] Welcome. I am the winter representation of Delphox. Please call me Tsumetai, so Tsu for short. She sells Mega Stones here. The number she owns is in front of the Mega Stone, and if there is a negative sign in front of the number, then that is the number she is seeking[/size][table] [tr] [th]Tier 1[/th] [td][inventory=Abomasite][tip=Abomasite][item=Abomasite][/tip][inventory=Ampharosite][tip=Ampharosite][item=Ampharosite][/tip][inventory=Beedrillite][tip=Beedrilite][item=Beedrillite][/tip][inventory=Cameruptite][tip=Cameruptite][item=Cameruptite][/tip][inventory=Gyaradosite][tip=Gyaradosite][item=Gyaradosite][/tip][inventory=Houndoominite][tip=Houndoominite][item=Houndoominite][/tip][inventory=Lopunnite][tip=Lopunnite][item=Lopunnite][/tip][inventory=Mawilite][tip=Mawilite][item=Mawilite][/tip][inventory=Pidgeotite][tip=Pidgeotite][item=Pidgeotite][/tip][inventory=Sharpedonite][tip=Sharpedonite][item=Sharpedonite][/tip] [/td] [/tr] [tr] [th]Tier 2[/th] [td][inventory=Absolite-4][tip=Absolite][item=Absolite][/tip][inventory=Aggronite][tip=Aggronite][item=Aggronite][/tip][inventory=Alakazite][tip=Alakazite][item=Alakazite][/tip][inventory=Altarianite][tip=Altarianite][item=Altarianite][/tip][inventory=Banettite-2][tip=Banettite][item=Banettite][/tip][inventory=Galladite-4][tip=Galladite][item=Galladite][/tip][inventory=Gardevoirite-4][tip=Gardevoirite][item=Gardevoirite][/tip][inventory=Gengarite][tip=Gengarite][item=Gengarite][/tip][inventory=Glalitite][tip=Glalitite][item=Glalitite][/tip] [inventory=Heracronite][tip=Heracronite][item=Heracronite][/tip][inventory=Lucarionite-1][tip=Lucarionite][item=Lucarionite][/tip][inventory=Manectite-1][tip=Manectite][item=Manectite][/tip][inventory=Medichamite][tip=Medichamite][item=Medichamite][/tip][inventory=Pinsirite][tip=Pinsirite][item=Pinsirite][/tip][inventory=Scizorite-1][tip=Scizorite][item=Scizorite][/tip][inventory=Slowbronite][tip=Slowbronite][item=Slowbronite][/tip][inventory=Steelixite-4][tip=Steelixite][item=Steelixite][/tip] [/td] [/tr] [tr] [th]Tier 3[/th] [td][inventory=Audinite][tip=Audinite][item=Audinite][/tip][inventory=Aerodactylite][tip=Aerodactylite][item=Aerodactylite][/tip][inventory=Garchompite][tip=Garchompite][item=Garchompite][/tip][inventory=Kangaskhanite][tip=Kangaskhanite][item=Kangaskhanite][/tip][inventory=Metagrossite-3][tip=Metagrossite][item=Metagrossite][/tip][inventory=Sablenite][tip=Sablenite][item=Sablenite][/tip][inventory=Salamencite][tip=Salamencite][item=Salamencite][/tip][inventory=Tyranitarite-3][tip=Tyranitarite][item=Tyranitarite][/tip] [/td] [/tr] [tr] [th]Tier 4[/th] [td][inventory=Blastoisinite][tip=Blastoisinite][item=Blastoisinite][/tip][inventory=Blazikenite-2][tip=Blazikenite][item=Blazikenite][/tip][inventory=Charizardite X-3][tip=Charizardite X][item=Charizardite X][/tip][inventory=Charizardite Y-4][tip=Charizardite Y][item=Charizardite Y][/tip][inventory=Diancite][tip=Diancite][item=Diancite][/tip][inventory=Latiasite][tip=Latiasite][item=Latiasite][/tip][inventory=Latiosite][tip=Latiosite][item=Latiosite][/tip][inventory=Meteorite][tip=Meteorite][item=Meteorite][/tip][inventory=Mewtwonite X][tip=Mewtwonite X][item=Mewtwonite X][/tip] [inventory=Mewtwonite Y][tip=Mewtwonite Y][item=Mewtwonite Y][/tip][inventory=Sceptilite][tip=Sceptilite][item=Sceptilite][/tip][inventory=Swampertite][tip=Swampertite][item=Swampertite][/tip][inventory=Venusaurite][tip=Venusaurite][item=Venusaurite][/tip] [/td] [/tr][tr] [th]Tier 5[/th] [td][inventory=Adamantite][tip=Adamantite][item=Adamantite][/tip][inventory=Arbokite Q][tip=Arbokite Q][item=Arbokite Q][/tip][inventory=Arcanite Q-2][tip=Arcanite Q][item=Arcanite Q][/tip][inventory=Butterfrite Q][tip=Butterfrite Q][item=Butterfrite Q][/tip][inventory=Flygonite Q-4][tip=Flygonite Q][item=Flygonite Q][/tip][inventory=Floatzelite Q][tip=Floatzelite Q][item=Floatzelite Q][/tip][inventory=Furretite Q][tip=Furretite Q][item=Furretite Q][/tip][inventory=Ho-Oh-nite Q-1][tip=Ho-Oh-nite Q][item=Ho-Oh-nite Q][/tip][inventory=Jumpluffite Q][tip=Jumpluffite Q][item=Jumpluffite Q][/tip] [inventory=Jynxite Q][tip=Jynxite Q][item=Jynxite Q][/tip][inventory=Korokunite Q-4][tip=Korokunite Q][item=Korokunite Q][/tip][inventory=Leafeonite Q-1][tip=Leafeonite Q][item=Leafeonite Q][/tip][inventory=Lugianite Q][tip=Lugianite Q][item=Lugianite Q][/tip][inventory=Lunupinite Q-3][tip=Lunupinite Q][item=Lunupinite Q][/tip][inventory=Luxraynite Q-4][tip=Luxraynite Q][item=Luxraynite Q][/tip][inventory=Manectite Q-3][tip=Manectite Q][item=Manectite Q][/tip][inventory=Mightyenite Q-4][tip=Mightyenite Q][item=Mightyenite Q][/tip][inventory=Ninetaleite Q-4][tip=Ninetaleite Q][item=Ninetaleite Q][/tip] [inventory=Raichunite Q][tip=Raichunite Q][item=Raichunite Q][/tip][inventory=Rapidite Q-4][tip=Rapidite Q][item=Rapidite Q][/tip][inventory=Sevipernite Q][tip=Sevipernite Q][item=Sevipernite Q][/tip][inventory=Skarmorite Q-4][tip=Skarmorite Q][item=Skarmorite Q][/tip][inventory=Zangoosite Q][tip=Zangoosite Q][item=Zangoosite Q][/tip][inventory=Zoroarkite Q][tip=Zoroarkite Q][item=Zoroarkite Q][/tip][inventory=Wailordite Q][tip=Wailordite Q][item=Wailordite Q][/tip][inventory=Umbreonite Q-4][tip=Umbreonite Q][item=Umbreonite Q][/tip][inventory=Jirachinite Q-1][tip=Jirachinite Q][item=Jirachinite Q][/tip] [inventory=Laprasite Q-2][tip=Laprasite Q][item=Laprasite Q][/tip][inventory=Flareonite Q-1][tip=Flareonite Q][item=Flareonite Q][/tip][inventory=Breloomite Q][tip=Breloomite Q][item=Breloomite Q][/tip] [/td] [/tr] [/table] [/colour] [/styleclass] [/styleclass] [styleclass=tab5][styleclass=tab5hide][styleclass=tab5text]Summons[/styleclass][/styleclass][styleclass=imgt5][img]http://i1196.photobucket.com/albums/aa415/Shadoul01/Orders/primal%20torterra.png[/img][/styleclass] [styleclass=tab5body][size=9] Hello there. I am a [b]Primal[/b] Torterra. I guard LadyElemental's Summons. It should be noted she has only summoned Yvetal, despite her varying Legendaries in her fields. She also likes collecting Death Wings, Ice Fangs, Ice Feathers, and Ruby Orbs. Beyond that she has a certain affinity for other Legendaries as well including: Dialga, Palkia, Heatran, Lugia, and Ho-Oh. So unless she has summoned one of them, those summons will be off-limits. [/size] [table] [tr] [th][background=#FFC125]Kanto [/background][/th] [td][inventory=Ice Feather][tip=Ice Feather][item=Ice Feather][/tip][/td][td][inventory=Fire Feather][tip=Fire Feather][item=Fire Feather][/tip][/td][td][inventory=Thunder Feather][tip=Thunder Feather][item=Thunder Feather][/tip][/td][td][inventory=Cloned Sash][tip=Cloned Sash][item=Cloned Sash][/tip][/td][td][inventory=Origin Sash][tip=Origin Sash][item=Origin Sash][/tip][/td] [/tr] [tr] [th][background=#FFC125]Johto [/background][/th] [td][inventory=Ice Fang][tip=Ice Fang][item=Ice Fang][/tip][/td][td][inventory=Fire Fang][tip=Fire Fang][item=Fire Fang][/tip][/td][td][inventory=Thunder Fang][tip=Thunder Fang][item=Thunder Fang][/tip][/td][td][inventory=Clear Bell][tip=Clear Bell][item=Clear Bell][/tip][/td][td][inventory=Tidal Bell][tip=Tidal Bell][item=Tidal Bell][/tip][/td][td][inventory=GS Ball][tip=GS Ball][item=GS Ball][/tip][/td] [/tr] [tr] [th][background=#FFC125]Hoenn [/background][/th] [td][inventory=Rock Statue][tip=Rock Statue][item=Rock Statue][/tip][/td][td][inventory=Ice Statue][tip=Ice Statue][item=Ice Statue][/tip][/td][td][inventory=Steel Statue][tip=Steel Statue][item=Steel Statue][/tip][/td][td][inventory=Wishing Stone][tip=Wishing Stone][item=Wishing Stone][/tip][/td][td][inventory=Ruby Orb][tip=Ruby Orb][item=Ruby Orb][/tip][/td][td][inventory=Sapphire Orb][tip=Sapphire Orb][item=Sapphire Orb][/tip][/td][td][inventory=Jade Orb][tip=Jade Orb][item=Jade Orb][/tip][/td][td][inventory=Helix Orb][tip=Helix Orb][item=Helix Orb][/tip][/td][td][inventory=Red Soul Dew][tip=Red Soul Dew][item=Red Soul Dew][/tip][/td][td][inventory=Blue Soul Dew][tip=Blue Soul Dew][item=Blue Soul Dew][/tip][/td] [/tr] [tr] [th][background=#FFC125]Sinnoh [/background][/th] [td][inventory=Kusanagi][tip=Kusanagi][item=Kusanagi][/tip][/td][td][inventory=Kagami][tip=Kagami][item=Kagami][/tip][/td][td][inventory=Magatama][tip=Magatama][item=Magatama][/tip][/td][td][inventory=Adamant Orb][tip=Adamant Orb][item=Adamant Orb][/tip][/td][td][inventory=Lustrous Orb][tip=Lustrous Orb][item=Lustrous Orb][/tip][/td][td][inventory=Griseous Orb][tip=Griseous Orb][item=Griseous Orb][/tip][/td][td][inventory=Azure Flute][tip=Azure Flute][item=Azure Flute][/tip][/td][td][inventory=Gold Statue][tip=Gold Statue][item=Gold Statue][/tip][/td][td][inventory=Gracidea Seed][tip=Gacidea Seed][item=Gracidea Seed][/tip][/td][td][inventory=Sea Crown][tip=Sea Crown][item=Sea Crown][/tip][/td][td][inventory=Lunar Wing][tip=Lunar Wing][item=Lunar Wing][/tip][/td][td][inventory=Nightmare Shroud][tip=Nightmare Shroud][item=Nightmare Shroud][/tip][/td][td][inventory=Magma Stone][tip=Magma Stone][item=Magma Stone][/tip][/td] [/tr] [tr] [th][background=#FFC125]Unova [/background][/th] [td][inventory=Fujin's Lamp][tip=Fujin's Lamp][item=Fujin's Lamp][/tip][/td][td][inventory=Raijin's Lamp][tip=Raijin's Lamp][item=Raijin's Lamp][/tip][/td][td][inventory=Inari's Lamp][tip=Inari's Lamp][item=Inari's Lamp] [/tip][/td][td][inventory=White Stone][tip=White Stone][item=White Stone][/tip][/td][td][inventory=Black Stone][tip=Black Stone][item=Black Stone][/tip][/td][td][inventory=Gray Stone][tip=Gray Stone][item=Gray Stone][/tip][/td][td][inventory=Victory Medal][tip=Victory Medal][item=Victory Medal][/tip][/td][td][inventory=Music Box][tip=Music Box][item=Music Box][/tip][/td][td][inventory=Ancient Drive][tip=Ancient Drive][item=Ancient Drive][/tip][/td][td][inventory=Cobalt Epee][tip=Cobalt Epee][item=Cobalt Epee][/tip][/td][td][inventory=Viridian Epee][tip=Viridian Epee][item=Viridian Epee][/tip][/td][td][inventory=Terracotta Epee][tip=Terracotta Epee][item=Terracotta Epee][/tip][/td][td][inventory=Apprentice's Epee][tip=Apprentice's Epee][item=Apprentice's Epee][/tip][/td] [/tr] [tr] [th][background=#FFC125]Kalos [/background][/th] [td][inventory=Life Antler][tip=Life Antler][item=Life Antler][/tip][/td][td][inventory=Death Wing][tip=Death Wing][item=Death Wing][/tip][/td][td][inventory=Order's Crest][tip=Order's Crest][item=Order's Crest][/tip][/td][td][inventory=Diamond Tiara][tip=Diamond Tiara][item=Diamond Tiara][/tip][/td][td][inventory=Hyperspace Ring][tip=Hyperspace Ring][item=Hyperspace Ring][/tip][/td][td][inventory=Komainu Figurine][tip=Komainu Figurine][item=Komainu Figurine][/tip][/td] [/tr] [/table] *Made by Cerberus [/styleclass] [/styleclass] [styleclass=tab6][styleclass=tab6hide][styleclass=tab6text]Dex Trades[/styleclass][/styleclass][styleclass=imgt6][img]http://i1196.photobucket.com/albums/aa415/Shadoul01/Orders/xd001%20luc.png[/img][/styleclass] [styleclass=tab6body] [size=11][color=silver] Good day. I am LadyElemental's bodyguard. She does Dex Trades here, but she's also willing to sell Pokemon now, as a result of her beginning to take her hoarding seriously. For Dex Trades you may request any Pokemon in her fields, but if they are in her royalty, court, hoard, or breeding fields she will want them back. She has a select number of Shinies and Albinos she is willing to dex trade as well. Those are her shiny Pawniard, Apocalyptic Poochyena, and Mega Zoroark. She also has an Albino Apocalyptic Poochyena she is willing to dex trade. However, she is missing several other Mega dex entries and shiny entries, so if you would be so kind to offer one or the other as collateral that would be much appreciated. Otherwise, you can pay 1k credits for a normal Pokemon entry (she will add in the trade whether or not you may keep the Pokemon), 10k credits or 20GP for a shiny entry (+5k or 15GP for Mega), 30k credits or 50GP for an albino entry, 10k credits or 10GP for a normal Legendary entry, 50GP for a shiny Legendary Entry, or 100GP for an albino Legendary entry (of which she has none at the moment). *Made by Cerberus [/color][/size] [/styleclass] [/styleclass] [styleclass=tab7][styleclass=tab7hide][styleclass=tab7text]News[/styleclass][/styleclass][styleclass=imgt7][img]http://i1196.photobucket.com/albums/aa415/Shadoul01/Orders/empol%20fus.png[/img][/styleclass] [styleclass=tab7body] [size=12] Have Apocalyptic Poochyena for sale. Buy them. I insist. I ask for [b][u]10GP[/u][/b] or [b][u]5k credits[/u][/b]. If you want to add more, go right ahead. If you PM me regarding it, or post in my shop, it is basic automatic acceptance. So, as soon as I know that you want one, I'll send it over. If you don't pick it up within a week, well I'll go ahead and put it away. Afterwards you can send me the trade if you still want one. Now, please don't inquire about prices. The prices are [b][i][u]right here[/u][/i][/b]. In this [i]very[/i] box. It isn't that hard to read. So please, say you're interested then expect a trade...if I'm online of course. *made by Cerberus [/size] [/styleclass] [/styleclass] [styleclass=tab8][styleclass=tab8hide][styleclass=tab8text]Evo Items[/styleclass][/styleclass][styleclass=imgt8][img]http://i.imgur.com/7LxPz4i.png[/img][/styleclass] [styleclass=tab8body] [size=11][color=#fffff0] [/color][/size][color=#f8f8ff] [table] [tr] [th=5x1]Stones[/th] [/tr] [tr] [td][tip=Dawn Stone][item=Dawn Stone][/tip] x[inventory=Dawn Stone][/td] [td][tip=Dusk Stone][item=Dusk Stone][/tip] x[inventory=Dusk Stone][/td] [td][tip=Fire Stone][item=Fire Stone][/tip] x[inventory=Fire Stone][/td] [td][tip=Leaf Stone][item=Leaf Stone][/tip] x[inventory=Leaf Stone][/td] [td][tip=Moon Stone][item=Moon Stone][/tip] x[inventory=Moon Stone][/td] [/tr] [tr] [td][tip=Oval Stone][item=Oval Stone][/tip] x[inventory=Oval Stone][/td] [td][tip=Shiny Stone][item=Shiny Stone][/tip] x[inventory=Shiny Stone][/td] [td][tip=Sun Stone][item=Sun Stone][/tip] x[inventory=Sun Stone][/td] [td][tip=Water Stone][item=Water Stone][/tip] x[inventory=Water Stone][/td] [td][tip=ThunderStone][item=ThunderStone][/tip] x[inventory=ThunderStone][/td] [/tr] [tr] [th=5x1]Evolution Items[/th] [/tr] [tr] [td][tip=DeepSeaScale][item=DeepSeaScale][/tip] x[inventory=DeepSeaScale][/td] [td][tip=DeepSeaTooth][item=DeepSeaTooth][/tip] x[inventory=DeepSeaTooth][/td] [td][tip=Dragon Scale][item=Dragon Scale][/tip] x[inventory=Dragon Scale][/td] [td][tip=Dubious Disk][item=Dubious Disk][/tip] x[inventory=Dubious Disk][/td] [td][tip=Electiriser][item=Electiriser][/tip] x[inventory=Electiriser][/td][/tr] [tr][td][tip=Magmariser][item=Magmariser][/tip] x[inventory=Magmariser][/td] [td][tip=Metal Coat][item=Metal Coat][/tip] x[inventory=Metal Coat][/td] [td][tip=Protector][item=Protector][/tip] x[inventory=Protector][/td] [td][tip=Razor Claw][item=Razor Claw][/tip] x[inventory=Razor Claw][/td] [td][tip=Razor Fang][item=Razor Fang][/tip] x[inventory=Razor Fang][/td] [/tr] [td][tip=Reaper Cloth][item=Reaper Cloth][/tip] x[inventory=Reaper Cloth][/td] [td][tip=Up-Grade][item=Up-Grade][/tip] x[inventory=Up-Grade][/td] [tr] [th=5x1]Special Evolutionary Items[/th] [/tr] [tr] [td][tip=Ancient Power Orb][item=Ancient Power Orb][/tip] x[inventory=Ancient Power Orb][/td] [td][tip=Double Hit Orb][item=Double Hit Orb][/tip] x[inventory=Double Hit Orb][/td] [td][tip=Mimic Orb][item=Mimic Orb][/tip] x[inventory=Mimic Orb][/td] [td][tip=Rollout Orb][item=Rollout Orb][/tip] x[inventory=Rollout Orb][/td] [td][tip=Sachet][item=Sachet][/tip] x[inventory=Sachet][/td][/tr] [tr] [td][tip=Whipped Dream][item=Whipped Dream][/tip] x[inventory=Whipped Dream][/td] [td][tip=Everstone][item=Everstone][/tip] x[inventory=Everstone][/td] [/tr][/table] *Made by BayleefBean[/color] [/styleclass] [/styleclass] [styleclass=tab9][styleclass=tab9hide][styleclass=tab9text]Gems[/styleclass][/styleclass][styleclass=imgt9][img]https://pokefarm.com/upload/BayleafBeeen/sdfgthyju.png[/img][/styleclass] [styleclass=tab9body] [color=white] [table] [tr] [th][background=#CD0000][color=white]Normal[/color] [/background][/th] [td][item=Normal Gem] [inventory=Normal Gem][/td] [td][item=Medium Normal Gem] [inventory=Medium Normal Gem][/td] [td][item=Large Normal Gem] [inventory=Large Normal Gem][/td] [th][background=#CD0000][color=white]Fire[/color] [/background][/th] [td][item=Fire Gem] [inventory=Fire Gem][/td] [td][item=Medium Fire Gem] [inventory=Medium Fire Gem][/td] [td][item=Large Fire Gem] [inventory=Large Fire Gem][/td] [th][background=#CD0000][color=white]Water[/color] [/background][/th] [td][item=Water Gem] [inventory=Water Gem][/td] [td][item=Medium Water Gem] [inventory=Medium Water Gem][/td] [td][item=Large Water Gem] [inventory=Large Water Gem][/td] [/tr][tr] [th][background=#CD0000][color=white]Grass[/color] [/background][/th] [td][item=Grass Gem] [inventory=Grass Gem][/td] [td][item=Medium Grass Gem] [inventory=Medium Grass Gem][/td] [td][item=Large Grass Gem] [inventory=Large Grass Gem][/td] [th][background=#CD0000][color=white]Electric[/color] [/background][/th] [td][item=Electric Gem] [inventory=Electric Gem][/td] [td][item=Medium Electric Gem] [inventory=Medium Electric Gem][/td] [td][item=Large Electric Gem] [inventory=Large Electric Gem][/td] [th][background=#CD0000][color=white]Ice[/color] [/background][/th] [td][item=Ice Gem] [inventory=Ice Gem][/td] [td][item=Medium Ice Gem] [inventory=Medium Ice Gem][/td] [td][item=Large Ice Gem] [inventory=Large Ice Gem][/td] [/tr] [tr] [th][background=#CD0000][color=white]Fighting[/color] [/background][/th] [td][item=Fighting Gem] [inventory=Fighting Gem][/td] [td][item=Medium Fighting Gem] [inventory=Medium Fighting Gem][/td] [td][item=Large Fighting Gem] [inventory=Large Fighting Gem][/td] [th][background=#CD0000][color=white]Poison[/color] [/background][/th] [td][item=Poison Gem] [inventory=Poison Gem][/td] [td][item=Medium Poison Gem] [inventory=Medium Poison Gem][/td] [td][item=Large Poison Gem] [inventory=Large Poison Gem][/td] [th][background=#CD0000][color=white]Ground[/color] [/background][/th] [td][item=Ground Gem] [inventory=Ground Gem][/td] [td][item=Medium Ground Gem] [inventory=Medium Ground Gem][/td] [td][item=Large Ground Gem] [inventory=Large Ground Gem][/td] [/tr] [tr] [th][background=#CD0000][color=white]Flying[/color] [/background][/th] [td][item=Flying Gem] [inventory=Flying Gem][/td] [td][item=Medium Flying Gem] [inventory=Medium Flying Gem][/td] [td][item=Large Flying Gem] [inventory=Large Flying Gem][/td] [th][background=#CD0000][color=white]Psychic[/color] [/background][/th] [td][item=Psychic Gem] [inventory=Psychic Gem][/td] [td][item=Medium Psychic Gem] [inventory=Medium Psychic Gem][/td] [td][item=Large Psychic Gem] [inventory=Large Psychic Gem][/td] [th][background=#CD0000][color=white]Bug[/color] [/background][/th] [td][item=Bug Gem] [inventory=Bug Gem][/td] [td][item=Medium Bug Gem] [inventory=Medium Bug Gem][/td] [td][item=Large Bug Gem] [inventory=Large Bug Gem][/td] [/tr] [tr] [th][background=#CD0000][color=white]Rock[/color] [/background][/th] [td][item=Rock Gem] [inventory=Rock Gem][/td] [td][item=Medium Rock Gem] [inventory=Medium Rock Gem][/td] [td][item=Large Rock Gem] [inventory=Large Rock Gem][/td] [th][background=#CD0000][color=white]Ghost[/color] [/background][/th] [td][item=Ghost Gem] [inventory=Ghost Gem][/td] [td][item=Medium Ghost Gem] [inventory=Medium Ghost Gem][/td] [td][item=Large Ghost Gem] [inventory=Large Ghost Gem][/td] [th][background=#CD0000][color=white]Dark[/color] [/background][/th] [td][item=Dark Gem] [inventory=Dark Gem][/td] [td][item=Medium Dark Gem] [inventory=Medium Dark Gem][/td] [td][item=Large Dark Gem] [inventory=Large Dark Gem][/td] [/tr] [tr] [th][background=#CD0000][color=white]Steel[/color] [/background][/th] [td][item=Steel Gem] [inventory=Steel Gem][/td] [td][item=Medium Steel Gem] [inventory=Medium Steel Gem][/td] [td][item=Large Steel Gem] [inventory=Large Steel Gem][/td] [th][background=#CD0000][color=white]Dragon[/color] [/background][/th] [td][item=Dragon Gem] [inventory=Dragon Gem][/td] [td][item=Medium Dragon Gem] [inventory=Medium Dragon Gem][/td] [td][item=Large Dragon Gem] [inventory=Large Dragon Gem][/td] [th][background=#CD0000][color=white]Fairy [/color] [/background][/th] [td][item=Fairy Gem] [inventory=Fairy Gem][/td] [td][item=Medium Fairy Gem] [inventory=Medium Fairy Gem][/td] [td][item=Large Fairy Gem] [inventory=Large Fairy Gem][/td] [/tr] [/table] *Made by BayleefBean[/color] [/styleclass] [/styleclass] [styleclass=tab10][styleclass=tab10hide][styleclass=tab10text]Account Upgrades[/styleclass][/styleclass][styleclass=imgt10][img]http://i.imgur.com/FlLPSzr.png[/img][/styleclass][styleclass=tab10body] *Made by BayleefBean [/styleclass] [/styleclass] [styleclass=tab11][styleclass=tab11hide][styleclass=tab11text][/styleclass][/styleclass][styleclass=imgt11][img]http://i1196.photobucket.com/albums/aa415/Shadoul01/Orders/zor%20fus.png[/img][/styleclass] [styleclass=tab11body][color=#836fff][size=12] [/size] *Made by Cerberus[/color] [/styleclass] [/styleclass][/styleclass][/styleclass] [styleclass=credit]Coded by [url=https://pokefarm.com/user/bananaLizard][b]BananaLizard[/b][/url], free to use code and assistance [url=http://pfq.link/~Y2-0][b]here[/b][/url][/styleclass] [/styleclass] [style] .reset{ margin: 0px; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom 0px; text-align: none; padding: 0px 0px 0px; border: 0px; Border-style: none; border-width: 0px; border-shadow: 0px 0px 0px; font-size: 0px; Width: 0px; line-height:1; img{-webkit-filter: drop-shadow(0px 0px 0px); filter: drop-shadow(0px 0px 0px); } } .Background{ background-color: #800000; border-color: #0d0e13; border-style: solid; border-width: 2px; width: 570px; height: 532px; margin-top:0px; overflow:hidden; -moz-margin-bottom: 1px; background-position: Absolute; } .img{ background-color: #00008b; border-color: #cfd3ff; color: #000; margin-top: 8px; margin-right: 10px; Width: 80px; height: 80px; Border-style: dashed; border-width: 2px; border-shadow: 2px 2px 10px; float: right; position: relative; img{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-filter: drop-shadow(5px -5px 5px #272833); filter: drop-shadow(7px 7px 10px #272833); } } .header{ background-color: #1874CD; border-color: #cfd3ff; text-shadow: 2px 2px 5px #272833; color: #000; margin-top: 8px; margin-left: 10px; Width: 380px; height: 60px; Border-style: dashed; border-width: 2px; border-shadow: 2px 2px 10px; float: center; line-height:1; position: relative; padding: 5px 10px 10px; font-size: 20px; overflow:hidden; } .Body{ background-color: #4b0082; border-color: #F8F8FF; color: #f8f8ff; margin-top:23px; margin-right: 40px; margin-left: 50px; Width: 420px; height: 352px; text-align: center; Border-style: dashed; border-width: 1px; border-shadow: 2px 2px 10px; float: right; padding: 5px 5px 5px; font-size: 12px; overflow:hidden; } .credit{ background-color: #FFE1FF; border-color: #cfd3ff; color: #000; margin-top: -30px; margin-right: 5px; margin-left:150px; Width: 320px; height: 13px; overflow:hidden; Border-style: dashed; border-width: 2px; border-shadow: 2px 2px 10px; float:center; position: absolute; padding: 2px 2px 2px; font-family:Arial, sans-serif; Font-size:11px; } .credit a { text-decoration: none; color:#272833; text-shadow: 1px 1px 1px #6472ff; } .credit a:hover { color:#272833; text-shadow: 1px 1px 1px #0016ff; } .container{ margin: 0px; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom 0px; text-align: none; padding: 0px 0px 0px; border: 0px; Border-style: none; border-width: 0px; border-shadow: 0px 0px 0px; font-size: 0px; height: 0px; Width: 0px; float: left; line-height:1; overflow:hidden; } .container:hover{ margin-top:0px; float: left; line-height:1; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab1{ background-color: #8b008b; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 25px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab1:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab1hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab1text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab1:hover .tab1text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab1body{ Border-style: dashed; border-width: 3px; border-shadow: 2px 2px 10px; background-color: #4876FF; border-color: #F8F8FF; color: #000; Width: 425px; height: 360px; float:left; line-height:1; margin-left: 550px; margin-top: -30px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab1:hover .tab1body{ opacity: 1; margin-left: 90px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .imgt1{ opacity: 0; background-color: #292421; margin-top:-133px; margin-left:515px; Width: 85px; height: 85px; Border-style: dashed; border-width: 2px; border-shadow: 2px 2px 10px; border-color: #cfd3ff; color: #000; float: left; position: relative; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; img{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-filter: drop-shadow(5px -5px 5px #272833); filter: drop-shadow(7px 7px 10px #272833); } } .tab1:hover .imgt1{ opacity: 1; margin-left: 460px; float:left; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab2{ background-color: #8b008b; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 60px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab2:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab2hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab2text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab2:hover .tab2text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab2body{ Border-style: dashed; border-width: 3px; border-shadow: 2px 2px 10px; border-color: #00f5ff; color: #000; background-color: #EE0000; Width: 435px; height: 360px; float:left; line-height:1; margin-left: 350px; margin-top: -57px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab2:hover .tab2body{ opacity: 1; margin-left: 55px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .imgt2{ opacity: 0; background-color: #3a5fcd; margin-top:-165px; margin-left:-180px; Width: 85px; height: 85px; Border-style: dashed; border-width: 2px; border-shadow: 2px 2px 10px; border-color: #cfd3ff; color: #000; float: left; position: relative; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; img{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-filter: drop-shadow(5px -5px 5px #272833); filter: drop-shadow(7px 7px 10px #272833); } } .tab2:hover .imgt2{ opacity: 1; margin-left: 425px; float:left; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab3{ background-color: #8b008b; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 90px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab3:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab3hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab3text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab3:hover .tab3text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab3body{ Border-style: dashed; border-width: 3px; border-shadow: 2px 2px 10px; border-color: #0000ff; color: #000; background-color: #6CA6CD; Width: 425px; height: 360px; float:left; line-height:1; margin-left: 350px; margin-top: -85px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab3:hover .tab3body{ opacity: 1; margin-left: 65px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .imgt3{ opacity: 0; background-color: #191970; margin-top:-195px; margin-left:-170px; Width: 85px; height: 85px; Border-style: dashed; border-width: 2px; border-shadow: 2px 2px 10px; border-color: #cfd3ff; color: #000; float: left; position: relative; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; img{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-filter: drop-shadow(5px -5px 5px #272833); filter: drop-shadow(7px 7px 10px #272833); } } .tab3:hover .imgt3{ opacity: 1; margin-left: 425px; float:left; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab4{ background-color: #8b008b; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 125px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab4:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab4hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab4text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab4:hover .tab4text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab4body{ Border-style: dashed; border-width: 3px; border-shadow: 2px 2px 10px; border-color: #DC143C; color: #000; background-color: #4B0082; Width: 425px; height: 360px; float:left; line-height:1; margin-left: 350px; margin-top: -125px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab4:hover .tab4body{ opacity: 1; margin-left: 65px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .imgt4{ opacity: 0; background-color: #4B0082; margin-top:-230px; margin-left:-170px; Width: 85px; height: 85px; Border-style: dashed; border-width: 2px; border-shadow: 2px 2px 10px; border-color: #cfd3ff; color: #000; float: left; position: relative; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; img{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-filter: drop-shadow(5px -5px 5px #272833); filter: drop-shadow(7px 7px 10px #272833); } } .tab4:hover .imgt4{ opacity: 1; margin-left: 425px; float:left; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab5{ background-color: #8b008b; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 160px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab5:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab5hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab5text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab5:hover .tab5text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab5body{ Border-style: dashed; border-width: 3px; border-shadow: 2px 2px 10px; border-color: #8b0a50; color: #000; background-color: #FFC125; Width: 440px; height: 360px; float:left; line-height:1; margin-left: 345px; margin-top: -159px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab5:hover .tab5body{ opacity: 1; margin-left: 60px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .imgt5{ opacity: 0; background-color: #b0171f; margin-top:-265px; margin-left:-170px; Width: 85px; height: 85px; Border-style: dashed; border-width: 2px; border-shadow: 2px 2px 10px; border-color: #cfd3ff; color: #000; float: left; position: relative; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; img{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-filter: drop-shadow(5px -5px 5px #272833); filter: drop-shadow(7px 7px 10px #272833); } } .tab5:hover .imgt5{ opacity: 1; margin-left: 425px; float:left; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab6{ background-color: #8b008b; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 195px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab6:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab6hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab6text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab6:hover .tab6text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab6body{ Border-style: dashed; border-width: 3px; border-shadow: 2px 2px 10px; border-color: #00f5ff; color: #000; background-color: #0000CD; Width: 425px; height: 360px; float:left; line-height:1; margin-left: 350px; margin-top: -195px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab6:hover .tab6body{ opacity: 1; margin-left: 65px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .imgt6{ opacity: 0; background-color: #006400; margin-top:-298px; margin-left:-163px; Width: 80px; height: 80px; Border-style: dashed; border-width: 2px; border-shadow: 2px 2px 10px; border-color: #cfd3ff; color: #000; float: left; position: relative; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; img{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-filter: drop-shadow(5px -5px 5px #272833); filter: drop-shadow(7px 7px 10px #272833); } } .tab6:hover .imgt6{ opacity: 1; margin-left: 427px; float:left; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab7{ background-color: #8b008b; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 230px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab7:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab7hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab7text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab7:hover .tab7text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab7body{ Border-style: dashed; border-width: 4px; border-shadow: 2px 2px 10px; border-color: #ffd700; color: #000; background-color: #68228B; Width: 425px; height: 360px; float:left; line-height:1; margin-left: 350px; margin-top: -228px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:12px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab7:hover .tab7body{ opacity: 1; margin-left: 65px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .imgt7{ opacity: 0; background-color: #4b0082; margin-top:-335px; margin-left:-170px; Width: 85px; height: 85px; Border-style: dashed; border-width: 2px; border-shadow: 2px 2px 10px; border-color: #cfd3ff; color: #000; float: left; position: relative; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; img{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-filter: drop-shadow(5px -5px 5px #272833); filter: drop-shadow(7px 7px 10px #272833); } } .tab7:hover .imgt7{ opacity: 1; margin-left: 425px; float:left; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab8{ background-color: #8b008b; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 265px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab8:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab8hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab8text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab8:hover .tab8text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab8body{ Border-style: dashed; border-width: 3px; border-shadow: 2px 2px 10px; border-color: #fff5ee; color: #000; background-color: #000000; Width: 425px; height: 365px; float:left; line-height:1; margin-left: 350px; margin-top: -268px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab8:hover .tab8body{ opacity: 1; margin-left: 65px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .imgt8{ opacity: 0; background-color: #c71585; margin-top:-368px; margin-left:-170px; Width: 85px; height: 80px; Border-style: dashed; border-width: 2px; border-shadow: 2px 2px 10px; border-color: #cfd3ff; color: #000; float: left; position: relative; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; img{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-filter: drop-shadow(5px -5px 5px #272833); filter: drop-shadow(7px 7px 10px #272833); } } .tab8:hover .imgt8{ opacity: 1; margin-left: 425px; float:left; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab9{ background-color: #8b008b; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 300px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab9:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab9hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab9text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab9:hover .tab9text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab9body{ Border-style: dashed; border-width: 3px; border-shadow: 2px 2px 10px; border-color: #27408b; color: #000; background-color: #CD0000; Width: 425px; height: 360px; float:left; line-height:1; margin-left: 350px; margin-top: -300px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab9:hover .tab9body{ opacity: 1; margin-left: 65px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .imgt9{ opacity: 0; background-color: #ff1493; margin-top:-405px; margin-left:-170px; Width: 85px; height: 85px; Border-style: dashed; border-width: 2px; border-shadow: 2px 2px 10px; border-color: #cfd3ff; color: #000; float: left; position: relative; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; img{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-filter: drop-shadow(5px -5px 5px #272833); filter: drop-shadow(7px 7px 10px #272833); } } .tab9:hover .imgt9{ opacity: 1; margin-left: 425px; float:left; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab10{ background-color: #8b008b; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 340px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab10:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab10hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab10text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab10:hover .tab10text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab10body{ Border-style: dashed; border-width: 3px; border-shadow: 2px 2px 10px; border-color: #ff3030; color: #000; background-color: #ffec8b; Width: 425px; height: 360px; float:left; line-height:1; margin-left: 350px; margin-top: -339px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab10:hover .tab10body{ opacity: 1; margin-left: 65px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .imgt10{ opacity: 0; background-color: #104e8b; margin-top:-445px; margin-left:-170px; Width: 85px; height: 85px; Border-style: dashed; border-width: 2px; border-shadow: 2px 2px 10px; border-color: #cfd3ff; color: #000; float: left; position: relative; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; img{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-filter: drop-shadow(5px -5px 5px #272833); filter: drop-shadow(7px 7px 10px #272833); } } .tab10:hover .imgt10{ opacity: 1; margin-left: 425px; float:left; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab11{ background-color: #8b008b; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 375px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab11:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab11hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab11text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab11:hover .tab11text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab11body{ border-style: dashed; border-width: 3px; border-shadow: 2px 2px 10px; border-color: #ffb90f; color: #000; background-color: #292421; Width: 425px; height: 365px; float:left; line-height:1; margin-left: 350px; margin-top: -377px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab11:hover .tab11body{ opacity: 1; margin-left: 65px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .imgt11{ opacity: 0; background-color: #191970; margin-top:-480px; margin-left:-170px; Width: 86px; height: 86px; Border-style: dashed; border-width: 2px; border-shadow: 2px 2px 10px; border-color: #cfd3ff; color: #000; float: left; position: relative; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; img{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-filter: drop-shadow(5px -5px 5px #272833); filter: drop-shadow(7px 7px 10px #272833); } } .tab11:hover .imgt11{ opacity: 1; margin-left: 425px; float:left; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .link a{ text-decoration: underline; color:#6295ce; } .link a:hover { color:#b4d7ff; } [/style]