/****************************
			GLOBAL
*****************************/

* {
	margin:0px;
	padding:0px;
}

body {
	font-size: 62.5%;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	line-height:1.5;
}

:focus, :active { 
	outline: 0; 
}

.clear {
	clear:both;
}

a img {
	border:0px;
}

/****************************
			HEADER
*****************************/

#header_bg {
	background-image:url(../images/bg_header.gif);
	background-repeat:repeat-x;
	height:167px;
}

#header {
	width:917px;	/*934px*/
	margin:0px auto;
	padding-right:17px;
}

#logo {
	width:250px;
	float:left;
}

#client_login {
	float:right;
	min-width:56px;	/*74px*/
	min-height:21px;	/*25px*/
	background-color:#0079c8;
	padding:4px 9px 0px;
	text-align:center;
}

	#client_login a {
		color:#99ccff;
		text-decoration:none;
		font-size:1.1em;
	}
	
	#client_login a:hover {
		color:#fff;
	}

/* ====================== */
/* = --- NAVIGATION --- = */
/* ====================== */

#header_nav {
	float:right;
	width:618px;
/*	margin:45px 0px 0px 50px;*/
	margin:35px 0px 0px 0px;
	height:60px;
}

/*#nav {
	float:left;
	margin:45px 0px 0px 50px;
	height:60px;
}
*/
	#nav ul.navigation {
		list-style:none;
	}
	
		#nav ul.navigation li {
			height:24px;
			float:left;
			margin:0px 14px;
		}
		
		#nav ul.navigation li a {
			text-indent:-9999px;
			overflow:hidden;
			display:block;
			background-repeat:no-repeat;
		}
		
			#nav ul.navigation li.nav_home a {
				background-image:url(../images/nav_home.gif);
				width:46px;
				height:24px;
			}
			
			#nav ul.navigation li.nav_whoweare a {
				background-image:url(../images/nav_whoweare.gif);
				width:96px;
				height:24px;
			}
			
			#nav ul.navigation li.nav_whatwedo a {
				background-image:url(../images/nav_whatwedo.gif);
				width:96px;
				height:24px;
			}
			
			#nav ul.navigation li.nav_ourwork a {
				background-image:url(../images/nav_ourwork.gif);
				width:72px;
				height:24px;
			}
			
			#nav ul.navigation li.nav_blog a {
				background-image:url(../images/nav_blog.gif);
				width:40px;
				height:24px;
			}
			
			#nav ul.navigation li.nav_sayhello a {
				background-image:url(../images/nav_sayhello.gif);
				width:74px;
				height:24px;
			}
			
			#nav ul.navigation li a:hover {
				background-position:0 100%;
			}

#nav img.nav_divider {
	margin:6px 0px;
}

/* ========================== */
/* = --- SUB-NAVIGATION --- = */
/* ========================== */

#nav ul.subnav {
	list-style:none;
}

	#nav ul.subnav li {
		height:22px;
		float:left;
		margin:0px 18px 0px 0px;
	}
	
	#nav ul.subnav li a {
		text-indent:-9999px;
		overflow:hidden;
		display:block;
		background-repeat:no-repeat;
	}
	
		#nav ul.subnav li.sub_whoweare_howwestarted a {
			background-image:url(../images/subnav_howwestarted.gif);
			width:100px;
			height:22px;
		}
		
		#nav ul.subnav li.sub_whoweare_meettheteam a {
			background-image:url(../images/subnav_meettheteam.gif);
			width:100px;
			height:22px;
		}
	
		#nav ul.subnav li.sub_whatwedo_webdesign a {
			background-image:url(../images/subnav_webdesign.gif);
			width:76px;
			height:22px;
		}
		
		#nav ul.subnav li.sub_whatwedo_hosting a {
			background-image:url(../images/subnav_hosting.gif);
			width:50px;
			height:22px;
		}
		
		#nav ul.subnav li.sub_whatwedo_interactive a {
			background-image:url(../images/subnav_interactive.gif);
			width:68px;
			height:22px;
		}
		
		#nav ul.subnav li.sub_whatwedo_internetmarketing a {
			background-image:url(../images/subnav_internetmarketing.gif);
			width:114px;
			height:22px;
		}
		
		#nav ul.subnav li.sub_whatwedo_graphicdesign a {
			background-image:url(../images/subnav_graphicdesign.gif);
			width:94px;
			height:22px;
		}
		
		#nav ul.subnav li.sub_whatwedo_3ddevelopment a {
			background-image:url(../images/subnav_3ddevelopment.gif);
			width:100px;
			height:22px;
		}
		
		#nav ul.subnav li.sub_whatwedo_agency a {
			background-image:url(../images/subnav_agency.gif);
			width:118px;
			height:22px;
		}
		
		#nav ul.subnav li.sub_whatwedo_bms a {
			background-image:url(../images/subnav_bms.gif);
			width:186px;
			height:22px;
		}
		
		#nav ul.subnav li a:hover {
			background-position:0 100%;
		}
		
