custom-home.css

File contents

/*Borders and padding are drawn inside the set width of your content and the margin is drawn outside */
*, *:before, *:after { 
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

p {overflow: hidden; /* keeps text from wrapping around floated objects */}


/* ---------------------------------------------------------------------------------------- FEATURES COLLECTION */


#core-content #content-body h2.tileHeadline {font-size: 1.5em}

#content-body img.tileImage {
    float: none;
    margin: 0px;
    width: 350px
}

div.tileItem.visualIEFloatFix {
  border-bottom: 1px dotted #ccc;
  padding-left: 0px;
  max-width: 350px;
  margin-left: auto; 
  margin-right: 40px;
  float:left;
}

.tileItem:nth-child(n+4), .listingBar, .documentByLine, p.tileBody  {display: none}


/* ---------------------------------------------------------------------------------------- FONTS */

#content-body h1, #content-body h2, #content-body h3 {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    letter-spacing: -0.04em;
}

#core-content #content-body h2 {
    font-size: 2.5em;
    line-height: 1em;
    margin: 1em 0px 1em
}

#core-content #content-body h3 {
    font-size: 1.5rem;
    line-height: 1.5;
    letter-spacing: -0.05rem;
    color: #00788a;
    margin-top: 10px;
}

h3.power-word {
    font-size: 40px;
    line-height: 1.5;
    letter-spacing: -0.05rem;
    color: #00788a;
}

#content-body p {
    font-size: 14px;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    margin-bottom: 1em;
}



/* ---------------------------------------------------------------------------------- MARKETING TEMPLATE MODS */

html,body {width: 100%;margin: 0px;padding: 0px;overflow-x: hidden;}

#site-title, #breadcrumbs, h1.title, #document-description, #content-wrapper::after, .visible-phone
{display: none !important;}

header.lower-border #lowerbar {border-bottom: 0px solid #DBDBDB;}

header.lower-grey #lowerbar {background-color: #fff; margin-bottom: 10px; margin-top: 10px}

#social {float: right}
#social img {margin-right: 5px; padding-top: 3px}


div#content-wrapper.span12 { 
    border-top: 0px /* remove red top border */
}

#core-content .main-content {
    background: transparent; /* remove gray-ish bg color */
    box-shadow: none;
}

#content-body .content {margin: 0px}

#content-body {
    padding-bottom: 10px; /* decrease padding at bottom */
    background: transparent /* remove gray-ish bg color */
}

/* makes things full width 
#core-content, #content-wrapper, #hero-rows {
    width: 100%;
}*/

.row {margin-left: 0px} /* why was there negative margins for this in the first place ? */

[class*="span"] {margin-left: 0px;} /* why was there negative margins for this in the first place ? */


@media all and (min-width: 0px) {
  .span4 {width: 100%;}
}

@media all and (min-width: 780px) and (max-width:979px) {
  .span4 {width: 50%; float: left}
  .span4:nth-of-type(3) {width: 100%; float: none; margin-top: 5px; border: 1px red}
  .container {width: 100%}
}


@media all and (min-width: 980px) {
  .span4 {width: 33.33333%;}
}


/* ---------------------------------------------------------------------------BLOCK CONTENT DIMENSIONS AND COLORS */

#section {
    display: block;
    padding: 3em 0em 4em 0em;
}

.row-clear {
    background-color: transparent
}

.row-red {
    background-color: #ad0000;
}

.row-gray {
    background-color: #eee;
}

.wide-1170 {
    max-width: 1170px; 
}

.wide-600 {
    max-width: 600px; 
}

.no-padding {/* removes padding from section */
    padding: 0em;
}

.no-vert-margins {/* removes vertical margins from an image */
    margin-top: 0em;
    margin-bottom: 0em;
}

.center { /* center anything */
text-align: center;
}

#content-body .row-red h2, #content-body .row-red h3, #content-body .row-red p 
{color: #fff;}


/* ------------------------------------------------------------------------------------- HERO BANNER */


#hero {
    margin: 0px auto;
    width: 100%;
    position: relative;
    background-image: url(/artsandsciences/images/banners-bg/thinker-wide.jpg);
    background-size: cover;
    background-position: 50% center;
    background-color: #5FCF80;
    z-index: 2;
    padding: 240px 0px 190px;
}

