/* Colours for Reference:
Light Pink: #fde6d3
Dark Pink: #f8bd90
Orange: #ee752c
Shadow Grey: #3d3d29
*/

.charsheet.lang-sv .sheet-full{
    background-image: url("http://i.imgur.com/qzeYEFG.jpg");
}

/****** Divs ******/
/* Contains the whole page */
.sheet-wrapper {
    width: 750px;
    background-color: white;
    position: relative;
    font:14px/15px "Arial Black", Gadget, sans-serif;
    color: black;
}

/* Spans across the page (title) */
.sheet-full{
    position: relative;
    width: 100%;
    height: 140px;
    padding: 10px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    background-image: url("http://i.imgur.com/H11F7PS.jpg");
    background-repeat: no-repeat;
    background-size: 750px;
}

/* Creates the left hand column */
.sheet-left{
    float: left;
    width: 36%;
}

/* Creates the right hand column */
.sheet-right{
    float: right;
    width: 60%;
}

/* Rows */
.sheet-label,
.sheet-boxLight,
.sheet-boxDark,
.sheet-exp,
.sheet-boxInfo,
.sheet-boxInfoText,
.sheet-iconic,
.sheet-relation{
	width: 100%;
    padding: 5px;
	border-style: hidden solid solid solid;
    border-width: 1px;
    border-color: black;
    -webkit-box-shadow: 1px 1px 2px 0px #3d3d29;
    -moz-box-shadow: 1px 1px 2px 0px #3d3d29;
    box-shadow: 1px 1px 2px 0px #3d3d29;
	overflow: hidden;
}

/* Black and white background for headers */
.sheet-label{
    color: white;
    font-size: 15px;
    background-image: url("http://i.imgur.com/CDBj8fq.jpg");
}

/* Light pink rows */
.sheet-boxLight,
.sheet-boxInfo,
.sheet-boxInfoText,
.sheet-iconic,
.sheet-relation{
    background-color: #fde6d3;
}

/* Dark pink rows */
.sheet-boxDark{
    background-color: #f8bd90;
}

/* Div for experience */
.sheet-exp{ 
    background-color: #f8bd90;
    width: 100%;
}

/* Div for large checkboxes */
.sheet-boxChk{
    float: left;
    width: 10%;
    padding: 0px;
    margin: 0px;
}

/* Left information column on the right */
.sheet-leftCol{
    float: left;
    width: 45%;
}

/* Right information column on the right */
.sheet-rightCol{
    float: right;
    width: 50%;
}

/* Luck */
.sheet-luck{
    float: left;
    width: 50%;
}

/* Keeps divs position relative to the div on top, even if the top div expands downwards */
.sheet-clearfix::after{
    content: "";
    clear: both;
    display: table;
}

/****** Input Boxes ******/
/* Number input boxes */
.sheet-left input[type=number],
.sheet-right input[type=number]{
    text-align: center;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 15px;
    float: right;
    width: 50px;
    border-color: #3d3d29;
    -webkit-box-shadow: 1px 1px 2px 0px #3d3d29;
    -moz-box-shadow: 1px 1px 2px 0px #3d3d29;
    box-shadow: 1px 1px 2px 0px #3d3d29;
}

/* Number input boxes in right column */
.sheet-rightCol input[type=number],
.sheet-leftCol input[type=number]{
    border: none;
    background-color: #f8bd90;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 15px;
    width: 55%;
    text-align: center;
    box-shadow: none;
}

.sheet-rightCol input[type=number]{
    width:25%;
    float:left;
}

.sheet-items input[type=number]{
    width:12%;
    float:none;
}

/* Text input boxes */
.sheet-boxInfo input[type=text],
.sheet-items input[type=text],
.sheet-rightCol input[type=text],
.sheet-leftCol  input[type=text],
.sheet-iconic  input[type=text]{
	border: none;
    background-color: #f8bd90;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 15px;
}

/* Name input box */
.sheet-boxInfo input[type=text]{
    width: 80%;
    text-align: center;
    float: right;
}

/* Iconic item input box */
.sheet-iconic input[type=text]{
    width: 45%;
    text-align: center;
}

/* Small input boxes for age, luck, etc. */
.sheet-rightCol input[type=text],
.sheet-leftCol  input[type=text]{
    float: right;
    width: 55%;
}

