﻿body {
	background-image: url('bg.jpg');
	background-repeat: repeat;
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #EEEEEE;
	margin: 0;
	padding: 0;
}
#outer {
	margin: 0px auto 0px auto;
	width: 962px;
	padding: 0;
	background-color: #FFF;
	
}

#wrapper {
	width: 960px;
	margin: 0px auto 0px auto;
	padding: 0;
	border: 1px #000 solid;
	background-color: #FFF;
	float:left;
}
.header {
	width: 960px;
	height: 167px;
	background-image: url('bg-header.jpg');
	background-repeat: repeat-x;
	background-color: black;
	margin: 0px;
	padding-top: 20px;
}
.logo {
	width: 898px;
	height: 51px;
	margin: 0px auto 0px auto;
	background-image: url('bg-wbd-logo.jpg');
	background-repeat: no-repeat;
	text-align: right;
	color: #CCCCCC;
	padding-top: 20px;
}
.menu {
	width: 898px;
	height: 31px;
	margin: 10px auto 0px auto;
}
a.nav, a.nav:link, a.nav:visited {
	display: block;
	width: 103px;
	height: 31px;
	background: #999;
	background-image: url('menu-off.jpg');
	margin-right: 10px;
	text-align: center;
	text-decoration: none;
	font-size: 12px;
	color: #FFF;
	line-height: 30px;
	overflow: hidden;
	float: left;
}
a.nav:hover {
	color: #fff;
	background: #999;
	background-image: url('menu-on.jpg');
}
a.nav:active {
	color: #fff;
	background: #999;
	background-image: url('menu-off.jpg');
}
.active {
	display: block;
	width: 103px;
	height: 31px;
	color: #fff;
	background: #999;
	background-image: url('menu-on.jpg');
}
.animatehead {
	width: 898px;
	height: 167px;
	margin: -48px auto 0px auto;
	background-image: url('bg-ani-header.jpg');
	background-repeat: no-repeat;
}
.breadcrumb {
	width: 898px;
	margin: 10px auto 0px auto;
		text-indent: 25px;
	font-size: 100%;
}
.breadcrumb a {
	text-decoration:none;
	color:#FFFFFF;

	}
#container {
	margin: 10px auto 10px auto;
	padding: 0;
	background-color:#FFFFFF;
	float:left;
}
#columnleft {
	width: 638px;
	float: left;
	background-color: #FFFFFF;
	padding: 10px 20px 10px 30px;
}
#columnleft a {
	text-decoration:none;
	color:#111;
}
#columnleft a:hover {text-decoration: underline; background-color:#EEE;}
#columnright {
	width: 250px;
	float: left;
	border-left: #CCC solid 1px;
	background-color: #FFFFFF;
	padding: 10px 10px 10px 10px;
	line-height: 120%;

}
#columnright a {color: #000; text-decoration: none;}
#columnright a:hover {text-decoration: underline;}

.news {
	width:240px;
	background-color:#FFFFFF;
	margin: 0px auto 5px auto;
	font-size: 12px;
	border: 1px none #CCCCCC;
	padding: 30px 5px 0px 5px;
 
}



#footer {
	width: 960px;
	height: 47px;
	background-image: url('bg-footer.jpg');
	background-repeat: repeat-x;
	background-color: black;
	margin: 0px;
	padding-top: 10px;
	color: #FFFFFF;
	text-align: center;
	font-size: 72%;
	float: left;
}
#footer a {color: #FFF; text-decoration: none;}

#columnleft h1,h2,h3,h4 {
font-size : 13px; 
color : #333333; 
 
} 
#columnleft p {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 12px;
color : #666666; 
line-height : 22px; 
} 

.keypoints {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 12px;
color:#666666;
list-style-image : url('listitem.gif'); 
padding : 5px 0 0; 
list-style-position : outside; 
line-height : 22px; 
margin-top : 0; 
margin-right : 50px; 
margin-bottom : 5px; 
margin-left : 75px; 
}
.homecolor {
color : #fb3534; 
} 
.picturethis {
color : #666666; 
background-color : #ffffff; 
text-decoration : none; 
margin : 5px; 
padding : 5px; 
border : 1px dashed #999999; 
}
#contentwrapper{
width: 90%;
border: 1px solid #CCCCCC;
background-color: #FFFFFF;
padding: 5px;
font-size: 80%;
}

.billcontent{
width: 100%;
display:block;
}
#contentwrapper img {
float: right;
margin-left: 5px;
}

.qitem {
	width:183px;
	height:183px;	
	border:3px solid #ccc;	
	margin:5px 20px 20px 0;
	background: url('bg.gif') no-repeat;
	color: #000;
	
	
	/* required to hide the image after resized */
	overflow:hidden;
	
	/* for child absolute position */
	position:relative;
	
	/* display div in line */
	float:left;
	cursor:hand; cursor:pointer;
}

	.qitem img {
		/* allow javascript moves the img position*/
		border-style: none;
    border-color: inherit;
    border-width: 0;
    position:absolute;
		    z-index:200;
    top: 0px;
    left: 0px;
}

	.qitem .caption {
		position:absolute;
		z-index:0;	
		color:#000;
		display:block;
	}

		.qitem .caption h4 {
			font-size:12px;
			padding:10px 5px 0 8px;
			margin:0;
			color:#000;
		}

		.qitem .caption p {
			font-size:10px;	
			padding:3px 5px 0 8px;
			margin:0;
			color:#000000;
			line-height:12px;
		}



/* Setting for corners */

.topLeft, .topRight, .bottomLeft, .bottomRight {
	position:absolute;
	background-repeat: no-repeat; 
	float:left;
}

.topLeft {
	background-position: top left; 	
} 

.topRight {
	background-position: top right; 
} 

.bottomLeft {
	background-position: bottom left; 
} 

.bottomRight {
	background-position: bottom right; 
}

.clear {
	clear:both;	
}

.portfolioimage {margin: 10px 10px 10px 15px; float: right; border: 1px none #FFF;}