Difference between revisions of "MediaWiki:Vector.css"

From PolyCraft World
Jump to: navigation, search
 
Line 1: Line 1:
 
/* CSS placed here will affect users of the Vector skin */
 
/* CSS placed here will affect users of the Vector skin */
 
/** Re-styles the vector skin to look similar to the http://www.minecraftforum.net skin **/
 
 
/* Set page background colour to match main content background colour to reduce visibility of checkerboarding */
 
html {
 
background-image: url('https://polycraft.utdallas.edu/images/4/45/Polycraft_world_background.png');
 
}
 
 
/* Give the background the initial stone texture: [[File:Background.png]] */
 
html body {
 
height: auto !important;
 
min-height: 100%;
 
background-color: #202020;
 
background-image: url('https://polycraft.utdallas.edu/images/4/45/Polycraft_world_background.png');
 
}
 
 
/* Add the grass block background: [[File:Header-background-altsearch.png]] [[File:Clouds-distance2.png]] */
 
#mw-page-base {
 
background-color: #8DBDE9;
 
background-image: url('https://d1u5p3l4wpay3k.cloudfront.net/minecraft_gamepedia/2/2c/Header-background-altsearch.png?version=3ebc626cde25c5f74cd24e00271f1765');
 
height: 146px;
 
margin-bottom: -142px;
 
}
 
 
div#mw-head {
 
background: url('https://d1u5p3l4wpay3k.cloudfront.net/minecraft_gamepedia/a/ad/Clouds-distance2.png?version=296e59721d014f55c595cc5b912b30da') right 6px repeat-x;
 
}
 
 
/* Remove excess spacing between the sidebar and the logo */
 
div#mw-panel {
 
padding-top: 0;
 
}
 
#p-logo,
 
#p-logo a {
 
height: 140px;
 
}
 
 
/* Set the outer content link colours to light gray and white */
 
#mw-panel *:not(h3) > a:not(:hover):not(:focus),
 
#footer a:not(:hover):not(:focus),
 
.mw-notification a:not(:hover):not(:focus) {
 
color: #BFBFBF !important;
 
}
 
#mw-panel h3,
 
#mw-panel a,
 
#footer li,
 
#footer a,
 
.mw-notification a {
 
color: #FFF !important;
 
}
 
 
/* Set the tab link colours to black and bold */
 
#p-namespaces a,
 
#p-views a,
 
div#mw-head div.vectorMenu h4,
 
div#p-variants.vectorMenu #mw-vector-current-variant {
 
font-weight: bold;
 
text-decoration: none;
 
}
 
/* Use black links */
 
#p-namespaces a,
 
#p-views a,
 
div#mw-head div.vectorMenu h4 {
 
color: #000;
 
}
 
#p-namespaces .new a,
 
#p-views .new a {
 
color: #BA0000;
 
}
 
 
/* Add some margin to help with the 3D effect */
 
#pageWrapper,
 
#right-navigation {
 
margin-right: 10px;
 
}
 
 
/* Position the tabs */
 
#left-navigation,
 
#right-navigation {
 
margin-top: 53px;
 
}
 
#mw-head-base {
 
height: 80px;
 
}
 
 
/* 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://d1u5p3l4wpay3k.cloudfront.net/minecraft_gamepedia/1/1a/Vector-tabs.png?version=fc7198953d22df933af2008ead537c35') no-repeat right top;
 
margin-right: 8px;
 
}
 
div.vectorTabs span::before {
 
content: "";
 
position: absolute;
 
left: 0;
 
background: url('https://d1u5p3l4wpay3k.cloudfront.net/minecraft_gamepedia/1/1a/Vector-tabs.png?version=fc7198953d22df933af2008ead537c35') no-repeat left top;
 
width: 6px;
 
height: 100%;
 
pointer-events: none;
 
}
 
#left-navigation div.vectorTabs li:first-child span::before {
 
background-image: url('https://d1u5p3l4wpay3k.cloudfront.net/minecraft_gamepedia/4/49/Vector-tabs-first.png?version=943e99c45ea44268e29cff15c7656cfe');
 
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://d1u5p3l4wpay3k.cloudfront.net/minecraft_gamepedia/1/1a/Vector-tabs.png?version=fc7198953d22df933af2008ead537c35') 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://d1u5p3l4wpay3k.cloudfront.net/minecraft_gamepedia/1/1a/Vector-tabs.png?version=fc7198953d22df933af2008ead537c35') 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;
 
}
 
 
/* Replace divider with a similar image that has proper transparency: [[File:Panel-divider.png]] */
 
