/*------------------------------------------------------------------------------

MASTER.CSS

------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------

COLOR PALLETTES

--> AUTUMN
#e4803e - darkest orange
#e88136 - dark orange
#eeb389 - mid orange
#f4cdb1 - light orange
#f9e6d8 - lightest orange

--> SPRING
#91b943 - darkest green
#a7c867 - dark green
#bcd68d - mid green
#d3e3b3 - light green
#e8f1d9 - lightest green

--> SUMMER
#f6b92f - darkest yellow 
#f7c850 - dark yellow
#f8d779 - mid yellow
#fae4a6 - light yellow
#fcf2d2 - lightest yellow

--> WINTER
#95c5d8 - darkest blue
#aad1e0 - dark blue
#bfdce7 - mid blue
#d4e8f0 - light blue
#eaf3f7 - lightest blue

------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------

--> TYPOGRAPHY

------------------------------------------------------------------------------*/

body {
	font-family: Verdana, sans-serif;
	
	background: url(../img/texture-level-2.png), url(../img/texture.png);
	padding-top: 4%;
}

p {
	margin-bottom: 1.8em;
	line-height: 1.4em;
}

a,
a:active,
a:visited {
	color: #f6b92f;
}

a:hover {
	text-decoration: underline;
	color: #f7c850;
}

h2 {
	font-size: 2.4em;
	font-weight: normal;
	margin-bottom: 0.3em;
}

h2 a {
	text-decoration: none;
}

h3 {
	font-size: 1.1em;
	font-family: "museo-sans-1","museo-sans-2";
	font-weight: 300;
	
	margin-bottom: 2em;
}

h4 {
	font-size: 1.3em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #f7c850;
	
	margin: 2em 0 0.4em 0;
	padding-bottom: 0.5em;
	border-bottom: 1px solid #fae4a6;
}

hr {
	height:  35px;
	background: url(../img/horizontal-rule.png) top center no-repeat;
	border: none;
	
	margin: 5em 0;
}

/* used to create full-width pixel accurate images on small screens */
span.pixel_container {
	display: block;
}


/*------------------------------------------------------------------------------

--> FLUID GRID

------------------------------------------------------------------------------*/

#main {
	max-width: 75%;
	margin: 0 auto;
	
	clear: both;
	position: relative;
	top: -6em;
}

nav ul {
	max-width: 90%;
	margin: 0 auto;	
}

img {
	max-width: 100%;
	margin: 0 auto;
	margin-bottom: 1em;
}


/*------------------------------------------------------------------------------

--> HOMEPAGE

------------------------------------------------------------------------------*/

header h1 a, 
header h1 a:active, 
header h1 a:visited {
	display: block;
	height: 118px;
	width: 320px;
	
	background: #fff url(../img/logo-large.png) top left no-repeat;
	text-indent: -999em;
	
	position: relative;
	top: -52px;
}

nav {
	border-top: 3px double #fae4a6;
	border-bottom: 3px double #fae4a6;
	
	height: 38px;
	width: 100%;
}

nav ul li,
header h1 {
	display: block;
	float: left;
	
	margin: 0.9em 0.7em 0 1.5em;
}

header h1 {
	margin-left: 10%;
}

nav .divider {
	margin: 0.8em -0.4em 0 0.5em;
}

nav a,
nav a:active,
nav a:visited {
	text-transform: uppercase;
	color: #444;
	letter-spacing: 0.1em;
	text-decoration: none;
}

nav a:hover {
	text-decoration: underline;
}

nav .current {
	font-weight: 700;
	color: #000;
}

h3.summary {
	font-size: 2.3em;
	
	margin-bottom: 1.7em;
	border-bottom: 3px double #fae4a6;
	padding: 1em;
	
	text-align: justify;
}

h3.summary span {
	color: #f7c850;
}

h3.summary p {
	margin-bottom: 0;
}

#home p.date {
	margin-top: 0;
}

h4 em {
	font-size: 1em;
	font-style: italic;
	text-transform: lowercase;
	font-weight: normal;
	letter-spacing: normal;
	
	color: #696969;
	
	padding-right: 0.2em;
}

h4 span {
	padding: 0 1em;
	background: #fff;
}

h4.journal {
	background: url(../img/icon/notebook-w-line.png) right 1px no-repeat;
	
}

