Albedon Wars Wiki
Don't have an account?
Register
Register
Albedon Wars Wiki
Albedon Wars Wiki
25
pages

Hydra.css

MediaWiki page
Back to page
Sign in to edit
No edit summary
No edit summary
Line 723: Line 723:
 
padding-top: 5px;
  
padding-top: 5px;
 
text-align: center;
  
text-align: center;
  +
}
  +
  +
/* image */
  +
.aw img {
  +
height: auto;
  +
width: auto;
  +
max-width: 100%;
  +
max-height: 100%;
 
}
  
}
   

Revision as of 13:27, 6 September 2017

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

/* colours: #F8F49D = a light yellow, #FA7637 = orange, #333f51 = dark blue */

/*********/
/* fonts */
/*********/
@font-face {
	font-family: 'OpenSans-Bold';
	src: local('OpenSans-Bold'), local('OpenSans-Bold'), url(/media/hydra/fonts/OpenSans-Bold.ttf) format('truetype');
}

@font-face {
	font-family: 'OpenSans-BoldItalic';
	src: local('OpenSans-BoldItalic'), local('OpenSans-BoldItalic'), url(/media/hydra/fonts/OpenSans-BoldItalic.ttf) format('truetype');
}

@font-face {
	font-family: 'OpenSans-ExtraBold';
	src: local('OpenSans-ExtraBold'), local('OpenSans-ExtraBold'), url(/media/hydra/fonts/OpenSans-ExtraBold.ttf) format('truetype');
}

@font-face {
	font-family: 'OpenSans-ExtraBoldItalic';
	src: local('OpenSans-ExtraBoldItalic'), local('OpenSans-ExtraBoldItalic'), url(/media/hydra/fonts/OpenSans-ExtraBoldItalic.ttf) format('truetype');
}

@font-face {
	font-family: 'OpenSans-Italic';
	src: local('OpenSans-Italic'), local('OpenSans-Italic'), url(/media/hydra/fonts/OpenSans-Italic.ttf) format('truetype');
}

@font-face {
	font-family: 'OpenSans-Light';
	src: local('OpenSans-Light'), local('OpenSans-Light'), url(/media/hydra/fonts/OpenSans-Light.ttf) format('truetype');
}

@font-face {
	font-family: 'OpenSans-LightItalic';
	src: local('OpenSans-LightItalic'), local('OpenSans-LightItalic'), url(/media/hydra/fonts/OpenSans-LightItalic.ttf) format('truetype');
}


@font-face {
	font-family: 'OpenSans-Regular';
	src: local('OpenSans-Regular'), local('OpenSans-Regular'), url(/media/hydra/fonts/OpenSans-Regular.ttf) format('truetype');
}

@font-face {
	font-family: 'OpenSans-Semibold';
	src: local('OpenSans-Semibold'), local('OpenSans-Semibold'), url(/media/hydra/fonts/OpenSans-Semibold.ttf) format('truetype');
}

@font-face {
	font-family: 'OpenSans-SemiboldItalic';
	src: local('OpenSans-SemiboldItalic'), local('OpenSans-SemiboldItalic'), url(/media/hydra/fonts/OpenSans-SemiboldItalic.ttf) format('truetype');
}

p {
  font-family: "OpenSans-Regular";
}

/******************************************************/
/* For elements which only display in the mobile view */
/******************************************************/
.mobileonly {
    display: none;
}

/*************************/ 
/* Hide main page header */
/*************************/
body.page-Albedon_Wars_Wiki h1.firstHeading {
    display:none;
}

/*************/
/* Wiki Body */
/*************/
body {
  background: url("https://albedonwars.gamepedia.com/media/albedonwars.gamepedia.com/b/ba/AlbedonWars_title.png") no-repeat fixed center center / cover #5B255A;
}

#mw-page-base {
  background-color: transparent;
  background-image: none;
  background-position-x: left;
  background-position-y: bottom;
  background-repeat: repeat-x;
  height: 5em;
}

