@charset "utf-8";

/*
General styles for Nest site
© 2025+ The Nest
===========================================================================================*/

@import url( "/css/fntNoto.css" ) ;
@import url( "/css/fntCandara.css" ) ;


/* variables
------------------------------------------------------------------------------------------*/
	:root {
		/* font famillies */
		--fThin:			notoThin, Arial, sans-serif;
		--fLight:			notoLight, Arial, sans-serif;
		--fNormal:			noto, Arial, sans-serif;
		--fMedium:			notoSemibold, Arial, sans-serif;
		--fBold: 			notoBold, Arial, sans-serif;
		--fBlack: 			notoBlack, Arial, sans-serif;
		--fHeading:			candaraBold, Arial, sans-serif;
		
		/* brand colours */
		--bcBrownF:			#7e3200;
		--bcPurpleF:		#a300fe;
		--bcOrangeF:		#fe8900;
		--bcGreenF:			#82d200;
		--bcBlueF: 			#0099fe;
		--bcBrownB:			#cba58b;
		--bcPurpleB:		#d99cfe;
		--bcOrangeB:		#fdc27d;
		--bcGreenB:			#c0e480;
		--bcBlueB: 			#7dcafd;

	}


/* fonts
------------------------------------------------------------------------------------------*/
	body					{ font-family: var( --fNormal ); text-shadow: 2px 2px #fff; }
	h1, h2, h3, h4, h5		{ font-family: var( --fHeading ); font-weight: normal; }
	p, li					{ letter-spacing: 0.1ex; }
	/* headings: h1 = NEST logotype & page title | h2 = subtitle in page | h4 = page subheading & heading within nav */
	


/* global
------------------------------------------------------------------------------------------*/
	html 					{ width: 100%; }
	body					{ max-width: 1000px; margin: auto; line-height: 1.4;
								background: #fff url( '/img/brand/background.png' ) no-repeat center center; }
	header def				{ margin-top: -2em; }
	header hr				{ height: 8px; background: url( '/img/brand/stripes.png' ) repeat-x 0 0; border: 0; }
	h1 						{ margin-bottom: 0; font-size: 400%; }
	h2, h3					{ margin-bottom: 8px; }
	h2						{ margin-top: 1em; font-weight: normal; font-style: italic; font-size: 200%; 
								color: var( --bcOrangeF ); }
	h3						{ font-size: 200%; }
	p						{ max-width: 48em; }

	a						{ color: black; text-decoration: none; }
	th						{ text-align: left; }
	footer					{ clear: both; margin-top: 2em; border-top: 1px solid gray; }
	footer p				{ max-width: 100%; }


/* colours
------------------------------------------------------------------------------------------*/
	.logoBr					{ color: var( --bcBrownF ); }
	.logoP					{ color: var( --bcPurpleF ); }
	.logoO					{ color: var( --bcOrangeF ); }
	.logoG					{ color: var( --bcGreenF ); }
	.logoBl					{ color: var( --bcBlueF ); }
	

/* template
------------------------------------------------------------------------------------------*/
	#logo					{ float: left; width: 128px; height: 128px; margin-right: 64px; 
								background-image: url( "/img/brand/longLogo.png" ); background-position: -11px 0;}
	#logo:hover				{ background-position: -11px 0 !important; }
	#wrapper.narrow			{ width: 500px; margin: auto; }
	#secImg					{ float: left; margin: 0 1em 1ex 0; max-width: 240px; }
	
	/* footer */
	#admin p				{ margin-top: 0; color: gray; font-size: 0.9em; }
	#socials				{ clear: both; text-align: center; }
	#socials img			{ margin: 1ex 1em; }


	/* sections */
	.cg h1 span				{ color: var( --bcPurpleF ) !important; }
	.cg #logo				{ background-position: -292px 0; }
	.col h1 span			{ color: var( --bcGreenF ) !important; }
	.col #logo				{ background-position: -584px 0; }
	.com h1 span			{ color: var( --bcBrownF ) !important; }
	.com #logo				{ background-position: -146px 0; }
	.l h1 span				{ color: var( --bcOrangeF ) !important; }
	.l #logo				{ background-position: -438px 0; }
	.r h1 span				{ color: var( --bcBlueF ) !important; }
	.r #logo				{ background-position: -730px 0; }


/* objects
------------------------------------------------------------------------------------------*/
	#bigBull				{ font-size: 150%; }
	#bigBull li				{ margin-bottom: 1em; }



/* Nav elements
------------------------------------------------------------------------------------------*/
	/* learn more box */
	#learnMore 				{ width: 250px; float: right; margin: 0 0 1ex 1em; background: #eee; 
								padding: 0 20px; border: 2px solid gray; border-radius: 12px; 
								box-shadow: 3px 3px 5px rgba( 0, 0, 0, 0.5 ); }
	#learnMore h4, #learnMore p
							{ margin: 1ex 0 }
	#learnMore h4			{ font-size: 200%; font-weight: bold; }
	#learnMore p 			{ text-shadow: none; font-size: 150%; } 


