html,
body {
	min-height: 100%;
}

body {
	font-size: 100%;
	padding-left: 20em;
}

.clearfix:before,
.clearfix:after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}

.webdesigntuts-info {
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
	
	background: #f7f7f7;
	width: 20em;
	padding: 1em 0 0 0;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	color: #555555;
	z-index: 1000;
}

.webdesigntuts-info header {
	margin: 0;
	font: 1.2em/1.4em "Helvetica Neue", Helvetica, sans-serif;
	font-weight: normal;
	padding: .5em 2em;
	
}
.webdesigntuts-info header h4 {
	margin: 0;
}
.webdesigntuts-info a,
.webdesigntuts-info a:visited {
	color: #1D745A;
	text-decoration: none;
}
.webdesigntuts-info a:hover {
	text-decoration: underline;
}

/*form*/
.webdesigntuts-info form {	
	padding: .5em 2em;	
}

.webdesigntuts-info select {
	font: 1.2em/1.4em "Helvetica Neue", Helvetica, sans-serif;
	float: left;
	width: 100%;
	margin: 0 0 1em 0;
}

.webdesigntuts-info p {
	font: 1.2em/1.4em "Helvetica Neue", Helvetica, sans-serif;
	margin: 0;	
	padding: .5em 2em;
}
.webdesigntuts-info p strong {
	margin: 0 10px 0 0;
}

.webdesigntuts-info a.icon {
	text-decoration: none;
	color: #fff;
	background: #ccc;
	border-radius: 1em;
	font-size: 6em;
	line-height: .8em;
	height: 1em;
	width: 1em;
	display: inline-block;
	text-align: center;
	font-family: 'EntypoRegular';
			
	-webkit-transition: all 0.1s ease-out;  /* Saf3.2+, Chrome */
	-moz-transition: all 0.1s ease-out;  /* FF4+ */
	-ms-transition: all 0.1s ease-out;  /* IE10 */
	-o-transition: all 0.1s ease-out;  /* Opera 10.5+ */
	transition: all 0.1s ease-out;
          
}

.webdesigntuts-info li:hover a.icon {
	background: #1D745A;
}

.webdesigntuts-info ::selection {
	color: white;
	background: #1D745A;
}

/*footer links*/
.webdesigntuts-info footer ul {
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
	
	border-top: 3px solid #fff;	
	width: 100%;	
	padding: 1.5em 2em;
	text-align: center;
}

.webdesigntuts-info footer ul li {
	list-style: none;
	width: 7em;
	display: inline-block;
	text-align: center;
	padding: .25em 0;
	margin: 0;	
}

.webdesigntuts-workshop {
	position: relative;	
}


/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
	
		body {
			padding-left: 0;			
		}
		
		.webdesigntuts-info {
			width: 100%;
			position: relative;
			top: auto;
			bottom: auto;
			left: auto;
			padding: 1em 10em 1em 1em;
		}
		
		.webdesigntuts-info footer ul {
			width: 10em;
			padding: 2em 1em 0 1em;	
			margin: 0;
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			font-size: 0.6em;
			border-top: 0;
			border-left: 3px solid #fff;
		}
		
		.webdesigntuts-info footer ul li {
			padding: 1em 0 0 0;		
		}
		
		.webdesigntuts-info a.icon {
			font-size: 4em;		
		}
		
		.webdesigntuts-info header,
		.webdesigntuts-info form,
		.webdesigntuts-info p {
			padding: .5em 1em;
			
		}
		
		
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		
		html, body {
			height: 100%;
			padding: 0;
			margin: 0;
		}
		
		.webdesigntuts-wrapper {
			min-height: 100%;
			height: auto !important;
			height: 100%;
			margin: 0 auto -10em;		
			position: relative;
		}		
		
		.webdesigntuts-info {
			position: static;
			padding: 1em;
		}
		
		.webdesigntuts-workshop {
			padding: 0 0 10em 0;
		}
		
		.webdesigntuts-info footer ul {
			font-size: .75em;
			position: absolute;
			z-index: 1000;
			background: #f7f7f7;
			margin: 0;
			border-left: 0;	
			width: 100%;
			bottom: 0;
			top: auto;
			height: 8em;
			padding: 0 2em;
			text-align: center;
		}
		.webdesigntuts-info footer ul li {
			float: none;
			
		}
		
		.webdesigntuts-info a.icon {
			font-size: 6em;		
		}
		
	}




@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('../fonts/websymbols/websymbols-regular-webfont.eot');
    src: url('../fonts/websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/websymbols/websymbols-regular-webfont.woff') format('woff'),
         url('../fonts/websymbols/websymbols-regular-webfont.ttf') format('truetype'),
         url('../fonts/websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'EntypoRegular';
    src: url('../fonts/entypo/entypo-webfont.eot');
    src: url('../fonts/entypo/entypo-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/entypo/entypo-webfont.woff') format('woff'),
         url('../fonts/entypo/entypo-webfont.ttf') format('truetype'),
         url('../fonts/entypo/entypo-webfont.svg#EntypoRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}