Template:Infobox/styles.css

div.infobox {
  float: right;
  position: relative;
  width:300px;
  background:#FFF;
  font-size:0.923em;
  border:1px solid #AAA;
  margin:0 0 1em 1em;
  padding:0;
  background-image:linear-gradient(135deg,#fff 0%,#eee 100%)
}

div.infobox .heading {
  font-weight:700;
  text-align:center;
  border:1px solid rgba(0,0,0,0.25);
  border-bottom-width:0;
  position:relative;
  z-index:1;
  margin:-1px -1px 5px  !important;
  font-family:EasonPro,"Times New Roman",serif !important;
  font-size:1.417em !important;
  color:#FFF !important;
  background-color:#444 !important;
  text-shadow:rgba(0,0,0,0.75) 0 0 0.25em;
  line-height:1.176em;
  font-size-adjust:0.43;
  padding:0.5em !important
}

div.infobox .image_wrapper {
  text-align:center;
  padding:0;
  margin:10px 0
}

div.infobox .wrapper{
  clear:both;
  padding:0
}

div.infobox dt{
  float:left;
  text-align:right;
  width:78px;
  line-height:1em;
  font-weight:700;
  clear:left;
  border-right:2px solid #050;
  margin:0 -2px 0 0;
  padding:2px 8px 2px 3px
}

div.infobox dd{
  float:left;
  width:140px;
  font-weight:400;
  border-left:2px solid #050;
  margin:0;
  padding:2px 7px
}

div.infobox::after,div.infobox .heading::after{
  content:"";position:absolute;
  width:100%;
  left:0;
  height:3px;

  background-size:100% 3px
}

div.infobox::after,div.infobox .heading::after{
  bottom:-3px
}

div.infobox table{
  background-color:transparent
}

div.infobox dt,div.infobox dd{
  line-height:1.667em
}

div.infobox .infobox-icon{
  float:right;
  position:relative;
  z-index:2;
  width:auto;
  margin:5px
}

.infobox-icon a.new{
  color:transparent;
  display:inline-block;
  font:0/0 a;
  overflow:hidden;
  vertical-align:middle;

  height:40px;
  width:40px
}

.infobox-icon a.new{

  height:48px;
  width:48px
}

.infobox-icon p{
  text-align:center;
  color:#444;
  font-size:9px !important;
  background-color:rgba(255,255,255,0.5);
  border-radius:0.75em;
  line-height:1em;
  margin:0.25em -0.5em;
  padding:2px
}

div.infobox.npc .heading{
	background-image:linear-gradient(#094 0%,#050 100%);
}

div.infobox.npc dd,div.infobox.npc dt{
  border-color:#390
}

div.infobox.item .heading{
	background-image:linear-gradient(360deg,#777 0%, #AAA 100%);
}

div.infobox.item dd,div.infobox.item dt{
  border-color:#AAA
}

div.infobox.item .subheading,div.infobox.item .heading{
	text-align:center;
	padding:2px;
	font-weight:bold;
	background-image:linear-gradient(360deg,#777 0%, #AAA 100%) !important;
	border:1px solid rgba(0,0,0,0.25);
	margin:-1px -1px 5px !important
}

div.infobox.normal .heading{
	color:#FFF !important;
}

div.infobox.magic .heading{
	color:#0FF !important;
}

div.infobox.magic dd,div.infobox.magic dt{
  border-color:#0FF !important
}

div.infobox.rare .heading{
	color:#FF0 !important;
}

div.infobox.rare dd,div.infobox.rare dt{
  border-color:#ee0 !important
}

div.infobox.soul .heading{
	color:#DAA949 !important;
}

div.infobox.soul dd,div.infobox.soul dt{
  border-color:#DAA949 !important
}

div.infobox.unique .heading{
	color:#050 !important;
}

div.infobox.unique dd,div.infobox.unique dt{
  border-color:#050 !important
}

div.infobox.skill .heading{
	background-image:linear-gradient(#0dd 0%,#0aa 100%);
}

div.infobox.skill dd,div.infobox.skill dt{
  border-color:#0aa
}

div.infobox.location .heading{
	background-image:linear-gradient(#a2f 0%,#509 100%);
}

div.infobox.location dd,div.infobox.location dt{
  border-color:#80d
}

div.recipe{
	min-width:300px;
	width:0px;
	display:inline-block;
	float:none;
	clear:none;
	vertical-align:top;
	font-size:1em;
	margin:0 1em 0 0;
	position:relative;
	background:#FFF;
	border:1px solid #AAA;
	padding:0;
	background-image:linear-gradient(135deg,#fff 0%,#eee 100%)
}

div.recipe::after{
	bottom:-4px;
	content:"";
	position:absolute;
	width:100%;
	left:0;
	height:3px;
	
	background-size:100% 3px
}

div.recipe .heading{
  font-weight:700;
  text-align:center;
  border:1px solid rgba(0,0,0,0.25);
  border-bottom-width:0;
  position:relative;
  z-index:1;
  margin:-1px -1px 5px  !important;
  font-family:EasonPro,"Times New Roman",serif !important;
  font-size:1.417em !important;
  color:#FFF !important;
  background-image:linear-gradient(#eca 0%,#ca7 100%);
  text-shadow:rgba(0,0,0,0.75) 0 0 0.25em;
  line-height:1.176em;
  font-size-adjust:0.43;
  padding:0.5em !important
}

div.recipe dd,div.infobox.recipe dt{
  border-color:#ca7
}

div.recipe .subheading,div.infobox.recipe .heading{
	text-align:center;
	padding:2px;
	font-weight:bold;
	background-image:linear-gradient(#eca 0%,#ca7 100%) !important;
	border:1px solid rgba(0,0,0,0.25);
	margin:-1px -1px 5px !important
}

div.recipe .subheading{
	border-width:0 1px
}

div.recipe dl{
	margin:10px 0
}

div.recipe dt{
	float:left;
	text-align:right;
	width:78px;
	line-height:1em;
	font-weight:700;
	clear:left;
	border-right:2px solid #A99A86;
	margin:0 -2px 0 0;
	padding:2px 8px 2px 3px;
	line-height:1.667em
}

div.recipe dd{
	float:left;
	border-left:2px solid #A99A86;
	margin:0;
	padding:2px 7px
}

div.recipe .wrapper{
  clear:both;
  padding:0
}

div.recipe.magic .heading{
	color:#0FF !important;
}

div.recipe.magic dd,div.recipe.magic dt{
  border-color:#0FF !important
}

div.recipe.rare .heading{
    color:#FFF !important;
	background-image:linear-gradient(#F97 0%,#ca7 100%) !important
}

div.recipe.rare dd,div.infobox.rare dt{
  border-color:#F97 !important
}

div.recipe .recipe-icon{
  float:right;
  position:relative;
  z-index:2;
  width:auto;
  margin:5px
}

.recipe-icon a.new{
  color:transparent;
  display:inline-block;
  font:0/0 a;
  overflow:hidden;
  vertical-align:middle;

  height:40px;
  width:40px
}

.recipe-icon a.new{

  height:48px;
  width:48px
}

.recipe-icon p{
  text-align:center;
  color:#444;
  font-size:9px !important;
  background-color:rgba(255,255,255,0.5);
  border-radius:0.75em;
  line-height:1em;
  margin:0.25em -0.5em;
  padding:2px
}