MediaWiki:Common.css: Difference between revisions

mNo edit summary
Mr Pie 5 (talk | contribs)
Updated mp-featured color to better match figma. Removed red header border on main page.
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');
@font-face {
    font-family: 'KingthingsPetrock';
    font-style: normal;
    font-weight: normal;
    src: local("Kingthings Petrock"),
        url('filepath://Kingthings_Petrock-webfont.woff') format('woff');
}
@font-face {
    font-family: 'MuseoSans';
    font-style: normal;
    font-weight: normal;
    src: local("Museo Sans"),
        url('filepath://Museo_Sans_500.woff') format('woff');
}
@font-face {
    font-family: 'League Spartan';
    font-style: normal;
    font-weight: bold;
    src: local("League Spartan"),
        url('filepath://Leaguespartan-bold.woff') format('woff');
}


.new, #p-personal a.new {
.new, #p-personal a.new {
Line 20: Line 46:
}
}


#searchInput { border:none !important;}
.vector-menu-dropdown{ background-color:white !important; }
#ca-unwatch.icon a, #ca-watch.icon a {
#ca-unwatch.icon a, #ca-watch.icon a {
     padding-top: 3.10em;
     padding-top: 3.10em;
Line 56: Line 80:
}
}


.mw-wiki-logo {
    background-image: url(https://wiki.geministation.com/images/station2.png) !important;
    background-size: 438px !important;
}
div#mw-panel {
div#mw-panel {
     padding-top: 0 !important;
     padding-top: 0 !important;
Line 84: Line 104:
     float: right;
     float: right;
    
    
}
#mw-page-base {
 
 
    background-image: url(https://wiki.geministation.com/images/header_bg.png) !important;
    background-repeat: no-repeat;
  background-position:right !important;
   
}
}


