<style>con/* -------------------------------------
/*  html, body
/* -------------------------------------*/

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


html {
	
	color:					#909192;
	font-family:			Arial, Helvetica, sans-serif;
	text-align:				center;
	font-size:				9px;
	overflow-Y: scroll;
	/*text-shadow: 1px 1px 0px #1c1e1e;*/

	
}


html, body {
	margin:					0;
	padding:				0;
}

body { 
	width:					100%; 
	text-align: 			left;
	margin:					0 auto;
	line-height:			1em;
}

/* -------------------------------------
/*  Baseline values for browser consistency
/* -------------------------------------*/

p, div, h1, h3, h4, ul, li, form, input, select, option {
	margin:					0;
	padding:				0;
	text-align:left;
	line-height: 1.4em;
	font-family: Arial, Helvetica, sans-serif;
	font-size:8.7pt;
}

img {
	margin:					0;
	padding:				0;
	border:					0;
	color: #FFFFFF;
}

ul {
	list-style:				none;
}

a { color:					#c5c7c7;
	outline:				0;
}


.clear {
	clear:					both;
	height:					0px;
	font-size: 0px;
	f
	line-height: 0px;
}


.clearFix:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
		}
		
		


/* -------------------------------------
/*  default links
/* -------------------------------------*/

a:link, a:visited, a:active {
	color:					#ccc9c9;
	text-decoration:		none;

}

a:hover {
	color:					#52cdec;
	
}


h1 { font:	arial,georgia, serif;
	font-size:22px;
	font-weight:bold;
	color:#faa71b;
	line-height:27px
}

h2 {font:	arial,georgia, serif;
	font-size:14px;
	font-weight:bold;
	line-height:21px;
	color:#8a8b8c;
}

h3 {
	font-family:Arial, Helvetica, sans-serif;
font-weight:bold; 
font-size:12px; 
color:#333;
text-transform:uppercase;
}



h4 {font:	arial,georgia, serif;
	font-size:12px;
	font-weight:bold;
	color:#666666;
	line-height:15px;
}

h5 {font:	"Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
	font-size:10px;
	color:#000000;
	line-height:12px;
}


h6 {font: 					arial,georgia, serif;
	font-size:				11.2px;
	margin:					0;
	line-height:            15px;
	color: 					#cfcfcf;
	line-height:			1em;

}


  
/*-------------------------------------
 	Menu
---------------------------------------*/
	
	#mainmenu
{
	
	background:	url(images/menubg.png) repeat-x;
	height: 58px; !important
	width: 720px; !important

	z-index:5000
}
	
	
	#nav {
		margin:0; 
		padding:0; 
		list-style:none;
		display:block;
		z-index:5000
	}	
	
		/* make the LI display inline */
		/* it's position relative so that position absolute */
		/* can be used in submenu */
		#nav li {
			float:left; 
			display:block; 
			position:relative;
			z-index:500; 
			margin:0 1px;
			width: 117px;
			z-index:5000
		}
		
		/* this is the parent menu */
		#nav li a {
			display:block; 
			
			font-weight:700;  
			min-height:18px; 
			text-decoration:none; 
			color:#fff; 
			text-align:center; 
			color:#333;
			z-index:5000
		}

		#nav li a:hover {
			
			background:	url(images/mainmenu_hover.png);
			
			
		}
	
		/* you can make a different style for default selected value */
		#nav a.selected {
			color:#f00;
			width: 117px;
			z-index:5000;
		}
		
	
		/* submenu, it's hidden by default */
		#nav ul {
			position:absolute; 
			left:0; 
			display:none; 
			margin:0 0 0 -1px; 
			padding:0; 
			list-style:none;
			z-index:5000
		}
		
		#nav ul li {
			display:block;
			min-width:117px; 
			background:	url(images/drop_menubg.png) no-repeat;
			float:left; 
			
			z-index:5000;
		}
		
		
		#nav ul li a:hover{
			display:block;
			background:	url(images/menu_hover.png) no-repeat;
			width:117px;
			margin:0px 0px 0 0px;
			float:left; 
			z-index:5000;
		}
		
		/* display block will make the link fill the whole area of LI */
		#nav ul a {
			display:block;  
			height:15px;
			padding: 0px 0px; 
			z-index:5000;
		}
		
		#nav ul a:hover {
			text-decoration:underline;	
		}

		/* fix ie6 small issue */
		/* we should always avoid using hack like this */
		/* should put it into separate file : ) */
		*html #nav ul {
			margin:0 0 0 -2px;
		}


