@charset "UTF-8";


/* CSS Reset
-------------------------------------------------------------- */

html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 
pre, a, abbr, acronym, address, code, del, dfn, img, q, dl, dt, dd, 
ol, ul, li, fieldset, form, label, legend, table, caption, tbody, 
tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	}

:focus {outline: 0;}


/* Default Setting
-------------------------------------------------------------- */

* { margin: 0; padding: 0; }
html { height:101%; }

body 
{
font: normal 0.75em/1.6em Helvetica, "Helvetica Neue", Arial, Geneva, sans-serif;
color: #999;
background-color:#fff;
margin: 0;
padding: 0;
}

@media handheld { body { font-size: small; } }


/* Layout
-------------------------------------------------------------- */

#wrap { margin: auto; width:900px; }
#main { width: 500px; float: left; }
#side { width: 360px; float: right; }

div.clear { clear: both; }
.left { float: left; }
.right { float: right; }


/* Menu
-------------------------------------------------------------- */	

#nav { height: 80px; overflow: hidden; background: transparent url(assets/menu.png) no-repeat left top; }
#nav #menu { display: block; list-style-type: none; float: left; }
#nav #menu li { display: block; height: 80px; float: left; }
#nav #menu li a { display: block; float: left; height: 80px; text-decoration: none; text-indent: -5000px; overflow: hidden; }


/* ------ tab widths ------ */

#nav #menu li.home a 		{ width: 464px; }
#nav #menu li.products a 	{ width: 88px; }
#nav #menu li.about a 		{ width: 61px; }
#nav #menu li.news a 		{ width: 52px; }
#nav #menu li.stockists a	{ width: 91px; }
#nav #menu li.contact a 	{ width: 79px; }
#nav #menu li.buy a 		{ width: 65px; }
	
#nav #menu li a.active,
#nav #menu li a:hover { background: transparent url(assets/menu.png) no-repeat left top; }

/* ------ tab start points ------ */

#nav #menu li.home a.active,
#nav #menu li.home a:hover			{ background-position: -0px bottom; }
#nav #menu li.products a.active,
#nav #menu li.products a:hover		{ background-position: -464px bottom; }
#nav #menu li.about a.active,
#nav #menu li.about a:hover			{ background-position: -552px bottom; }
#nav #menu li.news a.active,
#nav #menu li.news a:hover			{ background-position: -613px bottom; }
#nav #menu li.stockists a.active,
#nav #menu li.stockists a:hover		{ background-position: -665px bottom; }
#nav #menu li.contact a.active,
#nav #menu li.contact a:hover 		{ background-position: -756px bottom; }
#nav #menu li.buy a.active,
#nav #menu li.buy a:hover  			{ background-position: -835px bottom; }
		

/* Headings
-------------------------------------------------------------- */
	
h1	{ width: 900px; height: 450px; margin-bottom: 15px; text-indent: -5000px; }

h1.products 	{ background-image: url(assets/banner-products.jpg); }
h1.about 		{ background-image: url(assets/banner-about.jpg); }
h1.news 		{ background-image: url(assets/banner-news.jpg); }
h1.stockists	{ background-image: url(assets/banner-stockists.jpg); }
h1.contact 		{ background-image: url(assets/banner-contact.jpg); }
h1.shop 		{ background-image: url(http://fancyflats.com.au/assets/banner-shop.jpg); }

#banner { width: 900px; height: 630px; }

h2 { width: 500px; height: 25px; text-indent: -5000px; }

h2.products 	{ background-image: url(assets/title-products.png); margin-bottom: 15px; }
h2.about		{ background-image: url(assets/title-about.png); margin-bottom: 15px; }
h2.news			{ background-image: url(assets/title-news.png); margin-bottom: 15px; }
h2.stockists	{ background-image: url(assets/title-stockists.png); margin-bottom: 15px; }
h2.contact 		{ background-image: url(assets/title-contact.png); margin-bottom: 15px; }
h2.shop 		{ background: url(http://fancyflats.com.au/assets/title-shop.png) repeat-x #fff; height: 30px; margin-bottom: 5px;}

h3 { font-size: 1.6em; margin-bottom: 15px; }
h3, p strong { font-weight: normal; font-family: Times; color: #666; }


/* Styles
-------------------------------------------------------------- */

p { margin-bottom:15px; }
p em { font-style: oblique; }
p strong { font-size: 1.25em;  }
p img { margin-bottom: 15px; }
	
a { color: #403c3c; text-decoration: none; }
a:hover { text-decoration: underline; }

hr { color: #ccc; background: #ccccc9; border: 0; height: 1px; margin: 20px 0; }


/* Footer
-------------------------------------------------------------- */		

#footer, #home-footer {
	font-size: .8em;
	height: 80px;
	padding-top: 5px;
	width: 900px;
	}	

#footer { margin-top: 30px; border-top: 1px solid #e9e9e9; text-align: right; }

#footer a, #home-footer a { color: #777; }
#footer a:hover, #home-footer a:hover { text-decoration: underline; }