MediaWiki:Vector.css

From PolyCraft World
Revision as of 21:13, 10 December 2018 by Vxg173330 (talk | contribs)
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 affect users of the Vector skin */

/* That will place a temporary campaign/launch/event/whatever image right down the main logo - pretty useful hun? nah  */

  /* Make clickable text on links invisible. */

/* Give the tabs the grass block styling: [[File:Vector-tabs.png]] [[File:Vector-tabs-first.png]] */
div.vectorTabs,
div.vectorMenu {
	background: none;
	padding: 0;
	height: 36px; 
}

div.vectorTabs ul,
div.vectorTabs ul li,
div.vectorTabs ul li.selected {
	background: none;
}
div.vectorTabs span {
	position: relative;
	background: url('https://polycraft.utdallas.edu/images/a/ad/Dna.jpg') no-repeat right top;
	margin-right: 8px;
}
div.vectorTabs span::before {
	content: "";
	position: absolute;
	left: 0;
	background: url('https://polycraft.utdallas.edu/images/a/ad/Dna.jpg') no-repeat left top;
	width: 6px;
	height: 100%;
	pointer-events: none;
}
#left-navigation div.vectorTabs li:first-child span::before {
	background-image: url('https://polycraft.utdallas.edu/images/a/ad/Dna.jpg');
	height: 93px;
}
div.vectorTabs li.selected span,
div.vectorTabs li span:hover,
div.vectorTabs li span:focus {
	background-position: right bottom;
}

div.vectorTabs li a {
	padding: 15px 14px 0 20px;
	height: 21px;
}

.vectorTabs #ca-watch.icon a,
.vectorTabs #ca-unwatch.icon a {
	padding-top: 36px;
	width: 45px;
	background-position: 17px 15px !important;
	transform-origin: 25px 23.5px !important;
}

div.vectorMenu {
	margin: 0 8px 0 6px;
}

div#mw-head div.vectorMenu h3 {
	position: relative;
	background: url('https://polycraft.utdallas.edu/images/a/ad/Dna.jpg') no-repeat right top;
	padding-right: 14px;
	margin: 0;
	height: 36px;
	overflow: visible;
}
div#mw-head div.vectorMenu h3::before {
	content: "";
	position: absolute;
	top: 0;
	left: -6px;
	background: url('https://polycraft.utdallas.edu/images/a/ad/Dna.jpg') no-repeat left top;
	width: 6px;
	height: 100%;
}
div#mw-head div.vectorMenu h3:hover,
div#mw-head div.vectorMenu.menuForceShow h3 {
	background-position: right bottom;
}

div.vectorMenu h3 span {
	padding: 15px 16px 0 14px;
	font-weight: bold;
}

div.vectorMenu div.menu {
	top: 36px;
}

/* Style the simple search */
#p-search {
	margin-left: 0;
}

#p-search form {
	position: relative;
	background-color: rgba(0, 0, 0, 0.365);
	border-right: 4px solid #538631;
	border-bottom: 4px solid #382314;
	margin-top: -14px;
	padding: 0 4px 0 5px;
	height: 27px;
}
#p-search form::before {
	content: "";
	position: absolute;
	top: 0;
	left: -4px;
	border-top: 4px solid rgba(0, 0, 0, 0.365);
	border-left: 4px solid transparent;
}
#p-search form::after {
	content: "";
	position: absolute;
	top: 0;
	right: -4px;
	border-top: 4px solid #80BA5A;
	border-left: 4px solid #538631;
}

div#simpleSearch {
	top: -3px;
	border: 0;
	border-top: 3px solid #E6E6E6 !important;
	border-left: 3px solid #B0B0B0 !important;
	background-color: #D0CFCF;
	background-image: -webkit-linear-gradient(#C3C3C3, #DCDBDB);
	background-image: linear-gradient(#C3C3C3, #DCDBDB);
}
#simpleSearch::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: -3px;
	border-top: 3px solid #B0B0B0;
	border-left: 3px solid #79553A;
	z-index: 1;
}
#simpleSearch::after {
	content: "";
	position: absolute;
	top: -3px;
	right: 0;
	border-top: 3px solid #80BA5A;
	border-left: 3px solid #E6E6E6;
}