/* Future top menu
#navTopCom {width: 140px; height: 114px; position: absolute; top: 280px; left: 20px;
	background: url("/img/widgets/navTopCom.png") 0 -114px no-repeat}
#navTopCG {width: 127px; height: 88px; position: absolute; top: 280px; left: 260px;
	background: url("/img/widgets/navTopCG.png") 0 -88px no-repeat}
#navTopL 					{width: 640px; height: 550px; position: absolute; top: 280px; left: 498px;
							background: url("/img/widgets/navTopL.png") 0 -97px no-repeat}
#navTopL					a:hover { url("/img/widgets/navTopLh.png") 0 -97px no-repeat}
#navTopCol 					{width: 640px; height: 550px; position: absolute; top: 280px; left: 736px;
							background: url("/img/widgets/navTopCol.png") 0 -106px no-repeat}
#navTopCol					a:hover { url("/img/widgets/navTopLh.png") 0 -97px no-repeat}
	
#navTopR {width: 137px; height: 106px; position: absolute; top: 280px; left: 736px;
	background: url("/img/widgets/navTopR.png") 0 -106px no-repeat}
*/
	
	#linkHome {float: left; margin-top: 1em; width: 30px; height: 60px; margin-right: 1em}
	
	#menuFoot 				{float: left; margin: 2em 0; padding: 0; font-size: 90%;}
	#menuFoot li 			{display: inline; float: left; margin: 0; margin-right: 1em; padding: 1ex 1em;}
	#menuFoot a 			{color: silver; text-decoration: none; border: none; }
	#menuFoot a:hover 		{color: white;}

	#linkCom 				{background-color: var(--bcBrownF);}
	#linkCG 				{background-color: var(--bcPurpleF);}
	#linkL 					{background-color: var(--bcOrangeF);}
	#linkCol 				{background-color: var(--bcGreenF);}
	#linkR 					{background-color: var(--bcBlueF);}
	
		
	

	/* top & bottom menus */
	nav#top					{ margin: 1em auto; text-align: center; padding: 1em 0; background: #efefef; }
	nav#top a				{ margin: 0 1em; }

	nav#foot				{ margin: auto; text-align: center; padding: 3em 0; border-bottom: 1px solid gray; 
								background: #efefef; }
	nav#foot a				{ margin: 0 1em; }
	

	/* drop down */
	#dropdown 				{ float: right; position: relative; }
	#dropdown button		{ border: none; border-radius: 5px; padding: 15px 30px; font-size: 18px; cursor: pointer; }
	#dropOptions 			{ display: none; position: absolute; right: 0; overflow: auto; background-color: #fff; 
								border-radius: 5px; box-shadow: 0px 10px 10px 0px rgba( 0, 0, 0, 0.4 ); }
	#dropdown button:hover	{ background-color: #ddd; }
	#dropdown:hover #dropOptions 	
							{ display: block; }
	#dropOptions a 			{ display: block; color: #000000; padding: 5px; text-decoration: none; padding: 20px 40px; }
	#dropOptions a:hover 	{ color: #0a0a23; background-color: #ddd; border-radius: 5px; }

	/* testimonial scroller */
	#testShow 				{ clear: both; margin: auto; width: 600px; margin: 0 0 1ex 0; background: var(--bcGreenB); 
								padding: 10px; border: 2px solid var(--bcGreenF); border-radius: 12px; 
								box-shadow: 3px 3px 5px rgba( 0, 0, 0, 0.5 ); }
#testShow h2 				{ margin-top: 0; border-bottom: 1px solid var(--bcGreenF); } 
#testShow div 				{ display: none; }
#testShow h3 				{ margin-bottom: 1ex; } 
#testShow p 				{ text-shadow: none; margin: 0; } 
.test hr 					{ margin: 1em 4em; border-top: 1px solid silver; } 
.testBut 					{ float: right; margin-left: 1ex; }



/* page-specific
------------------------------------------------------------------------------------------*/
	/* timetable */
	#timetable				{ margin-bottom: 2em; font-size: 120%; }
	#timetable td			{ vertical-align: top; padding: 1ex 0; border-top: 1px solid silver; }
	
	/* pricing */
	#priceTable				{ float: left; margin-bottom: 2em; width: 600px; font-size: 120%; }
	#priceTable tr:hover td	{ background: var( --yellowBG ); }
	#priceTable td			{ padding: 1ex 0; border-top: 1px solid silver; }
	#priceTable tr th:nth-child( 2 ), #priceTable tr td:nth-child( 2 )
							{ text-align: right; }





/* responsive
------------------------------------------------------------------------------------------*/
	@media( max-width: 1000px ) {
		body 				{ width: 95vw; }
	}	
	
	@media( max-width: 700px ) {
		#learnMore			{ float: none; margin: 0 0 1em 0; font-size: 80%; }
	}

	@media( max-width: 600px ) {
		#testShow, #priceTable
							{ width: 90vw; }
	}