body{margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #333; letter-spacing: 0.6px; background: #C6C4C4 url(images/grey-light-bg.jpg) top center no-repeat; -webkit-text-size-adjust: none;}
p {font-size: 13px;}
h2,h3{font-size: 24px; letter-spacing: 3px; font-family: Century Gothic,Arial;font-weight: lighter; color: #636363; margin: 0 0 20px;line-height: 50px; height: 50px; display: block;}
div.post h2.pageH2 {line-height: 30px; padding-left: 50px; text-indent: 0;}
h2 {color: #555; font-size: 30px; letter-spacing: 2px; font-family: Century Gothic,Arial;}
	h2 a:link {color: #1440F0; text-decoration: none;}
	h2 a:visited {color: #14F; text-decoration: none;}
	h2 a:hover {color: #BBB;} /* 0C6 */
h3#comments{overflow: hidden; width: 650px; height: 50px;}
h4{margin-top: 0; padding: 0; font-size: 18px; font-weight: lighter; font-family: Century Gothic,Arial;}
a:link,a:active{color: #1440f0; text-decoration: underline;}
a:visited{color: #999;} /* 446644 */
a:hover{color: #BBB; text-decoration: none} /* 2450F0 */
a img{border: 0;}
hr{width: 100%; margin: 25px 0 15px 0; background: #DDD; border: none; height: 1px;}
#header{height: 126px; min-width:1000px; position: relative; z-index: 1;}
#Logo{margin: 10px 0 0 80px;}
#headerContent {width: 960px; left: 50%; margin-left: -480px; height: 100%; position: relative;}
#menu-nav {margin: 0; padding: 0; list-style: none; position: absolute; top: 0; right: 0;}
#menu-nav li {float: left; display: block; margin: 0 20px 0 0; padding: 0; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px;}
#menu-nav li a {color: #0757ee; display: block; height: 50px; line-height: 50px; margin: 0; padding: 0 10px; text-decoration: none; font-family: Century Gothic,Arial; }/*border-bottom: 1px solid; border-top: 1px solid;*/
#menu-nav li.current-menu-item, #menu-nav li.current-page-ancestor, #menu-nav li.current_page_parent {background: #21497D;}
#menu-nav li.current-menu-item a, #menu-nav li.current-page-ancestor a,#menu-nav li.current_page_parent a {color: #FFF; border-bottom: none; border-top: none;}
/*#home{background: url(images/home.png) top center no-repeat; width: 67px; }
#portfolio{background: url(images/portfolio.png) top center no-repeat; width: 115px;}
#services{background: url(images/services.png) top center no-repeat; width: 100px;}
#contact{background: url(images/contact.png) top center no-repeat; width: 95px;}
#home.selected{background-color: #3460c0; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; }
#portfolio.selected{background-color: #3460c0; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px;}
#services.selected{background-color: #3460c0; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px;}
#contact.selected{background-color: #3460c0; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px;}
*/

html,body,#wrapper{min-height:100%; }
#wrapper{ margin: 0 auto;}
#featuredContent{width: 960px; left: 50%; margin-left: -480px; height: 100%; position: relative; height: 300px;}
	#mbpReflection{width: 130px; height: 163px; background: url(images/mbp-reflection.png) top left no-repeat; position: absolute; top: 0; right: 0; margin:42px 71px 0 0; z-index:2;}
	#portfolioInner{width: 442px; height: 290px; margin-left: 510px; background: url(images/laptop.png) bottom left no-repeat; position: relative;}
	#main_feature{position: absolute; top: 0; left: 0; margin: 47px 0 0 71px; width: 300px; height: 183px; overflow: hidden;}
	#main_feature_extend{margin: 0; padding: 0; list-style: none;}
	#main_feature_extend li {float: left; width: 300px;}
	#slider_counter{display: none;}
	#leftArrow{background: url(images/arrow-left.png) top left no-repeat; position: absolute; width: 19px; height: 32px; cursor: pointer; margin: 119px 0 0;}
	#leftArrow:hover{background-position: bottom left;}
	#rightArrow{background: url(images/arrow-right.png) top left no-repeat; position: absolute; width: 19px; height: 32px; cursor: pointer; margin: 119px 0 0 425px;}
	#rightArrow:hover{background-position: bottom left;}
	#featureText{position: absolute; top: 0; right: 0; margin: 70px 500px 0 0; width: 460px; height: 183px; overflow: hidden;}
	#featureText1,#featureText2{display: block; width: 460px; height: 200px;}
	#featureText h3, #featureText p {color: #FFF; text-shadow: 1px 1px 0 #333; font-family: Century Gothic,Arial;}
		#featureText p { line-height: 16px; font-family:Helvetica Neue,Helvetica,Arial,sans-serif; font-weight: lighter; margin:0 2px 7px;}
	#featureText a {color: #13e966; font-weight: bold;}
	#featureText a:hover {color: #33e996; border-bottom: 1px solid #33e996;}

#main{min-height: 330px; background: url(images/swirly-bg3.png) repeat-x scroll center top; min-width:1000px; position: relative; z-index:2;}
#mainContent{width: 960px; left: 50%; margin-left: -480px; height: 100%; position: relative; padding-bottom: 30px;}
#firstContent{width: 585px; position: relative; padding-right: 25px; border-right: 1px solid #DDD;}
#secondContent{ float: right; top: 0; right: 0; width: 310px; margin: 0 -370px 10px 0;}
div h2#homeH2{ text-indent: 50px;  background: url(images/home-icon_blue.png) left top no-repeat; color: #555;}/*3a5998*/
div h2#pageH2,div h2.pageH2{ font-family: Century Gothic,Arial; text-indent: 50px;  background: url(images/page-icon_blue.png) left top no-repeat; color: #555;}
div h2#portfolioH2{ font-family: Century Gothic,Arial; text-indent: 50px; background: url(images/portfolio-icon_blue.png) left top no-repeat; height: 46px; line-height: 43px; color: #555; margin:40px 0;}
div h2#contactH2{ font-family: Century Gothic,Arial; text-indent: 70px;  background: url(images/contact-icon_blue.png) left top no-repeat; color: #555;}
div.sep{margin-bottom: 1px;}
img.portImg{border: 1px solid #333;}
.preview-icon{width: 270px; float: left; margin: 10px 15px 0 0;}
.preview-icon img {border: 10px solid #CCC;}
.preview-icon a:hover img {border: 10px solid #007;}
.preview-desc{float: left; width:300px; margin-top: 10px; }
.preview-desc strong{font-weight: bold; }

ul#expertise{list-style: none; margin: 0; padding: 0;}
	ul#expertise li {font-size: 18px; margin: 15px 0; text-indent: 47px;}
	ul#expertise li span {display: block; width: 100%; height: 35px; line-height: 30px; color: #555;}
	#frontend{background: url(images/pencil-icon_blue.png) top left no-repeat;}
	#backend{background: url(images/gears-icon_blue.png) top left no-repeat;}
	#consulting{background: url(images/bubble-icon_blue.png) top left no-repeat;}
ul#expertise ul {list-style: none; margin: 0 0 15px 0; padding-left: 50px;}
	ul#expertise ul li {font-size: 12px; margin: 0; text-indent: 0; height: auto;}

ul.checkList li {display: block; width: 50%; float: left;}
/*input[type=text]{width: 250px; height: 20px; background: url(images/input-text.png) top left no-repeat; border: none; line-height: 25px; text-indent: 5px; padding-top: 5px; color: #333;}*/
textarea{height:140px; width: 240px; padding: 5px; border: none; background: url(images/textarea-bg.png) top left no-repeat;}
input.submit{width: 75px; height: 30px; }
.msg{background: #FFB; color: #000; font-weight:bold; padding: 15px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #333;}
.warning{background: #F33; color: #FFF; font-weight: bold; padding: 15px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #333;}

/**** list-full-view ****/
#list-full-view {list-style: none; padding: 0;}
#list-full-view li {display:block; float: left; height: 30px; width: auto; margin-right: 20px; cursor: pointer; line-height: 30px; text-indent: 40px;}
	#list-view { background: url(images/list-view.png) bottom left no-repeat; color: #999;}
	#full-view { background: url(images/full-view.png) top left no-repeat; color: #009;}
	#list-full-view.list-view-ic #list-view { background-position: top left; color: #009;}
	#list-full-view.list-view-ic #full-view { background-position: bottom left; color: #999;}

ul#portfolioList{list-style: none; margin: 0; padding: 0;}
ul#portfolioList li {display: block; padding: 25px 0; min-height: 320px;}
ul#portfolioList li h3 {margin: 0 0 15px 10px; font-family: Century Gothic,Arial;}
ul#portfolioList li .port-front { width: 700px; float: left; height: 300px; border: 1px solid #333;}
ul#portfolioList li .port-info { float: left; margin-left: 10px; width: 230px;}
	ul#portfolioList li .port-info li{ min-height: 0; padding: 10px 0 0; color: #777;}
	ul#portfolioList li .port-info li strong{ color: #333;}
	ul#portfolioList li .port-text { list-style: none; padding: 0 0 0 10px;}
.portIcon{display: block; padding: 0 0 10px 0; width: 100%; text-align: center;}
.port-front-single{border: 1px solid rgb(51, 51, 51); margin-left: 150px; margin-top: 95px; box-shadow:0 0 15px #333; -webkit-box-shadow: 0 0 15px #333; -moz-box-shadow:0 0 15px #333;}
div#blog-container.port-item{ padding-top: 100px;}

/**** list-view ****/
ul#portfolioList.list-view li {min-height: 100px; float: left;}
ul#portfolioList.list-view li .port-front { display: none;}
ul#portfolioList.list-view li .port-info { margin-left: 0; width: 320px;}
ul#portfolioList.list-view li .port-info .portIcon { float: left; height: 100px; width: 100px;}
ul#portfolioList.list-view li .port-info .port-text { display: block; float: left; width: 200px;}
ul#portfolioList.list-view li .port-info ul li.tasksTech {display: none;}
ul#portfolioList.list-view li h3 { letter-spacing: 1px; font-size: 20px; margin-bottom: 10px;}

#gallery {list-style: none; padding: 0;}
#gallery li {float: left; margin: 8px; height: 280px; overflow: hidden; position: relative; text-align: center; width: 300px; background: #EEE; border: 1px solid #333;}
#gallery li img {}

.blog-content{background: #FFF; margin-bottom: -13px; padding: 0; margin-top: 20px;}
#blog-container{width: 960px; left: 50%; margin-left: -480px; height: 100%; position: relative; padding:0 0 100px; clear: both;}
#blog-container-inner{width: 700px; height: 100%; position: relative; clear: both;}
.blog-content .post{min-height: 300px; border-bottom: 1px solid #DDD; margin-top: 20px;}
#secondary-nav{clear: right; float: right; height: 100%; position: relative; top: 0; width: 220px; margin: 25px -220px 50px 0;}
#the-posts{float: right; width: 675px; margin-bottom: 50px; border-right: 1px solid #ddd; padding: 0 24px 0 0;}
.the-comments{ padding: 10px 50px;}
.sep{clear: both; display: block; height: 1px;}
textarea#comment{background: #ddd; border: 1px solid #bbb; color: #000; width: 100%; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 13px;}
input#author,input#email,input#url {background: #ddd; border: 1px solid #bbb; color: #000; height: 20px; padding: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 13px;}
.blog-image{border: 10px solid #CCC; margin: 0 10px 0 0;}
.blog-image-single{position: absolute; left: -999em;}
a:hover img.blog-image{border: 10px solid #007;}
pre{width: 675px; overflow: auto; background: #F6F6F8; border: 1px solid #AAC; padding: 5px;}
.events-box{width: 200px; margin: 0 0 20px 20px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.events-box h3 {display: block; margin: 0; padding: 3px 10px;}
ul.archive{list-style: none; margin: 0; padding: 0;}
ul.archive li {display: block; width: 100%; height: 25px; line-height: 25px; text-indent: 10px; border-bottom: 1px solid #DDD;}
ul.archive li a {display: block; width: 100%; color: #114886; height: 25px; text-decoration: none;}
ul.archive li a:hover {color: #FFF; background: #114886;}
.catCount{position: absolute; padding: 0 4px; margin: 2px 5px 0 0; height: 20px; line-height: 20px; background: #114886; color: #FFF; right: 0; text-indent: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
ul.archive li a:hover .catCount{color: #114886; background: #FFF;}
p.info-media{width: 250px; display: block; float: left;}
div.info-content{width: 425px; display: block; float: left;}
span.time-list {display: block; font-family: Verdana, Geneva, sans-serif; font-size: 32px; color: #006;}
div.date, .postmetadata{font-size: 11px; color: #666;}
.postmetadata a:link,.postmetadata a:visited {text-decoration: underline;}
.comment-author.vcard img{float: left; margin-right: 5px;}
ul#portfolioList li ul.portGallery {list-style: none; margin: 0; padding: 0;}
ul#portfolioList li ul.portGallery li {float: left; margin: 0 25px; min-height: 1px; padding: 0; border-top: none;}
ul#portfolioList li ul.portGallery li div.preview-icon {width: auto; padding: 0; float: none;}
ul#portfolioList li ul.portGallery li div.preview-icon a:link img,ul#portfolioList li ul.portGallery li div.preview-icon a:active img,ul#portfolioList li ul.portGallery li div.preview-icon a:visited img {text-decoration: none;}
ul#portfolioList li.selectedLI {-moz-box-shadow: 0em 0.2em 1.5em; -webkit-box-shadow: 0em 0.2em 1.5em #333; border-top: none;}


#twitterHeader{position: absolute; width:40px; height:31px; overflow: hidden; left: 0; top: 0; margin: -47px 0 0 60px; z-index: 3;}
#twitterHeader a {width: 40px; height: 40px; display: block; position: relative;}
#twitterHeader:hover + span {display: block;}
#followMeOnTwitter{position: absolute; display: none; top: 0; left: 0; margin: -75px 0 0 15px; background: url(images/follow-me-on-twitter.png) 50% 50% no-repeat; width: 140px; height: 25px;}
#linkedInHeader{width: 40px; position: absolute; left: 0pt; top: 0pt; z-index: 3; overflow: hidden; height: 32px; margin: -48px 0pt 0pt 160px;}
#linkedInHeader a {width: 40px; height: 40px; display: block; position: relative;}
#linkedInHeader:hover + span {display: block;}
#findOnLinkedIn{position: absolute; display: none; top: 0; left: 0; margin: -75px 0 0 105px; background: url(images/find-me-on-linkedin.png) 50% 50% no-repeat; width: 140px; height: 25px;}
ul.tweet_area{ list-style: none; padding: 0; margin: 0;}

#footer{background: url(images/texture-silver-grad2.jpg) #b3b3b3 repeat-x scroll 0 0; height: 230px; border-bottom: 1px solid #999; border-top: 1px solid #CCC; position: relative; min-width:1000px; bottom: 0; z-index:3;} /* #a9cEf0 */
#footerContent{width: 960px; left: 50%; margin-left: -480px; position: relative; color: #222;}
	#twitter-foot{width: 337px; height: 200px; background: url(images/twitter-feed.png) top left no-repeat; margin: 15px; position: relative;}
		#twitter-details{width: 259px; height: 100px; display: block; margin: 10px; position: absolute; font-size: 14px; font-family: 'Lucida Grande',sans-serif; line-height: 20px; color: #333; letter-spacing: 0;}
		#twitter-details a:visited{color: #888;}
		#twitter-follow{position: absolute; bottom: 0; margin: 0 0 40px 10px; color: #1c7eab; font-family: trebuchet ms; letter-spacing: 0;}
	#menu-footer-pages{list-style: none; margin: 0 60px 0 0; padding: 0; position: absolute; top: 0; right: 0;}
	#menu-footer-pages li {width: 200px; display: block; height: 32px; line-height: 32px; border-bottom: 1px solid #888; text-indent: 15px;}
	#menu-footer-pages li:last-child {border-bottom: none;}
	#menu-footer-pages li a {display: inline-block; height: 32px; line-height: 32px; text-indent: 0;}
	#menu-footer-pages li a:visited {color: #14F;}
	#copyright{position: absolute; margin: 180px 0 0 430px; top: 0;}
	/*#contactUsFoot{display: block; float: right; height: 25px; width: 120px; background: url(images/page-small_blue.png) top right no-repeat; line-height: 25px; margin-top: 3px;}
	#contactUsFoot a {color: #0757EE;}*/

a[href$=".doc"] {background: url(images/wordlink.gif) no-repeat right 50%; padding-right: 35px;}
input.text{width: 240px; height:29px; padding: 0 4px 0; color: #FFF; text-indent: 5px; background: url(images/input-bg.png) no-repeat scroll top left; border: none;}
input.text:focus {background-position: 0 50%;}
input.text.req,input.text.req:focus {background-position: 0 100%;}
textarea{width: 238px; height: 130px; padding: 5px; background: url(images/textarea-bg2.png) scroll top left no-repeat; color: #FFF;}
textarea:focus{background-position: 0 100%;}

#contact-form {width: 100%; border: none;}
#contact-form td,#contact-form th {padding:8px; border: none; vertical-align:top;}
td.first{width: 150px;}

.comparisonTable{ border: 1px solid #000;}
.comparisonTable th { text-align: left;}
.comparisonTable td,.comparisonTable th {border-bottom: 1px solid #000;}

.alignleft{ float: left; margin: 0 15px 10px 0;}
.portfolioItemP{ margin-top:25px;}
input,textarea { outline:none;}


/***** JQUERY LIGHTBOX *****/
/**
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.5.css
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.5
 * @date April 11, 2008
 * @category jQuery plugin
 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
 * @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 */
#jquery-overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	zoom: 1;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}