/* base */

* {
	font-family:sans-serif;
	font-size:15px;
}

body {
	background-color:#f7f0d4;
	margin:0;
}

button {
	background:#e0e0e0;
	border:solid 1px #a0a0a0;
	border-radius:8px 8px 8px 8px;
	box-shadow:1px 1px 1px rgba(0,0,0,0.5);
	height:24px;
}

button:hover,
button:focus {
	color:black;
	background-color:#f4e8c0;
}

hr {
	display:block;
	width:100%;
	padding:0 0;
	margin:1 0;
	border:none;
}

input[type="file"] {
	display:none;
}

.file-button {
	background:#e0e0e0;
	border:solid 1px #a0a0a0;
	border-radius:8px 8px 8px 8px;
	box-shadow:1px 1px 1px rgba(0,0,0,0.5);
	width:150px;
	height:22px;
	margin:0 4;
	text-align:center;
	vertical-align:baseline;
}

.file-button:hover,
.file-button:focus {
	color:black;
	background-color:#f4e8c0;
}

.input {
	border-color:#c0c0c0;
	border-style:solid;
	border-width:1px;
	border-radius:8px;
	background-color:white;
	padding:4px 10px;
	text-align:left;
	vertical-align:middle;
	box-shadow:2px 2px 2px rgba(0,0,0,0.5);
}

.input:disabled {
	background-color:#e8e8e8;
}

.btn {
	border-color:#a0a0a0;
	border-style:solid;
	border-width:1px;
	border-radius:8px;
	background-color:#f7f0d4;
	color:#505050;
	padding:4px 10px;
	text-align:center;
	vertical-align:middle;
	box-shadow:2px 2px 2px rgba(0,0,0,0.5);
}

.btn:disabled {
	color:#c0c0c0;
	background-color:#f7f0d4;
}

.fadeable {
	opacity:0;
	transition:opacity 1s linear;
}

.fullscreen {
	display:block;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
}

.hidden {
	display:none;
}

.text {
	padding:4px 10px;
	vertical-align:middle;
}
/* dropdown */

.dropdown-container {
	width:inherit;
	text-align:left;
	cursor:pointer;
	padding:0;
}

.dropdown-container.top {
	position:relative;
	border-radius:8px;
}

.dropdown-container.bottom {
	display:none;
	position:absolute;
	border-radius:0px 0px 8px 8px;
	z-index: 1;
}

.dropdown-button {
	background:none;
	width:100%;
	padding:0 0;
	border:solid 1px #a0a0a0;
	box-shadow:1px 1px 1px rgba(0,0,0,0.5);
}

.dropdown-button.top {
	border-radius:8px;
}

.dropdown-button.top.expanded {
	border-bottom:none;
	border-radius:8px 8px 0px 0px;
}

.dropdown-button.middle {
	border-top:solid 1px gray;
	border-bottom:none;
	border-radius:0px;
}

.dropdown-button.bottom {
	border-top:solid 1px gray;
	border-bottom:none;
	border-radius:0px 0px 8px 8px;
}

.dropdown-button-image-left {
	width:40px;
	height:40px;
	border-radius:8px;
	vertical-align:middle;
}

.dropdown-button-image-right {
	width:23px;
	vertical-align:middle;
}
/* layout header */

@media screen and (orientation:landscape) { .layout-header {
	position:fixed;
	display:flex;
	flex-direction:row;
	top:0px;
	width:100%;
} }
@media screen and (orientation:portrait) { .layout-header {
	display:none;
} }

/* layout body */

@media screen and (orientation:landscape) { .layout-body {
	display:flex;
	flex-direction:row;
	margin-top:52px;
	width:calc(222vh + 40px);
	height:calc(100% - 52px);
} }
@media screen and (orientation:portrait) { .layout-body {
	display:flex;
	flex-direction:row;
	margin-top:52px;
	width:calc(285vw + 40px);
	height:calc(100% - 52px);
} }

/* layout width, height */

@media screen and (orientation:landscape) { .layout-width-menu {
	width:75vh;
} }
@media screen and (orientation:portrait) { .layout-width-menu {
	width:95vw;
} }

@media screen and (orientation:landscape) { .layout-width-board {
	width:82vh;
} }
@media screen and (orientation:portrait) { .layout-width-board {
	width:95vw;
} }

