/* 
    Document   : callouts
    Created on : Dec 26, 2011, 10:19:44 PM
    Author     : danielcarter
    Description:
        Callout Region 
*/

/*************************
 * SIDEBAR HOME CALLOUTS
 */
body.front #sidebar-second{
	top: -45px;
}

div.front_callout{
    background-color: black;
    height:80px;
    width:340px;
    margin: 0 0 1px 0;
    overflow:hidden;
    z-index: 14;	
}

div.front_callout h2{
	font-family: "Arial", sans-serif;
	font-size:14px;
	font-weight: bold;
	color: white;
	padding: 0;
	margin: 0;
}

div.front_callout p{
	font-family: "Arial", sans-serif;
	font-size:12px;
	font-weight: normal;
	color: white;
	padding: 0;
	margin: 0;
}

div.front_callout p a{
	color: white;
	text-decoration:none;
}


div.front_callout .callout_box_image{
	float:left;
	width:130px;
	overflow:hidden;
}

div.front_callout .callout_box_text{
	float:left;
	padding: 10px 15px;
	width:180px;
}



/**************************
 * HOME APPLY HERO CALLOUT
 */

#hero .section .region .block-block.apply_today{
	position:absolute;
	left:490px;
	z-index: 14;
	width:582px;
	background-color:black;
	height: 40px;
}

#home_apply_plus{
	float:left;
	line-height:40px;
	height:40px;
	width:20px;
	background-color: #f2322b;
	color: white;
	font-size:15px;
	font-weight:bold;
	font-family:"Helvetica", "Verdana", sans-serif;
	text-align:center;
}

#home_apply_text{
	float:left;
	line-height:40px;
	padding: 0 3px;
	font-family: "Georgia", serif;
	font-style:italic;
	color: white;
}

#home_apply_text a{
	font-family: "Helvetica", "Verdana", sans-serif;
	font-size: 10px;
	font-style:normal;
	font-weight:bold;
	text-transform:uppercase;
	margin-left: 8px;
	color: #F2322B;
}

/* =========================================================================
   Front-page teaser mosaic (D7 four_image_panel layout).

   The migrated teaser_card paragraphs render as a flat row of equal .field-item
   tiles. On the front page D7 arranged the four cards as a mosaic: a tall
   480x670 tile (card 1) on the left, a wide 480x335 tile (card 2) top-right,
   and two 240x335 tiles (cards 3 & 4) bottom-right. Pure floats reproduce this
   because the tall left tile forces the small tiles under the wide one. Per-card
   image styles are applied in responsiveqriver_preprocess_paragraph(). Desktop
   only — the mobile stylesheet (@media max-width:900px) stacks the cards.
   ========================================================================= */
@media only screen and (min-width: 901px) {
  .front .field.field-name-field-teaser-image.field-type-field-collection > .field-items {
    position: relative;
    width: 960px;
    height: 670px;
    margin: 20px auto 40px;
  }
  /* Fixed tile sizes/positions are deterministic, so place them absolutely
     rather than relying on float reflow (which wrapped tile 4 under tile 1). */
  .front .field.field-name-field-teaser-image.field-type-field-collection > .field-items > .field-item {
    position: absolute;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  .front .field-name-field-teaser-image > .field-items > .field-item:nth-child(1) { left: 0;     top: 0;     width: 476px; height: 666px; }
  .front .field-name-field-teaser-image > .field-items > .field-item:nth-child(2) { left: 480px; top: 0;     width: 480px; height: 331px; }
  .front .field-name-field-teaser-image > .field-items > .field-item:nth-child(3) { left: 480px; top: 335px; width: 236px; height: 331px; }
  .front .field-name-field-teaser-image > .field-items > .field-item:nth-child(4) { left: 720px; top: 335px; width: 240px; height: 331px; }

  /* Make the collection wrappers fill the tile. */
  .front .field-name-field-teaser-image > .field-items > .field-item .field-collection-view,
  .front .field-name-field-teaser-image > .field-items > .field-item .entity-field-collection-item {
    height: 100%;
    margin: 0;
  }
  .front .field-name-field-teaser-image > .field-items > .field-item .content {
    position: relative;
    height: 100%;
    box-sizing: border-box;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  /* Image as the background layer of the tile. */
  .front .field-name-field-teaser-image > .field-items > .field-item .field-name-field-teaser-image-small {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    margin: 0;
  }
  .front .field-name-field-teaser-image > .field-items > .field-item .field-name-field-teaser-image-small .field-items,
  .front .field-name-field-teaser-image > .field-items > .field-item .field-name-field-teaser-image-small .field-item {
    width: 100%;
    height: 100%;
    margin: 0;
    float: none;
  }
  .front .field-name-field-teaser-image > .field-items > .field-item .field-name-field-teaser-image-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Bottom-weighted darkening for caption legibility. */
  .front .field-name-field-teaser-image > .field-items > .field-item .content::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.7));
  }

  /* Caption text flows at the bottom of the tile, over the image. */
  .front .field-name-field-teaser-image > .field-items > .field-item .field-name-field-teaser-title,
  .front .field-name-field-teaser-image > .field-items > .field-item .field-name-field-teaser-title .field-item {
    position: relative;
    z-index: 2;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    margin: 0 0 6px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.15;
    text-transform: uppercase;
  }
  .front .field-name-field-teaser-image > .field-items > .field-item .field-name-field-teaser-text,
  .front .field-name-field-teaser-image > .field-items > .field-item .field-name-field-teaser-text .field-item {
    position: relative;
    z-index: 2;
    top: auto;
    width: auto;
    height: auto;
    margin: 0 0 8px;
    color: #fff;
    font-size: 13px;
    line-height: 1.3;
  }
  .front .field-name-field-teaser-image > .field-items > .field-item .field-name-field-teaser-read-more,
  .front .field-name-field-teaser-image > .field-items > .field-item .field-name-field-teaser-read-more .field-item,
  .front .field-name-field-teaser-image > .field-items > .field-item .field-name-field-teaser-read-more a {
    position: relative;
    z-index: 2;
    top: auto;
    margin: 0;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
  }
}