/*!
 * Gridpak Beta CSS
 *
 * Generator - http://gridpak.com/
 * Created by @erskinedesign
 */
 @import url('boilerplate.css');
 
 @font-face {
    font-family: 'ExoBold';
    src: url('Exo-Bold-webfont.eot');
    src: url('Exo-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Exo-Bold-webfont.woff') format('woff'),
         url('Exo-Bold-webfont.ttf') format('truetype'),
         url('Exo-Bold-webfont.svg#ExoBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ExoBoldItalic';
    src: url('Exo-Bold-Italic-webfont.eot');
    src: url('Exo-Bold-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Exo-Bold-Italic-webfont.woff') format('woff'),
         url('Exo-Bold-Italic-webfont.ttf') format('truetype'),
         url('Exo-Bold-Italic-webfont.svg#ExoBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

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

}

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

}


 
/* Reusable column setup */
	.col { 
		border:0px solid rgba(0,0,0,0);
		float:left;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
		-moz-background-clip:padding-box !important;
		-webkit-background-clip:padding-box !important;
		background-clip:padding-box !important;
		}

	img {
		max-width: 100%;
		}
	a:hover {
		-webkit-transition:.2s ease-in-out;
		-moz-transition:.2s ease-in-out;
		-o-transition:.2s ease-in-out;
		}

/** {border: 1px solid #ccc;}*/


    /* 1. 6 Column Grid 0px - 339px
    ----------------------------------------------------------------------------- 
    
    Span 1:    15.0%
    Span 2:    32.0%
    Span 3:    49.0%
    Span 4:    66.0%
    Span 5:    83.0%
    Span 6:    100%

----------------------------------------------------------------------------- */

	body { 
		background: url('../images/bg.png');
		}
	h2 { 
		font-family:'ExoBold', san-serif;
		font-weight: normal;
		font-style: normal;
		color:#7e7e7e;
		font-size:1.8rem;
		text-shadow:0 -1px 0 rgba(0,0,0,0.7),0 1px 0 rgba(255,255,255,1);
		background:#fff;
		border:1px solid #ccc;
		}
	h4 {
		font-weight: normal;
		font-style: normal;
		font-size:1.4rem;
		}
	h5 {
		font-weight: normal;
		font-style: normal;
		font-size:1.2rem;
		margin-left:1%;
		}
	.network h2 {
		margin: 35px 20% 0 -85%;
		padding:7px 5% 7px 100%;
		}
	.col {
		margin-left:2%;
		padding:0 0.5%;
		}
	.row .col:first-child {
		margin-left:0;
		}
	.span_1 {
		width:15.0%;
		}
	.span_2, .header h1{
		width:32.0%;
		float: left;
		text-align: center;
		} 
	.span_3 {
		width:49.0%;
		float: right;
		} 
	.span_4 .header ul.nav, ul.social-top {
		width:66.0%;
		float: left;
		}  
	.header {
		background: #DBD9D5;
		background:rgba(180,180,180,0.4);
		height:100px;
		-moz-box-shadow:inset 0 8px 8px -8px #696868, inset 0 -8px 8px -8px #696868;
		-webkit-box-shadow:inset 0 8px 8px -8px #696868, inset 0 -8px 8px -8px #696868;
		box-shadow:inset 0 8px 8px -8px #696868, inset 0 -8px 8px -8px #696868;
		}
	.shed-container {
		width:49.0%;
		float: left;
		}
	.action-container {
		width:49.0%;
		float: left;
		}
	.call { 
		background: #fff;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		height: auto;
		overflow: visible;
		float: left;
		width: 100%;
		}
	.subpage .call {
		border-top: 1px solid #ccc;
		border-bottom: none;
		height: auto;
		overflow: visible;
		float: left;
		width: 100%;
		background:none;
		}
	.call h2 {
		padding: 15px 5%;
		margin: 0;
		color: #222;
		text-shadow: none;
		font-family: 'DroidSansRegular', san-serif;
		font-weight: normal;
		font-style: normal;
		font-size: 2.2rem;
		letter-spacing: -2px;
		font-weight: normal;
		line-height: 120%;
		border:none;
		}
	.call img {
		vertical-align: middle;
		margin-top: -40px;
		padding: 0 10%;
		}
	.action {
		font-family: 'DroidSansRegular', san-serif;
		font-weight: normal;
		font-style: normal;
		font-size: 2rem;
		letter-spacing: -1px;
		line-height: 120%;
		}
	.call img {
		vertical-align: middle;
		margin-top: -50px;
		padding: 0 10%;
		}

	ul.nav, ul.social-top {
		margin: 0;
		padding: 40px 0 40px 38%;
		list-style: none; 
		font-family: 'DroidSansRegular', san-serif;
		font-weight: normal;
		font-style: normal;
		}
	ul.social-top li, ul.nav li {
		display: inline;
		}
	ul.nav li a {
		text-decoration:none; 
		color: #222;
		}
	ul.nav li a:hover {
		background: rgba(160,160,160, 0.20);
		-webkit-transition:.3s ease-in-out;
		-moz-transition:.3s ease-in-out;
		-o-transition:.3s ease-in-out;
		}
	.total {
		background: #fff;
		color: #1e6b85;
		font-family: 'DroidSansRegular', san-serif;
		font-weight: normal;
		font-style: normal;
		font-size:.9rem;
		width:35%;
		padding:3px;
		text-align:center;
		float:right;
		margin:13px 0 0 22%;
		border: 1px solid #ccc;
		}
	.top-icons {
		float:right;
		width:120px;
		}
	.pocket {
		width:47%;
		height:185px;
		float:right;
		margin-bottom:10px;
		margin-left:10px;
		background: #E5E3DE;
		background: rgba(160,160,160, 0.20);
		}
	.pocket .small-button {
		width:40%;
		float:right;
		margin-left:3%;
		margin-right:3%;
		}
	.pocket #l-twitter-follow {
		float:right;
		width:47%;
		text-align:center;
		margin-left:40px;
		margin-right:10px;
		}	
	.pocket #l-twitter-follow p {
		font: normal 1.2rem 'DroidSansBold', sans-serif;
		color:#666;
		margin-right:24px;
		}
	.pocket #l-facebook-follow {
		float:right;
		width:40%;
		text-align:center;
		}	
	.pocket #l-facebook-follow p {
		font: normal 1.2rem 'DroidSansBold', sans-serif;
		color:#666;
		margin-bottom:5px;
		margin-right:20px;
		}
	.pop-threads { 
		width:100%; 
		margin:20px 0 0 0; 
		padding:5px 0 5px 15px;
		background: url('../images/pop-threads-background.png'); repeat-x;
		}
	.pop-threads ul { 
		list-style-type:none; 
		width:28%; 
		float:left; 
		font: normal 1rem 'DroidSansRegular', sans-serif;
		 margin-right:20px; 
		 }
	.pop-threads ul li { 
		padding: 5px 0; 
		border-bottom:1px solid #ccc; 
		margin-left:-40px; 
		}
	.pop-threads h3 { 
		margin-bottom:-10px; 
		font: normal 1.2rem 'DroidSansRegular', sans-serif; 
		color:#333; 
		}
	.pop-threads a { 
		text-decoration:none; 
		}
	
	.seven-lines {height:260px;}
	.two-lines {height:120px;}
	.five-lines {height:200px;}
	.four-lines {height:180px;}
	.span_6 h4 img {margin:10px 0 0 5px;display:block;padding-top:10px;}
					
