@font-face { font-family: AdelleBasic; font-weight: bold; src: url('/public/css/AdelleBasic_Bold.otf'); }
@font-face { font-family: AdelleBasic; font-weight: bold; font-style:italic; src: url('/public/css/AdelleBasic_BoldItalic.otf'); }
@font-face { font-family: HelveticaNeue; src: url('/public/css/HelveticaNeueLTStd-Roman.otf'); }
@font-face { font-family: HelveticaNeue; font-style:italic; src: url('/public/css/HelveticaNeueLTStd-It.otf'); }
@font-face { font-family: HelveticaNeue; font-weight: bold; src: url('/public/css/HelveticaNeue_Bold.otf');}
@font-face { font-family: HelveticaNeueLight; font-weight: bold; src: url('/public/css/HelveticaNeue-Light.otf');}
@font-face { font-family: HelveticaNeueCondense; src: url('/public/css/HelveticaNeueLTStd-Cn.otf'); }
@font-face { font-family: HelveticaNeueCondense; font-weight: bold; src: url('/public/css/HelveticaNeueLTStd-BdCn.otf'); }

/* =============================================================================
   HTML5 element display
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio[controls], canvas, video { display: inline-block; *display: inline; zoom: 1; }


/* =============================================================================
   Base
   ========================================================================== */

