﻿/* === MAIN LAYOUT ======================== */

html, body {
background-color: #5657f0; 
color: #5657f0;
-webkit-text-size-adjust:none;
}

#head, #featured, #content, #homeWork { 
	margin-left: auto; 
	margin-right: auto; 
	width: 940px;
}

#head { 
	border-bottom: 1px solid #d1d5d5;
	height: 300px;
	overflow: hidden;
}

#main, #head { 
	background: #efefef url(../images/bg.jpg) repeat  center top; 
	color: #5657f0;
}

body.page-id-60 #head, body.page-id-897 #head { border: none; }

	/* === MAIN MENU === */
	
	div.menu-topmenu-container {
		height: 30px;
		float: right;
		margin-top: 53px;
	}
	
	ul#menu-topmenu {
		margin: 0;
	}
	
	ul#menu-topmenu li {
		display: inline;
		float: left;
		margin-left: 5px;
		list-style-type: none;
	}
	
	ul#menu-topmenu li a {
		color:#757C7C;
		display:block;
		font-size:14px;
		font-weight:500;
		height:15px;
		letter-spacing:0.05em;
		padding:7px 13px;
		text-transform:uppercase;
	}
	
	ul#menu-topmenu li a:hover,
	ul#menu-topmenu li.current-menu-item a,
	ul#menu-topmenu li.current_page_parent a,
	ul#menu-topmenu li.current-page-ancestor a {
		background-color: #5657f0;
		border: none;
		border-radius: 50px;
		-moz-border-radius: 50px;
		-ms-border-radius: 50px;
		-o-border-radius: 50px;
		-webkit-border-radius: 50px;
		color: #fff;
	}
		

#mid-container { 
	border-bottom: 1px solid #fff; 
	width: 100%; 
}

body.page-id-2 #mid-container {
	padding-bottom: 20px;
}

#content { 
	overflow: hidden; 
	padding: 0 0 40px 0; 
}

	#content #contentArea { 
		border-right: 1px solid #d1d5d5; 
		float: left;
		padding: 25px 40px 0 0; 
		width: 680px; 
		display: inline;
	}
	
.firstCol {
	display:inline;
	float:left;
	margin: 0;
	padding: 0;
	width: 220px;
}