h4.work {
	background: url(../img/icon/portfolio-w-line.png) right 1px no-repeat;
}

h4.trip {
	background: url(../img/icon/travel-w-line.png) right 10px no-repeat;
}


/*------------------------------------------------------------------------------

--> EXCERPT

------------------------------------------------------------------------------*/

.excerpt {
	margin-bottom: 0.5em;
}

.excerpt h2 {
	border-top: 3px double #fae4a6;
	padding-left: 0.5em;
	padding-top: 0.5em;
}

.excerpt h3 {
	margin-bottom: 0.5em;
	padding-left: 1.2em;
	padding-bottom: 1.3em;
	border-bottom: 1px solid #fae4a6;
}

p.date,
p.tags {
	font-size: 0.8em;
	text-transform: uppercase;
	
	color: #696969;
}

.tags a,
.tags a:active,
.tags a:visited {
	color: #696969;
}

p.date {
	margin: 5em 0 0.5em 0;
}

p.tags {
	display: none;
}


/*------------------------------------------------------------------------------

--> SHOWCASE

------------------------------------------------------------------------------*/

.showcase {
	margin-bottom: 2em;
	overflow: hidden;
}

.showcase img {
	margin-bottom: 2em;
}

.showcase h2 {
	text-align: center;
	font-size: 3.3em;
	
	border: none;
	padding-top: 0;
}

.showcase h3 {
	border-top: 1px double #fae4a6;	
	border-bottom: 1px double #fae4a6;
	
	padding-top: 0.7em;
	padding-bottom: 0.7em;
}

.showcase h4 {
	margin-bottom: 0.5em;
	padding: 0;
	border: none;
	
	background: url(../img/icon/brush-w-line.png) right 1px no-repeat;
}


/*------------------------------------------------------------------------------

--> TAGS

------------------------------------------------------------------------------*/

#tags h3.summary {
	margin-bottom: 0.5em;
}

#tags h4 {
	margin-top: 0;
	margin-bottom: 0.7em;
}

#tags h4 em {
	padding-right: 0.5em;
}

section.tag-list {
	border-bottom: 1px double #fae4a6;
	padding-bottom: 0.5em;
	
	overflow: auto;
}

section.tag-list li {
	display: block;
	float: left;
	width: 10em;
	margin: 0 1em 0.7em 0.3em;
	padding: 0.4em;
	
	color: #696969;
	font-size: 0.8em;
	text-transform: uppercase;
}

section.tag-list li.selected {
	background: #fae4a6;
	border: 1px solid #f7c850;
	padding: 0.3em;
}

section.tag-list li a,
section.tag-list li a:active,
section.tag-list li a:visited {
	display: block;
	width: 100%;

	color: #696969;
	text-decoration: none;
}

section.tag-list li a:hover {
	color: #f7c850;
	text-decoration: underline;
} 


/*------------------------------------------------------------------------------

--> POST

------------------------------------------------------------------------------*/

#post h2 {
	font-size: 4em;
	margin: 2.5em 0 0 0;
	
	border-bottom: 1px solid #fae4a6;
}

#post .date {
	margin: 0 0 2.5em 0;
	padding: 0.5em 0 0.5em 1em;
	
	border-bottom: 1px solid #fae4a6;
}

#post h3 {
	font-size: 1.7em;
	text-transform: uppercase;
	
	margin: 1.5em 0 1em 0;
}


/*------------------------------------------------------------------------------

--> FOOTER

------------------------------------------------------------------------------*/

footer {
	margin-top: 3em;
	padding-top: 1em;
	border-top: 3px double #fae4a6;
	
	margin-bottom: 3em;
}

footer p {
	text-transform: uppercase;
	text-align: center;
	
	font-size: 0.85em;
	letter-spacing: 0.1em;
}


/*------------------------------------------------------------------------------

--> HOLDING PAGE

------------------------------------------------------------------------------*/

body#holding_page {
	text-align: center;

	padding-top: 20%;
}

#holding_page h2 {
	font-size: 5.3em;
	
	background: url(../img/holding-page-graphic.png) bottom center no-repeat;
	padding-bottom: 6%;
}

#holding_page h3 {
	text-transform: uppercase;
	font-size: 1.3em;
}

