@charset "UTF-8";
/* CSS Document */

body {
	background-color: #2d2e2e;	
	color: #1a1a1a;
}

#header {
	background-color: #000;
	padding: 26px 0 26px 0;
	color: #fff;
	overflow: auto;
}

p {
	margin-bottom: 15px;
	line-height: 20px;
}

h1, h2, h3, h4, h5, h6 {
	 font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
}

h1.logo {
	font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
}

ul.nav {
	list-style-type: none;
	text-align: right;
	padding-top: 0;
	margin-bottom: 0;
	font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
}

ul.nav li {
	display: inline;
	margin: 0;
}

ul.footerNav {
	list-style-type: none;
}

ul.footerNav li {
	display: inline;
	margin: 0 25px 0 0;
}

ul.nav li a:link, ul.nav li a:visited, ul.nav li a:active {
	color: #fff;
	text-decoration: none;
	display: inline-block;
	padding: 15px 20px;
	margin-left: 5px;
	outline: none;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	-o-border-radius: 12px;
	border-radius: 12px;
}

ul.nav li a:hover, ul.nav li a.active {
	color: #fff;
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden; 
	-moz-transition: all 0.3s linear;
	-webkit-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
	background-color: rgba(198, 43, 18, .9);
}

#content {
	padding: 50px 0 45px 0;
	overflow: auto;
	background: url(../images/bg_grayBox.png) top left repeat;
}

#subFooterNav {
	background-color: #1a1a1a;
	padding: 7px 0 5px 0;
	color: #fff;
	overflow: auto;
}

#subFooter {
	background-color: #ecf0f1;
	padding: 35px 0 30px 0;
	color: #333;
	overflow: auto;
}

#footer {
	background: #1a1a1a;
	padding: 35px 0;
	color: #fff;
	font-size: 11px;
	overflow: auto;
}

h1.logo {
	background: url(../images/logoBg.png) 0 0 no-repeat;
	padding: 0;
	font-size: 16px;
	font-weight: normal;
}

.textRight {
	text-align: right;
}

.textRight2 {
	text-align: right;
	margin-right: 20px;
}

.noMargin {
	margin: 0;
}

#subFooterNav a:link, #subFooterNav a:visited, #subFooter a:link, #subFooter a:visited, #footer a:link, #footer a:visited {
	color: #e74c3c;
	text-decoration: none;
	border-bottom: 1px dotted rgba(255, 255, 255, .5); 
}

#content a:link, #content a:visited {
	color: #e74c3c;
	text-decoration: none;
	border-bottom: 1px dotted rgba(51, 51, 51, .3);
}

#subFooterNav a:hover, #subFooter a:hover {
	color: #e74c3c;
	border-bottom: 1px dotted #333;
}

a.footerLinkRed {
	padding: 4px;
	border-bottom: none !important;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-o-border-radius: 8px;
	border-radius: 8px;
}

a.footerLinkRed:hover {
	background-color: rgba(198, 43, 18, .9);
	color: #fff !important;
}

#footer a:hover, #content a:hover {
	color: #e74c3c;
	text-decoration: none;
	border-bottom: 1px dotted #c62b12;
}

#subFooter h4 a:link, #subFooter h4 a:visited, #footer ul.footerNav li a:link, #footer ul.footerNav li a:visited, ul#basicuse li a:link, ul#basicuse li a:visited, #content .portfolioPiece a:link, #content .portfolioPiece a:visited {
	border-bottom: none;
}

#basicuse {
    list-style-type: none;
    margin: 10px 0 0;
    padding: 5px 0 0;
}


#basicuse li:first {
	margin-left: none;
}

#basicuse li {
	float: left;
	margin-left: 5px;
}

#content a:hover {
	text-decoration: none;
}

#blogLink {
	padding-top: 1px;
}

h1.logo a:link, h1.logo a:visited, h1.logo a:hover {
	color: #fff;
	text-decoration: none;
	padding: 11px 0 16px 55px;
	display: block;
	outline: none;
}

a img {
	border: none;
	outline: none;
}

h2.intro {
	padding-top: 5px;
	font-size: 18px;
    line-height: 25px;
	margin-bottom: 10px;
	font-family: "Copse", Geneva, Serif;
	font-weight: normal;
}
#introWrap {
	margin-bottom: 20px;
}

h2.intro .skill1 {
	font-size: 37px;
}

h2.intro .skill2 {
	font-size: 30px;
}

h2.intro .skill3 {
	font-size: 28px;
}

h2.intro .skill4 {
	font-size: 25px;
}

h2.intro .skill5 {
	font-size: 22px;
}

.portfolioPiece {
	margin-bottom: 20px;
}

.portfolioPiece a img {
	border: 1px solid #798073;
}

.first {
	margin-top: 40px;
}

.quote { 
font-size: 18px;
margin: 30px 0;
text-align: center;
}

.smallText {
	font-size: 12px;
}

.portfolioImage {
	margin-bottom: 5px;
}

div.recentWPPosts {
	width: 340px;
	float: left;
	margin-right: 20px;
}
div.recentWPPosts + div.recentWPPosts {
	width: 280px;
}

div.recentWPPosts + div.recentWPPosts + div.recentWPPosts {
	width: 280px;
}

div.recentWPPosts + div.recentWPPosts + div.recentWPPosts {
	margin-right: 0;
}

.lastPost {
	margin-right: 0;
}