/* === HEADINGS, LINKS & IMAGES ======================== */

	/* === FONTS === */
	
		@font-face {
		font-family: 'jubLight';
		src: url('type/jub-light-webfont.eot');
		src: local('☺'), url('type/jub-light-webfont.woff') format('woff'), url('type/jub-light-webfont.ttf') format('truetype'), url('type/jub-light-webfont.svg#webfontqL20F4Yc') format('svg');
	font-weight: normal;
	font-style: normal;
}

		@font-face {
		font-family: 'jubRegular';
		src: url('type/jub-regular-webfont.eot');
		src: local('☺'), url('type/jub-regular-webfont.woff') format('woff'), url('type/jub-regular-webfont.ttf') format('truetype'), url('type/jub-regular-webfont.svg#webfontOGEOd5Kf') format('svg');
		font-weight: normal;
		font-style: normal;
}

		@font-face {
		font-family: 'jubMedium';
		src: url('type/jubmed-webfont.eot');
		src: local('☺'), url('type/jubmed-webfont.woff') format('woff'), url('type/jubmed-webfont.ttf') format('truetype'), url('type/jubmed-webfont.svg#webfont2B2fpUfe') format('svg');
		font-weight: normal;
		font-style: normal;
}

	/* === LOGO, PAGE TITLE & SUBTITLE === */

	h1#logo a { 
		background: url(../images/logo.png) no-repeat 0 0; 
		display: block;
		float: left;
		height: 63px; 
		margin: 50px 0 0 0; 
		padding: 0; 
		text-indent: -9999px;  
		width: 345px; 
	}
		
	h1#logo a:hover { 
		border: none; 
		opacity: 0.75; 
		filter: alpha(opacity = 75);
	}
	
	h2.page-title-home,
	h2.page-title-about,
	h2.page-title-mobi,
	h2.page-title-myscanner,
	h2.page-title-mobitracker,
	h2.page-title-fruitler,
	h2.page-title-work,
	h2.page-title-contact,
	h2.page-title-blog,
	h2.page-title-default {
		height: 40px;
		margin: 50px 0 20px 0;
		padding: 0;
		text-indent: -9999px;
	}
	
	h3.sub-title-home,
	h3.sub-title-about,
	h2.sub-title-mobi,
	h2.sub-title-myscanner,
	h2.sub-title-fruitler,
	h3.sub-title-work,
	h3.sub-title-contact,
	h3.sub-title-blog,
	h3.sub-title-default {
		height: 42px;
		margin: 0 0 40px 0;
		padding: 0;
		text-indent: -9999px;
	}
	
	h2.page-title-home { height: 45px !important; }
	h3.sub-title-home { margin-top: -5px !important; }
	
	h2.page-title-mobitracker { background: url(../images/mobitracker-title.png) no-repeat 0 0; }
	
	h2.page-title-myscanner { background: url(../images/myscanner-title.png) no-repeat 0 0; }
	
	h2.page-title-fruitler { background: url(../images/fruitler-title.png) no-repeat 0 0; }
	
	h2.page-title-mobi { background: url(../images/mobi-title.png) no-repeat 0 0; }
	/*h3.sub-title-mobi { background: url(../images/mobi-sub-title.png) no-repeat 0 0; }*/
	
	h2.page-title-home { background: url(../images/home-title.png) no-repeat 0 0; }
	h3.sub-title-home { background: url(../images/home-sub-title.png) no-repeat 0 0; }

	h2.page-title-about { background: url(../images/about-title.png) no-repeat 0 0; }
	h3.sub-title-about { background: url(../images/about-sub-title.png) no-repeat 0 0; }

	h2.page-title-work { background: url(../images/work-title.png) no-repeat 0 0; }
	h3.sub-title-work { background: url(../images/work-sub-title.png) no-repeat 0 0; }

	h2.page-title-contact { background: url(../images/contact-title.png) no-repeat 0 0; }
	h3.sub-title-contact { background: url(../images/contact-sub-title.png) no-repeat 0 0; }

	h2.page-title-default { background: url(../images/hp-title.png) no-repeat 0 0; }
	h3.sub-title-default { background: url(../images/sub-title.png) no-repeat 0 0; }
	
	h2.category-title { margin-bottom: 30px; }

	
	
	/* === GLOBAL HEADINGS === */
	
	h1, h2, h3, h4, h5, h6 { 
		color: #ff7e00; 
		font-weight: 400; 
		margin: 0; 
		padding: 0 0 15px 0; 
	}
	
	h1 { font-size: 32px; }
	h2 { font-size: 28px; }
	h3 { font-size: 22px; }
	h4 { font-size: 20px; }
	h5 { font-size: 18px; }
	h6 { font-size: 14px; }
	
	/* === GLOBAL LINKS === */

	a:link,
	a:active,
	a:visited { 
		color: #5657f0;
		transition: all .2s ease-out; 
		-moz-transition: all .2s ease-out;
		-ms-transition: all .2s ease-out; 
		-webkit-transition: all .2s ease-out; 
		-o-transition: all .2s ease-out;
		text-decoration: none;
	}

	a:hover { border-bottom: 1px solid #48b4c1; }
	
	::selection { background: #5657f0; color: #fff; }
	
	/* === GLOBAL PARAGRAPHS === */

	p { 
		font-size: 14px; 
		line-height: 20px; 
		padding: 0 0 15px 0;
	}

	/* === ../images === */

	#content #contentArea ../images {
		margin:10px 0;
	}
	
	../images { max-width: 100%; }
	
	../images.bordered { 
		padding: 5px; 
		margin: -1px; 
		border: dotted 1px; 
	}
	
	a ../images.bordered:hover { 
		background-color: rgba(0,0,0,0.1); 
		-webkit-transition: background-color .2s ease-out; 
		-o-transition: background-color .2s ease-out; 
	}
	
	blockquote {
		border-left:5px outset;
		display:inline-block;
		margin:0 0 20px;
		padding:1em 1em 0 2em;
	}


/* ==== HOMEPAGE CONTENT ======================== */

	/* === SLIDESHOW === */
	
	/* image replacement */
        .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }
    /* // image replacement */
	
	#slider {
		background: url(../images/slideshow-shadow-bottom.png) no-repeat center bottom !important;
		height: 405px !important;
	}

	#slider ul, #slider li {
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider li { 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:940px;
		height:390px;
		overflow:hidden; 
		}
		
	/* numeric controls */	
	
	ol#controls {
		height:14px;
		margin:10px auto 0;
		padding:0;
		width: 80px;
		
	}
		
	ol#controls li {
		float:left;
		height:14px;
		list-style-type:none;
		margin:0; 
		padding:0 3px;
		width: 14px;
		text-indent:-8000px;
	}
		
	ol#controls li a {
		background: url(../images/controls.png) no-repeat 0 0;
		display: block;
		float:left;
		height:14px;
		-webkit-transition: none;
		width: 14px;
		
	}
		
	ol#controls li a:hover {
		background: url(../images/controls.png) no-repeat 0 -32px;
		border: none;
	}
	
	ol#controls li.current a {
		background: url(../images/controls.png) no-repeat 0 -16px;
	}


	/* === HOME (CURRENT PROJECTS) === */

	#homeWork {
		margin: 40px auto;
		overflow: hidden;
		padding: 0;
	}
	
		#homeWork .firstCol a {
			font-weight: bold;
		}

		#homeWork .homeWorkCol {
			background: transparent url(../images/220bg.png) center bottom no-repeat;
			display:inline;
			float:left;
			height: 149px;
			margin: 0 0 0 20px;
			padding: 0;
			width: 220px;
		}
	
		#homeWork .homeWorkCol a:hover {
			border: none;
			opacity: 0.50;
			filter: alpha(opacity = 50);
		}
	
		
	
		
	
