/*----------------- Main Layout ------------------*/

/* A CSS Grid example using "grid-template-areas"
  https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
*/

@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&family=IM+Fell+English:ital@0;1&family=Pirata+One&display=swap');

/*Configure the tab buttons*/
.charsheet .sheet-pc,
.charsheet .sheet-npc,
.charsheet .sheet-ship {
    display: none;
}

/* show the selected tab */
.charsheet .sheet-tabstoggle[value="pc"] ~ div.sheet-pc,
.charsheet .sheet-tabstoggle[value="npc"] ~ div.sheet-npc,
.charsheet .sheet-tabstoggle[value="ship"] ~ div.sheet-ship {
    display: block;
}

.sheet-pc{
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pirate%20Borg/Pirate_Borg_Character_Sheet_BG.jpg');
  background-repeat: no-repeat;
  background-color: white;
  height: 853px;
  width: 904px;
  background-position-x: -10px;
  background-position-y: -10px;
  
}

.sheet-ship{
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pirate%20Borg/Pirate_Borg_Ship_Sheet_BG.jpg');
  background-repeat: no-repeat;
  background-color: white;
  height: 853px;
  width: 904px;
  background-position-x: -10px;
  background-position-y: -10px;

}

.sheet-npc{
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pirate%20Borg/Pirate_Borg_NPC_Sheet_BG.jpg');
  background-repeat: no-repeat;
  background-color: white;
  height: 853px;
  width: 904px;
  background-position-x: -10px;
  background-position-y: -10px;

}

.page-switcher {
	position: absolute;
	top: 67px;
}



main {
  display: grid;
  min-width: 830px;
  grid-gap: 4px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-template-areas:"common      skill items"
                      "description ship  vessel";
}


.charsheet {

  background-repeat: no-repeat;
  background-color: white;
  width: 904px;
  height: 853px;
}

.noborder input{
   background: none;
   border: none;
   box-shadow: none;
   color: #000 !important;
}

.noborder select{
   background: none;
   border: none;
   box-shadow: none;
   color: #000 !important;
}

.noborder textarea{
   background: none;
   border: none;
   box-shadow: none;
   color: #000 !important;
}


/*----------------- PC Sheet Field Positioning ------------------*/
.randompirate {   
    position: absolute;
    top: 0;  
    right: 0;
}

.character_name {   
    position: absolute;
    top: 180px;  
    left: 75px;
}

.character_name input {  
    font-size: 2em;
    font-weight: 800;
    width: 245px;
}

.class {   
    position: absolute;
    top: 217px;  
    left: 101px;
}

.class input {  
    font-size: 1.5em;
    font-weight: normal;
    width: 200px;
    font-style: italic;
}

.features {   
    position: absolute;
    top: 264px;  
    left: 75px;
}

.features textarea {  
    font-size: 1em;
    font-weight: normal;
    width: 167px !important;
    height: 94px !important;
    font-style: normal;
}

.spell_use {   
    position: absolute;
    top: 323px;  
    left: 275px;
} 

.spell_use input{  
    font-size: 2em;
    font-weight: normal;
    width: 1.75em !important;
    text-align: center;
}
.spell_use button{
    position: absolute;
    top: -56px;
    left: 2px;
}

.ritual {   
    position: absolute;
    top: 452px;  
    left: 75px;
    width: 132px;
}

.ritual input{
    width: 132px;
    margin: 0 !important;
} 

.ritual_use {   
    position: absolute;
    top: 548px;  
    left: 262px;
} 

.ritual_use input{  
    font-size: 2em;
    font-weight: normal;
    width: 1.75em !important;
    text-align: center;
}
.ritual_use button{
    position: absolute;
    top: -60px;
    left: -1px;
}

.ritual div.f-row.nowrap{
    height: 1.5em;
}

