/* Prod Cat Header Intro Box Styling - second design */
#ds-header-box {
	width:960px;
	overflow: hidden;
	/* height:130px; */
	background-color: #f6f6f6;
	margin: 5px 0px 0px 10px;
	padding: 20px 0px 0px 0px;
	-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	behavior: url(http://www.zcard.co.uk/js/pie.htc);}

.ds-intro-title {
	font-family: ReplicaProLight, helevetica, arial;
	font-size: 3.0em;
	color:#0088CE;
	margin: 0px 0px 0px 30px;}

.ds-intro-divider {
	width:900px;
	height:1px;
	background-color: #d9d8d8;
	float: left;
	margin: 15px 0px 0px 30px;
	padding: 0px 0px 0px 0px;}

.ds-intro-left {
	width:400px;
    overflow: hidden;
    float: left;
	margin: 20px 0px 0px 30px;
	padding: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.17em;
	color: #606060;
	line-height: 18px;}
	
.ds-intro-sub {
	font-weight: bold;
    /* font-family: Arial, Helvetica, sans-serif; */
	/* font-size: 1.17em; */
	color: #606060;
	/* line-height: 18px; */}
		

.ds-intro-right {
	width:400px;
    overflow: hidden;
    float: right;
	margin: 20px 30px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.17em;
	color: #606060;
	line-height: 18px;}

.ds-intro-right a:link, .ds-intro-right a:visited {
	color: #004466;
	line-height: 18px;
	text-decoration: none;
	font-weight: bold;}

.ds-intro-right a:hover {color:#000;}










/* Content Box Styling */
#ds-content-box {
	width:960px;
	background-color: #f6f6f6;
	margin-top: 15px;
	margin-left: 10px;
	padding-top: 25px;
	overflow: hidden;
	-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	behavior: url(http://www.zcard.co.uk/js/pie.htc);}

/* Container for web service elements */
#web-container {
    position: relative;
	width:960px;
	/* height: 500px; */
	margin-top: 15px;
	overflow: hidden;
	}

#web-intro {
	width:360px;
	overflow: hidden;
	margin-left: 70px;
	float: left;
    }
	
#web-image {
	width:420px;
	height: 260px;
/* 	background-color: #666; */
	margin-right: 30px;
	float: right;}










/* Container for mobile service elements */
#mobile-container {
	width:960px;
	margin-top: 15px;
	overflow: hidden;}

#mobile-intro {
	width:360px;
	overflow: hidden;
/* 	background-color: #666; */
	margin-right: 50px;
	float: right;}

#mobile-image {
	width:420px;
	height: 260px;
/* 	background-color: #666; */
	margin-left: 30px;
	float: left;}










/* Container for intergrated service elements */
#intergrated-container {
	width:960px;
	/* background-color: #ccc; */
	margin-top: 15px;
	overflow: hidden;}

#intergrated-intro {
	width:360px;
	overflow: hidden;
	/* background-color: #666; */
	margin-left: 70px;
	float: left;}

#intergrated-image {
	width:420px;
	height: 260px;
	/* background-color: #666; */
	margin-right: 30px;
	float: right;}










/* Container for emerging service elements */
#emerging-container {
	width:960px;
	/* background-color: #ccc; */
	margin-top: 15px;
	overflow: hidden;}

#emerging-intro {
	width:360px;
	overflow: hidden;
	/* background-color: #666; */
	margin-right: 50px;
	float: right;}

#emerging-image {
	width:420px;
	height: 260px;
	/* background-color: #666; */
	margin-left: 30px;
	float: left;}










/* Text Styling */
#web-intro p, #mobile-intro p, #intergrated-intro p, #emerging-intro p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	/* color: green; */
	color: #606060;
	line-height: 18px;} 

