/*----------------- FONTS ------------------*/


@import url('https://fonts.googleapis.com/css?family=Open+Sans|Yeseva+One&display=swap');


/*
font-family: 'Open Sans', sans-serif;
font-family: 'Yeseva One', cursive;
*/


/*----------------- BACKGROUND ------------------*/

.charsheet {

  background: url("https://github.com/Roll20/roll20-character-sheets/blob/master/The%20Between/rsz_grayscale-street.png?raw=true"), #0c0c0c; /*Victorian looking street in greyscale*/
  
  background-repeat: no-repeat;
  color: black;
  width: 1160px;
  height: 2500px;
  
  /* Original image dimensions 1188 x 1288, extra height is just filled in with black */

}


/*----------------- GRIDS ------------------*/



.sheet-main {
  
}

.sheet-main-top {
  display: grid;
  width: 310px;
  height: 30px;
  grid-gap: 6px;
  grid-template-columns: 310px;
  grid-template-rows: 30px;
  grid-template-areas:"tabselector";
}

.sheet-main-hunter {
  display: grid;
  width: 100vw;
  height: 1020px;
  grid-gap: 6px;
  grid-template-columns: 10px 410px 10px 260px 10px 410px 10px ;
  grid-template-rows: 10px 1fr 10px;
  grid-template-areas:".   .    .   .    .     .    ."
                      ".   left    .   centre    .     right    ."
					  ".   .    .   .    .     .    .";
}


.sheet-main-clues {
  width: 1150px;
  height: 200px;
  grid-gap: 6px;
  grid-template-columns: 1150px ;
  grid-template-rows: 30px 1fr 10px;
  grid-template-areas:"cluesname  "
                      "clues "
					  "info ";
  
}

/*----------------- GENERAL CSS ------------------*/

textarea {
  width: 70%;
  height: 85%;
}

textarea.sheet-notetext{
  width: 800px;
  height: 140px;
}

.sheet-hidden {
    display: none;
}

.sheet-section {
    padding: 5px;
    border-style: solid;
	justify-content: center;

}

.sheet-flex-col {
  display: flex;
  flex-flow: row wrap;
  /*justify-content: flex-start;*/
}

.sheet-flex-col-center {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  /*justify-content: flex-start;*/
}

.sheet-flex-center {
  display: grid;
  justify-content: center;
  align-content: center;
}

.sheet-hide-section {
  display: none;

}


/* --------------------------------Hide and Display section of Code-------------------------------- */
/* Configure the tab buttons*/
.sheet-main-hunter,
.sheet-main-clues {display: none;}

/* show the selected tab */
.sheet-tabstoggle[value="hunter"] ~ div.sheet-main-hunter,
.sheet-tabstoggle[value="clues"] ~ div.sheet-main-clues {display: grid;}

/* By default, hides all archetypes*/
.sheet-american,
.sheet-explorer,
.sheet-factotum,
.sheet-mother,
.sheet-orphan,
.sheet-undeniable,
.sheet-vessel,
.sheet-american-moves,
.sheet-explorer-moves,
.sheet-factotum-moves,
.sheet-mother-moves,
.sheet-orphan-moves,
.sheet-undeniable-moves,
.sheet-vessel-moves {
    display: none;
}

/* show the selected archetype */
.sheet-playsheettoggle[value="american"] ~ div.sheet-american,
.sheet-playsheettoggle[value="explorer"] ~ div.sheet-explorer,
.sheet-playsheettoggle[value="factotum"] ~ div.sheet-factotum,
.sheet-playsheettoggle[value="mother"] ~ div.sheet-mother,
.sheet-playsheettoggle[value="orphan"] ~ div.sheet-orphan,
.sheet-playsheettoggle[value="undeniable"] ~ div.sheet-undeniable,
.sheet-playsheettoggle[value="vessel"] ~ div.sheet-vessel,
.sheet-playsheettoggle2[value="american"] ~ div.sheet-american-moves,
.sheet-playsheettoggle2[value="explorer"] ~ div.sheet-explorer-moves,
.sheet-playsheettoggle2[value="factotum"] ~ div.sheet-factotum-moves,
.sheet-playsheettoggle2[value="mother"] ~ div.sheet-mother-moves,
.sheet-playsheettoggle2[value="orphan"] ~ div.sheet-orphan-moves,
.sheet-playsheettoggle2[value="undeniable"] ~ div.sheet-undeniable-moves,
.sheet-playsheettoggle2[value="vessel"] ~ div.sheet-vessel-moves {
    display: grid;
}


/*------------- Section-specific CSS -------------*/


