// PageLines Theme Styles & Defaults
// ------------------------------------

#site {
	position:relative;
	#page,
	#dynamic-content {
		min-height: @pl-min-height;
		zoom:1;
		.page-canvas{
			margin: 0 auto;
		}
	}
}

.fixed_width{
	#page,
	#footer{
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
}

.content {
	width: 100%;
	margin: 0 auto;
	position: relative;
	.content-pad{
		padding: 15px;
	}
}

#content .content-pad{
	padding-top: 10px;
}

/* @ Footer */
#footer {
	clear:both;
	text-align: left;
	position: relative;
	color: fadeout(@pl-footer, 40%);
	li.link-list a,
	.widget-title{
		color: fadeout(@pl-footer, 40%);
	}
	a,
	li h5 a{
		color: @pl-footer;
	}
}

section.container{
	margin: 0;
}


section.copy{
	margin: 1.6em 0;
}

.mcolumn-pad,
.copy-pad,
.scolumn-pad,
.sidebar_widgets,
.entry_content,
.post-excerpt{
	> :first-child{
		margin-top: 0;
	}
	> :last-child{
		margin-bottom: 0;
	}
}

#nav,
#secondnav{
	.content-pad{
		padding-top: 5px;
		padding-bottom: 5px;
	}
}

#column-wrap {
	float: left;
}
#sidebar-wrap{
	float:right;
}

.two-sidebar-left,
.one-sidebar-left{
	#column-wrap{
		float: right;
	}
	#sidebar-wrap{
		float: left;
	}
	#column-main{
		float: right;
	}
}
#column-main {
	float: left;
	display: inline;
}

.two-sidebar-center #column-main {
	float: right;
	.mcolumn-pad{
		padding-right: 20px;
		padding-left: 20px;
	}
}
.one-sidebar-right,
.two-sidebar-right{
	#column-main .mcolumn-pad{
		padding: 14px 30px 0 15px;
	}
}
.one-sidebar-left,
.two-sidebar-left{
	#column-main .mcolumn-pad{
		padding: 14px 15px 0 30px;
	}
}
.fullwidth #column-main {
	float: none;
	.mcolumn-pad{
		padding-right: 15px;
		padding-left: 15px;
	}
}
.mcolumn-pad > article .hentry-pad:first-of-type {
	padding-top: 0;
}


/* Don't confuse with .full_width design mode added to 'body'.. */

#sidebar1,
#sidebar2{
	float: left;
	overflow:hidden;
}



/* Fixed Width Design Mode
 ****************************/
body.fixed_width{
	border-top:none;
	#page{
		padding-top: 12px;
	}
	&.content-shadow .page-canvas{
		box-shadow: 0 1px 5px rgba(0,0,0, .8);
	}
	#footer{
		background: transparent;
		margin: 0 auto;
	}
	.section-morefoot .dcol-pad {
		padding: 15px;
	}
	.section-branding .content-pad{
		padding: 25px;
	}
	#header .searchform {
		margin-right: 10px;
	}
	.section-boxes .dcol-pad {
		padding: 10px;
	}
}

/* @ #header */
#header .outline{
	position: relative;
	zoom: 1;
	z-index:15; /* ie drop-down fix */
}

.widget-title,
#footer li h5 a,
.main_nav,
.author-details,
.post-nav,
.current_posts_info,
#secondnav{
	font-size: 86%;
}


// Is this used in Brandnav?
a.site-title{
	display: block;
	margin: .3em 0 .15em;
	font-size: 2.6em;
	line-height: 1.1em;
}
.site-description {
	margin-left: .2em;
	font-size: 86%;
	color: @textColorAlt;
}

// Main Nav
// ---------

// Only in Nav
.navigation_wrap{
	position: relative;
	.main_nav_container{
		width: 100%;
		float: left;
		margin-right: -230px;
	}

	.main_nav {
		margin-right: 230px;
		text-align: left;
		margin-top: 0px;
		z-index:28;  /* Fancybox Uses 30 */
		position:relative;
		height: 31px;
	}
}

