A Somewhat Extensive Guide to BBCodes

Hi there! I just started the painfully slow process of coding a list of all my pokemon in one place, in hopes of starting dex trades soon. So i'm using this code: [url=text][pkmn=text][/url] and I really wanted to add a tip/pit to each, labeling them. But so far every way that I've tried, it like counteracts with the link and they don't do anything.. Does anyone understand or think they could help? ;-; This is what I've got so far.

[styleclass=reset][styleclass=Background] [styleclass=img] [url=https://pokefarm.com/summary/bw4nH][img]https://pokefarm.com/upload/Bonzai420/GalaxyLuxray.png[/img][/url] [/styleclass] [styleclass=header][color=white][css=float:left]Welcome to[/css] [css=float:center; margin-left: 50px]Bonzai420's[/css][css=float:right]Profile![/css][/color][/styleclass] [styleclass=link][styleclass=Body] [centre][url=https://pfq.link/~pJDl][img]https://pfq.link/~pb03[/img][/url] Breeding pairs, anyone?[/centre][center]In need of credits for Pokeradar+! Please check my UFT field. Will do dex trades for donations! Got the Pokeradar, thanks to DP bonus! 230,227/250,000 credits [sub]so close[/sub] [url=https://pokefarm.com/summary/yXYRW][img]https://pldh.net/media/pokemon/gen6/xy-animated/359-mega.gif[/img][/url] [/center] [/styleclass] [styleclass=container][styleclass=tab1][styleclass=tab1hide][styleclass=tab1text]About[/styleclass][/styleclass][styleclass=tab1body] [b] Tori [/b] Age: 20 Relationship Status: Married c: Sexual Orientation: Bi? Favorite Pokemon: [pkmn=Incineroar][pkmn=Absol/Mega Forme][pkmn=Luxray][pkmn=Charizard/Mega Forme X][pkmn=Ninetales/Alolan Forme][pkmn=Garbodor][pkmn=Blaziken/Mega Forme] I really have no idea what else to put here [url=https://pokefarm.com/summary/y5msq][img]https://pokefarm.com/upload/Bonzai420/Litray_transparant.png[/img][/url] [/styleclass] [/styleclass] [styleclass=tab2][styleclass=tab2hide][styleclass=tab2text]Free UFT[/styleclass][/styleclass][styleclass=tab2body] I have two free fields and 1 (for now) UFT field! Right now, I have hatched [b]variants[/b], hatched and rescued [b]legends[/b], and a few Bulbasaur breeding pairs. But my field is [b]FULL[/b]. Halp? I will also do free trade evolves and dex trades (accepting donations) If you need a large amount of dexs, please check out my [i][b]Goals[/b][/i] tab to see if you can help me too! No longer hoarding anything.. I don't see the point? [pkmn=Litten][pkmn=Meowth][pkmn=Skitty][pkmn=Shinx][pkmn=Glameow][pkmn=Purrloin][pkmn=Espurr] [url=https://pokefarm.com/fields/Bonzai420][img]https://pldh.net/media/pokemon/gen5/blackwhite_animated_shiny/569.gif[/img][/url] [/styleclass] [/styleclass] [styleclass=tab3][styleclass=tab3hide][styleclass=tab3text]Goals & Progress[/styleclass][/styleclass][styleclass=tab3body] •Livingdex (minus Legends/Megas) - 683/683 [b]COMPLETE![/b] •Livingdex (All) - ???? •Full Pokedex & Arceus Rank - Eggdex - 425/494 Pokedex - 1,095/1,102 •Help me out: [url=https://pokefarm.com/forum/thread/71356/Pokedex-Entries-Needed]~Pokedex Entries Needed~ [/URL] [url=https://pokefarm.com/forum/thread/70934/Pokemon-Needed-for-Livingdex]~Pokemon For Livingdex~[/url] •Everstones for livingdex 0/296?? [url=https://pokefarm.com/summary/Ytsb0][img]https://pldh.net/media/pokemon/gen6/xy-animated-shiny/718.gif[/img][/url] [/styleclass] [/styleclass] [styleclass=tab4][styleclass=tab4hide][styleclass=tab4text]Click backs[/styleclass][/styleclass][styleclass=tab4body] I click back 1:1 or more. If you mass click me, I click back when I can. Usually 5 times out of the week, I'm at work when we reset (it's 8:00pm my time), if you want a clickback, just send me a message! I don't expect a mass click back, but if you want to, please consider my Starters, Variants, Exclusives, and Legends fields! [url=https://pokefarm.com/summary/8jrS][img]https://pldh.net/media/pokemon/gen6/xy-animated/038.gif[/img][/url] [/styleclass] [/styleclass] [styleclass=tab5][styleclass=tab5hide][styleclass=tab5text]Favorite ❥[/styleclass][/styleclass][styleclass=tab5body] [url=https://pfq.link/?YzV67][img]https://pfq.link/?YzV67=platform.png[/img][/url] [/styleclass] [/styleclass] [styleclass=tab6][styleclass=tab6hide][styleclass=tab6text]Credits[/styleclass][/styleclass][styleclass=tab6body] [url=https://pldh.net]Pokemon[/url] [url=https://pokefarm.com/user/FloofyIncineroar]LuxrayxLitten[/url] [url=https://pokefarm.com/user/Vixony_An]GalaxyLuxray[/url] [url=https://pokefarm.com/user/Bonzai420]Avatar[/url] [url=https://pokefarm.com/summary/Y4fD8][img]https://pldh.net/media/pokemon/gen6/xy-animated/006-mega-x.gif[/img][/url] [/styleclass] [/styleclass] [styleclass=tab7][styleclass=tab7hide][styleclass=tab7text]n/a[/styleclass][/styleclass][styleclass=tab7body] [url=https://pokefarm.com/summons][img]https://pldh.net/media/pokemon/gen6/xy-animated-shiny/635.gif[/img][/url] [/styleclass] [/styleclass] [styleclass=tab8][styleclass=tab8hide][styleclass=tab8text]n/a[/styleclass][/styleclass][styleclass=tab8body] [url=https://pokefarm.com/summary/Y4Hsf][img]https://pldh.net/media/pokemon/gen6/xy-animated/257-mega.gif[/img][/url] [/styleclass] [/styleclass][/styleclass][/styleclass] [styleclass=credit][color=white]Coded by [url=https://pokefarm.com/user/bananaLizard][b]BananaLizard[/b][/url], free to use code [url=http://pfq.link/~Y2-0][b]here[/b][/url][/color][/styleclass] [css=float:left; font-size: 9px; color: #d0d2de; margin-top: -281px; margin-left: 5px; text-shadow: 0px 2px 2px #0d0e13]hover over a box for more information[/css] [/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: #000000; border-color: #912B3B; border-style: solid; border-width: 2px; width: 336px; height: 410px; margin-top:0px; overflow:hidden; -moz-margin-bottom: 1px; background-position: Absolute; } .img{ background-color: #000000; border-color: #912B3B; color: #000; margin-top: 5px; margin-right: 5px; Width: 100px; height: 100px; 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: #000000; border-color: #912B3B; text-shadow: 2px 2px 5px #912B3B; color: #000; margin-top: 8px; margin-left: 5px; Width: 190px; height: 60px; Border-style: dashed; border-width: 2px; border-shadow: 2px 2px 10px; float: left; line-height:1; position: relative; padding: 10px 10px 10px; font-size: 20px; overflow:hidden; } .Body{ background-color: #d0d2de; border-color: #912B3B; color: #000; margin-top:7px; margin-right: 5px; margin-left: 50px; Width: 254px; height: 250px; text-align: center; Border-style: dashed; border-width: 2px; border-shadow: 2px 2px 10px; float: right; padding: 5px 5px 5px; font-size: 10px; overflow:hidden; } .credit{ background-color: #000000; border-color: #912B3B; color: #000; margin-top: 387px; margin-right: 5px; margin-left:5px; Width: 318px; height: 10px; overflow:hidden; Border-style: dashed; border-width: 2px; border-shadow: 2px 2px 10px; float:center; position: absolute; padding: 2px 2px 2px; font-family:"Impact" Charcoal, sans-serif; Font-size:11px; } .credit a { text-decoration: none; color:#912B3B; text-shadow: 0px 0px 0px #6472ff; } .credit a:hover { color:#ffffff; text-shadow: 0px 0px 0px #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: #000000; 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: 7px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family: "Impact" Charcoal, 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: #912B3B; 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: solid; border-width: 1px; border-shadow: 2px 2px 10px; border-color: #5a62bd; color: #000; background-color: #ced0e6; Width: 262px; height: 258px; float:left; line-height:1; margin-left: 350px; margin-top: -23px; font-family: "Impact" Charcoal, 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: 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; } .tab2{ background-color: #000000; 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: 41px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family: "Impact" Charcoal, 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: #912B3B; 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: solid; border-width: 1px; border-shadow: 2px 2px 10px; border-color: #5a62bd; color: #000; background-color: #ced0e6; Width: 262px; height: 258px; float:left; line-height:1; margin-left: 350px; margin-top: -57px; font-family: "Impact" Charcoal, 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; } .tab3{ background-color: #000000; 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: 75px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family: "Impact" Charcoal, 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: #912B3B; 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: solid; border-width: 1px; border-shadow: 2px 2px 10px; border-color: #5a62bd; color: #000; background-color: #ced0e6; Width: 262px; height: 258px; float:left; line-height:1; margin-left: 350px; margin-top: -91px; font-family: "Impact" Charcoal, 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: 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; } .tab4{ background-color: #000000; 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: 109px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family: "Impact" Charcoal, 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: #912B3B; 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: solid; border-width: 1px; border-shadow: 2px 2px 10px; border-color: #5a62bd; color: #000; background-color: #ced0e6; Width: 262px; height: 258px; float:left; line-height:1; margin-left: 350px; margin-top: -125px; font-family: "Impact" Charcoal, 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: 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; } .tab5{ background-color: #000000; 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: 143px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family: "Impact" Charcoal, 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: #912B3B; 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: solid; border-width: 1px; border-shadow: 2px 2px 10px; border-color: #5a62bd; color: #000; background-color: #ced0e6; Width: 262px; height: 258px; float:left; line-height:1; margin-left: 350px; margin-top: -159px; font-family: "Impact" Charcoal, 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: 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; } .tab6{ background-color: #000000; 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: 177px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family: "Impact" Charcoal, 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: #912B3B; 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: solid; border-width: 1px; border-shadow: 2px 2px 10px; border-color: #5a62bd; color: #000; background-color: #ced0e6; Width: 262px; height: 258px; float:left; line-height:1; margin-left: 350px; margin-top: -193px; font-family: "Impact" Charcoal, 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: 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; } .tab7{ background-color: #000000; 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: 211px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family: "Impact" Charcoal, 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: #912B3B; 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: solid; border-width: 1px; border-shadow: 2px 2px 10px; border-color: #5a62bd; color: #000; background-color: #ced0e6; Width: 262px; height: 258px; float:left; line-height:1; margin-left: 350px; margin-top: -227px; font-family: "Impact" Charcoal, 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; } .tab7:hover .tab7body{ 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; } .tab8{ background-color: #000000; 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: 245px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family: "Impact" Charcoal, 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: #912B3B; 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: solid; border-width: 1px; border-shadow: 2px 2px 10px; border-color: #5a62bd; color: #000; background-color: #ced0e6; Width: 262px; height: 258px; float:left; line-height:1; margin-left: 350px; margin-top: -261px; font-family: "Impact" Charcoal, 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: 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; } .link a{ text-decoration: underline; color: #912B3B; } .link a:hover { color:#ffffff; } [/style]

[style] .panel { &>h3 { &>a { color: red; } background: white; } &>div { color: white; background: black; } } [/style]