/* Variables */


@siteWidth: 1000px;
@headerBackgroundColor: #ddefef;
@orange: #d55316;
@gray: #bdbdbd;
@teal: #149aa1;

@mainfont: 'Abel';
@boldfont: 'LeagueGothic';
@bracketfont: 'Unna';

@maincolor: #292929;
@headingcolor:#000000;
@linkcolor: @teal;
@hovercolor: desaturate(lighten(@teal, 10%), 10%);

/* Imports */
@import "css/reset.less";
@import "css/base_styles.less";

/* -------------------------------
  SITE LAYOUT & STYLING
------------------------------- */

.entry-content, .post {
	.content-styles;
	h2.bracket{
		padding-bottom:0;
		span.enclosed a{
			color:#000;
			&:hover{
				color:@orange;
			}
		}
	}
}
input[type="text"],
input[type="password"],
input[placeholder="password"]{
	border: none;
	background-color: #e7e7e7;
	//margin-top: 2px;
}

input[type="submit"], input[type="button"]{
	float: left;
	color: #000;
	cursor: pointer;
	border: none;
	background-color: #fff;
	font-family: @boldfont;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding-top: 3px;
}

form.wpcf7-form{
	input[type="text"]{
		border: 2px solid #CCC;
		background:none;
	}
	.add-brackets(24px);
	.bracket{
		float:none;
		br {display:none;}
		span{
			float:left;
			display:block;
			img {
				margin: 5px 0 0 20px;
				position: absolute;
			}
			&.enclosed{
				padding:1px 0 0;
			}
		}
	}
}

[placeholder]{
	color: #3c3c3c;
	font-family: @boldfont;
	font-size: 16px;
	text-transform: uppercase;
}

.lowercase{
	text-transform: lowercase !important;
}

.divider(@pad:70px){
	border-top: 1px solid #e8e8e8;
	margin-top:@pad/2;
	padding-top:@pad/2;
}
.add-brackets(@fontsize:24px){
	span{
		display: inline;
	}
	span.enclosed{
		color: #000;
		padding: 1px 6px 0;
		text-transform: uppercase;
		letter-spacing: 2px;
	}
	span.open, span.close{
		font-family: @bracketfont;
		font-size: @fontsize;
		color: @orange;
	}
}
h2.bracket{
	.clearfix;
	padding-bottom: 20px;
	.add-brackets(26px);
	span.enclosed{
		font-family: @boldfont;
		font-size: 20px;
	}
}
a .bracket span.enclosed:hover{color:@orange !important;}

nav{
	background-color: #000;
	ul.dropdown{
		.clearfix;
		width: @siteWidth;
		margin: 0 auto;
		position: relative;
		font-family: @boldfont;
		font-size: 18px;
		letter-spacing:1px;
		> li:first-child{
			/*margin-right: 60px !important;*/
		}
		
		> li:last-child{
			/*margin-left: 15px;*/
			margin-right: 0 !important;
		}
		
		li{
			float: left; 
			zoom: 1;
			position: relative;
			margin-right: 27px;
			
			a{
				display: block; 
				padding: 13px;
				color: #fff;
				padding-right: 20px;
			}
			&.current-menu-item, &.current-menu-ancestor {
				a{color: @orange;}
			}
			a:hover{
				color: @orange;
			}
			&.sub-arrow{
				background-image: url(images/arrow.png);
				background-repeat: no-repeat;
				background-position: right;
				margin-right: 47px;
				> a{
					cursor:default;
					&:hover{
						color:#fff;
					}
				}
			}
			
			ul.sub-menu{
				width: 200px;
				visibility: hidden; 
				position: absolute; 
				top: 100%; 
				left: 0;
				z-index: 3;
				
				li{
					width: 100%;
					background: #000;
					
					a{
						display: block;
						color: #fff;
					}
					&.current-menu-item {
						a{color: @orange;}
					}
					
					a:hover{
						color: @orange;
					}
				}
			}
		}
	}
}

