/* GLOBAL */ 

	/* @font-face {
		font-family: "arialo";
		src: url("../images/arialoblique.otf")
		} */
	* {
		font-family: arial, helvetica, sans-serif;
	}
	
	a {
		outline: none;
		color: #00a3d7;
		text-decoration: none;
	}
	
	a:hover {
		color: #007195;
	}
	
	.clearBoth {
		clear: both;
	}
	
	.displayBlock {
		display: block;
	}
	
	.displayNone {
		display: none;
	}
	
	.debugWrapper {
		border: 1px solid #ffd971;
		background: #fff9e9;
		padding: 10px;
		margin: 10px;
	}
	
	.debugWrapper p {
		margin: 10px;
		white-space: pre;
		font-family: courier;
		font-size: 12px;
	}
	
	.debugWrapper h2 {
		margin: 10px;
		margin-bottom: 30px;
		color: #27385f;
		font-weight: bold;
		font-size: 18px;
		font-family: arial;
		border-bottom: 2px solid #27385f;
	}
	
	#mainHeader {
		float: none;
		display: block;
	}
	
	#mainHeader .mainHeaderLabel {
		float: left;
		height: 31px;
	}
	
	#mainHeader .mainHeaderLabel h1 {
		height: 31px;
		text-indent: -10000px;
	}
	
	#mainBody {
		clear: left;
	}
	
	#mainFooter {
		clear: left;
	}
	
	#mainFooter ul {
		position: relative;
		width: 880px;
		font-size: 10px;
		background: #949494;
		border-top: 8px solid #e5e5e5;
		border-top: 8px solid #fff;
		height: 1px;
		display: block;
		margin: 0px auto;
		margin-top: 20px;
		text-align: left
	}
	
	#mainFooter ul li {
		display: inline;
		padding: 0 0 0 8px;
		position: relative;
		top: 10px;
	}
	
	#mainFooter ul li.rightLine {
		border-right: 1px solid #ccc;
		padding: 0px 8px 0px 5px;
	}
	
	.menuButtonWrapper {
		float: left;
	}
	
	.menuButtonWrapper a {
		display: block;
		background: #000 url(../images/btn_menu.png) center center no-repeat;
		text-indent: -10000px;
		width: 71px;
		height: 25px;
		margin: 3px;
	}

/* ABOUT TEMPLATE */
	.about #mainHeader {
		background: #bdf444;
	}
	
	.about #mainHeader .mainHeaderLabel {
		border-left: 3px solid #eefcd0;
		border-right: 200px solid #cff777;
	}
	
	.about #mainHeader .mainHeaderLabel h1 {
		background: #fff url(../images/label_about.png) no-repeat center center;
		width: 164px;
		border-right: 100px solid #eefcd0;
	}
	
	.about .menuButtonWrapper {
		background: #bdf444;
		border-right: 3px solid #cff777;
	}
	
	.about #mainBody {
		padding-top: 50px;
		min-height: 350px;
	}
	
	.about .aboutInfoWrapper {
		position: relative;
		width: 880px;
		margin: 0px auto;
	}
	
	.about .aboutInfoWrapper .aboutHeaderWrapper  h1 {
		position: relative;
		border-bottom: 1px solid #bdf444;
		font-weight: bold;
		font-size: 24px;
		padding: 2px;
		text-transform: uppercase;
		letter-spacing:-1px;
	}

	.about .aboutHeaderWrapper h1 span {
		font-size: 8px;
		position: absolute;
		right: 0px;
		bottom: 5px;
		letter-spacing: 1px;
		}
	
	.about .aboutLeft {
		width: 200px;
		float: left;
		}
	
	.about .aboutLeft a {
		background: #f0f0f0;
		display: block;
		float: left;
		clear: left;
		white-space: nowrap;
		padding: 2px 4px;
		font-size: 12px;
		color: #333;
		font-weight: bold;
		margin-bottom: 1px;
		}
	
	.about .aboutLeft a:hover {
		background: #c9c9c9;
		}
	
	.about .aboutRight {
		width: 660px;
		float: right;
		line-height: 1.3;
		font-size: 12px;
		}
	
	.about .aboutRight p {
		margin-top: 15px;
		}

/* HOME TEMPLATE */
	.home {
		height: 100%;
		}
	
	.home div {
		width: 1000px;
		position: relative;
		margin: 0px auto;
		}
	
	.home a {
/*		background: url(../images/bg_home_bottom.jpg) no-repeat bottom center; */
		}

