/****************** OUTSIDE pages styles only *****************/


.mainheader {
		background: linear-gradient(#72d4f2, #98ddf2);
		width:100%;
		text-align: center;
}

.wrapper {
  max-width: 1920px;
  margin: 0 auto; // to center your div.
}

img.mainuser {
  width: 25px;
  position:relative;
}

img.mainlogo {
  width: 250px;
  float: left;
  margin: 10px;
}

img.bluebullet {
  width: 18px;
  float: left;
  margin-right: 6px;
}

.clear {
 clear:both;	
}

span.highlight {
	background-color: yellow;
}

label {
	color:steelblue;
	font-weight:bold;
	padding:0px 0px 4px 0px;
	display:block;
}

div.urltext {
	text-align:center;
	color:gray;
}

div.col {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    display:inline-block;
}

div.indent {
	 padding-left: 0.8em;
	 padding-bottom: 0.4em;
}

div.form {
	width:375px;
	margin:0 auto;
	background:white;
	border:1px solid gainsboro;
	border-radius:3px;
	font-size:100%;  
}

div.addmember {
	border:1px solid gainsboro;
	background:white;
	font-size:100%;  
	padding: 3px;
	border-radius:3px;
}

/* If Screen Size goes below 375 pixels */
@media screen and (max-width: 375px) 
{
	div.form {
		width:100%;
	}
}

input.reginput {width:90%;}

div.field {
	margin:12px 30px 0px 30px;
}

div.fitem {
    white-space: nowrap;
    padding-right:10px;
}
div.row {
	font-size:90%;        
	display:block;
}

div.row:before, div.row:after {
	display:table;
	content: " ";
	box-sizing: border-box;
	clear:both;
}


div.hcap {
	margin-bottom: 2px;
	margin-top: 2px;
	margin-left:5px;
	color: steelblue;
	transition: all 2s linear;
}


ul.blue_bullet li {
    height: 19px;
    margin: 10px 0; /* not needed, just to add space between the li's */
    background: url('img/bullet.png') no-repeat left center;
    list-style: none; /* Get rid of the default bullet points */
    padding-left: 25px; /* Offsets the text. Needs to be at least the width of your image */
    line-height: 0px; /* Might have to play with this value a bit */
}


ul.small_list {
	font-size:90%;
}

ul.small_list li {
	font-style: italic;
	font-weight: bold;
}

ul.small_list_no_bold {
	font-size:90%;
}

ul.small_list_no_bold li {
	font-style: italic;
}

ol.small_list_no_bold {
	font-size:90%;
}

ol.small_list_no_bold li {
	font-style: italic;
}

/****************** Start of INSIDE pages *****************/

table.compsettings { margin-left:0px;width:95%;}
table.compsettings td:first-child {width: 650px;}
table.compsettings td:nth-child(2) {padding-left:10px;}
table.settings { margin-left:10px;width:95%;}
table.settings tr td:first-child {padding-right:30px;}
table.css-table 	{ border-collapse: collapse;}
table.css-table th	{ 
	text-align: center;
	font-size: 80%; 
	background:#eee; 
	padding:4px 12px 4px 4px; 
	border:1px solid darkslategray; 
}

table.css-table td	{ font-size: 85%; text-align: center; padding:3px 10px 3px 10px;  border:0px solid #ccc; border-bottom:1px solid #4cc;}

table.db-table 		{ width: 100%; border-collapse: collapse;}
table.db-table th	{ text-align: left;font-size: 80%; background:#eee; padding:4px 12px 4px 4px; border-left:0px solid #ccf; border-bottom:1px solid #4cc; border-top:1px solid #4cc;}
table.db-table td	{ font-size: 85%; padding:3px;  border:0px solid #ccc; border-bottom:1px solid #4cc;}

table.member-table 		{ width: 100%; border-collapse: collapse;}
table.member-table th	{ text-align: left;font-size: 80%; background:#eee; padding:4px 8px 4px 4px; border-left:0px solid #ccf; border-bottom:1px solid #4cc; border-top:1px solid #4cc;}
table.member-table td	{ font-size: 85%; padding:3px;  border:0px solid #ccc; border-bottom:1px solid #4cc;}
table.member-table tr:nth-child(even) {background: #ddd}
table.member-table tr:nth-child(odd) {background: #eee;}

table.comp-table 	{ width: 100%; border-collapse: collapse; }
table.comp-table th	{ text-align: left;font-size: 100%; background:#eee; padding:4px 10px 4px 4px; border-left:0px solid #ccf; border-bottom:1px solid #4cc; ; border-top:1px solid #4cc; }
table.comp-table td	{ font-size: 90%; padding:3px;  border-left:0px solid #ccc; border-bottom:1px solid #4cc; border-top: 1px solid #ccc; }
table.comp-table td.entry-status-cell { text-align: right; white-space: nowrap; }
.signed-up-badge { display: inline-block; padding: 3px 7px; border-radius: 5px; background: #218344; color: #fff; font-size: 85%; font-weight: bold; white-space: nowrap; }

table.points-table 	{ width: auto; border-collapse: collapse; }
table.points-table th	{ text-align: center;font-size: 100%; background: gray; color:whitesmoke; padding:4px 10px 4px 4px; border-left:0px solid #ccf; border-bottom:1px solid #4cc; ; border-top:1px solid #4cc; }
table.points-table td	{ text-align: center;font-size: 90%; padding:3px 30px; }
table.points-table tr:nth-child(even) {background: #eee}
table.points-table tr:nth-child(odd) {background: #ddd;}


table.tote-table 	{ white-space: nowrap; border-collapse: collapse; }
table.tote-table th	{ width: 24px; text-align: center;font-size: 100%; background:white; padding:6px 3px; border:1px solid #ccf; }
table.tote-table td	{ width: 24px; text-align: center; font-size: 90%;background:white; padding:6px 3px;  border:1px solid #4cc; }


.table-scroll {
	position: relative;
	width:100%;
	z-index: 1;
	margin: auto;
	overflow: auto;
  }

table.league-table 	{ 
	white-space:normal; 
	border-collapse:separate; 
	border-spacing: 0;
	border-width: 1px;
}

table.league-table th	{
	text-align:center;
	font-size: 90%; 
	background:skyblue; 
	padding:3px 8px; 
	border:1px solid rgb(66, 110, 110); 
}

table.league-table th:first-child {
	white-space:nowrap; 
	text-align:center;
	padding:3px 5px 3px 3px;
	width:42px;
	min-width:42px;
	box-sizing:border-box;
	position: -webkit-sticky;
	position: sticky;
	left: 0;
	  	z-index: 2;
}

table.league-table th:nth-child(2) {
	position: -webkit-sticky;
	position: sticky;
	width:200px;
	min-width:200px;
	left:42px;
	z-index:2;
}

table.league-table th:not(:first-child) { min-width:40px;}
table.league-table td { 
	text-align:center;
	font-size: 90%;
	background:white; 
	padding:3px 3px;  
	border:1px solid rgb(66, 110, 110); 
}
table.league-table td:first-child {
	text-align:center;
	width:42px;
	min-width:42px;
	box-sizing:border-box;
	position: -webkit-sticky;
	position: sticky;
	left: 0;
	z-index:1;
}

table.league-table td:nth-child(2) {
	position: -webkit-sticky;
	position: sticky;
	width:120px;
	min-width:120px;
	left:42px;
	z-index:1;
}

table.league-table th:first-child,
table.league-table th:nth-child(2) {
	background:skyblue;
}

table.league-table td:first-child,
table.league-table td:nth-child(2) {
	background:white;
}

table.league-table td:last-child {background:#ddd;font-weight: bold;}






table.start-table 	{ width: 100%; border-collapse: collapse; }
table.start-table th	{ text-align: left;font-size: 100%; background:#eee; padding:4px 10px 4px 4px; border-left:0px solid #ccf; border-bottom:1px solid #4cc; ; border-top:1px solid #4cc; }
table.start-table td	{ font-size: 90%; padding:3px; border-left:0px solid #ccc;  }

table.ssheet-table 	{ width: 100%; border-collapse: collapse; }
table.ssheet-table th	{ text-align: left;font-size: 100%; background:#; padding:6px; border-left:0px solid #ccf; border-bottom:1px solid #4cc; ; border-top:1px solid #4cc; }
table.ssheet-table td	{ font-size: 90%; padding:6px;  border-left:0px solid #ccc; border-bottom:1px solid #4cc; border-top: 1px solid #ccc; }
table.ssheet-table tr:nth-child(even) {background: #ddd}
table.ssheet-table tr:nth-child(odd) {background: #eee;}


table.halledit-table 	{ width: 100%; border-collapse: collapse; }
table.halledit-table th	{ text-align: left;font-size: 100%; background:#eee; padding:4px 10px 4px 4px; border-left:0px solid #ccf; border-bottom:1px solid #4cc; ; border-top:1px solid #4cc; }
table.halledit-table td	{ font-size: 90%; padding:3px;  border-left:0px solid #ccc; border-bottom:1px solid #4cc; border-top: 1px solid #ccc; }

table.roundhist-table 	{ width: 100%; border-collapse: collapse; }
table.roundhist-table th	{ text-align: left;font-size: 85%; background:#eee; padding:4px 10px 4px 4px; border-left:0px solid #ccf; border-bottom:1px solid #4cc; ; border-top:1px solid #4cc; }
table.roundhist-table td	{ font-size: 90%; padding:3px;  border-left:0px solid #ccc; border-bottom:1px solid #4cc; border-top: 1px solid #ccc; }

table.calc-table 	{ width: 100%; border-collapse: collapse; }
table.calc-table th	{ text-align: center;font-size: 85%; background:#eee; padding:4px; border-left:0px solid #ccf; border-bottom:1px solid #4cc; ; border-top:1px solid #4cc; }
table.calc-table td	{ text-align: center;font-size: 90%; padding:3px;  border-left:0px solid #ccc; border-bottom:1px solid #4cc; border-top: 1px solid #ccc; }


table.card-table 	{ border-collapse: collapse; display:block; overflow: auto; white-space: nowrap;}
table.card-table th	{ text-align: left; font-size: 100%; background:#eee; padding:2px 4px 2px 2px; border-left:0px solid #ccf; border-bottom:1px solid #4cc; ; border-top:1px solid #4cc; }
table.card-table td	{ text-align: center; width: 20px; font-size: 85%; background:#eee; border-left:0px solid #ccc; border-bottom:1px solid #4cc; border-top: 1px solid #ccc; }

table.key-table 	{ width: 340px; border-collapse: collapse;}
table.key-table th	{ text-align: left; background:#eee; padding:4px 10px 4px 4px; border-left:0px solid #ccf; border-bottom:1px solid #4cc; ; border-top:1px solid #4cc; }
table.key-table td	{ text-align: left; font-size: 85%; padding:1px 3px 1px 3px; background:#eee; border-left:0px solid #ccc; border-bottom:1px solid #4cc; border-top: 1px solid #ccc; }


table.ko-table 		{ border-collapse: collapse;  border-right:0px solid #ccc; border-bottom:0px solid #ccc;}
table.ko-table th	{ font-size: 100%;}
table.ko-table td	{ font-size: 90%; padding:2px; width: 15%;}

table.hall-table 	{ width: 100%; border-collapse: collapse; border: 2px solid black; border-radius: 4px;}
table.hall-table th	{ text-align: left;font-size: 100%; background:#eee; padding:6px 10px 6px 20px; border-left:0px solid #ccf; border-top:1px solid #4cc;}
table.hall-table td	{ font-size: 85%; padding:6px 0px 6px 20px;  border:0px solid #ccc; border-top:1px solid #4cc;}

table.detail-table {width: 100%;}
table.detail-table td {vertical-align:top;padding-right:20px;}
table.detail-table p {display:block;}
table.detail-table div {display:inline-block;font-size:90%;}
table.detail-table a {font-size:90%;}

table.home-table {width: 100%;}
table.home-table h3 {color:steelblue;margin: 4px 0px 25px 0px;}
table.home-table td	{border: 2px solid darkgray;background:white;border-radius: 10px;}

table.rules-table {width: 100%;margin-left:-2px;}
table.rules-table h3 {color:steelblue;margin: 0px 0px 25px 0px;}
table.rules-table td {border: 1px solid darkgray; background-color: rgb(237, 237, 237);border-radius: 2px;}

table.committee-table 		{ width: 100%;border-collapse: collapse;overflow:visible;}
table.committee-table th	{ text-align: left;font-size: 100%; background:#eee; padding:4px 12px 4px 4px; border-left:0px solid #ccf; border-bottom:1px solid #4cc; ; border-top:1px solid #4cc; }
table.committee-table td	{ font-size: 90%; padding:3px 5px 3px 5px; border:0px solid #ccc; border-bottom:1px solid #4cc;}

table.teetime-table 		{ width: 100%;border-collapse: collapse;overflow:visible;}
table.teetime-table th	{ text-align: left;font-size: 90%; background:#eee; padding:4px 12px 4px 4px; border-left:0px solid #ccf; border-bottom:1px solid #4cc; ; border-top:1px solid #4cc; }
table.teetime-table td	{ font-size: 90%; padding:3px 5px 3px 5px; border:0px solid #ccc; border-bottom:1px solid #4cc;}

.more_info {
	position: relative;
  }
  
  .more_info .title {
	  position: absolute;
	  top: 16px;
	  color: black;
	  background: rgb(202, 219, 255);
	  padding: 4px;
	  left: -72px;
	  white-space: nowrap;
	  z-index: 100;
	  border: 1px solid black;
	  border-radius: 3px;
  }

.headcol {
  position: absolute;
  width: 65px;
  left: 10px;
  /*border-top-width: 1px;*/
  /*only relevant for first row*/
  /* margin-top: 1px; */
  /*compensate for top border*/
}

.more_info2 {
	position: relative;
  }
  
  .more_info2 .title {
	  position: absolute;
	  top: -70px;
	  color: black;
	  background: rgb(202, 219, 255);
	  padding: 4px;
	  left: -150px;
	  white-space: nowrap;
	  z-index: 100;
	  border: 1px solid black;
	  border-radius: 3px;
  }

.headcol2 {
  position: absolute;
  width: 65px;
  left: 10px;
  /*border-top-width: 1px;*/
  /*only relevant for first row*/
  /* margin-top: 1px; */
  /*compensate for top border*/
}

table.ryder-table { 
	width: 100%;
	border-collapse: collapse; 	
}

table.ryder-table th {
	background:linear-gradient(darkslategray, black); 
	color: white;
	padding:4px 12px 4px 4px; border-radius:4px;
	font-weight: normal;
}
table.ryder-table th.matchtitle {
	background:rgb(22,62,53);
	color: white;
	font-weight: normal;
	font-size: large;
	border: 1px solid rgb(22,62,53);
	border-radius:0px;
}

table.ryder-table th.matchgap {
	opacity: 0.0;
	font-weight: normal;
	font-size: large;
	border: 1px solid;
	border: none;
	min-height:40px;
}

table.ryder-table th.ryderhead {
	border-radius:4px 4px 0px 0px;
}

table.ryder-table th.footer {
	border-radius:0px 0px 0px 4px;
}
table.ryder-table td {
	border-radius:2px;
	font-weight: normal;
}

table.ryder-table td.holesplayedfin {
	/*font-size: 115%; */
	/*font-size:200%;*/
	/*background:linear-gradient(gray, darkgray); */
	background:rgb(172, 167, 167);
	text-align:center;
	color: white;
	padding: 0px 4px;
	border-radius:0px;
	width: 7%;
	min-width:40px;
}
table.ryder-table td.holesplayed {
	/*font-size: 115%; */
	/*font-size:200%;*/
	background:linear-gradient(darkslategray, black); 
	text-align:center;
	color: white;
	padding: 0px 4px;
	border-radius:0px;
	width: 7%;
	min-width:40px;
}
table.ryder-table td.holesplayedzero {
	/*font-size: 115%; */
	/*font-size:200%;*/
	background:linear-gradient(white, whitesmoke, white);
	text-align:center;
	color:black;
	padding: 0px 4px;
	border-radius:0px;
	width: 7%;
	min-width:40px;
}

/*table.ryder-table td.namesize {
	font-size:150%;
}*/

table.ryder-table td {
	font-size:100%;
	/*font-size:150%;*/
}

table.ryder-table td.scoresize {
	font-size:115%;
	/*font-size:200%;*/
}

table.ryder-table td.bigscoresize {
	font-size:200%;
}

table.ryder-table td.left {
	text-align:left;padding-left:10px;
}
table.ryder-table td.right {
	text-align:right;padding-right:10px;
}

table.ryder-table td.whitename {
	background:linear-gradient(white, whitesmoke, white);color:black;
	padding-top:3px;
	padding-bottom:2px;
	border-radius:0px;
	width:35%;
}
table.ryder-table td.bluename {
	background:linear-gradient(royalblue, darkblue, royalblue);color:lavenderblush;
	padding-top:3px;
	padding-bottom:2px;
	border-radius:0px;
	width:35%;
}
table.ryder-table td.redname {
	background:linear-gradient(crimson, darkred, crimson);color:lavenderblush;
	padding-top:3px;
	padding-bottom:2px;
	border-radius:0px;
	width:35%;
}
table.ryder-table td.greenname {
	background:linear-gradient(rgb(209, 223, 209), rgb(127, 161, 127), rgb(125, 157, 125));color:white;
	padding-top:3px;
	padding-bottom:2px;
	border-radius:0px;
	width:35%;
}

table.ryder-table td.whitescore {
	background:linear-gradient(white, whitesmoke, white);color:black;
	border-radius:0px;
	width:10%;
}
table.ryder-table td.whitescoreblank {
	background:linear-gradient(white, whitesmoke, white);color:snow;
	border-radius:0px;
	width:10%;
}

table.ryder-table td.bluescore {
	background:linear-gradient(royalblue, darkblue, royalblue);color:lavenderblush;
	border-radius:0px;
	width:10%;
}
table.ryder-table td.redscore {
	background:linear-gradient(crimson, darkred, crimson);color:lavenderblush;
	border-radius:0px;
	width:10%;
}

table.ryder-table td.leftradius {
	border-radius:0px 0px 0px 0px;
}

table.ryder-table td.rightradius {
	border-radius:0px 0px 0px 0px;
}

/***** Ryder Cup Table Heading Styles *****/
table.ryder-table th.bottomleftradius {
	border-radius:0px 0px 0px 4px;
}

table.ryder-table th.bottomrightradius {
	border-radius:0px 0px 4px 0px;
}

table.ryder-table th.bluescore {
	background:linear-gradient(royalblue, darkblue, royalblue);color:lavenderblush;
	border-radius:0px;
}
table.ryder-table th.redscore {
	background:linear-gradient(crimson, darkred, crimson);color:lavenderblush;
	border-radius:0px;
	width:10%;
}
table.ryder-table td.greenscore {
	background:linear-gradient(rgb(209, 223, 209), rgb(127, 161, 127), rgb(125, 157, 125));
	color:white;
	border-radius:0px;
	width:10%;
}

table.ryder-table th.towin {
	background:linear-gradient(lightgray, whitesmoke, white);color:darkslategray;
	border-radius:4px;
	font-size:75%;
	
}
table.ryder-table th.teamname {
	font-size:115%;
}

table.ryder-table th.left {
	text-align:left;padding-left:10px;
}
table.ryder-table th.right {
	text-align:right;padding-right:10px;
}

.ryderfont 
{
	position:absolute;
	top:36px;
	left:26px;
	font-size:94%;
	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
	background-color: white;
	color:darkslateblue;
	text-align:center;
	width: 76px;
}

.ryderfontzoom
{
	position:absolute;
	top:48px;
	left:28px;
	font-size:82%;
	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
	background-color: white;
	color:darkslateblue;
	text-align:center;
	width: 100px;
}

table.ryder-table th.center {
	text-align:center;
}

table.ryder-table th.ryderpadheader {
	width:80px;border-radius: 0px 4px 0px 0px;
}

/****** RYDER EDIT TABLE ******/
table.ryderedit-table { 
	font-size: 12px; 
	width: 100%;
	border-collapse: collapse; 
}

table.ryderedit-table th {
	text-align: left;
	font-size: 100%; 
	background:#eee; 
	padding:4px 10px 4px 4px; 
	background:lightgray;
	/*border-left:0px solid #ccf; 
	border-bottom:1px solid #4cc; ; 
	border-top:1px solid #4cc;*/
}

table.ryderedit-table td {
	
	padding:2px;  
	border-left:0px solid #ccc; 
	border-bottom:1px solid #4cc; 
	border-top: 1px solid #ccc;
}

table.ryderedit-table input {
	font-size: 100%;
	height:26px;
}
 

/* This is the only way I can find to change the font size in a jquery chosen control */
/* Can't seem to change color though :-\ */
.chosen-single {
 	 font-size: 12px; 
 	 width:100%;
}

table.ryderedit-table th.blue {
	background:darkblue;
	color:white;
}

table.ryderedit-table th.red {
	background:crimson;
	color:white;
}




/******************************************* End of Ryder Cup Tables *******************/

div.adjustscores {
	border: 2px solid darkslategray;	
	background-color: snow;
	border-radius: 4px;
	padding-left: 8px;
}

p.scoreblock {
	padding: 6px 10px;
	margin-bottom:5px;
	border-radius:3px;
	position:relative;
	bottom:3px;
}

p.scoreblockblue {
	background:linear-gradient(royalblue, darkblue, royalblue);color:lavenderblush;
}
p.scoreblockred {
	background:linear-gradient(crimson, darkred, crimson);color:lavenderblush;
}
p.scoreblockwhite {
	background:linear-gradient(white, whitesmoke, white);color:black;
}

article {
    padding: 1em;
    padding-top: 0.2em;
    overflow: hidden;
}

article.flex {
    padding: 1em;
    padding-top: 0px;
    overflow: hidden;
}

article.rules {
    padding: 0.5em;
	padding-top: 0.2em;
    overflow: hidden;
}

@media screen and (max-width: 3000px) 
{
	/* table.ko-table 	{ width: 100%; }*/
}

@media screen and (max-width: 1200px) 
{
	/* table.ko-table 	{ width: 100%; }*/
}

@media screen and (max-width: 1000px) 
{
	/* table.ko-table 	{ width: 90%; } */
}

@media screen and (max-width: 800px) 
{
	/* table.ko-table 	{ width: 100%; } */ 
	/* table.ko-table td { white-space: normal;} */
}

@media screen and (max-width: 650px) 
{
	/* table.ko-table 	{ width: 100%; } */
	/* table.ko-table td { white-space: normal;} */
	
	table.register 	{ width: 100%; }
	table.register td { white-space: normal;}
	
	td.reginput {width: 100px;}
	
}



/* If Screen Size goes below 375 pixels */
/* Portrait */
@media only screen 
  and (max-width: 500px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait)
{
	.btn_hide_mobile {display: none; }
}

/* Landscape */
@media only screen 
  and (max-width: 940px) 
and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape)
{
	.btn_hide_mobile {display: none; }
}

/* If Screen Size goes below 375 pixels */
@media screen and (max-width: 375px) 
{
	table.home-table {width: 95%;}
	table.comp-table {width: 95%;}
	table.start-table {width: 95%;}
	article.flex { padding-left: 0.4em;}
	.hideinportrait {display:none;}
	
}

/* If Screen Size goes above 375 pixels */
@media screen and (min-width: 376px) 
{
	.hideinlandscape {display:none;}
}



/* If Screen Size goes above 600 pixels */
@media screen and (min-width: 600px) 
{
	table.hall-table {width: 600px;}
	table.detail-table {width: 100%;}
	div.adjustscores { width: 600px;}
}


/* If Screen Size goes above 800 pixels */
@media screen and (min-width: 800px) 
{
	table.settings 	{ width: 800px;}
	table.register { width:800px;}
	table.detail-table { width: 800px;}
}

/* If Screen Size goes above 1000 pixels */
@media screen and (min-width: 1000px) 
{
	table.comp-table 	{ width: 1000px;}
	button.long-more-button 	{ width: 1000px;}
	table.detail-table 	{ width: 1000px;}
	table.start-table 	{ width: 1000px;}
	table.home-table { width: 1000px;}
	table.committee-table { width: 970px;}
	table.ryder-table { width: 1000px;}
	.matchgraphrow { max-width: 1000px;}
	p.settingclose { width: 1000px;}
}


/* If Screen Size goes below 600 pixels */
@media screen and (max-width: 600px) 
{
	table.halledit-table{ width: 600px; }
	table.ryder-table th.ryderpadheader { display:none; }
}



html, body {
    height: 100%;
    margin: 0;
    background-color: whitesmoke;
}

body {
  font-family: Arial;
  font-size: 90%;
  font-style: normal;
}

/****************** HEADER related styles only *****************/

table.header, .adminheader, .headergen, .adminheadergen {
	width: 100%;
	border-collapse: collapse;
}

.adminheader {
		background: linear-gradient(#72d4f2, #98ddf2);
		text-align: right;
}

.adminheadergen {
	background: linear-gradient(#f0eebb, #dc9d8d);
	text-align: right;
}

.header {
	background: linear-gradient(#72d4f2, #98ddf2);
	text-align: right;
}

.headergen {
	background: linear-gradient(#f0eebb, #dc9d8d);
	text-align: right;
}

div.user {
	display: inline;
}

div.rounddate
{
	font-size: 65%;	
	font-weight: normal;
}
.roundheading {
	margin-top: 0px;
}

img.logo {
  float: left;
  height: 60px;
  width:auto;
  margin:3px 3px 3px 10px;
  
  /*position:relative; left: 20px;*/
}

img.logocustom1 {
	float: left;
	height: 78px;
	width:auto;
	margin-left:3px;
	margin-top:2px;
	margin-bottom:2px;
	/*position:relative; left: 20px;*/
  }

img.livelogo {
  float: right;
  width: 80px;
  padding:5px;
  margin:5px 20px 15px 10px;
  border:1px solid #15287A;
  /*position:relative; left: 20px;*/
}

img.user {
  width: 35px;
  cursor: pointer;
}

#title {
	position: inline;
	text-align: center;
	font-family: Arial, sans-serif;
	font-size: 180%;
	font-weight: bold;
	color:steelblue;
	/*text-shadow: 0 0 3px #FF0000;*/
	text-shadow: 1px 1px 2px steelblue;
}

@media screen and (max-width: 450px) 
{
	img.logo {
	  float: left;
	  height: 60px;
	  /*position:relative; left: 5px;*/
	  margin:0px 0px 0px 5px;
	}
	
	#title {
		font-size: 100%;
		padding: 15px 0px 16px 0px;
	}
}

@media print {
	.no-print, .no-print *
    {
        display: none !important;
    }
}
	
/********* NAVIGATION MENU related styles only *****************/


ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    clear: both;
    width:100%;
    /*top: 60px;*/
}

ul.topnav li{
    float: left;
}

.topnav a {
	font-family: Helvetica, Arial, sans-serif;
	color: #d8d8d8;
	text-decoration: none;
	display: inline-block;
    text-align: center;
    padding: 10px 12px;
    text-shadow: 0 1px 1px #000;
    font-weight: 300;
    background: #333;
}


li a.active {
    background-color: #555;
    color: white;
}

li a.burger {
	padding: 6px 6px 0px;
}

li a, .dropbtn {
    display: inline-block;
    text-align: center;
    text-decoration: none;
}



li a:hover, .dropdown:hover .dropbtn {
     color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  border-color: transparent;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: #d8d8d8;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
	 color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  border-color: transparent;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.icon {
  display: none;
  float: right;
}

/*@media screen and (max-width: 600px) {
  li:not(.act) {display: none;}
  li {float: none;display:inline;}
  li.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    float: right;
    right: 0;
    top: 0;
  }
  .topnav.responsive li {
    float: none;
    display: block;
    text-align: left;
  }
  
  .dropdown-content {
    bottom:0;
}*/

}



/***************** End of NAVIGATION MENU related styles ****************/

.boxhead a.linktext , a.playerlink {
    color: #FFFFFF;
    text-decoration: none;
}

a:link.linktext {
    color: purple;
    background-color: transparent; 
    text-decoration: none;
}

a:visited.linktext {
    color: purple;
    background-color: transparent;
    text-decoration: none;
}

a:hover.linktext {
    color: black;
    background-color: transparent;
    text-decoration: none;
}

a:link.playerlink {
    color: purple;
    background-color: transparent; 
    text-decoration: none;
}

a:visited.playerlink {
    color: purple;
    background-color: transparent;
    text-decoration: none;
}

a:hover.playerlink {
    color: black;
    background-color: transparent;
    text-decoration: none;
}

a:link.complink {
    color: cornflowerblue;
    background-color: transparent; 
    text-decoration: none;
}

a:visited.complink {
    color: cornflowerblue;
    background-color: transparent;
    text-decoration: none;
}

a:hover.complink {
    color: purple;
    background-color: transparent;
    text-decoration: none;
}


h1.logo {
	color: darkblue;
    text-align: center;
    font-style: italic;
}

h1.pagetitle {
	border-top: 1px solid gray;
	border-bottom: 1px solid gray;
	padding: 6px 0px 4px 0px;
	margin-top: 14px;
	margin-bottom:20px;
	color: steelblue;
	text-align: center;
    font-style: italic;
}

h3.pagesubtitle {
	padding: 6px 0px 4px 0px;
	margin-top: 14px;
	margin-bottom:20px;
	color: steelblue;
	text-align: left;
}

h3.nospace {
	margin-bottom: 4px;
}

h1.pagetitleadmin {
	border-top: 1px solid gray;
	border-bottom: 1px solid gray;
	padding: 6px 0px 4px 0px;
	margin-top: 14px;
	margin-bottom:20px;
	color: red;
	text-align: center;
    font-style: italic;
}

h3.yeartitle {
	margin-top: 18px;
	margin-bottom: 4px;
}

h4.selectname{
    display: inline-flex;
    width: 150px;
    margin-top: 12px;
    margin-bottom: 5px;
    overflow: hidden;
}

h4.selectnamelong{
    display: inline-flex;
    width: 250px;
    margin-top: 12px;
    margin-bottom: 5px;
    overflow: hidden;
}

h4.selectnamelong{
    display: inline-flex;
    width: 300px;
    margin-top: 12px;
    margin-bottom: 5px;
    overflow: hidden;
}

h1.comptitle {
	border-top: 1px solid gray;
	border-bottom: 1px solid gray;
	padding: 6px 0px 0px 0px;
	margin-top: 14px;
	margin-bottom: 0px;
	color: steelblue;
	text-align: center;
    font-style: italic;
}

/************* Paragraph Styles **************/

p {
	font-size:90%;
}

p.comprules {
	border-bottom: 1px solid gray;
	padding: 0px 0px 6px 0px;
	margin-top: 8px;
	margin-bottom: 14px;
	color: gray;
	text-align: left;
}

p.comprulesclose {
	border-bottom: 1px solid gray;
	padding: 0px 0px 6px 0px;
	margin-top: 0px;
	margin-bottom: 14px;
	color: gray;
	text-align: left;
}

p.instruction {
	color:black;
	font-style: italic;
	margin: 8px 0px 8px 0px;
	padding:5px;
	border:2px solid skyblue;
	border-radius: 3px;
}

p.message {
	color:black;
	margin: 8px 0px 8px 0px;
	padding:5px;
	border:8px solid red;
	border-radius: 3px;
}

p.banner {
	text-align: center;
	color: lightgray;
}

p.subsbanner {
	text-align: center;
	color: black;
	background-color: rgb(242, 242, 170);
	margin: 0px;
	padding: 6px;
	border-bottom: 1px solid lightgray;
}

p.renewbanner {
	text-align: center;
	color: black;
	background-color: rgb(242, 242, 170);
	margin: 0px;
	padding: 2px;
	border-bottom: 1px solid lightgray;
}

p.expiredbanner {
	text-align: center;
	color: black;
	background-color: red;
	margin: 0px;
	padding: 2px;
	border-bottom: 1px solid lightgray;
}

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


p.compsettingheader {
	margin-bottom: 2px;
	margin-top: 2px;
	margin-left:3px;
	color: black;
	font-weight:bold;
	display:inline;
}

p.compsetting {
	margin-top: 2px;
	margin-left:3px;
}

p.settingheader {
	margin-bottom: 2px;
	margin-top: 2px;
	margin-left:3px;
	color: steelblue;
	font-weight:bold;
}


p.setting {
	margin-top: 2px;
	margin-left:3px;
}

p.subtitle {
	margin:0px 0px 0px 0px;
	text-align: center;
	color: gray;
}

p.settingclose {
	margin-top: 2px;
	margin-bottom: 2px;
	font-size:80%;
	color:gray;
	text-align:center;
}

input.setting {
	font-size:90%;
	margin-bottom:6px;
	width: 100%;
}

input.hcapindex {
	width: 30px;
	border: none;
}

img.iconhdr {
  float: left;
  width: 40px;
  height: 40px;
  background: #555;
}

img.iconprize {
  width: 26px;
  height: 30px;
  position: relative;
  top: 5px;
  
}

h1.withicon {
  position: relative;
  color: #00CE00;
  top: 6px;
  left: 10px;
  margin: 5px;
}


header.society {
    padding: 1em;
    color: white;
    background-color: #990000;
    text-align: center;
    font-size: 200%;
    width: 100%;
}

    
header.admin {
    padding: 1em;
    color: white;
    background-color: lightblue;
    text-align: center;
    font-size: 200%;
    width: 100%;
}


form option.gray {
	color: gray;	
}

table.members {  
    color: #333; 
    width: 640px; 
    border-collapse: 
    collapse; border-spacing: 0; 
}

table.members td, table.members th { border: 1px solid #CCC; height: 30px; } 

table.members th {  
    background: #F3F3F3; 
    font-weight: bold; 
    padding: 10px;
}

table.members td {  
    background: #FAFAFA; 
    text-align: center; 
}

table.instr {
	table-layout: fixed;
 
}

table.instr th {
	background: lightgray; 
	font-weight: normal;
	text-align: left;
}

table.instr td {

	border: 1px solid red;
	padding: 8px;
	width: 50%;
}	

form.instr {
	text-align: top;
	margin-top: 10px;
	margin-left: 10px;
}

/***************************************************
************* BUTTONS ******************************
****************************************************/

input[type="button"]{ 
	-webkit-appearance: none;
	cursor: pointer;
    border-radius: 3px;
	border:none;
	padding: 5px 6px 5px 6px;
	font-size: 90%;
}

input.center {
	display:block;
	margin: auto;
}

input.left {
	float:left;
}

input[type="button"].white{
	background:white;
	color:black;
	border:1px solid darkslategray;
	touch-action: manipulation;
}

input[type="button"].blue{
	background:linear-gradient(steelblue, cornflowerblue);
	color:linen;
}
input[type="button"].smallblue{
	background:linear-gradient(steelblue, cornflowerblue);
	color:linen;
	padding: 4px 8px 4px 8px;
	font-size: 80%;
}

input[type="button"].smallgray{
	background:gainsboro;
	color:darkslategray;
	padding: 4px;
	margin-right:6px;
	font-size: 80%;
}

input[type="button"].gray{
	background:whitesmoke;
	color:darkslategray;
	padding: 4px;
	margin-right:6px;
	border: 1px solid darkgray;
	font-size: 90%;
}

input[type="button"].biggray{
	background:gainsboro;
	color:darkslategray;
	padding: 4px;
	margin-right:6px;
	font-size: 125%;
}

input[type="button"].bigblue{
	background:linear-gradient(steelblue, cornflowerblue);
	color:linen;
	margin: 4px 5px 15px 16px;
	font-size: 100%;
}

input[type="button"].smallred{
	background:linear-gradient(red, tomato);
	color:linen;
	padding: 4px 8px 4px 8px;
	font-size: 80%;
}

input[type="button"].bigred{
	background:linear-gradient(red, tomato);
	color:linen;
	margin: 4px 5px 15px 16px;
	font-size: 100%;
}


input[type="button"].green{
	background:linear-gradient(seagreen, mediumseagreen);
	color:linen;
}

input[type="button"].red{
	background:linear-gradient(red, tomato);
	color:linen;
}

input[type="button"].delete{
	background:lightgray;
	color:black;
}

input.blue,.green,.red:focus {
  outline: none;
}


input[type="submit"]{
	-webkit-appearance: none;
	background:linear-gradient(steelblue, cornflowerblue);
	color:linen;
	cursor: pointer;
    border-radius: 3px;
	border:none;
	padding: 5px 10px 5px 10px;
	font-size: 90%;
}

input[type="submit"].green{
	-webkit-appearance: none;
	background:linear-gradient(seagreen, mediumseagreen);
	color:linen;
}

input[type="submit"].biggreen{
	-webkit-appearance: none;
	background:linear-gradient(seagreen, mediumseagreen);
	color:linen;
	padding: 8px 12px 8px 12px;
	font-size: 100%;
}

input[type="submit"].bigupdate{
	-webkit-appearance: none;
	background:linear-gradient(steelblue, cornflowerblue);
	color:linen;
	padding: 8px 12px 8px 12px;
	font-size: 100%;
}

input:hover.blue, input:hover.green, input:hover.red {
	color:white;
}

input:hover.gray {
	color:black;
}

input:hover[type="submit"] {
	color:white;
}

input:hover[type="password"] {
	color:black;
}

button.instr {
	margin-left: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

input.redbtn {
	-webkit-appearance: none;
	background-color: red;
	color: white;
    padding: 6px 30px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    border: none;
}

input.bluebtn {
    -webkit-appearance: none;
    background-color: blue; 
	color: white;
    padding: 6px 30px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    border: none;
}

input[type="button"].btngraph {
	color: black;
	-webkit-appearance: none;
	background-color: white; 
    text-align: center;
    text-decoration: none;
    font-size: 90%;
	padding: 2px;
	font-weight:normal;
    cursor: pointer;
    border-radius: 4px;
	position:relative;
	border: 1px solid gray;
}

input[type="button"].resultbtnred {
	color: red;
	-webkit-appearance: none;
	background-color: white; 
    text-align: center;
	padding: 5px 8px ;
    text-decoration: none;
    font-size: 100%;
	font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
	position:relative;
	border: 1px solid gray;
	top: -12px;
}

input[type="button"].resultbtnblue {
    color: blue; 
	-webkit-appearance: none;
	background-color: white; 
    text-align: center;
	padding: 5px 8px ;
    text-decoration: none;
    font-size: 100%;
	font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
	position:relative;
	border: 1px solid gray;
	top: -12px;
	
}

input[type="button"].resultbtnblack {
    color: black; 
	-webkit-appearance: none;
	background-color: white; 
    text-align: center;
	padding: 5px 8px ;
    text-decoration: none;
    font-size: 100%;
	font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
	position:relative;
	border: 1px solid gray;
	padding:13px 12px;
	top: -4px;
}

.long-more-button {
  background-color: whitesmoke; /* Light gray */
  border: 2px solid rgb(59, 100, 165); /* Slightly darker gray border */
  color: rgb(59, 100, 165); /* Black text */
  padding: 8px 20px; /* Adjust padding for desired length */
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 5px; /* Optional: rounded corners */
  width:100%;
}
.long-more-button:hover {
	border-color:black;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}



/********************************/
/* RADIO BUTTONS 				*/
/********************************/

.colors ul{list-style:none; padding:0; margin: 0;}

.colors li{margin: 0 0 0 10px; display: inline-block;}

.colors label{
	color:black;
	font-size: 90%;
	font-weight: normal;
	cursor: pointer;
}

.colors input{display:none;}

.colors input[type="radio"]:checked + .swatch{border: 2px solid black;}

.swatch{
  display:inline-block;
  vertical-align: middle;
  height: 16px;
  width:16px;
  margin: 0 0px 0 0 ;
  border: 1px solid lightgray;
  border-radius: 3px;
  position:relative;bottom:2px;
}



/************ FILE UPLOAD **************/

.file-upload{display:block;text-align:center;font-family: Helvetica, Arial, sans-serif;font-size: 12px;}
.file-upload .file-select{
	display:block;
	border:1px solid gainsboro;
	color: #34495e;
	cursor:pointer;
	height:30px;
	line-height:30px;
	text-align:left;
	border-radius:4px;
	background:#FFFFFF;
	overflow:hidden;
	position:relative;
}

.file-upload .file-select .file-select-button{background:#dce4ec;padding:0 10px;display:inline-block;height:30px;line-height:30px;}
.file-upload .file-select .file-select-name{line-height:30px;display:inline-block;padding:0 10px;}


.file-upload .file-select:hover{border-color:#34495e;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload .file-select:hover .file-select-button{background:#34495e;color:#FFFFFF;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload.active .file-select{border-color:#3fa46a;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload.active .file-select .file-select-button{background:#3fa46a;color:#FFFFFF;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload .file-select input[type=file]{z-index:100;cursor:pointer;position:absolute;height:100%;width:200px;top:0;left:0;opacity:0;filter:alpha(opacity=0);}

.file-upload .file-select.file-select-disabled{opacity:0.65;}
.file-upload .file-select.file-select-disabled:hover{cursor:default;display:block;border: 2px solid #dce4ec;color: #34495e;cursor:pointer;height:40px;line-height:40px;margin-top:5px;text-align:left;background:#FFFFFF;overflow:hidden;position:relative;}
.file-upload .file-select.file-select-disabled:hover .file-select-button{background:#dce4ec;color:#666666;padding:0 10px;display:inline-block;height:40px;line-height:40px;}
.file-upload .file-select.file-select-disabled:hover .file-select-name{line-height:40px;display:inline-block;padding:0 10px;}

/************* END Of BUTTONS ***************/

input[type="password"]{
	background-color:white;
	color:black;
    border-radius: 4px;
    border: 1px solid gainsboro;
	padding: 3px 5px 3px 5px;
	font-size: 100%;
	-webkit-appearance: none;
	box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
}

input[type="text"]{
	-webkit-appearance: none;
	background-color:white;
	color:black;
    border-radius: 3px;
    border: 1px solid gainsboro;
	padding: 2px 5px 2px 5px;
	font-size: 100%;
	-webkit-appearance: none;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
}

input[type="narrowtext"]{
	-webkit-appearance: none;
	background-color:white;
	color:black;
    border-radius: 3px;
    border: 1px solid gainsboro;
	padding: 3px 0px 3px 0px;
	font-size: 100%;
	-webkit-appearance: none;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
}


select {
	background-color:white;
	color:black;
    border-radius: 4px;
	border:1px solid gainsboro;
	padding: 2px 5px 2px 5px;
	font-size: 90%;
}


input.rounddate {
	padding: 14px,4px,4px,4px;	
	margin-top: 2px;	
	margin-bottom: 15px;	
	/*background: #c1ffb7;*/
}

#btn_dates {
	margin-top: 2px;	
	margin-bottom: 15px;
}
input.mybtn1 {
	font-size: 16px;
	background-color: #4CAF50; 
    border-radius: 8px;
}

input.formtext {
	/*position:relative;
	display: inline;*/
	background-color: white;
	font-size: 90%;
}


textarea.formtext {
	background-color: white; 
	display:block;
	margin-left: 0px;
	font-family: Arial;
	font-size: 90%;
	font-style: normal;
	border:1px solid gainsboro;
	border-radius: 4px;
}

button.datebtn {
	display: inline;	
}
.compheading {
	font-family: Helvetica, Arial, sans-serif;
	color: #d8d8d8;
	text-decoration: none;
    padding: 2px 2px;
    text-shadow: 0 1px 1px #000;
    font-weight: 300;
    background: #333;
}

input.scorefield {
	-webkit-appearance: none; 
	cursor: default;
	border:none;
	padding: 2px 4px 2px 4px;
	border: 1px solid black;
	margin-top:4px;
	margin-bottom:4px;
	text-align:center;
	font-size:18px;
	border-radius:0px;
	min-width: 23px;
}

input.cardfield {
	-webkit-appearance: none; 
	padding: 0px 4px 0px 4px;
	margin-top:4px;
	margin-bottom:4px;
	text-align:center;
	font-size:12px;
}

input.numpad {
	-webkit-appearance: none; 
	padding: 8px 20px 8px 20px;
    background:#17AADF;
    color:#fff;
    font-size:20px;
    border:none;
    border-radius:3px;
    cursor:pointer;
    position:inline;
	touch-action: manipulation;
}

input.numpadext {
	-webkit-appearance: none; 
	display: none;
	padding: 8px 20px 8px 20px;
    background:#17AADF;
    color:#fff;
    font-size:20px;
    border:none;
    border-radius:3px;
    cursor:pointer;
    position:inline;
	touch-action: manipulation;
}

input.numpadgray {
	-webkit-appearance: none; 
	padding: 8px 20px 8px 20px;
    background:gray;
    color:#fff;
    font-size:20px;
    border:none;
    border-radius:3px;
    cursor:pointer;
    position:inline;
	touch-action: manipulation;
}


input.padkey {
	-webkit-appearance: none; 
	padding: 8px 10px 8px 10px;
    background:#17AADF;
    color:#fff;
    font-size:20px;
    border:none;
    border-radius:3px;
    cursor:pointer;
	touch-action: manipulation;
}

input.padenter {
	-webkit-appearance: none; 
	padding: 4px 12px 4px 12px;
    font-size:16px;
    cursor:pointer;
	touch-action: manipulation;
}

.diarybtn {
	display:inline;
	-webkit-appearance: none; 
	padding: 0px 10px 0px 10px;
    background:steelblue;
    color:#fff;
    font-size:20px;
    border-radius:3px;
    cursor:pointer;
	touch-action: manipulation;
};

.diaryyear {
	display:inline;
	font-size: 120%;
	margin: 0px 20px 0px 20px;
	touch-action: manipulation;
}

#circle {
	display:inline-block;
	vertical-align: bottom;
	margin-bottom: 2px;
	width: 10px;
	height: 10px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
    }
    
textarea {
    border: none;
    resize: none;
    width: 100%;
    -webkit-box-sizing: border-box; /* <=iOS4, <= Android  2.3 */
       -moz-box-sizing: border-box; /* FF1+ */
            box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}

/**************************************************
/*************** User Dropdown Menu ***************
/**************************************************/

#pdropdown { 
  display: block;
  padding: 4px 6px;
  width: 80px;
  position: relative;
  font-size:90%;
  /*cursor: pointer;*/
  /*border: 1px solid steelblue;*/
  /*background: #fff;*/
  /*color: #656565;*/
  /*font-weight: normal;*/
  /*-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);*/
  /*-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);*/
  /*box-shadow: 1px 1px 2px rgba(0,0,0,0.3);*/
  -webkit-transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
  -ms-transition: all 0.15s linear;
  -o-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
#pdropdown:hover { color: #898989; }

#pdropdown.open {
  /*background:white;*/
  /* color: #fff;*/
  /*border-left-color: #6c6d70;*/
}

#pdropdown ul { 
  position: absolute;
  top: 100%;
  right:20px;
  top: 30px;
  width: 160px;
  padding: 0px 0px;
  display: none;
  border: 1px solid lightblue;
  /*background: #fff;*/
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
   box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

#pdropdown ul li { list-style: none; text-decoration: none; }

#pdropdown ul li a { 
  text-decoration: none;
  text-align: left;
  text-shadow:none;
  display: block;
  color: black;
  padding: 10px 15px 10px 24px;
  background-color:whitesmoke;
}
#pdropdown ul li a:hover {
  color: #6fa0e9;
  background: #e7f0f7;
}

/**************************************************
/*********** Update Confirmation Dropdown *********
/**************************************************/

#cdropdown { 
  display: none;
  padding: 6px 20px;
  position: fixed;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  /*cursor: pointer;*/
  border-radius:5px;
  background: darkslategray;
  color:whitesmoke;
  font-weight: bold;
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,1);
  -moz-box-shadow: 1px 1px 2px rgba(0,0,0,1);
  box-shadow: 1px 1px 2px rgba(0,0,0,1);
  z-index: 99 !important;
}

#overlay {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
    opacity:0;
    z-index:1001;
    visibility: hidden;
    transition: visibility 0s, opacity 0.5s linear;
}
#overlay-message{
    position: fixed;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    background-color:whitesmoke;
    opacity:0;
    z-index:1002;
    visibility: hidden;
    transition: visibility 0s, opacity 0.5s linear;
}

/*************************************************************
/*************** Team Round Menu Dropdown Menu ***************
/*************************************************************/

.rdropdown { 
  display: block;
  padding: 4px 6px;
  /*width: 80px;*/
  position: relative;
  font-size:90%;
  /*cursor: pointer;*/
  /*border: 1px solid steelblue;*/
  /*background: #fff;*/
  /*color: #656565;*/
  /*font-weight: normal;*/
  /*-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);*/
  /*-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);*/
  /*box-shadow: 1px 1px 2px rgba(0,0,0,0.3);*/
  -webkit-transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
  -ms-transition: all 0.15s linear;
  -o-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
/*
.rdropdown:hover { color: #898989; }
*/
.rdropdown.open {
  /*background:white;*/
  /* color: #fff;*/
  /*border-left-color: #6c6d70;*/
}

.rdropdown ul { 
  position: absolute;
  top: 100%;
  right:20px;
  top: 30px;
  width: 160px;
  padding: 0px 0px;
  display: none;
  border: 1px solid lightblue;
  /*background: #fff;*/
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
   box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.rdropdown ul li { list-style: none; text-decoration: none; }

.rdropdown ul li a { 
  text-decoration: none;
  text-align: left;
  text-shadow:none;
  display: block;
  color: black;
  padding: 10px 15px 10px 24px;
  cursor:pointer;
  background-color:whitesmoke;
}

.rdropdown ul li a:hover{
  color: #6fa0e9;
  background: #e7f0f7;
}

.rdropdown img:hover{
  color: #6fa0e9;
  background: #e7f0f7;
}

div.parent {
	width: 200px;
	height: 200px;
	overflow: hidden;
	display: flex;
  }
  
  div.instruction {
	color:black;
	margin: 8px 0px 8px 0px;
	padding:5px;
	border:2px solid skyblue;
	border-radius: 3px;
}

/******************** Generic DIV container **********/

div#container {
  -webkit-transition: height 1s; /* For Safari 3.1 to 6.0 */
  transition: height 1s;
  height:0px;
}

div#container:hover {
  height: 20px;
}

div.ccontainer {
	-webkit-transition: height 0.5s; /* For Safari 3.1 to 6.0 */
	transition: height 0.5s;
	height:0px;
	padding-left:2px;
	overflow: hidden;
}

/******************** On / Off Switch ****************/

.onoffswitch {
    position: relative; width: 40px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    height: 18px; padding: 0; line-height: 18px;
    border: 2px solid #E3E3E3; border-radius: 18px;
    background-color: #FFFFFF;
    transition: background-color 0.3s ease-in;
}
.onoffswitch-label:before {
    content: "";
    display: block; width: 18px; margin: 0px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 20px;
    border: 2px solid #E3E3E3; border-radius: 18px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
    background-color: steelblue;
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
   border-color: steelblue;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
    right: 0px; 
}

.circular--portrait {
	position: relative;
	width: 150px;
	height: 150px;
	overflow: hidden;
	border-radius: 50%;
	vertical-align: middle
  }
  
  .circular--thumb {
	position: relative;
	width: 35px;
	height: 35px;
	overflow: hidden;
	border-radius: 50%;
	vertical-align: middle;
  }

  .circular--bigthumb {
	position: relative;
	width: 50px;
	height: 50px;
	overflow: hidden;
	border-radius: 50%;
	vertical-align: middle;
  }

  .circular--mediumthumb {
	position: relative;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 50%;
	vertical-align: middle;
  }

  .circular--portrait img {
	width: 100%;
	height: auto;
  }