header{
	background-color: @headerBackgroundColor;
	div#front, div#main{
		.clearfix;
		width: @siteWidth;
		margin: 0 auto;
		position: relative;
		background-image: url(images/les.png);
		background-repeat: no-repeat;
		background-position: 307px 15px;
		padding-bottom: 20px;
		
		div#header-left-side{
			float: left;
			width: 400px;
			padding-top: 20px;
			position: relative;
			z-index: 2;
			height:445px;
			overflow:hidden;
			h1{
				font-family: @boldfont;
				font-size: 98px;
				text-transform:uppercase;
				letter-spacing:4px;
				
				span{
					font-size: 142px;
					color: #fff;
					letter-spacing:8px;
				}
			}
			
			div.bracket{
				.add-brackets(70px);
				span{
					display:block;
					float:left;
				}
				span.enclosed{
					font-family: @mainfont;
					font-size: 18px;
					text-align: center;
					padding: 9px 16px;
					line-height: 1.6em;
				}
			}
			
			div#hear-les{
				.clearfix;
				font-family: @boldfont;
				font-size: 26px;
				letter-spacing: 2px;
				text-transform: uppercase;
				color: #fff;
				padding-top: 20px;
				
				span.learn{
					font-family: @mainfont;
					font-size: 14px;
					letter-spacing: 0;
					text-transform: capitalize;
					color: #000;
				}
			}
			
			.circle{
				background-image: url(images/circle.png);
				background-repeat: no-repeat;
				width: 94px;
				height: 94px;
			}
			
			ul{
				font-family: @boldfont;
				font-size: 14px;
				text-transform: uppercase;
				letter-spacing:1px;
				
				li{
					.circle;
					float: left;
					text-align: center;
					margin: 11px 5px 0 0;
					
					div{
						padding: 32px 5px 0 5px;
						
						a{
							color: #fff;
						}
					}
				}
			}
		}
		
		div#header-right-side{
			float: right;
			width: 590px;
			position: relative;
			text-align: right;
			
			ul#social{
				position: absolute;
				right: 50px;
				top: 29px;
								
				li{
					float: left;
					padding-right: 2px;
				}
			}
			
			div#email-list{
				position: absolute;
				top: 100px;
				right: 52px;
				
				div:first-child{
					font-family: @boldfont;
					font-size: 28px;
					letter-spacing: 1px;
					text-transform: uppercase;
					color: #fff;
				}
				
				div:last-child{
					font-family: @mainfont;
					font-size: 15px;
					text-transform: uppercase;
					padding-top: 3px;
				}
			}
			
			div.bracket{
				position: absolute;
				top: 168px;
				right: 52px;
				.add-brackets(24px);
				span.enclosed{
					font-family: @boldfont;
					font-size: 18px;
					letter-spacing: 1px;
					padding: 4px 3px 0 3px;
				}
			}
		}
	}
	
	div#main{
		background:none;
		div#header-left-side{
			height: auto;
			overflow: visible;
			width: auto;
			h1, h1 span{
				font-size:68px;
			}
			div.bracket{
				span.open, span.close{
					font-size:30px;
				}
				span.enclosed{
					padding:2px 8px 0;
				}
			}
		}
		div#header-right-side{
			width:auto;
			padding:15px 0 0;
			ul#social{
				position:static;
				right: 0;
				top: 0;
			}
		}
	}
	
	div#logos{
		background-color: @gray;
		position: relative;
		z-index: 2;
		height: 63px;
		margin-bottom:30px;
		ul{
			width: @siteWidth;
			margin: 0 auto;
				
			li{
				float: left;
				padding:0 24px;
			}
		}
	}
}


	
div#quote{
	.clearfix;
	width: @siteWidth;
	margin: 0 auto;
	text-align:center;
	div.bracket{
		.clearfix;
		margin: 0 auto;
		padding: 0 0 15px;
		.add-brackets(30px);
		span.enclosed{
			font-family: @boldfont;
			font-size: 20px;
			letter-spacing: 2px;
			padding: 7px 12px 0;
			text-transform:none;
		}
	}
	p {
		margin-bottom:15px;
	}
	div#author{
		float: right;
		font-family: @mainfont;
		font-size: 22px;
		color: #7e7e7e;
		// padding: 7px 0 0;
		text-align:right;
	}
}

