@charset "UTF-8";
/* CSS Document */

/* Constant elements */

html, body {
    height: 100%;
	background-color: #FFF;
}

body {
    margin: 0;
    padding: 0;
    text-align: center;
    min-height: 478px; /* For Mozilla/Opera/Safari */
	min-width: 748px;
}

#wrapper {
    position: relative;
    margin: 0 auto;
    text-align: left;
    width: 748px;
    height: 100%;
}

#outer-viewport {
    position: absolute;
    width: 748px;
    height: 478px;
    top: 50%;
    margin-top: -239px; /* Half of viewport height */
	background-image: url(../images/common/bkg.jpg);
    background-color: #FFF;
}

#inner-viewport {
	position: absolute;
	width: 700px;
	height: 420px;
	top: 23px;
	left:25px;
	background-color: #fffß;
}

#strapline {
	position:absolute;
	left: 234px;
	top: 38px;
	z-index: 2;
}

#footer {
	position: absolute;
	top: 473px;
	left: 25px;
}

#navigation {
	position:absolute;
	left: 297px;
	top: 460px;
	background-color: #FFF;
	z-index: 0;
}

#logo-home {
	position: absolute;
	top: 314px;
	left: 55px;
	z-index: 2;
}

/* Products Home */

#kwick {
	position: relative;
	width: 820px;
	height: 420px;
	left: -40px;
	margin: 0px;
}

#kwick .kwicks {
	display: block;
	height: 420px;
	margin: 0px;
}

#kwick li {
	float: left;
}

li:after {
	content: "";
}

#kwick .kwick {
	display: block;
	cursor: pointer;
	overflow: hidden;
	height: 420px;
	width: 86px;
	background: #fff;
	border-right: 1px solid #ffffff;
}

#kwick .kwick span {
	display: none;
}

#kwick .sisal {
	background: #fff url(../images/home/sisal.jpg) ;
}

#kwick .coir {
	background: #fff url(../images/home/coir.jpg);
}

#kwick .jute {
	background: #fff url(../images/home/jute.jpg);
}

#kwick .seagrass {
	background: #fff url(../images/home/seagrass.jpg);
}

#kwick .paper {
	background: #fff url(../images/home/paper.jpg);
}

#kwick .wool {
	background: #fff url(../images/home/wool.jpg);
}

#kwick .sisool {
	background: #fff url(../images/home/sisool.jpg);
}

#kwick .rubber {
	background: #fff url(../images/home/rubber.jpg);
}

/* Products Pages */

#left-content {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 341px;
	height: 380px;
	padding: 20px;
	text-align:justify;
	background-color: #d9cba9;
}

#left-content-range {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 380px;
	height: 388px;
	padding: 16px;
	text-align:justify;
	background-color: #d9cba9;
}

#full-content {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 660px;
	height: 380px;
	padding: 20px;
	text-align:justify;
	background-color: #d9cba9;
}

#thumbs {
	position:absolute;
	left: 16px;
	top: 45px;
	width: 360px;
	height: 343px;
	padding: 9px;
	background-color: #fff;
}

#thumbs-gallery {
	position:absolute;
	left: 16px;
	top: 65px;
	width: 640px;
	height: 310px;
	padding: 14px;
	background-color: #fff;
}

.thumb-a {
	background-color:#e4e4e4;
	border:1px solid #e4e4e4;
}

.thumb-b {
	background-color:#e4e4e4;
	border:1px solid #392613;
	cursor:pointer;
	cursor:hand;
}

#divider-green {
	position: absolute;
	left: 381px;
	top: 0px;
	width: 20px;
	height: 420px;
	background-color: #284907;
}

#divider-brown {
	position: absolute;
	left: 410px;
	top: 0px;
	width: 20px;
	height: 420px;
	background-color: #392613;
}

#divider-brown2 {
	position: absolute;
	left: 381px;
	top: 0px;
	width: 20px;
	height: 420px;
	background-color: #392613;
}

#img-prod {
	position: absolute;
	left: 401px;
	top: 0px;
	height: 420px;
	overflow: hidden;
}

#img-range {
	position: absolute;
	left: 430px;
	top: 0px;
	height: 420px;
	overflow: hidden;
}

.with-border {
	border: 1px solid #392613;
	padding: 1px;
	cursor: pointer;
	cursor: hand;
}

.no-border {
	padding: 2px;
}

/* Typefaces & Font Styles */

.title-text {
	font-family: Arial, Helvetica, sans-serif;
	font-size:16px;
	color: #392613;
	text-decoration: none;
}

.prodnav_a {
	font-family: Arial, Helvetica, sans-serif;
	font-size:16px;
	color: #cccccc;
	text-decoration: none;
	text-align: right;
}

.prodnav_b {
	font-family: Arial, Helvetica, sans-serif;
	font-size:16px;
	color: #363841;
	text-decoration: none;
	text-align: right;
}

.text1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size:10px;
	color: #3f3f42;
	text-decoration:none;
}

.text2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #392613;
	text-decoration: none;
}

.text3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #392613;
	font-weight:bold;
	text-decoration: none;
}

.text4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #392613;
	font-weight:bold;
}