/* CONTACT TEMPLATE */
	.contact #mainHeader {
		background: #f44444;
	}
	
	.contact #mainHeader .mainHeaderLabel {
		border-left: 3px solid #fcd0d0;
		border-right: 200px solid #f77777;
	}
	
	.contact #mainHeader .mainHeaderLabel h1 {
		background: #fff url(../images/label_contact.png) no-repeat center center;
		width: 164px;
		border-right: 100px solid #fcd0d0;
	}
	
	.contact .menuButtonWrapper {
		background: #f44444;
		border-right: 3px solid #f77777;
	}
	
	.contact #mainBody {
		padding-top: 50px;
		min-height: 350px;
	}
	
	.contact .contactInfoWrapper {
		position: relative;
		width: 880px;
		margin: 0px auto;
	}
	
	.contact .contactInfoWrapper .contactHeaderWrapper  h1 {
		position: relative;
		border-bottom: 1px solid #f44444;
		font-weight: bold;
		font-size: 24px;
		padding: 2px;
		text-transform: uppercase;
		letter-spacing:-1px;
	}

	.contact .contactInfoWrapper p {
		margin-top: 15px;
		line-height: 1.5;
		font-size: 12px;
		}

/* SERVICES TEMPLATE */
	.services #mainHeader {
		background: #4460f4;
	}
	
	.services #mainHeader .mainHeaderLabel {
		border-left: 3px solid #d0d7fc;
		border-right: 200px solid #778bf7;
	}
	
	.services #mainHeader .mainHeaderLabel h1 {
		background: #fff url(../images/label_services.png) no-repeat center center;
		width: 164px;
		border-right: 100px solid #d0d7fc;
	}
	
	.services .menuButtonWrapper {
		background: #4460f4;
		border-right: 3px solid #778bf7;
	}
	
	.services #mainBody {
		padding-top: 50px;
		min-height: 350px;
	}
	
	.services .servicesInfoWrapper {
		position: relative;
		width: 880px;
		margin: 0px auto;
	}
	
	.services .servicesInfoWrapper .servicesLeft {
		text-align: right;
		width: 215px;
		float: left;
		margin-top: 50px;
		margin-right: 15px;
		}
		
	.services .servicesInfoWrapper .servicesRight {
		width: 650px;
		float: right;
		}
	
	.services .servicesInfoWrapper .servicesHeaderWrapper  h1 {
		border-bottom: 1px solid #4460f4;
		font-weight: bold;
		font-size: 24px;
		padding: 2px;
		text-transform: uppercase;
		letter-spacing:-1px;
	}
	
	.services .servicesLeft li a {
		display: block;
		color: #000;
		text-transform: uppercase;
		padding: 5px;
		margin-bottom: 1px;
		font-weight: bold;
		letter-spacing: -1px;
		}
	
	.services .servicesLeft li.selected a,
	.services .servicesLeft li a:hover {
		background: #fcf8d0;
		}
		
	.services .servicesRight .servicesBodyWrapper {
		font-size: 12px;
		line-height: 1.5;
		margin-top: 15px;
		}

	.services .servicesBodyWrapper .processEntry ul {
		position: relative;
		background: #fcc;
		margin-left: 30px;
		margin-top: 10px;
		}
		
	.services .servicesBodyWrapper .processEntry ul h4 {
		text-indent: -19px;
		font-weight: bold;
		font-size: 16px;
		}
	
	.services .servicesBodyWrapper .processEntry ul p {
		width: 410px;
		margin-top: 5px;
		text-align: justify;
		}
	
	.services .servicesBodyWrapper .processEntry ul img {
		float: right;
		}
	
	.services .servicesBodyWrapper .processEntry ul li {
		clear: both;
		float: left;
		width: 100%;
		margin-top: 20px;
		}
	
	.services .servicesBodyWrapper .ecommerceEntry p,
	.services .servicesBodyWrapper .website_designEntry p,
	.services .servicesBodyWrapper .web_developmentEntry p,
	.services .servicesBodyWrapper .online_strategyEntry p,
	.services .servicesBodyWrapper .brandingEntry p,
	.services .servicesBodyWrapper .graphic_designEntry p,
	.services .servicesBodyWrapper .marketingEntry p {
		line-height: 1.5;
		margin-top: 20px;
		}

