@charset "utf-8";
/* Config */

/* ============================= page1 - Home ===========================*/

#page1 .content-container { width: 940px; margin: auto; padding: 0px;	background-color: #9ea9b1; color: #010f31;}
#page1 .top-banner-40 { width: 940px; height: 40px; margin: 0px; padding: 0px;	background-image: url(../source/resources/top-banner-index.jpg); background-repeat: no-repeat;}
#page1 .content-panel { width: 900px; margin: 20px auto 0px auto;  padding: 0px; text-align: justify; background-color: #9ea9b1; overflow: auto;}
#page1 .middle-col {	width: 2px;	height: 300px; float: left;	margin:0px 0px 0px 18px; padding: 0; border-right-width: thin;	border-right-style: dotted;
border-right-color: #000;}
#page1 .panel-col1 { width: 430px; height: 300px; float: left; margin: 0; padding: 0px;	text-align: justify; background-image: url(../source/resources/panel-bg.jpg); background-repeat: no-repeat;}
#page1 .panel-col2 {width: 430px; height: 300px; float: right; margin: 0; padding: 0px; text-align: justify; background-image: url(../source/resources/panel-bg.jpg); background-repeat: no-repeat;}
#page1 .panel-col-text { width: 380px; margin: 10px auto 10px auto;}
#page1 .clear { clear: both;}
#page1 .footer a:link { text-decoration: none;}

/* ============================= page2 - About ===========================*/

#page2 .content-container {	width: 900px; 	margin: auto;	padding: 0px; color: #010f31;}
#page2 .top-banner-40 { width: 940px; height: 40px; margin: 0px; padding: 0px;	background-image: url(../source/resources/top-banner-about.jpg); background-repeat: no-repeat;}
#page2 .content-col1 { width: 430px; height: 330px; float: left; margin: 0; padding: 0px; text-align: justify; background-image:url(../source/resources/about-content-bg.jpg); background-repeat: no-repeat;}
#page2 .content-col2 { width: 430px; height: 330px; float: right; margin: 0; padding: 0px; text-align: justify; background-image: url(../source/resources/about-content-bg.jpg); background-repeat: no-repeat;}
#page2 .middle-col { width: 2px; height: 330px; float: left; margin:0px 0px 0px 18px; padding: 0; border-right-width: thin;	border-right-style: dotted;
border-right-color: #000;}
#page2 .hoz-line { height: 2px;	margin: 10px 0px 10px 0px;	border-bottom-width: thin; border-bottom-style: dotted; border-bottom-color: #000;}
#page2 .col-text { width: 400px; margin: 10px auto 10px auto;}
#page2 .bottom-panel { width: 900px; height: 130px; margin: 5px 0px 0px 0px; background-image: url(../source/resources/bottom-panel-bg.jpg);background-repeat:no-repeat;}
#page2 .panel-text { position: relative; width: 860px; height: 115px; margin: auto;}
#page2 .client-list1 { width: 840px;  margin: auto; padding: 0px; overflow: auto;}
#page2 .client-list2 { width: 840px;  margin: auto; padding: 0px; overflow: auto;}
#page2 .client { float: left; width: 500px;	height: 30px; font-size: 12px;}
#page2 .client-100 { float: left; width: 100px;	height: 30px; background-image: url(../source/resources/bullet-bg-100.jpg); background-repeat: no-repeat;}
#page2 .client-120 { float: left; width: 120px;	height: 30px; background-image: url(../source/resources/bullet-bg-100.jpg); background-repeat: no-repeat;}
#page2 .client-150 { float: left; width: 150px;	height: 30px; background-image: url(../source/resources/bullet-bg-150.jpg); background-repeat: no-repeat;}
#page2 .client-180 { float: left; width: 180px;	height: 30px; background-image: url(../source/resources/bullet-bg-180.jpg); background-repeat: no-repeat;}
#page2 .client-200 { float: left; width: 200px;	height: 30px; background-image: url(../source/resources/bullet-bg-200.jpg); background-repeat: no-repeat;}
#page2 .client-name {margin: 5px 0px 0px 20px;} 
#page2 .client-name2 {margin: 5px 0px 0px 0px;}
#page2 .text-style-2 { padding: 5px 0px 0px 0px; text-align: center; font-weight: bold;}
#page2 .clear { clear: both;} 
#page2 .image-container {margin: auto;}

/* ============================= page3 - Our work ==========================*/

