MediaWiki:Monobook.css

/* CSS placed here will affect users of the MonoBook skin */

/*************************************************
**
**		FORMATTING AND HEADERS
**
**************************************************/
#content{
	border:none;
	box-shadow: 0 0 10px 2px #000000;
	padding-bottom: 0.1em;
}

.mw-body #firstHeading{
	padding: 0.7em;
	font-size:225%;
	font-weight: 600;
}

#mw-content-text, #catlinks{
	margin: 1.25em 1.5em 1.5em 1.5em;
}

/*************************************************
**
**		FIXED WIDTH
**
**************************************************/
@media (min-width: 768px){
	body.skin-monobook #content, body.skin-monobook #mw-data-after-content {
		margin-left: 15em;
		margin-right: 5.5em;
	}
}

@media (min-width: 1100px){
	body.skin-monobook #content, body.skin-monobook #mw-data-after-content {
		margin-left:15em;
		margin-right:15em;
	}
}

/*************************************************
**
**		TOP NAVIGATION
**
**************************************************/
@media screen and (min-width: 551px){
	#p-cactions{
		top: 3.3em;
	}
}

/**********************************************
**
**		ACTION TABS
**
**********************************************/
#p-cactions li {
	border: none;
	border-bottom: none;
	background: #0170C6;
	transition:.1s ease-in-out;
}

#p-cactions li:hover{
	border-top:2px #F7D053 solid;
	box-shadow: 0 -2px 8px -4px #000000;
}

@media screen and (min-width: 551px){
	#p-cactions li.selected {
		box-shadow: 0 -2px 8px -4px #000000;
		border-top: #F7D053 3px solid;
	}
}

#p-cactions li.selected a{
	border:none;
	background:#FFFFFF;
	color:#181818;
}

#p-cactions li a{
	position:relative;
	font-weight:bold;
}

#p-cactions li a, #p-cactions li a:hover{
	color:#EDEDED;
	background:none;
	border:none;
	box-shadow:none;
}

/**********************************************
**
**		PERSONAL LINKS
**
**********************************************/
#p-personal .pBody ul a{
	color:#FFFFFF;
	font-weight: 900;
	font-size: 1.15em;
	-webkit-text-stroke: thin;
	-webkit-text-stroke-color: #000000;
}

#p-personal .pBody ul a:hover{
	color:#F7D053;
	background:transparent;
}

@media screen and (min-width: 551px){
	.mw-body {
    	margin: 3.1em 0 0 12.2em;
    	border-right: 0;
	}
}

.skin-monobook #utcdate {
    margin-right: 1em;
}

#p-personal ul::before {
    content: '';
    background: #000000;
    z-index: -1;
    display: block;
    top: .5em;
    bottom: 0;
    right: 0;
    left: 0;
    float: right;
    position: relative;
    width: 100%;
    height: 1.5em;
    transform: skew(-25deg);
    box-shadow: 5px 5px 0 0px #FFFFFF;
}

#p-personal ul{
	margin-top:.33em;
}

/*************************************************
**
**		LEFT NAVIGATION
**
**************************************************/
div#column-content {
	margin-left: -15em;
}

#column-content #content {
	margin-left: 15em;
	top:1.8em;
}

#p-logo a, #p-logo a:hover {
	width: 15em;
}

#p-cactions {
	left: 14em;
}

.portlet { 
	width: 14em;
}

#p-navigation, #p-Community, #p-search, #p-tb, #p-lang {
	margin: 1em 0;
	margin-left: 7px;
}
 
.pBody {
	padding: 0;
	margin: 0;
	border:none;
}

#p-navigation ul, #p-Community ul, #p-search ul, #p-tb ul, #p-lang ul {
	margin: 0;
	padding: 0;
}
#p-navigation li, #p-Community li, #p-search li, #p-tb li, #p-lang li {
	list-style: none;
	font-family: Tahoma,arial,sans-serif;
	font-weight: bold;
	font-size: 110%;
	display: block;
	margin: 0;
	padding: 2px 0 2px 0px;
}

#p-navigation, #p-Community, #p-search, #p-tb, #p-lang {
	padding-top: 1px;
	border: 1px solid #000000;
}

#p-navigation h3, #p-Community h3, #p-search h3, #p-tb h3, #p-lang h3 {
	display: block;
	border: none;
	position: relative;
	width: 282px;
	height: 16px;
	background: #FFFFFF;
	margin-bottom:0px;
}

#p-navigation .pBody,
#p-Community .pBody,
#p-search .pBody,
#p-tb .pBody,
#p-lang .pBody {
	display: block;
	background: #1853BC;
}
#p-navigation .pBody a,
#p-Community .pBody a,
#p-search .pBody a,
#p-tb .pBody a,
#p-lang .pBody a {
	color: #D1DEFE;
	text-decoration: none;
    padding:10px;
    transition:0.3s ease-out;
}

