/* ABPA style sheet 2022.
Some design elements inspired by Metamorphosis Design http://www.metamorphozis.com
Released for free under a Creative Commons Attribution 2.5 License */

a:link {/* unvisited link */
	color: #a33c0f; /* red-brown */
	text-decoration:none;
}

a:visited {color: #a33c0f;} /* red-brown */

a:hover{
	text-decoration: underline;
	color: #335000; /* dk mid green */
}

h1 {
	font-size: 18px;
	text-align: center;
	font-style: italic;
	color: #ffffff;
	font-weight: bold;
}

h2 {
	font-family: Tahoma, Geneva, Verdana;
	font-weight:normal;
	color: #ffffff;
	font-size: 18px;
	padding: 5px 10px;
	margin-bottom: 15px;
	background-image: linear-gradient(to right, #7c8c0f , #aeb96b);
	border-style: groove;
}

h3 {font-size: 16px;}
h4 {font-weight:bold;}

nav {
	font-family: Tahoma, Geneva, Verdana;
	font-size: 18px;
	font-weight: normal;
	text-decoration: none;
	padding-bottom: 5px;
}
nav ul {list-style-type:none; margin-block-start: 0; margin-block-end: 0; padding-inline-start: 0;}
nav li {display: inline; margin: 5px;} 
nav a:link {/* unvisited link */color:#ffffff; /* white */}
nav a:visited {color:#ffffff; /* white */}
nav a:hover {color:#a6bd25;}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
	margin: 0;
}

#mainbg{
	background-color: #7f8f13;
	z-index: -1;
}

#main{
	margin: 0 auto;
	max-width: 1014px;
}

.logo-image img {
	position: relative;
	width: 100%;
	height: auto;
}

.logo-text {
	position: absolute;
	top: 20px;
	max-width: 1014px;
	width: 100%;
}

.gallery100 img {
	width: 100%;
	height: auto;
}

.small-pic {float: left;}

.top{
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top:0;
	background-image: linear-gradient(to bottom, #7f8f13, #6e7c24);
}

.center{text-align:center;}
.written{color: #8601AF;}
.indent-ital{font-style: italic; padding-left: 20px;}

#content{
	padding: 15px;
}

#content_bg{
	background: url("images/contentbg.jpg");
	background-repeat:repeat-x;
	background-position:top;
	background-color: #f3f5e9; /* light cream */
}

#left{
	width: 73.499999%;
	float: left;
	padding-bottom: 15px;
}

#right{
	width: 26.499999%;
	float:right;
}

#right-techs{
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 30px;
	width: 26.499999%;
	float:right;
}

#right-content {margin-left: 15px;}
#right-image {max-width: 250px; float:left;}

/* List with fruity bullet*/
#right ul{
	list-style: none;
	margin-bottom: 30px;
	padding-left:7px;
	padding-top: 5px;
	padding-right:10px;
}

#right li{
	background: url("images/ls.png") no-repeat left top;
	padding-left: 20px;
	margin-bottom: 10px;
}

table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

.contact-table {overflow-x: auto;}

td, th {
	vertical-align: top;
	border-bottom: 1px solid #5d6d0a; /* mid green */
	padding: 4px;
}

th {font-weight: bold;}

footer a:link {/* unvisited link */color:#ffffff; /* white */}
footer a:visited {color:#ffffff; /* white */}
footer a:hover {color:#a6bd25;}
footer {
	height: 40px;
	font-size: 12px;
	padding: 10px;
	text-align: center;
}

.padding{padding-top: 30px;}

@media only screen and (min-width: 920px) {
	.vid {width: 640px; height: 360px;}
}

@media only screen and (max-width: 919px) {
	.vid {width: 492px; height: 277px;}
}

@media only screen and (max-width: 768px) {
	.logo-text {top: 8px;}
	.vid {width: 492px; height: 277px; margin:auto;}
	nav {font-size: 13px;}
	nav li {margin: 3px;}
	#left{width: 100%;}
	#right{width: 100%;}
	#right-techs{width: 100%;}
	#right-content{margin-left: 0;}
}

@media only screen and (max-width: 500px) {
	.logo-text {top: 4px;}
	.top {position: static;}
	.small-pic {float: none; text-align: center;} /*stops text flowing around image on small screens */
	.vid {width: 300px; height: 169px;}
	#right-image {float: none; text-align: center;}
	#right-techs {position: static;}
	h1 {font-size: 12px;}
	h2 {font-size: 16px;}
	nav li {display: block;}
	td, th {font-size: 12px;}
}

.clearfix:after {
	content: "";
	display: table;
	clear: both;
}