// Both Nav and Brandnav
.main_nav{
	font-size: 86%;
	ul{
		list-style: none;
		display: block;
		margin: 0;
		padding: 0px;
		float: left;
		li{
			position:relative;
			margin: 0;
			padding: 0px;
			float: left;
			text-align: right;
			a{
				line-height: 1em;
				padding: 10px 15px;
				text-decoration: none;
				display: block;
				border: 1px solid transparent;
				border-bottom:none;
			}
		}
		ul {
			display: none;
			ul li {
				text-align: left;
			}
		}
	}
}

// Superfish Drop Down
.sf-menu{
	li{
		&:hover ul,
		&.sfHover ul{
			top: 33px;
		}
		ul li:last-child{
			border-bottom: none
		}
	}
}
#subnav ul li a:active{
	text-decoration:none;
}

/* No search adjustment */
.main_nav_container.nosearch,
.nosearch .main_nav{
	margin-right: 0;
}

/* @ Posts */
.fpost{
	.post-excerpt .post-thumb.img {
		margin-right: 13px
	}
	.post-thumb.img {
		margin-right: 20px;
	}
	.textcontent {
		margin: 20px 10px 0 0;
	}
	.media .img img{
		max-width: 100%;
		height: auto;
		margin: 0 auto;
	}
	.post-title h2 a:hover{
		text-decoration: underline;
	}
	.post-excerpt {
		margin: .6em 0;
	}
	&.post .entry{
		margin-bottom: 1em;
		padding: 1em 0;
	}
}

.full_img {
	margin-bottom: .8em;
}


// Belongs under postloop

// Hentry format/sizing needs to be moved to be conextual
// Henry is going to represent all long form text styling

.post-meta .c_img,
.hentry .c_img{
	display: block;
	border: 1px solid transparent;
	padding: 4px;
	max-width: 98%;
	line-height:1em;
}

.post-meta {
	margin-bottom: 1.71em;
	&.post-nocontent{
		margin-bottom: 0;
	}
	.post-title-section{
		padding-bottom: 6px;
	}
	.metabar{
		font-size: 80%;
		line-height: 1.6em;
		em{
			font-style: normal;
			color: @textColorAlt;
			a{
				color: @textColorAlt;
			}
			a:hover{
				text-decoration: none;
				color: @pl-text;
			}
		}
	}
}

.hentry {
	clear: both;
	margin: 0 0 1.8em;
	.hentry-pad{
		padding: 0 0 25px;
	}
	.entry-title{
		margin:0;
	}
	ul ul, ol ol {
		margin: 0 0 0 1.7em;
	}

}

.entry_content img {
	max-width: 100%;
}

.fpost .post-excerpt {
	font-size: 1.03em;
	line-height: 1.55em;
}

.tags {
	font-size: 86%;
	color: @textColorAlt;
	.note{
		.noteText();
	}
}

.pledit{
	opacity: .7;
	&:hover{
		opacity: 1;
	}
}

// Clips - Only used in blog listing
// ------------------------------------
.clip_box{
	margin: 0 0 1.8em;
	border-color: @dark-base;
}
.clip{
	width:47%;
	clear: none;
	float: left;
	.hentry{
		margin: 0;
	}
	&.clip-right{
		float: right;
	}
	.post-meta .c_img {
		padding: 2px;
	}
	.clip-header {
		padding: 4px 0 4px 0;
		display: table-cell;
		width: 10000px;
	}
	.clip-thumb{
		a{
			float:left;
			margin-right: 10px;
		}
		img{
			padding: 2px;
			display:block;
			margin:0 0 0.4em;
		}
	}
	.post-excerpt{
		font-size: 90%;
		line-height: 1.6em;
		margin-bottom:1.5em;
		margin-top:.5em;
		.post-thumb.img {
			margin-right: 10px
		}
	}

	.entry-title,
	.metabar{
		padding: 0;
	}
}



/* @ Post Navigation */
.post-nav,
.current_posts_info {
	clear: both;
	padding:5px 10px;
	position: relative;
	background-color: @dark-base;
	a{
		text-decoration: none;
		color: @textColorSubtle;
		&:hover{
			color: @textColor;

		}
	}
	.previous a {
		float: left;
		padding-left: 24px;
		background: url(@{plRoot}/images/post-previous@2x.png) no-repeat left center;

	}
	.next a {
		float: right;
		padding-right: 24px;
		text-align: right;
		background: url(@{plRoot}/images/post-next@2x.png) no-repeat right center;
	}
	.previous, .next{
		a{
			line-height: 16px;
			display: block;
			background-size: 16px 16px;
		}
	}

}

