/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   skin name: sonral
 *   version:   2.5.10
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* -----------
 *   var
 * ----------- */
:root {
	--pageWidth: 1330px;
}
:root {
	--color-prime:  #2f8dc3;			/* nav, button, aside border  */
	--color-hover:  #1f7db3;			/* nav, button                */
	--color-active: #0f6da3;			/* nav, button                */
	--color-select: #0f6da3;			/* nav-highlight              */
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   general
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body {
	line-height: 1.44;
	font-family: Verdana, Helvetica, Geneva, "Lucida sans", sans-serif;
	font-size: 18px;
	color: #333333;
}
@media screen and (min-width: 801px) {
	body {
		background-image: url("../img/bg-plank-05.jpg");
	}
}
/* ------ */
a {
	color: #0055bb;
}
a:hover {
	color: #1177dd;
}
table {
	border-collapse: collapse;
}
input[type=button] {
	border-width: 1px;
	border-color: #2ec4ff #0ea4ed #0ea4ed #2ec4ff;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   header
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (min-width: 601px) {
	header {
		height: 130px;
		background-color: #404040;
	}
	#hd1 {
		padding-top: 4px;
		height: 120px;
		z-index: 1;
	}
}
@media screen and (max-width: 600px) {
	#hd1 {
		height: 80px;
		background-color: #26495e;
	}
	#hd1-banner {
		display: none;
	}
}
/* --- header title ------------------------ */
#hd-title {
	color: #ffffff;
	text-shadow: 2px 2px 4px #000000;
}
#hd-title a {
	color: #ffffff;
}
#hd-subtitle {
	font-size: 17px;
	color: #ffffff;
	text-shadow: 2px 2px 2px #000000;
}
/* -- logo --------------------------------- */
@media screen and (min-width: 801px) {
	#hd-wrap-logo {
		bottom: 0;
		left: 30px;
		width: 160px;
	}
}
@media screen and (max-width: 800px) {
	#hd-wrap-logo {
		bottom: 5px;
		left: 15px;
		width: 120px;
	}
}
@media screen and (max-width: 600px) {
	#hd-wrap-logo {
		top: 12px;
		left: 10px;
		width: 110px;
	}
}
/* -- btn menu mobile ---------------------- */
@media screen and (max-width: 600px) {
	#btn-menu { top: 23px; }
	#btn-menu:active { top: 24px; }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   nav
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
nav {
	background-color: var(--color-prime);
	border-top: 1px solid #07a3f3;
	border-bottom: 1px solid #0583d3;
}
#nv1 {
	height: 44px;
}
.nav-item {
	position: relative;
	top: -1px;
	color: #ffffff;
	line-height: 44px;
	padding: 0 15px;
	border-top: 1px solid #07a3f3;
	border-bottom: 1px solid #0583d3;
}
.nav-item:hover {
	border-top: 1px solid #0488e2;
	border-bottom: 1px solid #0074bd;
}
.nav-highlight {
	border-top: 1px solid #0d81ca;
	border-bottom: 1px solid #0064ad;
}
/* --- mobile nav -------------------------------------- */
#side-nav {
	background-color: #0a384f;
	background-color: #1a3f55;
}
#side-menu-wrapper {
	border-top: 1px solid #00283f;
	border-top: 1px solid #0e2d3e;
}
.side-item {
	color: #dddddd;
	border-bottom: 1px solid #00283f;
	border-bottom: 1px solid #0e2d3e;
}
.side-item:hover,
.side-item:active {
	color: #ffffff;
	background-color: #0e4f6f;
	background-color: #194b64;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   aside
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
aside {
	color: #505050;
}
.aside-block {
}
.snip-wrapper {
	padding: 10px 10px 15px 10px;
	background-color: #e6e6e6;
	background-image: url("../img/bg-plank-03.jpg");
	border-width: 1px;
	border-style: solid;
	border-color: #cccccc #d6d6d6 #d6d6d6 #cccccc;
	border-radius: 4px;
}
.snip-wrapper h3 {
	margin-top: 0;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *   screen size
 *
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* -----------------
 *   change nav
 * ----------------- */
@media screen and (min-width: 1001px) {
	#side-nav { visibility: hidden; }
	#btn-menu { display: none; }
}
@media screen and (max-width: 1000px) {
	#hd1 { border-bottom: 8px solid #1a3f55; }
	nav  { display: none; }
}