div#mw-panel div.portal div.body {
 
background-image: url('https://d1u5p3l4wpay3k.cloudfront.net/minecraft_gamepedia/b/bf/Panel-divider.png?version=9d48767e4cfa5b5816fc43dffc594078');
 
}
 
 
/* Give the main content area its healthy blue glow and add a border */
 
div#content {
 
position: relative;
 
background-color: #E6EFF4;
 
border-top: 6px solid #B4BEC3;
 
border-bottom: 0;
 
border-left: 6px solid #171717;
 
}
 
 
/* Add the 3D corners to the main content */
 
div#content::before {
 
content: "";
 
position: absolute;
 
border-top: 6px solid #B9855C;
 
border-left: 6px solid #B4BEC3;
 
top: -6px;
 
right: 0;
 
}
 
/* Have to use the footer as #content::after is already used to clear the content float */
 
#footer {
 
position: relative;
 
}
 
#footer::before {
 
content: "";
 
position: absolute;
 
border-top: 6px solid #171717;
 
border-left: 6px solid #202020;
 
top: -6px;
 
left: 0;
 
}
 
 
/* Use black bullet points, instead of blue circles: [[File:List bullet.svg]] */
 
ul {
 
list-style-image: url('https://d1u5p3l4wpay3k.cloudfront.net/minecraft_gamepedia/3/39/List_bullet.svg?version=9ff74b0b93ec63f0d642bf58b0ddd8f4');
 
}
 
 
/* Various styling for message boxes, based on colours/styling from [[Template:Msgbox]] */
 
div.mw-warning-with-logexcerpt,
 
.errorbox {
 
background-color: #FCC;
 
border: 2px solid #FAA;
 
}
 
.warningbox {
 
background-color: #FFC;
 
border: 2px solid #FFA;
 
}
 
.successbox {
 
background-color: #CFC;
 
border: 2px solid #AFA;
 
}
 
.successbox strong p {
 
margin: 0;
 
}
 
div.mw-warning-with-logexcerpt,
 
.errorbox,
 
.warningbox,
 
.successbox {
 
padding: 3px 12px;
 
}
 
 
/* Add white background to some areas */
 
#asirra_ChallengeTableDiv {
 
background-color: #FFF;
 
}
 
 
/* Fix diff area styling */
 
table.diff {
 
background-color: transparent;
 
}
 
td.diff-addedline,
 
td.diff-deletedline {
 
background-color: #F9F9F9;
 
}
 
td.diff-context {
 
background-color: #F3F3F3;
 
}
 
td.diff-addedline,
 
td.diff-deletedline,
 
td.diff-context,
 
td.diff-addedline .diffchange,
 
td.diff-deletedline .diffchange {
 
border-radius: 0;
 
}
 
 
/* Get rid of stupid white borders on page history */
 
#pagehistory li {
 
border-color: transparent;
 
}
 
 
/* Same as the default preference tab images, but with the blue background colour instead of white
 
  [[File:Pref-tab-border.png]] [[File:Pref-tab-bg.png]] */
 
.client-js #preftoc,
 
.client-js #preftoc li {
 
background-image: url('https://d1u5p3l4wpay3k.cloudfront.net/minecraft_gamepedia/f/f9/Pref-tab-border.png?version=75e4094c3d0d3a3d01c7170bbfc3bb22');
 
}
 
.client-js #preftoc li.selected a {
 
