/*
Theme Name: Telluride
Description: Requires the 23K DARWIN Publishing Platform
*/

/* --- CHANGE LOG


*/


/*======================================================================================
		GOOGLE FONTS
======================================================================================*/

@import url(http://fonts.googleapis.com/css?family=Alegreya:400italic);
@import url(http://fonts.googleapis.com/css?family=Alegreya+SC);

	
/*======================================================================================
		MIXINS
======================================================================================*/

.border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }
.box-shadow(@shadow) { -webkit-box-shadow: @shadow; -moz-box-shadow: @shadow; box-shadow: @shadow; }
.opacity(@opacity) { opacity: @opacity / 100; filter: ~"alpha(opacity=@{opacity})"; }
.center-block() { margin-left: auto; margin-right: auto;
	display: block;
}
.clearfix { *zoom: 1;
  
  &:before, &:after { line-height: 0;
    display: table; content: "";
  }
  &:after { clear: both; }
}
#gradient {
 .vertical(@startColor: #555, @endColor: #333) {
    background-color: mix(@startColor, @endColor, 60%);
    background-image: -moz-linear-gradient(top, @startColor, @endColor);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor));
    background-image: -webkit-linear-gradient(top, @startColor, @endColor);
    background-image: -o-linear-gradient(top, @startColor, @endColor);
    background-image: linear-gradient(to bottom, @startColor, @endColor);
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor)));
  }
}


/*======================================================================================
		VARIABLES
======================================================================================*/

.alegreya(@font-size, @line-height) { font-family: 'Alegreya', sans-serif; font-size: @font-size; line-height: @line-height; text-transform: lowercase; }
.alegreya-sc(@font-size, @line-height) { font-family: 'Alegreya SC', serif; font-size: @font-size; line-height: @line-height; text-transform: lowercase; }
.arial(@font-size, @line-height) { font-family: Arial, Helvetica, sans-serif; font-size: @font-size; line-height: @line-height; }

@gray: #58595b;
@red: #7c2c2d;

.red-gradient { #gradient > .vertical(#a83e42, #652325); }
.dark-shadow { text-shadow: 2px 2px 1px #333; }
.light-shadow { text-shadow: 1px 1px 1px #fff; }


/*======================================================================================
		GLOBAL
======================================================================================*/

body { background: url('_img/bg-page.jpg') repeat 0 0; }


/*=================================================================
		GLOBAL - Typography
=================================================================*/

h1, h2, h3, h4, h5, h6 { margin: 0 0 20px; 
	color: @gray; font-family: 'Alegreya SC', sans-serif;
	clear: both;
}

h1 { margin-bottom: 25px;
	.alegreya-sc(49px, 54px); font-weight: normal; .light-shadow;
	
	em { .alegreya(35px, 54px); font-style: italic; }
}
h2 { margin-bottom: 10px;
	.alegreya-sc(32px, 36px); font-weight: normal; .light-shadow;
}
h3 { .alegreya-sc(26px, 32px); font-weight: normal; .light-shadow; }
h4 { .alegreya-sc(22px, 28px); font-weight: normal; .light-shadow; }
h5 {  }
h6 {  }

p { margin: 0 0 20px;
	color: @gray; .arial(15px, 22px);
}
.content li { color: @gray; .arial(15px, 22px); }

a, a:hover, a:active { color: @red; }
a:focus { text-decoration: none; }


/*======================================================================================
		MASTHEAD
======================================================================================*/

#masthead, #masthead-frontpage { position: relative; 
	background: url('_img/bg-header.jpg') repeat-x 0 0;
	overflow: hidden;
	
	div.container { position: relative; height: 283px;
		
		div.row { margin-left: 0; }
	}
	a#masthead-logo { position: absolute; top: 82px; left: 0; width: 170px; height: 115px;
		text-indent: -9999px;
		background: url('_img/telluride.png') no-repeat 0 0;
		display: block; z-index: 10;
	}
	form#searchform { position: relative; margin: 4px 0 0 15px;
		float: right;
		
		label { display: none; }
		input#s { width: 190px; padding-left: 23px;
			font-size: 11px; line-height: 12px;
			background: url('_img/bg-search.png') no-repeat 0 0; border: none;
		}
		input#searchsubmit { position: absolute; top: 4px; right: 1px; width: 30px;
			.opacity(0);
		}
	}
	p#masthead-message { color: #fefefe; .arial(11px, 36px); text-align: right;
		float: right;
		
		a { color: #fefefe; text-decoration: none;
			
			&:hover, &:active { text-decoration: underline; }
		}
	}
}