/* indicates page in main menu using class in body */
	.home .current-home a, .about .current-about a, .advertise-page .current-advertise a, .writers .current-writers a, .connect .current-connect a, .dev-network .current-network a, .newsletter .current-newsletter a { 
		background: rgba(119,160,164,.25);
		}
	
	ul.social-top, ul.nav img {
		vertical-align:center;
		margin-top: -8px;
		}
	ul.social-top {
		width:66.0%;
		float:right;
		margin: 0 0 0 0;
		}
	ul.social-top li {
		display:inline;
		float:right;
		padding-right:5px;
		}	

	.button {
		background: #339520;
		display: inline-block;
		margin: 10px 0 0 15%;
		font-family:'DroidSansRegular', san-serif;
		font-weight: normal; font-style: normal;
		color:#fff;
		font-size:2rem;
		padding:17px;
		text-decoration:none;
		border-radius:20px;
		-webkit-border-radius:20px;
		-moz-border-radius:20px;
		-webkit-box-shadow:0px 1px 10px #666666;
		-moz-box-shadow:0px 1px 10px #666666;
		text-shadow:1px 1px 3px #666666;
		border:dotted #9ada98 2px;
		background:-webkit-gradient(linear,0 0,0 100%,from(#69bf67),to(#368c34));
		background:-moz-linear-gradient(top,#42cf29,#308c1e);
		}
	.button:active, .small-button:active {
		-webkit-box-shadow:0 3px 1px rgba(0,0,0,.3);
		-moz-box-shadow:0 3px 1px rgba(0,0,0,.3);
		box-shadow:0 3px 1px rgba(0,0,0,.3);
		-webkit-transform:translate(0,4px);
		-moz-transform:translate(0,4px);
		-o-transform:translate(0,4px);
		transform:translate(0,4px);
		}
	.button:hover, .small-button:hover {
		color:#368c34;
		-webkit-transition:.2s ease-in-out;
		-moz-transition:.2s ease-in-out;
		-o-transition:.2s ease-in-out;
		}
	.button:visited, .small-button:visited {
		color:#fff;
		}
	
	.small-button {
		background: #339520;
		display: inline-block;
		margin: 15px 0 0 0;
		font-family:'DroidSansRegular', san-serif;
		font-weight: normal;
		font-style: normal;
		color:#fff;
		font-size:1.2rem;
		padding:7px;
		text-decoration:none;
		border-radius:10px;
		-webkit-border-radius:10px;
		-moz-border-radius:20px;
		-webkit-box-shadow:0px 1px 10px #666666;
		-moz-box-shadow:0px 1px 10px #666666;
		text-shadow:1px 1px 3px #666666;
		border:dotted #9ada98 2px;
		background:-webkit-gradient(linear,0 0,0 100%,from(#69bf67),to(#368c34));
		background:-moz-linear-gradient(top,#42cf29,#308c1e);
		width:30%;
		text-align:center;
		}
	.smaller {width:20%;}
	form {
		width:100%;
		}
	form input {
		width:90%;
		margin-left:0;
		border-radius:10px;
		-webkit-border-radius:10px;
		-moz-border-radius:20px;
		border:dotted #9ada98 2px;
		font-family:'DroidSansRegular', san-serif;
		font-weight: normal;
		font-style: normal;
		font-size:1.0rem;
		padding:7px;
		}
	form select {
		width:90%;
		margin-left:0;
		border-radius:10px;
		-webkit-border-radius:10px;
		-moz-border-radius:20px;
		border:dotted #9ada98 2px;
		font-family:'DroidSansRegular', san-serif;
		font-weight: normal;
		font-style: normal;
		font-size:1.0rem;
		padding:7px;
		background:-webkit-gradient(linear,0 0,0 100%,from(#69bf67),to(#368c34));
		background:-moz-linear-gradient(top,#42cf29,#308c1e);
		}
	form textarea {
		width:90%;
		margin-left:0;
		border-radius:10px;
		-webkit-border-radius:10px;
		-moz-border-radius:20px;
		border:dotted #9ada98 2px;
		font-family:'DroidSansRegular', san-serif;
		font-weight: normal;
		font-style: normal;
		font-size:1.0rem;
		padding:7px;
		height:100px;
		}
	td form textarea {
		width:90%; 
		margin-right:5%;
		border-radius:10px;
		-webkit-border-radius:10px;
		-moz-border-radius:20px;
		border:dotted #9ada98 2px;
		font-family:'DroidSansRegular', san-serif;
		font-weight: normal;
		font-style: normal;
		font-size:0.8rem;
		padding:7px;
		height:200px;
		}
	.captcha {
		margin-top:20px;
		margin-left:0;
		}
	.recaptchatable .recaptcha_image_cell, #recaptcha_table {
    	background-color:#fff !important; // reCAPTCHA widget background color
  }
  
  #recaptcha_table {
    	border-color: #CCCCCC !important; // reCAPTCHA widget border color
  
  }
  
  #recaptcha_response_field {
    	border-radius:10px !important;
		-webkit-border-radius:10px !important;
		-moz-border-radius:20px !important;
		border:dotted #9ada98 2px !important; // Text input field border color
    	background-color: none !important; //Text input field background color
  }	
	.text { 
		margin: 20px 5% 0 0;
		}
	fieldset [type=radio] {
		display:inline-block;
		width:5%;
		vertical-align:middle;
		text-align:left;
		}
	fieldset [type=checkbox] {
		display:inline-block;
		width:5%;
		vertical-align:middle;
		text-align:left;
		}
	.alert {
		color:#D82323;
		}
	
	.group {
		width:100%;
		}
	.section label, .section img, .section p {
		float:left;
		vertical-align:top;
		border-top:1px solid #ccc;
		padding-top:5px;
		}
	div.section label{
		width:5%;
		margin:0 0 0 1%;
		border-radius:10px;
		-webkit-border-radius:10px;
		-moz-border-radius:20px;
		border:dotted #9ada98 2px;
		background:#fff;
		padding-bottom:5px;
		}
	div.section img {
		width:7%;
		padding:5px 2% 0 2%;
		}
	div.section p {
		width:76%;
		margin-top:0;
		font-size:0.8rem;
		}
	.number {
		font-family:'ExoBold', san-serif;
		font-weight: normal;
		font-style: normal;
		color:#42CC29;
		font-size:1.8rem;
		text-shadow:0 -1px 0 rgba(0,0,0,0.7),0 1px 0 rgba(255,255,255,1);
		padding-right:10px;
		}

	.advertise { 
		margin: 260px 0 0 0;
		}    
	.network {
		float: left;
		width: 49%;
		}
	.network ul { 
		margin: 5px 0 0 0;
		list-style: none;
		font-family: 'DroidSansRegular', san-serif;
		font-weight: normal;
		font-style: normal;
		padding-bottom:5px;
		}
	.network ul li img {
		vertical-align: middle;
		}
	.network ul li {
		float: left;
		width: 48%;
		line-height: 200%;
		}
	.network a {
		text-decoration:none;
		}
	.network a:hover, .footer a:hover {
		text-decoration:underline;
		}
	.advertise a, .advertise a:hover, .advertise a:visited {
		text-decoration:none;
		}
	
	.devshed, .devshed a, .devshed a:hover, .devshed a:visited {
		
		}
	.asp, .asp a, .asp a:hover, .asp a:visited {
		
		}
	.scripts, .scripts a, scripts a:hover, .scripts a:visited {
		
		}
	.codewalkers, .codewalkers a, .codewalkers a:hover, .codewalkers a:visited {
		
		}
	.dev-articles, .dev-articles a, .dev-articles a:hover, .dev-articles a:visited {
		
		}
	.webhosters, .webhosters a, .webhosters a:hover, .webhosters a:visited {
		
		}
	.dev-hardware, .dev-hardware a, .dev-hardware a:hover, .dev-hardware a:visited {
		
		}
	.dev-mechanic, .dev-mechanic a, .dev-mechanic a:hover, .dev-mechanic a:visited {
		
		}
	.seo-chat, .seo-chat a, .seo-chat a:hover, .seo-chat a:visited {
		
		}
	.tutorialized, .tutorialized a, .tutorialized a:hover, .tutorialized a:visited {
		
		}
	.webmasterworld, .webmasterworld a, .webmasterworld a:hover, .webmasterworld a:visited {
		
		}
	.cre8asiteforums, .cre8asiteforums a, .cre8asiteforums a:hover; .cre8asiteforums a:viisted {
	
	}	
	.network-list {
		list-style-type:none;
		line-height:2.4rem;
		}
	.network-list a {
		text-decoration:none;
		}
	.network-list span a, .network-list span a:link, .network-list span a:hover, .network-list span a:visited {
		color:#555;
		text-decoration:none;
		padding-left:10px;
		font-size:0.9rem;
		}
	.tool-list {
		width:49%;
		font-size:0.9rem;
		float:left;
		}
	.tool-list ul { 
		margin: 5px 0 0 -40px;
		list-style: none;
		}
	.tool-list ul li {
		padding:0 20px 15px 0;
		}
	.tool-list a {
		text-decoration:none;
		}
	.tool-list a:hover {
		text-decoration:underline;
		}
	.tool-text {
		font-size:0.9rem;	
		}
		
	.intro, .ads {
		margin: 40px 5% 0 0;
		}
	.ads { 
		text-align: center;
		}
	.ads img { 
		padding:1% 1%;
		float: left;
		}

	
	.forum-threads h2 {
		margin: 5px 61% 0 -93%;
		padding:7px 5% 7px 100%;
		}
	.rss-feed {
		width: 32%;
		float: left;
		margin: 20px 0;
		}
	.rss-feed span {
		color:#6f6f6f;
		font-family: 'DroidSansRegular', san-serif;
		font-weight: normal;
		font-style: normal;
		}
	.rss-feed a {
		text-decoration: none;
		}
	.rss-feed h3 { 
		font: normal 1rem 'DroidSansRegular', sans-serif;
		border: 1px solid #ccc;
		border-width: 0 0 2px 2px;
		padding: 7px 3%;
		margin: 0 3%;
		}
	.rss-feed h3 span { 
		background: rgba(204,204,204,.25);
		border: 1px solid rgba(172,171,169,.25);
		padding: 7px 2.5%;
		border-radius:4px;
		-webkit-border-radius:4px;
		-moz-border-radius:4px;
		margin: 0 0 0 7px;
		}
	.rss-feed ul {
		margin: 0 3%;
		padding: 0 3%;
		list-style: none;
		}
	.rss-feed ul li {
		padding: 10px 0;
		}
	.rss-feed ul li span {
		display: block;
		font-size:small;
		}

/* footer background added at specific sizes so low bandwidth devices don't have to load both */
	.footer { 
		background: #4E4E4E url('../images/footer-background.png') repeat;
		width:100%;
		height:450px;
		margin: 0 0 -30px 0;
		}
	.footer a {
		text-decoration:none;
		}
	.footer ul {
		list-style-type:none;
		margin:0 0 0 -5%;
		}
	.footer .network-column ul li {
		float: left;
		width: 50%;
		}
	.footer ul li span {
		}
	.footer ul li img {
		vertical-align: middle;
		}
	.footer h3 {
		color:#fff;
		font-family:'ExoBold', san-serif;
		font-weight: normal;
		font-style: normal;
		margin: 35px 0 0 5%;
		}
	.footer .network-column {
		text-align:left;
		width:37%;
		float:left; 
		font-family: 'DroidSansRegular', san-serif;
		font-weight: normal;
		font-style: normal;
		}
	.footer .nav-column {
		text-align:right;
		width:18%;
		float:left;
		font-family: 'DroidSansRegular', san-serif;
		font-weight: normal;
		font-style: normal;
		}
	.footer .twitter-column {
		text-align:left;
		width:35%;
		float:left;
		color:#fff;
		margin:0 0 0 0;
		}
	.twitter-feed #tweets {height:220px;overflow:hidden;}	
	.twitter-feed #tweets p img {display:none;}	
	.twitter-feed #tweets p {padding:0 0 0 20px;font-size:0.9rem; margin:5px 0 0 0;}
	.twitter-column ul {
		height:240px;
		}
	.twitter-column #tweets h4 {
		margin:34px 0 0 15px;
		}
	.footer .twitter-column #tweets a, .footer .twitter-column #tweets a:hover {
		color:#27aaf4;
		}
	.footer .nav-column ul {
		margin:70px 30% 0 0;
		line-height:160%;
		}
	.footer .nav-column, .footer .nav-column a, .footer .nav-column a:hover  {
		color:#fff;
		} 


	ul.social-bottom {
		margin: 0; 
		list-style: none;
		font-family: 'DroidSansRegular', san-serif;
		font-weight: normal;
		font-style: normal;
		padding:2px 6px 4px 6px;
		float:right;
		text-align:center;
		}
	.footer .nav-column ul.social-bottom {margin: 90px 30% 0 0;}
	ul.social-bottom li {
		display: inline;
		float:right;
		padding-right:5px;
		}
		

	p.copyright {
		float:left;
		color:#999;
		text-align:center;
		width:100%;
		font-size:.8rem;
		margin:35px 0 0 0;
		}
	p.copyright a, p.copyright a:visited {
		color:#999;
		text-decoration:underline;
		}
	p.copyright a:hover {
		color:#777;
		text-decoration:none;
		}
	
/* hides jump link with down arrow, visible only on smallest viewport */	
	.down { 
		visibility:hidden;
		}
	
/* past-publications selection calendar */	
	.archives {
		width:100%;
		}
	.archives ul {
		list-style-type:none;
		float:left;
		font-size:0.8rem;
		text-transform:uppercase;
		text-align:center;
		line-height:1.4rem;
		}	
	.archives a {
		text-transform:none;
		text-align:left;
		}
	
	ul.inline {
		margin-left:-30px;
		}
	ul.inline li {
		display:inline;
		list-style-type:none;
		padding-left:20px;
		}
	
	.forums ul li, .articles ul li {
		font-size: 14px;
		margin-left:-25px;
		padding-bottom:5px;
		}
	
	ul.support {
		list-style-type:none;
		margin:-24px 0 0 -34px;
		}
	ul.support li {
		list-style-type:none;
		padding-top:10px;
		}
	
	li.more:before {
		content: " >> ";
		color:#ff6300;
		}
	
	.toggle {
		padding:10px;
		}
	
	input:required:invalid, textarea:required:invalid {
		background:#fff;
		box-shadow:none;
		-moz-box-shadow: none;
		}

	input:focus:invalid {
/* insert your own styles for invalid form input */
		background:#fff url('/images/warning.png') no-repeat 99% 50%;
		box-shadow:none;
		-moz-box-shadow: none;
}

	input:required:valid, input:focus:valid{
/* insert your own styles for invalid form input */
		background:#fff url('/images/smile.png') no-repeat 99% 50%;
		box-shadow:none;
		-moz-box-shadow: none;
}


#like ul li.last .twitter-share-button {width:55px !important;}

/* Like Buttons */
#like {
    -moz-transition: left 0.3s linear 0s;
    height: 218px;
    position: fixed;
    left: 0;
    top: 185px;
	z-index: 1000;
	text-align:center;
}

#like ul {
	list-style: none; background: #ECEADD;
	background:url("../images/bg.png") repeat;  
	margin:0;
	padding-left:5px;
	border-right: 1px solid #9e9d94; 
	border-bottom: 1px solid #908f88; 
	border-top: 1px solid #c4c2b5; 
	-webkit-box-shadow:0 3px 5px rgba(0,0,0,.25);
	-moz-box-shadow: 0 3px 5px rgba(0,0,0,.25);box-shadow:0 3px 5px rgba(0,0,0,.25); 
}

#like ul li.first{padding: 5px 0 3px;}
#like ul li.googleplus{text-align:left; padding: 2px 0 5px 4px;}
#like ul li.last{padding: 0 8px 0 2px;}
#like ul li{padding: 5px 0;} 
#like.hide {left: -71px;}
#carrot{background:url("../images/carrot.png") no-repeat scroll 0 0 transparent;cursor:pointer;display:none;height:99px;right:-20px;position:absolute; top:8px;width:20px;}

#like #carrot {display: block;}
#like.hide #carrot {display: block;}
#like .twitter-share-button, #like .fb-like {margin-bottom: 8px;}



    /* 2. 6 Column Grid 340px - 779px 
    ----------------------------------------------------------------------------- 
    
    Span 1:    15.0%
    Span 2:    32.0%
    Span 3:    49.0%
    Span 4:    66.0%
    Span 5:    83.0%
    Span 6:    100%
    
    ----------------------------------------------------------------------------- */



/* Extra media querie size because layout required it */

@media screen and (max-width: 519px) {

	.col {
		margin-left:2%;
		padding:0 0.5%;
		}
	.row .col:first-child {
		margin-left:0;
		}
	.span_1 {
		width:200%;
		}
	.span_2, .header h1 {
		width:60.0%;
			float: left;
			text-align: center;
			}
	.span_3 { 
		width:100%;
		float:none;
		}
	.header {
		height:180px;
		}
	.header h1 img {
		margin: -8px 0 -8px 3%;
		}
	.shed-container {
		width:34.0%;
		}
	.shed-container img {
		width:85%;
		margin-top:30px;
		}
	.action-container {
		width:64.0%;
		float: left;
		}
	.call {
		background: #fff;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		height: auto;
		overflow: visible;
		float: left;
		width: 100%;
		}
	.call h2 {
		padding: 15px 5%;
		margin: 0;
		}
	h2.action { 
		font-size: 1.5rem;
		letter-spacing: -1px;
		}
	.total {
		background: #fff;
		color: #1e6b85;
		font-family: 'DroidSansRegular', san-serif;
		font-weight: normal;
		font-style: normal;
		font-size:.9rem;
		width:100%;
		padding:3px;
		text-align:center;
		float:right;
		clear:both;
		margin:13px 0 0 0;
		border: 1px solid #ccc;
		}
	.top-icons {
		float:right;
		text-align:right;
		margin-right:30px;
		width:100%;
		}
	.pocket {
		width:100%;
		float:none;
		clear:left;
		height:220px;
		margin-left:0;
		}
	/*.pocket .small-button {
		width:35%;
		float:right;
		margin-left:5%;
		}*/
	.pocket .small-button {
		width:80%;
		float:left;
		clear:all;
		margin-left:20px;
		}
	.pocket #l-twitter-follow {
		float:none;
		width:90%;
		text-align:center;
		margin-left:20px;
		margin-right:20px;
		padding-top:10px;
		}	
	.pocket #l-twitter-follow p {
		font: normal 1.2rem 'DroidSansBold', sans-serif;
		color:#666;
		margin-right:24px;
		}
	.pocket #l-facebook-follow {
		float:none;
		width:90%;
		text-align:center;
		}	
	.pocket #l-facebook-follow p {
		font: normal 1.2rem 'DroidSansBold', sans-serif;
		color:#666;
		margin-bottom:5px;
		margin-right:20px;
		}
	.pop-threads { 
		width:100%; 
		}
	.pop-threads ul { 
		width:80%; 
		float:none; 
		margin-right:20px; 
		}
	
	.seven-lines {height:690px;}
	.two-lines {height:280px;}
	.five-lines {height:480px;}
	.four-lines {height:420px;}	
	.span_6 h4 img {margin:10px 0 0 25px;display:block;max-width:90%;}
		
	.network { 
		width:100%;
		}
	.network h2 {
		margin: 15px 0 0 0;
		padding:7px 0 7px 35px;
		font-size: 1.7rem;
		}
	.forum-threads h2 {
		margin: 15px 0 0 0;
		padding:7px 5% 7px 35px;
		font-size: 1.7rem;
		}
	.button {
		padding:10px;
		}
	.advertise {
		margin: 160px 0 0 0;
		}
	.rss-feed {
		width: 100%;
		float: none;
		margin: 20px 0;
		}
	.ads {
		display:block;
		margin-left:0;
		}
	.ads img {
		float:none;
		margin:1% 0;
		}
	ul.nav {
		margin: 0 10px 0 0;
		padding: 5px 0 5px 10px;
		list-style: none;
		font-family: 'DroidSansRegular', san-serif;
		font-weight: normal;
		font-style: normal;
		clear:left;
		float:none;
		text-align:right
		}
	ul.nav li a {
		padding:2% 3%;
		display:inline-block;
		}
	ul.social-top, ul.nav img {
		vertical-align:center;
		margin-top: -8px;
		}
	ul.social-top {
		width:100%;
		float:right;
		margin: -20px 0 -20px 0;
		}
	.social-top {
		width:100%;
		}

	.span_5 {
		width:83.0%;
		}
	.span_4 .header ul.nav, ul.social-top {
		width:66.0%;
		float: left;
		}
	.span_6 {
		margin-left:0;
		width:100%;
		}

 /* specific footer background and size for smaller displays */         	
	.footer { 
		background: #4E4E4E url('../images/footer-background-2.png') repeat;
		width:100%;
		height:650px;
		margin: 0 0 -30px 0;
		}
	.footer .network-column {
		width:70%;
		float:left;
		}
	.footer .nav-column {
		width:30%;
		float:left;
		margin:0 0 0 0;
		padding:0;
		}
	.footer .nav-column ul {
		line-height:120%;
		margin:40px 0 0 0;
		}
	.footer .twitter-column {
		width:100%;
		float:none;
		clear:both;
		}
	.twitter-feed {height:210px;overflow:hidden;}	
	.twitter-feed p img {display:none;}	
	.twitter-feed p {padding-left:20px;font-size:1.0rem;}
	.twitter-column h4 {
		margin:34px 0 0 15px;
		}
	ul.social-bottom {
		padding:2px;
		float:right;
		}
	ul.social-bottom li {
		display: inline;
		}
	p.copyright {
		text-align:center;
		width:95%;
		}