#page3 .content-container { width: 940px;	margin: auto; padding: 0px;	background-color: #9ea9b1; color: #010f31;}
#page3 .top-banner-40 { width: 940px; height: 40px; margin: 0px; padding: 0px;	background-image: url(../source/resources/top-banner-work.jpg); background-repeat: no-repeat;}
#page3 .content-section { width: 900px;	height: 700px; margin: auto; padding: 0px; background-image: url(../source/resources/total-montage.jpg);	background-repeat: no-repeat; overflow: auto;}
#page3 .top-section-left { float: left; width: 300px; height: 350px;}
#page3 .top-section-right { float: right; width: 300px; height: 350px;}
#page3 .bottom-section-left { float: left; width: 300px; height: 350px;}
#page3 .bottom-section-right { float: right; width: 300px; height: 350px;}
#page3 .top-section-text-left {	position: relative;	width: 160px; height: 100px; left: 80px; top: 80px; background-image: 
url(../source/resources/arrow3.jpg); background-repeat: no-repeat;}
#page3 .top-section-text-right { position: relative; width: 140px; height: 160px; left: 130px; top: 70px; background-image: 
url(../source/resources/arrow.jpg);	background-repeat: no-repeat;}
#page3 .bottom-section-text-left { position: relative; width: 140px; height: 140px; left: 25px; top: 130px;  background-image: url(../source/resources/arrow4.jpg); background-repeat: no-repeat;}
#page3 .bottom-section-text-right { position: relative; width: 150px; height: 100px; left: 60px; top: 190px; background-image: url(../source/resources/arrow2.jpg); background-repeat: no-repeat;}
#page3 .top-section-left-text-box { position: relative; top: 10px; text-align: center; color: #233e81;}
#page3 .top-section-right-text-box { position: relative; top: 90px; text-align: center; color: #233e81;}
#page3 .bottom-section-left-text-box { position: relative; top: 10px; text-align: center; color: #233e81;}
#page3 .bottom-section-right-text-box { position: relative; top: 10px; text-align: center; color: #233e81;}
#page3 .content-container a:link { text-decoration: none; color: #233e81;}
#page3 .content-container a:visited { text-decoration: none; color: #233e81;}
#page3 .content-container a:hover { text-decoration: none; color: #000000;}

/* ============================= page4 - Why total =========================*/

#page4 .content-container {	width: 900px; 	margin: auto;	padding: 0px; color: #010f31;}
#page4 .top-banner-40 { width: 940px; height: 40px; margin: 0px; padding: 0px;	background-image: url(../source/resources/top-banner-why.jpg); background-repeat: no-repeat;}
#page4 .content { margin: 0px; padding: 0px; overflow: auto;}
#page4 .content-section { margin: auto; padding: 0px; overflow: auto;}
#page4 .content-header { width: 860px; margin: auto; padding: 10px; overflow: auto;}
#page4 .text-block { display: block; margin: 5px 10px 0px 10px; padding: 0px; font-weight: normal; text-align: justify;}
#page4 .content-col1-left {	width: 430px; height: 270px; float: left; background-image: url(../source/resources/why-content-bg1.jpg); background-repeat: no-repeat;}
#page4 .content-col1-right { width: 430px; height: 270px; float: right; background-image: url(../source/resources/why-content-bg1.jpg); background-repeat: no-repeat;}
#page4 .content-col2-left { width: 430px; height: 280px; float: left; background-image: url(../source/resources/why-content-bg2.jpg); background-repeat: no-repeat;}
#page4 .content-col2-right { width: 430px; height: 280px; float: right; background-image: url(../source/resources/why-content-bg2.jpg); background-repeat: no-repeat;}
#page4 .middle-col-upper {width: 2px; height: 270px; float: left; margin:0px 0px 0px 18px; padding: 0; border-right-width: thin; border-right-style: dotted;border-right-color: #000;}
#page4 .middle-col-lower {width: 2px; height: 280px; float: left; margin:0px 0px 0px 18px; padding: 0; border-right-width: thin; border-right-style: dotted;border-right-color: #000;}
#page4 .hoz-col {height: 10px; margin: 10px 0px 10px 0px; }
#page4 .hoz-line-left {float: left; width: 430px; height: 2px; margin: 2px auto 2px auto; border-bottom-width: thin;	border-bottom-style: dotted; border-bottom-color: #000;}
#page4 .hoz-line-right {float: right; width: 430px; height: 2px; margin: 2px auto 2px auto; border-bottom-width: thin; border-bottom-style: dotted; border-bottom-color: #000;}
#page4 .panel-header{ width: 300px; height: 40px; margin: 0px 0px 10px 0px;}
#page4 .panel-header-block1{ float: left; width: 40px; height: 40px;}
#page4 .panel-header-block2{ float: left; width: 220px; height: 30px; margin: 10px 0px 0px 10px; font-weight: bold; font-size: 14px;}
#page4 .clear { clear: both;} 
#page4 h1 { font-style: normal; font-weight: bold; font-size: 20px;	text-decoration: none;}

/* ============================= page5 - Contact ==========================*/

