/* http://meyerweb.com/eric/tools/css/reset/     
v2.0 | 20110126    License: none (public domain) */  

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video 
{ margin: 0; padding: 0; border: 0; font-size: 100%; 	font: inherit; 	vertical-align: baseline; } 

/* HTML5 display-role reset for older browsers */ 

article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section {display: block;}
 
body {line-height: 1; 
font-family: 'Arimo', sans-serif;}

ol, ul {list-style: none;} 

blockquote, q {quotes: none; } 

blockquote:before, blockquote:after, q:before, q:after 
{content: ''; 	content: none; }

@media all and (min-width: 320px) and (max-width: 600px) {
	body{
	background-color: #3C6;
	width: 100%;
	font-family: 'Arimo', sans-serif;
	}
	.banner img, .banner2 img, .bannerR img 
	{width: 30%;
	padding-bottom: 2%;}
	
	nav {display: none;}
#indexContent .largeSkills {display:none;}
#indexContent .smSkills {margin-bottom: 20%}
#webPort .jcarousel-skin-tango {display: none;}
#indexP, #printPort, #resume  {width: 98%;
		 background-image: url('homeBkg.png');
		 margin-left: 2%;
		 overflow: auto;}

#smWebThumbs{float: left;
			margin-left: 10%;
			 margin-right: 2%;}
#smWebThumbs img {padding: 0 7% 7% 0;
				  width: 130px;
				  height: 90px;
				  float: left;}
#featuredSite img  {width: 230px;
					padding-left: 15%;}
#featuredSite {width:100%;}
#featuredSite ul {width: 200px;}
#featuredSite ul img {width: 17%;
					float: left;
					}
body #featuredSite p {
					font-family: 'Arimo', sans-serif 18px/20px;
						width: 230px;}
#featuredSite li img {margin-left: -2%;}
		 
.banner {postion: fixed;
		z-index: 1;
		margin-left: -10px;
		width: 150px;
		height: 66px;
		 }
.banner2 {postion: fixed;
		z-index: 1;
		margin-left: -10px; 
		float: left;
		width: 150px;
		height: 66px;
		clear:both;
		}
.bannerR {postion: fixed;
		z-index: 1;
		margin-right: -10px; 
		float: right;
		width: 150px;
		height: 66px;
		padding-bottom: 5%;
	
		}
#indexContent p {text-align: center;}
.statement {font: 38px/40px 'Arimo';
				color: #2F8C91;
				padding-bottom: 10px;
    padding-top: 60px;}
.reason {font: 20px/23px 'Arimo';
				color: #2F8C91;}

#indexContent {font: 12px/14px 'Arimo';
				color: #E9E8DF;}
#indexContent img{padding-top: 30px;
				vertical-align: center;
				display: block;
    margin-left: auto;
    margin-right: auto;}

#webPort, #contact {background-image: url('webBkg.png');
		  width: 98%;
		  margin-left: 2%;
		  overflow: auto;
	 }
		  
#mycarousel{width: 40%;}
#mycarousel img {width: 99%;}
#webPort img {margin-right: -15px;}
#webPort nav {padding-top: 60px;
				margin-bottom: -60px;}
#webPort nav li {color:#E9E8DF;}

#webScroll {width: 200px;
			padding-top: 100px;}
#webScroll li {display: inline;
				}
#webScroll ul {display: inline;}
#webScroll img {padding-bottom: 30px;}

#featuredSite {float: left;
				padding-top:20px;
				  width: 98%;
		  		margin-left: 2%;}
#featuredSite p {line-height: 1.5;
				 font: 14px/16px 'Arimo';
				color: #E9E8DF;
				padding-left: 30px;
				padding-bottom: 5px;
			}
#featuredSite h2 {line-height: 1.5;
				 font: 20px/24px 'Arimo';
				color: #E9E8DF;
				padding: 0 0 10px 30px;
				clear: both;}

#featuredSite img {padding-bottom:10px;}

#featuredSite ul {display: inline;
				float:left;
				padding-left: 18%;}
#featuredSite li {display: inline;}
#printPort img {padding-top: 60px;
				}

#printThumbs {display: none;}
#printInfo {display: none;}

#printImages {display: none;}
#mobilePrint {float: left;
clear: both;}
#mobilePrint {width: 100%;}
#printMiniThumbs {display: none;}



#inspirations {background-image: url('greenBkg.png');
		  width: 98%;
			overflow: auto;
		
		  }