h1 {
	
	font-family: 'Yeseva One', cursive;
	color: black;
	/*background-color: #a29fa7;
	background-image: url("data:image/svg+xml,%3Csvg width='20' height='22' viewBox='0 0 80 88' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 21.91V26h-2c-9.94 0-18 8.06-18 18 0 9.943 8.058 18 18 18h2v4.09c8.012.722 14.785 5.738 18 12.73 3.212-6.99 9.983-12.008 18-12.73V62h2c9.94 0 18-8.06 18-18 0-9.943-8.058-18-18-18h-2v-4.09c-8.012-.722-14.785-5.738-18-12.73-3.212 6.99-9.983 12.008-18 12.73zM54 58v4.696c-5.574 1.316-10.455 4.428-14 8.69-3.545-4.262-8.426-7.374-14-8.69V58h-5.993C12.27 58 6 51.734 6 44c0-7.732 6.275-14 14.007-14H26v-4.696c5.574-1.316 10.455-4.428 14-8.69 3.545 4.262 8.426 7.374 14 8.69V30h5.993C67.73 30 74 36.266 74 44c0 7.732-6.275 14-14.007 14H54zM42 88c0-9.94 8.06-18 18-18h2v-4.09c8.016-.722 14.787-5.738 18-12.73v7.434c-3.545 4.262-8.426 7.374-14 8.69V74h-5.993C52.275 74 46 80.268 46 88h-4zm-4 0c0-9.943-8.058-18-18-18h-2v-4.09c-8.012-.722-14.785-5.738-18-12.73v7.434c3.545 4.262 8.426 7.374 14 8.69V74h5.993C27.73 74 34 80.266 34 88h4zm4-88c0 9.943 8.058 18 18 18h2v4.09c8.012.722 14.785 5.738 18 12.73v-7.434c-3.545-4.262-8.426-7.374-14-8.69V14h-5.993C52.27 14 46 7.734 46 0h-4zM0 34.82c3.213-6.992 9.984-12.008 18-12.73V18h2c9.94 0 18-8.06 18-18h-4c0 7.732-6.275 14-14.007 14H14v4.696c-5.574 1.316-10.455 4.428-14 8.69v7.433z' fill='%23d0ced2' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");*/
	background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/The%20Between/moroccan-background.PNG?raw=true"); /*Pattern generated with css, but due to security errors coming up, used as a picture here.*/
	background-repeat: repeat;
	background-size: 70px;
	
}

h2 {
	
	font-family: 'Yeseva One', cursive;
	color: black;
	
}

h2.sheet-cluesname {
	
	font-family: 'Yeseva One', cursive;
	color: black;
	background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/The%20Between/moroccan-background.PNG?raw=true"); /*Pattern generated with css, but due to security errors coming up, used as a picture here.*/
	background-repeat: repeat;
	background-size: 70px;
	
}

label.sheet-middle-label {
	
	font-family: 'Yeseva One', cursive;
	text-align: center;
	color: rbg(214, 122, 9);
	display: inline;
    font-size: 1.2em;
    font-weight: normal;
    line-height: 30px;
    margin-bottom: 0px;
	background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/The%20Between/moroccan-background.PNG?raw=true"); /*Pattern generated with css, but due to security errors coming up, used as a picture here.*/
	background-repeat: repeat;
	background-size: 70px;
	
}

label.sheet-left-label{
	
	font-family: 'Yeseva One', cursive;
	color: rbg(214, 122, 9);
	display: inline;
    font-size: 1.2em;
    font-weight: normal;
    line-height: 30px;
    margin-bottom: 0px;
	background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/The%20Between/moroccan-background.PNG?raw=true"); /*Pattern generated with css, but due to security errors coming up, used as a picture here.*/
	background-repeat: repeat;
	background-size: 70px;
	
}

label.sheet-left-label-1 {
	
	font-family: 'Yeseva One', cursive;
	color: rbg(214, 122, 9);
	display: inline;
    font-size: 1.2em;
    font-weight: normal;
    line-height: 30px;
    margin-bottom: 0px;
	background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/The%20Between/moroccan-background.PNG?raw=true"); /*Pattern generated with css, but due to security errors coming up, used as a picture here.*/
	background-repeat: repeat;
	background-size: 70px;
	grid-column: 1 / -1;
	
}


span.sheet-left-span {
	
	font-family: 'Open Sans', sans-serif;
	color: white;
	display: inline;
    font-size: 1em;
    font-weight: normal;
    line-height: 18px;
    margin-bottom: 0px;
	background: rgba(162, 159, 167, 0.5);
	
}

span.sheet-centre-span {
	
	font-family: 'Open Sans', sans-serif;
	color: white;
	display: inline;
    font-size: 1em;
    font-weight: normal;
    line-height: 18px;
    margin-bottom: 0px;
	background: rgba(162, 159, 167, 0.5);
	margin: auto;
	
}

input.sheet-char-inputs{
	
	font-family: 'Open Sans', sans-serif;
	display: inline;
	height:30px;
	width:290px;
	
}

select.sheet-select-inputs{
	
	font-family: 'Open Sans', sans-serif;
	display: inline;
	height:30px;
	width:290px;

}

input.sheet-condition-inputs {
	
	font-family: 'Open Sans', sans-serif;
	margin: auto;
	display: inline;
	
}

input.sheet-xp-boxes {
	
	ffont-family: 'Open Sans', sans-serif;
	margin: auto;
	display: inline;
	transform: scale(2);
	height:25px;
	width:25px;
	filter: invert(30%) hue-rotate(60deg) brightness(0.9);
	
}

input.sheet-used-boxes {
	
	font-family: 'Open Sans', sans-serif;
	display: inline;
	transform: scale(1.2);
	height:18px;
	width:18px;
	filter: invert(30%) hue-rotate(60deg) brightness(0.9);
	
}

input.sheet-stat-inputs {
	
	font-family: 'Open Sans', sans-serif;
	margin: auto;
	display: inline;
	height:25px;
	width:25px;
	
}

input.sheet-move-custom-option {
    width: 260px;
	height: 18px;
	display: inline;
	font-family: 'Open Sans', sans-serif;
}

label.sheet-clues-row {
	
	font-family: 'Open Sans', sans-serif;
	color: rgb(13, 84, 18);
	justify-content: center;
	align-content: center;
	display: inline;
    font-size: 1.5em;
    font-weight: normal;
    line-height: 20px;
    margin-bottom: 0px;
	
}