section#books{
	.clearfix;
	width: @siteWidth;
	margin: 0 auto;
	.divider();
	article.excerpt{
		width: 480px;
		float: left;
		
		> a > img{
			float: right;
			width: 209px;
			margin:0 0 0 15px;
		}
		
		p, ol, ul{
			line-height: 1.3em;
			font-size: 16px;
		}
		ol{list-style:decimal inside;}
		ul.retail{
			padding-top: 20px;
		}
		
		&.last{
			float:right;
		}
	}
}
ul.retail{
	.clearfix;
	margin:0;
	li{
		float: left;
		padding-right: 18px;
		list-style:none;
	}
}
ul.praise{
	margin:0;
	li{
		list-style:none;
		width:100%;
		.clearfix;
		.divider(40px);
		blockquote{
			color: #444;
			font-family: LeagueGothic;
			font-size: 1em;
			padding: 5px 0 5px 60px;
			letter-spacing:1px;
		}
		cite{
			color: #888;
			font-size: 0.9em;
			font-style: italic;
			text-align: right;
			width: 70%;
		}
	}
}
ul.logos{
	margin:0 0 20px;
	text-align:center;
	.clearfix;
	li{
		float: left;
		padding: 0 8px 0 0;
		list-style:none;
		img{
			margin:0;
			padding:0;
		}
	}
}
.post-type-archive-books section#books{
	border-top:none;
	margin:0 auto;
	padding:0;
}
form{
			
	div.text-field, div.moonray_form_field_wrapper{
		.clearfix;
		padding: 6px;
		margin-bottom: 8px;
		background-color: #e7e7e7;
		width: 237px;
		br {display:none;}
		div.label, label{
			display: inline;
			font-family: @boldfont;
			font-size: 16px;
			text-transform: uppercase;
			padding: 4px 5px 0 0;
		}
		
		input[type="text"]{
			display: inline;
			width: 160px;
			&.moonray_input{
				//margin-top:8px;
			}
		}
	}
	div.bracket{
		float: right;
		.add-brackets(25px);
		span{
			display:block;
			float:left;
		}
		span.enclosed{
			padding:0;
			&:hover{color:@orange !important;}
		}
	}
	&.moonray_form{
		div.bracket{
			float:none;
			span.enclosed{
				padding:1px 0 0;
				&:hover{
					color:@orange;
				}
			}
			br {display:none;}
		}
	}
}
aside{
	&.front{
		.clearfix;
		width: @siteWidth;
		margin: 0 auto;
		.divider();
		padding-bottom:20px;
	}
	
	div.widget{
		float: left;
		padding-right: 30px;
	}
		
	div#sign-up{
		width: 248px;
			
		h2.widgettitle{
			font-family: @boldfont;
			font-size: 24px;
			text-transform: uppercase;
			line-height: 1.2em;
			letter-spacing:2px;
			width:210px;
		}
		
		h3.subtitle{
			font-size: 16px;
			color: @orange;
			text-transform: uppercase;
			padding: 10px 0;
			font-family:@mainfont,Arial,sans-serif;
			font-weight:normal;
			letter-spacing:1px;
		}
		.moonray_form div.bracket{
			float:right;
			span.enclosed{padding:0;}
		}
	
		
	}
	
	div#twitter{
		width: 200px;
		ul li{
			padding-bottom: 15px;
			span{
				display:block;
			}
			span.entry-content{
				font-family: @boldfont;
				letter-spacing:1px;
			}
			span.entry-meta{
				padding-top: 5px;
				a{
					color: @gray;
					&:hover{color:darken(@gray, 10%);}
				}
			}
		}
	}
}
aside.sidebar{
	width:275px;
	float:right;
	margin:0;
	h2.widgettitle{
		font-size: 22px;
	}
	#quote{
		font-size: 18px;
		font-family:@boldfont;
		letter-spacing:1px;
		line-height: 1.2em;
		width:100%;
		text-align:left;
		#author{
			font-size:15px;
			color:@teal;
			//font-weight:normal;
			font-family:@mainfont;
		}
	}
	div.widget{
		float:none;
		padding:0;
		width:100%;
		.divider(40px);
		.clearfix;
	}
	div#twitter, div#sign-up{width:auto;}
	div.widget_utcw{
		.widgettitle{display:none;}
	}
	.widget.BFW{
		margin:0;
		padding:0;
		border-top:none;
		input[type="submit"], input[type="button"]{
			float:none;
		}
	}
	
}
section#content{
	.clearfix;
	width: @siteWidth;
	margin: 0 auto;
	.narrow{
		width:650px;
		float:left;
	}
	h1.pagetitle{
		margin-bottom:20px;
	}
	.return-to-blog{
		width:100%;
		text-align:center;
	}
	.index-desc{
		.content-styles;
		.clearfix;
		margin-bottom:20px;
	}
	.breadcrumb{
		font-size:0.9em;
		margin:0 0 20px;
		img{
			float: left;
			padding:3px 5px 0 0;
			margin:0;
		}
	}
}