#masthead-frontpage { background: url('_img/bg-header-frontpage.jpg') repeat-x 0 0;
	
	div.container { 
		height: 455px;
	}
	h1 { position: absolute; top: 100px; left: 0;
		.arial(12px, 12px);
	}
}


div#bb-container { height: 250px; margin: -250px 0 0 0;
	overflow: hidden;
}
div#bb { position: relative; width: 1240px; height: 250px; margin-left: -620px; left: 50%; 
	background: url('_img/billboard-camp.png') no-repeat 0 0;
	overflow: hidden;
}

body.page-id-8 div#bb,
body.page-id-16 div#bb { background: url('_img/billboard-pros.png') no-repeat 0 0; }
body.page-id-10 div#bb { background: url('_img/billboard-hotel.png') no-repeat 0 0; }
body.archive div#bb,
body.single-post div#bb { background: url('_img/billboard-gallery.png') no-repeat 0 0; }


/*=================================================================
		MASTHEAD - Primary Navigation
=================================================================*/

div#masthead-navigation { position: absolute; top: 98px; left: 164px; width: 780px; height: 65px;
	z-index: 9;
	
	ul#masthead-menu { margin: 0;
		
		li { list-style-type: none;
			
			a { position: relative; height: 45px; padding: 10px 27px;
				color: #fff; .alegreya-sc(18px, 21px); text-align: center; .dark-shadow;
				background: url('_img/bg-nav.png') repeat-x 0 0;
				display: block; float: left; z-index: 9;
				
				&:hover, &:active { text-decoration: none;
					background-position: 0 -70px;
				}
				&:before { position: absolute; top: 0; left: 0; width: 3px; height: 70px;
					background: url('_img/bg-nav-before.png') no-repeat 0 0;
					content: '';
				}
				span { .alegreya(16px, 18px); font-style: italic; }
			}
			&.current-menu-item a { background-position: 0 -70px; }
			&#menu-item-26 a { padding: 20px 27px 0 27px;
				.border-radius(0 5px 5px 0);
			}
		}
	}
}


/*======================================================================================
		PAGES
======================================================================================*/

div#main { background: url('_img/bg-page-bottom.png') repeat-x bottom center;
	.box-shadow(inset 0 2px 0 #fff);
	
	div#breadcrumbs { height: 40px; margin: 2px -20px 25px 0;
		background: url('_img/bg-breadcrumbs.jpg') repeat-x 0 0;
		.border-radius(0 0 0 5px);
		
		ul { margin: 0 0 0 15px; }
		a:hover, a:active { text-decoration: underline; }
		a:after { width: 5px; height: 13px; margin-left: 8px;
			color: #080285; .arial(13px, 13px);
			content: '›';
		}
		a, span { padding: 0 5px;
			color: #808285; .arial(13px, 40px);
		}
	}
	hr { margin: 40px 0;
		border: 1px solid #b7b8b9;
	}
}

#page.content {
	
	a:hover, a:active { text-decoration: underline; }
	
	.span6 p { margin-bottom: 5px; }
}
img.header { margin-bottom: 20px;
	.border-radius(3px); .box-shadow(~"0 4px 1px -2px #eaeaea, 0 10px 5px -4px #777");
}


a.btn { position: relative; margin-bottom: 41px; padding: 0 65px 0 20px;
	color: #fff; .alegreya-sc(27px, 50px); .dark-shadow;
	.red-gradient; border: none;
	.box-shadow(1px 1px 2px #555);
	
	&:before { .alegreya(23px, 50px); font-style: italic;
		content: 'next: ';
	}
	&:after { position: absolute; top: 5px; right: 0; width: 60px; height: 40px;
		background: url('_img/btn-after.png') no-repeat 0 0;
		content: '';
	}
	&:hover, &:focus, &:active { color: #fff; text-decoration: none;
		background-position: center; background: @red;
	}
	&:active { margin: 1px 0 40px 1px;
		.box-shadow(none);
	}
}
div#main a.btn:hover, div#main a.btn:active { text-decoration: none; }

body.search #page { padding: 30px 0;
	
	div.result { margin-bottom: 10px; }
	a:hover, a:active { color: lighten(@red, 15%); }
}


/*======================================================================================
		FRONTPAGE
======================================================================================*/

body.home div#main { .box-shadow(none); }
	
