MediaWiki:Common.css

/* CSS placed here will be applied to all skins */

@import url(//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%;
}

.createboxButton {
    font-size: 1em;
    display: inline-block;
    min-width: 4em;
    max-width: 28.75em;
    margin: 5px;
    padding-top: 0.546875em;
    padding-right: 1em;
    padding-bottom: 0.546875em;
    padding-left: 1em;
    line-height: 1.286;
    border-radius: 2px;
    box-sizing: border-box;
    background-color: #f8f9fa;
    color: #222222;
    border: 1px solid #a2a9b1;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}

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;
}