ul :hover ul li{visibility:hidden;}
a:hover ul{visibility:visible; }



/* -------------------------------------
/*  Home
/* -------------------------------------*/


#homelinks


{
	margin-left:0px;
	width:	760px;
	margin-top: 0px;
	height: 130px;
	z-index:10000;
}


#homethumb

{

	margin-top: 20px; 
	list-style:none;
	display:block;
	height:	130px;
	z-index:5000;
	
}

#homethumb ul a {
	display:block;  
	height:75px;
			z-index:5000;
			
		}

#homethumb li a 
{
	display:block; 
	height:75px; 

			z-index:5000;
}

#homethumb ul li {
	display:block; 
	float:left; 
z-index:5000;
			
}

#homethumb li 
{
	float:left; 
	display:block; 
	position:relative;

z-index:5000;
}


/*--------------------
Accordian
------------------*/

*, * focus {
	outline: none;
	margin: 0;
	padding: 0;
}

.container {
	width: 790px;
	height: 530px;
	margin-top: 10px;
	margin-left: 15px;
}


h1 {
	font: 4em normal Arial;
	text-align:center;
	padding: 20px 0;
	color: #aaa;
}
h1 span { color: #666; }
h1 small{
	font: 0.3em normal Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	letter-spacing: 0.5em;
	display: block;
	color: #666;
}

h2.acc_trigger {
	padding: 0;	margin: 0 0 3px 0;
	background: url(images/services_tabs.jpg) no-repeat;
	height: 28px;	line-height: 5px;
	width: 790px;
	font-size: 2em;
	font-weight: normal;
	float: left;
}
h2.acc_trigger a {
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 8 0 0 30px;
}
h2.acc_trigger a:hover {
	color: #ccc;
}
h2.active {background-position: left bottom;}
.acc_container {
	margin: 0 0 5px 2px;; padding: 0;
	overflow: hidden;
	font-size: 1.2em;
	width: 776px;
	color: #767778;
	clear: both;
	background: #f2f2f1;
	border: 1px solid #d6d6d6;
	/*-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px; */
}
.acc_container .block {
	padding: 10px 20px 5px 24px;
}
.acc_container .block p {
	padding: 5px 0;
	margin: 5px 0;
	
}
.acc_container h3 {
	font: 2.5em normal Arial;
	margin: 0 0 10px;
	padding: 0 0 5px 0;
	border-bottom: 1px dashed #ccc;
}
.acc_container img {
	float: left;
	margin: 0px 10px 0px 0;
	
}



.marketing_container {
	margin: 0 0 5px 2px;; padding: 0;
	overflow: hidden;
	font-size: 1.2em;
	width:783px;
	clear: both;
	background: #ffffff;


}

.marketing_container .block
{
	padding: 10px 0px 20px 0px;
}
.marketing_container .block p {
	padding: 5px 0;
	margin: 5px 0;
}
.marketing_container h3 {
	font-size:16px;
	padding: 0 0 5px 0;

}
.marketing_container img {
	float: left;
	margin: 5px 15px 15px 0;
	padding: 5px 4px 5px 5px;
	
}

/* -------------------------------------
/*  Content
/* -------------------------------------*/


loader 
		{
       
            width: 1680px;
            height: 1050px;
            overflow: hidden;
        }
		
		     loader img{
			  margin-top: 0px;
			  position:absolute;
			  z-index: -50000;
        }

        loader.loading {
            background: url(images/spinner.gif) no-repeat center center;
        }
		
		

#mainwrapper
{
 background: url(images/spacer.gif) background-repeat:no-repeat;
	min-width:	100%;
	height: 937px;
	margin-top:	0px;
	position:absolute;
	z-index: 100000;
	
}

#mainweb
{
	background:	url(images/FUNXION_webbg.jpg) no-repeat;
	min-width:	130px;
	height: 1126px;
	margin-top:	0px;	

}

#contentwrapper
{
	min-width:	1300px;
	height: 900px;
	margin-top:	0px;	

	
}

#maincontent
{
	min-width:	1300px;
	min-height: 420px;
	margin-top:	0px;	

	
}

#contentbggrey

{
	background:	url(images/content_bg.png) repeat-x;
	width: 937px;
	min-height: 420px;
	margin-left: 100px;

	
}


#servicesbggrey

{
	background:	url(images/content_bg.png) repeat-x;
	width: 924px;
	min-height: 535px;
	margin-left: 100px;
	z-index: 10000;


	
}

#serviceswhite

{
	background-color:#FFFFFF;
	width: 810px;
	min-height: 533px;
	margin-left: 2px;
	border-top: solid #333 2px;
	border-bottom: solid #333 2px;
	border-right: solid #333 2px;
	float: right;
	
}





#contentwhite

{
	background-color:#FFFFFF;
	width: 930px;
	min-height: 546px;
	margin-left: 2px;
	border-top: solid #333 2px;
	border-bottom: solid #333 2px;
	border-right: solid #333 2px;
	float: right;
	
}



#content_left

{

	float: left;
	margin-left:15px;
	margin-top:	10px;
	min-height: 400px;
	
}

#content_title

{


	margin-left:15px;
	padding-top:15px;

	
	
}

#content_right

{

	float: 	right;
	width: 	805px;
	padding-right:20px;
	height:		400px;
	margin-top:	16px;
	margin-left:15px;
	z-index:5000
}

.contenttitle 
{
	
	color:					#8e8e8f;
	font-family:			Arial, Helvetica, sans-serif;
	font-size:				14px;
	font-weight:	;bold
	
}


#servicescontent

{
	width:			855px; 
	margin-left:	35px;
	min-height:			190px;

}




.services

{
	color: 			#898e90;
	font-family: Arial, Helvetica, sans-serif;
	text-transform:	uppercase;
	line-height:	1.5em;
	font-size:	7.5pt;	
	
}


.affiliate

{
	padding-top: 10px;
	color: 			#6a7e84;
	font-family: Arial, Helvetica, sans-serif;
	text-transform:	uppercase;
	line-height:	1.5em;
	font-size:	7.5pt;	
	
}

.affiliate a:link

{
	padding-top: 10px;
	color: 			#52cdec;
	font-family: Arial, Helvetica, sans-serif;
	text-transform:	uppercase;
	line-height:	1.5em;
	font-size:	7.5pt;	
	
}

.portfoliotext


{
	
text-shadow: #fff 0px 1px, #5e5c4d 0px 0px;
font-family: 'Titillium_250', sans-serif;
text-shadow: #fff 0px 1px, #5e5c4d 0px 0px;
	
	
	
}



#testcontainer {
	float:left;
	width: 790px;
	height: 530px;
	margin-top: 10px;
	margin-left: 15px;
}