#inspirations p {clear: both;
		
		  }
		  
		  
#contactForm input{display:block;
				margin-bottom:3%;
				width: 20%;
				height: 30px;}
#contactForm input[type="submit"] , #contactForm input[type="reset"] 
{margin:10px 5px 0 5px;
width: 14%;
font-size: 100%;
float: left;
background-color: #2F8C91;
color: #fff;
border-radius: 10px;
border-style: none;}

#contactForm label {color: #2F8C91;
    font: 18px/20px 'Helvetica Neue';
    margin-bottom: 1%;}
#contactForm {padding: 4% 2%;}
#contactForm textarea {resize : none;
width: 300px;
height: 200px;}

.extras_table {
  width:30%;
}
.extras_table td, .extras_table th {
  border:none;
}

.extras_table .extras_y-desc {
  padding-right:5px;
  text-align:right;
  width:10%;
}
/* Sets the max width of the result bar */
.extras_result {
  width:100%;
}
/* This will serve as the bar, make it look nice with a background image or colour gradient */
.extras_result p.extras_p {
  width:0; float:left;
  background:#006600;
  background: -moz-linear-gradient(left, #2F8C91, #a3b9a1);
  background: -webkit-gradient(linear, left top, right top, from(#2F8C91), to(#a3b9a1));
  filter: progid:DXImageTransform.Microsoft.Gradient(
    StartColorStr='#2F8C91', EndColorStr='#a3b9a1', GradientType=0);
  text-align:right;
}
/* Position the result data and set default display to none (for the fade in) */
.extras_result span {
  position:relative;
  padding-left:5px;
  left:40px;
  display:none;
}
/* A class to centre text */
.extras_x-desc p.extras_centreIt {
  text-align:center;
}



}

@media all and (min-width: 620px) {
body{font-family: 'Arimo', sans-serif;}
#indexContent .smSkills {display:none;}
#bannerdiv {width: 20%;}
.bannerdivR{width: 20%;
			float:right;}
#indexP nav {width: 90%;}
#wrapper { 
 		  margin:0 auto; 
		}
#indexP, #printPort, #resume {width: 100%;
		 min-height: 600px;
		 background-image: url('homeBkg.png');
		 overflow: auto; }
		 
.banner {postion: fixed;
		z-index: 1;
		margin-left: -10px; }
.banner2 {postion: fixed;
		z-index: 1;
		margin-left: -10px; 
		float: left;
		clear:both;
		}
.bannerR {postion: fixed;
		z-index: 1;
		float: right;
		}
nav ul{display: inline;
		margin-left: 230px;
		}
nav li {display: inline;
		font: 20px/24px 'Arimo';
		padding-right: 58px;
		color: #2F8C91; 
		cursor: pointer;}
#indexContent p {text-align: center;}
.statement {font: 38px/40px 'Arimo';
				color: #2F8C91;
				padding-bottom: 10px;
    padding-top: 60px;}
.reason {font: 20px/23px 'Arimo';
				color: #2F8C91;}

#indexContent {font: 12px/14px 'Arimo';
				color: #E9E8DF;}
#indexContent img{padding-top: 30px;
				vertical-align: center;
				display: block;
    margin-left: auto;
    margin-right: auto;}
#smWebThumbs {display:none;}
#webPort, #contact {background-image: url('webBkg.png');
		  width: 100%;
		 min-height: 600px;
		 overflow: auto;
		  }
#webPort nav {padding-top: 60px;
				margin-bottom: -60px;}
#webPort nav li {color:#E9E8DF;}

#webScroll {width: 20%;
			padding-top: 100px;}
#webScroll li {display: inline;
				}
#webScroll ul {display: inline;}
#webScroll img {padding-bottom: 30px;}

#featuredSite {float: left;
				padding-top:20px;
				width: 44%;}
#featuredSite p, #contact p {line-height: 20%;
				 font: 16px/18px 'Arimo';
				color: #E9E8DF;
				font-weight: bold;
				line-height: 1.5;
				padding-left: 30px;
				padding-bottom: 5px;
			}
#featuredSite h2 {line-height: 1.5;
				 font: 20px/24px 'Arimo';
				color: #E9E8DF;
				padding: 0 0 10px 30px;
				clear: both;
				font-weight: bold;}

#featuredSite img {padding-bottom:10px;}
#featuredSite li img {margin-right: 20px;}
#featuredSite ul {display: inline;
				float:left;
				padding-left: 120px;}