#web-intro p a:link,
#mobile-intro p a:link,
#intergrated-intro p a:link,
#emerging-intro p a:link,
#web-intro p a:visited,
#mobile-intro p a:visited,
#intergrated-intro p a:visited,
#emerging-intro p a:visited {
	color: #004466;
	line-height: 18px;
	text-decoration: none;
	font-style: italic;
	font-weight: bold;}

#web-intro p a:hover,
#mobile-intro p a:hover,
#intergrated-intro p a:hover,
#emerging-intro p a:hover,{
	color:#000;}

/* Text Styling */
#web-intro h2, #mobile-intro h2, #intergrated-intro h2, #emerging-intro h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	font-weight: bold;
	font-style: italic;
	color: #000;
	line-height: 18px;}










/* Container for both main and sub headings */
.left-headers {
	width:550px;
	height: 80px;
	/* background-color: #ccc; */
	display: block;
	float: left;}

.right-headers {
	width:550px;
	height: 80px;
    /* background-color: #ccc; */
	display: block;
	float: right;}










/* Container for main left headings */
.left-main-box {
	width:490px; /* 500 with lip */
	height: 40px;
	background-color: #0088ce;
	/* padding-left: 40px; */
	-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	behavior: url(http://www.zcard.co.uk/js/pie.htc);
    float: left;}

/* Container for sub left headings */
.left-sub-box {
	width:450px; /* 455 with lip */
	height: 25px;
	background-color: #fff;
	/* padding-left: 55px; */
	-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	behavior: url(http://www.zcard.co.uk/js/pie.htc);
	float: left;}

/* Container for main right headings */
.right-main-box { /* 500 with lip */
	width:490px;
	height: 40px;
	background-color: #0088ce;
	-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	behavior: url(http://www.zcard.co.uk/js/pie.htc);
	float: right;}

/* Container for sub right headings */
.right-sub-box { /* 455 with lip */
	width:455px;
	height: 25px;
	background-color: #fff;
	-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	behavior: url(http://www.zcard.co.uk/js/pie.htc);
	float: right;}










/* text styling of Main and Sub headers */
.left-main-text, .right-main-text {
	font-family: ReplicaProRegular, helevetica, arial;
	font-size: 2.5em;
	color:#fff;
	line-height: 40px;
	margin-left: 30px;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
	}

.left-sub-text  {
	font-family: ReplicaProRegular, helevetica, arial;
	font-size: 1.5em;
	color:#004466;
	line-height: 25px;
	margin-left: 50px;}

.right-sub-text  {
	font-family: ReplicaProRegular, helevetica, arial;
	font-size: 1.5em;
	color:#004466;
	line-height: 25px;
	margin-left: 20px;}











/* ------------ */
/* ------------ */

#web-more-container, #integrated-more-container {
	width: 323px;
	height: 40px;
	margin-top: 25px;
	}

#web-more-but a:link, #web-more-but a:visited,
#integrated-more-but a:link, #integrated-more-but a:visited {
	width: 323px;
	height: 40px;
	background-image: url(../images/services-img/digital/left-bar-up.png);
	background-repeat:no-repeat;
	float: left;
	font-family: ReplicaProItalic, helevetica, arial;
	font-size: 1.5em;
	color:#fff;
	text-decoration: none;
	line-height: 37px;}
	
	
	
/* Deactivated Web Development Portfolio */	
#web-more-but-deactivated {
	width: 323px;
	height: 40px;
	background-image: url(../images/services-img/digital/left-bar-up.png);
	background-repeat:no-repeat;
	float: left;
	font-family: ReplicaProItalic, helevetica, arial;
	font-size: 1.5em;
	color:#fff;
	text-decoration: none;
	line-height: 37px;	
	}
	
	
	
	

#web-more-but a:hover, #web-more-but a:active,
#integrated-more-but a:hover, #integrated-more-but a:active {
	width: 323px;
	height: 40px;
	background-image: url(../images/services-img/digital/left-bar-over.png);
	background-repeat:no-repeat;
	float: left;
	color:#fff;
	}		