.test {
	margin: 0 0 5px 2px;; padding: 0;
	overflow: hidden;
	font-size: 1.2em;
	width: 776px;
	color: #767778;
	clear: both;
	background: #f2f2f1;
	border: 1px solid #d6d6d6;
}

.testblock {
	padding: 10px 20px 10px 24px;
}

/*-------------------------------------
 	Footer
---------------------------------------*/	


#footer { 
	width:100%; 
	background-repeat:repeat-x; 
	height: 350px;
	margin-top: -150px;
	background-image:url(images/FUNXION_intro_bottom.jpg); 


} 

#footertext

{
	float:					left;
	position:				relative; 
	width: 					640px; 
	margin-top:				45px;
	text-transform:			uppercase;
	font-size:			8pt;
	

}

#footerlinks

{

	position:				relative; 
	width: 					500px; 
	margin-top:				45px;
	text-transform:			uppercase;
	font-size:			8pt;
	
	

}

#footerlinks a
{
	color:					#a6a4a5;
	text-decoration:		none;
	padding:				0 10 0 0;

}



#footerlinks a.hover
{
	color:					#38b5a3;
	text-decoration:		none;

}


#copyright

{

	position:				relative; 
	width: 					350px;
	margin-left:			10px;
	margin-right:			2px;
	margin-top:				29px;
	

}



