/*css layout formatting done by mtness.net*\
    for http://thepetalworkshop.com
\*              2007-06-20                */

* { margin: 0; border: 0; padding: 0; }

body {
	font-family: georgia, verdana, helvetica, arial, sans-serif;
	font-size: 1em;
	color: #829BB7;
	text-align: center; 
	background: fixed center repeat url(img/background_pattern.gif);
}


@media screen {
	/* Layout rules */  
	.equal
	{
		display:table;
		border-collapse:separate;
	}
	.row
	{
		display:table-row;
	}
	

	/* styling rules */
	#header
	{
		position: relative;
		margin: 0px auto;
		width: 816px;
		height: 196px;
		border: solid 0px #333;
		color: #829BB7;
		background: top left repeat-y url(img/main_bg.png);
	}
	
	#logo 
	{ 
		position: relative;
		top: 0;
		left: 145px;
		width: 530px;
		height: 143px;
	}
	#curlicue_header_left
	{
		position: absolute;
		top: 101px;
		left: 8px;
		width: 136px;
		height: 95px;
		background: top left no-repeat url(img/curlicue_header_left.jpg);
	}
	#curlicue_header_right
	{
		position: absolute;
		top: 101px;
		right: 8px;
		width: 135px;
		height: 95px;
		background: top left no-repeat url(img/curlicue_header_right.jpg);
	}
	#menu
	{
		position: absolute;
		top: 143px;
		left: 143px;
		width: 530px;
		height: 54px;
		background: top left no-repeat url(img/menuX.jpg);
	}

	#nav li
	{
		margin: 0; 
		padding: 0;
		display: block;
		list-style-type: none;
		z-index: 333;
	}
	
	
	#nav #services a,
	#nav #prices a,
	#nav #studio a,
	#nav #contact a	{ float: left; height: 0px; color: #666; padding: 53px 0 0 0; overflow: hidden; } 

	#nav #services a:hover,
	#nav #prices a:hover,
	#nav #studio a:hover,
	#nav #contact a:hover	{ background-position: 0 -53px; } 	
	
	#nav #services a:active, #services a.selected,	
	#nav #prices a:active, 	 #prices a.selected,	
	#nav #studio a:active,	 #studio a.selected,	
	#nav #contact a:active,  #contact a.selected	{ background-position: 0 -53px; }	
	
	#sercices a, #prices a, #studio a, #contact a { display: block; position: absolute; top: 0;  height: 53px; } 
	#services a { left: 0px; width:  134px; background: top left no-repeat url(img/services.jpg); }
	#prices a	{ left: 134px; width: 124px; background: top left no-repeat url(img/prices.jpg); }
 	#studio	a 	{ left: 258px; width: 128px; background: top left no-repeat url(img/studio.jpg); }
	#contact a	{ left: 385px; width: 145px; background: top left no-repeat url(img/contact.jpg); }

	.equal
	{
		margin:0 auto; 
		border-spacing:0px;
		text-align: left;
		width: 816px; 
	}
	.row div
	{
		border: solid 0px #333;
	}

	.row .two
	{
		background: top left repeat-y url(img/main_bg.png);
		padding: 0 180px 64px 180px;
	}
	
	#content { text-align: center; }
 	
	#content h1 { font-size: 1.2em; padding: 0 0 8px 0; }
	#content h2 { font-size: 1em; }
	#content h3 { font-size: 1.1em; }
	#content h4 { font-size: 1em; font-style: normal; }
	#content h5 { font-size: 1.05em; font-style: normal; }
	#content h6 { font-size: 1em; font-style: normal; }
	#content p  { font-size: 0.8em; padding: 0 0 16px 0; }
	#content a  { color: #777; margin: 0; }
	#content em { font-style: normal; color: #fff; }
	#content ul { list-style: none; }
	#content li { margin-bottom: 5px; }

	#content table { margin: 0px auto; width: 313px; font-size: 0.8em; }
	#content table td { text-align: left; }
	#content table td.price { text-align: right; }

	#footer
	{
		margin: 0px auto;
		width: 816px;
		height: 32px;
		margin-bottom: 32px;
		background: top left no-repeat url(img/footer_bg.png);
	}

	#curlicue_bottom
	{	
		position: relative;
		top: -24px;
		margin: 0px auto;
		width: 244px;
		height: 48px;
		background: top left no-repeat url(img/curlicue_bottom.png);
	}
	#legal
	{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		border: 0px solid #000000;
		padding: 2px 0;
		font-size: 0.7em;
		text-align: center;
		z-index: 21;
		background: #F1F4F6;
	}
	#legal a { color: #060606; }
	#legal a:link{ text-decoration: none;}
	#legal a:visited{ text-decoration: none;}
	#legal a:hover  { text-decoration: underline;}
	#legal a:active { text-decoration: none;}
	
	#mtness
	{
		position: fixed;
		bottom: 3px; /* fix for opera */
		right: 0;
		border: 0px solid #000000;
		z-index: 23;
	}

}