.web-more-txt, .integrated-more-txt {margin-left: 15px;}

/* ------------ */

#mobile-more-container, #emerging-more-container {
	width: 363px;
	height: 40px;
	margin-top: 25px;
	}

#mobile-more-but a:link, #mobile-more-but a:visited,
#emerging-more-but a:link, #emerging-more-but a:visited {
	width: 363px;
	height: 40px;
	background-image: url(../images/services-img/digital/right-bar-up.png);
	background-repeat:no-repeat;
	font-family: ReplicaProItalic, helevetica, arial;
	font-size: 1.5em;
	color:#fff;
	text-decoration: none;
	line-height: 37px;
	float: right;
	text-align:right;
	}

#mobile-more-but a:hover, #mobile-more-but a:active,
#emerging-more-but a:hover, #emerging-more-but a:active {
	width: 363px;
	height: 40px;
	background-image: url(../images/services-img/digital/right-bar-over.png);
	background-repeat:no-repeat;
	color:#fff;
	float: right;
	}

.mobile-more-txt, .emerging-more-txt { margin-right: 23px;}
	
/* ------------ */
/* -----Project Planner Button ------- */

#planner-container {
	width: 263px;
	height: 33px;
	/* margin-top: 25px; */
	float: right;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 165px;
	}

#planner-but a:link, #planner-but a:visited {
	width: 263px;
	height: 33px;
	background-image: url(../images/services-img/digital/planner-but-off.png);
	background-repeat:no-repeat;
	float: left;
	font-family: ReplicaProItalic, helevetica, arial;
	font-size: 1.5em;
	color:#fff;
	text-decoration: none;
	line-height: 30px;
	}

#planner-but a:hover, #planner-but a:active {
	width: 263px;
	height: 33px;
	background-image: url(../images/services-img/digital/planner-but-on.png);
	background-repeat:no-repeat;
	float: left;
	color:#fff;
	}		

.planner-txt {margin-left: 17px;}

/* -----Project back Button ------- */

#back-container {
	width: 243px;
	height: 40px;
	/* margin-top: 25px; */
	float: left;
    margin-top: 20px;
    margin-bottom: 10px;
    /* margin-right: 165px; */
	}

#back-but a:link, #back-but a:visited {
	width: 243px;
	height: 40px;
	background-image: url(../images/services-img/digital/back-but_on.png);
	background-repeat:no-repeat;
	float: left;
	font-family: ReplicaProItalic, helevetica, arial;
	font-size: 1.5em;
	color:#fff;
	text-decoration: none;
	line-height: 37px;}

#back-but a:hover, #back-but a:active {
	width: 243px;
	height: 40px;
	background-image: url(../images/services-img/digital/back-but_off.png);
	background-repeat:no-repeat;
	float: left;
	color:#fff;
	}		

.back-txt {margin-left: 17px;}

/* ------------ */



/* ---- Jquery Fade Button -------- */
div.fadehover {
	position: relative;
	}
 
img.a {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	border:0px;
    }
 
img.b {
	position: absolute;
	left: 0;
	top: 0;
	border:0px;
	}
/* ------------ */






































/*
#web-more-button a:link,
#web-more-button a:visited {
	color: #004466;
	line-height: 18px;
	text-decoration: none;
	font-style: italic;
	font-weight: bold;}
*/

/* #web-more-button a:hover {color:#000;} */





























/***** Project Page *****/

/* Project Bio Container */
#project-bio {
	width:280px;
	margin-top: 15px;
	margin-left: 30px;
	float: left;
/* 	background-color: gray; */
	overflow: hidden;}

/* Project Screens Container */
#project-screens {
	width:600px;
	margin-top: 20px;
	margin-right: 30px;
	float: right;
	/* background-color: gray; */
	overflow: hidden;
	}
	
#project-screens img {margin-bottom: 40px;}
	
