/* ########################################################################
    Following styles approach to all devices with display-width smaller 
    than 960px, but mainly optimized for smartphones
########################################################################### */

@media screen and (max-width: 960px)  {
  
/*  =GENERAL STYLES
=========================================================================== */   
  html {
    margin-top: 0!important;
	}
	
	body {
	  background: #fff;
		font-size: 110%;
		line-height: 140%;
    padding-top: 60px;	
	}
	
	h1 {
		font-size: 175%;
	}
	 
	h2 {
	  line-height: 120%;
	}
	
	#first-post h2 {
	  border-top: none;
		font-size: 120%;
	}
	
	a {
	  max-width: 100%;
	}
	
  iframe {
    width: 100%;
  } 
  
  .breadcrumb, 
	.callout,
	.taglist,
	.xing-career {
		display: none;
	} 
  /* ============================================================== GENERAL STYLES = */
  
  /*  =HEAD SECTION
  =========================================================================== */
	.mobile-nav {
		background: #333;
		border: none;		  
		color: #fff;		
		display: inline;
		font-size: 40px;
		height: 60px;		
		left: 0;	
		padding: 0;				
		position: absolute;
		top: 0;		
		width: 60px;			
		z-index: 2;
	}
	
	.mobile-search {
		background: #ccc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFAAAAMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzyprMywAAABB0Uk5TABAgMEBQYHCAj5+vv8/f7yMagooAAAGCSURBVGje7ZfZcsMgDEVRwJiy///XtgUviWNwxxIzbUf3MbHvMUISQggWi8Vi/Sc9lBznPfuUi7zVQG6vfX6RVaT2KuQ3ecJgmXwqQ2QPPjcUSLYCtvAkqxUIULOjJGz+fnr60SQygq1O8ZA1sKwiYP2n6uPev3Su/3wgA1RDYU9LoxIUQYBsL3tRQXr0LWr+anSFyT7fIwCxE6A9go/b/vLq/bqEGReh7iYGXIz8ZUsrxZBuA9JlnqsSo9v9op9D+yMKBRCjATAaoEYDNKpSfpBFtjts4NK01EHsPeFwhWauIgzIViGvuqVBNrvaatpLqOcdpl3r/oHj0AdOPRBaiVTxETeU5vZHkhz661hkmv6OaLA7Dkbr4IXI0dUpLoOpgZPREbvHpRjCNvtOJeOfhl8aAoTcF5rQuoCEKVER5MkdJH1lliQjCOWO9mXPCQkCtFsSKsf9HktJKAv51ktJUBNO9ocJTGACE5jwdwlJjCbIwYQoxFBClILFYrFYLNYv1CfUPi/H7OzzXQAAAABJRU5ErkJggg==) no-repeat center;
    background-size: 48px 48px;
		border: none;		  
		color: #fff;		
		display: inline;
		font-size: 40px;
		height: 60px;		
		padding: 0;				
		position: absolute;
		right: 0;	
		top: 0;		
		width: 60px;			
		z-index: 2;
	}	
 
	header.container {
		padding: 0;
	}
	
	.top-of-dev {		
		left: 0;
		margin: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 1;
	}
	
	.top-of-dev h1,
	.top-of-dev .homelink {		
		background: none;
		margin-bottom: 0;
		margin-top: 0;
		text-align: center;
	}
	
	.top-of-dev h1 a, 
	.top-of-dev .homelink {
		background: #007e81; 
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#007e81), color-stop(100%,#006567)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #007e81 0%,#006567 100%); /* Chrome10+,Safari5.1+ */				
		background:    -moz-linear-gradient(top,  #007e81 0%, #006567 100%); /* FF3.6+ */
		background:     -ms-linear-gradient(top,  #007e81 0%,#006567 100%); /* IE10+ */		
		background:      -o-linear-gradient(top,  #007e81 0%,#006567 100%); /* Opera 11.10+ */
		background:      linear-gradient(to bottom,  #007e81 0%,#006567 100%); /* W3C */		
		color: #fff;
		font-size: 22px;		
		text-transform: uppercase;
	}
	
	.top-of-dev h1 a:hover, 
	.top-of-dev .homelink:hover {
	  color: #ccc;
}
	
	.top-of-dev h1 span, 
	.top-of-dev .homelink span {
		display: inline;
	}
	
	.homebase {
		display: none;
	}
	
	header li {
		display: block;
		padding-left: 5%;
	}
	
	header li a {
		font-size: 16px;
	}	

	header nav {
	  -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.3);
            box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.3);
		display: none;
		position: relative;
		width: 100%;	
	}
	
	header nav ul {
		border: none;
	}
	
	header nav li {
		background: #333;
	}
	
	header nav li a {
		border-bottom: 1px solid #666;
		border-right: none;
		color: #fff;
		font-size: 22px;
		font-weight: normal;
		padding: 25px 20px;
	}
	
	header nav li:last-child a {
		border-bottom: none;
	}
  /* ============================================================== HEAD SECTION = */
  
  /*  =CONTENT AREA
  =========================================================================== */  
	#first-post {
		background-color: #eee;
		margin-bottom: 35px;
		margin-left: -1%;
		padding: 0 1%;
		width: 100%;
	}
	
  #first-post .taglist a {
    background: #fff;
  }

  .ourcontent {
	  padding: 0;
  }		
		
	.ourcontent .content,
	.ourcontent .meta,
	section .meta, 
	section {
	  border-bottom: none;
		display: block;
		width: 99%;
	}
	
	section,
	.ourcontent .content {
	  margin: 0;
	  padding: 0;
	}
	
  .ourcontent .content {
    margin-bottom: 35px;	
	}
	
	section .meta, 
	.ourcontent .meta {
	  background: #eee;
	  padding: 0 2%;
	  margin: 0 -2%;
	}
	
	section .meta p, 
	.ourcontent .meta p,
	section .meta span, 
	.ourcontent .meta span,
	section .meta time, 
	.ourcontent .meta time {
	  color: #333;
	  display: inline;	  
	  font-size: 70%;
	}
	
	section .meta time, 
	.ourcontent .meta time {
	  border-bottom: none;
	}
	
	.ourcontent article hr {
	  display: none;
	}
	
	.continue {
	  margin-top: 1%;
	}
  /* ============================================================== CONTENT AREA = */	

  /*  =SIDEBAR
  =========================================================================== */		
	aside {
		display: inline;
		width: 100%;
	}
	
	aside #searchform {
	  background: #ccc;
	  -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.3);
            box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.3);
	  display: none;
	  padding: 25px 20px;
	  position: fixed;
	  right: 0;
	  top: 60px;
	  width: 96%;
	}
	
  aside #searchform input {
		font-size: 110%;
	  margin-left: 10%;
	  padding: 12px 5px 13px;
	  width: 60%!important;
	}
	
  aside #searchform button {
	  background: #333;
    border: none;
	  color: #fff; 
		font-size: 110%;
	  padding: 11px 5px;
	  text-shadow: none;
	}	
	
  aside #searchform button:hover,
  aside #searchform button:focus,
  aside #searchform button:active {
	  background: #006567;
	} 
  /* ============================================================== HEADING = */  
  
  /*  =BOTTOM LINKS & LISTS
  =========================================================================== */	
	.pager {
	  text-align: left;
	}
	
	.pager li {
	  display: block;
	}
		
	.pager .next > a,
	.pager .previous > a {
	  float: none;
	  margin-bottom: 1%;
	  max-width: 50%;
	}
	
	#respond textarea {
		width: 94%;
	}
	
	.coderwall, 
	.github, 
	.rss, 
	.sharegplus,
	.sharetwitter, 
	.twitter, 
	.vimeo, 
	.xingapi, 
	.xingdevs, 
	.youtube {
		background: none;
    text-indent: 0;
    width: auto!important;
	}
	
	.share-list li,
	.socialmedia li {
		display: block;
		margin-bottom: 0;
		text-indent: 0;
	}
	
  .share-list li a:before, 
  .socialmedia li a:before {
    content: "\00BB";
    margin-right: 5px;
		}

  .share-list li a, 
  .socialmedia li a {
		background: #eee;
		border-bottom: 1px dashed #666;
		color: #006567;
	  display: block;
		height: auto;	  
    padding:15px 7px;
		width: auto;
	}
	
  .share-list li:first-child a, 
  .socialmedia li:first-child a {
    border-top: 1px dashed #666;
  }
     
	.share-list li a:hover,
	.socialmedia li a:hover {
	  background: #ccc;
	  text-decoration: none;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
  }  
  /* ============================================================== BOTTOM LINKS & LISTS = */
 
  /*  =FOOTER
  =========================================================================== */ 
  .container,
	footer  {
		padding: 0 2%;
		width: 100%;
	}
	
	footer .row {
		margin-left: 0;
		padding: 0;
		padding-top: 20px;
		width: 100%;
	}
	
	footer .xing-links {
	  margin: -55px 0 20px;
	}
	
  footer .xing-links li {
    line-height:160%;
  }
  /* ============================================================== FOOTER = */
	
	footer .xing-links li:first-child {
	  position: static;
	}
		
}