/* Style sheet for Japan Club System */

/*********************************
	プログラム共通
**********************************/
@font-face
{
  font-family: 'websans';
  src:
        /**
        url(//test.japanclubgolf.com/fonts/TakaoPGothic.ttf) format('truetype'),
        url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
        **/
        url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
  font-display: swap;
}
@font-face
{
  font-family: 'websans';
  src:
        /**
        url(//test.japanclubgolf.com/fonts/TakaoPGothic.ttf) format('truetype'),
        url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff) format('woff'),
        **/
        url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.otf) format('opentype');
  font-display: swap;
  font-weight: bold;
}


BODY
{
	background: #ffffff;
	margin-top: 0px;
	font-family: websans, sans-serif;

	/**
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	**/
}


/*===== Display switching PC <--> Mobile =====*/
.pcOnly
{
	display: block;
}
.mobileOnly
{
	display: none;
}


/*===== Input boxes/buttons =====*/
input[type=text],
input[type=password],
input[type=reset],
input[type=submit],
input[type=button]
{
	font-size: inherit;
}

select
{
	height: 2em;
	font-size: inherit;
}


/*===== Tables =====*/
table
{
	border-collapse: collapse;
	font-size: inherit;
}
table th,
table td
{
	padding: 2px;
}

/* listing */
table.list
{
	padding: 0;
	/*
	border: solid 1px;
	*/
	font-size: inherit;
}
table.list td,
table.list th
{
	border: solid 1px #aaaaaa;
	padding: 2px;
	text-align: left;
}
table.list th
{
	background: #0000aa;
	font-weight: bold;
	color: white;
}

table.list tr.color-normal
{
	background-color: white;
}
table.list tr.color-selected
{
	background-color: #ddddff;
}

table.list#scorecard th,
table.list#scorecard td
{
	text-align: center;
	padding: 4px;
}


/* 共通設定 */
table td.center,
table th.center
{
	text-align: center;
}
table td.right,
table th.right
{
	text-align: right;
}



/* Player Info. */
table.playerinfo
{
	padding: 3px;
	font-size: inherit;
	border: solid 1px #aaccff;
}
table.playerinfo th
{
	text-align: right;
	background: #ddeeff;
	border: solid 1px #aaccff;
}
table.playerinfo td
{
	border: solid 1px #aaccff;
	width: 300px;
}


/* Info. */
table.info
{
	padding: 3px;
	font-size: inherit;
}
table.info th
{
	text-align: right;
	background: #eeeeee;
	border: solid 1px white;
	width: 190px;
}
table.info td
{
	border: solid 1px white;
}
table.info td input
{
	font-family: websans, monospace, sans-serif;
	background-color: #ffffdd;
}


/* for data entry */
table.dataentry
{
	padding: 3px;
	font-size: inherit;
}
table.dataentry th
{
	text-align: right;
	background: #eeeeee;
	border: solid 1px white;
	width: 180px;
}
table.dataentry td
{
	border: solid 1px white;
}
table.dataentry td input
{
	font-family: websans, monospace, sans-serif;
}


/* table without border */
table.noborder,
table.noborder th,
table.noborder td,
td.noborder
{
	border: none;
}


A
{
	color: blue;
	text-decoration: none;
	font-weight: bold;
}
A:hover
{
	background-color: wheat;
	background-color: #dddddd;
}

A.login
{
	color: white;
	font-weight: normal;
}
A.login:hover
{
	color: yellow;
	background: none;
}


div.contents
{
	display: block;
	position: relative;
	padding: 0;
	top: 0px;
}



/*********************************
	プログラムヘッダー
**********************************/
H1
{
	font-family: websans, sans-serif;
	font-size:		16pt;
	font-weight:	bold;
}

H2
{
	font-family: websans, sans-serif;
	font-size:		13pt;
	font-weight:	bold;
}

H2.japanese
{
	font-family:	websans, sans-serif;
}


/*********************************
	ページヘッダー
**********************************/
.bar_text
{
	font-weight:	bold;
}