#featuredSite li {display: inline;}
#printPort .jcarousel-skin-tango {display: none;}
#printPort img {margin-top: 10%;
				}

#printThumbs li {display: inline;
				padding-right: 5%;}
#printThumbs ul {display: inline;
			padding-top:2%}
#printThumbs img {margin-bottom: -20px;}
#printThumbs {width: 30%;
padding-left:3%;
			float: left;
			clear: both;}
#printInfo {float: left;
			width: 30%;
			padding-top: 20px;}
#printInfo h2 {font: 22px/26px 'Arimo';
				color: #2F8C91;
				padding-bottom: 10px;}
#printInfo p , #resumeText p{14px/19px 'Arimo';
				color: #2F8C91;
				line-height: 1.8;
				padding-bottom: 5px;}
#printImages {width: 28%;
				float: right;
				padding-right: 2%;}
#printImages img {margin-top: -4%;
					padding-bottom: 6%;}
#printMiniThumbs {clear: both;
					padding-left: 80px;
					}

#printMiniThumbs img {padding-right: 10px;}

#inspirations {background-image: url('greenBkg.png');
		  width: 100%;
		  min-height: 600px;
		  overflow: auto;
		  }
#contactForm input{display:block;
				margin-bottom:3%;
				width: 80%;
				height: 30px;}
#contactMessage {width: 30%;
float: left;
padding: 10% 0 0 3%;}

#contactForm input[type="submit"] , #contactForm input[type="reset"] 
{margin:10px 5px 0 5px;
width: 40%;
font-size: 65%;
float: left;
background-color: #2F8C91;
color: #fff;
border-radius: 10px;
border-style: none;}

#contactForm label {color: #E9E8DF;
    font: 18px/20px 'Helvetica Neue';
    margin-bottom: 1%;}
#contactForm {padding: 9% 2%;
				width: 30%;
				float:right;}
#contactForm textarea {resize : none;
width: 90%;
height: 200px;}

#resumeText{width: 40%;
float: left;
padding-top: 5%;
clear:both;
padding-left: 3%;}

#resumeText img {margin-bottom:-20px;}
#charts {padding-top:5%;
float:left;
padding-left: 10%;
width: 30%;
color: #7f7f7f;
margin-left:-4%;
}
.extras_table {
  width:100%;
  padding-top: 3%;
}

.extras_table td, .extras_table th {
  border:none;
}

.extras_table .extras_y-desc {
  padding-right:5px;
  text-align:right;
 width: 24%;
}
/* Sets the max width of the result bar */
.extras_result {
  width:100%;
}
/* This will serve as the bar, make it look nice with a background image or colour gradient */
.extras_result p.extras_p {
  width:0; float:left;
  background:#006600;
  background: -moz-linear-gradient(left, #2F8C91, #a3b9a1);
  background: -webkit-gradient(linear, left top, right top, from(#2F8C91), to(#a3b9a1));
  filter: progid:DXImageTransform.Microsoft.Gradient(
    StartColorStr='#2F8C91', EndColorStr='#a3b9a1', GradientType=0);
  text-align:right;
}
/* Position the result data and set default display to none (for the fade in) */
.extras_result span {
  position:relative;
  padding-left:5px;
  left:40px;
  display:none;
}
/* A class to centre text */
.extras_x-desc p.extras_centreIt {
  text-align:center;
}


#blank {height:30px;
background: none;
margin-top: -30px;
}

#siteProduct{width:30%;
float:left;
padding-left:2%;
color: #E9E8DF;
    font: 16px/18px 'Arimo';}
#siteProduct h2, .single-column h2{font: 20px/24px bold;
padding: 1% 0 1% 0;
			}
		  
#columns {width:97%;
			padding-left:3%;
			float:left;}
.single-column {width: 30%;
				float: left;
				margin:3% 3% 0 0;
				color: #2F8C91;
    font: 14px/16px 'Arimo';}
#colorComps, #wireframes img{float:left;
padding-top:3%;
    }
.siteScreenShot{width: 100%;}

#featuredSite #link {width:30%;}

#iconButtons li {display: inline;
padding-right: 3%;}
#iconButtons, #contactMessage h3 {padding-bottom: 10%;
padding-left:7%;
color: #09565a;
    font: bold 19px/1.5 'Arimo';}

#contactMessage li {padding-bottom: 5%;}

}