/* PORTFOLIO TEMPLATE */
	.portfolio hr {
		display: block;
		float: left;
		clear: both;
		width: 880px;
		margin: 20px 0;
		height: 1px;
		border: 0px;
		border-bottom: 1px solid #c7c7c7;
	}
	
	.portfolio #mainHeader {
		background: #44c9f4;
	}
	
	.portfolio #mainHeader .mainHeaderLabel {
		border-left: 3px solid #d0f1fc;
		border-right: 200px solid #77d8f7;
	}
	
	.portfolio #mainHeader .mainHeaderLabel h1 {
		background: #fff url(../images/label_portfolio.png) no-repeat center center;
		width: 164px;
		border-right: 100px solid #d0f1fc;
	}
	
	.portfolio .menuButtonWrapper {
		background: #44c9f4;
		border-right: 3px solid #77d8f7;
	}
	
	.portfolio #mainBody {
		padding-top: 50px;
		min-height: 350px;
	}
	
	.portfolio .projectInfoWrapper {
		position: relative;
		width: 880px;
		margin: 0px auto;
	}
	
	.portfolio .projectInfoWrapper .portfolioHeaderWrapper  h1 {
		border-bottom: 1px solid #77d8f7;
		font-weight: bold;
		font-size: 24px;
		padding: 2px;
		text-transform: uppercase;
		letter-spacing:-1px;
	}
	
	.portfolio .projectInfoWrapper ul {
		float: left;
		margin: 20px 0;
	}
	
	.portfolio .projectInfoWrapper ul li {
		display: block;
		float: left;
		position: relative;
		width: 190px;
		margin-right: 30px;
	}
	
	.portfolio .projectInfoWrapper h3 {
		background: #f0f0f0;
		display: block;
		float: left;
		font-size: 12px;
		font-weight: bold;
		padding: 3px;
		margin-bottom: 2px;
	}
	
	.portfolio .projectInfoWrapper img {
		width: 186px;
		border: 1px solid #e7e7e7;
		float: left;
		clear: left;
	}
	
	.portfolio .projectInfoWrapper p {
		float: left;
		clear: left;
		font-size: 11px;
		margin-top: 5px;
	}
	
	.portfolio .portfolioHeaderWrapper {
		float: left;
		width: 880px;
	}
	
	.portfolio .projectInfoWrapper .portfolioHeaderWrapper ul {
		font-size: 12px;
		margin: 5px 0 20px 0 !important;
	}
	
	.portfolio .projectInfoWrapper .portfolioHeaderWrapper ul li {
		width: auto !important;
		margin: 0px !important;
		padding: 1px 15px;
		border-right: 1px solid #000;
	}
	
	.portfolio .projectInfoWrapper .portfolioHeaderWrapper ul li:first-child {
		padding-left: 0px;
	}
	
	.portfolio .projectInfoWrapper .portfolioHeaderWrapper ul li.last {
		border-right: 0px;
	}
	
	.portfolio .projectInfoWrapper .portfolioHeaderWrapper ul li a {
		padding: 10px 0;
	}
	
	.portfolio .projectInfoWrapper .portfolioHeaderWrapper ul li.selected {
		font-weight: bold;
	}
	
	.portfolio .projects {
		margin: 0px;
		padding: 0px;
	}

	.portfolio .line2 {
		border-top: 1px solid #ccc;
		width: 880px;
		margin-top: 0px !important;
		padding-top: 20px;
	}