/********/
/* logo */
/********/
#p-logo a {
  background-position-x: center;
  background-position-y: center;
  background-repeat: no-repeat;
  display: block;
  height: 185px;
  text-decoration-color: -moz-use-text-color;
  text-decoration-line: none;
  text-decoration-style: solid;
  width: 10em;
 -webkit-filter: drop-shadow(0px 0px 10px white);
    filter: drop-shadow(0px 0px 3.5px white) drop-shadow(1px 1px 1px white);
}

/***********/
/* content */
/***********/
.mw-body {
  border: none;
  background-color: white;
  color: #333F51;
  direction: ltr;
  margin-top: -1px;
}

.mw-body .firstHeading,
.mw-body h1, 
.mw-body h2,
h1, 
h2, 
h4, 
h5, 
h6 {
    letter-spacing: 1px;
    color: #333f51
}

/***********/
/* top nav */
/***********/
#right-navigation {
  float: right;
  margin-top: 1em;
}

#left-navigation {
  display: inline;
  float: left;
  margin-top: 1em;
}

div.vectorTabs {
  font-size: 18px;
}

div.vectorTabs,
div.vectorTabs span,
div.vectorTabs li.selected,
div.vectorTabs ul,
div.vectorTabs ul li,
div.vectorTabs li a {
    background-color: rgba(0, 0, 0, 0);
    background-image: none;
    letter-spacing: 1px;
    color:#F9F59E;
    text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

div.vectorTabs ul li {
    margin-right: 5px;
}

div.vectorTabs li span {
    background: transparent;
    display: inline-block;
    border: none;
    padding: 2px 10px;
    margin-top: 0.5em;
    height: 19px;
    text-align: center;
}

div.vectorTabs li a {
    background-image: none;
    margin-top: -16px;
    text-shadow: none;
}

div#mw-head li.new a,
div#mw-head li.new a:visited {
    color: #fc0000 !important;
    text-shadow: none;
}

div#mw-head a,
div#mw-head div.vectorTabs a,
div#mw-head div.vectorMenu a,
.vectorTabs li a span,
div.vectorMenu h3 span {
    letter-spacing: 1px;
    color:#F9F59E;
    text-shadow: none;
    text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

div.vectorTabs li span a {
    color: #222222;
    font-weight: bold;
    text-align: center;
}

div.vectorTabs ul li:first-child {
    border-image: none;
    border-left: medium none;
}

div#mw-head li.selected a,
div#mw-head li.selected a span,
div#mw-head div.vectorTabs li.selected a,
div#mw-head div.vectorTabs li.selected a:visited {
    letter-spacing: 1px;
    color:#F9F59E;
    text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

div#p-sharing .menu {
   margin-left: 45px;
   min-width: 0px;
   width: 48px;
   background:#333F51;
}

#p-sharing #socialIconImages img {
   width: 100%;
}

#p-sharing #socialIconImages a {
   width: 40px;
}

div.vectorMenu h3 span {
  font-size: 14px;
  padding:1px;
  font-weight:bold;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

div.vectorMenu h3 span a {
    background: url("https://commons.gamepedia.com/media/commons.gamepedia.com/0/0b/Vector_menu_downarrow.png") no-repeat scroll center center transparent;
}

div#mw-head div.vectorMenu h4,
div#p-variants.vectorMenu #mw-vector-current-variant {
    color: #FFFFFF;
    padding-top: 0.2em;
    text-shadow: none;
}

#ca-unwatch.icon a,
#ca-watch.icon a {
    margin-left: 3px;
    padding: 18px 0 0;
}

div.vectorMenu div.menu {
    border: none;
    margin-left: 5px;
}

div#mw-head div.vectorMenu h3 {
    background: transparent;
    display: inline-block;
    border: none;
    padding: 2px 10px;
    margin-top: 0.7em;
    height: 19px;
    text-align: center;
}