#footercredits

{
	float:left;
margin-top:200px; 
margin-left: 20px; 
width: 610px;
z-index:5000
}


#followus

{
	float:right;
margin-top:200px; 
margin-left: 0px;
margin-right: 90px;
width: 140px;
z-index:5000
}


/*  _______________________________________

	08 CONTACT FORM
    _______________________________________  */
.contactcontainer .grid_0 {width:120px;}
.contactcontainer .grid_1 {width:190px;}
.contactcontainer .grid_2 {width:200px; margin-top:7px;}
.contactcontainer .grid_3 {width:400px;}
.contactcontainer .grid_4 {width:550px; position:relative; margin-top: 0px}
.contactcontainer .grid_5 {width:680px;}
.contactcontainer .grid_6 {width:800px; margin-top:10px;}


.grid_0,
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 10px;
	margin-right: 10px;
}

.contactcontainer {
	margin-left: auto;
	margin-right: auto;
	padding-top:0px;
	width: 800px;
}

.form {
	padding-bottom:50px;
}
	.form label {
		font-family:Arial;
		font-size:18px;
		font-weight:bold;
		padding:0;
		margin:0;
		float:left;
		width:120px;
	}

	.form ul li {
		list-style:none;
		display:inline;
	}

	#name, #email, #message, #number, #budget, #timeframe { /* Contact form fields styles */
		font-family:Arial, Helvetica, sans-serif;
		font-size:14px;
		padding:0;
		border:none; 
		margin:10px 0 15px 0;
		display:block;
	}
	
		#name, #email, #number {
			width:332px;
			height:29px;
			background:url("images/fields.png");
			background-repeat:no-repeat;
			padding-left:3px;
		}
		
		li.service, li.budget {
			
			height:200px;
			padding-left:3px;
			margin-bottom: 15px;
		}
		
		#message {
			width:383px;
			height:182px;
			overflow:auto;
			padding:3px;
			background:url("images/message.png"); 
			background-repeat:no-repeat;
		}
		#name:focus, #email:focus {
			background:url("images/fields_focus.png");
			background-repeat:no-repeat;
		} 
		#message:focus {
			background:url("images/message_focus.png");
			background-repeat:no-repeat;
		}
	
	/*
	Styles for the buttons "send" and "reset" in the contact form
	*/
	.button {
		font-family:Arial;
		font-size:12px;
		background:url("images/send_reset_hover.png");
		padding: 3px 3px 3px 10px;
		color:#999;
		width:72px;
		height:32px;
		border:none;
		margin-left:431px;
		margin-top: -15px;
		position:absolute;
		float:right;
	}
	
		.button:hover {
			color:#FFFFFE;
			background:url("images/send_reset_hover.png");
		}

	.message {
		display:none;
	}
	.contact ul {
		list-style-type:none;
	}
		.contact li {
			list-style-type:none;
		}
			.contact li.special {
				display:none;
			}



  
  