#article-index, #single{
	.hentry{
		margin-bottom:60px;
	}
	.article-meta, .postmeta{
		width:100%;
		.clearfix;
	}
	.article-date, .tags{display:inline;}
	.share, .readmore{float:right;}
	.excerpt, .postmeta{.divider(20px);.clearfix;}
	.article-date{
		color:@teal;
		font-size:14px;
		text-transform:uppercase;
	}
	h2.article-title{
		font-size: 1.5em;
		margin: 5px 0 0;
		padding: 0;
		text-transform: none;
		a{ 
			color:#000;
			&:hover{color:lighten(#000, 50%);}
		}
	}
	.excerpt {
		img.thumb{
			float:left;
			padding:5px 10px 0 0;
			margin:0;
		}
		p {margin:0;}
	}
	.tags{
		font-size:14px;
		color:#616161;
		img{
			float:left;
			padding: 2px 10px 0 0;
			margin:0;
		}
	}
	.readmore{
		.bracket{
			.add-brackets(24px);
			span.enclosed{
				font-family:@boldfont;
				font-size: 16px;
				letter-spacing: 1px;
			}
		}
	}
}
.signup_page{
	margin:0;
	padding:0;
	h2.widgettitle{
		font-family: @boldfont;
		font-size: 24px;
		text-transform: uppercase;
		line-height: 1.2em;
		letter-spacing:2px;
	}
	
	h3.subtitle{
		font-size: 16px;
		color: @orange;
		text-transform: uppercase;
		padding: 0;
		font-family:@mainfont,Arial,sans-serif;
		font-weight:normal;
		letter-spacing:1px;
	}
}
footer{
	width: @siteWidth;
	.clearfix;
	margin: 0 auto;
	.divider(20px);
	padding-bottom:10px;
	div.footer-left-side{
		float: left;
		font-family: @boldfont;
		font-size: 14px;
		text-transform: uppercase;
		padding-top: 5px;
		letter-spacing:1px;
	}
	
	form.footer-right-side{
		float: right;
		
		input[type="text"],
		input[type="password"],
		input[placeholder="password"]{
			float: left;
			height: 20px;
			margin-right: 5px;
		}
		
		div.bracket{
			float: right;
			.add-brackets(25px);
			span{
				display:block;
				float:left;
			}
			span.enclosed{
				padding:0;
				&:hover{color:@orange !important;}
			}
		}
	}
}
.glossary-archive{
	margin:0 0 0 15px;
	p {
		margin:0 0 5px;
		padding:0;
		font-family:@boldfont;
	}
}
section#content.glossary-single{
	width:100%;
}
div.page-title-sub-menu{
	width:100%;
	.clearfix;
}
div.subnav-menu{
	display: inline;
    position: relative;
    text-align: right;
	ul {
		margin:0;
		padding:0;
		li{
			list-style:none;
		}
	}
	li{display:none;}
	li.current-menu-ancestor, li.current-menu-ancestor ul.sub-menu li{display:inline;}
	li.current-menu-ancestor > a {display:none;}
	li.current-menu-ancestor ul.sub-menu li{
		&.current-menu-item{display:none;}
		a {padding: 0 5px 0 0;}
		&:after{content:"|";}
		&:last-child:after{content:"";}
	}
	
}
.flexslider{
	text-align:center;
	margin: 0 0 10px;
    padding: 0 0 10px;
	width:100%;
	ul, ol{
		margin:0;
		padding:0;
	}
	.slides img{margin:0 auto;}
	ol.flex-control-nav{
		margin:0 0 24px 0;
		padding:0;
	}
}
ul{
	&.press{
		padding:0;
		margin:0;
		li {
			padding:0;
			margin:0 0 15px 0;
			list-style:none;
			span{
				font-style:italic;
			}
		}
	}
	
}

@media only screen and (device-width: 768px) {
	nav {
		width:100%;
		padding:0 20px;
		ul.dropdown {
			li{
				margin-right:15px;
				&.sub-arrow{
					margin-right:25px;
				}
			}
		}
	}
	header{
		width:100%;
		div#front{
			padding:0 20px;
			div#header-left-side{
				h1{
					font-size:48px;
					span{
						font-size:68px;
					}
				}
				div.bracket{
					.clearfix;
					span {
						&.open, &.close{
							font-size:50px;
						}
						&.enclosed{
							font-size:14px;
						}
					}
				}
				div#hear-les {
					font-size:24px;
					span.learn{display:none;}
				}
				ul{
					font-size:11px;
				}
			}
		}
	}
}