.charsheet .repcontrol_add,
.charsheet .repcontrol_edit,
.charsheet .repcontrol_del {
	
	font-family: 'Yeseva One', cursive;
	background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/The%20Between/moroccan-background.PNG?raw=true"); /*Pattern generated with css, but due to security errors coming up, used as a picture here.*/
	background-repeat: repeat;
	background-size: 70px;
	color: black;
	width: 70px;
	height: 20px;
	border-style: none;
	
}


button.sheet-tabbutton {
	
	font-family: 'Yeseva One', cursive;
	background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/The%20Between/moroccan-background.PNG?raw=true"); /*Pattern generated with css, but due to security errors coming up, used as a picture here.*/
	background-repeat: repeat;
	background-size: 70px;
	color: black;
	width: 140px;
	height: 20px;
	border-style: none;
	
}

button.sheet-resetstatsbutton {
	
	font-family: 'Yeseva One', cursive;
	background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/The%20Between/moroccan-background.PNG?raw=true"); /*Pattern generated with css, but due to security errors coming up, used as a picture here.*/
	background-repeat: repeat;
	background-size: 70px;
	color: black;
	width: 50px;
	height: 36px;
	border-style: none;
	
}

.sheet-american-moves button[type=roll].sheet-rollbuttond6,
.sheet-explorer-moves button[type=roll].sheet-rollbuttond6,
.sheet-factotum-moves button[type=roll].sheet-rollbuttond6,
.sheet-mother-moves button[type=roll].sheet-rollbuttond6,
.sheet-orphan-moves button[type=roll].sheet-rollbuttond6,
.sheet-undeniable-moves button[type=roll].sheet-rollbuttond6,
.sheet-vessel-moves button[type=roll].sheet-rollbuttond6,
.sheet-undeniable button[type=roll].sheet-rollbuttond6  {
	background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/The%20Between/moroccan-background.PNG?raw=true"); /*Pattern generated with css, but due to security errors coming up, used as a picture here.*/
	background-repeat: repeat;
	background-size: 70px;
	color: black;
	width: 18px;
	height: 18px;
	border-style: none;
	margin: auto;
	border-radius: 5px;
	white-space: normal;

}

.sheet-moves button[type=roll].sheet-rollbutton {
	
	font-family: 'Yeseva One', cursive;
	background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/The%20Between/moroccan-background.PNG?raw=true"); /*Pattern generated with css, but due to security errors coming up, used as a picture here.*/
	background-repeat: repeat;
	background-size: 70px;
	color: black;
	width: 160px;
	height: 18px;
	font-size: 1em;
	border-style: none;
	margin: auto;
	border-radius: 0;
	
}

.sheet-moves button[type=roll].sheet-rollbuttonlong {
	
	font-family: 'Yeseva One', cursive;
	background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/The%20Between/moroccan-background.PNG?raw=true"); /*Pattern generated with css, but due to security errors coming up, used as a picture here.*/
	background-repeat: repeat;
	background-size: 70px;
	color: black;
	width: 140px;
	height: 36px;
	font-size: 1em;
	border-style: none;
	margin: auto;
	border-radius: 0;
	white-space: normal;
	
}



.sheet-tabselector {
  grid-area: tabselector;
  font-family: 'Yeseva One', cursive;
  grid-template-columns: 150px 10px 150px ;
  display: grid;
  grid-template-rows: 30px;
}


.sheet-info {
  grid-area: info;
}

.sheet-cluesname {
  grid-area: cluesname;
  background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/The%20Between/moroccan-background.PNG?raw=true"); /*Pattern generated with css, but due to security errors coming up, used as a picture here.*/
  background-repeat: repeat;
  background-size: 70px;

}

.sheet-clues {
  grid-area: clues;
}

.sheet-centre {
  grid-area: centre;
  font-family: 'Yeseva One', cursive;
  grid-template-columns: 260px ;
  display: grid;
  grid-template-rows: 90px 30px 115px 10px 120px 10px 1fr 10px;
  grid-template-areas:"gamename  "
					  ".   "
                      "conditions "
					  ".   "
					  "moves "
					  ".   "
					  "personalquarters "
					  ".   ";
}

.sheet-gamename {
  grid-area: gamename;
  background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/The%20Between/the-between-logo-clean.png?raw=true"); /*The Between logo*/
  
  background-size: contain;
  align-items: center;
  justify-items: center;
  background-color:none;

}

.sheet-conditions {
  grid-area: conditions;
  grid-template-columns: 240px ;
  display: grid;
  grid-template-rows: 25px 5px 25px 5px 25px 5px 25px;

}

.sheet-moves {
  grid-area: moves;
  grid-template-columns: 240px ;
  display: grid;
  grid-template-rows: 20px 5px 20px 5px 20px 5px 20px 5px 20px;
  

}

.sheet-left {
  grid-area: left;
  grid-template-columns: 410px ;
  display: grid;
  grid-template-rows: 150px 10px 30px 10px 1fr 10px;
  grid-template-areas:"charinput  "
					  ".   "
                      "xptrack "
					  ".   "
					  "huntermoves "
					  ".   ";
}

.sheet-charinput {
  grid-area: charinput;
  grid-template-columns: 100px 10px 290px;
  display: grid;
  grid-template-rows: 30px 30px 30px 30px 30px;

}

.sheet-xptrack {
  grid-area: xptrack;
  grid-template-columns: 100px 10px 30px 10px 30px 10px 30px 10px 30px 10px 30px;
  display: grid;
  grid-template-rows: 30px;

}

.sheet-huntermoves {
  grid-area: huntermoves;
  display: grid;

}