/* Fix placeholder text being too light in chrome */
::-webkit-input-placeholder {
	color: inherit;
	opacity: 0.54;
}

/* The suggestions shown under the search bar */
.suggestions.searchbar {
	margin-top: -29px;
	margin-right: -1px;
}
.suggestions.searchbar > .suggestions-results,
.suggestions.searchbar > .mw-searchSuggest-link {
	display: block;
	margin-left: 1px;
}
.suggestions.searchbar .suggestions-results,
.suggestions.searchbar .suggestions-special {
	background-color: #DBDADA;
	border-color: #3C3B3B;
}
.suggestions.searchbar .suggestions-result-current {
	background-color: highlight;
}

#mw-page-base {
	background-color: #8DBDE9;
	background-image: url('https://polycraft.utdallas.edu/images/a/ad/Dna.jpg');
	height: 146px;
	margin-bottom: -142px;
}

  li#n-temp1 {
    color:#f6f6f6;
    visibility: visible;
    font-size:0em;
  }

  #n-temp1:hover ::after, #n-temp1 ::after {
    content: '';
    display:inline-block;
    width: 26px;
    height: 26px;
	
    background: url('https://polycraft.utdallas.edu/images/5/55/Facebook.png');
  }

  /* Every image need to have its own rule defined. */
  #n-temp1::after{
    background: url('https://polycraft.utdallas.edu/images/5/55/Facebook.png');
  }

  #n-temp1:hover ::after {
    background: url('https://polycraft.utdallas.edu/images/7/7f/Facebook1.png');
  }
  #n-temp1:hover ::after, #n-temp1 ::after{
    background-repeat: no-repeat;
    background-size: contain;
  }

#mw-panel .portal .body li#n-temp1 {
font-size:0em;
margin-left:7%;
}

/* That will place a temporary campaign/launch/event/whatever image right down the main logo - pretty useful hun? nah  */

  /* Make clickable text on links invisible. */
  li#n-temp2 {
    color:#f6f6f6;
    visibility: visible;
    font-size:0em;
  }

  #n-temp2:hover ::after, #n-temp2 ::after {
    content: '';
    display:inline-block;
    width: 26px;
    height: 26px;
	
    background: url('https://polycraft.utdallas.edu/images/d/dd/Discord.png');
  }

  /* Every image need to have its own rule defined. */
  #n-temp2::after{
    background: url('https://polycraft.utdallas.edu/images/d/dd/Discord.png');
  }

  #n-temp2:hover ::after {
    background: url('https://polycraft.utdallas.edu/images/b/b0/Discord1.png');
  }
  #n-temp2:hover ::after, #n-temp2 ::after{
    background-repeat: no-repeat;
    background-size: contain;
  }

#mw-panel .portal .body li#n-temp2 {
font-size:0em;
}
/* That will place a temporary campaign/launch/event/whatever image right down the main logo - pretty useful hun? nah  */

  /* Make clickable text on links invisible. */
  li#n-temp3 {
    color:#f6f6f6;
    visibility: visible;
    font-size:0em;
  }

  #n-temp3:hover ::after, #n-temp3 ::after {
    content: '';
    display:inline-block;
    width: 26px;
   height: 26px;	
    background: url('https://polycraft.utdallas.edu/images/b/b7/Instagram.png');
  }

  /* Every image need to have its own rule defined. */
  #n-temp3::after{
    background: url('https://polycraft.utdallas.edu/images/b/b7/Instagram.png');
  }

  #n-temp3:hover ::after {
    background: url('https://polycraft.utdallas.edu/images/f/f6/Instagram1.png');
  }
  #n-temp3:hover ::after, #n-temp3 ::after{
    background-repeat: no-repeat;
    background-size: contain;
  }