div.vectorMenu h3 a {
    background-color: rgba(0, 0, 0, 0);
    background-image: url("https://commons.gamepedia.com/media/commons.gamepedia.com/8/80/Vector_menu_downarrow_white.png");
    background-position: 50% 50%;
    border: medium none;
}

div#mw-head div.vectorMenu li.selected a,
div#mw-head div.vectorMenu li.selected a:visited {
    color: #c0c0c0;
}

div#mw-head div.vectorMenu li a {
    color: #7AB1CC;
}

div#mw-head div.vectorMenu ul {
    background-color: #333F51;
    background-image: none;
    border-right: 5px none;
}

/***********/
/* Sidebar */
/***********/
div#mw-panel div.portal, 
div#mw-panel div.portal div.body,
#mw-panel.collapsible-nav .portal {
    background-image: none;
}

#mw-panel.collapsible-nav .portal.collapsed h3 a,
#mw-panel.collapsible-nav .portal h3 a {
     color: #F8F49D;
     font-size: 130%;
     font-weight:bold;
     text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

div#mw-panel div.portal div.body ul li a,
div#mw-panel div.portal div.body ul li a:visited,
div#mw-panel div.portal div.body ul li a:active {
    color: white;
    text-shadow: 1px 1px #000000;
}

div#mw-panel div.portal div.body ul li a:hover {
  color: #F8F49D;
}

/*****************************************************/
/* for "edit this page" tab and "discussion" tab etc */
/*****************************************************/
.pagetab {
     border-style: solid solid none;
     border-width: thin;
     border-color: #808080;
     padding:0.25ex 1ex 0ex;
     font-size: 95%;
}

.ambox {
    background-color: #eeeeee;
    border-bottom-color: #383838;
    border-right-color: #383838;
    border-top-color: #383838;
    border-collapse: collapse;
    font-size: 95%;
    margin: 0 auto 2px auto;
    width: 80%;
}

.ambox-gray {
    border-left-color: #383838;
}

.ambox.ambox-tiny {
    font-size: 90%;
    margin: 2px 0;
    width: auto;
}

.ambox + .ambox {
     margin-top: -2px;
}

.ambox-text {
     padding: 0.25em 0.5em;
}

.ambox-image {
     padding: 2px 0px 2px 0.5em;
     text-align: center;
     width: 60px;
}

.ambox-tiny .ambox-image {
     padding: 2px 0.5em;
     text-align: left;
     width: auto;
}

/* Ambox colors */
.ambox-blue {
     border-left: 10px solid #1e90ff;
}

.ambox-red {
     border-left: 10px solid #b22222;
}

.ambox-orange {
     border-left: 10px solid #f28500;
}

.ambox-yellow {
     border-left: 10px solid #f4c430;
}

.ambox-purple {
     border-left: 10px solid #9932cc;
}

.ambox-gray {
     border-left: 10px solid #bba;
}

.ambox-green {
     border-left: 10px solid #228b22;
}

/* Ambox small text */
.amsmalltext {
     font-size: smaller;
     margin-left:0.8em;
     margin-top:0.5em;
}

/* INFOBOXES: game or book depended color style */
.infoboxtable {
    background-color: #f9f9f9;
    border: 1px solid #aaaaaa;
    color: #000000;
    float: right;
    font-size: 89%; 
    margin-bottom: 0.5em; 
    margin-left: 1em; 
    padding: 0.2em; 
    width: 300px;
}

.infoboxtable td {
    vertical-align: top;
}

.infoboxtable td > div {
    background-color: #f9f9f9;
    border: 2px solid inherit; 
    border-radius: 5px; 
    font-weight: bold;
    padding: 0.5px 7px;
    text-align: right;
}

.infoboxname {
    font-size: 110%; 
    font-weight: bold;
    padding: 0.5em; 
}

.infoboxdetails {
    padding: 0em;
}