.background {   
    position: absolute;
    top: 719px;  
    left: 66px;
    width: 200px;
}
.flaws {   
    position: absolute;
    top: 719px;  
    left: 358px;
    width: 200px;
}  
.trademark {   
    position: absolute;
    top: 726px;  
    left: 679px;
    width: 200px;
}  
.idiosyncrasies {   
    position: absolute;
    top: 837px;  
    left: 66px;
    width: 200px;
}
.incidents {   
    position: absolute;
    top: 837px;  
    left: 358px;
    width: 200px;
}   
.thing_of_importance {   
    position: absolute;
    top: 845px;  
    left: 696px;
    width: 195px;
}    
.hp{
    position: absolute;
    top: 118px;
    left: 384px;
    transform: rotate(-15deg);
}
.hp_max{
    position: absolute;
    top: 104px;
    left: 441px;
    transform: rotate(-15deg);

}

.hp input, .hp_max input{
    font-family: 'Pirata One';
}

.stat button{ 
    position: absolute;
    top: 19px;
    left: -21px;
}
.stat input{  
    font-size: 3em;
    font-weight: 800;
    width: 62px !important;
    text-align: center;
}
.stat select{  
    font-size: 2.5em;
    font-weight: 800;
    width: 66px !important;
    text-align: center;
    height: 54px;
}

.strength {   
    position: absolute;
    top: 271px;  
    left: 475px;
    transform: rotate(-5deg);
}
.agility {   
    position: absolute;
    top: 321px;  
    left: 480px;
} 
.presence {   
    position: absolute;
    top: 365px;  
    left: 478px;
    transform: rotate(5deg);
} 
.toughness {   
    position: absolute;
    top: 418px;  
    left: 472px;
    transform: rotate(10deg);
} 
.spirit {   
    position: absolute;
    top: 464px;  
    left: 444px;
    transform: rotate(15deg);
}

.luck {
    position: absolute;
    top: 547px;  
    left: 399px;

}

.luck input{  
    font-size: 3em;
    font-weight: 800;
    width: 57px !important;
    text-align: center;
    font-family: 'Pirata One';
}
.luck button{
  position: absolute;
    top: 57px;
    left: 43px;
} 

.luck_radio {
    position: absolute;
    top: 615px;  
    left: 350px;
}
.luck_radio input{
	margin-right:7px;
}

input[type="radio"] {
   accent-color: black;

}

.equipment {   
    position: absolute;
    top: 307px;  
    left: 50px;
    width: 181px;
}
.equipment div.f-row.nowrap{
    height: 1.5em;
}
.equipment textarea{ 
	height: 1em !important;
}

.silver {   
    position: absolute;
    top: 510px;  
    left: 230px;

}
.silver input{  
    font-size: 2em;
    font-weight: normal;
    width: 4em !important;
    text-align: center;
    transform: rotate(39deg);
}

.items {   
    position: absolute;
    top: 57px;
    left: 527px;
}
.armor {
	background-color: #FFFFFF !important;
}

.armor label{
   color: #FF0000 !important;
}

input[name="attr_armor_name"]  {
	width: 345px;
}

/*----------------- Ship Sheet Field Positioning ------------------*/


.ship-name {
	position: absolute;
	top: 139px;
	left: 112px;
}

.ship-name input {  
    font-size: 1.4em;
    font-weight: 800;
    width: 245px;
    font-style: italic;
}

.ship-hp {
	position: absolute;
	top: 247px;
	left: 98px;
}
.ship-hp input, .ship-hp-current input{
	width: 100px !important;
}

.ship-hp-current {
	
}
.ship-hp-max {
	
}

.ship-hp input{
    font-family: 'Pirata One' !important;
}

.ship-hull {
	position: absolute;
	top: 76px;
	left: 700px;
}

.ship-hull input{  
    font-size: 3em;
    font-weight: 800;
    width: 57px !important;
    text-align: center;
    font-family: 'Pirata One';
}
.ship-hull button{
  position: absolute;
    top: 57px;
    left: 43px;
} 

.ship-hull-radio {
    position: absolute;
    top: 356px;  
    left: 189px;
}
.ship-hull-radio input{
	margin-right:9px;
}