background-image: url('https://d1u5p3l4wpay3k.cloudfront.net/minecraft_gamepedia/5/57/Pref-tab-bg.png?version=690a6b00a5994036cf34f536b5106d81');
 
}
 
 
/* Fix side-by-side editor background colour */
 
.wikiEditor-ui-controls {
 
background-color: #E6EFF4;
 
border-right: 1px solid #E6EFF4;
 
}
 
 
/* Style notifications to look like achievements: [[File:Achievement background.png]] */
 
body .mw-notification-area-layout {
 
top: 20px;
 
}
 
body .mw-notification-area-floating {
 
right: 10px;
 
}
 
body .mw-notification {
 
border: 8px solid #555;
 
border-radius: 0;
 
-webkit-border-image: url('https://d1u5p3l4wpay3k.cloudfront.net/minecraft_gamepedia/a/ae/Achievement_background.png?version=abe7d41f145fde2368aa34f71e945ce1') 8 repeat;
 
-moz-border-image: url('https://d1u5p3l4wpay3k.cloudfront.net/minecraft_gamepedia/a/ae/Achievement_background.png?version=abe7d41f145fde2368aa34f71e945ce1') 8 repeat;
 
-o-border-image: url('https://d1u5p3l4wpay3k.cloudfront.net/minecraft_gamepedia/a/ae/Achievement_background.png?version=abe7d41f145fde2368aa34f71e945ce1') 8 repeat;
 
border-image: url('https://d1u5p3l4wpay3k.cloudfront.net/minecraft_gamepedia/a/ae/Achievement_background.png?version=abe7d41f145fde2368aa34f71e945ce1') 8 fill repeat;
 
box-shadow: none;
 
background-color: #212121;
 
background-clip: padding-box;
 
color: #FFF;
 
padding: 0.2em 0.4em;
 
}
 
 
/* HiDPI images
 
* [[File:Background HiDPI.png]], [[File:Header background HiDPI.png]],
 
* [[File:Vector tab HiDPI.png]], [[File:Vector tab first HiDPI.png]]
 
*/
 
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
 
body {
 
background-image: url('https://d1u5p3l4wpay3k.cloudfront.net/minecraft_gamepedia/d/de/Background_HiDPI.png?version=d7be45714de43996dcc8e2d9c151ee2a');
 
background-size: 48px auto;
 
}
 
 
#mw-page-base {
 
background-image: url('https://d1u5p3l4wpay3k.cloudfront.net/minecraft_gamepedia/e/ea/Header_background_HiDPI.png?version=f3df7b4837eb259ee1328ae0929fedcb');
 
background-size: 48px auto;
 
}
 
 
div.vectorTabs span,
 
div.vectorTabs span::before,
 
div #mw-head div.vectorMenu > h3,
 
div #mw-head div.vectorMenu > h4,
 
div#p-variants.vectorMenu #mw-vector-current-variant,
 
div #mw-head div.vectorMenu > h3:first-child::before,
 
div #mw-head div.vectorMenu > h4:first-child::before,
 
div#p-variants.vectorMenu #mw-vector-current-variant::before {
 
background-image: url('https://d1u5p3l4wpay3k.cloudfront.net/minecraft_gamepedia/7/71/Vector_tab_first_HiDPI.png?version=cf6396737fc1df6ff24bb4fff2a1bcd3');
 
background-size: 262px auto;
 
}
 
 
#left-navigation div.vectorTabs li:first-child span::before {
 
background-image: url('https://d1u5p3l4wpay3k.cloudfront.net/minecraft_gamepedia/7/71/Vector_tab_first_HiDPI.png?version=cf6396737fc1df6ff24bb4fff2a1bcd3');
 
background-size: 6px auto;
 
}
 
}
 
 
#mw-panel
 
{
 
color:#000000;
 
}
 
 
*{
 
cursor:url('http://minecraftwikinetwork.yolasite.com/resources/Cursor/CURSOR.png'), auto;
 
}
 
 
/**************************************************************/
 
 
  
 
   li#n-temp1 {
 
   li#n-temp1 {

Latest revision as of 22:46, 10 December 2018

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

  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}