/* Scrollbar */
::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: #f1f1f1; 
}
 
::-webkit-scrollbar-thumb {
	background: #888; 
}

::-webkit-scrollbar-thumb:hover {
	background: #555; 
}

html {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

/* Form */
input,
button,
select {
	line-height: normal;
	font-size: 100%;
	font-family: 'Open Sans', sans-serif;
}

select::-ms-expand {
    display: none;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: silver;
	opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: silver;
}

::-ms-input-placeholder { /* Microsoft Edge */
	color: silver;
}

input[type=text].input-number {
	text-align: center;
}

select:required:invalid {
	color: silver;
}

select option:first-child:default {
	color: silver;
}

select option:not(:disabled) {
	color: black;
}

select {
	background-image:
		linear-gradient(45deg, transparent 50%, #999 50%),
		linear-gradient(135deg, #999 50%, transparent 50%),
		radial-gradient(#ddd 70%, transparent 72%);
	background-position:
		calc(100% - 15px) 50%,
		calc(100% - 5px) 50%,
		calc(100% - 3px) 50%;
	background-size:
		12px 9px,
		12px 9px,
		26px 26px;
	background-repeat: no-repeat;
}

input,
button,
label.radio,
label.checkbox,
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-border-radius: 64px;
	-moz-border-radius: 64px;
	-ms-border-radius: 64px;
	-o-border-radius: 64px;
	border-radius: 64px;
	display: inline-block;
	padding: 0px;
	margin: 0px;
	color: #422b25;
}

input:hover,
button:hover,
label.radio:hover,
label.checkbox:hover,
select:hover {
	color: #756460;
}

input[type=text],
select {
	padding: 5px 10px;
	border: 1px solid #ccc;
	background-color: white;
}

label.radio,
label.checkbox {
	position: relative;
	padding: 8px 10px 8px 32px;
	cursor: pointer;
}

label.radio input,
label.checkbox input {
	display: none;
}

label .mark {
	position: absolute;
	top: 3px;
	left: 0;
	width: 26px;
	height: 26px;
	background-color: #e0e0e0;
}

label.radio .mark,
label.radio .mark:after {
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
}

label:hover input ~ .mark {
	background-color: #ff8e9d;
}

label input:checked ~ .mark {
	background-color: #ffb9c3;
}

label .mark:after {
	position: absolute;
	display: none;
	content: "";
}

label input:checked ~ .mark:after {
	display: block;
}

label.radio .mark:after {
	top: 7px;
	left: 7px;
	width: 12px;
	height: 12px;
	background: #422b25;
}

label.checkbox .mark:after {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid #422b25;
	border-width: 0 3px 3px 0;
}

input[type=submit],
input[type=number],
input[type=button],
button {
	background-color: #ffb9c3;
	padding: 5px 10px;
	border: 1px solid #ffb9c3;
	cursor: pointer;
}

input[type=submit]:hover,
input[type=number]:hover,
input[type=button]:hover,
button:hover {
	background-color: #ff8e9d;
}

input[type=text].input-number {
	margin: 0px 4px;
}

input[type=button].input-number-button {
	line-height: 1;
	padding: 2px 6px;
	margin: 0px;
}

input:focus, input:active,
button:focus, button:active,
select:focus, select:active,
option:focus, option:active {
	outline: none;
}


/*	#241815 
	#261916 Eerie Black
	#422b25 
	#ff8e9d Salmon Pink
	#ffb9c3 Cherry Blossom Pink
	#ffdde4 Piggy Pink
	#fff1f4 Lavender Blush
*/


/* TopNav - Menu */
div.topnav {
	width: 100%;
	z-index: 2;
}

ul.menu {
	overflow: hidden;
	background-color: #422b25;
	width: 100%;
}

ul.menu .menu-icon {
	background-color: #241815;
}

ul.menu li.logo a {
	background-image: url('../img/poring_53x38.png');
	background-size: 53px 38px;
	background-repeat: no-repeat;
	background-position: 12px 5px;
	padding-left: 72px;
	font-weight: bold;
	color: #ffb9c3;
	text-align: left;
}

ul.menu > li:not(.right) {
	float: left;
}

ul.menu > li.right {
	float: right;
}

ul.menu > li.dropdown span,
ul.menu > li.menu-icon span {
	cursor: pointer;
}

ul.menu > li a,
ul.menu > li span {
	display: block;
	color: #ffdde4;
	text-align: center;
	padding: 16px 10px;
	text-decoration: none;
}

ul.menu > li a:hover,
ul.menu > li a.active,
ul.menu > li span:hover,
ul.menu > li span.active {
	background-color: #37241f;
	color: white;
}

ul.submenu {
	display: none;
	position: absolute;
	background-color: white;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

ul.submenu,
ul.submenu li:last-child {
	border-radius: 0px 0px 16px 16px;
}

ul.submenu li a {
	color: #422b25;
	padding: 16px 12px;
	text-decoration: none;
	display: block;
	text-align: left;
}

ul.submenu li a:hover {
	background-color: #ffdde4;
	color: black;
}

ul.submenu li:last-child a:hover {
	border-radius: 0px 0px 16px 16px;
}

ul.menu div.search {
	padding: 6px 10px;
	width: 170px;
	display: inline-block;
	position: relative;
}

ul.menu div.search input[type=text] {
	margin: 0px;
	width: 100%;
}

ul.menu div.search input[type=submit] {
	overflow: none;
	position: absolute;
	top: 6px;
	right: 10px;
	border: 1px solid transparent;
}

div.topnav.responsive {
	position: static;
}

.show {
	display: block !important;
}


/* default screen */
@media only screen and (min-width:901px) {
	div.topnav,
	div.topnav.responsive {
		position: fixed;
		top: 0;
	}

	ul.menu li.menu-icon {
		display: none;
	}

	div.content {
		margin-top: 48px;
	}
}


/* small screen */
@media only screen and (min-width: 601px) and (max-width: 900px) {
	div.topnav {
		position: relative;
	}

	ul.menu li:not(.menu-icon):not(.logo):not(.right) {
		display: none;
	}
}


/* small mobile screen */
@media only screen and (max-width: 600px) {
	div.topnav {
		position: relative;
	}

	div.topnav > ul.menu li.logo {
		width: 100%;
		float: none;
		display: block;
	}

	div.topnav > ul.menu > li.menu-icon {
		position: absolute;
		top: 0;
		right: 0;
	}

	ul.menu > li:not(.menu-icon):not(.logo) {
		display: none;
	}
}


/* responsive for both sets of small screens */
@media only screen and (max-width: 900px) {
	ul.menu li.logo a {
		background-image: url('../img/poring_80x57.png');
	}

	div.topnav.responsive > ul.menu > li.menu-icon {
		position: absolute;
		top: 0;
		right: 0;
	}

	div.topnav.responsive > ul.menu li:not(.menu-icon) {
		width: 100%;
		float: none;
		display: block;
	}

	div.topnav.responsive > ul.menu li:not(.menu-icon) a,
	div.topnav.responsive > ul.menu li:not(.menu-icon) span {
		display: block;
		text-align: left;
	}

	div.topnav.responsive > ul.menu > li:not(.menu-icon):not(.logo) a,
	div.topnav.responsive > ul.menu > li:not(.menu-icon):not(.logo) span {
		text-indent: 24px;
	}

	div.topnav.responsive ul.submenu {
		position: static;
	}

	div.topnav.responsive ul.submenu > li a {
		text-indent: 48px;
	}

	div.topnav.responsive div.search {
		width: 100%;
		margin: 0px;
		padding: 0px;
		position: relative;
	}

	div.topnav.responsive div.search input[type=text] {
		margin: 7px 10px;
		width: calc(100% - 20px);
	}

	div.topnav.responsive div.search input[type=submit] {
		position: absolute;
		top: 7px;
		right: 10px;
		width: 120px;
		border: 1px solid transparent;
	}	
}


/* Content */
html {
	background-color: #fff1f4;
}

.content {
	padding: 16px;
}