#header
{   
	display: block;
	position: relative;
	width: 100%;
	/**
	height: 68px;
	**/
	height: auto;
	background-color: white;
	color: black;
	padding: 0;
	padding-top: 5px;
	top: 0px ;
	left: 0;
	z-index: 5;
}   
#header h1
{   
	position: relative;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 5px;
	color: black;
}   

#langselect_bar
{
	position: absolute;
	float: right;
	right: 10px;
	top: 15px;
}

#hambmenu
{
	display: none;
}

#testmode_msg
{
	display: block;
	position: absolute;
	top: 10px;
	left: 10px;
	border: solid 2px red;
	color: red;
	background-color: yellow;
	font-weight: bold;
	font-size: 14pt;
	padding: 5px;
}


/*******************************************
	ユーザー名・ログイン・ログアウトバー
********************************************/
#usernamebar
{
	position: relative;
	width: 100%;
	height: auto;
	padding-top: 2px;
	padding-bottom: 2px;
	background-color: #777777;	/* default bar color */
	font-size: 11pt;
}


/***********************
	ヘッダーメニュー
************************/
.menubar
{
    display: block;
    position: relative;
    top: 0px;
    bottom: 0px;
	margin: 0;
	padding: 0;
    left: 0;
    width: 100%;
    height: 30px;       /* specify menu height */
    font-size: 11pt;
    color: #ffffff;
    font-weight: normal;
    background-color: beige;
    z-index: 10;        /* this is to overlap over other contents */
}   

.menuitems,
.submenu
{
    display: block;
    position: absolute;
    top: 0;
	/*
    left: 0;
	*/
    padding: 0;
    margin: 0;
    text-align: left;
}
/**
.menuitems li.submenu_parent,
**/
.menuitems li
{
    position: relative;
    float: left;
    list-style: none;
    padding: 0;
    margin: 0;
	background-color: beige;      /* specify menu background color or image */
	border-right: solid 1px #ffffff;
	margin-left: 0;
}

.menuitems a
{
    display: block;
    width: 140px;       /* wdith of menu item */
    line-height: 30px;  /* use height of menu item */
    text-decoration: none;
    text-align: center;
	color: #0077EE;
	color: blue;
}
.menuitems a:hover
{
	background-color: #0077EE;
    color: white;
}
li a.selected
{
	background-color: #0077EE;
	color: white;
}

/*** 親メニューアイテムにhoverした時にサブメニューを表示させる ***/
.has_submenu:hover .submenu
{
	display: block;
}


#menu1 a		{ width: 100px; }
#menu3 a		{ width: 160px; }
#menu7 a  		{ width: 80px; color: red; }
#menu7 a:hover  { background-color:red; color: yellow; }

.submenu
{
    display: none;
    width: 100%;
    margin-top: 30px;   /* height of menu item */
}
.submenu li
{
	border: solid 1px #ffffff;
	margin-bottom: 0px;
}


/* Second sub-menu (NOT USED) */
.second
{
    margin-left: 101px;        /* specify width of menu width (no larger thant that) */
    margin-top: 0px;
}
.second li
{
	background-color: brown;
	background-color: #ffcc55;
	background-color: #cc9955;
}
.second a
{
	width: 290px;
	padding-left: 10px;
	text-align: left;
	color: black;
	color: white;
}
.second a:hover
{
	background-color: #cc9955;
	background-color: #ffcc55;
	color: black;
	color: white;
	color: brown;
}




/*********************************
	メンバー表
**********************************/
.eng
{
	font-family:	websans, sans-serif;
}

.eng_name
{
	font-weight:	bold;
}


/*********************************
	ログインBox
**********************************/
.loginbox
{
	margin-top: 3em;
	background: beige;
	border: solid 1px tan;
	font-size: inherit;
}

.box_title
{
	font-family:	websans, sans-serif;
	font-weight:	bold;
	background-color: #000099;
	color:			white;
}

.eng_title
{
	font-family:	websans, sans-serif;
}

.user_input
{
	font-family: websans, monospace, sans-serif;
	font-size: inherit;
}

.login_button
{
	font-family:	websans, sans-serif;
	font-weight:	bold;
	font-size: inherit;
}


/*********************************
	メンバーProfile変更
**********************************/
fieldset
{
	margin-left: 5px;
	margin-right: 5px;
	width: auto;
}