/* copyright images tweak */
.copyright-icon {
    background: url("https://commons.gamepedia.com/media/commons.gamepedia.com/thumb/b/b6/Copyright.png/32px-Copyright.png") transparent center center no-repeat;
    background-size: 100%;
    width: 32px;
    height: 32px;
}

/***************/
/* Preferences */
/***************/
.client-js #preftoc {
    background-color: rgba(255, 255, 255, 0.5);
    border: 0px;
}

.client-js #preftoc,
.client-js #preftoc li,  
.client-js #preferences, 
.client-js #preftoc li a {
    background-image: none;
    background-color: transparent;
    color: #666666; /* this font color may need tweaking, depending on your background choices */
}

.client-js #preftoc li:first-child {
    margin-bottom: 1px;
    margin-left: 5px;
}

.client-js #preftoc li.selected a {
    background-color: rgba(255, 255, 255, 0.5);
    background-image: none;
    border-color: #aaaaaa #aaaaaa rgba(255, 255, 255, 0.5);
    border-style: solid;
    border-width: 1px;
    color: #000000; /* this font color may need tweaking, depending on your background choices */
}

.client-js #preferences {
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid #aaaaaa;
}

.client-js #preferences fieldset {
    border-color: #aaaaaa;
}

.client-js #preftoc a, 
.client-js #preftoc a:active {
  display: inline-block;
  font-size: 0.9em;
  padding-bottom: 0.5em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-top: 0.2em;
  position: relative;
  text-decoration-color: -moz-use-text-color;
  text-decoration-line: none;
  text-decoration-style: solid;
}

/*********************/
/* Wiki editor fixes */
/*********************/
.wikiEditor-ui {
    background: rgba(0, 0, 0, 0);
    border: medium none;
}

.wikiEditor-ui .wikiEditor-ui-view {
    border-bottom: medium none;
    border-left: 1px solid #333f51;
    border-right: 1px solid #333f51;
    border-top : medium none;
}

div.wikiEditor-ui-buttons {
    background-color: rgba(0, 0, 0, 0);
    border-top: medium none;
    margin-right: 5px;
}

div.wikiEditor-ui-controls {
    background-color: rgba(0, 0, 0, 0);
    border-bottom: 1px solid #333f51;
}

.wikiEditor-ui-tabs {
    background-color: #FA7637;
    border-left: 1px solid #333f51;
    border-top: 1px solid #333f51;
}

.wikiEditor-ui-tabs div {
    background-color: #333F51;
    border-right: 1px solid #333F51;
    border-bottom: 1px solid #333F51;
}

.wikiEditor-ui-tabs div a {
     background: #333F51;  /* you can use a gradient here if you want to match your vector tabs or get fancy */
     color: #F8F49D;
}

.wikiEditor-ui-tabs div.current {
    background-color: #F8F49D;
    border-bottom: 1px solid #333f51;
}

.wikiEditor-ui-tabs div.current a {
    color: #F9764B; /* depends on your tabs bg & how different you wish the current tab and text to appear */
    font-weight: bold; /* optional to make it stand out */
}

.wikiEditor-ui .wikiEditor-ui-top {
    border-bottom: 1px solid #F8F49D;
}

.wikiEditor-ui-toolbar {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
}

.wikiEditor-ui-toolbar .group {
    border-right: 1px solid #F8F49D;
}

.wikiEditor-ui-toolbar .group-search {
    border-left: 1px solid #F8F49D;
    border-right: none;
}

.wikiEditor-ui-toolbar .group .label {
    color: #F8F49D;
}

.tab {
    border-color: rgba(0, 0, 0, 0);
}

.wikiEditor-ui-toolbar .tabs span.tab a,
.wikiEditor-ui-toolbar .tabs span.tab a:visited {
    color: #FA7637;
}

.wikiEditor-ui-toolbar .tabs span.tab a.current,
.wikiEditor-ui-toolbar .tabs span.tab a.current:visited,
.wikiEditor-ui-toolbar .tabs span.tab a.current:hover{
    color: #F8F49D;
}

