User:Shadowboxer2005/common.css

/* default skin for infoboxes */ table.infobox { vertical-align:middle; clear:both; }

/* cover images */

.CoverImage img { display: none; }

background: url('https://vignette.wikia.nocookie.net/spongebob/images/d/d1/SpongeBobKCA2015.jpg') no-repeat center; }
 * 1) newsfeed2016img1 {

background: url('https://vignette.wikia.nocookie.net/spongebob/images/3/3b/SpongeBob_SquarePants_main_characters.png') no-repeat center; }
 * 1) newsfeed2016img2 {

/* main page blocks */ .mpblock { position:relative; background:#ffffcc; /* for non-css3 browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='white', endColorstr='#ffffcc'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(white), to(#ffffcc)); /* for webkit browsers */ background: -moz-linear-gradient(top, white,  #ffffcc); /* for firefox 3.6+ */ padding: 10px; border:1px solid #ccc; -webkit-box-shadow: 0 3px 3px #DADADA; /* Safari and Chrome */ -moz-box-shadow: 0 1px 3px #DADADA; box-shadow: 0 1px 3px #DADADA; }

/* tabber */ .tabbertab { border-top: 2px solid black !important; border-bottom: none !important; border-left: none !important; border-right: none !important; padding:0px !important; }

/* add spaces to tabview tabs */ .tabberlive > ul.tabbernav > li { margin-right: 2px; } /* not applying on the last tabview tabs */ .tabberlive > ul.tabbernav > li:last-child { margin-right: 0px; } .tabbernav { background: transparent; border-bottom: none !important; padding: 3px 0 !important; } ul.tabbernav li a { color: black !important; padding: 3px 0.5em !important; margin-left: 0px !important; background: #F8D030 !important; border: 2px solid black !important; font-weight: normal !important; -moz-border-radius-topright: 10px !important; border-top-right-radius: 10px !important; -moz-border-radius-topleft: 10px !important; border-top-left-radius: 10px !important; position: relative; }

ul.tabbernav li a:hover{ font-weight: normal !important; background-color: #F8D030 !important; border: 1px solid #FAEBD7 !important; border-bottom: none !important; }

ul.tabbernav li:not(.tabberactive):hover { margin: 0 3px 0 1px !important; }

ul.tabbernav li.tabberactive a { border: 2px solid black !important; color: #000 !important; font-weight: bold !important; border-bottom: 2px solid black !important; background-color: #f2b850 !important; cursor: default; }

ul.tabbernav li.tabberactive a:hover { font-weight: bold !important; background-color: #f2b850 !important; border-color: black !important; border-bottom: 2px solid black !important; } ul.tabbernav li.tabberactive { line-height: 0px !important; } ul.tabbernav li.tabberactive:first-child a { margin-left: 0px !important; } .tabbertab .ajax-poll { border: none !important; }

.tabberlive .tabbertab h2, .tabberlive .tabbertab h3 { display:block !important; }

/*drop down*/

.custom-dropdown { padding: 1px 8px; }

.custom-dropdown > :first-child:after { background-image: url("data:image/gif;base64,R0lGODlhAQABAIABAAAAAP///yH5BAEAAAEALAAAAAABAAEAQAICTAEAOw%3D%3D"); border-color: white transparent transparent; border-style: solid; border-width: 4px; content: ""; display: inline-block; height: 1px; margin-left: 4px; margin-top: 2px; position: relative; vertical-align: middle; width: 1px; }

.custom-dropdown:hover { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; margin-bottom: -1px; padding-bottom: 2px; }

.custom-dropdown ul { list-style: none outside none; min-width: 100%; top: 23px; }

.custom-dropdown:hover ul { display: block; }

/* BEGIN: List tabs */

.tableDiv { display:table; }

.tableDiv > div { display:table-cell; }

.list-tab { float: left; font-weight: normal !important; text-align: center; background: none !important; margin-right: 2px !important; }

.list-tab.selected { padding:3px; font-weight: bold !important; border-radius: 10px 10px 0 0; border:2px solid black; border-bottom: 0px; background-color: #f2b850 !important; }

.list-tab.last { margin-right: 0 !important; }

.list-tab a { display: block; font-weight:normal !important; padding:3px; color: black; border-radius: 10px 10px 0 0; border:2px solid black; border-bottom: none !important; background-color: #F8D030 !important; }

.list-tab.extra a, .list-tab.selected.extra { padding-left:10px !important; padding-right:10px !important; }

.list-tab a:hover { text-decoration: none !important; font-weight: normal !important; background-color: #F8D030 !important; border: 1px solid #FAEBD7 !important; border-bottom: none !important; margin-top: 1px !important; }

.tableDiv > div:not(.selected):hover { margin: 0 3px -1px 1px !important; }

@media screen and (max-width: 1023px) { .list-tab a, .list-tab.selected { padding:1px !important; } .list-tab.extra a, .list-tab.selected.extra { padding-left:8px !important; padding-right:8px !important; } }

@media screen and (min-width: 1024px) and (max-width: 1599px) { .list-tab a, .list-tab.selected { padding:3px !important; } .list-tab.extra a, .list-tab.selected.extra { padding-left:10px !important; padding-right:10px !important; } }

@media screen and (min-width: 1600px) { .list-tab a, .list-tab.selected { padding:5px !important; } .list-tab.extra a, .list-tab.selected.extra { padding-left:12px !important; padding-right:12px !important; } }

/* END: List tabs */

/* ================  Navigational "bounce" effect mainly used on front page idea derives from the work of  Alessio Atzeni, a Roman web designer who can be found at  http://www.alessioatzeni.com ================ */ /* Adapted from User:CzechOut from w:c:kateprice */

.bounceme { position:relative; float:left; width:300px; height:200px; margin:10px; overflow:hidden; text-align:left; -webkit-box-shadow:1px 1px 2px #e6e6e6; -moz-box-shadow:1px 1px 2px #e6e6e6; box-shadow:1px 1px 2px #e6e6e6; background-color:#f5f5f5; }

.bounceme img { width:auto; height:200px; } .bounceme .info { position:absolute; top:-220px; width:300px; height:200px; overflow:hidden; background-color:rgba(254,204,32,0.98); }

.bounceme .info #heading { display:block; text-decoration:none; color:white; text-transform:uppercase; text-align: center; font-size: 11pt; padding: 6px; background: rgba(0, 0, 0, 0.6); margin: 20px 0 0 0; border-top:2px solid white; border-bottom:2px solid white; }

.bounceme .info #text { font-size: 10pt; position: relative; color: black; padding: 5px; text-align: center; }

.bounceme .info #button { text-decoration:none; font-size: 10pt; color: white; padding:0px 3px; text-align: center; background: rgba(0, 0, 0, 0.6); margin:0 auto; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; -icab-border-radius:5px; -o-border-radius:5px; white-space:nowrap; }

.bounceme:hover .info { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; top: 0px; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s; -webkit-animation: bounceY 0.7s linear; -moz-animation: bounceY 0.7s linear; -ms-animation: bounceY 0.7s linear; animation: bounceY 0.7s linear; }

@-moz-keyframes bounceY { 0% { -moz-transform: translateY(-205px);} 40% { -moz-transform: translateY(-100px);} 65% { -moz-transform: translateY(-52px);} 82% { -moz-transform: translateY(-25px);} 92% { -moz-transform: translateY(-12px);} 55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);} }

@-webkit-keyframes bounceY { 0% { -webkit-transform: translateY(-205px);} 40% { -webkit-transform: translateY(-100px);} 65% { -webkit-transform: translateY(-52px);} 82% { -webkit-transform: translateY(-25px);} 92% { -webkit-transform: translateY(-12px);} 55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);} }

@keyframes bounceY { 0% { transform: translateY(-205px);} 40% { transform: translateY(-100px);} 65% { transform: translateY(-52px);} 82% { transform: translateY(-25px);} 92% { transform: translateY(-12px);} 55%, 75%, 87%, 97%, 100% { transform: translateY(0px);} }

/*welcome-buttons*/

.welcome-button img { width:150px; height:80px; }

.round-image img { border-radius: 10px; }

.WikiaPhotoGalleryPreview * { max-width: 100%; }

/* Color Links For Admins */

a[href$="Alex.sapre"], a[href$="Figmeister"], a[href$="Koolkitty108"] { color:#00b3bf !important; font-weight: bold !important; }

/* Color Links For Bureaucrats */

a[href$="Spongebob456"], a[href$="AMK152"] { color: #33c00b !important; font-weight: bold !important; } /* Comment tags for staff members */

/* Administators */ .comments li[data-user="Alex.sapre"] .edited-by:after, .comments li[data-user="Figmeister"] .edited-by:after, .comments li[data-user="Koolkitty108"] .edited-by:after, .comments li[data-user="Kandy_Katie"] .edited-by:after, .comments li[data-user="Anthony2306"] .edited-by:after {   content: "(Administrator)"; margin-left: -2px; font-family: arial; font-size: 10px; font-weight: bold; vertical-align: top; color: red; padding: 0 4px; } /* Bureaucrats */ .comments li[data-user="AMK152"] .edited-by:after { content: "(Wiki Adopter • Bureaucrat • Administrator)"; margin-left: -2px; font-family: arial; font-size: 10px; font-weight: bold; vertical-align: top; color: red; padding: 0 4px; } .comments li[data-user="Spongebob456"] .edited-by:after { content: "(Bureaucrat • Administrator)"; margin-left: -2px; font-family: arial; font-size: 10px; font-weight: bold; vertical-align: top; color: red; padding: 0 4px; } /* Assistants */ .comments li[data-user="DragonSpore18"] .edited-by:after { content: "(Assistant)"; margin-left: -2px; font-family: arial; font-size: 10px; font-weight: bold; vertical-align: top; color: red; padding: 0 4px; }

/* Discussion Moderators */ .comments li[data-user="Qwertyxp2000 the second"] .edited-by:after, .comments li[data-user="CheeseRoxTheWorld"] .edited-by:after { content: "(Discussion Moderator)"; margin-left: -2px; font-family: arial; font-size: 10px; font-weight: bold; vertical-align: top; color: red; padding: 0 4px; } .comments li[data-user="Auron~Guardian"] .edited-by:after { content: "(Discussion Moderator • Chat Moderator)"; margin-left: -2px; font-family: arial; font-size: 10px; font-weight: bold; vertical-align: top; color: red; padding: 0 4px; } /* Chat Moderators */ .comments li[data-user="TheKorraFanatic"] .edited-by:after { content: "(Chat Moderator)"; margin-left: -2px; font-family: arial; font-size: 10px; font-weight: bold; vertical-align: top; color: red; padding: 0 4px; } /* Rollbacks */ .comments li[data-user="Plant Protecter"] .edited-by:after, .comments li[data-user="Expert at Terraria"] .edited-by:after, .comments li[data-user="FlyingDutchmen"] .edited-by:after, .comments li[data-user="AFallenPower"] .edited-by:after { content: "(Rollback)"; margin-left: -2px; font-family: arial; font-size: 10px; font-weight: bold; vertical-align: top; color: red; padding: 0 4px; } .css.source-css .kw1 { color: black !important; }

/* DiscussionButtons */

.voteScoreSelect { text-align: center; font-size: 12pt; }

.voteScoreSelect a { font-size: 15px; color: #FFF !important; padding: 3px; text-decoration: none; display: inline-block; border: 1px solid #000; border-radius: 5px; text-align: center; width: 17px; font-weight: bold; }

.voteButtons a, .concernButtonSmall a { font-size: 14px; color: #FFF !important; padding: 0 4px; text-decoration: none; display: inline-block; border: 1px solid #000; border-radius: 5px; text-align: center; background: #005F9C; font-weight: bold; }

.concernButtonBig a { font-size: 16px; color: #FFF !important; padding: 2px 5px; text-decoration: none; display: inline-block; border: 1px solid #000; border-radius: 5px; text-align: center; background: #005F9C; font-weight: bold; }

.voteButtons a:hover, .concernButtonSmall a:hover, .concernButtonBig a:hover { background: #008BE3; }

.supportScoreButtons a { background: #4e9a06; }

.neutralScoreButtons a { background: #555753; }

.opposeScoreButtons a { background: #b83737; }

.otherScoreButtons a { background: #3490c9; }

.supportScoreButtons a:hover { background: #accf8a; }

.neutralScoreButtons a:hover { background: #b0b1af; }

.opposeScoreButtons a:hover { background: #d58a8a; }

.otherScoreButtons a:hover { background: #8aa6d5; }

/* TimeCirclesBegin */

.time_circles { position: relative; width: 100%; height: 100%; }

.time_circles > div { position: absolute; text-align: center; }

.time_circles > div > h4 { margin: 0px; padding: 0px; text-align: center; text-transform: uppercase; font-family: 'Century Gothic', Arial; }

.time_circles > div > span { display: block; width: 100%; text-align: center; font-family: 'Century Gothic', Arial; font-size: 300%; margin-top: 0.4em; font-weight: bold; }

/* TimeCirclesEnd */

/* Hiding a new post option by request */ .page-Message_Wall_CheeseRoxTheWorld .new-message { display: none; }