.sheet-right {
  grid-area: right;
  grid-template-columns: 410px ;
  display: grid;
  grid-template-rows: 65px 10px 800px 10px;
  grid-template-areas:"stats  "
					  ".   "
                      "masksdawn "
					  ".   ";
}

.sheet-stats {
  grid-area: stats;
  grid-template-columns: 60px 10px 60px 10px 60px 10px 60px 10px 60px 10px 60px;
  display: grid;
  grid-template-rows: 30px 5px 30px;

}

.sheet-masksdawn {
  grid-area: masksdawn;
  display: grid;

}


.sheet-personalquarters {
  grid-area: personalquarters;

}


/* Playsheet specific sections - right side */

.sheet-american {
  
  width: 410px;
  height: 100vh;
  grid-gap: 6px;
  grid-template-columns: 410px;
  grid-template-rows: 358px 366px 273px;
  grid-template-areas:"maskpastamerican"
					  "maskfutureamerican"
					  "dawnquestionsamerican";
}

.sheet-maskpastamerican {
  grid-area: maskpastamerican;
  width: 410px;
  height: 358px;
  display: grid;
  grid-template-columns: 20px 10px 380px;
  grid-template-rows: 30px 5px 18px 5px 36px 5px 36px 5px 54px 5px 36px 5px 36px 5px 36px 5px 36px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "maskpastamericannote   maskpastamericannote   maskpastamericannote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-maskpastamericannote {
  grid-area: maskpastamericannote;
  display: grid;

}

.sheet-maskfutureamerican {
  grid-area: maskfutureamerican;
  width: 410px;
  height: 366px;
  display: grid;
  grid-template-columns: 20px 10px 380px;
  grid-template-rows: 30px 5px 54px 5px 72px 5px 72px 5px 36px 5px 36px 5px 36px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "maskfutureamericannote   maskfutureamericannote   maskfutureamericannote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";

}

.sheet-maskfutureamericannote {
  grid-area: maskfutureamericannote;
  display: grid;

}

.sheet-dawnquestionsamerican {
  grid-area: dawnquestionsamerican;
  width: 410px;
  height: 273px;
  display: grid;
  grid-template-columns: 20px 10px 380px;
  grid-template-rows: 30px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px 5px 36px 5px 36px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "dawnquestionsamericannote   dawnquestionsamericannote   dawnquestionsamericannote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-dawnquestionsamericannote {
  grid-area: dawnquestionsamericannote;
  display: grid;

}


.sheet-explorer {
  
  width: 410px;
  height: 100vh;
  grid-gap: 6px;
  grid-template-columns: 410px;
  grid-template-rows: 448px 366px 291px;
  grid-template-areas:"maskpastexplorer"
					  "maskfutureexplorer"
					  "dawnquestionsexplorer";
}

.sheet-maskpastexplorer {
  grid-area: maskpastexplorer;
  width: 410px;
  height: 448px;
  display: grid;
  grid-template-columns: 20px 10px 380px;
  grid-template-rows: 30px 5px 72px 5px 54px 5px 54px 5px 54px 5px 54px 5px 36px 5px 18px 5px 36px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "maskpastexplorernote   maskpastexplorernote   maskpastexplorernote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-maskpastexplorernote {
  grid-area: maskpastexplorernote;
  display: grid;

}

.sheet-maskfutureexplorer {
  grid-area: maskfutureexplorer;
  width: 410px;
  height: 366px;
  display: grid;
  grid-template-columns: 20px 10px 380px;
  grid-template-rows: 30px 5px 18px 5px 72px 5px 72px 5px 54px 5px 36px 5px 54px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "maskfutureexplorernote   maskfutureexplorernote   maskfutureexplorernote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";

}

.sheet-maskfutureexplorernote {
  grid-area: maskfutureexplorernote;
  display: grid;

}

.sheet-dawnquestionsexplorer {
  grid-area: dawnquestionsexplorer;
  width: 410px;
  height: 291px;
  display: grid;
  grid-template-columns: 20px 10px 380px;
  grid-template-rows: 30px 5px 18px 5px 18px 5px 18px 5px 18px 5px 36px 5px 36px 5px 18px 5px 36px 5px 18px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "dawnquestionsexplorernote   dawnquestionsexplorernote   dawnquestionsexplorernote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-dawnquestionsexplorernote {
  grid-area: dawnquestionsexplorernote;
  display: grid;

}



.sheet-factotum {
  
  width: 410px;
  height: 100vh;
  grid-gap: 6px;
  grid-template-columns: 410px;
  grid-template-rows: 376px 384px 309px;
  grid-template-areas:"maskpastfactotum"
					  "maskfuturefactotum"
					  "dawnquestionsfactotum";
}

.sheet-maskpastfactotum {
  grid-area: maskpastfactotum;
  width: 410px;
  height: 376px;
  display: grid;
  grid-template-columns: 20px 10px 380px;
  grid-template-rows: 30px 5px 18px 5px 54px 5px 36px 5px 36px 5px 54px 5px 36px 5px 36px 5px 36px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "maskpastfactotumnote   maskpastfactotumnote   maskpastfactotumnote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-maskpastfactotumnote {
  grid-area: maskpastfactotumnote;
  display: grid;

}

.sheet-maskfuturefactotum {
  grid-area: maskfuturefactotum;
  width: 410px;
  height: 384px;
  display: grid;
  grid-template-columns: 20px 10px 380px;
  grid-template-rows: 30px 5px 54px 5px 108px 5px 36px 5px 54px 5px 36px 5px 36px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "maskfuturefactotumnote   maskfuturefactotumnote   maskfuturefactotumnote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";

}

