/* CSS Document */
* {margin: 0; padding: 0;}
body {color: #444; font-family: ff-dagny-web-pro-1,ff-dagny-web-pro-2, "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 16px;}

h1 {font-size: 20px; font-weight:550; letter-spacing:.5px; color:#968254; border-bottom: 2px solid #968254; margin-bottom: 10px;}
h2 {font-size: 16px;}
p {margin-bottom: 24px;}
img {border: 0;}

a {color: #00C; text-decoration: none;}
a:hover {text-decoration: underline;}

.left {float: left; margin: 0 15px 15px 0;}
.right {float: right; margin: 0 0 15px 15px;}

/* HEADER */
#header {background: url(images/header_bg.jpg) 10% 0 repeat-x; height: 225px; margin-bottom: 20px;}
#citiesBack {background: url(images/cities_back.png) 40% 0 repeat-x; height: 164px; width: 100%;}
#citiesFront {background: url(images/cities_front.png) 25% 0 repeat-x; height: 164px; width: 100%;}
#kylelogo {position: absolute; left: 50%; margin-left: -546px;}

#nav {background: #f1cf86; border-top: 1px solid #a48c3d; border-bottom: 1px solid #a48c3d; font-size: 20px; font-weight: bold; height: 26px; padding: 6px 0; position: absolute; left: 50%; margin-left: -260px; margin-top: 127px; width: 740px;}
#nav a {color: #705419; text-decoration: none;}
#nav a:hover {color: #fff;}
#nav ul {list-style-type: none; margin-left: 68px;}
#nav li {display: inline; margin: 0 17px;}
#ribbonEnd {position: absolute; left: 50%; margin-left: 448px; margin-top: 127px;}

/* MAIN CONTENT */
.contentWrapper {width: 960px; margin: 0 auto; overflow: auto;}
#main {width: 700px; float: left; padding-right: 45px;}
#main p {font-size: 16px; line-height: 24px;}
.smallText {font-size: 12px;}

/* home */
#latestDesigns {list-style-type: none; overflow: auto;}
#latestDesigns li {float: left; padding: 0 13px 14px; text-align: center;}
#latestDesigns img {border: 1px solid #999;}
#latestDesigns a, .portfolioThumbnails a {color: #705419; text-decoration: none;}
#latestDesigns p, .portfolioThumbs p, #resumeSoftware p {font-size: 12px; background: #f1cf86; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; margin: 0; margin-top: 10px; position: relative; padding: 2px 4px; line-height: normal; z-index: 100;}
#latestDesigns div, .portfolioThumbs div, #resumeSoftware div {background: #f1cf86; width: 10px; height: 10px; margin: 0 auto; position: relative; bottom: 20px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
#latestDesigns p, #latestDesigns div, .portfolioThumbs p, .portfolioThumbs div, #resumeSoftware p, #resumeSoftware div {opacity: 0;}
#latestDesigns a:hover > div, #latestDesigns a:hover > p, .portfolioThumbs a:hover > div, .portfolioThumbs a:hover > p, #resumeSoftware li:hover > p, #resumeSoftware li:hover > div {opacity: 1;}

/* resume */
.job {margin: 0 0 72px 0;}
.jobTitle {float: left; width: 200px;}
.jobPosition {color: #8c2f1b; font-weight: bold; margin: 15px 0 5px 0;}
.jobCompany {font-weight: bold; font-size: 14px; margin-bottom: 0;}
.jobDescription {margin-left: 250px;}
.job li {margin-bottom: 5px;}
.joblocation {font-size: 14px; font-style: italic;}
#resumeSummary {font-size: 20px;}
#resumeDownload {float: right;}
#resumeDownload a {text-decoration: none;}
#resumeSkills {overflow: auto;}
#resumeTechnical {float: right; width: 360px;}
#resumeSoftware {margin-right: 420px;}
#resumeTechnical {overflow: auto; margin-bottom: 24px;}
#resumeSoftware ul {list-style-type: none;}
#resumeSoftware li {float: left; margin: 10px 10px 10px; text-align: center;}
#resumeEducation div {float: left; text-align: center; width: 220px;}
.resumeEducationItem {margin-right: 26px;}
#resumeSummary, #resumeSoftware, #resumeTechnical {margin-bottom: 60px;}

/* pie charts */
.chart {width: 100px; height: 100px; float: left; margin: 10px 10px 0 10px;}
.hold {position:absolute; width:100px; height:100px; clip:rect(0px,100px,100px,50px);}
.pie {position:absolute; width:100px; height:100px; clip:rect(0px,50px,100px,0px); -moz-border-radius:50px;	-webkit-border-radius:50px;	-o-border-radius:50px;	-ms-border-radius:50px;	border-radius:50px;}
.pieText {color: #fff; position: absolute; text-align: center; margin-top: 65px; width: 100px;}
.pieBackground {background-color: grey; position:absolute; width:100px; height:100px; -moz-border-radius:50px;	-webkit-border-radius:50px; -ms-border-radius:50px; -o-border-radius:50px; border-radius:50px; -moz-box-shadow: -1px 1px 3px #000; -ms-box-shadow: -1px 1px 3px #000; -o-box-shadow: -1px 1px 3px #000; -webkit-box-shadow: -1px 1px 3px #000; box-shadow: -1px 1px 3px #000;}

#pieHtml .pie {background-color: #1b458b; -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg);}
#pieHtml2 {-moz-transform:rotate(180deg); -webkit-transform:rotate(180deg);	-o-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg);}
#pieHtml2 .pie {background-color: #1b458b; -moz-transform:rotate(175deg); -webkit-transform:rotate(175deg); -o-transform:rotate(175deg); -ms-transform:rotate(175deg); transform:rotate(175deg);}

#pieCss .pie {background-color: #1b458b; -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg);}
#pieCss2 {-moz-transform:rotate(180deg); -webkit-transform:rotate(180deg);	-o-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg);}
#pieCss2 .pie {background-color:#1b458b; -moz-transform:rotate(175deg); -webkit-transform:rotate(175deg); -o-transform:rotate(175deg); -ms-transform:rotate(175deg); transform:rotate(175deg);}

#pieMobile .pie {background-color: #1b458b; -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg);}
#pieMobile2 {-moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg);}
#pieMobile2 .pie {background-color: #1b458b; -moz-transform:rotate(120deg); -webkit-transform:rotate(120deg); -o-transform:rotate(120deg); -ms-transform:rotate(120deg); transform:rotate(120deg);}

#pieJs .pie {background-color: #1b458b; -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg);}
#pieJs2 {-moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg);}
#pieJs2 .pie {background-color: #1b458b; -moz-transform:rotate(30deg); -webkit-transform:rotate(30deg); -o-transform:rotate(30deg); -ms-transform:rotate(30deg); transform:rotate(30deg);}

#pieJquery .pie {background-color: #1b458b; -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg);}

#piePhp .pie {background-color: #1b458b; -moz-transform:rotate(40deg); -webkit-transform:rotate(40deg); -o-transform:rotate(40deg); -ms-transform:rotate(40deg); transform:rotate(40deg);}


/* BLOG */
h1 a {color: #968254; text-decoration: none;}
h1 a:visited {color: #968254;}
h1 a:hover {color: #b1a381}
.blog h2 {margin-bottom: 10px;}
.blog #comment {width: 700px;}
.blog ul, .blog ol {margin-bottom: 24px;}
.postDate {float: right; font-size: 14px; font-style: italic; margin: 0; padding: 0;}
.postDetails {font-size: 14px; font-style: italic; margin-bottom: 72px;}
.postDetails img {margin-left: 10px;}
.postDetails img:first-child {margin-left: 0;}
.screen-reader-text {display: none;}
.post ol li {list-style-type: decimal; margin-left: 20px; margin-bottom: 15px;}
.post ul li {list-style-type: circle; margin-left: 20px;}
#postFooter {border-top: 2px solid #968254; font-size: 14px; font-style: italic; margin-bottom: 40px; text-align: right;}
#postFooter a {color: #666; text-decoration: none;}
#postFooter a:first-child {margin-right: 10px;}
.comment {border: 1px solid #ccc; padding: 10px; margin-bottom: 15px;}
.comment-body p {margin-left: 47px;}
.comment-author {margin-bottom: 4px;}
.comment-author img {float: left; margin: 0 15px 15px 0;}
.commentmetadata {font-size: 11px; font-style: italic; margin-bottom: 15px;}
.commentmetadata a {color: #333; text-decoration: none;}
.commentmetadata a:hover {text-decoration: underline;}
#respond #submit {margin-top: 15px;}
#respond p {margin-bottom: 10px;}
#searchform input[type=text] {width:130px;}
#blogThumbnails {margin-bottom: 15px; text-align: center;}
#blogThumbnails img {border: 1px solid #ccc; height: 40px; margin: 0 10px; padding: 2px;}
#blogThumbnails img:hover {border: 1px solid #666; cursor: pointer;}
#blogThumbnails img:first-child {margin-left: 0;}
code {font-size: 12px;}
pre {background: #eee; margin-bottom: 24px; padding: 5px;}
.highlight {background: #e3e3e3;}
.recentPostList li {margin-bottom: 14px;}

/* PORTFOLIO */
.portfolioHome img {margin: 5px 5px 0 5px;}
.portfolioThumbs {margin-bottom: 40px; overflow: hidden;}
.portfolioThumbs li {float: left; list-style-type: none; padding: 0 17px; text-align: center;}
.portfolioThumbs li:nth-child(1), .portfolioThumbs li:nth-child(6), .portfolioThumbs li:nth-child(11) {padding-left: 0;}
.portfolioThumbs li:nth-child(5n) {padding-right: 0;}
.portfolioThumbs img {border: 1px solid #999; box-shadow: 0 0 4px #666;}

#portfolio {margin-bottom: 20px;}
#portfolio #main {text-align: center;}
#gallery {border: 1px solid #999; margin-bottom: 20px;}

#portfolio #side li {margin-bottom: 14px;}
#tags {background: url('http://www.kylejlarson.com/images/icon_tag.gif') no-repeat left top; font-size: 12px !important; padding-left: 12px;}
#portfolioSamples {cursor: pointer;}
#portfolioSamples img {width: 63px;}
#portfolioSamples div {border: 1px solid #ccc; height: 50px; float: left; margin: 0 10px 10px 0; overflow: hidden;}
#portfolioSamples div:nth-child(3n) {margin-right: 0;}
#portfolioSamples .selectedSample {border: 1px solid #8b2e1a; box-shadow: 0 0 4px #000;}
.noBorder {border: 1px solid #fff !important; box-shadow: none !important;}

#galleryNavigation {padding-top: 20px; padding-bottom: 20px;}
#galleryNavigation a {color: #8b2e1a; border: 1px solid #eee; border-radius: 15px; box-shadow: 0px 1px 1px #ccc; font-size: 12px; padding: 5px 10px; text-decoration: none;}
#galleryNavigation a:hover {background: #f7cf82;}
#galleryNavigation a:active {color: #fff;}
#galleryNext {float: right;}

/* SIDEBAR */
#side {float: right; width: 215px;}
#side p, #side ul {font-size: 14px; margin: 0 0 24px 0;}
#side div ul:last-of-type {margin-bottom: 40px;}  /* set margin to make following h1 fit standard line-height */
#side ul {list-style-type: none;}
.sideContent li {line-height: 24px;}
.latestArticles ul {list-style-type: none; margin: 0;}
.latestArticles img {float: left; margin: 0 10px 0 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;}
.latestArticles li {padding: 0 0 22px 0; margin: 0; line-height: 16px; min-height: 40px;}
.latestArticles a {color: #444; text-decoration: none; -webkit-transition: background .3s ease-in-out; -o-transition: background .3s ease-in-out; -moz-transition: background .3s ease-in-out; transition: background .3s ease-in-out;}
.latestArticles a:hover {background: #f1cf86;}

/* CONTACT FORM */
.form {font-size: 90%; font-weight: 500; color:#666666;}
input[type=text] {font-size: 90%; background-color: #f7f7ea; padding: 4px; border: 1px solid #666666; margin-top: 2px; width: 650px;}
textarea {font-size: 92%; background-color: #f7f7ea; padding: 4px; border: 1px solid #666666; margin-top: 2px; width: 650px;}

/* FOOTER */
#footer {border-top: 2px solid #968254; color: #666; font-size: 12px; margin-bottom: 20px; padding-top: 10px;}
#footer p {margin: 0;}
#footerNav {float:right;}
#footerNav a {color: #666; margin: 0 5px; text-decoration: none;}
#footerNav a:hover {color: #0044cc;}

.imgleft {float: left; padding-right:24px;}

/* MEDIA QUERY */
@media screen and (max-width: 960px) {
	#header {margin-bottom: 60px;}
	#kylelogo {margin-left: -162px; z-index: 50;}
	#navigation {margin-left: 14px;}
	#nav {background: #444; font-size: 14px; height: 56px; margin-top: 175px; width: 100%; margin-left: -50%; text-align: center;}
	#nav ul {margin-left: 0; margin-top: 30px;}
	#nav a {color: #f7d081;}
	#ribbonEnd {display: none;}
	.contentWrapper {width: 95%;}
	#main {float: none; padding-right: 0; width: 100%;}
	#side {float: none; width: 100%;}
	#resumeSoftware {margin-right: 0;}
	#resumeTechnical {float: none; width: auto;}
	.jobTitle {float: none; width: auto;}
	.jobDescription {margin-left: 0;}
	#resumeEducation div {float: none; margin-right: 0;}
	.job li {margin-left: 20px;}
}

@media screen and (max-width: 700px) {
	#gallery {width: 95%;}
}

@media screen and (max-width: 480px) {
	body {margin:0;}
	#navigation {width: 82px; margin-top: 38px;}
	#kylelogo {width: 316px; margin-left: -158px; margin-top: 4px;} 
	#header {margin-bottom: 0;}
	#nav {display: none;}
}

/* FIXES */
.clearfix {overflow: auto;}