/* displays jump link with down arrow on smallest viewport */
	.down {
		visibility:visible;
		}
	.down:after {
		content: '';
		border-color: #1e6b85 transparent;
		border-style: solid;
		border-width: 9px 6px 0px 6px;
		height: 0px;
		width: 0px;
		position:relative;
		top:12px;
		left:5px;
		}
	
	.captcha {
		margin-top:20px;
		margin-right:10%;
		}
	.text, .intro {
		margin: 20px 5% 0 5%;
		width:90%;
		}
	.small-button {
		width:50%;
		margin-left:5%;
		}
	.span_3 h4, form input, form select, form textarea, .captcha {
		margin-left:5%;
		}
	
	
	.tool-list {
		width:90%;
		font-size:0.9rem;
		float:none;
		}
	.tool-list ul { 
		margin: 5px 0 0 0;
		list-style: none;
		}
	.tool-list ul li {
		padding:0 20px 15px 0;
		}
	.tool-list a {
		text-decoration:none;
		}
	.tool-list a:hover {
		text-decoration:underline;
		}
	.tool-text {
		font-size:0.9rem;
		width:90%;
		margin-left:40px;	
		}

	label [type=checkbox] {
		display:block;
		width:5%;
		vertical-align:middle;
		text-align:left;
		}
	.twitter-feed #tweets {height:190px;overflow:hidden;}
	.twitter-column h4 {
    margin: 0 0 0 15px;
	}
	.twitter-feed #tweets p {
    padding: 0 0 0 20px;
    font-size: 0.7rem;
    margin: 5px 0 0 0;
	}

	.footer .nav-column ul.social-bottom {
    margin: 70px 0 20px 0;
	}
	p.copyright {
    font-size: .7rem;
    margin: 25px 0 0 0;
	}
	.footer .nav-column ul {
    line-height: 120%;
    margin: 40px 0 0 0;
	padding: 0 0 0 10px;
	}
	.footer ul {
    list-style-type: none;
    margin: 0 0 0 0;
    padding: 0 0 0 10px;
	}
	ul.nav {
    padding: 5px 0 5px 10px;
    text-align: left;
	}



}