#mw-panel .portal .body li#n-temp3 {
font-size:0em;
}

/* That will place a temporary campaign/launch/event/whatever image right down the main logo - pretty useful hun? nah  */

  /* Make clickable text on links invisible. */
  li#n-temp4 {
    color:#f6f6f6;
    visibility: visible;
    font-size:0em;
  }

  #n-temp4:hover ::after, #n-temp4 ::after {
    content: '';
    display:inline-block;
    width: 26px;
    height: 26px;
	
    background: url('https://polycraft.utdallas.edu/images/1/10/Reddit.png');
  }

  /* Every image need to have its own rule defined. */
  #n-temp4::after{
    background: url('https://polycraft.utdallas.edu/images/1/10/Reddit.png');
  }

  #n-temp4:hover ::after {
    background: url('https://polycraft.utdallas.edu/images/3/37/Reddit1.png');
  }
  #n-temp4:hover ::after, #n-temp4 ::after{
    background-repeat: no-repeat;
    background-size: contain;
  }

#mw-panel .portal .body li#n-temp4 {
font-size:0em;
margin-left:0.8%;
}
 


/* That will place a temporary campaign/launch/event/whatever image right down the main logo - pretty useful hun? nah  */

  /* Make clickable text on links invisible. */
  li#n-temp5 {
    color:#f6f6f6;
    visibility: visible;
    font-size:0em;
  }

  #n-temp5:hover ::after, #n-temp5 ::after {
    content: '';
    display:inline-block;
    width: 26px;
    height: 26px;
	
    background: url('https://polycraft.utdallas.edu/images/4/40/Twitch.png');
  }

  /* Every image need to have its own rule defined. */
  #n-temp5::after{
    background: url('https://polycraft.utdallas.edu/images/4/40/Twitch.png');
  }

  #n-temp5:hover ::after {
    background: url('https://polycraft.utdallas.edu/images/5/53/Twitch1.png');
  }
  #n-temp5:hover ::after, #n-temp5 ::after{
    background-repeat: no-repeat;
    background-size: contain;
  }

#mw-panel .portal .body li#n-temp5 {
font-size:0em;
}
 

/* That will place a temporary campaign/launch/event/whatever image right down the main logo - pretty useful hun? nah  */

  /* Make clickable text on links invisible. */
  li#n-temp6 {
    color:#f6f6f6;
    visibility: visible;
    font-size:0em;
  }

  #n-temp6:hover ::after, #n-temp6 ::after {
    content: '';
    display:inline-block;
    width: 26px;
    height: 26px;
	
    background: url('https://polycraft.utdallas.edu/images/f/f7/Twitter.png');
  }

  /* Every image need to have its own rule defined. */
  #n-temp6::after{
    background: url('https://polycraft.utdallas.edu/images/f/f7/Twitter.png');
  }

  #n-temp6:hover ::after {
    background: url('https://polycraft.utdallas.edu/images/9/9d/Twitter1.png');
  }
  #n-temp6:hover ::after, #n-temp6 ::after{
    background-repeat: no-repeat;
    background-size: contain;
  }

#mw-panel .portal .body li#n-temp6 {
font-size:0em;
}

/* That will place a temporary campaign/launch/event/whatever image right down the main logo - pretty useful hun? nah  */

  /* Make clickable text on links invisible. */
  li#n-temp7 {
    color:#f6f6f6;
    visibility: visible;
    font-size:0em;
  }

  #n-temp7:hover ::after, #n-temp7 ::after {
    content: '';
    display:inline-block;
    width: 26px;
    height: 26px;
	
    background: url('https://polycraft.utdallas.edu/images/a/af/Youtube.png');
  }

  /* Every image need to have its own rule defined. */
  #n-temp7::after{
    background: url('https://polycraft.utdallas.edu/images/a/af/Youtube.png');
  }

  #n-temp7:hover ::after {
    background: url('https://polycraft.utdallas.edu/images/c/c6/Youtube1.png');
  }
  #n-temp7:hover ::after, #n-temp7 ::after{
    background-repeat: no-repeat;
    background-size: contain;
  }