a:link, a:visited, a:hover {
	outline: none;
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden; 
	-moz-transition: all 0.1s linear;
	-webkit-transition: all 0.1s linear;
	-o-transition: all 0.1s linear;
	transition: all 0.1s linear;
}

.grid_5 a img, .grid_4 a img, ul#basicuse li a img {
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden; 
	-moz-transition: all 0.3s linear;
	-webkit-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}

.grid_5 a:hover img, .grid_4 a:hover img, ul#basicuse li a:hover img { opacity:.7; filter: alpha(opacity=70;) opacity: .7; } /* needed for IE to handle opacity*/ 

.smIcon { float: left; margin-right: 2px; }

.projectTitle { float: left; margin-right: 6px; }

.portfolioPiece p { overflow: auto; }

/* Legend Styles */

.footerBtm { 
	padding-bottom: 15px; 
	overflow: auto; }

div.legend {
	margin: 0 0 20px 0;
	overflow: auto;
}

.legend h4 { display: block; margin: 0; padding: 0; }

.legend ul {
	list-style-type: none;
	float: left;
	margin: 10px 0 0 0;
	padding: 5px 0 0 0;
}

.legend ul li { display: inline; float: left; margin: 0 10px 10px 0; }

.wdCtg { background: url(../images/w_16x16.png) left 50% no-repeat; padding-left: 20px; }
.pdCtg { background: url(../images/p_16x16.png) left 50% no-repeat; padding-left: 20px; }
.ilCtg { background: url(../images/i_16x16.png) left 50% no-repeat; padding-left: 20px; }
.devCtg { background: url(../images/v_16x16.png) left 50% no-repeat; padding-left: 20px; }
.prdCtg { background: url(../images/d_16x16.png) left 50% no-repeat; padding-left: 20px; }
.plsCtg { background: url(../images/l_16x16.png) left 50% no-repeat; padding-left: 20px; }
.logCtg { background: url(../images/o_16x16.png) left 50% no-repeat; padding-left: 20px; }

/* Tweet! Styling (in footer) */

.tweet ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.tweet ul li {
	margin: 0 0 33px 0;
	padding: 0;
}

.tweet ul li img {
	float: left;
	padding: 3px 5px 15px 0;
}

.indent { margin-left: 30px; }

#content p.socialIcons a { 
	margin-right: 5px; 
	border-bottom: none; 
	display: inline-block;
	width: 32px;
	height: 32px;
	opacity: .5;
	}
	
#content p.socialIcons a.tIcon {
	background: url(../images/twitter_32g.png) top left no-repeat;
}

#content p.socialIcons a.tIcon:hover {
	background: url(../images/twitter_32.png) top left no-repeat;
}

#content p.socialIcons a.fIcon {
	background: url(../images/flickr_32g.png) top left no-repeat;
}

#content p.socialIcons a.fIcon:hover {
	background: url(../images/flickr_32.png) top left no-repeat;
}

#content p.socialIcons a.lIcon {
	background: url(../images/linkedin_32g.png) top left no-repeat;
}

#content p.socialIcons a.lIcon:hover {
	background: url(../images/linkedin_32.png) top left no-repeat;
}

#content p.socialIcons a.dIcon {
	background: url(../images/dribbble_32g.png) top left no-repeat;
}

#content p.socialIcons a.dIcon:hover {
	background: url(../images/dribbble_32.png) top left no-repeat;
}

#content p.socialIcons a.fbIcon {
	background: url(../images/facebook_32g.png) top left no-repeat;
}

#content p.socialIcons a.fbIcon:hover {
	background: url(../images/facebook_32.png) top left no-repeat;
}

#content p.socialIcons a.lfIcon {
	background: url(../images/lastfm_32g.png) top left no-repeat;
}

#content p.socialIcons a.lfIcon:hover {
	background: url(../images/lastfm_32.png) top left no-repeat;
}

#content p.socialIcons a.vIcon {
	background: url(../images/vimeo_32g.png) top left no-repeat;
}

#content p.socialIcons a.vIcon:hover {
	background: url(../images/vimeo_32.png) top left no-repeat;
}
	
#content p.socialIcons a:hover {
	opacity: 1;
}

.pageTexture { 
background: url(../images/bgtexture2.png) top left no-repeat; 
z-index: 1; 
position: absolute; 
top: 97px;
left: -150px;
width: 450px;
height: 450px;
}

.container_16 { 
z-index: 10; 
overflow: auto;
position: relative; 
} 

img { max-width: 100%; }

/* Media Queries */

/* Smartphones (portrait and landscape) ----------- */

@media all 
and (min-width : 320px) 
and (max-width : 480px) {

body{ min-width:100%; }

.container_12,.container_16{ margin-left:auto; margin-right:auto; width:90%; }

.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16 { float: none; }

div.recentWPPosts { float: none; max-width: 480px; margin-right: 0; }

div.recentWPPosts + div.recentWPPosts, div.recentWPPosts + div.recentWPPosts + div.recentWPPosts { display: none; }

#topNav { display: none; }

#content { padding: 0; }

#blogLink { display: none; }

#header {
background-image: none; 
background-color: #2D2E2E;
padding: 5px 0;
}

#subFooterNav {
background-image: none; 
background-color: #2D2E2E;
}

.textRight { text-align: left; }

#footer { padding: 45px 0 35px; }

ul.footerNav li { height: 50px; }
}