#page5 .content-container {	width: 900px; 	margin: auto; padding: 0px; color: #010f31;}
#page5 .top-banner-40 { width: 940px; height: 40px; margin: 0px; padding: 0px;	background-image: url(../source/resources/top-banner-contact.jpg); background-repeat: no-repeat;}
#page5 .contact-col-left {	float: left; width: 400px; margin: 0px 0px 0px 10px; padding: 0px;}
#page5 .contact-col-right { float: right; width: 430px; margin: 0px 10px 0px 0px; padding: 0px;}
#page5 .content-container a:link { text-decoration: none; color: #010f31;}
#page5 .content-container a:visited { text-decoration: none; color: #010f31;}
#page5 .content-container a:hover { text-decoration: none; color: #000000;}
#page5 .clear { clear: both;} 

/* ============================= page6 - Commercial ==========================*/

#page6 .content-container { width: 940px; margin: auto; padding: 0px; background-color: #9ea9b1; color: #010f31;}
#page6 .top-banner-40 { width: 940px; height: 40px; margin: 0px; padding: 0px;	background-image: url(../source/resources/top-banner-commercial.jpg); background-repeat: no-repeat;}
#page6 .section-header { width: 900px; height: 30px; margin: 15px auto 5px auto; padding: 10px 0px 10px 0px;}
#page6 .content-section { width: 900px; margin: auto; padding: 0px; overflow: auto;}
#page6 .middle-col { width: 2px; height: 280px; float: left; margin:0px 0px 0px 18px; padding: 0; border-right-width: thin;	border-right-style: dotted;
border-right-color: #000;}
#page6 .content-col-left { float: left; width: 430px; height: 280px; background-image: url(../source/resources/commercial-content-bg.jpg); background-repeat: no-repeat;}
#page6 .content-col-right {	float: right; width: 430px; height: 280px; background-image: url(../source/resources/commercial-content-bg.jpg); background-repeat: no-repeat;}
#page6 .col-text { width: 390px; margin: 10px auto 10px auto; color: #010f31;}
#page6 .back-to-work {width: 900px; height: 50px; margin: 5px auto 0px auto; padding: 0px; color: #010f31;}
#page6 .btw-col1 { float: right; width: 40px; height: 40px; margin: 10px 10px 0px 0px; padding: 0px;}
#page6 .btw-col2 { float: right; width: 120px; height: 30px; margin: 20px 15px 0px 0px; padding: 0px;}
#page6 .text-style-1 {	text-align: left;	font-weight: bold}
#page6 h2 { font-style: normal; text-align: left; font-weight: bold; font-size: 15px; text-decoration: none; padding: 10px 0px 15px 0px; color: #010f31;}
#page6 h3 { font-style: normal; text-align: center; font-weight: bold; font-size: 18px; text-decoration: none; color: #233e81;}

/* ============================= page7 - Construction ==========================*/

#page7 .content-container { width: 940px;	margin: auto; padding: 0px;	background-color: #9ea9b1; color: #010f31;}
#page7 .top-banner-40 { width: 940px; height: 40px; margin: 0px; padding: 0px;	background-image: url(../source/resources/top-banner-construction.jpg); background-repeat: no-repeat;}
#page7 .section-header { width: 900px; height: 30px; margin: 15px auto 5px auto; padding: 10px 0px 10px 0px;}
#page7 .content-section { width: 900px; margin: auto; padding: 0px; overflow: auto;}
#page7 .middle-col { width: 2px; height: 280px; float: left; margin:0px 0px 0px 18px; padding: 0; border-right-width: thin;	border-right-style: dotted;
border-right-color: #000;}
#page7 .content-col-left { float: left; width: 430px; height: 280px; background-image: url(../source/resources/construction-content-bg.jpg); background-repeat: no-repeat;}
#page7 .content-col-right {	float: right; width: 430px; height: 280px; background-image: url(../source/resources/construction-content-bg.jpg); background-repeat: no-repeat;}
#page7 .col-text { width: 390px; margin: 10px auto 10px auto; color: #010f31;}
#page7 .back-to-work {width: 900px; height: 50px; margin: 10px auto 0px auto; padding: 0px; color: #010f31;}
#page7 .btw-col1 { float: right; width: 40px; height: 40px; margin: 10px 10px 0px 0px; padding: 0px;}
#page7 .btw-col2 { float: right; width: 120px; height: 30px; margin: 20px 15px 0px 0px; padding: 0px;}
#page7 .text-style-1 {	text-align: left;	font-weight: bold}
#page7 h2 { font-style: normal; text-align: left; font-weight: bold; font-size: 16px; text-decoration: none; color: #010f31;}
#page7 h3 { font-style: normal; text-align: center; font-weight: bold; font-size: 17px; text-decoration: none; color: #233e81;}

/* ============================= page8 - Fixing ==========================*/

