/** Staff Template **/

.borderbox {
    width: 95%;
    padding: 2%;
    text-align: left;
	border-style: solid;
    border-width: 0.125rem;
    margin: auto;
}

/** CHARACTER DIRECTORY **/
.char-container {
  width: 100%;
  padding: 0.625rem;
  font-family: 'Alice', serif;
  text-transform: uppercase;
  font-size: 0.688rem;
}

.char-container li {
    display: inline-block;
    list-style-type: none;
    width: 50%;
  text-align: center;
vertical-align: middle;
}

.char-container li.umwclass {
  width: 10%;
vertical-align: middle;
  text-align: center;
}

.char-container li.tagname {
width: 30%;
}

.ministry, .hogsmeade, .irvingly, .london, .elsewhere, .hospital, .stmungos, .infirmary, .beast, .being, .spirit, .hogwarts, .gryffindor, .hufflepuff, .ravenclaw, .slytherin, .portrait, .temporary {
	border-style: double;
	border-width: 0 0.375rem;
}

.player-name {
  font-family: 'Alice', serif;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}

.player-info {
  font-family: 'georgia', serif;
  text-align: center;
  line-height: 1.8em;
}

.mainacc {
	display: ruby;
	cursor: pointer;
}

.mainacc summary {
	padding-right: 0.3rem;	
}

/** DAILY PROPHET **/

.dp {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-width: 50%; /* Chrome, Safari, Opera */
    -moz-column-width: 50%; /* Firefox */
    column-width: 50%;
    padding: 2%;
    text-align: justify;
    text-align-last: left;
    -moz-text-align-last: justify;
    font-family: 'IM Fell DW Pica';
	font-size: 1rem;
	color: #000;
}

.dpline {
	margin-top: 0.625rem;
	margin-bottom: 0.125rem;
	height: 0.125rem;
	width: 95%;
	background-color: #000;
}

/** Hogwarts Roster **/

.hroster-stats {
	display: flex;
    width: 100%;
    flex-flow: row wrap;
    justify-content: center;
    padding: 0.8rem 0;
    font-variant: small-caps;
    font-size: 1.05rem;	
}

#hroster-grid {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto;
    width: 25rem;
	max-width: 100%;
    margin: auto;
    row-gap: 1rem;
}

.hroster-house {
    grid-column: 1 /span 2;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
}

.hroster-names {
    grid-column: 2;
}

.hroster-year {
    grid-column: 1;
    font-weight: bold;
    align-self: center;
    text-align: right;
    padding-right: 1rem;
}

#hroster-sp-grid {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    width: 30rem;
    max-width: 100%;
    margin: auto;
    row-gap: 0.8rem;
    column-gap: 0.4rem;
    padding-top: 0.8rem;
}

.hroster-position {
    grid-column: 1;
    font-weight: bold;
}

.hroster-desc {
    grid-column: 3;
    font-style: italic;
}

.hroster-staffteam {
    grid-column: 1 /span 3;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}

/** PAGES **/

#page-grid {
    display: grid;
    grid-template-columns: 20% 1fr;
    grid-row: auto;
}

.pages-button-grid {
    width: 80%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    column-gap: 1rem;
    row-gap: 0.25rem;
    text-align: center;
    margin: auto;
}

.page1 {
    width: 100%;
	border-style: solid;
    border-width: 0.125rem;
    border-top: none;
}

.page1>.thead {
	border-right: none;
	border-left: none;
	font-size: 1.4rem;
	text-align: left;
    padding-left: 2rem;
}

.page1::after {
    content: "";
    clear: both;
    display: table;
}

.rnbg {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    grid-auto-rows: auto;
}

.pageribbon {
    display: none;
}

.pagebar {
    width: 100%;
    grid-column: 1;
	border-right-style: solid;
	border-width: 0.063rem;
}

.pagenav ul {
	border-bottom-style: solid;
    border-width: 0.125rem;
    margin: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 15%;
	list-style: disc;
}

.pagenav ul a {
    font-size: 0.85rem;
}

