Big Button CSS . First version for V5

While slowly expanding the history pages I am also working on improving the present state of the game where I can.

Some years ago I wrote a skin when that was an option to allow for playing OI on cellphones with bigger buttons and some other rearranging. I adapted that style sheet to the code below and on my pc I have installed an extension called StyleBot that allows you to apply a style (also called CSS) to a specific URL. It is for now the most stable and simple extension I have found.

To make it work on your pc install the extension (I for now did not synchronize to all sessions) and right click the new icon that appears top right. Select "Configuration". Select "Styles" on the left. Push "Add a new style". At the top in URL write "ogreisland.com/Play5". And below copy the following CSS code. The next time you entre in Ogre Island this style sheet will load. If you don't like it you can simple delete the style and log out, or even remove the extension, both will turn you back to normal style in Ogre Island.

The CSS code:

/* TOP BAR */
#topbar {
    height: 30px;
}

#topbar ul li {
    font-size: 14px;
    line-height: 14px;
    height: 20px;
    padding-top: 10px;
}

/* SIDE PANEL */

#sidepanel {
    top: 80px;
    bottom: 20px;
}
#panelbuttonbar {
    margin-left: -50px;
}

#panelbuttonbar ul li {
    font-size: 30px;
    padding: 13px 5px 13px 9px;
    border-radius: 17px 0 0 17px;
}
#equipgroups ul li {
    font-size: 20px;
}
/* rearrange equipment in 3x5 array to allow bigger display */
#equip_helmet {
  left: 100px;
  top: 10px;
}
#equip_torso {
  left: 100px;
  top: 70px;
}
#equip_legs {
  left: 100px;
  top: 130px;
}
#equip_feet {
  left: 100px;
  top: 190px;
}
#equip_cloak {
  left: 40px;
  top: 10px;
}
#equip_arms {
  left: 40px;
  top: 130px;
}
#equip_bracers {
  left: 160px;
  top: 130px;
}
#equip_leftobject {
  left: 160px;
  top: 70px;
}
#equip_rightobject {
  left: 40px;
  top: 70px;
}
#equip_necklace {
  left: 160px;
  top: 10px;
}
#equip_rightring {
  left: 160px;
  top: 190px;
}
#equip_leftring {
  left: 40px;
  top: 190px;
}
.inventory,
.inventory span {
  width: 54px;
  height: 54px;
  background-size: 54px 54px;
}
#bagcategoryselect {
  font-size: 20px;
}
.bagitem{
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background-size: 50px 50px;
}
.petlisting {
    border: 1px solid #104b10;
}
/* GAME WINDOW */
#lootclosebutton {
    top: 7px;
    right: 15px;
    font-size: 20px;
}
#loot_contents {
  top: 50px;
  width: 210px;
  height: 120px;

}
/* on mobile phones the edge does not detect touch, move slide more right */
#zoombar {
    left: 0px;
    margin-top: 5%;
}
input[type=range][orient=vertical] {
    writing-mode: bt-lr;
    -webkit-appearance: slider-vertical;
    width: 20px;
    height: 300px;
}

/* BOTTOM BAR */
#skillbar ul li {
    font-size: 14px;
    height: 50px;
    line-height: 14px;
    width: 50px;
    background-size: 30px 30px;
}

/* downsize battle and chat text and change position expand button */
#battleexpand {
    right: 40px;
    top: 85px;
    font-size: 36px;
    background-color:#216e2c;
    opacity: .7;
}
#battlepanel {
  bottom: 30px;
  width: 25%;
}
#battletext {
  bottom: 32px;
}

#chatpanel {
  bottom: 30px;
  width: 50%
}
#chat {
  opacity: 0.8;
}
#chatbutton {
  left: 500px
}
#chatexpand {
    top: 85px;
    font-size: 36px;
    left: 620px;
    background-color:#216e2c;
    opacity: .7;
}
/* OTHER WINDOWS */
.closewindows {
  height: 30px;
  width: 30px;
  font-size: 24px;
}
.stataddpoint {
  font-size: 24px;
}

/* Crafting window */
#craftingwindowtitle {
  font-size: 16px;
}

.gamewindowtitlebar {
  height: 30px;
}

.gamewindowclose {
  font-size: 24px
}

#itemcraftingbuttons{
  width: 240px;
  height: 80px;
}

#craftbutton {
   width: 100px;
}

.craftingbutton {
    width: 80px;
    height: 80px;
    border-radius: 40px;
}
#CraftButton1text, #CraftButton2text {
    width: 100%;
    text-align: center;
    font-size: 16px;
    margin-top: 28px;
}

.itemlist {
  height: 280px;
}


/* Vendor window */
.vendorbuybutton,.vendorsellbutton {
  height: 28px;
}
.gamewindowclose {
    font-size: 32px !important;
}

/* Fishing tradeskill Reelin-button
.doactionbutton { 
  height: 44px;
  font-size: 24px;
  padding: 5px;
  margin-top: 20px;
} */

/* Character Sheet Windows */
.CSheetMenu ul li {

  font-size: 24px;
}
.focuspointsreset {
  font-size: 20px;
} 

/* Players Online Window */
#PlayersOnline {
  font-size: 16px;
} 


/* Bankwindow */
/* move the bank-inventory way up to allow acces to select filter directly*/
#bankcategoryselect {
  font-size: 24px;
}
#bankwin {
  top: -20px;
}

/* 2 gem windows, pet window */

.button {
  font-size: 24px !important;
}

/* pet window */

.petskillbutton {
  font-size:24px;
}