/* Liquid graphic frame with six elements.
	Features:
		* Width of the frame adapts to the width of the container, be it the window or another div.
		* Height adapts to the content.
		* Corners don't overlap; so they can contain transparent graphics.
		* Easily stackable, columnable, or nestable.
		* Tested in Firefox 1.5 and Internet Explorer 6.0.2900.210.xpsp_sp2 (that's the IE6 which comes in a default, untouched Windows XP SP2 installation).
		* Validates with XHTML 1.0 Strict and CSS.

	Drawbacks:
		* Content goes between the top and bottom frames, so there's a bit of wasted space. However, in these frames you can put headers or footnotes, as long as they don't take too much space, or the graphics will break. Use at your own risk.
		* No div in the frame can have background color; if it does, and the borders/corners have any transparent element, then the background color will be seen beneath the transparency. However, there could be good effects and combinations of putting a color to .framecontent while making the right element just as wide as the worder.
		
	Bugs:
		* I tried to make it work in IE6 while still maintaining XHTML and CSS validation. However, there's a small error in IE6 which I don't know how to solve, a small misaligment in the bottom corner when there are elements floating at the sides of the frame. Probably a bug in IE6, but I can't find a workaround.

	Customizing:
		* Top-right and bottom-right graphic elements should be as wide as possible, 2000px is a good width. Put the corners on the right side of the graphic, fill the rest with the top or bottom sides of the frame.
		* Same goes for the right border tile. It should be wide to cover the content, unless you want to make the content float over the container background.
		* The width of the top-left and bottom-left corners are the left margins of frametopright and framebottomright.
		* The height of the top-left and bottom-left corners are the height of frametopright and framebottomright.
		* The graphics of the top and bottom elements aren't tiled. The left and right elements are tiled only vertically; a wide enough element will cover all the background.

	Made in April 2007 by Pi (who is someone who knows zilch of CSS). Released into the public domain.
	
*/

/* Main frame, this contains everything and the top-left corner graphic */
.frame {
	/* Be generous with the margins if the frame is alone in the window, or remove them if you're using the frame for stacking. */
	/*margin-top: 25px; 
	margin-bottom: 25px;
	margin-left: 100px;
	margin-right: 100px;*/
	min-width: 100px; /* minimum width of the frame, doesn't work in IE6 */
	background-image: url('eovf_tl.gif'); /* Top-left corner element */
	background-repeat: no-repeat;
}

/* Top frame, with the top-right element. */
.frametopright {
	margin-left: 34px; /* Width of the top-left corner element! */
	height: 34px;
	background-image: url('eovf_tr.gif'); /* Top-right corner element */
	background-position: top right;
	background-repeat: no-repeat;
}

/* Middle frame, with the left element */
.framemiddle {
	overflow: hidden;
	width: 100%; /* do not remove! */
	background-image: url('eovf_l.gif'); /* Left frame element, vertical tile */
	background-repeat: repeat-y;
}

/* Frame for the content, with the right element */
.framecontent {
	overflow: hidden;
	padding-right: 35px; /* adjust padding and margin with the side borders */
	margin-left: 23px;
	background-image: url('eovf_r.gif'); /* Right frame element, vertical tile, make it as wide as needed. */
	background-position: top right;
	background-repeat: repeat-y;
}

/* Bottom frame, with the bottom-left element */
.framebottom {
	clear: both;
	background-image: url('eovf_bl.gif'); /* Bottom-left corner element */
	background-repeat: no-repeat;
}

/* Bottom frame, with the bottom-right element */
.framebottomright {
	margin-left: 34px;
	height: 42px;
	background-image: url('eovf_br.gif'); /* Bottom-right corner element */
	background-repeat: no-repeat;
	background-position: top right;
}