.caption {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0px;
}
.caption-inner {
    display:table;
    width:1170px;
    margin-right: auto;
    margin-left: auto;
    height:100%;
}

.caption-content {
    display:table-cell;
    vertical-align:middle;
    text-align: left;
    padding-left: 15px;
    padding-right: 50%;
}

#content-body .caption-content h1 {
  font-size: 3.5em;
  font-family: 'Raleway', sans-serif;
    font-weight: 700;
    letter-spacing: -0.04em;
  color: #fff;
  text-shadow: 0px 0px 6px #2d5179;
  padding: 0px;
  line-height: 1em;
}

#content-body .caption-content p {
  font-size: 1.6em;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.2em;
  /*background-color:rgba(255,255,255,0.6);*/
  color: #fff;
  padding: 0px;
  margin: 0% 0%;
}


@media screen and (max-width: 780px) {
    #hero {padding: 200px 0px 150px; background-position: 80% center;}
    .caption-content {vertical-align:bottom; padding-bottom: 15px;}
    #content-body .caption-content h1 {font-size: 2em;}
    #content-body .caption-content p {font-size: 1.5em;}
}


/* ------------------------------------------------------------------------------ FLEXBOX GRID */

.flexbox {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;    /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;  /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */
flex-wrap: wrap;
border: 1px solid red
}

.flex-item {
    display: flex; 
    padding: 1em;
    width: 100%
}

@media all and (min-width: 0em) {
  .flex-item {margin-right: 0px; padding-right: 0em;}
}

@media all and (min-width: 40em) {
  .flex-item {width: 50%;}
}

@media all and (min-width: 60em) {
  .flex-item {width: 31.7%;}
}



/* ---------------------------------------- GRID ITEM CONTENT - CAN BE USED INSIDE OF BOOSTRAP SPAN OR FLEXBOX */

.boxed {border: 0px solid red; padding:10px 20px 10px 20px;}

.box-content {
    background-color: #fff;
    border: 0px solid #ccc;
    background-color: #fff;
    width: 100%; 
    border-radius: 0px 0px 10px 10px;
}

.inner {
    padding: 0px 10px 10px 10px;
}

.box-content img {
    width: 100%;
    padding-bottom: 0px;
}

.box-content p {
    flex: 1 0 auto;
    font-family: 'Open Sans', sans-serif;
    padding-top: 4px
}


/* ------------------------------------------------------------------------------------ EVENTS FEED */

body.marketing #lw {margin: 0 15px; padding-right: 15px; border: 0px solid red} /* outer event container */
            div.lw {} /* inner event container */
            ul#lwe {display: table;} /* entire event list container */

body.marketing #lw li.lwe, body.marketing.secondary-page #lw li.lwe { /*horizontal layout for each event item*/
    float: left;
    margin: 0px 0px 25px 0px;
    padding:0px 20px 0px 0px;
    background-color: #fff;
    border: 0px solid blue
}

body.marketing.secondary-page div.lwn a { /* listing headline font */
    font-weight: normal;
    font-size: 14px !important;
    line-height: 19px;
    font-family: 'Raleway', sans-serif;
    display: table-cell;
    border: 0px solid green
}

body.marketing .lwn a:hover {text-decoration: none}
            
.lwn0 { /* date and time container */
    background: #ad0000; 
    padding: 6px; 
    margin-right: 10px;
    margin-bottom: 10px;
    max-width: 50px;
    height: 50px;
    overflow: hidden;
    display: table-cell;
} 

body.marketing span.lwn0 { /* date and time font */
    margin-top: 3px !important;
    display: block !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 20px;
    font-family: inherit;
    float: left; 
}

.lwi1 { /* event image container */
    float: left;
    padding: 0px 6px 0px 0px;
    margin: 0px;
}

body.marketing .lwi { /* event image treatment */
    border-radius: 0%;
    height: auto;
    width: auto;
    padding: 2px;
}

lwi0, div.lwl, .lwi {
display: none
}

@media all and (max-width: 679px) {
  body.marketing #lw li.lwe, body.marketing.secondary-page #lw li.lwe {width: 100%; float: none}
}

