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


body
{
	background:#e5e4e4;
	padding:0;
	margin:0 auto;
	overflow:hidden;
}





#wrap{
	/*float:left;*/
	width: 1374px; 
	position:relative;
	margin:0 auto;
	height:100%;
	background:#fff;
	font-family:Calibri;
}


#sidebar
{
	float:left;
	width:230px;
	height:660px;
	background:#fff;

}

#logo{
	text-align:center;
	width:100%;
	display:block;
	position:relative;
	padding:27px 0 55px 0;
}

#logo img
{
	width:78.69%;
	height:auto;
}

#nav
{
	position:relative;
	list-style-type:none;
	z-index:999;
	padding:0;
}

#nav li
{
	width:230px;
	margin:0 0 1px 0;
	padding:0;
	border:none;
}

#nav li a:link, #nav li a:visited
{
	text-decoration:none;
	background:#ccc;
	color:#999;
	padding:12px 0px 12px 28px;
	text-align:left;
	width:auto;
	display:block;
	font:1em Calibri;
	text-transform:uppercase;
}

#nav li a:hover, #nav li a.active
{
	background:#092c74;
	color:#fff;
}


#footer
{
	width:230px;
	font:1em Calibri;
	color:#000;
	margin:50px 0 23px 0;
		position:relative;
bottom:0;
left:0;
}

#footer span
{
	display:block;
	padding-left:28px;

}

#footer .sns
{
	list-style-type:none;
	margin:12px 0 0 0;
	padding:0;
}

#footer .sns li
{
	display:inline-block;
	margin:0;
	padding:0;
}

.sns li img
{
	width:25px;
	min-height:25px;
}

#footer .davies-logo
{
	margin:30px 0 10px 0;
}


.davies-logo img
{
	width:36.52%;
	min-height:27px;
}



#footer .copyright
{
	text-align:left;
	font:0.863em Calibri;
	color:#092c74;
	padding-bottom:10%;
}

#container
{
	float:left;
	width:1144px;
	height:660px;
	position:relative;
	background-color:#f4f3f3;
	box-shadow: inset 7px 0 9px -8px rgba(0,0,0,0.4);
	-moz-box-shadow: inset 7px 0 9px -8px rgba(0,0,0,0.4);
	-webkit-box-shadow: inset 7px 0 9px -8px rgba(0,0,0,0.4);
}

#des
{
	float:left;
	width:1144px;
	height:660px;

}

#des a{
	text-decoration:none;	
}

#des .view  {
   width: 286px;
   height: 220px;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
}
.view .mask,.view .content {
   width: 286px;
   height: 220px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font: bold 16px Calibri;
   padding: 10px;
   margin: 30px 0 0 20px;
   border-bottom:solid 1px #00ebff;
   width: 230px;
}
.view p {

   font: 13px Calibri;
   position: relative;
   color: #fff;
   padding: 0px 20px 20px;
   text-align: center;
}
.view p span {
	
   color: #b9b5b5;
}


.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   background: #000;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}

.view .viewImg
{
	background: no-repeat center url(../images/view-btn.png);
	width:286px;
	height:38px;

}

#container .schemeImg
{
	position:absolute;
	width:988px;
	height:auto;
	z-index:1;
}
#container .scheme
{
	position:absolute;
	width:988px;
	height:auto;
	z-index:2;
	margin-top:68px;
}

/* color scheme panel */