/* Input boxes for items */
.sheet-items input[type=text]{
    float: none;
    width: 52%;
    text-align: left;
}

/* Input boxes for luck */
.sheet-luck input[type=number]{
    float: left;
    width: 50%;
    text-align: center;
}

/* Input boxes for repeating relationship fields */
.sheet-relation input[type=text]{
    float: left;
    margin-right: 5px;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 11px;
    color: black;
    border: none;
    background-color: #fde6d3;
    width: 25%;
    box-shadow: none;
}

/* Labels */
.sheet-boxInfo label,
.sheet-rightCol label,
.sheet-leftCol label,
.sheet-iconic label{
    float: left;
    margin-right: 5px;
    font-size: 11px;
    color: black;
    margin-bottom: 0px;
}

/* Lables for large input boxes for name, problem, etc. */
.sheet-boxInfo label{
	    width: 10%;
}

/* Lable for iconic item */
.sheet-iconic label{
	    width: 17%;
}

/* Lables for small input boxes for age, etc. */
.sheet-rightCol label,
.sheet-leftCol label{
    width: 35%;
}

/* Lables for luck */
.sheet-luck label{
    width: 20%;
    margin-right: 10px;
}

/****** Selection Boxes ******/
.sheet-boxInfo select{
    width: 55%;
    border: none;
    background-color: #f8bd90;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 11px;
    text-align: left;
    margin-bottom: 0px;
}

.sheet-iconic select,
.sheet-items select{
    width: 25%;
    border: none;
    background-color: #f8bd90;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 11px;
    text-align: left;
    margin-bottom: 0px;
}

/****** Text Areas ******/

.sheet-right textarea{
    width: 98%;
    height: 115px;
    resize: vertical;
    border: none;
    background-color: #f8bd90;
    margin-bottom: 0px;
}

.sheet-hideout textarea{
    width: 97%;
    height: 115px;
    resize: vertical;
    border: none;
    background-color: #f8bd90;
    margin-bottom: 0px;
}

.sheet-boxInfo textarea{
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 15px;
    float: right;
    width: 78%;
    height: 20px;
    margin-bottom: 0px;
}

.sheet-relation textarea{
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 15px;
    float: right;
    width: 70%;
    height: 20px;
    margin-bottom: 0px;
}

/****** Checkboxes ******/
.sheet-boxDark input[type=checkbox],
.sheet-boxLight input[type=checkbox],
.sheet-boxChk input[type=checkbox]{
    display: none;
    visibility: hidden;
}

.sheet-boxLight label,
.sheet-boxDark label{
    float: right;
    background: #ffffff;
    height: 20px;
    width: 20px;
    margin: 0px;
    padding: 0px;
    border: 1px solid #888;
    display: block;
    border-color: #3d3d29;
    -webkit-box-shadow: 1px 1px 2px 0px #3d3d29;
    -moz-box-shadow: 1px 1px 2px 0px #3d3d29;
    box-shadow: 1px 1px 2px 0px #3d3d29;
}

.sheet-boxChk label{
    float: clear;
    margin: 2px;
    background: #ffffff;
    height: 20px;
    width: 20px;
    padding: 0px;
    border: 1px solid #888;
    display: block;
    border-color: #3d3d29;
    -webkit-box-shadow: 1px 1px 2px 0px #3d3d29;
    -moz-box-shadow: 1px 1px 2px 0px #3d3d29;
    box-shadow: 1px 1px 2px 0px #3d3d29;
}

.sheet-boxLight input[type=checkbox]:checked ~ label,
.sheet-boxDark input[type=checkbox]:checked ~ label,
.sheet-boxChk input[type=checkbox]:checked ~ label{
    background: #ffffff url("https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Black_check.svg/600px-Black_check.svg.png") no-repeat right top;
    background-size: 100%;
}

/****** Focus Colour ******/
.sheet-boxInfo input:focus,
.sheet-boxInfo select:focus,
.sheet-right textarea:focus,
.sheet-iconic input:focus,
.sheet-iconic select:focus,
.sheet-relation textarea:focus,
.sheet-hideout textarea:focus{
    box-shadow: 0 0 10px 0px #ee752c;
    outline: 1px solid #ee752c;
}

