/*
	Layout CSS for The Batik Guild
	©Duncan Weaver, Three Degrees West 2017

	NOTE: Mobile-first layout
	Signature colours: tint-blue #ebedf3;   pale-blue #acb4d2;   dark-blue #003878;   purple #970D76;
*/

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

body {
	margin: 0;
	background-color: #666;
}
.bg-container {
	max-width: 1200px;
	margin: 0 auto;
}

.bg-header {
	border-bottom: 3px solid #970d76;
	background-color: #fff;
	padding: 6px 10px;
	min-height: 56px;
	/*overflow: hidden;*/
}
.bg-home-handle {
	display: block;
	width: 100%;
	height: 30px;
	background-image: url(/images/css/BGlogotype20.png);
	background-repeat: no-repeat;
	background-position: 0 5px;
}
.bg-loginout {
	font-size: 0.8em;
	color: #003878;
}
.bg-loginout a {
	color: #003878;
	text-decoration: none;
}
.bg-loginout a:hover {
	color: #970D76;
	text-decoration: underline;
}
.logitem {
	background-image: url(/images/css/logitem-sprite.png);
	background-repeat: no-repeat;
	padding-left: 30px;
}
.logitem.user   {background-position: 12px 0}
.logitem.join   {background-position: 12px -20px}
.logitem.login  {background-position: 12px -20px}
.logitem.logout {background-position: 12px -40px}
.logitem.order  {background-position: 12px -60px}
.logitem.member {background-position: 12px -80px}

.logitem.user:hover   {background-position: 12px -100px}
.logitem.join:hover   {background-position: 12px -120px}
.logitem.login:hover  {background-position: 12px -120px}
.logitem.logout:hover {background-position: 12px -140px}
.logitem.order:hover  {background-position: 12px -160px}
.logitem.member:hover {background-position: 12px -180px}


.bg-menu-handle {
	float: right;
	margin-top: 4px;
	margin-left: 10px;
	height: 21px;
	width: 30px;
	background-image: url(/images/css/menu-handle-sprite.png);
	background-position: 0 0;
	cursor: pointer;
}
.bg-menu-handle:hover {
	background-position: -30px 0;
}
@media screen and (min-width: 600px) {

	.bg-home-handle {
		height: 50px;
		background-image: url(/images/css/BGlogotype30.png);
		background-position: 0 5px;
	}

	.bg-loginout {
		margin-top: -36px;
		text-align: right;
	}
}
.bg-menu {
	display: none;
	background-color: #ebedf3;
}
.bg-menu ul {
	margin: 0;
	padding: 0;
}
.bg-menu li {
	padding: 0;
	list-style: none;
	list-style-image: none;
}
.bg-menu a {
	display: block;
	padding: 2px 10px;
	text-decoration: none;
	color: #003878;
}
.bg-menu li a.current {
	font-weight: bold;
}
.bg-menu a:hover {
	background-color: #003878;
	color: #ebedf3;
	text-decoration: none;
}
.bg-menu li div a {
	padding: 2px 30px;
}
.bg-menu a.hilite {
	padding: 3px 20px;
	color: #888;
	font-weight: bold;
}
.bg-menu hr {
	margin: 4px 0 !important;
	background-color: #ebedf3 !important;
}
.bg-main {
	background-color: #fff;
	padding: 0 10px 20px 10px;
}
.bg-navstatus {
	margin-bottom: 10px;
	font-size: 0.8em;
	color: #999;
}
.bg-breadcrumb .yah {
	font-weight: bold;
	margin-right: 10px;
}
.bg-breadcrumb a {
	color: #999;
	text-decoration: none;
	padding-left: 20px;
	background-image: url(/images/css/breadcrumb-sprite.png);
	background-repeat: no-repeat;
	background-position: 7px -15px;
}
.bg-breadcrumb a.homelink {
	padding-left: 0;
	background-image: none;
}
.bg-breadcrumb a:hover {
	text-decoration: underline;
	color: #970D76;
	background-position: 7px -55px;
}
.bg-footer {
	background-color: #666;
	color: #eee;
	padding: 20px 10px;
	line-height: 1.2em;
	font-size: 0.8em;
}
.bg-footer a {
	color: #eee !important;
	text-decoration: none;
}
.bg-footer a:hover {
	text-decoration: underline;
}
.bg-smlink {
	display: inline-block;
	height: 32px;
	line-height: 32px;
	background-repeat: no-repeat;
	background-position: 0 0;
	padding-left: 38px;
	margin-bottom: 10px;
	margin-right: 20px;
}
.bg-facebook {
	background-image: url(/images/css/media-fb.png);
}
.bg-instagram {
	background-image: url(/images/css/media-ig.png);
}
/*	Cookie notice */

.bg-notice {
	position: fixed;
	width: 100%;
	height: 120px;
	background-color: rgba(0,0,0,0.9);
	color: #fff;
	left: 0;
	bottom: -120px;
	z-index: 3000;
	font-size: 1.2em;
	padding: 40px 20px 0 20px;
}
.bg-notice a {
	color: #acb4d2 !important;
}
.bg-notice .remove-notice {
	float: right;
	width: 24px;
	height: 24px;
	background-image: url(/images/css/close.png);
	background-repeat: no-repeat;
	background-position: 5px 5px;
	border-radius: 3px;
	background-color: #003878;
}
.bg-notice .remove-notice:hover {
	cursor: pointer;
	box-shadow: 0 0 8px #fff;
	background-color: #970D76;
}
/*	pale-blue #acb4d2;   dark-blue #003878;   purple #970D76;*/

@media screen and (min-width: 600px) {


	.bg-menu-handle { 
		display: none;
	}
	.bg-menu {
		display: block !important;
	}
	.bg-menu:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}
	.bg-menu a {
		padding: 2px 20px;
	}
	.bg-menu ul div {
		display: none;
	}
	.bg-menu li {
		float: left;
	}

	.bg-menu li div {
		display: none;
		position: absolute;
		border: 1px solid #ebedf3;
		border-top: none;
		padding: 10px 0;
		z-index: 500;
		background-color: #F8F9FA;
		box-shadow: 3px 3px 2px rgba(0,0,0,0.5);
		font-size: 0.85em;
		line-height: 1.4em;
		margin-left: -1px;
	}
	.bg-menu li div:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}
	.bg-menu li div ul {
		float: left;
	}
	.bg-menu li div ul li {
		float: none;
	}
	.bg-menu li div ul a {
		padding: 3px 20px;
		height: auto;
	}
	.bg-menu li div ul a.pm {
		padding-left: 30px;
	}

	.bg-menu li div a:hover {
		text-decoration: underline;
		background-color: transparent;
		color: #003878;
	}

	.bg-main {
		min-height: 300px;
	}

}
@media print {

	body {
		background-color: #fff;
	}

	.bg-header, .bg-menu, .bg-navstatus, .bg-footer, bg-notice {
		display: none;
	}


}