@media all and (min-width: 680px) and (max-width:979px) {
  body.marketing #lw li.lwe, body.marketing.secondary-page #lw li.lwe {width: 50%;}
  body.marketing #lw {margin: 0 15px; padding-right: 1em} 
}


@media all and (min-width: 980px) {
  body.marketing #lw li.lwe, body.marketing.secondary-page #lw li.lwe {width: 25%;}
  body.marketing #lw {margin: 0px; padding: 0px} 
}


/* ------------------------------------------------------------------------------ Buttons */

a.button, a.button-inverted {
    color: #333;
    background-color:transparent;
    border: 1px solid #ccc;
    border-radius: 50px; 
    display: inline-block;
    height: 38px;
    padding: 0px 30px 15px 30px;
    text-align: center;
    font-size: 14px;
    line-height: 38px;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    letter-spacing: -0.01em;;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box; 
    margin: 10px 0px 12px 0px
}

a.button-inverted {color: #fff;}

a.button:hover, a.button-inverted:hover {
    color: #000;
    background-color:#fdb913; 
    text-decoration: none;
    border: 1px solid #fdb913;
}

/* -------------------------------------------------------------- CUSTOM BOOSTRAP CAROUSEL STYLES */

.carousel {background-color: #ccc; max-width: 1920px; margin-left: auto; margin-right: auto;}

.carousel-inner {
    background-color: #ccc;
    overflow: hidden;
    margin: 0 auto; 
    text-align: center;
}

.carousel-inner .item {
    transition: .5s, ease-in-out, fade;
}

.item img {
    min-height: 300px; 
    min-width: 950px;   
    float:right;
    position: relative; 
}

.carousel-caption {
    position: absolute;
    background-color:transparent;
    min-width: 10%;
    text-align: left;
    padding: 15px;
    margin: auto;
    left: 50px;
    right: 50px;
    bottom: 10px;
    top: auto;
}


#content-body .carousel-caption h1 {
  font-size: 3.5em;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #fff;
  text-shadow: 0px 0px 6px transparent ;
  padding: 0px;
  line-height: 1em;
  color:rgba(255,255,255,0.8);
  line-height: .9em;
  max-width: 1250px;
}

#content-body .carousel-caption p {
  font-size: 2em;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.2em;
  background-color:rgba(86,138,197,0.8);
  color: #fff;
  padding: 10px;
  margin: 0% 0%;
}

.carousel-indicators {
    position: relative;
    cursor: pointer;
    bottom: -10px;
    top: auto;
    left: auto;
    right:auto;
    width: 100%;
    float:right;
    list-style: none;
}

.carousel-indicators li {background-color:rgba(180,180,180,0.6);}
.carousel-indicators .active, .carousel-indicators li:hover {background-color: #5b6f7b;}

.carousel-control {
    top: 50%;
    width: 20px;
    height: 20px;
    margin-top: 0px;
    background: transparent;
    border: 0px;
    opacity: 0.2;
}

@media all and (max-width:879px) {
    .carousel-inner {max-height: auto; min-height: auto;}
    .carousel-caption {left: 0px; right: auto;}
    #content-body .carousel-caption p {font-size: 1.5em;}
    .carousel-control {display: none}
}

@media all and (max-width: 450px) {
 .first-slide {left:  50%; margin-left: -100%;}
.second-slide {left:  50%; margin-left: -100%;}
 .third-slide {left: 125%; margin-left: -250%;}
.fourth-slide {left: 125%; margin-left: -250%;}
 .fifth-slide {left:  75%; margin-left: -150%;}
}

@media all and (min-width:0px) and (max-width: 379px) {
#content-body .carousel-caption h1 {font-size: 2.5em; max-width:250px;}
}

@media all and (min-width:380px) and (max-width: 779px) {
#content-body .carousel-caption h1 {font-size: 3em; max-width:300px;}
}

@media all and (min-width:780px) and (max-width: 1269px) {
#content-body .carousel-caption h1 {font-size: 5em; max-width:500px;}
}

@media all and (min-width:1270px) and (max-width: 1400px) {
#content-body .carousel-caption h1 {font-size: 8em; max-width:700px;}
}
    

/*
  Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
  Inspired from:  http://codepen.io/Rowno/pen/Afykb 

*/
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 1s
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}


/* WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
  Need to override the 3.3 new styles for modern browsers & apply opacity*/


@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}