#holding_page p {
	font-size: 0.9em;
	text-transform: uppercase;
}


/*------------------------------------------------------------------------------

--> TRIP

--> SPRING
#91b943 - darkest green
#a7c867 - dark green
#bcd68d - mid green
#d3e3b3 - light green
#e8f1d9 - lightest green

------------------------------------------------------------------------------*/

section.trip img {
	margin-top: 1em;
}

section.trip h2 a {
	color: #444;
	text-decoration: underline;
}

section.trip h3 {
	border-top: 3px double #91b943;
	border-bottom: 3px double #91b943;
	color: #444;
}

h4.trip {
	color: #FFF;
	border-top: 3px double #91b943;
	border-bottom: 3px double #91b943;
	padding-top: 0.5em;
}

h4.trip span {
	color: #91b943;
}

#trip_index nav,
.trip_post nav,
#trip_index h3.summary, 
#post.trip_post h2, 
#post.trip_post .date, 
#trip_index footer, 
.trip_post footer {
	border-color: #91b943;
}

#trip_index header h1 a, 
.trip_post header h1 a, 
#trip_index header h1 a:active, 
.trip_post header h1 a:active, 
#trip_index header h1 a:visited, 
.trip_post header h1 a:visited {
	background-image: url(../img/logo-large-trip.png);
}

#trip_index #main a,
.trip_post #main a {
	color: #91b943;
}

#trip_index .excerpt h2, 
.trip_post .excerpt h2, 
#trip_index .excerpt h3, 
.trip_post .excerpt h3 {
	border-color: #91b943;
}


/*------------------------------------------------------------------------------

--> MEDIA QUERIES

------------------------------------------------------------------------------*/

@media screen and (max-width: 1600px) {
	
	.showcase,
	.kinglet-icons .pixel_container {
		max-width: 653px;
		margin: 0 auto;
	}
	
	.showcase img,
	.kinglet-icons img {
		min-width: 704px;
		position: relative;
		left: 50%;
		
		margin-left: -352px;
		
		overflow: hidden;
	}
	
}

@media screen and (min-width: 1200px) {
	
	#main {
		max-width: 47.5%;
	}
	
	nav ul {
		max-width: 60%;
	}
		
	header h1 {
		margin-left: 15%;
	}
	
}

@media screen and (max-width: 911px) {
	
	body {
		padding: 0;
	}
	
	img.typekit-badge {
		display: none!important;
	}
	
	#main {
		max-width: 90%;
		top: 0;
	}
	
	nav ul {
		text-align: center;
		padding-top: 0.9em;
	}
	
	nav ul li {
		display: inline;
		float: none;
	}
	
	header h1 {
		float:  none;
		margin: 0 auto;
	}
	
	header h1 a, 
	header h1 a:active, 
	header h1 a:visited {
		background-image: url(../img/logo-large-plain.png);
		margin: 0 auto;
		top: 0;
	}
	
	#trip_index header h1 a, 
	.trip_post header h1 a, 
	#trip_index header h1 a:active, 
	.trip_post header h1 a:active, 
	#trip_index header h1 a:visited, 
	.trip_post header h1 a:visited {
		background-image: url(../img/logo-large-plain.png);
		margin: 0 auto;
		top: 0;
	}
	
	#post h2 {
		margin-top: 0.5em;
	}
	
}

@media screen and (max-width: 703px) {
	
	.showcase,
	.kinglet-icons .pixel_container {
		overflow: hidden;
	}
	
}

@media screen and (max-width: 505px) {
	
	header h1 a,
	header h1 a:active,
	header h1 a:visited {
		background-image: url(../img/logo-small.png);
		width: 200px;
	}
	
	#trip_index header h1 a, 
	.trip_post header h1 a, 
	#trip_index header h1 a:active, 
	.trip_post header h1 a:active, 
	#trip_index header h1 a:visited, 
	.trip_post header h1 a:visited {
		background-image: url(../img/logo-small.png);
	}
	
	header nav {
		height: 67px;
	}
	
	header nav ul li a {
		line-height: 1.9em;
	}
	
	h3.summary {
		font-size: 1.4em
	}
	
	img {
		max-width: 100%;
		-webkit-border-radius: 0;
	}
	
}