.wikiEditor-ui-toolbar .group .tool-select .label {
    color: #000000; /* or any other dark colour, or change the bg to a dark colour to contrast with light text */
}

.wikiEditor-ui-toolbar .sections .section {
    background-color: rgba(0, 0, 0, 0.2);
    border-top: 1px solid #F8F49D;
}

.wikiEditor-ui-toolbar .booklet .index div {
    color: #FA7637;
}

.wikiEditor-ui-toolbar .booklet .index .current {
    background-color: #333f51;
    color: #F8F49D;
}

.wikiEditor-ui-toolbar .booklet .pages {
    background-color: #333f51;
}

.wikiEditor-ui-toolbar .page-characters div span {
    border: 1px solid #333f51;
    color: #F8F49D;
}

.wikiEditor-ui-toolbar .page-characters div span:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #333f51;
    color: #FA7637;
}

.wikiEditor-ui-toolbar .page-table td {
    border-top: 1px solid #F8F49D;
    color: #F8F49D;
}

.wikiEditor-preview-loading {
    background-color: rgba(0, 0, 0, 0);
}

.wikiEditor-preview-contents {
    background-color: rgba(0, 0, 0, 0);
    border-color: -moz-use-text-color #333f51 #333f51;
    border-image: none;
    border-style: none solid solid;
    border-width: medium 1px 1px;
}

.editOptions {  
    background-color: #F8F49D;
    border-color: -moz-use-text-color #333f51 #333f51;
    border-image: none;
    border-style: none solid solid;
    border-width: medium 1px 1px;
}

.wikiEditor-ui-toolbar .tabs span.tab a.current, 
.wikiEditor-ui-toolbar .tabs span.tab a.current:visited, 
.wikiEditor-ui-toolbar .tabs span.tab a.current:hover {
  color: #333F51;
}

div.wikiEditor-preview-contents,
div.wikiEditor-preview-loading {
    background-color: transparent;
}

/**********/
/* Tables */
/**********/
table.wikitable > tr > th, 
table.wikitable > * > tr > th {
  background-color: #333f51;
  color: #f9f59e;
  letter-spacing: 1px;
  text-align: center;
  border: 1px solid #333f51;
}

table.wikitable > tr > td, 
table.wikitable > * > tr > td {
  background-color: #f9f59e;
  border: 1px solid #333f51;
}

/* footer */
div#footer {
  background-attachment: scroll;
  background-clip: border-box;
  background-color: white;
  background-image: none;
  background-origin: padding-box;
  background-position-x: 0;
  background-position-y: 0;
  background-repeat: repeat;
  background-size: auto auto;
  direction: ltr;
  margin-left: 11em;
  margin-top: 0;
  padding-bottom: 0.75em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  padding-top: 0.75em;
}

div#footer ul li a {
  color: #FA7637;
}

/* colour fixes */
ul#filetoc,
.catlinks  {
  background-color: #C7BAC3;
  border: 1px solid #C7BAC3;
  font-size: 95%;
  margin-bottom: 0.5em;
  margin-left: 0;
  margin-right: 0;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
  text-align: center;
}

/* image */
.aw img {
    height: auto; 
    width: auto; 
    max-width: 100%; 
    max-height: 100%;
}

/*************************************************************/
/* this CSS governs the responsive 2 column main page layout */
/*************************************************************/
.fpcontent {
    width: 100%;
    overflow: hidden;
    z-index: 1;
}

.fpmaybecols {
    overflow: hidden;
    margin: -5px 0 -5px 0;
}

.fpmaybecols + .fpmaybecols {
    margin: 0 0 -5px 0;
}

.fpbox {
    background: #C7BAC3;
    border-radius: none;
    border: none;
    color: black; /* change for hydra (light) wikis */
    margin: 5px 5px 5px 5px;
    padding: 5px 5px 5px 5px;
}

