MediaWiki:Common.css

From WikiConference North America
Revision as of 16:11, 2 June 2015 by James Hare (talk | contribs) (Uh, I meant)
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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 */

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700);

/* Typography */
/* Makes site-wide what has been implemented on a page-by-page basis */

.firstHeading {
   font-weight:600;
   border-bottom: none;
   margin-bottom:10px;
   padding-top:10px !important;
   padding-left:0;
   font-size: 2.4em !important;
   width:100%;
   margin:auto;
   border-collapse:collapse;
   vertical-align:top;
   line-height:100%;
}

body {
  font-family:'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

div#content h1, div#content h2, div#content, #firstHeading {
	font-family:'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

@media screen and (min-width:750px) {
  div#bodyContent {
    font-size:1.05em; padding:0;
  }
  p {
    margin-bottom:1em;
  }
}

/* Main Page Banner */

.banner-image {
  position: relative;
  overflow: hidden;
  max-width: 65em; 
  width: 100%;
  height: auto;
  margin-bottom: .6em;
  text-align: center;
  padding-left: 0 !important;
}
.banner-image img {
  width: 100%;
  height: auto;
  width: auto\9;
  margin:0 auto;
}

.page-2015_Main_Page #firstHeading, .page-2015_Main_Page #yearline {
  display: none;
}

/* Copied from Wikivoyage for scalable-width images */

@media screen and (max-width:799px) {
  .banner-image {
    position: relative;
    overflow: hidden;
    max-width: 1125px; 
    width: 100%;
    height: auto;
    margin-bottom: .6em;
    text-align: center;
    padding-left: 0 !important;
  }
  .banner-image img {
    width: 100%;
    height: auto;
    width: auto\9;
    margin:0 auto;
  }
  #main-subhead {
  	display:none;
  }
}

@media screen and (min-width:800px) {
  .banner-image {
    float: right;
    position: relative;
    overflow: hidden;
    max-width: 1125px; 
    height: auto;
    margin-bottom: .6em;
  }
  .banner-image img {
    float: right;
    width: 100%;
    height: auto;
    width: auto\9;
  }
  .banner-image-left {
    float: left !important;
  }
  .banner-image-left img {
    float: left !important;
  }
  .banner-image-none {
    float: none !important;
  }
  .banner-image-none img {
    float: none !important;
  }
  .banner-image-center {
    padding-left: none !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .banner-image-center img {
    float: none !important;
  }
}

/* Arrow button formatting */

.arrowbutton {
	color:#ffffff;
	width:100px;
	padding:0.4em;
	line-height:1.5em;
}

.arrowbutton::before {
	content:"⇒ ";
	font-weight:bold;
}

.arrowbutton-red {
	background:#7e322c;
}

.arrowbutton-green {
	background:#53946b;
}

.arrowbutton-blue {
	background:#4f79a2;
}

.arrowbutton-gold {
	background:#E5B921;
}

.arrowbutton-red:hover {
    background: #EDDEDE !important;
    color: #000000 !important;
}

.arrowbutton-green:hover {
    background: #DEEDE6 !important;
    color: #000000 !important;
}

.arrowbutton-blue:hover {
    background: #DEE7ED !important;
    color: #000000 !important;
}

.arrowbutton-gold:hover {
    background: #faefcb !important;
    color: #000000 !important;
}

@media screen and (min-width:800px) {
  #megaheader {
    height:500px;
  }
}

@media screen and (max-width:799px) {
  #megaheader {
     height:auto;
  }
}

#megaheader img {
  opacity:0;
  -moz-transition: opacity 2s; /* Firefox 4 */
  -webkit-transition: opacity 2s; /* Safari and Chrome */
  -o-transition: opacity 2s;
  transition: opacity 2s;
}