/* ==== REGULAR CONTENT =================== */

/* === Code == */

code { 
	background-color: #eee; 
	padding: 0.25em 0.5em; 
	margin: 0px 0.25em; 
	border: dotted 1px; 
	display: inline-block; 
	text-shadow: 0px 1px 0px White; 
}

/* === Table == */

table caption { font-weight: bold; }
table th, table td { padding: 1em; }
table th, table thead td, table caption { background-color: #444; color: White; }
table tr:nth-child(even), table thead tr td:nth-child(odd), table thead th { opacity: 0.9; filter: alpha(opacity = 90); }

#content ol.numbered { margin: 0 0 15px 30px; }
#content ol.numbered li { padding: 0 0 10px 0; }


/* ==== ABOUT CONTENT ======================== */

	../images.wp-image-1053 {
		margin-bottom: 25px !important;
	}
	
	#aboutTeam {
		border-top: 1px solid #D1D5D5;
		padding: 25px 0 0 0;
		
	}

	/* === TEAM MEBERS === */
	
		ul#teamMembers {
			margin: 10px 0 0 0;
			padding: 0;
			
		}
		
		ul#teamMembers li.member {
			background: #d1d5d5;
			display: block;
			float: left;
			height: 370px;
			margin: 0 20px 0 0;
			padding: 0;
			width: 199px;
		}
		
		ul#teamMembers li.member.last {
			margin: 0;
		}
		
		ul#teamMembers li.member ../images {
			height: 199px;
			width: 248px;
		}
		
		ul#teamMembers li.member h3.memberName {
			color: #ff7e00;
			font-size: 16px;
			font-weight: 600;
			margin: 0;
			-moz-padding-start: -5px !important;
			padding: 20px 20px 0 20px;
			text-transform: uppercase;
			width: 180px;
		}
		
		ul#teamMembers li.member p.memberDescription {
			margin: 0 20px 5px 20px;
			padding: 0;
			width: 180px;
		}
		
		/* === ICONS === */
		
			ul#teamMembers li ul.memberSocial {
				height: 32px;
				margin: 0 0 5px 0;
				padding: 0 0 0 20px;
			}
			
			ul#teamMembers li ul.memberSocial li {
				display: block;
				float: left;
				margin: 0 3px 0 0;
				list-style-type: none;
			}
			
			ul#teamMembers li ul.memberSocial li a { 
				display: block;
				height: 32px;
				text-indent: -9999px;
				width: 32px;
			}
			
			ul#teamMembers li ul.memberSocial li a.memberTwitter { background:  url(../images/twitter.png) 0 0 no-repeat; }
			ul#teamMembers li ul.memberSocial li a.memberGmail { background:  url(../images/gmail.png) 0 0 no-repeat; }
			ul#teamMembers li ul.memberSocial li a.memberFacebook { background: url(../images/facebook.png) 0 0 no-repeat; }
			ul#teamMembers li ul.memberSocial li a.memberEmail { background:  url(../images/mail.png) 0 0 no-repeat; }
			
			ul#teamMembers li ul.memberSocial li a:hover {
				border: none;
				opacity: 0.5; 
				filter: alpha(opacity = 50);
			}
			
		/* === No. CIRCLES === */
		
		ol.numbers,
		ul.circles {
			margin: 0;
			padding: 0;
		}
		
		ol.numbers li,
		ul.circles li {
			background: url(../images/circle.jpg) no-repeat 0 10px;
			margin: 0;
			padding: 10px 15px 15px 80px;
			position: relative;
		}

			ol.numbers li span.number {
				color:#FFFFFF;
				font-family:jubRegular,Georgia,Serif;
				font-size:35px;
				left:20px !important;
				position:absolute;
				text-align:center;
				text-shadow:-1px -1px 0 #2DA6B4;
				top:25px;
			}
			
			ol.numbers li span.numberOne { left: 22px !important; }
		
			ol.numbers li h3,
			ul.circles li h3 {
				border-bottom: 1px solid #d1d5d5;
				margin-bottom: 5px;
				padding: 0 0 5px;
			}
			
			ol.numbers li br, 
			ul.circles li br { display: none; }
			
		/* === List of Circles === */
		
			ul.circles li span.icon {
				left: 21px;
				position:absolute;
				text-align:center;
				top:30px;
			}
			
			ul.circles li span.icon { display: block; width: 30px; height: 30px; left: 15px; }
			
			ul.circles li span.icon.web { background: url(../images/icon-web.png) no-repeat 0 0; top: 26px; }
			ul.circles li span.icon.coding { background: url(../images/icon-coding.png) no-repeat 0 0; top: 25px; }
			ul.circles li span.icon.cms { background: url(../images/icon-cms.png) no-repeat 0 0; top: 24px; }
			ul.circles li span.icon.logo { background: url(../images/icon-logo.png) no-repeat 0 0; top: 23px; }
			ul.circles li span.icon.branding { background: url(../images/icon-branding.png) no-repeat 0 0; top: 24px; }
			ul.circles li span.icon.print { background: url(../images/icon-print.png) no-repeat 0 0; top: 25px; }
			ul.circles li span.icon.apparel { background: url(../images/icon-apparel.png) no-repeat 0 0; top: 25px; }
			ul.circles li span.icon.photo { background: url(../images/icon-photo.png) no-repeat 0 0; top: 25px; }

