/*   
Theme Name: Nikki Cole Creative
Theme URI: http://html5reset.org
Description: A custom portfolio theme for Nikki Cole.
Author: Colin McClure mcclurec@gmail.com
Version: 1.0
*/

/* Apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.chromeframe {position: absolute; top: 0;}

/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

html {
	background: url(resources/images/background.jpg);
	border-top: 3px solid #91beb0;
}

body {
	margin: 1em auto;
	max-width: 960px;
	padding: 0 2em;
}


/*-- Typography --*/
body, select, input, textarea {
	color: #362923;
	font: 16px Helmet, Freesans, sans-serif;
}

a {
	color: #287f70;
	transition: all .2s ease;
}
	a:hover {
		color: #7fbfab;
	}

h1, h2, h3 {
	line-height: 1.5em;
}

p {
	line-height: 1.33em;
	margin: 1em 0;
}

/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #7fbfab; color: #fff; text-shadow: none;}
::selection {background: #7fbfab; color: #fff; text-shadow: none;} 

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #7fbfab;} 

ins {background-color: #7fbfab; color: #000; text-decoration: none;}
mark {background-color: #7fbfab; color: #000; font-style: italic; font-weight: bold;}

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }


ul.padded li + li {
	margin-top: .5em;
}
ul.bold
{font-weight: bold;}

.small
{font-size:.75em;}


/* And here begins the WordPress fun.
-------------------------------------------------------------------------------*/

header > h1, header > nav, header li {
	display: inline-block;
}

header {
	margin-bottom: 1em;
}
	
	header > h1 {
		float: left;
		margin: 0 4em 0 -136px;
	}

	nav {
		margin-top: 82px;
	}
	
	.mobile-menu-button {
		background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IlVudGl0bGVkLTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMThweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTggMTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE4IDEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9Im5vbmUiIGQ9InoiLz4NCjxnIGlkPSJMYXllcl94MjVfMjAxIiBmaWxsPSIjZmZmIj4NCgk8cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMiIvPg0KCTxyZWN0IHk9IjUiIHdpZHRoPSIxOCIgaGVpZ2h0PSIyIi8+DQoJPHJlY3QgeT0iMTAiIHdpZHRoPSIxOCIgaGVpZ2h0PSIyIi8+DQo8L2c+DQo8cGF0aCBmaWxsPSJub25lIiBkPSJ6Ii8+DQo8L3N2Zz4NCg==) 50% 50% no-repeat #bbb;
		background-size: 60%;
		display: none;
		height: 3em;
		width: 3em;
		position: absolute;
		top: 3em;
		right: 2em;
		border-radius: .35em;
	}

	nav li a {
		color: #362923;
		font-size: .8em;
		text-decoration: none;
		text-transform: uppercase;
	}
	
	nav li + li a {
		margin-left: 3em;;
	}
	
		nav li a:hover {
		}

body > footer {
	border-top: 4px double #d4cdc4;
	font-size: .8em;
	margin-top: 3em;
	padding-top: 1em;
	text-align: right;
}

article {
	border-top: 4px solid #d0cec7;
	padding: 1em 0 4em;
}
	
	/* let's clear some floats */
	article:before, article:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
	article:after { clear: both; }  
	article { zoom: 1; }  
	
	article + article {
		margin-top: 2em;
	}
	
	article h2 {
		font-size: 1.2em;
		line-height: 0em;
	}

		article h2 a {
			color: #362923;
			text-decoration: none;
		}
		
	article .post-title-tagline p {
    	margin: 0.5em 0;
	}
	article .post-title {
		font-size: .875em;		
		font-weight:bold;
	}
	

	article .post-tagline {
		font-size: .875em;
	}
	
	article .post-description {
		font-size: .75em;
	}
article .post-see-all
	{
	font-size: .75em;
	}
		article h2 a:after {
			content: ":";
		}

	.post-text {
		float: left;
		margin-top: 4em;
		width: 196px;
	}
	
	
	.post-images {
		margin-left: 221px;
		max-width: 675px;
	}
	
		.post-images img {
			box-shadow: -4px 3px 10px rgba(0, 0, 0, 0.15);
			max-width: 100%;
			height: auto;
		}
		
.contact-main {
	margin-left: 250px;;
}

.contact-sidebar {
	float: left;
	padding-right: 2em;
	width: 250px;
}

	.contact-sidebar li + li {
		margin-top: 1em;
	}

.post {}

.entry-content {}
.entry-content a {}
.entry-content a:hover {}

#meta {}
.postmetadata {}

#sidebar {}

.navgation {}
.next-posts {}
.prev-posts {}

#searchform {}
#s {}
#searchsubmt {}
	
ol.commentlist {list-style: none;}
ol.commentlist li {}
ol.commentlist li.alt {}
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment {border-bottom: 1px dotted #666; padding: 10px;}
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard {}
ol.commentlist li.comment div.vcard cite.fn {font-style: normal;}
ol.commentlist li.comment div.vcard cite.fn a.url {}
ol.commentlist li.comment div.vcard img.avatar {float:right; margin: 0 0 10px 10px;}
ol.commentlist li.comment div.vcard img.avatar-32 {}
ol.commentlist li.comment div.vcard img.photo {}
ol.commentlist li.comment div.vcard span.says {}
ol.commentlist li.comment div.commentmetadata {}
ol.commentlist li.comment div.comment-meta {font-size: 10px;}
ol.commentlist li.comment div.comment-meta a {color: #ccc;}
ol.commentlist li.comment p {}
ol.commentlist li.comment ul {}
ol.commentlist li.comment div.reply {font-size: 11px;}
ol.commentlist li.comment div.reply a {font-weight: bold;}
ol.commentlist li.comment ul.children {list-style: none; margin: 10px 0 0;}
ol.commentlist li.comment ul.children li {}
ol.commentlist li.comment ul.children li.alt {}
ol.commentlist li.comment ul.children li.bypostauthor {}
ol.commentlist li.comment ul.children li.byuser {}
ol.commentlist li.comment ul.children li.comment {}
ol.commentlist li.comment ul.children li.comment-author-admin {}
ol.commentlist li.comment ul.children li.depth-2 {border-left: 5px solid #555; margin: 0 0 10px 10px;}
ol.commentlist li.comment ul.children li.depth-3 {border-left: 5px solid #999; margin: 0 0 10px 10px;}
ol.commentlist li.comment ul.children li.depth-4 {border-left: 5px solid #bbb; margin: 0 0 10px 10px;}
ol.commentlist li.comment ul.children li.depth-5 {}
ol.commentlist li.comment ul.children li.odd {}
ol.commentlist li.even {background: #fff;}
ol.commentlist li.odd {background: #f6f6f6;}
ol.commentlist li.parent {border-left: 5px solid #111;}
ol.commentlist li.thread-alt {}
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}



/* Homepage Slider
-------------------------------------------------------------------------------*/
.home-carousel-feature {
	background-size: cover;
    width: 100%;
    display: inline-block;
    position: relative;
    box-shadow: rgba(0,0,0,.14) 0 0 20px;
    transition: background .5s ease;
}
	.home-carousel-feature:after {
	    padding-top: 61.8%; /*Golden ratio*/
	    display: block;
	    content: '';
	}
	.home-carousel-feature > div {
		color: #f3f3f3;
		font-size: .9em;
	    position: absolute;
	    bottom: 0; right: 0; left: 0; /*fill parent*/
	    background-color: rgba(0,0,0,.5);
	    padding: 1em;
	}
		.home-carousel-feature > div > h3 {
			display: inline;
			font-size: 1.5em;
			font-weight: normal;
			margin-right: 1em;
		}
		.home-carousel-feature > div > a {
			color: #f3f3f3;
		}
		.home-carousel-feature > div > p {
			margin: .25em 0 0;
		}
		
.home-carousel-seperator {
	border-top: 4px double #d4cdc4;
	margin: 1em 0;
	padding-top: 1em;
}

.home-carousel-list {
	font-size: 0;
}
	.home-carousel-list li {
		background-size: cover;
		display: inline-block;
		font-size: 16px;
		margin: 0 3.5% 3.5% 0;
		position: relative;
		width: 31%;
		box-shadow: inset #fff 0 0 0 5px;
	}
	.home-carousel-list li:after {
		background: rgba(0,0,0,.5);
	    padding-top: 61.8%; /*Golden ratio*/
	    display: block;
	    content: '';
	    opacity: 0;
	}
	.home-carousel-list li:nth-child(3n) {
		margin-right: 0%;
	}
		.home-carousel-list li a {
			color: #F3F3F3;
			position: absolute;
			top: 0; bottom: 0; right: 0; left: 0; /*fill parent*/
			margin: auto;
			height: 1em;
			text-align: center;
			text-decoration: none;
			opacity: 0;
		}
	.home-carousel-list li:after,
	.home-carousel-list li a {
	    transition: all .3s ease;
	}
	.home-carousel-list li:hover:after,
	.home-carousel-list li:hover a,
	.home-carousel-list li.selected:after,
	.home-carousel-list li.selected a {
	    opacity: 1;
	}
	.home-carousel-list li:hover,
	.home-carousel-list li.selected {
		box-shadow: none;
	}

		
		
/* Print styles!
-------------------------------------------------------------------------------*/
@media print {

}


/* Media queries!
-------------------------------------------------------------------------------*/

/* Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-width: 50em) {
	html {
/* 		border-color: red; */
	}
	
	body {
		font-size: .8em;
	}
	
	header > h1 {
		margin-left: -70px;
	}
	
	header > h1 img {
		width: 75%;
	}

	.mobile-menu-button {
		display: inline-block;
	}

	nav ul, nav:active ul { 
		display: none;
		position: absolute;
		padding: 1em;
		background: rgba(255,255,255,.95);
		right: 2em;
		top: 6em;
		width: 66%;
		border-radius: .35em 0 .35em .35em;
		box-shadow: rgba(0,0,0,.2) 1px 2px 5px 0;
		z-index: 10;
	}

	nav:hover ul {
		display: block;
	}

	nav li {
		display: block;
		text-align: center;
	}

	nav li a {
		display: block; 
		font-size: 1.25em;
		padding: 1em 0;
	}

	nav li + li a {
		border-top: 1px solid #d4cdc4;
		display: block;
		font-size: 1.25em;
		margin: 0;
		padding: 1em 0;
	}

	.home-carousel-feature > div {
		font-size: .75em;
	}
	.home-carousel-list li {
		font-size: 12px;
	}
	
	.post-text {
		float: none;
		width: 100%;
	}
	
	article h2 {
		font-size: 2.5em;
		margin-bottom: .25em;
		text-align: center;
	}
	
	article h2 a:after {
		content: "";
	}
	
	article .post-title {
		font-size: 1.2em;
		margin: 0 0 .5em;
		font-weight:bold;
		text-align: center;
	}

	article .post-tagline {
		font-size: 1.2em;
		margin: 0 0 .5em;
		text-align: center;
	}
	
	article .post-description {
		font-size: 1.0em;
		margin: 0 0 .5em;
		text-align: center;
	}	
	
	.post-images {
		margin-left: 0;
		max-width: 100%;
		text-align: center;
	}

	.contact-main {
		margin-left: 0;;
	}
	
	.contact-sidebar {
		float: none;
		margin-bottom: 2em;
		padding-right: 0;
		width: 100%;
	}
	
		.contact-sidebar li {
		}

}

@media all and (orientation: portrait) {
	
}

@media all and (orientation: landscape) {
	
}