/*
		Notes
		
		Elements will automatically inherit properties applied to its parent elements; inherited properties can be overridden by specifying within the child style rule
		To specify between two of the same element, add the "class=[name]" attribute to the element tag to point to a specific style rule of the same name
		To override the styles of all elements that contain a particular class, just define the style rule without specifying an element type at all
		Styles applied using class overrides are NOT cumulative! "orange" does not inherit the font-family change from p.blue (which should be inheriting it from p)
		Elements can be styled by multiple classes by specifying as such: class ="blue underline arial etc..."
		Therefore, theoretically, every styling choice used for a page could be defined as a solo style rule in head, and then applied in a mix-match fashion to all elements in head using classes
		
		font-family can contain multiple fonts, which the browser will try to load in the specified order. Fail-safes
		font-weight options: lighter, normal, bold, bolder
		text-decoration options: underline, line-through, overline, none (parameters can be mix-matched)
		font-style options: italic, oblique (mostly identical)
		
		16 PRIMARY COLORS:
		Aqua, Black, Blue, Fuchsia
		Gray, Green, Lime, Maroon
		Navy, Olive, Purple, Red
		Silver, Teal, White, Yellow
		
		RGB Format: (Most based format)
		rgb(r,g,b);
		
		HEX Format: (Whatever the hell this means)
		#ffcf79
		Note to future self: if hex codes prove more versatile (they won't), make a palette html file to save & reference from.
		
		font-size options:
		
		px = pixel height
		
		% = percent. When size is specified as a percent, it takes the inherited size value and scales it by that percent.
		
		em = multiplier. Identical to percent.
		
		keywords: xx-small, x-small, small, medium, large, x-large, xx-large
		
		line-height can use % and em inputs.
		
		#Box Model Format & Parameters:
		
		Four Boxes (Outer -> Inner): Margin, Border, Padding, Content
		
		Margin Parameters: (Specifies the distance between the element extents / border and the webpage extents)
			margin
			margin-left (Direction-specific parameters are NOT cumulative with the generic -- they override it and are absolute values!)
			margin-right
			margin-top
			margin-bottom
			
			Directed Properties:
				auto: splits available space equally between both sides (centers)
		
		Border Parameters:
			border-color
			border-width (thin, medium, thick, or px)
			border-style (solid, dashed, dotted ,double, groove, ridge, inset, outset)
			border = black 5px solid (above properties can be combined like so)
			border-radius (curving corners)
			border-radius = topleft, topright, bottomright, bottomleft (Also Combinable)
			
			border-bottom, border-left, border-right, border-top prefixes can be specified on all of the above properties to manipulate only one side/corner of the border
			
		
		Padding Parameters: (Specifies the distance in pixels between the content and the element extents / border
			padding
			padding-left
			padding-right
			padding-top
			padding-bottom
			
			"Padding" can take four values and will function the same as specifying all four directed values (same for margin), like so:
			Padding = top, right, bottom, left
		
		Content Parameters:
			background-color
		
		text-align options: left, right, center
		
		Use <div> to target several elements & separate the style of a page (in the html file)
		Use <span> to target specific text within an element
		
		Adjacent <div> elements use the greater of their two margin values, inline images use the sum total of their two margin values.
		
		Fixed positioning is useful for top bars to follow the user down the page
		
		position: fixed, absolute, relative, static (static is default)
		
		Position is paired with top / bottom, left / right properties to define positioning
		
		line-height used to match element sizes for vertical centering
		
		overflow: scroll, hidden
		
		display: inline, inline-block, block, table, table-row, table-cell
		
		
		Cursor Options:
		cursor: default, inherit, auto, url, crosshair, pointer, move, text, help, hand, no-drop, alias, progress, wait, grab, grabbing, copy, cell, spinning, none
		Cursor can also accept .ico custom files
		*/	

	.nav {
		
		background-color: darkgreen;
		height: 45px;
		font-size: 30px;
		font-weight: bold;
		text-align: center;
		font: Verdana;
		
	}
	
	.nav li {
		
		display:inline;
		padding: 25px;
		vertical-align:middle;
		
	}
	
	.nav li a {
		
		padding: 5px 0px 5px 0px;
		
	}

	.investment {
		
		height: 700px;
		overflow: scroll;
		
	}

	h1.banner {
		
		position: fixed;
		width: 1080px;
		top: 20px;
		left: 50%;
		background-color: black;
		border: 20px solid silver;
		padding-top: 10px;
		padding-bottom: 30px;
		margin: 10px 0px 10px -540px;
		cursor: help;
		
	}

	.witness {
		border: 20px solid magenta;
		
		position: absolute;
		top: 700px;
		left: 1500px;
	
	}
	

	.crop_price {
		
		width: 50%;
		float: left;
		font-size: 30px;
		
	}
	
	.seed_price {
		
		width: 50%;
		float: right;
		font-size: 30px;

	}

	h2.matrix {
		
		background-color: rgb(100,100,0);
		border: 20px dotted aqua;
		text-align: center;
	
	}
	

	.tomato {
		
		background-image: url(image/tomato.png);
		border: 20px dotted aqua;
		text-align: center;
		font-weight: bolder;
		margin-left: auto;
		margin-right: auto;
		color: white;
	}

	#crops {
		
		font-family: Comic Sans MS;
		
	}

	body {
		
			background-color: maroon;
			color: green;
			font-family: Verdana, Arial, Geneva, Arial Black;
			border-color: aqua;
			border-width: 20px;
			border-style: ridge;
			margin:0px;
		
		}


	.imagesneed {
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding: 10px;
		background-color: silver;
		border-color: Fuchsia;
		border-width: 10px;
		border-style: solid;
		border-radius: 100px;
		border-top-left-radius: 0px;
		border-bottom-right-radius: 0px;
		cursor: crosshair;
		
		}
	
	.imagesneed2 {
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding: 10px;
		background-color: silver;
		border-color: Fuchsia;
		border-width: 10px;
		border-style: solid;
		border-radius: 100px;
		border-top-left-radius: 0px;
		border-bottom-right-radius: 0px;
		cursor: url("image/lol.ico"), crosshair;
		
		}

		h1 {
			font-size: 45px;
			font-weight: bolder;
			text-decoration: underline;
			font-style: oblique;
			text-align: center;
		
		}

		h2 { 
		
			background-color: rgb(0,128,255);
			color: white;
			
		}
				
		p { 
		
			color: red;
			font-size: 25px;
			border: 20px solid blue;
			background-color: rgb(64,0,0);
			padding:75px;
			border-radius: 20px 10px 15px 0px;
			border-top-style: double;
		}
	
		#blue { 
		
			color: blue;
			font-weight: lighter;
			text-decoration: overline;
			border-color: lime;
			border-width: 5px;
			border-style: solid;
			padding:75px;
			margin: 700px;
			margin-top: 100px;
		
		}
		
		.orange {
		
			color: orange;
			font-weight: bold;
		
		}
		
		.underline {
		
		text-decoration: underline;
		
		}
		
		
		.highlight {
			
				font-size: 100px;
				font-color: red;
				background-color: rgb(0,0,0)
			
		}
		
		
		/*  These style rules must be defined in this order!! */
		/* These pseudo-classes (defined by colon) do not need to be specified in the HTML */
		
		a:link {
			
			color:blue;
			
		}
		
		a:visited {
			
				color:purple;
			
		}
		
		a:hover {
			
			color:orange;
			position: relative;
			/*top: -0.2em;*/ 
			background-color: silver;
			
		}