#page8 .content-container { width: 940px;	margin: auto; padding: 0px;	background-color: #9ea9b1; color: #010f31;}
#page8 .top-banner-40 { width: 940px; height: 40px; margin: 0px; padding: 0px;	background-image: url(../source/resources/top-banner-fixing.jpg); background-repeat: no-repeat;}
#page8 .section-header { width: 900px; height: 30px; margin: 15px auto 5px auto; padding: 10px 0px 10x 0px;}
#page8 .content-section { width: 900px; margin: auto; padding: 0px; overflow: auto;}
#page8 .middle-col { width: 2px; height: 380px; float: left; margin:0px 0px 0px 18px; padding: 0; border-right-width: thin;	border-right-style: dotted;
border-right-color: #000;}
#page8 .content-col-left { float: left; width: 430px; height: 380px; background-image: url(../source/resources/fixing-content-bg.jpg); background-repeat: no-repeat;}
#page8 .content-col-right {	float: right; width: 430px; height: 380px; background-image: url(../source/resources/fixing-content-bg.jpg); background-repeat: no-repeat;}
#page8 .col-text { width: 390px; margin: 10px auto 10px auto; color: #010f31;}
#page8 .col-text-quote { width: 390px; 	margin: 10px auto 10px auto; font-size: 14px; font-style: italic; color: #010f31;}
#page8 .block-quote{ float: left; width:27px; height: 25px; }
#page8 .block-quote-line{ float: left; width:340px; height: 25px; margin: 0px 0px 0px 8px; border-bottom-width: thin; border-bottom-style: dotted; border-bottom-color: #000;}
#page8 .back-to-work {width: 900px; height: 50px; margin: 10px auto 0px auto; padding: 0px; color: #010f31;}
#page8 .btw-col1 { float: right; width: 40px; height: 40px; margin: 10px 10px 0px 0px; padding: 0px;}
#page8 .btw-col2 { float: right; width: 120px; height: 30px; margin: 20px 15px 0px 0px; padding: 0px;}
#page8 .text-style1 { text-align: left; font-size: 12px; font-style: normal; font-weight: bold}
#page8 h2 { font-style: normal; text-align: left; font-weight: bold; font-size: 16px; text-decoration: none; color: #010f31;}
#page8 h3 { font-style: normal; text-align: center; font-weight: bold; font-size: 18px; text-decoration: none; color: #233e81;}

/* ============================= page9 - Timber frame ==========================*/

#page9 .content-container { width: 940px;	margin: auto; padding: 0px;	background-color: #9ea9b1; color: #010f31;}
#page9 .top-banner-40 { width: 940px; height: 40px; margin: 0px; padding: 0px;	background-image: url(../source/resources/top-banner-timber-frame.jpg); background-repeat: no-repeat;}
#page9 .section-header { width: 900px; height: 30px; margin: 15px auto 5px auto; padding: 10px 0px 10px 0px;}
#page9 .content-section { width: 900px; margin: auto; padding: 0px; overflow: auto;}
#page9 .middle-col { width: 2px; height: 320px; float: left; margin:0px 0px 0px 18px; padding: 0; border-right-width: thin;	border-right-style: dotted;
border-right-color: #000;}
#page9 .content-col-left { float: left; width: 430px; height: 320px; background-image: url(../source/resources/timber-frame-content-bg.jpg); background-repeat: no-repeat;}
#page9 .content-col-right {	float: right; width: 430px; height: 320px; background-image: url(../source/resources/timber-frame-content-bg.jpg); background-repeat: no-repeat;}
#page9 .col-text { width: 390px; margin: 10px auto 10px auto;}#page8 .back-to-work {width: 900px; height: 50px; margin: 10px auto 0px auto; padding: 0px; color: #010f31;}
#page9 .back-to-work {width: 900px; height: 50px; margin: 10px auto 0px auto; padding: 0px; color: #010f31;}
#page9 .btw-col1 { float: right; width: 40px; height: 40px; margin: 10px 10px 0px 0px; padding: 0px;}
#page9 .btw-col2 { float: right; width: 120px; height: 30px; margin: 20px 15px 0px 0px; padding: 0px;}
#page9 h2 { font-style: normal; text-align: left; font-weight: bold; font-size: 16px; text-decoration: none; color: #010f31;}
#page9 h3 { font-style: normal; text-align: center; font-weight: bold; font-size: 18px; text-decoration: none; color: #233e81;}
#page9 li { font-size: 14px;}

/* ============================= Sendform ==========================*/
#body { background-color: #9ea9b1; padding: 0; margin:0;}
#message-wrapper {width: 100%; margin-top:5px; height: 600px; background-color: #9ea9b1;}
#message-container {width: 80%; margin: auto; padding: 0; text-align: center; font-size: 30px; font-weight: bold; }
#message-header{ height: 150px; background-image: url(../source/resources/sendform-header.jpg);	background-repeat: no-repeat;}

/* ============================= end ========================================*/