Template:Article/styles.css

.article-box {
   	border:1px solid #505050;
  margin-bottom:10px;
    width:100%;
  box-sizing:border-box;
  max-width:700px;

}

.article-header, .article-row {
  width:100%;
  box-sizing:border-box;
  max-width:700px;
}

.article-header {
  padding:8px 5px 8px 15px;
  background-color:#bbd0f2;
  font-size:1.3em;
}

.article-row {
  display:flex;
}

.article-name {
  font-weight:bold; 
	background-color:#e3e3e3; 
  padding:8px 5px 8px 15px;
  flex:1;
}

.article-type {
  	font-weight:bold;  
	padding:8px 10px 8px 10px; 
	text-align:right; 
	width:100px;
  box-sizing:border-box;
}

.article-date {
  background-color:#f5f5f5; 
	width:80px;
  text-align:center;
  padding:8px 0px 8px 8px;
  box-sizing:border-box;
}

.article-description {
  padding:8px 5px 8px 5px;
    flex:1;
}
.articleProducts {
	background-color:#fbffc7;
}
.articleInterviews {
	background-color:#fcedd2;
}
.articleEvents {
	background-color:#b9ebd0;
}
.articleOP {
	background-color:#d1ebff;
}
.articleVT {
	background-color:#d5caed;
}
.articleRules {
	background-color:#f7cdd8;
}
.articleLore {
	background-color:#fcdcfa;
}
.articleOther {
	background-color:#fafafa;
}
.articleUndefined {
	background-color:#e3e3e3;
}

@media screen and (max-width:450px) {
.article-row {
  display:block;
}
  .article-header, .article-name, .article-type, .article-date, .article-description {
    padding:8px 5px 8px 5px;
  }
  
  .article-name {
    border-top:1px solid #505050;
    font-size:1.1em;
  }
  
  .article-type {
    width:100%;
    text-align:left;
  }
  
  .article-date {
    width:100%;
    text-align:left;
  }
}