/* ================================== */
/* = --- SUB-NAVIGATION CURRENT --- = */
/* ================================== */

#nav ul.subnav-cur {
	list-style:none;
}

	#nav ul.subnav-cur li {
		height:22px;
		float:left;
		margin:0px 18px 0px 0px;
	}

	#nav ul.subnav-cur li a {
		text-indent:-9999px;
		overflow:hidden;
		display:block;
		background-repeat:no-repeat;
	}

		#nav ul.subnav-cur li.sub_whoweare_howwestarted a {
			background-image:url(../images/subnav_howwestarted.gif);
			width:100px;
			height:22px;
		}

		#nav ul.subnav-cur li.sub_whoweare_meettheteam a {
			background-image:url(../images/subnav_meettheteam.gif);
			width:100px;
			height:22px;
		}

		#nav ul.subnav-cur li.sub_whatwedo_webdesign a {
			background-image:url(../images/subnav_webdesign.gif);
			width:76px;
			height:22px;
		}

		#nav ul.subnav-cur li.sub_whatwedo_hosting a {
			background-image:url(../images/subnav_hosting.gif);
			width:50px;
			height:22px;
		}

		#nav ul.subnav-cur li.sub_whatwedo_interactive a {
			background-image:url(../images/subnav_interactive.gif);
			width:68px;
			height:22px;
		}

		#nav ul.subnav-cur li.sub_whatwedo_internetmarketing a {
			background-image:url(../images/subnav_internetmarketing.gif);
			width:114px;
			height:22px;
		}
		
		#nav ul.subnav-cur li.sub_whatwedo_graphicdesign a {
			background-image:url(../images/subnav_graphicdesign.gif);
			width:94px;
			height:22px;
		}

		#nav ul.subnav-cur li.sub_whatwedo_3ddevelopment a {
			background-image:url(../images/subnav_3ddevelopment.gif);
			width:100px;
			height:22px;
		}

		#nav ul.subnav-cur li.sub_whatwedo_agency a {
			background-image:url(../images/subnav_agency.gif);
			width:118px;
			height:22px;
		}
		
		#nav ul.subnav-cur li.sub_whatwedo_bms a {
			background-image:url(../images/subnav_bms.gif);
			width:186px;
			height:22px;
		}

		#nav ul.subnav-cur li a:hover {
			background-position:0 100%;
		}

/****************************
     HEADER - Login Form
*****************************/

#header_login {
	float:right;
	width:667px;
	height:90px;
}

#cl {
	float:left;
	margin:30px 0px 0px 90px;
	height:60px;
}

#frm_cl {

}

	#frm_cl .frm_cl_feild {
		width:200px;
		float:left;
		margin-right:20px;
	}

	#frm_cl .frm_cl_btn {
		width:100px;
		float:left;
		margin-right:20px;
	}

	#frm_cl label {
		font-size:1.2em;
		color:#fff;
		font-weight:bold;
		display:block;
		margin-bottom:4px;
	}

	#frm_cl input {
		display: block;
		width: 180px;
		padding:4px;
		border:1px solid;
		border-color:#7c7c7c #c3c3c3 #dddddd;
	}

	#frm_cl input.btn_login {
		padding:3px;
		width:80px;
		border:1px solid #99CCFF;
		background-color:#0079C8;
		color:#fff;
	}