#p-tb .pBody a{
    display:block;
    
}

#p-navigation .pBody a:hover,
#p-Community .pBody a:hover,
#p-search .pBody a:hover,
#p-tb .pBody a:hover,
#p-lang .pBody a:hover {
    text-shadow: #F4C544 1px 1px 3px;
	color: #F4C544;
    background: #1853BC;
    box-shadow: 0px 0px 16px 4px rgba(0,0,0,.3);
}
#p-navigation li a div, #p-Community li a div, #p-tb li a div, #p-lang li a div, #feedlinks {
	padding: 2px 5px !important;
	width: 197px;
}

/*************************************************
**
**		MONOBOOK SIDEBAR (SEE ALSO MONOBOOK.JS)
**
**************************************************/
.sub-menu li {
	font-size: 13px !important;
}

#p-navigation ul, #p-Community ul {
	margin: 0;
}
#p-navigation > div, #p-Community > div {
	background: white;
	padding: 0;
}
/* que no sea un list */
#p-navigation li, #p-Community li {
	display: block;
	list-style-image: none !important; /* for IE */
}
/* general design of the links */
#p-navigation li > a, #p-Community li > a {
	display: block;
	position: relative;
}
/* special menu just for the class */
#p-navigation > div > ul > li > a, #p-Community > div > ul > li > a {
	margin: 1px 1px 0 1px;
	padding: 5px 0 5px 10px;
	color: black;
	width: auto;
	transition: 0.3s ease-out;
}
#p-navigation > div > ul > li.hover > a, #p-Community > div > ul > li.hover > a {
	color: #ea429d;
	text-shadow: #181818 1px 1px 3px;
}
#p-navigation > div > ul > li > a > em, #p-Community > div > ul > li > a > em {
	right: 8px;
	transition: 0.3s ease-out;
}

#p-navigation > div > ul > li:hover > a > em, #p-Community > div > ul > li:hover > a > em {
	transform:translateX(25%);
}
/* Submenu marker */
#p-navigation em, #p-Community em {
	font-style: normal;
	font-family: arial,sans-serif;
	font-size: 16pt;
	font-weight: bold;
	line-height: 20px;
	position: absolute;
	right: 8px;
	top: 0px;
	padding:7px 0;
}

#p-navigation li > ul > li > a, #p-Community li > ul > li > a {
	transition: 0.3s ease-out;
}

/* Hover */
#p-navigation li > ul > li:hover > a, #p-Community li > ul > li:hover > a {
	background-color: #06305B;
	color:#BFBFBF;
}

#p-navigation li > ul > li > a > em, #p-Community li > ul > li > a > em {
	transition: 0.3s ease-out;
}

#p-navigation li > ul > li:hover > a > em, #p-Community li > ul > li:hover > a > em {
	transform:translateX(25%);
}

#p-navigation li.hover > ul.sub-menu, #p-Community li.hover > ul.sub-menu {
	display: block;
}

/* general submenu */
#p-navigation ul.sub-menu, #p-Community ul.sub-menu {
	border: 1px solid #000000;
	display: none;
	background: #ffffff;
	position: absolute;
	padding: 1px;
	width: 175px;
	margin-left: 170px;
	margin-top: -38px;
	z-index: 100;
}

@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
  #p-navigation ul.sub-menu, #p-Community ul.sub-menu, #p-navigation .pBody, #p-Community .pBody, #p-search .pBody, #p-tb .pBody, #p-lang .pBody{
	background-color:rgba(24,83,188,0.6) !important;
	-webkit-backdrop-filter: saturate(180%) blur(30px);
	backdrop-filter: saturate(180%) blur(30px);
    box-shadow: 0px 0px 16px 0px #000000;
  }
}

/* Only the first */
#p-navigation > div > ul > li > ul.sub-menu, #p-Community > div > ul > li > ul.sub-menu {
	margin-left: 170px;
	margin-top: -38px;
}

#p-navigation li a div:hover, 
#p-Community li a div:hover,
#p-tb li a div:hover,
#p-lang li a div:hover {
	width: 197px;
	background-color:#282828;
}

/*************************************************
**
**		EDITING WINDOW
**
**************************************************/
.ve-activated .ve-init-target-source.ve-init-target.ve-init-mw-target.ve-init-mw-articleTarget.ve-init-mw-desktopArticleTarget {
	margin: 3.55em 1.5em 1.5em 1.5em;
}

/*************************************************
**
**		RELATED ARTICLES
**
**************************************************/
div#mw-data-after-content{
	margin-top: 1.8em;
}

/*************************************************
**
**		FOOTER
**
**************************************************/
div#footer{
	display:flex;
	flex-direction: column;
	border-color: #0066FF;
}