.sheet-boxInfo input[type=number]:focus{
    border-color: #3d3d29;
    -webkit-box-shadow: 1px 1px 2px 0px #3d3d29;
    -moz-box-shadow: 1px 1px 2px 0px #3d3d29;
    box-shadow: 1px 1px 2px 0px #3d3d29;
    outline: none;
}

/****** Roll Buttons ******/
/* Roll buttons for attributes and skils */
.sheet-boxLight button[type=roll],
.sheet-boxDark button[type=roll]{   
    background-color: transparent;
    color: black;
    border: none;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 14px;
    line-height: 15px;
    background-image: none;
    text-shadow: none;
    box-shadow: none;
    padding: 0px;
    margin: 0px;
    font-weight: normal;
}

/* Changes the attributes and skills to orange while the mouse is hovering over them */
.sheet-boxDark button[type=roll]:hover,
.sheet-boxLight button[type=roll]:hover{
    color: #ee752c;
}

/****** Roll Templates ******/
/* Prevents the roll templates from showing on the character sheet */
.sheet-hidden {
    display: none;
}

/* Background image and container for the roll template */
.sheet-rolltemplate-simpleAtt .sheet-container,
.sheet-rolltemplate-simpleSkill .sheet-container,
.sheet-rolltemplate-simpleItem .sheet-container{
    width: 189px;
    height: 189px;
    padding: 0px;
    background: url(http://i.imgur.com/aDITA9m.png);
    background-size: 189px 189px;
    background-repeat: no-repeat;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
}

/* Title for the roll */
.sheet-rolltemplate-simpleAtt .sheet-rollType,
.sheet-rolltemplate-simpleSkill .sheet-rollType,
.sheet-rolltemplate-simpleItem .sheet-rollType{
    position: relative;
    width: 164px;
    padding: 15px 5px 0px 20px;
    font-size: 20px;
    color: #ee752c;
    font-weight: bold;
}

/* Character name */
.sheet-rolltemplate-simpleAtt .sheet-name,
.sheet-rolltemplate-simpleSkill .sheet-name,
.sheet-rolltemplate-simpleItem .sheet-name{
    width: 164px;
    padding: 0px 5px 5px 20px;
    font-size: 10px;
    font-weight: bold;
}

/* Calculated number of dice to roll */
.sheet-rolltemplate-simpleAtt .sheet-calc,
.sheet-rolltemplate-simpleSkill .sheet-calc,
.sheet-rolltemplate-simpleItem .sheet-calc{
    width: 164px;
    padding: 20px 5px 5px 20px;
    font-size: 14px;
    font-weight: bold;
}

/* Result of the roll */
.sheet-rolltemplate-simpleAtt .sheet-result,
.sheet-rolltemplate-simpleSkill .sheet-result,
.sheet-rolltemplate-simpleItem .sheet-result{
    position: absolute; 
    bottom: 0;
    width: 164px;
    padding: 5px 5px 40px 20px;
    font-size: 20px;
    font-weight: bold;
}

/* Removes Roll20 formatting around inline rolls */
.sheet-rolltemplate-simpleAtt .inlinerollresult,  
.sheet-rolltemplate-simpleSkill .inlinerollresult,
.sheet-rolltemplate-simpleItem .inlinerollresult{
    background-color: transparent;
    color: #000000;
    border: none;
}
 
/* Removes Roll20 formatting around critical successes */
.sheet-rolltemplate-simpleAtt .inlinerollresult.fullcrit,
.sheet-rolltemplate-simpleSkill .inlinerollresult.fullcrit,
.sheet-rolltemplate-simpleItem .inlinerollresult.fullcrit{
	color: #000000;
    border: none;
}

/* Removes Roll20 formatting around critical fails */ 
.sheet-rolltemplate-simpleAtt .inlinerollresult.fullfail,
.sheet-rolltemplate-simpleSkill .inlinerollresult.fullfail,
.sheet-rolltemplate-simpleItem .inlinerollresult.fullfail{
    color: #000000;
    border: none;
}

/* Removes Roll20 formatting around inline rolls */
.sheet-rolltemplate-simpleAtt .inlinerollresult.importantroll,
.sheet-rolltemplate-simpleSkill .inlinerollresult.importantroll,
.sheet-rolltemplate-simpleItem .inlinerollresult.importantroll{
	color: #000000;
    border: none;
}