/* CSS Document */
body {
	background:#666666;
	margin:0; padding:0;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
}

#wrapper {
	width:766px;
	border:2px solid #515146;
	background-color:#fff;
	margin:10px auto;
}

#container {
	width:726px;
	margin:30px auto;
}

#head-bar {
	height:15px;
	width:726px;
	background:url(images/head-bar-bg.gif) top left no-repeat;
	text-align:right;
}

ul#headnav {
	margin:0; padding:0;
	list-style:none;
	float:right;
}
ul#headnav li {
	margin:0; padding:0;
	list-style:none;
	float:left;
}
ul#headnav li a {
	display:block;
	height:15px;
	margin:0; padding:0;
	float:left;
}
ul#headnav li.home a { width:64px; background:url(images/home_but.gif) no-repeat; }
ul#headnav li.contact a { width:73px; background:url(images/contact_but.gif) no-repeat; }

ul#headnav li a:hover {
	background-position: 0 -19px;
}

#header {
	height:101px;
	width:726px;
	background:url(images/header-bg.gif) top left no-repeat;
}
#header img { float:right;}

#head-img {
	height:155px;
	width:724px;
	border:1px solid #515146;
}

ul#nav {
	height:44px;
	width:728px;
	margin:0; padding:0;
	list-style:none;
}
ul#nav li {
	height:44px;
	width:102px;
	margin:0; padding:0 2px 0 0;
	list-style:none;
	float:left;
}
ul#nav li a {
	display:block;
	height:44px;
	width:102px;
	margin:0; padding:0;
}
ul#nav li.des a { background:url(images/design-but.gif) no-repeat; }
ul#nav li.dev a { background:url(images/dev-but.gif) no-repeat; }
ul#nav li.man a { background:url(images/man-but.gif) no-repeat; }
ul#nav li.imp a { background:url(images/imp-but.gif) no-repeat; }
ul#nav li.dif a { background:url(images/dif-but.gif) no-repeat; }
ul#nav li.lat a { background:url(images/lat-but.gif) no-repeat; }
ul#nav li.mar a { background:url(images/mar-but.gif) no-repeat; }

ul#nav li a:hover, ul#nav li a.current {
	background-position: 0 -44px;
}

#cont-intro { width:726px;  text-align:left; float:left;}
#cont-intro .rule { float:left; border-bottom:2px solid #d9d6d6; }
#cont-intro h1 {
	font-size:14px;
	font-weight:bold;
	color:#333;
	margin:10px 0;
}

#content {
	width:726px;
	text-align:left;
	padding:0 0 10px 0;
	float:left;
}

/* layout one, Home page (Three column) content columns */
#content #one-col1 {
	width:95px;
	float:left;
}

#content #one-col2 {
	width:375px;
	float:left;
	padding:32px 0 10px 0;
}

#content #one-col3 {
	width:256px;
	float:left;
}

/* layout two, Case study (Two column) content columns */
#content #two-col1 {
	width:380px;
	float:left;
}
#content #two-col1 .logo {
	float:left;
}

#content #two-col2 {
	width:346px;
	float:left;
}
#content #two-col2 #case-nav {
	width:346px;
	height:24px;
	float:left;
	text-align:right;
}
#content #two-col2 #case-slide {
	width:320px;
	height:171px;
	float:right;
	border:3px solid #515146;
	padding:0;
}
ul.casestudies {
	height:18px;
	margin:0; padding:6px 0 0 0;
	list-style:none;
	float:right;
}
ul.casestudies li {
	height:12px;
	margin:0; padding:0;
	list-style:none;
	float:left;
}
ul.casestudies li.casetitle {
	width:99px;
	margin:0; padding:0;
	list-style:none;
	float:left;
	background:url(images/viewcase.gif) no-repeat;
}
ul.casestudies li a {
	display:block;
	height:12px;
	width:12px;
	margin:0 0 0 2px; padding:0;
}
ul.casestudies li.case01 a { background:url(images/case01-but.gif) no-repeat; }
ul.casestudies li.case02 a { background:url(images/case02-but.gif) no-repeat; }


ul.casestudies li a:hover {
	background-position: 0 -18px;
}

/* layout three, Case study (Two column) content columns */
#content #three-col1 {
	width:544px;
	float:left;
}
#content #three-col2 {
	width:182px;
	float:left;
}
ul.casestudies li.case-but a {
	width:99px;
	margin:0; padding:0;
	list-style:none;
	float:left;
	background:url(images/viewcase-but.gif) no-repeat;
}
ul.casestudies li.case-but a:hover {
	background-position: 0 -18px;
}

