MediaWiki:Wikia.css/Infobox.css

/* Infobox template style -- Changed colors to old-style infobox */ .infobox, .WikiaArticle .infobox { border: 1px solid #aaaaaa; background-color: #f9f9f9; color: #000000; margin-bottom: 0.5em; margin-left: 1em; padding: 0.2em; float: right; clear: right; width: 258px; } .infobox td,.infobox th { vertical-align: top; } .infobox caption { font-size: larger; margin-left: inherit; } .infobox.bordered { border-collapse: collapse; } .infobox.bordered td, .infobox.bordered th { border: 1px solid #aaaaaa; padding-left:5px; } .infobox.bordered .borderless td, .infobox.bordered .borderless th { border: 0; } /** Portable infobox styles based on previous Template:Character infobox styling **/ .portable-infobox { color:#000 } .portable-infobox ul { margin-left: 8% !important; } aside.portable-infobox section:nth-child(3) { border-bottom-width:0 !important; } aside.portable-infobox { background-color: white; border: 2px solid #2C2C68; width: 258px; border-radius:7px; overflow:hidden !important; } .portable-infobox .pi-navigation a { color:white !important; } .portable-infobox .pi-collapse .pi-header:first-child::after { border-color: #ffffff; } .pi-item-spacing.pi-secondary-background.pi-secondary-font { font-family: futura; } .pi-image img { width: 100%; height: auto; } .video-thumbnail { display: block; overflow: hidden; } .portable-infobox a:link { color:#0061ae; } .portable-infobox a.new:link { color:#CC2200 !important; } .portable-infobox .pi-navigation { text-align:center !important; } .pi-background.pi-theme-lightblue.pi-layout-stacked nav a, aside.portable-infobox.pi-theme-lightblue .pi-group .pi-header{ color:#002f52 !important; } .pi-theme-red, .pi-theme-darkred { border: 2px solid #5b0100 !important; } .pi-theme-brown, .pi-theme-orange, .pi-theme-yellow { border:2px solid #a55000 !important; } .pi-theme-mint, .pi-theme-green, .pi-theme-lightgreen { border: 2px solid #006d20 !important; } .pi-theme-lightblue, .pi-theme-teal { border: 2px solid #040f66 !important; } .pi-theme-pink, .pi-theme-purple { border:2px solid #6a076d !important; } .pi-theme-lavender, .pi-theme-gray { border:2px solid #4d427b !important; } .pi-theme-red .pi-border-color, .pi-theme-pink .pi-border-color, .pi-theme-darkred .pi-border-color { border-color:#e59f9f; } .pi-theme-orange .pi-border-color, .pi-theme-yellow .pi-border-color, .pi-theme-brown .pi-border-color { border-color:#e6a119; } .pi-theme-green .pi-border-color, .pi-theme-mint .pi-border-color, .pi-theme-lightgreen .pi-border-color { border-color:#63e086 !important; } .pi-theme-lavender .pi-border-color, .pi-theme-gray .pi-border-color { border-color:#afacb7; } .pi-image img { width: 100%; height: auto; } aside.portable-infobox h2 { text-align:center; box-shadow: 0 -3px 7px 0 #002ED1 inset, 0 -11px 9px 4px #0070F6 inset, 0 3px 3px 0 #0070F6 inset,0 4px 10px 1px #C6ECFF inset, 0 4px 5px 0 #0063FF inset; color:#ffffff; background:#229DFA; font-size:larger; } aside.portable-infobox .pi-group .pi-header, .pi-secondary-background { text-align:center; font-weight:normal; color:#ffffff; box-shadow: 0 -3px 7px 0 #000049 inset, 0 -11px 9px 4px #0001CB inset, 0 3px 3px 0 #0001CB inset,0 4px 10px 1px #339BFC inset, 0 -32px 28px -17px white inset; background:#000BDF; } aside.portable-infobox.pi-theme-red h2 { box-shadow:0 -3px 7px 0 #D00A08 inset, 0 -11px 9px 4px #F20C0C inset, 0 3px 3px 0 #F20C0C inset, 0 4px 10px 1px #FA2424 inset, 0 4px 5px 0 #FE4D4D inset; background:#FF6B60; } aside.portable-infobox.pi-theme-red .pi-group .pi-header, aside.portable-infobox.pi-theme-red .pi-secondary-background { box-shadow: 0 -3px 7px 0 #FE5555 inset, 0 -11px 9px 4px #EA6E6E inset, 0 3px 3px 0 #EA6E6E inset,0 4px 10px 1px #F58383 inset, 0 -32px 28px -17px white inset; background:#FE4D4D; } aside.portable-infobox.pi-theme-green h2 { box-shadow:0 -3px 7px 0 #1C6909 inset, 0 -11px 9px 4px #10B821 inset, 0 3px 3px 0 #04C518 inset, 0 4px 10px 1px #0FF026 inset, 0 4px 5px 0 #008B8B inset; background:#28CE1C; } aside.portable-infobox.pi-theme-green .pi-group .pi-header, aside.portable-infobox.pi-theme-green .pi-secondary-background { box-shadow: 0 -3px 7px 0 #013506 inset, 0 -11px 9px 4px #006B0A inset, 0 3px 3px 0 #028C0F inset,0 4px 10px 1px #00CE13 inset, 0 -32px 28px -17px white inset; background:#008000; } aside.portable-infobox.pi-theme-darkred h2 { box-shadow:0 -3px 7px 0 #5A0808 inset, 0 -11px 9px 4px #850404 inset, 0 3px 3px 0 #850404 inset, 0 4px 10px 1px #A91010 inset, 0 4px 5px 0 #db2929 inset; background:#E31414; } aside.portable-infobox.pi-theme-darkred .pi-group .pi-header, aside.portable-infobox.pi-theme-darkred .pi-secondary-background { box-shadow: 0 -3px 7px 0 #5A0808 inset, 0 -11px 9px 4px #850404 inset, 0 3px 3px 0 #850404 inset,0 4px 10px 1px #A91010 inset, 0 -32px 28px -17px #C80C0C inset; background:#E31414; } aside.portable-infobox.pi-theme-lavender h2 { box-shadow: 0 -3px 7px 0 #6B6B90 inset, 0 -11px 9px 4px #8B8BB0 inset, 0 3px 3px 0 #8B8BB0 inset,0 4px 10px 1px #BFBFE2 inset, 0 -32px 28px -17px #b586e2 inset; background:#CCCCFF; } aside.portable-infobox.pi-theme-lavender .pi-group .pi-header, aside.portable-infobox.pi-theme-lavender .pi-secondary-background { box-shadow: 0 -3px 7px 0 #6B6B90 inset, 0 -11px 9px 4px #8B8BB0 inset, 0 3px 3px 0 #8B8BB0 inset,0 4px 10px 1px #BFBFE2 inset, 0 -32px 28px -17px #b586e2 inset; background:#CCCCFF; } aside.portable-infobox.pi-theme-gray h2 { box-shadow:0 -3px 7px 0 #747478 inset, 0 -11px 9px 4px #9A9A9F inset, 0 3px 3px 0 #9A9A9F inset, 0 4px 10px 1px #C5C5CB inset, 0 4px 5px 0 #DADAE4 inset; background:#F9F9F9; } .pi-theme-gray > h2 { color:black !important; } aside.portable-infobox.pi-theme-gray .pi-group .pi-header, aside.portable-infobox.pi-theme-gray .pi-secondary-background { box-shadow: 0 -3px 7px 0 #424242 inset, 0 -11px 9px 4px #585858 inset, 0 3px 3px 0 #585858 inset,0 4px 10px 1px #707070 inset, 0 -32px 28px -17px #7D7D7D inset; background:#8E8E8E; } aside.portable-infobox.pi-theme-lightblue h2 { box-shadow:0 -3px 7px 0 #56b4d4 inset, 0 -11px 9px 4px #64bdda inset, 0 3px 3px 0 #72c5df inset, 0 4px 10px 1px #80cce3 inset, 0 4px 5px 0 #80cce3 inset; background:#99d9ea; } aside.portable-infobox.pi-theme-lightblue .pi-group .pi-header, aside.portable-infobox.pi-theme-lightblue .pi-secondary-background { box-shadow: 0 -3px 7px 0 #76D4F4 inset, 0 -11px 9px 4px #89E2FF inset, 0 3px 3px 0 #A2E9FF inset,0 4px 10px 1px #B7EEFF inset, 0 -32px 28px -17px #B7EEFF inset; background:#D1F5FF; } aside.portable-infobox.pi-theme-lightgreen h2 { box-shadow:0 -3px 7px 0 #538B0F inset, 0 -11px 9px 4px #79BB28 inset, 0 3px 3px 0 #79BB28 inset, 0 4px 10px 1px #8DD337 inset, 0 4px 5px 0 #8EF80B inset; background:#8AEC11; } aside.portable-infobox.pi-theme-lightgreen .pi-group .pi-heade, aside.portable-infobox.pi-theme-lightgreen .pi-secondary-background { box-shadow: 0 -3px 7px 0 #538B0F inset, 0 -13px 17px 4px #79BB28 inset, 0 3px 7px 0 #79BB28 inset,0 4px 10px 1px #8DD337 inset, 0 4px 5px 0 #8EF80B inset; background:#8AEC11; } aside.portable-infobox.pi-theme-brown h2 { box-shadow:0 -3px 7px 0 #472C10 inset, 0 -11px 9px 4px #633505 inset, 0 3px 3px 0 #633505 inset, 0 4px 10px 1px #864D11 inset, 0 4px 5px 0 #A65A0B inset; background:#964E02; } aside.portable-infobox.pi-theme-brown .pi-group .pi-header, aside.portable-infobox.pi-theme-brown .pi-secondary-background { box-shadow: 0 -3px 7px 0 #7D4410 inset, 0 -13px 17px 4px #804915 inset, 0 3px 7px 0 #804915 inset,0 4px 10px 1px #955A23 inset, 0 4px 5px 0 #976231 inset; background:#B87333; } aside.portable-infobox.pi-theme-teal h2 { box-shadow:0 -3px 7px 0 #0C4444 inset, 0 -11px 9px 4px #056B6B inset, 0 3px 3px 0 #056B6B inset, 0 4px 10px 1px #128D8D inset, 0 4px 5px 0 #13C2C2 inset; background:teal; } aside.portable-infobox.pi-theme-teal .pi-group .pi-header, aside.portable-infobox.pi-theme-teal .pi-secondary-background { box-shadow: 0 -3px 7px 0 #031d3e inset, 0 -13px 17px 4px #042b3a inset, 0 3px 7px 0 #031d3e inset, 0 4px 10px 1px #049494 inset, 0 4px 5px 0 #099494 inset; background: #054950; } aside.portable-infobox.pi-theme-orange h2 { box-shadow:0 -3px 7px 0 #f26f00 inset, 0 -11px 9px 4px #ffae03 inset, 0 3px 3px 0 #ffa301 inset, 0 4px 10px 1px #ff9700 inset, 0 4px 5px 0 #ff8a00 inset; background:darkorange; } aside.portable-infobox.pi-theme-orange .pi-group .pi-header, aside.portable-infobox.pi-theme-orange .pi-secondary-background { box-shadow: 0 -3px 7px 0 #FF9738 inset, 0 -13px 17px 4px #FFCD23 inset, 0 3px 7px 0 #FFDD38 inset,0 4px 10px 1px #FFCD38 inset, 0 4px 5px 0 #FFB838 inset; background:darkorange; } aside.portable-infobox.pi-theme-mint h2 { box-shadow: 0 -3px 7px 0 #6bb169 inset, 0 -11px 9px 4px #5f9c5c inset, 0 3px 3px 0 #5f9c5c inset, 0 4px 10px 1px #98e095 inset, 0 4px 5px 0 #8ef58b inset; background: #73c57a; } aside.portable-infobox.pi-theme-mint .pi-group .pi-header, aside.portable-infobox.pi-theme-mint .pi-secondary-background { box-shadow: 0 -3px 7px 0 #79A778 inset, 0 -13px 17px 4px #94CA91 inset, 0 3px 7px 0 #94CA91 inset,0 4px 10px 1px #ADE6AB inset, 0 4px 5px 0 #A3FAA0 inset; background:#A2F49F; } aside.portable-infobox.pi-theme-purple h2 { box-shadow:0 -3px 7px 0 #5C2D97 inset, 0 -11px 9px 4px #593EBB inset, 0 3px 3px 0 #593EBB inset, 0 4px 10px 1px #D7D7F4 inset, 0 4px 5px 0 #603CBC inset; background:#6B5FCC; } aside.portable-infobox.pi-theme-purple .pi-group .pi-header, aside.portable-infobox.pi-theme-purple .pi-secondary-background { box-shadow: 0 -3px 7px 0 #351C41 inset, 0 -13px 17px 4px #662389 inset, 0 3px 7px 0 #662389 inset,0 4px 10px 1px #7869CE inset, 0 4px 5px 0 #FAFAFA inset; background:#6B2697; } aside.portable-infobox.pi-theme-pink h2 { box-shadow:0 -3px 7px 0 #D65370 inset, 0 -11px 9px 4px #ED577A inset, 0 3px 3px 0 #ED577A inset, 0 4px 10px 1px #F36888 inset, 0 4px 5px 0 #F7849F inset; background:#F992A3; } aside.portable-infobox.pi-theme-pink .pi-group .pi-header, aside.portable-infobox.pi-theme-pink .pi-secondary-background { box-shadow: 0 -3px 7px 0 #F889A3 inset, 0 -13px 17px 4px #EB9AAD inset, 0 3px 7px #EB9AAD inset,0 4px 10px 1px #F3A8BA inset, 4px 5px 0 #FDFDFD inset; background:#F7849F; } aside.portable-infobox.pi-theme-yellow h2 { text-align:center; box-shadow: 0 -3px 7px 0 #c8b700 inset, 0 -11px 9px 4px #ffd505 inset, 0 3px 3px 0 #fee50f inset,0 4px 10px 1px #fefad5 inset, 0 4px 5px 0 #ffe300 inset; color:#ffffff; background:#feeb4b; } aside.portable-infobox.pi-theme-yellow .pi-group .pi-header, aside.portable-infobox.pi-theme-yellow .pi-secondary-background { text-align: center; font-weight: normal; color: #ffffff; box-shadow: 0 -3px 7px 0 #ad7901 inset, 0 -11px 9px 4px #fbdd00 inset, 0 3px 3px 0 #fffc00 inset, 0 4px 10px 1px #fcff4b inset, 0 -32px 28px -17px #fdde25 inset; background: #f5cd00; }