/* 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;
}

/* TIMED MESSAGE */
div#timed_message {
position: absolute;
top: 39px;
left: 5%;
z-index: 2;
width: 90%;
padding: 6px;
background-color: #ffffff;
border-radius: 6px;
}

/* COLOURED PANEL */
div#panel {
padding: 0px 4px 4px 4px;
background: url(icon_images/tbc_logo.png);
background-repeat: no-repeat;
background-size: 40px 40px;
background-position: 50% 35%;
background-color: #007070;
text-align: center;
}

button { /* all buttons */
display: inline-block;
height: 30px;
cursor: pointer;
background-color: #005e5e;
color: #ffffff;
border: 2px solid #a5a5a5;
text-align: center;
}

button#show_menu  {
width: 100px;
margin-bottom: 6px;
margin-right: 6%;
border-top: none;
border-radius: 0px 0px 10px 10px;
}

button#hide_panel  {
width: 100px;
margin-bottom: 6px;
margin-left: 6%;
border-top: none;
border-radius: 0px 0px 10px 10px;
}

button#show_panel  {
position: absolute;
top: 0px;
right: 4px;
z-index: 1;
height: 28px;
width: 100px;
border-top: none;
border-radius: 0px 0px 10px 10px;
display: none;
}

button.swap_team  {
height: 28px;
width: 100px;
background-color: #005e5e;
color: #ffffff;
border-top: none;
border-radius: 0px 0px 10px 10px;
}

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;
}

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 #ffffff;
border-radius: 0px;
background-color: transparent;
text-transform: capitalize;
color: #ffffff;
outline: none;
}

input.match_info::placeholder , input.match_info_large::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #ffffff;
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: #ffffff;
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: #ffffff;
}

/* MENU */
div#menu {
display: none;
height: 196px;
background-color: #007070;
text-align: center;
}

div#menu_content {
height: 166px;
text-align: left;
}

button.navigation_short {
width: 55px;
margin: 10px;
border-radius: 10px;
}

button.navigation_long {
width: 100px;
margin: 10px;
border-radius: 10px;
}

button.close { /* also used to close modals */
width: 100px;
border-bottom: none;
border-radius: 10px 10px 0px 0px;
}

/* DIV SET1, SET2... etc */
div#set1, div#help, div#scorecard, div#captains_log {
padding: 10px 4px 0px 4px;
background-color: #ffffff;
display: none;
}

div#set1 {
	padding: 0px 4px 0px 4px;
}

div#set1 {
display: block;
}

/* SCORING (everything seen in div set1, div set2 etc) */
/* Note: points_for_set  and column_difference_hidden are merely used as spacers to ensure column_totals are aligned with the column of scorecard inputs */
/* common properties */
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: transparent; /* For browsers that do not support gradients */
background: linear-gradient(transparent, transparent); /* Standard syntax (must be last) */
border-radius: 0px;
padding: 1px;
}

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

input.column_difference_hidden, input.column_difference, input.column_difference_blank {
height: 18px;
line-height: 18px;
vertical-align: middle;
background: transparent; /* For browsers that do not support gradients */
background: linear-gradient(transparent, transparent); /* Standard syntax (must be last) */
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 cursor, 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;
cursor: none;
outline: none;
}

/* 6 border properties */
input.player_name, input.text_label, input.scoring {
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 #007070;
}

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

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

input.scoring {
text-align: center;
cursor: pointer;
}

input.set_total {
background-color: #007070;
color: #ffffff;
}

/* 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;
cursor: pointer;
}

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

span.arrow_up_white_small { /* background image for button#widget */
width: 15px;
height: 15px;
vertical-align: middle;
display: inline-block;
background: url(icon_images/arrow_up_white_small.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}

button#widget {
display: none;
height: 40px;
position: fixed; /* Fixed/sticky position */
bottom: 10px; /* Place the button near the bottom of the page */
right: 0px;
z-index: 10; /* Make sure it does not overlap */
border: none;
outline: none;
background-color: #ff0000;
color: #ffffff;
font-size: 15px;
cursor: pointer;
padding: 10px;
border-radius: 4px 0px 0px 4px;
}

/* MODALS */
/* Modal (background) */
div.modal {
display: none;
position: fixed;
z-index: 5;
padding-top: 10px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black with opacity */
}

