﻿/*************************************
 * Lightbox css
 * Contains lightbox content styles
 *
 *************************************/

/*----------------------------Setting to ensure lightbox is hidden initially--------------------------------*/
.tile-pre{
	display:none;
}

/*----------------Added a top margin so that lightbox shows up properly on mobile devices-------------------*/
#fancybox-wrap {
/*	margin: 20px 0 0 0;*/
}

/*----------------Lightbox background color-------------------*/
#fancybox-outer {
    background-color:#fff;
    /*background-color:#e2e2e2;*/
}

/*----------------Lightbox border color-------------------*/
#fancybox-content {
	/*border-color: #000;*/
	border-color: #e2e2e2;
}

/*----------------------------Set the width of the lightbox--------------------------------*/
.lb-article,
.lb-portfolio{
	width:640px;
}

/*----------------------------Settings for a lightbox that just has a quote--------------------------------*/
.lb-quote{
	color:#fbfbfb;
	margin:50px 20px 20px 20px;
}

/*----------------------------Main title label within lightbox--------------------------------*/
.lb-title,
.lb-project{
	/*color:#fbfbfb;*/
	/*padding:25px 0 0 30px;*/
	color:#0d1e87;
	padding:5px 20px 0px 30px;
}
.lb-title a,
.lb-project a{
	/*color:#fbfbfb;*/
	color:#0d1e87;
	text-decoration:none !important;
}

/*----------------------------Main body text within lightbox--------------------------------*/
.lb-excerpt,
.lb-desc{
	/*
	color:#fff;
	padding:10px 30px 10px 30px;*/
    color:#404040;
	padding:10px 30px 0px 30px;	
}
.lb-excerpt a:hover,
.lb-desc a:hover{
	text-decoration:underline;
}

/*-------For lightboxes with column layout, this sets the width for the text column of the lightbox-------------*/
.lb-port-cont{
	float:right;
	max-width:310px;
	display:block;
}
/*----------------------------Video stuff--------------------------------*/
.lb-video p{
	padding:0 30px 20px 30px;
	color:#bfbfbf;
}
.lb-video p a:first-child{
	font-size:2.2em;
	color:#fbfbfb;
	display:block;
	padding-top:25px;
	padding-bottom:20px;
}
.lb-video p:last-child{
	padding-bottom:30px;
}
.lb-video object,
.lb-video object embed{
	width:100%;
	z-index:100;
}

/*----------------------------Settings for image section of lightbox--------------------------------*/
.tile-pre-img{
	max-width:100%;
	height:auto;
	display:block;
}

/*----------------------------Settings for text section of lightbox (article = row layout, portfolio = column layout)--------------------------------*/
.article-img{
	position:relative;
}
.portfolio-img{
	max-width:330px;
	float:left;
}

/*----------------------------Date labels within lightbox--------------------------------*/
.article-date{
	float:right;
	margin:5px 30px 0 0;
	color:#7f7f7f;
	position:relative;
}
.article-date span.date{
	font-size:6em;
}
.article-date span.month{
	font-size:2em;
	position:absolute;
	right:5px;
	top:70px;
}

/*----------------------------Sub-title label within lightbox--------------------------------*/
.postcat,
.projectcat{
	color:#404040;
	margin:10px 0 0 30px;
	font-size:1.8em;
	display:inline-block;
	font-weight: 800;
}
.article-cat{
	position:absolute;
	left:0;
	bottom:-15px;
	font-size:2.4em;
	/*color:#fff;*/
	color:#404040;
	padding:0 10px;
	font-weight: 800;	
}

/*----------------------------Call to Action link within lightbox--------------------------------*/
.exp-button{
	text-decoration:none;
	transition:all 0.3s;
	-moz-transition:all 0.3s;
	-webkit-transition:all 0.3s;
	-o-transition:all 0.3s;
	color:#0d1e87;
	font-weight: 800;
}
.exp-button:hover{
	color:#0d1e87;
	text-decoration:underline;
	font-weight: 800;
}


/*----------------------------Toggle Buttons within lightbox--------------------------------*/
.career-snippet .toggle-button{
    font-size:1.5em;
    color:#fff;
	background-color: #404040;    
}

.career-snippet .toggle-button:hover{
    background-color:#0d1e87;
    color: #fff;
}
.career-snippet .toggle-content{
    border:1px solid;
	border-top:0;
	padding:0px 20px 0px 20px;
	border-color: #9DA9AE;    
}


/*----------------------------Mobile Version--------------------------------*/
@media all and (max-width:640px) {
    .lb-article,
    .lb-portfolio{
	    width:auto;
    }
    .portfolio-img{
	    max-width:100%;
	    float:none;
    }
    .lb-project,
    .lb-desc{
	    float:none;
    }
    .lb-port-cont{
	    float:left;
    }
}