.scheme .colorScheme
{
	float:left;
	width:211px;
	height:auto;
	background:transparent;
	/*background:#092c74;*/
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(9, 44, 116);
	/* RGBa with 0.6 opacity */
	background: rgba(9, 44, 116, 0.7);
	/* For IE 5.5 - 7*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}



.colorScheme .schemeCon
{
	float:left;
	width:188px;
	height:auto;
	margin:27px 110px 11px 11px;
}

.schemeCon div
{
	float:left;
	width:188px;
	color:#fff;
	font-family:Calibri;
	display:block;
}

.schemeCon .desName
{
	font-size:16px;
	text-transform:uppercase;
}

.schemeCon .desPhotoby
{
	font-size:12px;
	text-transform:capitalize;
	padding-top:2px;

}

.desPhotoby .name
{
	font-size:12px;
	color:#8ba0c1;
	text-transform:capitalize;
}

.schemeCon .desFave
{
	font-size:11px;
	padding:15px 0 44px 0;

}

.schemeCon .colorCon
{
	font-size:11px;
	text-transform:uppercase;
	margin-bottom:14px;
}

.colorCon .mainColor
{
	float:left;
	width:88px;
	height:88px;
	border:solid 1px #cacaca;
	margin-right:6px;
}

.colorCon .comColor
{
	float:left;
	width:34px;
	height:34px;
	border:solid 1px #cacaca;
	margin-right:6px;
}

.colorCon .colorName
{
	float:left;

}

.schemeCon .dlCon
{
	float:left;
	margin-top:34px;
}

.dlCon a
{
	display:block;
	width:auto;
	height:46px;
	margin: 0 0 6px 0;
	background-color:#092c74;
}

.dlCon span 
{
	float:left;
	padding:6px 0 0 12px;
}

.dlCon img
{
	float:right;
	padding:6px 5px 0 0;
}

.dlCon a:link, .dlCon a:visited
{
	text-decoration:none;
	background:#092c74;
	color:#fff;
	text-align:left;
	width:auto;
	display:block;
	font:12px Calibri;
	text-transform:uppercase;
	line-height:15px;
}

.dlCon a:hover, .dlCon a.active
{
	background:#ffc72a;
	color:#0f3879;
}

/* color scheme panel ends */
/* view room app */

.scheme .colorRoom
{
	float:left;
	width:777px;
	height:auto;
}

.colorRoom .colorRoomPanel
{
	float:left;
	width:627px;
	height:auto;
	background:#fff;
}

.colorRoomPanel img
{
	float:left;
	width:627px;
	height:auto;
	display:none;
}

.colorRoomPanel img:target{
	display:block;	
}


.colorRoomPanel img:target ~ img#default{
	display:none;
}


.colorRoomPanel img#default{
	display:block;
}

.colorRoom .colorRoomNav
{
	float:left;
	width:150px;
	height:auto;
}

.colorRoomNav .closeRoom
{
	float:left;
	background:#092c74;
	margin-bottom:25px;
}

.colorRoomNav .closeImg
{
	float:left;
	background:#092c74;
	padding:7px 7px 4px 7px;
}

.colorRoom .colorRoomNavOpt
{
	float:left;
	width:150px;
	height:auto;
}
.colorRoomNavOpt a
{
	float:left;
	width:150px;
	height:auto;
	display:block;
	margin-bottom:1px;
	background:#092c74;
}
.colorRoomNavOpt a:link, .colorRoomNavOpt a:visited
{
	text-decoration:none;
	background:#092c74;
	color:#fff;
	text-align:left;
	font:11px Calibri;
	text-transform:uppercase;
}

.colorRoomNavOpt a:hover, .colorRoomNavOpt a.active
{
	background:#ffc72a;
	color:#0f3879;
}

.colorRoomNavOpt span
{
	float:left;
	padding:13px 0 13px 10px;
}


/* view room app ends */

/* about starts */

#container .about{
	float:left;
	width:1062px;
	height:auto;
	margin:0 0 0 40px;
}

.about h1{
	float:left;
	width:1062px;
	height:auto;
	text-align:center;	
	color:#092c74;
	padding-top:5px;
}

.about .aboutDetails{
	float:left;
	text-align:justify;
	font-size:18px;
	color:#666;
	word-spacing:5px;
	line-height:23px;
}

.aboutDetails a:link,.aboutDetails a:visited,.aboutDetails a:active{
	text-decoration:none;
	color:#092c74;
}