.ship-skill {
	position: absolute;
	top: 408px;
	left: 284px;
}
.ship-broadsides {
	position: absolute;
	top: 506px;
	left: 243px;
}
.ship-broadsides-count {
	position: absolute;
	top: 468px;
	left: 269px;
}
.ship-small-arms-count {
	position: absolute;
	top: 544px;
	left: 267px;
}
.ship-broadsides-count input,
.ship-small-arms-count input {  
    font-size: 1.4em;
    font-weight: 800;
    width: 38px !important;
    height: 30px !important;
    text-align: center;
}

.ship-broadsides-count label,
.ship-small-arms-count label {  
    font-size: 1.4em;
}

.ship-stat input{  
    font-size: 3em;
    font-weight: 800;
    width: 62px !important;
    text-align: center;
}
.ship-stat select{  
    font-size: 1.4em;
    font-weight: 800;
    width: 75px !important;
    text-align: center;
    height: 32px;
    background: #FFF;
}

.ship-small-arms {
	position: absolute;
	top: 582px;
	left: 243px;
}
.ship-agility {
	position: absolute;
	top: 647px;
	left: 243px;
}
.ship-speed{
	position: absolute;
	top: 709px;
	left: 283px;
}
.ship-class{
	position: absolute;
    	top: 182px;
    	left: 340px;
}
.ship-class input{
	text-align:center;
	font-size: 1.5em;
    	font-weight: 800;
}
.ship-ram{
	position: absolute;
	top: 136px;
	left: 466px;
}

.ship-ram select{
    font-size: 1em !important;
    width: 56px !important;
    height: 36px !important;

}

.ship-ram button{
    top: 3px !important;
    left: -21px !important;
}

.ship-cargo-max{
	position: absolute;
	top: 253px;
	left: 494px;
}
.ship-cargo{
	position: absolute;
	top: 307px;
    	left: 365px;
}

.vessel .repcontainer[data-groupname="repeating_cargo"], .items .repcontainer[data-groupname="repeating_items"] {
    width: 196px;
}

.ship-crew-min{
	position: absolute;
	top: 570px;
	left: 349px;
}
.ship-crew-max{
	position: absolute;
	top: 570px;
	left: 486px;
}
.ship-crew-min label, .ship-crew-max label, .ship-cargo-max label{
	font-size: 0.7em;
}
.ship-captain{
	position: absolute;
	top: 123px;
	left: 591px;
}
.ship-quartermaster{
	position: absolute;
	top: 223px;
	left: 591px;
}

.ship-special{
	position: absolute;
	top: 323px;
	left: 591px;
	width: 210px;
	height: 10em;
}

.ship-special textarea{
	height: 20em !important;
}

.ship-quartermaster label, .ship-captain label, .ship-special label{
	color: #FFF;
}



/*----------------- NPC/Monster Sheet Field Positioning ------------------*/

.npc-name{
	position: absolute;
    	top: 153px;
    	left: 112px;
}
.npc-name input {  
	font-size: 1.4em;
	font-weight: 800;
	width: 245px;
	font-style: italic;
}
.npc-desc{
	position: absolute;
    	top: 167px;
    	left: 390px;
}
.npc-desc textarea{
	width: 450px !important;
	height: 140px !important;
}

.npc-hp {
	position: absolute;
	top: 263px;
	left: 142px;
}

.npc-hp input, .npc-morale input{
    font-family: 'Pirata One' !important;
}

.npc-morale {
	position: absolute;
	top: 397px;
	left: 172px;
}

.npc-armor input{  
    font-size: 3em;
    font-weight: 800;
    width: 57px !important;
    text-align: center;
    font-family: 'Pirata One';
}
.npc-armor button{
  position: absolute;
    top: 57px;
    left: 43px;
} 

.npc-armor-radio {
    position: absolute;
    top: 548px;  
    left: 177px;
}
.npc-armor-radio input{
	margin-right:6px;
}

.npc-armor-desc {
	position: absolute;
    	top: 514px;
    	left: 93px;
}
.npc-attack1{
	position: absolute;
    	top: 386px;
    	left: 754px;
}
.npc-attack1-desc {
	position: absolute;
    	top: 400px;
    	left: 390px;
}
.npc-attack2{
	position: absolute;
    	top: 505px;
    	left: 759px;
}