div#billboard-container { position: absolute; margin-top: 36px; margin-left: -160px; }
div.rotating-banner { position: relative;
	
	ul.rotating-banner-nav { position: absolute; top: 140px; left: 1010px; margin: 0; padding: 0;
		z-index: 11;
		
		li { width: 15px; height: 12px;
			text-indent: -9999px;
			background: url('_img/bg-billboard-nav.png') no-repeat 0 0;
			display: block; float: left; cursor: pointer;
			
			&.active { background-position: -15px 0; }
		}
	}
	div#video { margin: -25px auto; }
}
div#bb-vid { position: relative;
	
	&:before { position: absolute; top: 0; left: 100px; width: 150px; height: 100%;
		background: linear-gradient(to right, rgba(47, 35, 37, 1), rgba(47, 35, 37, 0));
		content: ''; z-index: 10;
	}
	&:after { position: absolute; top: 0; right: 100px; width: 150px; height: 100%;
		background: linear-gradient(to right, rgba(47, 35, 37, 0), rgba(47, 35, 37, 1));
		content: ''; z-index: 10;
	}
	.vjs-controls { z-index: 15; }
}

#frontpage { background: url('_img/bg-page-bottom.png') repeat-x bottom center;
	.box-shadow(inset 0 2px 0 #fff);
	
	p { margin: 10px 0;
		.alegreya-sc(15px, 24px); .light-shadow;
		
		em { padding-right: 5px;
			.alegreya(22px, 24px); text-transform: none; font-style: italic;
		}
	}
	div.cal { position: relative; width: 300px; height: 154px; margin-top: -36px;
		background: url('_img/bg-sidebar-calendar.png') no-repeat 0 0;
		z-index: 2;
		
		p { position: absolute; top: 30px; left: 20px; width: 175px;
			color: #fff; .arial(13px, 18px); .dark-shadow;
			
			strong { .alegreya-sc(22px, 26px); font-weight: normal; }
		}
		a { position: absolute; top: 118px; left: 20px;
			color: #fff; .alegreya-sc(22px, 26px); .dark-shadow;
			
			&:hover, &:active { color: #eee; text-decoration: none; }
		}
	}
	a.btn { margin-top: 1px; margin-bottom: 10px; padding-right: 20px;
		.alegreya-sc(15px, 22px);
		float: right;
		
		&:before { line-height: 16px;
			content: '';
		}
		&:after { width: 0; height: 22px;
			background: none;
		}
	}
}

#frontpage-content { margin-top: 40px; }

body.home #main {	
	div.span4 {
		p { margin-bottom: 0; }
		img { .border-radius(3px 3px 0 0); }
		h2 { margin: -1px 0 0 0;
			
			a { color: #fff; .alegreya-sc(22px, 40px); .dark-shadow;
				text-align: center;
				.red-gradient; .box-shadow(inset 0 2px 0 lighten(@red, 25%));
				display: block;
				
				&:hover, &:active { background: @red; }
			}
		}
		h2 + p, a + p, img + p { margin-bottom: 30px; padding: 15px;
			.arial(13px, 18px);
			background: #fff;
			.border-radius(0 0 3px 3px); .box-shadow(0 7px 8px -8px #333);
		}
	}
	h2 { margin-top: 15px;
		
		a:hover, a:active { color: lighten(@red, 15%); }
	}
	p { margin-bottom: 50px;
		
		a:hover, a:active { color: lighten(@red, 15%); }
	}
	ul.publish { list-style-type: none;
		
		span.blog-title { color: @red; font-weight: bold;
			
			&:hover, &:active { color: lighten(@red, 15%); }
		}
		li { position: relative; }
		div.video-flag { position: absolute; top: 0; left: 0; width: 300px; height: 100px;
			background: url('_img/video-play.png') no-repeat center center;
		}
	}

	div#sponsors { width: 100%; margin-top: 20px; margin-bottom: 20px;
		background: url('_img/bg-sponsors.png') no-repeat 0 0;
		.border-radius(3px); .box-shadow(inset 0 2px 3px #999);
		
		p { margin: 0 70px 0 0; padding: 0 15px;
			.alegreya-sc(33px, 40px); .light-shadow;
			display: inline; float: left;
			
			em { .alegreya(19px, 40px); }
		}
		img { margin: 5px 50px 0 0;
			float: left;
		}
	}
}


/*======================================================================================
		SESSIONS / CALENDAR
======================================================================================*/

body.archive div#main div#breadcrumbs, 
body#sitemap div#main div#breadcrumbs { .border-radius(0 0 5px 5px); }

div#session { width: 620px; margin-bottom: 15px;
	background: url('_img/bg-breadcrumbs.jpg') repeat 0 0;
	float: left;
	.border-radius(3px); .box-shadow(inset 0 2px 3px #999);
	
	p { margin-bottom: 0; padding: 10px 20px;
		.alegreya-sc(33px, 40px); .light-shadow;
		
		em { padding-right: 5px;
			.alegreya(19px, 26px);
		}
	}
}

div#choose-session { 
	background: url('_img/bg-breadcrumbs.jpg') repeat 0 0;
	float: right;
	.border-radius(3px); .box-shadow(inset 0 2px 3px #999);
	
	p { margin-bottom: 0; padding: 10px 20px;
		.arial(15px, 40px); .light-shadow;
		
		a { color: @gray;
			
			&:hover, &:active { color: @red; }
		}
	}
}

ul#post-photo-gallery { margin: 20px 0 0 0;
	clear: both;
	
	li { margin: 10px 20px 10px 0;
		list-style-type: none;
		float: left;
		
		a { position: relative; 
			border: 10px solid #fff;
			display: block;
			.box-shadow(0 7px 8px -8px #333);
		}
		p { margin-top: 15px;
			text-align: center;
			
			a { color: @gray;
				border: none;
				.box-shadow(none);
				
				&:hover, &:active { color: @red; }
			}
		}
	}
	div.gallery-hover { position: absolute; top: 0; left: 0; width: 195px; height: 130px;
		background: url('_img/gallery-hover.png') no-repeat 0 0;
		display: none;
	}
}

body.post-type-archive ul#post-photo-gallery li a:hover { border: 10px solid #f9f9f9; }
body.post-type-archive ul#post-photo-gallery li p a:hover { border: none; }

div#pagination { margin-top: 20px;
	
	a { margin-right: 5px;
		color: @red; .alegreya(36px, 36px);
		
		&:hover, &:active { color: lighten(@red, 15%); }
	}
	span { margin-right: 5px;
		color: @gray; .alegreya(36px, 36px);
	}
}


