/* Force web browser not to have default margins and paddings. Also set all elements to box-sizing: border-box so that elements SHOULD be the exact size specified */
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}

/* Force web browser not to display default appearance of the following types of input and button elements - eg: prevent Apple devices primarily from rounding the corners and displaying drop shadows etc */
input [type="text"], input [type="number"], input [type="date"], input [type="time"], button [type="button"] {
-webkit-appearance: none;
appearance: none;
border-radius: 0;
}

/* Set font family and default font size */
html, body, input, button {
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 300;
}

/* COLOURED PANEL */
div#panel {
padding: 0px 4px 4px 4px;
background-color: #ffffff;
text-align: center;
}

button { /* all buttons */
visibility: hidden;
}

div#captains_log {
visibility: hidden;
}

span.menu_icon {
width: 16px;
height: 16px;
vertical-align: middle;
display: inline-block;
background: url(icon_images/menu.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}

span.logo, span.blank, span.blank_large {
display: inline-block;
width: 12%;
height: 24px;
vertical-align: top; /* required so adjacent elements remain vertically aligned */
margin: 6px 0px;
}

span.blank_large {
width: 56%;
}

span.logo {
background: url(icon_images/skittle_icon.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
print-color-adjust: exact; /* -- used to force printing of background colors and images --*/
-webkit-print-color-adjust: exact; /* -- used to force printing of background colors and images --*/
}

input.match_info, input.match_date {
width: 44%;
height: 24px;
vertical-align: top; /* required so adjacent elements remain vertically aligned */
padding: 1px;
margin: 6px 0px;
border: 1px solid #000000;
border-radius: 0px;
background-color: transparent;
text-transform: capitalize;
color: #000000;
outline: none;
}

input.match_info::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #000000;
opacity: 1; /* Firefox */
}

input.pins_difference, input.pins_points {
width: 12%;
height: 24px;
font-size: 18px;
vertical-align: top; /* required so adjacent elements remain vertically aligned */
text-align: center;
padding: 1px;
border: none;
background-color: transparent;
color: #000000;
outline: none;
}

input.pins_difference {
font-size: 14px;
}

span.pins_points_text {
display: inline-block;
width: 52%;
height: 24px;
font-size: 18px;
vertical-align: top; /* required so adjacent elements remain vertically aligned */
text-align: center;
color: #000000;
}

p.set_text {
margin-bottom: 2px;
}

input.player_name, input.text_label, input.scoring_hidden, input.scoring, input.row_total, input.column_total, input.points_for_set, input.set_total {
height: 24px;
line-height: 24px;
vertical-align: middle;
background: #ffffff;
border-radius: 0px;
padding: 1px;
}

input.player_name::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
text-transform: capitalize;
color: #000000;
opacity: 1; /* Firefox */
}

input.column_difference_hidden, input.column_difference, input.column_difference_blank {
height: 18px;
line-height: 18px;
vertical-align: middle;
background: #ffffff;
border-radius: 0px;
padding: 1px;
font-size: 14px;
}

/* 4 common width properties */
input.player_name, input.points_for_set, input.column_difference_hidden, input.text_label {
width: 33.5%;
}

input.scoring, input.scoring_hidden, input.column_difference, input.column_total {
width: 9.1%;
}

input.row_total, input.set_total, input.column_difference_blank {
width: 11.9%;
}

/* common outline, and text align properties */
input.scoring, input.scoring_hidden, input.row_total, input.column_total, input.column_difference_hidden, input.column_difference, input.column_difference_blank, input.set_total, input.points_for_set {
text-align: center;
outline: none;
}

/* 6 border properties */
input.player_name, input.scoring, input.text_label {
border-top: 1px solid #bfbfbf;
border-left: 1px solid #bfbfbf;
border-right: none;
border-bottom: none;
}

input.row_total {
border-top: 1px solid #bfbfbf;
border-left: 1px solid #bfbfbf;
border-right: 1px solid #bfbfbf;
border-bottom: none;
}

input.points_for_set {
border-top: 1px solid #bfbfbf;
border-left: 1px solid transparent;
border-right: none;
border-bottom: 1px solid transparent;
}

input.column_total {
border-top: 1px solid #bfbfbf;
border-left: 1px solid #bfbfbf;
border-right: none;
border-bottom: 1px solid #bfbfbf;
}

input.set_total {
 border: 1px solid #bfbfbf;
}

input.scoring_hidden, input.column_difference_hidden, input.column_difference, input.column_difference_blank {
border: none;
}

/* UNCOMMON properties */
input.player_name {
text-transform: uppercase;
outline: none;
}

input.scoring {
text-align: center;
}

input.text_label {
color: #000000;
}

input.set_total {
color: #000000;
font-weight: 500;
background-color: #bfbfbf;
print-color-adjust: exact; /* -- used to force printing of background colors and images --*/
-webkit-print-color-adjust: exact; /* -- used to force printing of background colors and images --*/
}

/* To make these fields visible, TEMPORARILY REMOVE "display: none;" */
input.scoring_hidden {
display: none;
}

input.points_for_set {
text-align: left;
color: #000000;
}

/* HELP DIV */
div.help_content {
padding: 4px;
margin-top:10px;
border: 1px solid #a5a5a5;
border-radius: 8px;
}