/* Project Bio Text Styling */
#project-bio h2 {
	font-family: ReplicaProLight, helevetica, arial;
	font-size: 3.0em;
	color:#0088CE;
	margin-top: 15px;
	}

#project-bio h3 {
	font-family: ReplicaProRegular, helevetica, arial;
	font-size: 1.4em;
	color:#000;
	margin-top: 25px;
	margin-bottom: 5px;
	}	

#project-bio ul {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.17em;
	color: #606060;
	line-height: 18px;
	}

#project-bio-title {
	font-family: ReplicaProLight, helevetica, arial;
	font-size: 3.0em;
	color:#0088CE;
	width:700px;
	margin-top: 15px;
	margin-left: 30px;
	padding-top: 5px;
    padding-bottom: 5px;
	float: left;
	overflow: hidden;}
	
.project-brief {
	color: #000;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 1.17em;
    line-height: 18px;
    font-weight: bold;
	}






/* Project Bio Container */
#related-projects-box {
	width:402px;
    padding-bottom: 2px;
    padding-left: 2px;
	float: right;
	/* background-color: blue; */
	overflow: hidden;}

#related-title-box {
	width:402px;
	height: 30px;
	margin-bottom: 10px;
	/* margin-right: 0px; */
	float: left;
	/* background-color: green; */
	/* overflow: hidden; */
	border-bottom: 1px solid #d4d4d4;
	font-family: ReplicaProRegular, helevetica, arial;
	font-size: 1.5em;
	line-height: 30px;
	color:#0088ce;}

#project-box-one, #project-box-two, #project-box-three {
	position: relative;
	width:120px;
	height: 130px;
	/* background-color: blue; */
	float: left;
	-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
	behavior: url(http://www.zcard.co.uk/js/pie.htc);}

#project-box-one, #project-box-two {margin-right: 19px;}

#project-box-one img, #project-box-two img, #project-box-three img {
	width:120px;
	height: 90px;
	background-color: #fff;}

div.thumb-box {
	width:120px;
	height: 90px;
	float: left;
	}
	
.caption-box {
	width:120px;
	height: 38px;
	background-color: #e6e6e6;
	float: left;
	border-top: 1px solid #a1a1a1;
	border-bottom: 1px solid #0088ce;}

.caption-box .title {
	font-family: ReplicaProRegular, helevetica, arial;
	font-size: 1.17em;
	color: #000;
	display: block;
	margin: 5px 0px 0px 5px;}

.caption-box a:link,
.caption-box a:visited {
	font-family: ReplicaProRegular, helevetica, arial;
	font-size: 1.17em;
	line-height: 13px;
	display: block;
	color: #004466;
	text-decoration: none;
	/* font-weight: bold; */
	margin: 2px 0px 0px 5px;}

.caption-box a:hover {color:#000;}














#proj-header-box {
	width:960px;
	float: left;
	overflow: hidden;
	}

#proj-header-left-box {
	width:470px;
	float: left;
	overflow: hidden;
	}

#proj-header-right-box {
	width:410px;
	margin-top: 40px;
	margin-right: 30px;
	float: right;
	overflow: hidden;
	}

#proj-service-head {
	width:460px;
	height: 40px;
	background-color: #0088ce;
	margin-bottom: 30px;
	-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	behavior: url(http://www.zcard.co.uk/js/pie.htc);
    float: left;
    }
    
#proj-service-intro {
	width:360px;
	overflow: hidden;
	margin-left: 30px;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	font-weight: bold;
	font-style: italic;
	color: #000;
	line-height: 18px;
	}

#proj-divider {
	width:900px;
	height:5px;
	margin-top: 15px;
	margin-left: 30px;
	float: left;
	border-bottom: 1px solid #d4d4d4;
	}







/* ****** NSW Video Added CSS ****** */

#project-video {
	width:600px;
	margin-top: 0px;
	margin-bottom: 20px;
	float: right;
/* 	background-color: gray; */
	overflow: hidden;
	}