/* ================> SOSOL.COM CSS <================ */
/* Standard and special styles (supplements style_layout.css) */
/*
	font-size: 140% = 1.4em  = 22px = 16pt 
	font-size: 120% = 1.2em  = 19px = 14pt
	font-size: 100% = 1em    = 16px = 12pt
	font-size:  95% = 0.95em = 15px = 11pt
	font-size:  80% = 0.8em  = 13px = 10pt
	font-size:  75% = 0.75em = 12px =  9pt
	font-size:  70% = 0.7em  = 11px =  8pt
*/
/*---------------> GLOBAL CSS VARIABLES <---------------*/
/* MS Edge v.41 (IE 14), Firefox v.60, Chrome v.66 (IE 11 not working) */
/* BUT, W3C Validator flags it as parse error (CSS level 3 + SVG) */
:root{
/*	--mb-jazz-blue:rgb(0,72,122); /* #00487a Mont Blanc JazzBlue */
/*	--mb-pacific-blue:rgb(0,79,157); /* #004f9d Mont Blanc PacificBlue */
/*	--mb-royal-blue:rgb(44,71,143); /* #2c478f Mont Blanc RoyalBlue */
/*	--mb-perma-blue:rgb(31,42,121); /* #1f2a79 Mont Blanc PermanentBlue (LIKE) */
/*	--mb-midnight-blue:rgb(37,49,68); /* #253144 Mont Blanc midnightBlue */
/*	--twiter-blue:rgb(40,168,224); /* #28a8e0 TwitterBlue */
/*	--powder-blue:rgb(47,137,189); /* #2f89bd PowderBlue (LIKE) */
/*	--royal-blue:rgb(0,51,204); /* #0033cc RoyalBlue */
/*	--light-cyan:rgb(224,255,255); /* #e0ffff LightCyan */
/*	--light-red:rgb(255,51,0); /* #ff3300 LightRed */
/*	--ecny-red:rgb(165,3,22); /* #500316 ECNY Red */
/*	--dark-red:rgb(139,0,0); /* #8b0000 DarkRed (LIKE) */
/*	--fresh-green:rgb(76,175,80); /* #4caf50 Green */
/*	--bing-green:rgb(0,128,113); /* #008071 MS BingGreen (LIKE)*/
/*	--black-gray:rgb(51,51,51); /* #333333 VeryDarkGray */
/*	--cps-gray:rgb(47,47,47); /* #2f2f2f PaintshopGray */
/*	--w3s-gray:rgb(95,95,95); /* #5f5f5f MediumGray (w3schools.com) */
/*	--edge-black:rgb(14,14,14); /* #0e0e0e MS EdgeBlack */
}
/* ---------------> NORMAL STYLES <--------------- */
/*-----> HEADINGS Styles */
h1,h2,h3,h4{
	padding:0px;
	font-family:Garamond, "Times New Roman", Cambria, Georgia, Times, serif;
	font-weight:bold;
	text-align:center;
	color:rgb(31,42,121);/*Mont Blanc PermanentBlue*/
}
h1.left,h2.left,h3.left,h4.left{text-align:left;}
h1{font-size:1.4em;}
h2{font-size:1.2em;}
h3{font-size:1em;}
h4{font-size:0.95em;}
/*-----> Banner <picture> and overlay container styles */
.banner{
	display:block;
	margin:0px;
	padding:0px;
	width:100%;
	height:auto;
}
.bannertext{
	position:absolute;
	top:50px;
	left:16px;
}
/*-----> LOGO styles */
img.logo{
	display:block;
	max-width:50%;
	height:auto;
	padding:4px;
	border:1px white solid;
	border-radius:16px;
	background-color:rgba(255,255,255,0.5);
}
.logotext{
	margin:6px 0px 4px 26px;/* T R B L*/
	font-family:"Copperplate Gothic Bold", "AR JULIAN", "Times New Roman, Cambria, Georgia, Times, serif";
	font-weight:bold;
	text-align:left;
	color:black!important;
	text-shadow:-1px 0px white, 0px 1px white, 1px 0px white, 0px -1px white;/* White border */
}
/*-------------> Responsive layouts <-------------*/
/* Desktop monitor (portrait) */
/* standard HD = 1080 x 1920 */
@media only screen and (max-width:1200px){
	img.logo{max-width:40%;}
}
/* Tablet (landscape) */
/* iPad viewport = 1024 x 666 */
@media only screen and (max-width:1046px){
	/*h1,h2,h3,h4,h5{font-size:1.2em;}*/
	.logotext{font-size:0.8em!important;}
}
/* Tablet (portrait) */
/* iPad viewport = 768 x 922 */
@media only screen and (max-width:850px){
	h1{font-size:1.2em;}
	h2{font-size:1em;}
	h3{font-size:0.8em;}
	img.logo{max-width:40%;}
	.logotext{font-size:0.7em!important;}
}
/* mobile phone (portrait) */
/* iPhoneX viewport = 375 x 630 */
@media only screen and (max-width:600px){
	h1{font-size:1.2em;}
	h2{font-size:1em;}
	h3{font-size:0.95em;}
	.bannertext{top:36px;left:2px;}
	img.logo{max-width:46%;}
	.logotext{font-size:0.6em!important;}
}
/*----->  Image overlay */
.imgcontainer{
	position:relative;
	margin:2px 0px 12px 6px;
	padding:0px;
	max-width:14em;
	height:auto;
}
.imgcontainer img{
	display:block;
	max-width:14em;
	height:auto;
}
.imgoverlay{
	position:absolute;
	bottom:30%;
	width:100%;
	background:rgb(0,0,0);
	background:rgba(0,0,0,0.75);/* Black see-through */
	border:1px black solid;
	border-radius:6px;
	color:#f1f1f1;
	transition:0.5s ease;
	opacity:0;
	font-size:0.8em;
	color:white;
	text-align:center;
}
.imgoverlay a{
	display:inline-block;
	width:100%;
	padding:8px 4px;
	background-color:transparent;
	border:none;
	color:white!important;
	text-decoration:none!important;
}
.io:hover{
	color:white!important;
	border:1px orange solid;
}
/* On mouseover, fade in the overlay title */
.imgcontainer:hover .imgoverlay{
	opacity:1;
	cursor:pointer;
}
/* -----> HYPERLINK styles */
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.red{
	background-color:rgba(204,204,204,0.8);/* Gray 25% (20% transparent) */
	padding:0px 4px;
	font-weight:normal;
	color:#8b0000!important;/* DarkRed */
	text-decoration:none;
}
a.red:visited{
	background-color:rgba(204,204,204,0.5);
	color:#8b0000!important;
}
a.red:hover{
	background-color:rgba(139,0,0,0.5);/* DarkRed */
	color:black!important;
	text-decoration:underline;
}
a.foot{
	background-color:#555;
	border:none;
	padding:2px 4px;
	color:#ff3300!important;
	text-decoration:none;
}
a.foot:hover{
	background-color:rgba(204,204,204,0.5)!important;
	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;
}
a.blue{
	background-color:transparent;
	border:none!important;
	padding:0px;
	font-weight:normal;
	color:#0033cc!important;/* RoyalBlue */
	text-decoration:underline;
}
/*-----> Hyperlink styled as BUTTON */
a.button{
	display:inline-block;
	margin:4px 8px;
	padding:8px 16px;
	outline:none;
	border:none;
	border-radius:6px;
	background-color:#555;/* MediumGray*/
	cursor:pointer;
	font-size:0.95em;
	text-align:center;
	text-decoration:none;
	color:white;
}
/* Don't use. Font Awesome icon is better!
a.button::after{content:" \003e\003e";} /* " >>" */
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);
}
/*-----> IMAGE styles */
img.ssl{
	width:100px;
	height:auto;
	margin:4px 4px 2px 2px;
	float:left;
	padding:0px;
}
img.w3c_css{
	border:0px;
	width:auto;
	height:1.4em;
	margin:0px 2px 4px 20px;
	float:right;
}
/*-----> TEXT styles */
.boldtext{font-weight:bold!important;}
.bg-none{background:none!important;}
.bg-white{background-color:white!important;}
.w3c_html5{margin:4px 2px 2px 4px;padding:0px;text-align:right!important;}
/* Borders */
.border-gray{border:1px rgb(128,128,128) solid!important;}
.pill{border-radius:10px;}
/*-----> 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";
/*	content:attr(value); Use element's attribute */
	padding-right:12px;
	color:#8b0000;
	font-weight:bold;
}
ul.special{list-style:none outside;}/* type position image */
ul.special li{padding:4px;}
/* Discrete images as bullets style */
ul.pix{margin:0px;padding:0px;}
ul.pix li{padding-top:16px;clear:both;}
ul.pix li > div{
	float:left;
	vertical-align:text-top;
	margin-right:32px;
}
dl > dt{font-weight:bold;margin:0px;}/* Description list title */
dl dd{margin-left:2em;padding-bottom:6px;}