p {
text-align: left;
font-weight: 300;
margin-bottom: 6px;
} 

p.tip {
background-color: #e6f2ff;
}

h1 {
font-size: 20px;
text-align: center;
color: #707070;
font-weight: 500;
margin-top: 14px;
margin-bottom: 6px;
}

h2 {
font-size: 18px;
text-align: center;
color: #007070;
font-weight: 500;
margin-bottom: 2px;
}

h3 {
font-size: 16px;
text-align: left;
color: #007070;
font-weight: 500;
}

span.new_tab_window {
width: 13px;
height: 13px;
vertical-align: text-top;
display: inline-block;
background: url(icon_images/new_tab_window.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}

a:link, a:visited {
color: #cc0000;
text-decoration: underline;
}

a:hover, a:active {
color: #707070;
}

a.jump:link, a.jump:visited { /* links that resemble buttons */
font-size: 14px;
width: 49%;
background-color: #e6f2ff;
color: #000000;
border: 2px solid #e6f2ff;
border-radius: 6px;
margin-bottom: 10px;
text-align: center;
line-height: 30px;
text-decoration: none;
display: inline-block;
}

a.jump:hover, a.jump:active {
font-size: 14px;
background-color: #ffffff;
}

div.modal, div#show_hide_buttons, div#menu {
display: none;
}

/* SCORECARD DIV */
div.signatures_outbound {
display: inline-block;
vertical-align: bottom;
width: 25%;
height: 51px;
line-height: 51px;
padding-left: 2px;
font-family: Inspiration, handwriting, cursive;
text-transform: capitalize;
font-size: 20px;
font-weight: 400;
color: #3333cc;
border-top: 2px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left:  none;
}

div#scorecard_preview {
visibility: visible;
}

div#scorecard_info {
display: none;
}

/* SCORECARD MAIN*/
div#sc_outer_container, div#sc_header, div.team_names {
border: 1px solid #000000;
padding: 2px;
}

div#sc_outer_container {
margin-top: 10px;
}

div#sc_header {
height: 76px;
padding-top: 6px;
}

div#sc_title {
display: inline-block;
width: 68%;
height: 30px;
line-height: 30px;
padding-left: 6px;
font-size: 16px;
font-weight: 500;
}

div#sc_date {
display: inline-block;
width: 32%;
height: 30px;
line-height: 30px;
padding-right: 6px;
font-size: 14px;
font-weight: 500;
}

div#sc_venue, div#sc_competition {
display: inline-block;
vertical-align: bottom;
width: 50%;
height: 20px;
line-height: 20px;
padding-left: 6px;
font-size: 14px;
font-weight: 500;
text-transform: capitalize;
}

div#sc_info {
display: inline-block;
vertical-align: bottom;
width: 100%;
height: 20px;
line-height: 16px;
text-align: center;
font-size: 12px;
font-weight: 500;
color: #3333cc;
}

div.team_names {
display: inline-block;
width: 50%;
height: 34px;
line-height: 34px;
padding-left: 6px;
font-size: 14px;
font-weight: 500;
text-transform: capitalize;
}

div.sc_labelA, div.sc_labelA1, div.sc_labelB, div.sc_labelC, div.sc_labelD {
display: inline-block;
height: 34px;
line-height: 34px;
vertical-align: bottom;
font-size: 14px;
font-weight: 500;
border-top: 1px solid #000000;
border-right: none;
border-bottom: 1px solid #000000;
border-left:  1px solid #000000;
}

div.sc_labelA, div.sc_labelA1 {
width: 20%;
padding-left: 6px;
}

div.sc_labelA1 {
border-top: 2px solid #000000;
border-bottom:  none;
}

div.sc_labelB {
width: 4%;
text-align: center;
}

div.sc_labelC {
width: 6%;
border-right: 1px solid #000000;
border-left:  2px solid #000000;
text-align: center;
}

div.sc_labelD {
width: 25%;
height: 51px;
padding-left: 6px;
line-height: 51px;
border-top: 2px solid #000000;
}

div.sc_dataA,  div.sc_dataB, div.sc_dataB1, div.sc_dataC, div.sc_dataC1 {
display: inline-block;
height: 34px;
vertical-align: bottom;
font-size: 14px;
border-top: 1px solid #000000;
border-right: none;
border-bottom:  none;
border-left:  1px solid #000000;
}

div.sc_dataA {
width: 20%;
padding-left: 1px;
line-height: 34px;
word-break: break-all;

}

div.sc_dataB, div.sc_dataB1 {
width: 4%;
line-height: 34px;
text-align: center;
}

div.sc_dataC, div.sc_dataC1 {
width: 6%;
line-height: 34px;
text-align: center;
border-right: 1px solid #000000;
border-left:  2px solid #000000;
}

div.sc_dataB1, div.sc_dataC1 {
border-top: 2px solid #000000;
}

div.sc_dataC1 {
font-weight: 500;
}

p#logo_text {
display: inline;
font-size: 13px;
}

/* --------------- @ MEDIA STARTS HERE --------------- */
@page {
margin: 5mm;
}
/* --------------- @ MEDIA ENDS HERE --------------- */