/* ---------------------------------   FONT:    FAMILY / STYLE , and GENERAL  --------------------------------- */
body {
	font-family: Tahoma, Geneva, sans-serif;
}
input, textarea, .date {
	font-family: "Lucida Console", Monaco, "Courier New", monospace;
}
.note {
	font-style: italic;
}
input:hover, textarea:hover {
	cursor: text;
}

/* ---------------------------------   LAYOUT   --------------------------------- */
#bg_main {
	width: 1200px;
	min-height: 1000px;     /* enables the vertical scroll bar to stay visible all of the time  */
}
/* ------   Page Header   ------ */
#page_header figure {
	float: left;
}
#page_header aside {
	float: right;
	text-align: right;
	min-width: 250px;
	min-height: 75px;
}
#page_header hgroup {
	float: left;
}
/* ------   Main Section   ------ */
#main {
	clear: both;
}
#course_details hgroup, #nine_hole_scores hgroup {
	float: left;
}
#course_details_tees {
	float: right;
}
#course_details header, #nine_hole_scores header {
	clear: both;
}

/* ------   Pop / Msg   ------ */
#bg_pop, #bg_msg {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
}
#pop_wrap, #msg_wrap {
	position: fixed;
	width: 200%;
	height: 100%;
	left: 0px;
	top: 0px;
}
#pop_wrap > div, #msg_wrap > div {
	position:absolute;
	left:25%;
	top:50%;
	-webkit-transform:translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform:translate(-50%,-50%);
	max-height: 95%;
}
#edit_profile article {
	clear: both;
	float: left;
}
#edit_profile footer {
	clear: both;
}
#edit_profile aside {
	float: right;
}
#edit_profile .note {
	margin-top: -6px;
}
/* ---------------------------------  COLORS   --------------------------------- */
body {
	background-color: hsl(170, 100%, 97%);
}
/* --- Page Header, Nav and Main   --- */
#bg_main {
	color: hsl(170, 100%, 20%);
}
#bg_main thead, #bg_main tbody {
	border-color: hsl(170, 100%, 30%);
}
#bg_main button, nav li.off, #bg_main label, #bg_main td.click {
	background-color: hsl(170, 100%, 90%);
	color: hsl(170, 100%, 20%);
}
#bg_main button:hover, nav li.off:hover, #bg_main label:hover, #bg_main td.click:hover {
	background-color: hsl(170, 75%, 80%);
}
nav li.on, #bg_main input:checked + label{
	background-color: hsl(170, 100%, 25%);
	color: hsl(170, 100%, 95%);
}
/* ---   Send Email   --- */
#email_instruct span {
	background-color: hsl(170, 100%, 25%);
	color: hsl(170, 100%, 97%);
}
/* ---   Popups and Messages   --- */
#bg_pop, #bg_msg {
	opacity: 0.5;
	background-color: hsl(210, 100%, 60%);
}
#pop_wrap, #msg_wrap {
	color: hsl(210, 100%, 30%);
}
#pop_wrap > div, #msg_wrap > div {
	background-color:hsl(210, 80%, 95%);
	border-color: hsl(210, 80%, 30%);
	color: hsl(210, 100%, 35%);
}
#pop_wrap header, #msg_wrap header {
	background-color: hsl(210, 80%, 30%);
	color: hsl(210, 80%, 98%);
}
#pop_wrap footer, #msg_wrap footer {
    color: hsl(210, 80%, 20%);
}
#pop_wrap table button, #edit_profile aside button {
	background-color: hsl(35, 100%, 90%);
	color: hsl(35, 100%, 15%);
	border-color: hsl(35, 100%, 25%);
}
#pop_wrap table button:hover, #edit_profile aside button:hover {
	background-color: hsl(35, 100%, 25%);
	color: hsl(35, 100%, 90%);
}

