﻿/* ================> SV CSS <================ */
/* Standard and special styles (complements layout stylesheet) */
body{
	margin:0px;
	background-color:#fefefd; /* AlmostWhite */
	background-image:url('pix/bg_Notepad.jpg'), url('pix/bg_Notepad2.jpg');
	background-position:0px 10px,left bottom;
	background-repeat:no-repeat,repeat-y;
	background-size:100% auto, 100% auto;
	font:normal 100% Helsinki, Tahoma, Arial, Calibri, sans-serif;
	color:black;
}
/* Special body style (contact.htm) */
body.contact{
	background:#837b79 url('pix/bg_Card.jpg') no-repeat scroll left top;
	background-size:100% auto;
}
h1,h2,h3,h4,h5{
	font-family:Calibri, Helvetica, Arial, sans-serif;
	font-weight:700;
	color:#000080;
	text-align:center;
}
h1.left,h2.left,h3.left,h4.left,h5.left{
	display:block;
	width:100%;
	margin:8px 0px 0px 0px;
	padding:2px;
	text-align:left;
	page-break-after:avoid;
}
.brand{
	display:inline-block;
	margin:0px;
	padding:8px;
	font-family:'Franklin Gothic', 'Arial Black', Arial, sans-serif;
	font-stretch:extra-expanded; /* Currently not suported by any browser */
	color:rgba(80,80,80,0.5)!important;
	text-shadow:-8px 0px 2px rgba(255,255,255,1); /* H V blur color */
}
/* ----------> Align any element <---------- */
.alignleft{
	float:left;
	text-align:left;
}
.aligncenter{
	display:block;
	max-width:98%;	/* note: can't be centered if width=100% */
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
.alignright{
	float:right;
	text-align:right;
}
/* ----------> HYPERLINKS <---------- */
a{
	border:1px red solid;
	border-radius:8px;
	padding:0px 4px;
	color:#0033cc; /* #4169e1 RoyalBlue */
	text-decoration:none;
}
a:visited{
	color:#0033cc;
	text-decoration:none;
}
a:hover{
	border:1px blue solid;
	background-color:rgba(47,137,189,0.75); /* PowderBlue */
/*	background-color:rgba(176,196,222,0.75); */
	color:#000033; /* DarkBlue */
	text-decoration:underline;
}
a.foot{
	background-color:#555555;
	border:none;
	padding:2px 4px;
	color:#FF3300 !important;
	text-decoration:none;
}
a.foot:hover{
	background-color:rgba(47,137,189,0.75); /* PowderBlue */
	border-radius:8px;
	color:#e0ffff!important; /* LightCyan */
	text-decoration:underline;
}
a.dark{
	border:none;
	text-decoration:none;
	color:black;
}
a.dark:hover{
	background-color:transparent;
	border:none;
	text-decoration:none;
	color:black;
}
/* ----------> SPECIAL STYLES <---------- */
/* Hyperlink styled as BUTTON */
a.button{
	display:inline-block;
	margin:4px 8px;
	padding:8px 16px;
	outline:none;
	border: none;
	border-radius:6px;
	background-color:#555555; /* MediumGray*/
	cursor:pointer;
	font-size:0.95em;
	text-align:center;
	text-decoration:none;
	color:white;
}
a.button:hover{
	background-color:#2f89bd; /* PowderBlue */
	color:black !important;
}
a.button::active{
	box-shadow:4px 8px 16px 0px rgba(0,0,0,0.50);
}
/* ----------> BREADCRUMBS STYLES <---------- */
/* Style the list */
ul.breadcrumbs{list-style:none;padding:4px;background-color:#eee;}
/* Display list items side by side */
ul.breadcrumbs li{
	display:inline;
	-webkit-display:inline; /* For the fucking iOS 11.3 Safari (just on iPad) */
	font-size:0.8em;
}
/* Add slash symbol (/) before/behind each list item */
ul.breadcrumbs li+li:before{padding-right:6px;color:black;content:"/\00a0";}
/* Style links inside the list */
ul.breadcrumbs li a{border:none!important;text-decoration:none;color:#0033cc;}
/* Style active item */
ul.breadcrumbs li.active{font-weight:bold;}
/* Change style on mouse-over */
ul.breadcrumbs li a:hover{
	background-color:transparent;
	border:none!important;
	text-decoration:underline;
	color:#000033;
}
@media screen and (max-width:460px){
	/* Hide breadcrumbs on small screens (mobile) */
	ul.breadcrumbs{display:none;}
}
/* ----------> LIST STYLES <---------- */
/* UTF-8 Special characters & symbols reference */
/* source: https://www.w3schools.com/charsets/ref_utf_punctuation.asp */
/* 2600 (sun), 2606 (white star), 21e8 (right white arrow), 27a4 (right arrowhead), 2709 (envelope), 9658 (Right Triangle) */
ul.fancy{
	list-style:none;
	margin:0px 0px 0px 8px;
	padding:0px;
	page-break-before:avoid;
}
ul.fancy li{padding:3px 0px 3px 6px;} /* T R B L */
ul.fancy li::before{
	content:"\27a4";
	padding-right:12px;
	color:#8b0000;
	font-weight:bold;
}
dt{font-weight:bold;} /* Description list title */
.indent{margin-left:48px;}
.quote{
	width:60%;
	margin-top:40px;
	margin-left:auto;
	margin-right:auto;	
	text-align:center;
	font-size:0.80em;
}
/* ----------> ABSOLUTE POSITIONING <---------- */
.abstopleft{
	display:inline-block;
	position:absolute;
	top:48px;
	left:16px;
	padding:3px;
	border:1px orange solid;
}
.abstopright{
	display:inline-block;
	position:absolute;
	top:48px;
	right:16px;
}
.absbottomright{
	display:inline-block;
	position:absolute;
	bottom:64px;
	right:16px;
}