.sheet-maskfuturefactotumnote {
  grid-area: maskfuturefactotumnote;
  display: grid;

}

.sheet-dawnquestionsfactotum {
  grid-area: dawnquestionsfactotum;
  width: 410px;
  height: 309px;
  display: grid;
  grid-template-columns: 20px 10px 380px;
  grid-template-rows: 30px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px 5px 36px 5px 36px 5px 36px 5px 36px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "dawnquestionsfactotumnote   dawnquestionsfactotumnote   dawnquestionsfactotumnote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-dawnquestionsfactotumnote {
  grid-area: dawnquestionsfactotumnote;
  display: grid;

}



.sheet-mother {
  
  width: 410px;
  height: 100vh;
  grid-gap: 6px;
  grid-template-columns: 410px;
  grid-template-rows: 340px 312px 368px;
  grid-template-areas:"maskpastmother"
					  "maskfuturemother"
					  "dawnquestionsmother";
}

.sheet-maskpastmother {
  grid-area: maskpastmother;
  width: 410px;
  height: 340px;
  display: grid;
  grid-template-columns: 20px 10px 380px;
  grid-template-rows: 30px 5px 18px 5px 36px 5px 36px 5px 36px 5px 36px 5px 36px 5px 36px 5px 36px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "maskpastmothernote   maskpastmothernote   maskpastmothernote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-maskpastmothernote {
  grid-area: maskpastmothernote;
  display: grid;

}

.sheet-maskfuturemother {
  grid-area: maskfuturemother;
  width: 410px;
  height: 312px;
  display: grid;
  grid-template-columns: 20px 10px 380px;
  grid-template-rows: 30px 5px 54px 5px 72px 5px 36px 5px 36px 5px 18px 5px 36px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "maskfuturemothernote   maskfuturemothernote   maskfuturemothernote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";

}

.sheet-maskfuturemothernote {
  grid-area: maskfuturemothernote;
  display: grid;

}

.sheet-dawnquestionsmother {
  grid-area: dawnquestionsmother;
  width: 410px;
  height: 368px;
  display: grid;
  grid-template-columns: 20px 10px 380px;
  grid-template-rows: 30px 5px 18px 5px 18px 5px 18px 5px 18px 5px 36px 5px 36px 5px 36px 5px 36px 5px 36px 5px 36px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "dawnquestionsmothernote   dawnquestionsmothernote   dawnquestionsmothernote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-dawnquestionsmothernote {
  grid-area: dawnquestionsmothernote;
  display: grid;

}


.sheet-orphan {
  
  width: 410px;
  height: 100vh;
  grid-gap: 6px;
  grid-template-columns: 410px;
  grid-template-rows: 466px 212px 291px;
  grid-template-areas:"maskpastorphan"
					  "maskfutureorphan"
					  "dawnquestionsorphan";
}

.sheet-maskpastorphan {
  grid-area: maskpastorphan;
  width: 410px;
  height: 466px;
  display: grid;
  grid-template-columns: 20px 10px 380px;
  grid-template-rows: 30px 5px 54px 5px 72px 5px 54px 5px 36px 5px 36px 5px 54px 5px 36px 5px 54px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "maskpastorphannote   maskpastorphannote   maskpastorphannote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-maskpastorphannote {
  grid-area: maskpastorphannote;
  display: grid;

}

.sheet-maskfutureorphan {
  grid-area: maskfutureorphan;
  width: 410px;
  height: 212px;
  display: grid;
  grid-template-columns: 20px 10px 380px;
  grid-template-rows: 30px 5px 54px 5px 54px 5px 18px 5px 36px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "maskfutureorphannote   maskfutureorphannote   maskfutureorphannote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";

}

.sheet-maskfutureorphannote {
  grid-area: maskfutureorphannote;
  display: grid;

}

.sheet-dawnquestionsorphan {
  grid-area: dawnquestionsorphan;
  width: 410px;
  height: 291px;
  display: grid;
  grid-template-columns: 20px 10px 380px;
  grid-template-rows: 30px 5px 18px 5px 18px 5px 18px 5px 18px 5px 36px 5px 18px 5px 36px 5px 36px 5px 18px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "dawnquestionsorphannote   dawnquestionsorphannote   dawnquestionsorphannote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-dawnquestionsorphannote {
  grid-area: dawnquestionsorphannote;
  display: grid;

}


.sheet-undeniable {
  
  width: 410px;
  height: 100vh;
  grid-gap: 6px;
  grid-template-columns: 410px;
  grid-template-rows: 412px 371px 309px;
  grid-template-areas:"maskpastundeniable"
					  "maskfutureundeniable"
					  "dawnquestionsundeniable";
}

.sheet-maskpastundeniable {
  grid-area: maskpastundeniable;
  width: 410px;
  height: 412px;
  display: grid;
  grid-template-columns: 20px 10px 380px;
  grid-template-rows: 30px 5px 18px 5px 54px 5px 36px 5px 36px 5px 54px 5px 36px 5px 54px 5px 54px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "maskpastundeniablenote   maskpastundeniablenote   maskpastundeniablenote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-maskpastundeniablenote {
  grid-area: maskpastundeniablenote;
  display: grid;

}

.sheet-maskfutureundeniable {
  grid-area: maskfutureundeniable;
  width: 410px;
  height: 371px;
  display: grid;
  grid-template-columns: 20px 10px 380px;
  grid-template-rows: 30px 5px 54px 5px 90px 5px 36px 5px 36px 5px 59px 5px 36px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "maskfutureundeniablenote   maskfutureundeniablenote   maskfutureundeniablenote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";

}