/* ---   Tee Colors   --- */
.STD + label, .BLACK + label, .BLUE + label, .GREEN + label, .GREY + label, .ORANGE + label, .RED + label, .WHITE + label, .YELLOW + label {
	border: 5px solid hsl(210, 80%, 95%);
}
.STD + label, #pop_wrap footer button, #msg_wrap footer button, .STD {
	background-color: hsl(210, 80%, 88%);
	color: hsl(210, 100%, 30%);
}
.STD + label:hover, #pop_wrap footer button:hover, #msg_wrap footer button:hover, .STD:hover {
	background-color: hsl(210, 80%, 70%);
}
.STD:checked + label {
	color: hsl(210, 100%, 95%);
	background-color: hsl(210, 100%, 35%);
	border-color: hsl(210, 100%, 35%);
}
.BLACK + label {
	background-color: hsl(0, 0%, 30%);
	color: hsl(0, 0%, 100%);
}
.BLACK + label:hover {
	background-color: hsl(0, 0%, 60%);
	border-color: hsl(0, 0%, 60%);
	color: hsl(0, 0%, 0%);
}
.BLACK:checked + label {
	background-color: hsl(0, 0%, 10%);
	border-color: hsl(0, 0%, 10%);
	color: hsl(0, 0%, 100%);
}
.BLUE + label {
	background-color: hsl(210, 80%, 55%);
	color: hsl(210, 80%, 100%);
}
.BLUE + label:hover {
	background-color: hsl(210, 80%, 70%);
	border-color: hsl(210, 80%, 70%);
	color: hsl(210, 80%, 30%)
}
.BLUE:checked + label {
	background-color: hsl(210, 80%, 40%);
	border-color: hsl(210, 80%, 40%);
	color: hsl(210, 80%, 100%);
}
.GREEN + label {
	background-color: hsl(120, 80%, 55%);
	color: hsl(120, 80%, 100%);
}
.GREEN + label:hover {
	background-color: hsl(120, 80%, 70%);
	border-color: hsl(120, 80%, 70%);
	color: hsl(120, 80%, 15%)
}
.GREEN:checked + label {
	background-color: hsl(120, 100%, 30%);
	border-color: hsl(120, 100%, 30%);
	color: hsl(120, 80%, 100%);
}
.GREY + label {
	background-color: hsl(0, 0%, 80%);
	color: hsl(0, 0%, 0%);
}
.GREY + label:hover {
	background-color: hsl(0, 0%, 50%);
	border-color: hsl(0, 0%, 50%);
	color: hsl(0, 0%, 100%)
}
.GREY:checked + label {
	background-color: hsl(0, 0%, 60%);
	border-color: hsl(0, 0%, 60%);
	color: hsl(0, 0%, 0%);
}
.ORANGE + label {
	background-color: hsl(24, 100%, 55%);
	color: hsl(24, 100%, 100%);
}
.ORANGE + label:hover {
	background-color: hsl(24, 100%, 70%);
	border-color: hsl(24, 100%, 70%);
	color: hsl(24, 100%, 30%)
}
.ORANGE:checked + label {
	background-color: hsl(24, 100%, 40%);
	border-color: hsl(24, 100%, 40%);
	color: hsl(24, 100%, 100%);
}
.RED + label {
	background-color: hsl(0, 100%, 55%);
	color: hsl(0, 100%, 100%);
}
.RED + label:hover {
	background-color: hsl(0, 100%, 70%);
	border-color: hsl(0, 100%, 70%);
	color: hsl(0, 100%, 30%)
}
.RED:checked + label {
	background-color: hsl(0, 100%, 40%);
	border-color: hsl(0, 100%, 40%);
	color: hsl(0, 100%, 100%);
}
.WHITE + label {
	background-color: hsl(0, 0%, 65%);
	color: hsl(0, 0%, 100%);
}
.WHITE + label:hover {
	background-color: hsl(0, 0%, 80%);
	border-color: hsl(0, 0%, 80%);
	color: hsl(0, 0%, 30%)
}
.WHITE:checked + label {
	background-color: hsl(0, 0%, 100%);
	border-color: hsl(0, 0%, 100%);
	color: hsl(0, 0%, 0%);
}
.YELLOW + label {
	background-color: hsl(60, 100%, 70%);
	color: hsl(60, 100%, 30%)
}
.YELLOW + label:hover {
	background-color: hsl(60, 70%, 55%);
	border-color: hsl(60, 70%, 55%);
	color: hsl(60, 80%, 30%);
}
.YELLOW:checked + label {
	background-color: hsl(60, 100%, 80%);
	border-color: hsl(60, 100%, 80%);
	color: hsl(60, 100%, 0%);
}