.pagenav li {
    
}

.pagenav li:hover {
    
}

.pagenavhd {
	text-transform: uppercase;
    font-size: 0.9rem;
    text-align: center;
    padding: 0.2rem;
    border-bottom-style: solid;
	border-width: 0.125rem;
}

.pagecontent {
    border-left-style: solid;
	border-width: 0.063rem;
    width: 100%;
    padding: 0.5rem 1rem 2rem 1rem;
}

.pagecontent a.button {
    font-size: 0.85rem;
	border-style: solid;
    border-width: 0.063rem;
    margin: 0;
    padding: 0.3rem 0rem;
}

.pagesmlhd {
	font-weight: bold;
    font-size: 1.4rem;
    text-align: center;
    line-height: 100%;
    font-family: 'Playfair Display';	
	margin-bottom: 1.4rem;
}

.pagesthead {
	font-family: 'Alice'; 
	font-style: italic; 
	font-size: 1.25rem; 
	padding: 0.375rem;
	margin-top: 1%;
	margin-bottom: 1%;
	line-height: 95%;
}

.quidditch {
   width:31.25rem;
   height:auto;
   overflow:auto;
   padding: 0.625rem;
}

.quidditch > p {
   text-align: justify;
   line-height: 90%;
   text-indent: 0.938rem;
}

.quidditch > h1 {
   width: 31.25rem;
   text-align: center;
   font-size: 180%;
   line-height: 80%;
   font-weight: bold;
   font-variant: small-caps;
}

.quidditch > h2 {
   width: 31.25rem;
   text-align: center;
   text-transform: lowercase;
   font-size: 100%;
   line-height: 80%;
   font-style: italic;
}

.quidditch > img.right {
   float: right;
   clear: none;
   align: center;
   height: 9.375rem;
   width: 9.375rem;
   padding: 0.313rem;
}

.quidditch > img.left {
   float: left;
   clear: none;
   align: center;
   height: 9.375rem;
   width: 9.375rem;
   padding: 0.313rem;
}

/** PBs **/

.pbcol {
	width: 100%;
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-width: 50%; /* Chrome, Safari, Opera */
    -moz-column-width: 50%; /* Firefox */
    column-width: 50%;
    padding: 2%;
    text-align: left;
	font-size: 0.875rem;
}

/*===== Vertical Timeline =====*/
#conference-timeline {
  position: relative;
  max-width: 57.5rem;
  width: 100%;
  margin: 0 auto;
}

#conference-timeline .timeline-start,
#conference-timeline .timeline-end {
  display: table;
  font-family: 'Alice', serif;
  font-size: 0.688rem;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0.938rem 1.438rem;
  max-width: 25%;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  border-style:solid;
	border-width: 0.063rem;
}

#conference-timeline .conference-center-line {
  position: absolute;
  width: 0.188rem;
  height: 100%;
  top: 0;
  left: 50%;
  margin-left: -0.125rem;
  z-index: -1;
}

#conference-timeline .conference-timeline-content {
  padding-top: 4.188rem;
  padding-bottom: 4.188rem;
}

.timeline-article {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  margin: 1.25rem 0;
}

.timeline-article .content-left-container,
.timeline-article .content-right-container {
  max-width: 44%;
  width: 100%;
}

.timeline-article .timeline-author {
  display: block;
  font-weight: 400;
  font-size: 0.688rem;
  line-height: 1.5rem;
  text-align: right;
}

.timeline-article .content-left,
.timeline-article .content-right {
  position: relative;
  width: auto;
	border-style:solid;
	border-width: 0.063rem;
  padding: 1.688rem 1.563rem;
}

.timeline-article p {
  margin: 0 0 0 60px;
  padding: 0;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5rem;
  position: relative;
}

.timeline-article p span.article-number {
  position: absolute;
  font-weight: 300;
  font-size: 1.5rem;
  top: 0.625rem;
  left: -4.375rem;
}

.timeline-article .content-left-container {
  float: left;
}