/*======================================================================================
		CALENDAR
======================================================================================*/

div#sessions { margin-top: 30px; padding: 20px 20px 5px 20px;
	background: url('_img/bg-sessions.png') repeat-x center bottom;
	.border-radius(3px); .box-shadow(inset 0 2px 3px #999);
	
	p { .arial(15px, 34px);
		float: left;
	}
	p.session-name { width: 310px;
		font-weight: bold;
	}
	p.session-status { position: relative; width: 180px; padding-left: 50px;
		&:before { position: absolute; top: 0; left: 0; width: 34px; height: 34px;
			background: url('_img/bg-available.png') no-repeat 0 -34px;
			content: '';
		}
		&.available:before { 
			background-position: 0 0;
		}
	}
}


/*======================================================================================
		SITEMAP
======================================================================================*/

#sitemap { margin-bottom: 40px;
	
	div.menu li { margin-bottom: 10px;
		list-style-type: none;
		
		a { .alegreya-sc(22px, 22px);
			
			&:hover, &:active { color: lighten(@red, 15%); }
		}
	}
}


/*======================================================================================
		POSTS
======================================================================================*/

#post {
	h1 { margin-bottom: 5px;
		line-height: 45px;
	}
	p.byline { .alegreya-sc(22px, 28px); .light-shadow; }
	img { .box-shadow(~"1px 1px 2px #fff, -1px -1px 2px #fff");
		
		&.alignleft { margin: 0 20px 15px 0; }
		&.alignright { margin: 0 0 15px 20px; }
	}
}

div.addthis_toolbox { margin-bottom: 40px; }


/*======================================================================================
		VIDEO POSTS
======================================================================================*/

#post iframe { margin-bottom: 20px; }


/*======================================================================================
		POST ARCHIVE
======================================================================================*/