/* ==== PORTFOLIO ======================== */

	#content.portfolio { width: 960px; }

	#content.portfolio .entry { float: left; }

	#content.portfolio .entry { line-height: 1.5em; padding: 0 10px 20px 10px; width: 300px; }
	#content.portfolio .entry h3 { font-weight: 600; padding: 10px 0 3px 0; }
	#content.portfolio .entry a { border: none; }
	#content.portfolio .entry ../images { 
		background: url("../images/portfolio-border.png") no-repeat scroll center bottom transparent; 
		padding-bottom: 9px;
		transition: opacity 0.2s ease-out;
		-moz-transition: opacity 0.2s ease-out;
		-ms-transition: opacity 0.2s ease-out;
		-o-transition: opacity 0.2s ease-out;
		-webkit-transition: opacity 0.2s ease-out;
	}
	#content.portfolio .entry ../images:hover {
		opacity: 0.5; 
		filter: alpha(opacity = 50);
	}

	#showroom, .alajaShow { overflow: hidden; }
	#showroom ../images, .alajaShow ../images { display: none; }
	#showroom ../images.active, .alajaShow ../images.active { display: block; }
	
	#ZoomBox {
		box-shadow: 0px 0px 30px rgba(0,0,0,0.5);
		-moz-box-shadow: 0px 0px 30px rgba(0,0,0,0.5);
		-ms-box-shadow: 0px 0px 30px rgba(0,0,0,0.5);
		-o-box-shadow: 0px 0px 30px rgba(0,0,0,0.5);
		-webkit-box-shadow: 0px 0px 30px rgba(0,0,0,0.5);
	}
	
	#ZoomClose {
		right:-10px !important;
		top:-10px !important;
	}

	#content.item div.grid_8 h2 { padding: 30px 0; }
	#content.item div.grid_3 { padding-top: 120px; }


	
