@charset "utf-8";
/* CSS Document: plantata21.css  for revised scripts April 2021+ */
/* Standarised for general use in PLANTATA  (Attempt Feb 2022) */

		body
			{
			margin: 0 auto;
			font-family: Verdana, Arial, sans-serif;
			/*font-family: Garamond, Times New Roman, Times, Serif;*/
			font-size: 16px;
			font-weight: normal;
			color: #A52A2A;				/* ie brick */
			border-style:none;
			}
	

/* These two needed for Home page  */

		.leftpanel				/* initially = ID = #left  Apr 2021   Appears on left of  main2  (HOME)- top margin should agree */
			{
			width: 280px;						/*300px;*/
			margin: 20px;					/* margin and padding should agree with LEFT or CONTENT */
			/*margin-left:20px;*/					/*100px;*/
			padding: 12px 12px 16px 12px;
			color: #00008B;
			text-align: left;
			font-family: Verdana, Arial, sans-serif;
			font-size: 11px;
			background-color: #FFFF99;			/* This is yellow (left side panel)  */
			float: left;
			border: thin solid red;
			}
		
		.main2								/* Appears on right of  leftpanel (HOME)- top margin should agree */
			{
				width: 800px;  /* 800px; 400px; */                /* Allows 80 M or W across with spare */
				height: auto;
				background-color:#FFFF99;		/* This is the yellow bit */
				color: #a22;           /* brick */
				border: 1px solid #a22;
				margin: 20px;      /* 30px 5px 20px;*/
				padding: 1em 2em;
				font-size: 12px;
				font-weight: normal;
				/*float: right;*/
				clear: right;
				}


			
		.item	{			
				/*background-color: white; */
				color: #a22; 					/* brick     or  #38434e;			/* charcoal black */			
				padding: 5px;
				/*margin-bottom: 1px; */
				/*border: 1px solid #d6d9e5;*/        /* grey & a little blue */
			}
			
		.item label {
	 		  width: 12%;
			  display: inline-block;
			}
			
		.container
			{
				width: 900px;
				margin: 20px;
				background-color:#FFFF99;
				border: 1px solid #a22;			/*  not in use */
				padding:1em;		
				/*clear: left:*/	
			}
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */		




		.left
			{
			width: 180px;
			height: auto;
			margin-top: 12px;					/* margin and padding should agree with LEFT or CONTENT */
			padding: 12px 12px 16px 12px;
			color: #00008B;
			text-align: left;
			font-family: Verdana, Arial, sans-serif;
			font-size: 11px;
			background-color: #FFFF99;			/* This is yellow (left side panel)  */
			float: left;
			border: thin solid red;
			}
		
		.left img				/* to remove padding: but does not */
			{
			width: 180px;
			height: auto; 
			float: left;
			}
		
		.left p			/*  Not currently used  */
			{
			width: 94%;
			padding: 12px;
			font-family: Verdana, Arial, sans-serif;
			background-color: #f9f9f9;
			color: #607080;
			}
		
		.foot a
				{
				color: #aaaaaa;
				}
		
		hr
				{
				border:0;
				border-bottom: 1px solid #0000ff;			/* #efefef */
				height: 1px;
				}
			
		ul {padding-left: 10px;}
		
		.ul2	{
			width:800px;
			list-style-type: none;
			margin: 10px 15px 20px 40px;
			border:1px red solid;
			padding: 10px 20px;
			background-color:#FFFF99;		/* This is the yellow bit */
			}
			
		li
				{
				list-style-type: none;
				line-height: 120%;
				padding:3px 0;
				/*border: thin dashed red;*/
				}
				
				a:link {text-decoration: none;}
				a:visited {text-decoration: none;}
				a:hover {text-decoration: underline;}
				a:active {text-decoration: underline;}		/*  NB Correct order*/
		
		.searchbar
				{	background-color: #66FFFF; 
					text-align: center;
					color: red;	
					padding-top:5px;
					padding-bottom:5px;
					display: block;
					/*margin: 3px;*/
				}			
	
		.content_wide
			{
				width: 700px;
				text-align: left;
				padding-top: 8px;
				padding-bottom: 8x;
				padding-left: 8px;
				padding-right: 8px;
				border: 3px solid #00FF00;
				margin-left:4em;
				/*font-family: Verdana, Arial, sans-serif;*/
				/*line-height: 125%;*/
				color: #607080;
				background-color:#FFFF99;		/* This is the yellow bit */
			}
		
		.monkshow	
				{	background-color:#FFFF99;		/* #CCFF99  FFFFCC is yellow , so is #fff99 */
					margin: 20px;
					padding: 20px;
					text-align: left;
					color: #A52A2A;
					font-size: 12px;
				}
	
		.topmenu
				{
				text-align: left;		
				padding-right: 1em;
				font-family: Verdana, Arial, sans-serif;
				/*margin: 20px;*/
				margin-left: 20px;
				margin-top: 12px;
				margin-bottom: 4px ;
				*/
				}
			
		.topmenu a
				{
				color: #ffffff;
				text-decoration: none;
				background-color: #000000; 
				border: 1px solid #333333;
				padding: 4px;
				margin: 0px;
				}
			
		.topmenu a:hover
				{
				color: #000;
				background-color: #ccc; 
				border: 1px solid #333333;
				text-decoration: none;
				}
	
		.header			/* ID selector: only use once */
				{
				vertical-align: top;			
				padding-bottom: 11px;
				padding-left: 10px;
				padding-top: 15px;
				font-family: Georgia, Lucida, Arial, sans-serif;
				font-size: 11px;
				font-weight: lighter;
				color: #00008C;
				/* border: 2px solid #efefef; */
				/* background-color: #66FF66; */
				margin-left: 0px;
				margin-bottom: 5px;
				
				}
			
		.header a:link, a:visited	
				{ 
				text-decoration: none;
				}
	
		.title			/* Class selector: can apply to any selector */
			{
			font-size: 24px;
			font-style: italic;
			font-weight: bold;
			margin-top: 10px;
			color: #90200A;
			}
		
		.darktitle
			{
			font-size: 24px;
			font-style: normal ;
			font-weight: bold;
			color: red;  		/*  #000000; */
			background-color: #CCCCCC;
			/* border: 1px solid black; */
			padding: 6px;
			
			}
	
	
		.greybox	
					{	
					width:6em;
					background: #EEEEEE; 
					border: black solid 1px; 
					color: blue;	
					padding: 3px 8px;  
					text-decoration: none;		
					margin-left:10px;
					}			
					
		.greybox2	
					{	
					width:5em;
					background: #EEEEEE; 
					border: black solid 1px; 
					color: blue;	
					padding: 3px 8px;  
					text-decoration: none;		
					margin-left:10px;
					font-size:70%;
					}			
					


		.scaps		{
					font-variant:small-caps;}
		
		.cred 		{color: red; }
		.cblue 		{color: blue; }
		.cgreen		{color: green; }
		.cyell		{color: #ff6600; }
		.cblack 	{color: black;}    
		.brick		{color: #A52A2A; }		/* brick* */
		
		.idnum		{font-size:8px; color:#000000; }
		.idnum2 	{colour:#33ffff; }	/* For way2edit.php  */
		
		/*.dateblock	{display:inline; width:100px; margin-left:0; margin-right:50px;}*/
		
		.foot
			{
			text-align: center;
			padding: 11px;
			font-family: Verdana, Arial, sans-serif;
			font-size: x-small;
			color:#666;
			}


		.tab-r	{margin-right:10px}
		
		.tab0	{padding-left: 2em; }
		.tab1	{padding-left: 3em; }
		.tab2 	{padding-left: 8em; }
		.tab3 	{padding-left: 12em; }
		
		.tabc	{padding-left:3px; margin-left:10px; margin-right:10px; margin-top:2px}		/*Changed for Plantata: tabb is from Oblates */

		.tab30	{display:inline-block; margin-left: 30px;}
		.tab40 {display:inline-block; margin-left: 40px;}
		
		/*TABBING
		SOURCE   https://stackoverflow.com/questions/9792849/how-to-insert-spaces-tabs-in-text-using-html-css  2022-05-22
		
		To insert tab space between two words/sentences I usually use
		  and  
		--------------------------
		<span style="display:inline-block; width: YOURWIDTH in px;"></span>
		For vertical spacer:
		
		<span style="display:block; height: YOURHEIGHTin px;"></span>
		-------------------------
		.tab { 
			   display:inline-block; 
			   margin-left: 40px; 
		}
		In your HTML:
		
		<p>Some Text <span class="tab">Tabbed Text</span></p>
		-------------------------
		<span style="padding-left:68px;"></span>
		----------------------------------------------------------
		Go a step further than @Ivar and style my own custom tag like so... For me 'tab' is easier to remember and type.
		
		tab {
			display: inline-block;
			margin-left: 40px;
		}
		And the HTML implementation...
		
		<p>Left side of the whitespace<tab>Right side of the whitespace</p>
		----------------------------------------------------------------------------
		p:first-letter {
			margin-left: 20px
		}
		-----------------------------------------------------------------------------
		tab0  { position:absolute;left:25px;  }
		tab1  { position:absolute;left:50px;  }
		tab2  { position:absolute;left:75px;  }
		tab3  { position:absolute;left:100px; }
		tab4  { position:absolute;left:125px; }
		tab5  { position:absolute;left:150px; }
		tab6  { position:absolute;left:175px; }
		tab7  { position:absolute;left:200px; }
		tab8  { position:absolute;left:225px; }
		tab9  { position:absolute;left:250px; }
		tab10 { position:absolute;left:275px; }
		Then in the HTML I just use my tabs:
		
		Dog Food <tab3> :$30
		Mt Dew <tab3> :$1.75
		----------------------------------------------------------------------------------------------
		
		22 May 22  (2022-05-22)
		*/