#mw-panel .portal .body li#n-temp7{
font-size:0em;
}

div#p-Social_Media_Links.portal{
    box-sizing: border-box;
}
#n-temp1{
    box-sizing: border-box;
}
#n-temp2{
    box-sizing: border-box;
}
#n-temp3{
    box-sizing: border-box;
}
#n-temp4{
    box-sizing: border-box;
}
#n-temp5{
    box-sizing: border-box;
}
#n-temp6{
    box-sizing: border-box;
}
#n-temp7{
    box-sizing: border-box;
}

#n-temp1 {
    float: left;
    width: 24%;
    padding: 5px;
}

#n-temp2 {
    float: left;
    width: 24%;
    padding: 5px;
}

#n-temp3 {
    float: left;
    width: 24%;
    padding: 5px;
}

#n-temp4 {
    float: left;
    width: 24%;
    padding: 5px;
}

#n-temp5 {
    float: left;
    width: 24%;
    padding: 5px;
}

#n-temp6 {
    float: left;
    width: 24%;
    padding: 5px;
}

#n-temp7 {
    float: left;
    width: 24%;
    padding: 5px;
}

/* Clearfix (clear floats) */
div#p-Social_Media_Links.portal::after {
    content: "";
    clear: both;
    display: table;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
        #n-temp1 {
        width: 100%;
    }
	#n-temp2 {
        width: 100%;
    }
	#n-temp3 {
        width: 100%;
    }
	#n-temp4 {
        width: 100%;
    }
	#n-temp5 {
        width: 100%;
    }
	#n-temp6 {
        width: 100%;
    }
	#n-temp7 {
        width: 100%;
    }
}

#mw-panel .portal .body ul
{
    margin-left:0px;
}

div#mw-panel div#p-Social_Media_Links.portal div.body{margin:0 0 0 0em;}

div#p-Social_Media_Links.portal div.body{margin-left:0px;}

div#p-Polycraft_World.portal
{
    border-image: url("https://polycraft.utdallas.edu/images/a/ad/Dna.jpg") 30 round;
    border-top: 25px solid black;	
    border-left: 2px solid black;
    border-right: 2px solid black;;
    border-bottom: 2px solid black;
}
div#p-navigation.portal.first
{
    border-image: url("https://polycraft.utdallas.edu/images/a/ad/Dna.jpg") 30 round;
    border-top: 25px solid black;	
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
}
div#p-Powered_by_UT_Dallas.portal
{
    border-image: url("https://polycraft.utdallas.edu/images/a/ad/Dna.jpg") 30 round;
    border-top: 25px solid black;	
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
}
div#p-Social_Media_Links.portal
{
    margin:0 0 0 0;
    border-image: url("https://polycraft.utdallas.edu/images/a/ad/Dna.jpg") 30 round;
    border-top: 25px solid black;	
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
}
div#p-tb.portal
{
    border-image: url("https://polycraft.utdallas.edu/images/a/ad/Dna.jpg") 30 round;
    border-top: 25px solid black;	
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
}

/* increase Vector sidebar width */
div#mw-panel { width: 10em; }
div#footer, div#content { margin-left: 12em; }
#left-navigation { margin-left: 12em; }

div.inventory{margin: 0;padding: 0;height: 174px; width: 352px;}

div.slot div.amount{
right:1px;
top:-15px;
float:right;
position:relative;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
color: #D3D3D3;
font-size: 14px;
font-weight: bold;
font-family: "Courier New", Courier, monospace;
}

