body, html, div {
margin: 0;
padding: 0;
}
body {
font: 10pt/16pt verdana, geneva, arial, sans serif;
color: #000;
background: #FFFFEA url(img/repeat.gif) repeat-y;
}
/* specific divs */
/* container keeps it all together */
/*---------------------------------------------------*/
#container{
border-top:1px solid #230;
border-right: 1px solid #230;
width:760px;
margin: 0px;
padding: 0px;
background: transparent url(img/topbg.gif) repeat-x;
}
/* intro div and its content */
/*---------------------------------------------------*/
#intro {
margin:0;
padding:0;
margin-top:20px;
width:760px;
background: transparent url(img/lslh.gif) no-repeat 687px 252px;
}
#pageHeader {
position:absolute;
left:0;
width: 355px;
height:201px
}
/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
#pageHeader h1 {
background: transparent url(img/header.jpg) no-repeat;
margin-top: 0px;
margin-left: 00px;
width: 800px;
height: 201px;
float: left;
}
#pageHeader h1 span,#pageHeader h2,#pageHeader h2 span {
display:none;
}
#quickSummary{
margin: 0 0 0 355px;
width:300px;
height: 200px;
border-right:1px solid #ABBC47;
border-top:1px solid #ABBC47;
}
#quickSummary p.p1 {
font: bold 11px/14px arial,verdana, sans serif;
color:#fff;
padding:100px 30px 2px 30px;
}
#quickSummary p.p2{
position:absolute;
left:0;
top:230px;
font: 13px verdana, arial, sans serif;
color:#fff;
margin:0 30px;
width: 673px;
}
#quickSummary p.p3{
position:absolute;
left:0;
top:250px;
font: 13px verdana, arial, sans serif;
color:#fff;
margin:0 115px;
width: 800px;
}
/* visually footer is moved up to be with the intro stuff */
#quickSummary p.p2 a, #footer a,#quickSummary p.p3 a{
color:#fff;
}
#quickSummary p.p2 a:hover, #footer a:hover,#quickSummary p.p3 a:hover{
color:#230;
background-color:#fff;
text-decoration:none;
}
/* visually we now move into the main area of the page
/*---------------------------------------------------*/
#bamboo{
padding:50px 30px 30px 30px;
margin:30px 0 0 355px;
border-width:0 0 1px 1px;
border-color:#fff #ddd;
border-style:solid;
text-align:left;
background: transparent url(img/endsection.gif) no-repeat bottom center;
width:300px;
}
#installation,#advBambooFlooring ,#accessories,#SolidFlooring, #floor p,#preamble p, #explanation p, #benefits p, #mission p, #value p, #company p, #bamboo p, #partition p, #vision p, #features p, #requirements p, #bamboocurtain p, #blind p, #romanfold p, #foldup p{
text-align:justify;
}
#bamboo h3{
background: transparent url(img/h3bamboo.gif) no-repeat bottom left;
margin: 0px;
width: 270px;
height: 36px;
border-bottom:1px solid #ddd;
}
#bamboo h3 span{
display:none
}
#supportingText{
border-width:0 0 0px 0px;
border-color:#fff #ddd;
border-style:solid;
margin:0px 0px 0px 100px;
padding:50px 30px 0 30px;
width:405px;
voice-family: "\"}\"";
voice-family: inherit;
width:535px;
}
#installation,#advBambooFlooring,#accessories,#SolidFlooring, #company,#flooring,#blind,#curtain,#partition,#preamble,#advantage,#floor,#technical,#plywood,#veneer,#board ,#explanation,#contactus, #benefits, #mat, #specification, #features, #requirements ,#romanfold, #pattern, #foldup, #mission , #value , #vision {
padding:0 0 20px 0;
margin-bottom:20px;
text-align:justify;
background: transparent url(img/endsection.gif) no-repeat bottom center;
}
p{
padding-left: 8px;
padding-right: 8px;
}
.p1{
margin-top:26px;
}
#quickSummary .p1{
margin-top:0;
}
/* use images to display headers */
#preamble h3{
padding: 15px;
background: transparent url(img/h3preamble.gif) no-repeat bottom left;
}
#blind h3{
padding: 15px;
background: transparent url(img/h3blind.gif) no-repeat bottom left;
}
#flooring h3{
padding: 15px;
background: transparent url(img/h3flooring.gif) no-repeat bottom left;
}
#SolidFlooring h3{
padding: 15px;
background: transparent url(img/h3solidFlooring.gif) no-repeat bottom left;
}
#partition h3{
padding: 15px;
background: transparent url(img/h3partition.gif) no-repeat bottom left;
}
#curtain h3{
padding: 15px;
background: transparent url(img/h3bamboocurtain.gif) no-repeat bottom left;
}
#specification h3{
background: transparent url(img/h3specification.gif) no-repeat bottom left;
}
}
#advantage h3{
background: transparent url(img/h3advantage.gif) no-repeat bottom left;
}
#advBambooFlooring h3{
background: transparent url(img/h3advBambooFlooring.gif) no-repeat bottom left;
}
#installation h3{
background: transparent url(img/h3installation.gif) no-repeat bottom left;
}
#accessories h3{
background: transparent url(img/h3bambooAccessories.gif) no-repeat bottom left;
}
#explanation h3{
background: transparent url(img/h3explanation.gif) no-repeat bottom left;
}
#benefits h3{
background: transparent url(img/h3benefits.gif) no-repeat bottom left;
}
#features h3{
background: transparent url(img/h3features.gif) no-repeat bottom left;
}
#requirements h3{
background: transparent url(img/h3requirements.gif) no-repeat bottom left;
}
#BRollup h3{
background: transparent url(img/h3rollup.gif) no-repeat bottom left;
}
#foldup h3{
background: transparent url(img/h3foldup.gif) no-repeat bottom left;
}
#frame h3{
background: transparent url(img/h3frame.gif) no-repeat bottom left;
}
#vision h3{
background: transparent url(img/h3vision.gif) no-repeat bottom left;
}
#mission h3{
background: transparent url(img/h3mission.gif) no-repeat bottom left;
}
#value h3{
background: transparent url(img/h3value.gif) no-repeat bottom left;
}
#pattern h3{
background: transparent url(img/h3pattern.gif) no-repeat bottom left;
}
#contactus h3{
background: transparent url(img/h3contactus.gif) no-repeat bottom left;
}
#floor h3{
padding: 15px;
background: transparent url(img/h3flooring.gif) no-repeat bottom left;
}
#mat h3{
padding: 15px;
background: transparent url(img/h3mat.gif) no-repeat bottom left;
}
#board h3{
padding: 15px;
background: transparent url(img/h3board.gif) no-repeat bottom left;
}
#plywood h3{
padding: 15px;
background: transparent url(img/h3plywood.gif) no-repeat bottom left;
}
#veneer h3{
padding: 15px;
background: transparent url(img/h3veneer.gif) no-repeat bottom left;
}
#technical h3{
padding: 15px;
background: transparent url(img/h3technical.gif) no-repeat bottom left;
}
#company h3{
padding: 15px;
background: transparent url(img/h3company.gif) no-repeat bottom left;
}
#installation h3,#advBambooFlooring h3,#accessories h3, #SolidFlooring h3,#company h3,#advantage h3,#partition h3 ,#curtain h3,#flooring h3,#blind h3,#preamble h3,#floor h3 ,#technical h3 ,#veneer h3,#board h3,#plywood h3 ,#explanation h3,#contactus h3,#specification h3, #benefits h3, #mat h3, #features h3, #requirements h3 ,#BRollup h3,#pattern h3,#frame h3,#mission h3,#value h3, #foldup h3,#vision h3{
margin: 0px;
min-width: 200px;
height: 36px;
border-bottom:1px solid #ddd;
text-align:justify;
}
#installation h3 span,#company h3 span,#advantage h3 span,#partition h3 span,#curtain h3 span,#flooring h3 span,#blind h3 span,#preamble h3 span,#floor h3 span,#technical h3 span,#board h3 span,#veneer h3 span,#plywood h3 span,#explanation h3 span,#contactus h3 span,#specification h3 span, #benefits h3 span, #mat h3 span, #features h3 span,#frame h3 span,#pattern h3 span, #requirements h3 span ,#mission h3 span,#value h3 span,#vision h3 span, #BRollup h3 span, #foldup h3 span{
display:none
}
/* and finally we place the list of links */
/*---------------------------------------------------*/
#linkList{
position:absolute;
left:0px;
top:273px;
width:355px;
padding:30px 30px 0 130px;
background: transparent url(img/lslh.gif) no-repeat top left;
voice-family: "\"}\"";
voice-family: inherit;
width:195px;
}
#linkList2{
padding:0;
}
/* use images for headers */
h3.select{
background: transparent url(img/h3select.gif) no-repeat bottom left;
}
h3.archives{
background: transparent url(img/h3archives.gif) no-repeat bottom left;
}
h3.resources{
background: transparent url(img/h3resources.gif) no-repeat bottom left;
}
h3.select, h3.archives, h3.resources {
margin: 0px;
min-width: 200px;
height: 36px;
border-bottom:1px solid #ddd;
}
h3.select span, h3.archives span, h3.resources span{
display:none
}
/* put some style on the lists */
/* first the list of designs */
#lselect ul {
margin: 10px 0 0 0;
padding: 10px;
}
#lselect li {
line-height: 2.5ex;
list-style-type: none;
display: block;
padding: 5px 0px 5px 25px;
margin: 5px 0;
border-bottom:1px solid #eee;
background: transparent url(img/bullet.gif) no-repeat 0px 7px;
}
#lselect li a{
white-space:nowrap;
display:block;
font-weight:bold;
}
#lselect li a.c{
text-decoration:none;
display:inline;
font-weight:normal;
}
#lselect li a.c:hover{
text-decoration:underline;
}
/* then the lists of general info etc */
#larchives ul, #lresources ul {
margin: 10px 0 0 0;
padding: 10px;
}
#larchives li, #lresources li {
list-style-type: none;
display: block;
padding: 0px;
padding: 0px 0px 0px 25px;
margin: 0;
background: transparent url(img/bullet2.gif) no-repeat 2px 7px;
}
/* some generic stuff */
/*---------------------------------------------------*/
a {
color:#230;
}
a:visited {
color:#672;
}
a:hover {
color:#ABBC47;
}
/* and finally we use one of the extra divs available */
/*---------------------------------------------------*/
#extraDiv1{
width:3px;
height:18px;
position:absolute;
position:absolute;
left:354px;
top:252px;
background: transparent url(img/ltop.gif) no-repeat;
}
#footer{
position:relative;
font: 12px verdana, arial, sans serif;
color: Black;
text-align:center;
margin-bottom: 1px;
margin-left: 0px;
padding-bottom: 10px;
padding-left: 130px;
bottom: 1px;
background-color: #ABBC47;
}