.sheet-maskfutureundeniablenote {
  grid-area: maskfutureundeniablenote;
  display: grid;

}

.sheet-dawnquestionsundeniable {
  grid-area: dawnquestionsundeniable;
  width: 410px;
  height: 309px;
  display: grid;
  grid-template-columns: 20px 10px 380px;
  grid-template-rows: 30px 5px 18px 5px 18px 5px 18px 5px 18px 5px 36px 5px 18px 5px 36px 5px 36px 5px 36px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "dawnquestionsundeniablenote   dawnquestionsundeniablenote   dawnquestionsundeniablenote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-dawnquestionsundeniablenote {
  grid-area: dawnquestionsundeniablenote;
  display: grid;

}



.sheet-vessel {
  
  width: 410px;
  height: 100vh;
  grid-gap: 6px;
  grid-template-columns: 410px;
  grid-template-rows: 376px 348px 255px;
  grid-template-areas:"maskpastvessel"
					  "maskfuturevessel"
					  "dawnquestionsvessel";
}

.sheet-maskpastvessel {
  grid-area: maskpastvessel;
  width: 410px;
  height: 376px;
  display: grid;
  grid-template-columns: 20px 10px 380px;
  grid-template-rows: 30px 5px 18px 5px 54px 5px 36px 5px 36px 5px 54px 5px 36px 5px 36px 5px 36px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "maskpastvesselnote   maskpastvesselnote   maskpastvesselnote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-maskpastvesselnote {
  grid-area: maskpastvesselnote;
  display: grid;

}

.sheet-maskfuturevessel {
  grid-area: maskfuturevessel;
  width: 410px;
  height: 348px;
  display: grid;
  grid-template-columns: 20px 10px 380px;
  grid-template-rows: 30px 5px 54px 5px 72px 5px 54px 5px 36px 5px 36px 5px 36px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "maskfuturevesselnote   maskfuturevesselnote   maskfuturevesselnote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";

}

.sheet-maskfuturevesselnote {
  grid-area: maskfuturevesselnote;
  display: grid;

}

.sheet-dawnquestionsvessel {
  grid-area: dawnquestionsvessel;
  width: 410px;
  height: 255px;
  display: grid;
  grid-template-columns: 20px 10px 380px;
  grid-template-rows: 30px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px 5px 36px 5px 18px 5px 18px 5px 18px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "dawnquestionsvesselnote   dawnquestionsvesselnote   dawnquestionsvesselnote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-dawnquestionsvesselnote {
  grid-area: dawnquestionsvesselnote;
  display: grid;

}









/* Playsheet specific sections - left side */

.sheet-american-moves {
  
  width: 370px;
  height: 100vh;
  grid-gap: 6px;
  grid-template-columns: 370px;
  grid-template-rows: 214px 738px;
  grid-template-areas:"advancementsamerican"
					  "movesamerican";
}

.sheet-advancementsamerican {
  grid-area: advancementsamerican;
  width: 370px;
  height: 214px;
  display: grid;
  grid-template-columns: 20px 10px 340px;
  grid-template-rows: 30px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "advancementsamericannote   advancementsamericannote   advancementsamericannote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-advancementsamericannote {
  grid-area: advancementsamericannote;
  display: grid;

}

.sheet-movesamerican {
  grid-area: movesamerican;
  width: 370px;
  height: 738px;
  display: grid;
  grid-template-columns: 20px 10px 340px;
  grid-template-rows: 30px 5px 18px 5px 77px 5px 144px 5px 108px 5px 77px 5px 59px 5px 95px 5px 90px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "movesamericannote   movesamericannote   movesamericannote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-movesamericannote {
  grid-area: movesamericannote;
  display: grid;

}



.sheet-explorer-moves {
  
  width: 370px;
  height: 100vh;
  grid-gap: 6px;
  grid-template-columns: 370px;
  grid-template-rows: 214px 665px 687px;
  grid-template-areas:"advancementsexplorer"
					  "movesexplorer"
					  "recexplorer";
}

.sheet-advancementsexplorer {
  grid-area: advancementsexplorer;
  width: 370px;
  height: 214px;
  display: grid;
  grid-template-columns: 20px 10px 340px;
  grid-template-rows: 30px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "advancementsexplorernote   advancementsexplorernote   advancementsexplorernote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-advancementsexplorernote {
  grid-area: advancementsexplorernote;
  display: grid;

}

.sheet-movesexplorer {
  grid-area: movesexplorer;
  width: 370px;
  height: 665px;
  display: grid;
  grid-template-columns: 20px 10px 340px;
  grid-template-rows: 30px 5px 36px 5px 224px 5px 256px 5px 90px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "movesexplorernote   movesexplorernote   movesexplorernote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-movesexplorernote {
  grid-area: movesexplorernote;
  display: grid;

}

.sheet-recexplorer {
  grid-area: recexplorer;
  width: 680px;
  height: 687px;
  display: grid;
  grid-template-columns: 680px;
  grid-template-rows: 30px 5px 72px 5px 90px 5px 72px 5px 154px 5px 72px 5px 54px 5px 108px;
					  
}



.sheet-factotum-moves {
  
  width: 370px;
  height: 100vh;
  grid-gap: 6px;
  grid-template-columns: 370px;
  grid-template-rows: 214px 1352px;
  grid-template-areas:"advancementsfactotum"
					  "movesfactotum";
}