/* === CONTACT =============================== */

	#content #contactLeft {
		float: left;
		overflow: hidden;
		padding: 25px 20px 0 0;
		width: 450px;
	}
	
	label { 
		font-weight: 600;
		margin-bottom: 5px;
	}

	input, textarea {
		background:url("../images/form-bg1.jpg") repeat scroll 0 0 transparent;
		border:none !important;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-ms-border-radius: 5px;
		-o-border-radius: 5px;
		-webkit-border-radius: 5px;
		color:#fff;
		font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Sans-Serif;
		font-size:14px;
		letter-spacing:0.05em;
		margin-bottom:13px;
		padding:0 10px;
		text-shadow:1px 1px 0 #bbb;
		width:436px;
	}
	
	input { 
		height: 30px; 
		line-height: 30px;
	}
	
	textarea { 
		height: 138px;
		padding: 10px;
	}
	
	input:focus, textarea:focus {
		background: #fff; 
		color: #555; 
		text-shadow: none;
	}

	input.button { 
		background: none;
		cursor: pointer;
		height: 38px !important;
		padding: 0 !important;
		width: 97px !important;
	}
	
	#content #contactRight {
		float: right;
		padding: 25px 0 0 0;
		width: 450px;
	}
	
		#content #contactRight map{
			border: 1px solid #ccc;
		}

	div#contact {
		margin: 0;
		padding: 0;
	}

	div.response-output {
		margin: 0;
		padding: 0;
	}
	
	div.wpcf7-mail-sent-ok,
	div.wpcf7-mail-sent-ng,
	div.wpcf7-spam-blocked,
	div.wpcf7-validation-errors,
	span.wpcf7-not-valid-tip,
	span.wpcf7-not-valid-tip-no-ajax {
		border-radius: 5px;
		-moz-border-radius: 5px;
		-ms-border-radius: 5px;
		-o-border-radius: 5px;
		-webkit-border-radius: 5px;
		line-height: 16px;
		padding: 10px;
		text-align: center;
		width: 438px;
	}

	div.wpcf7-mail-sent-ok {
		background: #dbeccd;
		border: 1px solid #70ae3c;
		color: #407d0c;
	}

	div.wpcf7-mail-sent-ng {
		background: #f5ddd6;
		border: 1px solid #bf3b17;
		color: #821f05;
	}

	div.wpcf7-spam-blocked {
		background: #f7ead1;
		border: 1px solid #cf8600;
		color: #936001;
	}

	div.wpcf7-validation-errors {
		background: #f4f0ce;
		border: 1px solid #cebb1a;
		color: #928300;
	}

	span.form-wrap {
		position: relative;
	}

	span.wpcf7-not-valid-tip {
		background: #f5ddd6;
		border: 1px solid #bf3b17;
		color: #841c00;
		font-size: 10pt;
		left: 20%;
		padding: 10px;
		position: absolute;
		text-align: center;
		top: 20%;
		width: 280px;
		z-index: 100;
	}

	span.wpcf7-not-valid-tip-no-ajax {
		background: #f5ddd6;
		border: 1px solid #bf3b17;
		color: #841c00;
		display: block;
		font-size: 10pt;
		left: 20%;
		padding: 10px;
		position: absolute;
		text-align: center;
		top: 20%;
		width: 280px;
		z-index: 100;
	}

	span.wpcf7-list-item {
		margin-left: 0.5em;
	}

	.display-none {
		display: none;
	}
	
	../images.ajax-loader {
		float: left;
	}

/* ========================= FOOTER ========================== */



#footer div {float:left;}
#footer p {margin:0px; float:right;}
#footer { 
	color: #fff;
	font-size: 13px;
	padding: 40px 0;
	position: relative;
	background:#5657f0;
}
#footer ul {list-style:none;}
#footer ul li { 
	line-height: 20px; 
	list-style-type: none;
	float:left;
}
#footer a {float:left;font-size:12px; color: #fff;margin:10px 10px;}
#footer a:hover { border-bottom: 1px solid #fff; border:none;}
#footer a.top {
	background: transparent url(../images/top.png) no-repeat 0 0;
	display: block;
	height: 46px;
	position: absolute;
	right: 0;
	text-indent: -9999px;
	top: -25px;
	width: 46px;
}

#footer a:hover.top { border: none; }

		
	/* === COPYRIGHT & CONTACT === */
	
	#footer #copyright {
		
		
		text-align: center;
		text-transform: uppercase;
	}
	
	#footer #copyright p {
		color: #201e29;
		font-size: 12px;
		letter-spacing: 1px;
		padding: 1px 0; 
	}
	
	#footer #copyright p a { color: #201e29; }
	
/* === COLORS =======
Light Gray #d1d5d5
Dark Gray #757c7c
Green #70ae3c
Medium Green #91c466
Light Green #a1d07a
Blue #28b2c4
Orange #ff7e00
================= */