/* Extra media querie size because layout required it */  

    @media screen and (min-width: 520px) and (max-width: 779px) {

	.col {
		margin-left:2%;
		padding:0 0.5%;
		}
	.row .col:first-child {
		margin-left:0;
		}
	.span_1 {
		width:100%;
		}
	.span_2, .header h1 {
		width:50%;
		float: left;
		text-align: left;
		margin-left:5%;
		}
	.span_3 {
		width:49.0%;
		float: right;
		}
	.header {
		height:150px;
		}
	.shed-container {
		width:49.0%;
		}
	.shed-container img {
		width:85%;
		}
	.action-container {
		width:49.0%;
		float: left;
		}
	.call {
		background: #fff;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		height: auto;
		overflow: visible;
		float: left;
		width: 100%;
		}
	.call h2 {
		padding: 15px 5%;
		margin: 0;
		}
	h2.action { 
		font-size: 1.8rem;
		}
	.total {
		background: #fff;
		color: #1e6b85;
		font-family: 'DroidSansRegular', san-serif;
		font-weight: normal;
		font-style: normal;
		font-size:.9rem;
		width:50%;
		padding:3px;
		text-align:center;
		float:right;
		margin:13px 0 0 0;
		border: 1px solid #ccc;
		}
	.top-icons {
		float:right;
		width:120px;
		
		}
	.pocket {
		width:100%;
		float:none;
		clear:left;
		height:240px;
		}
	.pocket .small-button {
		width:90%;
		float:left;
		clear:all;
		margin-left:20px;
		}
	.pop-threads { 
		width:100%; 
		}
	.pop-threads ul { 
		width:90%; 
		float:none; 
		margin-right:20px; 
		}
	
	.seven-lines {height:690px;}
	.two-lines {height:280px;}
	.five-lines {height:480px;}
	.four-lines {height:420px;}	
	.span_6 h4 img {margin:10px 0 0 25px;display:block;}	
			
	.network {
		float: left;
		width: 49%;
		}
	.network h2 {
		margin: 35px 0 0 0;
		padding:7px 0 7px 35px;
		font-size: 1.7rem;
		}
	.network ul { 
		margin: 5px 0 0 0;
		}	
	.forum-threads h2 {
		margin: 35px 55% 0 0;
		padding:7px 5% 7px 35px;
		font-size: 1.7rem;
		}
	.button {
		padding:10px;
		}
	.advertise { 
		margin: 200px 0 0 0;
		}
	.rss-feed {
		width: 100%;
		float: none;
		margin: 20px 0;
		}
	.rss-feed h3 span {
		display:block;
		}
	.ads { 
		display:block;
		margin-left:-100%;
		}
	.ads img {
		float:none;
		}
	.span_4 .header ul.nav, ul.social-top {
		width:100%%;
		float: left;
		}
	ul.nav { 
		margin: 0;
		padding: 10px 0 40px 3%;
		list-style: none;
		font-family: 'DroidSansRegular', san-serif;
		font-weight: normal;
		font-style: normal;
		clear:left;
		float:none; text-align:right;
		}
	ul.nav li a {
		padding:1%;
		}
	ul.social-top, ul.nav img {
		vertical-align:center;
		margin-top: -8px;
		text-align:right;
		}
	ul.social-top {
		width:60%;
		float:right;
		margin: -20px 10px -20px 0;
		}
	.header h1 img {
		margin-left:0;
		}
	.span_5 {
		width:83.0%;
		}
	.span_6 {
		margin-left:0;
		width:100%;
		}
	
/* specific footer background and size for smaller displays */         	
	.footer { 
		background: #4E4E4E url('../images/footer-background-2.png') repeat;
		width:100%;
		height:650px;
		margin: 0 0 -30px 0;
		}
	.footer .network-column {
		width:70%;
		float:left;
		}
	.footer .nav-column {
		width:30%;
		float:left;
		margin:0 0 0 0;
		padding:0;
		}
	.footer .nav-column ul {
		line-height:120%;
		margin:40px 0 0 0;
		}
	.footer .twitter-column {
		width:90%; 
		clear:both;
		}
	.twitter-feed {height:140px;overflow:hidden;}	
	.twitter-feed p img {display:none;}	
	.twitter-feed p {margin-left:10px;padding-left:20px;font-size:.8rem;}
	.twitter-column h4 {
		margin:28px 0 0 15px;
		}
	ul.social-bottom {
		padding:2px;
		float:right;
		}
	ul.social-bottom li {
		display: inline;
		}
	.footer .nav-column ul.social-bottom {
    	margin: 90px 0 0 0;
	}
		p.copyright {
		text-align:center;
		width:100%;
		}
	
	.captcha {
		margin-top:20px;
		margin-right:10px;
		}
	.text {
		margin: 20px 5% 0 1%;
		}
	.small-button {
		width:50%;
		}

	}


    /* 3. 6 Column Grid 780px - 1139px
    ----------------------------------------------------------------------------- 
    
    Span 1:    15.0%
    Span 2:    32.0%
    Span 3:    49.0%
    Span 4:    66.0%
    Span 5:    83.0%
    Span 6:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 780px) and (max-width: 1139px) {

	.call {
		background: #fff;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		min-height: 245px;
		height:280px;
		overflow: visible;
		float: left; width: 100%;
		}
	.subpage .call {
		border-top: 1px solid #ccc;
		border-bottom: none;
		height: 1px;
		min-height: 1px;
		overflow: visible;
		float: left;
		width: 100%;
		background:none;
		}
	.call h2 {
		margin: 35px 0 0 0;
		font-size: 2.0rem;
		background:none;
		}
	.call img { 
		vertical-align: middle;
		margin-top: -40px;
		padding: 0 10%;
		}
	ul.nav { 
		margin: 0;
		padding: 40px 0 40px 0;
		list-style: none;
		font-family: 'DroidSansRegular', san-serif;
		font-weight: normal;
		font-style: normal;
		text-align:right;
		}
	ul.social-top {
		margin: 0;
		padding: 15px 0 15px 35%;
		list-style: none;
		}
	ul.nav li a {
		display: inline;
		padding:40px 11px 20px 11px;
		}
	ul.social-top, ul.nav img {
		vertical-align:center;
		margin-top: -8px;
		}
	ul.social-top {
		width:66.0%;
		float:right;
		margin: 0 10px 0 0;
		}
	.span_1 {
		width:15.0%;
		float: right;
		}
	.total {
		background: #fff;
		color: #1e6b85;
		font-family: 'DroidSansRegular', san-serif;
		font-weight: normal;
		font-style: normal;
		font-size:.9rem;
		width:38%;
		padding:3px;
		text-align:center;
		float:right;
		margin:13px 0 0 15%;
		border: 1px solid #ccc;
		}
	.top-icons {
		float:right;
		width:120px;
		}
	.pocket {
		height:220px;
		}
	.pocket .small-button {
		width:35%;
		float:right;
		margin-left:3%;
		margin-right:3%;
		}				
	.pop-threads { 
		width:100%; 
		}
	.pop-threads ul { 
		width:25%; 
		float:left; 
		margin-right:20px; 
		}
	
	.span_6 h4 img {margin:10px 0 0 5px;display:block;}
		
	ul.social-bottom {
		padding:2px 4px;
		float:right;
		}
	ul.social-bottom li {
		display: inline;
		}
	p.copyright {
		float:left;
		text-align:center;
		width:100%;
		font-size:.8rem;
		margin:35px 0 0 0;
		}
	
 /* Adds icons on larger displays, not added on low bandwidth devices */
	.devshed:before {
		content: url('../images/dev-shed-icon.png');
		padding: 0 5px 0 0;
		vertical-align:text-top;
		}
	.asp:before {
		content: url('../images/asp-free-icon.png');
		padding: 0 5px 0 0;
		vertical-align:text-top;
		}
	.scripts:before {
		content: url('../images/scripts-icon.png');
		padding: 0 5px 0 0;
		vertical-align:text-top;
		}
	.codewalkers:before {
		content: url('../images/codewalkers-icon.png');
		padding: 0 5px 0 0;
		vertical-align:text-top;
		}
	.dev-articles:before {
		content: url('../images/dev-articles-icon.png');
		padding: 0 5px 0 0;
		vertical-align:text-top;
		}
	.webhosters:before {
		content: url('../images/web-hosters-icon.png');
		padding: 0 5px 0 0;
		vertical-align:text-top;
		}
	.dev-hardware:before {
		content: url('../images/dev-hardware-icon.png');
		padding: 0 5px 0 0;
		vertical-align:text-top;
		}
	.dev-mechanic:before {
		content: url('../images/dev-mechanic-icon.png');
		padding: 0 5px 0 0;
		vertical-align:text-top;
		}
	.seo-chat:before {
		content: url('../images/seo-chat-icon.png');
		padding: 0 5px 0 0;
		vertical-align:text-top;
		}
	.tutorialized:before {
		content: url('../images/tutorialized-icon.png');
		padding: 0 5px 0 0;
		vertical-align:text-top;
		}
	.webmasterworld:before {
		content: url('../images/webmaster-world-icon.png');
		padding: 0 5px 0 0;
		vertical-align:text-top;
		}
	.cre8asiteforums:before {
		content: url('../images/cre8asite-icon.png');
		padding: 0 5px 0 0;
		vertical-align:text-top;
		}
				