/* CLIENTS TEMPLATE */
	.clients #mainHeader {
		background: #f4b944;
	}
	
	.clients #mainHeader .mainHeaderLabel {
		border-left: 3px solid #fcedd0;
		border-right: 200px solid #f7cc77;
	}
	
	.clients #mainHeader .mainHeaderLabel h1 {
		background: #fff url(../images/label_case_studies.png) no-repeat center
			center;
		width: 164px;
		border-right: 100px solid #fcedd0;
	}
	
	.clients .menuButtonWrapper {
		background: #f4b944;
		border-right: 3px solid #f7cc77;
	}
	
	.clients #mainBody {
		padding-top: 50px;
		min-height: 350px;
	}
	
	.clients #clientInfoWrapper {
		position: relative;
		width: 880px;
		margin: 0px auto;
	}
	
	.clients #clientInfoWrapper .left {
		float: left;
		width: 375px;
	}
	
	.clients #clientInfoWrapper .right {
		float: right;
		width: 490px;
	}
	
	.clients ul.images {
		position: relative;
		width: 379px;
		height: 241px;
		background: url(../images/bg_clients_image.png) no-repeat;
	}
	
	.clients ul.images li {
		position: absolute;
		width: 357px;
		height: 219px;
		top: 8px;
		left: 8px;
		overflow: hidden;
	}
	
	.clients ul.images li img {
		position: absolute;
		top:0px;
		left:0px;
	}
	
	.clients .imageControls {
		width: 372px;
		margin: 0px auto;
		position: relative;
	}
	
	.clients .imageControls ul {
		margin: 0px auto;
		width: 200px;
		text-align: center;
	}
	
	.clients .imageControls ul li {
		display: inline-block;
	}
	
	.clients .imageControls ul li a {
		display: block;
		float: left;
		width: 11px;
		height: 11px;
		text-indent: -10000px;
		background: #fcc;
		text-decoration: none;
		background: url(../images/sprite_controls.png) no-repeat -134px -27px;
	}
	
	.clients .imageControls ul li a.selected {
		background-position: -147px -27px;
	}
	
	.clients .imageControls ul li a:hover {
		background-position: -147px -27px;
	}
	
	.clients .imageControls .prevImage {
		position: absolute;
		top: 0px;
		left: 0px;
		display: block;
		text-indent: -10000px;
		width: 64px;
		height: 21px;
		background: url(../images/sprite_controls.png) no-repeat 0px 0px;
	}
	
	.clients .imageControls .prevImage:hover {
		background-position: 0px -21px;
	}
	
	.clients .imageControls .nextImage {
		position: absolute;
		top: 0px;
		right: 0px;
		display: block;
		text-indent: -10000px;
		width: 64px;
		height: 21px;
		background: url(../images/sprite_controls.png) no-repeat -64px 0px;
	}
	
	.clients .imageControls .nextImage:hover {
		background-position: -64px -21px;
	}
	
	.clients .labelProject {
		text-transform: uppercase;
		border-bottom: 1px solid #ccc;
		padding-bottom: 5px;
		font-size: 12px;
		margin-top: 30px;
		letter-spacing: -1px;
		float: left;
		clear: left;
	}
	
	.clients .labelProject span {
		font-size: 18px;
		padding-left: 5px;
	}
	
	.clients .technologies {
		margin-top: 10px;
	}
	
	.clients .technologies li {
		background: #f7cc77;
		display: block;
		float: left;
		margin-right: 1px;
		margin-bottom: 1px;
		padding: 3px 5px;
		color: #fff;
		font-size: 12px;
		white-space: nowrap;
	}
	
	.clients .technologies li.lh {
		clear: left;
		font-size: 12px;
		padding: 3px;
		display: block;
		width: 100%;
		background: #fff;
		float: none;
		margin: 0px;
		color: #000;
	}
	
	.clients .technologies li.lh:hover {
		background: #fff;
	}
	
	.clients .technologies li:hover { /* background: #f4b944; */
		
	}
	
	.clients .services {
		margin-top: 30px;
	}
	
	.clients .services li {
		background: #f7cc77;
		float: left;
		margin-right: 1px;
		margin-bottom: 1px;
		font-size: 12px;
	}

	.clients .services li.lh {
		clear: left;
		font-size: 12px;
		padding: 3px;
		display: block;
		width: 100%;
		background: #fff;
		float: none;
		margin: 0px;
		color: #000;
	}
	
	.clients .services li.lh:hover {
		background: #fff;
	}

	.clients .services li a {
		display: block;
		float: left;
		padding: 3px 5px;
		white-space: nowrap;
		color: #a95d19;
	}

	.clients .services li a:hover { 
		background: #f4b944;
        color: #fff;		
	}
	
	.clients .otherProjects {
		font-size: 12px;
		line-height: 1.4;
		padding: 5px;
		float: left;
		clear: left;
	}
	
	.clients .labelClient {
		border-bottom: 1px solid #f4b944;
		text-transform: uppercase;
		font-size: 12px;
		position: relative;
		letter-spacing: -1px;
	}
	
	.clients .labelClient span.clientName {
		padding-left: 5px;
		font-size: 18px;
	}
	
	.clients .labelClient span.link {
		position: absolute;
		right: 0px;
		bottom: 0px;
		text-transform: none;
	}
	
	.clients .labelClient span.link a {
		text-decoration: none !important;
	}
	
	.clients .descriptions {
		margin-top: 10px;
	}
	
	.clients .descriptions li {
		line-height: 1.6;
	}
	
	.clients .descriptions li h3 {
		font-weight: bold;
		font-size: 24px;
		letter-spacing: -1px;
	}
	
	.clients .descriptions li p {
		font-size: 12px;
		text-align: justify;
		margin-bottom: 10px;
	}
	
	.clients .descriptionControls {
		position: absolute;
		right: 0px;
		margin-top: 20px;
	}
	
	.clients .descriptionControls .prevDescription {
		display: block;
		background: url(../images/sprite_controls.png) no-repeat 0px 0px;
		float: right;
		width: 64px;
		height: 21px;
		text-indent: -10000px;
	}
	
	.clients .descriptionControls .prevDescription:hover {
		background-position: 0px -21px;
	}
	
	.clients .descriptionControls .nextDescription {
		display: block;
		background: url(../images/sprite_controls.png) no-repeat -64px 0px;
		float: right;
		width: 64px;
		height: 21px;
		text-indent: -10000px;
	}
	
	.clients .descriptionControls .nextDescription:hover {
		background-position: -64px -21px;
	}
	
	.clients .descriptions ul {
		font-size: 12px;
		margin-left: 30px;
		}
	
	.clients .descriptions ul li {
		list-style: disc !important;
		}