@media screen and (orientation:landscape) { .layout-width-notation {
	width:65vh;
} }
@media screen and (orientation:portrait) { .layout-width-notation {
	width:95vw;
} }

@media screen and (orientation:landscape) { .layout-height {
	height:82vh;
} }
@media screen and (orientation:portrait) { .layout-height {
	height:95vw;
} }
/* lcd */

.lcd0, .lcd1, .lcd2, .lcd3, .lcd4, .lcd5, .lcd6, .lcd7, .lcd8, .lcd9, .lcdc {
	background-image:url("../img/lcd.png");
	background-repeat:no-repeat;
	background-size:1100% 100%;
}
.lcd0 { background-position:90%; }
.lcd1 { background-position:0%; }
.lcd2 { background-position:10%; }
.lcd3 { background-position:20%; }
.lcd4 { background-position:30%; }
.lcd5 { background-position:40%; }
.lcd6 { background-position:50%; }
.lcd7 { background-position:60%; }
.lcd8 { background-position:70%; }
.lcd9 { background-position:80%; }
.lcdc { background-position:100%; }
.lcdn { }
/* popup */

.popup-small {
	position:fixed;
	left:50%;
	top:50%;
	width:350px;
	height:45px;
	margin:-40px 0 0 -200px;
	background-color:#f0f0f0;
	border:1px solid #000;
	border-radius:10px;
	box-shadow:5px 5px 5px rgba(0,0,0,0.5);
}

.popup-large {
	position:fixed;
	left:50%;
	top:50%;
	width:400px;
	height:130px;
	margin:-80px 0 0 -200px;
	background-color:#f0f0f0;
	border:1px solid #000;
	border-radius:10px;
	box-shadow:5px 5px 5px rgba(0,0,0,0.5);
}

#full-screen-overlay {
	display:none;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:1;
}

#popup-overlay {
	display:none;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:1;
	background-color:rgba(0, 0, 0, 0.3);
}


#popup-content {
	position:relative;
	left:10%;
	top:0%;
	width:80%;
	height:80%;
	text-align:center;
	vertical-align:middle;
}

#popup-close {
	color:#aaa;
	float:right;
	font-size:32px;
	font-weight:bold;
}
#popup-close:hover,
#popup-close:focus {
    color:black;
    text-decoration:none;
    cursor:pointer;
}
/* panel */

.panel {
	border-color:black;
	border-style:solid;
	border-width:1px;
	box-shadow:2px 2px 2px rgba(0,0,0,0.5);
}

.panel-tabbed {
	border-left:solid 1px black;
	border-right:solid 1px black;
	border-bottom:solid 1px black;
	box-shadow:2px 2px 2px rgba(0,0,0,0.5);	
}

.tabs ul {
	margin:0 0 0 0;
	padding:0 0 0 0;
}

.tabs ul li,
.tabs ul li:before,
.tabs ul li:after {
	display:inline-block;
	text-align:center;
}

.tabs ul li {
	position:relative;
	z-index:1;
	width:150px;
	height:16px;
	padding:4px;
}

.tabs ul li:before {
	position:absolute;
	z-index:-1;
	width:85px;
	height:23px;
	top:0px;
	left:7px;
	content:"";
	background-color:#fcf8ea;	
	border-left:solid 1.5px black;
	border-top:solid 1px black;
	border-bottom:solid 1px black;
	border-radius:8px 0 0 0;
	transform:skew(-30deg, 0deg);
}

.tabs ul li:after {
	position:absolute;
	z-index:-1;
	width:85px;
	height:23px;
	top:0px;
	right:0px;
	content:"";
	background-color:#fcf8ea;	
	border-right:solid 1.5px black;
	border-top:solid 1px black;
	border-radius:0 8px 0 0;
	transform:skew(30deg, 0deg);
	box-shadow:2px 0px 0px rgba(0,0,0,0.5);	
}

.tabs ul li.active {
	z-index:2;
	height:16px;
}

.tabs ul li.active:before,
.tabs ul li.active:after {
	height:24px;
	background-color:#f0f0f0;	
	border-bottom:none;
}

.tabs ul li:hover {
	cursor:default;
}
/* table */

tr {
	cursor:default;
}

td {
	white-space:nowrap;
}

.table-header th {
	background:#e0e0e0;
	border:1px solid gray;
	font-weight:normal;
	text-align:left;
	white-space:nowrap;
}

.table-row {
	background:#f8f8f8;
}