.aboutDetails a:hover{
	text-decoration:underline;
	color:#092c74;
}

.aboutDetails img{
	float:left;
	margin:20px 0 40px 0;
}

/* about ends */

/* contact starts */
#container .contact{
	float:left;
	width:1082px;
	height:auto;
	background-image:url(../images/davies-paints-offices-map.png);
	background-position:720px 5px;
	background-repeat:no-repeat;
}


.contact h1{
	float:left;
	width:1022px;
	color:#092c74;
	text-align:center;
	word-spacing:5px;
}

.contact .contactIntro{
	float:left;
	width:1022px;
	color:#092c74;
	text-align:center;
	word-spacing:5px;
	padding:0 20px 25px 40px;
	font-size:18px;
}

.contact h4{
	float:left;
	color:#092c74;
	text-align:left;
	word-spacing:5px;
}

.contact .contactHolder{
	width:330px;
	height:auto;
	display:inline-block;
	padding-right:40px;
	padding-left:40px;
}

.contactHolder div{
	color:#666;
	text-align:left;
	word-spacing:4px;
	line-height:18px;
	padding:0;
	margin:0 0 20px 0;
	font-size:15px;
	word-spacing:6px;
	line-height:18px;
	letter-spacing:0.6px;
}
.contactHolder div b{
	text-align:left;
	word-spacing:4px;
	line-height:18px;
	font-size:16px;
	text-transform:uppercase;
}
.contactHolder .mainOfc{
	color:#ff9900;
}

.contactHolder .bacolodOfc{
	color:#9966ff;
}

.contactHolder .cebuOfc{
	color:#999900;
}

.contactHolder .zamOfc{
	color:#6699ff;
}

.contactHolder .cdoOfc{
	color:#ff99cc;
}
.contactHolder .davaoOfc{
	color:#ff6666;
}

.contactHolder a:link,.contactHolder a:visited,.contactHolder a:active{
	color:#666;
	text-decoration:none;
}

.contactHolder a:hover{
	color:#092c74;
	text-decoration:underline;
}



/* paints starts */
#container .paints{
	float:left;
	width:1062px;
	height:auto;
	padding:0 0 20px 40px;
}


.paints h1 {
	float:left;
	width:974px;
	height:auto;
	margin-right:80px;
	color:#092c74;
	text-align:center;
	word-spacing:5px;
}


.paints .paintHolder{
	float:left;
	width:512px;
	max-height:250px;
	margin:15px 15px 19px 0px;
	display:inline-block;
}

.paintHolder .canImg{
	float:left;
	width:100px;
	height:auto;
	padding:15px 20px 0 0;
}

.paintHolder .canDesc{
	float:left;
	width:382px;
	height:auto;
	display:inline-block;
}
.canDesc .canName{
	text-align:left;
	letter-spacing:1px;
	font-size:18px;
	font-weight:bold;
	color:#092c74;
	margin-bottom:5px;
}

.canDesc .canDetails{
	font-size:15px;
	text-align:left;
	letter-spacing:0.5px;
	color:#666;
	margin-bottom:10px;
	word-spacing:3px;
}

.canDesc .learnMore{
	float:right;
	width:100px;
	height:30px;
	background-color:#dededf;
}

.learnMore div{
	float:left;
	font:13px Calibri;
	padding-left:17px;
	padding-top:7px;
}

.learnMore div a:link, .learnMore div a:visited, .learnMore div a:active{
	text-decoration:none;
	color:#666;
}

.learnMore div a:hover{
	text-decoration:none;
	color:#092c74;
}

.paints .dvFactory {
	float:left;
	width:1062px;
	height:auto;
	color:#666;
	text-align:left;
	word-spacing:4px;
	background-color:#e7e3e3;
	margin-top:14px;
}

.dvFactory img{
	float:left;
	padding:8px;
}

.dvFactory h3{
	font:14px Calibri;
	margin-top:16px;
}