/* Blows up text huge */
.boomboard{
	padding: 100px;
	min-height: 350px;
	h2.hugetext {
		font-size: 8em;
	}
}
.billboard {
	padding: 60px 15px;
	margin: 0 0 2.5em 0;
}

/* @ Previewing Alert */
h2.notavail{
	margin-bottom: 1.5em;
}


/* secondary text */

hr,
.fpost,
.navigation_wrap,
.setup_area,
.fpost .post-thumb img,
.clip .clip-thumb img,
.author-thumb img{
	border-color: @dark-base;
}

	.item-avatar a,
	ins{
		background-color: lighten(@dark-base, 1.6);
	}



/*
 * Text Colors
 ***********************************/
h1,
h2,
h3,
h4,
h5,
h6,
a.site-title,
.entry-title a{
	> a{
		color: @pl-header;
	}
	color: @pl-header;
}

#page{
	color: @pl-text;
}

a{
	color: @pl-link;
	&:hover{
		color: fadeout(@pl-link, 20%);
	}
}

.subhead{
	color: @textColorAlt;
	font-size: 86%;
}



/*
 * Thumbs and other images
 ***********************************/
.post-meta .c_img{
	background: @light-base;
	border: 1px solid lighten(@light-base, 4);
	box-shadow: 0 1px 2px rgba(0,0,0, .4);
	img{
		box-shadow: 0 1px 2px lighten(@light-base, 8);
	}
}


/* @ PageLines Leaf */
#cred {
	text-align: center;
	padding: 15px;

	a.plimage {
		text-align: center;

	}
}

/*
 * Responsive Design
 ****************************************/

body{
	.content img {
		max-width: 100%;
		height: auto;
		width/*\**/: auto\9 /* ie8 */
	}
	.entry_content{
		iframe, video, object{max-width: 100%;}
	}
	.ie8 img {
		width: auto;
		height: auto;
	}
}

@media screen and (max-width:800px){

	.responsive{
		#site .content, #footer .content,
		&.fixed_width #page{
			width: 97%;
		}
		#page #pagelines_content #column-wrap,
		#page #pagelines_content #sidebar-wrap,
		&.fixed_width #site .content{
			width: 100%;
		}
		form {
			margin-left: 0;
		}
		.one-sidebar-right #column-main .mcolumn-pad,
		.two-sidebar-right #column-main .mcolumn-pad {
			padding:15px;
		}
	}

}

@media screen and (max-width:600px) {

	.responsive{
		.navigation_wrap{
			text-align: center;
			.main_nav, .main_nav_container{
				margin-right: 0;
			}
			.searchform {
				display: inline-block;
				position: relative;
				float: none;
				margin-top: 10px;
			}
		}
		#branding .icons {
			position: static;
		}
		#page #pagelines_content {
			#column-wrap #sidebar1, #column-main{
				width: 100%;
			}
		}
		/* Removed to let the 15px padding from 800px viewport above creep in
		section.container .content-pad{
			padding-right: 0;
			padding-left: 0;
		}
		*/
	}

	.scale_text{
		font-size: .85em;
	}

}

@media screen and ( max-width : @resPhoneLandscape ) {
	html {
		-webkit-text-size-adjust: none;
	}

	.responsive{
		#page {
			#pagelines_content .clip {
		        width: 100%;
		    }
			#brandnav .mainlogo-link {
				float: none
			}

			.main_nav .main-nav,
			#brandnav .brandnav-nav{
				margin-top: 10px;
				width: 100%;
				float: none;
			}
			.main_nav{
				ul li{
					text-align: left;
					width: 50%;
					ul, ul li{ width: 100%; }
				}
			}
			.media .post-thumb {
				float: none;
				margin-bottom: 8px;
			}
		}
		.clip_box{
			margin:0;
			padding:0;
			border:0;
		}
		.navigation_wrap .searchfield{
			display:inline-block;
			float: none;
		}
	}
}

#column-wrap,
#sidebar-wrap,
.clip,
#column-main,
#sidebar1,
.content,
#page{
	.transition(all .2s linear);
}