@charset "utf-8";
/* LESS CSS Document */
/* Dynamic CSS styles for the callouts on the front page */

@calloutbox-width: 945px;
@calloutbox-count: 5;

#calloutbox {
	width: @calloutbox-width;
	postion: relative;
}

@callout-width: 189px; // was 209px 189px
// left-interior margin calculation; i.e. left margin for all but first callout box
// This formula may need to be corrected to round the integer results correctly.
@callout-marg-li: ( @calloutbox-width  - ( @calloutbox-count * ( @callout-width  ) ) ) / (@calloutbox-count - 1);
@callout-marg-l: 14px;
@callout-marg-r: 13px;

.callout-margins(@left,@right) {
	margin-right: @right;
	margin-left: @left;
}


.box_shadow {
    position:relative;
    box-shadow: -3px 5px 8px rgba(0, 0, 0, 0.80);
    -moz-box-shadow: -3px 5px 8px rgba(0, 0, 0, 0.80);
    -webkit-box-shadow: -3px 5px 8px rgba(0, 0, 0, 0.80);
}
.callouts
{
	float: left;
	width: @callout-width;
	background-image: url(../../images/callout_sprite.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	margin-top: 8px;
	margin-bottom: 13px;
	height: 220px;
	.box_shadow;
}

.callouts p
{
	margin: 0 0 1em 0;
}

@callouttext-margins: 12px;
@callouttext-height: 135px;
@callouttext-padding-top: 14px;

/* General styles for components of callouts */
.calloutheader
{
	color: #FFF;
	font-size: 18px;
	text-align: left;
	margin: 34px @callouttext-margins 0 @callouttext-margins;
}
.callouttext
{
	color: #000;
	line-height: 1.25em;
	text-align: left;
	margin: 0 @callouttext-margins;
	padding-top: 14px;
	background-color: transparent;
	overflow:hidden;
	height: 135px;
}
/* Styles for the blog iframe. It has to fit inside a callout text box. */
/* The PHP code must also be adjusted to limit string lengths */
#blog_summary {
	width: @callout-width - ( 2 * @callouttext-margins);
	height: @callouttext-height;
}

.callouttext a
{
	text-decoration: underline;
}

.calloutfooter
{
	width: @callout-width - ( 2 * @callouttext-margins);
	text-align: right;
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 0 15px 0 15px;
}

/* Colors */
/* Some of the spot colors used on the front page. We really ought to do this for all spot color in the whole site. */
	@dark-red: #DF1C24;
	@dark-yellow: #A88029;
	@dark-violet: #6D5789;
	@dark-aqua: #577389;
	@dark-green: #707453;
/* Background positions (-bp) by corresponding color */
	@dark-red-bp: -1px;
	@dark-yellow-bp: -209px;
	@dark-violet-bp: -834px;
	@dark-aqua-bp: -418px;
	@dark-green-bp: -626px;

/* Specific styles for individual callouts */
#blogcallout
{
	background-position: @dark-red-bp 0;
	.callout-margins(0,0);
}

#blogcallouttext 
{
	overflow: inherit;
}

#blogcallouttext a
{
	color: @dark-red;
}

#blogcallouttext a:hover
{
	color: #DE1C24;
}

/* "leftcallout" is no longer on the left */
#leftcallout 
{
	background-position: @dark-yellow-bp 0;
	.callout-margins(@callout-marg-li,0);
}

#leftcallouttext a
{
	color: @dark-yellow;
}

#leftcallouttext a:hover
{
	color: #DE1C24;
}

#eventscallout
{
	background-position: @dark-violet-bp 0;
	.callout-margins(0,0);

}
#eventscallouttext a
{
	color: @dark-violet;

}

#eventscallouttext a:hover
{
	color: #DE1C24;
}


#midcallout
{
	background-position: @dark-aqua-bp 0;
	.callout-margins(@callout-marg-li,0);
}

#midcallouttext a
{
	color: @dark-aqua;
}

#midcallouttext a:hover
{
	color: #DE1C24;
}

#rightcallout
{
	background-position: @dark-green-bp 0;
	.callout-margins(@callout-marg-li,0);
}

#rightcallouttext a
{
	color: @dark-green;
}

#rightcallouttext a:hover
{
	color: #DE1C24;
}