.caseimg {
	width:159px;
	height:98px;
	float:right;
	margin:0 0 20px 0;
	border:3px solid #515146;
}


#content #two-col1 ul, #content #three-col1 ul {
	margin:8px 0 8px 20px; padding:0;
}
#content #two-col1 ul li, #content #three-col1 ul li {
	margin:4px 0; padding:0;
}

/*Full column*/

#content #four-col1 {
 width:726px;
 float:left;
}

/* content font styles ===================================================*/

#content #two-col1 p, #content #three-col1 p, #content #two-col1 li, #content #three-col1 li, #content #four-col1 p, #content #four-col1 li { font-size:11px; color:#515146; margin:10px 5px 0 0;}

#content #one-col1 p { font-size:12px; color:#ababab; margin:50px 5px 0 0; text-align:right;}
#content #one-col2 p { font-size:12px; color:#515146; margin:5px 5px 0 10px; text-align:left;}
.shade-1 { color:#ababab;}
.shade-2 { color:#515146; font-weight:normal;}
.shade-3 { color:#000000; font-weight:normal;}
.shade-4 { color:#828282; font-weight:bold; }
#content a { text-decoration:underline; color:#515146; }
#content a:hover { text-decoration:underline; color:#ababab; }

/* ======================================================================*/

#footer {
	width:726px;
	height:95px;
	background:url(images/footer.gif) no-repeat;
	clear:both;
}

#foot-lyr1 {
	width:726px;
	text-align:left;
}

ul#foot-but {
	height:55px;
	margin:0; padding:9px 0 0 0;
	list-style:none;
	float:left;
}
ul#foot-but li {
	height:64px;
	margin:0; padding:0;
	list-style:none;
	float:left;
}
ul#foot-but li a {
	display:block;
	height:64px;
	margin:0; padding:0;
}
ul#foot-but li.llo a { width:109px; background:url(images/lloyds-grey.gif) no-repeat; }
ul#foot-but li.otw a { width:42px; background:url(images/o2-grey.gif) no-repeat; }
ul#foot-but li.sai a { width:89px; background:url(images/sains-grey.gif) no-repeat; }
ul#foot-but li.bod a { width:128px; background:url(images/bodyshop-grey.gif) no-repeat; }
ul#foot-but li.hbo a { width:99px; background:url(images/hbos-grey.gif) no-repeat; }
ul#foot-but li.cam a { width:77px; background:url(images/camelot-grey.gif) no-repeat; }

ul#foot-but li a:hover {
	background-position: 0 -64px;
}

#map-phone {
	width:180px;
	height:55px;
	padding:0;	margin:9px 0 0 0;
	background:url(images/phone-map.gif) no-repeat;
	float:left;
	text-align:right;
}
#map-phone p { margin:0; padding:2px 0 0 0; font-size:16px; }

#foot-lyr2 {
	width:726px;
	text-align:left;
	padding:0; margin:0;
	float:left;
}
#foot-lyr2 p {
	font-size:10px;
	font-family:Arial, Helvetica, sans-serif;
	color:#828282;
	margin:0 0 0 10px;
	padding:14px 0 0 0;
}
#foot-lyr2 p a { color:#000000; text-decoration:underline; }
#foot-lyr2 p a:hover { color:#666666; text-decoration:underline; }

#designby {
	width:726px;
	text-align:left;
	float:left;
}
#designby p {
	color:#ababab;
	font-size:10px;
	font-family:Arial, Helvetica, sans-serif;
	padding:1px 0 0 0;
}
#designby p a { color:#ababab; text-decoration:underline;}

/* Styleswitcher ==========================================*/

#stylebar {
	position:relative;
	width:766px;
	height:20px;
	margin:20px auto 0 auto;
}

#style-switch{
	position:absolute;
	top:3px;
	width: 176px;
	left: 573px;
	margin:0;
}

.stylebut{float:right; width:15px; height:15px; margin: 0 0 0 12px;}




/* =============================  Latest News Layout */

#content .latnews-row {
	width:726px;
	float:left;
	margin:0 0 20px 0;
}

#content .latnews-text {
	width:546px;
	float:left;
}

#content .latnews-text h2 {
	color:#666666;
	font-size:14px;
}
#content .latnews-text p { font-size:11px; color:#515146; margin:10px 5px 0 0;}

#content .latnews-image {
	width:180px;
	float:left;
	margin:20px 0 0 0;
}
#content .latnews-image img {
	float:right;
}
