MediaWiki:Common.css
Revision as of 21:57, 3 March 2016 by Dustin Loup (talk | contribs)
Note: After saving, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/* CSS placed here will be applied to all skins */
/* No page name on main page (en) */
body.page-Main_Page h1.firstHeading {
display: none;
}
.IW_BigGreenIconBox {
border-spacing: 0;
border: 1px solid #28903b;
display: inline-block !important;
}
.IW_BigGreenIconBox td {
text-align: center;
width: 85px;
}
.IW_BigGreenIconBox td img {
margin: -2px;
}
.IW_MissionAndSponsorsBox {
float: right;
border: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
width: 375px;
margin-left: 20px;
background-color: #FFF;
}
.IW_MissionAndSponsorsBox .MissionStatement {
color: #000;
background-color: #f6f6f6;
padding: 5px 10px;
border: 1px solid #0d8323;
text-align:center;
}
.IW_MissionAndSponsorsBox .Sponsors {
margin: 0;
font-family: sans-serif;
font-size: 12px;
text-align: left;
padding: 20px 0px 20px 15px;
}
.IW_MissionAndSponsorsBox .Sponsors .Title {
font-size: 20px;
font-weight: bold;
}
.IW_MissionAndSponsorsBox .Sponsors .AskButton {
width: 300px;
margin: 25px auto;
padding-bottom: 0px;
}
.gTLD_InfoBox {
background-color: #f6f6f6;
border: 2px solid #466f81;
padding: 10px;
margin-bottom: 15px;
width: 100%;
height: 150px;
}
.gTLD_InfoBox .Dimensions {
width: 200px;
height: 125px;
float: left;
margin: 0px 20px 0 0;
border-right: 1px solid #bdbdbd;
}
.gTLD_Info {
background-color: #f6f6f6;
border: 2px solid #466f81;
padding: 10px;
margin: 2em 0 2em 0;
width: 100%;
height: 150px;
}
.AOW {
background:#466f81;
font-family:sans-serif;
font-size:120%;
font-weight:bold;
border:2px solid #0d8323;
text-align:left;
color:#FFF;
padding-left:0.4em;
padding-top:0.2em;
padding-bottom:0.2em;
}
.WelcomeBox {
float:left;
height:8em;
width:50%;
background:#d8dfe8;
padding:0 -1em 0 0;
margin:0 0 1em 0;
display:inline-block;
}
.WelcomeBox .Message {
background:#d8dfe8;
align:center;
}
.MissingLinks {
display:none;
}
.CommunityPortalHeader {
width:100%;
height:50px;
background:#d8dfe8;
margin:1.2em 0 6px 0;
border:1px solid #ddd;
text-align: center;
font-size: 1.7em;
}
.WritingCommunityBox {
width:50%;
float:left;
padding:0 .5em 0 0;
}
.WritingCommunityBox .RowStyle {
width: 100%;
padding:0em .1em 0em .1em;
border-bottom:1px solid #0d8323;
background: whitesmoke;
}
.WritingCommunityBox .ColumnStyle {
background:#0d8323;
font-family:sans-serif;
font-size:120%;
font-weight:bold;
border:2px solid #466f81;
text-align:left;
color:#FFF;
padding: 0 0 0 .65em;
}
.PrimerICW {
width:46%;
background-color:whitesmoke;
float:left;
display:inline-block;
height:180px;
padding: 1em 1em 1em 1em;
border: 2px solid gray;
}
.PrimerIM {
width:46%;
background-color:whitesmoke;
float:right;
display:inline-block;
height:180px;
padding: 1em 1em 1em 1em;
border: 2px solid gray;
}
.ICANNBoard {
display: none;
}
.ICANNBoardMembers {
height:230px;
width:50%;
display:inline-block;
padding:1em 1em 1em 1em;
float:left;
overflow:auto;
}
.Editathon {
background:#339933;
font-family:sans-serif;
font-size:120%;
font-weight:bold;
border:2px solid #ffa500;
text-align:left;
color:#FFF;
padding-left:0.4em;
padding-top:0.2em;
padding-bottom:0.2em;
}
.MainPage {
width:70%;
float:left;
display:inline-block;
}
#AOWBox {
display:flex;
flex-direction:column;
width:99.7%;
border:1px solid #bcd7c4;
margin-bottom:.5em;
float:left;
background:white;
}
.MainPageHeader {
background:#4c9662;
font-family:sans-serif;
font-size:120%;
font-weight:bold;
border:2px solid #0d8323;
text-align:left;
color:#FFF;
height: 20px;
margin:.25em .25em .25em .25em;
padding:.25em .25em .25em .25em;
}
#FeaturedVideo {
height:280px;
width:62%;
border:1px solid #bcd7c4;
margin:0 0em 0em 0;
display:inline-block;
background:white;
}
#Acronym {
height:280px;
width:36.5%;
border:1px solid #bcd7c4;
margin:0 0 .5em 0;
float:right;
background:white;
padding:0 0em 0 0;
}
#AcronymArchive {
height:280px;
border:1px solid #bcd7c4;
margin:0 0 .5em 0;
float:left;
background:white;
padding:0 0em 0 0;
}
#News {
height:225px;
width:100%;
border:1px solid #bcd7c4;
margin-bottom:.5em;
background:white;
}
#Welcome {
float:left;
width:35%;
text-align: center;
}
#topbar {
background: -moz-linear-gradient(#098280, #E95F26);/* For Firefox 3.6 to 15 */
background: #098280; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#098280, #E95F26); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#098280, #E95F26); /* For Opera 11.1 to 12.0 */
background: linear-gradient(#098280, #E95F26); /* Standard syntax */
width:100%;
color:white;
font-size:4vw;
text-align:center;
text-shadow:2px 2px black;
font-weight:bold;
min-height:130px;
display:flex;
align-items:center;
}
#body {
width:100%;
margin:0 auto;
}
.fixed {
margin:0 auto;
vertical-align:baseline;
}
.flexbox{
display:flex;
flex-direction:column;
margin: 15px 15px;
font-size:1.3vw;
}
.navbutton {
border-right:.1vw solid #587560;
color:white;
font-weight:bold;
font-size:1.8vw;
padding:0 .5vw;
display:flex;
flex-direction:column;
width:13vw;
height:3vw;
text-align:center;
float:left;
text-shadow:.1vw .1vw black;
}
.navbutton2 {
color:white;
font-weight:bold;
font-size:1.8vw;
padding:0 .5vw;
display:flex;
flex-direction:column;
width:9vw;
height:3vw;
text-align:center;
float:left;
text-shadow:.1vw .1vw black;
}
#navbar {
background:#E95F26;
border:.1vw solid #587560;
height:3vw;
display:flex;
flex-direction:column;
}
.sectionheader{
background:#098280;
width:100%;
color:white;
font-size:4vw;
text-align:center;
text-shadow:.075vw .075vw black;
font-weight:bold;
min-height:3.5vw;
border-radius:25px;
display:flex;
align-items:left;
}
.primerlogo {
width:auto;
max-width:13vw;
height:auto;
max-height:13vw;
margin:0 0 2vw 3vw;
}
.camel {
width: auto;
max-width: 16vw;
height: auto;
max-height: 11vw;
width: auto;
position:relative;
top:1vw;
}
.editathonTall {
width:auto;
max-width:13vw;
height:auto;
max-height:30vw;
padding:0 0 0 0;
}
#editathonsection {
font-size:1.3vw;
text-align:left;
display:flex;
align-items:center;
}
.sectionheader2{
background:#52A7A6;
width:100%;
color:white;
font-size:2vw;
text-align:center;
text-shadow:.075vw .075vw black;
font-weight:bold;
min-height:3vw;
display:flex;
align-items:left;
padding:1vw 0 0 1vw;
}
.primertextbox{
background-color:gray;
color:white;
padding:25px 15px 15px 15px;
position:relative;
bottom:.4vw;
font-size:1.3vw;
}
.venuemap{
max-width:100%;
}
.faditribute{
height:10vw;
}
.mw-collapsible-toggle {
float: right;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Align the toggle based on the direction of the content language */
/* @noflip */
.mw-content-ltr .mw-collapsible-toggle,
.mw-content-rtl .mw-content-ltr .mw-collapsible-toggle {
float: right;
}
/* @noflip */
.mw-content-rtl .mw-collapsible-toggle,
.mw-content-ltr .mw-content-rtl .mw-collapsible-toggle {
float: left;
}
.mw-customtoggle,
.mw-collapsible-toggle {
cursor: pointer;
}
/* collapse links in captions should be inline */
caption .mw-collapsible-toggle,
.mw-content-ltr caption .mw-collapsible-toggle,
.mw-content-rtl caption .mw-collapsible-toggle,
.mw-content-rtl .mw-content-ltr caption .mw-collapsible-toggle,
.mw-content-ltr .mw-content-rtl caption .mw-collapsible-toggle {
float: none;
}
/* list-items go as wide as their parent element, don't float them inside list items */
li .mw-collapsible-toggle,
.mw-content-ltr li .mw-collapsible-toggle,
.mw-content-rtl li .mw-collapsible-toggle,
.mw-content-rtl .mw-content-ltr li .mw-collapsible-toggle,
.mw-content-ltr .mw-content-rtl li .mw-collapsible-toggle {
float: none;
}
/* the added list item should have no list-style */
.mw-collapsible-toggle-li {
list-style: none;
}
#AcronymList{
background: -moz-linear-gradient(#098280, #E95F26);/* For Firefox 3.6 to 15 */
background: #098280; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#098280, #E95F26); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#098280, #E95F26); /* For Opera 11.1 to 12.0 */
background: linear-gradient(#098280, #E95F26); /* Standard syntax */
max-width:85vw;
font-size:5vw;
text-align:center;
font-weight:bold;
min-height:130px;
}
#fadifarewell{
background: -moz-linear-gradient(#098280, #E95F26);/* For Firefox 3.6 to 15 */
background: #098280; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#098280, #E95F26); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#098280, #E95F26); /* For Opera 11.1 to 12.0 */
background: linear-gradient(#098280, #E95F26); /* Standard syntax */
max-width:85vw;
font-size:1vw;
color:white;
min-height:130px;
padding:2vw;
}
#abc{
width:85vw;
color:white;
font-size:5vw;
text-align:center;
text-shadow:.2vw .2vw black;
font-weight:bold;
min-height:13vw;
border-radius:0;
}
.AcronymButton{
background-color:transparent;
font-size:2.4vw;
width:12vw;
height:7.7vw;
padding:.5vw .5vw;
display: inline-block;
position: relative;
border: .2vw solid #FFF;
overflow: hidden;
text-decoration: none;
text-align:center;
color: #FFF;
font-family: 'raleway', sans-serif;
box-shadow: .1vw .1vw .1vw gray;
}
.AcronymButton span {
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.AcronymButton:before,
.AcronymButton:after {
content: '';
position: absolute;
top: 0.67em;
left: 0;
width: 100%;
text-align: center;
opacity: 0;
-webkit-transition: .4s,opacity .6s;
-moz-transition: .4s,opacity .6s;
-o-transition: .4s,opacity .6s;
transition: .4s,opacity .6s;
}
.AcronymButton:before {
content: attr(data-hover);
font-size:1vw;
-webkit-transform: translate(-150%,0);
-moz-transform: translate(-150%,0);
-ms-transform: translate(-150%,0);
-o-transform: translate(-150%,0);
transform: translate(-150%,0);
}
/* :after */
.AcronymButton:after {
content: attr(data-active);
-webkit-transform: translate(150%,0);
-moz-transform: translate(150%,0);
-ms-transform: translate(150%,0);
-o-transform: translate(150%,0);
transform: translate(150%,0);
}
/* Span on :hover and :active */
.AcronymButton:hover span,
.AcronymButton:active span {
font-size:1vw;
opacity: 0;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
-ms-transform: scale(0.3);
-o-transform: scale(0.3);
transform: scale(0.3);
}
/*
We show :before pseudo-element on :hover
and :after pseudo-element on :active
*/
.AcronymButton:hover:before,
.AcronymButton:active:after {
opacity: 1;
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
-webkit-transition-delay: .4s;
-moz-transition-delay: .4s;
-o-transition-delay: .4s;
transition-delay: .4s;
}
/*
We hide :before pseudo-element on :active
*/
.AcronymButton:active:before {
-webkit-transform: translate(-150%,0);
-moz-transform: translate(-150%,0);
-ms-transform: translate(-150%,0);
-o-transform: translate(-150%,0);
transform: translate(-150%,0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.fadiquote {
height:11vw;
width:7.3vw;
}
.fadicaricature {
height:11vw;
width:70.4vw;
}