div.inventory div.shapeless{color:#404040;font-size:16px;position:absolute;right:20px;top:9px}

div.inventory div.slot{height:32px;margin:0;padding:0;position:absolute;width:32px}

div.inventory.crafting-table{background: url('images/3/33/Gui_crafting_table.png');}
div.inventory.furnace{background: url('images/b/b0/Gui_furnace.png');}
div.inventory.tree-tap{background: url('images/b/bf/Gui_tree_tap.png');}
div.inventory.machining-mill{background: url('images/d/d4/Gui_machining_mill.png');height: 230px;}
div.inventory.distillation-column{background: url('images/3/36/Gui_distillation_column.png');}
div.inventory.injection-molder{background: url('images/d/da/Gui_injection_molder.png');height: 228px;}
div.inventory.extruder{background: url('images/c/ca/Gui_extruder.png');height: 228px;}
div.inventory.fueled-lamp{background: url('images/b/b5/Gui_fueled_lamp.png');}
div.inventory.spotlight{background: url('images/0/00/Gui_spotlight.png');}
div.inventory.steam-cracker{background: url('images/4/47/Gui_steam_cracker.png');}
div.inventory.merox-treatment-unit{background: url('images/d/dd/Gui_merox_treatment_unit.png');}
div.inventory.chemical-processor{background: url('images/5/52/Gui_chemical_processor.png');}
div.inventory.contact-printer{background: url('images/0/07/Gui_contact_printer.png'); height: 165px;}

div.inventory.crafting-table div.slot.index-0{left:60px;top:34px}
div.inventory.crafting-table div.slot.index-1{left:96px;top:34px}
div.inventory.crafting-table div.slot.index-2{left:132px;top:34px}
div.inventory.crafting-table div.slot.index-3{left:60px;top:70px}
div.inventory.crafting-table div.slot.index-4{left:96px;top:70px}
div.inventory.crafting-table div.slot.index-5{left:132px;top:70px}
div.inventory.crafting-table div.slot.index-6{left:60px;top:106px}
div.inventory.crafting-table div.slot.index-7{left:96px;top:106px}
div.inventory.crafting-table div.slot.index-8{left:132px;top:106px}
div.inventory.crafting-table div.slot.index-9{left:248px;top:70px}

div.inventory.furnace div.slot.index-0{left:112px;top:34px}
div.inventory.furnace div.slot.index-1{left:112px;top:106px}
div.inventory.furnace div.slot.index-2{left:232px;top:70px}

div.inventory.machining-mill div.slot.index-0{left:16px;top:36px}
div.inventory.machining-mill div.slot.index-1{left:52px;top:36px}
div.inventory.machining-mill div.slot.index-2{left:88px;top:36px}
div.inventory.machining-mill div.slot.index-3{left:124px;top:36px}
div.inventory.machining-mill div.slot.index-4{left:160px;top:36px}
div.inventory.machining-mill div.slot.index-5{left:16px;top:72px}
div.inventory.machining-mill div.slot.index-6{left:52px;top:72px}
div.inventory.machining-mill div.slot.index-7{left:88px;top:72px}
div.inventory.machining-mill div.slot.index-8{left:124px;top:72px}
div.inventory.machining-mill div.slot.index-9{left:160px;top:72px}
div.inventory.machining-mill div.slot.index-10{left:16px;top:108px}
div.inventory.machining-mill div.slot.index-11{left:52px;top:108px}
div.inventory.machining-mill div.slot.index-12{left:88px;top:108px}
div.inventory.machining-mill div.slot.index-13{left:124px;top:108px}
div.inventory.machining-mill div.slot.index-14{left:160px;top:108px}
div.inventory.machining-mill div.slot.index-15{left:16px;top:144px}
div.inventory.machining-mill div.slot.index-16{left:52px;top:144px}
div.inventory.machining-mill div.slot.index-17{left:88px;top:144px}
div.inventory.machining-mill div.slot.index-18{left:124px;top:144px}
div.inventory.machining-mill div.slot.index-19{left:160px;top:144px}
div.inventory.machining-mill div.slot.index-20{left:16px;top:180px}
div.inventory.machining-mill div.slot.index-21{left:52px;top:180px}
div.inventory.machining-mill div.slot.index-22{left:88px;top:180px}
div.inventory.machining-mill div.slot.index-23{left:124px;top:180px}
div.inventory.machining-mill div.slot.index-24{left:160px;top:180px}
div.inventory.machining-mill div.slot.index-25{left:232px;top:180px}
div.inventory.machining-mill div.slot.index-26{left:304px;top:108px}

div.inventory.distillation-column div.slot.index-0{left:52px;top:36px}
div.inventory.distillation-column div.slot.index-1{left:124px;top:36px}
div.inventory.distillation-column div.slot.index-2{left:124px;top:108px}
div.inventory.distillation-column div.slot.index-3{left:52px;top:108px}
div.inventory.distillation-column div.slot.index-4{left:232px;top:36px}
div.inventory.distillation-column div.slot.index-5{left:268px;top:36px}
div.inventory.distillation-column div.slot.index-6{left:304px;top:36px}
div.inventory.distillation-column div.slot.index-7{left:232px;top:72px}
div.inventory.distillation-column div.slot.index-8{left:268px;top:72px}
div.inventory.distillation-column div.slot.index-9{left:304px;top:72px}
div.inventory.distillation-column div.slot.index-10{left:232px;top:108px}
div.inventory.distillation-column div.slot.index-11{left:268px;top:108px}
div.inventory.distillation-column div.slot.index-12{left:304px;top:108px}

div.inventory.injection-molder div.slot.index-0,div.inventory.extruder div.slot.index-0{left:16px;top:36px}
div.inventory.injection-molder div.slot.index-1,div.inventory.extruder div.slot.index-1{left:179px;top:110px}
div.inventory.injection-molder div.slot.index-2,div.inventory.extruder div.slot.index-2{left:220px;top:110px}
div.inventory.injection-molder div.slot.index-3,div.inventory.extruder div.slot.index-3{left:52px;top:36px}
div.inventory.injection-molder div.slot.index-4,div.inventory.extruder div.slot.index-4{left:88px;top:36px}
div.inventory.injection-molder div.slot.index-5,div.inventory.extruder div.slot.index-5{left:124px;top:36px}
div.inventory.injection-molder div.slot.index-6,div.inventory.extruder div.slot.index-6{left:160px;top:36px}
div.inventory.injection-molder div.slot.index-7,div.inventory.extruder div.slot.index-7{left:88px;top:182px}
div.inventory.injection-molder div.slot.index-8,div.inventory.extruder div.slot.index-8{left:304px;top:110px}

div.inventory.fueled-lamp,div.inventory.spotlight div.slot.index-0{left:16px;top:40px}
div.inventory.fueled-lamp,div.inventory.spotlight div.slot.index-0{left:52px;top:40px}
div.inventory.fueled-lamp,div.inventory.spotlight div.slot.index-0{left:88px;top:40px}
div.inventory.fueled-lamp,div.inventory.spotlight div.slot.index-0{left:142px;top:40px}
div.inventory.fueled-lamp,div.inventory.spotlight div.slot.index-0{left:160px;top:40px}
div.inventory.fueled-lamp,div.inventory.spotlight div.slot.index-0{left:196px;top:40px}
div.inventory.fueled-lamp,div.inventory.spotlight div.slot.index-0{left:232px;top:40px}
div.inventory.fueled-lamp,div.inventory.spotlight div.slot.index-0{left:268px;top:40px}
div.inventory.fueled-lamp,div.inventory.spotlight div.slot.index-0{left:304px;top:40px}

div.inventory.steam-cracker div.slot.index-0{left:34px;top:36px}
div.inventory.steam-cracker div.slot.index-1{left:70px;top:36px}
div.inventory.steam-cracker div.slot.index-2{left:124px;top:36px}
div.inventory.steam-cracker div.slot.index-3{left:124px;top:108px}
div.inventory.steam-cracker div.slot.index-4{left:52px;top:108px}
div.inventory.steam-cracker div.slot.index-5{left:232px;top:36px}
div.inventory.steam-cracker div.slot.index-6{left:268px;top:36px}
div.inventory.steam-cracker div.slot.index-7{left:304px;top:36px}
div.inventory.steam-cracker div.slot.index-8{left:232px;top:72px}
div.inventory.steam-cracker div.slot.index-9{left:268px;top:72px}
div.inventory.steam-cracker div.slot.index-10{left:304px;top:72px}
div.inventory.steam-cracker div.slot.index-11{left:232px;top:108px}
div.inventory.steam-cracker div.slot.index-12{left:268px;top:108px}
div.inventory.steam-cracker div.slot.index-13{left:304px;top:108px}

div.inventory.merox-treatment-unit div.slot.index-0{left:16px;top:36px}
div.inventory.merox-treatment-unit div.slot.index-1{left:52px;top:36px}
div.inventory.merox-treatment-unit div.slot.index-2{left:88px;top:36px}
div.inventory.merox-treatment-unit div.slot.index-3{left:142px;top:36px}
div.inventory.merox-treatment-unit div.slot.index-4{left:142px;top:108px}
div.inventory.merox-treatment-unit div.slot.index-5{left:52px;top:108px}
div.inventory.merox-treatment-unit div.slot.index-6{left:232px;top:36px}
div.inventory.merox-treatment-unit div.slot.index-7{left:268px;top:36px}
div.inventory.merox-treatment-unit div.slot.index-8{left:304px;top:36px}
div.inventory.merox-treatment-unit div.slot.index-9{left:232px;top:72px}
div.inventory.merox-treatment-unit div.slot.index-10{left:268px;top:72px}
div.inventory.merox-treatment-unit div.slot.index-11{left:304px;top:72px}
div.inventory.merox-treatment-unit div.slot.index-12{left:232px;top:108px}
div.inventory.merox-treatment-unit div.slot.index-13{left:268px;top:108px}
div.inventory.merox-treatment-unit div.slot.index-14{left:304px;top:108px}

div.inventory.chemical-processor div.slot.index-0{left:16px;top:36px}
div.inventory.chemical-processor div.slot.index-1{left:52px;top:36px}
div.inventory.chemical-processor div.slot.index-2{left:88px;top:36px}
div.inventory.chemical-processor div.slot.index-3{left:16px;top:72px}
div.inventory.chemical-processor div.slot.index-4{left:88px;top:72px}
div.inventory.chemical-processor div.slot.index-5{left:142px;top:36px}
div.inventory.chemical-processor div.slot.index-6{left:142px;top:108px}
div.inventory.chemical-processor div.slot.index-7{left:52px;top:108px}
div.inventory.chemical-processor div.slot.index-8{left:232px;top:36px}
div.inventory.chemical-processor div.slot.index-9{left:268px;top:36px}
div.inventory.chemical-processor div.slot.index-10{left:304px;top:36px}
div.inventory.chemical-processor div.slot.index-11{left:232px;top:72px}
div.inventory.chemical-processor div.slot.index-12{left:268px;top:72px}
div.inventory.chemical-processor div.slot.index-13{left:304px;top:72px}
div.inventory.chemical-processor div.slot.index-14{left:232px;top:108px}
div.inventory.chemical-processor div.slot.index-15{left:268px;top:108px}
div.inventory.chemical-processor div.slot.index-16{left:304px;top:108px}

div.inventory.contact-printer div.slot.index-0{left:16px;top:36px}
div.inventory.contact-printer div.slot.index-2{left:124px;top:36px}
div.inventory.contact-printer div.slot.index-1{left:124px;top:72px}
div.inventory.contact-printer div.slot.index-3{left:124px;top:108px}
div.inventory.contact-printer div.slot.index-7{left:52px;top:108px}
div.inventory.contact-printer div.slot.index-4{left:232px;top:36px}
div.inventory.contact-printer div.slot.index-5{left:304px;top:36px}
div.inventory.contact-printer div.slot.index-6{left:304px;top:108px}