.sheet-advancementsfactotum {
  grid-area: advancementsfactotum;
  width: 370px;
  height: 214px;
  display: grid;
  grid-template-columns: 20px 10px 340px;
  grid-template-rows: 30px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "advancementsfactotumnote   advancementsfactotumnote   advancementsfactotumnote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-advancementsfactotumnote {
  grid-area: advancementsfactotumnote;
  display: grid;

}

.sheet-movesfactotum {
  grid-area: movesfactotum;
  width: 370px;
  height: 1352px;
  display: grid;
  grid-template-columns: 20px 10px 340px;
  grid-template-rows: 30px 5px 18px 5px 252px 5px 72px 5px 144px 5px 126px 5px 180px 5px 400px 5px 90px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "movesfactotumnote   movesfactotumnote   movesfactotumnote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-movesfactotumnote {
  grid-area: movesfactotumnote;
  display: grid;

}


.sheet-mother-moves {
  
  width: 370px;
  height: 100vh;
  grid-gap: 6px;
  grid-template-columns: 370px;
  grid-template-rows: 214px 1558px;
  grid-template-areas:"advancementsmother"
					  "movesmother";
}

.sheet-advancementsmother {
  grid-area: advancementsmother;
  width: 370px;
  height: 214px;
  display: grid;
  grid-template-columns: 20px 10px 340px;
  grid-template-rows: 30px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "advancementsmothernote   advancementsmothernote   advancementsmothernote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-advancementsmothernote {
  grid-area: advancementsmothernote;
  display: grid;

}

.sheet-movesmother {
  grid-area: movesmother;
  width: 370px;
  height: 1558px;
  display: grid;
  grid-template-columns: 20px 10px 340px;
  grid-template-rows: 30px 5px 18px 5px 335px 5px 306px 5px 41px 5px 198px 5px 140px 5px 360px 5px 90px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "movesmothernote   movesmothernote   movesmothernote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-movesmothernote {
  grid-area: movesmothernote;
  display: grid;

}


.sheet-orphan-moves {
  
  width: 370px;
  height: 100vh;
  grid-gap: 6px;
  grid-template-columns: 370px;
  grid-template-rows: 214px 738px;
  grid-template-areas:"advancementsorphan"
					  "movesorphan";
}

.sheet-advancementsorphan {
  grid-area: advancementsorphan;
  width: 370px;
  height: 214px;
  display: grid;
  grid-template-columns: 20px 10px 340px;
  grid-template-rows: 30px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "advancementsorphannote   advancementsorphannote   advancementsorphannote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-advancementsorphannote {
  grid-area: advancementsorphannote;
  display: grid;

}

.sheet-movesorphan {
  grid-area: movesorphan;
  width: 370px;
  height: 738px;
  display: grid;
  grid-template-columns: 20px 10px 340px;
  grid-template-rows: 30px 5px 36px 5px 455px 5px 108px 5px 343px 5px 90px 5px 108px 5px 128px 5px 90px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "movesorphannote   movesorphannote   movesorphannote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-movesorphannote {
  grid-area: movesorphannote;
  display: grid;

}


.sheet-undeniable-moves {
  
  width: 370px;
  height: 100vh;
  grid-gap: 6px;
  grid-template-columns: 370px;
  grid-template-rows: 232px 1912px;
  grid-template-areas:"advancementsundeniable"
					  "movesundeniable";
}

.sheet-advancementsundeniable {
  grid-area: advancementsundeniable;
  width: 370px;
  height: 232px;
  display: grid;
  grid-template-columns: 20px 10px 340px;
  grid-template-rows: 30px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px 5px 36px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "advancementsundeniablenote   advancementsundeniablenote   advancementsundeniablenote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-advancementsundeniablenote {
  grid-area: advancementsundeniablenote;
  display: grid;

}

.sheet-movesundeniable {
  grid-area: movesundeniable;
  width: 370px;
  height: 1912px;
  display: grid;
  grid-template-columns: 20px 10px 340px;
  grid-template-rows: 30px 5px 18px 5px 705px 5px 126px 5px 343px 5px 100px 5px 298px 5px 162px 5px 90px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "movesundeniablenote   movesundeniablenote   movesundeniablenote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-movesundeniablenote {
  grid-area: movesundeniablenote;
  display: grid;

}


.sheet-vessel-moves {
  
  width: 370px;
  height: 100vh;
  grid-gap: 6px;
  grid-template-columns: 370px;
  grid-template-rows: 214px 738px;
  grid-template-areas:"advancementsvessel"
					  "movesvessel";
}

.sheet-advancementsvessel {
  grid-area: advancementsvessel;
  width: 370px;
  height: 214px;
  display: grid;
  grid-template-columns: 20px 10px 340px;
  grid-template-rows: 30px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px 5px 18px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "advancementsvesselnote   advancementsvesselnote   advancementsvesselnote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-advancementsvesselnote {
  grid-area: advancementsvesselnote;
  display: grid;

}

.sheet-movesvessel {
  grid-area: movesvessel;
  width: 370px;
  height: 738px;
  display: grid;
  grid-template-columns: 20px 10px 340px;
  grid-template-rows: 30px 5px 36px 5px 225px 5px 187px 5px 59px 5px 280px 5px 144px 5px 216px 5px 90px;
  grid-template-areas:".   .   ."
					  ".   .   ."
					  "movesvesselnote   movesvesselnote   movesvesselnote"
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   ."
					  ".   .   .";
					  
}

.sheet-movesvesselnote {
  grid-area: movesvesselnote;
  display: grid;

}






/* Format repeating sections */