.fpplainbox {
    padding: 5px 8px 10px 8px;
    margin: 0 5px 10px 5px;
    vertical-align: top;
}

.fpbox .welcome {
    border-bottom: 1px solid #505050;
    color: black; /* change for hydra (light) wikis */
    font-size: 150%;
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
    text-transform: uppercase;
    text-align: center;
    font-family: "OpenSans-Bold";
}

.fpbox .heading {
    border-bottom: 1px solid #505050;
    color: black; /* change for hydra (light) wikis */
    font-size: 132%;
    font-variant: small-caps;
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
    font-family: "OpenSans-Bold";
}

.fpbox .heading .smalllink {
    color: black; /* change for hydra (light) wikis */
    font-size: 75%;
    font-weight: bold;
    font-family: "OpenSans-Bold";
}

.fpbox hr {
    border: none;
    border-bottom: 2px solid #505050;
}

.fplinks {
    margin: -5px;
}

.fplinks .linkslabel {
    background: rgba(0, 0, 0, 0);
    border-bottom: 2px solid #505050;
    margin: 15px 5px 5px 5px;
    padding: 0 0 5px 0;
}

.fplink {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}

/* Yeah, using display: table makes for a lot of extra markup, but it makes proportionate sizing and vertical centering a lot easier, so going with it */
.fplink .box {
    border-collapse: separate;
    border-spacing: 5px;
    display: table;
    width: 100%;
}

.fplink .box .row {
    display: table-row;
}

.fplink .box .row .cell {
    background: #333f51; 
    background-image: -moz-linear-gradient(center top, #333f51 0%, #c0c0c0 100%); 
    background-image: -webkit-gradient(linear, center top, left bottom, color-stop(0%,#333f51), color-stop(100%,#c0c0c0)); 
    background-image: -webkit-linear-gradient(top, #333f51 0%, #c0c0c0 100%); 
    background-image: -o-linear-gradient(top, #333f51 0%, #c0c0c0 100%); 
    background-image: -ms-linear-gradient(top, #333f51 0%, #c0c0c0 100%); 
    background-image: linear-gradient(to bottom, #333f51 0%, #c0c0c0 100%); 
    border: 1px solid #c0c0c0;
    border-radius: 4px;
    color: white;
    display: table-cell;
    padding: 0 6px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    font-family: "OpenSans-Bold";
}

.fplink.wide .box .row .cell {
    padding: 0 5px;
}

#fptopsection .fplink.image,
#fpflexsection .fplink.image,
#fpbottomsection .fplink.image {
    height: 114px;
    width: 114px;
}

.fplink.image .box .row .cell {
    height: 100px;
    width: 100px;
    vertical-align: bottom;
}

.fplink.image .box .row .cell .image img {
    height: 100px;
    width: 100px;
}

@media (min-width: 470px) {
  .fplink {
    width: 50%;
  }

  .fplink.wide {
    width: 100%;
  }
}

@media (min-width: 580px) {
  .fplink {
    width: 33.333%;
  }

  .fplink.wide {
    width: 66.666%;
  }
}

@media (min-width: 690px) {
  .fplink {
    width: 25%;
  }

  .fplink.wide {
    width: 50%;
  }
}

@media (min-width: 800px) {
  .fplink {
    width: 20%;
  }

  .fplink.wide {
    width: 40%;
  }
}

@media (min-width: 910px) {
  .fplink {
    width: 16.666%;
  }

  .fplink.wide {
    width: 33.333%;
  }
}

@media (min-width: 990px) {
  .fpcontent { 
    padding-right: 520px; 
    width: auto; 
  }

  #fptopsection { 
    float: left; 
    width: 100%; 
  }

  #fpflexsection { 
    float: right;
    width: 520px;
    margin-right: -520px 
  }

  #fpbottomsection { 
    float: left; 
    width: 100%; 
    margin-top: -5px; 
  }

  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 50%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 100%;
  }

  #fpflexsection .fplink {
    width: 25%;
  }

  #fpflexsection .fplink.wide {
    width: 50%;
  }
}