.npc-attack1 input, .npc-attack2 input{
	width: 75px !important;
	font-size: 2em !important;
	text-align: left;

}
.npc-attack2-desc{
	position: absolute;
    	top: 525px;
    	left: 390px;
}
.npc-special{
	position: absolute;
    	top: 650px ;
    	left: 390px;
}
.npc-special textarea{
	width: 425px !important;
	height: 200px !important;
}	





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

section {
    padding: 5px;
    border: 1px solid #dddddd;
}

/* CSS Flexbox styling, used for adjusting how content inside section behaves */
.f-col {
  display: flex;
  flex-direction: column;
}
.f-row {
  display: flex;
  flex-direction: row;
}
.wrap {
  display: flex;
  flex-wrap: wrap;
}
.nowrap {
  display: flex;
  flex-wrap: nowrap;
}
.f-center {
  align-items: center;
  justify-content: center;
}
.right {
  float: right;
}

/*----------------- Text & Input styling -----------------*/



/* these are for overwriting default CSS that comes from Roll20 */


.charsheet * {
  font-family: 'IM Fell English', serif;
  
}

.charsheet h3{
  font-family: 'Pirata One', serif;
  text-align: center;

}

.charsheet label{
  margin: 3px;
  padding: 3px 0 0 0;
}

.charsheet input[type="text"], input[type="number"]{
  margin: 2px 4px;
}

.charsheet textarea {
  width: 95%;
  height: 4em;
}

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

.skill {
  grid-area: skill;
  border: none;
  box-shadow: none;
}

.common {
  grid-area: common;
  border: none;
  box-shadow: none;
}

.vessel .repcontainer[data-groupname="repeating_cargo"],
.items .repcontainer[data-groupname="repeating_items"] {
  padding-bottom: 0.2em;
    border: none;
  box-shadow: none;
}

.vessel .repcontainer[data-groupname="repeating_cargo"] .repitem,
.items .repcontainer[data-groupname="repeating_items"] .repitem {
  margin: 4px 0px;
    border: none;
  box-shadow: none;
}

.items {
  grid-area: items;
    border: none;
  box-shadow: none;
}

.description {
  grid-area: description;
}

.ship {
  grid-area: ship;
    border: none;
  box-shadow: none;
}

.vessel {
  grid-area: vessel;
    border: none;
  box-shadow: none;
}