/* MASK is only used in capatin's log*/
div#mask {
display: none;
position: absolute;
z-index: 4;
left: 0;
top: 250px;
width: 100%;
height: 1055px;
background-color: #ffffff;
}

/* Modal Content */
div.modal_content {
background-color: #ffffff;
margin: auto;
padding: 8px 8px 0px 8px;
color: #000000;
width: 94%;
border-radius: 6px;
}

/* Scoring buttons used in scoring modal */
button.score, button.score_spare {
width: 10%;
height: 30px;
line-height: 30px;
margin: 1.25%;
cursor: pointer;
background: #f7f7f7; /* For browsers that do not support gradients */
background: linear-gradient(#f7f7f7, #dddddd); /* Standard syntax (must be last) */
border: 1px solid #a5a5a5;
border-radius: 2px;
color: #000000;
}

button.score_spare {
color: #ff0000;
}

button.erase {
width: 22.5%;
height: 30px;
line-height: 30px;
margin: 1.5% 1.25%;
cursor: pointer;
background: #ffcccc; /* For browsers that do not support gradients */
background: linear-gradient(to right, #b3cce6 33%, #ffcccc 33%); /* Standard syntax (must be last) */
border: 1px solid #a5a5a5;
border-radius: 2px;
color: #000000;
}

/* SCORECARD DIV */
input.signatures_inbound {
line-height: 30px;
border: 1px solid #a5a5a5;
width: 55%;
height: 30px;
margin-bottom: 6px;
padding-left: 2px;
text-transform: capitalize;
color: #000000;
outline: none;
}

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: 12px;
font-weight: 400;
color: #3333cc;
border-top: 2px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left:  none;
}

input.signatures_inbound::placeholder {
opacity: 1; /* Firefox */
}

div#scorecard_preview {
visibility: hidden; /* visibility: visible; for testing*/
}

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

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: 8px;
font-weight: 500;
}

div#sc_date {
display: inline-block;
width: 32%;
height: 30px;
line-height: 30px;
padding-right: 6px;
font-size: 8px;
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: 8px;
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: 8px;
font-weight: 500;
color: #3333cc;
}

div.team_names {
display: inline-block;
width: 50%;
height: 34px;
line-height: 34px;
padding-left: 6px;
font-size: 8px;
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: 8px;
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: 8px;
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: 8px;
}

/* --------------- @ MEDIA STARTS HERE --------------- */
@media only screen and (min-width: 1025px) {
body {
	background-color: #efefef;
}

div#set1, div#set2, div#set3, div#help, div#panel, div#menu, div#scorecard, div#captains_log {
	width: 50%;
	margin: auto;
}

div.modal, div#mask {
	width: 50%;
	left: 25%;
}

div.modal_content {
	width: 70%;
}

div#timed_message {
	width: 30%;
	left: 35%;
}

button#show_panel  {
	position: absolute;
	top: 0px;
	right: 25%;
	margin-right: 4px;
	 z-index: 1;
	width: 100px;
	border-top: none;
	border-radius: 0px 0px 10px 10px;
	display: none;
}
}

@media only screen and (min-width: 900px) and (max-width: 1024px) {
body {
	background-color: #efefef;
}

div#set1, div#set2, div#set3, div#help, div#panel, div#menu, div#scorecard, div#captains_log {
	width: 70%;
	margin: auto;
}

div.modal, div#mask {
	width: 70%;
	left: 15%;
}

div.modal_content {
	width: 70%;
}

div#timed_message {
	width: 40%;
	left: 30%;
}

button#show_panel  {
	position: absolute;
	top: 0px;
	right: 15%;
	margin-right: 4px;
	 z-index: 1;
	width: 100px;
	border-top: none;
	border-radius: 0px 0px 10px 10px;
	display: none;
}
}

@media only screen and (max-width: 359px) {
input.match_info, input.match_info_large, input.match_date, input.player_name, input.text_label, input.scoring, input.row_total, input.column_total, input.set_total, input.points_for_set, p {
	font-size: 14px;
}
}

@media only screen and (orientation: landscape) and (min-width: 567px) {
input.player_name, input.text_label, input.scoring, input.row_total, input.column_total, input.set_total, input.points_for_set {
	font-size: 16px;
}
}
/* --------------- @ MEDIA ENDS HERE --------------- */