Line 175: Line 185:
}
}
.eu4box-inline .heading {
.eu4box-inline .heading {
background-image: url("https://wiki.geministation.com/images/6/61/Earth_space_500px.png");
background-image: url("https://wiki.geministation.com/images/6/61/Earth_space_500px.png"); /* [[File:Earth_space_500px.png]] */
background-repeat: no-repeat;
background-repeat: no-repeat;
     background-size: auto;
     background-size: auto;
Line 242: Line 252:


/* Main Page Header Image*/
/* Main Page Header Image*/
.header {background-image: url('https://wiki.geministation.com/images/7/78/Header3.png');
.header {background-image: url('https://wiki.geministation.com/images/7/78/Header3.png'); /* [[File:Header3.png]] */
background-repeat: no-repeat;
background-repeat: no-repeat;
display: block;
display: block;
Line 252: Line 262:
}
}


@font-face {  
a,
     font-family: 'KingthingsPetrock';
image a {
    font-style: normal;
     color: #327ba7;
    font-weight: normal;
    src: local("Kingthings Petrock"),
        url('filepath://Kingthings_Petrock-webfont.woff') format('woff');
}
}


@font-face {
a:visited,
    font-family: 'MuseoSans';
image a:visited,
    font-style: normal;
a:active,
    font-weight: normal;
image a:active {
     src: local("Museo Sans"),
     color: #327ba7;
        url('filepath://Museo_Sans_500.woff') format('woff');
}
}


@font-face {
a.new,
    font-family: 'League Spartan';
    font-style: normal;
    font-weight: bold;
    src: local("League Spartan"),
        url('filepath://Leaguespartan-bold.woff') format('woff');
}
 
a,
image a {
    color: #327ba7;
}
 
a:visited,
image a:visited,
a:active,
image a:active {
    color: #327ba7;
}
 
a.new,
image a.new {
image a.new {
     color: #ba0000;
     color: #ba0000;
Line 512: Line 498:
.mw-userlink[title="User:Botsey"],
.mw-userlink[title="User:Botsey"],
.mw-userlink[title="User:BrenBot"],
.mw-userlink[title="User:BrenBot"],
.mw-userlink[title="User:Cåmdroid"],
.mw-userlink[title="User:CÃ¥mdroid"],
.mw-userlink[title="User:CapitalWillowBot"],
.mw-userlink[title="User:CapitalWillowBot"],
.mw-userlink[title="User:CephBot"],
.mw-userlink[title="User:CephBot"],
Line 1,452: Line 1,438:
.mission-action:before,
.mission-action:before,
.mission-action:after {
.mission-action:after {
     content: '———';
     content: '\0151\0151\0151';
     margin: 4px;
     margin: 4px;
     letter-spacing: -1px;
     letter-spacing: -1px;
Line 2,122: Line 2,108:


.fairycode b ~ b:before {
.fairycode b ~ b:before {
     content: "";
     content: "\2022";
}
}


Line 3,042: Line 3,028:


.navbox .navbox-list li + li::before {
.navbox .navbox-list li + li::before {
     content: ' ';
     content: ' \2022\ ';
     white-space: nowrap;
     white-space: nowrap;
}
}
Line 3,301: Line 3,287:


.portal-link-img.article.earthtoken a:hover {
.portal-link-img.article.earthtoken a:hover {
     background-image: url("https://wiki.geministation.com/images/2/23/Earth_token.png");
     background-image: url("https://wiki.geministation.com/images/2/23/Earth_token.png"); /* [[File:Earth_token.png]] */
     background-size: contain;
     background-size: contain;
     background-repeat: no-repeat;
     background-repeat: no-repeat;
}
}
.portal-link-img.article.eristoken a:hover {
.portal-link-img.article.eristoken a:hover {
     background-image: url("https://wiki.geministation.com/images/6/65/Eris_token.png");
     background-image: url("https://wiki.geministation.com/images/6/65/Eris_token.png"); /* [[File:Eris_token.png]] */
     background-size: contain;
     background-size: contain;
     background-repeat: no-repeat;
     background-repeat: no-repeat;
}
}
.portal-link-img.article.gemtoken a:hover {
.portal-link-img.article.gemtoken a:hover {
     background-image: url("https://wiki.geministation.com/images/2/24/Gem_token.png");
     background-image: url("https://wiki.geministation.com/images/2/24/Gem_token.png"); /* [[File:Gem_token.png]] */
     background-size: contain;
     background-size: contain;
     background-repeat: no-repeat;
     background-repeat: no-repeat;
}
}
.portal-link-img.article.jupitertoken a:hover {
.portal-link-img.article.jupitertoken a:hover {
     background-image: url("https://wiki.geministation.com/images/0/0b/Jupiter_token.png");
     background-image: url("https://wiki.geministation.com/images/0/0b/Jupiter_token.png"); /* [[File:Jupiter_token.png]] */
     background-size: contain;
     background-size: contain;
     background-repeat: no-repeat;
     background-repeat: no-repeat;
}
}
.portal-link-img.article.marstoken a:hover {
.portal-link-img.article.marstoken a:hover {
     background-image: url("https://wiki.geministation.com/images/8/8a/Mars_token.png");
     background-image: url("https://wiki.geministation.com/images/8/8a/Mars_token.png"); /* [[File:Mars_token.png]] */
     background-size: contain;
     background-size: contain;
     background-repeat: no-repeat;
     background-repeat: no-repeat;
}
}
.portal-link-img.article.moontoken a:hover {
.portal-link-img.article.moontoken a:hover {
     background-image: url("https://wiki.geministation.com/images/9/97/Moon_token.png");
     background-image: url("https://wiki.geministation.com/images/9/97/Moon_token.png"); /* [[File:Moon_token.png]] */
     background-size: contain;
     background-size: contain;
     background-repeat: no-repeat;
     background-repeat: no-repeat;
}
}
.portal-link-img.article.birthdaytoken a:hover {
.portal-link-img.article.birthdaytoken a:hover {
     background-image: url("https://wiki.geministation.com/images/2/2a/Token_birthday.png");
     background-image: url("https://wiki.geministation.com/images/2/2a/Token_birthday.png"); /* [[File:Token_birthday.png]] */
     background-size: contain;
     background-size: contain;
     background-repeat: no-repeat;
     background-repeat: no-repeat;
}
}
.portal-link-img.article.cavmastoken a:hover {
.portal-link-img.article.cavmastoken a:hover {
     background-image: url("https://wiki.geministation.com/images/6/65/Token_cavmas.png");
     background-image: url("https://wiki.geministation.com/images/6/65/Token_cavmas.png"); /* [[File:Token_cavmas.png]] */
     background-size: contain;
     background-size: contain;
     background-repeat: no-repeat;
     background-repeat: no-repeat;
}
}
.portal-link-img.article.harvesttoken a:hover {
.portal-link-img.article.harvesttoken a:hover {
     background-image: url("https://wiki.geministation.com/images/f/f2/Token_harvest.png");
     background-image: url("https://wiki.geministation.com/images/f/f2/Token_harvest.png"); /* [[File:Token_harvest.png]] */
     background-size: contain;
     background-size: contain;
     background-repeat: no-repeat;
     background-repeat: no-repeat;
}
}
.portal-link-img.article.fightertoken a:hover {
.portal-link-img.article.fightertoken a:hover {
     background-image: url("https://wiki.geministation.com/images/3/31/Fighter_token.png");
     background-image: url("https://wiki.geministation.com/images/3/31/Fighter_token.png"); /* [[File:Fighter_token.png]] */
     background-size: contain;
     background-size: contain;
     background-repeat: no-repeat;
     background-repeat: no-repeat;
}
}
.portal-link-img.article.freightertoken a:hover {
.portal-link-img.article.freightertoken a:hover {
     background-image: url("https://wiki.geministation.com/images/9/9c/Freighter_token.png");
     background-image: url("https://wiki.geministation.com/images/9/9c/Freighter_token.png"); /* [[File:Freighter_token.png]] */
     background-size: contain;
     background-size: contain;
     background-repeat: no-repeat;
     background-repeat: no-repeat;
}
}
.portal-link-img.article.scouttoken a:hover {
.portal-link-img.article.scouttoken a:hover {
     background-image: url("https://wiki.geministation.com/images/1/11/Scout_token.png");
     background-image: url("https://wiki.geministation.com/images/1/11/Scout_token.png"); /* [[File:Scout_token.png]] */
     background-size: contain;
     background-size: contain;
     background-repeat: no-repeat;
     background-repeat: no-repeat;
Line 3,420: Line 3,406:


.quote-source::before {
.quote-source::before {
     content: '';
     content: '\0151\ ';
}
}


Line 4,329: Line 4,315:
.tile.big-tile {
.tile.big-tile {
     width: 100%;
     width: 100%;
     background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), #ffffff 50%), url("filepath://Main page Shauny.png") right / auto 100% no-repeat #ffffff;
     background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), #ffffff 50%), url("filepath://Main page Shauny.png") right / auto 100% no-repeat #ffffff; /* [[File:Main page Shauny.png]] */
     margin-bottom: 0.9rem;
     margin-bottom: 0.9rem;
     padding-right: 8vw;
     padding-right: 8vw;
Line 4,335: Line 4,321:


.tile.big-tile.dxp {
.tile.big-tile.dxp {
     background: linear-gradient(to left, rgba(255, 255, 255, 0.5), #ffffff 50%), url("https://wiki.geministation.com/images/6/6b/Double_Exp_Banner.png") right / auto 100% no-repeat #ffffff;
     background: linear-gradient(to left, rgba(255, 255, 255, 0.5), #ffffff 50%), url("https://wiki.geministation.com/images/6/6b/Double_Exp_Banner.png") right / auto 100% no-repeat #ffffff; /* [[File:Double Exp Banner.png]] */
}
}


.tile.big-tile.moon {
.tile.big-tile.moon {
     background: linear-gradient(to left, rgba(255, 255, 255, 0.5), #ffffff 50%), url("https://wiki.geministation.com/images/7/7d/Moon_Event_Banner.png") right / auto 100% no-repeat #ffffff;
     background: linear-gradient(to left, rgba(255, 255, 255, 0.5), #ffffff 50%), url("https://wiki.geministation.com/images/7/7d/Moon_Event_Banner.png") right / auto 100% no-repeat #ffffff; /* [[File:Moon Event Banner.png]] */
}
}


Line 6,565: Line 6,551:
/*TEMPLATE:MISSIONBOX*/
/*TEMPLATE:MISSIONBOX*/
.gem{
.gem{
background-image: url("https://wiki.geministation.com/images/0/06/Gem_space.png");
background-image: url("https://wiki.geministation.com/images/0/06/Gem_space.png"); /* [[File:Gem space.png]] */
}
}
.earth_space{
.earth_space{
background-image: url("https://wiki.geministation.com/images/5/57/Earth-space.png");
background-image: url("https://wiki.geministation.com/images/5/57/Earth-space.png"); /* [[File:Earth-space.png]] */
}
}
.earth{
.earth{
background-image: url("https://wiki.geministation.com/images/1/1e/Earth.png");
background-image: url("https://wiki.geministation.com/images/1/1e/Earth.png"); /* [[File:Earth.png]] */
}
}
.mars_space{
.mars_space{
background-image: url("https://wiki.geministation.com/images/4/49/Mars_space.png")
background-image: url("https://wiki.geministation.com/images/4/49/Mars_space.png") /* [[File:Mars space.png]] */
}
}
.mars{
.mars{
background-image: url("https://wiki.geministation.com/images/d/de/Mars.png");
background-image: url("https://wiki.geministation.com/images/d/de/Mars.png"); /* [[File:Mars.png]] */
}
}
.jupiter_space{
.jupiter_space{
background-image: url("https://wiki.geministation.com/images/d/d1/Jupiter_space.png");
background-image: url("https://wiki.geministation.com/images/d/d1/Jupiter_space.png"); /* [[File:Jupiter space.png]] */
}
}
.mercury_space{
.mercury_space{
Line 6,586: Line 6,572:
}
}
.eris_space{
.eris_space{
background-image: url("https://wiki.geministation.com/images/b/b3/Eris.png");
background-image: url("https://wiki.geministation.com/images/b/b3/Eris.png"); /* [[File:Eris.png]] */
}
}
.explosion{
.explosion{
background-image: url("https://wiki.geministation.com/images/0/09/Explosion.png");
background-image: url("https://wiki.geministation.com/images/0/09/Explosion.png"); /* [[File:Explosion.png]] */
}
}
.northernlights{
.northernlights{
background-image: url("https://wiki.geministation.com/images/3/35/Northern_lights.png");
background-image: url("https://wiki.geministation.com/images/3/35/Northern_lights.png"); /* [[File:Northern lights.png]] */
}
}
.venus{
.venus{
Line 6,625: Line 6,611:
/*Future Content - Main Page*/
/*Future Content - Main Page*/
.tile.big-tile.futurecontent {
.tile.big-tile.futurecontent {
     background: url("https://wiki.geministation.com/images/4/48/GeminiSpace.png") right / 100% auto no-repeat #ffffff;
     background: url("https://wiki.geministation.com/images/4/48/GeminiSpace.png") right / 100% auto no-repeat #ffffff; /* [[File:GeminiSpace.png]] */
     padding: 1.5em 2em 1em;
     padding: 1.5em 2em 1em;
     text-align: center;
     text-align: center;
Line 6,718: Line 6,704:
      
      
.timebody li:before {
.timebody li:before {
         content: "";
         content: "–";
         margin-right: .5em;
         margin-right: .5em;
   }
   }
Line 6,974: Line 6,960:
     order: -2;
     order: -2;
}
}
/******************
* Sliding gallery *
*******************/
.sliding-gallery {
  max-width:100%;
  display:flex;
  flex-direction:row;
  align-items:center;
}
.sliding-gallery--buttons {
  display:flex;
  flex-direction:column;
}
.sliding-gallery--button {
  background:var(--accent-color);
  color:#fff;
  border:none;
  font-weight:bold;
  font-size:2em;
  height:1.75em;
  width:1.75em;
  margin:5px;
  cursor:pointer;
}
.sliding-gallery--button:hover {
  box-shadow:inset 0 0 0.5em 0.05em rgba(0,0,0,0.75);
}
.sliding-gallery > .gallery {
  overflow-x:scroll;
  display:flex;
  scrollbar-width:none; /* Firefox */
}
.sliding-gallery > .gallery::-webkit-scrollbar{
display:none; /* Other browsers */
}
/**********************
* End sliding gallery *
***********************/
/******************
* Main page stuff *
*******************/
.page-User_Mr_Pie_5_Sandbox {
  --sidebar-width:0em;
  --search-width:55em;
  --head-border-height:0px;
}
.page-User_Mr_Pie_5_Sandbox #mw-panel nav {
  font-size:0;
}
.page-User_Mr_Pie_5_Sandbox #content {
  padding:0;
}
.page-User_Mr_Pie_5_Sandbox.action-view #content {
  background:none;
}
.page-User_Mr_Pie_5_Sandbox h1#firstHeading,
.page-User_Mr_Pie_5_Sandbox #contentSub,
.page-User_Mr_Pie_5_Sandbox #n-Discord {
  display:none;
}
.mp-divider {
  height:10px;
  background:var(--accent-color);
}
.mp-button.top {
  margin-left:20px;
}
.mp-button a,
.mp-button a:visited {
  background:var(--accent-color);
  padding:10px;
  color: #fff;
  font-weight:bold;
  font-size:0.75em;
  text-transform: uppercase;
}
/* MP-featured */
#mp-featured {
  display:flex;
  flex-flow:row wrap;
  justify-content: space-evenly;
  column-gap:10px;
  row-gap: 10px;
  background-color:rgba(241,248,251,0.25);
  padding:10px;
  margin:20px;
  border-radius:10px;
}
.mp-featured--item {
  flex:0 1 24%;
  min-width:300px;
  position:relative;
  border-radius:10px;
  overflow:clip;
}
.mp-featured--image img {
  width:100%;
  height:auto;
  border-radius:10px;
}
.mp-featured--text {
  padding:5px;
  width:calc(100% - 10px);
  position:absolute;
  bottom:0;
  background-color:#0A1420;
  color:#aaa;
  font-size:0.7em;
  min-height:6em;
}
.mp-featured--title {
  color:#f5f5f5;
  font-weight:bold;
  font-size: 1.3em;
}
.mp-featured--link {
  position:absolute;
  height:100%;
  width:100%;
  z-index:2;
}
.mp-featured--link a {
  display:block;
  height:100%;
  width:100%;
  font-size:0;
}
/* MP-big links */
#mp-big-links {
  display:flex;
  flex-flow:row wrap;
  justify-content: space-between;
  align-items: flex-start;
  column-gap: 20px;
  row-gap: 10px;
  margin-left:20px;
 
  --textbox-bottom-margin:50px;
}
.mp-big-link {
  flex:0 1 48%;
  position:relative;
  margin-bottom:var(--textbox-bottom-margin);
}
.mp-big-link--image img {
  width:100%;
  height:auto;
}
.mp-big-link--text {
  padding:5px;
  width:calc(100% - 40px);
  position:absolute;
  left:15px;
  bottom:calc(var(--textbox-bottom-margin) * -1);
  background-color:#ffffff;
  color:#000;
  font-size:0.7em;
  min-height:6em;
}
.mp-big-link--title {
  color:#000;
  text-align:center;
  margin:0 2.5em 10px 2.5em;
  padding-bottom:2px;
  font-weight:bold;
  font-size: 1.2em;
  border-bottom:2px solid #dab5b2;
}
.mp-big-link--link {
  position:absolute;
  height:calc(100% + var(--textbox-bottom-margin));
  width:100%;
  z-index:2;
}
.mp-big-link--link a {
  display:block;
  height:100%;
  width:100%;
  font-size:0;
}
/* MP-side links */
#mp-side-links {
  display:flex;
  flex-flow:row wrap;
  justify-content: space-evenly;
  row-gap: 10px;
}
.mp-side-link {
  position:relative;
}
.mp-side-link--image img {
  width:100%;
  height:auto;
}
.mp-side-link--text {
  padding:5px;
  width:calc(100% - 40px);
  position:absolute;
  left:15px;
  bottom:0;
  color:#fff;
  font-size:0.7em;
}
.mp-side-link--title {
  padding-bottom:2px;
  font-weight:bold;
  font-size: 1.2em;
}
.mp-side-link--link {
  position:absolute;
  height:100%;
  width:100%;
  z-index:2;
}
.mp-side-link--link a {
  display:block;
  height:100%;
  width:100%;
  font-size:0;
}
/* MP-links */
#mp-links {
  background:#000;
  padding:10px 20px 20px 20px;
  display:flex;
  flex-flow:row wrap;
  justify-content: flex-start;
}
.mp-links--group {
  flex:0 1 11em;
}
.mp-links--group:not(:nth-child(2)){
  border-left:1px solid #888;
  padding-left:25px;
}
.mp-links--group-title {
  color:#2885BE;
}
.mp-links--group ul {
  list-style:none;
  margin:0;
}
.mp-links--group a {
  color: #fff;
}
#mp-links .mp-button {
  align-self:center;
}
#mp-links .mp-button a {
  border: 1px solid #BFBFBF;
  border-radius:5px;
  margin-right:25px;
}
/* MP lower section */
#mp-lower {
  background:#f3f5f5;
}
#mp-lower > div {
  display: flex;
  flex-wrap: wrap;
  overflow:hidden;
}
#mp-lower {
  display: grid;
  grid-template-areas: "a" "b" "c" "d" "e";
  grid-template-columns: 100%;
}
@media screen and (min-width:990px) {
  #mp-lower {
    grid-template-areas: "a a" "b b" "c d" "e d";
    grid-template-columns: 50% 50%;
  }
}
@media screen and (min-width:1350px) {
  #mp-lower {
    grid-template-areas: "a c" "b d" "b e";
    grid-template-columns: auto 350px;
    column-gap: 40px;
  }
}
#mp-ships {grid-area:a;}
#mp-big-links {grid-area:b;}
#mp-community {grid-area:c;}
#mp-side-links {grid-area:d;}
#mp-story {grid-area:e;}
/* MP-ships */
#mp-ships .gallery {
  margin:20px 20px 20px 18px;
}
#mp-ships .gallery a {
  color:#000;
}
#mp-ships .gallery .thumb {
  border-bottom:2px solid var(--accent-color);
}
#mp-ships .gallerytext {
  text-align:left;
  font-weight:bold;
  font-size:0.7em;
  padding-top:0;
}
#mp-ships .gallerytext p {
  margin:0;
}
/* MP-wiki */
#mp-wiki {
  background:#1e3a4e;
  color:#ffffff;
  padding:1em;
  margin-bottom:20px;
}
#mp-wiki--top {
  margin:-1em -1em 1em -1em;
  padding:1em;
  background:#112f45;
}
#mp-wiki--title {
  font-size:1.5em;
  font-weight:bold;
}
#mp-wiki ul {
  list-style:none;
}
#mp-wiki ul > li::before {
  content: "\2022";
  font-weight:bold;
  display:inline-block;
  width:1em;
  margin-left:-1em;
}
/* MP-story */
#mp-story {
  justify-content:center;
}
.mp-story--item {
  background:#ffffff;
  text-align:center;
  margin-top:10px;s
}
.mp-story--title {
  text-align:left;
  padding:5px 1em;
  color:var(--accent-color);
  font-weight:bold;
}
.mp-story--description {
  text-align:left;
  padding:1em;
  padding-top:0;
}
/* MP-attributes */
#mp-attributes {
  background:#f3f5f5;
}
#mp-attributes > ul {
  columns:5;
  padding:20px 5%;
  list-style:none;
  margin-bottom:0;
}
#mp-attributes > ul > li {
  margin-right:1em;
}
#mp-attributes > ul > li::before {
  content: "\2014";
  color:var(--accent-color);
  font-weight:bold;
  display:inline-block;
  width:1.5em;
  margin-left:-1.5em;
}
#mp-attributes ul a {
  color:#000;
  font-weight:bold;
}
/* Move vector tabs to the bottom of the main page */
#mp-attributes {
  padding-bottom:2em
}
.page-User_Mr_Pie_5_Sandbox #mw-navigation #left-navigation > nav,
.page-User_Mr_Pie_5_Sandbox #mw-navigation #right-navigation > nav {
  display:none;
}
.page-User_Mr_Pie_5_Sandbox #bodyContent #mw-head {
  position:absolute;
  top:unset;
  bottom:0;
  right:0;
  margin:0;
}
.page-User_Mr_Pie_5_Sandbox #bodyContent .vector-menu-tabs .mw-watchlink.icon a {
  height:2.5em !important;
}
.page-User_Mr_Pie_5_Sandbox #bodyContent #p-search,
.page-User_Mr_Pie_5_Sandbox #bodyContent #p-personal {
  display:none;
}
/**********************
* End main page stuff *
***********************/