/* specific footer background and size for larger displays */         	
	.footer {
		background: #4E4E4E url('../images/footer-background.png') repeat;
		width:100%;
		height:450px;
		margin: 0 0 -30px 0;
		}
	.footer .twitter-column {
		text-align:left;
		width:35%;
		float:left;
		color:#fff;
		margin:0 0 0 0;
		}
	.twitter-feed {height:220px;overflow:hidden;}	
	.twitter-feed p img {display:none;}	
	.twitter-feed p {padding-left:20px;font-size:1.0rem;}
	.twitter-column ul {
		height:240px;
		}
	.twitter-column h4 {
		margin:34px 0 0 15px;
		}

	.captcha {
		margin-top:20px;
		margin-right:10px;
		}
	.text {
		margin: 20px 5% 0 1%;
		}
	.small-button {
		width:50%;
		}
 
	}

    /* 4. 6 Column Grid 1140px - Infinity 
    ----------------------------------------------------------------------------- 
    
    Span 1:    15.0%
    Span 2:    32.0%
    Span 3:    49.0%
    Span 4:    66.0%
    Span 5:    83.0%
    Span 6:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 1140px) {
        
	.col {
		margin-left:2%;
		padding:0 0.5%;
		}
	.row .col:first-child {
		margin-left:0;
		}
	.wrap {
		width: 1140px;
		margin: 0 auto;
		}
	.span_1 {
		width:15.0%;
		float: right;
		}
	.span_2, .header h1{
		width:32.0%;
		float: left;
		text-align: center;
		}
	.span_3 {
		width: 49%;
		float: right;
		}
	.action-container {
		width:49.0%;
		float: left;
		}
	.shed-container {
		width:49.0%;
		float: left;
		}
	.span_4 .header ul.nav, ul.social-top {
		width:66.0%;
		float: left;
		}
	.call {
		background: #fff;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		height: 278px;
		overflow: visible;
		float: left;
		width: 100%;
		}
	.call h2 {
		margin: 35px 0 0 0;
		}
	.call img {
		vertical-align: middle;
		margin-top: -40px;
		padding: 0 10% ;
		}
	ul.nav, ul.social-top {
		margin: 0;
		padding: 40px 0 40px 45%;
		list-style: none;
		font-family: 'DroidSansRegular', san-serif;
		font-weight: normal;
		font-style: normal;
		}
	ul.social-top {
		margin: 0;
		padding: 15px 0 15px 35%;
		list-style: none;
		}
	ul.nav li a {
		display: inline;
		padding:40px 3% 20px 3%;
		}
	ul.social-top, ul.nav img {
		vertical-align:center;
		margin-top: -8px;
		}
	ul.social-top {
		width:66.0%;
		float:right; margin: 0 0 0 0;
		}
	.span_5 {
		width:83.0%;
		}
	.span_6 {
		margin-left:0;
		width:100%;
		}
	.span_6 h4 img {margin:10px 0 0 5px;display:block;}	
	
    /* Adds icons on larger displays, not added on low bandwidth devices */
	.devshed:before {
		content: url('../images/dev-shed-icon.png');
		padding: 0 5px 0 0;
		vertical-align:text-top;
		}
	.asp:before {
		content: url('../images/asp-free-icon.png');
		padding: 0 5px 0 0;
		vertical-align:text-top;
		}
	.scripts:before {
		content: url('../images/scripts-icon.png');
		padding: 0 5px 0 0;
		vertical-align:text-top;
		}
	.codewalkers:before {
		content: url('../images/codewalkers-icon.png');
		padding: 0 5px 0 0;
		vertical-align:text-top;
		}
	.dev-articles:before {
		content: url('../images/dev-articles-icon.png');
		padding: 0 5px 0 0;
		vertical-align:text-top;
		}
	.webhosters:before {
		content: url('../images/web-hosters-icon.png');
		padding: 0 5px 0 0;
		vertical-align:text-top;
		}
	.dev-hardware:before {
		content: url('../images/dev-hardware-icon.png');
		padding: 0 5px 0 0;
		vertical-align:text-top;
		}
	.dev-mechanic:before {
		content: url('../images/dev-mechanic-icon.png');
		padding: 0 5px 0 0;
		vertical-align:text-top;
		}
	.seo-chat:before {
		content: url('../images/seo-chat-icon.png');
		padding: 0 5px 0 0;
		vertical-align:text-top;
		}
	.tutorialized:before {
		content: url('../images/tutorialized-icon.png');
		padding: 0 5px 0 0;
		vertical-align:text-top;
		}
	.webmasterworld:before {
		content: url('../images/webmaster-world-icon.png');
		padding: 0 5px 0 0;
		vertical-align:text-top;
		}
	.cre8asiteforums:before {
		content: url('../images/cre8asite-icon.png');
		padding: 0 5px 0 0;
		vertical-align:text-top;
		}		
	
    /* specific footer background and size for larger displays */
	.footer {
		background: #4E4E4E url('../images/footer-background.png') repeat;
		width:100%;
		height:450px;
		margin: 0 0 -30px 0;
		}

	}