ul#preview-horizontal { margin: 40px 0 0 0;
	
	li { margin-bottom: 30px; padding-bottom: 30px;
		list-style-type: none; border-bottom: 1px solid #ccc;
		.box-shadow(~"0 2px 1px -1px #fff");
		
		&:last-child { border-bottom: none; .box-shadow(none); }
		img { .box-shadow(~"1px 1px 2px #ddd, -1px -1px 2px #ddd");
			
			&:hover { .box-shadow(~"1px 1px 2px #bbb, -1px -1px 2px #bbb"); }
		}
	}
	p.byline { margin-bottom: 0;
		.alegreya-sc(16px, 20px);
	}
	h2 { line-height: 32px;
		
		a:hover, a:active { color: lighten(@red, 15%); }
	}
	div.span3 { position: relative; }
	div.video-flag { position: absolute; top: 0; left: 0; width: 220px; height: 140px;
		background: url('_img/video-play.png') no-repeat center center;
	}
}

body.category-blog div#archive { min-height: 800px; }


/*======================================================================================
		SIDEBAR
======================================================================================*/

aside.sidebar { margin-top: 2px; margin-bottom: 2px;
	background: url('_img/bg-sidebar.jpg') repeat 0 0;
	
	h3 a { color: @gray;
		
		&:hover, &:active { color: @red; text-decoration: none; }
	}
	p { .arial(13px, 18px); }
	a:hover, a:active { text-decoration: underline; }
	img.alignleft { margin: 0 10px 5px 0; }
	img.alignright { margin: 0 0 5px 10px; }
	div.cal, div.gal { position: relative; width: 300px; height: 154px; margin-top: -36px;
		background: url('_img/bg-sidebar-calendar.png') no-repeat 0 0;
		z-index: 2;
		
		p { position: absolute; top: 30px; left: 20px; width: 175px;
			color: #fff; .arial(13px, 18px); .dark-shadow;
			
			strong { .alegreya-sc(22px, 26px); font-weight: normal; }
		}
		a { position: absolute; top: 118px; left: 20px;
			color: #fff; .alegreya-sc(22px, 26px); .dark-shadow;
			
			&:hover, &:active { color: #ccc; text-decoration: none; }
		}
	}
	div.gal { background: url('_img/bg-sidebar-gallery.png') no-repeat 0 0; }
	div.widget { padding: 20px 20px 5px 20px;
		border-top: 2px solid #eee; border-bottom: 1px solid #aaa;
		
		&:first-child { padding: 0; }
	}
	ul#preview-related { margin: 0;
		list-style-type: none;
		
		li { margin-bottom: 20px; padding-bottom: 15px;
			border-bottom: 1px solid #bbb;
			.box-shadow(0 2px 1px -1px #eee);
			
			&:last-of-type { border-bottom: none; .box-shadow(none); }
		}
		img { margin-right: 15px; }
		h5 { width: 160px; margin-bottom: 10px;
			.arial(13px, 18px);
			clear: none; float: left;
			
			a { color: @gray;
				
				&:hover, &:active { color: @red; }
			}
		}
	}
}


/*======================================================================================
		FOOTER
======================================================================================*/

#footer { 
	> div.container { width: 100%; }
	
	div.widget { margin-top: 25px; padding: 15px;
		background: url('_img/bg-footer-widget.png') no-repeat 0 0;
		
		h3 { color: #fff; font-size: 20px; line-height: 24px; .dark-shadow; }
		h4 { margin-bottom: 0;
			color: #fff; .arial(12px, 20px); text-transform: none; text-shadow: none;
		}
		p, a { color: #a7a9ac; font-size: 11px; line-height: 17px; }
		a:hover { text-decoration: underline; }
	}
	ul#preview-footer { margin-bottom: 20px;
		
		li { position: relative; margin-right: 10px;
			list-style-type: none;
			float: left;
			
			&:last-of-type { margin-right: 0; }
			a { display: block; }
			img { border: 1px solid #999;
				
				&:hover, &:active { border: 1px solid #ccc; }
			}
		}
		div.video-flag { position: absolute; top: 0; left: 0; width: 56px; height: 56px;
			background: url('_img/video-play-mini.png') no-repeat center center;
		}
	}
}
.tooltip-inner { width: 300px; white-space: pre-wrap;
	border: 1px solid #555;
	.box-shadow(~"2px 2px 5px #000, -2px -2px 5px #000");
}

#footer-main { background: #35292b;
	.box-shadow(inset 0 10px 30px #111);
}

#footer-toolbar { .red-gradient;
	div.container { height: 25px; }
	ul#footer-menu li { margin-right: 20px;
		list-style-type: none; float: left;
		
		a { color: #fff; .arial(11px, 17px);
			
			&:hover, &:active { text-decoration: underline; }
		}
	}
	span { margin-bottom: 0; padding-right: 20px;
		color: #fff; .arial(11px, 25px);
		float: left;
	}
}