/****************************
     BANNER - Not Full Width
*****************************/

#banner {
	background-image:url(../images/bg_banner.gif);
	background-repeat:no-repeat;
	height:154px;	/*158px*/
	width:904px;	/*934px*/
	margin:0px auto;
	padding:4px 0px 0px 30px;
}

/*	#banner img {
		margin-left:37px;
	}*/

/* ====================== */
/* = --- BREADCRUMB --- = */
/* ====================== */
	
#breadcrumb {
	height:18px;
	display:block;
	margin-bottom:20px;
}

	#breadcrumb p {
		font-size:1.4em;
		color:#129cf5;
	}
	
	#breadcrumb a {
		text-decoration:none;
		color:#999;
	}
	
	#breadcrumb a.last {
		color:#656565;
	}
	
	#breadcrumb a:hover {
		text-decoration:underline;
	}

/****************************
		   CONTENT
*****************************/

#container {
	width:934px;
	margin:0px auto;
	background-image:url(../images/bg_container.gif);
	background-repeat:repeat-y;
}

#content {
	width:890px;	/*920px*/
	margin:0px auto;
	padding:0px 0px 0px 40px;
}

#content_left {
	float:left;
	width:600px;
	margin-right:15px;
}

	#content_left h1 {
		font-family: Georgia, "Times New Roman";
		font-size:2.8em;
		color:#ff9900;
		font-weight:normal;
/*		margin-bottom:12px;*/
	}


.inter-text {
	margin:0px;
}

.text p {
	font-size:1.2em;
	color:#414141;
	margin-bottom:14px;
}

.text a {
	color:#149df5;
}

.text h2 {
	font-family: Georgia, "Times New Roman";
	font-size:1.8em;
	color:#ff9900;
	font-weight:normal;
}

.text h2 span {
	color:#888;
}

.text abbr {
	border-bottom:1px dotted #999;
}

.list {
	font-size:1.2em;
	color:#414141;
	margin-left:20px;
}

	.list li {
		margin-bottom:8px;
	}
	
#text-flash h1:hover, #text-cdrom h1:hover, #text-screen h1:hover, #text-touch h1:hover, #text-dvd h1:hover  {
	cursor:pointer;
}

#showcase li {
	float:left;
/*	margin-right:70px;*/
	width:600px;
	list-style:none;
}

	#showcase li h3 {
		font-size:1.6em;
		font-weight:bold;
	}

	#showcase li a {
		text-decoration:none;
		color:#129cf5;
	}
	
	#showcase li a:hover {
		text-decoration:underline;
	}

	#showcase li a img {
		border:5px solid #ddd;
		margin-bottom:10px;
		display:block;
	}
	
	#showcase li a img:hover {
		border:5px solid #b3dffc;
	}
	
	#showcase li p {
		font-weight:bold;
	}


/* ======================== */
/* = --- CONTACT FORM --- = */
/* ======================== */

#frm_contact {
	font-size:1.2em;
}

	#frm_contact label {
		display: block;
		width: 140px;
		float: left;
		margin-bottom: 10px;
		padding-right:10px;
		text-align:right;
		color:#149df5;
		font-weight:bold;
	}
	
	#frm_contact input {
		display: block;
		width: 200px;
		float: left;
		margin-bottom: 10px;
		padding:4px;
		border:1px solid;
		border-color:#7c7c7c #c3c3c3 #dddddd;
	}
	
	#frm_contact input[type="hidden"] {
		display:none;
	}
	
	#frm_contact #form, #frm_contact #form_type {
		margin-bottom: 10px;
		padding:0px;
		border:0px;
	}
	
	#frm_contact textarea {
		display: block;
		float: left;
		margin-bottom: 10px;
		padding:4px;
		border:1px solid;
		border-color:#7c7c7c #c3c3c3 #dddddd;
		font-family:helvetica, arial;
		font-size:0.8em;
	}
	
	#frm_contact br {
		clear:left;
	}
	
	#frm_contact .btn_submit {
		float:none;
		background-color:#149df5;
		color:#fff;
		border:1px solid #0F76B8;
		width:100px;
	}
	