/*-------------------------------------
 	Contact Us
---------------------------------------*/

#contactbggrey

{
	background:	url(images/content_bg.png) repeat-x;
	width: 924px;
	min-height: 500px;
	margin-left: 100px;
	z-index: 10000;


	
}

#contactwhite

{
	background-color:#FFFFFF;
	width: 810px;
	min-height: 546px;
	margin-left: 2px;
	border-top: solid #333 2px;
	border-bottom: solid #333 2px;
	border-right: solid #333 2px;
	float: right;
	
}


#contactformbg

{
	
	width: 810px;
	min-height: 546px;
	float: right;
	
}

		
		  
/*-------------------------------------
 	Carousel
---------------------------------------*/
#carouselbg
{
	
	min-width:	130px;
	height: 1126px;
	margin-top:	0px;	

}

#carouselbggrey

{
	background:	url(images/content_bg.png) repeat-x;
	width: 1044px;
	min-height: 420px;
	margin-left: 100px;


	
}

 
#carousel_mainlinks

{


	width:	400px;
	margin-left: 15px;
	height: 22px;
	margin-top: 15px;

	
}



#carousel_left

{

	float: left;
	margin-left:12px;
	width:	270px;
	margin-top: 15px;
	
}



#carousel_right

{

	float: 	right;
	width: 	630px;
	position: relative;
	

	
}

#carouselbtn

{

	margin-top: 0px; 
	list-style:none;
	display:block;
	height: 22px;
	padding-top:0px;
	
}

#carouselbtn ul a {
	display:block;  
	height:22px;
			
			
		}

#carouselbtn li a 
{
	display:block; 
	height:22px; 
			
}

#carouselbtn ul li {
	display:block; 
	float:left;
	height:	22px;
			
}

#carouselbtn li 
{
	float:left; 
	display:block; 
	position:relative;
	z-index:500; 

	height:	22px;
}

/*-------------------------------------
 	JQueryCarousel
---------------------------------------*/
  
  

		
		.stripViewer .panelContainer .panel ul {
			text-align: left;
			margin: 0 15px 0 30px;
			padding-left: 15px;
		}
		
		.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
			width: 100%;
			position: relative;
			margin: 10px 0;
		}

		/* These 2 lines specify style applied while slider is loading */
		.csw {width: 24px; height: 13px; background: #fff; overflow: hidden;}

		.stripViewer { /* This is the viewing window */
			position: relative;
			overflow: hidden; 
			margin: auto;
			width: 920px; /* Also specified in  .stripViewer .panelContainer .panel  below */
			height: 548px;
			clear: both;
			background: #fff;
		}
		
		.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
			position: relative;
			left: 0; top: 0;
			width: 100%;
			list-style-type: none;
			-moz-user-select: none; /* Stops the panels from highlighting/selecting, which I found problematic in Firefox. Also stops the CSS from validating though. Oh well. */
		}
		
		.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
			float:left;
			width: 920px; /* Also specified in  .stripViewer  above */
			height: 100%;
			
		}
		
		.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
			padding: 10px 5px 0 0;

			
		}
		
			
			
			
		
		
		
		
		.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
			
			padding-left: 1px;
			position:absolute;
			margin-left: 465px;
			margin-top:	-27px;
			z-index: 1000;
			overflow: hiiden;
			width: 470px !Important;
		
		}
		
		.stripNav ul { /* The auto-generated set of links */
			list-style: none;
		}
		
		.stripNav ul li {
			float: left;
			margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in slideviewer.js */
			
		}
		
		.stripNav a { /* The nav links */
			font-size: 8.7pt;
			font-weight: bold;
			text-align: center;
			line-height: 20px;
			color: #000000;
			text-decoration: none;
			display: block;
			padding: 0 4px 0 4px;
			font-family: Arial Narrow, Helvetica, sans-serif
		}
		
		.stripNav a:hover {
			background: #3d3d3d;
			color: 		#FFFFFF;
		}
		
		.stripNav a.current {
			background: #69e3fa;
			color: #ffffff;
			padding: 0px 3px 0px 3px:;
		}
		
		.stripNavL, .stripNavR { /* The left and right arrows */
			position: absolute;
			top: 0px;
			text-indent: -9000em;
		}
		
		.stripNavL a, .stripNavR a {
			display: block;
			height: 40px;
			width: 40px;
		}
		
		.stripNavL {
			left: 0;
		}
		
		.stripNavR {
			right: 0;
		}
		
		.stripNavL {
			background: url("images/arrow-left.gif") no-repeat center;
		}
		
		.stripNavR {
			background: url("images/arrow-right.gif") no-repeat center;
		}
		
	/*-------------------------------------
 	Font
---------------------------------------*/	
		@font-face {
	font-family: 'Titillium_reg';
	src: url('../fonts/TitilliumText1.eot');
	src: local('TitilliumText14L Regular'), local('TitilliumText14L-Bold'), url('../fonts/TitilliumText1.woff') format('woff'), url('../fonts/TitilliumText1.ttf') format('truetype'), url('../fonts/TitilliumText1.svg#TitilliumText14L-Bold') format('svg');
}

