* {
	padding: 0;
	margin: 0;
}

body {
	padding: 0;
	font: 70%  "ff-din-web-1","ff-din-web-2", Arial, Helvetica, sans-serif;
	cursor: default;
	line-height:1.6em;
	background:#f5f5f5;
	height:100%;
	position:absolute;
	top:0;
	left:0;
}


a {
	color: #13a2c5;
	text-decoration: none;
}
a img {
	border:none;
}
a:hover {
	color: #333;
	text-decoration: none;
}
p,dl {
	
	font-size:1.25em;
	margin-bottom:25px;
	line-height:1.6em;
}
dl {line-height:1.4em;}
dt{font-size:1em; font-weight:bold;}
dd{
	padding-left:15px;
}
label {  margin-bottom:5px;display:block;}
p code { font-size:13px;}
ul li{
	list-style:none;
}
ol li {
	list-style-position:inside;	
}
body.off pre {background:#222;}
body  pre {background:#eee;  padding:15px; border-left:5px solid #ddd; margin-bottom:25px;}

pre code{ font-size:12px; line-height:1.9em;}
blockquote {margin-bottom:16px;}


.form-text{ border:1px solid #ccc; height:16px; padding:8px; font-family:Arial, Helvetica, sans-serif;}
textarea { border:1px solid #ccc; height:400px; width:644px; padding:8px; font-family:Arial, Helvetica, sans-serif;}
fieldset { padding:15px;  border:1px solid #ccc; margin-bottom:15px;}
legend { font-size:1.2em;}

#header {  height:36px; position:relative; background:#333; width:100%; }
/*#logo { width:23px; height:23px; display:block; position:absolute; top:6px;  left:15px; }*/
#logo { width:19px; height:17px; display:block; position:absolute; top:9px;  left:21px; }

#header h1,#blog-h1 {
	position:absolute;
	top:10px;
	left:52px;
	font-size:1.3em ;
	font-weight:normal;
	color:#fff;
	border-right:1px solid #fff;
	padding-right:37px;

	
}

#main-nav { position:absolute; top:10px; left:250px; padding-left:32px; }
#blog #main-nav {padding-left:10px;}
	


#main-nav h2 {font-size:1em; font-weight:normal;}
#header a { color:#fff; display:block;} #header a:hover { color:#ddd;}
#main-nav li.active-mn h2 a{ background:url(img/misc.png) no-repeat center 25px; height:38px; position:relative; z-index:5;}

#main-nav li { float:left; margin-right:32px; text-transform:uppercase;}
#main-nav li .content-mn{ display:none;}
#main-nav li.active-mn .content-mn { display:block; width: 500px; height:400px; background:#ddd; position:absolute; top:27px; left:-251px;  z-index:4;}


a#rss-mn{width:14px; height:14px; background:url(img/misc.png) no-repeat 0 -185px; position:absolute; right:15px; top:10px; overflow:hidden; text-indent:-9999px;}
a#rss-mn:hover{ background-position: -18px -185px;}

#content .client #just-scroll{ width:68px; height:94px; background:url(img/misc.png) no-repeat 0 -676px; z-index:6; position:absolute; top:100px; left:210px;}

#content .client {  border-bottom:1px solid #e7e7e7; overflow:hidden; position:relative;   }
#content .client h2 {height:32px; padding-left:21px; line-height:35px; font-size:.9em; cursor:pointer; text-transform:uppercase;}
#content .client h4 { font-size:1em;}
#content .client h2:hover{ background:#eee ; }
#content .client.opened h2:hover{ background:#eee url(img/misc.png) no-repeat  right -440px; }


#content .client .case {width: 100%; height:700px; display:none; position:relative; }
#content .client .case-study{width:479px; height:700px; float:left; background:#fff; border-right:1px solid #e7e7e7; } 
#content .client .case-study a{font-weight:bold;}
#content .client .case-study a:hover{ color:#000 !important; }
#content .client .case-study .case-wrap { position:absolute; bottom:0; left:40px; height:auto; margin-bottom:30px; width:380px;}
#content .client .case-study h3 { font-size:1.9em; line-height:1.3em; text-transform:uppercase; margin-bottom:20px; }
#content .client .case-study p { font-size:1.23em; line-height:1.8em;}
#content .client.opened h2 { background:url(img/misc.png) no-repeat  right -440px;  }
				
#content .client .case-img { position:relative;}

#content .client .case-img h4{ background:#222; line-height:21px; height:18px; color:#fff; position:absolute; top:0; left:0; padding:0 8px;}
#content .client .case-img h4 .case-website{ display:block; height:18px; width:57px; padding-left:8px; position:absolute; right:-63px; top:0px;  background:url(img/misc.png) no-repeat 0 -390px; border-left:1px solid #999; }

#content .client .case-img .case-website-img{ border:none; display:block;}
.case-img h4 a.case-website:hover{color:#999 !important; background-color:#fff !important;}
#content .client .case-img .case-img-description {position:absolute; top:0; left:0; z-index:20; width:100%; height:100%;}





.wrap {
	padding: 0;
	height: 700px;
	display: block;
	position:relative;
}
.wrap div {
	 position:relative;
	margin: 0 0 0 0px;
	float: left;
	display: block;
	height: 700px;
}

.scroll-pane {
	width: 200px;
	background: #fff;
	float: left;
	padding: 0;
}
#about {background:#333333; display:none; border-top:1px solid #555; height:410px; position:relative; z-index:7;}
#about  .close-btn{ overflow:hidden; width:22px; height:22px; bottom:15px; left:978px; position:absolute; background:url(img/misc.png) 0 -70px no-repeat; text-indent:-9999px; }
#about a:hover{ color:#fff;}
#about a.close-btn:hover{ background-position:-22px -70px;}
#about #me { position:absolute; top:0; left:0;}


#about #about-contact{ width:650px; position:absolute; top:45px; left:21px;  display:none; }
#portfolio #about #about-contact {display:block;}
#about #about-contact p{ font-size:1.23em; color:#fff;}
#about #about-contact li{ font-size:1.2em; color:#fff;}
#about #loading { color:#fff; top:35px; left:55px; position:absolute; }

#about #contact-content { width:230px; padding:10px; background:#333333; position:absolute; left:695px; top:-10px; border-radius: 8px;  
	-webkit-border-radius: 8px;    /* for Safari */
	-opera-border-radius: 8px;  
	-moz-border-radius: 8px;  /* for Firefox */   }
#facebook-btn, #linked-btn,#twitter-btn { float:left; margin-right:5px; } 
#skype-btn{ clear:both; padding-top:15px} 

#facebook-btn a, #linked-btn a,#twitter-btn a { display:block; width:22px; height:22px; background:url(img/misc.png) no-repeat; overflow:hidden; text-indent:-9999px;}
#facebook-btn a{background-position:0 -600px;}
#linked-btn a{background-position:-23px -600px;}
#twitter-btn a{background-position:-46px -600px;}
#facebook-btn a:hover{background-position:0 -623px;}
#linked-btn a:hover{background-position:-23px -623px;}
#twitter-btn a:hover{background-position:-46px -623px;}

#blog #header { position:relative;}
#blog #wrap {width:1000px;}
#blog #content { margin:40px 0 0 52px; width:655px; float:left;}
#blog #content ul,#blog #content ol { font-size:1.25em; margin-bottom:25px; }
#blog #content ul li { padding-left:15px; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADRJREFUeNpiFF501IyBgaEXiJmBuIAFSEwDYmMGCFjKBCQ4GRCAGSSQC8RPgfg1EGcBBBgA9vUG26h9PRcAAAAASUVORK5CYII=) 0 7px no-repeat;
line-height:1.6em;}
#blog #content ol li {line-height:1.6em;}
	

/* < ie7  */
#blog #content ul li {
	*background-image:	url(img/bullet.png);
}



#blog.front #content{width:960px; float:none;}
#blog.front .node { margin-bottom:45px;}
#blog.front .node #hot { width:40px; height:66px; display:block; position:absolute; top:-40px; left:580px; text-indent:-9999px; overflow:hidden; background:url(img/misc.png) no-repeat 0 -780px; }
#blog #blog-intro { font-size:1.2em; width:655px; margin-bottom:40px; line-height:1.3em; font-weight:bold;}
#blog .node { position:relative;}
#blog .node.thumb {margin-bottom:0; float:left; float:left; width:208px; height:240px; margin:0 15px 15px 0; padding-bottom:15px; border-bottom:1px solid #ddd;}

#blog .node.thumb:nth-child(3n-2){ margin-right:0;}
#blog #content h1 { text-transform:uppercase; margin-bottom:30px; font-size:2.1em; 	line-height:1.3em; }
#blog #content h2 { margin-bottom:25px; font-size:1.5em; }
#blog #content h3 { font-size:1.1em; text-transform:uppercase; }
#blog #content h4 { font-size:1.2em;}


#blog.front .node{height:300px;} 
#blog #post-intro p { font-size:1.45em; font-weight:bold;  margin-bottom:30px;}

#blog .blog-front-img {  display:block; float:left;  }
#blog .blog-teaser h2{ font-size:1.6em; margin-bottom:18px; line-height:1.4em; }
#blog .blog-teaser { width:250px; float:left; margin-left:30px; }
#blog .blog-teaser-img {margin-bottom:30px;}
#blog .img-zoom-container{ width:655px;  position:relative; z-index:5; cursor:pointer;}
.img-zoom { display:none;}
#blog .img-zoom-container img { width:100%; display:block;}

.zoom-btn { width:21px; height:20px; top:5px; right:5px; position:absolute; background:url(img/misc.png) no-repeat -25px 0px; text-indent: -9999px; overflow:hidden;}
.zoomIn .zoom-btn { background-position:-46px -0;}

#blog  .img-zoom-container.zoomIn img{ width:auto !important; 
	-moz-box-shadow: 3px 3px 4px #999;
	-webkit-box-shadow: 3px 3px 4px #999;
	box-shadow: 3px 3px 4px #999;
	display:block;
	ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');
}

#blog #content .blog-thumb h2 { font-size:1.2em; margin-bottom:0; height:35px;}
#blog #content .blog-thumb p { font-size:1.2em;}

#blog  .blog-date-comment { position:relative;  padding-left:20px; color:#999; font-size:.9em; }
#blog  .blog-date-comment a{ background:url(img/misc.png) no-repeat 0 0; width:16px; height:15px; line-height:1em; text-align:center;color:#fff; font-size:.95em; display:block; position:absolute; top:3px; left:0; }
#blog #content .terms li { margin-right:10px !important; background-image:none; padding-left:0; font-size:.9em;}
#blog #content label,#blog #content .form-text, #blog #content textarea { font-size: 1.2em;}

#blog .blog-date {color:#bbb; font-size:.9em; margin-bottom:12px;}
#blog .blog-comment-count {  width:53px; height:42px; background: url(img/misc.png) no-repeat 0 -235px; position:absolute; top:0; left:655px; color:#fff; line-height:35px; text-align:center; }
#blog .blog-comment-count a { display:block; color:#fff;}

#blog #footer { border-top:1px solid #e7e7e7; padding:10px 55px;  clear:both; color:#999;}
#portfolio #footer { padding:10px 0 10px 20px; color:#999;}

#blog #right-content {float:left; margin:40px 0 0 50px; padding-top:52px; position:relative; font-size:1.2em; line-height:1.5em;  }
#blog #right-content .block{ margin-bottom:30px;}
#blog #right-content .block h2 { margin-bottom:8px; font-size:1.3em;}

#comments { width:655px;}
#comments .indented { margin-left:15px;}
#comments h2 { margin-bottom:30px;  padding:4px; border-left:5px solid #13A2C5; position:relative;}
.comment {  border-left:5px solid #13A2C5; margin-bottom:15px; background:#eee; padding:15px 20px 0px 15px; clear:both; position:relative; overflow:hidden; }

.comment h3 { text-transform:uppercase; font-size: 1.1em; padding-bottom:15px;}
.comment .new { width:70px; height:15px; font-weight:bold; background:#C03; text-transform:uppercase; position:absolute; top:0; right:0; color:#fff; text-align:center;}
.comment.odd{ border-color: #c5137c;}
.comment.odd a {color:#c5137c;} .comment.odd a:hover{color:#333;}
.comment .user-info { width:70px; height: 150px;  position:absolute; top:15px; left:15px;}
.comment .comment-content{ float:left; margin-left:120px; overflow:hidden; min-height:130px;}
#blog #content .comment ul.links { clear:both; margin-bottom:0 ;  position:relative; z-index:5; }

#comment-form .comment.comment-published{ margin-top:15px;}

#blog #content ul.links { height:30px;}
#blog #content ul.links li { float:left;  margin-right:10px; margin-bottom:0; background-image:none; padding-left:0;}
body.off .comment { background:#222;}
/*drupal*/
#comment-form {margin-bottom:30px;}
.form-item { margin-bottom:5px;}
.form-required { color:#C03;}
#edit-subject,#edit-comment { width:655px;}
.description{ font-size:.9em; color:#999;}
.messages {
  background-color: #fff;
	min-height:16px;
	width:490px;
	padding:5px;
	margin-bottom:30px;
}

.preview {
  
  
  padding:20px 25px 5px 25px; 
  position:relative; 
  left:-25px; 
  margin-bottom:30px;
  width:650px;
  background:url(img/comment-preview-bg.png);
}

div.status {
  color: #33a333;
  border-color: #c7f2c8;
}

div.error, tr.error {
  color: #C03;
  background-color: #FFCCCC;
}

.form-item input.error, .form-item textarea.error {
  border: 1px solid #C03;
  color: #363636;
}
 .tip-drupal{background:#e5f0f3 url(img/tip.png) no-repeat 15px -485px; border:1px solid #d7dfe1; color:#004670;}
.tip{background:#f7f7da url(img/tip.png) no-repeat 15px 15px; border:1px solid #dcdcc9; color:#616241;}
.tip-drupal,.tip { 

	padding:16px 20px 16px 74px;
	
	border-radius: 8px;  
	-webkit-border-radius: 8px;    /* for Safari */
	-opera-border-radius: 8px;  
	-moz-border-radius: 8px;  /* for Firefox */ 
}
.half { width:250px;}

.form-item{ clear:both;}
ul.tabs { width:650px; clear:both;  display:block; height:30px; margin-bottom:30px; }
ul.tabs li { float:left; background:#ddd; padding:5px; margin-left:1px; width:80px; text-align:center;}
/*ul.tabs li.active {background:#13A2C5;}*/
ul.tabs a {display:block;}
/*ul.tabs li.active a { color:#ddd;}*/
 #switch{ width:100px;  height:40px; display:block; overflow:hidden; text-indent:-9999em; outline:none; position:absolute; top:50px;  z-index:6;}
 #save-planet{ width:270px; height:155px; background:url(img/switch.png)  no-repeat 0 -50px; position:absolute; z-index:5; top:7px; left:0px;}
body.on #switch{background:url(img/switch.png);}
body.off #switch{background:url(img/switch.png) no-repeat -350px 0;}
body.off #footer,body.off .block li,body.off pre,body.off fieldset { border-color:#333 !important;}
body.off .form-submit{	background:#ddd;color:#333;}
body.off .form-text,body.off textarea{background:#000; color:#eee !important; border-color:#333 !important;}

body.off { background:#111; color:#fff;}
fieldset.collapsed  { height:0; overflow:hidden; padding:0 15px;}
.collapsed .fieldset-wrapper{ display:none;}

/* twitter date */
.block { width:242px;}
#block-block-1  li {  margin-bottom:8px; border-bottom:1px solid #ddd; padding-bottom:8px;}
#block-block-1  li p{ margin-bottom:0; font-size:1em;}
#block-block-1  h2 { background: url(img/misc.png) no-repeat 65px -297px; }
body.off #block-block-1  h2 { background: url(img/misc.png) no-repeat 65px -344px; }


/* recent blog post and search */
#block-block-2 #blog-term {
	overflow:hidden;	
	
}
#block-block-2 #blog-term li{
	float:left;
	width:121px;
	
}
#block-block-2 h3{
	font-size:13px;	
	background:#2cbbde;
	padding:0px 8px;
	margin:5px 0;
	border-radius: 5px;  
	-webkit-border-radius: 5px;    /* for Safari */
	-opera-border-radius: 5px;  
	-moz-border-radius: 5px;  /* for Firefox */ 
	color:#fff;
	width:106px;
	height:21px;
	cursor:pointer;
}
#block-block-2 h3:hover{
	
	background:#999;	
}


#block-block-2 .form-submit { position:absolute; top:27px; left:200px; height:28px; width:55px;}
#block-block-2 .form-text {width:174px; height:15px;}
#block-block-2 h4{font-weight:normal;}
#blog-search{
	display:none;
	position:relative;
}
#post-footer { position:relative; height:100px;}
#post-date{ position:absolute; right:left; top:37px; color:#999;}
a.twitter-date{ font-size:.9em; color:#999;}
#share-btn {  float:left; border-left:1px solid #ddd; width:100px; padding-left:10px; position:relative; top:2px;}
.terms { float:left;}
#blog.front #share-btn { margin-bottom:40px; border:none; padding:0;}
#facebook{ }
.node #gplus{ position:absolute; top:0; left:112px;}
.node #stumble{ position:absolute; top:0; left:214px;}

#blog.front #gplus{ position:absolute; top:0; left:100px;}
#blog.front #stumble{ position:absolute; top:0; left:200px;}

.form-submit{
	background:#333;
	border:none;
	border-radius: 5px;  
	-webkit-border-radius: 5px;    /* for Safari */
	-opera-border-radius: 5px;  
	-moz-border-radius: 5px;  /* for Firefox */ 
	color:#eee;
	padding:3px;
	cursor:pointer;
}
.form-submit:hover{ background:#999;}

.js__statement{ color:#13A2C5 !important;}
.css__property{ color:red !important;}
#msg-right,#msg-left {
	 position:absolute;
	 font-size:11px;
	 width:158px; 
	 height:18px; 
	 z-index:30; 
	 right:10px; 
	 top:44px;	
	 font-weight:bold;
	 color:#fff;
	background:#13A2C5 url(img/misc.png) 5px -496px no-repeat;
	padding: 0 6px 0 18px;
	border-radius: 3px;  
	-webkit-border-radius: 3px;    /* for Safari */
	-opera-border-radius: 3px;  
	-moz-border-radius: 3px;  /* for Firefox */ 
}

#msg-left{left:20px; width:163px; background-position: 5px -546px;}
#percentCounter{position:absolute; right:43px; text-align:right; color:#fff; font-size:16px; top:9px; display:block; font-weight:bold;}
.addthis_toolbox{position:absolute; right:43px; display:none; top:9px;}

#nikola_links{color:#13A2C5; cursor:pointer; position:relative;}
#nikola_links ul{position:absolute; top:-33px; left:3px; background:url(img/soc-bg.png) no-repeat 0 0; padding:5px 6px 18px 6px; width:83px;}

#follow-buttons{margin-top:10px;}
#follow-buttons li{margin-bottom:5px;}
#follow-buttons li.twitter{margin-bottom:2px;}
#follow-buttons li.linkedin{margin:0px;}