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

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.link-nav {color: #73655A;}
a.link-nav:visited {color: #73655A;}
a.link-nav:hover {color: #C7B79E; text-decoration: none;}

img {border: 0px;}
.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;}
#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%;}
#navigation {position: absolute; left: 50%; margin-left: 14px; margin-top: 16px;}
#kylelogo {position: absolute; left: 50%; margin-left: -186px;}

/* MAIN CONTENT */
#content {width: 960px; margin: 0 auto;}
#main {width: 700px; float: left; padding-right: 45px;}
#main p {font-size: 16px; line-height: 24px;}
#mainFull {width: 960px;}
.signOut {color: #968254; margin-top: 40px; text-align: right;}
.smallText {font-size: 12px;}

/* resume */
.job {margin: 0 0 48px 0;}
.job p {margin-left: 98px;}
.job ul {margin-left: 98px;}
.job li {margin-bottom: 5px;}
span.joblocation {font-size: 14px; font-style: italic;}

/* BLOG */
h1 a {color: #968254; text-decoration: none;}
h1 a:hover {color: #b1a381}
.blog h2 {margin-bottom: 10px;}
.blog #comment {width: 700px;}
.blog ul {margin-bottom: 24px;}
.postDate {float: right; font-size: 14px !important; font-style: italic; margin: 0; padding: 0;}
.postDetails {font-size: 14px !important; font-style: italic;}
.postDetails img {margin-left: 10px;}
.postDetails img:first-child {margin-left: 0;}
.screen-reader-text {display: none;}
#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;}

/* PORTFOLIO */
.portfolioHome img {margin: 15px;}
.portfolio img {margin-bottom: 20px;}
.porfolioThumbs {margin-bottom: 40px;}
.logos img {padding-bottom: 50px;}
.logos p {border-bottom: 1px solid #ccc;}

/* SIDEBAR */
#side {float: right; width: 215px;}
#side h2 {line-height: 24px;}
#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;}
#side li {line-height: 24px;}
#side li img {margin-right: 4px;}
.thumbnailRow a:first-child {margin-right: 10px;}
.printThumbnails img {margin: 5px 5px;}
.screenshots img {padding: 0 5px}
ul.bulletedList {margin: 0 0 0 10px; padding: 0; font-size: 90%}
ul.bulletedList li {padding-bottom: 5px;}
.latestDesigns ul {list-style-type: none;}
.latestDesigns li {display: inline; float: left; padding: 0 8px 14px 8px;}
#thumbnailList h3 {border: 1px solid #ccc; font-size: 13px; padding: 4px 0; text-align: center;}
#thumbnailList h3:hover {background: #ccc; cursor: pointer;}
#thumbnailList h3 a {color: #333;  padding: 4px 60px; text-decoration: none;}
#thumbnailList div {margin: 10px 0;}

/* CONTACT FORM */
p.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;}
textarea {font-size: 92%; background-color: #f7f7ea; padding: 4px; border: 1px solid #666666; margin-top: 2px;}

/* FOOTER */
#footer {border-top: 2px solid #968254; color: #666; font-size: 12px; margin-top: 30px; 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;}

.break {clear:both; padding: 20px 0px 0px 0px; text-align: center;}

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

img.imgbreakline {padding-bottom: 10px;} /*REMOVE*/

/* MEDIA QUERY */
@media screen and (max-width: 960px) {
	#content {width: 95%;}
	#main {float: none; padding-right: 0; width: 100%;}
	#side {float: none; width: 100%;}
	.latestDesigns {margin-top: 40px;}
	.latestDesigns div {float: left; margin-left: 10%; width: 45%;}
	.latestDesigns div li {width: 40%;}
	.latestDesigns div img {max-width: 100%;}
	.latestDesigns div + div {float: right;}
	.latestDesigns div:first-child {margin-left: 0;}
	.portfolio img {max-width: 100%;}
}

/* FIXES */
.clearFloats {clear: both;}

/* Float containers fix: */
.clearfix:after, .listedItem:after{content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix, .listedItem{display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix, *html .listedItem{height: 1%;}
.clearfix, .listedItem{display: block;}
/* End hide from IE-mac */