.timeline-article .content-right-container {
  float: right;
}

.timeline-article .content-left:before,
.timeline-article .content-right:before {
  position: absolute;
  top: 1.25rem;
  font-size: 1.438rem;
  font-family: "FontAwesome";
}

.timeline-article .content-left:before {
  content: "\f0da";
  right: -0.5rem;
}

.timeline-article .content-right:before {
  content: "\f0d9";
  left: -0.5rem;
}

.timeline-article .meta-date {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3.875rem;
  height: 3.875rem;
  margin-left: -1.938rem;
  border-radius: 100%;
}

.timeline-article .meta-date .date,
.timeline-article .meta-date .month {
  display: block;
  text-align: center;
  font-weight: normal;
}

.timeline-article .meta-date .date {
  font-size: 0.875rem;
  line-height: 2.5rem;
}

.timeline-article .meta-date .month {
  font-size: 0.563rem;
  line-height: 0.313rem;
}

.year-rp {
  display: inline-block;
  font-weight: normal;
  font-size: 1.5rem;
  margin-bottom: 2.188rem;
  float: left;
}

.year-rl {
  display: inline-block;
  font-weight: normal;
  font-size: 1.5rem;
  margin-bottom: 2.188rem;
  float: right;
}

/** STAMPS **/

.stampbox {
	width: 75%;
	border-style: double;
	border-width: 0.188rem;
	padding: 0.313rem;
	text-align:center;
	line-height: 100%
}

.stamps {
   line-height: 0;   
   -webkit-column-count: 1;
   -webkit-column-gap: 0.063rem;
   -moz-column-count: 1;
   -moz-column-gap: 0.063rem;
   column-count: 1;
   column-gap: 0.063rem;
	margin-top: 2%;
	text-align: center;
}

.stamps img {
  padding: 0.063rem;
}

/* WW */

