/*	============================================
	ALL LISTS 
	Unicodes:
	small: > 203A < 2039
	big: > 276F < 276E
	Small: circle 2022 arrow 2023  dot 2027 
	squre big 25A0, squre medium 25FE, squre small 25AA, squre duble 25A3
	Big upp 25B2, down 25BC
	Small upp 25B4, down 25BE
	arrow upp dotted 21E1
	arrow down dotted 21E3
	folder: 1F4C1
	============================================ */
/*
	Is only used in filmsList.asp - might be replaced by DIV
*/
.noList ul,
.noList li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	clear: both !important;
}

/*	============================================
	LISTS IN MAIN MENUS - and all others Links
	============================================ */
.listWrap {
	font-family: "Roboto Condensed", Roboto, Arial, Helvetica, sans-serif;
	clear: both;
	margin-bottom: 25px;
}

/*	Basic stytles - Common to All lists and menus except for Main accordion menus for text classes 
================================ */
.listWrap ul {
	clear: both;
	margin: 0 0 6px 20px;
	padding: 0;
	list-style: none;
}

.listWrap ul ul {
	margin: 0;
	margin: 0 0 0 25px;
	padding: 0;
}

.listWrap li {
	margin: 0;
	padding: 3px 0;
}

.listWrap li a {
	display: block;
	position: relative;
	padding: 0 0 0 1em;
	line-height: 125%;
	color: #0b6daf;
}

.listWrap li a.open,
.listWrap li a:hover {
	color: #F2352E;
}

.listWrap li > a::before {
	content: "\25AA";
	position: absolute;
	font-size: 0.8em;
	left: 0;
	top: 0;
}

/* Define the height of All lists */
.listWrap li a span {
	color: #909090;
}

.listWrap li div span,
.listWrap h2 span,
.listWrap h3 span {
		display: block;
}

.listWrap form {
	background: #909090;
	background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 1));
	text-align: center;
	padding: 6px 4px;
	margin: 2px 0;
}

/*	List Headers
	Might includ links to archives
=============================== */
.listWrap h2 {
	position: relative;
	clear: both;
	cursor: pointer;
	font-size: 1.1em;
	margin: 0 0 4px 0;
	padding: 6px 0 6px 20px;
	background-color: transparent;
	background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
}

.listWrap h2.selected {
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

/* Use icans on the left of main lists (change the padding in H2 and eventually the margin in UL)
=============================== 
*/


.listWrap h2::before {
	content: " \25BE";
	position: absolute;
	left: -0.25em; top: 0.25em;
}
.listWrap h2.selected::before {
	content: "\25B4";
	position: absolute;
}

/*	List of second and third level with or without Accordion effect 
	Might includ links to archives
================================ */
.listWrap h3 {
	position: relative;
	clear: both;
	cursor: pointer;
	font-size: 1em;
	padding: 3px 0 3px 25px;
	margin: 0;
}

.listWrap h3::before {
	content: "\25BE";
	position: absolute;
	font-size: 0.8em;
	left: 0;
	top: 0.1;
}

.listWrap h3.selected::before {
	content: "\25B4";
}

.listWrap h3.noSlide {
	cursor: inherit;
	padding: 0;
}

.listWrap h3.noSlide::before {
	content: "";
}

.listWrap h4 {
	position: relative;
	clear: both;
	cursor: pointer;
	font-size: 1em;
	padding: 0 0 0 18px;
	margin: 3px 0;
	line-height: 100%;
}

.listWrap h4.noSlide {
	cursor: inherit;
	padding: 0;
}

.listWrap h4::before {
	content: "\203A";
	position: absolute;
	left: 0;
	top: 0;
}

.listWrap h4.selected::before {
	content: "\203A";
	transform: rotate(90deg);
}

.listWrap h4.noSlide::before {
	content: "";
}

/*	For main navigation menu with links to text
	A folder image open the archive of related class 
================================ */
.listWrap a.archive {
	float: right;
	width: 1em;
	height: 1em;
	padding: 0;
	margin: 2px 0 0 6px;
	text-align: right;
	vertical-align: middle;
	opacity: 0.65;
	z-index: 10;
	background: #2ea3f2;
}

.listWrap a.archive::before {
	content: url('../imgPG/sx_svg/sx_svg/sx_folder.svg');
}

.listWrap a.archive:hover {
	opacity: 1;
}

.navLayers a.archive {
	margin: 0 6px;
}


/* Increase the margins of lists - used in Forum
*/
.listMargins li a {
	display: inline-block;
	font-weight: bold;
	color: #0b6daf;
}

.listMargins li a:hover {
	color: #F2762E;
}
.listMargins li li a {
	font-weight: normal;
}
.listMargins li li a::before {
	content: "»";
}

.listMargins li a span {
	font-size: 0.8em;
}

.listMargins ul ul {
	margin: 0.6em 0 0.6em 2.5em;
}

/*	===================================
	NAVIGATION BY TABS -
	Are placed Within .listWrap - "Roboto Condensed", "Ubuntu Condensed"
=========================================*/
.navTabs {
	font-family: "Roboto Condensed", arial, helvetica, sans-serif;
	clear: both;
	margin: 0;
	font-size: 1em;
	font-weight: bold;
}

.navTabs ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.navTabs li {
	display: inline-block;
	padding: 0;
	margin: 0 10px 0 0;
	cursor: pointer;
	border-bottom: 3px solid transparent;
	vertical-align: baseline;
	line-height: 125%;
}

.navTabs li span {
	display: inline-block;
	padding: 6px 0;
	margin: 0;
	color: #999;
}

.navTabs li.selected {
	border-bottom: 3px solid #999;
}

.navTabs li:hover:not(.selected) span {
	color: #333 !important;
}

.navLayers {
	clear: both;
	margin: 0 0 20px 0;
	border-top: 3px solid #ddd;
	margin-top: -3px;
}

.navLayers>ul {
	margin: 0;
	padding: 10px 0;
	list-style: none;
	display: none;
	max-height: 448px;
	overflow-x: hidden;
	overflow-y: auto;
}

/*	============================================
	Page navigation by arrows - Text Navigation Pages
	============================================ */
ul.listFloatWide {
	width: 100%;
	list-style: none;
	padding: 0;
	margin: 0;
}

ul.listFloatWide::after {
	content: "";
	clear: both;
	display: block;
}

ul.listFloatWide li {
	float: left;
	width: 60%;
	text-align: center;
}

ul.listFloatWide li:first-child {
	width: 20%;
	text-align: left;
}

ul.listFloatWide li:nth-child(2) {
	vertical-align: text-bottom;
}

ul.listFloatWide li:last-child {
	width: 20%;
	text-align: right;
}

/*	============================================
	FLOATING div that can include LISTS
	Is used in PS Superior to include Ads and Lists 
	============================================ */
.listFloat {
	float: right;
	width: 40%;
	text-align: left;
	line-height: 125%;
	margin: 0px 0 10px 15px;
	display: table;
	table-layout: fixed;
}

.listFloat img {
	max-width: 100%;
}

.listFloat iFrame.youtubeFrame,
.listFloat object,
.listFloat embed {
	width: 100%;
	height: 192px;
}