/* MENU TEMPLATE */
	.menu {
		display: block;
		height: 100%;
		width: 100%;
		float: left;
	}
	
	.menu a {
		text-decoration: none;
		color: #fff;
		display: block;
		padding: 1px 5px;
		text-transform: uppercase;
		margin-bottom: 1px;
	}
	
	.menu a:hover,.menu a.selected {
		background: #970000;
	}
	
	.menu #closeButton {
		position: relative;
		float: left;
		top: 10px;
		left: 10px;
	}

	.menu #closeButton a {
		display: block;
		width: 72px;
		height: 17px;
		background: url(../images/btn_close.gif) no-repeat;
		text-indent: -10000px;
		}

	.menu #closeButton a:hover {
		background: url(../images/btn_close.gif) no-repeat;
	}
	
	.menu .wrapper {
		position: relative;
		margin: 0px auto;
		top: 50px;
		width: 640px;
		height: 400px;
		display: table;
	}
	
	.menu .wrapper .navWrapper {
		display: table-cell;
		vertical-align: middle;
	}
	
	.menu .wrapper .navWrapper.nav {
		background: url(../images/hr_vert_nav.png) right center no-repeat;
		letter-spacing:-1px;
	}
	
	.menu .wrapper .navWrapper.subnav {
		overflow: hidden;
	}
	
	.menu .navWrapper.nav ul {
		position: relative;
		float: left;
		width: 250px;
		text-align: right;
		margin-top: 10px;
		padding-right: 20px;
		font-size: 25px;
		font-weight: bold;
	}
	
	.menu .navWrapper.subnav ul {
		position: relative;
		width: 365px;
		max-height: 400px;
		left: 20px;
		overflow: auto;
		font-size: 16px;
	}
	
	.menu .navWrapper.subnav ul a {
		padding: 1px 3px;
	}
	
	.menu .scrollNavTop {
		display: none;
		position: absolute;
		top: 50px;
		right: 0px;
		width: 100%;
		height: 100px;
		background: url(../images/bg_scroll_top.png) repeat-x top;
		z-index: 1;
	}
	
	.menu .scrollNavBottom {
		display: none;
		position: absolute;
		top: 360px;
		right: 0px;
		width: 100%;
		height: 100px;
		background: url(../images/bg_scroll_bottom.png) repeat-x bottom;
		z-index: 1;
	}
	
/* BOXGRID TEMPLATE */	
	.boxgrid{
/*		width: 325px;
		height: 260px;
		margin:10px;
		float:left;
		background:#161613;
		border: solid 2px #8399AF;
		overflow: hidden;
		position: absolute; */
	}
	
	.boxgrid img{
		position: absolute;
		top: 0;
		left: 0;
		border: 0;
	}
	
	.boxcaption{
		float: left;
		position: absolute;
		background: #000;
		height: 100px;
		width: 100%;
		opacity: .8;
		/* For IE 5-7 */
		filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
		/* For IE 8 */
		-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	 }
	 
	 .caption .boxcaption {
	 	bottom: -100px;
	 	left: 0;
	 	color: #fff !important;
	 }
	 
	 .caption .boxcaption p {
	 	width: 300px;
	 	position: absolute;
	 	top: 0px;
	 	left: 0px;
	 	margin: 5px 10px 0 10px;
	 	font-size: 14px;
	 }
	 
	 .caption .boxcaption span {
	 	float: right;
	 	font-size: 12px;
	 	display: block;
	 	position: absolute;
	 	top: 8px;
	 	right: 10px;
	 }
	 
	 .caption .boxcaption span a {
	 	color: #fff;
	 }