/* CSS Document */
/* Blind Factory */
/* Lewis 2009 */

/* No longer supporting Internet Explorer 6*/
#ie6warning { display: none; }

/* Layout & Colours */
#sitecontainer {
	margin: 10px auto;
	width: 964px;
	background-color: #FFFFFF;
}

#header {
	background: url(/images/header-bg.jpg) no-repeat scroll center top;
	float: left;
	position: relative;
	width: 964px;
	height: 153px;
}

#nav {
	background: url(/images/header-sub.jpg) no-repeat scroll center top;
	float: left;
	position: relative;
	width: 964px;
	height: 34px; /* actually 36px but there's a rogue image pixel so clip it, ie6 odd no bug req 2px clip */
}

#login_status {
	position: relative;
	float: right;
	top: -120px;
	right: 1px;
	background-color: #fff;
	padding: 10px;
}

#content {
	clear: left;
	margin-bottom: 10px;
	padding: 5px;
}

#content #crumbs {
	position: relative;
	height: 120px;
}

ul.list {
	list-style: circle outside;
	margin: 1em;
	margin-left: 3em;
	
}

#content .fp {
	float: left;
	display: inline;
	margin-left: 70px;
	margin-bottom: 20px;
	width: 360px; /*img=360*/
	height: 460px; /*img=460*/
}

#content .fpp {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 800px; /*img=800*/
	height: 200px; /*img=200*/
}

#content .fp, #content .fpp { position: relative; }

#content .fp p, #content .fpp p, #content .fp h3, #content .fpp h3 {
	position: absolute;
	left: 0px;
	right: 0px;
	padding: 5px;
}
#content .fp p, #content .fpp p { bottom: 0px; }
#content .fp h3, #content .fpp h3 { top: 0px; }

/* Contain any padding overlaps or oversized images */
div.fp, div.fpp { overflow: hidden; margin-bottom: 10px; }

#footer {
	background-color: #fff;
	clear: both;
	padding-bottom: 50px;
}
#footer .copyright { margin-bottom: 5px; }

/*------------*/
/* Navigation */
/*------------*/
ul#navit {
	position: absolute; /* Position right to allow dynamic addition/removal of new list elements (links) */
	right: 3px; 
	bottom: 0px;
	height: 34px; /* should be 36 but there's a rogue pixel in image so clip it. Odd no intros 1px IE 6 bug so clip 2px :(*/
}
ul#navit li {
	display: block;
	float: left; /* Float left to keep correct list element order */
	width: 90px;
	text-align: center;
	height: 34px;
	background: url(/images/grey-button.gif) no-repeat scroll center top;
}
ul#navit li a {
	display: block;
	float: left;
	width: 90px;
	height: 34px; /* should be 36 but there's a rogue pixel so clip it */
	outline: none; /* remove outline dots in ff */
}

ul#navit li.home a.active, ul#navit li.home a:hover { background: url(/images/yellow-button.gif) no-repeat scroll center top; color: #333; }
ul#navit li.products a.active, ul#navit li.products a:hover { background: url(/images/red-button.gif) no-repeat scroll center top; color: #fff; }
ul#navit li.fabrics a.active, ul#navit li.fabrics a:hover { background: url(/images/indigo-button.gif) no-repeat scroll center top; color: #fff; }
ul#navit li.portfolio a.active, ul#navit li.portfolio a:hover { background: url(/images/orange-button.gif) no-repeat scroll center top; color: #fff; }
ul#navit li.about a.active, ul#navit li.about a:hover { background: url(/images/blue-button.gif) no-repeat scroll center top; color: #fff; }
ul#navit li.contact a.active, ul#navit li.contact a:hover { background: url(/images/violet-button.gif) no-repeat scroll center top; color: #fff; }
ul#navit li.repairs a.active, ul#navit li.repairs a:hover { background: url(/images/green-button.gif) no-repeat scroll center top; color: #fff; }
/*----------------*/
/* End Navigation */
/*----------------*/

