homepage.css
homepage.css
—
CSS stylesheet,
21 KB (22310 bytes)
File contents
/* SOCIAL ICONS IN HEADER */
#tertiary-menu img, #prefooter img {
margin: 5px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
#tertiary-menu img:hover, #prefooter img:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
#tertiary-menu img {width: 25px;}
#prefooter div.span4 img {width: 200px;}
#prefooter div.span1 img {width: 38px;}
/* TEXT OVERLAY ONTO IMAGE */
#news .span4 .textover:nth-child(2) {margin-top:20px}
@media (max-width: 767px) {
#news .span4 {width: 100%; margin-left: 0px}
#news .span4 .textover {margin-top:20px}
#core-content {padding: 0;}
body {background-image: none;}
}
.textover {
position:relative;
clear:none;
width: 100%;
margin-bottom: 0px;
overflow: hidden;
}
.textover img {
position:relative;
z-index:1;
width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
overflow: hidden
}
.textover:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
#content-body .textover h3, #home-bottom-content .textover h2 {font-size: 3em;}
#content-body .textover h3, #home-bottom-content .textover h3 {font-size: 1.5em;}
.textover h2 a, .textover h3 a {color: #fff !important;}
.textover h2 a:hover, .textover h3 a:hover {text-decoration: none !important;}
@media (max-width: 979px) {
.textover h3 {font-size: 120% !important;}
}
@media (max-width: 480px) {
.textover h2 {font-size: 120% !important;}
}
#content-body .textover h2, #home-bottom-content .textover h2, #content-body .textover h3, #home-bottom-content .textover h3 {
font-weight: 700;
font-family: 'Source Sans Pro', sans-serif;
letter-spacing: -.04em;
line-height:1em;
color: #fff;
text-shadow: 1px 1px 2px #333;
display:block;
position:absolute;
width:100%;
z-index:2;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
bottom: 0px;
left: 0;
padding: 0px 10px 10px 10px;
margin-bottom: 0px !important
}
.textover:after {
position: absolute;
top: 0; left: 0;
z-index: 100;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
padding: 5px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
#news .span8 .textover:nth-child(1):after {content: "Top Story"}
#news .span4 .textover:nth-child(1):after {content: "Faculty Research"}
#news .span4 .textover:nth-child(2):after {content: "In the Media"}
/* LARGE NUMBERS IN INFOGRAPHIC */
.largenum {
color: #fff;
font-size: 60px;
font-weight: 200;
letter-spacing: -.03em;
line-height: .9;
white-space: pre;
}
/*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;
}
/* HERO BANNER */
#hero {
margin-left: auto;
margin-right: auto;
max-width: 1170px;
position: relative;
background-size: cover;
background-repeat:no-repeat;
background-position: 75%/*horiz*/ top/*vert*/;
padding:0;
height: 500px
}
.hero-text {
position:absolute;
top:0;
left: 10%;
right:0;
bottom:0px;
background-color:rgba(0,0,0,0.0);
height: 100%
}
.hero-text-inner {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#hero h1, #hero h2, #hero h3, #hero h4, #hero p {
font-family: 'Source Sans Pro', sans-serif; !important;
letter-spacing: -0.04em; !important;
line-height: 1em;
text-shadow: 0px 0px 6px #000;
}
#content-body #hero h1 {
font-size: 6em;
font-weight: 700;
color: #fdb913;
margin: 0px 0px !important
}
#content-body #hero h2 {
font-size: 3em;
font-weight: 300;
color: #fff;
}
#content-body #hero h3 {
font-size: 1.8em;
font-weight: 700;
color: #fff;
text-transform: uppercase;
}
#content-body #hero p {
font-size: 1.5em;
font-weight: 300;
color: #fff;
}
@media screen and (max-width: 480px) {
#content-body #hero h2 {width: 75%}
}
@media screen and (max-width: 769px) {
.hero-text {left: 0;}
}
@media screen and (max-width: 1170px) {
.hero-text-inner {padding-left: 10px}
}
/* OTHER SECTIONS */
#news {
position: relative;
margin-left: auto;
margin-right: auto;
max-width: 1170px;
background-color: #fff;
padding: 20px;
box-shadow: rgb(77, 77, 77) 0 3px 10px;
-moz-box-shadow: rgb(77, 77, 77) 0 3px 10px;
-webkit-box-shadow: rgb(77, 77, 77) 0 3px 10px;
box-shadow: rgba(0, 0, 0,.7) 0 3px 10px;
-moz-box-shadow: rgba(0, 0, 0,.7) 0 3px 10px;
-webkit-box-shadow: rgba(0, 0, 0,.7) 0 3px 10px;
}
#defend {
position: relative;
background-image: url(/artsandsciences/images/banners-bg/thinker-monochrome.png);
background-size: cover;
background-repeat:no-repeat;
background-position: 80% 0%;
margin-bottom:0px;
background-color: transparent;
text-align: center;
width: 100%;
margin-top: 20px;
padding:20px
}
#defend img {width: 95px; padding: 10px}
#info {
background-image: url(/artsandsciences/images/banners-bg/graduation-speaker.jpg);
background-size: cover;
background-repeat:no-repeat;
background-position: 50% top;
padding: 100px 50px;
margin-top: -50px;
}
#info p {font-weight: bold !important; text-transform: uppercase; margin-bottom: 0px !important}
#info .row-fluid {margin-top: 1.55%;}
#info [class*="span"] {background-color: rgba(0, 0, 0, 0.5)}
/* ------------------------------------------------------------------------------ Masonary text over image grid */
.masonry {
column-count: 4;
-moz-column-gap: .5em;
-webkit-column-gap: .5em;
column-gap: .5em;
margin-right: auto;
margin-left: auto;
max-width: 1170px;
margin-top: 30px;
margin-bottom: 30px
}
.m-item {
display: inline-block;
width: 100%;
height: auto;
position:relative;
clear:none;
padding: 10px;
margin-bottom: 5px;
overflow: hidden;
text-align: center;
background-color: rgba(0, 0, 0, 0.5)
}
.nobg {background-color: transparent}
@media all and (max-width: 399px) {
.masonry {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
@media all and (min-width: 400px) and (max-width: 767px) {
.masonry {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media all and (min-width: 767px) {
.masonry {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
/* FOOTER RE-STYLE */
#prefooter_wrapper {
background-color: #000;
border: none;
margin-top: 0px;
font-size: inherit;
text-shadow: none;
color: #fff;
padding: 50px 0px;
}
#prefooter.light {
background: inherit !important;
margin-bottom: 10px;
}
#prefooter p {
font-size: 1em !important;
margin-bottom: 10px;
}
#prefooter.light, #prefooter.light a {
background-color: transparent;
color: #ccc;
}
#prefooter.light a:hover {
color: #fdb913;
}
/* BACKGROUND AND FONT COLORATION FOR ANY DIV */
.row-white {background-color: #fff;}
.row-black {background-color: #333;}
.row-gray {background-color: #eee;}
.row-red {background-color: #ad0000;}
.row-blue {background-color: #00788a;}
.row-translucent {background-color: rgba(255, 255, 255, 0.5)}
.row-red h1, .row-red h2, .row-red h3, .row-red p, .row-red .discreet,
.row-black h1, .row-black h2, .row-black h3, .row-black p, .row-black .discreet,
.row-blue h1, .row-blue h2, .row-blue h3, .row-blue p, .row-blue .discreet
{color: #fff !important}
.row-red a, .row-black a, .row-blue a
{color: #eee !important;}
.row-red a:hover, .row-black a:hover, .row-blue a:hover
{color: #fdb913 !important;}
.row-red a.button:hover {color: #333 !important}
.center {text-align: center;} /* center anything */
/* ------------------------------------------------------------------------------ Buttons */
a.button {
color: #666;
background-color:transparent;
border: 1px solid #ccc;
border-radius: 50px;
display: inline-block;
height: 50px;
padding: 5px 30px 15px 30px;
text-align: center;
font-size: 18px;
line-height: 38px;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
letter-spacing: -0.01em;;
white-space: nowrap;
cursor: pointer;
margin: 0px
}
a.button:hover {
color: #333;
background-color:#fdb913;
text-decoration: none;
border: 1px solid #fdb913;
}
a.button-alt {
color: #eee;
background-color:rgba(0,0,0,0.5);
border: 1px solid #eee;
border-radius: 50px;
display: inline-block;
height: 50px;
padding: 5px 30px 15px 30px;
text-align: center;
font-size: 18px;
line-height: 38px;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
letter-spacing: -0.01em;;
white-space: nowrap;
cursor: pointer;
margin: 0px
}
a.button-alt:hover {
color: #333 !important;
background-color:#fdb913;
text-decoration: none;
border: 1px solid #fdb913;
}
a.button-huge {
color: #333;
background-color:#ccc;
border: 1px solid #ccc;
border-radius: 0px;
display: inline-block;
height: 100px;
width: 100%;
padding: 60px 30px 100px;
text-align: center;
font-size: 28px;
line-height: 38px;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
letter-spacing: -0.01em;;
white-space: nowrap;
cursor: pointer;
margin: 0px
}
a.button-huge:hover {
color: #333;
background-color:#fdb913;
text-decoration: none;
border: 1px solid #fdb913;
}
/* MISC */
@media screen and (max-width: 767px) { /* removes accordion header and mini footer */
.accordion-heading, footer {display: none}
}
.uofl-navbar #nav-main .nav > li:last-child { /* removes last nav item */
display: none !important
}
/* FONTS */
#content-body h1, #content-body h2, #content-body h3, #content-body h4, h1, h2, h3, h4 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
letter-spacing: -0.04em;
}
#content-body h1, h1 {
font-size: 3em;
margin: 35px 0px 27px 0px;
color: #00788a;
}
#content-body h2 {
font-size: 2.5em;
line-height: 1em;
margin: 1em 0 .5em 0 !important;
}
#content-body h3, h3 {
font-size: 1.5rem;
line-height: 1;
letter-spacing: -0.05rem;
color: #666;
margin: 30px 0px 10px 0px;
}
#content-body h4, h4 {
font-size: 1.2rem;
line-height: 1;
text-transform: none;
letter-spacing: -0.05rem;
color: #00788a;
margin: 20px 0px 0px 0px;
}
#content-body p, p, body.marketing.secondary-page div.lwn a {
font-size: 18px !important;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
margin-bottom: 1em;
}
.discreet {
font-weight: 300;
font-style: italic;
}
#content-body p.quote, .sidebar p.quote, p.quote {
font-family: Georgia, sans-serif;
color: #2a4a62;
font-style: italic;
font-size: 150%;
text-shadow: 0px 1px 0px #fff;
line-height: 1.618;
margin-top: 10px;
}
@media all and (max-width: 480px) {
#content-body h1, h1 {font-size: 2em; margin: 5px 5px 5px 0px; line-height: 1em;}
#content-body h2 {font-size: 1.8em;}
#content-body h3, h3 {font-size: 1.2rem;}
#content-body h4, h4 {font-size: 1rem;}
#content-body p, p {font-size: 16px;}
#content-body p.quote, .sidebar p.quote, p.quote {font-size: 110%;}
}
h2.tileHeadline {font-size: 1.5em !important}
/* MARKETING TEMPLATE MODS */
html,body {width: 100%; margin: 0px; padding: 0px; overflow-x: hidden;}
#breadcrumbs, #document-description, #content-wrapper::after, .visible-phone, .static-text.span4:after, div.news.span4:after, h1.title
{display: none !important;}
#lowerbar {background-color: #fff; border-bottom: 0px; margin-bottom: 0px; margin-top: 0px}
#social {float: right}
#social img {margin-right: 5px; padding-top: 4px}
#core-content .main-content {
background: transparent; /* remove gray-ish bg color */
}
#core-content {margin-top: 0px;}
#content-body .content {margin: 0px}
#content-body {
padding-bottom: 0px; /* decrease padding at bottom */
background: transparent /* remove gray-ish bg color */
}
#hero-rows, #core-content, #content-wrapper {/* making things full width */
width: 100%;
margin-bottom: 0px
}
.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 ? */
div#content-wrapper.span12, div#content-wrapper.span9 {
border-top: 0px /* remove red top border */
}
div#content-wrapper.span9 {margin-right: 30px;padding-right: 20px}
#core-content > div > div { /* removed red bar above right column portlet */
border-top: 0px solid #AD0000;
}
#core-content .sidebar {
margin:30px 0px;
}
div.accordion-inner p {padding: 0px;}
.accordion-inner {padding: 0px; border-top: 0px solid #e5e5e5;}
@media (max-width: 767px) {
#core-content .sidebar {margin: 10px 0px; 20px; border-top: 1px dotted #ccc}
}
#core-content .main-content, #core-content .sidebar, #social-counters {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.sidebar .accordion-group {background-color: transparent;}
.sidebar .accordion-group .accordion-heading a {
font-weight: bold;
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
color: #00788a !important;
text-transform: none;
}
.accordion-heading .accordion-toggle {padding: 8px 0px;}
#content-body .description {font-size: inherit;}
body.marketing.secondary-page div.lwn a {
font-weight: 400 !important;
}
.uofl-navbar li.plain a:hover, .uofl-navbar li.dropdown a:hover {color: #fdb913}
footer.white {background-color: #000;}
div.tileItem.visualIEFloatFix:last-child, body.marketing.secondary-page #lw li.lwe:last-child {
border-bottom: 0px dotted #ccc;
}
body.marketing.secondary-page #lw li.lwe {
margin-bottom: 10px; padding-bottom: 30px; border-bottom: 1px dotted #ccc;
}
#news a.button {margin-top: 50px;}
.tileFooter {text-align: right}
/* NAVBAR WITH FULL WIDTH BACKGROUND COLOR
div#navbar.container {background-color: #00788a; width: 100%;}
.uofl-navbar {width: 1170px; margin-left: auto; margin-right: auto; border: 0px solid red}
.uofl-navbar .nav li a {color: #fff}
*/
body {
background-image: url('/artsandsciences/images/background-grey-stripe.png');
background-position: 0 750px;
background-color: #000;
}
/* BLACK HEADER FOR THE I THINK BANNERS
header, #upperbar, #lowerbar, #navbar {background-color: #000 !important; border: 0px !important}
.uofl-navbar .nav > li > a {color: #fff; !important}
@media (max-width: 980px) {
.uofl-navbar .nav > li > a {color: inherit;}
}
*/
/* WHITE HEADER FOR THE I THINK BANNERS */
div#navbar.container {width: 100%}
.uofl-navbar {
width: 1170px;
margin-left: auto;
margin-right: auto;
}
/* CUSTOM BOOSTRAP CAROUSEL STYLES */
.carousel {background-color: #000; max-width: 1170px; margin-left: auto; margin-right: auto;}
.carousel-inner {overflow: hidden;}
.carousel-constant {
position: absolute;
right: 0;
left: 10%;
bottom: auto;
top: 0px;
padding: 15px;
background: transparent;
z-index: 101
}
.carousel-caption {
position: absolute;
right: 0;
left: 10%;
bottom: 0px;
top: 30%;
padding: 15px;
background: transparent;
}
/* ADDS GRADIENT TO LEFT AND RIGHT OF CAROUSEL ITEMS - PUT EMPTY DIV WITH THIS ABOVE CAROUSEL-INNER AND INCREASE Z-INDEX OF CONTROLS */
.carousel-overlay-left {
z-index: 100;
position: absolute;
right: 90%;
left: 0;
bottom: 0;
top: 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,7db9e8+100&1+0,0+100 */
background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */
}
.carousel-overlay-right {
z-index: 100;
position: absolute;
right: 0;
left: 90%;
bottom: 0;
top: 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7db9e8+0,000000+100&0+0,1+100 */
background: -moz-linear-gradient(left, rgba(125,185,232,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(125,185,232,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(125,185,232,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
}
.item img {
min-height: 300px;
min-width: 900px;
}
.carousel-caption h1, .carousel-caption h2, .carousel-caption h3, .carousel-caption h4 {text-shadow: 1px 1px 6px #000;}
#content-body .carousel-caption h1 {
font-size: 6em;
font-weight: 700;
color: #fdb913;
margin: 10px 0px !important;
}
#content-body .carousel-constant h2 {
font-size: 3em;
font-weight: 300;
color: #fff;
}
#content-body .carousel-caption h3 {
font-size: 1.8em;
font-weight: 700;
color: #c2d1d3;
text-transform: uppercase;
padding: 0px !important;
margin-bottom: 0px;
line-height: 40px;
}
#content-body .carousel-caption h4 {
font-size: 1em;
font-weight: 300;
color: #fff;
line-height: 1;
letter-spacing: inherit;
margin: 10px 0px 30px 0px
}
#content-body .carousel-caption p {z-index: 101}
.carousel-control {
position: absolute;
top: 50%;
left: 15px;
width: 40px;
height: 40px;
margin-top: -20px;
font-size: 50px;
font-weight: 100;
line-height: 30px;
color: #ccc;
text-align: center;
background: none;
border: none;
opacity: 0.2;
filter: alpha(opacity=20);
z-index: 100;
}
.carousel-indicators {z-index: 101;}
.carousel-indicators li {background-color:rgba(180,180,180,0.7);}
.carousel-indicators .active, .carousel-indicators li:hover {background-color: #00788a; cursor: pointer}
@media screen and (max-width: 768px) {
.item img {left: 50%; transform: translate(-15%, 0);}
}
@media screen and (max-width: 500px) {
.item img {left: 50%; transform: translate(-50%, 0);}
.carousel-caption h1, .carousel-caption h2, .carousel-caption h3, .carousel-caption h4 {text-align: center;}
#content-body .carousel-caption h1 {font-size: 3em;}
#content-body .carousel-constant h2 {font-size: 2.2em; margin-top: 0.5em !important; color: #444; text-align: center}
#content-body .carousel-caption h3 {font-size: 1.5em; margin-top: 0px; line-height: 20px}
#content-body .carousel-caption h4 {margin: 10px 0px 10px 0px}
#content-body .carousel-caption p {text-align: center}
.carousel-caption, .carousel-constant {left: 0; top: 40%}
.carousel-constant {position: relative; background-color: #fff}
.carousel-control {display: none}
.carousel-indicators {top: 115px; left: 15px}
}
/*
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;
}
.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: 101;
}
@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);
}
}
*/