.callback_text h1 {
	font-family: Georgia, "Times New Roman";
	font-size:2.8em;
	color:#ff9900;
	font-weight:normal;
	margin-bottom:12px;
}	

.callback_text p {
	font-size:1.2em;
	color:#414141;
	margin-bottom:30px;
}

	
/* ============================ */
/* = --- CALLBACK REQUEST --- = */
/* ============================ */

#frm_callback {
	font-size:1.2em;
}

	#frm_callback label {
		display: block;
		width: 140px;
		float: left;
		margin-bottom: 10px;
		padding-right:10px;
		text-align:right;
		color:#149df5;
		font-weight:bold;
	}
	
	#frm_callback input {
		display: block;
		width: 200px;
		float: left;
		margin-bottom: 10px;
		padding:4px;
		border:1px solid;
		border-color:#7c7c7c #c3c3c3 #dddddd;
	}
	
	#frm_callback input[type="hidden"] {
		display:none;
	}
	
	#frm_callback select {
		display: block;
		width: 210px;
		float: left;
		margin-bottom: 10px;
		/*padding:4px;*/
		border:1px solid;
		border-color:#7c7c7c #c3c3c3 #dddddd;
	}
	
	#frm_callback br {
		clear:left;
	}
	
	#frm_callback .btn_submit {
		float:none;
		background-color:#149df5;
		color:#fff;
		border:1px solid #0F76B8;
		width:100px;
	}

/* =========================== */
/* = --- PORTFOLIO PAGES --- = */
/* =========================== */


#gallery {
	width:600px;
	margin-bottom:20px;
}

	/*#gallery img {
			border:1px solid #ccc;
		}
		*/
		
#img {
	border:1px solid #ccc;
	width:570px;
	height:330px;
	margin-bottom:8px;
	float:left;
}

ul#parent4 {
	position:relative;
	z-index:1;
}

#shine {
	position:relative;
	z-index:99;
	float:left;
	top:-330px;
}

#numbers {
	font-size:1.2em;
	list-style:none;
}

	#numbers li {
		width:16px;
		float:left;
		text-align:center;
	}
	
	#numbers li a {
		display:block;
	}

/* ============================== */
/* = --- INTERACTIVE SUBNAV --- = */
/* ============================== */

#interactive_subnav {
	list-style:none;
}

	#interactive_subnav li {
		float:left;
		height:37px;
		overflow:hidden;
		display:block;
		background-repeat:no-repeat;
	}
	
	#interactive_subnav li a {
		text-indent:-9999px;
		overflow:hidden;
		display:block;
		background-repeat:no-repeat;
	}
	
		#interactive_subnav li.showall {
			background-image:url(../images/inter_sub_showall.gif);
			height:37px;
			width:100px;	
		}
		
		#interactive_subnav li.flash {
			background-image:url(../images/inter_sub_flash.gif);
			height:37px;
			width:69px;
		}
		
		#interactive_subnav li.cdrom {
			background-image:url(../images/inter_sub_cdrom.gif);
			height:37px;
			width:79px;
		}
		
		#interactive_subnav li.screensavers {
			background-image:url(../images/inter_sub_screensavers.gif);
			height:37px;
			width:123px;
		}
		
		#interactive_subnav li.touch {
			background-image:url(../images/inter_sub_touch.gif);
			height:37px;
			width:164px;
		}
		
		#interactive_subnav li.dvd {
			background-image:url(../images/inter_sub_dvd.gif);
			height:37px;
			width:65px;
		}
		
		#interactive_subnav li:hover {
			background-position:0 50%;
			cursor:pointer;
		}
		
		#interactive_subnav li.selected {
			background-position:0 100%;
		}

/* ========================= */
/* = --- MEET THE TEAM --- = */
/* ========================= */

#meetteam {
	list-style:none;
	margin-left: 150px;
}