.sectionheader
{
	padding: 3px;
	color: blue;
	font-weight: bold;
}



/********************************************
	モバイルデバイス用	(width < 480px / 850px for tablet)
********************************************/
@media screen and (max-width: 849px)
{
	body
	{
		width: 100%;
		padding: 0;
		margin: 0;
		font-size: unset;
	}


	#langselect_bar
	{
		float: none;
		position: relative;
		top: 0;
		left: 0;
		height: 40px;
		line-height: 40px;
	}
	#langselect
	{
		float: right;
		margin-right: 3px;
	}


	/*** Hamburger Menu Icon ***/
	#hambmenu
	{
		display: block;
		position: fixed;
		top:  2px;
		left: 2px;
		width:  42px;
		height: 42px;
		cursor: pointer;
		z-index: 3;
		background: white;
	}
	#hambmenu span
	{
		display: block;
		position: absolute;
		width: 40px;
		border-bottom: solid 4px #333333;
		-webkit-transition:	.35s ease-in-out;
		-moz-transition:	.35s ease-in-out;
		transition:			.35s ease-in-out;
	}
	#hambmenu span:nth-child(1)	{ top: 5px; }
	#hambmenu span:nth-child(2)	{ top: 17px; }
	#hambmenu span:nth-child(3)	{ top: 29px; }
	#hambmenu.active  span:nth-child(1)
	{
		/* 1st span to -45 degrees */
		top: 18px;
		-webkit-transform:	rotate(-45deg);
		-moz-transform:		rotate(-45deg);
		transform:			rotate(-45deg);
	}
	#hambmenu.active  span:nth-child(2),
	#hambmenu.active  span:nth-child(3)
	{
		/* 2nd and 3rd span to 45 degrees */
		top: 18px;
		-webkit-transform:	rotate(45deg);
		-moz-transform:		rotate(45deg);
		transform:			rotate(45deg);
	}


	/*** メニューバーをmobileサイト用ではスライドメニューにする ***/
	.menubar
	{
		display: block;
		position: fixed;
		/** not needd when position is "fixed"
		float: left;
		**/
		background-color: transparent;
		top: 50px;
		width: auto;
		transition: 0.5s ease;
		-webkit-transform: translateX(-100%);	/** 左端から右へ表示させる **/
		transform: translateX(-100%);
		background-color: black;
		opacity:0.9;
		height: auto;
	}
	.menubar.open
	{
		/** CSS class .open is operated by JavaScript **/
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
	}
	.menuitems
	{
		position: relative;
		top: 0px;
	}
	.menuitems li
	{
		display: block;
		float: none;
		background-color: #555555;
		background-color: #000000;
		opacity: 0.8;
		border-top-style: solid;
		border-bottom-style: solid;
		border-width: 1px;
		border-color: #ffffff;
	}
	.menuitems a
	{
		text-align: left;
		padding-left: 10px;
		width: 100%;
		color: #ffffff;
	}
	.menuitems a:hover,
	.submenu a:hover
	{
	}

	.submenu
	{
		display: none;
		position: relative;
		margin-top: 1px;
		left: 0px;
		opacity: 1.0;
	}

	#menu1 a,
	#menu2 a,
	#menu3 a,
	#menu4 a,
	#menu5 a,
	#menu6 a,
	#menu7 a,
	#menu8 a
	{
		width: 180px;
		height: 50px;
		line-height: 50px;
	}


	#testmode_msg
	{
		top: 5px;
		left: auto;
		right: 5px;
	}


	#usernamebar
	{
		top: 0;
		height: 40px;
		line-height: 40px;
	}


	/*===== Display switching PC <--> Mobile =====*/
	.pcOnly
	{
		display: none;
	}
	.mobileOnly
	{
		display: block;
	}

	.mobileOnly table.info 
	{
		width: 100%;
	}
	.mobileOnly table.info th
	{
		text-align: left;
		background: #eeeeee;
		border: solid 1px white;
		width: 190px;
	}
	.mobileOnly table.info td
	{
		background: white;
	}
	.mobileOnly table.info td input
	{
		width: 100%;
	}

}