/* -------------------------------    SPECIFICS   -   FONT: SIZE / WEIGHT   -   MARGIN / PADDING / ALIGNMENT   -   BORDERS    --------------------------------- */
* {
	margin: 0px;
	padding: 0px;
}
*:not(th) {
	font-weight: 450;
}
table {
	border-collapse: collapse;
	margin-left: auto;
	margin-right: auto;
}
th {
	font-weight: 600;
	padding: 10px 14px;
}
td {
	text-align: center;
	padding: 6px 14px;
}
td.num, td.date {
	text-align: right;
}
.tight {
	padding: 3px 2px;
}
.title {
	text-align: left;
}
input, textarea {
	font-size: 18px;
	padding: 4px;
}
/* ---------------------------------  Buttons --------------------------------- */
button.small, span.small {
	border-width: 0px 0px 1px 0px;
	border-radius: 2px;
	font-size: 14px;
	padding: 3px;
}
button.large, td.large, #pop_wrap footer button, #msg_wrap footer button {
	border-width: 1px;
	border-radius: 4px;
	font-size: 16px;
	padding: 4px;
}
#pop_wrap table button, #edit_profile aside button {
	padding: 4px 6px;
	border-radius: 3px;
	border-width: 1px;
	font-weight: 500;
	font-size: 14px;
}
/* ---------------------------------  Menus --------------------------------- */
nav {
	clear: both;
}
#menu_1, #menu_2 {
	border-bottom-style: double;
	border-bottom-width: 4px;
	margin: 12px 0px 20px 0px;
}
#menu_1 {
	display: block;
	float: left;
	clear: both;
}
#menu_2 {
	display: block;
	float: right;
}
nav li {
	list-style: none;
	border-radius: 3px 3px 0px 0px;
	padding: 5px 10px;
	font-size: 16px;
	display: inline-block;
}
/* ---------------------------------  Page Header --------------------------------- */
#username {
	font-size: 24px;
	margin-top: 12px;
}
#page_header button {
	margin-top: 11px;
	margin-left: 8px;
}
#page_header hgroup h1 {
	font-size: 40px;
	padding-left: 15px;
}
#page_header hgroup h2 {
	font-size: 20px;
	margin-top: 5px;
	padding-left: 19px;
}
/* ---------------------------------  Main Section --------------------------------- */
#bg_main {
	margin: 15px auto;
}
#main h1, #main h2, #main h3, #main header, #main footer, #main table, #main textarea {
	margin-top: 10px;
	margin-bottom: 10px;
}
#main thead:not(.no_border), #main tbody:not(.no_border) {
	border-width: 2px;
	border-style: solid;
}
#main tr.new_group {
	border-top-width: 1px;
	border-top-style: solid;
}
#main label {
	padding: 4px;
	margin-left: 4px;
}
/* -----------------  Course List --------------- */
#course_list_table {
    border-collapse: separate;
    border-spacing: 20px 15px;
}
/* -----------------  Course Details --------------- */
#course_details hgroup button, #email_users_lists button {
	position: relative;
	top: -5px;
}

/* -----------------  Send Email --------------- */
#email_instruct span {
	padding: 0px 6px 2px 6px;
	border-radius: 16px;
	margin-left: 10px;
}
#email .note {
	text-align: right;
}
#email_users_lists table {
    border-collapse: separate;
    border-spacing: 0px 5px;
}
#email_users_lists td {
	text-align: left;
}
/* -----------------  Invitations --------------- */
#invite footer button, #email_users_lists button {
	margin-right: 12px;
	margin-left: 12px;
}

/* ---------------------------------  Pop / Msg --------------------------------- */
#pop_wrap > div, #msg_wrap > div {
	border-width: 3px;
	border-style: solid;
	font-size: 18px;
}
#pop_wrap header, #msg_wrap header {
	margin: 0px;
	padding: 10px;
	text-align: center;
	font-size: 24px;
}
#pop_wrap footer, #msg_wrap footer {
    margin: 0px;
    padding: 10px 20px 15px 10px;
    text-align: right;
}
#pop_wrap h1 {
	font-size: 24px;
}
#edit_score h1 {
	padding: 15px 0px 0px 15px;
}
#edit_tee h1 {
	padding: 15px 0px 15px 15px;
}
#pop_wrap article, #msg_wrap article {
	padding: 12px;
}
#pop_wrap > div > table:not(#edit_score table) {
	margin-top: 12px;
	margin-bottom: 12px;
}
#edit_score table {
	margin-top: -10px;
	margin-bottom: 12px;
}
#pop_wrap p {
	padding: 6px;
}
#edit_score thead td {
	padding: 1px 4px;
}
#edit_profile aside {
	float: right;
	margin-top: 20px;
	margin-right: 20px;
}