#meetteam li {
	float:left;
	height:174px;
	text-indent:-9999px;
	overflow:hidden;
	display:block;
	background-repeat:no-repeat;
}

	#meetteam li a {
		text-indent:-9999px;
		overflow:hidden;
		display:block;
		background-repeat:no-repeat;
	}
	
		#meetteam li.shadow {
			background-image:url(../images/meetteam_shadow.jpg);
			height:174px;
			width:56px;
		}
	
		#meetteam li.glen {
			background-image:url(../images/meetteam_glen.jpg);
			height:174px;
			width:61px;
		}

		#meetteam li.mag {
			background-image:url(../images/meetteam_mag.jpg);
			height:174px;
			width:66px;
		}
		
		#meetteam li.ivans {
			background-image:url(../images/meetteam_ivans.jpg);
			height:174px;
			width:64px;
		}
		
		#meetteam li:hover {
			cursor:pointer;
		}
		
#text-glen h2:hover, #text-leu h2:hover, #text-mag h2:hover, #text-ivans h2:hover, #text-ella h2:hover {
	cursor:pointer;
}

/* ================= */
/* = --- BLOGS --- = */
/* ================= */

.blog_container {
	width:600px;
	margin-bottom:20px;
}

.posted {
	width:60px;
	float:left;
	margin-right:6px;
	padding-top:10px;
}

	.posted p {
		font-size:1.1em;
		color:#149df5;
		text-align:center;
	}

.blog {
	width:474px;	/*540px*/
	min-height:150px;	/*166px*/
	float:left;
	background-image:url(../images/bg_blog.gif);
	background-repeat:no-repeat;
	padding:16px 30px 0px;
}

	.blog h2 a {
		color:#cc0000;
		text-decoration:none;
	}
	
	.blog h2 a:hover {
		text-decoration:underline;
	}
	
	.blog p {
		font-size:1.2em;
		color:#414141;
	}
	
	.blog p a {
		color:#cc0000;
		text-decoration:none;
	}
	
	.blog p a:hover {
		text-decoration:underline;
	}
	
	.blog img {
		margin:6px;
		padding:4px;
		border:1px solid #ddd;
	}


#content_right {
	float:left;
	width:275px;
}

#right_grey {
	width:214px;	/*274px*/
	background-image: url(../images/bg_right_grey.gif);
	background-repeat:repeat-y;
	padding:0px 30px;
	
/*	min-height:200px;*/
}

	#right_grey h1 {
		font-family: Georgia, "Times New Roman";
		font-size:2.4em;
		color:#149df5;
		font-weight:normal;
	}
	
/* ================ */
/* = --- BLOG --- = */
/* ================ */
	
	#top-blog li, #bottom-blog li {
		border-bottom:1px dotted #5f5f5f;
		padding:0px 0px 8px 0px;
		margin-top:10px;
		list-style:none;
	}
	
	#top-blog h2, #bottom-blog h2 {
		font-size:1.4em;
		font-weight:bold;
	}
	
		#top-blog h2 a, #bottom-blog h2 a {
			color:#f48e00;
			text-decoration:none;
		}
		
		#top-blog h2 a:hover, #bottom-blog h2 a:hover {
			text-decoration:underline;
		}
	
	#top-blog p, #bottom-blog p {
		font-size:1.1em;
		color:#fff;
		
		text-shadow: 0 0 0 #000;	/*safari*/
		opacity:0.99;
	}
	
	#top-blog p.date, #bottom-blog p.date {
		color:#888;
	}
	
	#top-blog p a, #bottom-blog p a {
		color:#f48e00;
		text-decoration:none;
	}
	
	#top-blog p a:hover, #bottom-blog p a:hover {
		text-decoration:underline;
	}
	
	#top-blog a.readblog, #bottom-blog a.readblog {
		font-size:1.2em;
		color:#f48e00;
		text-decoration:none;
	}
	
		#top-blog a.readblog:hover, #bottom-blog a.readblog:hover {
			text-decoration:underline;
		}
		
	#rss_container{
/*		border:1px solid red;*/
	}
	
	#rss_container img {
		margin-left:520px;
	}

/* ======================== */
/* = --- CONTACT INFO --- = */
/* ======================== */

/*#right_grey_contact {
	width:214px;	274px
	background-image: url(../images/bg_right_grey.gif);
	background-repeat:repeat-y;
	padding:0px 30px;
}*/

	/*#right_grey_contact h1 {
			font-family: Georgia, "Times New Roman";
			font-size:2.4em;
			color:#149df5;
			font-weight:normal;
		}*/