@font-face {
	font-family: 'Titillium_250';
	src: url('../fonts/TitilliumText250wt.eot');
	src: local('TitilliumText14L 250 wt'), local('TitilliumText14L-250wt'), url('../fonts/TitilliumText250wt.woff') format('woff'), url('../fonts/TitilliumText250wt.ttf') format('truetype'), url('../fonts/TitilliumText250wt.svg#TitilliumText14L-250wt') format('svg');
}

@font-face {
	font-family: 'Titillium_400';
	src: url('../fonts/TitilliumText400wt.eot');
	src: local('TitilliumText14L 400 wt'), local('TitilliumText14L-400wt'), url('../fonts/TitilliumText400wt.woff') format('woff'), url('../fonts/TitilliumText400wt.ttf') format('truetype'), url('../fonts/TitilliumText400wt.svg#TitilliumText14L-400wt') format('svg');
}

@font-face {
	font-family: 'Titillium_600';
	src: url('../fonts/TitilliumText600wt.eot');
	src: local('TitilliumText14L 600 wt'), local('TitilliumText14L-600wt'), url('../fonts/TitilliumText600wt.woff') format('woff'), url('../fonts/TitilliumText600wt.ttf') format('truetype'), url('../fonts/TitilliumText600wt.svg#TitilliumText14L-600wt') format('svg');
}

@font-face {
	font-family: 'Titillium_800';
	src: url('../fonts/TitilliumText800wt.eot');
	src: local('TitilliumText14L 800 wt'), local('TitilliumText14L-800wt'), url('../fonts/TitilliumText800wt.woff') format('woff'), url('../fonts/TitilliumText800wt.ttf') format('truetype'), url('../fonts/TitilliumText800wt.svg#TitilliumText14L-800wt') format('svg');
}

@font-face {
	font-family: 'Titillium_999';
	src: url('../fonts/TitilliumText999wt.eot');
	src: local('TitilliumText14L 999 wt'), local('TitilliumText14L-999wt'), url('../fonts/TitilliumText999wt.woff') format('woff'), url('../fonts/TitilliumText999wt.ttf') format('truetype'), url('../fonts/TitilliumText999wt.svg#TitilliumText14L-999wt') format('svg');
}
#mainwrapper #contentwrapper ##maincontent #servicesbggrey #serviceswhite .container .acc_container .block p {
	font-style: normal;
}
#mainwrapper #contentwrapper ##maincontent #servicesbggrey #serviceswhite .container .acc_container .block a {
	font-style: italic;
}
#mainwrapper #contentwrapper ##maincontent #servicesbggrey #serviceswhite .container .acc_container .block a {
	font-style: italic;
}
