/*
	@package sunsettheme
*/

/*
	Import
	------------------------------------------------
*/
@import 'base/variables';		//variables
@import 'base/mixins';			//mixins
@import 'base/placeholders';	//placeholders
@import 'base/fonticon';		//font icons

/* 
	Generic 
	------------------------------------------------
*/
body { font-family: $body-font; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: greyscale; }

a { color: $primary-color; @include animate( color, 320ms );
	&:hover,
	&:focus { text-decoration: none; color: $dark-grey; }
}

.background-image { background-position: center center; background-size: cover; background-repeat: no-repeat; }

.table { display: table; width: 100%; height: 100%; 
	.table-cell { display: table-cell; width: 100%; height: 100%; vertical-align: middle; }
}

/* 
	Header 
	------------------------------------------------
*/
.header-container { @extend %text-shadow; position: relative; display: block; height: 326px; }

.site-title { color: #fff; margin: 0; font-size: 80px; }
.site-description { font-size: 14px; color: #fff; margin-top: 1em; }

.nav-container { position: absolute; bottom: 0; left: 0; right: 0; }

/* 
	Nav Bar 
	------------------------------------------------
*/
.navbar-sunset { text-align: center; border: none; border-radius: 0; min-height: auto; margin-bottom: 0; background: rgba( 255,255,255,0.1); border-top: 1px solid rgba( 255,255,255,0.1);
	ul { float: none; }
	li { float: none; display: inline-block;
		&.active {
			a { opacity: 1;
				&:after { @include transform( translateY(0) ); opacity: 1; }
			}
		}
		&.open {
			a { opacity: 1; background-color: rgba(0,0,0,0.1)!important;
				&:after { @include transform( translateY(10px) ); opacity: 0!important; }
				&:hover,
				&:focus,
				&:visited { background-color: rgba(0,0,0,0.1)!important;
					&:after { @include transform( translateY(10px) ); opacity: 0!important; }
				}
			}
		}
		a { text-transform: uppercase; color: #fff; font-size: 12px; opacity: 0.7; letter-spacing: 0.05em; background: none; @include animate( opacity, 320ms );
			&:hover,
			&:focus,
			&:visited { background: none; opacity: 1; 
				&:after { @include transform( translateY(0) ); opacity: 1; }
			}
			&:after { content: ''; position: absolute; display: block; left: 15px; right: 15px; bottom: 14px; height: 2px; background: #fff; @include animate( all, 320ms ); opacity: 0; @include transform( translateY(10px) ); }
		}
		ul.dropdown-menu { border: 0; border-radius: 0; background: rgba(0,0,0,0.75); 
			li { display: block; 
				a {
					&:hover,
					&:focus,
					&:visited { background: rgba(0,0,0,0.25)!important; color: #fff; }
				}
			}
		}
	}
}

/* 
	Standard Post Format 
	------------------------------------------------
*/
article { padding-top: 40px; padding-bottom: 40px; 
	&:first-child { padding-top: 80px; }
}

h1 { font-size: 48px; font-weight: 200;
	a { color: $primary-color; }
	&.entry-title { line-height: 1.5em; margin: 0; padding: 0; 
		&:before, &:after { content: '~'; display: inline-block; position: relative; }
		&:before { margin-right: 10px; }
		&:after { margin-left: 10px; }
	}
}
.entry-meta { font-size: 13px; font-weight: 200; color: $light-grey; margin-bottom: 20px;
	a { font-weight: 500; color: $light-grey;
		&:hover,
		&:focus { color: $dark-grey; }
	}
}

.standard-featured-link { display: block; position: relative; 
	&:hover,
	&:focus {
		.standard-featured {
			&:after { background-color: rgba(0,0,0,0); }
		}
	}
}
.standard-featured { height: 330px; display: block; position: relative;
	&:after { @include animate( background-color, 320ms ); content: ''; position: absolute; display: block; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.15); box-shadow: inset 0 0 15px rgba(0,0,0,0.35); }
}

.entry-excerpt { margin: 30px 0 16px;
	p { font-size: 17px; line-height: 1.5em; font-weight: 300; letter-spacing: 0.02em; }
}

.button-container { margin-bottom: 30px; }
.btn-sunset { @include animate( all, 320ms ); text-transform: uppercase; font-size: 14px; font-weight: 300; color: $light-grey; padding: 8px 12px; border-radius: 0; border: 1px solid $light-grey; background-color: transparent;
	&:hover,
	&:focus { color: #ffffff; border-color: $dark-grey; background-color: $dark-grey; }
}

.entry-footer { padding: 10px 5px; border-bottom: 4px solid $lighter-grey; color: $light-grey; text-transform: uppercase;
	a { color: $light-grey; display: inline-block; font-size: 12px; 
		&:hover,
		&:focus { color: $dark-grey; }
	}
	.tags-list {
		.sunset-icon { margin-right: 10px; }
		a { padding: 0 4px; }
	}
	.comments-link {
		.sunset-icon { margin-left: 10px; }
	}
}

/* 
	Image Post Format 
	------------------------------------------------
*/
.sunset-format-image {
	.entry-header { height: 600px; @extend %text-shadow; position: relative; }
	h1, 
	.entry-meta,
	.entry-header { color: #ffffff;
		a { color: #ffffff; }
	}
	h1 { padding-top: 10px; }
}
.entry-excerpt {
	&.image-caption { @extend %background-gradient; position: absolute; left: 0; bottom: 0; right: 0; margin: 0; 
		p { margin: 40px 0; }
	}
}

/* 
	Audio Post Format 
	------------------------------------------------
*/
.sunset-format-audio {
	h1 { font-size: 30px;
		&.entry-title { display: inline-block; margin-right: 20px;
			&:before, &:after { display: none; }
		}
	}
	.entry-meta { display: inline-block; margin-bottom: 0; }
	
	.entry-content {
		iframe { width: 100%; height: 166px; }
	}
}

/* 
	Video Post Format 
	------------------------------------------------
*/
.sunset-format-video {
	header { 
		h1 {
			&.entry-title { margin-top: 20px; }
		}
	}
}

/* 
	Gallery Post Format 
	------------------------------------------------
*/
.sunset-format-gallery {
	header { 
		h1 {
			&.entry-title { margin-top: 20px; }
		}
	}
	.standard-featured { height: 500px; color: #ffffff;
		&:after { background-color: transparent; }
	}
	
	.carousel-control { background: none; background-image: none; opacity: 1; filter: alpha(opacity=100); font-size: 30px; width: auto; @extend %text-shadow; 
		.preview-container { position: relative; display: block; padding: 20px; background-color: rgba(0,0,0,0); line-height: 0; @include animate( background-color, 320ms );
			.thumbnail-container { position: absolute; display: block; height: 68px; width: 68px; border-radius: 50%; background: #999;  top: 1px; @include animate( transform, 320ms ); @include transform( scale(0) ); }
		}
		
		&.right {
			.preview-container { padding-left: 80px; border-radius: 35.5px 0 0 35.5px; 
				.thumbnail-container { left: 1px; }
			}
		}
		&.left {
			.preview-container { padding-right: 80px; border-radius: 0 35.5px 35.5px 0; 
				.thumbnail-container { right: 1px; }
			}
		}
		
		&:hover {
			.preview-container { background-color: rgba(0,0,0,0.8); 
				.thumbnail-container { @include transform( scale(1) ); }
			}
		}
		
	}
	
}