#right_grey_contact li {
	padding:0px 0px 8px;
	margin-top:10px;
	list-style:none;
}

#right_grey_contact p {
	font-size:1.2em;
	color:#fff;

	text-shadow: 0 0 0 #000;	/*safari*/
	opacity:0.99;
}

#right_grey_contact p a {
	color:#f48e00;
	text-decoration:none;
}

#right_grey_contact p a:hover {
	text-decoration:underline;
}

#right_grey_contact p span.contact_label {
	font-weight:bold;
	color:#888;
}

#right_grey_bottom {
	width:274px;
	height:22px;
	background-image: url(../images/bg_right_grey_btm.gif);
	background-repeat:no-repeat;
}

#right_blue_top {
	width:274px;
	height:22px;
	background-image: url(../images/bg_right_blue_top.gif);
	background-repeat:no-repeat;
}

#right_blue {
	width:214px;	/*274px*/
	background-image: url(../images/bg_right_blue.gif);
	background-repeat:repeat-y;
	padding:0px 30px;
	
/*	min-height:200px;*/
}
	
	#right_blue h1 {
		font-family: Georgia, "Times New Roman";
		font-size:2.4em;
		color:#333333;
		font-weight:normal;
		margin-bottom:10px;
	}

/* =================== */
/* = --- TWITTER --- = */
/* =================== */
	
	#right_blue .ul-list ul {
		list-style:none;
	}
	
		#right_blue .ul-list ul li {
			color:#fff;
			font-size:1.1em;
			padding:0px 0px 8px 0px;
			border-bottom:1px dotted #0f76b8;
			width:214px;
			
			text-shadow: 0 0 0 #000;	/*safari*/
			opacity:0.99;
		}
		
			#right_blue .ul-list ul li a {
				color:#333333;
				text-decoration:none;
			}
			
	 #bottom-twitter a.followus, #top-twitter a.followus {
	 	font-size:1.2em;
	 	color:#333;
	 	text-decoration:none;
	 }
     
	 	#bottom-twitter a.followus:hover, #top-twitter a.followus:hover {
	 		text-decoration:underline;
	 	}
	
/* ======================= */
/* = --- CONTACT MAP --- = */
/* ======================= */

#right_blue_map {
	width:214px;	/*274px*/
	background-image: url(../images/bg_right_blue.gif);
	background-repeat:repeat-y;
	padding:0px 30px;
	
/*	min-height:200px;*/
}
	
	#right_blue_map h1 {
		font-family: Georgia, "Times New Roman";
		font-size:2.4em;
		color:#333333;
		font-weight:normal;
		margin-bottom:10px;
	}

#right_blue_map li {
	list-style:none;
}

	#right_blue_map img.map {
		border:1px solid #2977a9;
		margin-left:4px;
	}

	#right_blue_map p {
		color:#fff;
		font-size:1.2em;
	}
	
	#right_blue_map #frm_postcode {
		margin-top:10px;
	}
	
	#right_blue_map #frm_postcode input {
		width:120px;
		float:left;
		border:1px solid;
		border-color:#7c7c7c #c3c3c3 #dddddd;
		padding:4px;
		color:#888;
		margin-right:10px;
	}
	
	#right_blue_map #frm_postcode .btn_go {
		width:50px;
		background-color:#555;
		color:#fff;
		padding:3px;
	}


/****************************
    FOOTER - Not Full Width
*****************************/

#footer {
	width:860px;	/*934px*/
	height:80px;	/*130px*/
	background-image:url(../images/bg_footer.gif);
	margin:0px auto;
	padding:50px 37px 0px;
}

	#footer p {
		color:#fff;
		font-size:1.1em;
		
		text-shadow: 0 0 0 #000;	/*safari*/
		opacity:0.99;	/*firefox*/
	}
	
	#footer p strong {
		color:#66CCFF;
	}
	
	#footer a {
		color:#fff;
		text-decoration:none;
	}
	
	#footer a:hover {
		text-decoration:underline;
	}

#footer_left {
	float:left;
	width:430px;
}

#footer_right {
	float:left;
	width:430px;
	text-align:right;
}