/*--------------------------*/
/* Product List Navigation  */
/*--------------------------*/
ul#productnav {
	clear: both;
	width: 570px; /* Set for line-wrap at appropriate point  */
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
}
ul#productnav li {
	position: relative;
	float: left;
	height: 174px; /* Keep it even.. IE6 doesn't like odd numbers */
	width: 175px;
	overflow: hidden;
	margin: 2px;
}
ul#productnav li p { /* Clumsy but it's cross browser */
	position: absolute;
	width: 175px;
	height: 35px;
	line-height: 35px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	text-align: center;
}

ul#productnav li.vertical p { background: #0033FF; }
ul#productnav li.venetian p { background: #009933; }
ul#productnav li.roller p { background: #CC0000; }
ul#productnav li.roman p { background: #FF9900; }
ul#productnav li.perfectfit p { background: #662D91; }
ul#productnav li.velux p { background: #EE88EE; }
ul#productnav li.panel p { background: #FFFF99; color: #333; }

ul#productnav li p a, ul#productnav li p a:hover { color: #fff; }
ul#productnav li.panel p a, ul#productnav li.panel p a { color: #333; }

/*-----------------------------*/
/* End Product List Navigation */
/*-----------------------------*/

/*----------------*/
/* Thumbnail List */
/*----------------*/

.thumbnails {
	width: 870px;
	margin: auto;
	padding: 15px;
	clear: both;
}
.thumbnails li {
	float:left;
	position: relative;
	margin-right: 5px;
	margin-bottom: 5px;
	width: 133px;
	height: 133px;
	overflow: hidden;
	border: 1px solid #999;
	padding: 2px;
}

.thumbnails a {
	display: block;
	float: left;
	width: 133px;
	height: 133px;
	overflow: hidden;
	line-height: 100px;
	position: relative;
	z-index: 1;
}

.Show { /* jQuery MouseOver Show */
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	color: #333;
	background-color: #fff;
	text-align: center;
	z-index: 99;
	padding: 2px;
	font-family: Georgia, "Times New Roman", Times, serif;
}

.thumbnails a img {
	float: left;
	position: absolute;
	top: -30px;
	left: -33px;
}

/*--------------------*/
/* End Thumbnail List */
/*--------------------*/

a.logo {
	position: absolute;
	left: 44px;
	top: 45px;
	width: 230px;
	height: 106px;
	text-indent: -9999em;
}

body { 
	background: #f6f6f6 url(/images/bg_vertical_lines.jpg) repeat-x scroll center top;
}

.clear, .both {
	clear: both;
}

.left {
	clear: left;
}

.right {
	clear: right;
}

img.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	margin-bottom: 5px;
	border: 1px solid #999;
}
/* Typography */

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #333;
}

ul#navit li a {
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
	line-height: 35px;
	font-weight: bold;
	font-style: italic;
}

ul#productnav li, ul#productnav li a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 95%;
	font-weight: bold;
	font-style: italic;
	color: #fff;
}

#content { font-size: 80%; font-family: Arial, Helvetica, sans-serif; }
#content #crumbs { font-style: italic; font-size: 90%; }
#content #crumbs a:hover { text-decoration: underline; }
#content h2, #content h3 { margin-bottom: 10px; font-size: 170%; }
#content h4 { font-size: 170%; margin-top: 10px; }
#content h5 { font-size: 140%; margin-top: 10px; }

#content .fp, #content .fpp{
	color: #fff;
	font-size: 120%;
	font-weight: bold;
}

#content .fp p, #content .fpp p { text-align: justify; background: url(/images/black50pcalpha.png) repeat; }
#content .fp a, #content .fpp a { color: #fff; }
#content .fp a:hover, #content .fpp a:hover { color: #ffffcc; }
#content .fp h3, #content .fpp h3 { padding-left: 10px; background: url(/images/black50pcalpha.png) repeat; }

#footer {
	font-size: 70%;
	text-align: center;
}

#footer a:hover {
	border-color: #333;
	border-width: 0px;
	border-bottom-width: 1px;
	border-style: dotted;
}