.highlight {
  color: var(--header-bg-color, #a83521);
}

.w-auto {
  width: auto;
}

.weapon-name {
  width: 9em;
}

.weapon-attack-type,
.weapon-dmg-die {
  width: 7em;
}

.weapon > * {
  margin-right: 1em;
}

.tab-selector {
  margin: 70px 0 5px 10px;
}




/*------------------------------------*\
  #ROLL TEMPLATES
\*------------------------------------*/

.sheet-rolltemplate-rolls {
  font-family: 'IM Fell English', serif !important;
}

.sheet-rolltemplate-rolls .sheet-container {
  border: 3px solid black;
  border-radius: 3px;
}
.sheet-rolltemplate-rolls .sheet-header {
  background-color: var(--header-bg-color, #000);
  color: var(--header-text-color, #FFF);
  text-align: left;
  text-transform: capitalize;
  padding: 5px;
  border-bottom: 2px solid black;
  font-family: 'IM Fell English', serif !important;
}
.sheet-rolltemplate-rolls .sheet-title,
.sheet-rolltemplate-rolls .sheet-name {
  font-size: 1.4em;
  font-weight: normal;
}
.sheet-rolltemplate-rolls .sheet-subtitle {
  font-size: 1em;
  font-family: 'IM Fell English', serif !important;
    font-style: italic;
  
}
.sheet-rolltemplate-rolls .sheet-container {
  --header-bg-color: #000;
  --header-text-color: #FFF;
  font-family: 'IM Fell English', serif !important;

}

.sheet-rolltemplate-rolls .sheet-content {
  display: grid;
  background: #FFF;
  grid-template-columns: auto auto;
  line-height: 2em;
  font-size: 1.4em;
}
.sheet-rolltemplate-rolls .sheet-content > div {
  padding: 5px;
}
.sheet-rolltemplate-rolls .sheet-content .sheet-key {
  font-weight: normal;
  font-weight: normal;
  padding-right: 10px;
  text-align: right;
}
.sheet-rolltemplate-rolls .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-rolls .sheet-content :nth-child(4n) {
  background: #EEE;
}


.sheet-rolltemplate-attack, .sheet-rolltemplate-shipattack {
  font-family: 'IM Fell English', serif !important;
}

.sheet-rolltemplate-attack .sheet-container, .sheet-rolltemplate-shipattack .sheet-container {
  border: 3px solid black;
  border-radius: 3px;
}
.sheet-rolltemplate-attack .sheet-header, .sheet-rolltemplate-shipattack .sheet-header {
  background-color: var(--header-bg-color, #000);
  color: var(--header-text-color, #FFF);
  text-align: left;
  text-transform: capitalize;
  padding: 5px;
  border-bottom: 2px solid black;
  font-family: 'IM Fell English', serif !important;
}
.sheet-rolltemplate-attack .sheet-title,
.sheet-rolltemplate-attack .sheet-name, 
.sheet-rolltemplate-shipattack .sheet-title, 
.sheet-rolltemplate-shipattack .sheet-name{
  font-size: 1.4em;
  font-weight: normal;
}
.sheet-rolltemplate-attack .sheet-subtitle,
.sheet-rolltemplate-shipattack .sheet-subtitle {
  font-size: 1em;
  font-family: 'IM Fell English', serif !important;
    font-style: italic;
  
}
.sheet-rolltemplate-attack .sheet-container,
.sheet-rolltemplate-shipattack .sheet-container{
  --header-bg-color: #000;
  --header-text-color: #FFF;
  font-family: 'IM Fell English', serif !important;

}

.sheet-rolltemplate-attack .sheet-content,
.sheet-rolltemplate-shipattack .sheet-content{
  display: grid;
  background: #FFF;
  grid-template-columns: auto auto;
  line-height: 2em;
  font-size: 1.4em;
}
.sheet-rolltemplate-attack .sheet-content > div,
.sheet-rolltemplate-shipattack .sheet-content > div {
  padding: 5px;
}
.sheet-rolltemplate-attack .sheet-content .sheet-key,
.sheet-rolltemplate-shipattack .sheet-content .sheet-key {
  font-weight: normal;
  font-weight: normal;
  padding-right: 10px;
  text-align: right;
}

.sheet-rolltemplate-shipattack .sheet-content .sheet-fumble,
.sheet-rolltemplate-shipattack .sheet-content .sheet-crit{
  font-size: 0.7em;
  line-height: 1em;
  grid-column: span 2;
}

.sheet-rolltemplate-attack .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-attack .sheet-content :nth-child(4n) {
  background: #EEE;
}
.sheet-rolltemplate-shipattack .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-shipattack .sheet-content :nth-child(4n) {
  background: #EEE;
}
/*----------------- Dark Mode ------------------*/

body.sheet-darkmode button,
body.sheet-darkmode input,
body.sheet-darkmode optgroup,
body.sheet-darkmode select,
body.sheet-darkmode textarea,
body.sheet-darkmode .charsheet {
}
body.sheet-darkmode .btn,
body.sheet-darkmode .btn.btn-default {
	color: #F00;
	text-shadow: rgba(24,26,27,.75) 0px 1px 1px;
	background-color: #1e2021;
	background-image: linear-gradient(#181a1b, #26292b);
	border-color: #3e4446 #3e4446 #43494c;
	box-shadow: rgba(24,26,27,.2) 0px 1px 0px inset,rgba(0,0,0,.05) 0px 1px 2px
}

.sheet-rolltemplate-darkmode .sheet-key,
.sheet-rolltemplate-darkmode .sheet-fumble,
.sheet-rolltemplate-darkmode .sheet-crit  {
	color: #000;
}