@media (min-width: 1100px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 33.333%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 66.666%;
  }
}

@media (min-width: 1210px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 25%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 50%;
  }
}

@media (min-width: 1320px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 20%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 40%;
  }
}

@media (min-width: 1430px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 16.666%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 33.333%;
  }

  .fplink a {
    padding: 3px 5px;
  }
}

@media (min-width: 1540px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 14.285%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 28.571%;
  }

  #fptopsection .fpmaybercol .fpbox, #fpbottomsection .fpmaybercol .fpbox {
    background-image: none;
  }

  .fpmaybelcol {
    float: left;
    width: 70.886%;
  }

  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 20%;
  }

  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 40%;
  }

  .fpmaybercol {
    float: right;
    width: 29.113%;
  }

  #fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink {
    width: 50%;
  }

  #fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide {
    width: 100%;
  }
}

@media (min-width: 1650px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 12.5%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 25%;
  }
}

@media (min-width: 1697px) {
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 16.666%;
  }

  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 33.333%;
  }
}

@media (min-width: 1760px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 11.111%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 22.222%;
  }
}

@media (min-width: 1850px) {
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 14.285%;
  }

  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 28.571%;
  }
}

@media (min-width: 1870px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 10%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 20%;
  }

  #fptopsection .fplink.image, #fpbottomsection .fplink.image {
    width: 134px;
    height: 134px;
  }

  #fptopsection .fplink.image .box .row .cell, #fpbottomsection .fplink.image .box .row .cell {
    width: 120px;
    height: 120px;
  }

  #fptopsection .fplink.image .box .row .cell .image img, #fpbottomsection .fplink.image .box .row .cell .image img {
    width: 120px;
    height: 120px;
  }
}

@media (min-width: 1918px) {
  #fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink {
    width: 33.333%;
  }

  #fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide {
    width: 66.666%;
  }
}

@media (min-width: 1980px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 9.09%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 18.181%;
  }
}

@media (min-width: 2006px) {
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 12.5%;
  }

  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 25%;
  }
}

@media (min-width: 2090px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 8.33%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 16.666%;
  }
}

@media (min-width: 2161px) {
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 11.111%;
  }

  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 22.222%;
  }
}

@media (min-width: 2200px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 7.692%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 15.384%;
  }
}

@media (min-width: 2296px) {
  #fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink {
    width: 25%;
  }

  #fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide {
    width: 50%;
  }
}

@media (min-width: 2310px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 7.142%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 14.285%;
  }
}

@media (min-width: 2316px) {
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 10%;
  }

  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 20%;
  }
}

@media (min-width: 2420px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 6.666%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 13.333%;
  }

  .fplink a {
    padding: 5px 5px;
  }

  #fptopsection .fplink.image, #fpbottomsection .fplink.image {
    width: 164px;
    height: 164px;
  }

  #fptopsection .fplink.image .box .row .cell, #fpbottomsection .fplink.image .box .row .cell {
    width: 150px;
    height: 150px;
  }

  #fptopsection .fplink.image .box .row .cell .image img, #fpbottomsection .fplink.image .box .row .cell .image img {
    width: 150px;
    height: 150px;
  }
}

.fplink.image .image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 75%;
  z-index: 1;
}

.fplink.image a {
  z-index: 2;
}

.fplink a {
  display: block;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1px 5px;
  color: white !important;
}

.fplink.image .image a {
  padding: 0;
}

.fplink.image .link a {
  background: rgba(0, 0, 0, 0.1);
  border-top: 2px solid #505050;
}

.fplink.wide a {
  margin: 0 -5px;
}

.fpvideos {
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
}

.fpvideo {
  display: inline-block;
  margin: 0 5px;
}
Community content is available under CC BY-NC-SA unless otherwise noted.