div.sheet-clues-row {
    display: grid;
    grid-template-columns: 10px 900px 10px;
    column-gap: 5px;
	background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/The%20Between/moroccan-background.PNG?raw=true"); /*Pattern generated with css, but due to security errors coming up, used as a picture here.*/
	background-repeat: repeat;
	background-size: 70px;
	font-family: 'Open Sans', sans-serif;
}

div.sheet-personalquarters-row {
    display: grid;
    grid-template-columns: 20px 10px 200px;
    column-gap: 5px;
	background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/The%20Between/moroccan-background.PNG?raw=true"); /*Pattern generated with css, but due to security errors coming up, used as a picture here.*/
	background-repeat: repeat;
	background-size: 70px;
	font-family: 'Open Sans', sans-serif;
}

div.sheet-personalquarters-row input[type="checkbox"] {
    font-family: 'Open Sans', sans-serif;
	display: inline;
	transform: scale(1.2);
	height:18px;
	width:18px;
	filter: invert(30%) hue-rotate(60deg) brightness(0.9);
}

div.sheet-personalquarters-row input[type="text"] {
    width: 200px;
	height: 20px;
	font-family: 'Open Sans', sans-serif;
}

div.sheet-clues-row input[type="text"] {
    width: 250px;
	height: 50.21px;
	font-family: 'Open Sans', sans-serif;
}

div.sheet-movesamerican textarea,
div.sheet-movesexplorer textarea,
div.sheet-movesfactotum textarea,
div.sheet-movesmother textarea,
div.sheet-movesorphan textarea,
div.sheet-movesundeniable textarea,
div.sheet-movesvessel textarea {
    width: 330px;
	height: 90px;
	font-family: 'Open Sans', sans-serif;
}

div.sheet-clues-row textarea {
    width: 900px;
	height: 40px;
	font-family: 'Open Sans', sans-serif;
}

div.sheet-clues-row input[type="number"] {
    width: 50px;
	font-family: 'Open Sans', sans-serif;
}



/* Roll template formatting */

.sheet-movedesc {
    background: #fff;
    padding: 10px;
}

.sheet-rolltemplate-com table,
.sheet-rolltemplate-com12 table,
.sheet-rolltemplate-comtext table {
    width: 98%;
	border: 1px solid;
	color: black;
	font-size: 1em;
	font-family: 'Open Sans', sans-serif;
}

.sheet-rolltemplate-com th,
.sheet-rolltemplate-com12 th,
.sheet-rolltemplate-comtext th {
	background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/The%20Between/moroccan-background.PNG?raw=true"); /*Pattern generated with css, but due to security errors coming up, used as a picture here.*/
	background-repeat: repeat;
	background-size: 70px;
	font-family: 'Yeseva One', cursive;
	color: black;
	padding: 5px 10px;
	border-bottom: 1px solid black;
	border-right: 1px solid black;
	line-height: 1.6em;
	font-size: 1.2em;
	text-align: left;
}

.sheet-rolltemplate-com .userscript-tcat,
.sheet-rolltemplate-com12 .userscript-tcat,
.sheet-rolltemplate-comtext .userscript-tcat {
	font-weight: bold;
}

.sheet-rolltemplate-com td,
.sheet-rolltemplate-com12 td,
.sheet-rolltemplate-comtext td {
	padding: 5px 10px;
	border-bottom: 1px solid black;
	border-right: 1px solid black;
}

.sheet-rolltemplate-com tr:nth-child(odd),
.sheet-rolltemplate-com12 tr:nth-child(odd),
.sheet-rolltemplate-comtext tr:nth-child(odd) {
	background-color: rgb(242, 242, 242);
}

.sheet-rolltemplate-com tr:nth-child(even),
.sheet-rolltemplate-com12 tr:nth-child(even),
.sheet-rolltemplate-comtext tr:nth-child(even) {
	background-color: rgb(229, 229, 229);
}

.sheet-rolltemplate-com .inlinerollresult,
.sheet-rolltemplate-com12 .inlinerollresult  {
	display: inline-block;
	min-width: 1.5em;
	text-align: center;
	border: 2px solid rgba(167, 168, 170,1); /*Cool Gray 6 C*/
}

.sheet-rolltemplate-com .inlinerollresult.fullcrit,
.sheet-rolltemplate-com12 .inlinerollresult.fullcrit {
	border: 2px solid #3FB315;
}

.sheet-rolltemplate-com .inlinerollresult.fullfail,
.sheet-rolltemplate-com12 .inlinerollresult.fullfail {
	border: 2px solid #B31515;
}

.sheet-rolltemplate-com .inlinerollresult.importantroll,
.sheet-rolltemplate-com12 .inlinerollresult.importantroll {
	border: 2px solid #4A57ED;
}

.textchatcontainer .message {
    padding-left: 10px;
}

.sheet-moves button[type=roll].sheet-rollbutton::before  {
    content: "";

}

.sheet-moves button[type=roll].sheet-rollbuttonlong::before  {
    content: "";

}

.sheet-american-moves button[type=roll].sheet-rollbuttond6::before,
.sheet-explorer-moves button[type=roll].sheet-rollbuttond6::before,
.sheet-factotum-moves button[type=roll].sheet-rollbuttond6::before,
.sheet-mother-moves button[type=roll].sheet-rollbuttond6::before,
.sheet-orphan-moves button[type=roll].sheet-rollbuttond6::before,
.sheet-undeniable-moves button[type=roll].sheet-rollbuttond6::before,
.sheet-vessel-moves button[type=roll].sheet-rollbuttond6::before,
.sheet-undeniable button[type=roll].sheet-rollbuttond6::before   {
    font-family: "dicefontd6";
    content: "F";
    font-size: 1em;

}