html { font-size: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #444; }

/* text selection*/
::-moz-selection { background: #B2D1E0; color: #444; text-shadow: none; }
::selection { background: #B2D1E0; color: #444; text-shadow: none; }


/* =============================================================================
   Links
   ========================================================================== */

a { color: #599aba; text-decoration:none;}
a:visited { color: #3b718c; }
a:hover{color:#5cacd3; text-decoration:underline;}

a:hover, a:active { outline: 0; }


/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px;   border: 0; border-top: 1px solid #dddad2; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #444; text-decoration: none; }
mark { background: #ff0; color: #444; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: en.wikipedia.org/wiki/User:Davidgothberg/Test59 */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: gist.github.com/413930 */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

img { border: 0; -ms-interpolation-mode: bicubic; } /*Improve image quality when scaled in IE7*/
svg:not(:root) { overflow: hidden;} /* Correct overflow displayed oddly in IE9 */

/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }


/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* 
 * 1. Correct color not inheriting in IE6/7/8/9 
 * 2. Correct alignment displayed oddly in IE6/7 
 */

legend { border: 0; *margin-left: -7px; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */

button, input { line-height: normal; *overflow: visible; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

/* 
 * Remove inner padding and border in FF3/4
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ 
 */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/* Remove default vertical scrollbar in IE6/7/8/9 */
textarea { overflow: auto; vertical-align: top; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }


/* =============================================================================
   Primary styles
   Author: Design Junction
   ========================================================================== */

body{ background: #130c09; font-family:HelveticaNeue, Helvetica, Arial, sans-serif; color:#444;}

/* Common Heading style */
h2.sectionHeading{    color: #4F413C;
    font-family: 'adelle',Arial,Helvetica,sans-serif;
    font-weight: 700;
    text-shadow: -3px 2px 0 #DDD8CC;
    text-transform: uppercase;}
h1{ font-family:'adelle', Arial, Helvetica, sans-serif; font-weight:700; text-transform:uppercase; color:#4f413c; text-shadow:-3px 2px 0px #ddd8cc;}
h1.pageHeading, h2.pageHeading{ margin:0; padding:0; font-weight:bold; font-size:30px; padding-top:35px; text-shadow:-2px 2px 0 #DDD8CC; text-transform:capitalize;}
h1.sectionHeading, h2.sectionHeading{ margin:0; padding:0; font-weight:bold; font-size:45px; padding-top:35px; font-weight:700; text-transform:none;}
h2.subHeading, .textPage h3.subHeading { margin:0; padding:0;  color:#a4a4a4; font-size:20px; font-family:'adelle', Arial, Helvetica, sans-serif; font-weight:100;}


#main{ width:100%; background: url(/public/images/body_bg.jpg) repeat top left; text-align:center; padding-bottom:30px;}

.wrapper{ width:950px; margin: 0 auto; text-align: left;}
.more{ font-family: 'adelle', Georgia, "Times New Roman", Times, serif; font-weight:600; font-style:italic;}

/* =============================================================================
   HEADER ELEMENTS
   ========================================================================== */

header{ width:100%; height:110px; background: url(/public/images/header_bg.jpg) repeat-x top left; text-align:center;}
/* Set different background for header in homepage*/
#index header{ width:100%; height:110px; background: url(/public/images/home_header_bg.jpg) repeat-x top left; text-align:center;}

a#logo{ display:block; float:left; width:157px; height:68px; /*background:url(/public/images/logo.png) no-repeat top left;*/ margin-top:20px;}
#navWrapper { float:right; width:650px; }

/* Top right navigation with social networks links */
#socialNav{ height:28px; width:780px; float:right; margin-top:3px; margin-bottom:20px; text-align:right; }
#socialNav abbr.keywords {margin:0; padding:0; font-style:italic; color:#797371;font-size:12px; display:inline-block; right:7px; position:relative;top:-7px;}

#socialNav ul, #socialNav ul li, #socialNav ul li a { display:inline-block;}
#socialNav ul li a {width:34px; height:28px;}
#socialNav ul li a:hover { -moz-opacity: 0.7; -khtml-opacity: 0.7; -webkit-opacity: 0.7; opacity: 0.7;}

#socialNav ul li.twitter a {background:url(/public/images/tile1.png) -4px -60px no-repeat; }
#socialNav ul li.facebook a {background:url(/public/images/tile1.png) -4px 0px no-repeat;}
#socialNav ul li.linkedin a {background:url(/public/images/tile1.png) -40px -60px no-repeat;}
#socialNav ul li.top_gp a {background:url(/public/images/tile1.png) -40px -0px no-repeat;}
#socialNav ul li.top_pin a {background:url(/public/images/tile1.png) -4px -30px no-repeat;}
#socialNav ul li.top_rss a {background:url(/public/images/tile1.png) -40px -30px no-repeat;width:33px;}
#socialNav ul li.top_youtube a {background:url(/public/images/tile1.png) -4px -90px no-repeat;}

 
#contactInfo ul, #contactInfo ul li, #contactInfo ul li a { display:inline-block;}
#contactInfo ul li a {width:33px; height:28px;}
#contactInfo ul li a:hover { -moz-opacity: 0.7; -khtml-opacity: 0.7; -webkit-opacity: 0.7; opacity: 0.7;}

#contactInfo ul li.twitter a {background:url(/public/images/tile1.png) -4px -60px no-repeat; }
#contactInfo ul li.facebook a {background:url(/public/images/tile1.png) -4px 0px no-repeat;}
#contactInfo ul li.linkedin{float:none;}
#contactInfo ul li.linkedin a {background:url(/public/images/tile1.png) -40px -60px no-repeat;}
#contactInfo ul li.top_gp a {background:url(/public/images/tile1.png) -40px -0px no-repeat;}
#contactInfo ul li.top_pin a {background:url(/public/images/tile1.png) -4px -30px no-repeat;}
#contactInfo ul li.top_rss a {background:url(/public/images/tile1.png) -40px -30px no-repeat;}
#contactInfo ul li.top_youtube a {background:url(/public/images/tile1.png) -4px -90px no-repeat;}


/* Main navigation*/
#mainNav{ float:right; width:600px; text-align:right;}
#mainNav li{ display:inline-block; margin-left:30px;}

#mainNav li a{
	font-family:HelveticaNeue, Arial, Helvetica, sans-serif; font-size: 14px; text-transform:uppercase;
	color:#c7c1b3; display:block; padding-bottom:3px; text-decoration:none; margin-top:5px;
}

#mainNav li a:hover{ color:#F1C664; text-decoration:none;}
#mainNav li.current a{ color:#fff; border-bottom: 3px solid #655a55;}


/* =============================================================================
   HOME PAGE BANNER
   ========================================================================== */

#banner{ height:467px; background:url(/public/images/banner_tile_bg.jpg) repeat-x; margin-top:-7px;}

/* Style for banner specific slider */
#bannerSlides .slides_container { width:950px; height:397px; background: url(/public/images/banner_bg.jpg) top center no-repeat;}
#bannerSlides .slides_container .slide {width:950px; height:397px; position: relative;}

/* Style for banner content, independant from slider style */
::selection {background: #FFB800; color: black; text-shadow: none;}

.bannerImg {position: absolute;}
.tagline {position: absolute; top:75px;}
.tagline h1 {margin-bottom:5px; color: white; text-shadow: none; text-transform: capitalize; font-family: 'adelle'; font-weight: 600; font-size: 30px;}
.tagline h2 {margin-top:0; font-family: 'adelle'; text-transform: capitalize; font-weight:300; font-size: 20px; margin-top: 3px; display: block; color: #FFC83A;}
.tagline p {color: #DFD7D3; font-size: 13px; font-family: HelveticaNeue, Helvetica, Arial, sans-serif;}
.tagline a {color:#64AFD5;}
.tagline a.folio, .tagline span.folio{color:#64AFD5; font-weight:600; font-family: 'adelle', Arial, Helvetica, sans-serif; font-size:14px;}


#banner_web .bannerImg {width:761px; height:456px; right:-95px;top:-35px;}
#banner_web .tagline {width:400px;left:30px;}

#banner_ecom .bannerImg {width:633px; height:405px; left:-20px; top:30px;}
#banner_ecom .tagline {width: 342px; right:0;}

#banner_mobile .bannerImg {width:541px; height:352px; right:0px; top:30px;}
#banner_mobile .tagline {width:342px; left:30px;}

#banner_marketing .bannerImg {width:535px; height:380px; right:10px; top:20px;}
#banner_marketing .tagline {width:372px; left:30px;}


/* Style for banner tab content, independant from slider style */
.banner_tab_bar{ height:71px; background:url(/public/images/banner_tabbar_bg.jpg) repeat-x; width:950px; margin-top:-1px;}
.banner_tab_bar ul {margin:0; padding:0;background:url(/public/images/tab_divider.png) top right no-repeat; width:724px; float:left;}
.banner_tab_bar ul li{list-style-type:none; display:block; float:left; height:71px; line-height:71px; background:url(/public/images/tab_divider.png) top left no-repeat; padding-left:2px; margin:0;}

.banner_tab_bar ul li a{display:block; height:71px; padding-top:18px;}
.banner_tab_bar ul li a:hover, .banner_tab_bar ul li.current a{background:url(/public/images/banner_tabbar_bg_select.jpg) repeat-x;}
.banner_tab_bar ul li.current a {position:relative;}
.banner_tab_bar ul li.current a abbr {width:26px; height:16px; position:absolute; top:-16px; left:45%; background:url(/public/images/banner_tabbar_arrow.jpg) top left no-repeat;}
.banner_tab_bar ul li a span{display:block; height:35px; text-indent:-900em;}

.banner_tab_bar ul li#interfaceTab a span {background:url(/public/images/tab_1.png) no-repeat top center;width:177px;}
.banner_tab_bar ul li#webTab a span {background:url(/public/images/tab_2.png) no-repeat top center; width:178px;}
.banner_tab_bar ul li#mobileTab a span {background:url(/public/images/tab_3.png) no-repeat top center; width:189px;}
.banner_tab_bar ul li#marketingTab a span {background:url(/public/images/tab_4.png) no-repeat top center;width:170px;}

.banner_tab_bar a#reQuoteBtn{display:block; float:left; background:url(/public/images/btn_reQuote.png) top left no-repeat; width:189px; height:50px; margin:10px;}
.banner_tab_bar a#reQuoteBtn:hover{ -moz-opacity: 0.9; -khtml-opacity: 0.9; -webkit-opacity: 0.9; opacity: 0.9;}


/* =============================================================================
   SCREENSHOTS SLIDER FOR INDIVIDUAL PROJECT PAGE
   ========================================================================== */
   
#projScreenSlides{width:708px; float:left; margin-top:20px; position:relative;} 

#projScreenSlides .slide_nav {position:absolute; width:708px; top:35%; z-index: 100;}
#projScreenSlides .slide_nav a{text-indent:-900em; display:block; outline:none; width:33px; height:113px; position:absolute; -moz-opacity: 0.5; -khtml-opacity: 0.7; -webkit-opacity: 0.7; opacity: 0.7;}
#projScreenSlides .slide_nav a.next{z-index: 999; right:10px; background:url(/public/images/screenArrow_right.png) top left no-repeat;}
#projScreenSlides .slide_nav a.prev{z-index: 1000; left:0px; background:url(/public/images/screenArrow_left.png) top left no-repeat;}
#projScreenSlides .slide_nav a:hover{-moz-opacity: 1.0; -khtml-opacity: 1.0; -webkit-opacity: 1.0; opacity: 1.0;}


/* =============================================================================
   CUSTOME SCROLLBAR FOR PROJECTS SLIDER
   ========================================================================== */
   
.scroll-pane {overflow: auto; width: 99%; float:left;}

/* Scroll bar style */
.scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; background: #ece7da; height: 11px;}
.scroll-bar-wrap .ui-slider { background: none; border:0; height: 11px; margin: 0 auto;  }
.scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; }
.ui-slider-handle{ position: absolute; top: 0px; height: 11px; background: #f9d470 url(/public/images/scrollArrow.jpg) right center no-repeat; outline:none;}

/* Scrolled content */
/*changed at 3 April 2013: .scroll-content{ width: 2857px;  height:145px; margin-top: 20px; float:left;} *//* width is for 12 thumbsnails*/
.scroll-content{ width: 1500px;  height:145px; margin-top: 20px; float:left;}
.page_333 .scroll-content{width: 2857px;}
.scroll-content .scroll-content-item { float:left; margin-right:12px;}
* html .scroll-content-item { display: inline; } /* IE6 float double margin bug */

/* Thumbnail style */
.projItem span{display:block; text-decoration:none;}
.projItem span.more{font-size:12px; color:#599aba;margin-top:5px;}
.projItem span.more:hover{text-decoration:underline;}
.projItem span.projName{color:#626262;font-weight:bold; width:220px; text-align:center; margin-top:8px;}

.projThumb{ width:220px; height:139px; border:3px solid #ebe7e0; position:relative; overflow:hidden; display:block;}
.projThumb .hoverInfo{
	position:absolute; top:0; left:0; width:190px; height:109px; color:#fff; background-color: rgba(0,0,0,0.85);	
	font-family: HelveticaNeue, Helvetica, Arial, sans-serif; font-size:15px; padding:15px; line-height:1.3; display:block; display:none;
}


/* =============================================================================
   CUSTOME ACCORDIAN STYLING
   ========================================================================== */

#accordion h2{
   font-family: HelveticaNeueCondense,'Arial Narrow', Arial, Helvetica, sans-serif; font-size:17px; color:#fff; outline:none; font-weight:normal;
   margin-top:0; margin-bottom:0px; padding: 8px 0 5px 25px; position:relative;border:1px solid #eee8df;
}

#accordion h2.ui-state-default {background:url(/public/images/accor_tab_open_bg.jpg) repeat-x; }
#accordion h2.ui-state-active {background:url(/public/images/accor_tab_close_bg.jpg) repeat-x; }

#accordion h2 span{width:12px; height:33px; display:block; position:absolute; left:8px; top:0px;}
/*
#accordion h2 span.accordian-header-closeIcon { background:url(/public/images/accor_arrow_close.png) top left no-repeat; }
#accordion h2 span.accordian-header-openIcon { background:url(/public/images/accor_arrow_open.png) top left no-repeat;}
*/
#accordion h2 span.accordian-header-closeIcon { background:url(/public/images/tile1.png) -84px -65px no-repeat; }
#accordion h2 span.accordian-header-openIcon { background:url(/public/images/tile1.png) -83px -43px no-repeat;}

.tabContent{ background:#fff; padding:25px; margin-bottom:5px; margin-top:2px; border:1px solid #eee8df;}  

	
/* =============================================================================
   DIFFERENT STYLES FOR PROJECTS LIST IN DIFFERENT PAGES
   ========================================================================== */

/* home page: recent projects section*/
#homeContent h1{ font-size:25px; width:100%; margin-top:42px; margin-bottom:5px;}
#recentProjects h1 span.more, #otherProjects h1 span.more,
#recentProjects h2 span.more, #otherProjects h2 span.more{ text-transform: none; font-size:12px; display:block; float:right; text-shadow:none; position:relative; top:10px; right:10px;}

/* main folio project list*/	
#projectList {width:950px;}
#projectList .projItem {float:left; margin-right:11px; margin-bottom:30px}

/* individual project : other projects section */	
#otherProjects {border-bottom: 1px solid #d8d5cf; margin-bottom:20px;}
#otherProjects h1{margin-bottom:5px; margin-top:0px; font-size:25px; padding-left:5px;}
#singleProject {margin-bottom:45px;}
#otherProjects .scroll-content {height:195px;}
		
/* =============================================================================
   DIFFERENT STYLES FOR REQUEST A QUOTE BLOCK
   ========================================================================== */
   
/* Homepage sidebar request quote block*/
#index #reQuote h1{font-size:18px; margin-bottom:5px; margin-top:0px; padding-top:2px; text-shadow:-2px 2px 0 #DDD8CC;}
#index #reQuote a.contactBtn {width:120px; height:34px; background:url(/public/images/btn_contactUs_small.png) 0 0 no-repeat; display:block; margin-top:5px; position:relative; left:-5px;}
#index #reQuote {width:310px; margin-top:15px;border:1px solid #e9e3d6; background: rgba(236,230,216,0.6); }
#index #reQuote .quote-wrapper{padding:15px 10px;border:1px solid #fcf9f4;}
#index #reQuote .quote-wrapper div{background:url(/public/images/reQuote_icon_small.png) 0 0 no-repeat; padding-left:45px;}
#index #reQuote p{margin-top:0px; margin-bottom:0;}
   

/* Request quote long block at the end of every page*/   
#reQuoteSection {background:url(/public/images/reQuote_icon.png) top left no-repeat; padding-left:60px; margin-top:10px; margin-bottom:10px;}
#reQuoteSection h1, #reQuoteSection h2{font-size:18px; margin-bottom:5px; margin-top:0px; padding-top:2px; text-shadow:-2px 2px 0 #DDD8CC;}
#reQuoteSection a.contactBtn {loat:left; width:148px; height:42px; background:url(/public/images/btn_contactUs.png) 0 0 no-repeat; display:block; position:relative; top:-5px;}
#reQuoteSection p{margin-top:0px; margin-bottom:0; float:left; width:462px; margin-right:15px;}   
/* =============================================================================
  TWITTER FEED STYLE
   ========================================================================== */  
#index #twitterfeed h1{font-size:18px; margin-bottom:5px; margin-top:0px; padding-top:2px; text-shadow:-2px 2px 0 #DDD8CC;}   
   
#index #twitterfeed {width:310px; margin-top:15px;border:1px solid #e9e3d6; background: rgba(236,230,216,0.6); }
#index #twitterfeed .twitterfeed-wrapper{padding: 15px 10px 0;border:1px solid #fcf9f4;}
#index #twitterfeed .twitterfeed-wrapper .feed{background:url(/public/images/twitter-icon.png) 0 0 no-repeat; padding-left:45px;}  
#index #twitterfeed p{margin-top:0px; margin-bottom:0;} 
#index #twitterfeed .tweet .time{font-size: 12px; font-style: italic; margin-bottom: 0; margin-top: 5px;} 
#index #twitterfeed .tweet{margin-bottom: 15px;}

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

footer {border-top: 3px solid #a3978f; border-bottom: 1px solid #2f2827; background: #271b19; padding: 20px 0 10px 0;}
footer .col {width: auto; float: left; /*white-space: nowrap;*/ margin-right:29px;}
footer .col h3 { font-size:12px; font-family:AdelleBasic, Arial, Helvetica, sans-serif; margin-bottom:5px; margin-top:5px; text-transform:uppercase;}
footer .col h3 a{ color:#fff; text-decoration:none;}
footer .col ul {margin:0; padding:0; font-size:11px; margin-bottom:15px;}
footer .col ul li {list-style-type:none; margin:0; padding:0; line-height:1.3;}
footer .col ul li a{color:#cccccc;text-decoration:none;}
footer .col ul li a:hover{text-decoration:underline;}

footer #contactInfo ul{margin-bottom:2px;}
footer #contactInfo {border-left:1px solid #3d3431; padding-left:39px;width:170px;}
footer #contactInfo p{line-height:1.3;font-size:11px;color:#cccccc;margin-top:0;}
footer #contactInfo li a {color: #a8857a;}

#copyright {font-size:11px; color:#8d8686;}
#copyright #credit{float:left;}
#copyright #validate{float:right;}
#copyright a, #copyright a:visited {color:#8d8686; text-decoration:none;}
#copyright a:hover {text-decoration:underline;}

   
/* =============================================================================
   HOME PAGE CONTENT
   ========================================================================== */

/* Our services */
#aboutUs{margin-bottom:20px;}
#services{ width:615px; float:left; margin-top:10px;}
#accordion{ margin-top:10px;}

.tabContent img{display:block; float:left;}
.tabContent .serviceTxt{width:430px; float:right;}
.tabContent p{margin-top:0;}
    
/* Why Us */
#whyus {width:310px; float:right; margin-top:10px;}
#whyus .ul-wrapper {border:1px solid #e9e3d6; background: rgba(236,230,216,0.6); width:100%; margin-top:10px;}
#whyus ul{border:1px solid #fcf9f4; padding-top:20px; margin:0; padding-bottom:8px;list-style: none;padding-left:20px;}
#whyus li{ background:url(/public/images/tile1.png) no-repeat -77px 2px ;  font-family: HelveticaNeueCondense,'Arial Narrow', Arial, Helvetica, sans-serif; font-size:20px; margin-bottom:10px; padding-left: 35px;}
#whyus .ul-wrapper ul li a{ color: #7c6d67; text-decoration:none;}
#whyus .ul-wrapper ul li a:hover {color:#599ABA;}
	   

/* =============================================================================
   PROJECT DETAILS CONTENT
   ========================================================================== */
   
#singleProject #projMetaData {border-top:1px solid #dedad1;border-bottom:1px solid #dedad1; padding:10px 5px 7px 5px; position:relative; margin-top:7px;}
#singleProject #projMetaData .summary{color:#AAAAB1; font-size:15px; margin:0; padding:0;}

#singleProject #projMetaData #projNav {position:absolute; top:-25px; right:0;}
#singleProject #projMetaData #projNav a{font-weight:bold; font-size:13px; color:#999999; display:inline-block; font-family:AdelleBasic, Arial, Helvetica, sans-serif; }
#singleProject #projMetaData #projNav a:hover {text-decoration:none; color:#599ABA;}
#singleProject #projMetaData #projNav a#viewAll{background:url(/public/images/viewAll_bg.jpg) bottom right no-repeat; padding-right:20px; padding-top:2px; margin-right:20px;}

#projDetails #projInfo{width:220px; float:right; padding-top:40px;}
#projDetails #projInfo #brief, #projDetails #projInfo #solution{border-bottom:1px solid #dddbd5;}
#projDetails #projInfo h3{margin-bottom:7px; font-size:14px;}
#projDetails #projInfo #solution ul{margin:0; padding:0; margin-left:20px; margin-bottom:10px;}
#projDetails #projInfo #solution ul li{list-style-image:url(/public/images/smallTick.png);}

#projDetails #projInfo #links  {margin-top:10px; position:relative;}
#projDetails #projInfo #links a.siteLinkBtn {
	background:#56433d; display:inline-block; padding: 7px 10px 5px 10px; font-weight:bold; font-style:italic; font-family:AdelleBasic, Arial, Helvetica, sans-serif;
	-webkit-box-shadow: -3px 3px 0 #e9e5dd; -moz-box-shadow: -3px 3px 0 #e9e5dd; box-shadow: -3px 3px 0 #dedddd; color:#fff;margin-right:5px;
}
#projDetails #projInfo #links a.siteLinkBtn:hover{text-decoration:none; background:#715C56;}

#projDetails #projInfo #links #siteLinks {
	position:absolute; width:200px; height:auto; background:#56433d; font-size:12px; top:42px; padding:5px 0px;
	box-shadow: -3px 3px 0 #ccc;
}

#projDetails #projInfo #links #siteLinks ul{margin:0; padding:0;}
#projDetails #projInfo #links #siteLinks ul li a{color:#fff; display:block; padding:7px 10px 5px 10px;}
#projDetails #projInfo #links #siteLinks ul li a:hover{color:#444; text-decoration:none;background:#FC0;}

#projDetails #projInfo #links #siteLinks abbr{ 
	width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 7px solid #56433d;
	position:absolute; top:-7px; left:33px;
}
#projDetails #projInfo #links a.g_btn{display:inline-block; margin-left:14px;position:relative; top:6px;}
#projDetails #projInfo #links a.share_btn{display:inline-block; padding: 7px 10px 6px 5px; font-weight:bold; font-style:italic; font-family:AdelleBasic, Arial, Helvetica, sans-serif;}

 
/* =============================================================================
   MAIN FOLIO PAGE
   ========================================================================== */
   
#workFilter { border-top:1px solid #ddd9d2; border-bottom:1px solid #ddd9d2; width:925px; margin-top:17px; margin-bottom:35px; font-size:14px; background:#F5F2EC; padding-left:10px;}
#workFilter span{display:inline-block; font-weight:bold; color:#666666; line-height:35px; margin-left:5px;}
#workFilter ul{display:inline-block;height:22px;}
#workFilter ul li{display:inline-block; font-weight:bold;height:22px;}
#workFilter ul li a{ margin-left:10px; margin-right:15px; margin-top:9px; background-position:top left; background-repeat:no-repeat; padding-left:28px; height:22px; display:block; line-height:25px;}
#workFilter ul li a:hover, #workFilter ul li a.current {color:#5a85a0; background-position:bottom left; text-decoration:none;}

#workFilter ul li a{color:#c3c3c3; }
#workFilter ul li a:hover {color:#5a85a0;}
#workFilter ul li#allProj a{background-image:url(/public/images/filter_feature.png);}
#workFilter ul li#infoProj a{background-image:url(/public/images/filter_info.png); }
#workFilter ul li#appProj a{background-image:url(/public/images/filter_app.png);}
#workFilter ul li#ecomProj a{background-image:url(/public/images/filter_eCom.png);}
#workFilter ul li#mobileProj a{background-image:url(/public/images/filter_mobile.png); }

/* =============================================================================
   PAGINATION
   ========================================================================== */

/* Number pagination */
#mainFolio .number_pagination{width:935px; margin-top:10px;}
.number_pagination{border-top:1px solid #ddd9d2; border-bottom:1px solid #ddd9d2;padding-top:5px; padding-bottom:5px;text-align:right; margin-bottom:30px;}
.number_pagination a{
	display:inline-block; line-height:22px; padding:4px 10px 0px 10px; width:auto;background:#c3c3c3; color:#fff; font-size:14px; font-weight:bold;
	-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-decoration:none; text-align:center;
}

.number_pagination a:hover, .number_pagination a.current{background:#5a85a0; color:#fff; text-decoration:none;}
.number_pagination a.disabled, .number_pagination a.disabled:hover{background:#E7E7E7; color:#ccc;}

/* Dot pagination */
.dot_pagination { margin:7px auto 0; width:100px;}
.dot_pagination li { float:left; margin:0 1px; list-style:none;}
.dot_pagination li a { display:block; width:12px; height:0; padding-top:12px; background-image:url(/public/images/pagination.png); background-position:0 0; float:left; overflow:hidden;}
.dot_pagination li.current a {background-position:0 -12px;}


/* =============================================================================
   GENERAL PAGE TEMPLATE
   ========================================================================== */

.textPage .mainTextContent { 
	border-bottom:1px solid #DDD9D2; padding:30px 0 15px 15px; margin-bottom:30px; 
	background-color: #fff; background-position: bottom right; background-repeat:no-repeat;
}
.textPage .mainTextContent .textBlock {margin-left:30px; line-height:1.4;}
.textPage .mainTextContent .halfBlock {float:left; width:500px;}
.textPage .mainTextContent .wholeBlock {clear:both; width:85%}
.textBlock h1 {
	text-shadow:none; font-size:30px; text-transform:capitalize; 
	margin-bottom:10px; margin-top:0px; font-weight:500;
}

.textPage .mainTextContent .highlightBlock {
	background:#fff; font-family:'adelle',Arial,Hevetica,san-serif; font-weight:100; line-height:1.5; float:left; color:#9D7764;
	position:relative; top:40px; width:282px; margin-left:40px; border: 1px dashed #996666; padding:20px; font-size:18px;
}

.textPage h3 {font-family:'adelle',Arial,Hevetica,san-serif; text-transform:uppercase; font-weight:600; font-size:15px; margin:5px 0; padding:0; color:#B0987E;}


.textBlock h2 {
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 10px;
    margin-top: 0;
    text-shadow: none;
    text-transform: capitalize;
    color: #4F413C;
    font-family: 'adelle',Arial,Helvetica,sans-serif;
}

/* =============================================================================
   TEXTPAGE watermarks bg
   ========================================================================== */

.textPage .mainTextContent {	background-image:url(/public/images/bg_compass.jpg);}


/* =============================================================================
   TEXTPAGE SUB NAVIGATION
   ========================================================================== */
   
#subNav { border-top:1px solid #ddd9d2; border-bottom:1px solid #ddd9d2; margin-top:17px; font-size:14px; background:#F5F2EC;}
#subNav span{display:inline-block; font-weight:bold; color:#666666; line-height:35px; margin-left:5px;}
#subNav ul{display:inline-block;height:22px;}
#subNav ul li{display:inline-block; font-weight:bold;height:22px;}
#subNav ul li a{ position:relative; margin-left:10px; margin-right:15px; margin-top:9px; background-position:top left; background-repeat:no-repeat; padding-left:28px; height:22px; display:block; line-height:25px;}
#subNav ul li a.current, #subNav ul li a.current:hover {color:#5a85a0; background-position:bottom left; text-decoration:none;}

#subNav ul li a{color:#c3c3c3; background-image:url(/public/images/filter_info.png);}
#subNav ul li a:hover {color:#7A7676; text-decoration:none;}
#subNav ul li a.current span.arrow {background:url(/public/images/subNav_arrowDown.png); width:27px; height:11px; display:block; position:absolute; bottom:-19px; left:44%}


/* =============================================================================
   PROCESS page content
   ========================================================================== */
   
#processTable img {
	width: 90px; display:block; margin-right:15px;	
	padding:20px 10px;
}


#methodology .halfBlock {width:469px;}
#methodology .highlightBlock {width:309px;}

#contact .halfBlock {width:540px;}

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

#contactus td, #approvalForm td {
   padding-bottom: 10px;
   padding-top: 3px;
}

#contactus input, #contactus textarea,
#approvalForm input, #approvalForm textarea{
	background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DCD0C4;
    font-size: 13px;
    padding: 8px 5px;
}

#contactus input:focus, #contactus textarea:focus,
#approvalForm input:focus, #approvalForm textarea:focus{
	border: 1px solid #F8CD6A;
}

#contactus select,#approvalForm select {
	padding: 5px;
	font-size: 13px;
}

#contactus label, #approvalForm label {
	display:block; margin-right:20px;	
}

#contactus label i,#contactus i, #approvalForm label i,#approvalForm i{
	color:#F90; font-size:1.2em;
}

#contactus #btnSend, #approvalForm #btnSend  {
	background: url("/public/images/btn_sendMsg.png") no-repeat scroll left top transparent;
    border: medium none;
    cursor: pointer;
    height: 34px;
    margin-top: 6px;
    width: 151px;
}

#message,.err {
	color:#903; padding: 10px 10px 0 10px;;
	border-top:2px solid #F4D5D5; border-bottom:2px solid #F4D5D5;
	margin-bottom:20px; background:#FFF8F8;
}

#message ul li {list-style-type:square;}

.contactSidebar {
	float:right; width:282px; margin-right:40px; position:relative; top:40px; 
}

#djContact {
	background:#fff; font-family:'adelle',Arial,Hevetica,san-serif; font-weight:300; line-height:1.5; background:#FBF9F4;
	border: 1px dashed #996666; padding:20px; font-size:15px;
}

#map_container {
	position:static;
}

/* =============================================================================
   Studio Gallery
   ========================================================================== */
   
#studio img {
    background-color: #FFFFFF;
    border: 1px solid #E7E2D5;
    float: left;
    height: 100px;
    margin: 10px 20px 10px 0;
    padding: 5px;
    width: 128px;
}

/* =============================================================================
   Why us page
   ========================================================================== */
   
#whyUsBlocks h3{background:url(/public/images/large_yello_tick.png) no-repeat; padding-left:25px; padding-top:4px;}
#whyUsBlocks p {margin-left:25px; margin-top:0;}
#whyUsPage .mainTextContent {border-top:1px solid #DDD9D2; margin-top:20px; padding-top:30px;}
#whyUsPage .halfBlock {width:40%; margin-right:30px; float:left; margin-bottom:20px;}
#whyUsPage .wholeBlock {margin-left:55px;}

#whyUsPage .highlightBlock {width:815px; position:static;margin-left:30px; margin-bottom:20px;}



/* =============================================================================
   expertise pages
   ========================================================================== */

#expertiseBlock h1, #expertiseBlock h2.toph2 {font-size:24px; font-weight:600;}
#expertiseBlock h2 {font-family: HelveticaNeueCondense,'Arial Narrow', Arial, Helvetica, sans-serif; font-size:18px; margin-top:30px; font-weight:normal; line-height:1.3; color:#429AC9;} 
#expertiseBlock h3{background:url(/public/images/large_yello_tick.png) no-repeat; padding-left:25px; padding-top:4px;}
#expertiseBlock p.indentH3 {margin-left:25px; margin-top:0;}

#expertiseBlock h2.toph2{font-family:'adelle',Arial,Hevetica,san-serif;color:#4F413C;margin-top: 0;}

#expertise .mainTextContent {border-top:1px solid #DDD9D2; margin-top:20px; padding-top:30px;}
#expertise .textBlock {width:580px; float:left;}


#expertiseBlock .taglineBox {
	background:#fff; font-family:'adelle',Arial,Hevetica,san-serif; font-weight:100; line-height:1.5; color:#9D7764;
	border: 1px dashed #996666; padding:20px; font-size:18px; margin-bottom:20px; margin-top:20px;
}
   
   
#expertise .sideMenu {
	width:210px; float:right; background:#F5F2EC; padding: 0 20px 20px 20px; margin-right:30px; box-shadow:3px 3px 0px #EDE6E1;
	border: 1px solid #fff;
}
#expertise .sideMenu h4 {
	font-family:'adelle',Arial,Hevetica,san-serif; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:1.5;
	border-bottom:2px solid #ddd; margin-bottom:10px;
}
#expertise .sideMenu ul{margin:0; padding:0; }
#expertise .sideMenu ul li {list-style-type:none; margin:0; border-bottom:1px dotted #CFC2B9; padding: 1px 0;}
#expertise .sideMenu ul li a{color:#7C6D67; display:block; padding: 5px 10px 3px 10px;}
#expertise .sideMenu ul li a:hover{text-decoration:none; background:#EFEAE1;}
#expertise .sideMenu ul li.current a{background:#EFEAE1; font-weight:bold;}

   
/* =============================================================================
   Non-semantic helper classes
   ========================================================================== */

/* For image replacement */
.ir {text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; outline:none;}
.ir br { display: none; }

/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

@media screen and (-webkit-min-device-pixel-ratio:0) {
     #socialNav abbr.keywords {top:10px;}
}


/* =============================================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */
	
}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

}


/* =============================================================================
   Print styles.
   Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black text for faster print*/
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}

#projDetails #projInfo #links a.siteLinkBtn{float:left;}
.googleplus{/*margin-left: 5px;*/ width: 45px;float:left;}
.addthis{float:left;}

#testimonial em {
    font-style: normal;
    color: #3187D6;
    margin-top: 3px;
    display: block;
    margin-bottom: 24px;
}

.ph{color:#FFCD5D; font-size:18px;vertical-align: top;padding-left:30px; background:url(/public/images/tile1.png) -73px -22px no-repeat;margin-left:10px;}

#socialNav h1.keywords {
    color: #797371;
    display: inline-block;
    font-size: 12px;
    font-style: italic;
    margin: 0;
    padding: 0;
    position: relative;
    right: 7px;
    text-shadow: none;
    top: 0px;
	font-family: HelveticaNeue,Helvetica,Arial,sans-serif;
	text-transform: none;
	font-weight: normal;
	margin-right:10px;
    width:343px;
}

.fb-like{float:left;margin-right:2px;}

.textPage h3.subHeading{text-transform: none;}

#recentProjects h2{    color: #4F413C;
    font-family: 'adelle',Arial,Helvetica,sans-serif;
    font-weight: 700;
    text-shadow: -3px 2px 0 #DDD8CC;
    text-transform: uppercase;}

.tagline h2 {
    color: white;
    font-family: 'adelle';
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 5px;
    text-shadow: none;
    text-transform: capitalize;
}

.tagline h3 {
    color: #FFC83A;
    display: block;
    font-family: 'adelle';
    font-size: 20px;
    font-weight: 300;
    margin-top: 3px;
    text-transform: capitalize;
}

#homeContent h2.exp {
    font-size: 25px;
    margin-bottom: 5px;
    margin-top: 42px;
    width: 100%;
    color: #4F413C;
    font-family: 'adelle',Arial,Helvetica,sans-serif;
    font-weight: 700;
    text-shadow: -3px 2px 0 #DDD8CC;
    text-transform: uppercase;
}

.tagline h2.tagline_h2 {
    font-size: 25px;
    margin-bottom: 5px;
    text-shadow: -3px 2px 0 #DDD8CC;
    width: 100%;
    color: #FFFFFF;
    font-family: "adelle-i6","adelle",AdelleBasic,serif;
    font-size: 22px;
    font-weight: 600;
    text-shadow: none;
    text-transform: capitalize;
}

#twitterfeed{display:none;}

#homeContent .quote-wrapper h2.exp{margin-top:0;}

.ph_wrapper{float:right;}
.social_btn{float:right;}
#socialNav .keywords{float:left;}

.googleplus{float:left;}
.tw-btn{float:left;}
.linkedin{float:left;margin-left:3px;}

.tw-btn{width:138px;overflow: hidden;}
.googleplus{text-align: left;margin-left: 5px;}