.ww-container {
	width: 100%;
    background-image: url(https://img.nickpic.host/images/IVv8qf.jpg);
    background-color: #eee;
    height: auto;	
	padding: 2%;
	color: #000;
}

.ww-grid-article {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    align-items: center;
	font-size: 1rem;
}

.ww-est {
    grid-column: 1 /span 2;
    grid-row: 1;
    text-transform: uppercase;
	font-family: 'IM Fell English', serif;
    font-size: 0.625em;
	color: #000;
    justify-self: center;
	position: relative;
    top: 1em;
}

.ww-head {
    grid-column: 1 /span 2;
    grid-row: 2;
    width: 100%;
    min-height: 3.572em;
    background-image: url(https://www.charmingrp.com/images/graphics/WWDP/WWHeader.svg);
    background-size: contain;
    background-repeat: no-repeat;
    text-transform: uppercase;
    font-size: 2.8em;
    letter-spacing: 0.3em;
    justify-self: center;
    font-family: 'IM Fell English', serif;
	color: #000;
    text-align: center;
    line-height: 3.8em;
    text-indent: 0.3em
}

.ww-price {
	grid-column: 1;
	grid-row: 3;
}

.ww-issue {
	grid-column: 2;
	grid-row: 3;
}

.ww-price, .ww-issue {
    text-transform: uppercase;
    font-size: 0.623em;
    font-weight: bold;
	font-family: 'IM Fell English', serif;
	color: #000;
    justify-self: center;
	position: relative;
    top: -2em;
}

.ww-article-title {
    grid-column: 1 /span 2;
    grid-row: 4;
    justify-self: center;
    font-weight: bold;
    font-size: 1.5em;
    font-style: italic;
	font-family: 'IM Fell English', serif;
	font-variant: small-caps;
	color: #000;
	text-align: center;
	padding: 0em 0em 0.5em 0em;
}

.ww-author {
    grid-column: 1 /span 2;
    grid-row: 5;
    text-transform: uppercase;
    font-size: 0.623em;
	font-family: 'IM Fell English', serif;
	color: #000;
    justify-self: center;
    padding-bottom: 1em;
}

.ww-article-fullimg {
    grid-column: 1 /span 2;
    grid-row: 6;
}

.ww-article-content {
    grid-column: 1 /span 2;
    grid-row: 7;
    column-count: 2;
	column-gap: 2.3%;
    font-size: 1rem;
	color: #000;
    padding-left: 1.25em;
    padding-right: 1.25em;
	padding-bottom: 3em;
    border-bottom: 0.063rem #ababab dashed;
}

.ww-grid-adsetc {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    align-items: center;
    padding: 1em 0em;
    font-size: 16px;
}

.ww-also {
    grid-column: 1 /span 3;
    grid-row: 1;
    justify-self: center;
    font-style: italic;
    font-size: 1.5em;
    font-family: 'Sail', cursive;
    padding-bottom: 0.5em;
}

.ww-adspace {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    width: 100%;
    height: 100%;
    min-height: 16em;
    background-image: url(https://www.charmingrp.com/images/graphics/WWDP/WWBox.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: initial;
}

.ww-adspace-contents {
    position: relative;
    top: 17%;
    left: 11%;
    max-width: 78%;
    height: 8.5em;
    overflow: hidden;
}

.ww-pagelist {
    grid-column: 2 /span 2;
    grid-row: 2;
    column-count: 2;
	column-gap: 5%;
    font-size: 0.87em;
    justify-self: center;
    align-self: start;
    text-align: left;
	padding-left: 3%;
	line-height: 1.5em;
}

.ww-divider {
    grid-column: 1 /span 3;
    grid-row: 3;
    justify-self: center;
    padding: 1.5em 0em;
    width: 100%;
    text-align: center;
}

.ww-sponsor {
    grid-column: 1 /span 3;
    grid-row: 4;
    justify-self: center;
    text-align: center;
}



@media only screen and (max-width: 1399px) {
	.ww-grid-article, .ww-grid-adsetc {
    font-size: 14px;
}
	
	.ww-head {
		line-height: 3.7em;
		font-size: 2.8em;
    	letter-spacing: 0.15em;
   		text-indent: 0.1em;
	}
	
	.ww-adspace-contents {
    top: 14%;
    height: 8.4em;
}
}

@media only screen and (max-width: 1200px) {
	.ww-grid-article, .ww-grid-adsetc {
    font-size: 12px;
}
	
	.ww-head {
		line-height: 3.5em;
		font-size: 2.8em;
    	letter-spacing: 0.15em;
	}
}

@media only screen and (max-width: 1024px) {
	.ww-grid-article, .ww-grid-adsetc {
    font-size: 11px;
}
		.ww-head {
		line-height: 3.85em;
	}
}

@media only screen and (max-width: 920px) {
	.ww-grid-article, .ww-grid-adsetc {
    font-size: 9px;
	}
	
	.ww-head {
    letter-spacing: 0.15em;
    line-height: 3.5em;
    text-indent: 0.15em;
	}
	
	.ww-adspace-contents {
    top: 13%;
    height: 7.6em;
	overflow: auto;
}
}

@media only screen and (max-width: 768px) {
	.ww-grid-article, .ww-grid-adsetc {
    font-size: 9px;
}
	
	.ww-head {
	min-height: 4.2em;
	line-height: 4.2em;
	}
	
	.ww-article-content {
		font-size: 1em;
	}	
}

@media only screen and (max-width: 500px) {
	.ww-grid-article, .ww-grid-adsetc {
    font-size: 6px;
}	
	.ww-head {
	text-indent: 0;
	letter-spacing: 0;
	min-height: 3.3em;
	line-height: 3.6em;
	}
}

@media only screen and (max-width: 400px) {
	.ww-grid-article, .ww-grid-adsetc {
    font-size: 5.2px;
}

@media only screen and (max-width: 320px) {
	.ww-grid-article, .ww-grid-adsetc {
    font-size: 4.8px;
}
	
	.ww-adspace {
    min-height: 12em;
	}
	
	.ww-adspace-contents {
    height: 7.3em;
}
}