/* ---------------> SPECIAL STYLES <--------------- */
.invisiblespace{visibility:hidden;}
.invisible{
	display:none;
	visibility:hidden;
}

/* 20th Anniversary TEMPORARY STYLES */
.anniversary{
	display:inline-block;
	position:absolute;
	top:50px;
	right:50px;
	padding:8px;
	background-color:rgba(255,255,255,0.90);
	border:1px red solid;
	border-radius:4px;
	z-index:11;
	max-width:320px;
	font-size:1em;
	font-weight:bold;
}
img.anni{max-width:120px;height:auto;float:left;}
.centerthanks{
	display:block;
	width:96%;
	margin:10px auto 0px auto;
	text-align:center;
	border:1px white solid;
}
@media only screen and (max-width:1046px){
	.anniversary{max-width:280px;font-size:0.9em;}
	img.anni{max-width:100px;}
}
@media only screen and (max-width:700px){
	.anniversary{right:30px;max-width:220px;font-size:0.8em;}
	img.anni{max-width:80px;}
.centerthanks{margin:2px auto 0px auto;}
}
@media only screen and (max-width:400px){
	.anniversary{right:16px;max-width:180px;font-size:0.7em;}
	img.anni{max-width:60px;}
}
/* END OF TEMP STYLES */

.topnote{
	display:inline-block;
	position:fixed;
	top:10em;
	left:2em;
	padding:3px;
	background-color:rgba(255,255,255,0.75);
	border:1px red solid;
	z-index:9;
}
.topnote > * {font-size:0.8em;}
.bottomnote{
	display:block;
	float:right;
	position:relative;
	bottom:90px;
	padding:0px 6px;
	border: 1px #555 solid;
	border-radius:6px;
	font-size:0.8em;
}
.photocredit{
	display:inline-block;
	padding:2px 6px;
	border:1px black solid;
	border-radius:3px;
	background-color:#f0f0f0;
	font-size:0.7em;
	color:white!important;
	text-decoration:none;
}
.photocredit:hover{
	background-color:#f0f0f0;
	color:cornsilk!important;
	text-decoration:none;
}
.white-on-black{
	padding:6px 2px;
	border:1px black solid;
	border-radius:3px;
	background-color:rgba(14,14,14,1)!important;/* #0e0e0e MS EdgeBlack */
	color:white!important;
	text-decoration:none;
}
/*-----> Position any element 'absolute' */
.abs_bl{display:inline-block;position:absolute;bottom:48px;left:16px;}
.abs_br{display:inline-block;position:absolute;bottom:64px;right:16px;}
/* -----> Position any element */
.tight{margin:0px;}
.tab{margin-left:2em;}
.tight-bottom{margin-bottom:0px;}
.tight-top{margin-top:0px;}
.txtindent{padding-left:16px;}
p.indentfirst{text-indent:2em;}
.citation{
	width:50%;
	margin:12px auto 12px auto;
	text-align:center;
	font-size:0.8em;
}
/*-----> Align any element */
.alignleft{
	display:block;
	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{
	display:block;
	position:relative;
	margin:0px;
	text-align:right;
}
/*-----> Center element, using Transform Translate methode
   Centering element (child) must have position:absolute, inside parent with display:block, pos:relative
   Element is "positioned" if it's position is anything but static. */
.tt-center{
	position:absolute;
	left:50%;top:50%;
	transform:translate(-50%, -50%);
}
/*-----> Rotate text 90deg (sidways-rl & sideways-lr hack)*/
.sidewaystxt-r{
	-ms-writing-mode:tb-rl;/* For IE 11 */
	writing-mode:vertical-rl;
}
.sidewaystxt-l{
	-ms-writing-mode:tb-rl;/* For IE 11 */
	writing-mode:vertical-rl;
	transform:rotate(180deg);
	text-align:right;
}
/* ---------------> 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:-webkit-inline; For the fucking iOS 11.3 Safari (just on iPad) */
	display:inline;
	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;}
}