/*	**************************************************
		CSS Main style 
		Site: kiwi.yt
		File: https://kiwi.yt/.data/css/main.css
	********************************************** */



@import url(normalize.css); /* browser style normalize */
@import url(variables.css); /* css variabler */
@import url(system.css); /* system style (body nav footer scrollbar default_resets) */

@import url(fontawesome/css/fontawesome.css); /* font awsome icons */
@import url(fontawesome/css/solid.css);
@import url(fontawesome/css/brands.css);


a{	color: var(--Link_Text); background-color: transparent;
	text-decoration: none; 
	font-weight: calc(var(--Text_Font_Weight) + 200); 
	cursor: pointer;
	display: inline-block;
	margin: 0; padding: 0;
	outline: none; /* Selected outline off */ }

a:hover, .Selected { background-color: var(--Hover_Background); } /* Background color change on Hover */	


input
{	background-color: var(--Main_Background);
	border: 1px solid var(--Border_Colour);
	color: var(--Text_Colour);
	width: 98%;
	padding-bottom: 5px;
	
	}


main a img { padding: calc(var(--Base_Padding)/4); padding-bottom: 0; }

h1, h2, h3, h4 { margin: 0; padding: 0;  text-align: left; }
main h1 { color: var(--Heading_Text); font-size: var(--Text_Medium);}
h2{ background-color: var(--Heading_Background); color: var(--Heading_Text); 
	font-size: var(--Text_Medium); padding: calc(var(--Base_Padding) / 2);  }


h3 { color: var(--Heading_Text); font-size: var(--Text_Medium); } 
/*{	font-size: var(--Text_Small); 
	margin: 0px 0px 0px 0px; /* (T R B L) */	
/*	line-height: 1;
	padding: calc(var(--Base_Padding) / 5) 0px calc(var(--Base_Padding) / 4) calc(var(--Base_Padding) / 4); /* (T R B L) */
	/*vertical-align: text-top;*/
/*	color: var(--Heading_Text);
	background-color: var(--Heading_Background);
}*/

h4 { color: var(--Heading_Text); font-size: var(--Text_Medium); left: calc(var(--Base_Padding) - (1.8 * var(--Base_Padding))); }

hr { border: none; height: 5px; padding: 0; margin: 0; }

i { color: var(--Icon_Colour); font-style: normal; font-weight: 1000; } /* Menu label icon */
i.FontAwsomeIcon { font-size: 60pt; }

p {	
	/*clear: both;*/
	margin: calc(var(--Base_Padding) / 2) 0 calc(var(--Base_Padding) / 2) calc(var(--Base_Padding) / 2); /* (T R B L) */	
	padding: 0; text-align: justify;
	text-indent: calc(var(--Base_Padding) / 2 - var(--Base_Padding)); }

.SmallIcon 
{	width: calc(var(--Icon_Size) / 1.5); 
	height: calc(var(--Icon_Size) / 1.5); }



.BulletPoint
{	text-indent: -20px; /*calc(var(--Base_Padding) / var(--Base_Padding) - var(--Base_Padding) + 10); /**/
	margin: 0 0 0 calc(var(--Base_Padding) / 2); /* (T R B L) */ 
	padding-left: calc(var(--Base_Padding) / 1.5);

	display: block; }

p.Clipped { display: block; text-indent: 0; text-align: justify; margin-top: calc(var(--Base_Padding) / 10); }

p.Heading {  margin: 0; text-align: left; display: inline; }
p.Padded {	padding: calc(var(--Base_Padding) / 2); }	

p a { padding-left: var(--Base_Padding); padding-right: calc(var(--Base_Padding) / 2); }

.SmallText { text-size: var(--Text_Small); }


section /* Grid layout section (1/2/3/4 column grid) ______________________________________________________ */
{	margin: calc(var(--Base_Padding)) 0 calc(var(--Base_Padding)) 0; /* (T R B L) */ 
	display: grid; gap: calc(var(--Base_Padding) / 2);
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	list-style: none; padding: 0; }
	
#MyShortcuts { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); overflow: hidden; word-break: break-word; white-space: normal; }
/*#MyShortcuts a {display: inline-block; overflow: hidden;}*/

summary /* Section item (grid cell) _______________________________________________________________________ */
{	background-color: var(--Item_Background);
	border: 2px solid var(--Border_Colour);
	padding: 0; }

.SmartWidth90 { width: 90%; } /* Image width fix */


summary p { padding: 0 calc(var(--Base_Padding) / 2) 0 calc(var(--Base_Padding) / 2); }
summary a img { max-width: 100%; object-fit: fill; height: 200px; }
summary .Shortcut { height: 75px; width: 75px; border: none; }
h2 img { margin-bottom: calc(var(--Icon_Size) / 4 - var(--Icon_Size) / 2); }

div a img, div img { max-width: 100%; object-fit: fill; width: auto; height: auto; width: 100%; vertical-align: middle;}
div a { display: inline; }
/*div.FloatRight { width: 30%; float: right; )*/
.MiniGallery { width: 30%; margin-left: calc(var(--Base_Padding) / 2); }

figure /* Big Picture container ___________________________________________________________________________ */
{	height: 100%; width: 100%;
	left: 0; top: 0;
	position: fixed;
	text-align: center;
	visibility: visible;
	background-color: var(--Menu_Background);
	 }
figure a { float: right; font-size: var(--Text_Medium); padding:var(--Menu_Item_Padding); color: var(--Menu_Text); } /* Close link */

#TheBigPicture img /* Big picture ____________________________________ */
{	top: 0; left: 0;
	max-width: 99%;
	max-height: 99%; }
	
.FloatLeft { float: left; margin-right: var(--Base_Padding); margin-top: calc(var(--Base_Padding) / 4); }
.FloatRight { float: right; }

#TheBigPicture
{	visibility: hidden;
	
}

/*#TheBigPicture a { color: var(--Menu_Text); }*/

 /*	**************************************************
		Media queries begin
	********************************************** */
@media all and (max-width : 600px) /* SMALL SCREEN _______________________________________________________________________________ */
{
	main div.FloatRight { float: none; width: 99%; }
	main div.FloatLeft { float: none; width: 99%; }
	
	p .FontAwsomeIcon { display: none; }
}