/*  
Description: EGStudio
Version: 1.0
Author: Liad Guez
Author URI: http://www.egstudio.biz/
*/




* 
	{	
	margin:0;
	padding:0;
	}
	
body
	{
	font: normal 12px  Arial;
	line-height: 1.7em;
	color: #373737;
	text-align:center;
	background:#f0f0e6;

	}
	
div.clear {clear:both; float: none; width: auto;}	

.right {float:right;}	
.bold {font-weight:bold;}	

a:link, a:visited {text-decoration:none; color:#759a2b;}
a:hover {background-color:#2577c1; color:#f3f3eb;}

.hidden {display:none;}

/*Tooltip*/

div.htmltooltip
	{
	position: absolute; /*leave this and next 3 values alone*/
	z-index: 1000;
	left: -1000px;
	top: -1000px;
	text-align:left;
	margin-top:-170px;
	background: url(../img/tooltip-top-bg.png) no-repeat top left;
	color: #f3f3eb;
	padding-top:11px;
	width: 394px; /*width of tooltip*/
	}
	
div.htmltooltip .inner {background: url(../img/tooltip-bg.png) repeat top left; padding:0 15px;}	
div.htmltooltip .tooltip-bottom {display:block; height:11px; background: url(../img/tooltip-bottom-bg.png) repeat top left; }

div.htmltooltip h3 {font-size:1.2em; font-weight:normal; text-decoration:underline; color:#b3de5a;}
div.htmltooltip span.link {font-size:0.9em; font-weight:normal; text-decoration:underline; color:#adadad; }
div.htmltooltip p {padding:5px 0}

/*OS Logos*/

#logos a:link, #logos a:visited {display:block; float:left; background-position: bottom left; height:86px;}
#logos a:hover {background-position: top left;}

#logos a span {display:none;}

#logos .prestashop {width: 89px; background:url(../img/prestashop-logo.gif) no-repeat; }
#logos .modx {width: 207px; background:url(../img/modx-logo.gif) no-repeat; }
#logos .wordpress {width: 110px; background:url(../img/wordpress-logo.gif) no-repeat; }
#logos .pommo {width: 197px; background:url(../img/pommo-logo.gif) no-repeat; }

	
 
/*General settings*/

a.logo img {border:0;}
a.logo:hover {background:none;}

h2 span, h3 span {display:none;}

.img-header {display:block; height:20px; width:120px; background-position:bottom left;}

.featured-work {background: url(../img/featured-work-text.gif) no-repeat;}
.we-are {background: url(../img/we-are-text.gif) no-repeat;}
.we-do {background: url(../img/we-do-text.gif) no-repeat;}
.about {background: url(../img/about-text.gif) no-repeat;}
.the-team {background: url(../img/the-team-text.gif) no-repeat;}
.services {background: url(../img/services-text.gif) no-repeat;}
.contact {background: url(../img/send-message-text.gif) no-repeat; width:130px;}
.case-study {background: url(../img/case-study-text.gif) no-repeat; width:80px;}
.our-role {background: url(../img/our-role-text.gif) no-repeat; width:80px;}
.our-work {background: url(../img/our-work-text.gif) no-repeat; width:65px;}
.terms {background: url(../img/terms-text.gif) no-repeat; width:87px;}

a.all:link, a.all:visited {display:block; padding-left:22px;font-size:0.9em; }
a.all:hover {background-color:transparent; text-decoration:underline;}

a.blue { color:#2577c1; background: url(../img/pointer-blue.gif) no-repeat center left;}
a.green { color:#759a2b; background: url(../img/pointer-green.gif) no-repeat center left;}
a.vcard { color:#2577c1; background: url(../img/download.gif) no-repeat center left;}

hr {display: block; clear: both; height:1px; border:0; border-top:1px solid #dfdfdf; margin:30px 0 ;}
hr.midpagedivider {margin-top:15px;}

a.img-link:link, a.img-link:visited {}
a.img-link:hover {background:transparent; text-decoration:none;}

/*Basic layout*/

#container {width:100%; background: url(../img/top-bg.jpg) repeat-x top center;}
#header-wrapper {width:950px; margin:0 auto; text-align: left;}
#footer { z-index:10; height:210px; margin-top:-120px; width:100%; background: url(../img/footer.png) repeat-x bottom left;}


/*Header*/
#header-menu ul {list-style:none; float:right; padding-top:2px;}
#header-menu ul li {display:inline; padding:0 7px;}
#header-menu a:link, #header-menu a:visited {color:#eeeeee; font-weight:bold;}
#header-menu a:hover {background:none; color:#c1d0db;}

#header-menu h1 {font-size:1em; color:#c1d0db; font-weight:normal;}

#header-title {margin: 40px 0 0 0;}
#header-title p.slogan {display:block; float:right; width:400px; height:50px; background: url(../img/slogan-top.gif) no-repeat bottom right;}


/*Body*/

#body {}
#cover {width:950px; margin:0 auto; text-align: left;  background: url(../img/body-bg-cover.jpg) no-repeat top left; }

#body .innertube {padding:30px 25px 170px;  background: url(../img/body-bg.png) repeat top left;  }

#body .widecolumn {width:650px; float:left;}
#body .thincolumn {width:230px; float:left; background: url(../img/column-border.jpg) no-repeat 0 20px; padding-left:20px;}

span.underline {display:block; height:1px; margin:5px 0 20px; background: url(../img/underline.jpg) no-repeat top left; }

/*footer*/
#footer .inner {width:950px; padding-top:180px; text-align:left; margin:0 auto; color:#eeffd8; font-size:0.9em;}
#footer a:link, #footer a:visited {color:#eeffd8;}


/*Content*/

div.content-wrapper {padding-right:30px;}

div.content-wrapper p {padding-right:30px; margin-bottom:15px;}

div.content-wrapper ul.std {margin-left:15px; list-style: disc;}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~Homepage~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*Projects*/

#our-work ul {list-style:none;} 

#our-work ul li {float:left; margin: 10px 20px 0 0; width:188px; border:1px solid #c1c1c1; padding:1px; background:#fff; list-style:none; position: relative;}
#our-work ul li img { position: absolute; top: 0; left: 0; border: 0;}

#our-work ul a:link, 
#our-work ul a:visited {display:block; background:#fff;  position: relative; overflow: hidden; height: 141px; width: 188px; }
#our-work ul a:hover {background:#fff;}

#our-work ul li span {display:block; border:15px solid #f1f1f1; color:#000; padding:15px 10px;  height:81px; font-size:1.2em; font-weight:bold;}

/*alternate project*/
#our-work ul li.alt {padding:0; border:0;  width:192px; background:transparent;}
#our-work ul li.alt a:link, 
#our-work ul li.alt a:visited {border:0;width:192px; height:149px; margin-top:-5px; background:transparent;}

#our-work ul li.alt span {display:block; padding:0; margin-top:5px; background:#fff;  height:144px; border: 1px solid #c1c1c1;}
#our-work ul li.alt span em {display:block; font-style:normal; height:83px; padding:15px 10px;  border:15px solid #f1f1f1;}

#our-work ul li.last {margin-right: 0;}



/*Content*/

div.inner-left {width:370px; float:left; border-right:1px solid #e5e5e5;}
div.inner-left p {padding: 0 25px 10px 0;}

div.inner-right {width:220px; float:left; padding-left:30px;}

ul.checklist {list-style-image: url(/img/checklist.gif); line-height:1.8em; color:#6e6e6e; font-size:0.9em; margin-left:20px;}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~Work~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

div.project {float:left; margin:10px 20px 0 0; width:192px;}
div.project a img {border:0;}

div.project a:link, 
div.project a:visited {display:block; padding:1px; background:#fff; border:1px solid #c1c1c1;}
div.project a:hover {background:#fff;}

/*alternate project*/
div.alt a:link, 
div.alt a:visited {background:transparent; border:0;}
div.alt img {margin-top:-5px;}

div.last {margin-right:0;}

div.project h4 a:link, div.project h4 a:visited {font-weight:normal; margin-top:5px; font-size:1.2em; padding-left:5px; border:0; background:transparent; width:auto;}
div.project h4 a:hover {text-decoration:underline; color:#759a2b;}
div.project p {padding: 0 15px 0 5px; font-size:11px; line-height:15px; color:#6f6f6f; margin-top:0;}

#projects .project {margin-bottom:30px;}

h2.txt-header {font-size:1.4em; font-weight:600;}
h2.txt-header span {display:inline; color:#627182; font-size:12px}


/*gallery*/

#gallery {padding:1px; background:#fff; width:616px; height:446px; overflow:hidden;  border:1px solid #c1c1c1;}

#gallery .thumb {
	display: block;
}

#gallery_changer {margin: 10px 0}

#gallery_changer li {
	display: inline;
	background: url(../img/bg_gallery_changer.png) no-repeat left;
	padding: 0 0 0 8px;
	margin: 0 0 0 7px;
}

#gallery_changer a:link, #gallery_changer a:visited {color:#4a80ae;}
#gallery_changer a:hover {background:transparent; text-decoration:underline; color:#4a80ae;}

#gallery_changer .first {
	padding-left: 0;
	margin-left: 0;
	background: none;
}

#gallery_changer .current a {
	color: #627182;
	text-decoration: none;
}


div.content-wrapper div.inner-left {width:410px; float:left; border-right:0;}
div.content-wrapper div.inner-right {width:170px; float:left; padding-left:30px;}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~About us~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

div.member {float:left; width:264px; padding:20px 0; margin: 0 70px 0 0;  }
div.member span.name {color:#83a839; font-weight:bold; display:block; margin-top:10px; }
div.member span.job {color:#8f8f8f; font-size:0.9em; display:block; margin-bottom:10px; }
div.member p {color:#6f6f6f; font-size:0.9em; padding: 0 20px 5px 0; line-height:1.5em;}


div.alternative {margin:0;}


/*Side column*/

div.latest-news h3.img-header {background: url(../img/latest-news-text.png) no-repeat; height:26px; width:auto;}
div.latest-news div {padding: 0 15px 0 10px;}
div.latest-news h4 {font-size:11px; color:#83a839; text-decoration:underline; margin:10px 0 5px;}
div.latest-news p {font-size:11px; color:#6f6f6f; line-height:1.5em;}


div.recent-projects h3.img-header {background: url(../img/recent-projects-text.png) no-repeat; height:26px; width:auto;}
div.recent-projects div {padding: 10px 15px 0 10px;}
div.recent-projects div p {font-size:11px;color:#6f6f6f; line-height:1.5em;}
div.recent-projects div hr {margin: 10px 0; border-style:dotted;}

div.get-in-touch {margin-bottom:30px;}
div.get-in-touch h3.img-header {background: url(../img/get-in-touch-text.png) no-repeat; height:26px; width:auto;}


div.contact-details h3.img-header {background: url(../img/contact-details-text.png) no-repeat; height:26px; width:auto;}
div.contact-details div {padding: 10px 15px 0 10px;}
div.contact-details p {font-size:11px;color:#6f6f6f; line-height:1.5em;}
div.contact-details hr {margin: 10px 0; border-style:dotted;}
div.contact-details  h4 {font-size:11px; color:#83a839; text-decoration:underline; }

div.twitter-feed {margin-top:-10px;}
div.twitter-feed h3.img-header {background: url(../img/twitter-feed-text.png) no-repeat; height:41px; width:auto;}
div.twitter-feed div {padding: 10px 15px 0 10px;}
div.twitter-feed p {font-size:11px;color:#6f6f6f; padding-bottom: 10px; line-height:1.5em;}
div.twitter-feed span.posted-on {color:#83a839;}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~Form~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#myForm {}
#myForm fieldset {border:0; width:260px; float:left;}
#myForm fieldset.long {clear:both; float:none; width:475px;}

#myForm input, #myForm textarea {border:0; padding:5px; background:transparent; font-family:Arial;}
#myForm input { width:215px;}
#myForm span.input-text {display:block; width:215px; height:30px; background: url(../img/input-field.png) no-repeat top left; margin-bottom:15px;}
#myForm span.textarea {display:block; width:473px; height:171px; background: url(../img/textarea.png) no-repeat top left;}
#myForm textarea {width:450px; height: 150px;}

#myForm label {font-size:11px; color:#6f6f6f;}

#myForm label span.optional {color:#959595;}


.errors {padding: 5px 10px; background: #f9f4b6; border:1px solid #e2dc90; color:#75713c; font-size:11px; margin-bottom:15px; width:453px;}
.success {padding: 5px 10px; background: #daf9b6; border:1px solid #c4e290; color:#48753c; font-size:11px; margin-bottom:15px; width:453px;}


#myForm button 
	{

	background: url(../img/send-message.gif) 0 0 no-repeat;
	height: 28px;
	width: 100px;
	border:0;
	margin: 16px 0 0 0;
	float: right;
	cursor:pointer;
	}

#myForm button:hover {background-position: 0 -30px;}

#myForm button span {display:none;}